Merge pull request #5484 from xyflow/middlewares

Experimental `useOnNodesChangeMiddleware`

.changeset/selfish-nails-sing.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': minor
+---
+
+Add `experimental_useOnNodesChangeMiddleware` hook

examples/react/src/App/routes.ts

@@ -60,6 +60,7 @@ import DevTools from '../examples/DevTools';
 import Redux from '../examples/Redux';
 import MovingHandles from '../examples/MovingHandles';
 import DetachedHandle from '../examples/DetachedHandle';
+import Middlewares from '../examples/Middlewares';
 
 export interface IRoute {
   name: string;
@@ -238,6 +239,11 @@ const routes: IRoute[] = [
     path: 'layouting',
     component: Layouting,
   },
+  {
+    name: 'Middlewares',
+    path: 'middlewares',
+    component: Middlewares,
+  },
   {
     name: 'Multi setNodes',
     path: 'multi-setnodes',

examples/react/src/examples/Middlewares/RestrictExtent.tsx

@@ -0,0 +1,54 @@
+import { NodeChange, experimental_useOnNodesChangeMiddleware } from '@xyflow/react';
+import { useCallback, useState } from 'react';
+
+export function RestrictExtent({
+  label = 'Restrict Extent',
+  minX = -Infinity,
+  minY = -Infinity,
+  maxX = Infinity,
+  maxY = Infinity,
+}: {
+  label?: string;
+  minX?: number;
+  minY?: number;
+  maxX?: number;
+  maxY?: number;
+}) {
+  const [isEnabled, setIsEnabled] = useState(false);
+  experimental_useOnNodesChangeMiddleware(
+    useCallback(
+      (changes: NodeChange[]) => {
+        if (!isEnabled) return changes;
+        return changes.map((change) => {
+          const { type } = change;
+          if (type === 'position') {
+            const { position } = change;
+            if (position) {
+              position.x = Math.min(Math.max(position.x, minX), maxX);
+              position.y = Math.min(Math.max(position.y, minY), maxY);
+              change.position = position;
+            }
+          } else if (type === 'add' || type === 'replace') {
+            const { item } = change;
+            if (item) {
+              item.position.x = Math.min(Math.max(item.position.x, minX), maxX);
+              item.position.y = Math.min(Math.max(item.position.y, minY), maxY);
+              change.item = item;
+            }
+          }
+          return change;
+        });
+      },
+      [minX, minY, maxX, maxY, isEnabled]
+    )
+  );
+
+  return (
+    <div>
+      <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+        <input type="checkbox" checked={isEnabled} onChange={(e) => setIsEnabled(e.target.checked)} />
+        {label}
+      </label>
+    </div>
+  );
+}

examples/react/src/examples/Middlewares/index.tsx

@@ -0,0 +1,85 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  Controls,
+  ReactFlowProvider,
+  Edge,
+  useReactFlow,
+  Panel,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  Connection,
+} from '@xyflow/react';
+import { initialNodes, initialEdges } from '../CancelConnection/data';
+import { RestrictExtent } from './RestrictExtent';
+
+const a = { id: 'a', data: { label: 'A' }, position: { x: 250, y: 5 } };
+const b = { id: 'b', data: { label: 'B' }, position: { x: 100, y: 100 } };
+const c = { id: 'c', data: { label: 'C' }, position: { x: 400, y: 100 } };
+
+const SetNotesBatchingFlow = () => {
+  const { setNodes, updateNode } = useReactFlow();
+
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  const triggerMultipleSetNodes = useCallback(() => {
+    setNodes([a]);
+    setNodes((nodes) => [...nodes, b]);
+    setNodes((nodes) => [...nodes, c]);
+    setNodes((nodes) =>
+      nodes.map((node) =>
+        node.id === 'a' ? { ...node, position: { x: node.position.x + 2000, y: node.position.y + 20 } } : node
+      )
+    );
+  }, []);
+
+  const triggerMultipleUpdateNodes = useCallback(() => {
+    triggerMultipleSetNodes();
+    updateNode('a', (a) => ({ position: { x: a.position.x + 20, y: a.position.y + 20 } }));
+    updateNode('b', (b) => ({ position: { x: b.position.x + 20, y: b.position.y + 20 } }));
+    updateNode('c', (c) => ({ position: { x: c.position.x + 20, y: c.position.y + 20 } }));
+    updateNode('a', (a) => ({ data: { ...a.data, label: `A ${Date.now()}` } }));
+    updateNode('b', (b) => ({ data: { ...b.data, label: `B ${Date.now()}` } }));
+    updateNode('c', (c) => ({ data: { ...c.data, label: `C ${Date.now()}` } }));
+  }, []);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      className="react-flow-basic-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+    >
+      <Panel position="top-left">
+        <RestrictExtent minX={0} maxX={500} label="Restrict X" />
+        <RestrictExtent minY={-100} maxY={500} label="Restrict Y" />
+      </Panel>
+      <Background variant={BackgroundVariant.Dots} />
+      <MiniMap />
+      <Controls />
+      <Panel position="top-right">
+        <button onClick={triggerMultipleSetNodes}>queue multiple setNodes calls</button>
+        <button onClick={triggerMultipleUpdateNodes}>queue multiple updateNode calls</button>
+      </Panel>
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <SetNotesBatchingFlow />
+    </ReactFlowProvider>
+  );
+}

packages/react/src/components/BatchProvider/index.tsx

