refactor(types): use vite-plugin-import-types

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/container/VueFlow/VueFlow.vue

@@ -1,17 +1,4 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import {
-  ConnectionLineType,
-  ConnectionMode,
-  Elements,
-  PanOnScrollMode,
-  KeyCode,
-  TranslateExtent,
-  NodeExtent,
-  NodeTypes,
-  EdgeTypes,
-  FlowOptions,
-} from '../../types'
 import Renderer from '../Renderer/Renderer.vue'
 import ZoomPane from '../ZoomPane/ZoomPane.vue'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
@@ -19,47 +6,7 @@ import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
 import { createHooks, initFlow } from '../../composables'
-
-interface FlowProps extends FlowOptions {
-  id?: string
-  modelValue?: Elements
-  nodeTypes?: NodeTypes
-  edgeTypes?: EdgeTypes
-  connectionMode?: ConnectionMode
-  connectionLineType?: ConnectionLineType
-  connectionLineStyle?: CSSProperties
-  deleteKeyCode?: KeyCode
-  selectionKeyCode?: KeyCode
-  multiSelectionKeyCode?: KeyCode
-  zoomActivationKeyCode?: KeyCode
-  preventScrolling?: boolean
-  snapToGrid?: boolean
-  snapGrid?: [number, number]
-  onlyRenderVisibleElements?: boolean
-  edgesUpdatable?: boolean
-  nodesDraggable?: boolean
-  nodesConnectable?: boolean
-  elementsSelectable?: boolean
-  selectNodesOnDrag?: boolean
-  paneMoveable?: boolean
-  minZoom?: number
-  maxZoom?: number
-  defaultZoom?: number
-  defaultPosition?: [number, number]
-  translateExtent?: TranslateExtent
-  nodeExtent?: NodeExtent
-  arrowHeadColor?: string
-  markerEndId?: string
-  zoomOnScroll?: boolean
-  zoomOnPinch?: boolean
-  panOnScroll?: boolean
-  panOnScrollSpeed?: number
-  panOnScrollMode?: PanOnScrollMode
-  zoomOnDoubleClick?: boolean
-  edgeUpdaterRadius?: number
-  storageKey?: string
-  loading?: string
-}
+import type { FlowProps } from '../../types/flow'
 
 const props = withDefaults(defineProps<FlowProps>(), {
   modelValue: () => [],

src/types/components.ts

@@ -1,9 +1,8 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { BackgroundVariant, Dimensions, ElementId, Elements, FitViewParams, FlowOptions, Position, XYPosition } from './flow'
-import { Connection, ConnectionLineType, ConnectionMode } from './connection'
-import { GraphNode, Node, NodeExtent, NodeProps, TranslateExtent } from './node'
+import { BackgroundVariant, Dimensions, ElementId, FitViewParams, Position, XYPosition } from './flow'
+import { Connection, ConnectionLineType } from './connection'
+import { GraphNode, Node, NodeProps } from './node'
 import { EdgeProps } from './edge'
-import { KeyCode, PanOnScrollMode } from './zoom'
 
 export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step']: Component<EdgeProps> }
 export type EdgeTypes = (keyof DefaultEdgeTypes | string)[]
@@ -103,43 +102,3 @@ export interface CustomConnectionLineProps {
   sourceNode: GraphNode
   sourceHandle: HandleElement
 }
-
-export interface FlowProps extends FlowOptions {
-  id?: string
-  modelValue?: Elements
-  nodeTypes?: NodeTypes
-  edgeTypes?: EdgeTypes
-  connectionMode?: ConnectionMode
-  connectionLineType?: ConnectionLineType
-  connectionLineStyle?: CSSProperties
-  deleteKeyCode?: KeyCode
-  selectionKeyCode?: KeyCode
-  multiSelectionKeyCode?: KeyCode
-  zoomActivationKeyCode?: KeyCode
-  preventScrolling?: boolean
-  snapToGrid?: boolean
-  snapGrid?: [number, number]
-  onlyRenderVisibleElements?: boolean
-  nodesDraggable?: boolean
-  nodesConnectable?: boolean
-  elementsSelectable?: boolean
-  selectNodesOnDrag?: boolean
-  paneMoveable?: boolean
-  minZoom?: number
-  maxZoom?: number
-  defaultZoom?: number
-  defaultPosition?: [number, number]
-  translateExtent?: TranslateExtent
-  nodeExtent?: NodeExtent
-  arrowHeadColor?: string
-  markerEndId?: string
-  zoomOnScroll?: boolean
-  zoomOnPinch?: boolean
-  panOnScroll?: boolean
-  panOnScrollSpeed?: number
-  panOnScrollMode?: PanOnScrollMode
-  zoomOnDoubleClick?: boolean
-  edgeUpdaterRadius?: number
-  storageKey?: string
-  loading?: string
-}

src/types/flow.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'vue'
 import { Edge, GraphEdge } from './edge'
-import { NodeExtent, GraphNode, TranslateExtent, Node } from './node'
+import { GraphNode, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './zoom'
 import { EdgeTypes, NodeTypes } from './components'
@@ -15,6 +15,9 @@ export type NextElements = {
   edges: GraphEdge[]
 }
 
+export type TranslateExtent = [[number, number], [number, number]]
+export type NodeExtent = [[number, number], [number, number]]
+
 export type Transform = [number, number, number]
 
 export enum Position {
@@ -99,9 +102,9 @@ export type FlowInstance<T = any> = {
   toObject: ToObjectFunc<T>
 }
 
-export interface FlowOptions {
+export interface FlowProps {
+  modelValue?: Elements
   id?: string
-  elements?: Elements
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
   connectionMode?: ConnectionMode
@@ -139,3 +142,7 @@ export interface FlowOptions {
   storageKey?: string
   loading?: string
 }
+
+export interface FlowOptions extends Omit<FlowProps, 'modelValue'> {
+  elements?: Elements
+}

src/types/node.ts

@@ -54,9 +54,6 @@ export interface NodeProps<T = any> extends GraphNode {
   __vf: VFInternals
 }
 
-export type TranslateExtent = [[number, number], [number, number]]
-export type NodeExtent = TranslateExtent
-
 export type NodeDimensionUpdate = {
   id: ElementId
   nodeElement: HTMLDivElement

src/types/store.ts

@@ -7,16 +7,18 @@ import {
   FlowElements,
   FlowInstance,
   FlowOptions,
+  NodeExtent,
   Rect,
   SelectionRect,
   SnapGrid,
   Transform,
+  TranslateExtent,
   XYPosition,
 } from './flow'
 import { HandleType, EdgeComponent, NodeComponent, NodeTypes, EdgeTypes } from './components'
 import { ConnectionLineType, ConnectionMode, SetConnectionId } from './connection'
 import { GraphEdge } from './edge'
-import { NodeExtent, GraphNode, TranslateExtent } from './node'
+import { GraphNode } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, InitD3ZoomPayload, KeyCode, PanOnScrollMode } from './zoom'
 import { FlowHooks } from './hooks'
 

src/utils/graph.ts

@@ -1,3 +1,4 @@
+import { getSourceTargetNodes } from './edge'
 import {
   ElementId,
   Node,
@@ -19,7 +20,6 @@ import {
   FlowState,
 } from '~/types'
 import { useWindow } from '~/composables'
-import { getSourceTargetNodes } from '~/utils/edge'
 
 const isHTMLElement = (el: EventTarget): el is HTMLElement => ('nodeName' || 'hasAttribute') in el
 

src/utils/node.ts

@@ -1,5 +1,5 @@
+import { getDimensions } from './graph'
 import { HandleElement, Position } from '~/types'
-import { getDimensions } from '~/utils/graph'
 
 export const getHandleBoundsByHandleType = (
   selector: string,