refactor(svelte): use same data passing convention for all custom events

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 });
   }
 </script>
 

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
 </script>
 
@@ -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)}
   >
     <svelte:component
       this={nodeComponent}

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -64,8 +64,8 @@
   $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
   $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
 
-  function onClick(event: MouseEvent) {
-    dispatch('paneclick', event);
+  function onClick(event: MouseEvent | TouchEvent) {
+    dispatch('paneclick', { event });
 
     unselectNodesAndEdges();
     selectionRectMode.set(null);
@@ -180,7 +180,7 @@
       return;
     }
 
-    dispatch('panecontextmenu', event);
+    dispatch('panecontextmenu', { event });
   };
 </script>
 

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<HTMLDivElement> & {
   onMove?: OnMove;
   onMoveEnd?: OnMoveEnd;
 
-  'on:nodeclick'?: CustomEvent<Node>;
-  'on:nodemouseenter'?: CustomEvent<Node>;
-  'on:nodemousemove'?: CustomEvent<Node>;
-  'on:nodemouseleave'?: CustomEvent<Node>;
-  'on:edgeclick'?: CustomEvent<Edge>;
+  '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<HTMLDivElement> & {
   }>;
   '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 }>;
 };