Stress Source Code
index.js
import React, { useState } from 'react';
import ReactFlow, {
removeElements,
addEdge,
MiniMap,
isNode,
Controls,
Background,
} from 'react-flow-renderer';
import { getElements } from './utils';
const onLoad = (reactFlowInstance) => {
reactFlowInstance.fitView();
console.log(reactFlowInstance.getElements());
};
const initialElements = getElements(10, 10);
const StressFlow = () => {
const [elements, setElements] = useState(initialElements);
const onElementsRemove = (elementsToRemove) =>
setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => 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;
});
});
};
return (
<ReactFlow
elements={elements}
onLoad={onLoad}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
>
<MiniMap />
<Controls />
<Background />
<button
onClick={updatePos}
style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
>
change pos
</button>
</ReactFlow>
);
};
export default StressFlow;
utils.js
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: `stress-${nodeId.toString()}`,
style: { width: 50, fontSize: 11 },
data,
position,
};
initialElements.push(node);
if (recentNodeId && nodeId <= xElements * yElements) {
initialElements.push({
id: `${x}-${y}`,
source: `stress-${recentNodeId.toString()}`,
target: `stress-${nodeId.toString()}`,
});
}
recentNodeId = nodeId;
nodeId++;
}
}
return initialElements;
}