From cec7da54dfff818c18cbf3267bcf383888260ad7 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 28 Aug 2025 10:44:54 +0200 Subject: [PATCH 01/29] initial version of middlewares --- .../react/src/examples/Overview/index.tsx | 36 ++++++- .../src/components/BatchProvider/index.tsx | 24 ++++- packages/react/src/hooks/useMiddleware.ts | 97 +++++++++++++++++++ packages/react/src/index.ts | 2 + packages/react/src/store/index.ts | 8 +- packages/react/src/store/initialState.ts | 5 + packages/react/src/types/store.ts | 5 + 7 files changed, 172 insertions(+), 5 deletions(-) create mode 100644 packages/react/src/hooks/useMiddleware.ts diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 8dddbb0d..8e6a3441 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -17,6 +17,8 @@ import { ConnectionMode, OnBeforeDelete, OnDelete, + useNodeChangeMiddleware, + NodeChange, } from '@xyflow/react'; const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes); @@ -191,6 +193,37 @@ const nodeColor = (n: Node): string => { return '#fff'; }; +function RestrictExtent({ + minX = -Infinity, + minY = -Infinity, + maxX = Infinity, + maxY = Infinity, +}: { + minX?: number; + minY?: number; + maxX?: number; + maxY?: number; +}) { + useNodeChangeMiddleware( + useCallback( + (changes: NodeChange[]) => { + return changes.map((change) => { + if (change.type === 'position' && change.position) { + const { position } = change; + position.x = Math.min(Math.max(position.x, minX), maxX); + position.y = Math.min(Math.max(position.y, minY), maxY); + change.position = position; + } + return change; + }); + }, + [minX, minY, maxX, maxY] + ) + ); + + return null; +} + const OverviewFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); @@ -234,8 +267,9 @@ const OverviewFlow = () => { maxZoom={Infinity} onBeforeDelete={onBeforeDelete} onDelete={onDelete} - onPaneMouseMove={onPaneMouseMove} + // onPaneMouseMove={onPaneMouseMove} > + diff --git a/packages/react/src/components/BatchProvider/index.tsx b/packages/react/src/components/BatchProvider/index.tsx index b2ed270f..d70d6fa8 100644 --- a/packages/react/src/components/BatchProvider/index.tsx +++ b/packages/react/src/components/BatchProvider/index.tsx @@ -28,7 +28,15 @@ export function BatchProvider(); const nodeQueueHandler = useCallback((queueItems: QueueItem[]) => { - const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup, fitViewQueued } = store.getState(); + const { + nodes = [], + setNodes, + hasDefaultNodes, + onNodesChange, + nodeLookup, + fitViewQueued, + nodeChangeMiddleware, + } = store.getState(); /* * This is essentially an `Array.reduce` in imperative clothing. Processing @@ -40,11 +48,23 @@ export function BatchProvider[]; + console.log('this workds'); + + for (const middleware of nodeChangeMiddleware.values()) { + changes = middleware(changes); + } + + // for (const middleware of nodeSyncMiddleware.values()) { + // changes = middleware(changes); + // } + + // Do we always want to setNodes(next) or only when there are changes? + if (hasDefaultNodes) { setNodes(next); } diff --git a/packages/react/src/hooks/useMiddleware.ts b/packages/react/src/hooks/useMiddleware.ts new file mode 100644 index 00000000..b2192564 --- /dev/null +++ b/packages/react/src/hooks/useMiddleware.ts @@ -0,0 +1,97 @@ +import { NodeChange } from '@xyflow/system'; +import { useEffect, useRef } from 'react'; +import { useStoreApi } from './useStore'; +import { Edge, Node } from '../types'; + +/** + * We identify each middleware with a symbol that is unique for each hook instance. + */ + +function useSymbol() { + const symbol = useRef(); + if (!symbol.current) { + symbol.current = Symbol(); + } + return symbol; +} + +export function useNodeChangeMiddleware( + fn: (changes: NodeChange[]) => NodeChange[] +) { + const store = useStoreApi(); + const symbol = useSymbol(); + + useEffect(() => { + const { nodeChangeMiddleware } = store.getState(); + nodeChangeMiddleware.set(symbol.current!, fn); + }, [fn]); + + useEffect(() => { + const { nodeChangeMiddleware } = store.getState(); + return () => { + nodeChangeMiddleware.delete(symbol.current!); + }; + }, []); +} + +export function useNodeChangeMiddlewareDynamic( + fn: (changes: NodeChange[]) => NodeChange[] +) { + const store = useStoreApi(); + const symbol = useSymbol(); + + const { nodeChangeMiddleware } = store.getState(); + nodeChangeMiddleware.delete(symbol.current!); + nodeChangeMiddleware.set(symbol.current!, fn); +} + +// export function useEdgeChangeMiddleware(fn: (changes: EdgeChange[]) => EdgeChange[]) { +// const store = useStoreApi(); +// const symbol = useSymbol(); + +// useEffect(() => { +// const { edgeChangeMiddleware } = store.getState(); +// edgeChangeMiddleware.set(symbol.current!, fn); +// }, [fn]); + +// useEffect(() => { +// const { edgeChangeMiddleware } = store.getState(); +// return () => { +// edgeChangeMiddleware.delete(symbol.current!); +// }; +// }, []); +// } + +// export function useNodeSyncMiddleware(fn: (changes: NodeChange[]) => NodeChange[]) { +// const store = useStoreApi(); +// const symbol = useSymbol(); + +// useEffect(() => { +// const { nodeSyncMiddleware } = store.getState(); +// nodeSyncMiddleware.set(symbol.current!, fn); +// }, [fn]); + +// useEffect(() => { +// const { nodeSyncMiddleware } = store.getState(); +// return () => { +// nodeSyncMiddleware.delete(symbol.current!); +// }; +// }, []); +// } + +// export function useEdgeSyncMiddleware(fn: (changes: EdgeChange[]) => EdgeChange[]) { +// const store = useStoreApi(); +// const symbol = useSymbol(); + +// useEffect(() => { +// const { edgeSyncMiddleware } = store.getState(); +// edgeSyncMiddleware.set(symbol.current!, fn); +// }, [fn]); + +// useEffect(() => { +// const { edgeSyncMiddleware } = store.getState(); +// return () => { +// edgeSyncMiddleware.delete(symbol.current!); +// }; +// }, []); +// } diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index b4a67f2e..859e51e8 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -30,6 +30,8 @@ export { useConnection } from './hooks/useConnection'; export { useInternalNode } from './hooks/useInternalNode'; export { useNodeId } from './contexts/NodeIdContext'; +export { useNodeChangeMiddleware, useNodeChangeMiddlewareDynamic } from './hooks/useMiddleware'; + export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; export { isNode, isEdge } from './utils/general'; diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 085f8b1e..0391b041 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -175,8 +175,8 @@ const createStore = ({ }, updateNodePositions: (nodeDragItems, dragging = false) => { const parentExpandChildren: ParentExpandChild[] = []; - const changes = []; - const { nodeLookup, triggerNodeChanges } = get(); + let changes = []; + const { nodeLookup, triggerNodeChanges, nodeChangeMiddleware } = get(); for (const [id, dragItem] of nodeDragItems) { // we are using the nodelookup to be sure to use the current expandParent and parentId value @@ -216,6 +216,10 @@ const createStore = ({ changes.push(...parentExpandChanges); } + for (const middleware of nodeChangeMiddleware.values()) { + changes = middleware(changes); + } + triggerNodeChanges(changes); }, triggerNodeChanges: (changes) => { diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts index bfc9baaa..917ef3e7 100644 --- a/packages/react/src/store/initialState.ts +++ b/packages/react/src/store/initialState.ts @@ -146,6 +146,11 @@ const getInitialState = ({ lib: 'react', debug: false, ariaLabelConfig: defaultAriaLabelConfig, + + nodeChangeMiddleware: new Map(), + edgeChangeMiddleware: new Map(), + nodeSyncMiddleware: new Map(), + edgeSyncMiddleware: new Map(), }; }; diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts index 1fe0d308..a1ab5d64 100644 --- a/packages/react/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -152,6 +152,11 @@ export type ReactFlowStore[]) => NodeChange[]>; + edgeChangeMiddleware: Map[]) => EdgeChange[]>; + nodeSyncMiddleware: Map[]) => NodeChange[]>; + edgeSyncMiddleware: Map[]) => EdgeChange[]>; }; export type ReactFlowActions = { From e23d4f0ed616f485fc1e961ba28279d999c6e3a9 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 28 Aug 2025 11:16:19 +0200 Subject: [PATCH 02/29] add middleware example --- examples/react/src/App/routes.ts | 6 + .../react/src/examples/Middlewares/index.tsx | 125 ++++++++++++++++++ .../react/src/examples/Overview/index.tsx | 34 +---- .../src/components/BatchProvider/index.tsx | 2 - 4 files changed, 132 insertions(+), 35 deletions(-) create mode 100644 examples/react/src/examples/Middlewares/index.tsx diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts index 52f80979..d781ff4d 100644 --- a/examples/react/src/App/routes.ts +++ b/examples/react/src/App/routes.ts @@ -59,6 +59,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; @@ -232,6 +233,11 @@ const routes: IRoute[] = [ path: 'layouting', component: Layouting, }, + { + name: 'Middlewares', + path: 'middlewares', + component: Middlewares, + }, { name: 'Multi setNodes', path: 'multi-setnodes', diff --git a/examples/react/src/examples/Middlewares/index.tsx b/examples/react/src/examples/Middlewares/index.tsx new file mode 100644 index 00000000..b3950b3d --- /dev/null +++ b/examples/react/src/examples/Middlewares/index.tsx @@ -0,0 +1,125 @@ +import { useCallback } from 'react'; +import { + ReactFlow, + MiniMap, + Background, + BackgroundVariant, + Controls, + ReactFlowProvider, + Node, + Edge, + useReactFlow, + Panel, + useNodesState, + useEdgesState, + addEdge, + Connection, + useNodeChangeMiddleware, + NodeChange, +} from '@xyflow/react'; +import { initialNodes, initialEdges } from '../CancelConnection/data'; + +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 } }; + +function RestrictExtent({ + minX = -Infinity, + minY = -Infinity, + maxX = Infinity, + maxY = Infinity, +}: { + minX?: number; + minY?: number; + maxX?: number; + maxY?: number; +}) { + useNodeChangeMiddleware( + useCallback( + (changes: NodeChange[]) => { + 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] + ) + ); + + return null; +} + +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 ( + + + + + + + + + + + ); +}; + +export default function App() { + return ( + + + + ); +} diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 8e6a3441..7add02f0 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -193,37 +193,6 @@ const nodeColor = (n: Node): string => { return '#fff'; }; -function RestrictExtent({ - minX = -Infinity, - minY = -Infinity, - maxX = Infinity, - maxY = Infinity, -}: { - minX?: number; - minY?: number; - maxX?: number; - maxY?: number; -}) { - useNodeChangeMiddleware( - useCallback( - (changes: NodeChange[]) => { - return changes.map((change) => { - if (change.type === 'position' && change.position) { - const { position } = change; - position.x = Math.min(Math.max(position.x, minX), maxX); - position.y = Math.min(Math.max(position.y, minY), maxY); - change.position = position; - } - return change; - }); - }, - [minX, minY, maxX, maxY] - ) - ); - - return null; -} - const OverviewFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); @@ -267,9 +236,8 @@ const OverviewFlow = () => { maxZoom={Infinity} onBeforeDelete={onBeforeDelete} onDelete={onDelete} - // onPaneMouseMove={onPaneMouseMove} + onPaneMouseMove={onPaneMouseMove} > - diff --git a/packages/react/src/components/BatchProvider/index.tsx b/packages/react/src/components/BatchProvider/index.tsx index d70d6fa8..28f3aa4b 100644 --- a/packages/react/src/components/BatchProvider/index.tsx +++ b/packages/react/src/components/BatchProvider/index.tsx @@ -53,8 +53,6 @@ export function BatchProvider[]; - console.log('this workds'); - for (const middleware of nodeChangeMiddleware.values()) { changes = middleware(changes); } From 12ae96129c64629a52bc25284aeeb43f3e05207f Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 28 Aug 2025 11:17:26 +0200 Subject: [PATCH 03/29] remove imports --- examples/react/src/examples/Overview/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 7add02f0..8dddbb0d 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -17,8 +17,6 @@ import { ConnectionMode, OnBeforeDelete, OnDelete, - useNodeChangeMiddleware, - NodeChange, } from '@xyflow/react'; const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes); From 8726778c02b74444e8a0ae7143e98b711e3ea205 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Fri, 29 Aug 2025 11:24:10 +0200 Subject: [PATCH 04/29] improved middleware example --- .../examples/Middlewares/RestrictExtent.tsx | 55 +++++++++++++++++++ .../react/src/examples/Middlewares/index.tsx | 52 ++---------------- 2 files changed, 61 insertions(+), 46 deletions(-) create mode 100644 examples/react/src/examples/Middlewares/RestrictExtent.tsx diff --git a/examples/react/src/examples/Middlewares/RestrictExtent.tsx b/examples/react/src/examples/Middlewares/RestrictExtent.tsx new file mode 100644 index 00000000..beec2630 --- /dev/null +++ b/examples/react/src/examples/Middlewares/RestrictExtent.tsx @@ -0,0 +1,55 @@ +import { NodeChange, Panel, useNodeChangeMiddleware } 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); + useNodeChangeMiddleware( + 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 ( +
+ +
+ ); +} diff --git a/examples/react/src/examples/Middlewares/index.tsx b/examples/react/src/examples/Middlewares/index.tsx index b3950b3d..c7a05770 100644 --- a/examples/react/src/examples/Middlewares/index.tsx +++ b/examples/react/src/examples/Middlewares/index.tsx @@ -6,7 +6,6 @@ import { BackgroundVariant, Controls, ReactFlowProvider, - Node, Edge, useReactFlow, Panel, @@ -14,57 +13,14 @@ import { useEdgesState, addEdge, Connection, - useNodeChangeMiddleware, - NodeChange, } 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 } }; -function RestrictExtent({ - minX = -Infinity, - minY = -Infinity, - maxX = Infinity, - maxY = Infinity, -}: { - minX?: number; - minY?: number; - maxX?: number; - maxY?: number; -}) { - useNodeChangeMiddleware( - useCallback( - (changes: NodeChange[]) => { - 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] - ) - ); - - return null; -} - const SetNotesBatchingFlow = () => { const { setNodes, updateNode } = useReactFlow(); @@ -99,15 +55,19 @@ const SetNotesBatchingFlow = () => { edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} + onConnect={onConnect} className="react-flow-basic-example" minZoom={0.2} maxZoom={4} fitView > + + + + - From 3c0a625d7e97707ef0de0d07cb98179e6aaac797 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 8 Oct 2025 21:44:20 +0200 Subject: [PATCH 05/29] chore(middleware): cleanup --- .../examples/Middlewares/RestrictExtent.tsx | 5 +- .../src/components/BatchProvider/index.tsx | 10 +-- packages/react/src/hooks/useMiddleware.ts | 87 +++++-------------- packages/react/src/index.ts | 5 +- packages/react/src/store/index.ts | 4 +- packages/react/src/store/initialState.ts | 6 +- packages/react/src/types/store.ts | 6 +- 7 files changed, 36 insertions(+), 87 deletions(-) diff --git a/examples/react/src/examples/Middlewares/RestrictExtent.tsx b/examples/react/src/examples/Middlewares/RestrictExtent.tsx index beec2630..7a447414 100644 --- a/examples/react/src/examples/Middlewares/RestrictExtent.tsx +++ b/examples/react/src/examples/Middlewares/RestrictExtent.tsx @@ -1,4 +1,4 @@ -import { NodeChange, Panel, useNodeChangeMiddleware } from '@xyflow/react'; +import { NodeChange, experimental_useOnNodesChangeMiddleware } from '@xyflow/react'; import { useCallback, useState } from 'react'; export function RestrictExtent({ @@ -15,7 +15,7 @@ export function RestrictExtent({ maxY?: number; }) { const [isEnabled, setIsEnabled] = useState(false); - useNodeChangeMiddleware( + experimental_useOnNodesChangeMiddleware( useCallback( (changes: NodeChange[]) => { if (!isEnabled) return changes; @@ -36,7 +36,6 @@ export function RestrictExtent({ change.item = item; } } - return change; }); }, diff --git a/packages/react/src/components/BatchProvider/index.tsx b/packages/react/src/components/BatchProvider/index.tsx index 28f3aa4b..f6c6436c 100644 --- a/packages/react/src/components/BatchProvider/index.tsx +++ b/packages/react/src/components/BatchProvider/index.tsx @@ -35,7 +35,7 @@ export function BatchProvider[]; - for (const middleware of nodeChangeMiddleware.values()) { + for (const middleware of onNodesChangeMiddlewareMap.values()) { changes = middleware(changes); } - // for (const middleware of nodeSyncMiddleware.values()) { - // changes = middleware(changes); - // } - - // Do we always want to setNodes(next) or only when there are changes? - if (hasDefaultNodes) { setNodes(next); } diff --git a/packages/react/src/hooks/useMiddleware.ts b/packages/react/src/hooks/useMiddleware.ts index b2192564..a83a0c85 100644 --- a/packages/react/src/hooks/useMiddleware.ts +++ b/packages/react/src/hooks/useMiddleware.ts @@ -1,12 +1,12 @@ -import { NodeChange } from '@xyflow/system'; import { useEffect, useRef } from 'react'; +import type { EdgeChange, NodeChange } from '@xyflow/system'; + import { useStoreApi } from './useStore'; -import { Edge, Node } from '../types'; +import type { Edge, Node } from '../types'; /** * We identify each middleware with a symbol that is unique for each hook instance. */ - function useSymbol() { const symbol = useRef(); if (!symbol.current) { @@ -15,83 +15,40 @@ function useSymbol() { return symbol; } -export function useNodeChangeMiddleware( +export function experimental_useOnNodesChangeMiddleware( fn: (changes: NodeChange[]) => NodeChange[] ) { const store = useStoreApi(); const symbol = useSymbol(); useEffect(() => { - const { nodeChangeMiddleware } = store.getState(); - nodeChangeMiddleware.set(symbol.current!, fn); + const { onNodesChangeMiddlewareMap } = store.getState(); + onNodesChangeMiddlewareMap.set(symbol.current!, fn); }, [fn]); useEffect(() => { - const { nodeChangeMiddleware } = store.getState(); + const { onNodesChangeMiddlewareMap } = store.getState(); return () => { - nodeChangeMiddleware.delete(symbol.current!); + onNodesChangeMiddlewareMap.delete(symbol.current!); }; }, []); } -export function useNodeChangeMiddlewareDynamic( - fn: (changes: NodeChange[]) => NodeChange[] +export function experimental_useOnEdgesChangeMiddleware( + fn: (changes: EdgeChange[]) => EdgeChange[] ) { - const store = useStoreApi(); + const store = useStoreApi(); const symbol = useSymbol(); - const { nodeChangeMiddleware } = store.getState(); - nodeChangeMiddleware.delete(symbol.current!); - nodeChangeMiddleware.set(symbol.current!, fn); + useEffect(() => { + const { onEdgesChangeMiddlewareMap } = store.getState(); + onEdgesChangeMiddlewareMap.set(symbol.current!, fn); + }, [fn]); + + useEffect(() => { + const { onEdgesChangeMiddlewareMap } = store.getState(); + return () => { + onEdgesChangeMiddlewareMap.delete(symbol.current!); + }; + }, []); } - -// export function useEdgeChangeMiddleware(fn: (changes: EdgeChange[]) => EdgeChange[]) { -// const store = useStoreApi(); -// const symbol = useSymbol(); - -// useEffect(() => { -// const { edgeChangeMiddleware } = store.getState(); -// edgeChangeMiddleware.set(symbol.current!, fn); -// }, [fn]); - -// useEffect(() => { -// const { edgeChangeMiddleware } = store.getState(); -// return () => { -// edgeChangeMiddleware.delete(symbol.current!); -// }; -// }, []); -// } - -// export function useNodeSyncMiddleware(fn: (changes: NodeChange[]) => NodeChange[]) { -// const store = useStoreApi(); -// const symbol = useSymbol(); - -// useEffect(() => { -// const { nodeSyncMiddleware } = store.getState(); -// nodeSyncMiddleware.set(symbol.current!, fn); -// }, [fn]); - -// useEffect(() => { -// const { nodeSyncMiddleware } = store.getState(); -// return () => { -// nodeSyncMiddleware.delete(symbol.current!); -// }; -// }, []); -// } - -// export function useEdgeSyncMiddleware(fn: (changes: EdgeChange[]) => EdgeChange[]) { -// const store = useStoreApi(); -// const symbol = useSymbol(); - -// useEffect(() => { -// const { edgeSyncMiddleware } = store.getState(); -// edgeSyncMiddleware.set(symbol.current!, fn); -// }, [fn]); - -// useEffect(() => { -// const { edgeSyncMiddleware } = store.getState(); -// return () => { -// edgeSyncMiddleware.delete(symbol.current!); -// }; -// }, []); -// } diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 859e51e8..c6809d33 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -30,7 +30,10 @@ export { useConnection } from './hooks/useConnection'; export { useInternalNode } from './hooks/useInternalNode'; export { useNodeId } from './contexts/NodeIdContext'; -export { useNodeChangeMiddleware, useNodeChangeMiddlewareDynamic } from './hooks/useMiddleware'; +export { + experimental_useOnNodesChangeMiddleware, + experimental_useOnEdgesChangeMiddleware, +} from './hooks/useMiddleware'; export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; export { isNode, isEdge } from './utils/general'; diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 0391b041..28984d91 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -176,7 +176,7 @@ const createStore = ({ updateNodePositions: (nodeDragItems, dragging = false) => { const parentExpandChildren: ParentExpandChild[] = []; let changes = []; - const { nodeLookup, triggerNodeChanges, nodeChangeMiddleware } = get(); + const { nodeLookup, triggerNodeChanges, onNodesChangeMiddlewareMap } = get(); for (const [id, dragItem] of nodeDragItems) { // we are using the nodelookup to be sure to use the current expandParent and parentId value @@ -216,7 +216,7 @@ const createStore = ({ changes.push(...parentExpandChanges); } - for (const middleware of nodeChangeMiddleware.values()) { + for (const middleware of onNodesChangeMiddlewareMap.values()) { changes = middleware(changes); } diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts index 917ef3e7..4ef80e74 100644 --- a/packages/react/src/store/initialState.ts +++ b/packages/react/src/store/initialState.ts @@ -147,10 +147,8 @@ const getInitialState = ({ debug: false, ariaLabelConfig: defaultAriaLabelConfig, - nodeChangeMiddleware: new Map(), - edgeChangeMiddleware: new Map(), - nodeSyncMiddleware: new Map(), - edgeSyncMiddleware: new Map(), + onNodesChangeMiddlewareMap: new Map(), + onEdgesChangeMiddlewareMap: new Map(), }; }; diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts index a1ab5d64..36f0538f 100644 --- a/packages/react/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -153,10 +153,8 @@ export type ReactFlowStore[]) => NodeChange[]>; - edgeChangeMiddleware: Map[]) => EdgeChange[]>; - nodeSyncMiddleware: Map[]) => NodeChange[]>; - edgeSyncMiddleware: Map[]) => EdgeChange[]>; + onNodesChangeMiddlewareMap: Map[]) => NodeChange[]>; + onEdgesChangeMiddlewareMap: Map[]) => EdgeChange[]>; }; export type ReactFlowActions = { From 88c5480bf500b7b966d1bd76a8b5cc303fce2e48 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 8 Oct 2025 21:47:35 +0200 Subject: [PATCH 06/29] chore(middleware): cleanup --- packages/react/src/hooks/useMiddleware.ts | 54 ------------------- .../src/hooks/useOnEdgesChangeMiddleware.ts | 24 +++++++++ .../src/hooks/useOnNodesChangeMiddleware.ts | 24 +++++++++ packages/react/src/index.ts | 6 +-- 4 files changed, 50 insertions(+), 58 deletions(-) delete mode 100644 packages/react/src/hooks/useMiddleware.ts create mode 100644 packages/react/src/hooks/useOnEdgesChangeMiddleware.ts create mode 100644 packages/react/src/hooks/useOnNodesChangeMiddleware.ts diff --git a/packages/react/src/hooks/useMiddleware.ts b/packages/react/src/hooks/useMiddleware.ts deleted file mode 100644 index a83a0c85..00000000 --- a/packages/react/src/hooks/useMiddleware.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { useEffect, useRef } from 'react'; -import type { EdgeChange, NodeChange } from '@xyflow/system'; - -import { useStoreApi } from './useStore'; -import type { Edge, Node } from '../types'; - -/** - * We identify each middleware with a symbol that is unique for each hook instance. - */ -function useSymbol() { - const symbol = useRef(); - if (!symbol.current) { - symbol.current = Symbol(); - } - return symbol; -} - -export function experimental_useOnNodesChangeMiddleware( - fn: (changes: NodeChange[]) => NodeChange[] -) { - const store = useStoreApi(); - const symbol = useSymbol(); - - useEffect(() => { - const { onNodesChangeMiddlewareMap } = store.getState(); - onNodesChangeMiddlewareMap.set(symbol.current!, fn); - }, [fn]); - - useEffect(() => { - const { onNodesChangeMiddlewareMap } = store.getState(); - return () => { - onNodesChangeMiddlewareMap.delete(symbol.current!); - }; - }, []); -} - -export function experimental_useOnEdgesChangeMiddleware( - fn: (changes: EdgeChange[]) => EdgeChange[] -) { - const store = useStoreApi(); - const symbol = useSymbol(); - - useEffect(() => { - const { onEdgesChangeMiddlewareMap } = store.getState(); - onEdgesChangeMiddlewareMap.set(symbol.current!, fn); - }, [fn]); - - useEffect(() => { - const { onEdgesChangeMiddlewareMap } = store.getState(); - return () => { - onEdgesChangeMiddlewareMap.delete(symbol.current!); - }; - }, []); -} diff --git a/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts b/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts new file mode 100644 index 00000000..237b5280 --- /dev/null +++ b/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts @@ -0,0 +1,24 @@ +import { useEffect, useState } from 'react'; +import type { EdgeChange } from '@xyflow/system'; + +import { useStoreApi } from './useStore'; +import type { Edge, Node } from '../types'; + +export function experimental_useOnEdgesChangeMiddleware( + fn: (changes: EdgeChange[]) => EdgeChange[] +) { + const store = useStoreApi(); + const [symbol] = useState(() => Symbol()); + + useEffect(() => { + const { onEdgesChangeMiddlewareMap } = store.getState(); + onEdgesChangeMiddlewareMap.set(symbol, fn); + }, [fn]); + + useEffect(() => { + const { onEdgesChangeMiddlewareMap } = store.getState(); + return () => { + onEdgesChangeMiddlewareMap.delete(symbol); + }; + }, []); +} diff --git a/packages/react/src/hooks/useOnNodesChangeMiddleware.ts b/packages/react/src/hooks/useOnNodesChangeMiddleware.ts new file mode 100644 index 00000000..cf9231f8 --- /dev/null +++ b/packages/react/src/hooks/useOnNodesChangeMiddleware.ts @@ -0,0 +1,24 @@ +import { useEffect, useState } from 'react'; +import type { NodeChange } from '@xyflow/system'; + +import { useStoreApi } from './useStore'; +import type { Edge, Node } from '../types'; + +export function experimental_useOnNodesChangeMiddleware( + fn: (changes: NodeChange[]) => NodeChange[] +) { + const store = useStoreApi(); + const [symbol] = useState(() => Symbol()); + + useEffect(() => { + const { onNodesChangeMiddlewareMap } = store.getState(); + onNodesChangeMiddlewareMap.set(symbol, fn); + }, [fn]); + + useEffect(() => { + const { onNodesChangeMiddlewareMap } = store.getState(); + return () => { + onNodesChangeMiddlewareMap.delete(symbol); + }; + }, []); +} diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index c6809d33..f251ba5d 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -30,10 +30,8 @@ export { useConnection } from './hooks/useConnection'; export { useInternalNode } from './hooks/useInternalNode'; export { useNodeId } from './contexts/NodeIdContext'; -export { - experimental_useOnNodesChangeMiddleware, - experimental_useOnEdgesChangeMiddleware, -} from './hooks/useMiddleware'; +export { experimental_useOnNodesChangeMiddleware } from './hooks/useOnNodesChangeMiddleware'; +export { experimental_useOnEdgesChangeMiddleware } from './hooks/useOnEdgesChangeMiddleware'; export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; export { isNode, isEdge } from './utils/general'; From f739c7fae129e143acf3765c0e768000f04c2b8e Mon Sep 17 00:00:00 2001 From: Svilen Ivanov <92510182+svilen-ivanov-kubit@users.noreply.github.com> Date: Thu, 30 Oct 2025 16:04:40 +0200 Subject: [PATCH 07/29] Avoid modifying node.measured object, create copy instead When working with immutable `node` data, modifying in-place `node.measured` properties is not allowed. Since we perform a shallow copy, we need to create a new `measured` object to populate `width` and `height` --- packages/react/src/utils/changes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/utils/changes.ts b/packages/react/src/utils/changes.ts index f2d9bdd3..422832f2 100644 --- a/packages/react/src/utils/changes.ts +++ b/packages/react/src/utils/changes.ts @@ -125,7 +125,7 @@ function applyChange(change: any, element: any): any { case 'dimensions': { if (typeof change.dimensions !== 'undefined') { - element.measured ??= {}; + element.measured = {}; element.measured.width = change.dimensions.width; element.measured.height = change.dimensions.height; From 8b73e4ac2cec6779cb88889ff437f41d246e0236 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 3 Nov 2025 12:41:32 +0100 Subject: [PATCH 08/29] change selectionOnDrag default to false --- packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index d92ff2d6..ab9378b8 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -61,7 +61,7 @@ panOnScroll = false, panOnScrollSpeed = 0.5, panOnDrag = true, - selectionOnDrag = true, + selectionOnDrag = false, connectionLineComponent, connectionLineStyle, connectionLineContainerStyle, From 17a175791b2420b32d55a8fcbbb35649862b85cf Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 3 Nov 2025 12:42:18 +0100 Subject: [PATCH 09/29] chore(changeset) --- .changeset/dirty-readers-hide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dirty-readers-hide.md diff --git a/.changeset/dirty-readers-hide.md b/.changeset/dirty-readers-hide.md new file mode 100644 index 00000000..2ee6e044 --- /dev/null +++ b/.changeset/dirty-readers-hide.md @@ -0,0 +1,5 @@ +--- +'@xyflow/svelte': patch +--- + +Fix onPaneClick always firing when moving the viewport From 39e4589d5e00ccc0e0fa3ee738c508d8392c25de Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 11 Nov 2025 14:06:40 +0100 Subject: [PATCH 10/29] fix node resizer change position not parsed correctly --- .../lib/plugins/NodeResizer/ResizeControl.svelte | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte index 8c6874e9..dc6eb47a 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte @@ -68,14 +68,11 @@ }, onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => { // eslint-disable-next-line svelte/prefer-svelte-reactivity - const changes = new Map>(); - let position = change.x && change.y ? { x: change.x, y: change.y } : undefined; - changes.set(id, { ...change, position }); + const changes = new Map(); + changes.set(id, change); for (const childChange of childChanges) { - changes.set(childChange.id, { - position: childChange.position - }); + changes.set(childChange.id, {x: childChange.position.x, y: childChange.position.y }); } store.nodes = store.nodes.map((node) => { @@ -84,11 +81,11 @@ const vertical = !resizeDirection || resizeDirection === 'vertical'; if (change) { - return { + return { ...node, position: { - x: horizontal ? (change.position?.x ?? node.position.x) : node.position.x, - y: vertical ? (change.position?.y ?? node.position.y) : node.position.y + x: horizontal ? (change.x ?? node.position.x) : node.position.x, + y: vertical ? (change.y ?? node.position.y) : node.position.y }, width: horizontal ? (change.width ?? node.width) : node.width, height: vertical ? (change.height ?? node.height) : node.height From 8b35c77ebe5a4f6cba33c597d94eba1ead64fdfc Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 11 Nov 2025 15:45:32 +0100 Subject: [PATCH 11/29] chore(changeset) --- .changeset/plenty-lobsters-thank.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/plenty-lobsters-thank.md diff --git a/.changeset/plenty-lobsters-thank.md b/.changeset/plenty-lobsters-thank.md new file mode 100644 index 00000000..49779920 --- /dev/null +++ b/.changeset/plenty-lobsters-thank.md @@ -0,0 +1,5 @@ +--- +'@xyflow/svelte': patch +--- + +Fix wrong positions when resizing nodes with a non-default node-origin From 8598b6bc2a9d052b12d5215706382da0aa84827b Mon Sep 17 00:00:00 2001 From: Adam Krebs Date: Tue, 11 Nov 2025 18:53:21 -0500 Subject: [PATCH 12/29] Allow getEdgeId to be overridden --- .changeset/custom-edge-id-generator.md | 5 +++ packages/system/src/utils/edges/general.ts | 37 +++++++++++++++++++--- 2 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 .changeset/custom-edge-id-generator.md diff --git a/.changeset/custom-edge-id-generator.md b/.changeset/custom-edge-id-generator.md new file mode 100644 index 00000000..65947b75 --- /dev/null +++ b/.changeset/custom-edge-id-generator.md @@ -0,0 +1,5 @@ +--- +'@xyflow/system': minor +--- + +Allow custom `getEdgeId` function in `addEdge` and `reconnectEdge`. You can now pass a custom edge ID generator via the options parameter, enabling custom edge ID schemes. Closes #5180. diff --git a/packages/system/src/utils/edges/general.ts b/packages/system/src/utils/edges/general.ts index 58139394..515a285a 100644 --- a/packages/system/src/utils/edges/general.ts +++ b/packages/system/src/utils/edges/general.ts @@ -84,7 +84,19 @@ export function isEdgeVisible({ sourceNode, targetNode, width, height, transform return getOverlappingArea(viewRect, boxToRect(edgeBox)) > 0; } -const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string => +/** + * Type for a custom edge ID generator function. + * @public + */ +export type GetEdgeId = (params: Connection | EdgeBase) => string; + +/** + * The default edge ID generator function. Generates an ID based on the source, target, and handles. + * @public + * @param params - The connection or edge to generate an ID for. + * @returns The generated edge ID. + */ +export const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string => `xy-edge__${source}${sourceHandle || ''}-${target}${targetHandle || ''}`; const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => { @@ -97,11 +109,19 @@ const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => { ); }; +export type AddEdgeOptions = { + /** + * Custom function to generate edge IDs. If not provided, the default `getEdgeId` function is used. + */ + getEdgeId?: GetEdgeId; +}; + /** * This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one. * @public * @param edgeParams - Either an `Edge` or a `Connection` you want to add. * @param edges - The array of all current edges. + * @param options - Optional configuration object. * @returns A new array of edges with the new edge added. * * @remarks If an edge with the same `target` and `source` already exists (and the same @@ -111,7 +131,8 @@ const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => { */ export const addEdge = ( edgeParams: EdgeType | Connection, - edges: EdgeType[] + edges: EdgeType[], + options: AddEdgeOptions = {} ): EdgeType[] => { if (!edgeParams.source || !edgeParams.target) { devWarn('006', errorMessages['error006']()); @@ -119,13 +140,15 @@ export const addEdge = ( return edges; } + const edgeIdGenerator = options.getEdgeId || getEdgeId; + let edge: EdgeType; if (isEdgeBase(edgeParams)) { edge = { ...edgeParams }; } else { edge = { ...edgeParams, - id: getEdgeId(edgeParams), + id: edgeIdGenerator(edgeParams), } as EdgeType; } @@ -150,6 +173,10 @@ export type ReconnectEdgeOptions = { * @default true */ shouldReplaceId?: boolean; + /** + * Custom function to generate edge IDs. If not provided, the default `getEdgeId` function is used. + */ + getEdgeId?: GetEdgeId; }; /** @@ -190,10 +217,12 @@ export const reconnectEdge = ( return edges; } + const edgeIdGenerator = options.getEdgeId || getEdgeId; + // Remove old edge and create the new edge with parameters of old edge. const edge = { ...rest, - id: options.shouldReplaceId ? getEdgeId(newConnection) : oldEdgeId, + id: options.shouldReplaceId ? edgeIdGenerator(newConnection) : oldEdgeId, source: newConnection.source, target: newConnection.target, sourceHandle: newConnection.sourceHandle, From cb2db9f2d223944d7710a0fc17cd9954be77f2c0 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 12 Nov 2025 15:50:20 +0100 Subject: [PATCH 13/29] chore(reactflow): paneClickDistance default 1 --- packages/react/src/container/ReactFlow/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx index bd20242f..f01af831 100644 --- a/packages/react/src/container/ReactFlow/index.tsx +++ b/packages/react/src/container/ReactFlow/index.tsx @@ -104,7 +104,7 @@ function ReactFlow( onPaneMouseLeave, onPaneScroll, onPaneContextMenu, - paneClickDistance = 0, + paneClickDistance = 1, nodeClickDistance = 0, children, onReconnect, From c1304dba7a20bb8d74c7aceb23cd80b56e4c0482 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 12 Nov 2025 15:51:03 +0100 Subject: [PATCH 14/29] chore(changesets): add --- .changeset/serious-peaches-fry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/serious-peaches-fry.md diff --git a/.changeset/serious-peaches-fry.md b/.changeset/serious-peaches-fry.md new file mode 100644 index 00000000..2978ec99 --- /dev/null +++ b/.changeset/serious-peaches-fry.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Set `paneClickDistance` default value to `1`. From 26940018a805033bd6c0a46409616f4ae1b19a39 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 13 Nov 2025 09:52:18 +0100 Subject: [PATCH 15/29] chore(changesets): update --- .changeset/sharp-toys-cheer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/sharp-toys-cheer.md b/.changeset/sharp-toys-cheer.md index 885eebcc..36bbcdfc 100644 --- a/.changeset/sharp-toys-cheer.md +++ b/.changeset/sharp-toys-cheer.md @@ -1,6 +1,6 @@ --- -'@xyflow/react': minor -'@xyflow/svelte': minor +'@xyflow/react': patch +'@xyflow/svelte': patch '@xyflow/system': patch --- From 12c516d5f2c7b99849733fab031be02f788657fe Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 13 Nov 2025 08:53:39 +0000 Subject: [PATCH 16/29] chore(packages): bump --- .changeset/dirty-readers-hide.md | 5 ----- .changeset/plenty-lobsters-thank.md | 5 ----- .changeset/serious-peaches-fry.md | 5 ----- .changeset/sharp-toys-cheer.md | 7 ------- packages/react/CHANGELOG.md | 11 +++++++++++ packages/react/package.json | 2 +- packages/svelte/CHANGELOG.md | 13 +++++++++++++ packages/svelte/package.json | 2 +- packages/system/CHANGELOG.md | 6 ++++++ packages/system/package.json | 2 +- 10 files changed, 33 insertions(+), 25 deletions(-) delete mode 100644 .changeset/dirty-readers-hide.md delete mode 100644 .changeset/plenty-lobsters-thank.md delete mode 100644 .changeset/serious-peaches-fry.md delete mode 100644 .changeset/sharp-toys-cheer.md diff --git a/.changeset/dirty-readers-hide.md b/.changeset/dirty-readers-hide.md deleted file mode 100644 index 2ee6e044..00000000 --- a/.changeset/dirty-readers-hide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@xyflow/svelte': patch ---- - -Fix onPaneClick always firing when moving the viewport diff --git a/.changeset/plenty-lobsters-thank.md b/.changeset/plenty-lobsters-thank.md deleted file mode 100644 index 49779920..00000000 --- a/.changeset/plenty-lobsters-thank.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@xyflow/svelte': patch ---- - -Fix wrong positions when resizing nodes with a non-default node-origin diff --git a/.changeset/serious-peaches-fry.md b/.changeset/serious-peaches-fry.md deleted file mode 100644 index 2978ec99..00000000 --- a/.changeset/serious-peaches-fry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@xyflow/react': patch ---- - -Set `paneClickDistance` default value to `1`. diff --git a/.changeset/sharp-toys-cheer.md b/.changeset/sharp-toys-cheer.md deleted file mode 100644 index 36bbcdfc..00000000 --- a/.changeset/sharp-toys-cheer.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@xyflow/react': patch -'@xyflow/svelte': patch -'@xyflow/system': patch ---- - -Pass current pointer position to connection diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 700256b5..9197dd9f 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,16 @@ # @xyflow/react +## 12.9.3 + +### Patch Changes + +- [#5621](https://github.com/xyflow/xyflow/pull/5621) [`c1304dba7`](https://github.com/xyflow/xyflow/commit/c1304dba7a20bb8d74c7aceb23cd80b56e4c0482) Thanks [@moklick](https://github.com/moklick)! - Set `paneClickDistance` default value to `1`. + +- [#5578](https://github.com/xyflow/xyflow/pull/5578) [`00bcb9f5f`](https://github.com/xyflow/xyflow/commit/00bcb9f5f45f49814b9ac19b3f55cfe069ee3773) Thanks [@peterkogo](https://github.com/peterkogo)! - Pass current pointer position to connection + +- Updated dependencies [[`00bcb9f5f`](https://github.com/xyflow/xyflow/commit/00bcb9f5f45f49814b9ac19b3f55cfe069ee3773)]: + - @xyflow/system@0.0.73 + ## 12.9.2 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index 18074467..0514e3b4 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@xyflow/react", - "version": "12.9.2", + "version": "12.9.3", "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.", "keywords": [ "react", diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index fc6877d6..5cfe8b02 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,18 @@ # @xyflow/svelte +## 1.4.2 + +### Patch Changes + +- [#5603](https://github.com/xyflow/xyflow/pull/5603) [`17a175791`](https://github.com/xyflow/xyflow/commit/17a175791b2420b32d55a8fcbbb35649862b85cf) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix onPaneClick always firing when moving the viewport + +- [#5615](https://github.com/xyflow/xyflow/pull/5615) [`8b35c77eb`](https://github.com/xyflow/xyflow/commit/8b35c77ebe5a4f6cba33c597d94eba1ead64fdfc) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix wrong positions when resizing nodes with a non-default node-origin + +- [#5578](https://github.com/xyflow/xyflow/pull/5578) [`00bcb9f5f`](https://github.com/xyflow/xyflow/commit/00bcb9f5f45f49814b9ac19b3f55cfe069ee3773) Thanks [@peterkogo](https://github.com/peterkogo)! - Pass current pointer position to connection + +- Updated dependencies [[`00bcb9f5f`](https://github.com/xyflow/xyflow/commit/00bcb9f5f45f49814b9ac19b3f55cfe069ee3773)]: + - @xyflow/system@0.0.73 + ## 1.4.1 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index f78663de..c2dd3ba6 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@xyflow/svelte", - "version": "1.4.1", + "version": "1.4.2", "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.", "keywords": [ "svelte", diff --git a/packages/system/CHANGELOG.md b/packages/system/CHANGELOG.md index ea065959..5bbc621e 100644 --- a/packages/system/CHANGELOG.md +++ b/packages/system/CHANGELOG.md @@ -1,5 +1,11 @@ # @xyflow/system +## 0.0.73 + +### Patch Changes + +- [#5578](https://github.com/xyflow/xyflow/pull/5578) [`00bcb9f5f`](https://github.com/xyflow/xyflow/commit/00bcb9f5f45f49814b9ac19b3f55cfe069ee3773) Thanks [@peterkogo](https://github.com/peterkogo)! - Pass current pointer position to connection + ## 0.0.72 ### Patch Changes diff --git a/packages/system/package.json b/packages/system/package.json index 55b2e164..6ee8e327 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,6 +1,6 @@ { "name": "@xyflow/system", - "version": "0.0.72", + "version": "0.0.73", "description": "xyflow core system that powers React Flow and Svelte Flow.", "keywords": [ "node-based UI", From 5161cf327991d690b69700ff506c9b8a27841bc4 Mon Sep 17 00:00:00 2001 From: Alaric Baraou Date: Mon, 17 Nov 2025 01:10:00 +0900 Subject: [PATCH 17/29] prevent re-render on every store update by using shallow in FlowRendererComponent useStore --- packages/react/src/container/FlowRenderer/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx index d5083d80..5ab094ea 100644 --- a/packages/react/src/container/FlowRenderer/index.tsx +++ b/packages/react/src/container/FlowRenderer/index.tsx @@ -8,6 +8,7 @@ import { ZoomPane } from '../ZoomPane'; import { Pane } from '../Pane'; import { NodesSelection } from '../../components/NodesSelection'; import type { ReactFlowState, Node } from '../../types'; +import { shallow } from 'zustand/shallow'; export type FlowRendererProps = Omit< GraphViewProps, @@ -72,7 +73,7 @@ function FlowRendererComponent({ onViewportChange, isControlledViewport, }: FlowRendererProps) { - const { nodesSelectionActive, userSelectionActive } = useStore(selector); + const { nodesSelectionActive, userSelectionActive } = useStore(selector, shallow); const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win }); const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win }); From fb4d081364b8c6d00bf09ed6dca008f4b40c7e35 Mon Sep 17 00:00:00 2001 From: Stephan Eggermont Date: Sun, 16 Nov 2025 19:31:47 +0100 Subject: [PATCH 18/29] Typo README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3ed80c4b..116e99c7 100644 --- a/README.md +++ b/README.md @@ -156,7 +156,7 @@ For releasing packages we are using [changesets](https://github.com/changesets/c 1. create PRs for new features, updates and fixes (with a changeset if relevant for changelog) 2. merge into main -3. changset creates a PR that bumps all packages based on the changesets +3. changeset creates a PR that bumps all packages based on the changesets 4. merge changeset PR if you want to release to Github and npm ## Built by [xyflow](https://xyflow.com) From 9030fab2df8285fdfb649bda6e1e885dfd228d45 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 17 Nov 2025 10:08:43 +0100 Subject: [PATCH 19/29] chore(changesets): add --- .changeset/curly-snails-do.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curly-snails-do.md diff --git a/.changeset/curly-snails-do.md b/.changeset/curly-snails-do.md new file mode 100644 index 00000000..5560b33b --- /dev/null +++ b/.changeset/curly-snails-do.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Prevent unnecessary re-render in `FlowRenderer` From 0102be3babc11ed1a5fdb883393bfdaa9bfbef45 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 17 Nov 2025 10:15:42 +0100 Subject: [PATCH 20/29] chore(flow-renderer): cleanup imports --- packages/react/src/container/FlowRenderer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx index 5ab094ea..2198ce5e 100644 --- a/packages/react/src/container/FlowRenderer/index.tsx +++ b/packages/react/src/container/FlowRenderer/index.tsx @@ -1,4 +1,5 @@ import { memo, type ReactNode } from 'react'; +import { shallow } from 'zustand/shallow'; import { useStore } from '../../hooks/useStore'; import { useGlobalKeyHandler } from '../../hooks/useGlobalKeyHandler'; @@ -8,7 +9,6 @@ import { ZoomPane } from '../ZoomPane'; import { Pane } from '../Pane'; import { NodesSelection } from '../../components/NodesSelection'; import type { ReactFlowState, Node } from '../../types'; -import { shallow } from 'zustand/shallow'; export type FlowRendererProps = Omit< GraphViewProps, From 99453f0993fdaceed3888ecb2e334bcb0e14eb2f Mon Sep 17 00:00:00 2001 From: Tornado Softwares Date: Tue, 18 Nov 2025 16:24:11 +0100 Subject: [PATCH 21/29] Fix #5633 --- packages/react/src/store/index.ts | 15 +++++++++++---- packages/svelte/src/lib/store/index.ts | 13 +++++++++++-- packages/system/src/xyhandle/XYHandle.ts | 7 +++++-- 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 3254bdfa..baef953c 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -14,6 +14,8 @@ import { NodeOrigin, CoordinateExtent, fitViewport, + getHandlePosition, + Position, } from '@xyflow/system'; import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes'; @@ -176,7 +178,7 @@ const createStore = ({ updateNodePositions: (nodeDragItems, dragging = false) => { const parentExpandChildren: ParentExpandChild[] = []; const changes = []; - const { nodeLookup, triggerNodeChanges } = get(); + const { nodeLookup, triggerNodeChanges, connection, updateConnection } = get(); for (const [id, dragItem] of nodeDragItems) { // we are using the nodelookup to be sure to use the current expandParent and parentId value @@ -188,13 +190,18 @@ const createStore = ({ type: 'position', position: expandParent ? { - x: Math.max(0, dragItem.position.x), - y: Math.max(0, dragItem.position.y), - } + x: Math.max(0, dragItem.position.x), + y: Math.max(0, dragItem.position.y), + } : dragItem.position, dragging, }; + if (node && connection.inProgress && connection.fromNode.id == node.id) { + const updatedFrom = getHandlePosition(node, connection.fromHandle, Position.Left, true); + updateConnection({...connection,from: updatedFrom}) + } + if (expandParent && node.parentId) { parentExpandChildren.push({ id, diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 798e87d8..4619a27e 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -15,7 +15,9 @@ import { updateAbsolutePositions, snapPosition, calculateNodePosition, - type SetCenterOptions + type SetCenterOptions, + getHandlePosition, + Position } from '@xyflow/system'; import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types'; @@ -50,7 +52,14 @@ export function createStore { - store.nodes = store.nodes.map((node) => { + store.nodes = store.nodes.map((node) => { + if (store.connection.inProgress && store.connection.fromNode.id === node.id) { + + store.connection = { + ...store.connection, + from: getHandlePosition(store.nodeLookup.get(node.id), store.connection.fromHandle, Position.Left, true) + }; + } const dragItem = nodeDragItems.get(node.id); return dragItem ? { ...node, position: dragItem.position, dragging } : node; }); diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts index 2e714e8b..40d04dff 100644 --- a/packages/system/src/xyhandle/XYHandle.ts +++ b/packages/system/src/xyhandle/XYHandle.ts @@ -171,10 +171,13 @@ function onPointerDown( resultHandleDomNode = result.handleDomNode; connection = result.connection; isValid = isConnectionValid(!!closestHandle, result.isValid); + + const fromNodeInternal = nodeLookup.get(nodeId)!; + const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true); - const newConnection: ConnectionInProgress = { - // from stays the same + const newConnection: ConnectionInProgress = { ...previousConnection, + from, isValid, to: result.toHandle && isValid From 9f7884b1bfd43dae1da81bf30af8eddad226d51e Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Tue, 25 Nov 2025 10:42:15 +0100 Subject: [PATCH 22/29] Update custom-edge-id-generator.md --- .changeset/custom-edge-id-generator.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/custom-edge-id-generator.md b/.changeset/custom-edge-id-generator.md index 65947b75..9b2e1bb8 100644 --- a/.changeset/custom-edge-id-generator.md +++ b/.changeset/custom-edge-id-generator.md @@ -2,4 +2,4 @@ '@xyflow/system': minor --- -Allow custom `getEdgeId` function in `addEdge` and `reconnectEdge`. You can now pass a custom edge ID generator via the options parameter, enabling custom edge ID schemes. Closes #5180. +Allow custom `getEdgeId` function in `addEdge` and `reconnectEdge` options to enable custom edge ID schemes. From 487c3470f997fd405fea1cc55013a3c88bf7e116 Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Tue, 25 Nov 2025 10:42:49 +0100 Subject: [PATCH 23/29] Change version from minor to patch for custom edge ID Allow custom `getEdgeId` function in `addEdge` and `reconnectEdge` options to enable custom edge ID schemes. --- .changeset/custom-edge-id-generator.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/custom-edge-id-generator.md b/.changeset/custom-edge-id-generator.md index 9b2e1bb8..439d729c 100644 --- a/.changeset/custom-edge-id-generator.md +++ b/.changeset/custom-edge-id-generator.md @@ -1,5 +1,5 @@ --- -'@xyflow/system': minor +'@xyflow/system': patch --- Allow custom `getEdgeId` function in `addEdge` and `reconnectEdge` options to enable custom edge ID schemes. From f617616dc9e9647c99c48fdb38a090c2d46390a2 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 25 Nov 2025 11:01:27 +0100 Subject: [PATCH 24/29] chore(xyhandle): cleanup --- packages/react/src/store/index.ts | 10 +++++----- packages/svelte/src/lib/store/index.ts | 14 ++++++++------ packages/system/src/xyhandle/XYHandle.ts | 16 +++++++++------- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index baef953c..d6ff3b60 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -190,16 +190,16 @@ const createStore = ({ type: 'position', position: expandParent ? { - x: Math.max(0, dragItem.position.x), - y: Math.max(0, dragItem.position.y), - } + x: Math.max(0, dragItem.position.x), + y: Math.max(0, dragItem.position.y), + } : dragItem.position, dragging, }; - if (node && connection.inProgress && connection.fromNode.id == node.id) { + if (node && connection.inProgress && connection.fromNode.id === node.id) { const updatedFrom = getHandlePosition(node, connection.fromHandle, Position.Left, true); - updateConnection({...connection,from: updatedFrom}) + updateConnection({ ...connection, from: updatedFrom }); } if (expandParent && node.parentId) { diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 4619a27e..30bcafc1 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -52,13 +52,15 @@ export function createStore { - store.nodes = store.nodes.map((node) => { + store.nodes = store.nodes.map((node) => { if (store.connection.inProgress && store.connection.fromNode.id === node.id) { - - store.connection = { - ...store.connection, - from: getHandlePosition(store.nodeLookup.get(node.id), store.connection.fromHandle, Position.Left, true) - }; + const internalNode = store.nodeLookup.get(node.id); + if (internalNode) { + store.connection = { + ...store.connection, + from: getHandlePosition(internalNode, store.connection.fromHandle, Position.Left, true) + }; + } } const dragItem = nodeDragItems.get(node.id); return dragItem ? { ...node, position: dragItem.position, dragging } : node; diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts index 40d04dff..b8edf767 100644 --- a/packages/system/src/xyhandle/XYHandle.ts +++ b/packages/system/src/xyhandle/XYHandle.ts @@ -93,8 +93,8 @@ function onPointerDown( position: fromHandleInternal.position, }; - const fromNodeInternal = nodeLookup.get(nodeId)!; - const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true); + const fromInternalNode = nodeLookup.get(nodeId)!; + const from = getHandlePosition(fromInternalNode, fromHandle, Position.Left, true); let previousConnection: ConnectionInProgress = { inProgress: true, @@ -103,7 +103,7 @@ function onPointerDown( from, fromHandle, fromPosition: fromHandle.position, - fromNode: fromNodeInternal, + fromNode: fromInternalNode, to: position, toHandle: null, @@ -171,11 +171,13 @@ function onPointerDown( resultHandleDomNode = result.handleDomNode; connection = result.connection; isValid = isConnectionValid(!!closestHandle, result.isValid); - - const fromNodeInternal = nodeLookup.get(nodeId)!; - const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true); - const newConnection: ConnectionInProgress = { + const fromInternalNode = nodeLookup.get(nodeId); + const from = fromInternalNode + ? getHandlePosition(fromInternalNode, fromHandle, Position.Left, true) + : previousConnection.from; + + const newConnection: ConnectionInProgress = { ...previousConnection, from, isValid, From 2d7fa40e2684a0fcdd4eca7800ccf2c34338e549 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 25 Nov 2025 11:04:35 +0100 Subject: [PATCH 25/29] chore(changesets): add --- .changeset/young-roses-shout.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/young-roses-shout.md diff --git a/.changeset/young-roses-shout.md b/.changeset/young-roses-shout.md new file mode 100644 index 00000000..f1f6a888 --- /dev/null +++ b/.changeset/young-roses-shout.md @@ -0,0 +1,7 @@ +--- +'@xyflow/react': patch +'@xyflow/svelte': patch +'@xyflow/system': patch +--- + +Update an ongoing connection when user moves node with keyboard. From f858cbb404ccb3ddcaf55563aec73f85e44d58bf Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 25 Nov 2025 12:34:49 +0100 Subject: [PATCH 26/29] chore(apply-changes): cleanup) --- packages/react/src/utils/changes.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/utils/changes.ts b/packages/react/src/utils/changes.ts index 422832f2..de05236a 100644 --- a/packages/react/src/utils/changes.ts +++ b/packages/react/src/utils/changes.ts @@ -125,9 +125,9 @@ function applyChange(change: any, element: any): any { case 'dimensions': { if (typeof change.dimensions !== 'undefined') { - element.measured = {}; - element.measured.width = change.dimensions.width; - element.measured.height = change.dimensions.height; + element.measured = { + ...change.dimensions, + }; if (change.setAttributes) { if (change.setAttributes === true || change.setAttributes === 'width') { From 38dbf41c464550cc803b946a4ad1f46982385a03 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 25 Nov 2025 12:35:50 +0100 Subject: [PATCH 27/29] chore(changesets): add --- .changeset/dry-seahorses-deliver.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dry-seahorses-deliver.md diff --git a/.changeset/dry-seahorses-deliver.md b/.changeset/dry-seahorses-deliver.md new file mode 100644 index 00000000..1125ea3e --- /dev/null +++ b/.changeset/dry-seahorses-deliver.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Always create a new measured object in apply changes. From a523919d6789995e9d0f3dd29b0b47fc3b8d8439 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 2 Dec 2025 16:40:26 +0100 Subject: [PATCH 28/29] chore(middleware): cleanup --- .changeset/selfish-nails-sing.md | 5 +++++ packages/react/src/hooks/useOnEdgesChangeMiddleware.ts | 6 ++++++ packages/react/src/hooks/useOnNodesChangeMiddleware.ts | 6 ++++++ 3 files changed, 17 insertions(+) create mode 100644 .changeset/selfish-nails-sing.md diff --git a/.changeset/selfish-nails-sing.md b/.changeset/selfish-nails-sing.md new file mode 100644 index 00000000..d2119c6b --- /dev/null +++ b/.changeset/selfish-nails-sing.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Add `experimental_useOnNodesChangeMiddleware` hook diff --git a/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts b/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts index 237b5280..d79d6773 100644 --- a/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts +++ b/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts @@ -4,6 +4,12 @@ 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( fn: (changes: EdgeChange[]) => EdgeChange[] ) { diff --git a/packages/react/src/hooks/useOnNodesChangeMiddleware.ts b/packages/react/src/hooks/useOnNodesChangeMiddleware.ts index cf9231f8..fe7ea6f6 100644 --- a/packages/react/src/hooks/useOnNodesChangeMiddleware.ts +++ b/packages/react/src/hooks/useOnNodesChangeMiddleware.ts @@ -4,6 +4,12 @@ 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( fn: (changes: NodeChange[]) => NodeChange[] ) { From 2b77a1e228bf54e5e422fea8f4c473a37bf8e361 Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Tue, 2 Dec 2025 16:43:46 +0100 Subject: [PATCH 29/29] Update '@xyflow/react' version and add new hook This change updates the version of '@xyflow/react' from patch to minor and adds the 'experimental_useOnNodesChangeMiddleware' hook. --- .changeset/selfish-nails-sing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/selfish-nails-sing.md b/.changeset/selfish-nails-sing.md index d2119c6b..9cbc5b81 100644 --- a/.changeset/selfish-nails-sing.md +++ b/.changeset/selfish-nails-sing.md @@ -1,5 +1,5 @@ --- -'@xyflow/react': patch +'@xyflow/react': minor --- Add `experimental_useOnNodesChangeMiddleware` hook