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/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'}