Added max zoom based off of map size and normalized wheelY by window height

src/components/map/MapEditor.js

@@ -6,7 +6,7 @@ import ReactResizeDetector from "react-resize-detector";
 import useMapImage from "../../helpers/useMapImage";
 import usePreventOverscroll from "../../helpers/usePreventOverscroll";
 import useStageInteraction from "../../helpers/useStageInteraction";
-import { getMapDefaultInset } from "../../helpers/map";
+import { getMapDefaultInset, getMapMaxZoom } from "../../helpers/map";
 
 import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
 import KeyboardContext from "../../contexts/KeyboardContext";
@@ -86,6 +86,7 @@ function MapEditor({ map, onSettingsChange }) {
     stageScale,
     setStageScale,
     stageTranslateRef,
+    getMapMaxZoom(map),
     "pan",
     preventMapInteraction
   );

src/components/map/MapInteraction.js

@@ -8,6 +8,7 @@ import useMapImage from "../../helpers/useMapImage";
 import usePreventOverscroll from "../../helpers/usePreventOverscroll";
 import useKeyboard from "../../helpers/useKeyboard";
 import useStageInteraction from "../../helpers/useStageInteraction";
+import { getMapMaxZoom } from "../../helpers/map";
 
 import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
 import MapStageContext, {
@@ -88,6 +89,7 @@ function MapInteraction({
     stageScale,
     setStageScale,
     stageTranslateRef,
+    getMapMaxZoom(map),
     selectedToolId,
     preventMapInteraction,
     {

src/components/token/TokenPreview.js

@@ -97,6 +97,7 @@ function TokenPreview({ token }) {
     stageScale,
     setStageScale,
     stageTranslateRef,
+    10,
     "pan"
   );
 

src/helpers/map.js

@@ -152,3 +152,11 @@ export async function getGridSize(image) {
 
   return prediction;
 }
+
+export function getMapMaxZoom(map) {
+  if (!map) {
+    return 10;
+  }
+  // Return max grid size / 2
+  return Math.max(Math.min(map.grid.size.x, map.grid.size.y) / 2, 5);
+}

src/helpers/useStageInteraction.js

@@ -2,16 +2,16 @@ import { useRef } from "react";
 import { useGesture } from "react-use-gesture";
 import normalizeWheel from "normalize-wheel";
 
-const wheelZoomSpeed = -0.001;
+const wheelZoomSpeed = -1;
 const touchZoomSpeed = 0.005;
 const minZoom = 0.1;
-const maxZoom = 10;
 
 function useStageInteraction(
   layer,
   stageScale,
   onStageScaleChange,
   stageTranslateRef,
+  maxZoom = 10,
   tool = "pan",
   preventInteraction = false,
   gesture = {}
@@ -36,7 +36,11 @@ function useStageInteraction(
         return;
       }
       const newScale = Math.min(
-        Math.max(stageScale + pixelY * wheelZoomSpeed, minZoom),
+        Math.max(
+          stageScale +
+            (pixelY * wheelZoomSpeed * (stageScale + 1)) / window.innerHeight,
+          minZoom
+        ),
         maxZoom
       );
       onStageScaleChange(newScale);