GSoC 2025 Week 4-5: feat(Masonry): Complete Brick Tower Rendering System Implementation

modules/masonry/src/brick/@types/brick.d.ts → modules/masonry/src/@types/brick.d.ts

@@ -37,7 +37,7 @@ type TBrickRenderProps = {
     colorBg: TColor;
     colorFg: TColor;
     strokeColor: TColor;
-    strokeWidth: number; //remove
+    strokeWidth: number;
     scale: number;
     shadow: boolean;
     tooltip?: string;

modules/masonry/src/@types/tower.d.ts

@@ -0,0 +1,23 @@
+/** A simple Cartesian point */
+export type TPoint = { x: number; y: number };
+
+/** All supported physical notch pairings */
+export type TNotchType = 'top-bottom' | 'right-left' | 'left-right' | 'nested';
+
+/** A single connection‑point centroid */
+export type TConnectionPoint = { x: number; y: number };
+
+/** One logical connection between two bricks */
+export type TBrickConnection = {
+    from: string; // uuid of source brick
+    to: string; // uuid of destination brick
+    fromNotchId: string; // e.g. "right_0"
+    toNotchId: string; // e.g. "left"
+    type: TNotchType;
+};
+
+/** Validation result for attempted connections */
+export type TConnectionValidation = {
+    isValid: boolean;
+    reason?: string;
+};

modules/masonry/src/brick/model/model.ts

@@ -11,10 +11,11 @@ import type {
     TBrickRenderPropsExpression,
     IBrickCompound,
     TBrickRenderPropsCompound,
-} from '../@types/brick';
+} from '../../@types/brick';
 import type { TConnectionPoints as TCP } from '../../tree/model/model';
 import { generateBrickData } from '../utils/path';
 import type { TInputUnion } from '../utils/path';
