diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue index 6500c1a3..3d5ff682 100644 --- a/packages/core/src/container/Viewport/Viewport.vue +++ b/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({ +let prevTransform = $ref({ x: 0, y: 0, zoom: 0, diff --git a/packages/core/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue index ca5787f6..6486ee52 100644 --- a/packages/core/src/container/VueFlow/VueFlow.vue +++ b/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; flowTransform: ViewpaneTransform }): void - (event: 'move', moveEvent: { event: D3ZoomEvent; flowTransform: ViewpaneTransform }): void - (event: 'moveEnd', moveEvent: { event: D3ZoomEvent; flowTransform: ViewpaneTransform }): void + (event: 'moveStart', moveEvent: { event: D3ZoomEvent; flowTransform: ViewportTransform }): void + (event: 'move', moveEvent: { event: D3ZoomEvent; flowTransform: ViewportTransform }): void + (event: 'moveEnd', moveEvent: { event: D3ZoomEvent; flowTransform: ViewportTransform }): void (event: 'selectionDragStart', selectionEvent: NodeDragEvent): void (event: 'selectionDrag', selectionEvent: NodeDragEvent): void (event: 'selectionDragStop', selectionEvent: NodeDragEvent): void diff --git a/packages/core/src/types/hooks.ts b/packages/core/src/types/hooks.ts index 2ec60382..915dd970 100644 --- a/packages/core/src/types/hooks.ts +++ b/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; flowTransform: ViewpaneTransform } - moveStart: { event: D3ZoomEvent; flowTransform: ViewpaneTransform } - moveEnd: { event: D3ZoomEvent; flowTransform: ViewpaneTransform } + move: { event: D3ZoomEvent; flowTransform: ViewportTransform } + moveStart: { event: D3ZoomEvent; flowTransform: ViewportTransform } + moveEnd: { event: D3ZoomEvent; 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; flowTransform: ViewpaneTransform }): void - (event: 'move', moveEvent: { event: D3ZoomEvent; flowTransform: ViewpaneTransform }): void - (event: 'moveEnd', moveEvent: { event: D3ZoomEvent; flowTransform: ViewpaneTransform }): void + (event: 'moveStart', moveEvent: { event: D3ZoomEvent; flowTransform: ViewportTransform }): void + (event: 'move', moveEvent: { event: D3ZoomEvent; flowTransform: ViewportTransform }): void + (event: 'moveEnd', moveEvent: { event: D3ZoomEvent; flowTransform: ViewportTransform }): void (event: 'selectionDragStart', selectionEvent: NodeDragEvent): void (event: 'selectionDrag', selectionEvent: NodeDragEvent): void (event: 'selectionDragStop', selectionEvent: NodeDragEvent): void diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts index 44a3c711..8f3fa994 100644 --- a/packages/core/src/types/store.ts +++ b/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 diff --git a/packages/core/src/types/zoom.ts b/packages/core/src/types/zoom.ts index fb7ab18b..a030b85f 100644 --- a/packages/core/src/types/zoom.ts +++ b/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