Merge pull request #450 from sugarlabs/gsoc-dmp-2025/week-7-8/saumya

GSoC/DMP Week 7-8: feat(masonry): Add tower disconnection and dragging of tower in Workspace

Author: meganindya

modules/masonry/playground/pages/workspace/WorkspaceCanvas.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PaletteWrapper from '../../../src/palette/components/paletteWrapper';
 import '../../../src/palette/palette.css';
-import WorkspaceCanvas from './WorkspaceCanvas';
+import WorkSpaceView from '../../../src/workspace/view/components/WorkspaceView';
 
 export default function App() {
   const [showCollisionTest, setShowCollisionTest] = useState(false);
@@ -45,7 +45,7 @@ export default function App() {
       </aside>
 
       {/* Playground canvas */}
-      <WorkspaceCanvas />
+      <WorkSpaceView />
     </div>
   );
 }

modules/masonry/playground/pages/workspace/index.tsx

@@ -16,6 +16,8 @@ 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';
+import type { ExtendedTowerNode } from '../../tower/view/components/TowerView';
+import { calculateCompleteSubtreeDimensions } from '../../tower/utils/towerUtils';
 
 export abstract class BrickModel implements IBrick {
     protected _uuid: string;
@@ -386,34 +388,54 @@ export default class CompoundBrick extends BrickModel implements IBrickCompound
     public setBoundingBoxNest(extents: TExtent[]): void {
         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
+    public updateLayoutWithChildren(nestedChildren: BrickModel[], allNodes: Map<string, ExtendedTowerNode>): void {
         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 }];
+            let totalHeight = 0;
+            let maxWidth = 0;
+
+            // Recursively calculate the total height and max width of all descendants
+            const calculateSubtreeDimensions = (children: BrickModel[]): { h: number; w: number } => {
+                let height = 0;
+                let width = 0;
+                children.forEach(child => {
+                    const childNode = Array.from(allNodes.values()).find(n => n.brick.uuid === child.uuid);
+                    if (childNode) {
+                        const { w, h } = calculateCompleteSubtreeDimensions(childNode.brick.uuid, allNodes, new Map<string, { w: number; h: number }>());
+                        height += h;
+                        width = Math.max(width, w);
+                    }
+                });
+                return { h: height, w: width };
+            };
+
+            const { h, w } = calculateSubtreeDimensions(nestedChildren);
+            totalHeight = h;
+            maxWidth = w;
+
+            // Update bboxNest to reflect the full subtree dimensions
+            this._bboxNest = [{ w: maxWidth, h: totalHeight }];
         } else {
             this._bboxNest = [];
         }
-        // Update geometry with new bboxNest
         this.updateGeometry();
     }
 
+    // Helper method to get nested children based on the tower structure
+    public getNestedChildren(allNodes: Map<string, ExtendedTowerNode>): BrickModel[] {
+        const children: BrickModel[] = [];
+        allNodes.forEach(node => {
+            if (node.parent?.brick.uuid === this.uuid && node.isNested) {
+                children.push(node.brick as BrickModel); // Cast IBrick to BrickModel
+            }
+        });
+        return children;
+    }
+
     public override get renderProps(): TBrickRenderPropsCompound {
         return {
             ...this.getCommonRenderProps(),

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

@@ -426,7 +426,7 @@ function getBoundingBox(config: TInputUnion): TBBox {
     const baseWidth = CORNER_RADIUS + OFFSET_NOTCH_TOP + WIDTH_NOTCH_TOP + variableTopWidth;
 
     const width = hasArgs
-        ? baseWidth + OFFSET_NOTCH_RIGHT + CORNER_RADIUS + strokeWidth / 2
+        ? baseWidth + OFFSET_NOTCH_RIGHT + CORNER_RADIUS + strokeWidth / 2 + (type === 'type2' ? 7 : 0)  // Add 7 more for left notch
         : baseWidth + CORNER_RADIUS + strokeWidth / 2;
 
     // Get rightVertical from _generateRight
@@ -437,7 +437,7 @@ function getBoundingBox(config: TInputUnion): TBBox {
         bBoxArgs: bBoxArgs || [],
     });
 
-    let height = rightVertical + CORNER_RADIUS + (type !== 'type3' ? strokeWidth / 2 : 0);
+    let height = rightVertical + CORNER_RADIUS + (type === 'type2' ? strokeWidth / 2 - 1 : strokeWidth / 2);
 
     if (type === 'type3') {
         const { bBoxNesting, secondaryLabel } = config as TInputType3;
@@ -474,7 +474,7 @@ function getBoundingBox(config: TInputUnion): TBBox {
 
 // functions to calculate coordinates of the connection points
 
-type TCentroid = { x: number; y: number };
+export type TCentroid = { x: number; y: number };
 
 // Centroid calculation for Top Notch
 function getTopCentroid(config: TInputUnion): TCentroid | undefined {