fix: iOS touch in segmentation brush mode

src/components/ImageView/ImageView.js

@@ -338,11 +338,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);
     };
   }, []);
 
@@ -559,7 +563,14 @@ export default observer(
       }, this.props.item.annotation.isDrawing ? 0 : 100));
     };
 
+    preventDefaultTouch = e => {
+      if (e.type.startsWith('touch')) {
+        e.preventDefault();
+      }
+    };
+
     handleMouseDown = e => {
+      this.preventDefaultTouch(e.evt);
       const { item } = this.props;
       const isPanTool = item.getToolsManager().findSelectedTool()?.fullName === 'ZoomPanTool';
       const isMoveTool = item.getToolsManager().findSelectedTool()?.fullName === 'MoveTool';
@@ -604,7 +615,11 @@ export default observer(
         ) {
           window.addEventListener('mousemove', this.handleGlobalMouseMove);
           window.addEventListener('mouseup', this.handleGlobalMouseUp);
-          const { offsetX: x, offsetY: y } = e.evt;
+          window.addEventListener('touchmove', this.handleGlobalMouseMove);
+          window.addEventListener('touchend', this.handleGlobalMouseUp);
+
+          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();
 
@@ -656,7 +671,9 @@ 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;
 
       const { item } = this.props;
@@ -680,6 +697,7 @@ export default observer(
      * Mouse up on Stage
      */
     handleMouseUp = e => {
+      this.preventDefaultTouch(e.evt);
       const { item } = this.props;
 
       if (isFF(FF_DEV_1442)) {
@@ -689,10 +707,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();
@@ -719,7 +738,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);
       }
     };
 
@@ -1093,6 +1112,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 && (