Question: How to delete an edge and not the nodes

[Joshswooft]

Hi in my particular use case I want to delete a selected edge by first clicking on it and then pressing the delete key.

I know the <Edge edgeClick={}> is something i can use to detect when it's selected. But how do i then destroy it?

This is my current approach and it works but feels really hacky, so was wondering if there was a better way.

<script lang="ts">
	import { getContext } from 'svelte';
	import { Edge, type Graph } from 'svelvet';
	import { selectedEdge } from '../stores/node-store';

	let edge: Edge;
	const groups: Graph['groups'] = getContext('groups');
	const selectedNodes = $groups.selected.nodes;

	function onEdgeClick() {
		// TOOD: waiting for library support - but we need a way to change the colour back to default when it's un-selected
		color = selectedColor;

		selectedEdge.set(edge);
	}

</script>

<Edge let:path edgeClick={onEdgeClick} targetColor={'blue'} bind:this={edge}>
	<path style:stroke={color} d={path} />
	<div slot="label">Custom Label</div>
</Edge>

Then in another component I detect if the document has a delete key pressed and do some logic...

	const edgeStore = getContext<Graph['edges']>('edgeStore');

// attached to an on:keydown event
function delete() {

destroySelectedEdges();

}



// super hacky - we basically copy the internal destroy() of the edge component.
		// idk if this context thing could fail or not in the future.
		// https://github.com/open-source-labs/Svelvet/blob/4d5cf3e2e6897308561ab252cb1f4ccf6bd1dce4/src/lib/components/Edge/Edge.svelte#L209-L221
		function destroySelectedEdge() {
			const edgeObj = $selectedEdge?.$$.context.get('edge');
			if (!edgeObj) {
				console.error('not edge context found');
				return;
			}
			const source = edgeObj.source;
			const target = edgeObj.target;
			const edgeKey = edgeStore.match(source, target);

			edgeStore.delete(edgeKey[0]);
			source?.connected.update((connected) => {
				if (target) connected.delete(target);
				return connected;
			});
			target?.connected.update((connected) => {
				if (source) connected.delete(source);
				return connected;
			});
		}