issue #982 - a ux improvement on skipping rotation while pinching on …

…mobile devices
jscad · Jan 26, 2022 · d020b31 · d020b31
1 parent 046e57b
commit d020b31
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/packages/web/src/most-gestures/drags.js b/packages/web/src/most-gestures/drags.js
@@ -1,5 +1,19 @@
 const { merge } = require('most')
 
+let isPinching = false;
+
+if (typeof window !== "undefined") {
+  window.addEventListener('pinchStarted', (e) => {
+    //console.log("received pinch started");
+    isPinching = true;
+  });
+
+  window.addEventListener('pinchEnded', (e) => {
+    //console.log("received pinch ended");
+    isPinching = false;
+  });
+}
+
 // based on http://jsfiddle.net/mattpodwysocki/pfCqq/
 const mouseDrags = (mouseDowns$, mouseUps, mouseMoves, settings) => {
   const { pixelRatio } = settings
@@ -47,6 +61,7 @@ const touchDrags = (touchStarts$, touchEnds$, touchMoves$, settings) => {
       let prevY = startY
 
       return touchMoves$
+        .takeWhile((e) => isPinching === false)
         .map((e) => {
           const curX = e.touches[0].pageX * pixelRatio
           const curY = e.touches[0].pageY * pixelRatio

diff --git a/packages/web/src/most-gestures/zooms.js b/packages/web/src/most-gestures/zooms.js
@@ -1,5 +1,15 @@
 const { merge } = require('most')
 
+if (typeof CustomEvent !== "undefined") {
+  const pinchStarted = new CustomEvent('pinchStarted', {
+    detail: true
+  });
+
+  const pinchEnded = new CustomEvent('pinchEnded', {
+    detail: true
+  });
+}
+
 const pinchZooms = ({ touchStarts$, touchMoves$, touchEnds$ }, settings) => {
   const { pixelRatio, pinchThreshold } = settings
   // generic custom gesture handling
@@ -18,6 +28,12 @@ const pinchZooms = ({ touchStarts$, touchMoves$, touchEnds$ }, settings) => {
       return touchMoves$
         .tap((e) => e.preventDefault())
         .filter((t) => t.touches.length === 2)
+        .tap((e) => {
+          //console.log("pinch started");
+          if (typeof pinchStarted !== "undefined") {
+            window.dispatchEvent(pinchStarted);
+          }
+        })
         .map((e) => {
           const curX1 = e.touches[0].pageX * pixelRatio
           const curY1 = e.touches[0].pageY * pixelRatio
@@ -43,7 +59,12 @@ const pinchZooms = ({ touchStarts$, touchMoves$, touchEnds$ }, settings) => {
           const scale = e > 0 ? Math.sqrt(e) : -Math.sqrt(Math.abs(e))
           return scale
         }) */
-        .takeUntil(touchEnds$)
+        .takeUntil(touchEnds$.tap((e) => {
+          //console.log("pinch ended"); 
+          if (typeof pinchStarted !== "undefined") {
+            window.dispatchEvent(pinchEnded);
+          }
+        }))
     })
 }