refactor(components): Use plugin to import prop types

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

src/additional-components/Background/Background.vue

@@ -1,16 +1,10 @@
 <script lang="ts" setup>
 import { BackgroundVariant } from '../../types'
 import { useVueFlow } from '../../composables'
-
-interface BackgroundProps {
-  variant?: BackgroundVariant
-  gap?: number
-  color?: string
-  size?: number
-}
+import type { BackgroundProps } from '../../types/components'
 
 const props = withDefaults(defineProps<BackgroundProps>(), {
-  variant: BackgroundVariant.Dots,
+  variant: 'dots' as BackgroundVariant,
   gap: 10,
   size: 0.4,
 })

src/additional-components/Controls/Controls.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { FitViewParams } from '../../types'
 import { useZoomPanHelper, useVueFlow } from '../../composables'
+import type { ControlProps, ControlEvents } from '../../types/components'
 import ControlButton from './ControlButton.vue'
 import PlusIcon from '~/assets/icons/plus.svg'
 import MinusIcon from '~/assets/icons/minus.svg'
@@ -8,20 +8,6 @@ import Fitview from '~/assets/icons/fitview.svg'
 import Lock from '~/assets/icons/lock.svg'
 import Unlock from '~/assets/icons/unlock.svg'
 
-interface ControlProps {
-  showZoom?: boolean
-  showFitView?: boolean
-  showInteractive?: boolean
-  fitViewParams?: FitViewParams
-}
-
-interface ControlEvents {
-  (event: 'zoom-in'): void
-  (event: 'zoom-out'): void
-  (event: 'fit-view'): void
-  (event: 'interaction-change', active: boolean): void
-}
-
 const props = withDefaults(defineProps<ControlProps>(), {
   showZoom: true,
   showFitView: true,

src/additional-components/MiniMap/MiniMap.vue

@@ -2,18 +2,9 @@
 import { GraphNode, ShapeRendering } from '../../types'
 import { useVueFlow, useWindow } from '../../composables'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
+import type { MiniMapProps } from '../../types/components'
 import MiniMapNode from './MiniMapNode.vue'
 
-type StringFunc = (node: GraphNode) => string
-interface MiniMapProps {
-  nodeColor?: string | StringFunc
-  nodeStrokeColor?: string | StringFunc
-  nodeClassName?: string | StringFunc
-  nodeBorderRadius?: number
-  nodeStrokeWidth?: number
-  maskColor?: string
-}
-
 const props = withDefaults(defineProps<MiniMapProps>(), {
   nodeStrokeColor: '#555',
   nodeColor: '#fff',

src/types/components.ts

@@ -53,9 +53,9 @@ export type StringFunc<N = any> = (node: Node<N> | GraphNode<N>) => string
 export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
 
 export interface MiniMapProps<N = any> {
-  nodeColor?: string | StringFunc<N>
-  nodeStrokeColor?: string | StringFunc<N>
-  nodeClassName?: string | StringFunc<N>
+  nodeColor?: string | ((node: Node<N> | GraphNode<N>) => string)
+  nodeStrokeColor?: string | ((node: Node<N> | GraphNode<N>) => string)
+  nodeClassName?: string | ((node: Node<N> | GraphNode<N>) => string)
   nodeBorderRadius?: number
   nodeStrokeWidth?: number
   maskColor?: string
@@ -87,7 +87,7 @@ export interface EdgeTextProps {
   labelBgBorderRadius?: number
 }
 
-export interface CustomConnectionLineProps<N = any> {
+export interface ConnectionLineProps<N = any> {
   sourceX: number
   sourceY: number
   sourcePosition: Position