Flow State Types

interface ViewportTransform {
  x: number
  y: number
  zoom: number
}

import { toObject } from '@vue-flow/core'

const flowObject: FlowExportObject = toObject()

console.log(flowObject)
// {
//   nodes: [...],
//   edges: [...],
//   viewport: { x: 0, y: 0, zoom: 1 }
// }

type FlowImportObject = { 
  [key in keyof FlowExportObject]?: FlowExportObject[key] 
}

enum SelectionMode {
  Partial = 'partial',
  Full = 'full'
}

enum Position {
  Left = 'left',
  Top = 'top',
  Right = 'right',
  Bottom = 'bottom'
}

interface XYPosition {
  x: number
  y: number
}

interface Dimensions {
  width: number
  height: number
}

interface Rect extends Dimensions, XYPosition {}

interface Box extends XYPosition {
  x2: number
  y2: number
}

type SnapGrid = [x: number, y: number]

const snapGrid: SnapGrid = [20, 20] // 20px grid

type Styles = CSSProperties & ThemeVars & CustomThemeVars

const styles: Styles = {
  '--vf-node-bg': '#ffffff',
  '--vf-node-color': '#000000',
  backgroundColor: 'var(--vf-node-bg)',
  border: '1px solid #ddd'
}