feat(masonry): Add currentState function for react props in BrickBloc…

…k.ts
sugarlabs · Sep 3, 2024 · 554b7a0 · 554b7a0
1 parent dc63072
commit 554b7a0
Showing 1 changed file with 64 additions and 54 deletions.
diff --git a/modules/masonry/src/brick/design0/BrickBlock.ts b/modules/masonry/src/brick/design0/BrickBlock.ts
@@ -19,14 +19,11 @@ export default class BrickBlock extends BrickModelBlock {
         name: string;
         label: string;
         glyph: string;
-        args: Record<
-            string,
-            {
-                argId: string;
-                argLabel: string;
-                argTypeIncoming: TBrickArgDataType;
-            }
-        >;
+        args: Array<{
+            argId: string;
+            argLabel: string;
+            argTypeIncoming: TBrickArgDataType;
+        }>;
         colorBg: TBrickColor;
         colorFg: TBrickColor;
         outline: TBrickColor;
@@ -43,15 +40,24 @@ export default class BrickBlock extends BrickModelBlock {
             name: params.name,
             label: params.label,
             glyph: params.glyph,
-            args: Object.fromEntries(
-                Object.entries(params.args).map(([key, value]) => [
-                    key,
-                    {
-                        label: value.argLabel,
-                        dataType: value.argTypeIncoming,
+            // Convert array to object for super call
+            args: params.args.reduce(
+                (acc, arg) => {
+                    acc[arg.argId] = {
+                        label: arg.argLabel,
+                        dataType: arg.argTypeIncoming,
                         meta: {},
-                    },
-                ]),
+                    };
+                    return acc;
+                },
+                {} as Record<
+                    string,
+                    {
+                        label: string;
+                        dataType: TBrickArgDataType;
+                        meta: Record<string, unknown>;
+                    }
+                >,
             ),
             colorBg: params.colorBg,
             colorFg: params.colorFg,
@@ -75,7 +81,7 @@ export default class BrickBlock extends BrickModelBlock {
             scale: params.scale,
             nestLengthY: params.nestLengthY,
             innerLengthX: 100,
-            argHeights: Array(Object.keys(params.args).length).fill(17),
+            argHeights: Array(params.args.length).fill(17),
         });
     }
 
@@ -165,19 +171,36 @@ export default class BrickBlock extends BrickModelBlock {
         };
     }
 
-    public get instantiationProperties(): {
+    public get calculatedProperties(): {
+        boundingBox: { extent: TBrickExtent; coords: TBrickCoords };
+        connectionPoints: {
+            Top: { extent: TBrickExtent; coords: TBrickCoords } | null;
+            Bottom: { extent: TBrickExtent; coords: TBrickCoords } | null;
+            TopInner: { extent: TBrickExtent; coords: TBrickCoords } | null;
+            ArgsIncoming: { extent: TBrickExtent; coords: TBrickCoords } | null;
+        };
+    } {
+        return {
+            boundingBox: this.bBoxBrick,
+            connectionPoints: {
+                Top: this.bBoxNotchInsTop,
+                Bottom: this.bBoxNotchInsBot,
+                TopInner: this.bBoxNotchInsNestTop,
+                ArgsIncoming: this.bBoxNotchArg,
+            },
+        };
+    }
+
+    public get currentState(): {
         id: string;
         name: string;
         label: string;
         glyph: string;
-        args: Record<
-            string,
-            {
-                argId: string;
-                argLabel: string;
-                argTypeIncoming: TBrickArgDataType;
-            }
-        >;
+        args: Array<{
+            argId: string;
+            argLabel: string;
+            argTypeIncoming: TBrickArgDataType;
+        }>;
         colorBg: TBrickColor;
         colorFg: TBrickColor;
         colorBgHighlight: TBrickColor;
@@ -195,16 +218,11 @@ export default class BrickBlock extends BrickModelBlock {
             name: this.name,
             label: this.label,
             glyph: this.glyph,
-            args: Object.fromEntries(
-                Object.entries(this._args).map(([key, value]) => [
-                    key,
-                    {
-                        argId: value.label,
-                        argLabel: value.label,
-                        argTypeIncoming: value.dataType,
-                    },
-                ]),
-            ),
+            args: Object.entries(this._args).map(([key, value]) => ({
+                argId: key,
+                argLabel: value.label,
+                argTypeIncoming: value.dataType,
+            })),
             colorBg: this.colorBg,
             colorFg: this.colorFg,
             colorBgHighlight: this.colorBgHighlight,
@@ -219,23 +237,15 @@ export default class BrickBlock extends BrickModelBlock {
         };
     }
 
-    public get renderProperties(): {
-        boundingBox: { extent: TBrickExtent; coords: TBrickCoords };
-        connectionPoints: {
-            Top: { extent: TBrickExtent; coords: TBrickCoords } | null;
-            Bottom: { extent: TBrickExtent; coords: TBrickCoords } | null;
-            TopInner: { extent: TBrickExtent; coords: TBrickCoords } | null;
-            ArgsIncoming: { extent: TBrickExtent; coords: TBrickCoords } | null;
-        };
-    } {
-        return {
-            boundingBox: this.bBoxBrick,
-            connectionPoints: {
-                Top: this.bBoxNotchInsTop,
-                Bottom: this.bBoxNotchInsBot,
-                TopInner: this.bBoxNotchInsNestTop,
-                ArgsIncoming: this.bBoxNotchArg,
-            },
-        };
+    public setHighlighted(value: boolean): void {
+        this.highlighted = value;
+    }
+
+    public setFolded(value: boolean): void {
+        this._folded = value;
+    }
+
+    public setArgExtent(argId: string, extent: { argLengthX?: number; argLengthY: number }): void {
+        this._argExtents[argId] = extent;
     }
 }