@cornerstonejs/tools 5.6.14 → 5.7.0

package/dist/esm/eventDispatchers/shared/getTouchCallbackWithMouseFallback.d.ts

@@ -0,0 +1 @@
+export default function getTouchCallbackWithMouseFallback(tool: any, touchCallbackName: string, mouseCallbackName: string): ((evt: any) => unknown) | undefined;

package/dist/esm/eventDispatchers/shared/getTouchCallbackWithMouseFallback.js

@@ -0,0 +1,24 @@
+import { MouseBindings } from '../../enums/index.js';
+function augmentTouchDetailForMouseCallback(detail) {
+    detail.mouseButton ??= MouseBindings.Primary;
+    detail.startPoints ??= detail.currentPoints;
+    detail.lastPoints ??= detail.currentPoints;
+    detail.deltaPoints ??= {
+        page: [0, 0],
+        client: [0, 0],
+        canvas: [0, 0],
+        world: [0, 0, 0],
+    };
+}
+export default function getTouchCallbackWithMouseFallback(tool, touchCallbackName, mouseCallbackName) {
+    if (typeof tool?.[touchCallbackName] === 'function') {
+        return (evt) => tool[touchCallbackName](evt);
+    }
+    if (tool?.supportedInteractionTypes?.includes('Touch') &&
+        typeof tool[mouseCallbackName] === 'function') {
+        return (evt) => {
+            augmentTouchDetailForMouseCallback(evt.detail);
+            return tool[mouseCallbackName](evt);
+        };
+    }
+}

package/dist/esm/eventDispatchers/shared/releaseToolForMultiTouchGesture.d.ts

@@ -0,0 +1,2 @@
+import type { EventTypes } from '../../types/index.js';
+export default function releaseToolForMultiTouchGesture(evt: EventTypes.TouchDragEventType): boolean;

package/dist/esm/eventDispatchers/shared/releaseToolForMultiTouchGesture.js

@@ -0,0 +1,30 @@
+import { state } from '../../store/state.js';
+import { getToolGroupForViewport } from '../../store/ToolGroupManager/index.js';
+export default function releaseToolForMultiTouchGesture(evt) {
+    if (!state.isInteractingWithTool) {
+        return false;
+    }
+    if (!(evt.detail.currentPointsList?.length > 1)) {
+        return false;
+    }
+    const { renderingEngineId, viewportId, element } = evt.detail;
+    const toolGroup = getToolGroupForViewport(viewportId, renderingEngineId);
+    if (!toolGroup) {
+        return false;
+    }
+    let bypassInteractionGuard = false;
+    for (const toolName of Object.keys(toolGroup.toolOptions)) {
+        const tool = toolGroup.getToolInstance(toolName);
+        if (!tool) {
+            continue;
+        }
+        if (tool.handlesMultiTouchGestures) {
+            if (tool.isDrawing) {
+                bypassInteractionGuard = true;
+            }
+            continue;
+        }
+        tool.cancel?.(element);
+    }
+    return bypassInteractionGuard;
+}

package/dist/esm/eventDispatchers/touchEventHandlers/touchDrag.js

@@ -1,13 +1,16 @@
 import getActiveToolForTouchEvent from '../shared/getActiveToolForTouchEvent.js';
