diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte index 92a353bb..2dd57734 100644 --- a/examples/svelte/src/routes/examples/overview/+page.svelte +++ b/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)} diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index e2fb0313..02401f61 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/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 }); } } @@ -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 diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index 5402fb4e..4af48ae2 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/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} diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 33deacdf..b8986aaa 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -222,7 +222,13 @@ {selectionOnDrag} > - +