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

feat(connectionline): add step and smoothstep types

Browse Source
This commit is contained in:
moklick
2020-07-13 18:02:59 +02:00
parent 1d8a9d6d87
commit 152acbe70a
8 changed files with 246 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
example/src/CustomNode/index.js
View File

@@ -4,9 +4,9 @@ import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'r
import ColorSelectorNode from './ColorSelectorNode';
const onNodeDragStop = node => console.log('drag stop', node);
const onElementClick = element => console.log('click', element);
const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance);
const onNodeDragStop = (node) => console.log('drag stop', node);
const onElementClick = (element) => console.log('click', element);
const onLoad = (reactFlowInstance) => console.log('graph loaded:', reactFlowInstance);
const initBgColor = '#f0e742';
@@ -16,39 +16,47 @@ const CustomNodeFlow = () => {
useEffect(() => {
const onChange = (evt) => {
setElements(els => els.map(e => {
if (isEdge(e) || e.id !== '2') {
return e;
}
const color = evt.target.value;
setBgColor(color);
return {
...e,
data: {
...e.data,
color
setElements((els) =>
els.map((e) => {
if (isEdge(e) || e.id !== '2') {
return e;
}
};
}));
const color = evt.target.value;
setBgColor(color);
return {
...e,
data: {
...e.data,
color,
},
};
})
);
};
setElements([
{ id: '1', type: 'input', data: { label: 'An input node' }, position: { x: 0, y: 50 }, sourcePosition: 'right' },
{ id: '2', type: 'selectorNode', data: { onChange: onChange, color: initBgColor }, style: { border: '1px solid #777', padding: 10 }, position: { x: 250, y: 50 } },
{
id: '2',
type: 'selectorNode',
data: { onChange: onChange, color: initBgColor },
style: { border: '1px solid #777', padding: 10 },
position: { x: 250, y: 50 },
},
{ id: '3', type: 'output', data: { label: 'Output A' }, position: { x: 550, y: 25 }, targetPosition: 'left' },
{ id: '4', type: 'output', data: { label: 'Output B' }, position: { x: 550, y: 100 }, targetPosition: 'left' },
{ id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
{ id: 'e2a-3', source: '2__a', target: '3', animated: true, style: { stroke: '#fff' } },
{ id: 'e2b-4', source: '2__b', target: '4', animated: true, style: { stroke: '#fff' } },
])
]);
}, []);
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));
return (
<ReactFlow
@@ -63,12 +71,11 @@ const CustomNodeFlow = () => {
selectorNode: ColorSelectorNode,
}}
connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
connectionLineType="bezier"
snapToGrid={true}
snapGrid={[16, 16]}
>
<MiniMap
nodeColor={n => {
nodeColor={(n) => {
if (n.type === 'input') return 'blue';
if (n.type === 'selectorNode') return bgColor;
if (n.type === 'output') return 'green';
@@ -77,6 +84,6 @@ const CustomNodeFlow = () => {
<Controls />
</ReactFlow>
);
}
};
export default CustomNodeFlow;
export default CustomNodeFlow;