update(types): Remove unnecessary type exports

* rename StringFunc for better understanding

examples/src/Basic/Basic.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow/src/index'
+import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
 import ResizableNode from './ResizableNode.vue'
 
 const elements = ref<Elements>([
@@ -9,21 +9,13 @@ const elements = ref<Elements>([
     type: 'resize',
     label: 'Node 2',
     position: { x: 100, y: 100 },
-    data: { foo: 'bar' },
-    class: (el) => {
-      return ''
-    },
   },
   { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
   { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow({
+const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow()
-  defaultZoom: 1.5,
-  minZoom: 0.2,
-  maxZoom: 4,
-})
 onPaneReady(({ fitView }) => {
   fitView()
 })
@@ -45,7 +37,7 @@ const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
 <template>
-  <VueFlow v-model="elements" class="vue-flow-basic-example">
+  <VueFlow v-model="elements" class="vue-flow-basic-example" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
     <template #node-resize="props">
       <ResizableNode v-bind="props" />
     </template>

package/src/additional-components/MiniMap/MiniMap.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ShapeRendering, StringFunc } from '../../types'
+import { ShapeRendering, MiniMapNodeFunc } from '../../types'
 import { useVueFlow, useWindow } from '../../composables'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import type { MiniMapProps } from '../../types/components'
@@ -24,11 +24,11 @@ const { store } = useVueFlow()
 
 const elementWidth = attrs.style?.width ?? defaultWidth
 const elementHeight = attrs.style?.height ?? defaultHeight
-const nodeColorFunc: StringFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
+const nodeColorFunc: MiniMapNodeFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
-const nodeStrokeColorFunc: StringFunc =
+const nodeStrokeColorFunc: MiniMapNodeFunc =
   props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
 
-const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
+const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as MiniMapNodeFunc
 
 const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 

package/src/store/hooks.ts

@@ -1,4 +1,4 @@
-import { EmitFunc, FlowHooks, FlowEvents } from '~/types'
+import { EmitFunc, FlowHooks } from '~/types'
 
 // flow event hooks
 export const createHooks = (): FlowHooks => ({
@@ -41,7 +41,7 @@ export const createHooks = (): FlowHooks => ({
 
 const bind = (emit: EmitFunc, hooks: FlowHooks) => {
   for (const [key, value] of Object.entries(hooks)) {
-    value.on((data: FlowEvents[keyof FlowHooks]) => {
+    value.on((data) => {
       emit(key as keyof FlowHooks, data)
     })
   }

package/src/store/store.ts

@@ -1,7 +1,7 @@
 import useState from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowHook, FlowHooksOn, FlowOptions, Store, State } from '~/types'
+import { FlowHooksOn, FlowOptions, Store, State } from '~/types'
 
 export default (preloadedState?: FlowOptions): Store => {
   const state: State = useState(preloadedState)
@@ -10,8 +10,8 @@ export default (preloadedState?: FlowOptions): Store => {
   const actions = useActions(reactiveState, getters)
   const hooksOn: FlowHooksOn = <any>{}
   Object.entries(reactiveState.hooks).forEach(([n, h]) => {
-    const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}`
+    const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}` as keyof FlowHooksOn
-    hooksOn[<keyof FlowHooksOn>name] = h.on as FlowHook['on']
+    hooksOn[name] = h.on as any
   })
   actions.setState(reactiveState)
   if (preloadedState) {
@@ -21,7 +21,6 @@ export default (preloadedState?: FlowOptions): Store => {
   }
 
   return reactive({
-    state: reactiveState,
     ...hooksOn,
     ...toRefs(reactiveState),
     ...getters,

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> =
+export type NodeComponent<Data = ElementData> =
-  | Component<NodeProps<N>>
+  | Component<NodeProps<Data>>
-  | DefineComponent<NodeProps<N>, any, any, any, any>
+  | 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> =
+export type EdgeComponent<Data = ElementData> =
-  | Component<EdgeProps<E>>
+  | Component<EdgeProps<Data>>
-  | DefineComponent<EdgeProps<E>, any, any, any, any, any>
+  | 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> & {
+export type GraphEdge<Data = ElementData, SourceNodeData = any, TargetNodeData = SourceNodeData> = Edge<Data> & {
-  sourceNode: GraphNode<N>
+  sourceNode: GraphNode<SourceNodeData>
-  targetNode: GraphNode<N>
+  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
+  sourceNode: GraphNode<SourceNodeData>
-  targetNode: GraphNode
+  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
+  sourceNode: GraphNode<SourceNodeData>
-  targetNode: GraphNode
+  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 ElementData = Record<any, any>
-export type FlowElement<Data = any> = GraphNode<Data> | GraphEdge<Data>
-export type FlowElements<N = any, E = N> = (FlowElement<N> | FlowElement<E>)[]
 
-type ClassFunc<Data = any> = (element: FlowElement<Data>) => string
+/** an internal element  */
-type StyleFunc<Data = any> = (element: FlowElement<Data>) => CSSProperties
+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
+  class?: string | ClassFunc<Data>
-  style?: CSSProperties | StyleFunc
+  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> = {
+export type FlowExportObject<NodeData = ElementData, EdgeData = ElementData> = {
-  nodes: GraphNode<N>[]
+  nodes: GraphNode<NodeData>[]
-  edges: GraphEdge<E>[]
+  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> = {
+export type FlowInstance<NodeData = ElementData, EdgeData = ElementData> = {
-  getElements: () => FlowElements<N, E>
+  getElements: () => FlowElements<NodeData, EdgeData>
-  getNodes: () => GraphNode<N>[]
+  getNodes: () => GraphNode<NodeData>[]
-  getEdges: () => GraphEdge<E>[]
+  getEdges: () => GraphEdge<EdgeData>[]
-  toObject: ToObject<N, E>
+  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>
+  modelValue?: Elements<NodeData, EdgeData>
-  nodes?: Node<N>[]
+  nodes?: Node<NodeData>[]
-  edges?: Edge<E>[]
+  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> }
+  nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
-  nodeClick: { event: MouseTouchEvent; node: GraphNode<N> }
+  nodeClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
-  nodeMouseEnter: { event: MouseEvent; node: GraphNode<N> }
+  nodeMouseEnter: { event: MouseEvent; node: GraphNode<NodeData> }
-  nodeMouseMove: { event: MouseEvent; node: GraphNode<N> }
+  nodeMouseMove: { event: MouseEvent; node: GraphNode<NodeData> }
-  nodeMouseLeave: { event: MouseEvent; node: GraphNode<N> }
+  nodeMouseLeave: { event: MouseEvent; node: GraphNode<NodeData> }
-  nodeContextMenu: { event: MouseEvent; node: GraphNode<N> }
+  nodeContextMenu: { event: MouseEvent; node: GraphNode<NodeData> }
-  nodeDragStart: { event: MouseTouchEvent; node: GraphNode<N> }
+  nodeDragStart: { event: MouseTouchEvent; node: GraphNode<NodeData> }
-  nodeDrag: { event: MouseTouchEvent; node: GraphNode<N> }
+  nodeDrag: { event: MouseTouchEvent; node: GraphNode<NodeData> }
-  nodeDragStop: { event: MouseTouchEvent; node: GraphNode<N> }
+  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>[] }
+  selectionDragStart: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
-  selectionDrag: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
+  selectionDrag: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
-  selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
+  selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
-  selectionContextMenu: { event: MouseEvent; nodes: GraphNode<N>[] }
+  selectionContextMenu: { event: MouseEvent; nodes: GraphNode<NodeData>[] }
   paneScroll: WheelEvent | undefined
   paneClick: MouseEvent
   paneContextMenu: MouseEvent
-  edgeContextMenu: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeContextMenu: { event: MouseEvent; edge: GraphEdge<EdgeData> }
-  edgeMouseEnter: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeMouseEnter: { event: MouseEvent; edge: GraphEdge<EdgeData> }
-  edgeMouseMove: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeMouseMove: { event: MouseEvent; edge: GraphEdge<EdgeData> }
-  edgeMouseLeave: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeMouseLeave: { event: MouseEvent; edge: GraphEdge<EdgeData> }
-  edgeDoubleClick: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeDoubleClick: { event: MouseEvent; edge: GraphEdge<EdgeData> }
-  edgeClick: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeClick: { event: MouseEvent; edge: GraphEdge<EdgeData> }
-  edgeUpdateStart: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeUpdateStart: { event: MouseEvent; edge: GraphEdge<EdgeData> }
-  edgeUpdate: { edge: GraphEdge<E>; connection: Connection }
+  edgeUpdate: { edge: GraphEdge<EdgeData>; connection: Connection }
-  edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge<E> }
+  edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge<EdgeData> }
 }
 
-export type FlowEvent = FlowEvents[keyof FlowEvents]
+export type FlowHooks<NodeData = ElementData, EdgeData = ElementData> = {
-export type FlowHook<T extends FlowEvent = any> = EventHook<T>
+  [key in keyof FlowEvents<NodeData, EdgeData>]: EventHook<FlowEvents<NodeData, EdgeData>[key]>
-export type FlowHookOn<T extends FlowEvent = any> = EventHookOn<T>
+}
-
+export type FlowHooksOn<NodeData = ElementData, EdgeData = ElementData> = {
-export type FlowHooks<N = any, E = N> = { [key in keyof FlowEvents<N, E>]: FlowHook<FlowEvents<N, E>[key]> }
+  [key in keyof FlowEvents<NodeData, EdgeData> as `on${Capitalize<key>}`]: EventHookOn<FlowEvents<NodeData, EdgeData>[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 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> {
+export type Store<N = any, E = N> = State<N, E> & Actions<N, E> & Getters<N, E>
-  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 UseVueFlow<N = any, E = N> = {
   id: string