Moved to domTarget for useGesture to fix pinch zoom error on Mac

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

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}>

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

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;