diff --git a/example/src/Rich/index.js b/example/src/Rich/index.js index e1d2c691..3e5cb981 100644 --- a/example/src/Rich/index.js +++ b/example/src/Rich/index.js @@ -1,10 +1,13 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow'; const onNodeDragStop = node => console.log('drag stop', node); const onElementClick = element => console.log('click', element); -const onLoad = (graph) => console.log('graph loaded:', graph); +const onLoad = (graph) => { + console.log('graph loaded:', graph); + graph.fitView(); +}; const initialElements = [ { id: '1', type: 'input', data: { label: 'Input Node 1' }, position: { x: 250, y: 5 } }, diff --git a/example/src/Stress/index.js b/example/src/Stress/index.js new file mode 100644 index 00000000..bd53f4d9 --- /dev/null +++ b/example/src/Stress/index.js @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; + +import Graph, { removeElements, addEdge, MiniMap } from 'react-flow'; +import { getElements } from './utils'; + +const onLoad = graph => { + console.log('graph loaded:', graph); + graph.fitView(); +}; + +const initialElements = getElements(10, 10); + +const StressGraph = () => { + const [elements, setElements] = useState(initialElements); + const onElementsRemove = (elementsToRemove) => + setElements(els => removeElements(elementsToRemove, els)); + const onConnect = (params) => setElements(els => addEdge(params, els)); + + return ( + + + + ); +} + +export default StressGraph; diff --git a/example/src/Stress/utils.js b/example/src/Stress/utils.js new file mode 100644 index 00000000..9a5de109 --- /dev/null +++ b/example/src/Stress/utils.js @@ -0,0 +1,28 @@ +export function getElements(xElements = 10, yElements = 10) { + const initialElements = []; + let nodeId = 1; + let recentNodeId = null; + + for (let y = 0; y < yElements; y++) { + for (let x = 0; x < xElements; x++) { + const position = { x: x * 100, y: y * 50 }; + const data = { label: `Node ${nodeId}` }; + const node = { + id: nodeId.toString(), + style: { width: 50, fontSize: 11 }, + data, + position, + }; + initialElements.push(node); + + if (recentNodeId && nodeId <= (xElements * yElements)) { + initialElements.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() }); + } + + recentNodeId = nodeId; + nodeId++; + } + } + + return initialElements; +} diff --git a/example/src/index.js b/example/src/index.js index 834fb888..0c275533 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -7,6 +7,7 @@ import Rich from './Rich'; import Basic from './Basic'; import Empty from './Empty'; import Inactive from './Inactive'; +import Stress from './Stress'; import './index.css'; @@ -25,6 +26,9 @@ ReactDOM.render(( + + +