diff --git a/example/src/Stress/index.js b/example/src/Stress/index.js index 0475b516..82561340 100644 --- a/example/src/Stress/index.js +++ b/example/src/Stress/index.js @@ -33,15 +33,23 @@ const StressFlow = () => { }); }; + const updateElements = () => { + const grid = Math.ceil(Math.random() * 10); + setElements(getElements(grid, grid)); + }; + return ( - +
+ + +
); }; diff --git a/example/src/Stress/utils.js b/example/src/Stress/utils.js index 9a5de109..39052453 100644 --- a/example/src/Stress/utils.js +++ b/example/src/Stress/utils.js @@ -15,7 +15,7 @@ export function getElements(xElements = 10, yElements = 10) { }; initialElements.push(node); - if (recentNodeId && nodeId <= (xElements * yElements)) { + if (recentNodeId && nodeId <= xElements * yElements) { initialElements.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() }); } diff --git a/example/src/Switch/index.js b/example/src/Switch/index.js new file mode 100644 index 00000000..550d58ea --- /dev/null +++ b/example/src/Switch/index.js @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; + +import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer'; + +const onNodeDragStop = (event, node) => console.log('drag stop', node); +const onElementClick = (event, element) => console.log('click', element); + +const elementsA = [ + { id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' }, + { id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' }, + { id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' }, + { id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' }, + { id: 'e1-2', source: '1a', target: '2a' }, + { id: 'e1-3', source: '1a', target: '3a' }, +]; + +const elementsB = [ + { id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, className: 'light' }, + { id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, className: 'light' }, + { id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, className: 'light' }, + { id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' }, + { id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, className: 'light' }, + + { id: 'e1b', source: 'inputb', target: '1b' }, + { id: 'e2b', source: 'inputb', target: '2b' }, + { id: 'e3b', source: 'inputb', target: '3b' }, + { id: 'e4b', source: 'inputb', target: '4b' }, +]; + +const BasicFlow = () => { + const [elements, setElements] = useState(elementsA); + const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els)); + const onConnect = (params) => setElements((els) => addEdge(params, els)); + + return ( + +
+ + +
+
+ ); +}; + +export default BasicFlow; diff --git a/example/src/index.js b/example/src/index.js index 5ec5f662..37f5f178 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -20,6 +20,7 @@ import UpdateNode from './UpdateNode'; import SaveRestore from './SaveRestore'; import DragNDrop from './DragNDrop'; import Layout from './Layouting'; +import SwitchFlows from './Switch'; import './index.css'; @@ -96,6 +97,10 @@ const routes = [ path: '/layouting', component: Layout, }, + { + path: '/switch', + component: SwitchFlows, + }, ]; const Header = withRouter(({ history, location }) => {