From f52f067a4f5ff1c00a64ad5e56c1afee7b8d43a7 Mon Sep 17 00:00:00 2001 From: Karan Palan Date: Thu, 5 Sep 2024 02:54:23 +0530 Subject: [PATCH] feat(masonry): Implement final classes for BrickExpression and BrickStatement --- .../src/brick/design0/BrickExpression.ts | 55 +++++++++++++++-- .../src/brick/design0/BrickStatement.ts | 60 +++++++++++++++++-- 2 files changed, 105 insertions(+), 10 deletions(-) diff --git a/modules/masonry/src/brick/design0/BrickExpression.ts b/modules/masonry/src/brick/design0/BrickExpression.ts index 9808124a..e6a58dc7 100644 --- a/modules/masonry/src/brick/design0/BrickExpression.ts +++ b/modules/masonry/src/brick/design0/BrickExpression.ts @@ -10,11 +10,9 @@ import { generatePath } from '../utils/path'; */ export default class BrickExpression extends BrickModelExpression { readonly _pathResults: ReturnType; - readonly id: string; constructor(params: { - // intrinsic - id: string; + uuid: string; name: string; label: string; glyph: string; @@ -27,14 +25,14 @@ export default class BrickExpression extends BrickModelExpression { meta: unknown; } >; - // style colorBg: TBrickColor; colorFg: TBrickColor; + colorBgHighlight: TBrickColor; + colorFgHighlight: TBrickColor; outline: TBrickColor; scale: number; }) { super(params); - this.id = params.id; const argsKeys = Object.keys(this._args); this._pathResults = generatePath({ hasNest: false, @@ -47,10 +45,12 @@ export default class BrickExpression extends BrickModelExpression { }); } + // Getter for SVG path public get SVGpath(): string { return this._pathResults.path; } + // Getter for bounding box of the brick public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } { return { extent: { @@ -64,6 +64,7 @@ export default class BrickExpression extends BrickModelExpression { }; } + // Getter for bounding boxes of the arguments public get bBoxArgs(): Record { const argsKeys = Object.keys(this._args); const result: Record = {}; @@ -84,6 +85,7 @@ export default class BrickExpression extends BrickModelExpression { return result; } + // Getter for bounding box of the argument notch public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } { return { extent: { @@ -96,4 +98,47 @@ export default class BrickExpression extends BrickModelExpression { }, }; } + + // Method to return React props for the BrickExpression component + public getReactProps(): Record { + return { + uuid: this.uuid, + name: this.name, + label: this.label, + glyph: this.glyph, + dataType: this.dataType, + args: this.args, + colorBg: this.colorBg, + colorFg: this.colorFg, + colorBgHighlight: this.colorBgHighlight, + colorFgHighlight: this.colorFgHighlight, + outline: this.outline, + scale: this.scale, + highlighted: this.highlighted, + }; + } + + // Setters for properties that can change at runtime + public setArgs( + args: Record, + ): void { + this._args = args; + this.updateConnectionPoints(); + } + + public setHighlighted(highlighted: boolean): void { + this.highlighted = highlighted; + } + + // Method to update connection points based on current state + protected updateConnectionPoints(): void { + this._connectionPoints.ArgsIncoming = Object.keys(this._args).map((_, index) => ({ + x: 0, + y: index * 20, + })); + this._connectionPoints.ArgsOutgoing = Object.keys(this._args).map((_, index) => ({ + x: 0, + y: index * 20, + })); + } } diff --git a/modules/masonry/src/brick/design0/BrickStatement.ts b/modules/masonry/src/brick/design0/BrickStatement.ts index 2f1ad577..bf815ec7 100644 --- a/modules/masonry/src/brick/design0/BrickStatement.ts +++ b/modules/masonry/src/brick/design0/BrickStatement.ts @@ -10,11 +10,9 @@ import { generatePath } from '../utils/path'; */ export default class BrickStatement extends BrickModelStatement { readonly _pathResults: ReturnType; - readonly id: string; constructor(params: { - // intrinsic - id: string; + uuid: string; name: string; label: string; glyph: string; @@ -26,16 +24,16 @@ export default class BrickStatement extends BrickModelStatement { meta: unknown; } >; - // style colorBg: TBrickColor; colorFg: TBrickColor; + colorBgHighlight: TBrickColor; + colorFgHighlight: TBrickColor; outline: TBrickColor; scale: number; connectAbove: boolean; connectBelow: boolean; }) { super(params); - this.id = params.id; const argsKeys = Object.keys(this._args); this._pathResults = generatePath({ hasNest: false, @@ -48,10 +46,12 @@ export default class BrickStatement extends BrickModelStatement { }); } + // Getter for SVG path public get SVGpath(): string { return this._pathResults.path; } + // Getter for bounding box of the brick public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } { return { extent: { @@ -65,6 +65,7 @@ export default class BrickStatement extends BrickModelStatement { }; } + // Getter for bounding boxes of the arguments public get bBoxArgs(): Record { const argsKeys = Object.keys(this._args); const result: Record = {}; @@ -85,6 +86,7 @@ export default class BrickStatement extends BrickModelStatement { return result; } + // Getter for bounding box of the top insertion notch public get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords } { return { extent: { @@ -98,6 +100,7 @@ export default class BrickStatement extends BrickModelStatement { }; } + // Getter for bounding box of the bottom insertion notch public get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords } { return { extent: { @@ -110,4 +113,51 @@ export default class BrickStatement extends BrickModelStatement { }, }; } + + // Method to return React props for the BrickStatement component + public getReactProps(): Record { + return { + uuid: this.uuid, + name: this.name, + label: this.label, + glyph: this.glyph, + args: this.args, + colorBg: this.colorBg, + colorFg: this.colorFg, + colorBgHighlight: this.colorBgHighlight, + colorFgHighlight: this.colorFgHighlight, + outline: this.outline, + scale: this.scale, + connectAbove: this.connectAbove, + connectBelow: this.connectBelow, + highlighted: this.highlighted, + }; + } + + // Setters for properties that can change at runtime + public setArgs( + args: Record, + ): void { + this._args = args; + this.updateConnectionPoints(); + } + + public setConnectAbove(connectAbove: boolean): void { + this._connectAbove = connectAbove; + } + + public setConnectBelow(connectBelow: boolean): void { + this._connectBelow = connectBelow; + } + + public setHighlighted(highlighted: boolean): void { + this.highlighted = highlighted; + } + + // Method to update connection points based on current state + protected updateConnectionPoints(): void { + // Update the connection points for the top and bottom of the brick + this._connectionPoints.ArgsIncoming = this.connectAbove ? [{ x: 0, y: 0 }] : []; + this._connectionPoints.ArgsOutgoing = this.connectBelow ? [{ x: 0, y: 0 }] : []; + } }