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 = () => {
- {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 (
-
- );
- })()}
+ {editingCell && (
+
+ )}
);
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) => 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;