diff --git a/packages/vue-flow/src/types/hooks.ts b/packages/vue-flow/src/types/hooks.ts index 691f18ed..619140a7 100644 --- a/packages/vue-flow/src/types/hooks.ts +++ b/packages/vue-flow/src/types/hooks.ts @@ -145,3 +145,29 @@ export interface Emits { (event: 'update:nodes', value: GraphNode[]): void (event: 'update:edges', value: GraphEdge[]): void } + +/** + * To type `Args` (the event callback arguments) pass an array as argument list as first generic type + * To type `Return` (the event callback return value) pass a value to the second generic type + */ +export type CustomEvent = (...args: Args) => Return + +export interface DefaultNodeEvents { + doubleClick: NodeMouseEvent + click: NodeMouseEvent + mouseEnter: NodeMouseEvent + mouseMove: NodeMouseEvent + mouseLeave: NodeMouseEvent + contextMenu: NodeMouseEvent + dragStart: NodeDragEvent + drag: NodeDragEvent + dragStop: NodeDragEvent +} + +export type NodeEventsOn = Readonly<{ + [key in keyof DefaultNodeEvents]: EventHookOn +}> + +export type NodeEvents> = { + [key in keyof DefaultNodeEvents]: (event: DefaultNodeEvents[key]) => void +} & CustomEvents diff --git a/packages/vue-flow/src/types/node.ts b/packages/vue-flow/src/types/node.ts index 43c04af9..1ec24173 100644 --- a/packages/vue-flow/src/types/node.ts +++ b/packages/vue-flow/src/types/node.ts @@ -2,6 +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"; /** Defined as [[x-from, y-from], [x-to, y-to]] **/ export type CoordinateExtent = [[number, number], [number, number]] @@ -16,7 +17,7 @@ type WidthFunc = (node: GraphNode) => number | string // eslint-disable-next-line no-use-before-define type HeightFunc = (node: GraphNode) => number | string | void -export interface Node { +export interface Node = {}> { /** Unique node id */ id: string /** A node label */ @@ -70,6 +71,8 @@ export interface Node { template?: NodeComponent /** Additional data that is passed to your custom components */ data?: Data + /** contextual and custom events that are passed to your custom components */ + events?: NodeEvents } export interface GraphNode extends Node { @@ -83,13 +86,11 @@ export interface GraphNode extends Node { } /** these props are passed to node components */ -export interface NodeProps { +export interface NodeProps = {}> { /** unique node id */ id: string /** node type */ type: keyof DefaultNodeTypes | string - /** additional data of node */ - data?: Data /** is node selected */ selected: boolean /** can node be connected */ @@ -124,4 +125,9 @@ export interface NodeProps { dragHandle?: string /** node DOM-element */ nodeElement: HTMLDivElement + + /** additional data of node */ + data?: Data + /** contextual and custom events of node */ + events?: Partial }