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 ;)