93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { memo, useMemo } from 'react';
|
|
import { type MarkerProps, createMarkerIds } from '@xyflow/system';
|
|
|
|
import { useStore } from '../../hooks/useStore';
|
|
import { useMarkerSymbol } from './MarkerSymbols';
|
|
|
|
type MarkerDefinitionsProps = {
|
|
defaultColor: string;
|
|
rfId?: string;
|
|
};
|
|
|
|
const Marker = ({
|
|
id,
|
|
type,
|
|
color,
|
|
width = 12.5,
|
|
height = 12.5,
|
|
markerUnits = 'strokeWidth',
|
|
strokeWidth,
|
|
orient = 'auto-start-reverse',
|
|
}: MarkerProps) => {
|
|
const Symbol = useMarkerSymbol(type);
|
|
|
|
if (!Symbol) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<marker
|
|
className="react-flow__arrowhead"
|
|
id={id}
|
|
markerWidth={`${width}`}
|
|
markerHeight={`${height}`}
|
|
viewBox="-10 -10 20 20"
|
|
markerUnits={markerUnits}
|
|
orient={orient}
|
|
refX="0"
|
|
refY="0"
|
|
>
|
|
<Symbol color={color} strokeWidth={strokeWidth} />
|
|
</marker>
|
|
);
|
|
};
|
|
|
|
/*
|
|
* 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 edges = useStore((s) => s.edges);
|
|
const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
|
|
|
|
const markers = useMemo(() => {
|
|
const markers = createMarkerIds(edges, {
|
|
id: rfId,
|
|
defaultColor,
|
|
defaultMarkerStart: defaultEdgeOptions?.markerStart,
|
|
defaultMarkerEnd: defaultEdgeOptions?.markerEnd,
|
|
});
|
|
|
|
return markers;
|
|
}, [edges, defaultEdgeOptions, rfId, defaultColor]);
|
|
|
|
if (!markers.length) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<svg className="react-flow__marker">
|
|
<defs>
|
|
{markers.map((marker: MarkerProps) => (
|
|
<Marker
|
|
id={marker.id}
|
|
key={marker.id}
|
|
type={marker.type}
|
|
color={marker.color}
|
|
width={marker.width}
|
|
height={marker.height}
|
|
markerUnits={marker.markerUnits}
|
|
strokeWidth={marker.strokeWidth}
|
|
orient={marker.orient}
|
|
/>
|
|
))}
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
MarkerDefinitions.displayName = 'MarkerDefinitions';
|
|
|
|
export default memo(MarkerDefinitions);
|