Revert "(feat): Rendering of Labels and Arguments."

This reverts commit f705832.

Author: meganindya

modules/code-builder/src/@types/brick.d.ts

@@ -107,8 +107,6 @@ export interface IBrick extends IBrickStyle {
     /** glyph icon associated with the brick */
     get glyph(): string;
 
-    get labelWidth(): number;
-    set labelWidth(value: number);
     // states
     /** whether brick is highlighted */
     highlighted: boolean;

modules/code-builder/src/brick/design0/BrickBlock.ts

@@ -48,12 +48,13 @@ export default class BrickBlock extends BrickModelBlock {
 
         const path = generatePath({
             hasNest: true,
+            hasNotchNest: true,
             hasNotchArg: true,
             hasNotchInsTop: this._connectAbove,
             hasNotchInsBot: this._connectBelow,
             scale: this._scale,
             nestLengthY: 30,
-            innerLengthX: this.labelWidth,
+            innerLengthX: 100,
             argHeights: Array.from({ length: argsLength }, () => 17),
         }).path;
 

modules/code-builder/src/brick/design0/BrickData.ts

@@ -41,7 +41,7 @@ export default class BrickData extends BrickModelData {
             hasNotchInsTop: false,
             hasNotchInsBot: false,
             scale: this._scale,
-            innerLengthX: this.labelWidth,
+            innerLengthX: 100,
             argHeights: [],
         }).path;
 

modules/code-builder/src/brick/design0/BrickExpression.ts

@@ -51,7 +51,7 @@ export default class BrickExpression extends BrickModelExpression {
             hasNotchInsTop: false,
             hasNotchInsBot: false,
             scale: this._scale,
-            innerLengthX: this.labelWidth,
+            innerLengthX: 100,
             argHeights: Array.from({ length: argsLength }, () => 17),
         }).path;
 

modules/code-builder/src/brick/design0/BrickStatement.ts

@@ -52,7 +52,7 @@ export default class BrickStatement extends BrickModelStatement {
             hasNotchInsTop: true,
             hasNotchInsBot: true,
             scale: this._scale,
-            innerLengthX: this.labelWidth,
+            innerLengthX: 100,
             argHeights: Array.from({ length: argsLength }, () => 17),
         }).path;
 

modules/code-builder/src/brick/design0/components/BrickBlock.tsx

@@ -1,31 +1,14 @@
 import type { IBrickBlock } from '@/@types/brick';
