Merge branch 'next' into refactor/infer-node-types

examples/react/src/App/routes.ts

@@ -28,6 +28,7 @@ import NodeTypesObjectChange from '../examples/NodeTypesObjectChange';
 import Overview from '../examples/Overview';
 import Provider from '../examples/Provider';
 import SaveRestore from '../examples/SaveRestore';
+import SetNodesBatching from '../examples/SetNodesBatching';
 import Stress from '../examples/Stress';
 import Subflow from '../examples/Subflow';
 import SwitchFlow from '../examples/Switch';
@@ -226,6 +227,11 @@ const routes: IRoute[] = [
     path: 'save-restore',
     component: SaveRestore,
   },
+  {
+    name: 'SetNodes Batching',
+    path: 'setnodes-batching',
+    component: SetNodesBatching,
+  },
   {
     name: 'Stress',
     path: 'stress',

examples/react/src/examples/CustomMiniMapNode/index.tsx

@@ -27,9 +27,9 @@ const buttonStyle: CSSProperties = {
   zIndex: 4,
 };
 
-const CustomMiniMapNode = ({ x, y, width, height, color }: MiniMapNodeProps) => (
-  <circle cx={x} cy={y} r={Math.max(width, height) / 2} fill={color} />
-);
+const CustomMiniMapNode = ({ x, y, width, height }: MiniMapNodeProps) => {
+  return <circle cx={x} cy={y} r={Math.max(width, height) / 2} fill="#ffcc00" />;
+};
 
 const CustomMiniMapNodeFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);

examples/react/src/examples/NodeResizer/index.tsx

@@ -116,6 +116,42 @@ const initialNodes: Node[] = [
     position: { x: 250, y: 400 },
     style: { ...nodeStyle },
   },
+  {
+    id: '5',
+    type: 'defaultResizer',
+    data: { label: 'Parent', keepAspectRatio: true },
+    position: { x: 700, y: 0 },
+    style: { ...nodeStyle, width: 300, height: 400 },
+  },
+  {
+    id: '5a',
+    type: 'defaultResizer',
+    data: {
+      label: 'Child with extent: parent',
+    },
+    position: { x: 50, y: 50 },
+    parentNode: '5',
+    extent: 'parent',
+    style: { ...nodeStyle, width: 50, height: 100 },
+  },
+  {
+    id: '5b',
+    type: 'defaultResizer',
+    data: { label: 'Child with expandParent' },
+    position: { x: 150, y: 100 },
+    parentNode: '5',
+    expandParent: true,
+    style: { ...nodeStyle },
+  },
+  {
+    id: '5c',
+    type: 'defaultResizer',
+    data: { label: 'Child with expandParent & keepAspectRatio', keepAspectRatio: true },
+    position: { x: 25, y: 200 },
+    parentNode: '5',
+    expandParent: true,
+    style: { ...nodeStyle },
+  },
 ];
 
 const CustomNodeFlow = () => {

examples/react/src/examples/SetNodesBatching/index.tsx

@@ -0,0 +1,70 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  Controls,
+  ReactFlowProvider,
+  Node,
+  Edge,
+  useReactFlow,
+  Panel,
+} from '@xyflow/react';
+
+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 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 + 20, 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
+      defaultNodes={[]}
+      defaultEdges={[]}
+      className="react-flow-basic-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+    >
+      <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>
+  );
+}

examples/react/src/examples/Subflow/index.tsx

@@ -90,7 +90,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 5' },
     position: { x: 650, y: 250 },
     className: 'light',
-    style: { width: 400, height: 150 },
+    style: { width: 100, height: 100 },
     zIndex: 1000,
   },
   {
@@ -161,9 +161,12 @@ const Subflow = () => {
     setNodes((nds) => {
       return nds.map((n) => {
         if (!n.parentNode) {
-          n.position = {
-            x: Math.random() * 400,
-            y: Math.random() * 400,
+          return {
+            ...n,
+            position: {
+              x: Math.random() * 400,
+              y: Math.random() * 400,
+            },
           };
         }
 
@@ -178,8 +181,10 @@ const Subflow = () => {
   const toggleClassnames = () => {
     setNodes((nds) => {
       return nds.map((n) => {
-        n.className = n.className === 'light' ? 'dark' : 'light';
-        return n;
+        return {
+          ...n,
+          className: n.className === 'light' ? 'dark' : 'light',
+        };
       });
     });
   };
@@ -187,8 +192,10 @@ const Subflow = () => {
   const toggleChildNodes = () => {
     setNodes((nds) => {
       return nds.map((n) => {
-        n.hidden = !!n.parentNode && !n.hidden;
-        return n;
+        return {
+          ...n,
+          hidden: !!n.parentNode && !n.hidden,
+        };
       });
     });
   };
@@ -215,19 +222,12 @@ const Subflow = () => {
       <Background />
 
       <Panel position="top-right">
-        <button onClick={resetTransform} style={{ marginRight: 5 }}>
-          reset transform
-        </button>
-        <button onClick={updatePos} style={{ marginRight: 5 }}>
-          change pos
-        </button>
-        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
-          toggle classnames
-        </button>
-        <button style={{ marginRight: 5 }} onClick={toggleChildNodes}>
-          toggleChildNodes
-        </button>
+        <button onClick={resetTransform}>reset transform</button>
+        <button onClick={updatePos}>change pos</button>
+        <button onClick={toggleClassnames}>toggle classnames</button>
+        <button onClick={toggleChildNodes}>toggleChildNodes</button>
         <button onClick={logToObject}>toObject</button>
+        <button onClick={() => setNodes(initialNodes)}>setNodes</button>
       </Panel>
     </ReactFlow>
   );

examples/react/src/examples/UseNodesData/TextNode.tsx

@@ -14,8 +14,16 @@ function TextNode({ id, data }: NodeProps) {
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
       <div>node {id}</div>
-      <div>
-        <input onChange={(evt) => updateText(evt.target.value)} value={text} />
+      <div style={{ marginTop: 5 }}>
+        <label style={{ fontSize: 12 }}>useState + updateNodeData</label>
+        <input onChange={(evt) => updateText(evt.target.value)} value={text} style={{ display: 'block' }} />
+
+        <label style={{ fontSize: 12 }}>updateNodeData</label>
+        <input
+          onChange={(evt) => updateNodeData(id, { text: evt.target.value })}
+          value={data.text}
+          style={{ display: 'block' }}
+        />
       </div>
       <Handle type="source" position={Position.Right} />
     </div>

examples/react/src/examples/UseNodesData/index.tsx

@@ -41,7 +41,6 @@ const initNodes: MyNode[] = [
     data: {},
     position: { x: 100, y: 0 },
   },
-
   {
     id: '2',
     type: 'text',