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

feat(edges): add smooth step type

Browse Source
This commit is contained in:
moklick
2020-07-13 15:24:14 +02:00
parent f719ea9423
commit b32d5454e1
7 changed files with 288 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Horizontal/index.js
+24 -19
View File
@@ -2,10 +2,17 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
const onLoad = reactFlowInstance => reactFlowInstance.fitView();
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
const initialElements = [
{ id: '1', sourcePosition: 'right', type: 'input', className: 'dark-node', data: { label: 'Input' }, position: { x: 0, y: 80 } },
{
id: '1',
sourcePosition: 'right',
type: 'input',
className: 'dark-node',
data: { label: 'Input' },
position: { x: 0, y: 80 },
},
{ id: '2', sourcePosition: 'right', targetPosition: 'left', data: { label: 'A Node' }, position: { x: 250, y: 0 } },
{ id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 3' }, position: { x: 250, y: 160 } },
{ id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 0 } },
@@ -14,8 +21,8 @@ const initialElements = [
{ id: '7', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 7' }, position: { x: 750, y: 50 } },
{ id: '8', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 8' }, position: { x: 750, y: 300 } },
{ id: 'e1-2', source: '1', target: '2', animated: true, },
{ id: 'e1-3', source: '1', target: '3', animated: true, },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3', animated: true },
{ id: 'e1-4', source: '2', target: '4', label: 'edge label' },
{ id: 'e3-5', source: '3', target: '5', animated: true },
{ id: 'e3-6', source: '3', target: '6', animated: true },
@@ -25,18 +32,19 @@ const initialElements = [
const HorizontalFlow = () => {
const [elements, setElements] = useState(initialElements);
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 changeClassName = () => {
setElements(elms => elms.map(el => {
if (el.type === 'input') {
el.className = el.className ? '' : 'dark-node';
}
setElements((elms) =>
elms.map((el) => {
if (el.type === 'input') {
el.className = el.className ? '' : 'dark-node';
}
return {...el};
}))
}
return { ...el };
})
);
};
return (
<ReactFlow
@@ -46,14 +54,11 @@ const HorizontalFlow = () => {
onLoad={onLoad}
selectNodesOnDrag={false}
>
<button
onClick={changeClassName}
style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
>
<button onClick={changeClassName} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
change class name
</button>
</ReactFlow>
);
}
};
export default HorizontalFlow;