Merge branch 'main' into feat/zindexmode

examples/react/src/App/routes.ts

@@ -61,6 +61,7 @@ import Redux from '../examples/Redux';
 import MovingHandles from '../examples/MovingHandles';
 import DetachedHandle from '../examples/DetachedHandle';
 import ZIndexMode from '../examples/ZIndexMode';
+import Middlewares from '../examples/Middlewares';
 
 export interface IRoute {
   name: string;
@@ -239,6 +240,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>
+  );
+}