@@ -28,7 +28,15 @@ export function BatchProvider<NodeType extends Node = Node, EdgeType extends Edg
   const store = useStoreApi<NodeType, EdgeType>();
 
   const nodeQueueHandler = useCallback((queueItems: QueueItem<NodeType>[]) => {
-    const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup, fitViewQueued } = store.getState();
+    const {
+      nodes = [],
+      setNodes,
+      hasDefaultNodes,
+      onNodesChange,
+      nodeLookup,
+      fitViewQueued,
+      onNodesChangeMiddlewareMap,
+    } = store.getState();
 
     /*
      * This is essentially an `Array.reduce` in imperative clothing. Processing
@@ -40,11 +48,15 @@ export function BatchProvider<NodeType extends Node = Node, EdgeType extends Edg
       next = typeof payload === 'function' ? payload(next) : payload;
     }
 
-    const changes = getElementsDiffChanges({
+    let changes = getElementsDiffChanges({
       items: next,
       lookup: nodeLookup,
     }) as NodeChange<NodeType>[];
 
+    for (const middleware of onNodesChangeMiddlewareMap.values()) {
+      changes = middleware(changes);
+    }
+
     if (hasDefaultNodes) {
       setNodes(next);
     }

packages/react/src/hooks/useOnEdgesChangeMiddleware.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import type { EdgeChange } from '@xyflow/system';
+
+import { useStoreApi } from './useStore';
+import type { Edge, Node } from '../types';
+
+/**
+ * Registers a middleware function to transform edge changes.
+ *
+ * @public
+ * @param fn - Middleware function. Should be memoized with useCallback to avoid re-registration.
+ */
+export function experimental_useOnEdgesChangeMiddleware<EdgeType extends Edge = Edge>(
+  fn: (changes: EdgeChange<EdgeType>[]) => EdgeChange<EdgeType>[]
+) {
+  const store = useStoreApi<Node, EdgeType>();
+  const [symbol] = useState(() => Symbol());
+
+  useEffect(() => {
+    const { onEdgesChangeMiddlewareMap } = store.getState();
+    onEdgesChangeMiddlewareMap.set(symbol, fn);
+  }, [fn]);
+
+  useEffect(() => {
+    const { onEdgesChangeMiddlewareMap } = store.getState();
+    return () => {
+      onEdgesChangeMiddlewareMap.delete(symbol);
+    };
+  }, []);
+}

packages/react/src/hooks/useOnNodesChangeMiddleware.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import type { NodeChange } from '@xyflow/system';
+
+import { useStoreApi } from './useStore';
+import type { Edge, Node } from '../types';
+
+/**
+ * Registers a middleware function to transform node changes.
+ *
+ * @public
+ * @param fn - Middleware function. Should be memoized with useCallback to avoid re-registration.
+ */
+export function experimental_useOnNodesChangeMiddleware<NodeType extends Node = Node>(
+  fn: (changes: NodeChange<NodeType>[]) => NodeChange<NodeType>[]
+) {
+  const store = useStoreApi<NodeType, Edge>();
+  const [symbol] = useState(() => Symbol());
+
+  useEffect(() => {
+    const { onNodesChangeMiddlewareMap } = store.getState();
+    onNodesChangeMiddlewareMap.set(symbol, fn);
+  }, [fn]);
+
+  useEffect(() => {
+    const { onNodesChangeMiddlewareMap } = store.getState();
+    return () => {
+      onNodesChangeMiddlewareMap.delete(symbol);
+    };
+  }, []);
+}

packages/react/src/index.ts

@@ -30,6 +30,9 @@ export { useConnection } from './hooks/useConnection';
 export { useInternalNode } from './hooks/useInternalNode';
 export { useNodeId } from './contexts/NodeIdContext';
 
+export { experimental_useOnNodesChangeMiddleware } from './hooks/useOnNodesChangeMiddleware';
+export { experimental_useOnEdgesChangeMiddleware } from './hooks/useOnEdgesChangeMiddleware';
+
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { isNode, isEdge } from './utils/general';
 

packages/react/src/store/index.ts

@@ -177,8 +177,8 @@ const createStore = ({
       },
       updateNodePositions: (nodeDragItems, dragging = false) => {
         const parentExpandChildren: ParentExpandChild[] = [];
-        const changes = [];
-        const { nodeLookup, triggerNodeChanges, connection, updateConnection } = get();
+        let changes = [];
+        const { nodeLookup, triggerNodeChanges, connection, updateConnection, onNodesChangeMiddlewareMap } = get();
 
         for (const [id, dragItem] of nodeDragItems) {
           // we are using the nodelookup to be sure to use the current expandParent and parentId value
@@ -223,6 +223,10 @@ const createStore = ({
           changes.push(...parentExpandChanges);
         }
 
+        for (const middleware of onNodesChangeMiddlewareMap.values()) {
+          changes = middleware(changes);
+        }
+
         triggerNodeChanges(changes);
       },
       triggerNodeChanges: (changes) => {

packages/react/src/store/initialState.ts

@@ -146,6 +146,9 @@ const getInitialState = ({
     lib: 'react',
     debug: false,
     ariaLabelConfig: defaultAriaLabelConfig,
+
+    onNodesChangeMiddlewareMap: new Map(),
+    onEdgesChangeMiddlewareMap: new Map(),
   };
 };
 

packages/react/src/types/store.ts

@@ -152,6 +152,9 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   lib: string;
   debug: boolean;
   ariaLabelConfig: AriaLabelConfig;
+
+  onNodesChangeMiddlewareMap: Map<symbol, (changes: NodeChange<NodeType>[]) => NodeChange<NodeType>[]>;
+  onEdgesChangeMiddlewareMap: Map<symbol, (changes: EdgeChange<EdgeType>[]) => EdgeChange<EdgeType>[]>;
 };
 
 export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {