fix: consistent use of ZOOM_STEP (#5801)

introduce MIN_ZOOM, consistent use of ZOOM_STEP

src/actions/actionCanvas.tsx

@@ -2,7 +2,7 @@ import { ColorPicker } from "../components/ColorPicker";
 import { eraser, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { DarkModeToggle } from "../components/DarkModeToggle";
-import { THEME, ZOOM_STEP } from "../constants";
+import { MIN_ZOOM, THEME, ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
@@ -206,7 +206,7 @@ const zoomValueToFitBoundsOnViewport = (
   const zoomAdjustedToSteps =
     Math.floor(smallestZoomValue / ZOOM_STEP) * ZOOM_STEP;
   const clampedZoomValueToFitElements = Math.min(
-    Math.max(zoomAdjustedToSteps, ZOOM_STEP),
+    Math.max(zoomAdjustedToSteps, MIN_ZOOM),
     1,
   );
   return clampedZoomValueToFitElements as NormalizedZoomValue;

src/components/App.tsx

@@ -76,6 +76,7 @@ import {
   THEME,
   TOUCH_CTX_MENU_TIMEOUT,
   VERTICAL_ALIGN,
+  ZOOM_STEP,
 } from "../constants";
 import { loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
@@ -6097,7 +6098,7 @@ class App extends React.Component<AppProps, AppState> {
     // note that event.ctrlKey is necessary to handle pinch zooming
     if (event.metaKey || event.ctrlKey) {
       const sign = Math.sign(deltaY);
-      const MAX_STEP = 10;
+      const MAX_STEP = ZOOM_STEP * 100;
       const absDelta = Math.abs(deltaY);
       let delta = deltaY;
       if (absDelta > MAX_STEP) {

src/constants.ts

@@ -122,6 +122,7 @@ export const TITLE_TIMEOUT = 10000;
 export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
 export const ZOOM_STEP = 0.1;
+export const MIN_ZOOM = 0.1;
 export const HYPERLINK_TOOLTIP_DELAY = 300;
 
 // Report a user inactive after IDLE_THRESHOLD milliseconds

src/scene/zoom.ts

@@ -1,7 +1,8 @@
+import { MIN_ZOOM } from "../constants";
 import { AppState, NormalizedZoomValue } from "../types";
 
 export const getNormalizedZoom = (zoom: number): NormalizedZoomValue => {
-  return Math.max(0.1, Math.min(zoom, 30)) as NormalizedZoomValue;
+  return Math.max(MIN_ZOOM, Math.min(zoom, 30)) as NormalizedZoomValue;
 };
 
 export const getStateForZoom = (