From 5f2d282df8a4a1f2495e84e93b922813e8503bdc Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 22 May 2020 23:43:55 +1000
Subject: [PATCH] Added pinch to zoom for map

---
 src/components/map/MapInteraction.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index 837a49c..516e120 100644
--- a/src/components/map/MapInteraction.js
+++ b/src/components/map/MapInteraction.js
@@ -14,7 +14,8 @@ import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
 import MapStageContext from "../../contexts/MapStageContext";
 import AuthContext from "../../contexts/AuthContext";
 
-const zoomSpeed = -0.001;
+const wheelZoomSpeed = 0.001;
+const touchZoomSpeed = 0.01;
 const minZoom = 0.1;
 const maxZoom = 5;
 
@@ -65,7 +66,16 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
   const bind = useGesture({
     onWheel: ({ delta }) => {
       const newScale = Math.min(
-        Math.max(stageScale - delta[1] * zoomSpeed, minZoom),
+        Math.max(stageScale + delta[1] * wheelZoomSpeed, minZoom),
+        maxZoom
+      );
+      setStageScale(newScale);
+      stageScaleRef.current = newScale;
+    },
+    onPinch: ({ offset }) => {
+      const [d] = offset;
+      const newScale = Math.min(
+        Math.max(1 + d * touchZoomSpeed, minZoom),
         maxZoom
       );
       setStageScale(newScale);
@@ -141,6 +151,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
         flexGrow: 1,
         position: "relative",
         cursor: getCursorForTool(selectedToolId),
+        touchAction: "none",
       }}
       ref={containerRef}
       {...bind()}