base mask

src/pages/editor/components/EditorCanvas.tsx

@@ -6,6 +6,7 @@ import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
 import { useStageSize } from "./canvas/useStageSize";
 import { useKeyboardMovement } from "./canvas/useKeyboardMovement";
 import ObjectRenderer from "./canvas/ObjectRenderer";
+import { getMaskForObject } from "./canvas/maskUtils";
 import CellEditor from "@/components/CellEditor";
 import ZoomControls from "./ZoomControls";
 
@@ -110,7 +111,16 @@ const EditorCanvas = () => {
     const timeoutId = setTimeout(() => {
       if (!layerRef.current || !transformerRef.current) return;
 
-      const node = layerRef.current.findOne(`#${selectedObjectId}`);
+      // Check if object is masked - if so, find parent Group
+      const maskShape = getMaskForObject(selectedObject, objects);
+      let node: Konva.Node | undefined;
+      
+      if (maskShape) {
+        node = layerRef.current.findOne(`.masked-group-${selectedObjectId}`);
+      } else {
+        node = layerRef.current.findOne(`#${selectedObjectId}`);
+      }
+      
       if (node && transformerRef.current) {
         transformerRef.current.nodes([node]);
         transformerRef.current.getLayer()?.batchDraw();
@@ -169,7 +179,7 @@ const EditorCanvas = () => {
           onMouseMove={handleStageMouseMove}
           onMouseUp={handleStageMouseUp}
         >
-          <Layer ref={layerRef}>
+          <Layer listening={false}>
             <Rect
               x={0}
               y={0}
@@ -178,21 +188,30 @@ const EditorCanvas = () => {
               fill="#ffffff"
               listening={false}
             />
-            {objects.map((obj) => (
-              <ObjectRenderer
-                key={obj.id}
-                obj={obj}
-                isSelected={selectedObjectId === obj.id}
-                transformerRef={transformerRef}
-                layerRef={layerRef}
-                onSelect={handleSelect}
-                onUpdate={updateObject}
-                draggable={tool === "select"}
-                onCellClick={handleCellClick}
-                onCellDblClick={handleCellDblClick}
-                selectedCellId={selectedCellId}
-              />
-            ))}
+          </Layer>
+
+          <Layer ref={layerRef}>
+            {objects.map((obj) => {
+              const maskShape = getMaskForObject(obj, objects);
+              
+              return (
+                <ObjectRenderer
+                  key={obj.id}
+                  obj={obj}
+                  isSelected={selectedObjectId === obj.id}
+                  transformerRef={transformerRef}
+                  layerRef={layerRef}
+                  onSelect={handleSelect}
+                  onUpdate={updateObject}
+                  draggable={tool === "select"}
+                  onCellClick={handleCellClick}
+                  onCellDblClick={handleCellDblClick}
+                  selectedCellId={selectedCellId}
+                  maskShape={maskShape}
+                />
+              );
+            })}
+            
             {selectedObjectId && (() => {
               const selectedObject = objects.find(obj => obj.id === selectedObjectId);
               const isText = selectedObject?.type === "text";