@cornerstonejs/tools 2.0.0-beta.20 → 2.0.0-beta.22

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';
+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 = {
@@ -421,5 +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.STACK_VIEWPORT_NEW_STACK, 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.STACK_VIEWPORT_NEW_STACK, 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 };

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

@@ -1,5 +1,5 @@
 import { BaseTool } from './base';
-import { EventTypes, PublicToolProps, ToolProps } from '../types';
+import type { EventTypes, PublicToolProps, ToolProps } from '../types';
 declare class AnnotationEraserTool extends BaseTool {
     static toolName: any;
     constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);

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;
         }

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

@@ -1,11 +1,11 @@
 import { AnnotationTool } from './base';
 import type { Types } from '@cornerstonejs/core';
-import { Annotation, Annotations, EventTypes, ToolHandle, PublicToolProps, ToolProps, InteractionTypes, SVGDrawingHelper } from '../types';
+import type { Annotation, Annotations, EventTypes, ToolHandle, PublicToolProps, ToolProps, InteractionTypes, SVGDrawingHelper } from '../types';
 interface CrosshairsAnnotation extends Annotation {
     data: {
         handles: {
-            rotationPoints: any[];
-            slabThicknessPoints: any[];
+            rotationPoints: Types.Point3[];
+            slabThicknessPoints: Types.Point3[];
             activeOperation: number | null;
             toolCenter: Types.Point3;
         };
@@ -21,7 +21,7 @@ declare class CrosshairsTool extends AnnotationTool {
     _getReferenceLineDraggableRotatable?: (viewportId: string) => boolean;
     _getReferenceLineSlabThicknessControlsOn?: (viewportId: string) => boolean;
     editData: {
-        annotation: any;
+        annotation: Annotation;
     } | null;
     constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
     initializeViewport: ({ renderingEngineId, viewportId, }: Types.IViewportId) => {
@@ -47,7 +47,7 @@ declare class CrosshairsTool extends AnnotationTool {
     filterInteractableAnnotationsForElement: (element: any, annotations: any) => any;
     renderAnnotation: (enabledElement: Types.IEnabledElement, svgDrawingHelper: SVGDrawingHelper) => boolean;
     _getAnnotations: (enabledElement: Types.IEnabledElement) => Annotation[];
-    _onNewVolume: (e: any) => void;
+    _onNewVolume: () => void;
     _unsubscribeToViewportNewVolumeSet(viewportsInfo: any): void;
     _subscribeToViewportNewVolumeSet(viewports: any): void;
     _autoPanViewportIfNecessary(viewportId: string, renderingEngine: Types.IRenderingEngine): void;

package/dist/esm/tools/CrosshairsTool.js

@@ -6,7 +6,7 @@ import { getEnabledElementByIds, getEnabledElement, utilities as csUtils, Enums,
 import { getToolGroup, getToolGroupForViewport, } from '../store/ToolGroupManager';
 import { addAnnotation, getAnnotations, removeAnnotation, } from '../stateManagement/annotation/annotationState';
 import { drawCircle as drawCircleSvg, drawHandles as drawHandlesSvg, drawLine as drawLineSvg, } from '../drawingSvg';
-import { state } from '../store';
+import { state } from '../store/state';
 import { Events } from '../enums';
 import { getViewportIdsWithToolToRender } from '../utilities/viewportFilters';
 import { resetElementCursor, hideElementCursor, } from '../cursors/elementCursor';
@@ -105,7 +105,8 @@ class CrosshairsTool extends AnnotationTool {
         };
         this.resetCrosshairs = () => {
             const viewportsInfo = this._getViewportsInfo();
-            viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+            for (const viewportInfo of viewportsInfo) {
+                const { viewportId, renderingEngineId } = viewportInfo;
                 const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
                 const viewport = enabledElement.viewport;
                 const resetPan = true;
@@ -128,7 +129,7 @@ class CrosshairsTool extends AnnotationTool {
                     removeAnnotation(annotations[0].annotationUID);
                 }
                 viewport.render();
-            });
+            }
             this.computeToolCenter(viewportsInfo);
         };
         this.computeToolCenter = (viewportsInfo) => {
@@ -672,7 +673,7 @@ class CrosshairsTool extends AnnotationTool {
             });
             return toolGroupAnnotations;
         };
-        this._onNewVolume = (e) => {
+        this._onNewVolume = () => {
             const viewportsInfo = this._getViewportsInfo();
             this.computeToolCenter(viewportsInfo);
         };

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

@@ -1,8 +1,7 @@
 import { BaseTool } from './base';
-import { PublicToolProps, ToolProps } from '../types';
+import type { PublicToolProps, ToolProps } from '../types';
 declare class MIPJumpToClickTool extends BaseTool {
     static toolName: any;
-    _bounds: any;
     constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
     mouseClickCallback(evt: any): void;
 }

package/dist/esm/tools/MIPJumpToClickTool.js

@@ -17,11 +17,10 @@ class MIPJumpToClickTool extends BaseTool {
         const { element, currentPoints } = evt.detail;
         const enabledElement = getEnabledElement(element);
         const { viewport, renderingEngine } = enabledElement;
-        const targetId = this.getTargetId(viewport);
-        if (!targetId.startsWith('volumeId')) {
+        const volumeId = this.getTargetVolumeId(viewport);
+        if (!volumeId) {
             throw new Error(`MIPJumpToClickTool: targetId is not a volumeId, you should only use MIPJumpToClickTool with a volumeId as the targetId`);
         }
-        const volumeId = utilities.getVolumeId(targetId);
         let maxIntensity = -Infinity;
         const maxFn = (intensity, point) => {
             if (intensity > maxIntensity) {

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

@@ -1,10 +1,9 @@
 import { BaseTool } from './base';
 import type { Types } from '@cornerstonejs/core';
-import { EventTypes, PublicToolProps, ToolProps } from '../types';
-import { IPoints } from '../types';
+import type { EventTypes, PublicToolProps, ToolProps } from '../types';
+import type { IPoints } from '../types';
 declare class MagnifyTool extends BaseTool {
     static toolName: any;
-    _bounds: any;
     editData: {
         referencedImageId: string;
         viewportIdsToRender: string[];