diff --git a/examples/react/package.json b/examples/react/package.json index 24bbee4a..6b7362f5 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -14,13 +14,16 @@ "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'" }, "dependencies": { + "@reduxjs/toolkit": "^2.2.3", "@xyflow/react": "workspace:*", "classcat": "^5.0.4", "dagre": "^0.8.5", "localforage": "^1.10.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-redux": "^9.1.1", "react-router-dom": "^6.18.0", + "redux": "^5.0.1", "zustand": "^4.4.6" }, "devDependencies": { diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts index 1d68c858..287ab17b 100644 --- a/examples/react/src/App/routes.ts +++ b/examples/react/src/App/routes.ts @@ -51,6 +51,7 @@ import UseNodesData from '../examples/UseNodesData'; import UseHandleConnections from '../examples/UseHandleConnections'; import AddNodeOnEdgeDrop from '../examples/AddNodeOnEdgeDrop'; import DevTools from '../examples/DevTools'; +import Redux from '../examples/Redux'; export interface IRoute { name: string; @@ -314,6 +315,11 @@ const routes: IRoute[] = [ path: 'useupdatenodeinternals', component: UseUpdateNodeInternals, }, + { + name: 'redux', + path: 'redux', + component: Redux, + }, { name: 'Validation', path: 'validation', diff --git a/examples/react/src/examples/Redux/index.tsx b/examples/react/src/examples/Redux/index.tsx new file mode 100644 index 00000000..19bbd90c --- /dev/null +++ b/examples/react/src/examples/Redux/index.tsx @@ -0,0 +1,30 @@ +import { ReactFlow } from '@xyflow/react'; +import '@xyflow/react/dist/style.css'; + +import { useDispatch, useSelector, Provider } from 'react-redux'; + +import { onNodesChange, onEdgesChange, setSelectedNodesAndEdges, store } from './state'; + +const OverviewFlow = () => { + const dispatch = useDispatch(); + const nodes = useSelector((state) => state.myApplication.nodes); + const edges = useSelector((state) => state.myApplication.edges); + + return ( + dispatch(onNodesChange(e))} + onEdgesChange={(e) => dispatch(onEdgesChange(e))} + onSelectionChange={(e) => dispatch(setSelectedNodesAndEdges(e))} + fitView + attributionPosition="top-right" + /> + ); +}; + +export default () => ( + + + +); diff --git a/examples/react/src/examples/Redux/initial-elements.tsx b/examples/react/src/examples/Redux/initial-elements.tsx new file mode 100644 index 00000000..136583cf --- /dev/null +++ b/examples/react/src/examples/Redux/initial-elements.tsx @@ -0,0 +1,98 @@ +import { MarkerType, type Node, type Edge } from '@xyflow/react'; + +export const nodes: Node[] = [ + { + id: '1', + type: 'input', + data: { + label: 'hey', + }, + position: { x: 250, y: 0 }, + }, + { + id: '2', + data: { + label: 'default node', + }, + position: { x: 100, y: 100 }, + }, + { + id: '3', + data: { + label: 'custom style', + }, + position: { x: 400, y: 100 }, + style: { + background: '#D6D5E6', + color: '#333', + border: '1px solid #222138', + width: 180, + }, + }, + { + id: '4', + position: { x: 250, y: 200 }, + data: { + label: 'Another default node', + }, + }, + { + id: '5', + data: { + label: 'Node id: 5', + }, + position: { x: 250, y: 325 }, + }, + { + id: '6', + type: 'output', + data: { + label: 'output', + }, + position: { x: 100, y: 480 }, + }, + { + id: '7', + type: 'output', + data: { label: 'Another output node' }, + position: { x: 400, y: 450 }, + }, +]; + +export const edges: Edge[] = [ + { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' }, + { id: 'e1-3', source: '1', target: '3' }, + { + id: 'e3-4', + source: '3', + target: '4', + animated: true, + label: 'animated edge', + }, + { + id: 'e4-5', + source: '4', + target: '5', + label: 'edge with arrow head', + markerEnd: { + type: MarkerType.ArrowClosed, + }, + }, + { + id: 'e5-6', + source: '5', + target: '6', + type: 'smoothstep', + label: 'smooth step edge', + }, + { + id: 'e5-7', + source: '5', + target: '7', + type: 'step', + style: { stroke: '#f6ab6c' }, + label: 'a step edge', + animated: true, + labelStyle: { fill: '#f6ab6c', fontWeight: 700 }, + }, +]; diff --git a/examples/react/src/examples/Redux/state.ts b/examples/react/src/examples/Redux/state.ts new file mode 100644 index 00000000..7c7e93d2 --- /dev/null +++ b/examples/react/src/examples/Redux/state.ts @@ -0,0 +1,59 @@ +import { createSlice, configureStore } from '@reduxjs/toolkit'; +import { applyNodeChanges, applyEdgeChanges } from '@xyflow/react'; +import { nodes, edges } from './initial-elements'; + +const initialState = { + nodes, + edges, + selectedNodes: [], + selectedEdges: [], +}; + +const setNodesReducer = (state, action) => { + state.nodes = action.payload; +}; + +const setEdgesReducer = (state, action) => { + state.edges = action.payload; +}; + +const onNodesChangeReducer = (state, action) => { + const a = applyNodeChanges(action.payload, state.nodes); + state.nodes = a; +}; + +const onEdgesChangeReducer = (state, action) => { + const a = applyEdgeChanges(action.payload, state.edges); + state.edges = a; +}; + +const setSelectedNodesAndEdgesReducer = (state, action) => { + state.selectedNodes = action.payload.nodes; + state.selectedEdges = action.payload.edges; +}; + +const setSelectedNodesReducer = (state, action) => { + state.selectedNodes = action.payload; +}; + +const MyApplicationSlice = createSlice({ + name: 'MyApplication', + initialState, + reducers: { + setNodes: setNodesReducer, + setEdges: setEdgesReducer, + onNodesChange: onNodesChangeReducer, + onEdgesChange: onEdgesChangeReducer, + setSelectedNodesAndEdges: setSelectedNodesAndEdgesReducer, + setSelectedNodes: setSelectedNodesReducer, + }, +}); + +export const { setNodes, setEdges, onNodesChange, onEdgesChange, setSelectedNodesAndEdges, setSelectedNodes } = + MyApplicationSlice.actions; + +export const store = configureStore({ + reducer: { + myApplication: MyApplicationSlice.reducer, + }, +}); diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 244efb64..232dccb4 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -6,6 +6,7 @@ - use correct positions for intersection helpers - fix minimap interaction for touch devices +- pass user nodes to `onSelectionChange` instead of internal ones ## 12.0.0-next.14 diff --git a/packages/react/src/components/SelectionListener/index.tsx b/packages/react/src/components/SelectionListener/index.tsx index 381a60cb..6a9a03a6 100644 --- a/packages/react/src/components/SelectionListener/index.tsx +++ b/packages/react/src/components/SelectionListener/index.tsx @@ -14,10 +14,24 @@ type SelectionListenerProps = { onSelectionChange?: OnSelectionChangeFunc; }; -const selector = (s: ReactFlowState) => ({ - selectedNodes: Array.from(s.nodeLookup.values()).filter((n) => n.selected), - selectedEdges: s.edges.filter((e) => e.selected), -}); +const selector = (s: ReactFlowState) => { + const selectedNodes = []; + const selectedEdges = []; + + for (const [, node] of s.nodeLookup) { + if (node.selected) { + selectedNodes.push(node.internals.userNode); + } + } + + for (const [, edge] of s.edgeLookup) { + if (edge.selected) { + selectedEdges.push(edge); + } + } + + return { selectedNodes, selectedEdges }; +}; type SelectorSlice = ReturnType; diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx index 0c0eb122..17fe91b3 100644 --- a/packages/react/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -69,6 +69,8 @@ export function Pane({ const prevSelectedNodesCount = useRef(0); const prevSelectedEdgesCount = useRef(0); const containerBounds = useRef(); + const edgeIdLookup = useRef>>(new Map()); + const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow); const resetUserSelection = () => { @@ -96,7 +98,7 @@ export function Pane({ const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined; const onMouseDown = (event: ReactMouseEvent): void => { - const { resetSelectedElements, domNode } = store.getState(); + const { resetSelectedElements, domNode, edgeLookup } = store.getState(); containerBounds.current = domNode?.getBoundingClientRect(); if ( @@ -109,6 +111,13 @@ export function Pane({ return; } + edgeIdLookup.current = new Map(); + + for (const [id, edge] of edgeLookup) { + edgeIdLookup.current.set(edge.source, edgeIdLookup.current.get(edge.source)?.add(id) || new Set([id])); + edgeIdLookup.current.set(edge.target, edgeIdLookup.current.get(edge.target)?.add(id) || new Set([id])); + } + const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current); resetSelectedElements(); @@ -130,22 +139,21 @@ export function Pane({ const onMouseMove = (event: ReactMouseEvent): void => { const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState(); + if (!isSelecting || !containerBounds.current || !userSelectionRect) { return; } - store.setState({ userSelectionActive: true, nodesSelectionActive: false }); - - const mousePos = getEventPosition(event.nativeEvent, containerBounds.current); - const startX = userSelectionRect.startX ?? 0; - const startY = userSelectionRect.startY ?? 0; + const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current); + const { startX, startY } = userSelectionRect; const nextUserSelectRect = { - ...userSelectionRect, - x: mousePos.x < startX ? mousePos.x : startX, - y: mousePos.y < startY ? mousePos.y : startY, - width: Math.abs(mousePos.x - startX), - height: Math.abs(mousePos.y - startY), + startX, + startY, + x: mouseX < startX ? mouseX : startX, + y: mouseY < startY ? mouseY : startY, + width: Math.abs(mouseX - startX), + height: Math.abs(mouseY - startY), }; const selectedNodes = getNodesInside( @@ -163,8 +171,10 @@ export function Pane({ for (const selectedNode of selectedNodes) { selectedNodeIds.add(selectedNode.id); - for (const [edgeId, edge] of edgeLookup) { - if (edge.source === selectedNode.id || edge.target === selectedNode.id) { + const edgeIds = edgeIdLookup.current.get(selectedNode.id); + + if (edgeIds) { + for (const edgeId of edgeIds) { selectedEdgeIds.add(edgeId); } } @@ -184,6 +194,8 @@ export function Pane({ store.setState({ userSelectionRect: nextUserSelectRect, + userSelectionActive: true, + nodesSelectionActive: false, }); }; diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts index 5f3d2acb..da407778 100644 --- a/packages/react/src/hooks/useReactFlow.ts +++ b/packages/react/src/hooks/useReactFlow.ts @@ -47,10 +47,7 @@ export function useReactFlow ({ ...e })) as EdgeType[]; }, []); - const getEdge = useCallback>((id) => { - const { edges = [] } = store.getState(); - return edges.find((e) => e.id === id) as EdgeType; - }, []); + const getEdge = useCallback>((id) => store.getState().edgeLookup.get(id) as EdgeType, []); type SetElementsQueue = { nodes: (NodeType[] | ((nodes: NodeType[]) => NodeType[]))[]; diff --git a/packages/react/src/utils/changes.ts b/packages/react/src/utils/changes.ts index 44af2451..69b220f6 100644 --- a/packages/react/src/utils/changes.ts +++ b/packages/react/src/utils/changes.ts @@ -184,8 +184,8 @@ export function getSelectionChanges( ): NodeSelectionChange[] | EdgeSelectionChange[] { const changes: NodeSelectionChange[] | EdgeSelectionChange[] = []; - for (const [, item] of items) { - const willBeSelected = selectedIds.has(item.id); + for (const [id, item] of items) { + const willBeSelected = selectedIds.has(id); // we don't want to set all items to selected=false on the first selection if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) { diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index 67a7c365..56eba62b 100644 --- a/packages/system/src/utils/store.ts +++ b/packages/system/src/utils/store.ts @@ -92,11 +92,10 @@ export function adoptUserNodes( const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0; nodes.forEach((userNode) => { - const currentStoreNode = tmpLookup.get(userNode.id); + let internalNode = tmpLookup.get(userNode.id); - let internalNode = currentStoreNode!; - if (options.checkEquality && userNode === currentStoreNode?.internals.userNode) { - nodeLookup.set(userNode.id, currentStoreNode); + if (options.checkEquality && userNode === internalNode?.internals.userNode) { + nodeLookup.set(userNode.id, internalNode); } else { internalNode = { ...options.defaults, @@ -107,7 +106,7 @@ export function adoptUserNodes( }, internals: { positionAbsolute: userNode.position, - handleBounds: currentStoreNode?.internals.handleBounds, + handleBounds: internalNode?.internals.handleBounds, z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0), userNode, }, @@ -184,8 +183,9 @@ export function handleExpandParent( const dimensions = getNodeDimensions(parent); // determine how much the parent expands by moving the position - let xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0; - let yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0; + const xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0; + const yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0; + if (xChange > 0 || yChange > 0) { changes.push({ id: parentId, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e735913a..d2b9d470 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,6 +92,9 @@ importers: examples/react: dependencies: + '@reduxjs/toolkit': + specifier: ^2.2.3 + version: 2.2.3(react-redux@9.1.1)(react@18.2.0) '@xyflow/react': specifier: workspace:* version: link:../../packages/react @@ -110,9 +113,15 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + react-redux: + specifier: ^9.1.1 + version: 9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1) react-router-dom: specifier: ^6.18.0 version: 6.18.0(react-dom@18.2.0)(react@18.2.0) + redux: + specifier: ^5.0.1 + version: 5.0.1 zustand: specifier: ^4.4.6 version: 4.4.6(@types/react@18.2.36)(react@18.2.0) @@ -2120,6 +2129,25 @@ packages: resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==} dev: true + /@reduxjs/toolkit@2.2.3(react-redux@9.1.1)(react@18.2.0): + resolution: {integrity: sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==} + peerDependencies: + react: ^16.9.0 || ^17.0.0 || ^18 + react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0 + peerDependenciesMeta: + react: + optional: true + react-redux: + optional: true + dependencies: + immer: 10.0.4 + react: 18.2.0 + react-redux: 9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1) + redux: 5.0.1 + redux-thunk: 3.1.0(redux@5.0.1) + reselect: 5.1.0 + dev: false + /@remix-run/router@1.11.0: resolution: {integrity: sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==} engines: {node: '>=14.0.0'} @@ -3067,6 +3095,10 @@ packages: resolution: {integrity: sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==} dev: false + /@types/use-sync-external-store@0.0.3: + resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==} + dev: false + /@types/yauzl@2.10.3: resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==} requiresBuild: true @@ -6373,6 +6405,10 @@ packages: resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} dev: false + /immer@10.0.4: + resolution: {integrity: sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==} + dev: false + /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -9057,6 +9093,28 @@ packages: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} dev: true + /react-redux@9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1): + resolution: {integrity: sha512-5ynfGDzxxsoV73+4czQM56qF43vsmgJsO22rmAvU5tZT2z5Xow/A2uhhxwXuGTxgdReF3zcp7A80gma2onRs1A==} + peerDependencies: + '@types/react': ^18.2.25 + react: ^18.0 + react-native: '>=0.69' + redux: ^5.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + react-native: + optional: true + redux: + optional: true + dependencies: + '@types/react': 18.2.36 + '@types/use-sync-external-store': 0.0.3 + react: 18.2.0 + redux: 5.0.1 + use-sync-external-store: 1.2.0(react@18.2.0) + dev: false + /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} @@ -9148,6 +9206,18 @@ packages: strip-indent: 3.0.0 dev: true + /redux-thunk@3.1.0(redux@5.0.1): + resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==} + peerDependencies: + redux: ^5.0.0 + dependencies: + redux: 5.0.1 + dev: false + + /redux@5.0.1: + resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==} + dev: false + /reflect.getprototypeof@1.0.4: resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==} engines: {node: '>= 0.4'} @@ -9265,6 +9335,10 @@ packages: resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} dev: true + /reselect@5.1.0: + resolution: {integrity: sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==} + dev: false + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'}