@cornerstonejs/tools 0.1.2 → 0.2.0

package/dist/esm/tools/CrosshairsTool.js

@@ -1,18 +1,18 @@
 import { AnnotationTool } from './base';
-import { getEnabledElementByUIDs, getEnabledElement, utilities as csUtils, } from '@cornerstonejs/core';
+import { getEnabledElementByIds, getEnabledElement, utilities as csUtils, } from '@cornerstonejs/core';
 import { addAnnotation, getAnnotations, removeAnnotation, } from '../stateManagement/annotation/annotationState';
 import { drawCircle as drawCircleSvg, drawHandles as drawHandlesSvg, drawLine as drawLineSvg, } from '../drawingSvg';
 import { vec2, vec3 } from 'gl-matrix';
 import { state } from '../store';
 import { Events } from '../enums';
-import { getViewportUIDsWithToolToRender } from '../utilities/viewportFilters';
+import { getViewportIdsWithToolToRender } from '../utilities/viewportFilters';
 import { resetElementCursor, hideElementCursor } from '../cursors/elementCursor';
 import { math } from '../utilities';
 import vtkMath from 'vtk.js/Sources/Common/Core/Math';
 import vtkMatrixBuilder from 'vtk.js/Sources/Common/Core/MatrixBuilder';
-import { lineSegment } from '../utilities/math';
+import * as lineSegment from '../utilities/math/line';
 import { isAnnotationLocked } from '../stateManagement/annotation/annotationLocking';
-import triggerAnnotationRenderForViewportUIDs from '../utilities/triggerAnnotationRenderForViewportUIDs';
+import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
 const { liangBarksyClip } = math.vec2;
 function defaultReferenceLineColor() {
     return 'rgb(200, 200, 200)';
@@ -45,8 +45,8 @@ export default class CrosshairsTool extends AnnotationTool {
     }) {
         super(toolProps, defaultToolProps);
         this.toolCenter = [0, 0, 0];
-        this.initializeViewport = ({ renderingEngineUID, viewportUID, }) => {
-            const enabledElement = getEnabledElementByUIDs(viewportUID, renderingEngineUID);
+        this.initializeViewport = ({ renderingEngineId, viewportId, }) => {
+            const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
             const { FrameOfReferenceUID, viewport } = enabledElement;
             const { element } = viewport;
             const { position, focalPoint, viewPlaneNormal } = viewport.getCamera();
@@ -70,8 +70,8 @@ export default class CrosshairsTool extends AnnotationTool {
                         toolCenter: this.toolCenter,
                     },
                     activeOperation: null,
-                    activeViewportUIDs: [],
-                    viewportUID,
+                    activeViewportIds: [],
+                    viewportId,
                 },
             };
             resetElementCursor(element);
@@ -120,18 +120,18 @@ export default class CrosshairsTool extends AnnotationTool {
             const filteredAnnotations = this.filterInteractableAnnotationsForElement(viewport.element, annotations);
             const { data } = filteredAnnotations[0];
             const { rotationPoints } = data.handles;
-            const viewportUIDArray = [];
+            const viewportIdArray = [];
             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);
+                const viewportControllable = this._getReferenceLineControllable(otherViewport.id);
+                const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.id);
                 if (!viewportControllable || !viewportDraggableRotatable) {
                     continue;
                 }
-                viewportUIDArray.push(otherViewport.uid);
+                viewportIdArray.push(otherViewport.id);
                 i++;
             }
-            data.activeViewportUIDs = [...viewportUIDArray];
+            data.activeViewportIds = [...viewportIdArray];
             data.handles.activeOperation = OPERATION.DRAG;
             evt.preventDefault();
             hideElementCursor(element);
