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
+13 -10
View File
@@ -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 = () => {
+13 -19
View File
@@ -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>
);
@@ -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 });
+4
View File
@@ -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;