remove tables from canvas

src/context/chartdb-context/chartdb-context.tsx

@@ -21,6 +21,9 @@ export interface ChartDBContext {
     removeTable: (id: string) => void;
     updateTable: (id: string, table: Partial<DBTable>) => void;
     updateTables: (tables: PartialExcept<DBTable, 'id'>[]) => void;
+    updateTablesState: (
+        updateFn: (tables: DBTable[]) => PartialExcept<DBTable, 'id'>[]
+    ) => void;
 
     // Field operations
     getField: (tableId: string, fieldId: string) => DBField | null;
@@ -75,6 +78,7 @@ export const chartDBContext = createContext<ChartDBContext>({
     addTable: emptyFn,
     removeTable: emptyFn,
     updateTable: emptyFn,
+    updateTablesState: emptyFn,
 
     // Field operations
     updateField: emptyFn,

src/context/chartdb-context/chartdb-provider.tsx

@@ -70,6 +70,26 @@ export const ChartDBProvider: React.FC<React.PropsWithChildren> = ({
         );
     };
 
+    const updateTablesState = (
+        updateFn: (tables: DBTable[]) => PartialExcept<DBTable, 'id'>[]
+    ) => {
+        setTables((prevTables) => {
+            const updatedTables = updateFn(prevTables);
+            return prevTables
+                .map((prevTable) => {
+                    const updatedTable = updatedTables.find(
+                        (t) => t.id === prevTable.id
+                    );
+                    return updatedTable
+                        ? { ...prevTable, ...updatedTable }
+                        : prevTable;
+                })
+                .filter((prevTable) =>
+                    updatedTables.some((t) => t.id === prevTable.id)
+                );
+        });
+    };
+
     const updateField = (
         tableId: string,
         fieldId: string,
@@ -261,6 +281,7 @@ export const ChartDBProvider: React.FC<React.PropsWithChildren> = ({
                 removeTable,
                 updateTable,
                 updateTables,
+                updateTablesState,
                 updateField,
                 removeField,
                 createField,

src/pages/editor-page/canvas/canvas.tsx

@@ -9,6 +9,7 @@ import {
     MiniMap,
     Controls,
     NodePositionChange,
+    NodeRemoveChange,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { TableNode, TableNodeType } from './table-node';
@@ -23,7 +24,7 @@ const initialEdges: TableEdgeType[] = [];
 export interface CanvasProps {}
 
 export const Canvas: React.FC<CanvasProps> = () => {
-    const { tables, updateTables, createRelationship } = useChartDB();
+    const { tables, createRelationship, updateTablesState } = useChartDB();
     const nodeTypes = useMemo(() => ({ table: TableNode }), []);
     const edgeTypes = useMemo(() => ({ 'table-edge': TableEdge }), []);
 
@@ -71,14 +72,36 @@ export const Canvas: React.FC<CanvasProps> = () => {
                             (change) =>
                                 change.type === 'position' && !change.dragging
                         ) as NodePositionChange[];
+                    const removeChanges: NodeRemoveChange[] = changes.filter(
+                        (change) => change.type === 'remove'
+                    ) as NodeRemoveChange[];
 
-                    if (positionChanges.length > 0) {
+                    if (
-                        updateTables(
+                        positionChanges.length > 0 ||
-                            positionChanges.map((change) => ({
+                        removeChanges.length > 0
-                                id: change.id,
+                    ) {
-                                x: change.position?.x,
+                        updateTablesState((currentTables) =>
-                                y: change.position?.y,
+                            currentTables
-                            }))
+                                .map((currentTable) => {
+                                    const positionChange = positionChanges.find(
+                                        (change) =>
+                                            change.id === currentTable.id
+                                    );
+                                    if (positionChange) {
+                                        return {
+                                            id: currentTable.id,
+                                            x: positionChange.position?.x,
+                                            y: positionChange.position?.y,
+                                        };
+                                    }
+                                    return currentTable;
+                                })
+                                .filter(
+                                    (table) =>
+                                        !removeChanges.some(
+                                            (change) => change.id === table.id
+                                        )
+                                )
                         );
                     }