Merge pull request #3448 from wbkd/svelte-flow-on-edge-context-menu

feat(svelte) added on:edgecontextmenu

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
 	attributionPosition={'top-center'}

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 });
+  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -62,6 +67,7 @@
     class:selected
     data-id={id}
     on:click={onClick}
+    on:contextmenu={onContextMenu}
     aria-label={ariaLabel === null
       ? undefined
       : ariaLabel

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -17,7 +17,7 @@
           ($elementsSelectable && typeof edge.selectable === 'undefined')
         )}
 
-        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick />
+        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick on:edgecontextmenu />
       {/each}
     </g>
   </svg>

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -151,7 +151,7 @@
   >
     <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
-        <EdgeRenderer on:edgeclick />
+        <EdgeRenderer on:edgeclick on:edgecontextmenu />
         <ConnectionLine />
         <div class="svelte-flow__edgelabel-renderer" />
         <NodeRenderer

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -73,6 +73,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   '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;