diff --git a/src/components/ImageView/ImageView.js b/src/components/ImageView/ImageView.js index d54804e28..4c6ec3189 100644 --- a/src/components/ImageView/ImageView.js +++ b/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 && (