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

23
example/src/Layouting/index.tsx
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>

20
example/src/Layouting/initial-elements.ts
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 };

12
example/src/MultiFlows/index.tsx
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>
);

5
src/components/Edges/wrapEdge.tsx
View File

@@ -53,6 +53,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
onEdgeUpdateEnd,
markerEnd,
markerStart,
rfId,
}: WrapEdgeProps): JSX.Element | null => {
const [updating, setUpdating] = useState<boolean>(false);
const { addSelectedEdges, connectionMode } = useStore(selector, shallow);
@@ -120,8 +121,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const onEdgeUpdaterMouseEnter = () => setUpdating(true);
const onEdgeUpdaterMouseOut = () => setUpdating(false);
const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart)})`, [markerStart]);
const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd)})`, [markerEnd]);
const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart, rfId)})`, [markerStart, rfId]);
const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd, rfId)})`, [markerEnd, rfId]);
if (hidden) {
return null;

49
src/container/EdgeRenderer/MarkerDefinitions.tsx
View File

@@ -1,4 +1,4 @@
import React, { useMemo } from 'react';
import React, { memo, useCallback } from 'react';
import { useStore } from '../../store';
import { EdgeMarker, ReactFlowState } from '../../types';
@@ -9,6 +9,7 @@ interface MarkerProps extends EdgeMarker {
}
interface MarkerDefinitionsProps {
defaultColor: string;
rfId?: string;
}
const Marker = ({
@@ -40,26 +41,36 @@ const Marker = ({
);
};
const edgesSelector = (s: ReactFlowState) => s.edges;
const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => {
const edges = useStore(edgesSelector);
const markers = useMemo(() => {
const markerSelector =
({ defaultColor, rfId }: { defaultColor: string; rfId?: string }) =>
(s: ReactFlowState) => {
const ids: string[] = [];
return edges.reduce<MarkerProps[]>((markers, edge) => {
[edge.markerStart, edge.markerEnd].forEach((marker) => {
if (marker && typeof marker === 'object') {
const markerId = getMarkerId(marker);
if (!ids.includes(markerId)) {
markers.push({ id: markerId, color: marker.color || defaultColor, ...marker });
ids.push(markerId);
return s.edges
.reduce<MarkerProps[]>((markers, edge) => {
[edge.markerStart, edge.markerEnd].forEach((marker) => {
if (marker && typeof marker === 'object') {
const markerId = getMarkerId(marker, rfId);
if (!ids.includes(markerId)) {
markers.push({ id: markerId, color: marker.color || defaultColor, ...marker });
ids.push(markerId);
}
}
}
});
return markers.sort((a, b) => a.id.localeCompare(b.id));
}, []);
}, [edges, defaultColor]);
});
return markers;
}, [])
.sort((a, b) => a.id.localeCompare(b.id));
};
// when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore
// when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper
// that we can then use for creating our unique marker ids
const MarkerDefinitions = ({ defaultColor, rfId }: MarkerDefinitionsProps) => {
const markers = useStore(
useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]),
// the id includes all marker options, so we just need to look at that part of the marker
(a, b) => !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id))
);
return (
<defs>
@@ -82,4 +93,4 @@ const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => {
MarkerDefinitions.displayName = 'MarkerDefinitions';
export default MarkerDefinitions;
export default memo(MarkerDefinitions);

4
src/container/EdgeRenderer/index.tsx
View File

@@ -40,6 +40,7 @@ interface EdgeRendererProps {
edgeUpdaterRadius?: number;
noPanClassName?: string;
elevateEdgesOnSelect: boolean;
rfId?: string;
}
const selector = (s: ReactFlowState) => ({
@@ -93,7 +94,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
height={height}
className="react-flow__edges react-flow__container"
>
{isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} />}
{isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={props.rfId} />}
<g>
{edges.map((edge: Edge) => {
const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(nodeInternals, edge.source);
@@ -184,6 +185,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
onEdgeDoubleClick={props.onEdgeDoubleClick}
onEdgeUpdateStart={props.onEdgeUpdateStart}
onEdgeUpdateEnd={props.onEdgeUpdateEnd}
rfId={props.rfId}
/>
);
})}

2
src/container/GraphView/index.tsx
View File

@@ -84,6 +84,7 @@ const GraphView = ({
noWheelClassName,
noPanClassName,
elevateEdgesOnSelect,
id,
}: GraphViewProps) => {
useOnInitHandler(onInit);
@@ -139,6 +140,7 @@ const GraphView = ({
defaultMarkerColor={defaultMarkerColor}
noPanClassName={noPanClassName}
elevateEdgesOnSelect={!!elevateEdgesOnSelect}
rfId={id}
/>
<NodeRenderer
nodeTypes={nodeTypes}

1
src/container/ReactFlow/index.tsx
View File

@@ -211,6 +211,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
noWheelClassName={noWheelClassName}
noPanClassName={noPanClassName}
elevateEdgesOnSelect={elevateEdgesOnSelect}
id={rest?.id}
/>
<StoreUpdater
nodes={nodes}

1
src/types/edges.ts
View File

@@ -121,6 +121,7 @@ export interface WrapEdgeProps<T = any> {
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType;
rfId?: string;
}
export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {

8
src/utils/graph.ts
View File

@@ -30,7 +30,7 @@ export const getIncomers = <T = any, U extends T = T>(node: Node<U>, nodes: Node
const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection): string =>
`reactflow__edge-${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
export const getMarkerId = (marker: EdgeMarkerType | undefined): string => {
export const getMarkerId = (marker: EdgeMarkerType | undefined, rfId?: string): string => {
if (typeof marker === 'undefined') {
return '';
}
@@ -39,10 +39,12 @@ export const getMarkerId = (marker: EdgeMarkerType | undefined): string => {
return marker;
}
return Object.keys(marker)
const idPrefix = rfId ? `${rfId}__` : '';
return `${idPrefix}${Object.keys(marker)
.sort()
.map((key: string) => `${key}=${(marker as any)[key]}`)
.join('&');
.join('&')}`;
};
const connectionExists = (edge: Edge, edges: Edge[]) => {