feat(nodes,types): update node event types

# What's changed?

* accept initial event handlers as `NodeEventHandlers`
* pass contextual events (custom component) as `NodeEventsOn` Type
* forward custom node events as is (not an event hook)

packages/vue-flow/src/types/hooks.ts

@@ -152,22 +152,26 @@ export interface Emits {
  */
 export type CustomEvent<Args extends any[] = any[], Return = any> = (...args: Args) => Return
 
-export interface DefaultNodeEvents {
+type CustomEventHandlers<CustomEvents = {}> = {
-  doubleClick: NodeMouseEvent
+  [key in keyof CustomEvents]: CustomEvents[key]
-  click: NodeMouseEvent
-  mouseEnter: NodeMouseEvent
-  mouseMove: NodeMouseEvent
-  mouseLeave: NodeMouseEvent
-  contextMenu: NodeMouseEvent
-  dragStart: NodeDragEvent
-  drag: NodeDragEvent
-  dragStop: NodeDragEvent
 }
 
-export type NodeEventsOn = Readonly<{
+export type NodeEventsHandler<CustomEvents = {}> = {
-  [key in keyof DefaultNodeEvents]: EventHookOn<DefaultNodeEvents[key]>
+  doubleClick: (event: NodeMouseEvent) => any
-}>
+  click: (event: NodeMouseEvent) => any
+  mouseEnter: (event: NodeMouseEvent) => any
+  mouseMove: (event: NodeMouseEvent) => any
+  mouseLeave: (event: NodeMouseEvent) => any
+  contextMenu: (event: NodeMouseEvent) => any
+  dragStart: (event: NodeDragEvent) => any
+  drag: (event: NodeDragEvent) => any
+  dragStop: (event: NodeDragEvent) => any
+} & CustomEventHandlers<CustomEvents>
 
-export type NodeEvents<CustomEvents extends Record<string, CustomEvent>> = {
+export type NodeEventsOn<CustomEvents = {}> = {
-  [key in keyof DefaultNodeEvents]: (event: DefaultNodeEvents[key]) => void
+  [key in keyof NodeEventsHandler]: EventHookOn<NodeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
-} & CustomEvents
+} & CustomEventHandlers<CustomEvents>
+
+export type NodeEventsEmit<CustomEvents = {}> = {
+  [key in keyof NodeEventsHandler]: EventHookTrigger<NodeEventsHandler[key] extends (event: infer Event) => any ? Event : never>
+} & CustomEventHandlers<CustomEvents>

packages/vue-flow/src/types/node.ts

@@ -2,7 +2,7 @@ import type { Component, VNode } from 'vue'
 import type { ClassFunc, Dimensions, ElementData, Position, SnapGrid, StyleFunc, Styles, XYPosition, XYZPosition } from './flow'
 import type { DefaultNodeTypes, NodeComponent } from './components'
 import type { HandleElement, ValidConnectionFunc } from './handle'
-import type { CustomEvent, NodeEvents, NodeEventsOn } from "./hooks";
+import type { CustomEvent, NodeEventsHandler, NodeEventsOn } from './hooks'
 
 /** Defined as [[x-from, y-from], [x-to, y-to]] **/
 export type CoordinateExtent = [[number, number], [number, number]]
@@ -17,7 +17,7 @@ type WidthFunc = <Data = ElementData>(node: GraphNode<Data>) => number | string
 // eslint-disable-next-line no-use-before-define
 type HeightFunc = <Data = ElementData>(node: GraphNode<Data>) => number | string | void
 
-export interface Node<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = {}> {
+export interface Node<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> {
   /** Unique node id */
   id: string
   /** A node label */
@@ -72,7 +72,7 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   /** Additional data that is passed to your custom components */
   data?: Data
   /** contextual and custom events that are passed to your custom components */
-  events?: NodeEvents<CustomEvents>
+  events?: Partial<NodeEventsHandler<CustomEvents>>
 }
 
 export interface GraphNode<Data = ElementData> extends Node<Data> {
@@ -86,7 +86,7 @@ export interface GraphNode<Data = ElementData> extends Node<Data> {
 }
 
 /** these props are passed to node components */
-export interface NodeProps<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = {}> {
+export interface NodeProps<Data = ElementData, CustomEvents = {}> {
   /** unique node id */
   id: string
   /** node type */
@@ -129,5 +129,5 @@ export interface NodeProps<Data = ElementData, CustomEvents extends Record<strin
   /** additional data of node */
   data?: Data
   /** contextual and custom events of node */
-  events?: Partial<NodeEventsOn>
+  events?: Partial<NodeEventsOn<CustomEvents>>
 }