update(types): Remove unnecessary type exports

* rename StringFunc for better understanding

package/src/types/components.ts

@@ -1,5 +1,5 @@
 import { Component, CSSProperties, DefineComponent, HTMLAttributes } from 'vue'
-import { BackgroundVariant, Dimensions, XYPosition } from './flow'
+import { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
 import { GraphNode, Node, NodeProps } from './node'
 import { EdgeProps } from './edge'
 import { FitViewParams } from './zoom'
@@ -8,15 +8,15 @@ import { FitViewParams } from './zoom'
 type GlobalComponentName = string
 
 /** Node Components can either be a component definition or a string name */
-export type NodeComponent<N = any> =
-  | Component<NodeProps<N>>
-  | DefineComponent<NodeProps<N>, any, any, any, any>
+export type NodeComponent<Data = ElementData> =
+  | 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<E = any> =
-  | Component<EdgeProps<E>>
-  | DefineComponent<EdgeProps<E>, any, any, any, any, any>
+export type EdgeComponent<Data = ElementData> =
+  | Component<EdgeProps<Data>>
+  | DefineComponent<EdgeProps<Data>, any, any, any, any, any>
   | GlobalComponentName
 
 export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step' | 'simplebezier']: EdgeComponent }
@@ -62,16 +62,20 @@ export interface ControlEvents {
 }
 
 /** expects a node and returns a color value */
-export type StringFunc<N = any> = (node: Node<N> | GraphNode<N>) => string
+export type MiniMapNodeFunc<Data = any> = (node: Node<Data> | GraphNode<Data>) => string
+// hack for vue-type imports
+type MiniMapNodeFunc2<Data = any> = (node: Node<Data> | GraphNode<Data>) => string
+type MiniMapNodeFunc3<Data = any> = (node: Node<Data> | GraphNode<Data>) => string
+
 export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
 
-export interface MiniMapProps<N = any> {
+export interface MiniMapProps<Data = any> {
   /** Node color, can be either a string or a string func that receives the current node */
-  nodeColor?: string | (<NC = N>(node: Node<NC> | GraphNode<NC>) => string)
+  nodeColor?: string | MiniMapNodeFunc<Data>
   /** Node stroke color, can be either a string or a string func that receives the current node */
-  nodeStrokeColor?: string | (<NSC = N>(node: Node<NSC> | GraphNode<NSC>) => string)
+  nodeStrokeColor?: string | MiniMapNodeFunc2<Data>
   /** Additional node class name, can be either a string or a string func that receives the current node */
-  nodeClassName?: string | (<NCM = N>(node: Node<NCM> | GraphNode<NCM>) => string)
+  nodeClassName?: string | MiniMapNodeFunc3<Data>
   /** Node border radius */
   nodeBorderRadius?: number
   /** Node stroke width */

package/src/types/edge.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'vue'
-import { Position, Element } from './flow'
+import { Position, Element, ElementData } from './flow'
 import { GraphNode } from './node'
 
 /** Edge markers */
@@ -41,7 +41,7 @@ export interface MarkerProps {
 
 export type EdgeMarkerType = string | MarkerType | EdgeMarker
 
-export interface Edge<T = any> extends Element<T> {
+export interface Edge<Data = ElementData> extends Element<Data> {
   /** Source node id */
   source: string
   /** Target node id */
@@ -89,18 +89,18 @@ export interface EdgePositions {
 }
 
 /** Internal edge type */
-export type GraphEdge<T = any, N = T> = Edge<T> & {
-  sourceNode: GraphNode<N>
-  targetNode: GraphNode<N>
+export type GraphEdge<Data = ElementData, SourceNodeData = any, TargetNodeData = SourceNodeData> = Edge<Data> & {
+  sourceNode: GraphNode<SourceNodeData>
+  targetNode: GraphNode<TargetNodeData>
   selected?: boolean
   z?: number
 } & EdgePositions
 
 /** these props are passed to edge components */
-export interface EdgeProps<Data = any> {
+export interface EdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeData = SourceNodeData> {
   id: string
-  sourceNode: GraphNode
-  targetNode: GraphNode
+  sourceNode: GraphNode<SourceNodeData>
+  targetNode: GraphNode<TargetNodeData>
   label?:
     | string
     | {
@@ -136,10 +136,11 @@ export interface EdgeProps<Data = any> {
 }
 
 /** these props are passed to smooth step edges */
-export interface SmoothStepEdgeProps<Data = any> extends EdgeProps<Data> {
+export interface SmoothStepEdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeData = SourceNodeData>
+  extends EdgeProps<Data> {
   id: string
-  sourceNode: GraphNode
-  targetNode: GraphNode
+  sourceNode: GraphNode<SourceNodeData>
+  targetNode: GraphNode<TargetNodeData>
   label?:
     | string
     | {

package/src/types/flow.ts

@@ -5,15 +5,17 @@ import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
 import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
 
-/** an internal element  */
-export type FlowElement<Data = any> = GraphNode<Data> | GraphEdge<Data>
-export type FlowElements<N = any, E = N> = (FlowElement<N> | FlowElement<E>)[]
+export type ElementData = Record<any, any>
 
-type ClassFunc<Data = any> = (element: FlowElement<Data>) => string
-type StyleFunc<Data = any> = (element: FlowElement<Data>) => CSSProperties
+/** an internal element  */
+export type FlowElement<NodeData = ElementData, EdgeData = ElementData> = GraphNode<NodeData> | GraphEdge<EdgeData>
+export type FlowElements<NodeData = ElementData, EdgeData = ElementData> = (FlowElement<NodeData> | FlowElement<EdgeData>)[]
+
+export type ClassFunc<Data = ElementData> = (element: FlowElement<Data>) => string
+export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => CSSProperties
 
 /** base element props */
-export interface Element<Data = any> {
+export interface Element<Data extends ElementData = ElementData> {
   id: string
   label?:
     | string
@@ -23,11 +25,11 @@ export interface Element<Data = any> {
       }
   type?: string
   data?: Data
-  class?: string | ClassFunc
-  style?: CSSProperties | StyleFunc
+  class?: string | ClassFunc<Data>
+  style?: CSSProperties | StyleFunc<Data>
   hidden?: boolean
 }
-export type Elements<N = any, E = any> = (Node<N> | Edge<E>)[]
+export type Elements<NodeData = ElementData, EdgeData = ElementData> = (Node<NodeData> | Edge<EdgeData>)[]
 
 /** Transform x, y, z */
 export type Transform = [number, number, number]
@@ -72,27 +74,27 @@ export interface SelectionRect extends Rect {
   draw: boolean
 }
 
-export type FlowExportObject<N = any, E = N> = {
-  nodes: GraphNode<N>[]
-  edges: GraphEdge<E>[]
+export type FlowExportObject<NodeData = ElementData, EdgeData = ElementData> = {
+  nodes: GraphNode<NodeData>[]
+  edges: GraphEdge<EdgeData>[]
   position: [number, number]
   zoom: number
 }
 
-export type ToObject<N = any, E = N> = () => FlowExportObject<N, E>
+export type ToObject<NodeData = ElementData, EdgeData = ElementData> = () => FlowExportObject<NodeData, EdgeData>
 
-export type FlowInstance<N = any, E = N> = {
-  getElements: () => FlowElements<N, E>
-  getNodes: () => GraphNode<N>[]
-  getEdges: () => GraphEdge<E>[]
-  toObject: ToObject<N, E>
+export type FlowInstance<NodeData = ElementData, EdgeData = ElementData> = {
+  getElements: () => FlowElements<NodeData, EdgeData>
+  getNodes: () => GraphNode<NodeData>[]
+  getEdges: () => GraphEdge<EdgeData>[]
+  toObject: ToObject<NodeData, EdgeData>
 } & UseZoomPanHelper
 
-export interface FlowProps<N = any, E = N> {
+export interface FlowProps<NodeData = ElementData, EdgeData = ElementData> {
   id?: string
-  modelValue?: Elements<N, E>
-  nodes?: Node<N>[]
-  edges?: Edge<E>[]
+  modelValue?: Elements<NodeData, EdgeData>
+  nodes?: Node<NodeData>[]
+  edges?: Edge<EdgeData>[]
   /** either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">) */
   edgeTypes?: { [key in keyof DefaultEdgeTypes]?: EdgeComponent } & { [key: string]: EdgeComponent }
   /** either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">) */
@@ -142,4 +144,4 @@ export interface FlowProps<N = any, E = N> {
   defaultEdgeOptions?: DefaultEdgeOptions
 }
 
-export type FlowOptions<N = any, E = N> = FlowProps<N, E>
+export type FlowOptions<NodeData = ElementData, EdgeData = ElementData> = FlowProps<NodeData, EdgeData>

package/src/types/hooks.ts

@@ -1,60 +1,58 @@
 import { EventHook, EventHookOn } from '@vueuse/core'
 import { MouseTouchEvent } from '@braks/revue-draggable'
 import { D3ZoomEvent } from 'd3-zoom'
-import { FlowInstance } from './flow'
+import { ElementData, FlowInstance } from './flow'
 import { GraphEdge } from './edge'
 import { GraphNode } from './node'
 import { Connection, OnConnectStartParams } from './connection'
 import { FlowTransform } from './zoom'
 import { EdgeChange, NodeChange } from './changes'
 
-export interface FlowEvents<N = any, E = N> {
+export interface FlowEvents<NodeData = ElementData, EdgeData = ElementData> {
   nodesChange: NodeChange[]
   edgesChange: EdgeChange[]
-  nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode<N> }
-  nodeClick: { event: MouseTouchEvent; node: GraphNode<N> }
-  nodeMouseEnter: { event: MouseEvent; node: GraphNode<N> }
-  nodeMouseMove: { event: MouseEvent; node: GraphNode<N> }
-  nodeMouseLeave: { event: MouseEvent; node: GraphNode<N> }
-  nodeContextMenu: { event: MouseEvent; node: GraphNode<N> }
-  nodeDragStart: { event: MouseTouchEvent; node: GraphNode<N> }
-  nodeDrag: { event: MouseTouchEvent; node: GraphNode<N> }
-  nodeDragStop: { event: MouseTouchEvent; node: GraphNode<N> }
+  nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
+  nodeClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
+  nodeMouseEnter: { event: MouseEvent; node: GraphNode<NodeData> }
+  nodeMouseMove: { event: MouseEvent; node: GraphNode<NodeData> }
+  nodeMouseLeave: { event: MouseEvent; node: GraphNode<NodeData> }
+  nodeContextMenu: { event: MouseEvent; node: GraphNode<NodeData> }
+  nodeDragStart: { event: MouseTouchEvent; node: GraphNode<NodeData> }
+  nodeDrag: { event: MouseTouchEvent; node: GraphNode<NodeData> }
+  nodeDragStop: { event: MouseTouchEvent; node: GraphNode<NodeData> }
   connect: Connection
   connectStart: {
     event: MouseEvent
   } & OnConnectStartParams
   connectStop: MouseEvent
   connectEnd: MouseEvent
-  paneReady: FlowInstance<N, E>
+  paneReady: FlowInstance<NodeData, EdgeData>
   move: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }
   moveStart: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }
   moveEnd: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }
-  selectionDragStart: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
-  selectionDrag: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
-  selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
-  selectionContextMenu: { event: MouseEvent; nodes: GraphNode<N>[] }
+  selectionDragStart: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
+  selectionDrag: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
+  selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
+  selectionContextMenu: { event: MouseEvent; nodes: GraphNode<NodeData>[] }
   paneScroll: WheelEvent | undefined
   paneClick: MouseEvent
   paneContextMenu: MouseEvent
-  edgeContextMenu: { event: MouseEvent; edge: GraphEdge<E> }
-  edgeMouseEnter: { event: MouseEvent; edge: GraphEdge<E> }
-  edgeMouseMove: { event: MouseEvent; edge: GraphEdge<E> }
-  edgeMouseLeave: { event: MouseEvent; edge: GraphEdge<E> }
-  edgeDoubleClick: { event: MouseEvent; edge: GraphEdge<E> }
-  edgeClick: { event: MouseEvent; edge: GraphEdge<E> }
-  edgeUpdateStart: { event: MouseEvent; edge: GraphEdge<E> }
-  edgeUpdate: { edge: GraphEdge<E>; connection: Connection }
-  edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeContextMenu: { event: MouseEvent; edge: GraphEdge<EdgeData> }
+  edgeMouseEnter: { event: MouseEvent; edge: GraphEdge<EdgeData> }
+  edgeMouseMove: { event: MouseEvent; edge: GraphEdge<EdgeData> }
+  edgeMouseLeave: { event: MouseEvent; edge: GraphEdge<EdgeData> }
+  edgeDoubleClick: { event: MouseEvent; edge: GraphEdge<EdgeData> }
+  edgeClick: { event: MouseEvent; edge: GraphEdge<EdgeData> }
+  edgeUpdateStart: { event: MouseEvent; edge: GraphEdge<EdgeData> }
+  edgeUpdate: { edge: GraphEdge<EdgeData>; connection: Connection }
+  edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge<EdgeData> }
 }
 
-export type FlowEvent = FlowEvents[keyof FlowEvents]
-export type FlowHook<T extends FlowEvent = any> = EventHook<T>
-export type FlowHookOn<T extends FlowEvent = any> = EventHookOn<T>
-
-export type FlowHooks<N = any, E = N> = { [key in keyof FlowEvents<N, E>]: FlowHook<FlowEvents<N, E>[key]> }
-export type FlowHooksOn<N = any, E = N> = {
-  [key in keyof FlowEvents<N, E> as `on${Capitalize<key>}`]: FlowHookOn<FlowEvents<N, E>[key]>
+export type FlowHooks<NodeData = ElementData, EdgeData = ElementData> = {
+  [key in keyof FlowEvents<NodeData, EdgeData>]: EventHook<FlowEvents<NodeData, EdgeData>[key]>
+}
+export type FlowHooksOn<NodeData = ElementData, EdgeData = ElementData> = {
+  [key in keyof FlowEvents<NodeData, EdgeData> as `on${Capitalize<key>}`]: EventHookOn<FlowEvents<NodeData, EdgeData>[key]>
 }
 
-export type EmitFunc<T extends FlowHooks = FlowHooks> = (name: keyof T, ...args: any[]) => void
+export type EmitFunc = (name: keyof FlowHooks, ...args: FlowEvents[keyof FlowEvents][]) => void

package/src/types/node.ts

@@ -1,4 +1,4 @@
-import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions } from './flow'
+import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions, ElementData } from './flow'
 import { DefaultNodeTypes } from './components'
 import { HandleElement, ValidConnectionFunc } from './handle'
 
@@ -10,7 +10,7 @@ export type NodeHandleBounds = {
   target?: HandleElement[]
 }
 
-export interface Node<T = any> extends Element<T> {
+export interface Node<T = ElementData> extends Element<T> {
   /** node position x, y */
   position: XYPosition
   /** node type, can be a default type or a custom type */
@@ -37,7 +37,7 @@ export interface Node<T = any> extends Element<T> {
   parentNode?: string
 }
 
-export interface GraphNode<T = any> extends Node<T> {
+export interface GraphNode<T = ElementData> extends Node<T> {
   /** absolute position in relation to parent elements + z-index */
   computedPosition: XYZPosition
   handleBounds: NodeHandleBounds
@@ -49,7 +49,7 @@ export interface GraphNode<T = any> extends Node<T> {
 }
 
 /** these props are passed to node components */
-export interface NodeProps<T = any> {
+export interface NodeProps<T = ElementData> {
   id: string
   /** node DOM-element */
   nodeElement: HTMLDivElement

package/src/types/store.ts

@@ -134,11 +134,7 @@ export interface Getters<N = any, E = N> {
   getSelectedEdges: GraphEdge<E>[]
 }
 
-interface StoreBase<N = any, E = N> {
-  state: State<N, E>
-}
-
-export type Store<N = any, E = N> = StoreBase<N, E> & State<N, E> & Actions<N, E> & Getters<N, E>
+export type Store<N = any, E = N> = State<N, E> & Actions<N, E> & Getters<N, E>
 
 export type UseVueFlow<N = any, E = N> = {
   id: string