Zoom on cursor | Issue #940 (#2319)

src/scene/export.ts

@@ -9,6 +9,7 @@ import { normalizeScroll } from "./scroll";
 import { AppState } from "../types";
 import { t } from "../i18n";
 import { DEFAULT_FONT_FAMILY, DEFAULT_VERTICAL_ALIGN } from "../constants";
+import { getDefaultAppState } from "../appState";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 const WATERMARK_HEIGHT = 16;
@@ -60,7 +61,7 @@ export const exportToCanvas = (
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
       scrollX: normalizeScroll(-minX + exportPadding),
       scrollY: normalizeScroll(-minY + exportPadding),
-      zoom: 1,
+      zoom: getDefaultAppState().zoom,
       remotePointerViewportCoords: {},
       remoteSelectedElementIds: {},
       shouldCacheIgnoreZoom: false,

src/scene/index.ts

@@ -16,4 +16,4 @@ export {
   hasText,
   getElementsAtPosition,
 } from "./comparisons";
-export { getZoomOrigin, getNormalizedZoom } from "./zoom";
+export { normalizeZoomValue as getNormalizedZoom, getNewZoom } from "./zoom";

src/scene/scroll.ts

@@ -1,4 +1,4 @@
-import { AppState, FlooredNumber } from "../types";
+import { AppState, FlooredNumber, PointerCoords, Zoom } from "../types";
 import { ExcalidrawElement } from "../element/types";
 import { getCommonBounds, getClosestElementBounds } from "../element";
 
@@ -19,14 +19,10 @@ function isOutsideViewPort(
   const { x: viewportX1, y: viewportY1 } = sceneCoordsToViewportCoords(
     { sceneX: x1, sceneY: y1 },
     appState,
-    canvas,
-    window.devicePixelRatio,
   );
   const { x: viewportX2, y: viewportY2 } = sceneCoordsToViewportCoords(
     { sceneX: x2, sceneY: y2 },
     appState,
-    canvas,
-    window.devicePixelRatio,
   );
   return (
     viewportX2 - viewportX1 > appState.width ||
@@ -34,6 +30,29 @@ function isOutsideViewPort(
   );
 }
 
+export const centerScrollOn = ({
+  scenePoint,
+  viewportDimensions,
+  zoom,
+}: {
+  scenePoint: PointerCoords;
+  viewportDimensions: { height: number; width: number };
+  zoom: Zoom;
+}) => {
+  return {
+    scrollX: normalizeScroll(
+      (viewportDimensions.width / 2) * (1 / zoom.value) -
+        scenePoint.x -
+        zoom.translation.x * (1 / zoom.value),
+    ),
+    scrollY: normalizeScroll(
+      (viewportDimensions.height / 2) * (1 / zoom.value) -
+        scenePoint.y -
+        zoom.translation.y * (1 / zoom.value),
+    ),
+  };
+};
+
 export const calculateScrollCenter = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
@@ -45,7 +64,6 @@ export const calculateScrollCenter = (
       scrollY: normalizeScroll(0),
     };
   }
-  const scale = window.devicePixelRatio;
   let [x1, y1, x2, y2] = getCommonBounds(elements);
 
   if (isOutsideViewPort(appState, canvas, [x1, y1, x2, y2])) {
@@ -54,8 +72,6 @@ export const calculateScrollCenter = (
       viewportCoordsToSceneCoords(
         { clientX: appState.scrollX, clientY: appState.scrollY },
         appState,
-        canvas,
-        scale,
       ),
     );
   }
@@ -63,8 +79,9 @@ export const calculateScrollCenter = (
   const centerX = (x1 + x2) / 2;
   const centerY = (y1 + y2) / 2;
 
-  return {
-    scrollX: normalizeScroll(appState.width / 2 - centerX),
-    scrollY: normalizeScroll(appState.height / 2 - centerY),
-  };
+  return centerScrollOn({
+    scenePoint: { x: centerX, y: centerY },
+    viewportDimensions: { width: appState.width, height: appState.height },
+    zoom: appState.zoom,
+  });
 };

src/scene/scrollbars.ts

@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "../element/types";
 import { getCommonBounds } from "../element";
-import { FlooredNumber } from "../types";
+import { FlooredNumber, Zoom } from "../types";
 import { ScrollBars } from "./types";
 import { getGlobalCSSVariable } from "../utils";
 import { getLanguage } from "../i18n";
@@ -20,7 +20,7 @@ export const getScrollBars = (
   }: {
     scrollX: FlooredNumber;
     scrollY: FlooredNumber;
-    zoom: number;
+    zoom: Zoom;
   },
 ): ScrollBars => {
   // This is the bounding box of all the elements
@@ -32,8 +32,8 @@ export const getScrollBars = (
   ] = getCommonBounds(elements);
 
   // Apply zoom
-  const viewportWidthWithZoom = viewportWidth / zoom;
-  const viewportHeightWithZoom = viewportHeight / zoom;
+  const viewportWidthWithZoom = viewportWidth / zoom.value;
+  const viewportHeightWithZoom = viewportHeight / zoom.value;
 
   const viewportWidthDiff = viewportWidth - viewportWidthWithZoom;
   const viewportHeightDiff = viewportHeight - viewportHeightWithZoom;

src/scene/types.ts

@@ -1,12 +1,12 @@
 import { ExcalidrawTextElement } from "../element/types";
-import { FlooredNumber } from "../types";
+import { FlooredNumber, Zoom } from "../types";
 
 export type SceneState = {
   scrollX: FlooredNumber;
   scrollY: FlooredNumber;
   // null indicates transparent bg
   viewBackgroundColor: string | null;
-  zoom: number;
+  zoom: Zoom;
   shouldCacheIgnoreZoom: boolean;
   remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
   remotePointerButton?: { [id: string]: string | undefined };

src/scene/zoom.ts

@@ -1,26 +1,27 @@
-export const getZoomOrigin = (
-  canvas: HTMLCanvasElement | null,
-  scale: number,
-) => {
-  if (canvas === null) {
-    return { x: 0, y: 0 };
-  }
-  const context = canvas.getContext("2d");
-  if (context === null) {
-    return { x: 0, y: 0 };
-  }
-
-  const normalizedCanvasWidth = canvas.width / scale;
-  const normalizedCanvasHeight = canvas.height / scale;
+import { NormalizedZoomValue, PointerCoords, Zoom } from "../types";
 
+export const getNewZoom = (
+  newZoomValue: NormalizedZoomValue,
+  prevZoom: Zoom,
+  zoomOnViewportPoint: PointerCoords = { x: 0, y: 0 },
+): Zoom => {
   return {
-    x: normalizedCanvasWidth / 2,
-    y: normalizedCanvasHeight / 2,
+    value: newZoomValue,
+    translation: {
+      x:
+        zoomOnViewportPoint.x -
+        (zoomOnViewportPoint.x - prevZoom.translation.x) *
+          (newZoomValue / prevZoom.value),
+      y:
+        zoomOnViewportPoint.y -
+        (zoomOnViewportPoint.y - prevZoom.translation.y) *
+          (newZoomValue / prevZoom.value),
+    },
   };
 };
 
-export const getNormalizedZoom = (zoom: number): number => {
+export const normalizeZoomValue = (zoom: number): NormalizedZoomValue => {
   const normalizedZoom = parseFloat(zoom.toFixed(2));
   const clampedZoom = Math.max(0.1, Math.min(normalizedZoom, 2));
-  return clampedZoom;
+  return clampedZoom as NormalizedZoomValue;
 };