update(script-setup): Refactor remaining files to script setup style

src/types/connection.ts

@@ -1,5 +1,6 @@
-import { ComponentPublicInstance } from 'vue'
-import { ElementId, HandleType, Position } from './types'
+import { DefineComponent } from 'vue'
+import { ElementId, Position } from './types'
+import { HandleType } from '~/types/handle'
 
 export enum ConnectionLineType {
   Bezier = 'default',
@@ -26,13 +27,13 @@ export type ConnectionLineComponentProps = {
   connectionLineType: ConnectionLineType
 }
 
-export type ConnectionLineComponent = ComponentPublicInstance<ConnectionLineComponentProps>
+export type CustomConnectionLine = DefineComponent<ConnectionLineComponentProps>
 
 export type OnConnectFunc = (connection: Connection) => void
 export type OnConnectStartParams = {
-  nodeId: ElementId | null
-  handleId: ElementId | null
-  handleType: HandleType | null
+  nodeId: ElementId | undefined
+  handleId: ElementId | undefined
+  handleType: HandleType | undefined
 }
 export type OnConnectStartFunc = (event: MouseEvent, params: OnConnectStartParams) => void
 export type OnConnectStopFunc = (event: MouseEvent) => void
@@ -44,7 +45,7 @@ export enum ConnectionMode {
 }
 
 export type SetConnectionId = {
-  connectionNodeId: ElementId | null
-  connectionHandleId: ElementId | null
-  connectionHandleType: HandleType | null
+  connectionNodeId: ElementId | undefined
+  connectionHandleId: ElementId | undefined
+  connectionHandleType: HandleType | undefined
 }

src/types/edge.ts

@@ -1,4 +1,4 @@
-import { DefineComponent, HTMLAttributes, VNode } from 'vue'
+import { DefineComponent, VNode } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './types'
 import { Connection } from './connection'
 
@@ -53,17 +53,6 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
   borderRadius?: number
 }
 
-export interface EdgeTextProps extends HTMLAttributes {
-  x: number
-  y: number
-  label?: string | VNode
-  labelStyle?: any
-  labelShowBg?: boolean
-  labelBgStyle?: any
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-}
-
 export type EdgeType = DefineComponent<EdgeSmoothStepProps>
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void

src/types/handle.ts

@@ -1,5 +1,4 @@
 import { Dimensions, ElementId, Position, XYPosition } from './types'
-import { Connection, OnConnectFunc } from './connection'
 
 export type HandleType = 'source' | 'target'
 
@@ -7,12 +6,3 @@ export interface HandleElement extends XYPosition, Dimensions {
   id?: ElementId | null
   position: Position
 }
-
-export interface HandleProps {
-  type: HandleType
-  position: Position
-  isConnectable?: boolean
-  onConnect?: OnConnectFunc
-  isValidConnection?: (connection: Connection) => boolean
-  id?: ElementId
-}

src/types/node.ts

@@ -47,14 +47,14 @@ export type NodeDimensionUpdate = {
 export interface NodeProps<T = any> {
   id: ElementId
   type: string
-  data: T
-  selected: boolean
-  isConnectable: boolean
+  data?: T
+  selected?: boolean
+  connectable?: boolean
   xPos?: number
   yPos?: number
   targetPosition?: Position
   sourcePosition?: Position
-  isDragging?: boolean
+  dragging?: boolean
 }
 
 export type NodeType = DefineComponent<NodeProps>

src/types/panel.ts

@@ -1,5 +1,9 @@
-import { Selection as D3Selection, ZoomBehavior } from 'd3'
-import { FitViewFunc, FlowTransform, Rect, Transform, XYPosition } from './types'
+import { Selection, ZoomBehavior } from 'd3'
+import { FitViewFunc, FlowTransform, Rect, XYPosition } from './types'
+
+export type D3Zoom = ZoomBehavior<HTMLDivElement, unknown>
+export type D3Selection = Selection<HTMLDivElement, unknown, any, any>
+export type D3ZoomHandler = (this: HTMLDivElement, event: any, d: unknown) => void
 
 export type KeyCode = number | string
 
@@ -21,8 +25,7 @@ export interface ZoomPanHelperFunctions {
 }
 
 export type InitD3ZoomPayload = {
-  d3Zoom: ZoomBehavior<Element, unknown>
-  d3Selection: D3Selection<Element, unknown, null, undefined>
-  d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
-  transform: Transform
+  d3Zoom: D3Zoom
+  d3Selection: D3Selection
+  d3ZoomHandler: D3ZoomHandler
 }

src/types/store.ts

@@ -1,24 +1,23 @@
-import { ZoomBehavior, Selection } from 'd3'
 import { Store } from 'pinia'
-import { ElementId, Elements, Rect, SelectionRect, SnapGrid, Transform, XYPosition } from './types'
+import { Dimensions, ElementId, Elements, Rect, SelectionRect, SnapGrid, Transform, XYPosition } from './types'
 import { HandleType } from './handle'
 import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc } from './connection'
 import { Edge } from './edge'
 import { Node, NodeExtent, TranslateExtent } from './node'
 import { RevueFlowActions } from './actions'
+import { D3Selection, D3Zoom, D3ZoomHandler } from '~/types/panel'
 
 export interface RevueFlowState {
-  width: number
-  height: number
+  dimensions: Dimensions
   transform: Transform
   nodes: Node[]
   edges: Edge[]
-  selectedElements: Elements | null
+  selectedElements?: Elements
   selectedNodesBbox: Rect
 
-  d3Zoom: ZoomBehavior<Element, unknown> | null
-  d3Selection: Selection<Element, unknown, null, undefined> | null
-  d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
+  d3Zoom?: D3Zoom
+  d3Selection?: D3Selection
+  d3ZoomHandler?: D3ZoomHandler
   minZoom: number
   maxZoom: number
   translateExtent: TranslateExtent
@@ -29,10 +28,10 @@ export interface RevueFlowState {
 
   userSelectionRect: SelectionRect
 
-  connectionNodeId: ElementId | null
-  connectionHandleId: ElementId | null
-  connectionHandleType: HandleType | null
-  connectionPosition: XYPosition
+  connectionNodeId?: ElementId
+  connectionHandleId?: ElementId
+  connectionHandleType?: HandleType
+  connectionPosition?: XYPosition
   connectionMode: ConnectionMode
 
   snapToGrid: boolean