@cornerstonejs/tools 2.0.0-beta.8 → 2.0.0

package/dist/esm/tools/AdvancedMagnifyTool.js

@@ -1,21 +1,31 @@
 import { AnnotationTool } from './base';
-import { getEnabledElement, utilities as csUtils } from '@cornerstonejs/core';
+import { getEnabledElement, utilities as csUtils, eventTarget, Enums, getRenderingEngine, CONSTANTS, getEnabledElementByViewportId, } from '@cornerstonejs/core';
 import { addAnnotation, getAllAnnotations, getAnnotations, removeAnnotation, } from '../stateManagement/annotation/annotationState';
 import { isAnnotationLocked } from '../stateManagement/annotation/annotationLocking';
 import { isAnnotationVisible } from '../stateManagement/annotation/annotationVisibility';
 import { triggerAnnotationCompleted } from '../stateManagement/annotation/helpers/state';
 import { drawCircle as drawCircleSvg, drawHandles as drawHandlesSvg, } from '../drawingSvg';
-import { state } from '../store';
-import { Events, MouseBindings, KeyboardBindings } from '../enums';
+import { state } from '../store/state';
+import { Events, MouseBindings, KeyboardBindings, Events as cstEvents, SegmentationRepresentations, ToolModes, } from '../enums';
 import { getViewportIdsWithToolToRender } from '../utilities/viewportFilters';
 import { resetElementCursor, hideElementCursor, } from '../cursors/elementCursor';
 import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
 import { getCanvasCircleRadius } from '../utilities/math/circle';
-import AdvancedMagnifyViewportManager from './AdvancedMagnifyViewportManager';
+import { vec2, vec3 } from 'gl-matrix';
+import { getToolGroupForViewport } from '../store/ToolGroupManager';
+import debounce from '../utilities/debounce';
+import { distanceToPoint } from '../utilities/math/point';
+import { addSegmentationRepresentations } from '../stateManagement/segmentation';
+const MAGNIFY_CLASSNAME = 'advancedMagnifyTool';
+const MAGNIFY_VIEWPORT_INITIAL_RADIUS = 125;
+const { Events: csEvents } = Enums;
+const isSegmentation = (actor) => actor.uid !== actor.referencedId;
 var AdvancedMagnifyToolActions;
 (function (AdvancedMagnifyToolActions) {
     AdvancedMagnifyToolActions["ShowZoomFactorsList"] = "showZoomFactorsList";
 })(AdvancedMagnifyToolActions || (AdvancedMagnifyToolActions = {}));
