diff --git a/examples/vite-app/src/examples/UseReactFlow/index.tsx b/examples/vite-app/src/examples/UseReactFlow/index.tsx
index eb83a88e..6fca9627 100644
--- a/examples/vite-app/src/examples/UseReactFlow/index.tsx
+++ b/examples/vite-app/src/examples/UseReactFlow/index.tsx
@@ -113,18 +113,17 @@ const UseZoomPanHelperFlow = () => {
console.log('edges', getEdges());
}, [getNodes, getEdges]);
- const deleteSelectedElements1 = useCallback(() => {
- const selectedNodes = nodes.filter(node => node.selected).map(node => node.id);
- const selectedEdges = edges.filter(edge => edge.selected).map(edge => edge.id);
- deleteElements(selectedNodes, selectedEdges);
+ const deleteSelectedElements = useCallback(() => {
+ const selectedNodes = nodes.filter(node => node.selected);
+ const selectedEdges = edges.filter(edge => edge.selected);
+ deleteElements({ nodes: selectedNodes, edges: selectedEdges });
}, [deleteElements, nodes, edges])
const deleteSomeElements = useCallback(() => {
- deleteElements(['2'],['e1-3'])
+ deleteElements({ nodes: [{ id: '2' }], edges: [{ id: 'e1-3' }] })
}, [])
useEffect(() => {
- // called twice in strict mode of development mode
addEdges({ id: 'e3-4', source: '3', target: '4' });
}, [addEdges]);
@@ -150,8 +149,7 @@ const UseZoomPanHelperFlow = () => {
-
-
+
diff --git a/packages/core/src/hooks/useGlobalKeyHandler.ts b/packages/core/src/hooks/useGlobalKeyHandler.ts
index 2827d9cb..f2b206e7 100644
--- a/packages/core/src/hooks/useGlobalKeyHandler.ts
+++ b/packages/core/src/hooks/useGlobalKeyHandler.ts
@@ -20,9 +20,9 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
if (deleteKeyPressed) {
const { nodeInternals, edges } = store.getState();
const nodes = Array.from(nodeInternals.values());
- const nodeIds = nodes.filter((node) => node.selected).map((node) => node.id);
- const edgeIds = edges.filter((edge) => edge.selected).map((edge) => edge.id);
- deleteElements(nodeIds, edgeIds);
+ const selectedNodes = nodes.filter((node) => node.selected);
+ const selectedEdges = edges.filter((edge) => edge.selected);
+ deleteElements({nodes: selectedNodes, edges: selectedEdges});
store.setState({ nodesSelectionActive: false });
}
}, [deleteKeyPressed]);
diff --git a/packages/core/src/hooks/useReactFlow.ts b/packages/core/src/hooks/useReactFlow.ts
index 32f4ee86..77415b9b 100644
--- a/packages/core/src/hooks/useReactFlow.ts
+++ b/packages/core/src/hooks/useReactFlow.ts
@@ -114,7 +114,7 @@ export default function useReactFlow(): ReactFlo
};
}, []);
- const deleteElements = useCallback((nodeIds, edgeIds) => {
+ const deleteElements = useCallback(({ nodes: nodesDeleted, edges: edgesDeleted }) => {
const {
nodeInternals,
edges,
@@ -126,6 +126,8 @@ export default function useReactFlow(): ReactFlo
onEdgesChange,
} = store.getState();
const nodes = Array.from(nodeInternals.values());
+ const nodeIds = (nodesDeleted || []).map((node) => node.id);
+ const edgeIds = (edgesDeleted || []).map((edge) => edge.id);
const nodesToRemove = nodes.reduce((res, node) => {
const parentHit = !nodeIds.includes(node.id) && node.parentNode && res.find((n) => n.id === node.parentNode);
const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
diff --git a/packages/core/src/types/instance.ts b/packages/core/src/types/instance.ts
index 8548c9f3..0c7200d2 100644
--- a/packages/core/src/types/instance.ts
+++ b/packages/core/src/types/instance.ts
@@ -8,6 +8,10 @@ export type ReactFlowJsonObject = {
viewport: Viewport;
};
+export type DeleteElementsOptions = {
+ nodes?: (Partial & { id: Node['id'] })[],
+ edges?: (Partial & { id: Edge['id'] })[]
+};
export namespace Instance {
export type GetNodes = () => Node[];
export type SetNodes = (
@@ -22,7 +26,7 @@ export namespace Instance {
export type GetEdge = (id: string) => Edge | undefined;
export type AddEdges = (payload: Edge[] | Edge) => void;
export type ToObject = () => ReactFlowJsonObject;
- export type DeleteElements = (nodeIds: string[], edgeIds: string[]) => void
+ export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => void;
}
export type ReactFlowInstance = {