From 828ba0c7c15abfa95a97ffd8d263add8ba698bf2 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 31 Dec 2025 14:31:37 +0330
Subject: [PATCH] fix grid add text

---
 src/components/Table.tsx                      | 23 +++++++------
 src/pages/editor/components/EditorCanvas.tsx  | 32 ++++++++-----------
 .../components/canvas/ObjectRenderer.tsx      |  6 ++--
 src/pages/editor/store/editorStore.ts         |  4 +++
 4 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 489b6ba..e3a0d98 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -7,7 +7,7 @@ type TableProps = {
     obj: EditorObject;
     selectedCellId: string | null;
     onCellClick: (tableId: string, cellId: string, node: Konva.Node) => void;
-    onCellDblClick: (tableId: string, cellId: string, x: number, y: number, text: string) => void;
+    onCellDblClick: (tableId: string, cellId: string, x: number, y: number, width: number, height: number, text: string) => void;
     onDragEnd: (tableId: string, x: number, y: number) => void;
     draggable: boolean;
 };
@@ -48,17 +48,20 @@ const Table = ({
         const cell = cells[cellId];
         if (!cell) return;
 
-        const row = parseInt(cellId.split("-")[1]);
-        const col = parseInt(cellId.split("-")[2]);
-        const cellX = col * cellWidth;
-        const cellY = row * cellHeight;
-
-        const groupPos = groupRef.current.getAbsolutePosition();
+        // Get the target node (Rect or Text)
+        const targetNode = e.target;
+        
+        // Get the client rect which includes all transformations (scale, position, etc.)
+        const box = targetNode.getClientRect();
         const stageBox = stage.container().getBoundingClientRect();
-        const x = stageBox.left + groupPos.x + cellX;
-        const y = stageBox.top + groupPos.y + cellY;
+        
+        // Calculate position relative to viewport
+        const x = stageBox.left + box.x;
+        const y = stageBox.top + box.y;
+        const width = box.width;
+        const height = box.height;
 
-        onCellDblClick(obj.id, cellId, x, y, cell.text);
+        onCellDblClick(obj.id, cellId, x, y, width, height, cell.text);
     };
 
     const handleDragEnd = () => {
diff --git a/src/pages/editor/components/EditorCanvas.tsx b/src/pages/editor/components/EditorCanvas.tsx
index cd93a03..439c319 100644
--- a/src/pages/editor/components/EditorCanvas.tsx
+++ b/src/pages/editor/components/EditorCanvas.tsx
@@ -71,8 +71,8 @@ const EditorCanvas = () => {
     }
   };
 
-  const handleCellDblClick = (tableId: string, cellId: string, x: number, y: number, text: string) => {
-    setEditingCell({ tableId, cellId, x, y, value: text });
+  const handleCellDblClick = (tableId: string, cellId: string, x: number, y: number, width: number, height: number, text: string) => {
+    setEditingCell({ tableId, cellId, x, y, width, height, value: text });
   };
 
   const handleCellEditorSave = (text: string) => {
@@ -228,23 +228,17 @@ const EditorCanvas = () => {
           </Layer>
         </Stage>
       </div>
-      {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}
-          />
-        );
-      })()}
+      {editingCell && (
+        <CellEditor
+          x={editingCell.x}
+          y={editingCell.y}
+          width={editingCell.width}
+          height={editingCell.height}
+          value={editingCell.value}
+          onSave={handleCellEditorSave}
+          onCancel={handleCellEditorCancel}
+        />
+      )}
       <ZoomControls />
     </div>
   );
diff --git a/src/pages/editor/components/canvas/ObjectRenderer.tsx b/src/pages/editor/components/canvas/ObjectRenderer.tsx
index b4e78f2..092118d 100644
--- a/src/pages/editor/components/canvas/ObjectRenderer.tsx
+++ b/src/pages/editor/components/canvas/ObjectRenderer.tsx
@@ -23,7 +23,7 @@ type ObjectRendererProps = {
     onUpdate: (id: string, updates: Partial<EditorObject>) => void;
     draggable: boolean;
     onCellClick?: (tableId: string, cellId: string) => void;
-    onCellDblClick?: (tableId: string, cellId: string, x: number, y: number, text: string) => void;
+    onCellDblClick?: (tableId: string, cellId: string, x: number, y: number, width: number, height: number, text: string) => void;
     selectedCellId?: string | null;
 };
 
@@ -84,8 +84,8 @@ const ObjectRenderer = ({
                         onSelect(tableId, node);
                         onCellClick?.(tableId, cellId);
                     }}
-                    onCellDblClick={(tableId, cellId, x, y, text) => {
-                        onCellDblClick?.(tableId, cellId, x, y, text);
+                    onCellDblClick={(tableId, cellId, x, y, width, height, text) => {
+                        onCellDblClick?.(tableId, cellId, x, y, width, height, text);
                     }}
                     onDragEnd={(tableId, x, y) => {
                         onUpdate(tableId, { x, y });
diff --git a/src/pages/editor/store/editorStore.ts b/src/pages/editor/store/editorStore.ts
index 06ddc26..b349956 100644
--- a/src/pages/editor/store/editorStore.ts
+++ b/src/pages/editor/store/editorStore.ts
@@ -86,6 +86,8 @@ type EditorStoreType = {
     cellId: string;
     x: number;
     y: number;
+    width: number;
+    height: number;
     value: string;
   } | null;
   setEditingCell: (
@@ -94,6 +96,8 @@ type EditorStoreType = {
       cellId: string;
       x: number;
       y: number;
+      width: number;
+      height: number;
       value: string;
     } | null
   ) => void;