Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add arrows to edges #472

Open
bgins opened this issue Sep 5, 2023 · 1 comment
Open

Add arrows to edges #472

bgins opened this issue Sep 5, 2023 · 1 comment

Comments

@bgins
Copy link

bgins commented Sep 5, 2023

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: #460.

@stephane
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants