From 081b969ee9971e8fddaa8320c5e835281a8965a7 Mon Sep 17 00:00:00 2001
From: Madhava Jay <me@madhavajay.com>
Date: Sat, 6 Aug 2022 14:00:53 +1000
Subject: [PATCH 1/2] Added touch events for ImageView canvas

- added e.preventDefault on touch canvas
- added fallback to e.layerX, e.layerY when e.offsetX, e.offsetY missing
---
 src/components/ImageView/ImageView.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageView/ImageView.js b/src/components/ImageView/ImageView.js
index d25f48f152..b2cee0dfb1 100644
--- a/src/components/ImageView/ImageView.js
+++ b/src/components/ImageView/ImageView.js
@@ -305,11 +305,15 @@ const SelectionLayer = observer(({ item, selectionArea }) => {
     window.addEventListener("keyup", handleKey);
     window.addEventListener("mousedown", dragHandler);
     window.addEventListener("mouseup", dragHandler);
+    window.addEventListener("touchstart", dragHandler);
+    window.addEventListener("touchend", dragHandler);
     return () => {
       window.removeEventListener("keydown", handleKey);
       window.removeEventListener("keyup", handleKey);
       window.removeEventListener("mousedown", dragHandler);
       window.removeEventListener("mouseup", dragHandler);
+      window.removeEventListener("touchstart", dragHandler);
+      window.removeEventListener("touchend", dragHandler);
     };
   },[]);
 
@@ -503,7 +507,14 @@ export default observer(
       }, 100);
     }
 
+    preventDefaultTouch = e => {
+      if (e.type.startsWith("touch")) {
+        e.preventDefault();
+      }
+    }
+
     handleMouseDown = e => {
+      this.preventDefaultTouch(e.evt);
       const { item } = this.props;
   
       item.updateSkipInteractions(e);
@@ -526,6 +537,8 @@ export default observer(
         ) {
           window.addEventListener("mousemove", this.handleGlobalMouseMove);
           window.addEventListener("mouseup", this.handleGlobalMouseUp);
+          window.addEventListener("touchmove", this.handleGlobalMouseMove);
+          window.addEventListener("touchend", this.handleGlobalMouseUp);
           const { offsetX: x, offsetY: y } = e.evt;
           // store the canvas coords for calculations in further events
           const { left, top } = item.containerRef.getBoundingClientRect();
@@ -578,6 +591,8 @@ export default observer(
     handleGlobalMouseUp = e => {
       window.removeEventListener("mousemove", this.handleGlobalMouseMove);
       window.removeEventListener("mouseup", this.handleGlobalMouseUp);
+      window.removeEventListener("touchmove", this.handleGlobalMouseMove);
+      window.removeEventListener("touchend", this.handleGlobalMouseUp);
       
       if (e.target && e.target.tagName === "CANVAS") return;
 
@@ -602,6 +617,7 @@ export default observer(
      * Mouse up on Stage
      */
     handleMouseUp = e => {
+      this.preventDefaultTouch(e.evt);
       const { item } = this.props;
 
       if (isFF(FF_DEV_1442)) {
@@ -611,10 +627,11 @@ export default observer(
       item.freezeHistory();
       item.setSkipInteractions(false);
 
-      return item.event("mouseup", e, e.evt.offsetX, e.evt.offsetY);
+      return item.event("mouseup", e, e.evt.offsetX ?? e.evt.layerX, e.evt.offsetY ?? e.evt.layerY);
     };
 
     handleMouseMove = e => {
+      this.preventDefaultTouch(e.evt);
       const { item } = this.props;
       
       item.freezeHistory();
@@ -642,7 +659,7 @@ export default observer(
 
         item.setZoomPosition(newPos.x, newPos.y);
       } else {
-        item.event("mousemove", e, e.evt.offsetX, e.evt.offsetY);
+        item.event("mousemove", e, e.evt.offsetX ?? e.evt.layerX, e.evt.offsetY ?? e.evt.layerY);
       }
     };
 
@@ -948,6 +965,9 @@ export default observer(
                 onMouseUp={this.handleMouseUp}
                 onWheel={item.zoom ? this.handleZoom : () => {
                 }}
+                onTouchStart={this.handleMouseDown}
+                onTouchMove={this.handleMouseMove}
+                onTouchEnd={this.handleMouseUp}
               >
                 {/* Hack to keep stage in place when there's no regions */}
                 {regions.length === 0 && (

From b36e69c3ad510e9c22d9990c14f2f3f4c61afa7d Mon Sep 17 00:00:00 2001
From: Madhava Jay <me@madhavajay.com>
Date: Sat, 6 Aug 2022 14:07:24 +1000
Subject: [PATCH 2/2] More layer fallback for offset in touch mode

---
 src/components/ImageView/ImageView.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ImageView/ImageView.js b/src/components/ImageView/ImageView.js
index b2cee0dfb1..829ab3962b 100644
--- a/src/components/ImageView/ImageView.js
+++ b/src/components/ImageView/ImageView.js
@@ -539,7 +539,9 @@ export default observer(
           window.addEventListener("mouseup", this.handleGlobalMouseUp);
           window.addEventListener("touchmove", this.handleGlobalMouseMove);
           window.addEventListener("touchend", this.handleGlobalMouseUp);
-          const { offsetX: x, offsetY: y } = e.evt;
+
+          const x = e.evt.offsetX ?? e.evt.layerX;
+          const y = e.evt.offsetY ?? e.evt.layerY;
           // store the canvas coords for calculations in further events
           const { left, top } = item.containerRef.getBoundingClientRect();