mask

src/pages/editor/components/EditorCanvas.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useRef } from "react";
-import { Stage, Layer, Transformer, Rect } from "react-konva";
+import { Stage, Layer, Transformer, Rect, Group, Text } from "react-konva";
 import Konva from "konva";
-import { useEditorStore } from "../store/editorStore";
+import { useEditorStore, type EditorObject } from "../store/editorStore";
 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";
 
@@ -30,6 +29,8 @@ const EditorCanvas = () => {
     setStageRef,
     setLayerRef,
     zoom,
+    groupObjects,
+    ungroupObjects,
   } = useEditorStore();
 
   const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
@@ -47,6 +48,7 @@ const EditorCanvas = () => {
 
   const handleSelect = (id: string, node: Konva.Node) => {
     const obj = objects.find((o) => o.id === id);
+
     setSelectedObjectId(id);
     if (obj?.type === "grid") {
       setSelectedTableId(id);
@@ -89,6 +91,39 @@ const EditorCanvas = () => {
     setEditingCell(null);
   };
 
+  const handleObjectUpdate = (id: string, updates: Partial<EditorObject>) => {
+    const obj = objects.find((o) => o.id === id);
+    if (!obj) return;
+
+    // اگر object در یک گروه است و position تغییر کرد، همه اعضای گروه را جابجا کن
+    if (obj.groupId && (updates.x !== undefined || updates.y !== undefined)) {
+      const groupMembers = objects.filter((o) => o.groupId === obj.groupId && o.id !== id);
+      const deltaX = updates.x !== undefined ? updates.x - (obj.x || 0) : 0;
+      const deltaY = updates.y !== undefined ? updates.y - (obj.y || 0) : 0;
+
+      // به‌روزرسانی object اصلی
+      updateObject(id, updates);
+
+      // به‌روزرسانی همه اعضای گروه
+      groupMembers.forEach((member) => {
+        updateObject(member.id, {
+          x: (member.x || 0) + deltaX,
+          y: (member.y || 0) + deltaY,
+        });
+      });
+    } else {
+      updateObject(id, updates);
+    }
+  };
+
+  const handleGroupWithMask = (objectId: string, maskId: string) => {
+    groupObjects([objectId, maskId]);
+  };
+
+  const handleUngroupFromMask = (groupId: string) => {
+    ungroupObjects(groupId);
+  };
+
   // Attach transformer to selected object when it changes
   useEffect(() => {
     if (!transformerRef.current || !selectedObjectId || !layerRef.current) return;
@@ -106,21 +141,13 @@ const EditorCanvas = () => {
       return;
     }
 
-    // For other objects (like images), find the node by id and attach transformer
+    // For other objects, find the node by id and attach transformer
     // Use a small delay to ensure the node is mounted (especially for images that need to load)
     const timeoutId = setTimeout(() => {
       if (!layerRef.current || !transformerRef.current) return;
 
-      // 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}`);
-      }
-      
+      const node = layerRef.current.findOne(`#${selectedObjectId}`);
+
       if (node && transformerRef.current) {
         transformerRef.current.nodes([node]);
         transformerRef.current.getLayer()?.batchDraw();
@@ -134,34 +161,38 @@ const EditorCanvas = () => {
     if (!transformerRef.current || !selectedObjectId) return;
 
     const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
-    if (selectedObject?.type !== "grid") return;
+    if (!selectedObject) return;
 
     const transformer = transformerRef.current;
-    const handleTransformEnd = () => {
-      const node = transformer.nodes()[0];
-      if (!node || !selectedObject) return;
 
-      const scaleX = node.scaleX();
-      const scaleY = node.scaleY();
+    // Handle grid objects separately
+    if (selectedObject.type === "grid") {
+      const handleTransformEnd = () => {
+        const node = transformer.nodes()[0];
+        if (!node || !selectedObject) return;
 
-      node.scaleX(1);
-      node.scaleY(1);
+        const scaleX = node.scaleX();
+        const scaleY = node.scaleY();
 
-      const newWidth = (selectedObject.width || 300) * scaleX;
-      const newHeight = (selectedObject.height || 200) * scaleY;
+        node.scaleX(1);
+        node.scaleY(1);
 
-      applyTableResize(selectedObject.id, newWidth, newHeight);
-      updateObject(selectedObject.id, {
-        x: node.x(),
-        y: node.y(),
-      });
-    };
+        const newWidth = (selectedObject.width || 300) * scaleX;
+        const newHeight = (selectedObject.height || 200) * scaleY;
 
-    transformer.on("transformend", handleTransformEnd);
+        applyTableResize(selectedObject.id, newWidth, newHeight);
+        updateObject(selectedObject.id, {
+          x: node.x(),
+          y: node.y(),
+        });
+      };
 
-    return () => {
-      transformer.off("transformend", handleTransformEnd);
-    };
+      transformer.on("transformend", handleTransformEnd);
+
+      return () => {
+        transformer.off("transformend", handleTransformEnd);
+      };
+    }
   }, [selectedObjectId, objects, transformerRef, applyTableResize, updateObject]);
 
   const finalScale = stageSize.scale * zoom;
@@ -191,59 +222,134 @@ const EditorCanvas = () => {
           </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}
-                />
-              );
-            })}
-            
+            {objects.map((obj) => (
+              <ObjectRenderer
+                key={obj.id}
+                obj={obj}
+                isSelected={selectedObjectId === obj.id}
+                transformerRef={transformerRef}
+                layerRef={layerRef}
+                onSelect={handleSelect}
+                onUpdate={handleObjectUpdate}
+                draggable={tool === "select"}
+                onCellClick={handleCellClick}
+                onCellDblClick={handleCellDblClick}
+                selectedCellId={selectedCellId}
+                allObjects={objects}
+              />
+            ))}
+
             {selectedObjectId && (() => {
               const selectedObject = objects.find(obj => obj.id === selectedObjectId);
               const isText = selectedObject?.type === "text";
 
+              // بررسی امکان group/ungroup با mask
+              const hasMask = selectedObject?.maskId;
+              const maskObject = hasMask ? objects.find(m => m.id === selectedObject.maskId) : null;
+              const isGrouped = selectedObject?.groupId && maskObject?.groupId === selectedObject.groupId;
+              const canGroup = hasMask && !isGrouped && maskObject && !selectedObject?.isMask;
+              const canUngroup = isGrouped && selectedObject?.groupId;
+
               return (
-                <Transformer
-                  ref={transformerRef}
-                  boundBoxFunc={(oldBox, newBox) => {
-                    if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
-                      return oldBox;
-                    }
-                    return newBox;
-                  }}
-                  ignoreStroke={isText}
-                  perfectDrawEnabled={false}
-                  anchorFill="#3b82f6"
-                  anchorStroke="#ffffff"
-                  borderStroke="#3b82f6"
-                  borderStrokeWidth={2}
-                  anchorSize={8}
-                  rotateEnabled={true}
-                  enabledAnchors={[
-                    "top-left",
-                    "top-right",
-                    "bottom-left",
-                    "bottom-right",
-                    "top-center",
-                    "bottom-center",
-                    "middle-left",
-                    "middle-right",
-                  ]}
-                />
+                <>
+                  <Transformer
+                    ref={transformerRef}
+                    boundBoxFunc={(oldBox, newBox) => {
+                      if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
+                        return oldBox;
+                      }
+                      return newBox;
+                    }}
+                    ignoreStroke={isText}
+                    perfectDrawEnabled={false}
+                    anchorFill="#3b82f6"
+                    anchorStroke="#ffffff"
+                    borderStroke="#3b82f6"
+                    borderStrokeWidth={2}
+                    anchorSize={8}
+                    rotateEnabled={true}
+                    enabledAnchors={[
+                      "top-left",
+                      "top-right",
+                      "bottom-left",
+                      "bottom-right",
+                      "top-center",
+                      "bottom-center",
+                      "middle-left",
+                      "middle-right",
+                    ]}
+                  />
+
+                  {/* دکمه گروه‌بندی */}
+                  {canGroup && selectedObject && maskObject && (
+                    <Group>
+                      <Rect
+                        x={(selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50}
+                        y={(selectedObject.y || 0) - 40}
+                        width={100}
+                        height={32}
+                        fill="#3b82f6"
+                        cornerRadius={8}
+                        shadowColor="black"
+                        shadowBlur={10}
+                        shadowOpacity={0.2}
+                        onClick={() => handleGroupWithMask(selectedObject.id, maskObject.id)}
+                        onTap={() => handleGroupWithMask(selectedObject.id, maskObject.id)}
+                        listening={true}
+                      />
+                      <Text
+                        x={(selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50}
+                        y={(selectedObject.y || 0) - 40}
+                        width={100}
+                        height={32}
+                        text="گروه‌بندی با ماسک"
+                        fontSize={13}
+                        fontFamily="irancell"
+                        fill="white"
+                        align="center"
+                        verticalAlign="middle"
+                        onClick={() => handleGroupWithMask(selectedObject.id, maskObject.id)}
+                        onTap={() => handleGroupWithMask(selectedObject.id, maskObject.id)}
+                        listening={true}
+                      />
+                    </Group>
+                  )}
+
+                  {/* دکمه لغو گروه‌بندی */}
+                  {canUngroup && selectedObject && (
+                    <Group>
+                      <Rect
+                        x={(selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50}
+                        y={(selectedObject.y || 0) - 40}
+                        width={100}
+                        height={32}
+                        fill="#ef4444"
+                        cornerRadius={8}
+                        shadowColor="black"
+                        shadowBlur={10}
+                        shadowOpacity={0.2}
+                        onClick={() => handleUngroupFromMask(selectedObject.groupId!)}
+                        onTap={() => handleUngroupFromMask(selectedObject.groupId!)}
+                        listening={true}
+                      />
+                      <Text
+                        x={(selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50}
+                        y={(selectedObject.y || 0) - 40}
+                        width={100}
+                        height={32}
+                        text="لغو گروه‌بندی"
+                        fontSize={13}
+                        fontFamily="irancell"
+                        fill="white"
+                        align="center"
+                        verticalAlign="middle"
+                        onClick={() => handleUngroupFromMask(selectedObject.groupId!)}
+                        onTap={() => handleUngroupFromMask(selectedObject.groupId!)}
+                        listening={true}
+                      />
+                    </Group>
+                  )}
+                </>
               );
             })()}
           </Layer>