Merge pull request #4195 from RedPhoenixQ/node-event-types

Svelte: Fix Node event types

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 type { Node, NodeEventMap } from '$lib/types';
-  import { createNodeEventDispatcher } from '$lib';
 
   const store = useStore();
   const { selectionRectMode, nodes } = store;
 
-  const dispatch = createEventDispatcher<{
+  const dispatch = createEventDispatcher<
-    selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
+    NodeEventMap & {
-    selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
+      selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
-  }>();
+      selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
-  const dispatchNodeEvent = createNodeEventDispatcher();
+    }
+  >();
 
   $: 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}

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;

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

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