refactor(types): remove unnecessary generics

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

@@ -1,5 +1,5 @@
 import type { CSSProperties, Component, DefineComponent, SVGAttributes, VNode } from 'vue'
-import type { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
+import type { BackgroundVariant, Dimensions, XYPosition } from './flow'
 import type { GraphNode, NodeProps } from './node'
 import type { EdgeProps } from './edge'
 import type { FitViewParams } from './zoom'
@@ -8,16 +8,10 @@ import type { FitViewParams } from './zoom'
 type GlobalComponentName = string
 
 /** Node Components can either be a component definition or a string name */
-export type NodeComponent<Data = ElementData> =
+export type NodeComponent = Component<NodeProps> | DefineComponent<NodeProps, any, any, any, any> | GlobalComponentName
-  | Component<NodeProps<Data>>
-  | DefineComponent<NodeProps<Data>, any, any, any, any>
-  | GlobalComponentName
 
 /** Edge Components can either be a component definition or a string name */
-export type EdgeComponent<Data = ElementData> =
+export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, any, any, any, any, any> | GlobalComponentName
-  | Component<EdgeProps<Data>>
-  | DefineComponent<EdgeProps<Data>, any, any, any, any, any>
-  | GlobalComponentName
 
 export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step' | 'simplebezier']: EdgeComponent }
 export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: NodeComponent }
@@ -55,20 +49,20 @@ export interface ControlProps {
 }
 
 /** expects a node and returns a color value */
-export type MiniMapNodeFunc<Data = ElementData> = (node: GraphNode<Data>) => string
+export type MiniMapNodeFunc = (node: GraphNode) => string
 // hack for vue-type imports
-type MiniMapNodeFunc2<Data = ElementData> = (node: GraphNode<Data>) => string
+type MiniMapNodeFunc2 = (node: GraphNode) => string
-type MiniMapNodeFunc3<Data = ElementData> = (node: GraphNode<Data>) => string
+type MiniMapNodeFunc3 = (node: GraphNode) => string
 
 export type ShapeRendering = CSSProperties['shapeRendering']
 
