refactor(edge-types-example): cleanup

This commit is contained in:
moklick
2020-07-21 16:48:23 +02:00
parent 8cf5b3f137
commit 8a16727cf8
5 changed files with 15 additions and 29 deletions
+5 -25
View File
@@ -1,39 +1,23 @@
/**
* Example for checking the different edge types and source and target positions
*/
import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer';
import ReactFlow, { removeElements, addEdge, MiniMap, 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 initialElements = getElements();
const EdgeTypesFlow = () => {
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}
@@ -45,10 +29,6 @@ const EdgeTypesFlow = () => {
<MiniMap />
<Controls />
<Background />
<button onClick={updatePos} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
change pos
</button>
</ReactFlow>
);
};