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

[saumyashahi]

Description

This PR implements a fully functional tree rendering system for the MusicBlocks (Masonry module), including hierarchical brick layout, dynamic SVG-based rendering, a factory system for brick creation, and complete testing coverage.

Tree Rendering & Layout

• Tree Model: Parent-child brick management with nested, argument, and stacked connections

• TreeView: Recursive SVG renderer with auto layout and bounding box calculations

• Dynamic Geometry: Canvas-based text measurement and positioning

Brick Factory

• Factories: Create simple, expression, and compound bricks with defaults

• UUID Management: Auto ID generation and tracking

• Flexible Overrides: Easily customize brick creation

Testing & Stories

• Storybook: Render single, stacked, argument, and compound bricks with controls

• Unit Tests: Validate tree creation, connections, and layout logic

[Karan-Palan]

this is temporary to render stuff right now, will be updated later, right?

[saumyashahi]

Yes, I figured the previous method to determine the label width in justin's model wasn't rendering correct, so I used this one, we can enhance this further in time as required. Right now for rendering in storybooks this method works fine.

[Karan-Palan]

The model does not decide the label length, the component does

[Karan-Palan]

I'll update the code

[justin212407]

There was no function in the model to determine the label width. That was done by the react component itself. The model is only responsible to determine and pass down the props and has no connection(functions related to) to rendering the brick.

[saumyashahi]

I had temporarily added estimateTextWidth(label) inside the model just to visually unblock layout issues in Storybook for now. But yes, this is something we can definitely clean up by moving all layout-related measurements (like label width) to the React view layer

[saumyashahi]

There was no function in the model to determine the label width. That was done by the react component itself. The model is only responsible to determine and pass down the props and has no connection(functions related to) to rendering the brick.

initially the label widths were being calculated in a fixed way for all label width, no function in the model to determine the label width hence it did not return correct bounding boxes and the position for the origin of the argument bricks for short and long labels did not render correctly. So I made a function to calculate label width

Now it is working correctly .

[Karan-Palan]

Updates done:

• Created a wrapper component
• Fixed story filename typo
• Separated labelWidth logic from model

[Karan-Palan]

Changes made:

1. Moves /brick/@types, updated imports and created tower.d.ts
2. Split masonry/src/tree intomasonry/src/tower and masonry/src/workspace, simplified the code by quite a bit, removed redundancy
3. Updated and added new stories

Screencast.from.2025-07-02.17-56-39.webm