fix grid add text
This commit is contained in:
+13
-10
@@ -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 = () => {
|
||||
|
||||
@@ -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 });
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user