diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index a0177c584..483e79a00 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -522,7 +522,7 @@ export class LGraphCanvas implements ConnectionColorContext { /** If true, enable drag zoom. Ctrl+Shift+Drag Up/Down: zoom canvas. */ dragZoomEnabled: boolean = false /** The start position of the drag zoom. */ - #dragZoomStart: { pos: Point, scale: number } | null = null + #zoom_drag_start: { x: number, y: number, scale: number } | null = null getMenuOptions?(): IContextMenuValue[] getExtraMenuOptions?( @@ -2006,7 +2006,7 @@ export class LGraphCanvas implements ConnectionColorContext { processMouseDown(e: PointerEvent): void { if (this.dragZoomEnabled && e.ctrlKey && e.shiftKey && !e.altKey && e.buttons) { - this.#dragZoomStart = { pos: [e.x, e.y], scale: this.ds.scale } + this.#zoom_drag_start = { x: e.x, y: e.y, scale: this.ds.scale } return } @@ -2765,17 +2765,20 @@ export class LGraphCanvas implements ConnectionColorContext { #processDragZoom(e: PointerEvent): void { // stop canvas zoom action if (!e.buttons) { - this.#dragZoomStart = null + this.#zoom_drag_start = null return } // calculate delta - const deltaY = e.y - this.#dragZoomStart.pos[1] - const startScale = this.#dragZoomStart.scale + const deltaY = e.y - this.#zoom_drag_start.y + const startScale = this.#zoom_drag_start.scale const scale = startScale - deltaY / 100 - this.ds.changeScale(scale, this.#dragZoomStart.pos) + this.ds.changeScale(scale, [ + this.#zoom_drag_start.x, + this.#zoom_drag_start.y, + ]) this.graph.change() } @@ -2783,7 +2786,7 @@ export class LGraphCanvas implements ConnectionColorContext { * Called when a mouse move event has to be processed */ processMouseMove(e: PointerEvent): void { - if (this.dragZoomEnabled && e.ctrlKey && e.shiftKey && this.#dragZoomStart) { + if (this.dragZoomEnabled && e.ctrlKey && e.shiftKey && this.#zoom_drag_start) { this.#processDragZoom(e) return }