Merge branch 'next' into refactor/use-react-flow

examples/react/src/examples/UseNodesInit/index.tsx

@@ -11,6 +11,8 @@ import {
   useEdgesState,
   OnConnect,
   useNodesInitialized,
+  Panel,
+  useReactFlow,
 } from '@xyflow/react';
 
 const initialNodes: Node[] = [
@@ -49,6 +51,7 @@ const initialEdges: Edge[] = [
 ];
 
 const UseZoomPanHelperFlow = () => {
+  const { addNodes } = useReactFlow();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
@@ -59,6 +62,13 @@ const UseZoomPanHelperFlow = () => {
     console.log('initialized', initialized);
   }, [initialized]);
 
+  const addNode = () =>
+    addNodes({
+      id: `${Math.random()}`,
+      data: { label: 'new node' },
+      position: { x: Math.random() * 400, y: Math.random() * 400 },
+    });
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -71,6 +81,9 @@ const UseZoomPanHelperFlow = () => {
     >
       <Background />
       <MiniMap />
+      <Panel>
+        <button onClick={addNode}>add node</button>
+      </Panel>
     </ReactFlow>
   );
 };

packages/react/src/hooks/useReactFlow.ts

@@ -1,9 +1,11 @@
 import { useMemo } from 'react';
 import {
+  EdgeRemoveChange,
   evaluateAbsolutePosition,
   getElementsToRemove,
   getOverlappingArea,
   isRectObject,
+  NodeRemoveChange,
   nodeToRect,
   type Rect,
 } from '@xyflow/system';
@@ -11,7 +13,7 @@ import {
 import useViewportHelper from './useViewportHelper';
 import { useStore, useStoreApi } from './useStore';
 import { useBatchContext } from '../components/BatchProvider';
-import { isNode } from '../utils';
+import { elementToRemoveChange, isNode } from '../utils';
 import type { ReactFlowInstance, Node, Edge, InternalNode, ReactFlowState, GeneralHelpers } from '../types';
 
 const selector = (s: ReactFlowState) => !!s.panZoom;
@@ -113,12 +115,10 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
         const {
           nodes,
           edges,
-          hasDefaultNodes,
-          hasDefaultEdges,
           onNodesDelete,
           onEdgesDelete,
-          onNodesChange,
-          onEdgesChange,
+          triggerNodeChanges,
+          triggerEdgeChanges,
           onDelete,
           onBeforeDelete,
         } = store.getState();
@@ -134,28 +134,17 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
         const hasMatchingNodes = matchingNodes.length > 0;
 
         if (hasMatchingEdges) {
-          if (hasDefaultEdges) {
-            const nextEdges = edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id));
-            store.getState().setEdges(nextEdges);
-          }
+          const edgeChanges: EdgeRemoveChange[] = matchingEdges.map(elementToRemoveChange);
 
           onEdgesDelete?.(matchingEdges);
-          onEdgesChange?.(
-            matchingEdges.map((edge) => ({
-              id: edge.id,
-              type: 'remove',
-            }))
-          );
+          triggerEdgeChanges(edgeChanges);
         }
 
         if (hasMatchingNodes) {
-          if (hasDefaultNodes) {
-            const nextNodes = nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id));
-            store.getState().setNodes(nextNodes);
-          }
+          const nodeChanges: NodeRemoveChange[] = matchingNodes.map(elementToRemoveChange);
 
           onNodesDelete?.(matchingNodes);
-          onNodesChange?.(matchingNodes.map((node) => ({ id: node.id, type: 'remove' })));
+          triggerNodeChanges(nodeChanges);
         }
 
         if (hasMatchingNodes || hasMatchingEdges) {

packages/react/src/index.ts

@@ -97,6 +97,7 @@ export {
   type EdgeRemoveChange,
   type EdgeAddChange,
   type EdgeReplaceChange,
+  type KeyCode,
 } from '@xyflow/system';
 
 // system utils

packages/react/src/store/index.ts

@@ -74,7 +74,7 @@ const createStore = ({
       // new dimensions and update the nodes.
       updateNodeInternals: (updates) => {
         const {
-          onNodesChange,
+          triggerNodeChanges,
           fitView,
           nodeLookup,
           parentLookup,
@@ -120,7 +120,7 @@ const createStore = ({
           if (debug) {
             console.log('React Flow: trigger node changes', changes);
           }
-          onNodesChange?.(changes);
+          triggerNodeChanges?.(changes);
         }
       },
       updateNodePositions: (nodeDragItems, dragging = false) => {

packages/react/src/utils/changes.ts

@@ -6,6 +6,8 @@ import {
   NodeChange,
   NodeSelectionChange,
   EdgeSelectionChange,
+  NodeRemoveChange,
+  EdgeRemoveChange,
 } from '@xyflow/system';
 import type { Node, Edge, InternalNode } from '../types';
 
@@ -258,3 +260,10 @@ export function getElementsDiffChanges({
 
   return changes;
 }
+
+export function elementToRemoveChange<T extends Node | Edge>(item: T): NodeRemoveChange | EdgeRemoveChange {
+  return {
+    id: item.id,
+    type: 'remove',
+  };
+}

packages/system/src/utils/graph.ts

@@ -395,7 +395,7 @@ export async function getElementsToRemove<NodeType extends NodeBase = NodeBase,
   nodes: NodeType[];
   edges: EdgeType[];
 }> {
-  const nodeIds = nodesToRemove.map((node) => node.id);
+  const nodeIds = new Set(nodesToRemove.map((node) => node.id));
   const matchingNodes: NodeType[] = [];
 
   for (const node of nodes) {
@@ -403,7 +403,7 @@ export async function getElementsToRemove<NodeType extends NodeBase = NodeBase,
       continue;
     }
 
-    const isIncluded = nodeIds.includes(node.id);
+    const isIncluded = nodeIds.has(node.id);
     const parentHit = !isIncluded && node.parentId && matchingNodes.find((n) => n.id === node.parentId);
 
     if (isIncluded || parentHit) {
@@ -411,13 +411,13 @@ export async function getElementsToRemove<NodeType extends NodeBase = NodeBase,
     }
   }
 
-  const edgeIds = edgesToRemove.map((edge) => edge.id);
+  const edgeIds = new Set(edgesToRemove.map((edge) => edge.id));
   const deletableEdges = edges.filter((edge) => edge.deletable !== false);
   const connectedEdges = getConnectedEdges(matchingNodes, deletableEdges);
   const matchingEdges: EdgeType[] = connectedEdges;
 
   for (const edge of deletableEdges) {
-    const isIncluded = edgeIds.includes(edge.id);
+    const isIncluded = edgeIds.has(edge.id);
 
     if (isIncluded && !matchingEdges.find((e) => e.id === edge.id)) {
       matchingEdges.push(edge);