From 291fd1512c570060db76cf8b8daa1f916c8a7b45 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sun, 7 Feb 2021 20:44:30 +1100
Subject: [PATCH] Moved to domTarget for useGesture to fix pinch zoom error on
 Mac

---
 src/components/map/MapEditor.js      |  3 +--
 src/components/map/MapInteraction.js |  3 +--
 src/components/token/TokenPreview.js |  3 +--
 src/hooks/useStageInteraction.js     | 29 +++++++++++++++++++++-------
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/map/MapEditor.js b/src/components/map/MapEditor.js
index 134d55f..01c553b 100644
--- a/src/components/map/MapEditor.js
+++ b/src/components/map/MapEditor.js
@@ -56,7 +56,7 @@ function MapEditor({ map, onSettingsChange }) {
     true
   );
 
-  const bind = useStageInteraction(
+  useStageInteraction(
     mapStageRef.current,
     stageScale,
     setStageScale,
@@ -117,7 +117,6 @@ function MapEditor({ map, onSettingsChange }) {
       }}
       bg="muted"
       ref={containerRef}
-      {...bind()}
     >
       <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
         <Stage
diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index ce2fd31..22650e3 100644
--- a/src/components/map/MapInteraction.js
+++ b/src/components/map/MapInteraction.js
@@ -81,7 +81,7 @@ function MapInteraction({
 
   const [interactionEmitter] = useState(new EventEmitter());
 
-  const bind = useStageInteraction(
+  useStageInteraction(
     mapStageRef.current,
     stageScale,
     setStageScale,
@@ -199,7 +199,6 @@ function MapInteraction({
         outline: "none",
       }}
       ref={containerRef}
-      {...bind()}
       className="map"
     >
       <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
diff --git a/src/components/token/TokenPreview.js b/src/components/token/TokenPreview.js
index e13b044..f731773 100644
--- a/src/components/token/TokenPreview.js
+++ b/src/components/token/TokenPreview.js
@@ -62,7 +62,7 @@ function TokenPreview({ token }) {
     true
   );
 
-  const bind = useStageInteraction(
+  useStageInteraction(
     tokenStageRef.current,
     stageScale,
     setStageScale,
@@ -95,7 +95,6 @@ function TokenPreview({ token }) {
       }}
       bg="muted"
       ref={containerRef}
-      {...bind()}
     >
       <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
         <Stage
diff --git a/src/hooks/useStageInteraction.js b/src/hooks/useStageInteraction.js
index 26b45a6..2dcfb3c 100644
--- a/src/hooks/useStageInteraction.js
+++ b/src/hooks/useStageInteraction.js
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 import { useGesture } from "react-use-gesture";
 import normalizeWheel from "normalize-wheel";
 
@@ -21,7 +21,20 @@ function useStageInteraction(
   const pinchPreviousDistanceRef = useRef();
   const pinchPreviousOriginRef = useRef();
 
-  const bind = useGesture(
+  // Prevent accessibility pinch to zoom on Mac
+  useEffect(() => {
+    function handleGesture(e) {
+      e.preventDefault();
+    }
+    window.addEventListener("gesturestart", handleGesture);
+    window.addEventListener("gesturechange", handleGesture);
+    return () => {
+      window.removeEventListener("gesturestart", handleGesture);
+      window.removeEventListener("gesturechange", handleGesture);
+    };
+  });
+
+  useGesture(
     {
       ...gesture,
       onWheelStart: (props) => {
@@ -31,12 +44,12 @@ function useStageInteraction(
         gesture.onWheelStart && gesture.onWheelStart(props);
       },
       onWheel: (props) => {
-        const { event } = props;
-        event.persist();
-        const { pixelY } = normalizeWheel(event);
         if (preventInteraction || !isInteractingWithCanvas.current) {
           return;
         }
+        const { event } = props;
+        const { pixelY } = normalizeWheel(event);
+
         const newScale = Math.min(
           Math.max(
             stageScale +
@@ -154,10 +167,12 @@ function useStageInteraction(
     {
       // Fix drawing using old pointer end position on touch devices when drawing new shapes
       drag: { delay: 300 },
+      domTarget: window,
+      eventOptions: {
+        passive: false,
+      },
     }
   );
-
-  return bind;
 }
 
 export default useStageInteraction;