From c7a533bffed7bb39885cf8abdf4f9078a5ebef5d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Oct 2023 15:53:36 +0200
Subject: [PATCH] chore(svelte): fix types for event handlers

---
 .../components/EdgeWrapper/EdgeWrapper.svelte | 17 +++++++++++----
 .../src/lib/components/Handle/Handle.svelte   | 21 +++++++++++++++++--
 .../components/NodeWrapper/NodeWrapper.svelte | 12 ++++++++++-
 .../svelte/src/lib/container/Pane/Pane.svelte |  9 +++++++-
 .../src/lib/container/SvelteFlow/types.ts     | 21 -------------------
 5 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index 7d609447..8601415b 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -6,7 +6,7 @@
 
   import { useStore } from '$lib/store';
   import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
-  import type { EdgeLayouted } from '$lib/types';
+  import type { EdgeLayouted, Edge } from '$lib/types';
 
   type $$Props = EdgeLayouted;
 
@@ -39,7 +39,10 @@
   export { className as class };
 
   const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
+    edgecontextmenu: { edge: Edge; event: MouseEvent };
+  }>();
 
   $: edgeComponent = $edgeTypes[type!] || BezierEdge;
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
@@ -51,12 +54,18 @@
     }
 
     const edge = $edges.find((e) => e.id === id);
-    dispatch('edgeclick', { event, edge });
+
+    if (edge) {
+      dispatch('edgeclick', { event, edge });
+    }
   }
 
   function onContextMenu(event: MouseEvent) {
     const edge = $edges.find((e) => e.id === id);
-    dispatch('edgecontextmenu', { event, edge });
+
+    if (edge) {
+      dispatch('edgecontextmenu', { event, edge });
+    }
   }
 </script>
 
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 58d5ad02..655bcc6b 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
   import { getContext, createEventDispatcher } from 'svelte';
   import cc from 'classcat';
-  import { Position, XYHandle, isMouseEvent } from '@xyflow/system';
+  import {
+    Position,
+    XYHandle,
+    isMouseEvent,
+    type Connection,
+    type HandleType
+  } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { HandleComponentProps } from '$lib/types';
@@ -26,7 +32,18 @@
   $: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
 
   const handleId = id || null;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    connect: { connection: Connection };
+    connectstart: {
+      event: MouseEvent | TouchEvent;
+      nodeId: string | null;
+      handleId: string | null;
+      handleType: HandleType | null;
+    };
+    connectend: {
+      event: MouseEvent | TouchEvent;
+    };
+  }>();
 
   const store = useStore();
   const {
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 10906aea..df142974 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -16,6 +16,7 @@
   import { useStore } from '$lib/store';
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
   import type { NodeWrapperProps } from './types';
+  import type { Node } from '$lib/types';
 
   interface $$Props extends NodeWrapperProps {}
 
@@ -54,7 +55,16 @@
 
   const nodeComponent: ComponentType<SvelteComponent<NodeProps>> = $nodeTypes[type!] || DefaultNode;
   const selectNodesOnDrag = false;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    nodeclick: { node: Node; event: MouseEvent | TouchEvent };
+    nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
+    nodedrag: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstart: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstop: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
+    nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
+    nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
+  }>();
   const connectableStore = writable(connectable);
 
   $: {
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 6727fc44..efc365fc 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -41,7 +41,14 @@
 
   export let panOnDrag: $$Props['panOnDrag'] = undefined;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    paneclick: {
+      event: MouseEvent | TouchEvent;
+    };
+    panecontextmenu: {
+      event: MouseEvent;
+    };
+  }>();
   const {
     nodes,
     edges,
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 91f3bb70..9e59bef9 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -83,25 +83,4 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMove?: OnMove;
   onMoveEnd?: OnMoveEnd;
   onError?: OnError;
-
-  '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:edgecontextmenu'?: CustomEvent<{ event: MouseEvent; edge: Edge }>;
-  'on:connectstart'?: CustomEvent<{
-    event: MouseEvent | TouchEvent;
-    nodeId?: string;
-    handleId?: string;
-    handleType?: HandleType;
-  }>;
-  'on:connect'?: CustomEvent<{ connection: Connection }>;
-  'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
-  'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
-  'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
-  'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodecontextmenu'?: CustomEvent<{ event: MouseEvent; node: NodeBase }>;
 };