grid editor

src/pages/editor/components/EditorCanvas.tsx

@@ -6,6 +6,7 @@ import { clx } from "@/helpers/utils";
 import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
 import { useStageSize } from "./canvas/useStageSize";
 import ObjectRenderer from "./canvas/ObjectRenderer";
+import CellEditor from "@/components/CellEditor";
 
 const EditorCanvas = () => {
   const stageRef = useRef<Konva.Stage>(null);
@@ -17,6 +18,13 @@ const EditorCanvas = () => {
     updateObject,
     selectedObjectId,
     setSelectedObjectId,
+    setSelectedTableId,
+    selectedCellId,
+    setSelectedCellId,
+    editingCell,
+    setEditingCell,
+    updateCellValue,
+    applyTableResize,
     setStageRef,
     setLayerRef,
   } = useEditorStore();
@@ -34,13 +42,83 @@ const EditorCanvas = () => {
   }, [setStageRef, setLayerRef]);
 
   const handleSelect = (id: string, node: Konva.Node) => {
+    const obj = objects.find((o) => o.id === id);
     setSelectedObjectId(id);
+    if (obj?.type === "grid") {
+      setSelectedTableId(id);
+    } else {
+      setSelectedTableId(null);
+    }
+    setSelectedCellId(null);
     if (transformerRef.current) {
       transformerRef.current.nodes([node]);
       transformerRef.current.getLayer()?.batchDraw();
     }
   };
 
+  const handleCellClick = (tableId: string, cellId: string) => {
+    setSelectedTableId(tableId);
+    setSelectedObjectId(tableId);
+    setSelectedCellId(cellId);
+    const obj = objects.find((o) => o.id === tableId);
+    if (obj && transformerRef.current && layerRef.current) {
+      const tableNode = layerRef.current.findOne(`#${tableId}`);
+      if (tableNode) {
+        transformerRef.current.nodes([tableNode]);
+        transformerRef.current.getLayer()?.batchDraw();
+      }
+    }
+  };
+
+  const handleCellDblClick = (tableId: string, cellId: string, x: number, y: number, text: string) => {
+    setEditingCell({ tableId, cellId, x, y, value: text });
+  };
+
+  const handleCellEditorSave = (text: string) => {
+    if (editingCell) {
+      updateCellValue(editingCell.tableId, editingCell.cellId, text);
+      setEditingCell(null);
+    }
+  };
+
+  const handleCellEditorCancel = () => {
+    setEditingCell(null);
+  };
+
+  useEffect(() => {
+    if (!transformerRef.current || !selectedObjectId) return;
+
+    const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
+    if (selectedObject?.type !== "grid") return;
+
+    const transformer = transformerRef.current;
+    const handleTransformEnd = () => {
+      const node = transformer.nodes()[0];
+      if (!node || !selectedObject) return;
+
+      const scaleX = node.scaleX();
+      const scaleY = node.scaleY();
+
+      node.scaleX(1);
+      node.scaleY(1);
+
+      const newWidth = (selectedObject.width || 300) * scaleX;
+      const newHeight = (selectedObject.height || 200) * scaleY;
+
+      applyTableResize(selectedObject.id, newWidth, newHeight);
+      updateObject(selectedObject.id, {
+        x: node.x(),
+        y: node.y(),
+      });
+    };
+
+    transformer.on("transformend", handleTransformEnd);
+
+    return () => {
+      transformer.off("transformend", handleTransformEnd);
+    };
+  }, [selectedObjectId, objects, transformerRef, applyTableResize, updateObject]);
+
   return (
     <div className="flex-1 flex items-center justify-center bg-gray-100 overflow-hidden">
       <Stage
@@ -63,6 +141,9 @@ const EditorCanvas = () => {
               onSelect={handleSelect}
               onUpdate={updateObject}
               draggable={tool === "select"}
+              onCellClick={handleCellClick}
+              onCellDblClick={handleCellDblClick}
+              selectedCellId={selectedCellId}
             />
           ))}
           {selectedObjectId && (() => {
@@ -101,6 +182,23 @@ const EditorCanvas = () => {
           })()}
         </Layer>
       </Stage>
+      {editingCell && (() => {
+        const obj = objects.find((o) => o.id === editingCell.tableId);
+        if (!obj || !obj.tableData) return null;
+        const cell = obj.tableData.cells[editingCell.cellId];
+        if (!cell) return null;
+        return (
+          <CellEditor
+            x={editingCell.x}
+            y={editingCell.y}
+            width={cell.width}
+            height={cell.height}
+            value={editingCell.value}
+            onSave={handleCellEditorSave}
+            onCancel={handleCellEditorCancel}
+          />
+        );
+      })()}
     </div>
   );
 };