diff --git a/packages/core/src/canvas/index.ts b/packages/core/src/canvas/index.ts index 5c9f79f14..ac1ed2170 100644 --- a/packages/core/src/canvas/index.ts +++ b/packages/core/src/canvas/index.ts @@ -418,11 +418,9 @@ export default class CanvasModule extends Module { const canvasOffset = opts.canvasOff || this.canvasRectOffset(el, elRect); const targetHeight = targetEl.offsetHeight || 0; const targetWidth = targetEl.offsetWidth || 0; - const elementRight = elRect.left + elRect.width; const canvasView = this.getCanvasView(); const { scrollTop: canvasScrollTop, scrollLeft: canvasScrollLeft } = canvasView.getCanvasScroll(); const canvasRect = canvasView.getPosition(); - const frameOffset = canvasView.getFrameOffset(el); const { event } = opts; const defaultLeftOffset = elRect.width - targetWidth; @@ -432,7 +430,7 @@ export default class CanvasModule extends Module { const canvasLiftLimit = Math.max(-elRect.left + canvasScrollLeft, 0); left = Math.max(left, canvasLiftLimit); - const elementRightLimit = elementRight - targetWidth; + const elementRightLimit = elRect.width - targetWidth; left = Math.min(left, elementRightLimit); const canvasRightLimit = canvasRect.width + canvasScrollLeft - targetWidth - elRect.left; @@ -443,14 +441,15 @@ export default class CanvasModule extends Module { if (targetReachesCanvasTop) { const fullHeight = elRect.height + targetHeight; - const elementIsShorterThanFrame = fullHeight < frameOffset.height; + const elementIsShorterThanFrame = fullHeight < canvasRect.height; // Scroll with the window if the top edge is reached and the // element is bigger than the canvas if (elementIsShorterThanFrame) { top = top + fullHeight; } else { - top = -canvasOffset.top < elRect.height ? -canvasOffset.top : elRect.height; + const canvasRelativeTop = -canvasOffset.top + canvasScrollTop; + top = canvasRelativeTop < elRect.height ? canvasRelativeTop : elRect.height; } } diff --git a/packages/core/src/canvas/view/CanvasView.ts b/packages/core/src/canvas/view/CanvasView.ts index a128025b3..f8a3b86da 100644 --- a/packages/core/src/canvas/view/CanvasView.ts +++ b/packages/core/src/canvas/view/CanvasView.ts @@ -47,6 +47,7 @@ export interface FitViewportOptions { gap?: number | { x: number; y: number }; ignoreHeight?: boolean; el?: HTMLElement; + zoom?: number; } export default class CanvasView extends ModuleView { @@ -303,7 +304,7 @@ export default class CanvasView extends ModuleView { const zoomRatio = noHeight ? widthRatio : Math.min(widthRatio, heightRatio); const zoom = zoomRatio * 100; - module.setZoom(zoom); + module.setZoom(opts.zoom ?? zoom); // check for the frame witdh is necessary as we're centering the frame via CSS const coordX = -boxRect.x + (frame.width >= canvasWidth ? canvasWidth / 2 - boxWidth / 2 : -gapX);