Export event types and use pointer events wherever possible

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

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.

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 {

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;
 };