refactor(types)!: Remove Node/TranslateExtent

* replace with CoordinateExtent

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

examples/Layouting/LayoutingExample.vue

@@ -12,7 +12,7 @@ import {
   Edge,
   Elements,
   isNode,
-  NodeExtent,
+  CoordinateExtent,
   Position,
   removeElements,
 } from '~/index'
@@ -20,7 +20,7 @@ import {
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
 
-const nodeExtent: NodeExtent = [
+const nodeExtent: CoordinateExtent = [
   [0, -100],
   [1000, 500],
 ]

src/container/VueFlow/VueFlow.vue

@@ -1,4 +1,16 @@
 <script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import {
+  ConnectionLineType,
+  ConnectionMode,
+  Elements,
+  PanOnScrollMode,
+  KeyCode,
+  CoordinateExtent,
+  NodeTypes,
+  EdgeTypes,
+  FlowOptions,
+} from '../../types'
 import Renderer from '../Renderer/Renderer.vue'
 import ZoomPane from '../ZoomPane/ZoomPane.vue'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
@@ -6,7 +18,47 @@ import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
 import { createHooks, initFlow } from '../../composables'
-import type { FlowProps } from '../../types/flow'
+
+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?: 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
+}
 
 const props = withDefaults(defineProps<FlowProps>(), {
   modelValue: () => [],

src/types/components.ts

@@ -1,8 +1,9 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
-import { BackgroundVariant, Dimensions, ElementId, FitViewParams, Position, XYPosition } from './flow'
+import { BackgroundVariant, Dimensions, ElementId, Elements, FitViewParams, FlowOptions, Position, XYPosition } from './flow'
-import { Connection, ConnectionLineType } from './connection'
+import { Connection, ConnectionLineType, ConnectionMode } from './connection'
-import { GraphNode, Node, NodeProps } from './node'
+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 {
+export interface FlowOptions {
-  modelValue?: Elements
   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
+  translateExtent?: CoordinateExtent
-  nodeExtent?: NodeExtent
+  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
+  translateExtent: CoordinateExtent
-  nodeExtent: NodeExtent
+  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

src/utils/graph.ts

@@ -10,7 +10,7 @@ import {
   Box,
   Connection,
   FlowExportObject,
-  NodeExtent,
+  CoordinateExtent,
   Dimensions,
   GraphNode,
   FlowElements,
@@ -38,7 +38,7 @@ export const getDimensions = (node: HTMLElement): Dimensions => ({
 
 export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max)
 
-export const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosition => ({
+export const clampPosition = (position: XYPosition, extent: CoordinateExtent): XYPosition => ({
   x: clamp(position.x, extent[0][0], extent[1][0]),
   y: clamp(position.y, extent[0][1], extent[1][1]),
 })
@@ -165,7 +165,7 @@ export const pointToRendererPoint = (
 export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) =>
   pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid)
 
-export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({
+export const parseNode = (node: Node, nodeExtent: CoordinateExtent): GraphNode => ({
   ...node,
   id: node.id.toString(),
   type: node.type ?? 'default',
@@ -334,7 +334,7 @@ export const processElements = (elements: FlowElements, fn: (elements: FlowEleme
   })
 }
 
-export const parseElement = (element: Node | Edge, prevElements: FlowElements, nodeExtent: NodeExtent) => {
+export const parseElement = (element: Node | Edge, prevElements: FlowElements, nodeExtent: CoordinateExtent) => {
   let parsed: GraphEdge | GraphNode = {} as any
   const index = prevElements.map((x) => x.id).indexOf(element.id)
   if (isNode(element)) {
@@ -371,7 +371,7 @@ export const parseElement = (element: Node | Edge, prevElements: FlowElements, n
   return { parsed, index }
 }
 
-export const parseElements = (elements: Elements, prevElements: FlowElements, nodeExtent: NodeExtent) => {
+export const parseElements = (elements: Elements, prevElements: FlowElements, nodeExtent: CoordinateExtent) => {
   const { nodes, edges }: NextElements = {
     nodes: [],
     edges: [],