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;
  }
 }