Add arrows to edges

[bgins]

Hello, thanks for the excellent library! 👋

I was wondering if it might be possible to add (optional) arrows to edges. Arrows can be great when implementing flow charts or indicating parent-child hierarchies.

The arrows should definitely be optional. They aren't the right thing for many use cases!

Perhaps it would be possible to define marker-end components and pass them into the edge, similar to how anchors are added to nodes.

There's some previous discussion about arrows here: https://github.com/open-source-labs/Svelvet/discussions/460.

[stephane]

Yes it's possible to use the marker-start and marker-end attributes of SVG to do that.

I used this code to manually add arrows to edge:

<Edge let:path>
	<defs>
		<!-- A marker to be used as an arrowhead -->
		<marker
			id="arrow"
			viewBox="0 0 10 10"
			refX="11"
			refY="5"
			markerWidth="6"
			markerHeight="6"
			orient="auto-start-reverse"
		>
			<path d="M 0 0 L 10 5 L 0 10 z" />
		</marker>
	</defs>
	<path
		d={path}
		marker-start={isBidirectional ? 'url(#arrow)' : ''}
		marker-end="url(#arrow)"
	/>
</Edge>

Note: in this example, isBidirectional is used to toggle the marker. The style can be set with the CSS variables provided by Svelvet (eg. stroke: var(--prop-edge-color, var(--edge-color, var(--default-edge-color)));)

I don't know if such a feature will find its way in Svelvet. In the meantime, I hope this example could be useful to someone ;)