refactor(types)!: Remove Node/TranslateExtent

* replace with CoordinateExtent

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

src/types/components.ts

@@ -1,8 +1,9 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { BackgroundVariant, Dimensions, ElementId, FitViewParams, Position, XYPosition } from './flow'
-import { Connection, ConnectionLineType } from './connection'
-import { GraphNode, Node, NodeProps } from './node'
+import { BackgroundVariant, Dimensions, ElementId, Elements, FitViewParams, FlowOptions, Position, XYPosition } from './flow'
+import { Connection, ConnectionLineType, ConnectionMode } from './connection'
+import { GraphNode, Node, NodeProps, CoordinateExtent } 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)[]
@@ -102,3 +103,43 @@ 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?: CoordinateExtent
+  nodeExtent?: CoordinateExtent
+  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 { GraphNode, Node } from './node'
+import { GraphNode, Node, CoordinateExtent } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './zoom'
 import { EdgeTypes, NodeTypes } from './components'
@@ -15,9 +15,6 @@ 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 {
@@ -102,9 +99,9 @@ export type FlowInstance<T = any> = {
   toObject: ToObjectFunc<T>
 }
 
-export interface FlowProps {
-  modelValue?: Elements
+export interface FlowOptions {
   id?: string
+  elements?: Elements
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
   connectionMode?: ConnectionMode
@@ -127,8 +124,8 @@ export interface FlowProps {
   maxZoom?: number
   defaultZoom?: number
   defaultPosition?: [number, number]
-  translateExtent?: TranslateExtent
-  nodeExtent?: NodeExtent
+  translateExtent?: CoordinateExtent
+  nodeExtent?: CoordinateExtent
   arrowHeadColor?: string
   markerEndId?: string
   zoomOnScroll?: boolean
@@ -142,7 +139,3 @@ export interface FlowProps {
   storageKey?: string
   loading?: string
 }
-
-export interface FlowOptions extends Omit<FlowProps, 'modelValue'> {
-  elements?: Elements
-}

src/types/node.ts

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

src/types/store.ts

@@ -7,18 +7,16 @@ 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 { GraphNode } from './node'
+import { GraphNode, CoordinateExtent } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, InitD3ZoomPayload, KeyCode, PanOnScrollMode } from './zoom'
 import { FlowHooks } from './hooks'
 
@@ -36,8 +34,8 @@ export interface FlowState extends Omit<FlowOptions, 'elements' | 'id'> {
   minZoom: number
   maxZoom: number
   defaultZoom: number
-  translateExtent: TranslateExtent
-  nodeExtent: NodeExtent
+  translateExtent: CoordinateExtent
+  nodeExtent: CoordinateExtent
   dimensions: Dimensions
   transform: Transform
   onlyRenderVisibleElements: boolean
@@ -94,7 +92,7 @@ export interface FlowActions {
   initD3Zoom: (payload: InitD3ZoomPayload) => void
   setMinZoom: (zoom: number) => void
   setMaxZoom: (zoom: number) => void
-  setTranslateExtent: (translateExtent: TranslateExtent) => void
+  setTranslateExtent: (translateExtent: CoordinateExtent) => void
   resetSelectedElements: () => void
   unsetNodesSelection: () => void
   updateSize: (size: Dimensions) => void