-export interface MiniMapProps<Data = ElementData> {
+export interface MiniMapProps {
   /** Node color, can be either a string or a string func that receives the current node */
-  nodeColor?: string | MiniMapNodeFunc<Data>
+  nodeColor?: string | MiniMapNodeFunc
   /** Node stroke color, can be either a string or a string func that receives the current node */
-  nodeStrokeColor?: string | MiniMapNodeFunc2<Data>
+  nodeStrokeColor?: string | MiniMapNodeFunc2
   /** Additional node class name, can be either a string or a string func that receives the current node */
-  nodeClassName?: string | MiniMapNodeFunc3<Data>
+  nodeClassName?: string | MiniMapNodeFunc3
   /** Node border radius */
   nodeBorderRadius?: number
   /** Node stroke width */

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

@@ -2,6 +2,7 @@ import type { CSSProperties, Component, VNode } from 'vue'
 import type { ClassFunc, ElementData, Position, StyleFunc, Styles } from './flow'
 import type { GraphNode } from './node'
 import type { DefaultEdgeTypes, EdgeComponent, EdgeTextProps } from './components'
+import type { CustomEvent, EdgeEventsHandler, EdgeEventsOn } from "./hooks";
 
 /** Edge markers */
 export enum MarkerType {
@@ -42,7 +43,7 @@ export interface MarkerProps {
 
 export type EdgeMarkerType = string | MarkerType | EdgeMarker
 
-export interface Edge<Data = ElementData> {
+export interface Edge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> {
   /** Unique edge id */
   id: string
   /** An edge label */
@@ -82,15 +83,17 @@ export interface Edge<Data = ElementData> {
   /** Disable/enable selecting edge */
   selectable?: boolean
   /** Additional class names, can be a string or a callback returning a string (receives current flow element) */
-  class?: string | ClassFunc<GraphEdge<Data>>
+  class?: string | ClassFunc<GraphEdge<Data, CustomEvents>>
   /** Additional styles, can be an object or a callback returning an object (receives current flow element) */
-  style?: Styles | StyleFunc<GraphEdge<Data>>
+  style?: Styles | StyleFunc<GraphEdge<Data, CustomEvents>>
   /** Is edge hidden */
   hidden?: boolean
   /** Overwrites current edge type */
   template?: EdgeComponent
   /** Additional data that is passed to your custom components */
   data?: Data
+  /** contextual and custom events of edge */
+  events?: Partial<EdgeEventsHandler<CustomEvents>>
 }
 
 export type DefaultEdgeOptions = Omit<
@@ -106,7 +109,7 @@ export interface EdgePositions {
 }
 
 /** Internal edge type */
-export type GraphEdge<Data = ElementData> = Edge<Data> & {
+export type GraphEdge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> = Edge<Data, CustomEvents> & {
   selected?: boolean
   z?: number
   sourceNode: GraphNode
@@ -114,13 +117,12 @@ export type GraphEdge<Data = ElementData> = Edge<Data> & {
 } & EdgePositions
 
 /** these props are passed to edge components */
-export interface EdgeProps<Data = ElementData> {
+export interface EdgeProps<Data = ElementData, CustomEvents = {}> {
   id: string
   sourceNode: GraphNode
   targetNode: GraphNode
   label?: string | VNode | Component<EdgeTextProps> | Object
   type?: string
-  data?: Data
   style?: CSSProperties
   sourceX: number
   sourceY: number
@@ -143,16 +145,18 @@ export interface EdgeProps<Data = ElementData> {
   markerStart?: string
   markerEnd?: string
   curvature?: number
+  data?: Data
+  /** contextual and custom events of edge */
+  events?: Partial<EdgeEventsOn<CustomEvents>>
 }
 
 /** these props are passed to smooth step edges */
-export interface SmoothStepEdgeProps<Data = ElementData> extends EdgeProps<Data> {
+export interface SmoothStepEdgeProps<Data = ElementData, CustomEvents = {}> extends EdgeProps<Data, CustomEvents> {
   id: string
   sourceNode: GraphNode
   targetNode: GraphNode
   label?: string | VNode | Component<EdgeTextProps> | Object
   type?: string
-  data?: Data
   style?: CSSProperties
   sourceX: number
   sourceY: number
@@ -175,6 +179,9 @@ export interface SmoothStepEdgeProps<Data = ElementData> extends EdgeProps<Data>
   markerStart?: string
   markerEnd?: string
   borderRadius?: number
+  data?: Data
+  /** contextual and custom events of edge */
+  events?: Partial<EdgeEventsOn<CustomEvents>>
 }
 
 export interface BaseEdgeProps {

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

@@ -12,13 +12,9 @@ export interface NodeHandleBounds {
   target?: HandleElement[]
 }
 
-export type WidthFunc<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> = (
+export type WidthFunc = (node: GraphNode) => number | string | void
-  node: GraphNode<Data, CustomEvents>,
-) => number | string | void
 
-export type HeightFunc<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> = (
+export type HeightFunc = (node: GraphNode) => number | string | void
-  node: GraphNode<Data, CustomEvents>,
-) => number | string | void
 
 export interface Node<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> {
   /** Unique node id */
@@ -55,14 +51,14 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
    * You can pass a number which will be used in pixel values (width: 300 -> width: 300px)
    * or pass a string with units (width: `10rem` -> width: 10rem)
    */
-  width?: number | string | WidthFunc<Data, CustomEvents>
+  width?: number | string | WidthFunc
 
   /**
    * Fixed height of node, applied as style
    * You can pass a number which will be used in pixel values (height: 300 -> height: 300px)
    * or pass a string with units (height: `10rem` -> height: 10rem)
    */
-  height?: number | string | HeightFunc<Data, CustomEvents>
+  height?: number | string | HeightFunc
 
   /** Additional class names, can be a string or a callback returning a string (receives current flow element) */
   class?: string | ClassFunc<GraphNode<Data, CustomEvents>>
@@ -71,7 +67,7 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   /** Is node hidden */
   hidden?: boolean
   /** overwrites current node type */
-  template?: NodeComponent<Data>
+  template?: NodeComponent
   /** Additional data that is passed to your custom components */
   data?: Data
   /** contextual and custom events that are passed to your custom components */