@cornerstonejs/tools 0.12.0 → 0.14.0

package/dist/cjs/tools/MagnifyTool.js

@@ -0,0 +1,169 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const base_1 = require("./base");
+const enums_1 = require("../enums");
+const core_1 = require("@cornerstonejs/core");
+const viewportFilters_1 = require("../utilities/viewportFilters");
+const triggerAnnotationRenderForViewportIds_1 = __importDefault(require("../utilities/triggerAnnotationRenderForViewportIds"));
+const store_1 = require("../store");
+const core_2 = require("@cornerstonejs/core");
+const elementCursor_1 = require("../cursors/elementCursor");
+const MAGNIFY_VIEWPORT_ID = 'maginify-viewport';
+class MagnifyTool extends base_1.BaseTool {
+    constructor(toolProps = {}, defaultToolProps = {
+        supportedInteractionTypes: ['Mouse', 'Touch'],
+        configuration: {
+            magnifySize: 10,
+            magnifyWidth: 250,
+            magnifyHeight: 250,
+        },
+    }) {
+        super(toolProps, defaultToolProps);
+        this.preMouseDownCallback = (evt) => {
+            const eventDetail = evt.detail;
+            const { currentPoints, element } = eventDetail;
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { viewport, renderingEngine } = enabledElement;
+            if (!(viewport instanceof core_1.StackViewport)) {
+                throw new Error('MagnifyTool only works on StackViewports');
+            }
+            const referencedImageId = this._getReferencedImageId(viewport);
+            if (!referencedImageId) {
+                throw new Error('MagnifyTool: No referenced image id found, reconstructed planes not supported yet');
+            }
+            const viewportIdsToRender = (0, viewportFilters_1.getViewportIdsWithToolToRender)(element, this.getToolName());
+            this.editData = {
+                referencedImageId,
+                viewportIdsToRender,
+                enabledElement,
+                renderingEngine,
+                currentPoints,
+            };
+            this._createMagnificationViewport();
+            this._activateDraw(element);
+            (0, elementCursor_1.hideElementCursor)(element);
+            evt.preventDefault();
+            (0, triggerAnnotationRenderForViewportIds_1.default)(renderingEngine, viewportIdsToRender);
+            return true;
+        };
+        this._createMagnificationViewport = () => {
+            const { enabledElement, referencedImageId, viewportIdsToRender, renderingEngine, currentPoints, } = this.editData;
+            const { viewport } = enabledElement;
+            const { element } = viewport;
+            const { voiRange } = viewport.getProperties();
+            const { canvas: canvasPos, world: worldPos } = currentPoints;
+            let magnifyToolElement;
+            magnifyToolElement = element.querySelector('.magnifyTool');
+            if (magnifyToolElement === null) {
+                const magnifyElement = document.createElement('div');
+                magnifyElement.classList.add('magnifyTool');
+                magnifyElement.style.display = 'block';
+                magnifyElement.style.width = `${this.configuration.magnifyWidth}px`;
+                magnifyElement.style.height = `${this.configuration.magnifyHeight}px`;
+                magnifyElement.style.position = 'absolute';
+                magnifyToolElement = magnifyElement;
+                const viewportElement = element.querySelector('.viewport-element');
+                viewportElement.appendChild(magnifyElement);
+                const viewportInput = {
+                    viewportId: MAGNIFY_VIEWPORT_ID,
+                    type: core_2.Enums.ViewportType.STACK,
+                    element: magnifyToolElement,
+                };
+                renderingEngine.enableElement(viewportInput);
+            }
+            magnifyToolElement.style.top = `${canvasPos[1] - this.configuration.magnifyHeight / 2}px`;
+            magnifyToolElement.style.left = `${canvasPos[0] - this.configuration.magnifyWidth / 2}px`;
+            const magnifyViewport = renderingEngine.getViewport(MAGNIFY_VIEWPORT_ID);
+            magnifyViewport.setStack([referencedImageId]).then(() => {
+                magnifyViewport.setProperties({ voiRange });
+                const { parallelScale } = viewport.getCamera();
+                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: parallelScale * (1 / this.configuration.magnifySize),
+                    focalPoint: updatedFocalPoint,
+                    position: updatedPosition,
+                });
+                magnifyViewport.render();
+            });
+            magnifyToolElement.style.display = 'block';
+            (0, triggerAnnotationRenderForViewportIds_1.default)(renderingEngine, viewportIdsToRender);
+        };
+        this._mouseDragCallback = (evt) => {
+            const eventDetail = evt.detail;
+            const { currentPoints, deltaPoints, element } = eventDetail;
+            const deltaPointsWorld = deltaPoints.world;
+            const canvasPos = currentPoints.canvas;
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { renderingEngine } = enabledElement;
+            const magnifyViewport = renderingEngine.getViewport(MAGNIFY_VIEWPORT_ID);
+            const magnifyElement = element.querySelector('.magnifyTool');
+            if (!magnifyElement) {
+                return;
+            }
+            magnifyElement.style.top = `${canvasPos[1] - this.configuration.magnifyHeight / 2}px`;
+            magnifyElement.style.left = `${canvasPos[0] - this.configuration.magnifyWidth / 2}px`;
+            const { focalPoint, position } = magnifyViewport.getCamera();
+            const updatedPosition = [
+                position[0] + deltaPointsWorld[0],
+                position[1] + deltaPointsWorld[1],
+                position[2] + deltaPointsWorld[2],
+            ];
+            const updatedFocalPoint = [
+                focalPoint[0] + deltaPointsWorld[0],
+                focalPoint[1] + deltaPointsWorld[1],
+                focalPoint[2] + deltaPointsWorld[2],
+            ];
+            magnifyViewport.setCamera({
+                focalPoint: updatedFocalPoint,
+                position: updatedPosition,
+            });
+            magnifyViewport.render();
+        };
+        this._mouseUpCallback = (evt) => {
+            const { element } = evt.detail;
+            const magnifyToolElement = element.querySelector('.magnifyTool');
+            magnifyToolElement.style.display = 'none';
+            this._deactivateDraw(element);
+            (0, elementCursor_1.resetElementCursor)(element);
+        };
+        this._activateDraw = (element) => {
+            store_1.state.isInteractingWithTool = true;
+            element.addEventListener(enums_1.Events.MOUSE_UP, this._mouseUpCallback);
+            element.addEventListener(enums_1.Events.MOUSE_DRAG, this._mouseDragCallback);
+            element.addEventListener(enums_1.Events.MOUSE_CLICK, this._mouseUpCallback);
+        };
+        this._deactivateDraw = (element) => {
+            store_1.state.isInteractingWithTool = false;
+            element.removeEventListener(enums_1.Events.MOUSE_UP, this._mouseUpCallback);
+            element.removeEventListener(enums_1.Events.MOUSE_DRAG, this._mouseDragCallback);
+            element.removeEventListener(enums_1.Events.MOUSE_CLICK, this._mouseUpCallback);
+        };
+    }
+    _getReferencedImageId(viewport) {
+        const targetId = this.getTargetId(viewport);
+        let referencedImageId;
+        if (viewport instanceof core_1.StackViewport) {
+            referencedImageId = targetId.split('imageId:')[1];
+        }
+        return referencedImageId;
+    }
+}
+exports.default = MagnifyTool;
+MagnifyTool.toolName = 'Magnify';
+//# sourceMappingURL=MagnifyTool.js.map

