diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 05bc506b..769e0662 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -159,6 +159,10 @@ event.detail.event.preventDefault(); console.log('on node contextmenu', event); }} + on:edgecontextmenu={({ detail: { event, edge } }) => { + event.preventDefault(); + console.log('on edge contextmenu', edge); + }} autoPanOnConnect autoPanOnNodeDrag > diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index 0b99d744..81d35e49 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -51,6 +51,11 @@ const edge = $edges.find((e) => e.id === id); dispatch('edgeclick', { event, edge }); } + + function onContextMenu(event: MouseEvent) { + const edge = $edges.find((e) => e.id === id); + dispatch('edgecontextmenu', { event, edge }); + } @@ -62,6 +67,7 @@ class:selected data-id={id} on:click={onClick} + on:contextmenu={onContextMenu} aria-label={ariaLabel === null ? undefined : ariaLabel diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index 0658f47a..8835c19a 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte @@ -17,7 +17,7 @@ ($elementsSelectable && typeof edge.selectable === 'undefined') )} - + {/each} diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index d6e55ee2..8b43ddb3 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -149,7 +149,7 @@ > - +
& { 'on:nodemousemove'?: CustomEvent<{ event: MouseEvent; node: Node }>; 'on:nodemouseleave'?: CustomEvent<{ event: MouseEvent; node: Node }>; 'on:edgeclick'?: CustomEvent<{ event: MouseEvent; edge: Edge }>; + 'on:edgecontextmenu'?: CustomEvent<{ event: MouseEvent; edge: Edge }>; 'on:connectstart'?: CustomEvent<{ event: MouseEvent | TouchEvent; nodeId?: string;