Zoom on cursor | Issue #940 (#2319)

src/element/collision.ts

@@ -44,7 +44,7 @@ export const hitTest = (
   y: number,
 ): boolean => {
   // How many pixels off the shape boundary we still consider a hit
-  const threshold = 10 / appState.zoom;
+  const threshold = 10 / appState.zoom.value;
   const point: Point = [x, y];
 
   if (isElementSelected(appState, element)) {
@@ -60,7 +60,7 @@ export const isHittingElementBoundingBoxWithoutHittingElement = (
   x: number,
   y: number,
 ): boolean => {
-  const threshold = 10 / appState.zoom;
+  const threshold = 10 / appState.zoom.value;
 
   return (
     !isHittingElementNotConsideringBoundingBox(element, appState, [x, y]) &&
@@ -73,7 +73,7 @@ const isHittingElementNotConsideringBoundingBox = (
   appState: AppState,
   point: Point,
 ): boolean => {
-  const threshold = 10 / appState.zoom;
+  const threshold = 10 / appState.zoom.value;
 
   const check =
     element.type === "text"

src/element/linearElementEditor.ts

@@ -384,7 +384,7 @@ export class LinearElementEditor {
     while (--idx > -1) {
       const point = pointHandles[idx];
       if (
-        distance2d(x, y, point[0], point[1]) * zoom <
+        distance2d(x, y, point[0], point[1]) * zoom.value <
         // +1px to account for outline stroke
         this.POINT_HANDLE_SIZE / 2 + 1
       ) {

src/element/newElement.ts

@@ -148,7 +148,6 @@ const getAdjustedDimensions = (
     height: nextHeight,
     baseline: nextBaseline,
   } = measureText(nextText, getFontString(element));
-
   const { textAlign, verticalAlign } = element;
 
   let x, y;

src/element/resizeTest.ts

@@ -12,7 +12,7 @@ import {
   TransformHandle,
   MaybeTransformHandleType,
 } from "./transformHandles";
-import { AppState } from "../types";
+import { AppState, Zoom } from "../types";
 
 const isInsideTransformHandle = (
   transformHandle: TransformHandle,
@@ -29,7 +29,7 @@ export const resizeTest = (
   appState: AppState,
   x: number,
   y: number,
-  zoom: number,
+  zoom: Zoom,
   pointerType: PointerType,
 ): MaybeTransformHandleType => {
   if (!appState.selectedElementIds[element.id]) {
@@ -70,7 +70,7 @@ export const getElementWithTransformHandleType = (
   appState: AppState,
   scenePointerX: number,
   scenePointerY: number,
-  zoom: number,
+  zoom: Zoom,
   pointerType: PointerType,
 ) => {
   return elements.reduce((result, element) => {
@@ -93,7 +93,7 @@ export const getTransformHandleTypeFromCoords = (
   [x1, y1, x2, y2]: readonly [number, number, number, number],
   scenePointerX: number,
   scenePointerY: number,
-  zoom: number,
+  zoom: Zoom,
   pointerType: PointerType,
 ): MaybeTransformHandleType => {
   const transformHandles = getTransformHandlesFromCoords(

src/element/textWysiwyg.tsx

@@ -26,9 +26,9 @@ const getTransform = (
   const degree = (180 * angle) / Math.PI;
   // offsets must be multiplied by 2 to account for the division by 2 of
   //  the whole expression afterwards
-  return `translate(${((width - offsetLeft * 2) * (zoom - 1)) / 2}px, ${
-    ((height - offsetTop * 2) * (zoom - 1)) / 2
-  }px) scale(${zoom}) rotate(${degree}deg)`;
+  return `translate(${((width - offsetLeft * 2) * (zoom.value - 1)) / 2}px, ${
+    ((height - offsetTop * 2) * (zoom.value - 1)) / 2
+  }px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
 
 export const textWysiwyg = ({

src/element/transformHandles.ts

@@ -2,6 +2,7 @@ import { ExcalidrawElement, PointerType } from "./types";
 
 import { getElementAbsoluteCoords, Bounds } from "./bounds";
 import { rotate } from "../math";
+import { Zoom } from "../types";
 
 export type TransformHandleType =
   | "n"
@@ -76,25 +77,25 @@ const generateTransformHandle = (
 export const getTransformHandlesFromCoords = (
   [x1, y1, x2, y2]: Bounds,
   angle: number,
-  zoom: number,
+  zoom: Zoom,
   pointerType: PointerType = "mouse",
   omitSides: { [T in TransformHandleType]?: boolean } = {},
 ): TransformHandles => {
   const size = transformHandleSizes[pointerType];
-  const handleWidth = size / zoom;
-  const handleHeight = size / zoom;
+  const handleWidth = size / zoom.value;
+  const handleHeight = size / zoom.value;
 
-  const handleMarginX = size / zoom;
-  const handleMarginY = size / zoom;
+  const handleMarginX = size / zoom.value;
+  const handleMarginY = size / zoom.value;
 
   const width = x2 - x1;
   const height = y2 - y1;
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
 
-  const dashedLineMargin = 4 / zoom;
+  const dashedLineMargin = 4 / zoom.value;
 
-  const centeringOffset = (size - 8) / (2 * zoom);
+  const centeringOffset = (size - 8) / (2 * zoom.value);
 
   const transformHandles: TransformHandles = {
     nw: omitSides["nw"]
@@ -149,7 +150,7 @@ export const getTransformHandlesFromCoords = (
             dashedLineMargin -
             handleMarginY +
             centeringOffset -
-            ROTATION_RESIZE_HANDLE_GAP / zoom,
+            ROTATION_RESIZE_HANDLE_GAP / zoom.value,
           handleWidth,
           handleHeight,
           cx,
@@ -159,7 +160,7 @@ export const getTransformHandlesFromCoords = (
   };
 
   // We only want to show height handles (all cardinal directions)  above a certain size
-  const minimumSizeForEightHandles = (5 * size) / zoom;
+  const minimumSizeForEightHandles = (5 * size) / zoom.value;
   if (Math.abs(width) > minimumSizeForEightHandles) {
     if (!omitSides["n"]) {
       transformHandles["n"] = generateTransformHandle(
@@ -214,7 +215,7 @@ export const getTransformHandlesFromCoords = (
 
 export const getTransformHandles = (
   element: ExcalidrawElement,
-  zoom: number,
+  zoom: Zoom,
   pointerType: PointerType = "mouse",
 ): TransformHandles => {
   let omitSides: { [T in TransformHandleType]?: boolean } = {};