@@ -170,7 +170,7 @@ export default class CrosshairsTool extends AnnotationTool {
             const { renderingEngine } = enabledElement;
             const viewport = enabledElement.viewport;
             const requireSameOrientation = false;
-            const viewportUIDsToRender = getViewportUIDsWithToolToRender(element, CrosshairsTool.toolName, requireSameOrientation);
+            const viewportIdsToRender = getViewportIdsWithToolToRender(element, CrosshairsTool.toolName, requireSameOrientation);
             const annotations = getAnnotations(element, CrosshairsTool.toolName);
             const filteredToolAnnotations = this.filterInteractableAnnotationsForElement(element, annotations);
             const viewportAnnotation = filteredToolAnnotations[0];
@@ -186,8 +186,8 @@ export default class CrosshairsTool extends AnnotationTool {
             vtkMath.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);
+            const viewportControllable = this._getReferenceLineControllable(viewport.id);
+            const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(viewport.id);
             if (!csUtils.isEqual(currentCamera.position, oldCameraPosition, 1e-3) &&
                 viewportControllable &&
                 viewportDraggableRotatable) {
@@ -203,14 +203,14 @@ export default class CrosshairsTool extends AnnotationTool {
                 }
             }
             if (this.configuration.autoPan.enabled) {
-                const viewports = csUtils.getVolumeViewportsContainingSameVolumes(viewport, renderingEngine.uid);
-                viewports.forEach(({ uid: viewportUID }) => {
-                    if (viewportUID !== viewport.uid) {
-                        this._autoPanViewportIfNecessary(viewportUID, renderingEngine);
+                const viewports = csUtils.getVolumeViewportsContainingSameVolumes(viewport, renderingEngine.id);
+                viewports.forEach(({ id: viewportId }) => {
+                    if (viewportId !== viewport.id) {
+                        this._autoPanViewportIfNecessary(viewportId, renderingEngine);
                     }
                 });
             }
-            triggerAnnotationRenderForViewportUIDs(renderingEngine, viewportUIDsToRender);
+            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
         };
         this.mouseMoveCallback = (evt, filteredToolAnnotations) => {
             const { element, currentPoints } = evt.detail;
@@ -226,10 +226,10 @@ export default class CrosshairsTool extends AnnotationTool {
                     continue;
                 }
                 const previousActiveOperation = data.handles.activeOperation;
-                const previousActiveViewportUIDs = data.activeViewportUIDs && data.activeViewportUIDs.length > 0
-                    ? [...data.activeViewportUIDs]
+                const previousActiveViewportIds = data.activeViewportIds && data.activeViewportIds.length > 0
+                    ? [...data.activeViewportIds]
                     : [];
-                data.activeViewportUIDs = [];
+                data.activeViewportIds = [];
                 data.handles.activeOperation = null;
                 const handleNearImagePoint = this.getHandleNearImagePoint(element, annotation, canvasCoords, 6);
                 let near = false;
@@ -246,7 +246,7 @@ export default class CrosshairsTool extends AnnotationTool {
                     imageNeedsUpdate = true;
                 }
                 else if (data.handles.activeOperation !== previousActiveOperation ||
-                    !this._areViewportUIDArraysEqual(data.activeViewportUIDs, previousActiveViewportUIDs)) {
+                    !this._areViewportIdArraysEqual(data.activeViewportIds, previousActiveViewportIds)) {
                     imageNeedsUpdate = true;
                 }
             }
@@ -257,8 +257,8 @@ export default class CrosshairsTool extends AnnotationTool {
                 return [];
             }
             const enabledElement = getEnabledElement(element);
-            const { viewportUID } = enabledElement;
-            const viewportUIDSpecificCrosshairs = annotations.filter((annotation) => annotation.data.viewportUID === viewportUID);
+            const { viewportId } = enabledElement;
+            const viewportUIDSpecificCrosshairs = annotations.filter((annotation) => annotation.data.viewportId === viewportId);
             return viewportUIDSpecificCrosshairs;
         };
         this.renderAnnotation = (enabledElement, svgDrawingHelper) => {
@@ -281,11 +281,11 @@ export default class CrosshairsTool extends AnnotationTool {
             otherViewportAnnotations.forEach((annotation) => {
                 const { data } = annotation;
                 data.handles.toolCenter = this.toolCenter;
-                const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                const otherViewport = renderingEngine.getViewport(data.viewportId);
                 const otherCamera = otherViewport.getCamera();
-                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.uid);
-                const otherViewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
-                const otherViewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.uid);
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.id);
+                const otherViewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.id);
+                const otherViewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.id);
                 const { sWidth, sHeight } = otherViewport;
                 const otherCanvasDiagonalLength = Math.sqrt(sWidth * sWidth + sHeight * sHeight);
                 const otherCanvasCenter = [sWidth * 0.5, sHeight * 0.5];
@@ -405,20 +405,20 @@ export default class CrosshairsTool extends AnnotationTool {
             });
             const newRtpoints = [];
             const newStpoints = [];
