paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-11-15 11:21:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove tables from canvas

Browse Source
This commit is contained in:
Guy Ben-Aharon
2024-08-14 16:21:01 +03:00
parent 34d8437593
commit c33cb5b177
3 changed files with 56 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/context/chartdb-context/chartdb-context.tsx
View File

@@ -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,

21
src/context/chartdb-context/chartdb-provider.tsx
View File

@@ -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,

39
src/pages/editor-page/canvas/canvas.tsx
View File

@@ -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) {
updateTables(
positionChanges.map((change) => ({
id: change.id,
x: change.position?.x,
y: change.position?.y,
}))
if (
positionChanges.length > 0 ||
removeChanges.length > 0
) {
updateTablesState((currentTables) =>
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
)
)
);
}