53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
|
|
|
|
const onLoad = (graph) => {
|
|
graph.fitView();
|
|
};
|
|
|
|
const initialElements = [
|
|
{ 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: 'Another node' }, position: { x: 250, y: 160 } },
|
|
{ id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 80 } },
|
|
{ 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' }
|
|
];
|
|
|
|
const HorizontalFlow = () => {
|
|
const [elements, setElements] = useState(initialElements);
|
|
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';
|
|
}
|
|
|
|
return {...el};
|
|
}))
|
|
}
|
|
|
|
return (
|
|
<ReactFlow
|
|
elements={elements}
|
|
onElementsRemove={onElementsRemove}
|
|
onConnect={onConnect}
|
|
onLoad={onLoad}
|
|
selectNodesOnDrag={false}
|
|
>
|
|
<button
|
|
onClick={changeClassName}
|
|
style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
|
|
>
|
|
change class name
|
|
</button>
|
|
</ReactFlow>
|
|
);
|
|
}
|
|
|
|
export default HorizontalFlow;
|