feat(examples): add ~stress~ test

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