alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(tests): wording graph => flow

Browse Source
This commit is contained in:
moklick
2020-07-15 10:34:52 +02:00
parent b51a25191f
commit 6f87d848d7
11 changed files with 46 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Empty/index.js
+10 -15
View File
@@ -2,23 +2,22 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
const onNodeDragStop = node => console.log('drag stop', node);
const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance);
const onElementClick = element => console.log('click', element);
const onNodeDragStop = (node) => console.log('drag stop', node);
const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
const onElementClick = (element) => console.log('click', element);
const EmptyFlow = () => {
const [elements, setElements] = useState([]);
const onElementsRemove = (elementsToRemove) =>
setElements(els => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements(els => addEdge(params, els));
const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
const addRandomNode = () => {
const nodeId = (elements.length + 1).toString();
const newNode = {
id: nodeId,
data: { label: `Node: ${nodeId}` },
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
};
setElements(els => els.concat(newNode));
setElements((els) => els.concat(newNode));
};
return (
@@ -27,22 +26,18 @@ const EmptyFlow = () => {
onLoad={onLoad}
onElementClick={onElementClick}
onElementsRemove={onElementsRemove}
onConnect={p => onConnect(p)}
onConnect={(p) => onConnect(p)}
onNodeDragStop={onNodeDragStop}
>
<MiniMap />
<Controls />
<Background variant="lines" />
<button
type="button"
onClick={addRandomNode}
style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
>
<button type="button" onClick={addRandomNode} style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
add node
</button>
</ReactFlow>
);
}
};
export default EmptyFlow;