diff --git a/src/canvas/view/CanvasView.ts b/src/canvas/view/CanvasView.ts index 254bf4e66..5d0b25753 100644 --- a/src/canvas/view/CanvasView.ts +++ b/src/canvas/view/CanvasView.ts @@ -1,6 +1,6 @@ import { bindAll, isNumber } from 'underscore'; import { ModuleView } from '../../abstract'; -import { BoxRect, ElementRect } from '../../common'; +import { BoxRect, Coordinates, ElementRect } from '../../common'; import Component from '../../dom_components/model/Component'; import ComponentView from '../../dom_components/view/ComponentView'; import { createEl, getDocumentScroll } from '../../utils/dom'; @@ -294,28 +294,21 @@ export default class CanvasView extends ModuleView { } getViewportRect(opts: { toWorld?: boolean } = {}): BoxRect { - const { module } = this; const { top, left, width, height } = this.getCanvasOffset(); + const { module } = this; if (opts.toWorld) { const zoom = module.getZoomMultiplier(); const coords = module.getCoords(); - - // Get coords based on zoom - const canvasWorldWidth = width * zoom; - const canvasWorldHeight = height * zoom; - const canvasWidthDelta = canvasWorldWidth - width; - const canvasHeightDelta = canvasWorldHeight - height; - const xDelta = canvasWidthDelta / 2 / zoom; - const yDelta = canvasHeightDelta / 2 / zoom; - const x = (-coords.x - xDelta) * zoom; - const y = (-coords.y - yDelta) * zoom; + const vwDelta = this.getViewportDelta(); + const x = -coords.x - vwDelta.x || 0; + const y = -coords.y - vwDelta.y || 0; return { - x: x || 0, - y: y || 0, - width: canvasWorldWidth, - height: canvasWorldHeight, + x: x * zoom, + y: y * zoom, + width: width * zoom, + height: height * zoom, }; } else { return { @@ -327,6 +320,20 @@ export default class CanvasView extends ModuleView { } } + getViewportDelta(): Coordinates { + const zoom = this.module.getZoomMultiplier(); + const { width, height } = this.getCanvasOffset(); + const worldWidth = width * zoom; + const worldHeight = height * zoom; + const widthDelta = worldWidth - width; + const heightDelta = worldHeight - height; + + return { + x: widthDelta / 2 / zoom, + y: heightDelta / 2 / zoom, + }; + } + /** * Cleare cached offsets * @private