diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index c7390408..aabff7b7 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -41,13 +41,13 @@ $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined; $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined; - function onClick() { + function onClick(event: MouseEvent | TouchEvent) { if (selectable) { addSelectedEdges([id]); } const edge = $edges.find((e) => e.id === id); - dispatch('edgeclick', edge); + dispatch('edgeclick', { event, edge }); } diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 0e697afd..17c8e4ce 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -69,21 +69,21 @@ }; }); - function dispatchEvent(eventName: string) { + function dispatchEvent(eventName: string, event?: MouseEvent | TouchEvent) { const node = $nodes.find((n) => n.id === id); - dispatch(eventName, node); + dispatch(eventName, { node, event }); } - function onSelectNodeHandler(event: MouseEvent) { + function onSelectNodeHandler(event: MouseEvent | TouchEvent) { if (selectable && (!selectNodesOnDrag || !draggable)) { // this handler gets called within the drag start event when selectNodesOnDrag=true addSelectedNodes([id]); } // @todo: support multiselection - - dispatchEvent('nodeclick'); + dispatchEvent('nodeclick', event); } + // @todo: add selectable state @@ -112,9 +112,9 @@ style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)" {style} on:click={onSelectNodeHandler} - on:mouseenter={() => dispatchEvent('nodemouseenter')} - on:mouseleave={() => dispatchEvent('nodemouseleave')} - on:mousemove={() => dispatchEvent('nodemousemove')} + on:mouseenter={(event) => dispatchEvent('nodemouseenter', event)} + on:mouseleave={(event) => dispatchEvent('nodemouseleave', event)} + on:mousemove={(event) => dispatchEvent('nodemousemove', event)} > diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index a529bc02..97d5a3a9 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -3,7 +3,6 @@ import type { Connection, ConnectionLineType, NodeOrigin, - OnConnectStartParams, Viewport, SelectionMode, SnapGrid, @@ -60,11 +59,11 @@ export type SvelteFlowProps = DOMAttributes & { onMove?: OnMove; onMoveEnd?: OnMoveEnd; - 'on:nodeclick'?: CustomEvent; - 'on:nodemouseenter'?: CustomEvent; - 'on:nodemousemove'?: CustomEvent; - 'on:nodemouseleave'?: CustomEvent; - 'on:edgeclick'?: CustomEvent; + 'on:nodeclick'?: CustomEvent<{ event: MouseEvent | TouchEvent; node: Node }>; + 'on:nodemouseenter'?: CustomEvent<{ event: MouseEvent; node: Node }>; + 'on:nodemousemove'?: CustomEvent<{ event: MouseEvent; node: Node }>; + 'on:nodemouseleave'?: CustomEvent<{ event: MouseEvent; node: Node }>; + 'on:edgeclick'?: CustomEvent<{ event: MouseEvent; edge: Edge }>; 'on:connectstart'?: CustomEvent<{ event: MouseEvent | TouchEvent; nodeId?: string; @@ -73,6 +72,6 @@ export type SvelteFlowProps = DOMAttributes & { }>; 'on:connect'?: CustomEvent<{ connection: Connection }>; 'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>; - 'on:paneclick'?: CustomEvent; - 'on:panecontextmenu'?: CustomEvent; + 'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>; + 'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>; };