refactor(types)!: Remove generics from types except nodes, edges, elements

# What's changed?

* Superfluous generics removed from types like store, state etc. as they haven't really served a well-defined purpose

package/src/composables/useVueFlow.ts

@@ -1,5 +1,5 @@
 import { EffectScope } from 'vue'
-import { ElementData, FlowHooksOn, FlowOptions, State, UseVueFlow } from '~/types'
+import { FlowHooksOn, FlowOptions, State, UseVueFlow } from '~/types'
 import { VueFlow } from '~/context'
 import useState from '~/store/state'
 import useGetters from '~/store/getters'
@@ -73,12 +73,10 @@ export class Storage {
   }
 }
 
-type Injection<NodeData = ElementData, EdgeData = ElementData> = UseVueFlow<NodeData, EdgeData> | null | undefined
+type Injection = UseVueFlow | null | undefined
 type Scope = (EffectScope & { vueFlowId: string }) | undefined
 
-export default <NodeData = ElementData, EdgeData = ElementData>(
-  options?: Partial<FlowOptions>,
-): UseVueFlow<NodeData, EdgeData> => {
+export default (options?: Partial<FlowOptions>): UseVueFlow => {
   const storage = Storage.getInstance()
   const scope = getCurrentScope() as Scope
   const vueFlowId = scope?.vueFlowId || options?.id

package/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -10,9 +10,11 @@ const { store } = useVueFlow()
 const sourceNode = controlledComputed(
   () => store.connectionNodeId,
   () => {
-    if (store.connectionNodeId) return store.getNodes[store.getNodes.map((n) => n.id).indexOf(store.connectionNodeId)]
+    if (store.connectionNodeId) return store.getNode(store.connectionNodeId)
+    return false
   },
 )
+
 const connectionLineVisible = controlledComputed(
   () => store.connectionNodeId,
   () =>
@@ -47,7 +49,7 @@ export default {
         :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
         :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
       />
-      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode" />
+      <ConnectionLine v-if="connectionLineVisible && !!sourceNode" :source-node="sourceNode" />
     </g>
   </svg>
 </template>

package/src/types/changes.ts

@@ -27,13 +27,13 @@ export type NodeRemoveChange = {
   type: 'remove'
 }
 
-export type NodeAddChange<NodeData = ElementData> = {
-  item: Node<NodeData>
+export type NodeAddChange<Data = ElementData> = {
+  item: Node<Data>
   type: 'add'
 }
 
-export type NodeResetChange<NodeData = ElementData> = {
-  item: Node<NodeData>
+export type NodeResetChange<Data = ElementData> = {
+  item: Node<Data>
   type: 'reset'
 }
 
@@ -47,12 +47,12 @@ export type NodeChange =
 
 export type EdgeSelectionChange = NodeSelectionChange
 export type EdgeRemoveChange = NodeRemoveChange
-export type EdgeAddChange<EdgeData = ElementData> = {
-  item: Edge<EdgeData>
+export type EdgeAddChange<Data = ElementData> = {
+  item: Edge<Data>
   type: 'add'
 }
-export type EdgeResetChange<EdgeData = ElementData> = {
-  item: Edge<EdgeData>
+export type EdgeResetChange<Data = ElementData> = {
+  item: Edge<Data>
   type: 'reset'
 }
 export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange

package/src/types/connection.ts

@@ -39,7 +39,7 @@ export enum ConnectionMode {
   Loose = 'loose',
 }
 
-export interface ConnectionLineProps<N = any> {
+export interface ConnectionLineProps {
   /** Source X position of the connection line */
   sourceX: number
   /** Source Y position of the connection line */
@@ -57,9 +57,9 @@ export interface ConnectionLineProps<N = any> {
   /** extra styles */
   connectionLineStyle: CSSProperties
   /** All currently stored nodes */
-  nodes: GraphNode<N>[]
+  nodes: GraphNode[]
   /** The source node of the connection line */
-  sourceNode: GraphNode<N>
+  sourceNode: GraphNode
   /** The source handle element of the connection line */
   sourceHandle: HandleElement
 }

package/src/types/edge.ts

@@ -1,5 +1,5 @@
 import { Component, CSSProperties, VNode } from 'vue'
-import { Position, Element, ElementData } from './flow'
+import { Position, BaseElement, ElementData } from './flow'
 import { GraphNode } from './node'
 import { EdgeComponent, EdgeTextProps } from './components'
 
@@ -42,7 +42,7 @@ export interface MarkerProps {
 
 export type EdgeMarkerType = string | MarkerType | EdgeMarker
 
-export interface Edge<Data = ElementData> extends Element<Data> {
+export interface Edge<Data = ElementData> extends BaseElement<Data> {
   label?: string | VNode | Component<EdgeTextProps>
   /** Source node id */
   source: string
@@ -100,10 +100,10 @@ export type GraphEdge<Data = ElementData> = Edge<Data> & {
 } & EdgePositions
 
 /** these props are passed to edge components */
-export interface EdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeData = SourceNodeData> {
+export interface EdgeProps<Data = ElementData> {
   id: string
-  sourceNode: GraphNode<SourceNodeData>
-  targetNode: GraphNode<TargetNodeData>
+  sourceNode: GraphNode
+  targetNode: GraphNode
   label?: string | VNode | Component<EdgeTextProps> | Object
   type?: string
   data?: Data
@@ -132,11 +132,10 @@ export interface EdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeD
 }
 
 /** these props are passed to smooth step edges */
-export interface SmoothStepEdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeData = SourceNodeData>
-  extends EdgeProps<Data> {
+export interface SmoothStepEdgeProps<Data = ElementData> extends EdgeProps<Data> {
   id: string
-  sourceNode: GraphNode<SourceNodeData>
-  targetNode: GraphNode<TargetNodeData>
+  sourceNode: GraphNode
+  targetNode: GraphNode
   label?: string | VNode | Component<EdgeTextProps> | Object
   type?: string
   data?: Data

package/src/types/flow.ts

@@ -8,8 +8,8 @@ import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from
 export type ElementData = any
 
 /** 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 FlowElement<Data = ElementData> = GraphNode<Data> | GraphEdge<Data>
+export type FlowElements<Data = ElementData> = FlowElement<Data>[]
 
 export type CustomThemeVars = Record<string, string | number>
 export type CSSVars =
@@ -25,7 +25,7 @@ export type ClassFunc<Data = ElementData> = (element: FlowElement<Data>) => stri
 export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => Styles | void
 
 /** base element props */
-export interface Element<Data extends ElementData = ElementData> {
+export interface BaseElement<Data extends ElementData = ElementData> {
   id: string
   label?: string | VNode | Component
   type?: string
@@ -34,7 +34,8 @@ export interface Element<Data extends ElementData = ElementData> {
   style?: Styles | StyleFunc<Data>
   hidden?: boolean
 }
-export type Elements<NodeData = ElementData, EdgeData = ElementData> = (Node<NodeData> | Edge<EdgeData>)[]
+export type Element<Data = ElementData> = Node<Data> | Edge<Data>
+export type Elements<Data = ElementData> = Element<Data>[]
 
 /** Handle Positions */
 export enum Position {
@@ -92,11 +93,11 @@ interface Exports {
 
 export type FlowInstance = Exports & ViewportFuncs
 
-export interface FlowProps<NodeData = ElementData, EdgeData = ElementData> {
+export interface FlowProps {
   id?: string
-  modelValue?: Elements<NodeData, EdgeData>
-  nodes?: Node<NodeData>[]
-  edges?: Edge<EdgeData>[]
+  modelValue?: Elements
+  nodes?: Node[]
+  edges?: Edge[]
   /** 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">) */
@@ -146,4 +147,4 @@ export interface FlowProps<NodeData = ElementData, EdgeData = ElementData> {
   defaultEdgeOptions?: DefaultEdgeOptions
 }
 
-export type FlowOptions<NodeData = ElementData, EdgeData = ElementData> = FlowProps<NodeData, EdgeData>
+export type FlowOptions = FlowProps

package/src/types/hooks.ts

@@ -1,27 +1,27 @@
 import { EventHook, EventHookOn } from '@vueuse/core'
 import { MouseTouchEvent } from '@braks/revue-draggable'
 import { D3ZoomEvent } from 'd3-zoom'
-import { ElementData, FlowInstance } from './flow'
+import { 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<NodeData = ElementData, EdgeData = ElementData> {
+export interface FlowEvents {
   nodesChange: NodeChange[]
   edgesChange: EdgeChange[]
-  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> }
-  miniMapNodeClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
-  miniMapNodeDoubleClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
+  nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode }
+  nodeClick: { event: MouseTouchEvent; node: GraphNode }
+  nodeMouseEnter: { event: MouseEvent; node: GraphNode }
+  nodeMouseMove: { event: MouseEvent; node: GraphNode }
+  nodeMouseLeave: { event: MouseEvent; node: GraphNode }
+  nodeContextMenu: { event: MouseEvent; node: GraphNode }
+  nodeDragStart: { event: MouseTouchEvent; node: GraphNode }
+  nodeDrag: { event: MouseTouchEvent; node: GraphNode }
+  nodeDragStop: { event: MouseTouchEvent; node: GraphNode }
+  miniMapNodeClick: { event: MouseTouchEvent; node: GraphNode }
+  miniMapNodeDoubleClick: { event: MouseTouchEvent; node: GraphNode }
   connect: Connection
   connectStart: {
     event: MouseEvent
@@ -32,29 +32,29 @@ export interface FlowEvents<NodeData = ElementData, EdgeData = ElementData> {
   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<NodeData>[] }
-  selectionDrag: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
-  selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
-  selectionContextMenu: { event: MouseEvent; nodes: GraphNode<NodeData>[] }
+  selectionDragStart: { event: MouseTouchEvent; nodes: GraphNode[] }
+  selectionDrag: { event: MouseTouchEvent; nodes: GraphNode[] }
+  selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode[] }
+  selectionContextMenu: { event: MouseEvent; nodes: GraphNode[] }
   paneScroll: WheelEvent | undefined
   paneClick: MouseEvent
   paneContextMenu: MouseEvent
-  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> }
+  edgeContextMenu: { event: MouseEvent; edge: GraphEdge }
+  edgeMouseEnter: { event: MouseEvent; edge: GraphEdge }
+  edgeMouseMove: { event: MouseEvent; edge: GraphEdge }
+  edgeMouseLeave: { event: MouseEvent; edge: GraphEdge }
+  edgeDoubleClick: { event: MouseEvent; edge: GraphEdge }
+  edgeClick: { event: MouseEvent; edge: GraphEdge }
+  edgeUpdateStart: { event: MouseEvent; edge: GraphEdge }
+  edgeUpdate: { edge: GraphEdge; connection: Connection }
+  edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge }
 }
 
-export type FlowHooks<NodeData = ElementData, EdgeData = ElementData> = {
-  [key in keyof FlowEvents<NodeData, EdgeData>]: EventHook<FlowEvents<NodeData, EdgeData>[key]>
+export type FlowHooks = {
+  [key in keyof FlowEvents]: EventHook<FlowEvents[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 FlowHooksOn = {
+  [key in keyof FlowEvents as `on${Capitalize<key>}`]: EventHookOn<FlowEvents[key]>
 }
 
 export type EmitFunc = (name: keyof FlowHooks, ...args: FlowEvents[keyof FlowEvents][]) => void

package/src/types/node.ts

@@ -1,5 +1,5 @@
 import { Component, VNode } from 'vue'
-import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions, ElementData } from './flow'
+import { XYPosition, Position, SnapGrid, BaseElement, XYZPosition, Dimensions, ElementData } from './flow'
 import { DefaultNodeTypes, NodeComponent } from './components'
 import { HandleElement, ValidConnectionFunc } from './handle'
 
@@ -16,7 +16,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> extends Element<Data> {
+export interface Node<Data = ElementData> extends BaseElement<Data> {
   /** initial node position x, y */
   position: XYPosition
   /** node type, can be a default type or a custom type */

package/src/types/store.ts

@@ -9,16 +9,15 @@ import { FlowHooks, FlowHooksOn } from './hooks'
 import { NodeChange, EdgeChange } from './changes'
 import { StartHandle, HandleType } from './handle'
 
-export interface State<NodeData = ElementData, EdgeData = ElementData>
-  extends Omit<FlowOptions<NodeData, EdgeData>, 'id' | 'modelValue'> {
+export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   /** Event hooks, you can manipulate the triggers on your own peril */
-  hooks: FlowHooks<NodeData, EdgeData>
+  hooks: FlowHooks
   instance: FlowInstance | null
 
   /** all stored nodes */
-  nodes: GraphNode<NodeData>[]
+  nodes: GraphNode[]
   /** all stored edges */
-  edges: GraphEdge<EdgeData>[]
+  edges: GraphEdge[]
 
   d3Zoom: D3Zoom | null
   d3Selection: D3Selection | null
@@ -94,29 +93,24 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
   vueFlowVersion: string
 }
 
-export interface Actions<NodeData = ElementData, EdgeData = ElementData> {
+export interface Actions {
   /** parses elements (nodes + edges) and re-sets the state */
-  setElements: (
-    elements: Elements<NodeData, EdgeData> | ((elements: FlowElements<NodeData, EdgeData>) => Elements<NodeData>),
-    extent?: CoordinateExtent,
-  ) => void
+  setElements: (elements: Elements | ((elements: FlowElements) => Elements), extent?: CoordinateExtent) => void
   /** parses nodes and re-sets the state */
-  setNodes: (nodes: Node<NodeData>[] | ((nodes: GraphNode<NodeData>[]) => Node<NodeData>[]), extent?: CoordinateExtent) => void
+  setNodes: (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void
   /** parses edges and re-sets the state */
-  setEdges: (edges: Edge<EdgeData>[] | ((edges: GraphEdge<EdgeData>[]) => Edge<EdgeData>[])) => void
+  setEdges: (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void
   /** parses nodes and adds to state */
-  addNodes: <NA = NodeData>(nodes: Node<NA>[] | ((nodes: GraphNode<NA>[]) => Node<NA>[]), extent?: CoordinateExtent) => void
+  addNodes: (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void
   /** parses edges and adds to state */
-  addEdges: <EA = EdgeData>(
-    edgesOrConnections: (Edge<EA> | Connection)[] | ((edges: GraphEdge<EA>[]) => (Edge<EA> | Connection)[]),
-  ) => void
+  addEdges: (edgesOrConnections: (Edge | Connection)[] | ((edges: GraphEdge[]) => (Edge | Connection)[])) => void
   /** updates an edge */
-  updateEdge: <EU = EdgeData>(oldEdge: GraphEdge<EU>, newConnection: Connection) => GraphEdge | false
-  applyEdgeChanges: <ED = EdgeData>(changes: EdgeChange[]) => GraphEdge<ED>[]
-  applyNodeChanges: <ND = NodeData>(changes: NodeChange[]) => GraphNode<ND>[]
-  addSelectedElements: (elements: FlowElements<NodeData, EdgeData>) => void
-  addSelectedEdges: (edges: GraphEdge<EdgeData>[]) => void
-  addSelectedNodes: (nodes: GraphNode<NodeData>[]) => void
+  updateEdge: (oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false
+  applyEdgeChanges: (changes: EdgeChange[]) => GraphEdge[]
+  applyNodeChanges: (changes: NodeChange[]) => GraphNode[]
+  addSelectedElements: (elements: FlowElements) => void
+  addSelectedEdges: (edges: GraphEdge[]) => void
+  addSelectedNodes: (nodes: GraphNode[]) => void
   setMinZoom: (zoom: number) => void
   setMaxZoom: (zoom: number) => void
   setTranslateExtent: (translateExtent: CoordinateExtent) => void
@@ -124,10 +118,8 @@ export interface Actions<NodeData = ElementData, EdgeData = ElementData> {
   setInteractive: (isInteractive: boolean) => void
   setState: (
     state:
-      | Partial<FlowOptions<NodeData, EdgeData> & Omit<State, 'nodes' | 'edges' | 'modelValue'>>
-      | ((
-          state: State<NodeData, EdgeData>,
-        ) => Partial<FlowOptions<NodeData, EdgeData> & Omit<State, 'nodes' | 'edges' | 'modelValue'>>),
+      | Partial<FlowOptions & Omit<State, 'nodes' | 'edges' | 'modelValue'>>
+      | ((state: State) => Partial<FlowOptions & Omit<State, 'nodes' | 'edges' | 'modelValue'>>),
   ) => void
 
   updateNodePosition: ({ id, diff, dragging }: { id?: string; diff?: XYPosition; dragging?: boolean }) => void
@@ -141,32 +133,30 @@ export interface Actions<NodeData = ElementData, EdgeData = ElementData> {
   $reset: () => void
 }
 
-export interface Getters<NodeData = ElementData, EdgeData = ElementData> {
+export interface Getters {
   getEdgeTypes: Record<keyof DefaultEdgeTypes | string, EdgeComponent>
   getNodeTypes: Record<keyof DefaultNodeTypes | string, NodeComponent>
   /** filters hidden nodes */
-  getNodes: GraphNode<NodeData>[]
+  getNodes: GraphNode[]
   /** filters hidden edges */
-  getEdges: GraphEdge<EdgeData>[]
-  getNode: (id: string) => GraphNode<NodeData> | undefined
-  getEdge: (id: string) => GraphEdge<EdgeData> | undefined
-  getSelectedElements: FlowElements<NodeData, EdgeData>
-  getSelectedNodes: GraphNode<NodeData>[]
-  getSelectedEdges: GraphEdge<EdgeData>[]
+  getEdges: GraphEdge[]
+  getNode: <Data = ElementData>(id: string) => GraphNode<Data> | undefined
+  getEdge: <Data = ElementData>(id: string) => GraphEdge<Data> | undefined
+  getSelectedElements: FlowElements
+  getSelectedNodes: GraphNode[]
+  getSelectedEdges: GraphEdge[]
 }
 
-export type ComputedGetters<NodeData = ElementData, EdgeData = ElementData> = {
-  [key in keyof Getters<NodeData, EdgeData>]: ComputedRef<Getters<NodeData, EdgeData>[key]>
+export type ComputedGetters = {
+  [key in keyof Getters]: ComputedRef<Getters[key]>
 }
 
-export type Store<NodeData = ElementData, EdgeData = ElementData> = State<NodeData, EdgeData> &
-  Actions<NodeData, EdgeData> &
-  Getters<NodeData, EdgeData>
+export type Store = State & Actions & Getters
 
-export type UseVueFlow<NodeData = ElementData, EdgeData = ElementData> = {
+export type UseVueFlow = {
   id: string
-  store: Store<NodeData, EdgeData>
-} & FlowHooksOn<NodeData, EdgeData> &
-  ToRefs<State<NodeData, EdgeData>> &
-  ComputedGetters<NodeData, EdgeData> &
-  Actions<NodeData, EdgeData>
+  store: Store
+} & FlowHooksOn &
+  ToRefs<State> &
+  ComputedGetters &
+  Actions