33 lines
995 B
XML
33 lines
995 B
XML
import { defaultEdgeColor } from './Edge';
|
|
|
|
/**
|
|
* In SVG you need to supply this kind of marker that can be then referenced from a line segment as an ending of the
|
|
* line turning in into arrow. Needs to be included in the svg element and then referenced as markerEnd="url(#triangle)"
|
|
*/
|
|
export function EdgeArrowMarker({
|
|
id = 'triangle',
|
|
fill = defaultEdgeColor,
|
|
headHeight = 10,
|
|
}: {
|
|
id?: string;
|
|
fill?: string;
|
|
headHeight?: number;
|
|
}) {
|
|
return (
|
|
<defs>
|
|
<marker
|
|
id={id}
|
|
viewBox="0 0 10 10"
|
|
refX="1" // shift the arrow head slightly closer to the center of the line it will be attached to, to ensure no empty space is shown between the line and the arrow head
|
|
refY="5"
|
|
markerUnits="userSpaceOnUse"
|
|
markerWidth={headHeight} // equal to the height just for simplicily
|
|
markerHeight={headHeight}
|
|
orient="auto"
|
|
>
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill={fill} />
|
|
</marker>
|
|
</defs>
|
|
);
|
|
}
|