package/dist/cjs/tools/MagnifyTool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagnifyTool.js","sourceRoot":"","sources":["../../../src/tools/MagnifyTool.ts"],"names":[],"mappings":"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"}

package/dist/cjs/tools/annotation/AngleTool.d.ts

@@ -0,0 +1,37 @@
+import type { Types } from '@cornerstonejs/core';
+import { AnnotationTool } from '../base';
+import { EventTypes, ToolHandle, PublicToolProps, ToolProps, InteractionTypes } from '../../types';
+import { AngleAnnotation } from '../../types/ToolSpecificAnnotationTypes';
+declare class AngleTool extends AnnotationTool {
+    static toolName: string;
+    touchDragCallback: any;
+    mouseDragCallback: any;
+    angleStartedNotYetCompleted: boolean;
+    _throttledCalculateCachedStats: any;
+    editData: {
+        annotation: any;
+        viewportIdsToRender: string[];
+        handleIndex?: number;
+        movingTextBox?: boolean;
+        newAnnotation?: boolean;
+        hasMoved?: boolean;
+    } | null;
+    isDrawing: boolean;
+    isHandleOutsideImage: boolean;
+    constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
+    addNewAnnotation: (evt: EventTypes.MouseDownActivateEventType) => AngleAnnotation;
+    isPointNearTool: (element: HTMLDivElement, annotation: AngleAnnotation, canvasCoords: Types.Point2, proximity: number) => boolean;
+    toolSelectedCallback: (evt: EventTypes.MouseDownEventType, annotation: AngleAnnotation, interactionType: InteractionTypes) => void;
+    handleSelectedCallback(evt: EventTypes.MouseDownEventType, annotation: AngleAnnotation, handle: ToolHandle, interactionType?: string): void;
+    _mouseUpCallback: (evt: EventTypes.MouseUpEventType | EventTypes.MouseClickEventType) => void;
+    _mouseDragCallback: (evt: EventTypes.MouseDragEventType | EventTypes.MouseMoveEventType) => void;
+    cancel: (element: HTMLDivElement) => any;
+    _activateModify: (element: HTMLDivElement) => void;
+    _deactivateModify: (element: HTMLDivElement) => void;
+    _activateDraw: (element: HTMLDivElement) => void;
+    _deactivateDraw: (element: HTMLDivElement) => void;
+    renderAnnotation: (enabledElement: Types.IEnabledElement, svgDrawingHelper: any) => void;
+    _getTextLines(data: any, targetId: any): string[];
+    _calculateCachedStats(annotation: any, renderingEngine: any, enabledElement: any): any;
+}
+export default AngleTool;

