fix grid add text

This commit is contained in:
hamid zarghami
2025-12-31 14:31:37 +03:30
parent 1ba62b0cee
commit 828ba0c7c1
4 changed files with 33 additions and 32 deletions
+12 -9
View File
@@ -7,7 +7,7 @@ type TableProps = {
obj: EditorObject; obj: EditorObject;
selectedCellId: string | null; selectedCellId: string | null;
onCellClick: (tableId: string, cellId: string, node: Konva.Node) => void; 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; onDragEnd: (tableId: string, x: number, y: number) => void;
draggable: boolean; draggable: boolean;
}; };
@@ -48,17 +48,20 @@ const Table = ({
const cell = cells[cellId]; const cell = cells[cellId];
if (!cell) return; if (!cell) return;
const row = parseInt(cellId.split("-")[1]); // Get the target node (Rect or Text)
const col = parseInt(cellId.split("-")[2]); const targetNode = e.target;
const cellX = col * cellWidth;
const cellY = row * cellHeight;
const groupPos = groupRef.current.getAbsolutePosition(); // Get the client rect which includes all transformations (scale, position, etc.)
const box = targetNode.getClientRect();
const stageBox = stage.container().getBoundingClientRect(); const stageBox = stage.container().getBoundingClientRect();
const x = stageBox.left + groupPos.x + cellX;
const y = stageBox.top + groupPos.y + cellY;
onCellDblClick(obj.id, cellId, x, y, cell.text); // 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, width, height, cell.text);
}; };
const handleDragEnd = () => { const handleDragEnd = () => {
+6 -12
View File
@@ -71,8 +71,8 @@ const EditorCanvas = () => {
} }
}; };
const handleCellDblClick = (tableId: string, cellId: string, x: number, y: number, text: string) => { const handleCellDblClick = (tableId: string, cellId: string, x: number, y: number, width: number, height: number, text: string) => {
setEditingCell({ tableId, cellId, x, y, value: text }); setEditingCell({ tableId, cellId, x, y, width, height, value: text });
}; };
const handleCellEditorSave = (text: string) => { const handleCellEditorSave = (text: string) => {
@@ -228,23 +228,17 @@ const EditorCanvas = () => {
</Layer> </Layer>
</Stage> </Stage>
</div> </div>
{editingCell && (() => { {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 <CellEditor
x={editingCell.x} x={editingCell.x}
y={editingCell.y} y={editingCell.y}
width={cell.width} width={editingCell.width}
height={cell.height} height={editingCell.height}
value={editingCell.value} value={editingCell.value}
onSave={handleCellEditorSave} onSave={handleCellEditorSave}
onCancel={handleCellEditorCancel} onCancel={handleCellEditorCancel}
/> />
); )}
})()}
<ZoomControls /> <ZoomControls />
</div> </div>
); );
@@ -23,7 +23,7 @@ type ObjectRendererProps = {
onUpdate: (id: string, updates: Partial<EditorObject>) => void; onUpdate: (id: string, updates: Partial<EditorObject>) => void;
draggable: boolean; draggable: boolean;
onCellClick?: (tableId: string, cellId: string) => void; 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; selectedCellId?: string | null;
}; };
@@ -84,8 +84,8 @@ const ObjectRenderer = ({
onSelect(tableId, node); onSelect(tableId, node);
onCellClick?.(tableId, cellId); onCellClick?.(tableId, cellId);
}} }}
onCellDblClick={(tableId, cellId, x, y, text) => { onCellDblClick={(tableId, cellId, x, y, width, height, text) => {
onCellDblClick?.(tableId, cellId, x, y, text); onCellDblClick?.(tableId, cellId, x, y, width, height, text);
}} }}
onDragEnd={(tableId, x, y) => { onDragEnd={(tableId, x, y) => {
onUpdate(tableId, { x, y }); onUpdate(tableId, { x, y });
+4
View File
@@ -86,6 +86,8 @@ type EditorStoreType = {
cellId: string; cellId: string;
x: number; x: number;
y: number; y: number;
width: number;
height: number;
value: string; value: string;
} | null; } | null;
setEditingCell: ( setEditingCell: (
@@ -94,6 +96,8 @@ type EditorStoreType = {
cellId: string; cellId: string;
x: number; x: number;
y: number; y: number;
width: number;
height: number;
value: string; value: string;
} | null } | null
) => void; ) => void;