+import { getLabelWidth } from '../utils/textMeasurement';
 
 export abstract class BrickModel implements IBrick {
     protected _uuid: string;
@@ -134,6 +135,22 @@ export abstract class BrickModel implements IBrick {
 
     /** Must assemble the full render props for this brick. */
     public abstract get renderProps(): TBrickRenderProps;
+
+    /** Must update geometry when label or other properties change. */
+    public abstract updateGeometry(): void;
+
+    get label(): string {
+        return this._label;
+    }
+
+    set label(value: string) {
+        this._label = value;
+        this.updateGeometry();
+    }
+
+    get labelType(): 'text' | 'glyph' | 'icon' | 'thumbnail' {
+        return this._labelType;
+    }
 }
 
 /**
@@ -184,14 +201,12 @@ export class SimpleBrick extends BrickModel implements IBrickSimple {
             type: 'type1',
             strokeWidth: this._strokeWidth,
             scaleFactor: this._scale,
-            bBoxLabel: { w: this._label.length * 8, h: 20 },
+            bBoxLabel: { w: getLabelWidth(this._label), h: 20 },
             bBoxArgs: this._bboxArgs,
             hasNotchAbove: this._topNotch,
             hasNotchBelow: this._bottomNotch,
         };
         const data = generateBrickData(config);
-
-        // use the public setters
         this.connectionPoints = data.connectionPoints;
         this.boundingBox = data.boundingBox;
     }
@@ -260,7 +275,7 @@ export class ExpressionBrick extends BrickModel implements IBrickExpression {
             type: 'type2',
             strokeWidth: this._strokeWidth,
             scaleFactor: this._scale,
-            bBoxLabel: { w: this._label.length * 8, h: 20 },
+            bBoxLabel: { w: getLabelWidth(this._label), h: 20 },
             bBoxArgs: this._bboxArgs,
         };
         const data = generateBrickData(config);
@@ -341,7 +356,7 @@ export default class CompoundBrick extends BrickModel implements IBrickCompound
             type: 'type3',
             strokeWidth: this._strokeWidth,
             scaleFactor: this._scale,
-            bBoxLabel: { w: this._label.length * 8, h: 20 },
+            bBoxLabel: { w: getLabelWidth(this._label), h: 20 },
             bBoxArgs: this._bboxArgs,
             hasNotchAbove: this._topNotch,
             hasNotchBelow: this._bottomNotch,
@@ -372,6 +387,33 @@ export default class CompoundBrick extends BrickModel implements IBrickCompound
         this._bboxNest = extents;
     }
 
+    /**
+     * Recursively update bounding box and connection points to fit nested children.
+     * Call this after all children are attached, before rendering.
+     */
+    public updateLayoutWithChildren(nestedChildren: BrickModel[]): void {
+        // If there are nested children, calculate the total bounding box
+        if (nestedChildren && nestedChildren.length > 0) {
+            // Calculate the bounding box that fits all nested children
+            let _minX = 0,
+                _minY = 0,
+                maxX = 0,
+                maxY = 0;
+            nestedChildren.forEach((child) => {
+                const bbox = child.boundingBox;
+                // For simplicity, assume children are stacked vertically for now
+                maxY += bbox.h;
+                maxX = Math.max(maxX, bbox.w);
+            });
+            // Expand this brick's bboxNest to fit the children
+            this._bboxNest = [{ w: maxX, h: maxY }];
+        } else {
+            this._bboxNest = [];
+        }
+        // Update geometry with new bboxNest
+        this.updateGeometry();
+    }
+
     public override get renderProps(): TBrickRenderPropsCompound {
         return {
             ...this.getCommonRenderProps(),

modules/masonry/src/brick/utils/brickFactory.ts

@@ -0,0 +1,133 @@
+// brickFactory.ts
+import { SimpleBrick, ExpressionBrick } from '../model/model';
+import CompoundBrick from '../model/model';
+import type { TBrickType, TColor, TExtent } from '../../@types/brick';
+
+let idCounter = 0;
+function generateUUID(prefix: string): string {
+    return `${prefix}_${++idCounter}`;
+}
+
+// Default colors
+const defaultColors = {
+    simple: {
+        colorBg: '#bbdefb' as TColor,
+        colorFg: '#222' as TColor,
+        strokeColor: '#1976d2' as TColor,
+    },
+    expression: {
+        colorBg: '#b2fab4' as TColor,
+        colorFg: '#222' as TColor,
+        strokeColor: '#2e7d32' as TColor,
+    },
+    compound: {
+        colorBg: '#b9f6ca' as TColor,
+        colorFg: '#222' as TColor,
+        strokeColor: '#43a047' as TColor,
+    },
+};
+
+const defaultLabelType = 'text' as const;
+const defaultScale = 1;
+const defaultBBoxArgs: TExtent[] = [{ w: 40, h: 20 }];
+
+export function createSimpleBrick(
+    overrides: Partial<ConstructorParameters<typeof SimpleBrick>[0]> = {},
+) {
+    const idx = idCounter + 1;
+    // By default, SimpleBrick has two argument slots (for arguments/inputs)
+    return new SimpleBrick({
+        uuid: generateUUID('simple'),
+        name: overrides.name ?? `Simple${idx}`,
+        label: overrides.label ?? `Simple${idx}`,
+        labelType: overrides.labelType ?? defaultLabelType,
+        colorBg: overrides.colorBg ?? defaultColors.simple.colorBg,
+        colorFg: overrides.colorFg ?? defaultColors.simple.colorFg,
+        strokeColor: overrides.strokeColor ?? defaultColors.simple.strokeColor,
+        shadow: overrides.shadow ?? false,
+        scale: overrides.scale ?? defaultScale,
+        bboxArgs: overrides.bboxArgs ?? [
+            { w: 40, h: 20 },
+            { w: 40, h: 20 },
+        ],
+        topNotch: overrides.topNotch ?? true,
+        bottomNotch: overrides.bottomNotch ?? true,
+        tooltip: overrides.tooltip,
+        ...overrides,
+    });
+}
+
+// ExpressionBrick is used as an argument value, not as an argument-receiving brick
+export function createExpressionBrick(
+    overrides: Partial<ConstructorParameters<typeof ExpressionBrick>[0]> = {},
+) {
+    const idx = idCounter + 1;
+    return new ExpressionBrick({
+        uuid: generateUUID('expr'),
+        name: overrides.name ?? `Expr${idx}`,
+        label: overrides.label ?? `Expr${idx}`,
+        labelType: overrides.labelType ?? defaultLabelType,
+        colorBg: overrides.colorBg ?? defaultColors.expression.colorBg,
+        colorFg: overrides.colorFg ?? defaultColors.expression.colorFg,
+        strokeColor: overrides.strokeColor ?? defaultColors.expression.strokeColor,
+        shadow: overrides.shadow ?? false,
+        scale: overrides.scale ?? defaultScale,
+        bboxArgs: overrides.bboxArgs ?? [{ w: 40, h: 20 }],
+        value: overrides.value,
+        isValueSelectOpen: overrides.isValueSelectOpen ?? false,
+        tooltip: overrides.tooltip,
+        ...overrides,
+    });
+}
+
+export function createCompoundBrick(
+    overrides: Partial<ConstructorParameters<typeof CompoundBrick>[0]> = {},
+) {
+    const idx = idCounter + 1;
+    return new CompoundBrick({
+        uuid: generateUUID('compound'),
+        name: overrides.name ?? `Compound${idx}`,
+        label: overrides.label ?? `Compound${idx}`,
+        labelType: overrides.labelType ?? defaultLabelType,
+        colorBg: overrides.colorBg ?? defaultColors.compound.colorBg,
+        colorFg: overrides.colorFg ?? defaultColors.compound.colorFg,
+        strokeColor: overrides.strokeColor ?? defaultColors.compound.strokeColor,
+        shadow: overrides.shadow ?? false,
+        scale: overrides.scale ?? defaultScale,
+        bboxArgs: overrides.bboxArgs ?? defaultBBoxArgs,
+        bboxNest: overrides.bboxNest ?? [],
+        topNotch: overrides.topNotch ?? true,
+        bottomNotch: overrides.bottomNotch ?? true,
+        isFolded: overrides.isFolded ?? false,
+        tooltip: overrides.tooltip,
+        ...overrides,
+    });
+}
+
+export function resetFactoryCounter() {
+    idCounter = 0;
+}
+
+export function getFactoryCounter() {
+    return idCounter;
+}
+
+export function createBrick(
+    type: TBrickType,
+    overrides: Partial<
+        | ConstructorParameters<typeof SimpleBrick>[0]
+        | ConstructorParameters<typeof ExpressionBrick>[0]
+        | ConstructorParameters<typeof CompoundBrick>[0]
+    > = {},
+) {
+    switch (type) {
+        case 'Simple':
+            return createSimpleBrick(overrides);
+        case 'Expression':
+            return createExpressionBrick(overrides);
+        case 'Compound':
+            return createCompoundBrick(overrides);
+        default:
+            throw new Error(`Unsupported brick type: ${type}`);
+    }
+}

modules/masonry/src/brick/utils/index.ts

@@ -0,0 +1,16 @@
+export {
+    createSimpleBrick,
+    createExpressionBrick,
+    createCompoundBrick,
+    createBrick,
+    resetFactoryCounter,
+    getFactoryCounter,
+} from './brickFactory';
+export { generateBrickData } from './path';
+export type { TInputUnion } from './path';
+export {
+    measureTextWidth,
+    estimateTextWidth,
+    getLabelWidth,
+    measureLabel,
+} from './textMeasurement';