package/dist/cjs/tools/annotation/AngleTool.js

@@ -0,0 +1,442 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const enums_1 = require("../../enums");
+const core_1 = require("@cornerstonejs/core");
+const base_1 = require("../base");
+const throttle_1 = __importDefault(require("../../utilities/throttle"));
+const annotationState_1 = require("../../stateManagement/annotation/annotationState");
+const annotationLocking_1 = require("../../stateManagement/annotation/annotationLocking");
+const lineSegment = __importStar(require("../../utilities/math/line"));
+const angleBetweenLines_1 = __importDefault(require("../../utilities/math/angle/angleBetweenLines"));
+const drawingSvg_1 = require("../../drawingSvg");
+const store_1 = require("../../store");
+const viewportFilters_1 = require("../../utilities/viewportFilters");
+const drawing_1 = require("../../utilities/drawing");
+const triggerAnnotationRenderForViewportIds_1 = __importDefault(require("../../utilities/triggerAnnotationRenderForViewportIds"));
+const elementCursor_1 = require("../../cursors/elementCursor");
+class AngleTool extends base_1.AnnotationTool {
+    constructor(toolProps = {}, defaultToolProps = {
+        supportedInteractionTypes: ['Mouse', 'Touch'],
+        configuration: {
+            shadow: true,
+            preventHandleOutsideImage: false,
+        },
+    }) {
+        super(toolProps, defaultToolProps);
+        this.addNewAnnotation = (evt) => {
+            if (this.angleStartedNotYetCompleted) {
+                return;
+            }
+            this.angleStartedNotYetCompleted = true;
+            const eventDetail = evt.detail;
+            const { currentPoints, element } = eventDetail;
+            const worldPos = currentPoints.world;
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { viewport, renderingEngine } = enabledElement;
+            (0, elementCursor_1.hideElementCursor)(element);
+            this.isDrawing = true;
+            const camera = viewport.getCamera();
+            const { viewPlaneNormal, viewUp } = camera;
+            const referencedImageId = this.getReferencedImageId(viewport, worldPos, viewPlaneNormal, viewUp);
+            const annotation = {
+                highlighted: true,
+                invalidated: true,
+                metadata: {
+                    toolName: this.getToolName(),
+                    viewPlaneNormal: [...viewPlaneNormal],
+                    viewUp: [...viewUp],
+                    FrameOfReferenceUID: viewport.getFrameOfReferenceUID(),
+                    referencedImageId,
+                },
+                data: {
+                    handles: {
+                        points: [[...worldPos], [...worldPos]],
+                        activeHandleIndex: null,
+                        textBox: {
+                            hasMoved: false,
+                            worldPosition: [0, 0, 0],
+                            worldBoundingBox: {
+                                topLeft: [0, 0, 0],
+                                topRight: [0, 0, 0],
+                                bottomLeft: [0, 0, 0],
+                                bottomRight: [0, 0, 0],
+                            },
+                        },
+                    },
+                    label: '',
+                    cachedStats: {},
+                },
+            };
+            (0, annotationState_1.addAnnotation)(element, annotation);
+            const viewportIdsToRender = (0, viewportFilters_1.getViewportIdsWithToolToRender)(element, this.getToolName());
+            this.editData = {
+                annotation,
+                viewportIdsToRender,
+                handleIndex: 1,
+                movingTextBox: false,
+                newAnnotation: true,
+                hasMoved: false,
+            };
+            this._activateDraw(element);
+            evt.preventDefault();
+            (0, triggerAnnotationRenderForViewportIds_1.default)(renderingEngine, viewportIdsToRender);
+            return annotation;
+        };
+        this.isPointNearTool = (element, annotation, canvasCoords, proximity) => {
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { viewport } = enabledElement;
+            const { data } = annotation;
+            const [point1, point2, point3] = data.handles.points;
+            const canvasPoint1 = viewport.worldToCanvas(point1);
+            const canvasPoint2 = viewport.worldToCanvas(point2);
+            const canvasPoint3 = viewport.worldToCanvas(point3);
+            const line1 = {
+                start: {
+                    x: canvasPoint1[0],
+                    y: canvasPoint1[1],
+                },
+                end: {
+                    x: canvasPoint2[0],
+                    y: canvasPoint2[1],
+                },
+            };
+            const line2 = {
+                start: {
+                    x: canvasPoint2[0],
+                    y: canvasPoint2[1],
+                },
+                end: {
+                    x: canvasPoint3[0],
+                    y: canvasPoint3[1],
+                },
+            };
+            const distanceToPoint = lineSegment.distanceToPoint([line1.start.x, line1.start.y], [line1.end.x, line1.end.y], [canvasCoords[0], canvasCoords[1]]);
+            const distanceToPoint2 = lineSegment.distanceToPoint([line2.start.x, line2.start.y], [line2.end.x, line2.end.y], [canvasCoords[0], canvasCoords[1]]);
+            if (distanceToPoint <= proximity || distanceToPoint2 <= proximity) {
+                return true;
+            }
+            return false;
+        };
+        this.toolSelectedCallback = (evt, annotation, interactionType) => {
+            const eventDetail = evt.detail;
+            const { element } = eventDetail;
+            annotation.highlighted = true;
+            const viewportIdsToRender = (0, viewportFilters_1.getViewportIdsWithToolToRender)(element, this.getToolName());
+            this.editData = {
+                annotation,
+                viewportIdsToRender,
+                movingTextBox: false,
+            };
+            this._activateModify(element);
+            (0, elementCursor_1.hideElementCursor)(element);
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { renderingEngine } = enabledElement;
+            (0, triggerAnnotationRenderForViewportIds_1.default)(renderingEngine, viewportIdsToRender);
+            evt.preventDefault();
+        };
+        this._mouseUpCallback = (evt) => {
+            const eventDetail = evt.detail;
+            const { element } = eventDetail;
+            const { annotation, viewportIdsToRender, newAnnotation, hasMoved } = this.editData;
+            const { data } = annotation;
+            if (newAnnotation && !hasMoved) {
+                return;
+            }
+            if (this.angleStartedNotYetCompleted && data.handles.points.length === 2) {
+                this.editData.handleIndex = 2;
+                return;
+            }
+            this.angleStartedNotYetCompleted = false;
+            annotation.highlighted = false;
+            data.handles.activeHandleIndex = null;
+            this._deactivateModify(element);
+            this._deactivateDraw(element);
+            (0, elementCursor_1.resetElementCursor)(element);
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { renderingEngine } = enabledElement;
+            if (this.isHandleOutsideImage &&
+                this.configuration.preventHandleOutsideImage) {
+                (0, annotationState_1.removeAnnotation)(annotation.annotationUID, element);
+            }
+            (0, triggerAnnotationRenderForViewportIds_1.default)(renderingEngine, viewportIdsToRender);
+            if (newAnnotation) {
+                const eventType = enums_1.Events.ANNOTATION_COMPLETED;
+                const eventDetail = {
+                    annotation,
+                };
+                (0, core_1.triggerEvent)(core_1.eventTarget, eventType, eventDetail);
+            }
+            this.editData = null;
+            this.isDrawing = false;
+        };
+        this._mouseDragCallback = (evt) => {
+            this.isDrawing = true;
+            const eventDetail = evt.detail;
+            const { element } = eventDetail;
+            const { annotation, viewportIdsToRender, handleIndex, movingTextBox } = this.editData;
+            const { data } = annotation;
+            if (movingTextBox) {
+                const { deltaPoints } = eventDetail;
+                const worldPosDelta = deltaPoints.world;
+                const { textBox } = data.handles;
+                const { worldPosition } = textBox;
+                worldPosition[0] += worldPosDelta[0];
+                worldPosition[1] += worldPosDelta[1];
+                worldPosition[2] += worldPosDelta[2];
+                textBox.hasMoved = true;
+            }
+            else if (handleIndex === undefined) {
+                const { deltaPoints } = eventDetail;
+                const worldPosDelta = deltaPoints.world;
+                const points = data.handles.points;
+                points.forEach((point) => {
+                    point[0] += worldPosDelta[0];
+                    point[1] += worldPosDelta[1];
+                    point[2] += worldPosDelta[2];
+                });
+                annotation.invalidated = true;
+            }
+            else {
+                const { currentPoints } = eventDetail;
+                const worldPos = currentPoints.world;
+                data.handles.points[handleIndex] = [...worldPos];
+                annotation.invalidated = true;
+            }
+            this.editData.hasMoved = true;
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { renderingEngine } = enabledElement;
+            (0, triggerAnnotationRenderForViewportIds_1.default)(renderingEngine, viewportIdsToRender);
+        };
+        this.cancel = (element) => {
+            if (this.isDrawing) {
+                this.isDrawing = false;
+                this._deactivateDraw(element);
+                this._deactivateModify(element);
+                (0, elementCursor_1.resetElementCursor)(element);
+                const { annotation, viewportIdsToRender, newAnnotation } = this.editData;
+                const { data } = annotation;
+                annotation.highlighted = false;
+                data.handles.activeHandleIndex = null;
+                const enabledElement = (0, core_1.getEnabledElement)(element);
+                const { renderingEngine } = enabledElement;
+                (0, triggerAnnotationRenderForViewportIds_1.default)(renderingEngine, viewportIdsToRender);
+                if (newAnnotation) {
+                    const eventType = enums_1.Events.ANNOTATION_COMPLETED;
+                    const eventDetail = {
+                        annotation,
+                    };
+                    (0, core_1.triggerEvent)(core_1.eventTarget, eventType, eventDetail);
+                }
+                this.editData = null;
+                return annotation.annotationUID;
+            }
+        };
+        this._activateModify = (element) => {
+            store_1.state.isInteractingWithTool = true;
+            element.addEventListener(enums_1.Events.MOUSE_UP, this._mouseUpCallback);
+            element.addEventListener(enums_1.Events.MOUSE_DRAG, this._mouseDragCallback);
+            element.addEventListener(enums_1.Events.MOUSE_CLICK, this._mouseUpCallback);
+        };
+        this._deactivateModify = (element) => {
+            store_1.state.isInteractingWithTool = false;
+            element.removeEventListener(enums_1.Events.MOUSE_UP, this._mouseUpCallback);
+            element.removeEventListener(enums_1.Events.MOUSE_DRAG, this._mouseDragCallback);
+            element.removeEventListener(enums_1.Events.MOUSE_CLICK, this._mouseUpCallback);
+        };
+        this._activateDraw = (element) => {
+            store_1.state.isInteractingWithTool = true;
+            element.addEventListener(enums_1.Events.MOUSE_UP, this._mouseUpCallback);
+            element.addEventListener(enums_1.Events.MOUSE_DRAG, this._mouseDragCallback);
+            element.addEventListener(enums_1.Events.MOUSE_MOVE, this._mouseDragCallback);
+            element.addEventListener(enums_1.Events.MOUSE_CLICK, this._mouseUpCallback);
+        };
+        this._deactivateDraw = (element) => {
+            store_1.state.isInteractingWithTool = false;
+            element.removeEventListener(enums_1.Events.MOUSE_UP, this._mouseUpCallback);
+            element.removeEventListener(enums_1.Events.MOUSE_DRAG, this._mouseDragCallback);
+            element.removeEventListener(enums_1.Events.MOUSE_MOVE, this._mouseDragCallback);
+            element.removeEventListener(enums_1.Events.MOUSE_CLICK, this._mouseUpCallback);
+        };
+        this.renderAnnotation = (enabledElement, svgDrawingHelper) => {
+            var _a;
+            const { viewport } = enabledElement;
+            const { element } = viewport;
+            let annotations = (0, annotationState_1.getAnnotations)(element, this.getToolName());
+            if (!(annotations === null || annotations === void 0 ? void 0 : annotations.length)) {
+                return;
+            }
+            annotations = this.filterInteractableAnnotationsForElement(element, annotations);
+            if (!(annotations === null || annotations === void 0 ? void 0 : annotations.length)) {
+                return;
+            }
+            const targetId = this.getTargetId(viewport);
+            const renderingEngine = viewport.getRenderingEngine();
+            const styleSpecifier = {
+                toolGroupId: this.toolGroupId,
+                toolName: this.getToolName(),
+                viewportId: enabledElement.viewport.id,
+            };
+            for (let i = 0; i < annotations.length; i++) {
+                const annotation = annotations[i];
+                const { annotationUID, data } = annotation;
+                const { points, activeHandleIndex } = data.handles;
+                styleSpecifier.annotationUID = annotationUID;
+                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));
+                if (!data.cachedStats[targetId]) {
+                    data.cachedStats[targetId] = {
+                        angle: null,
+                    };
+                    this._calculateCachedStats(annotation, renderingEngine, enabledElement);
+                }
+                else if (annotation.invalidated) {
+                    this._throttledCalculateCachedStats(annotation, renderingEngine, enabledElement);
+                }
+                let activeHandleCanvasCoords;
+                if (!(0, annotationLocking_1.isAnnotationLocked)(annotation) &&
+                    !this.editData &&
+                    activeHandleIndex !== null) {
+                    activeHandleCanvasCoords = [canvasCoordinates[activeHandleIndex]];
+                }
+                if (activeHandleCanvasCoords) {
+                    const handleGroupUID = '0';
+                    (0, drawingSvg_1.drawHandles)(svgDrawingHelper, annotationUID, handleGroupUID, canvasCoordinates, {
+                        color,
+                        lineDash,
+                        lineWidth,
+                    });
+                }
+                let lineUID = '1';
+                (0, drawingSvg_1.drawLine)(svgDrawingHelper, annotationUID, lineUID, canvasCoordinates[0], canvasCoordinates[1], {
+                    color,
+                    width: lineWidth,
+                    lineDash,
+                });
+                if (canvasCoordinates.length !== 3) {
+                    return;
+                }
+                lineUID = '2';
+                (0, drawingSvg_1.drawLine)(svgDrawingHelper, annotationUID, lineUID, canvasCoordinates[1], canvasCoordinates[2], {
+                    color,
+                    width: lineWidth,
+                    lineDash,
+                });
+                if (!viewport.getRenderingEngine()) {
+                    console.warn('Rendering Engine has been destroyed');
+                    return;
+                }
+                if (!((_a = data.cachedStats[targetId]) === null || _a === void 0 ? void 0 : _a.angle)) {
+                    continue;
+                }
+                const textLines = this._getTextLines(data, targetId);
+                if (!data.handles.textBox.hasMoved) {
+                    const canvasTextBoxCoords = (0, drawing_1.getTextBoxCoordsCanvas)(canvasCoordinates);
+                    data.handles.textBox.worldPosition =
+                        viewport.canvasToWorld(canvasTextBoxCoords);
+                }
+                const textBoxPosition = viewport.worldToCanvas(data.handles.textBox.worldPosition);
+                const textBoxUID = '1';
+                const boundingBox = (0, drawingSvg_1.drawLinkedTextBox)(svgDrawingHelper, annotationUID, textBoxUID, textLines, textBoxPosition, canvasCoordinates, {}, this.getLinkedTextBoxStyle(styleSpecifier, annotation));
+                const { x: left, y: top, width, height } = boundingBox;
+                data.handles.textBox.worldBoundingBox = {
+                    topLeft: viewport.canvasToWorld([left, top]),
+                    topRight: viewport.canvasToWorld([left + width, top]),
+                    bottomLeft: viewport.canvasToWorld([left, top + height]),
+                    bottomRight: viewport.canvasToWorld([left + width, top + height]),
+                };
+            }
+        };
+        this._throttledCalculateCachedStats = (0, throttle_1.default)(this._calculateCachedStats, 100, { trailing: true });
+    }
+    handleSelectedCallback(evt, annotation, handle, interactionType = 'mouse') {
+        const eventDetail = evt.detail;
+        const { element } = eventDetail;
+        const { data } = annotation;
+        annotation.highlighted = true;
+        let movingTextBox = false;
+        let handleIndex;
+        if (handle.worldPosition) {
+            movingTextBox = true;
+        }
+        else {
+            handleIndex = data.handles.points.findIndex((p) => p === handle);
+        }
+        const viewportIdsToRender = (0, viewportFilters_1.getViewportIdsWithToolToRender)(element, this.getToolName());
+        this.editData = {
+            annotation,
+            viewportIdsToRender,
+            handleIndex,
+            movingTextBox,
+        };
+        this._activateModify(element);
+        (0, elementCursor_1.hideElementCursor)(element);
+        const enabledElement = (0, core_1.getEnabledElement)(element);
+        const { renderingEngine } = enabledElement;
+        (0, triggerAnnotationRenderForViewportIds_1.default)(renderingEngine, viewportIdsToRender);
+        evt.preventDefault();
+    }
+    _getTextLines(data, targetId) {
+        const cachedVolumeStats = data.cachedStats[targetId];
+        const { angle } = cachedVolumeStats;
+        if (angle === undefined) {
+            return;
+        }
+        const textLines = [`${angle.toFixed(2)} ${String.fromCharCode(176)}`];
+        return textLines;
+    }
+    _calculateCachedStats(annotation, renderingEngine, enabledElement) {
+        const data = annotation.data;
+        const { viewportId, renderingEngineId } = enabledElement;
+        if (data.handles.points.length !== 3) {
+            return;
+        }
+        const worldPos1 = data.handles.points[0];
+        const worldPos2 = data.handles.points[1];
+        const worldPos3 = data.handles.points[2];
+        const { cachedStats } = data;
+        const targetIds = Object.keys(cachedStats);
+        for (let i = 0; i < targetIds.length; i++) {
+            const targetId = targetIds[i];
+            const angle = (0, angleBetweenLines_1.default)([worldPos1, worldPos2], [worldPos2, worldPos3]);
+            cachedStats[targetId] = {
+                angle,
+            };
+        }
+        annotation.invalidated = false;
+        const eventType = enums_1.Events.ANNOTATION_MODIFIED;
+        const eventDetail = {
+            annotation,
+            viewportId,
+            renderingEngineId,
+        };
+        (0, core_1.triggerEvent)(core_1.eventTarget, eventType, eventDetail);
+        return cachedStats;
+    }
+}
+AngleTool.toolName = 'Angle';
+exports.default = AngleTool;
+//# sourceMappingURL=AngleTool.js.map