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

refactor(markers): optimze marker creation, pass ids closes #2188

Browse Source
This commit is contained in:
moklick
2022-06-21 17:15:58 +02:00
parent f52ab12f57
commit 3d74b519b5
10 changed files with 82 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Layouting/index.tsx
+20 -3
View File
@@ -8,6 +8,8 @@ import ReactFlow, {
Position,
useNodesState,
useEdgesState,
MarkerType,
EdgeMarker,
} from 'react-flow-renderer';
import dagre from 'dagre';
@@ -27,9 +29,12 @@ const LayoutFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialItems.nodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialItems.edges);
const onConnect = useCallback((connection: Connection) => {
setEdges((eds) => addEdge(connection, eds));
}, []);
const onConnect = useCallback(
(connection: Connection) => {
setEdges((eds) => addEdge(connection, eds));
},
[setEdges]
);
const onLayout = (direction: string) => {
const isHorizontal = direction === 'LR';
@@ -63,6 +68,17 @@ const LayoutFlow = () => {
setNodes((nds) => nds.map((n) => ({ ...n, selected: false })));
};
const changeMarker = () => {
setEdges((eds) =>
eds.map((e) => ({
...e,
markerEnd: {
type: (e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow ? MarkerType.ArrowClosed : MarkerType.Arrow,
},
}))
);
};
return (
<div className="layoutflow">
<ReactFlowProvider>
@@ -85,6 +101,7 @@ const LayoutFlow = () => {
horizontal layout
</button>
<button onClick={() => unselect()}>unselect nodes</button>
<button onClick={() => changeMarker()}>change marker</button>
</div>
</ReactFlowProvider>
</div>
example/src/Layouting/initial-elements.ts
+10 -10
View File
@@ -1,4 +1,4 @@
import { Node, Edge, XYPosition } from 'react-flow-renderer';
import { Node, Edge, XYPosition, MarkerType } from 'react-flow-renderer';
const position: XYPosition = { x: 0, y: 0 };
@@ -59,16 +59,16 @@ const nodes: Node[] = [
];
const edges: Edge[] = [
{ id: 'e12', source: '1', target: '2', type: 'smoothstep' },
{ id: 'e13', source: '1', target: '3', type: 'smoothstep' },
{ id: 'e22a', source: '2', target: '2a', type: 'smoothstep' },
{ id: 'e22b', source: '2', target: '2b', type: 'smoothstep' },
{ id: 'e22c', source: '2', target: '2c', type: 'smoothstep' },
{ id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep' },
{ id: 'e12', source: '1', target: '2', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e13', source: '1', target: '3', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e22a', source: '2', target: '2a', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e22b', source: '2', target: '2b', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e22c', source: '2', target: '2c', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e45', source: '4', target: '5', type: 'smoothstep' },
{ id: 'e56', source: '5', target: '6', type: 'smoothstep' },
{ id: 'e57', source: '5', target: '7', type: 'smoothstep' },
{ id: 'e45', source: '4', target: '5', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e56', source: '5', target: '6', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e57', source: '5', target: '7', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
];
const nodesAndEdges = { nodes, edges };
example/src/MultiFlows/index.tsx
+7 -5
View File
@@ -9,6 +9,7 @@ import ReactFlow, {
ReactFlowProvider,
useNodesState,
useEdgesState,
MarkerType,
} from 'react-flow-renderer';
import './multiflows.css';
@@ -21,12 +22,12 @@ const initialNodes: Node[] = [
];
const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-2', source: '1', target: '2', animated: true, markerEnd: { type: MarkerType.Arrow } },
{ id: 'e1-3', source: '1', target: '3' },
];
const Flow: FC = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const Flow: FC<{ id: string }> = ({ id }) => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Edge | Connection) => setEdges((eds) => addEdge(params, eds));
@@ -39,6 +40,7 @@ const Flow: FC = () => {
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
id={id}
>
<Background />
</ReactFlow>
@@ -48,8 +50,8 @@ const Flow: FC = () => {
const MultiFlows: FC = () => (
<div className="react-flow__example-multiflows">
<Flow />
<Flow />
<Flow id="flow-a" />
<Flow id="flow-b" />
</div>
);