@cornerstonejs/tools 2.0.0-beta.3 → 2.0.0-beta.30

package/dist/esm/tools/AdvancedMagnifyTool.js

@@ -1,32 +1,48 @@
 import { AnnotationTool } from './base';
-import { getEnabledElement, eventTarget, triggerEvent, utilities as csUtils, } from '@cornerstonejs/core';
-import { addAnnotation, getAnnotations, } from '../stateManagement/annotation/annotationState';
+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 = {
         supportedInteractionTypes: ['Mouse', 'Touch'],
         configuration: {
             shadow: true,
             magnifyingGlass: {
                 radius: 125,
-                zoomFactor: 2.5,
-                zoomFactorList: [2.5, 3, 3.5, 4, 4.5, 5],
+                zoomFactor: 3,
+                zoomFactorList: [1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5],
                 autoPan: {
                     enabled: true,
                     padding: 10,
                 },
             },
-            actions: [
-                {
+            actions: {
+                showZoomFactorsList: {
                     method: 'showZoomFactorsList',
                     bindings: [
                         {
@@ -35,7 +51,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
                         },
                     ],
                 },
-            ],
+            },
         },
     }) {
         super(toolProps, defaultToolProps);
@@ -48,7 +64,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
             const canvasPos = currentPoints.canvas;
             const { magnifyingGlass: config } = this.configuration;
             const { radius, zoomFactor, autoPan } = config;
-            const worldHandlesPoints = this._getWorldHandlesPoints(viewport, canvasPos, radius);
+            const canvasHandlePoints = this._getCanvasHandlePoints(canvasPos, radius);
             const camera = viewport.getCamera();
             const { viewPlaneNormal, viewUp } = camera;
             const referencedImageId = this.getReferencedImageId(viewport, worldPos, viewPlaneNormal, viewUp);
@@ -70,8 +86,9 @@ class AdvancedMagnifyTool extends AnnotationTool {
                     sourceViewportId: viewport.id,
                     magnifyViewportId,
                     zoomFactor,
+                    isCanvasAnnotation: true,
                     handles: {
-                        points: worldHandlesPoints,
+                        points: canvasHandlePoints,
                         activeHandleIndex: null,
                     },
                 },
@@ -87,11 +104,12 @@ class AdvancedMagnifyTool extends AnnotationTool {
                     padding: autoPan.padding,
                     callback: (data) => {
                         const annotationPoints = annotation.data.handles.points;
-                        const { world: worldDelta } = data.delta;
+                        const { canvas: canvasDelta } = data.delta;
                         for (let i = 0, len = annotationPoints.length; i < len; i++) {
-                            annotationPoints[i][0] += worldDelta[0];
-                            annotationPoints[i][1] += worldDelta[1];
-                            annotationPoints[i][2] += worldDelta[2];
+                            const point = annotationPoints[i];
+                            point[0] += canvasDelta[0];
+                            point[1] += canvasDelta[1];
+                            annotation.invalidated = true;
                         }
                     },
                 },
@@ -99,15 +117,22 @@ class AdvancedMagnifyTool extends AnnotationTool {
             addAnnotation(annotation, element);
             const viewportIdsToRender = getViewportIdsWithToolToRender(element, this.getToolName());
             evt.preventDefault();
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
             return annotation;
         };
+        this.onSetToolDisabled = () => {
+            this.magnifyViewportManager.dispose();
+            const annotations = getAllAnnotations();
+            annotations.forEach((annotation) => {
+                if (annotation.metadata.toolName === this.getToolName()) {
+                    removeAnnotation(annotation.annotationUID);
+                }
+            });
+        };
         this.isPointNearTool = (element, annotation, canvasCoords, proximity) => {
-            const enabledElement = getEnabledElement(element);
-            const { viewport } = enabledElement;
             const { data } = annotation;
             const { points } = data.handles;
-            const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));
+            const canvasCoordinates = points;
             const canvasTop = canvasCoordinates[0];
             const canvasBottom = canvasCoordinates[2];
             const canvasLeft = canvasCoordinates[3];
