From ce6fcc7a82258a71d1d31562c13988b416437ac9 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 14 Jan 2025 13:15:40 +0100
Subject: [PATCH] Export event types and use pointer events wherever possible

---
 .../components/NodeWrapper/NodeWrapper.svelte |  6 ++--
 .../src/lib/container/SvelteFlow/types.ts     |  4 +--
 packages/svelte/src/lib/index.ts              |  1 +
 packages/svelte/src/lib/types/events.ts       | 32 +++++++++----------
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 28e5e7cf..cc07da75 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -202,9 +202,9 @@
     style:visibility={initialized ? 'visible' : 'hidden'}
     style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
     onclick={onSelectNodeHandler}
-    onmouseenter={onnodemouseenter ? (event) => onnodemouseenter({ node, event }) : undefined}
-    onmouseleave={onnodemouseleave ? (event) => onnodemouseleave({ node, event }) : undefined}
-    onmousemove={onnodemousemove ? (event) => onnodemousemove({ node, event }) : undefined}
+    onpointerenter={onnodemouseenter ? (event) => onnodemouseenter({ node, event }) : undefined}
+    onpointerleave={onnodemouseleave ? (event) => onnodemouseleave({ node, event }) : undefined}
+    onpointermove={onnodemousemove ? (event) => onnodemousemove({ node, event }) : undefined}
     oncontextmenu={onnodecontextmenu ? (event) => onnodecontextmenu({ node, event }) : undefined}
   >
     <NodeComponent
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 5f5ec9f3..6564b5d3 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -60,7 +60,7 @@ export type SvelteFlowProps = NodeEvents &
      *  }
      * ]);
      */
-    nodes: Node[];
+    nodes?: Node[];
     /** An array of edges to render in a controlled flow.
      * @example
      * const edges = $state.raw([
@@ -71,7 +71,7 @@ export type SvelteFlowProps = NodeEvents &
      *  }
      * ]);
      */
-    edges: Edge[];
+    edges?: Edge[];
     /** Custom node types to be available in a flow.
      *
      * Svelte Flow matches a node's type to a component in the nodeTypes object.
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 1e4f3202..0b2435d9 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -54,6 +54,7 @@ export type {
 export type { HandleProps, FitViewOptions } from '$lib/types/general';
 export type { Node, NodeTypes, BuiltInNode, NodeProps, InternalNode } from '$lib/types/nodes';
 export type { SvelteFlowStore } from '$lib/store/types';
+export * from '$lib/types/events';
 
 // system types
 export {
diff --git a/packages/svelte/src/lib/types/events.ts b/packages/svelte/src/lib/types/events.ts
index d4b6ea8f..84033301 100644
--- a/packages/svelte/src/lib/types/events.ts
+++ b/packages/svelte/src/lib/types/events.ts
@@ -1,38 +1,38 @@
 import type { Edge } from './edges';
 import type { Node } from './nodes';
 
-export type NodeEventWithPointer = ({
+export type NodeEventWithPointer<T = PointerEvent> = ({
   node,
   event
 }: {
   node: Node;
-  event: MouseEvent | TouchEvent;
+  event: T;
 }) => void;
 
-export type NodesEventWithPointer = ({
+export type NodesEventWithPointer<T = PointerEvent> = ({
   nodes,
   event
 }: {
   nodes: Node[];
-  event: MouseEvent | TouchEvent;
+  event: T;
 }) => void;
 
-export type NodeTargetEventWithPointer = ({
+export type NodeTargetEventWithPointer<T = PointerEvent> = ({
   targetNode,
   nodes,
   event
 }: {
   targetNode: Node | null;
   nodes: Node[];
-  event: MouseEvent | TouchEvent;
+  event: T;
 }) => void;
 
 export type NodeEvents = {
-  onnodeclick?: NodeEventWithPointer;
-  onnodecontextmenu?: NodeEventWithPointer;
-  onnodedrag?: NodeTargetEventWithPointer;
-  onnodedragstart?: NodeTargetEventWithPointer;
-  onnodedragstop?: NodeTargetEventWithPointer;
+  onnodeclick?: NodeEventWithPointer<MouseEvent | TouchEvent>;
+  onnodecontextmenu?: NodeEventWithPointer<MouseEvent>;
+  onnodedrag?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
+  onnodedragstart?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
+  onnodedragstop?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
   onnodemouseenter?: NodeEventWithPointer;
   onnodemouseleave?: NodeEventWithPointer;
   onnodemousemove?: NodeEventWithPointer;
@@ -44,13 +44,13 @@ export type NodeSelectionEvents = {
 };
 
 export type PaneEvents = {
-  onpaneclick?: ({ event }: { event: MouseEvent | TouchEvent }) => void;
+  onpaneclick?: ({ event }: { event: PointerEvent }) => void;
   onpanecontextmenu?: ({ event }: { event: MouseEvent }) => void;
 };
 
 export type EdgeEvents = {
-  onedgeclick?: ({ edge, event }: { edge: Edge; event: MouseEvent | TouchEvent }) => void;
-  onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
-  onedgemouseenter?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
-  onedgemouseleave?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
+  onedgeclick?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
+  onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
+  onedgemouseenter?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
+  onedgemouseleave?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
 };