chore(examples): add old api examples

2021-10-20 10:23:09 +02:00
parent 1525af39cf
commit f957462eb6
50 changed files with 3122 additions and 10 deletions
@@ -0,0 +1,70 @@
+import React, { useState, CSSProperties } from 'react';
+import ReactFlow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  isNode,
+  Controls,
+  Background,
+  OnLoadParams,
+  Elements,
+  Connection,
+  Edge,
+} from 'react-flow-renderer';
+
+import { getElements } from './utils';
+
+const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 };
+
+const onLoad = (reactFlowInstance: OnLoadParams) => {
+  reactFlowInstance.fitView();
+  console.log(reactFlowInstance.getElements());
+};
+
+const initialElements: Elements = getElements(30, 30);
+
+const StressFlow = () => {
+  const [elements, setElements] = useState<Elements>(initialElements);
+  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+
+  const updatePos = () => {
+    setElements((elms) => {
+      return elms.map((el) => {
+        if (isNode(el)) {
+          return {
+            ...el,
+            position: {
+              x: Math.random() * window.innerWidth,
+              y: Math.random() * window.innerHeight,
+            },
+          };
+        }
+
+        return el;
+      });
+    });
+  };
+
+  const updateElements = () => {
+    const grid = Math.ceil(Math.random() * 10);
+    setElements(getElements(grid, grid));
+  };
+
+  return (
+    <ReactFlow elements={elements} onLoad={onLoad} onElementsRemove={onElementsRemove} onConnect={onConnect}>
+      <MiniMap />
+      <Controls />
+      <Background />
+
+      <div style={buttonWrapperStyles}>
+        <button onClick={updatePos} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={updateElements}>update elements</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default StressFlow;
@@ -0,0 +1,30 @@
+import { Elements } from 'react-flow-renderer';
+
+export function getElements(xElements: number = 10, yElements: number = 10): Elements {
+  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;
+}