+import getTouchCallbackWithMouseFallback from '../shared/getTouchCallbackWithMouseFallback.js';
+import releaseToolForMultiTouchGesture from '../shared/releaseToolForMultiTouchGesture.js';
 import { state } from '../../store/state.js';
 export default function touchDrag(evt) {
-    if (state.isInteractingWithTool) {
+    const bypassInteractionGuard = releaseToolForMultiTouchGesture(evt);
+    if (state.isInteractingWithTool && !bypassInteractionGuard) {
         return;
     }
     const activeTool = getActiveToolForTouchEvent(evt);
-    const noFoundToolOrDoesNotHaveTouchDragCallback = !activeTool || typeof activeTool.touchDragCallback !== 'function';
-    if (noFoundToolOrDoesNotHaveTouchDragCallback) {
+    const dragCallback = getTouchCallbackWithMouseFallback(activeTool, 'touchDragCallback', 'mouseDragCallback');
+    if (!dragCallback) {
         return;
     }
-    activeTool.touchDragCallback(evt);
+    dragCallback(evt);
 }

package/dist/esm/eventDispatchers/touchEventHandlers/touchStart.js

@@ -7,6 +7,7 @@ import filterToolsWithMoveableHandles from '../../store/filterToolsWithMoveableH
 import filterToolsWithAnnotationsForElement from '../../store/filterToolsWithAnnotationsForElement.js';
 import filterMoveableAnnotationTools from '../../store/filterMoveableAnnotationTools.js';
 import getActiveToolForTouchEvent from '../shared/getActiveToolForTouchEvent.js';
+import getTouchCallbackWithMouseFallback from '../shared/getTouchCallbackWithMouseFallback.js';
 import getToolsWithModesForTouchEvent from '../shared/getToolsWithModesForTouchEvent.js';
 const { Active, Passive } = ToolModes;
 export default function touchStart(evt) {
@@ -14,8 +15,9 @@ export default function touchStart(evt) {
         return;
     }
     const activeTool = getActiveToolForTouchEvent(evt);
-    if (activeTool && typeof activeTool.preTouchStartCallback === 'function') {
-        const consumedEvent = activeTool.preTouchStartCallback(evt);
+    const preCallback = getTouchCallbackWithMouseFallback(activeTool, 'preTouchStartCallback', 'preMouseDownCallback');
+    if (preCallback) {
+        const consumedEvent = preCallback(evt);
         if (consumedEvent) {
             return;
         }
@@ -45,8 +47,9 @@ export default function touchStart(evt) {
         tool.toolSelectedCallback(evt, annotation, 'Touch', canvasCoords);
         return;
     }
-    if (activeTool && typeof activeTool.postTouchStartCallback === 'function') {
-        const consumedEvent = activeTool.postTouchStartCallback(evt);
+    const postCallback = getTouchCallbackWithMouseFallback(activeTool, 'postTouchStartCallback', 'postMouseDownCallback');
+    if (postCallback) {
+        const consumedEvent = postCallback(evt);
         if (consumedEvent) {
             return;
         }

package/dist/esm/eventDispatchers/touchEventHandlers/touchStartActivate.js

@@ -13,7 +13,12 @@ export default function touchStartActivate(evt) {
         return;
     }
     if (activeTool.addNewAnnotation) {
-        const annotation = activeTool.addNewAnnotation(evt, 'touch');
-        setAnnotationSelected(annotation.annotationUID);
+        try {
+            const annotation = activeTool.addNewAnnotation(evt, 'touch');
+            setAnnotationSelected(annotation.annotationUID);
+        }
+        catch (error) {
+            console.warn('Error adding new annotation, viewport not ready:', error);
+        }
     }
 }

package/dist/esm/eventDispatchers/touchEventHandlers/touchTap.d.ts

@@ -1,2 +1,2 @@
-declare const touchTap: (evt: any) => boolean;
-export default touchTap;
+import type { EventTypes } from '../../types/index.js';
+export default function touchTap(evt: EventTypes.TouchTapEventType): void;

package/dist/esm/eventDispatchers/touchEventHandlers/touchTap.js

@@ -1,3 +1,29 @@
-import customCallbackHandler from '../shared/customCallbackHandler.js';
-const touchTap = customCallbackHandler.bind(null, 'Touch', 'touchTapCallback');
-export default touchTap;
+import { state } from '../../store/state.js';
+import ToolModes from '../../enums/ToolModes.js';
+import { getToolGroupForViewport } from '../../store/ToolGroupManager/index.js';
+import getTouchCallbackWithMouseFallback from '../shared/getTouchCallbackWithMouseFallback.js';
+const { Active } = ToolModes;
+export default function touchTap(evt) {
+    if (state.isInteractingWithTool) {
+        return;
+    }
+    const { renderingEngineId, viewportId } = evt.detail;
+    const toolGroup = getToolGroupForViewport(viewportId, renderingEngineId);
+    if (!toolGroup) {
+        return;
+    }
+    const toolGroupToolNames = Object.keys(toolGroup.toolOptions);
+    for (let j = 0; j < toolGroupToolNames.length; j++) {
+        const toolName = toolGroupToolNames[j];
+        const toolOptions = toolGroup.toolOptions[toolName];
+        if (toolOptions.mode !== Active) {
+            continue;
+        }
+        const toolInstance = toolGroup.getToolInstance(toolName);
+        const tapCallback = getTouchCallbackWithMouseFallback(toolInstance, 'touchTapCallback', 'mouseClickCallback');
+        if (tapCallback) {
+            tapCallback(evt);
+            return;
+        }
+    }
+}

package/dist/esm/eventDispatchers/touchToolEventDispatcher.js

@@ -13,6 +13,7 @@ const disable = function (element) {
     element.removeEventListener(Events.TOUCH_START_ACTIVATE, touchStartActivate);
     element.removeEventListener(Events.TOUCH_DRAG, touchDrag);
     element.removeEventListener(Events.TOUCH_END, touchEnd);
+    element.removeEventListener(Events.TOUCH_TAP, touchTap);
     element.removeEventListener(Events.TOUCH_PRESS, touchPress);
 };
 const touchToolEventDispatcher = {

package/dist/esm/eventListeners/touch/touchStartListener.js

@@ -3,6 +3,7 @@ import Events from '../../enums/Events.js';
 import { Swipe } from '../../enums/Touch.js';
 import getTouchEventPoints from './getTouchEventPoints.js';
 import { copyPoints, copyPointsList, getDeltaDistanceBetweenIPoints, getDeltaDistance, getDeltaPoints, getMeanTouchPoints, } from '../../utilities/touch/index.js';
+import { TOUCH_TAP_MAX_CANVAS_DISTANCE, TOUCH_TAP_TOLERANCE_MS, } from '../../utilities/touch/constants.js';
 import { Settings } from '@cornerstonejs/core';
 const runtimeSettings = Settings.getRuntimeSettings();
 const { TOUCH_START, TOUCH_START_ACTIVATE, TOUCH_PRESS, TOUCH_DRAG, TOUCH_END, TOUCH_TAP, TOUCH_SWIPE, } = Events;
@@ -56,8 +57,8 @@ const defaultTapState = {
     ],
     taps: 0,
     tapTimeout: null,
-    tapMaxDistance: 24,
-    tapToleranceMs: 300,
+    tapMaxDistance: TOUCH_TAP_MAX_CANVAS_DISTANCE,
+    tapToleranceMs: TOUCH_TAP_TOLERANCE_MS,
 };
 let state = utilities.deepClone(defaultState);
 let tapState = utilities.deepClone(defaultTapState);
@@ -224,6 +225,10 @@ function _checkTouchTap(evt) {
     clearTimeout(tapState.tapTimeout);
     tapState.taps += 1;
     tapState.tapTimeout = setTimeout(() => {
+        if (state.isTouchStart) {
+            tapState = utilities.deepClone(defaultTapState);
+            return;
+        }
         const eventDetail = {
             event: evt,
             eventName: TOUCH_TAP,

package/dist/esm/store/ToolGroupManager/ToolGroup.js

@@ -407,7 +407,7 @@ export default class ToolGroup {
             const sourceToolMode = sourceToolInstance.mode;
             toolGroup.addTool(toolName);
             toolGroup.setToolMode(toolName, sourceToolMode, {
-                bindings: sourceToolOptions.bindings ?? [],
+                bindings: sourceToolOptions?.bindings ?? [],
             });
         });
         return toolGroup;

package/dist/esm/store/filterMoveableAnnotationTools.js

@@ -1,5 +1,6 @@
+import { MOUSE_PROXIMITY, TOUCH_PROXIMITY } from '../utilities/touch/constants.js';
 export default function filterMoveableAnnotationTools(element, ToolAndAnnotations, canvasCoords, interactionType = 'mouse') {
-    const proximity = interactionType === 'touch' ? 36 : 6;
+    const proximity = interactionType === 'touch' ? TOUCH_PROXIMITY : MOUSE_PROXIMITY;
     const moveableAnnotationTools = [];
     ToolAndAnnotations.forEach(({ tool, annotations }) => {
         for (const annotation of annotations) {

package/dist/esm/store/filterToolsWithMoveableHandles.js

@@ -1,5 +1,6 @@
+import { MOUSE_PROXIMITY, TOUCH_PROXIMITY } from '../utilities/touch/constants.js';
 export default function filterToolsWithMoveableHandles(element, ToolAndAnnotations, canvasCoords, interactionType = 'mouse') {
-    const proximity = interactionType === 'touch' ? 36 : 6;
+    const proximity = interactionType === 'touch' ? TOUCH_PROXIMITY : MOUSE_PROXIMITY;
     const toolsWithMoveableHandles = [];
     ToolAndAnnotations.forEach(({ tool, annotations }) => {
         for (const annotation of annotations) {

package/dist/esm/tools/AdvancedMagnifyTool.d.ts

@@ -55,18 +55,20 @@ declare class AdvancedMagnifyTool extends AnnotationTool {
     constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
     addNewAnnotation: (evt: EventTypes.InteractionEventType) => AdvancedMagnifyAnnotation;
     onSetToolDisabled: () => void;
-    isPointNearTool: (element: HTMLDivElement, annotation: AdvancedMagnifyAnnotation, canvasCoords: Types.Point2, proximity: number) => boolean;
+    isPointNearTool: (element: HTMLDivElement, annotation: AdvancedMagnifyAnnotation, canvasCoords: Types.Point2, proximity: number, interactionType?: string) => boolean;
     toolSelectedCallback: (evt: EventTypes.InteractionEventType, annotation: AdvancedMagnifyAnnotation) => void;
     handleSelectedCallback: (evt: EventTypes.InteractionEventType, annotation: AdvancedMagnifyAnnotation, handle: ToolHandle) => void;
-    _endCallback: (evt: EventTypes.InteractionEventType) => void;
+    _endCallback: (evt: EventTypes.InteractionEventType | EventTypes.TouchPressEventType) => void;
     _dragDrawCallback: (evt: EventTypes.InteractionEventType) => void;
     _dragModifyCallback: (evt: EventTypes.InteractionEventType) => void;
+    _pressModifyCallback: (evt: EventTypes.TouchPressEventType) => void;
     _dragHandle: (evt: EventTypes.InteractionEventType) => void;
     cancel: (element: HTMLDivElement) => string;
     _activateModify: (element: any) => void;
     _deactivateModify: (element: any) => void;
     renderAnnotation: (enabledElement: Types.IEnabledElement, svgDrawingHelper: SVGDrawingHelper) => boolean;
-    showZoomFactorsList(evt: EventTypes.InteractionEventType, annotation: AdvancedMagnifyAnnotation): void;
+    showZoomFactorsList(evt: EventTypes.InteractionEventType | EventTypes.TouchPressEventType, annotation: AdvancedMagnifyAnnotation): void;
+    touchPressCallback: (evt: EventTypes.TouchPressEventType) => void;
     private _getZoomFactorsListDropdown;
     private _getWorldHandlePoints;
     private _getCanvasCircleData;
@@ -85,11 +87,12 @@ declare class AdvancedMagnifyViewport {
     private _resized;
     private _resizeViewportAsync;
     private _canAutoPan;
+    private _annotation;
     private _autoPan;
     position: Types.Point2;
     zoomFactor: number;
     visible: boolean;
-    constructor({ magnifyViewportId, sourceEnabledElement, radius, position, zoomFactor, autoPan, }: {
+    constructor({ magnifyViewportId, sourceEnabledElement, radius, position, zoomFactor, autoPan, annotation, }: {
         magnifyViewportId?: string;
         sourceEnabledElement: Types.IEnabledElement;
         radius?: number;
@@ -100,6 +103,7 @@ declare class AdvancedMagnifyViewport {
             padding: number;
             callback: AutoPanCallback;
         };
+        annotation?: AdvancedMagnifyAnnotation;
     });
     get sourceEnabledElement(): Types.IEnabledElement;
     get viewportId(): string;
@@ -120,7 +124,10 @@ declare class AdvancedMagnifyViewport {
     private _cancelMouseEventCallback;
     private _browserMouseUpCallback;
     private _browserMouseDownCallback;
+    private _browserTouchEndCallback;
+    private _browserTouchStartCallback;
     private _mouseDragCallback;
+    private _touchPressCallback;
     private _addBrowserEventListeners;
     private _removeBrowserEventListeners;
     private _addEventListeners;

package/dist/esm/tools/AdvancedMagnifyTool.js

@@ -135,7 +135,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
                 }
             });
         };
-        this.isPointNearTool = (element, annotation, canvasCoords, proximity) => {
+        this.isPointNearTool = (element, annotation, canvasCoords, proximity, interactionType) => {
             const { viewport } = getEnabledElement(element);
             const { points } = annotation.data.handles;
             const { radius, center } = this._getCanvasCircleData(viewport, points);
@@ -143,6 +143,9 @@ class AdvancedMagnifyTool extends AnnotationTool {
             if (Math.abs(radiusPoint - radius) < proximity * 2) {
                 return true;
             }
+            if (interactionType === 'touch' && radiusPoint < radius) {
+                return true;
+            }
             return false;
         };
         this.toolSelectedCallback = (evt, annotation) => {
@@ -227,6 +230,17 @@ class AdvancedMagnifyTool extends AnnotationTool {
             }
             triggerAnnotationRenderForViewportIds(viewportIdsToRender);
         };
+        this._pressModifyCallback = (evt) => {
+            const { element, startPoints } = evt.detail;
+            const annotation = this.editData.annotation;
+            const proximity = AdvancedMagnifyTool.TOUCH_PROXIMITY;
+            if (!this.isPointNearTool(element, annotation, startPoints.canvas, proximity)) {
+                return;
+            }
+            evt.stopImmediatePropagation();
+            this._endCallback(evt);
+            this.showZoomFactorsList(evt, annotation);
+        };
         this._dragHandle = (evt) => {
             const eventDetail = evt.detail;
             const { element } = eventDetail;
@@ -274,6 +288,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
             element.addEventListener(Events.TOUCH_END, this._endCallback);
             element.addEventListener(Events.TOUCH_DRAG, this._dragModifyCallback);
             element.addEventListener(Events.TOUCH_TAP, this._endCallback);
+            element.addEventListener(Events.TOUCH_PRESS, this._pressModifyCallback);
         };
         this._deactivateModify = (element) => {
             state.isInteractingWithTool = false;
@@ -283,6 +298,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
             element.removeEventListener(Events.TOUCH_END, this._endCallback);
             element.removeEventListener(Events.TOUCH_DRAG, this._dragModifyCallback);
             element.removeEventListener(Events.TOUCH_TAP, this._endCallback);
+            element.removeEventListener(Events.TOUCH_PRESS, this._pressModifyCallback);
         };
         this.renderAnnotation = (enabledElement, svgDrawingHelper) => {
             let renderStatus = false;
@@ -350,6 +366,27 @@ class AdvancedMagnifyTool extends AnnotationTool {
             }
             return renderStatus;
         };
+        this.touchPressCallback = (evt) => {
+            const { element, startPoints } = evt.detail;
+            const enabledElement = getEnabledElement(element);
+            if (!enabledElement) {
+                return;
+            }
+            const { viewport } = enabledElement;
+            const canvasPoint = startPoints.canvas;
+            const proximity = AdvancedMagnifyTool.TOUCH_PROXIMITY;
+            const annotations = (getAnnotations(this.getToolName(), element) ??
+                []);
+            const annotation = annotations
+                .filter((a) => a.data.sourceViewportId === viewport.id)
+                .find((a) => isAnnotationVisible(a.annotationUID) &&
+                !isAnnotationLocked(a.annotationUID) &&
+                this.isPointNearTool(element, a, canvasPoint, proximity));
+            if (!annotation) {
+                return;
+            }
+            this.showZoomFactorsList(evt, annotation);
+        };
         this._getWorldHandlePoints = (viewport, canvasCenterPos, canvasRadius) => {
             const canvasHandlePoints = this._getCanvasHandlePoints(canvasCenterPos, canvasRadius);
             return canvasHandlePoints.map((handlePoint) => viewport.canvasToWorld(handlePoint));
@@ -377,13 +414,16 @@ class AdvancedMagnifyTool extends AnnotationTool {
         this.magnifyViewportManager = AdvancedMagnifyViewportManager.getInstance();
     }
     showZoomFactorsList(evt, annotation) {
-        const { element, currentPoints } = evt.detail;
+        const { element } = evt.detail;
+        const currentPoints = 'currentPoints' in evt.detail
+            ? evt.detail.currentPoints
+            : evt.detail.startPoints;
         const enabledElement = getEnabledElement(element);
         const { viewport } = enabledElement;
         const { canvas: canvasPoint } = currentPoints;
         const viewportElement = element.querySelector(':scope .viewport-element');
         const currentZoomFactor = annotation.data.zoomFactor;
-        const remove = () => dropdown.parentElement.removeChild(dropdown);
+        const remove = () => dropdown.remove();
         const dropdown = this._getZoomFactorsListDropdown(currentZoomFactor, (newZoomFactor) => {
             if (newZoomFactor !== undefined) {
                 annotation.data.zoomFactor = Number.parseFloat(newZoomFactor);
@@ -407,19 +447,42 @@ class AdvancedMagnifyTool extends AnnotationTool {
             width: '50px',
             position: 'absolute',
         });
-        ['mousedown', 'mouseup', 'mousemove', 'click'].forEach((eventName) => {
+        [
+            'mousedown',
+            'mouseup',
+            'mousemove',
+            'click',
+            'touchstart',
+            'touchend',
+            'touchmove',
+        ].forEach((eventName) => {
             dropdown.addEventListener(eventName, (evt) => evt.stopPropagation());
         });
+        let committed = false;
+        const commit = (value) => {
+            if (committed) {
+                return;
+            }
+            committed = true;
+            onChangeCallback(value);
+        };
         dropdown.addEventListener('change', (evt) => {
             evt.stopPropagation();
-            onChangeCallback(dropdown.value);
+            commit(dropdown.value);
         });
+        dropdown.addEventListener('click', (evt) => {
+            evt.stopPropagation();
+            if (evt.target?.tagName === 'OPTION') {
+                commit(dropdown.value);
+            }
+        });
+        dropdown.addEventListener('blur', () => commit(dropdown.value));
         dropdown.addEventListener('keydown', (evt) => {
             const shouldCancel = (evt.keyCode ?? evt.which === 27) ||
                 evt.key?.toLowerCase() === 'escape';
             if (shouldCancel) {
                 evt.stopPropagation();
-                onChangeCallback();
+                commit();
             }
         });
         zoomFactorList.forEach((zoomFactor) => {
@@ -474,6 +537,7 @@ class AdvancedMagnifyViewportManager {
                 position,
                 zoomFactor,
                 autoPan,
+                annotation,
             });
             this._addSourceElementEventListener(sourceElement);
             this._magnifyViewportsMap.set(magnifyViewport.viewportId, {
@@ -617,7 +681,7 @@ class AdvancedMagnifyViewportManager {
     }
 }
 class AdvancedMagnifyViewport {
-    constructor({ magnifyViewportId, sourceEnabledElement, radius = MAGNIFY_VIEWPORT_INITIAL_RADIUS, position = [0, 0], zoomFactor, autoPan, }) {
+    constructor({ magnifyViewportId, sourceEnabledElement, radius = MAGNIFY_VIEWPORT_INITIAL_RADIUS, position = [0, 0], zoomFactor, autoPan, annotation, }) {
         this._enabledElement = null;
         this._sourceToolGroup = null;
         this._magnifyToolGroup = null;
@@ -628,12 +692,17 @@ class AdvancedMagnifyViewport {
         this._viewportId = magnifyViewportId ?? csUtils.uuidv4();
         this._sourceEnabledElement = sourceEnabledElement;
         this._autoPan = autoPan;
+        this._annotation = annotation;
         this.radius = radius;
         this.position = position;
         this.zoomFactor = zoomFactor;
         this.visible = true;
         this._browserMouseDownCallback = this._browserMouseDownCallback.bind(this);
         this._browserMouseUpCallback = this._browserMouseUpCallback.bind(this);
+        this._browserTouchStartCallback =
+            this._browserTouchStartCallback.bind(this);
+        this._browserTouchEndCallback = this._browserTouchEndCallback.bind(this);
+        this._touchPressCallback = this._touchPressCallback.bind(this);
         this._handleToolModeChanged = this._handleToolModeChanged.bind(this);
         this._mouseDragCallback = this._mouseDragCallback.bind(this);
         this._resizeViewportAsync = (debounce(this._resizeViewport.bind(this), 1));
@@ -837,6 +906,30 @@ class AdvancedMagnifyViewport {
         element.removeEventListener('mouseup', this._cancelMouseEventCallback);
         element.removeEventListener('mousemove', this._cancelMouseEventCallback);
     }
+    _browserTouchEndCallback(evt) {
+        if (evt.touches?.length > 0) {
+            return;
+        }
+        const { element } = this._enabledElement.viewport;
+        document.removeEventListener('touchend', this._browserTouchEndCallback);
+        document.removeEventListener('touchcancel', this._browserTouchEndCallback);
+        element.addEventListener('touchend', this._cancelMouseEventCallback, {
+            passive: false,
+        });
+        element.addEventListener('touchmove', this._cancelMouseEventCallback, {
+            passive: false,
+        });
+    }
+    _browserTouchStartCallback(evt) {
+        const { element } = this._enabledElement.viewport;
+        if (evt.touches?.length === 1) {
+            this._canAutoPan = !!evt.target?.closest('.advancedMagnifyTool');
+        }
+        document.addEventListener('touchend', this._browserTouchEndCallback);
+        document.addEventListener('touchcancel', this._browserTouchEndCallback);
+        element.removeEventListener('touchend', this._cancelMouseEventCallback);
+        element.removeEventListener('touchmove', this._cancelMouseEventCallback);
+    }
     _mouseDragCallback(evt) {
         if (!state.isInteractingWithTool) {
             return;
@@ -882,12 +975,43 @@ class AdvancedMagnifyViewport {
         };
         autoPan.callback(autoPanCallbackData);
     }
+    _touchPressCallback(evt) {
+        if (state.isInteractingWithTool) {
+            return;
+        }
+        const toolInstance = this._sourceToolGroup?.getToolInstance(ADVANCED_MAGNIFY_TOOL_NAME);
+        if (!toolInstance || !this._annotation) {
+            return;
+        }
+        const { viewport: sourceViewport } = this._sourceEnabledElement;
+        const pressCanvas = evt.detail.startPoints.canvas;
+        const sourceCanvasPoint = [
+            pressCanvas[0] + this.position[0] - this.radius,
+            pressCanvas[1] + this.position[1] - this.radius,
+        ];
+        toolInstance.showZoomFactorsList({
+            detail: {
+                element: sourceViewport.element,
+                startPoints: { canvas: sourceCanvasPoint },
+            },
+        }, this._annotation);
+    }
     _addBrowserEventListeners(element) {
         document.addEventListener('mousedown', this._browserMouseDownCallback, true);
         element.addEventListener('mousedown', this._cancelMouseEventCallback);
         element.addEventListener('mouseup', this._cancelMouseEventCallback);
         element.addEventListener('mousemove', this._cancelMouseEventCallback);
         element.addEventListener('dblclick', this._cancelMouseEventCallback);
+        document.addEventListener('touchstart', this._browserTouchStartCallback, true);
+        element.addEventListener('touchstart', this._cancelMouseEventCallback, {
+            passive: false,
+        });
+        element.addEventListener('touchend', this._cancelMouseEventCallback, {
+            passive: false,
+        });
+        element.addEventListener('touchmove', this._cancelMouseEventCallback, {
+            passive: false,
+        });
     }
     _removeBrowserEventListeners(element) {
         document.removeEventListener('mousedown', this._browserMouseDownCallback, true);
@@ -896,17 +1020,27 @@ class AdvancedMagnifyViewport {
         element.removeEventListener('mouseup', this._cancelMouseEventCallback);
         element.removeEventListener('mousemove', this._cancelMouseEventCallback);
         element.removeEventListener('dblclick', this._cancelMouseEventCallback);
+        document.removeEventListener('touchstart', this._browserTouchStartCallback, true);
+        document.removeEventListener('touchend', this._browserTouchEndCallback);
+        document.removeEventListener('touchcancel', this._browserTouchEndCallback);
+        element.removeEventListener('touchstart', this._cancelMouseEventCallback);
+        element.removeEventListener('touchend', this._cancelMouseEventCallback);
+        element.removeEventListener('touchmove', this._cancelMouseEventCallback);
     }
     _addEventListeners(element) {
         eventTarget.addEventListener(cstEvents.TOOL_MODE_CHANGED, this._handleToolModeChanged);
         element.addEventListener(cstEvents.MOUSE_MOVE, this._mouseDragCallback);
         element.addEventListener(cstEvents.MOUSE_DRAG, this._mouseDragCallback);
+        element.addEventListener(cstEvents.TOUCH_DRAG, this._mouseDragCallback);
+        element.addEventListener(cstEvents.TOUCH_PRESS, this._touchPressCallback);
         this._addBrowserEventListeners(element);
     }
     _removeEventListeners(element) {
         eventTarget.removeEventListener(cstEvents.TOOL_MODE_CHANGED, this._handleToolModeChanged);
         element.addEventListener(cstEvents.MOUSE_MOVE, this._mouseDragCallback);
         element.addEventListener(cstEvents.MOUSE_DRAG, this._mouseDragCallback);
+        element.removeEventListener(cstEvents.TOUCH_DRAG, this._mouseDragCallback);
+        element.removeEventListener(cstEvents.TOUCH_PRESS, this._touchPressCallback);
         this._removeBrowserEventListeners(element);
     }
     _initialize() {

package/dist/esm/tools/CrosshairsTool.d.ts

@@ -69,7 +69,7 @@ declare class CrosshairsTool extends AnnotationTool {
     _filterAnnotationsByUniqueViewportOrientations: (enabledElement: any, annotations: any) => any[];
     _checkIfViewportsRenderingSameScene: (viewport: any, otherViewport: any) => any;
     _jump: (enabledElement: any, jumpWorld: any) => boolean;
-    _activateModify: (element: any) => void;
+    _activateModify: (element: any, evt?: EventTypes.InteractionEventType) => void;
     _deactivateModify: (element: any) => void;
     _endCallback: (evt: EventTypes.InteractionEventType) => void;
     _dragCallback: (evt: EventTypes.InteractionEventType) => void;