@@ -117,7 +142,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
                 canvasTop[1] + radius,
             ];
             const radiusPoint = getCanvasCircleRadius([center, canvasCoords]);
-            if (Math.abs(radiusPoint - radius) < proximity * 1.5) {
+            if (Math.abs(radiusPoint - radius) < proximity * 2) {
                 return true;
             }
             return false;
@@ -133,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) => {
@@ -153,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) => {
@@ -166,36 +187,27 @@ 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) {
-                const eventType = Events.ANNOTATION_COMPLETED;
-                const eventDetail = {
-                    annotation,
-                };
-                triggerEvent(eventTarget, eventType, eventDetail);
+                triggerAnnotationCompleted(annotation);
             }
         };
         this._dragDrawCallback = (evt) => {
             this.isDrawing = true;
             const eventDetail = evt.detail;
-            const { element, deltaPoints } = eventDetail;
-            const worldPosDelta = deltaPoints?.world ?? [0, 0, 0];
-            const enabledElement = getEnabledElement(element);
-            const { renderingEngine } = enabledElement;
+            const { deltaPoints } = eventDetail;
+            const canvasDelta = deltaPoints?.canvas ?? [0, 0, 0];
             const { annotation, viewportIdsToRender } = this.editData;
             const { points } = annotation.data.handles;
             points.forEach((point) => {
-                point[0] += worldPosDelta[0];
-                point[1] += worldPosDelta[1];
-                point[2] += worldPosDelta[2];
+                point[0] += canvasDelta[0];
+                point[1] += canvasDelta[1];
             });
             annotation.invalidated = true;
             this.editData.hasMoved = true;
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
         };
         this._dragModifyCallback = (evt) => {
             this.isDrawing = true;
@@ -205,12 +217,11 @@ class AdvancedMagnifyTool extends AnnotationTool {
             const { data } = annotation;
             if (handleIndex === undefined) {
                 const { deltaPoints } = eventDetail;
-                const worldPosDelta = deltaPoints.world;
+                const canvasDelta = deltaPoints.canvas;
                 const points = data.handles.points;
                 points.forEach((point) => {
-                    point[0] += worldPosDelta[0];
-                    point[1] += worldPosDelta[1];
-                    point[2] += worldPosDelta[2];
+                    point[0] += canvasDelta[0];
+                    point[1] += canvasDelta[1];
                 });
                 annotation.invalidated = true;
             }
@@ -218,20 +229,14 @@ 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;
-            const { element } = eventDetail;
-            const enabledElement = getEnabledElement(element);
-            const { viewport } = enabledElement;
-            const { worldToCanvas } = viewport;
             const { annotation } = this.editData;
             const { data } = annotation;
             const { points } = data.handles;
-            const canvasCoordinates = points.map((p) => worldToCanvas(p));
+            const canvasCoordinates = points;
             const canvasTop = canvasCoordinates[0];
             const canvasBottom = canvasCoordinates[2];
             const canvasLeft = canvasCoordinates[3];
@@ -246,11 +251,11 @@ class AdvancedMagnifyTool extends AnnotationTool {
                 canvasCenter,
                 currentCanvasPoints,
             ]);
-            const newWorldHandlesPoints = this._getWorldHandlesPoints(viewport, canvasCenter, newRadius);
-            points[0] = newWorldHandlesPoints[0];
-            points[1] = newWorldHandlesPoints[1];
-            points[2] = newWorldHandlesPoints[2];
-            points[3] = newWorldHandlesPoints[3];
+            const newCanvasHandlePoints = this._getCanvasHandlePoints(canvasCenter, newRadius);
+            points[0] = newCanvasHandlePoints[0];
+            points[1] = newCanvasHandlePoints[1];
+            points[2] = newCanvasHandlePoints[2];
+            points[3] = newCanvasHandlePoints[3];
         };
         this.cancel = (element) => {
             if (!this.isDrawing) {
@@ -263,15 +268,9 @@ 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) {
-                const eventType = Events.ANNOTATION_COMPLETED;
-                const eventDetail = {
-                    annotation,
-                };
-                triggerEvent(eventTarget, eventType, eventDetail);
+                triggerAnnotationCompleted(annotation);
             }
             this.editData = null;
             return annotation.annotationUID;
@@ -302,10 +301,10 @@ class AdvancedMagnifyTool extends AnnotationTool {
             if (!annotations?.length) {
                 return renderStatus;
             }
-            annotations = this.filterInteractableAnnotationsForElement(element, annotations);
             annotations = annotations?.filter((annotation) => annotation.data.sourceViewportId ===
                 viewport.id);
-            if (!annotations?.length) {
+            const filteredAnnotations = this.filterInteractableAnnotationsForElement(element, annotations);
+            if (!filteredAnnotations?.length) {
                 return renderStatus;
             }
             const styleSpecifier = {
@@ -313,8 +312,8 @@ class AdvancedMagnifyTool extends AnnotationTool {
                 toolName: this.getToolName(),
                 viewportId: enabledElement.viewport.id,
             };
-            for (let i = 0; i < annotations.length; i++) {
-                const annotation = annotations[i];
+            for (let i = 0; i < filteredAnnotations.length; i++) {
+                const annotation = filteredAnnotations[i];
                 const { annotationUID, data } = annotation;
                 const { magnifyViewportId, zoomFactor, handles } = data;
                 const { points, activeHandleIndex } = handles;
@@ -322,7 +321,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
                 const lineWidth = this.getStyle('lineWidth', styleSpecifier, annotation);
                 const lineDash = this.getStyle('lineDash', styleSpecifier, annotation);
                 const color = this.getStyle('color', styleSpecifier, annotation);
-                const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));
+                const canvasCoordinates = points;
                 const canvasTop = canvasCoordinates[0];
                 const canvasBottom = canvasCoordinates[2];
                 const canvasLeft = canvasCoordinates[3];
@@ -354,8 +353,7 @@ class AdvancedMagnifyTool extends AnnotationTool {
                 const circleUID = '0';
                 drawCircleSvg(svgDrawingHelper, annotationUID, circleUID, center, radius, {
                     color,
-                    lineDash,
-                    lineWidth,
+                    lineWidth: 5,
                 }, dataId);
                 const magnifyViewport = this.magnifyViewportManager.getViewport(magnifyViewportId);
                 magnifyViewport.position = center;
@@ -366,15 +364,13 @@ class AdvancedMagnifyTool extends AnnotationTool {
             }
             return renderStatus;
         };
-        this._getWorldHandlesPoints = (viewport, canvasCenterPos, canvasRadius) => {
-            const canvasHandlesPoints = [
-                [canvasCenterPos[0], canvasCenterPos[1] - canvasRadius],
-                [canvasCenterPos[0] + canvasRadius, canvasCenterPos[1]],
-                [canvasCenterPos[0], canvasCenterPos[1] + canvasRadius],
-                [canvasCenterPos[0] - canvasRadius, canvasCenterPos[1]],
+        this._getCanvasHandlePoints = (canvasCenterPos, canvasRadius) => {
+            return [
+                [canvasCenterPos[0], canvasCenterPos[1] - canvasRadius, 0],
+                [canvasCenterPos[0] + canvasRadius, canvasCenterPos[1], 0],
+                [canvasCenterPos[0], canvasCenterPos[1] + canvasRadius, 0],
+                [canvasCenterPos[0] - canvasRadius, canvasCenterPos[1], 0],
             ];
-            const worldHandlesPoints = canvasHandlesPoints.map((p) => viewport.canvasToWorld(p));
-            return worldHandlesPoints;
         };
         this.magnifyViewportManager = AdvancedMagnifyViewportManager.getInstance();
     }
@@ -435,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