-import { useEffect, useRef, useState } from 'react';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function (props: { instance: IBrickBlock }): JSX.Element {
   const { instance } = props;
-  const [svgString, setSvgString] = useState<string>('');
-  const label = useRef<SVGTextElement>(null);
-  const [argLabels, setArgLabels] = useState<string[]>([]);
-
-  useEffect(() => {
-    const labelWidth = label.current?.getBBox();
-    const args = instance.args;
-    let argMaxWidth = 0;
-    for (let arg in args) {
-      setArgLabels((argLabels) => [...argLabels, args[arg].label]);
-      argMaxWidth = Math.max(argMaxWidth, args[arg].label.length);
-    }
-    const width = (labelWidth?.width as number) + argMaxWidth * 12.8 + 40;
-    instance.labelWidth = width;
-    setSvgString(instance.SVGpaths[0]);
-  }, []);
 
   return (
-    <g transform={`scale(${instance.scale})`} id="svg1">
+    <g transform={`scale(${instance.scale})`}>
       <path
-        d={svgString}
+        d={instance.SVGpaths[0]}
         style={{
           fill: instance.colorBg as string,
           fillOpacity: 1,
@@ -35,30 +18,6 @@ export default function (props: { instance: IBrickBlock }): JSX.Element {
           strokeOpacity: 1,
         }}
       />
-      <text
-        ref={label}
-        x="12%"
-        y="8%"
-        dominantBaseline="middle"
-        style={{
-          fontSize: '0.8em',
-        }}
-      >
-        {instance.label}
-      </text>
-      {argLabels.map((argLabel, index) => (
-        <text
-          key={index}
-          x={`${(label.current?.getBBox().width as number) + (index + 1)}%`}
-          y="8%"
-          dominantBaseline="middle"
-          style={{
-            fontSize: '0.8em',
-          }}
-        >
-          {argLabel}
-        </text>
-      ))}
     </g>
   );
 }

modules/code-builder/src/brick/design0/components/BrickData.tsx

@@ -1,22 +1,12 @@
 import type { IBrickData } from '@/@types/brick';
-import { useEffect, useRef, useState } from 'react';
 
 export default function (props: { instance: IBrickData }): JSX.Element {
   const { instance } = props;
-  const [svgString, setSvgString] = useState<string>('');
-  const label = useRef<SVGTextElement>(null);
-
-  useEffect(() => {
-    const labelWidth = label.current?.getBBox();
-    const width = (labelWidth?.width as number) + 20;
-    instance.labelWidth = width;
-    setSvgString(instance.SVGpaths[0]);
-  }, []);
 
   return (
     <g transform={`scale(${instance.scale})`}>
       <path
-        d={svgString}
+        d={instance.SVGpaths[0]}
         style={{
           fill: instance.colorBg as string,
           fillOpacity: 1,
@@ -26,17 +16,6 @@ export default function (props: { instance: IBrickData }): JSX.Element {
           strokeOpacity: 1,
         }}
       />
-      <text
-        ref={label}
-        x="5%"
-        y="8%"
-        dominantBaseline="middle"
-        style={{
-          fontSize: '0.8em',
-        }}
-      >
-        {instance.label}
-      </text>
     </g>
   );
 }

modules/code-builder/src/brick/design0/components/BrickExpression.tsx

@@ -1,31 +1,14 @@
 import type { IBrickExpression } from '@/@types/brick';
-import { useEffect, useRef, useState } from 'react';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function (props: { instance: IBrickExpression }): JSX.Element {
   const { instance } = props;
-  const [svgString, setSvgString] = useState<string>('');
-  const label = useRef<SVGTextElement>(null);
-  const [argLabels, setArgLabels] = useState<string[]>([]);
-
-  useEffect(() => {
-    const labelWidth = label.current?.getBBox();
-    const args = instance.args;
-    let argMaxWidth = 0;
-    for (let arg in args) {
-      setArgLabels((argLabels) => [...argLabels, args[arg].label]);
-      argMaxWidth = Math.max(argMaxWidth, args[arg].label.length);
-    }
-    const width = (labelWidth?.width as number) + argMaxWidth * 12.8 + 40;
-    instance.labelWidth = width;
-    setSvgString(instance.SVGpaths[0]);
-  }, []);
 
   return (
     <g transform={`scale(${instance.scale})`}>
       <path
-        d={svgString}
+        d={instance.SVGpaths[0]}
         style={{
           fill: instance.colorBg as string,
           fillOpacity: 1,
@@ -35,30 +18,6 @@ export default function (props: { instance: IBrickExpression }): JSX.Element {
           strokeOpacity: 1,
         }}
       />
-      <text
-        ref={label}
-        x="5%"
-        y="8%"
-        dominantBaseline="middle"
-        style={{
-          fontSize: '0.8em',
-        }}
-      >
-        {instance.label}
-      </text>
-      {argLabels.map((argLabel, index) => (
-        <text
-          key={index}
-          x={`${(label.current?.getBBox().width as number) - 18}%`}
-          y="8%"
-          dominantBaseline="middle"
-          style={{
-            fontSize: '0.8em',
-          }}
-        >
-          {argLabel}
-        </text>
-      ))}
     </g>
   );
 }

modules/code-builder/src/brick/design0/components/BrickStatement.tsx

@@ -1,31 +1,14 @@
 import type { IBrickStatement } from '@/@types/brick';
-import { useEffect, useRef, useState } from 'react';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function (props: { instance: IBrickStatement }): JSX.Element {
   const { instance } = props;
-  const [svgString, setSvgString] = useState<string>('');
-  const label = useRef<SVGTextElement>(null);
-  const [argLabels, setArgLabels] = useState<string[]>([]);
-
-  useEffect(() => {
-    const labelWidth = label.current?.getBBox();
-    const args = instance.args;
-    let argMaxWidth = 0;
-    for (let arg in args) {
-      setArgLabels((argLabels) => [...argLabels, args[arg].label]);
-      argMaxWidth = Math.max(argMaxWidth, args[arg].label.length);
-    }
-    const width = (labelWidth?.width as number) + argMaxWidth * 12.8 + 40;
-    instance.labelWidth = width;
-    setSvgString(instance.SVGpaths[0]);
-  }, []);
 
   return (
     <g transform={`scale(${instance.scale})`}>
       <path
-        d={svgString}
+        d={instance.SVGpaths[0]}
         style={{
           fill: instance.colorBg as string,
           fillOpacity: 1,
@@ -35,30 +18,6 @@ export default function (props: { instance: IBrickStatement }): JSX.Element {
           strokeOpacity: 1,
         }}
       />
-      <text
-        ref={label}
-        x="8%"
-        y="8%"
-        dominantBaseline="middle"
-        style={{
-          fontSize: '0.8em',
-        }}
-      >
-        {instance.label}
-      </text>
-      {argLabels.map((argLabel, index) => (
-        <text
-          key={index}
-          x={`${(label.current?.getBBox().width as number) - 18}%`}
-          y="8%"
-          dominantBaseline="middle"
-          style={{
-            fontSize: '0.8em',
-          }}
-        >
-          {argLabel}
-        </text>
-      ))}
     </g>
   );
 }

modules/code-builder/src/brick/model.ts

@@ -34,8 +34,6 @@ abstract class BrickModel implements IBrick {
     protected _outline: TBrickColor;
     protected _scale: number;
 
-    public labelWidth = 0;
-
     public highlighted = false;
 
     constructor(params: {