@cornerstonejs/tools 0.1.1

package/dist/cjs/tools/CrosshairsTool.js

@@ -0,0 +1,1280 @@
+"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 core_1 = require("@cornerstonejs/core");
+const annotationState_1 = require("../stateManagement/annotation/annotationState");
+const drawingSvg_1 = require("../drawingSvg");
+const gl_matrix_1 = require("gl-matrix");
+const store_1 = require("../store");
+const enums_1 = require("../enums");
+const viewportFilters_1 = require("../utilities/viewportFilters");
+const elementCursor_1 = require("../cursors/elementCursor");
+const utilities_1 = require("../utilities");
+const Math_1 = __importDefault(require("vtk.js/Sources/Common/Core/Math"));
+const MatrixBuilder_1 = __importDefault(require("vtk.js/Sources/Common/Core/MatrixBuilder"));
+const math_1 = require("../utilities/math");
+const annotationLocking_1 = require("../stateManagement/annotation/annotationLocking");
+const triggerAnnotationRenderForViewportUIDs_1 = __importDefault(require("../utilities/triggerAnnotationRenderForViewportUIDs"));
+const { liangBarksyClip } = utilities_1.math.vec2;
+function defaultReferenceLineColor() {
+    return 'rgb(200, 200, 200)';
+}
+function defaultReferenceLineControllable() {
+    return true;
+}
+function defaultReferenceLineDraggableRotatable() {
+    return true;
+}
+function defaultReferenceLineSlabThicknessControlsOn() {
+    return false;
+}
+const OPERATION = {
+    DRAG: 1,
+    ROTATE: 2,
+    SLAB: 3,
+};
+const EPSILON = 1e-3;
+class CrosshairsTool extends base_1.AnnotationTool {
+    constructor(toolProps = {}, defaultToolProps = {
+        supportedInteractionTypes: ['Mouse'],
+        configuration: {
+            shadow: true,
+            autoPan: {
+                enabled: false,
+                panSize: 10,
+            },
+        },
+    }) {
+        var _a, _b, _c, _d;
+        super(toolProps, defaultToolProps);
+        this.toolCenter = [0, 0, 0];
+        this.initializeViewport = ({ renderingEngineUID, viewportUID, }) => {
+            const enabledElement = (0, core_1.getEnabledElementByUIDs)(viewportUID, renderingEngineUID);
+            const { FrameOfReferenceUID, viewport } = enabledElement;
+            const { element } = viewport;
+            const { position, focalPoint, viewPlaneNormal } = viewport.getCamera();
+            let annotations = (0, annotationState_1.getAnnotations)(element, CrosshairsTool.toolName);
+            annotations = this.filterInteractableAnnotationsForElement(element, annotations);
+            if (annotations.length) {
+                (0, annotationState_1.removeAnnotation)(element, annotations[0].annotationUID);
+            }
+            const annotation = {
+                highlighted: false,
+                metadata: {
+                    cameraPosition: [...position],
+                    cameraFocalPoint: [...focalPoint],
+                    FrameOfReferenceUID,
+                    toolName: CrosshairsTool.toolName,
+                },
+                data: {
+                    handles: {
+                        rotationPoints: [],
+                        slabThicknessPoints: [],
+                        toolCenter: this.toolCenter,
+                    },
+                    activeOperation: null,
+                    activeViewportUIDs: [],
+                    viewportUID,
+                },
+            };
+            (0, elementCursor_1.resetElementCursor)(element);
+            (0, annotationState_1.addAnnotation)(element, annotation);
+            return {
+                normal: viewPlaneNormal,
+                point: viewport.canvasToWorld([
+                    viewport.sWidth / 2,
+                    viewport.sHeight / 2,
+                ]),
+            };
+        };
+        this.init = (viewports) => {
+            if (!viewports.length || viewports.length === 1) {
+                throw new Error('For crosshairs to operate, at least two viewports must be given.');
+            }
+            const [firstViewport, secondViewport, thirdViewport] = viewports;
+            const { normal: normal1, point: point1 } = this.initializeViewport(firstViewport);
+            const { normal: normal2, point: point2 } = this.initializeViewport(secondViewport);
+            let normal3 = [0, 0, 0];
+            let point3 = gl_matrix_1.vec3.create();
+            if (thirdViewport) {
+                ;
+                ({ normal: normal3, point: point3 } =
+                    this.initializeViewport(thirdViewport));
+            }
+            else {
+                gl_matrix_1.vec3.add(point3, point1, point2);
+                gl_matrix_1.vec3.scale(point3, point3, 0.5);
+                gl_matrix_1.vec3.cross(normal3, normal1, normal2);
+            }
+            const firstPlane = core_1.utilities.planar.planeEquation(normal1, point1);
+            const secondPlane = core_1.utilities.planar.planeEquation(normal2, point2);
+            const thirdPlane = core_1.utilities.planar.planeEquation(normal3, point3);
+            this.toolCenter = core_1.utilities.planar.threePlaneIntersection(firstPlane, secondPlane, thirdPlane);
+        };
+        this.addNewAnnotation = (evt, interactionType) => {
+            const eventDetail = evt.detail;
+            const { element } = eventDetail;
+            const { currentPoints } = eventDetail;
+            const jumpWorld = currentPoints.world;
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { viewport } = enabledElement;
+            this._jump(enabledElement, jumpWorld);
+            const annotations = (0, annotationState_1.getAnnotations)(element, CrosshairsTool.toolName);
+            const filteredAnnotations = this.filterInteractableAnnotationsForElement(viewport.element, annotations);
+            const { data } = filteredAnnotations[0];
+            const { rotationPoints } = data.handles;
+            const viewportUIDArray = [];
+            for (let i = 0; i < rotationPoints.length - 1; ++i) {
+                const otherViewport = rotationPoints[i][1];
+                const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
+                if (!viewportControllable || !viewportDraggableRotatable) {
+                    continue;
+                }
+                viewportUIDArray.push(otherViewport.uid);
+                i++;
+            }
+            data.activeViewportUIDs = [...viewportUIDArray];
+            data.handles.activeOperation = OPERATION.DRAG;
+            evt.preventDefault();
+            (0, elementCursor_1.hideElementCursor)(element);
+            this._activateModify(element);
+            return filteredAnnotations[0];
+        };
+        this.cancel = () => {
+            console.log('Not implemented yet');
+        };
+        this.handleSelectedCallback = (evt, annotation, handle, interactionType = 'mouse') => {
+            const eventDetail = evt.detail;
+            const { element } = eventDetail;
+            annotation.highlighted = true;
+            this._activateModify(element);
+            (0, elementCursor_1.hideElementCursor)(element);
+            evt.preventDefault();
+        };
+        this.isPointNearTool = (element, annotation, canvasCoords, proximity) => {
+            if (this._pointNearTool(element, annotation, canvasCoords, 6)) {
+                return true;
+            }
+            return false;
+        };
+        this.toolSelectedCallback = (evt, annotation, interactionType) => {
+            const eventDetail = evt.detail;
+            const { element } = eventDetail;
+            annotation.highlighted = true;
+            this._activateModify(element);
+            (0, elementCursor_1.hideElementCursor)(element);
+            evt.preventDefault();
+        };
+        this.onCameraModified = (evt) => {
+            const eventDetail = evt.detail;
+            const { element } = eventDetail;
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { renderingEngine } = enabledElement;
+            const viewport = enabledElement.viewport;
+            const requireSameOrientation = false;
+            const viewportUIDsToRender = (0, viewportFilters_1.getViewportUIDsWithToolToRender)(element, CrosshairsTool.toolName, requireSameOrientation);
+            const annotations = (0, annotationState_1.getAnnotations)(element, CrosshairsTool.toolName);
+            const filteredToolAnnotations = this.filterInteractableAnnotationsForElement(element, annotations);
+            const viewportAnnotation = filteredToolAnnotations[0];
+            if (!viewportAnnotation) {
+                return;
+            }
+            const currentCamera = viewport.getCamera();
+            const oldCameraPosition = viewportAnnotation.metadata.cameraPosition;
+            const deltaCameraPosition = [0, 0, 0];
+            Math_1.default.subtract(currentCamera.position, oldCameraPosition, deltaCameraPosition);
+            const oldCameraFocalPoint = viewportAnnotation.metadata.cameraFocalPoint;
+            const deltaCameraFocalPoint = [0, 0, 0];
+            Math_1.default.subtract(currentCamera.focalPoint, oldCameraFocalPoint, deltaCameraFocalPoint);
+            viewportAnnotation.metadata.cameraPosition = [...currentCamera.position];
+            viewportAnnotation.metadata.cameraFocalPoint = [...currentCamera.focalPoint];
+            const viewportControllable = this._getReferenceLineControllable(viewport.uid);
+            const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(viewport.uid);
+            if (!core_1.utilities.isEqual(currentCamera.position, oldCameraPosition, 1e-3) &&
+                viewportControllable &&
+                viewportDraggableRotatable) {
+                let IsTranslation = true;
+                if (!core_1.utilities.isEqual(deltaCameraPosition, deltaCameraFocalPoint, 1e-3)) {
+                    IsTranslation = false;
+                }
+                if (IsTranslation &&
+                    Math.abs(Math_1.default.dot(deltaCameraPosition, currentCamera.viewPlaneNormal)) > 1e-2) {
+                    this.toolCenter[0] += deltaCameraPosition[0];
+                    this.toolCenter[1] += deltaCameraPosition[1];
+                    this.toolCenter[2] += deltaCameraPosition[2];
+                }
+            }
+            if (this.configuration.autoPan.enabled) {
+                const viewports = core_1.utilities.getVolumeViewportsContainingSameVolumes(viewport, renderingEngine.uid);
+                viewports.forEach(({ uid: viewportUID }) => {
+                    if (viewportUID !== viewport.uid) {
+                        this._autoPanViewportIfNecessary(viewportUID, renderingEngine);
+                    }
+                });
+            }
+            (0, triggerAnnotationRenderForViewportUIDs_1.default)(renderingEngine, viewportUIDsToRender);
+        };
+        this.mouseMoveCallback = (evt, filteredToolAnnotations) => {
+            const { element, currentPoints } = evt.detail;
+            const canvasCoords = currentPoints.canvas;
+            let imageNeedsUpdate = false;
+            for (let i = 0; i < filteredToolAnnotations.length; i++) {
+                const annotation = filteredToolAnnotations[i];
+                if ((0, annotationLocking_1.isAnnotationLocked)(annotation)) {
+                    continue;
+                }
+                const { data, highlighted } = annotation;
+                if (!data.handles) {
+                    continue;
+                }
+                const previousActiveOperation = data.handles.activeOperation;
+                const previousActiveViewportUIDs = data.activeViewportUIDs && data.activeViewportUIDs.length > 0
+                    ? [...data.activeViewportUIDs]
+                    : [];
+                data.activeViewportUIDs = [];
+                data.handles.activeOperation = null;
+                const handleNearImagePoint = this.getHandleNearImagePoint(element, annotation, canvasCoords, 6);
+                let near = false;
+                if (handleNearImagePoint) {
+                    near = true;
+                }
+                else {
+                    near = this._pointNearTool(element, annotation, canvasCoords, 6);
+                }
+                const nearToolAndNotMarkedActive = near && !highlighted;
+                const notNearToolAndMarkedActive = !near && highlighted;
+                if (nearToolAndNotMarkedActive || notNearToolAndMarkedActive) {
+                    annotation.highlighted = !highlighted;
+                    imageNeedsUpdate = true;
+                }
+                else if (data.handles.activeOperation !== previousActiveOperation ||
+                    !this._areViewportUIDArraysEqual(data.activeViewportUIDs, previousActiveViewportUIDs)) {
+                    imageNeedsUpdate = true;
+                }
+            }
+            return imageNeedsUpdate;
+        };
+        this.filterInteractableAnnotationsForElement = (element, annotations) => {
+            if (!annotations || !annotations.length) {
+                return [];
+            }
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { viewportUID } = enabledElement;
+            const viewportUIDSpecificCrosshairs = annotations.filter((annotation) => annotation.data.viewportUID === viewportUID);
+            return viewportUIDSpecificCrosshairs;
+        };
+        this.renderAnnotation = (enabledElement, svgDrawingHelper) => {
+            const { viewport, renderingEngine } = enabledElement;
+            const { element } = viewport;
+            const annotations = (0, annotationState_1.getAnnotations)(element, CrosshairsTool.toolName);
+            const camera = viewport.getCamera();
+            const filteredToolAnnotations = this.filterInteractableAnnotationsForElement(element, annotations);
+            const viewportAnnotation = filteredToolAnnotations[0];
+            if (!annotations || !viewportAnnotation || !viewportAnnotation.data) {
+                return;
+            }
+            const annotationUID = viewportAnnotation.annotationUID;
+            const { sWidth, sHeight } = viewport;
+            const canvasDiagonalLength = Math.sqrt(sWidth * sWidth + sHeight * sHeight);
+            const data = viewportAnnotation.data;
+            const crosshairCenterCanvas = viewport.worldToCanvas(this.toolCenter);
+            const otherViewportAnnotations = this._filterAnnotationsByUniqueViewportOrientations(enabledElement, annotations);
+            const referenceLines = [];
+            otherViewportAnnotations.forEach((annotation) => {
+                const { data } = annotation;
+                data.handles.toolCenter = this.toolCenter;
+                const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                const otherCamera = otherViewport.getCamera();
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                const otherViewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
+                const otherViewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.uid);
+                const { sWidth, sHeight } = otherViewport;
+                const otherCanvasDiagonalLength = Math.sqrt(sWidth * sWidth + sHeight * sHeight);
+                const otherCanvasCenter = [sWidth * 0.5, sHeight * 0.5];
+                const otherViewportCenterWorld = otherViewport.canvasToWorld(otherCanvasCenter);
+                const direction = [0, 0, 0];
+                Math_1.default.cross(camera.viewPlaneNormal, otherCamera.viewPlaneNormal, direction);
+                Math_1.default.normalize(direction);
+                Math_1.default.multiplyScalar(direction, otherCanvasDiagonalLength);
+                const pointWorld0 = [0, 0, 0];
+                Math_1.default.add(otherViewportCenterWorld, direction, pointWorld0);
+                const pointWorld1 = [0, 0, 0];
+                Math_1.default.subtract(otherViewportCenterWorld, direction, pointWorld1);
+                const canvasBox = [0, 0, sWidth, sHeight];
+                const pointCanvas0 = viewport.worldToCanvas(pointWorld0);
+                const otherViewportCenterCanvas = viewport.worldToCanvas(otherViewportCenterWorld);
+                const canvasUnitVectorFromCenter = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.subtract(canvasUnitVectorFromCenter, pointCanvas0, otherViewportCenterCanvas);
+                gl_matrix_1.vec2.normalize(canvasUnitVectorFromCenter, canvasUnitVectorFromCenter);
+                const canvasVectorFromCenterLong = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.scale(canvasVectorFromCenterLong, canvasUnitVectorFromCenter, canvasDiagonalLength * 100);
+                const canvasVectorFromCenterMid = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.scale(canvasVectorFromCenterMid, canvasUnitVectorFromCenter, canvasDiagonalLength * 0.25);
+                const canvasVectorFromCenterShort = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.scale(canvasVectorFromCenterShort, canvasUnitVectorFromCenter, canvasDiagonalLength * 0.15);
+                const canvasVectorFromCenterStart = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.scale(canvasVectorFromCenterStart, canvasUnitVectorFromCenter, otherViewportAnnotations.length === 2 ? canvasDiagonalLength * 0.04 : 0);
+                const refLinePointOne = gl_matrix_1.vec2.create();
+                const refLinePointTwo = gl_matrix_1.vec2.create();
+                const refLinePointThree = gl_matrix_1.vec2.create();
+                const refLinePointFour = gl_matrix_1.vec2.create();
+                let refLinesCenter = gl_matrix_1.vec2.clone(crosshairCenterCanvas);
+                if (!otherViewportDraggableRotatable || !otherViewportControllable) {
+                    refLinesCenter = gl_matrix_1.vec2.clone(otherViewportCenterCanvas);
+                }
+                gl_matrix_1.vec2.add(refLinePointOne, refLinesCenter, canvasVectorFromCenterStart);
+                gl_matrix_1.vec2.add(refLinePointTwo, refLinesCenter, canvasVectorFromCenterLong);
+                gl_matrix_1.vec2.subtract(refLinePointThree, refLinesCenter, canvasVectorFromCenterStart);
+                gl_matrix_1.vec2.subtract(refLinePointFour, refLinesCenter, canvasVectorFromCenterLong);
+                liangBarksyClip(refLinePointOne, refLinePointTwo, canvasBox);
+                liangBarksyClip(refLinePointThree, refLinePointFour, canvasBox);
+                const rotHandleOne = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.subtract(rotHandleOne, crosshairCenterCanvas, canvasVectorFromCenterMid);
+                const rotHandleTwo = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.add(rotHandleTwo, crosshairCenterCanvas, canvasVectorFromCenterMid);
+                let stHandlesCenterCanvas = gl_matrix_1.vec2.clone(crosshairCenterCanvas);
+                if (!otherViewportDraggableRotatable &&
+                    otherViewportSlabThicknessControlsOn) {
+                    stHandlesCenterCanvas = gl_matrix_1.vec2.clone(otherViewportCenterCanvas);
+                }
+                let stHandlesCenterWorld = [...this.toolCenter];
+                if (!otherViewportDraggableRotatable &&
+                    otherViewportSlabThicknessControlsOn) {
+                    stHandlesCenterWorld = [...otherViewportCenterWorld];
+                }
+                const worldUnitVectorFromCenter = [0, 0, 0];
+                Math_1.default.subtract(pointWorld0, pointWorld1, worldUnitVectorFromCenter);
+                Math_1.default.normalize(worldUnitVectorFromCenter);
+                const { viewPlaneNormal } = camera;
+                const { matrix } = MatrixBuilder_1.default
+                    .buildFromDegree()
+                    .rotate(90, viewPlaneNormal);
+                const worldUnitOrthoVectorFromCenter = [0, 0, 0];
+                gl_matrix_1.vec3.transformMat4(worldUnitOrthoVectorFromCenter, worldUnitVectorFromCenter, matrix);
+                const slabThicknessValue = otherViewport.getSlabThickness();
+                const worldOrthoVectorFromCenter = [
+                    ...worldUnitOrthoVectorFromCenter,
+                ];
+                Math_1.default.multiplyScalar(worldOrthoVectorFromCenter, slabThicknessValue);
+                const worldVerticalRefPoint = [0, 0, 0];
+                Math_1.default.add(stHandlesCenterWorld, worldOrthoVectorFromCenter, worldVerticalRefPoint);
+                const canvasVerticalRefPoint = viewport.worldToCanvas(worldVerticalRefPoint);
+                const canvasOrthoVectorFromCenter = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.subtract(canvasOrthoVectorFromCenter, stHandlesCenterCanvas, canvasVerticalRefPoint);
+                const stLinePointOne = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.subtract(stLinePointOne, stHandlesCenterCanvas, canvasVectorFromCenterLong);
+                gl_matrix_1.vec2.add(stLinePointOne, stLinePointOne, canvasOrthoVectorFromCenter);
+                const stLinePointTwo = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.add(stLinePointTwo, stHandlesCenterCanvas, canvasVectorFromCenterLong);
+                gl_matrix_1.vec2.add(stLinePointTwo, stLinePointTwo, canvasOrthoVectorFromCenter);
+                liangBarksyClip(stLinePointOne, stLinePointTwo, canvasBox);
+                const stLinePointThree = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.add(stLinePointThree, stHandlesCenterCanvas, canvasVectorFromCenterLong);
+                gl_matrix_1.vec2.subtract(stLinePointThree, stLinePointThree, canvasOrthoVectorFromCenter);
+                const stLinePointFour = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.subtract(stLinePointFour, stHandlesCenterCanvas, canvasVectorFromCenterLong);
+                gl_matrix_1.vec2.subtract(stLinePointFour, stLinePointFour, canvasOrthoVectorFromCenter);
+                liangBarksyClip(stLinePointThree, stLinePointFour, canvasBox);
+                const stHandleOne = gl_matrix_1.vec2.create();
+                const stHandleTwo = gl_matrix_1.vec2.create();
+                const stHandleThree = gl_matrix_1.vec2.create();
+                const stHandleFour = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.subtract(stHandleOne, stHandlesCenterCanvas, canvasVectorFromCenterShort);
+                gl_matrix_1.vec2.add(stHandleOne, stHandleOne, canvasOrthoVectorFromCenter);
+                gl_matrix_1.vec2.add(stHandleTwo, stHandlesCenterCanvas, canvasVectorFromCenterShort);
+                gl_matrix_1.vec2.add(stHandleTwo, stHandleTwo, canvasOrthoVectorFromCenter);
+                gl_matrix_1.vec2.subtract(stHandleThree, stHandlesCenterCanvas, canvasVectorFromCenterShort);
+                gl_matrix_1.vec2.subtract(stHandleThree, stHandleThree, canvasOrthoVectorFromCenter);
+                gl_matrix_1.vec2.add(stHandleFour, stHandlesCenterCanvas, canvasVectorFromCenterShort);
+                gl_matrix_1.vec2.subtract(stHandleFour, stHandleFour, canvasOrthoVectorFromCenter);
+                referenceLines.push([
+                    otherViewport,
+                    refLinePointOne,
+                    refLinePointTwo,
+                    refLinePointThree,
+                    refLinePointFour,
+                    stLinePointOne,
+                    stLinePointTwo,
+                    stLinePointThree,
+                    stLinePointFour,
+                    rotHandleOne,
+                    rotHandleTwo,
+                    stHandleOne,
+                    stHandleTwo,
+                    stHandleThree,
+                    stHandleFour,
+                ]);
+            });
+            const newRtpoints = [];
+            const newStpoints = [];
+            const viewportColor = this._getReferenceLineColor(viewport.uid);
+            const color = viewportColor !== undefined ? viewportColor : 'rgb(200, 200, 200)';
+            referenceLines.forEach((line, lineIndex) => {
+                const otherViewport = line[0];
+                const viewportColor = this._getReferenceLineColor(otherViewport.uid);
+                const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
+                const viewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.uid);
+                const selectedViewportUID = data.activeViewportUIDs.find((uid) => uid === otherViewport.uid);
+                let color = viewportColor !== undefined ? viewportColor : 'rgb(200, 200, 200)';
+                let lineWidth = 1;
+                const lineActive = data.handles.activeOperation !== null &&
+                    data.handles.activeOperation === OPERATION.DRAG &&
+                    selectedViewportUID;
+                if (lineActive) {
+                    lineWidth = 2.5;
+                }
+                let lineUID = `${lineIndex}`;
+                if (viewportControllable && viewportDraggableRotatable) {
+                    lineUID = `${lineIndex}One`;
+                    (0, drawingSvg_1.drawLine)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, lineUID, line[1], line[2], {
+                        color,
+                        lineWidth,
+                    });
+                    lineUID = `${lineIndex}Two`;
+                    (0, drawingSvg_1.drawLine)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, lineUID, line[3], line[4], {
+                        color,
+                        lineWidth,
+                    });
+                }
+                else {
+                    (0, drawingSvg_1.drawLine)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, lineUID, line[2], line[4], {
+                        color,
+                        lineWidth,
+                    });
+                }
+                if (viewportControllable) {
+                    color =
+                        viewportColor !== undefined ? viewportColor : 'rgb(200, 200, 200)';
+                    const rotHandlesActive = data.handles.activeOperation === OPERATION.ROTATE;
+                    const rotationHandles = [line[9], line[10]];
+                    const rotHandleWorldOne = [
+                        viewport.canvasToWorld(line[9]),
+                        otherViewport,
+                        line[1],
+                        line[2],
+                    ];
+                    const rotHandleWorldTwo = [
+                        viewport.canvasToWorld(line[10]),
+                        otherViewport,
+                        line[3],
+                        line[4],
+                    ];
+                    newRtpoints.push(rotHandleWorldOne, rotHandleWorldTwo);
+                    const slabThicknessHandlesActive = data.handles.activeOperation === OPERATION.SLAB;
+                    const slabThicknessHandles = [line[11], line[12], line[13], line[14]];
+                    const slabThicknessHandleWorldOne = [
+                        viewport.canvasToWorld(line[11]),
+                        otherViewport,
+                        line[5],
+                        line[6],
+                    ];
+                    const slabThicknessHandleWorldTwo = [
+                        viewport.canvasToWorld(line[12]),
+                        otherViewport,
+                        line[5],
+                        line[6],
+                    ];
+                    const slabThicknessHandleWorldThree = [
+                        viewport.canvasToWorld(line[13]),
+                        otherViewport,
+                        line[7],
+                        line[8],
+                    ];
+                    const slabThicknessHandleWorldFour = [
+                        viewport.canvasToWorld(line[14]),
+                        otherViewport,
+                        line[7],
+                        line[8],
+                    ];
+                    newStpoints.push(slabThicknessHandleWorldOne, slabThicknessHandleWorldTwo, slabThicknessHandleWorldThree, slabThicknessHandleWorldFour);
+                    if (lineActive &&
+                        !rotHandlesActive &&
+                        !slabThicknessHandlesActive &&
+                        viewportDraggableRotatable &&
+                        viewportSlabThicknessControlsOn) {
+                        let handleUID = `${lineIndex}One`;
+                        (0, drawingSvg_1.drawHandles)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, handleUID, rotationHandles, {
+                            color,
+                            handleRadius: 3,
+                            type: 'circle',
+                        });
+                        handleUID = `${lineIndex}Two`;
+                        (0, drawingSvg_1.drawHandles)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, handleUID, slabThicknessHandles, {
+                            color,
+                            handleRadius: 3,
+                            type: 'rect',
+                        });
+                    }
+                    else if (lineActive &&
+                        !rotHandlesActive &&
+                        !slabThicknessHandlesActive &&
+                        viewportDraggableRotatable) {
+                        const handleUID = `${lineIndex}`;
+                        (0, drawingSvg_1.drawHandles)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, handleUID, rotationHandles, {
+                            color,
+                            handleRadius: 3,
+                            type: 'circle',
+                        });
+                    }
+                    else if (selectedViewportUID &&
+                        !rotHandlesActive &&
+                        !slabThicknessHandlesActive &&
+                        viewportSlabThicknessControlsOn) {
+                        const handleUID = `${lineIndex}`;
+                        (0, drawingSvg_1.drawHandles)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, handleUID, slabThicknessHandles, {
+                            color,
+                            handleRadius: 3,
+                            type: 'rect',
+                        });
+                    }
+                    else if (rotHandlesActive && viewportDraggableRotatable) {
+                        const handleUID = `${lineIndex}`;
+                        (0, drawingSvg_1.drawHandles)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, handleUID, rotationHandles, {
+                            color,
+                            handleRadius: 2,
+                            fill: color,
+                            type: 'circle',
+                        });
+                    }
+                    else if (slabThicknessHandlesActive &&
+                        selectedViewportUID &&
+                        viewportSlabThicknessControlsOn) {
+                        (0, drawingSvg_1.drawHandles)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, lineUID, slabThicknessHandles, {
+                            color,
+                            handleRadius: 2,
+                            fill: color,
+                            type: 'rect',
+                        });
+                    }
+                    const slabThicknessValue = otherViewport.getSlabThickness();
+                    if (slabThicknessValue > 0.5 && viewportSlabThicknessControlsOn) {
+                        lineUID = `${lineIndex}STOne`;
+                        (0, drawingSvg_1.drawLine)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, lineUID, line[5], line[6], {
+                            color,
+                            width: 1,
+                            lineDash: [2, 3],
+                        });
+                        lineUID = `${lineIndex}STTwo`;
+                        (0, drawingSvg_1.drawLine)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, lineUID, line[7], line[8], {
+                            color,
+                            width: line,
+                            lineDash: [2, 3],
+                        });
+                    }
+                }
+            });
+            data.handles.rotationPoints = newRtpoints;
+            data.handles.slabThicknessPoints = newStpoints;
+            const referenceColorCoordinates = [
+                sWidth * 0.95,
+                sHeight * 0.05,
+            ];
+            const circleRadius = canvasDiagonalLength * 0.01;
+            const circleUID = '0';
+            (0, drawingSvg_1.drawCircle)(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, circleUID, referenceColorCoordinates, circleRadius, { color, fill: color });
+        };
+        this._areViewportUIDArraysEqual = (viewportUIDArrayOne, viewportUIDArrayTwo) => {
+            if (viewportUIDArrayOne.length !== viewportUIDArrayTwo.length) {
+                return false;
+            }
+            viewportUIDArrayOne.forEach((uid) => {
+                let itemFound = false;
+                for (let i = 0; i < viewportUIDArrayTwo.length; ++i) {
+                    if (uid === viewportUIDArrayTwo[i]) {
+                        itemFound = true;
+                        break;
+                    }
+                }
+                if (itemFound === false) {
+                    return false;
+                }
+            });
+            return true;
+        };
+        this._getAnnotationsForViewportsWithDifferentCameras = (enabledElement, annotations) => {
+            const { viewportUID, renderingEngine, viewport } = enabledElement;
+            const otherViewportAnnotations = annotations.filter((annotation) => annotation.data.viewportUID !== viewportUID);
+            if (!otherViewportAnnotations || !otherViewportAnnotations.length) {
+                return [];
+            }
+            const camera = viewport.getCamera();
+            const { viewPlaneNormal, position } = camera;
+            const viewportsWithDifferentCameras = otherViewportAnnotations.filter((annotation) => {
+                const { viewportUID } = annotation.data;
+                const targetViewport = renderingEngine.getViewport(viewportUID);
+                const cameraOfTarget = targetViewport.getCamera();
+                return !(core_1.utilities.isEqual(cameraOfTarget.viewPlaneNormal, viewPlaneNormal, 1e-2) && core_1.utilities.isEqual(cameraOfTarget.position, position, 1));
+            });
+            return viewportsWithDifferentCameras;
+        };
+        this._filterLinkedViewportWithSameOrientationAndScene = (enabledElement, annotations) => {
+            const { renderingEngine, viewport } = enabledElement;
+            const viewportControllable = this._getReferenceLineControllable(viewport.uid);
+            const otherLinkedViewportAnnotationsFromSameScene = annotations.filter((annotation) => {
+                const { data } = annotation;
+                const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                return (viewport !== otherViewport &&
+                    otherViewportControllable === true &&
+                    viewportControllable === true);
+            });
+            if (!otherLinkedViewportAnnotationsFromSameScene ||
+                !otherLinkedViewportAnnotationsFromSameScene.length) {
+                return [];
+            }
+            const camera = viewport.getCamera();
+            const viewPlaneNormal = camera.viewPlaneNormal;
+            Math_1.default.normalize(viewPlaneNormal);
+            const otherLinkedViewportsAnnotationsWithSameCameraDirection = otherLinkedViewportAnnotationsFromSameScene.filter((annotation) => {
+                const { viewportUID } = annotation.data;
+                const otherViewport = renderingEngine.getViewport(viewportUID);
+                const otherCamera = otherViewport.getCamera();
+                const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
+                Math_1.default.normalize(otherViewPlaneNormal);
+                return (core_1.utilities.isEqual(viewPlaneNormal, otherViewPlaneNormal, 1e-2) &&
+                    core_1.utilities.isEqual(camera.viewUp, otherCamera.viewUp, 1e-2));
+            });
+            return otherLinkedViewportsAnnotationsWithSameCameraDirection;
+        };
+        this._filterAnnotationsByUniqueViewportOrientations = (enabledElement, annotations) => {
+            const { renderingEngine, viewport } = enabledElement;
+            const camera = viewport.getCamera();
+            const viewPlaneNormal = camera.viewPlaneNormal;
+            Math_1.default.normalize(viewPlaneNormal);
+            const otherLinkedViewportAnnotationsFromSameScene = annotations.filter((annotation) => {
+                const { data } = annotation;
+                const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                return (viewport !== otherViewport &&
+                    otherViewportControllable === true);
+            });
+            const otherViewportsAnnotationsWithUniqueCameras = [];
+            for (let i = 0; i < otherLinkedViewportAnnotationsFromSameScene.length; ++i) {
+                const annotation = otherLinkedViewportAnnotationsFromSameScene[i];
+                const { viewportUID } = annotation.data;
+                const otherViewport = renderingEngine.getViewport(viewportUID);
+                const otherCamera = otherViewport.getCamera();
+                const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
+                Math_1.default.normalize(otherViewPlaneNormal);
+                if (core_1.utilities.isEqual(viewPlaneNormal, otherViewPlaneNormal, 1e-2) ||
+                    core_1.utilities.isOpposite(viewPlaneNormal, otherViewPlaneNormal, 1e-2)) {
+                    continue;
+                }
+                let cameraFound = false;
+                for (let jj = 0; jj < otherViewportsAnnotationsWithUniqueCameras.length; ++jj) {
+                    const annotation = otherViewportsAnnotationsWithUniqueCameras[jj];
+                    const { viewportUID } = annotation.data;
+                    const stockedViewport = renderingEngine.getViewport(viewportUID);
+                    const cameraOfStocked = stockedViewport.getCamera();
+                    if (core_1.utilities.isEqual(cameraOfStocked.viewPlaneNormal, otherCamera.viewPlaneNormal, 1e-2) &&
+                        core_1.utilities.isEqual(cameraOfStocked.position, otherCamera.position, 1)) {
+                        cameraFound = true;
+                    }
+                }
+                if (!cameraFound) {
+                    otherViewportsAnnotationsWithUniqueCameras.push(annotation);
+                }
+            }
+            const otherNonLinkedViewportAnnotationsFromSameScene = annotations.filter((annotation) => {
+                const { data } = annotation;
+                const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                return (viewport !== otherViewport &&
+                    otherViewportControllable !== true);
+            });
+            for (let i = 0; i < otherNonLinkedViewportAnnotationsFromSameScene.length; ++i) {
+                const annotation = otherNonLinkedViewportAnnotationsFromSameScene[i];
+                const { viewportUID } = annotation.data;
+                const otherViewport = renderingEngine.getViewport(viewportUID);
+                const otherCamera = otherViewport.getCamera();
+                const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
+                Math_1.default.normalize(otherViewPlaneNormal);
+                if (core_1.utilities.isEqual(viewPlaneNormal, otherViewPlaneNormal, 1e-2) ||
+                    core_1.utilities.isOpposite(viewPlaneNormal, otherViewPlaneNormal, 1e-2)) {
+                    continue;
+                }
+                let cameraFound = false;
+                for (let jj = 0; jj < otherViewportsAnnotationsWithUniqueCameras.length; ++jj) {
+                    const annotation = otherViewportsAnnotationsWithUniqueCameras[jj];
+                    const { viewportUID } = annotation.data;
+                    const stockedViewport = renderingEngine.getViewport(viewportUID);
+                    const cameraOfStocked = stockedViewport.getCamera();
+                    if (core_1.utilities.isEqual(cameraOfStocked.viewPlaneNormal, otherCamera.viewPlaneNormal, 1e-2) &&
+                        core_1.utilities.isEqual(cameraOfStocked.position, otherCamera.position, 1)) {
+                        cameraFound = true;
+                    }
+                }
+                if (!cameraFound) {
+                    otherViewportsAnnotationsWithUniqueCameras.push(annotation);
+                }
+            }
+            const otherViewportAnnotations = this._getAnnotationsForViewportsWithDifferentCameras(enabledElement, annotations);
+            for (let i = 0; i < otherViewportAnnotations.length; ++i) {
+                const annotation = otherViewportAnnotations[i];
+                if (otherViewportsAnnotationsWithUniqueCameras.find((element) => element === annotation) === true) {
+                    continue;
+                }
+                const { viewportUID } = annotation.data;
+                const otherViewport = renderingEngine.getViewport(viewportUID);
+                const otherCamera = otherViewport.getCamera();
+                const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
+                Math_1.default.normalize(otherViewPlaneNormal);
+                if (core_1.utilities.isEqual(viewPlaneNormal, otherViewPlaneNormal, 1e-2) ||
+                    core_1.utilities.isOpposite(viewPlaneNormal, otherViewPlaneNormal, 1e-2)) {
+                    continue;
+                }
+                let cameraFound = false;
+                for (let jj = 0; jj < otherViewportsAnnotationsWithUniqueCameras.length; ++jj) {
+                    const annotation = otherViewportsAnnotationsWithUniqueCameras[jj];
+                    const { viewportUID } = annotation.data;
+                    const stockedViewport = renderingEngine.getViewport(viewportUID);
+                    const cameraOfStocked = stockedViewport.getCamera();
+                    if (core_1.utilities.isEqual(cameraOfStocked.viewPlaneNormal, otherCamera.viewPlaneNormal, 1e-2) &&
+                        core_1.utilities.isEqual(cameraOfStocked.position, otherCamera.position, 1)) {
+                        cameraFound = true;
+                    }
+                }
+                if (!cameraFound) {
+                    otherViewportsAnnotationsWithUniqueCameras.push(annotation);
+                }
+            }
+            return otherViewportsAnnotationsWithUniqueCameras;
+        };
+        this._checkIfViewportsRenderingSameScene = (viewport, otherViewport) => {
+            const actors = viewport.getActors();
+            const otherViewportActors = otherViewport.getActors();
+            let sameScene = true;
+            actors.forEach((actor) => {
+                if (actors.length !== otherViewportActors.length ||
+                    otherViewportActors.find(({ uid }) => uid === actor.uid) === undefined) {
+                    sameScene = false;
+                }
+            });
+            return sameScene;
+        };
+        this._jump = (enabledElement, jumpWorld) => {
+            store_1.state.isInteractingWithTool = true;
+            const { viewport, renderingEngine } = enabledElement;
+            const annotations = (0, annotationState_1.getAnnotations)(viewport.element, CrosshairsTool.toolName);
+            const delta = [0, 0, 0];
+            Math_1.default.subtract(jumpWorld, this.toolCenter, delta);
+            const otherViewportAnnotations = this._getAnnotationsForViewportsWithDifferentCameras(enabledElement, annotations);
+            const viewportsAnnotationsToUpdate = otherViewportAnnotations.filter((annotation) => {
+                const { data } = annotation;
+                const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                const sameScene = this._checkIfViewportsRenderingSameScene(viewport, otherViewport);
+                return (this._getReferenceLineControllable(otherViewport.uid) &&
+                    this._getReferenceLineDraggableRotatable(otherViewport.uid) &&
+                    sameScene);
+            });
+            if (viewportsAnnotationsToUpdate.length === 0) {
+                store_1.state.isInteractingWithTool = false;
+                return false;
+            }
+            this._applyDeltaShiftToSelectedViewportCameras(renderingEngine, viewportsAnnotationsToUpdate, delta);
+            store_1.state.isInteractingWithTool = false;
+            return true;
+        };
+        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._mouseUpCallback = (evt) => {
+            const eventDetail = evt.detail;
+            const { element } = eventDetail;
+            this.editData.annotation.highlighted = false;
+            this.editData.annotation.data.handles.activeOperation = null;
+            this.editData.annotation.data.activeViewportUIDs = [];
+            this._deactivateModify(element);
+            (0, elementCursor_1.resetElementCursor)(element);
+            this.editData = null;
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { renderingEngine } = enabledElement;
+            const requireSameOrientation = false;
+            const viewportUIDsToRender = (0, viewportFilters_1.getViewportUIDsWithToolToRender)(element, CrosshairsTool.toolName, requireSameOrientation);
+            (0, triggerAnnotationRenderForViewportUIDs_1.default)(renderingEngine, viewportUIDsToRender);
+        };
+        this._mouseDragCallback = (evt) => {
+            const eventDetail = evt.detail;
+            const delta = eventDetail.deltaPoints.world;
+            if (Math.abs(delta[0]) < 1e-3 &&
+                Math.abs(delta[1]) < 1e-3 &&
+                Math.abs(delta[2]) < 1e-3) {
+                return;
+            }
+            const { element } = eventDetail;
+            const enabledElement = (0, core_1.getEnabledElement)(element);
+            const { renderingEngine, viewport } = enabledElement;
+            const annotations = (0, annotationState_1.getAnnotations)(element, CrosshairsTool.toolName);
+            const filteredToolAnnotations = this.filterInteractableAnnotationsForElement(element, annotations);
+            const viewportAnnotation = filteredToolAnnotations[0];
+            if (!viewportAnnotation) {
+                return;
+            }
+            const { handles } = viewportAnnotation.data;
+            const { currentPoints } = evt.detail;
+            const canvasCoords = currentPoints.canvas;
+            if (handles.activeOperation === OPERATION.DRAG) {
+                const otherViewportAnnotations = this._getAnnotationsForViewportsWithDifferentCameras(enabledElement, annotations);
+                const viewportsAnnotationsToUpdate = otherViewportAnnotations.filter((annotation) => {
+                    const { data } = annotation;
+                    const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                    return viewportAnnotation.data.activeViewportUIDs.find((uid) => uid === otherViewport.uid);
+                });
+                this._applyDeltaShiftToSelectedViewportCameras(renderingEngine, viewportsAnnotationsToUpdate, delta);
+            }
+            else if (handles.activeOperation === OPERATION.ROTATE) {
+                const otherViewportAnnotations = this._getAnnotationsForViewportsWithDifferentCameras(enabledElement, annotations);
+                const viewportsAnnotationsToUpdate = otherViewportAnnotations.filter((annotation) => {
+                    const { data } = annotation;
+                    data.handles.toolCenter = center;
+                    const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                    const otherViewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                    const otherViewportRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
+                    return (otherViewportControllable === true &&
+                        otherViewportRotatable === true);
+                });
+                const dir1 = gl_matrix_1.vec2.create();
+                const dir2 = gl_matrix_1.vec2.create();
+                const center = [
+                    this.toolCenter[0],
+                    this.toolCenter[1],
+                    this.toolCenter[2],
+                ];
+                const centerCanvas = viewport.worldToCanvas(center);
+                const finalPointCanvas = eventDetail.currentPoints.canvas;
+                const originalPointCanvas = gl_matrix_1.vec2.create();
+                gl_matrix_1.vec2.sub(originalPointCanvas, finalPointCanvas, eventDetail.deltaPoints.canvas);
+                gl_matrix_1.vec2.sub(dir1, originalPointCanvas, centerCanvas);
+                gl_matrix_1.vec2.sub(dir2, finalPointCanvas, centerCanvas);
+                let angle = gl_matrix_1.vec2.angle(dir1, dir2);
+                if (this._isClockWise(centerCanvas, originalPointCanvas, finalPointCanvas)) {
+                    angle *= -1;
+                }
+                angle = Math.round(angle * 100) / 100;
+                const rotationAxis = viewport.getCamera().viewPlaneNormal;
+                const { matrix } = MatrixBuilder_1.default
+                    .buildFromRadian()
+                    .translate(center[0], center[1], center[2])
+                    .rotate(angle, rotationAxis)
+                    .translate(-center[0], -center[1], -center[2]);
+                const otherViewportsUIDs = [];
+                viewportsAnnotationsToUpdate.forEach((annotation) => {
+                    const { data } = annotation;
+                    data.handles.toolCenter = center;
+                    const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                    const camera = otherViewport.getCamera();
+                    const { viewUp, position, focalPoint } = camera;
+                    viewUp[0] += position[0];
+                    viewUp[1] += position[1];
+                    viewUp[2] += position[2];
+                    gl_matrix_1.vec3.transformMat4(focalPoint, focalPoint, matrix);
+                    gl_matrix_1.vec3.transformMat4(position, position, matrix);
+                    gl_matrix_1.vec3.transformMat4(viewUp, viewUp, matrix);
+                    viewUp[0] -= position[0];
+                    viewUp[1] -= position[1];
+                    viewUp[2] -= position[2];
+                    otherViewport.setCamera({
+                        position,
+                        viewUp,
+                        focalPoint,
+                    });
+                    otherViewportsUIDs.push(otherViewport.uid);
+                });
+                renderingEngine.renderViewports(otherViewportsUIDs);
+            }
+            else if (handles.activeOperation === OPERATION.SLAB) {
+                const viewportsAnnotationsToUpdate = annotations.filter((annotation) => {
+                    const { data } = annotation;
+                    const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                    return viewportAnnotation.data.activeViewportUIDs.find((uid) => uid === otherViewport.uid);
+                });
+                viewportsAnnotationsToUpdate.forEach((annotation) => {
+                    const { data } = annotation;
+                    const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                    const camera = otherViewport.getCamera();
+                    const normal = camera.viewPlaneNormal;
+                    const dotProd = Math_1.default.dot(delta, normal);
+                    const projectedDelta = [...normal];
+                    Math_1.default.multiplyScalar(projectedDelta, dotProd);
+                    if (Math.abs(projectedDelta[0]) > 1e-3 ||
+                        Math.abs(projectedDelta[1]) > 1e-3 ||
+                        Math.abs(projectedDelta[2]) > 1e-3) {
+                        const mod = Math.sqrt(projectedDelta[0] * projectedDelta[0] +
+                            projectedDelta[1] * projectedDelta[1] +
+                            projectedDelta[2] * projectedDelta[2]);
+                        const currentPoint = eventDetail.lastPoints.world;
+                        const direction = [0, 0, 0];
+                        const currentCenter = [
+                            this.toolCenter[0],
+                            this.toolCenter[1],
+                            this.toolCenter[2],
+                        ];
+                        const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
+                        if (!viewportDraggableRotatable) {
+                            const { rotationPoints } = this.editData.annotation.data.handles;
+                            const otherViewportRotationPoints = rotationPoints.filter((point) => point[1].uid === otherViewport.uid);
+                            if (otherViewportRotationPoints.length === 2) {
+                                const point1 = viewport.canvasToWorld(otherViewportRotationPoints[0][3]);
+                                const point2 = viewport.canvasToWorld(otherViewportRotationPoints[1][3]);
+                                Math_1.default.add(point1, point2, currentCenter);
+                                Math_1.default.multiplyScalar(currentCenter, 0.5);
+                            }
+                        }
+                        Math_1.default.subtract(currentPoint, currentCenter, direction);
+                        const dotProdDirection = Math_1.default.dot(direction, normal);
+                        const projectedDirection = [...normal];
+                        Math_1.default.multiplyScalar(projectedDirection, dotProdDirection);
+                        const normalizedProjectedDirection = [
+                            projectedDirection[0],
+                            projectedDirection[1],
+                            projectedDirection[2],
+                        ];
+                        gl_matrix_1.vec3.normalize(normalizedProjectedDirection, normalizedProjectedDirection);
+                        const normalizedProjectedDelta = [
+                            projectedDelta[0],
+                            projectedDelta[1],
+                            projectedDelta[2],
+                        ];
+                        gl_matrix_1.vec3.normalize(normalizedProjectedDelta, normalizedProjectedDelta);
+                        let slabThicknessValue = otherViewport.getSlabThickness();
+                        if (core_1.utilities.isOpposite(normalizedProjectedDirection, normalizedProjectedDelta, 1e-3)) {
+                            slabThicknessValue -= mod;
+                        }
+                        else {
+                            slabThicknessValue += mod;
+                        }
+                        slabThicknessValue = Math.abs(slabThicknessValue);
+                        slabThicknessValue = Math.max(0.1, slabThicknessValue);
+                        const near = this._pointNearReferenceLine(viewportAnnotation, canvasCoords, 6, otherViewport);
+                        if (near) {
+                            otherViewport.setSlabThickness(null);
+                        }
+                        else {
+                            otherViewport.setSlabThickness(slabThicknessValue);
+                        }
+                        otherViewport.render();
+                    }
+                });
+            }
+        };
+        this._pointNearReferenceLine = (annotation, canvasCoords, proximity, lineViewport) => {
+            const { data } = annotation;
+            const { rotationPoints } = data.handles;
+            for (let i = 0; i < rotationPoints.length - 1; ++i) {
+                const otherViewport = rotationPoints[i][1];
+                if (otherViewport.uid !== lineViewport.uid) {
+                    continue;
+                }
+                const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                if (!viewportControllable) {
+                    continue;
+                }
+                const lineSegment1 = {
+                    start: {
+                        x: rotationPoints[i][2][0],
+                        y: rotationPoints[i][2][1],
+                    },
+                    end: {
+                        x: rotationPoints[i][3][0],
+                        y: rotationPoints[i][3][1],
+                    },
+                };
+                const distanceToPoint1 = math_1.lineSegment.distanceToPoint([lineSegment1.start.x, lineSegment1.start.y], [lineSegment1.end.x, lineSegment1.end.y], [canvasCoords[0], canvasCoords[1]]);
+                const lineSegment2 = {
+                    start: {
+                        x: rotationPoints[i + 1][2][0],
+                        y: rotationPoints[i + 1][2][1],
+                    },
+                    end: {
+                        x: rotationPoints[i + 1][3][0],
+                        y: rotationPoints[i + 1][3][1],
+                    },
+                };
+                const distanceToPoint2 = math_1.lineSegment.distanceToPoint([lineSegment2.start.x, lineSegment2.start.y], [lineSegment2.end.x, lineSegment2.end.y], [canvasCoords[0], canvasCoords[1]]);
+                if (distanceToPoint1 <= proximity || distanceToPoint2 <= proximity) {
+                    return true;
+                }
+                i++;
+            }
+            return false;
+        };
+        this._getReferenceLineColor =
+            ((_a = toolProps.configuration) === null || _a === void 0 ? void 0 : _a.getReferenceLineColor) ||
+                defaultReferenceLineColor;
+        this._getReferenceLineControllable =
+            ((_b = toolProps.configuration) === null || _b === void 0 ? void 0 : _b.getReferenceLineControllable) ||
+                defaultReferenceLineControllable;
+        this._getReferenceLineDraggableRotatable =
+            ((_c = toolProps.configuration) === null || _c === void 0 ? void 0 : _c.getReferenceLineDraggableRotatable) ||
+                defaultReferenceLineDraggableRotatable;
+        this._getReferenceLineSlabThicknessControlsOn =
+            ((_d = toolProps.configuration) === null || _d === void 0 ? void 0 : _d.getReferenceLineSlabThicknessControlsOn) ||
+                defaultReferenceLineSlabThicknessControlsOn;
+    }
+    getHandleNearImagePoint(element, annotation, canvasCoords, proximity) {
+        const enabledElement = (0, core_1.getEnabledElement)(element);
+        const { viewport } = enabledElement;
+        let point = this._getRotationHandleNearImagePoint(viewport, annotation, canvasCoords, proximity);
+        if (point !== null) {
+            return point;
+        }
+        point = this._getSlabThicknessHandleNearImagePoint(viewport, annotation, canvasCoords, proximity);
+        if (point !== null) {
+            return point;
+        }
+    }
+    _autoPanViewportIfNecessary(viewportUID, renderingEngine) {
+        const viewport = renderingEngine.getViewport(viewportUID);
+        const { sWidth, sHeight } = viewport;
+        const topLefWorld = viewport.canvasToWorld([0, 0]);
+        const bottomRightWorld = viewport.canvasToWorld([sWidth, sHeight]);
+        const topRightWorld = viewport.canvasToWorld([sWidth, 0]);
+        const bottomLeftWorld = viewport.canvasToWorld([0, sHeight]);
+        const minX = Math.min(topLefWorld[0], bottomRightWorld[0], topRightWorld[0], bottomLeftWorld[0]);
+        const maxX = Math.max(topLefWorld[0], bottomRightWorld[0], topRightWorld[0], bottomLeftWorld[0]);
+        const minY = Math.min(topLefWorld[1], bottomRightWorld[1], topRightWorld[1], bottomLeftWorld[1]);
+        const maxY = Math.max(topLefWorld[1], bottomRightWorld[1], topRightWorld[1], bottomLeftWorld[1]);
+        const minZ = Math.min(topLefWorld[2], bottomRightWorld[2], topRightWorld[2], bottomLeftWorld[2]);
+        const maxZ = Math.max(topLefWorld[2], bottomRightWorld[2], topRightWorld[2], bottomLeftWorld[2]);
+        let deltaPointsWorld;
+        const pan = this.configuration.autoPan.panSize;
+        if (this.toolCenter[0] < minX - EPSILON) {
+            deltaPointsWorld = [minX - this.toolCenter[0] + pan, 0, 0];
+        }
+        else if (this.toolCenter[0] > maxX + EPSILON) {
+            deltaPointsWorld = [maxX - this.toolCenter[0] - pan, 0, 0];
+        }
+        else if (this.toolCenter[1] < minY - EPSILON) {
+            deltaPointsWorld = [0, minY - this.toolCenter[1] + pan, 0];
+        }
+        else if (this.toolCenter[1] > maxY + EPSILON) {
+            deltaPointsWorld = [0, maxY - this.toolCenter[1] - pan, 0];
+        }
+        else if (this.toolCenter[2] < minZ - EPSILON) {
+            deltaPointsWorld = [0, 0, minZ - this.toolCenter[2] + pan];
+        }
+        else if (this.toolCenter[2] > maxZ + EPSILON) {
+            deltaPointsWorld = [0, 0, maxZ - this.toolCenter[2] - pan];
+        }
+        else {
+            return;
+        }
+        const camera = viewport.getCamera();
+        const { focalPoint, position } = camera;
+        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],
+        ];
+        viewport.setCamera({
+            focalPoint: updatedFocalPoint,
+            position: updatedPosition,
+        });
+        viewport.render();
+    }
+    _isClockWise(a, b, c) {
+        return (b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0]) > 0;
+    }
+    _applyDeltaShiftToSelectedViewportCameras(renderingEngine, viewportsAnnotationsToUpdate, delta) {
+        viewportsAnnotationsToUpdate.forEach((annotation) => {
+            this._applyDeltaShiftToViewportCamera(renderingEngine, annotation, delta);
+        });
+    }
+    _applyDeltaShiftToViewportCamera(renderingEngine, annotation, delta) {
+        const { data } = annotation;
+        const viewport = renderingEngine.getViewport(data.viewportUID);
+        const camera = viewport.getCamera();
+        const normal = camera.viewPlaneNormal;
+        const dotProd = Math_1.default.dot(delta, normal);
+        const projectedDelta = [...normal];
+        Math_1.default.multiplyScalar(projectedDelta, dotProd);
+        if (Math.abs(projectedDelta[0]) > 1e-3 ||
+            Math.abs(projectedDelta[1]) > 1e-3 ||
+            Math.abs(projectedDelta[2]) > 1e-3) {
+            const newFocalPoint = [0, 0, 0];
+            const newPosition = [0, 0, 0];
+            Math_1.default.add(camera.focalPoint, projectedDelta, newFocalPoint);
+            Math_1.default.add(camera.position, projectedDelta, newPosition);
+            viewport.setCamera({
+                focalPoint: newFocalPoint,
+                position: newPosition,
+            });
+            viewport.render();
+        }
+    }
+    _getRotationHandleNearImagePoint(viewport, annotation, canvasCoords, proximity) {
+        const { data } = annotation;
+        const { rotationPoints } = data.handles;
+        for (let i = 0; i < rotationPoints.length; i++) {
+            const point = rotationPoints[i][0];
+            const otherViewport = rotationPoints[i][1];
+            const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+            if (!viewportControllable) {
+                continue;
+            }
+            const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
+            if (!viewportDraggableRotatable) {
+                continue;
+            }
+            const annotationCanvasCoordinate = viewport.worldToCanvas(point);
+            if (gl_matrix_1.vec2.distance(canvasCoords, annotationCanvasCoordinate) < proximity) {
+                data.handles.activeOperation = OPERATION.ROTATE;
+                this.editData = {
+                    annotation,
+                };
+                return point;
+            }
+        }
+        return null;
+    }
+    _getSlabThicknessHandleNearImagePoint(viewport, annotation, canvasCoords, proximity) {
+        const { data } = annotation;
+        const { slabThicknessPoints } = data.handles;
+        for (let i = 0; i < slabThicknessPoints.length; i++) {
+            const point = slabThicknessPoints[i][0];
+            const otherViewport = slabThicknessPoints[i][1];
+            const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+            if (!viewportControllable) {
+                continue;
+            }
+            const viewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.uid);
+            if (!viewportSlabThicknessControlsOn) {
+                continue;
+            }
+            const annotationCanvasCoordinate = viewport.worldToCanvas(point);
+            if (gl_matrix_1.vec2.distance(canvasCoords, annotationCanvasCoordinate) < proximity) {
+                data.handles.activeOperation = OPERATION.SLAB;
+                data.activeViewportUIDs = [otherViewport.uid];
+                this.editData = {
+                    annotation,
+                };
+                return point;
+            }
+        }
+        return null;
+    }
+    _pointNearTool(element, annotation, canvasCoords, proximity) {
+        const enabledElement = (0, core_1.getEnabledElement)(element);
+        const { viewport } = enabledElement;
+        const { sWidth, sHeight } = viewport;
+        const canvasDiagonalLength = Math.sqrt(sWidth * sWidth + sHeight * sHeight);
+        const { data } = annotation;
+        const { rotationPoints } = data.handles;
+        const { slabThicknessPoints } = data.handles;
+        const viewportUIDArray = [];
+        for (let i = 0; i < rotationPoints.length - 1; ++i) {
+            const otherViewport = rotationPoints[i][1];
+            const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+            const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
+            if (!viewportControllable || !viewportDraggableRotatable) {
+                continue;
+            }
+            const lineSegment1 = {
+                start: {
+                    x: rotationPoints[i][2][0],
+                    y: rotationPoints[i][2][1],
+                },
+                end: {
+                    x: rotationPoints[i][3][0],
+                    y: rotationPoints[i][3][1],
+                },
+            };
+            const distanceToPoint1 = math_1.lineSegment.distanceToPoint([lineSegment1.start.x, lineSegment1.start.y], [lineSegment1.end.x, lineSegment1.end.y], [canvasCoords[0], canvasCoords[1]]);
+            const lineSegment2 = {
+                start: {
+                    x: rotationPoints[i + 1][2][0],
+                    y: rotationPoints[i + 1][2][1],
+                },
+                end: {
+                    x: rotationPoints[i + 1][3][0],
+                    y: rotationPoints[i + 1][3][1],
+                },
+            };
+            const distanceToPoint2 = math_1.lineSegment.distanceToPoint([lineSegment2.start.x, lineSegment2.start.y], [lineSegment2.end.x, lineSegment2.end.y], [canvasCoords[0], canvasCoords[1]]);
+            if (distanceToPoint1 <= proximity || distanceToPoint2 <= proximity) {
+                viewportUIDArray.push(otherViewport.uid);
+                data.handles.activeOperation = OPERATION.DRAG;
+            }
+            i++;
+        }
+        for (let i = 0; i < slabThicknessPoints.length - 1; ++i) {
+            const otherViewport = slabThicknessPoints[i][1];
+            if (viewportUIDArray.find((uid) => uid === otherViewport.uid)) {
+                continue;
+            }
+            const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+            const viewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.uid);
+            if (!viewportControllable || !viewportSlabThicknessControlsOn) {
+                continue;
+            }
+            const stPointLineCanvas1 = slabThicknessPoints[i][2];
+            const stPointLineCanvas2 = slabThicknessPoints[i][3];
+            const centerCanvas = gl_matrix_1.vec2.create();
+            gl_matrix_1.vec2.add(centerCanvas, stPointLineCanvas1, stPointLineCanvas2);
+            gl_matrix_1.vec2.scale(centerCanvas, centerCanvas, 0.5);
+            const canvasUnitVectorFromCenter = gl_matrix_1.vec2.create();
+            gl_matrix_1.vec2.subtract(canvasUnitVectorFromCenter, stPointLineCanvas1, centerCanvas);
+            gl_matrix_1.vec2.normalize(canvasUnitVectorFromCenter, canvasUnitVectorFromCenter);
+            const canvasVectorFromCenterStart = gl_matrix_1.vec2.create();
+            gl_matrix_1.vec2.scale(canvasVectorFromCenterStart, canvasUnitVectorFromCenter, canvasDiagonalLength * 0.05);
+            const stPointLineCanvas1Start = gl_matrix_1.vec2.create();
+            const stPointLineCanvas2Start = gl_matrix_1.vec2.create();
+            gl_matrix_1.vec2.add(stPointLineCanvas1Start, centerCanvas, canvasVectorFromCenterStart);
+            gl_matrix_1.vec2.subtract(stPointLineCanvas2Start, centerCanvas, canvasVectorFromCenterStart);
+            const lineSegment1 = {
+                start: {
+                    x: stPointLineCanvas1Start[0],
+                    y: stPointLineCanvas1Start[1],
+                },
+                end: {
+                    x: stPointLineCanvas1[0],
+                    y: stPointLineCanvas1[1],
+                },
+            };
+            const distanceToPoint1 = math_1.lineSegment.distanceToPoint([lineSegment1.start.x, lineSegment1.start.y], [lineSegment1.end.x, lineSegment1.end.y], [canvasCoords[0], canvasCoords[1]]);
+            const lineSegment2 = {
+                start: {
+                    x: stPointLineCanvas2Start[0],
+                    y: stPointLineCanvas2Start[1],
+                },
+                end: {
+                    x: stPointLineCanvas2[0],
+                    y: stPointLineCanvas2[1],
+                },
+            };
+            const distanceToPoint2 = math_1.lineSegment.distanceToPoint([lineSegment2.start.x, lineSegment2.start.y], [lineSegment2.end.x, lineSegment2.end.y], [canvasCoords[0], canvasCoords[1]]);
+            if (distanceToPoint1 <= proximity || distanceToPoint2 <= proximity) {
+                viewportUIDArray.push(otherViewport.uid);
+                data.handles.activeOperation = null;
+            }
+            i++;
+        }
+        data.activeViewportUIDs = [...viewportUIDArray];
+        this.editData = {
+            annotation,
+        };
+        return data.handles.activeOperation === OPERATION.DRAG ? true : false;
+    }
+}
+exports.default = CrosshairsTool;
+CrosshairsTool.toolName = 'Crosshairs';
+//# sourceMappingURL=CrosshairsTool.js.map