added edgemouseenter and edgemouseleave events

examples/svelte/src/routes/examples/overview/+page.svelte

@@ -159,6 +159,8 @@
 	on:nodemouseenter={(event) => console.log('on node enter', event)}
 	on:nodemouseleave={(event) => console.log('on node leave', event)}
 	on:edgeclick={(event) => console.log('edge click', event)}
+	on:edgemouseenter={(event) => console.log('edge enter', event)}
+	on:edgemouseleave={(event) => console.log('edge leave', event)}
 	onconnectstart={(event) => console.log('on connect start', event)}
 	onconnect={(event) => console.log('on connect', event)}
 	onconnectend={(event) => console.log('on connect end', event)}

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -50,6 +50,8 @@
   const dispatch = createEventDispatcher<{
     edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
     edgecontextmenu: { edge: Edge; event: MouseEvent };
+    edgemouseenter: { edge: Edge; event: MouseEvent };
+    edgemouseleave: { edge: Edge; event: MouseEvent };
   }>();
 
   $: edgeType = type || 'default';
@@ -69,11 +71,12 @@
     }
   }
 
-  function onContextMenu(event: MouseEvent) {
+  type EdgeMouseEvent = 'edgecontextmenu' | 'edgemouseenter' | 'edgemouseleave';
+  function onMouseEvent(event: MouseEvent, type: EdgeMouseEvent) {
     const edge = $edgeLookup.get(id);
 
     if (edge) {
-      dispatch('edgecontextmenu', { event, edge });
+      dispatch(type, { event, edge });
     }
   }
 </script>
@@ -89,7 +92,15 @@
       class:selectable={isSelectable}
       data-id={id}
       on:click={onClick}
-      on:contextmenu={onContextMenu}
+      on:contextmenu={(e) => {
+        onMouseEvent(e, 'edgecontextmenu');
+      }}
+      on:mouseenter={(e) => {
+        onMouseEvent(e, 'edgemouseenter');
+      }}
+      on:mouseleave={(e) => {
+        onMouseEvent(e, 'edgemouseleave');
+      }}
       aria-label={ariaLabel === null
         ? undefined
         : ariaLabel

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

@@ -12,7 +12,7 @@
     visibleEdges,
     edgesInitialized,
     edges: { setDefaultOptions },
-    elementsSelectable,
+    elementsSelectable
   } = useStore();
 
   onMount(() => {
@@ -56,6 +56,8 @@
       zIndex={edge.zIndex}
       on:edgeclick
       on:edgecontextmenu
+      on:edgemouseenter
+      on:edgemouseleave
     />
   {/each}
 

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

@@ -222,7 +222,13 @@
       {selectionOnDrag}
     >
       <ViewportComponent>
-        <EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} />
+        <EdgeRenderer
+          on:edgeclick
+          on:edgecontextmenu
+          on:edgemouseenter
+          on:edgemouseleave
+          {defaultEdgeOptions}
+        />
         <ConnectionLine
           containerStyle={connectionLineContainerStyle}
           style={connectionLineStyle}