refactor: Change zoom pane into viewport

* split zoom pane into smaller components as viewport
* rename UseZoomPanHelper Type to Viewport

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, UseZoomPanHelper } from './zoom'
+import { KeyCode, PanOnScrollMode, Viewport } from './zoom'
 import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
 
 export type ElementData = any
@@ -86,14 +86,14 @@ export type FlowExportObject = {
   zoom: number
 }
 
-export type ToObject = () => FlowExportObject
-
-export type FlowInstance = {
+interface Exports {
   getElements: () => FlowElements
   getNodes: () => GraphNode[]
   getEdges: () => GraphEdge[]
-  toObject: ToObject
-} & UseZoomPanHelper
+  toObject: () => FlowExportObject
+}
+
+export type FlowInstance = Exports & Viewport
 
 export interface FlowProps<NodeData = ElementData, EdgeData = ElementData> {
   id?: string

package/src/types/store.ts

@@ -34,15 +34,18 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
   d3Zoom: D3Zoom | null
   d3Selection: D3Selection | null
   d3ZoomHandler: D3ZoomHandler | null
+
   minZoom: number
   maxZoom: number
   defaultZoom: number
   translateExtent: CoordinateExtent
   nodeExtent: CoordinateExtent
-  /** zoom pane dimensions */
+
+  /** viewport dimensions */
   dimensions: Dimensions
-  /** transform x, y, z */
+  /** viewport transform x, y, z */
   transform: Transform
+
   onlyRenderVisibleElements: boolean
   defaultPosition: [number, number]
 
@@ -50,6 +53,7 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
   nodesSelectionActive: boolean
   userSelectionActive: boolean
   multiSelectionActive: boolean
+
   deleteKeyCode: KeyCode
   selectionKeyCode: KeyCode
   multiSelectionKeyCode: KeyCode
@@ -63,6 +67,7 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
   connectionLineType: ConnectionLineType
   connectionLineStyle: CSSProperties | null
   connectionStartHandle: StartHandle | null
+
   connectOnClick: boolean
   edgeUpdaterRadius: number
 
@@ -73,8 +78,10 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
   edgesUpdatable: boolean
   nodesDraggable: boolean
   nodesConnectable: boolean
+
   elementsSelectable: boolean
   selectNodesOnDrag: boolean
+
   panOnDrag: boolean
   zoomOnScroll: boolean
   zoomOnPinch: boolean
@@ -88,9 +95,11 @@ export interface State<NodeData = ElementData, EdgeData = ElementData>
   applyDefault: boolean
 
   fitViewOnInit?: boolean
+
   noDragClassName?: 'nodrag' | string
   noWheelClassName?: 'nowheel' | string
   noPanClassName?: 'nopan' | string
+
   defaultEdgeOptions?: DefaultEdgeOptions
 
   vueFlowVersion: string

package/src/types/zoom.ts

@@ -52,7 +52,7 @@ export type ZoomTo = (zoomLevel: number, options?: UseZoomPanHelperOptions) => v
 export type GetTransform = () => FlowTransform
 export type SetTransform = (transform: FlowTransform, options?: UseZoomPanHelperOptions) => void
 
-export interface UseZoomPanHelper {
+export interface Viewport {
   zoomIn: ZoomInOut
   zoomOut: ZoomInOut
   zoomTo: ZoomTo