feat(examples): add ~stress~ test

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 } },

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 (
+    <Graph
+      elements={elements}
+      onLoad={onLoad}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+      style={{ width: '100%', height: '100%' }}
+      backgroundType="lines"
+    >
+      <MiniMap />
+    </Graph>
+  );
+}
+
+export default StressGraph;

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;
+}

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((
       <Route path="/custom-node">
         <CustomNode />
       </Route>
+      <Route path="/stress">
+        <Stress />
+      </Route>
       <Route path="/">
         <Rich />
       </Route>