From 72582b035fe016cc1b86cc242e0c76457ccffe77 Mon Sep 17 00:00:00 2001
From: RedPhoenixQ <steve.dark.03@gmail.com>
Date: Mon, 22 Apr 2024 18:29:07 +0200
Subject: [PATCH] Move node EventMap to types and use createEventDispatcher
 from svelte

Using createEventDispatcher from another imported function seems to
break the svelte types and thus none of the node events where typed.
---
 .../NodeSelection/NodeSelection.svelte        | 20 +++++++++----------
 .../components/NodeWrapper/NodeWrapper.svelte |  6 +++---
 packages/svelte/src/lib/types/nodes.ts        | 11 ++++++++++
 packages/svelte/src/lib/utils/index.ts        | 13 ------------
 4 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
index e648604a..08a1cd6e 100644
--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
@@ -5,17 +5,17 @@
   import { useStore } from '$lib/store';
   import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
-  import type { Node } from '$lib/types';
-  import { createNodeEventDispatcher } from '$lib';
+  import type { Node, NodeEventMap } from '$lib/types';
 
   const store = useStore();
   const { selectionRectMode, nodes } = store;
 
-  const dispatch = createEventDispatcher<{
-    selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
-    selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
-  }>();
-  const dispatchNodeEvent = createNodeEventDispatcher();
+  const dispatch = createEventDispatcher<
+    NodeEventMap & {
+      selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
+      selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
+    }
+  >();
 
   $: selectedNodes = $nodes.filter((n) => n.selected);
   $: bounds = getNodesBounds(selectedNodes);
@@ -37,13 +37,13 @@
       disabled: false,
       store,
       onDrag: (event, _, __, nodes) => {
-        dispatchNodeEvent('nodedrag', { event, targetNode: null, nodes });
+        dispatch('nodedrag', { event, targetNode: null, nodes });
       },
       onDragStart: (event, _, __, nodes) => {
-        dispatchNodeEvent('nodedragstart', { event, targetNode: null, nodes });
+        dispatch('nodedragstart', { event, targetNode: null, nodes });
       },
       onDragStop: (event, _, __, nodes) => {
-        dispatchNodeEvent('nodedragstop', { event, targetNode: null, nodes });
+        dispatch('nodedragstop', { event, targetNode: null, nodes });
       }
     }}
     on:contextmenu={onContextMenu}
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 74a30a3b..c0966ab9 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -1,7 +1,7 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import { setContext, onDestroy } from 'svelte';
+  import { setContext, onDestroy, createEventDispatcher } from 'svelte';
   import { get, writable } from 'svelte/store';
   import cc from 'classcat';
   import { errorMessages, Position } from '@xyflow/system';
@@ -11,7 +11,7 @@
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
   import type { NodeWrapperProps } from './types';
   import { getNodeInlineStyleDimensions } from './utils';
-  import { createNodeEventDispatcher } from '$lib';
+  import type { NodeEventMap } from '$lib/types';
 
   interface $$Props extends NodeWrapperProps {}
 
@@ -58,7 +58,7 @@
   let nodeRef: HTMLDivElement;
   let prevNodeRef: HTMLDivElement | null = null;
 
-  const dispatchNodeEvent = createNodeEventDispatcher();
+  const dispatchNodeEvent = createEventDispatcher<NodeEventMap>();
   const connectableStore = writable(connectable);
   let prevType: string | undefined = undefined;
   let prevSourcePosition: Position | undefined = undefined;
diff --git a/packages/svelte/src/lib/types/nodes.ts b/packages/svelte/src/lib/types/nodes.ts
index 488b306f..0e741c00 100644
--- a/packages/svelte/src/lib/types/nodes.ts
+++ b/packages/svelte/src/lib/types/nodes.ts
@@ -45,3 +45,14 @@ export type NodeTypes = Record<
 export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;
 
 export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;
+
+export type NodeEventMap = {
+  nodeclick: { node: Node; event: MouseEvent | TouchEvent };
+  nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
+  nodedrag: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
+  nodedragstart: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
+  nodedragstop: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
+  nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
+  nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
+  nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
+};
diff --git a/packages/svelte/src/lib/utils/index.ts b/packages/svelte/src/lib/utils/index.ts
index 8c9acdf3..10f205ca 100644
--- a/packages/svelte/src/lib/utils/index.ts
+++ b/packages/svelte/src/lib/utils/index.ts
@@ -1,4 +1,3 @@
-import { createEventDispatcher } from 'svelte';
 import { isNodeBase, isEdgeBase } from '@xyflow/system';
 
 import type { Edge, Node } from '$lib/types';
@@ -22,15 +21,3 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
  */
 export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
   isEdgeBase<EdgeType>(element);
-
-export const createNodeEventDispatcher = () =>
-  createEventDispatcher<{
-    nodeclick: { node: Node; event: MouseEvent | TouchEvent };
-    nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
-    nodedrag: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
-    nodedragstart: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
-    nodedragstop: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
-    nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
-    nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
-    nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
-  }>();