feat(zoom): Add new zoom pan helper functions + transition for all helpers

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

src/types/flow.ts

@@ -2,11 +2,11 @@ import { CSSProperties } from 'vue'
 import { GraphEdge, Edge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
-import { KeyCode, PanOnScrollMode } from './zoom'
+import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
 import { EdgeTypes, NodeTypes } from './components'
 
-export type FlowElement<DataNode = any, DataEdge = any> = GraphNode<DataNode> | GraphEdge<DataEdge>
-export type FlowElements<DataNode = any, DataEdge = any> = FlowElement<DataNode, DataEdge>[]
+export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
+export type FlowElements<N = any, E = any> = FlowElement<N, E>[]
 export interface Element<Data = any> {
   id: string
   label?: string
@@ -16,12 +16,7 @@ export interface Element<Data = any> {
   style?: CSSProperties
   hidden?: boolean
 }
-export type Elements<DataNode = any, DataEdge = any> = (Node<DataNode> | Edge<DataEdge>)[]
-
-export type NextElements = {
-  nodes: GraphNode[]
-  edges: GraphEdge[]
-}
+export type Elements<N = any, E = any> = (Node<N> | Edge<E>)[]
 
 export type Transform = [number, number, number]
 
@@ -64,53 +59,26 @@ export interface SelectionRect extends Rect {
   draw: boolean
 }
 
-export type FitViewParams = {
-  padding?: number
-  includeHiddenNodes?: boolean
-  minZoom?: number
-  maxZoom?: number
-  offset?: {
-    x?: number
-    y?: number
-  }
-  transitionDuration?: number
-  nodes?: string[]
-}
-
-export type FlowExportObject<DataNode = any, DataEdge = DataNode> = {
-  nodes: GraphNode<DataNode>[]
-  edges: GraphEdge<DataEdge>[]
+export type FlowExportObject<N = any, E = N> = {
+  nodes: GraphNode<N>[]
+  edges: GraphEdge<E>[]
   position: [number, number]
   zoom: number
 }
 
-export type FlowTransform = {
-  x: number
-  y: number
-  zoom: number
-}
+export type ToObject<N = any, E = N> = () => FlowExportObject<N, E>
 
-export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
-export type ProjectFunc = (position: XYPosition) => XYPosition
-export type ToObjectFunc<DataNode = any, DataEdge = DataNode> = () => FlowExportObject<DataNode, DataEdge>
+export type FlowInstance<N = any, E = N> = {
+  getElements: () => FlowElements<N, E>
+  getNodes: () => GraphNode<N>[]
+  getEdges: () => GraphEdge<E>[]
+  toObject: ToObject<N, E>
+} & UseZoomPanHelper
 
-export type FlowInstance<DataNode = any, DataEdge = DataNode> = {
-  zoomIn: () => void
-  zoomOut: () => void
-  zoomTo: (zoomLevel: number) => void
-  fitView: FitViewFunc
-  project: ProjectFunc
-  getElements: () => FlowElements
-  getNodes: () => GraphNode[]
-  getEdges: () => GraphEdge[]
-  setTransform: (transform: FlowTransform) => void
-  toObject: ToObjectFunc<DataNode, DataEdge>
-}
-
-export interface FlowProps<DataNode = any, DataEdge = DataNode> {
+export interface FlowProps<N = any, E = N> {
   modelValue?: any[]
-  nodes?: Node<DataNode>[]
-  edges?: Edge<DataEdge>[]
+  nodes?: Node<N>[]
+  edges?: Edge<E>[]
   elements?: Elements
   id?: string
   nodeTypes?: NodeTypes

src/types/zoom.ts

@@ -1,5 +1,5 @@
 import { Selection, ZoomBehavior } from 'd3'
-import { FitViewFunc, FlowTransform, Rect, XYPosition } from './flow'
+import { Rect, XYPosition } from './flow'
 
 export type D3Zoom = ZoomBehavior<HTMLDivElement, unknown>
 export type D3Selection = Selection<HTMLDivElement, unknown, any, any>
@@ -13,13 +13,53 @@ export enum PanOnScrollMode {
   Horizontal = 'horizontal',
 }
 
+export type UseZoomPanHelperOptions = {
+  duration?: number
+}
+
+export type FitViewParams = {
+  padding?: number
+  includeHiddenNodes?: boolean
+  minZoom?: number
+  maxZoom?: number
+  offset?: {
+    x?: number
+    y?: number
+  }
+  nodes?: string[]
+} & UseZoomPanHelperOptions
+
+export type FlowTransform = {
+  x: number
+  y: number
+  zoom: number
+}
+
+export type SetCenterOptions = UseZoomPanHelperOptions & {
+  zoom?: number
+}
+
+export type FitBoundsOptions = UseZoomPanHelperOptions & {
+  padding?: number
+}
+
+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 GetTransform = () => FlowTransform
+export type SetTransform = (transform: FlowTransform, options?: UseZoomPanHelperOptions) => void
+
 export interface UseZoomPanHelper {
-  zoomIn: () => void
-  zoomOut: () => void
-  zoomTo: (zoomLevel: number) => void
-  transform: (transform: FlowTransform) => void
-  fitView: FitViewFunc
-  setCenter: (x: number, y: number, zoom?: number) => void
-  fitBounds: (bounds: Rect, padding?: number) => void
-  project: (position: XYPosition) => XYPosition
+  zoomIn: ZoomInOut
+  zoomOut: ZoomInOut
+  zoomTo: ZoomTo
+  setTransform: SetTransform
+  getTransform: GetTransform
+  fitView: FitView
+  setCenter: SetCenter
+  fitBounds: FitBounds
+  project: Project
 }