+const ADVANCED_MAGNIFY_TOOL_NAME = 'AdvancedMagnify';
+const PARALLEL_THRESHOLD = 1 - CONSTANTS.EPSILON;
 class AdvancedMagnifyTool extends AnnotationTool {
     static { this.Actions = AdvancedMagnifyToolActions; }
     constructor(toolProps = {}, defaultToolProps = {
@@ -107,7 +117,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
             addAnnotation(annotation, element);
             const viewportIdsToRender = getViewportIdsWithToolToRender(element, this.getToolName());
             evt.preventDefault();
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
             return annotation;
         };
         this.onSetToolDisabled = () => {
@@ -148,9 +158,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
             };
             hideElementCursor(element);
             this._activateModify(element);
-            const enabledElement = getEnabledElement(element);
-            const { renderingEngine } = enabledElement;
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
             evt.preventDefault();
         };
         this.handleSelectedCallback = (evt, annotation, handle) => {
@@ -168,9 +176,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
             };
             this._activateModify(element);
             hideElementCursor(element);
-            const enabledElement = getEnabledElement(element);
-            const { renderingEngine } = enabledElement;
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
             evt.preventDefault();
         };
         this._endCallback = (evt) => {
@@ -181,11 +187,9 @@ class AdvancedMagnifyTool extends AnnotationTool {
             data.handles.activeHandleIndex = null;
             this._deactivateModify(element);
             resetElementCursor(element);
-            const enabledElement = getEnabledElement(element);
-            const { renderingEngine } = enabledElement;
             this.editData = null;
             this.isDrawing = false;
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
             if (newAnnotation) {
                 triggerAnnotationCompleted(annotation);
             }
@@ -193,10 +197,8 @@ class AdvancedMagnifyTool extends AnnotationTool {
         this._dragDrawCallback = (evt) => {
             this.isDrawing = true;
             const eventDetail = evt.detail;
-            const { element, deltaPoints } = eventDetail;
+            const { deltaPoints } = eventDetail;
             const canvasDelta = deltaPoints?.canvas ?? [0, 0, 0];
-            const enabledElement = getEnabledElement(element);
-            const { renderingEngine } = enabledElement;
             const { annotation, viewportIdsToRender } = this.editData;
             const { points } = annotation.data.handles;
             points.forEach((point) => {
@@ -205,7 +207,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
             });
             annotation.invalidated = true;
             this.editData.hasMoved = true;
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
         };
         this._dragModifyCallback = (evt) => {
             this.isDrawing = true;
@@ -227,9 +229,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
                 this._dragHandle(evt);
                 annotation.invalidated = true;
             }
-            const enabledElement = getEnabledElement(element);
-            const { renderingEngine } = enabledElement;
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
         };
         this._dragHandle = (evt) => {
             const eventDetail = evt.detail;
@@ -268,9 +268,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
             const { data } = annotation;
             annotation.highlighted = false;
             data.handles.activeHandleIndex = null;
-            const enabledElement = getEnabledElement(element);
-            const { renderingEngine } = enabledElement;
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
             if (newAnnotation) {
                 triggerAnnotationCompleted(annotation);
             }
@@ -340,7 +338,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
                 if (!isAnnotationVisible(annotationUID)) {
                     continue;
                 }
-                if (!isAnnotationLocked(annotation) &&
+                if (!isAnnotationLocked(annotationUID) &&
                     !this.editData &&
                     activeHandleIndex !== null) {
                     activeHandleCanvasCoords = [canvasCoordinates[activeHandleIndex]];
@@ -433,6 +431,497 @@ class AdvancedMagnifyTool extends AnnotationTool {
         return dropdown;
     }
 }
+class AdvancedMagnifyViewportManager {
+    constructor() {
+        this.createViewport = (annotation, viewportInfo) => {
+            const { magnifyViewportId, sourceEnabledElement, position, radius, zoomFactor, autoPan, } = viewportInfo;
+            const { viewport: sourceViewport } = sourceEnabledElement;
+            const { element: sourceElement } = sourceViewport;
+            const magnifyViewport = new AdvancedMagnifyViewport({
+                magnifyViewportId,
+                sourceEnabledElement,
+                radius,
+                position,
+                zoomFactor,
+                autoPan,
+            });
+            this._addSourceElementEventListener(sourceElement);
+            this._magnifyViewportsMap.set(magnifyViewport.viewportId, {
+                annotation,
+                magnifyViewport,
+                magnifyViewportInfo: viewportInfo,
+            });
+            return magnifyViewport;
+        };
+        this._annotationRemovedCallback = (evt) => {
+            const { annotation } = evt.detail;
+            if (annotation.metadata.toolName !== ADVANCED_MAGNIFY_TOOL_NAME) {
+                return;
+            }
+            this.destroyViewport(annotation.data.magnifyViewportId);
+        };
+        this._newStackImageCallback = (evt) => {
+            const { viewportId: sourceViewportId, imageId } = evt.detail;
+            const magnifyViewportsMapEntries = this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
+            const { viewport } = getEnabledElementByViewportId(sourceViewportId);
+            if (viewport.stackActorReInitialized) {
+                this._reset(sourceViewportId);
+            }
+            magnifyViewportsMapEntries.forEach(({ annotation }) => {
+                annotation.metadata.referencedImageId = imageId;
+                annotation.invalidated = true;
+            });
+        };
+        this._newVolumeImageCallback = (evt) => {
+            const { renderingEngineId, viewportId: sourceViewportId } = evt.detail;
+            const renderingEngine = getRenderingEngine(renderingEngineId);
+            const sourceViewport = renderingEngine.getViewport(sourceViewportId);
+            const { viewPlaneNormal: currentViewPlaneNormal } = sourceViewport.getCamera();
+            const magnifyViewportsMapEntries = this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
+            magnifyViewportsMapEntries.forEach(({ annotation }) => {
+                const { viewPlaneNormal } = annotation.metadata;
+                const isParallel = Math.abs(vec3.dot(viewPlaneNormal, currentViewPlaneNormal)) >
+                    PARALLEL_THRESHOLD;
+                if (!isParallel) {
+                    return;
+                }
+                const { handles } = annotation.data;
+                const worldImagePlanePoint = sourceViewport.canvasToWorld([0, 0]);
+                const vecHandleToImagePlane = vec3.sub(vec3.create(), worldImagePlanePoint, handles.points[0]);
+                const worldDist = vec3.dot(vecHandleToImagePlane, currentViewPlaneNormal);
+                const worldDelta = vec3.scale(vec3.create(), currentViewPlaneNormal, worldDist);
+                for (let i = 0, len = handles.points.length; i < len; i++) {
+                    const point = handles.points[i];
+                    point[0] += worldDelta[0];
+                    point[1] += worldDelta[1];
+                    point[2] += worldDelta[2];
+                }
+                annotation.invalidated = true;
+            });
+        };
+        this._magnifyViewportsMap = new Map();
+        this._initialize();
+    }
+    static getInstance() {
+        AdvancedMagnifyViewportManager._singleton =
+            AdvancedMagnifyViewportManager._singleton ??
+                new AdvancedMagnifyViewportManager();
+        return AdvancedMagnifyViewportManager._singleton;
+    }
+    getViewport(magnifyViewportId) {
+        return this._magnifyViewportsMap.get(magnifyViewportId)?.magnifyViewport;
+    }
+    dispose() {
+        this._removeEventListeners();
+        this._destroyViewports();
+    }
+    destroyViewport(magnifyViewportId) {
+        const magnifyViewportMapEntry = this._magnifyViewportsMap.get(magnifyViewportId);
+        if (magnifyViewportMapEntry) {
+            const { magnifyViewport } = magnifyViewportMapEntry;
+            const { viewport: sourceViewport } = magnifyViewport.sourceEnabledElement;
+            const { element: sourceElement } = sourceViewport;
+            this._removeSourceElementEventListener(sourceElement);
+            magnifyViewport.dispose();
+            this._magnifyViewportsMap.delete(magnifyViewportId);
+        }
+    }
+    _destroyViewports() {
+        const magnifyViewportIds = Array.from(this._magnifyViewportsMap.keys());
+        magnifyViewportIds.forEach((magnifyViewportId) => this.destroyViewport(magnifyViewportId));
+    }
+    _getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId) {
+        const magnifyViewportsMapEntries = Array.from(this._magnifyViewportsMap.values());
+        return magnifyViewportsMapEntries.filter(({ magnifyViewport }) => {
+            const { viewport } = magnifyViewport.sourceEnabledElement;
+            return viewport.id === sourceViewportId;
+        });
+    }
+    _reset(sourceViewportId) {
+        const magnifyViewports = this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
+        magnifyViewports.forEach(({ magnifyViewport, annotation, magnifyViewportInfo }) => {
+            this.destroyViewport(magnifyViewport.viewportId);
+            const newEnabledElement = getEnabledElementByViewportId(sourceViewportId);
+            this.createViewport(annotation, {
+                ...magnifyViewportInfo,
+                sourceEnabledElement: {
+                    ...newEnabledElement,
+                },
+            });
+        });
+    }
+    _addEventListeners() {
+        eventTarget.addEventListener(cstEvents.ANNOTATION_REMOVED, this._annotationRemovedCallback);
+    }
+    _removeEventListeners() {
+        eventTarget.removeEventListener(cstEvents.ANNOTATION_REMOVED, this._annotationRemovedCallback);
+    }
+    _addSourceElementEventListener(element) {
+        element.addEventListener(csEvents.STACK_NEW_IMAGE, this._newStackImageCallback);
+        const newStackHandler = (evt) => {
+            const { viewportId: sourceViewportId } = evt.detail;
+            this._reset(sourceViewportId);
+        };
+        element.addEventListener(csEvents.VIEWPORT_NEW_IMAGE_SET, newStackHandler);
+        const newVolumeHandler = (evt) => {
+            const { viewportId: sourceViewportId } = evt.detail;
+            this._reset(sourceViewportId);
+        };
+        element.addEventListener(csEvents.VOLUME_VIEWPORT_NEW_VOLUME, newVolumeHandler);
+        element.addEventListener(csEvents.VOLUME_NEW_IMAGE, this._newVolumeImageCallback);
+        element.newStackHandler = newStackHandler;
+        element.newVolumeHandler = newVolumeHandler;
+    }
+    _removeSourceElementEventListener(element) {
+        element.removeEventListener(csEvents.STACK_NEW_IMAGE, this._newStackImageCallback);
+        element.removeEventListener(csEvents.VOLUME_NEW_IMAGE, this._newVolumeImageCallback);
+        element.removeEventListener(csEvents.VIEWPORT_NEW_IMAGE_SET, element.newStackHandler);
+        element.removeEventListener(csEvents.VOLUME_VIEWPORT_NEW_VOLUME, element.newVolumeHandler);
+        delete element.newStackHandler;
+        delete element.newVolumeHandler;
+    }
+    _initialize() {
+        this._addEventListeners();
+    }
+}
+class AdvancedMagnifyViewport {
+    constructor({ magnifyViewportId, sourceEnabledElement, radius = MAGNIFY_VIEWPORT_INITIAL_RADIUS, position = [0, 0], zoomFactor, autoPan, }) {
+        this._enabledElement = null;
+        this._sourceToolGroup = null;
+        this._magnifyToolGroup = null;
+        this._isViewportReady = false;
+        this._radius = 0;
+        this._resized = false;
+        this._canAutoPan = false;
+        this._viewportId = magnifyViewportId ?? csUtils.uuidv4();
+        this._sourceEnabledElement = sourceEnabledElement;
+        this._autoPan = autoPan;
+        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._handleToolModeChanged = this._handleToolModeChanged.bind(this);
+        this._mouseDragCallback = this._mouseDragCallback.bind(this);
+        this._resizeViewportAsync = (debounce(this._resizeViewport.bind(this), 1));
+        this._initialize();
+    }
+    get sourceEnabledElement() {
+        return this._sourceEnabledElement;
+    }
+    get viewportId() {
+        return this._viewportId;
+    }
+    get radius() {
+        return this._radius;
+    }
+    set radius(radius) {
+        if (Math.abs(this._radius - radius) > 0.00001) {
+            this._radius = radius;
+            this._resized = true;
+        }
+    }
+    update() {
+        const { radius, position, visible } = this;
+        const { viewport } = this._enabledElement;
+        const { element } = viewport;
+        const size = 2 * radius;
+        const [x, y] = position;
+        if (this._resized) {
+            this._resizeViewportAsync();
+            this._resized = false;
+        }
+        Object.assign(element.style, {
+            display: visible ? 'block' : 'hidden',
+            width: `${size}px`,
+            height: `${size}px`,
+            left: `${-radius}px`,
+            top: `${-radius}px`,
+            transform: `translate(${x}px, ${y}px)`,
+        });
+        if (this._isViewportReady) {
+            this._syncViewports();
+            viewport.render();
+        }
+    }
+    dispose() {
+        const { viewport } = this._enabledElement;
+        const { element } = viewport;
+        const renderingEngine = viewport.getRenderingEngine();
+        this._removeEventListeners(element);
+        renderingEngine.disableElement(viewport.id);
+        if (element.parentNode) {
+            element.parentNode.removeChild(element);
+        }
+    }
+    _handleToolModeChanged(evt) {
+        const { _magnifyToolGroup: magnifyToolGroup } = this;
+        const { toolGroupId, toolName, mode, toolBindingsOptions } = evt.detail;
+        if (this._sourceToolGroup?.id !== toolGroupId) {
+            return;
+        }
+        switch (mode) {
+            case ToolModes.Active:
+                magnifyToolGroup.setToolActive(toolName, toolBindingsOptions);
+                break;
+            case ToolModes.Passive:
+                magnifyToolGroup.setToolPassive(toolName);
+                break;
+            case ToolModes.Enabled:
+                magnifyToolGroup.setToolEnabled(toolName);
+                break;
+            case ToolModes.Disabled:
+                magnifyToolGroup.setToolDisabled(toolName);
+                break;
+            default:
+                throw new Error(`Unknow tool mode (${mode})`);
+        }
+    }
+    _inheritBorderRadius(magnifyElement) {
+        const viewport = magnifyElement.querySelector('.viewport-element');
+        const canvas = magnifyElement.querySelector('.cornerstone-canvas');
+        viewport.style.borderRadius = 'inherit';
+        canvas.style.borderRadius = 'inherit';
+    }
+    _createViewportNode() {
+        const magnifyElement = document.createElement('div');
+        const { radius } = this;
+        const size = radius * 2;
+        magnifyElement.classList.add(MAGNIFY_CLASSNAME);
+        Object.assign(magnifyElement.style, {
+            display: 'block',
+            width: `${size}px`,
+            height: `${size}px`,
+            position: 'absolute',
+            overflow: 'hidden',
+            borderRadius: '50%',
+            boxSizing: 'border-box',
+            left: `${-radius}px`,
+            top: `${-radius}px`,
+            transform: `translate(-1000px, -1000px)`,
+        });
+        return magnifyElement;
+    }
+    _convertZoomFactorToParallelScale(viewport, magnifyViewport, zoomFactor) {
+        const { parallelScale } = viewport.getCamera();
+        const canvasRatio = magnifyViewport.canvas.offsetWidth / viewport.canvas.offsetWidth;
+        return parallelScale * (1 / zoomFactor) * canvasRatio;
+    }
+    _isStackViewport(viewport) {
+        return 'setStack' in viewport;
+    }
+    _isVolumeViewport(viewport) {
+        return 'addVolumes' in viewport;
+    }
+    _cloneToolGroups(sourceViewport, magnifyViewport) {
+        const sourceActors = sourceViewport.getActors();
+        const magnifyToolGroupId = `${magnifyViewport.id}-toolGroup`;
+        const sourceToolGroup = getToolGroupForViewport(sourceViewport.id, sourceViewport.renderingEngineId);
+        const magnifyToolGroup = sourceToolGroup.clone(magnifyToolGroupId, (toolName) => {
+            const toolInstance = sourceToolGroup.getToolInstance(toolName);
+            const isAnnotationTool = toolInstance instanceof AnnotationTool &&
+                !(toolInstance instanceof AdvancedMagnifyTool);
+            return isAnnotationTool;
+        });
+        magnifyToolGroup.addViewport(magnifyViewport.id, magnifyViewport.renderingEngineId);
+        sourceActors.filter(isSegmentation).forEach((actor) => {
+            addSegmentationRepresentations(this.viewportId, [
+                {
+                    segmentationId: actor.referencedId,
+                    type: SegmentationRepresentations.Labelmap,
+                },
+            ]);
+        });
+        return { sourceToolGroup, magnifyToolGroup };
+    }
+    _cloneStack(sourceViewport, magnifyViewport) {
+        const imageIds = sourceViewport.getImageIds();
+        magnifyViewport.setStack(imageIds).then(() => {
+            this._isViewportReady = true;
+            this.update();
+        });
+    }
+    _cloneVolumes(sourceViewport, magnifyViewport) {
+        const actors = sourceViewport.getActors();
+        const volumeInputArray = actors
+            .filter((actor) => !isSegmentation(actor))
+            .map((actor) => ({ volumeId: actor.uid }));
+        magnifyViewport.setVolumes(volumeInputArray).then(() => {
+            this._isViewportReady = true;
+            this.update();
+        });
+        return magnifyViewport;
+    }
+    _cloneViewport(sourceViewport, magnifyElement) {
+        const { viewportId: magnifyViewportId } = this;
+        const renderingEngine = sourceViewport.getRenderingEngine();
+        const { options: sourceViewportOptions } = sourceViewport;
+        const viewportInput = {
+            element: magnifyElement,
+            viewportId: magnifyViewportId,
+            type: sourceViewport.type,
+            defaultOptions: { ...sourceViewportOptions },
+        };
+        renderingEngine.enableElement(viewportInput);
+        const magnifyViewport = (renderingEngine.getViewport(magnifyViewportId));
+        if (this._isStackViewport(sourceViewport)) {
+            this._cloneStack(sourceViewport, magnifyViewport);
+        }
+        else if (this._isVolumeViewport(sourceViewport)) {
+            this._cloneVolumes(sourceViewport, magnifyViewport);
+        }
+        this._inheritBorderRadius(magnifyElement);
+        const toolGroups = this._cloneToolGroups(sourceViewport, magnifyViewport);
+        this._sourceToolGroup = toolGroups.sourceToolGroup;
+        this._magnifyToolGroup = toolGroups.magnifyToolGroup;
+    }
+    _cancelMouseEventCallback(evt) {
+        evt.stopPropagation();
+        evt.preventDefault();
+    }
+    _browserMouseUpCallback(evt) {
+        const { element } = this._enabledElement.viewport;
+        document.removeEventListener('mouseup', this._browserMouseUpCallback);
+        element.addEventListener('mouseup', this._cancelMouseEventCallback);
+        element.addEventListener('mousemove', this._cancelMouseEventCallback);
+    }
+    _browserMouseDownCallback(evt) {
+        const { element } = this._enabledElement.viewport;
+        this._canAutoPan = !!evt.target?.closest('.advancedMagnifyTool');
+        document.addEventListener('mouseup', this._browserMouseUpCallback);
+        element.removeEventListener('mouseup', this._cancelMouseEventCallback);
+        element.removeEventListener('mousemove', this._cancelMouseEventCallback);
+    }
+    _mouseDragCallback(evt) {
+        if (!state.isInteractingWithTool) {
+            return;
+        }
+        const { _autoPan: autoPan } = this;
+        if (!autoPan.enabled || !this._canAutoPan) {
+            return;
+        }
+        const { currentPoints } = evt.detail;
+        const { viewport } = this._enabledElement;
+        const { canvasToWorld } = viewport;
+        const { canvas: canvasCurrent } = currentPoints;
+        const { radius: magnifyRadius } = this;
+        const canvasCenter = [magnifyRadius, magnifyRadius];
+        const dist = distanceToPoint(canvasCenter, canvasCurrent);
+        const maxDist = magnifyRadius - autoPan.padding;
+        if (dist <= maxDist) {
+            return;
+        }
+        const panDist = dist - maxDist;
+        const canvasDeltaPos = vec2.sub(vec2.create(), canvasCurrent, canvasCenter);
+        vec2.normalize(canvasDeltaPos, canvasDeltaPos);
+        vec2.scale(canvasDeltaPos, canvasDeltaPos, panDist);
+        const newCanvasPosition = vec2.add(vec2.create(), this.position, canvasDeltaPos);
+        const currentWorldPos = canvasToWorld(this.position);
+        const newWorldPos = canvasToWorld(newCanvasPosition);
+        const worldDeltaPos = vec3.sub(vec3.create(), newWorldPos, currentWorldPos);
+        const autoPanCallbackData = {
+            points: {
+                currentPosition: {
+                    canvas: this.position,
+                    world: currentWorldPos,
+                },
+                newPosition: {
+                    canvas: newCanvasPosition,
+                    world: newWorldPos,
+                },
+            },
+            delta: {
+                canvas: canvasDeltaPos,
+                world: worldDeltaPos,
+            },
+        };
+        autoPan.callback(autoPanCallbackData);
+    }
+    _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);
+    }
+    _removeBrowserEventListeners(element) {
+        document.removeEventListener('mousedown', this._browserMouseDownCallback, true);
+        document.removeEventListener('mouseup', this._browserMouseUpCallback);
+        element.removeEventListener('mousedown', this._cancelMouseEventCallback);
+        element.removeEventListener('mouseup', this._cancelMouseEventCallback);
+        element.removeEventListener('mousemove', this._cancelMouseEventCallback);
+        element.removeEventListener('dblclick', 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);
+        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);
+        this._removeBrowserEventListeners(element);
+    }
+    _initialize() {
+        const { _sourceEnabledElement: sourceEnabledElement } = this;
+        const { viewport: sourceViewport } = sourceEnabledElement;
+        const { canvas: sourceCanvas } = sourceViewport;
+        const magnifyElement = this._createViewportNode();
+        sourceCanvas.parentNode.appendChild(magnifyElement);
+        this._addEventListeners(magnifyElement);
+        this._cloneViewport(sourceViewport, magnifyElement);
+        this._enabledElement = getEnabledElement(magnifyElement);
+    }
+    _syncViewportsCameras(sourceViewport, magnifyViewport) {
+        const worldPos = sourceViewport.canvasToWorld(this.position);
+        const parallelScale = this._convertZoomFactorToParallelScale(sourceViewport, magnifyViewport, this.zoomFactor);
+        const { focalPoint, position, viewPlaneNormal } = magnifyViewport.getCamera();
+        const distance = Math.sqrt(Math.pow(focalPoint[0] - position[0], 2) +
+            Math.pow(focalPoint[1] - position[1], 2) +
+            Math.pow(focalPoint[2] - position[2], 2));
+        const updatedFocalPoint = [
+            worldPos[0],
+            worldPos[1],
+            worldPos[2],
+        ];
+        const updatedPosition = [
+            updatedFocalPoint[0] + distance * viewPlaneNormal[0],
+            updatedFocalPoint[1] + distance * viewPlaneNormal[1],
+            updatedFocalPoint[2] + distance * viewPlaneNormal[2],
+        ];
+        magnifyViewport.setCamera({
+            parallelScale,
+            focalPoint: updatedFocalPoint,
+            position: updatedPosition,
+        });
+    }
+    _syncStackViewports(sourceViewport, magnifyViewport) {
+        magnifyViewport.setImageIdIndex(sourceViewport.getCurrentImageIdIndex());
+    }
+    _syncViewports() {
+        const { viewport: sourceViewport } = this._sourceEnabledElement;
+        const { viewport: magnifyViewport } = this._enabledElement;
+        const sourceProperties = sourceViewport.getProperties();
+        const imageData = magnifyViewport.getImageData();
+        if (!imageData) {
+            return;
+        }
+        magnifyViewport.setProperties(sourceProperties);
+        this._syncViewportsCameras(sourceViewport, magnifyViewport);
+        if (this._isStackViewport(sourceViewport)) {
+            this._syncStackViewports(sourceViewport, magnifyViewport);
+        }
+        this._syncViewportsCameras(sourceViewport, magnifyViewport);
+        magnifyViewport.render();
+    }
+    _resizeViewport() {
+        const { viewport } = this._enabledElement;
+        const renderingEngine = viewport.getRenderingEngine();
+        renderingEngine.resize();
+    }
+}
 AdvancedMagnifyTool.toolName = 'AdvancedMagnify';
 export { AdvancedMagnifyTool as default };
