From 1c79032f308bcb04547786c1814313fe32162ea3 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 22 Oct 2020 12:51:37 +1100
Subject: [PATCH] Added max zoom based off of map size and normalized wheelY by
 window height

---
 src/components/map/MapEditor.js      |  3 ++-
 src/components/map/MapInteraction.js |  2 ++
 src/components/token/TokenPreview.js |  1 +
 src/helpers/map.js                   |  8 ++++++++
 src/helpers/useStageInteraction.js   | 10 +++++++---
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/map/MapEditor.js b/src/components/map/MapEditor.js
index fb649d8..9841020 100644
--- a/src/components/map/MapEditor.js
+++ b/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
   );
diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index e70e447..45e156d 100644
--- a/src/components/map/MapInteraction.js
+++ b/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,
     {
diff --git a/src/components/token/TokenPreview.js b/src/components/token/TokenPreview.js
index 33033e4..d659908 100644
--- a/src/components/token/TokenPreview.js
+++ b/src/components/token/TokenPreview.js
@@ -97,6 +97,7 @@ function TokenPreview({ token }) {
     stageScale,
     setStageScale,
     stageTranslateRef,
+    10,
     "pan"
   );
 
diff --git a/src/helpers/map.js b/src/helpers/map.js
index cb70300..b59601b 100644
--- a/src/helpers/map.js
+++ b/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);
+}
diff --git a/src/helpers/useStageInteraction.js b/src/helpers/useStageInteraction.js
index 21cf9a0..9ca556f 100644
--- a/src/helpers/useStageInteraction.js
+++ b/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);