refactor(flow!): Change transform to viewport

* Change array type to object type and rename transform type to viewport
* Update examples & docs

package/src/types/flow.ts

@@ -2,7 +2,7 @@ import { CSSProperties, VNode } from 'vue'
 import { GraphEdge, Edge, DefaultEdgeOptions } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
-import { KeyCode, PanOnScrollMode, Viewport } from './zoom'
+import { KeyCode, PanOnScrollMode, ViewportFuncs } from './zoom'
 import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
 
 export type ElementData = any
@@ -36,9 +36,6 @@ export interface Element<Data extends ElementData = ElementData> {
 }
 export type Elements<NodeData = ElementData, EdgeData = ElementData> = (Node<NodeData> | Edge<EdgeData>)[]
 
-/** Transform x, y, z */
-export type Transform = [number, number, number]
-
 /** Handle Positions */
 export enum Position {
   Left = 'left',
@@ -93,7 +90,7 @@ interface Exports {
   toObject: () => FlowExportObject
 }
 
-export type FlowInstance = Exports & Viewport
+export type FlowInstance = Exports & ViewportFuncs
 
 export interface FlowProps<NodeData = ElementData, EdgeData = ElementData> {
   id?: string

package/src/types/store.ts

@@ -1,21 +1,10 @@
 import { ComputedRef, CSSProperties, ToRefs } from 'vue'
-import {
-  Dimensions,
-  ElementData,
-  Elements,
-  FlowElements,
-  FlowInstance,
-  FlowOptions,
-  Rect,
-  SnapGrid,
-  Transform,
-  XYPosition,
-} from './flow'
+import { Dimensions, ElementData, Elements, FlowElements, FlowInstance, FlowOptions, Rect, SnapGrid, XYPosition } from './flow'
 import { EdgeComponent, NodeComponent, DefaultNodeTypes, DefaultEdgeTypes } from './components'
 import { Connection, ConnectionLineType, ConnectionMode } from './connection'
 import { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
-import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode } from './zoom'
+import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode, Viewport } from './zoom'
 import { FlowHooks, FlowHooksOn } from './hooks'
 import { NodeChange, EdgeChange } from './changes'
 import { StartHandle, HandleType } from './handle'
@@ -44,7 +33,7 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
   /** viewport dimensions */
   dimensions: Dimensions
   /** viewport transform x, y, z */
-  transform: Transform
+  viewport: Viewport
 
   onlyRenderVisibleElements: boolean
   defaultPosition: [number, number]

package/src/types/zoom.ts

@@ -5,6 +5,9 @@ export type D3Zoom = ZoomBehavior<HTMLDivElement, unknown>
 export type D3Selection = Selection<HTMLDivElement, unknown, any, any>
 export type D3ZoomHandler = (this: HTMLDivElement, event: any, d: unknown) => void
 
+/** Transform x, y, z */
+export type Viewport = { x: number; y: number; zoom: number }
+
 export type KeyCode = number | string
 
 export enum PanOnScrollMode {
@@ -13,7 +16,7 @@ export enum PanOnScrollMode {
   Horizontal = 'horizontal',
 }
 
-export type UseZoomPanHelperOptions = {
+export type ViewportFuncsOptions = {
   duration?: number
 }
 
@@ -27,7 +30,7 @@ export type FitViewParams = {
     y?: number
   }
   nodes?: string[]
-} & UseZoomPanHelperOptions
+} & ViewportFuncsOptions
 
 export type FlowTransform = {
   x: number
@@ -35,11 +38,11 @@ export type FlowTransform = {
   zoom: number
 }
 
-export type SetCenterOptions = UseZoomPanHelperOptions & {
+export type SetCenterOptions = ViewportFuncsOptions & {
   zoom?: number
 }
 
-export type FitBoundsOptions = UseZoomPanHelperOptions & {
+export type FitBoundsOptions = ViewportFuncsOptions & {
   padding?: number
 }
 
@@ -47,12 +50,12 @@ export type FitView = (fitViewOptions?: FitViewParams) => void
 export type Project = (position: XYPosition) => XYPosition
 export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void
 export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void
-export type ZoomInOut = (options?: UseZoomPanHelperOptions) => void
-export type ZoomTo = (zoomLevel: number, options?: UseZoomPanHelperOptions) => void
+export type ZoomInOut = (options?: ViewportFuncsOptions) => void
+export type ZoomTo = (zoomLevel: number, options?: ViewportFuncsOptions) => void
 export type GetTransform = () => FlowTransform
-export type SetTransform = (transform: FlowTransform, options?: UseZoomPanHelperOptions) => void
+export type SetTransform = (transform: FlowTransform, options?: ViewportFuncsOptions) => void
 
-export interface Viewport {
+export interface ViewportFuncs {
   zoomIn: ZoomInOut
   zoomOut: ZoomInOut
   zoomTo: ZoomTo