-//# sourceMappingURL=AdvancedMagnifyTool.js.map

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

@@ -0,0 +1,10 @@
+import { BaseTool } from './base';
+import type { EventTypes, PublicToolProps, ToolProps } from '../types';
+declare class AnnotationEraserTool extends BaseTool {
+    static toolName: any;
+    constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
+    preMouseDownCallback: (evt: EventTypes.InteractionEventType) => boolean;
+    preTouchStartCallback: (evt: EventTypes.InteractionEventType) => boolean;
+    _deleteNearbyAnnotations(evt: EventTypes.InteractionEventType, interactionType: string): boolean;
+}
+export default AnnotationEraserTool;

package/dist/esm/tools/AnnotationEraserTool.js

@@ -1,7 +1,7 @@
 import { BaseTool } from './base';
-import { ToolGroupManager } from '../store';
 import { getAnnotations, removeAnnotation, } from '../stateManagement/annotation/annotationState';
 import { setAnnotationSelected } from '../stateManagement/annotation/annotationSelection';
+import { getToolGroupForViewport } from '../store/ToolGroupManager';
 class AnnotationEraserTool extends BaseTool {
     constructor(toolProps = {}, defaultToolProps = {
         supportedInteractionTypes: ['Mouse', 'Touch'],
@@ -16,7 +16,7 @@ class AnnotationEraserTool extends BaseTool {
     }
     _deleteNearbyAnnotations(evt, interactionType) {
         const { renderingEngineId, viewportId, element, currentPoints } = evt.detail;
-        const toolGroup = ToolGroupManager.getToolGroupForViewport(viewportId, renderingEngineId);
+        const toolGroup = getToolGroupForViewport(viewportId, renderingEngineId);
         if (!toolGroup) {
             return false;
         }
@@ -50,4 +50,3 @@ class AnnotationEraserTool extends BaseTool {
 }
 AnnotationEraserTool.toolName = 'Eraser';
 export default AnnotationEraserTool;
-//# sourceMappingURL=AnnotationEraserTool.js.map