-            const viewportColor = this._getReferenceLineColor(viewport.uid);
+            const viewportColor = this._getReferenceLineColor(viewport.id);
             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);
+                const viewportColor = this._getReferenceLineColor(otherViewport.id);
+                const viewportControllable = this._getReferenceLineControllable(otherViewport.id);
+                const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.id);
+                const viewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.id);
+                const selectedViewportId = data.activeViewportIds.find((id) => id === otherViewport.id);
                 let color = viewportColor !== undefined ? viewportColor : 'rgb(200, 200, 200)';
                 let lineWidth = 1;
                 const lineActive = data.handles.activeOperation !== null &&
                     data.handles.activeOperation === OPERATION.DRAG &&
-                    selectedViewportUID;
+                    selectedViewportId;
                 if (lineActive) {
                     lineWidth = 2.5;
                 }
@@ -515,7 +515,7 @@ export default class CrosshairsTool extends AnnotationTool {
                             type: 'circle',
                         });
                     }
-                    else if (selectedViewportUID &&
+                    else if (selectedViewportId &&
                         !rotHandlesActive &&
                         !slabThicknessHandlesActive &&
                         viewportSlabThicknessControlsOn) {
@@ -536,7 +536,7 @@ export default class CrosshairsTool extends AnnotationTool {
                         });
                     }
                     else if (slabThicknessHandlesActive &&
-                        selectedViewportUID &&
+                        selectedViewportId &&
                         viewportSlabThicknessControlsOn) {
                         drawHandlesSvg(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, lineUID, slabThicknessHandles, {
                             color,
@@ -572,14 +572,14 @@ export default class CrosshairsTool extends AnnotationTool {
             const circleUID = '0';
             drawCircleSvg(svgDrawingHelper, CrosshairsTool.toolName, annotationUID, circleUID, referenceColorCoordinates, circleRadius, { color, fill: color });
         };
-        this._areViewportUIDArraysEqual = (viewportUIDArrayOne, viewportUIDArrayTwo) => {
-            if (viewportUIDArrayOne.length !== viewportUIDArrayTwo.length) {
+        this._areViewportIdArraysEqual = (viewportIdArrayOne, viewportIdArrayTwo) => {
+            if (viewportIdArrayOne.length !== viewportIdArrayTwo.length) {
                 return false;
             }
-            viewportUIDArrayOne.forEach((uid) => {
+            viewportIdArrayOne.forEach((id) => {
                 let itemFound = false;
-                for (let i = 0; i < viewportUIDArrayTwo.length; ++i) {
-                    if (uid === viewportUIDArrayTwo[i]) {
+                for (let i = 0; i < viewportIdArrayTwo.length; ++i) {
+                    if (id === viewportIdArrayTwo[i]) {
                         itemFound = true;
                         break;
                     }
@@ -591,16 +591,16 @@ export default class CrosshairsTool extends AnnotationTool {
             return true;
         };
         this._getAnnotationsForViewportsWithDifferentCameras = (enabledElement, annotations) => {
-            const { viewportUID, renderingEngine, viewport } = enabledElement;
-            const otherViewportAnnotations = annotations.filter((annotation) => annotation.data.viewportUID !== viewportUID);
+            const { viewportId, renderingEngine, viewport } = enabledElement;
+            const otherViewportAnnotations = annotations.filter((annotation) => annotation.data.viewportId !== viewportId);
             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 { viewportId } = annotation.data;
+                const targetViewport = renderingEngine.getViewport(viewportId);
                 const cameraOfTarget = targetViewport.getCamera();
                 return !(csUtils.isEqual(cameraOfTarget.viewPlaneNormal, viewPlaneNormal, 1e-2) && csUtils.isEqual(cameraOfTarget.position, position, 1));
             });
@@ -608,11 +608,11 @@ export default class CrosshairsTool extends AnnotationTool {
         };
         this._filterLinkedViewportWithSameOrientationAndScene = (enabledElement, annotations) => {
             const { renderingEngine, viewport } = enabledElement;
-            const viewportControllable = this._getReferenceLineControllable(viewport.uid);
+            const viewportControllable = this._getReferenceLineControllable(viewport.id);
             const otherLinkedViewportAnnotationsFromSameScene = annotations.filter((annotation) => {
                 const { data } = annotation;
-                const otherViewport = renderingEngine.getViewport(data.viewportUID);
-                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                const otherViewport = renderingEngine.getViewport(data.viewportId);
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.id);
                 return (viewport !== otherViewport &&
                     otherViewportControllable === true &&
                     viewportControllable === true);
@@ -625,8 +625,8 @@ export default class CrosshairsTool extends AnnotationTool {
             const viewPlaneNormal = camera.viewPlaneNormal;
             vtkMath.normalize(viewPlaneNormal);
             const otherLinkedViewportsAnnotationsWithSameCameraDirection = otherLinkedViewportAnnotationsFromSameScene.filter((annotation) => {
-                const { viewportUID } = annotation.data;
-                const otherViewport = renderingEngine.getViewport(viewportUID);
+                const { viewportId } = annotation.data;
+                const otherViewport = renderingEngine.getViewport(viewportId);
                 const otherCamera = otherViewport.getCamera();
                 const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
                 vtkMath.normalize(otherViewPlaneNormal);
@@ -642,16 +642,16 @@ export default class CrosshairsTool extends AnnotationTool {
             vtkMath.normalize(viewPlaneNormal);
             const otherLinkedViewportAnnotationsFromSameScene = annotations.filter((annotation) => {
                 const { data } = annotation;
-                const otherViewport = renderingEngine.getViewport(data.viewportUID);
-                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                const otherViewport = renderingEngine.getViewport(data.viewportId);
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.id);
                 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 { viewportId } = annotation.data;
+                const otherViewport = renderingEngine.getViewport(viewportId);
                 const otherCamera = otherViewport.getCamera();
                 const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
                 vtkMath.normalize(otherViewPlaneNormal);
@@ -662,8 +662,8 @@ export default class CrosshairsTool extends AnnotationTool {
                 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 { viewportId } = annotation.data;
+                    const stockedViewport = renderingEngine.getViewport(viewportId);
                     const cameraOfStocked = stockedViewport.getCamera();
                     if (csUtils.isEqual(cameraOfStocked.viewPlaneNormal, otherCamera.viewPlaneNormal, 1e-2) &&
                         csUtils.isEqual(cameraOfStocked.position, otherCamera.position, 1)) {
@@ -676,15 +676,15 @@ export default class CrosshairsTool extends AnnotationTool {
             }
             const otherNonLinkedViewportAnnotationsFromSameScene = annotations.filter((annotation) => {
                 const { data } = annotation;
-                const otherViewport = renderingEngine.getViewport(data.viewportUID);
-                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                const otherViewport = renderingEngine.getViewport(data.viewportId);
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.id);
                 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 { viewportId } = annotation.data;
+                const otherViewport = renderingEngine.getViewport(viewportId);
                 const otherCamera = otherViewport.getCamera();
                 const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
                 vtkMath.normalize(otherViewPlaneNormal);
@@ -695,8 +695,8 @@ export default class CrosshairsTool extends AnnotationTool {
                 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 { viewportId } = annotation.data;
+                    const stockedViewport = renderingEngine.getViewport(viewportId);
                     const cameraOfStocked = stockedViewport.getCamera();
                     if (csUtils.isEqual(cameraOfStocked.viewPlaneNormal, otherCamera.viewPlaneNormal, 1e-2) &&
                         csUtils.isEqual(cameraOfStocked.position, otherCamera.position, 1)) {
@@ -713,8 +713,8 @@ export default class CrosshairsTool extends AnnotationTool {
                 if (otherViewportsAnnotationsWithUniqueCameras.find((element) => element === annotation) === true) {
                     continue;
                 }
-                const { viewportUID } = annotation.data;
-                const otherViewport = renderingEngine.getViewport(viewportUID);
+                const { viewportId } = annotation.data;
+                const otherViewport = renderingEngine.getViewport(viewportId);
                 const otherCamera = otherViewport.getCamera();
                 const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
                 vtkMath.normalize(otherViewPlaneNormal);
@@ -725,8 +725,8 @@ export default class CrosshairsTool extends AnnotationTool {
                 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 { viewportId } = annotation.data;
+                    const stockedViewport = renderingEngine.getViewport(viewportId);
                     const cameraOfStocked = stockedViewport.getCamera();
                     if (csUtils.isEqual(cameraOfStocked.viewPlaneNormal, otherCamera.viewPlaneNormal, 1e-2) &&
                         csUtils.isEqual(cameraOfStocked.position, otherCamera.position, 1)) {
@@ -760,10 +760,10 @@ export default class CrosshairsTool extends AnnotationTool {
             const otherViewportAnnotations = this._getAnnotationsForViewportsWithDifferentCameras(enabledElement, annotations);
             const viewportsAnnotationsToUpdate = otherViewportAnnotations.filter((annotation) => {
                 const { data } = annotation;
-                const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                const otherViewport = renderingEngine.getViewport(data.viewportId);
                 const sameScene = this._checkIfViewportsRenderingSameScene(viewport, otherViewport);
-                return (this._getReferenceLineControllable(otherViewport.uid) &&
-                    this._getReferenceLineDraggableRotatable(otherViewport.uid) &&
+                return (this._getReferenceLineControllable(otherViewport.id) &&
+                    this._getReferenceLineDraggableRotatable(otherViewport.id) &&
                     sameScene);
             });
             if (viewportsAnnotationsToUpdate.length === 0) {
@@ -791,15 +791,15 @@ export default class CrosshairsTool extends AnnotationTool {
             const { element } = eventDetail;
             this.editData.annotation.highlighted = false;
             this.editData.annotation.data.handles.activeOperation = null;
-            this.editData.annotation.data.activeViewportUIDs = [];
+            this.editData.annotation.data.activeViewportIds = [];
             this._deactivateModify(element);
             resetElementCursor(element);
             this.editData = null;
             const enabledElement = getEnabledElement(element);
             const { renderingEngine } = enabledElement;
             const requireSameOrientation = false;
-            const viewportUIDsToRender = getViewportUIDsWithToolToRender(element, CrosshairsTool.toolName, requireSameOrientation);
-            triggerAnnotationRenderForViewportUIDs(renderingEngine, viewportUIDsToRender);
+            const viewportIdsToRender = getViewportIdsWithToolToRender(element, CrosshairsTool.toolName, requireSameOrientation);
+            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
         };
         this._mouseDragCallback = (evt) => {
             const eventDetail = evt.detail;
@@ -825,8 +825,8 @@ export default class CrosshairsTool extends AnnotationTool {
                 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);
+                    const otherViewport = renderingEngine.getViewport(data.viewportId);
+                    return viewportAnnotation.data.activeViewportIds.find((id) => id === otherViewport.id);
                 });
                 this._applyDeltaShiftToSelectedViewportCameras(renderingEngine, viewportsAnnotationsToUpdate, delta);
             }
@@ -835,9 +835,9 @@ export default class CrosshairsTool extends AnnotationTool {
                 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);
+                    const otherViewport = renderingEngine.getViewport(data.viewportId);
+                    const otherViewportControllable = this._getReferenceLineControllable(otherViewport.id);
+                    const otherViewportRotatable = this._getReferenceLineDraggableRotatable(otherViewport.id);
                     return (otherViewportControllable === true &&
                         otherViewportRotatable === true);
                 });
@@ -865,11 +865,11 @@ export default class CrosshairsTool extends AnnotationTool {
                     .translate(center[0], center[1], center[2])
                     .rotate(angle, rotationAxis)
                     .translate(-center[0], -center[1], -center[2]);
-                const otherViewportsUIDs = [];
+                const otherViewportsIds = [];
                 viewportsAnnotationsToUpdate.forEach((annotation) => {
                     const { data } = annotation;
                     data.handles.toolCenter = center;
-                    const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                    const otherViewport = renderingEngine.getViewport(data.viewportId);
                     const camera = otherViewport.getCamera();
                     const { viewUp, position, focalPoint } = camera;
                     viewUp[0] += position[0];
@@ -886,19 +886,19 @@ export default class CrosshairsTool extends AnnotationTool {
                         viewUp,
                         focalPoint,
                     });
-                    otherViewportsUIDs.push(otherViewport.uid);
+                    otherViewportsIds.push(otherViewport.id);
                 });
-                renderingEngine.renderViewports(otherViewportsUIDs);
+                renderingEngine.renderViewports(otherViewportsIds);
             }
             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);
+                    const otherViewport = renderingEngine.getViewport(data.viewportId);
+                    return viewportAnnotation.data.activeViewportIds.find((id) => id === otherViewport.id);
                 });
                 viewportsAnnotationsToUpdate.forEach((annotation) => {
                     const { data } = annotation;
-                    const otherViewport = renderingEngine.getViewport(data.viewportUID);
+                    const otherViewport = renderingEngine.getViewport(data.viewportId);
                     const camera = otherViewport.getCamera();
                     const normal = camera.viewPlaneNormal;
                     const dotProd = vtkMath.dot(delta, normal);
@@ -917,10 +917,10 @@ export default class CrosshairsTool extends AnnotationTool {
                             this.toolCenter[1],
                             this.toolCenter[2],
                         ];
-                        const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
+                        const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.id);
                         if (!viewportDraggableRotatable) {
                             const { rotationPoints } = this.editData.annotation.data.handles;
-                            const otherViewportRotationPoints = rotationPoints.filter((point) => point[1].uid === otherViewport.uid);
+                            const otherViewportRotationPoints = rotationPoints.filter((point) => point[1].uid === otherViewport.id);
                             if (otherViewportRotationPoints.length === 2) {
                                 const point1 = viewport.canvasToWorld(otherViewportRotationPoints[0][3]);
                                 const point2 = viewport.canvasToWorld(otherViewportRotationPoints[1][3]);
@@ -970,10 +970,10 @@ export default class CrosshairsTool extends AnnotationTool {
             const { rotationPoints } = data.handles;
             for (let i = 0; i < rotationPoints.length - 1; ++i) {
                 const otherViewport = rotationPoints[i][1];
-                if (otherViewport.uid !== lineViewport.uid) {
+                if (otherViewport.id !== lineViewport.id) {
                     continue;
                 }
-                const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+                const viewportControllable = this._getReferenceLineControllable(otherViewport.id);
                 if (!viewportControllable) {
                     continue;
                 }
@@ -1031,8 +1031,8 @@ export default class CrosshairsTool extends AnnotationTool {
             return point;
         }
     }
-    _autoPanViewportIfNecessary(viewportUID, renderingEngine) {
-        const viewport = renderingEngine.getViewport(viewportUID);
+    _autoPanViewportIfNecessary(viewportId, renderingEngine) {
+        const viewport = renderingEngine.getViewport(viewportId);
         const { sWidth, sHeight } = viewport;
         const topLefWorld = viewport.canvasToWorld([0, 0]);
         const bottomRightWorld = viewport.canvasToWorld([sWidth, sHeight]);
@@ -1095,7 +1095,7 @@ export default class CrosshairsTool extends AnnotationTool {
     }
     _applyDeltaShiftToViewportCamera(renderingEngine, annotation, delta) {
         const { data } = annotation;
-        const viewport = renderingEngine.getViewport(data.viewportUID);
+        const viewport = renderingEngine.getViewport(data.viewportId);
         const camera = viewport.getCamera();
         const normal = camera.viewPlaneNormal;
         const dotProd = vtkMath.dot(delta, normal);
@@ -1121,11 +1121,11 @@ export default class CrosshairsTool extends AnnotationTool {
         for (let i = 0; i < rotationPoints.length; i++) {
             const point = rotationPoints[i][0];
             const otherViewport = rotationPoints[i][1];
-            const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+            const viewportControllable = this._getReferenceLineControllable(otherViewport.id);
             if (!viewportControllable) {
                 continue;
             }
-            const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.uid);
+            const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.id);
             if (!viewportDraggableRotatable) {
                 continue;
             }
@@ -1146,18 +1146,18 @@ export default class CrosshairsTool extends AnnotationTool {
         for (let i = 0; i < slabThicknessPoints.length; i++) {
             const point = slabThicknessPoints[i][0];
             const otherViewport = slabThicknessPoints[i][1];
-            const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
+            const viewportControllable = this._getReferenceLineControllable(otherViewport.id);
             if (!viewportControllable) {
                 continue;
             }
-            const viewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.uid);
+            const viewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.id);
             if (!viewportSlabThicknessControlsOn) {
                 continue;
             }
             const annotationCanvasCoordinate = viewport.worldToCanvas(point);
             if (vec2.distance(canvasCoords, annotationCanvasCoordinate) < proximity) {
                 data.handles.activeOperation = OPERATION.SLAB;
-                data.activeViewportUIDs = [otherViewport.uid];
+                data.activeViewportIds = [otherViewport.id];
                 this.editData = {
                     annotation,
                 };
@@ -1174,11 +1174,11 @@ export default class CrosshairsTool extends AnnotationTool {
         const { data } = annotation;
         const { rotationPoints } = data.handles;
         const { slabThicknessPoints } = data.handles;
-        const viewportUIDArray = [];
+        const viewportIdArray = [];
         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);
+            const viewportControllable = this._getReferenceLineControllable(otherViewport.id);
+            const viewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.id);
             if (!viewportControllable || !viewportDraggableRotatable) {
                 continue;
             }
@@ -1205,18 +1205,18 @@ export default class CrosshairsTool extends AnnotationTool {
             };
             const distanceToPoint2 = 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);
+                viewportIdArray.push(otherViewport.id);
                 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)) {
+            if (viewportIdArray.find((id) => id === otherViewport.id)) {
                 continue;
             }
-            const viewportControllable = this._getReferenceLineControllable(otherViewport.uid);
-            const viewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.uid);
+            const viewportControllable = this._getReferenceLineControllable(otherViewport.id);
+            const viewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.id);
             if (!viewportControllable || !viewportSlabThicknessControlsOn) {
                 continue;
             }
@@ -1257,12 +1257,12 @@ export default class CrosshairsTool extends AnnotationTool {
             };
             const distanceToPoint2 = 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);
+                viewportIdArray.push(otherViewport.id);
                 data.handles.activeOperation = null;
             }
             i++;
         }
-        data.activeViewportUIDs = [...viewportUIDArray];
+        data.activeViewportIds = [...viewportIdArray];
         this.editData = {
             annotation,
         };