refactor(core): rename viewpane to viewport

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

packages/core/src/container/Viewport/Viewport.vue

@@ -2,7 +2,7 @@
 import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
-import type { CoordinateExtent, ViewpaneTransform } from '../../types'
+import type { CoordinateExtent, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
 import Transform from './Transform.vue'
@@ -40,12 +40,12 @@ let isDragging = $ref(false)
 
 const isConnecting = $computed(() => !!connectionStartHandle)
 
-const viewChanged = (prevViewport: ViewpaneTransform, eventTransform: ZoomTransform): boolean =>
+const viewChanged = (prevViewport: ViewportTransform, eventTransform: ZoomTransform): boolean =>
   (prevViewport.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
   (prevViewport.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
   (prevViewport.zoom !== eventTransform.k && !isNaN(eventTransform.k))
 
-const eventToFlowTransform = (eventTransform: ZoomTransform): ViewpaneTransform => ({
+const eventToFlowTransform = (eventTransform: ZoomTransform): ViewportTransform => ({
   x: eventTransform.x,
   y: eventTransform.y,
   zoom: eventTransform.k,
@@ -53,7 +53,7 @@ const eventToFlowTransform = (eventTransform: ZoomTransform): ViewpaneTransform
 
 const isWrappedWithClass = (event: Event, className: string | undefined) => (event.target as Element).closest(`.${className}`)
 
-let prevTransform = $ref<ViewpaneTransform>({
+let prevTransform = $ref<ViewportTransform>({
   x: 0,
   y: 0,
   zoom: 0,

packages/core/src/container/VueFlow/VueFlow.vue

@@ -13,7 +13,7 @@ import type {
   NodeDragEvent,
   NodeMouseEvent,
   OnConnectStartParams,
-  ViewpaneTransform,
+  ViewportTransform,
   VueFlowStore,
 } from '../../types'
 
@@ -66,9 +66,9 @@ const emit = defineEmits<{
     } & OnConnectStartParams,
   ): void
   (event: 'connectEnd', connectionEvent?: MouseEvent): void
-  (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
-  (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
-  (event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
+  (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
+  (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
+  (event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
   (event: 'selectionDragStart', selectionEvent: NodeDragEvent): void
   (event: 'selectionDrag', selectionEvent: NodeDragEvent): void
   (event: 'selectionDragStop', selectionEvent: NodeDragEvent): void

packages/core/src/types/hooks.ts

@@ -3,7 +3,7 @@ import type { D3ZoomEvent } from 'd3-zoom'
 import type { GraphEdge } from './edge'
 import type { GraphNode } from './node'
 import type { Connection, OnConnectStartParams } from './connection'
-import type { ViewpaneTransform } from './zoom'
+import type { ViewportTransform } from './zoom'
 import type { EdgeChange, NodeChange } from './changes'
 import type { VueFlowStore } from './store'
 import type { FlowElements } from './flow'
@@ -58,9 +58,9 @@ export interface FlowEvents {
   } & OnConnectStartParams
   connectEnd: MouseEvent | TouchEvent | undefined
   paneReady: VueFlowStore
-  move: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }
-  moveStart: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }
-  moveEnd: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }
+  move: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }
+  moveStart: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }
+  moveEnd: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }
   selectionDragStart: NodeDragEvent
   selectionDrag: NodeDragEvent
   selectionDragStop: NodeDragEvent
@@ -123,9 +123,9 @@ export interface Emits {
     } & OnConnectStartParams,
   ): void
   (event: 'connectEnd', connectionEvent: MouseEvent): void
-  (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
-  (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
-  (event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
+  (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
+  (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
+  (event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
   (event: 'selectionDragStart', selectionEvent: NodeDragEvent): void
   (event: 'selectionDrag', selectionEvent: NodeDragEvent): void
   (event: 'selectionDragStop', selectionEvent: NodeDragEvent): void

packages/core/src/types/store.ts

@@ -218,7 +218,7 @@ export interface Actions extends ViewportFunctions {
   setInteractive: (isInteractive: boolean) => void
   /** set new state */
   setState: SetState
-  /** return an object of graph values (elements, viewpane transform) for storage and re-loading a graph */
+  /** return an object of graph values (elements, viewport transform) for storage and re-loading a graph */
   toObject: () => FlowExportObject
   /** force update node internal data, if handle bounds are incorrect, you might want to use this */
   updateNodeInternals: UpdateNodeInternals

packages/core/src/types/zoom.ts

@@ -34,7 +34,7 @@ export type FitViewParams = {
   nodes?: string[]
 } & TransitionOptions
 
-export interface ViewpaneTransform {
+export interface ViewportTransform {
   x: number
   y: number
   zoom: number
@@ -48,16 +48,16 @@ export type FitBoundsOptions = TransitionOptions & {
   padding?: number
 }
 
-/** Fit the viewpane around visible nodes */
+/** Fit the viewport around visible nodes */
 export type FitView = (fitViewOptions?: FitViewParams) => void
 
-/** project a position onto the viewpane, i.e. a mouse event clientX/clientY onto graph coordinates */
+/** project a position onto the viewport, i.e. a mouse event clientX/clientY onto graph coordinates */
 export type Project = (position: XYPosition) => XYPosition
 
-/** set center of viewpane */
+/** set center of viewport */
 export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void
 
-/** fit the viewpane around bounds */
+/** fit the viewport around bounds */
 export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void
 
 /** zoom in/out */
@@ -66,11 +66,11 @@ export type ZoomInOut = (options?: TransitionOptions) => void
 /** zoom to a specific level */
 export type ZoomTo = (zoomLevel: number, options?: TransitionOptions) => void
 
-/** get current viewpane transform */
-export type GetTransform = () => ViewpaneTransform
+/** get current viewport transform */
+export type GetTransform = () => ViewportTransform
 
-/** set current viewpane transform */
-export type SetTransform = (transform: ViewpaneTransform, options?: TransitionOptions) => void
+/** set current viewport transform */
+export type SetTransform = (transform: ViewportTransform, options?: TransitionOptions) => void
 
 export interface ViewportFunctions {
   zoomIn: ZoomInOut