refactor(on-before-delete): async

examples/react/src/examples/Overview/index.tsx

@@ -47,9 +47,10 @@ const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge m
 const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
 const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
 const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
-const onBeforeDelete: OnBeforeDelete = ({ nodes, edges }) => {
+const onBeforeDelete: OnBeforeDelete = async ({ nodes, edges }) => {
   console.log('on before delete', nodes, edges);
-  return true;
+  const deleteElements = confirm('Do you want to remove the selected elements?');
+  return deleteElements;
 };
 const onDelete: OnDelete = ({ nodes, edges }) => console.log('on delete', nodes, edges);
 const onPaneMouseMove = (e: ReactMouseEvent) => console.log('pane move', e.clientX, e.clientY);

examples/react/src/examples/Validation/index.tsx

@@ -86,7 +86,7 @@ const ValidationFlow = () => {
     [setEdges]
   );
 
-  const onBeforeDelete: OnBeforeDelete = useCallback(() => {
+  const onBeforeDelete: OnBeforeDelete = useCallback(async () => {
     return true;
   }, []);
 

examples/svelte/src/routes/examples/overview/+page.svelte

@@ -177,9 +177,10 @@
 	}}
 	on:selectionclick={(event) => console.log('on selection click', event)}
 	on:selectioncontextmenu={(event) => console.log('on selection contextmenu', event)}
-	onbeforedelete={({ nodes, edges }) => {
+	onbeforedelete={async ({ nodes, edges }) => {
 		console.log('on before delete', nodes, edges);
-		return true;
+		const deleteElements = confirm('Are you sure you want to delete the selected elements?');
+		return deleteElements;
 	}}
 	autoPanOnConnect
 	autoPanOnNodeDrag

packages/react/src/hooks/useReactFlow.ts

@@ -118,7 +118,7 @@ export default function useReactFlow<NodeType extends Node = Node, EdgeType exte
   }, []);
 
   const deleteElements = useCallback<Instance.DeleteElements>(
-    ({ nodes: nodesToRemove = [], edges: edgesToRemove = [], onBeforeDelete }) => {
+    async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [], onBeforeDelete }) => {
       const {
         nodes,
         edges,
@@ -130,7 +130,7 @@ export default function useReactFlow<NodeType extends Node = Node, EdgeType exte
         onEdgesChange,
         onDelete,
       } = store.getState();
-      const { nodes: matchingNodes, edges: matchingEdges } = getElementsToRemove({
+      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
         nodesToRemove,
         edgesToRemove,
         nodes,

packages/react/src/types/instance.ts

@@ -32,10 +32,10 @@ export namespace Instance {
     NodeType,
     EdgeType
   >;
-  export type DeleteElements = (params: DeleteElementsOptions) => {
+  export type DeleteElements = (params: DeleteElementsOptions) => Promise<{
     deletedNodes: Node[];
     deletedEdges: Edge[];
-  };
+  }>;
   export type GetIntersectingNodes<NodeType extends Node = Node> = (
     node: NodeType | { id: Node['id'] } | Rect,
     partially?: boolean,

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -51,7 +51,7 @@ export function useSvelteFlow(): {
     nodesToRemove?: (Node | { id: Node['id'] })[],
     edgesToRemove?: (Edge | { id: Edge['id'] })[],
     onBeforeDelete?: OnBeforeDelete
-  ) => { deletedNodes: Node[]; deletedEdges: Edge[] };
+  ) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[] }>;
   screenToFlowPosition: (position: XYPosition) => XYPosition;
   flowToScreenPosition: (position: XYPosition) => XYPosition;
   viewport: Writable<Viewport>;
@@ -201,12 +201,12 @@ export function useSvelteFlow(): {
 
       return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
     },
-    deleteElements: (
+    deleteElements: async (
       nodesToRemove: (Node | { id: Node['id'] })[] = [],
       edgesToRemove: (Edge | { id: Edge['id'] })[] = [],
       onBeforeDelete?: OnBeforeDelete
     ) => {
-      const { nodes: matchingNodes, edges: matchingEdges } = getElementsToRemove({
+      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
         nodesToRemove,
         edgesToRemove,
         nodes: get(nodes),

packages/svelte/src/lib/store/index.ts

@@ -208,14 +208,14 @@ export function createStore({
     }
   }
 
-  store.deleteKeyPressed.subscribe((deleteKeyPressed) => {
+  store.deleteKeyPressed.subscribe(async (deleteKeyPressed) => {
     if (deleteKeyPressed) {
       const nodes = get(store.nodes);
       const edges = get(store.edges);
       const selectedNodes = nodes.filter((node) => node.selected);
       const selectedEdges = edges.filter((edge) => edge.selected);
 
-      const { nodes: matchingNodes, edges: matchingEdges } = getElementsToRemove({
+      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
         nodesToRemove: selectedNodes,
         edgesToRemove: selectedEdges,
         nodes,

packages/system/src/types/general.ts

@@ -148,4 +148,4 @@ export type OnBeforeDelete = <NodeType extends NodeBase = NodeBase, EdgeType ext
 }: {
   nodes: NodeType[];
   edges: EdgeType[];
-}) => boolean | { nodes: NodeType[]; edges: EdgeType[] };
+}) => Promise<boolean | { nodes: NodeType[]; edges: EdgeType[] }>;

packages/system/src/utils/graph.ts

@@ -336,7 +336,7 @@ export function calcNextPosition<NodeType extends NodeBase>(
  * @param param.onBeforeDelete - Callback to check which nodes and edges can be deleted
  * @returns nodes: nodes that can be deleted, edges: edges that can be deleted
  */
-export function getElementsToRemove<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>({
+export async function getElementsToRemove<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>({
   nodesToRemove = [],
   edgesToRemove = [],
   nodes,
@@ -348,10 +348,10 @@ export function getElementsToRemove<NodeType extends NodeBase = NodeBase, EdgeTy
   nodes: NodeType[];
   edges: EdgeType[];
   onBeforeDelete?: OnBeforeDelete;
-}): {
+}): Promise<{
   nodes: NodeType[];
   edges: EdgeType[];
-} {
+}> {
   const nodeIds = nodesToRemove.map((node) => node.id);
   const matchingNodes: NodeType[] = [];
 
@@ -388,7 +388,7 @@ export function getElementsToRemove<NodeType extends NodeBase = NodeBase, EdgeTy
     };
   }
 
-  const onBeforeDeleteResult = onBeforeDelete({
+  const onBeforeDeleteResult = await onBeforeDelete({
     nodes: matchingNodes,
     edges: matchingEdges,
   });