use pointer events instead of mouse events

examples/svelte/src/routes/examples/overview/Flow.svelte

@@ -172,11 +172,11 @@
 	snapGrid={[25, 25]}
 	oninit={() => console.log('on init')}
 	onnodeclick={(event) => console.log('on node click', event)}
-	onnodemouseenter={(event) => console.log('on node enter', event)}
+	onnodepointerenter={(event) => console.log('on node enter', event)}
-	onnodemouseleave={(event) => console.log('on node leave', event)}
+	onnodepointerleave={(event) => console.log('on node leave', event)}
 	onedgeclick={(event) => console.log('edge click', event)}
-	onedgemouseenter={(event) => console.log('edge enter', event)}
+	onedgepointerenter={(event) => console.log('edge enter', event)}
-	onedgemouseleave={(event) => console.log('edge leave', event)}
+	onedgepointerleave={(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

@@ -14,8 +14,8 @@
     store,
     onedgeclick,
     onedgecontextmenu,
-    onedgemouseenter,
+    onedgepointerenter,
-    onedgemouseleave
+    onedgepointerleave
   }: { store: SvelteFlowStore; edge: EdgeLayouted } & EdgeEvents = $props();
 
   let {
@@ -60,7 +60,7 @@
     markerEnd ? `url('#${getMarkerId(markerEnd, store.flowId)}')` : undefined
   );
 
-  function onclick(event: MouseEvent | TouchEvent) {
+  function onclick(event: MouseEvent) {
     const edge = store.edgeLookup.get(id);
 
     if (edge) {
@@ -69,9 +69,9 @@
     }
   }
 
-  function onMouseEvent(
+  function onMouseEvent<T = MouseEvent>(
-    event: MouseEvent,
+    event: T,
-    callback: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void
+    callback: ({ edge, event }: { edge: Edge; event: T }) => void
   ) {
     const edge = store.edgeLookup.get(id);
 
@@ -97,14 +97,14 @@
             onMouseEvent(e, onedgecontextmenu);
           }
         : undefined}
-      onmouseenter={onedgemouseenter
+      onpointerenter={onedgepointerenter
         ? (e) => {
-            onMouseEvent(e, onedgemouseenter);
+            onMouseEvent(e, onedgepointerenter);
           }
         : undefined}
-      onmouseleave={onedgemouseleave
+      onpointerleave={onedgepointerleave
         ? (e) => {
-            onMouseEvent(e, onedgemouseleave);
+            onMouseEvent(e, onedgepointerleave);
           }
         : undefined}
       aria-label={ariaLabel === null

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -24,12 +24,12 @@
     return null;
   });
 
-  function oncontextmenu(event: MouseEvent | TouchEvent) {
+  function oncontextmenu(event: MouseEvent) {
     const selectedNodes = store.nodes.filter((n) => n.selected);
     onselectioncontextmenu?.({ nodes: selectedNodes, event });
   }
 
-  function onclick(event: MouseEvent | TouchEvent) {
+  function onclick(event: MouseEvent) {
     const selectedNodes = store.nodes.filter((n) => n.selected);
     onselectionclick?.({ nodes: selectedNodes, event });
   }

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -19,9 +19,9 @@
     onnodedrag,
     onnodedragstart,
     onnodedragstop,
-    onnodemouseenter,
+    onnodepointerenter,
-    onnodemouseleave,
+    onnodepointerleave,
-    onnodemousemove,
+    onnodepointermove,
     onnodecontextmenu
   }: NodeWrapperProps & NodeEvents = $props();
 
@@ -200,9 +200,9 @@
     style:visibility={initialized ? 'visible' : 'hidden'}
     style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
     onclick={onSelectNodeHandler}
-    onpointerenter={onnodemouseenter ? (event) => onnodemouseenter({ node, event }) : undefined}
+    onpointerenter={onnodepointerenter ? (event) => onnodepointerenter({ node, event }) : undefined}
-    onpointerleave={onnodemouseleave ? (event) => onnodemouseleave({ node, event }) : undefined}
+    onpointerleave={onnodepointerleave ? (event) => onnodepointerleave({ node, event }) : undefined}
-    onpointermove={onnodemousemove ? (event) => onnodemousemove({ node, event }) : undefined}
+    onpointermove={onnodepointermove ? (event) => onnodepointermove({ node, event }) : undefined}
     oncontextmenu={onnodecontextmenu ? (event) => onnodecontextmenu({ node, event }) : undefined}
   >
     <NodeComponent

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

@@ -9,8 +9,8 @@
     store,
     onedgeclick,
     onedgecontextmenu,
-    onedgemouseenter,
+    onedgepointerenter,
-    onedgemouseleave
+    onedgepointerleave
   }: { store: SvelteFlowStore } & EdgeEvents = $props();
 </script>
 
@@ -25,8 +25,8 @@
       {edge}
       {onedgeclick}
       {onedgecontextmenu}
-      {onedgemouseenter}
+      {onedgepointerenter}
-      {onedgemouseleave}
+      {onedgepointerleave}
     />
   {/each}
 

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -11,9 +11,9 @@
     nodeClickDistance,
     onnodeclick,
     onnodecontextmenu,
-    onnodemouseenter,
+    onnodepointerenter,
-    onnodemousemove,
+    onnodepointermove,
-    onnodemouseleave,
+    onnodepointerleave,
     onnodedrag,
     onnodedragstart,
     onnodedragstop
@@ -51,9 +51,9 @@
       {resizeObserver}
       {nodeClickDistance}
       {onnodeclick}
-      {onnodemouseenter}
+      {onnodepointerenter}
-      {onnodemousemove}
+      {onnodepointermove}
-      {onnodemouseleave}
+      {onnodepointerleave}
       {onnodedrag}
       {onnodedragstart}
       {onnodedragstop}

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

@@ -73,7 +73,7 @@
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   let selectionInProgress = false;
 
-  function onClick(event: MouseEvent | TouchEvent) {
+  function onClick(event: MouseEvent) {
     // We prevent click events when the user let go of the selectionKey during a selection
     if (selectionInProgress) {
       selectionInProgress = false;

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

@@ -38,15 +38,15 @@
     onnodedrag,
     onnodedragstart,
     onnodedragstop,
-    onnodemouseenter,
+    onnodepointerenter,
-    onnodemousemove,
+    onnodepointermove,
-    onnodemouseleave,
+    onnodepointerleave,
     onselectionclick,
     onselectioncontextmenu,
     onedgeclick,
     onedgecontextmenu,
-    onedgemouseenter,
+    onedgepointerenter,
-    onedgemouseleave,
+    onedgepointerleave,
     onpaneclick,
     onpanecontextmenu,
     panOnScrollMode = PanOnScrollMode.Free,
@@ -163,8 +163,8 @@
           {store}
           {onedgeclick}
           {onedgecontextmenu}
-          {onedgemouseenter}
+          {onedgepointerenter}
-          {onedgemouseleave}
+          {onedgepointerleave}
         />
         <ConnectionLine
           {store}
@@ -180,9 +180,9 @@
           {nodeClickDistance}
           {onnodeclick}
           {onnodecontextmenu}
-          {onnodemouseenter}
+          {onnodepointerenter}
-          {onnodemousemove}
+          {onnodepointermove}
-          {onnodemouseleave}
+          {onnodepointerleave}
           {onnodedrag}
           {onnodedragstart}
           {onnodedragstop}

packages/svelte/src/lib/types/events.ts

@@ -33,24 +33,24 @@ export type NodeEvents = {
   onnodedrag?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
   onnodedragstart?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
   onnodedragstop?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
-  onnodemouseenter?: NodeEventWithPointer;
+  onnodepointerenter?: NodeEventWithPointer;
-  onnodemouseleave?: NodeEventWithPointer;
+  onnodepointerleave?: NodeEventWithPointer;
-  onnodemousemove?: NodeEventWithPointer;
+  onnodepointermove?: NodeEventWithPointer;
 };
 
 export type NodeSelectionEvents = {
-  onselectioncontextmenu?: NodesEventWithPointer;
+  onselectioncontextmenu?: NodesEventWithPointer<MouseEvent>;
-  onselectionclick?: NodesEventWithPointer;
+  onselectionclick?: NodesEventWithPointer<MouseEvent>;
 };
 
 export type PaneEvents = {
-  onpaneclick?: ({ event }: { event: PointerEvent }) => void;
+  onpaneclick?: ({ event }: { event: MouseEvent }) => void;
   onpanecontextmenu?: ({ event }: { event: MouseEvent }) => void;
 };
 
 export type EdgeEvents = {
-  onedgeclick?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
+  onedgeclick?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
-  onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
+  onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
-  onedgemouseenter?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
+  onedgepointerenter?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
-  onedgemouseleave?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
+  onedgepointerleave?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
 };