@cornerstonejs/tools 5.0.16 → 5.1.1

package/dist/esm/stateManagement/segmentation/helpers/labelmapImageMapperSupport.js

@@ -135,7 +135,7 @@ export function shouldUseSliceRendering(segmentation, options) {
         return false;
     }
     const layers = getLabelmaps(segmentation);
-    return layers.length > 1 && layers.some((layer) => layer.type === 'stack');
+    return (layers.length > 1 && layers.some((layer) => layer.storageKind === 'stack'));
 }
 export function canRenderVolumeViewportLabelmapAsImage(viewport) {
     const isLegacyVolumeViewport = viewport instanceof VolumeViewport;

package/dist/esm/stateManagement/segmentation/labelmapModel/normalizeLabelmapSegmentationData.js

@@ -16,7 +16,7 @@ function getPrimaryLabelmapType(labelmapData) {
 function createPrimaryLabelmapLayer(segmentation, labelmapData, labelmapId = getPrimaryLabelmapId(segmentation.segmentationId)) {
     const layer = {
         labelmapId,
-        type: getPrimaryLabelmapType(labelmapData),
+        storageKind: getPrimaryLabelmapType(labelmapData),
         labelToSegmentIndex: {},
     };
     if (labelmapData.volumeId != null) {

package/dist/esm/stateManagement/segmentation/labelmapModel/privateLabelmap.js

@@ -13,7 +13,7 @@ function createPrivateVolumeLabelmap(segmentation, sourceLabelmap) {
     });
     return {
         labelmapId: volumeId,
-        type: 'volume',
+        storageKind: 'volume',
         volumeId,
         imageIds: volume.imageIds,
         referencedVolumeId,
@@ -36,7 +36,7 @@ function createPrivateStackLabelmap(segmentation, sourceLabelmap) {
     });
     return {
         labelmapId: `${segmentation.segmentationId}-storage-${csUtils.uuidv4()}`,
-        type: 'stack',
+        storageKind: 'stack',
         imageIds: images.map((image) => image.imageId),
         referencedVolumeId: sourceLabelmap.referencedVolumeId,
         referencedImageIds,

package/dist/esm/stateManagement/segmentation/utilities/getViewportAssociatedToSegmentation.js

@@ -1,5 +1,6 @@
 import { vec3 } from 'gl-matrix';
 import { getEnabledElementByViewportId } from '@cornerstonejs/core';
+import getViewportICamera from '../../../utilities/getViewportICamera';
 import { getViewportIdsWithSegmentation } from '../getViewportIdsWithSegmentation';
 export function getViewportsAssociatedToSegmentation(segmentationId) {
     const viewportIds = getViewportIdsWithSegmentation(segmentationId);
@@ -27,7 +28,7 @@ export function getViewportWithMatchingViewPlaneNormal(viewports, annotation, do
     const normalizedAnnotationNormal = vec3.create();
     vec3.normalize(normalizedAnnotationNormal, annotationViewPlaneNormal);
     for (const viewport of viewports) {
-        const camera = viewport.getCamera();
+        const camera = getViewportICamera(viewport);
         if (!camera?.viewPlaneNormal) {
             continue;
         }

package/dist/esm/synchronizers/callbacks/cameraSyncCallback.js

@@ -1,4 +1,9 @@
-import { getRenderingEngine } from '@cornerstonejs/core';
+import { getRenderingEngine, utilities } from '@cornerstonejs/core';
+import { applyViewportPresentation, getViewportPresentation, } from '../../utilities/viewportPresentation';
+const ZOOM_PAN_SELECTOR = {
+    pan: true,
+    zoom: true,
+};
 export default function cameraSyncCallback(synchronizerInstance, sourceViewport, targetViewport, cameraModifiedEvent) {
     const { camera } = cameraModifiedEvent.detail;
     const renderingEngine = getRenderingEngine(targetViewport.renderingEngineId);
@@ -6,6 +11,18 @@ export default function cameraSyncCallback(synchronizerInstance, sourceViewport,
         throw new Error(`No RenderingEngine for Id: ${targetViewport.renderingEngineId}`);
     }
     const tViewport = renderingEngine.getViewport(targetViewport.viewportId);
-    tViewport.setCamera(camera);
+    if (utilities.isGenericViewport(tViewport)) {
+        const sourceRenderingEngine = getRenderingEngine(sourceViewport.renderingEngineId);
+        const sViewport = sourceRenderingEngine?.getViewport(sourceViewport.viewportId);
+        if (!sViewport) {
+            return;
+        }
+        tViewport.setViewReference(sViewport.getViewReference());
+        const zoomPanPresentation = getViewportPresentation(sViewport, ZOOM_PAN_SELECTOR);
+        applyViewportPresentation(tViewport, zoomPanPresentation);
+    }
+    else {
+        tViewport.setCamera(camera);
+    }
     tViewport.render();
 }

package/dist/esm/synchronizers/callbacks/imageSliceSyncCallback.js

@@ -6,6 +6,9 @@ function isVolumeSliceViewport(viewport) {
     if (viewport instanceof VolumeViewport) {
         return true;
     }
+    if (utilities.viewportIsInVolumeMode(viewport)) {
+        return true;
+    }
     const getDefaultActor = viewport.getDefaultActor;
     const renderMode = getDefaultActor?.call(viewport)?.actorMapper?.renderMode;
     return (renderMode === ActorRenderMode.CPU_VOLUME ||

package/dist/esm/synchronizers/callbacks/voiSyncCallback.js

@@ -1,4 +1,4 @@
-import { BaseVolumeViewport, getRenderingEngine, StackViewport, } from '@cornerstonejs/core';
+import { BaseVolumeViewport, getRenderingEngine, StackViewport, utilities, } from '@cornerstonejs/core';
 export default function voiSyncCallback(synchronizerInstance, sourceViewport, targetViewport, modifiedEvent, options) {
     const eventDetail = modifiedEvent.detail;
     const { volumeId, range, invertStateChanged, invert, colormap } = eventDetail;
@@ -28,6 +28,18 @@ export default function voiSyncCallback(synchronizerInstance, sourceViewport, ta
     else if (tViewport instanceof StackViewport) {
         tViewport.setProperties(tProperties);
     }
+    else if (utilities.isGenericViewport(tViewport)) {
+        const genericViewport = tViewport;
+        const dataId = volumeId
+            ? genericViewport.findDataIdByVolumeId?.(volumeId)
+            : undefined;
+        if (dataId) {
+            genericViewport.setDisplaySetPresentation(dataId, tProperties);
+        }
+        else if (!volumeId) {
+            genericViewport.setDisplaySetPresentation(tProperties);
+        }
+    }
     else {
         throw new Error('Viewport type not supported.');
     }

package/dist/esm/tools/AdvancedMagnifyTool.js

@@ -10,6 +10,8 @@ import { Events, MouseBindings, KeyboardBindings, Events as cstEvents, Segmentat
 import { getViewportIdsWithToolToRender } from '../utilities/viewportFilters';
 import { resetElementCursor, hideElementCursor, } from '../cursors/elementCursor';
 import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
+import getViewportICamera from '../utilities/getViewportICamera';
+import { getNativeSourceProperties } from '../utilities/genericViewportToolHelpers';
 import { getCanvasCircleRadius } from '../utilities/math/circle';
 import { vec2, vec3 } from 'gl-matrix';
 import { getToolGroupForViewport } from '../store/ToolGroupManager';
@@ -64,9 +66,13 @@ class AdvancedMagnifyTool extends AnnotationTool {
             const { magnifyingGlass: config } = this.configuration;
             const { radius, zoomFactor, autoPan } = config;
             const worldHandlePoints = this._getWorldHandlePoints(viewport, canvasPos, radius);
-            const camera = viewport.getCamera();
-            const { viewPlaneNormal, viewUp } = camera;
-            const referencedImageId = this.getReferencedImageId(viewport, worldPos, viewPlaneNormal, viewUp);
+            const isNativeSource = csUtils.isGenericViewport(viewport);
+            const { viewPlaneNormal, viewUp } = isNativeSource
+                ? getViewportICamera(viewport)
+                : viewport.getCamera();
+            const referencedImageId = isNativeSource
+                ? getNativeSourceProperties(viewport).currentImageId
+                : this.getReferencedImageId(viewport, worldPos, viewPlaneNormal, viewUp);
             const annotationUID = csUtils.uuidv4();
             const magnifyViewportId = csUtils.uuidv4();
             const FrameOfReferenceUID = viewport.getFrameOfReferenceUID();
@@ -500,7 +506,9 @@ class AdvancedMagnifyViewportManager {
             const { renderingEngineId, viewportId: sourceViewportId } = evt.detail;
             const renderingEngine = getRenderingEngine(renderingEngineId);
             const sourceViewport = renderingEngine.getViewport(sourceViewportId);
-            const { viewPlaneNormal: currentViewPlaneNormal } = sourceViewport.getCamera();
+            const { viewPlaneNormal: currentViewPlaneNormal } = csUtils.isGenericViewport(sourceViewport)
+                ? getViewportICamera(sourceViewport)
+                : sourceViewport.getCamera();
             const magnifyViewportsMapEntries = this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
             magnifyViewportsMapEntries.forEach(({ annotation }) => {
                 const { viewPlaneNormal } = annotation.metadata;
@@ -728,6 +736,17 @@ class AdvancedMagnifyViewport {
         return magnifyElement;
     }
     _convertZoomFactorToParallelScale(viewport, magnifyViewport, zoomFactor) {
+        if (csUtils.isGenericViewport(viewport)) {
+            const sourceElement = viewport.element;
+            const sourceWidth = sourceElement.clientWidth;
+            const sourceHeight = sourceElement.clientHeight;
+            const worldTop = viewport.canvasToWorld([0, 0]);
+            const worldBottom = viewport.canvasToWorld([0, 1]);
+            const worldPerPixel = vec3.distance(worldTop, worldBottom);
+            const parallelScaleSource = (worldPerPixel * sourceHeight) / 2;
+            const canvasRatio = magnifyViewport.canvas.offsetWidth / sourceWidth;
+            return parallelScaleSource * (1 / zoomFactor) * canvasRatio;
+        }
         const { parallelScale } = viewport.getCamera();
         const canvasRatio = magnifyViewport.canvas.offsetWidth / viewport.canvas.offsetWidth;
         return parallelScale * (1 / zoomFactor) * canvasRatio;
@@ -781,15 +800,16 @@ class AdvancedMagnifyViewport {
         const { viewportId: magnifyViewportId } = this;
         const renderingEngine = sourceViewport.getRenderingEngine();
         const { options: sourceViewportOptions } = sourceViewport;
+        const isNativeSource = csUtils.isGenericViewport(sourceViewport);
         const viewportInput = {
             element: magnifyElement,
             viewportId: magnifyViewportId,
-            type: sourceViewport.type,
-            defaultOptions: { ...sourceViewportOptions },
+            type: isNativeSource ? Enums.ViewportType.STACK : sourceViewport.type,
+            defaultOptions: isNativeSource ? {} : { ...sourceViewportOptions },
         };
         renderingEngine.enableElement(viewportInput);
         const magnifyViewport = (renderingEngine.getViewport(magnifyViewportId));
-        if (this._isStackViewport(sourceViewport)) {
+        if (isNativeSource || this._isStackViewport(sourceViewport)) {
             this._cloneStack(sourceViewport, magnifyViewport);
         }
         else if (this._isVolumeViewport(sourceViewport)) {
@@ -902,7 +922,10 @@ class AdvancedMagnifyViewport {
     _syncViewportsCameras(sourceViewport, magnifyViewport) {
         const worldPos = sourceViewport.canvasToWorld(this.position);
         const parallelScale = this._convertZoomFactorToParallelScale(sourceViewport, magnifyViewport, this.zoomFactor);
-        const { flipHorizontal, flipVertical } = sourceViewport.getCamera();
+        const native = csUtils.isGenericViewport(sourceViewport)
+            ? getNativeSourceProperties(sourceViewport)
+            : undefined;
+        const { flipHorizontal, flipVertical } = native ?? sourceViewport.getCamera();
         const { focalPoint, position, viewPlaneNormal } = magnifyViewport.getCamera();
         const distance = Math.sqrt(Math.pow(focalPoint[0] - position[0], 2) +
             Math.pow(focalPoint[1] - position[1], 2) +
@@ -931,14 +954,17 @@ class AdvancedMagnifyViewport {
     _syncViewports() {
         const { viewport: sourceViewport } = this._sourceEnabledElement;
         const { viewport: magnifyViewport } = this._enabledElement;
-        const sourceProperties = sourceViewport.getProperties();
+        const isNativeSource = csUtils.isGenericViewport(sourceViewport);
+        const sourceProperties = isNativeSource
+            ? getNativeSourceProperties(sourceViewport).properties
+            : sourceViewport.getProperties();
         const imageData = magnifyViewport.getImageData();
         if (!imageData) {
             return;
         }
         magnifyViewport.setProperties(sourceProperties);
         this._syncViewportsCameras(sourceViewport, magnifyViewport);
-        if (this._isStackViewport(sourceViewport)) {
+        if (isNativeSource || this._isStackViewport(sourceViewport)) {
             this._syncStackViewports(sourceViewport, magnifyViewport);
         }
         this._syncViewportsCameras(sourceViewport, magnifyViewport);

package/dist/esm/tools/CrosshairsTool.js

@@ -10,12 +10,25 @@ import { drawCircle as drawCircleSvg, drawHandles as drawHandlesSvg, drawLine as
 import { state } from '../store/state';
 import { Events } from '../enums';
 import { getViewportIdsWithToolToRender } from '../utilities/viewportFilters';
+import getViewportICamera from '../utilities/getViewportICamera';
 import { resetElementCursor, hideElementCursor, } from '../cursors/elementCursor';
 import liangBarksyClip from '../utilities/math/vec2/liangBarksyClip';
+import { getSlabThicknessOrDefault, jumpToFocalPoint, } from '../utilities/genericViewportToolHelpers';
 import * as lineSegment from '../utilities/math/line';
 import { isAnnotationLocked } from '../stateManagement/annotation/annotationLocking';
 import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
 const { RENDERING_DEFAULTS } = CONSTANTS;
+function getDisplayedCanvasSize(viewport) {
+    if (csUtils.isGenericViewport(viewport)) {
+        const { element } = viewport;
+        return {
+            clientWidth: element.clientWidth,
+            clientHeight: element.clientHeight,
+        };
+    }
+    const { clientWidth, clientHeight } = viewport.canvas;
+    return { clientWidth, clientHeight };
+}
 function defaultReferenceLineColor() {
     return 'rgb(0, 200, 0)';
 }
@@ -84,7 +97,7 @@ class CrosshairsTool extends AnnotationTool {
             }
             const { FrameOfReferenceUID, viewport } = enabledElement;
             const { element } = viewport;
-            const { position, focalPoint, viewPlaneNormal } = viewport.getCamera();
+            const { position, focalPoint, viewPlaneNormal } = getViewportICamera(viewport);
             let annotations = this._getAnnotations(enabledElement);
             annotations = this.filterInteractableAnnotationsForElement(element, annotations);
             if (annotations?.length) {
@@ -110,12 +123,10 @@ class CrosshairsTool extends AnnotationTool {
                 },
             };
             addAnnotation(annotation, element);
+            const { clientWidth, clientHeight } = getDisplayedCanvasSize(viewport);
             return {
                 normal: viewPlaneNormal,
-                point: viewport.canvasToWorld([
-                    viewport.canvas.clientWidth / 2,
-                    viewport.canvas.clientHeight / 2,
-                ]),
+                point: viewport.canvasToWorld([clientWidth / 2, clientHeight / 2]),
             };
         };
         this._getViewportsInfo = () => {
@@ -143,14 +154,24 @@ class CrosshairsTool extends AnnotationTool {
                 const resetToCenter = true;
                 const resetRotation = true;
                 const suppressEvents = true;
-                viewport.resetCamera({
-                    resetPan,
-                    resetZoom,
-                    resetToCenter,
-                    resetRotation,
-                    suppressEvents,
-                });
-                viewport.resetSlabThickness();
+                if (csUtils.isGenericViewport(viewport)) {
+                    viewport.resetViewState({
+                        resetPan,
+                        resetZoom,
+                        resetOrientation: resetRotation,
+                        resetFlip: true,
+                    });
+                }
+                else {
+                    viewport.resetCamera({
+                        resetPan,
+                        resetZoom,
+                        resetToCenter,
+                        resetRotation,
+                        suppressEvents,
+                    });
+                    viewport.resetSlabThickness();
+                }
                 const { element } = viewport;
                 let annotations = this._getAnnotations(enabledElement);
                 annotations = this.filterInteractableAnnotationsForElement(element, annotations);
@@ -258,7 +279,7 @@ class CrosshairsTool extends AnnotationTool {
             const annotations = this._getAnnotations(enabledElement);
             const filteredToolAnnotations = this.filterInteractableAnnotationsForElement(element, annotations);
             const viewportAnnotation = filteredToolAnnotations[0];
-            const currentCamera = viewport.getCamera();
+            const currentCamera = getViewportICamera(viewport);
             if (viewportAnnotation) {
                 viewportAnnotation.metadata.cameraPosition = [...currentCamera.position];
                 viewportAnnotation.metadata.cameraFocalPoint = [
@@ -339,14 +360,14 @@ class CrosshairsTool extends AnnotationTool {
             const { viewport, renderingEngine } = enabledElement;
             const { element } = viewport;
             const annotations = this._getAnnotations(enabledElement);
-            const camera = viewport.getCamera();
+            const camera = getViewportICamera(viewport);
             const filteredToolAnnotations = this.filterInteractableAnnotationsForElement(element, annotations);
             const viewportAnnotation = filteredToolAnnotations[0];
             if (!annotations?.length || !viewportAnnotation?.data) {
                 return renderStatus;
             }
             const annotationUID = viewportAnnotation.annotationUID;
-            const { clientWidth, clientHeight } = viewport.canvas;
+            const { clientWidth, clientHeight } = getDisplayedCanvasSize(viewport);
             const canvasDiagonalLength = Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight);
             const canvasMinDimensionLength = Math.min(clientWidth, clientHeight);
             const data = viewportAnnotation.data;
@@ -358,11 +379,11 @@ class CrosshairsTool extends AnnotationTool {
                 const { data } = annotation;
                 data.handles.toolCenter = this.toolCenter;
                 const otherViewport = renderingEngine.getViewport(data.viewportId);
-                const otherCamera = otherViewport.getCamera();
+                const otherCamera = getViewportICamera(otherViewport);
                 const otherViewportControllable = this._getReferenceLineControllable(otherViewport.id);
                 const otherViewportDraggableRotatable = this._getReferenceLineDraggableRotatable(otherViewport.id);
                 const otherViewportSlabThicknessControlsOn = this._getReferenceLineSlabThicknessControlsOn(otherViewport.id);
-                const { clientWidth, clientHeight } = otherViewport.canvas;
+                const { clientWidth, clientHeight } = getDisplayedCanvasSize(otherViewport);
                 const otherCanvasDiagonalLength = Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight);
                 const otherCanvasCenter = [
                     clientWidth * 0.5,
@@ -442,7 +463,7 @@ class CrosshairsTool extends AnnotationTool {
                     .rotate(90, viewPlaneNormal);
                 const worldUnitOrthoVectorFromCenter = [0, 0, 0];
                 vec3.transformMat4(worldUnitOrthoVectorFromCenter, worldUnitVectorFromCenter, matrix);
-                const slabThicknessValue = otherViewport.getSlabThickness();
+                const slabThicknessValue = getSlabThicknessOrDefault(otherViewport);
                 const worldOrthoVectorFromCenter = [
                     ...worldUnitOrthoVectorFromCenter,
                 ];
@@ -665,7 +686,7 @@ class CrosshairsTool extends AnnotationTool {
                             type: 'rect',
                         });
                     }
-                    const slabThicknessValue = otherViewport.getSlabThickness();
+                    const slabThicknessValue = getSlabThicknessOrDefault(otherViewport);
                     if (slabThicknessValue > 0.5 && viewportSlabThicknessControlsOn) {
                         lineUID = `${lineIndex}STOne`;
                         drawLineSvg(svgDrawingHelper, annotationUID, lineUID, line[5], line[6], {
@@ -752,12 +773,12 @@ class CrosshairsTool extends AnnotationTool {
             if (!otherViewportAnnotations || !otherViewportAnnotations.length) {
                 return [];
             }
-            const camera = viewport.getCamera();
+            const camera = getViewportICamera(viewport);
             const { viewPlaneNormal, position } = camera;
             const viewportsWithDifferentCameras = otherViewportAnnotations.filter((annotation) => {
                 const { viewportId } = annotation.data;
                 const targetViewport = renderingEngine.getViewport(viewportId);
-                const cameraOfTarget = targetViewport.getCamera();
+                const cameraOfTarget = getViewportICamera(targetViewport);
                 return !(csUtils.isEqual(cameraOfTarget.viewPlaneNormal, viewPlaneNormal, 1e-2) && csUtils.isEqual(cameraOfTarget.position, position, 1));
             });
             return viewportsWithDifferentCameras;
@@ -775,13 +796,13 @@ class CrosshairsTool extends AnnotationTool {
             if (!linkedViewportAnnotations || !linkedViewportAnnotations.length) {
                 return [];
             }
-            const camera = viewport.getCamera();
+            const camera = getViewportICamera(viewport);
             const viewPlaneNormal = camera.viewPlaneNormal;
             vtkMath.normalize(viewPlaneNormal);
             const otherViewportsAnnotationsWithSameCameraDirection = linkedViewportAnnotations.filter((annotation) => {
                 const { viewportId } = annotation.data;
                 const otherViewport = renderingEngine.getViewport(viewportId);
-                const otherCamera = otherViewport.getCamera();
+                const otherCamera = getViewportICamera(otherViewport);
                 const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
                 vtkMath.normalize(otherViewPlaneNormal);
                 return (csUtils.isEqual(viewPlaneNormal, otherViewPlaneNormal, 1e-2) &&
@@ -791,7 +812,7 @@ class CrosshairsTool extends AnnotationTool {
         };
         this._filterAnnotationsByUniqueViewportOrientations = (enabledElement, annotations) => {
             const { renderingEngine, viewport } = enabledElement;
-            const camera = viewport.getCamera();
+            const camera = getViewportICamera(viewport);
             const viewPlaneNormal = camera.viewPlaneNormal;
             vtkMath.normalize(viewPlaneNormal);
             const otherLinkedViewportAnnotationsFromSameScene = annotations.filter((annotation) => {
@@ -806,7 +827,7 @@ class CrosshairsTool extends AnnotationTool {
                 const annotation = otherLinkedViewportAnnotationsFromSameScene[i];
                 const { viewportId } = annotation.data;
                 const otherViewport = renderingEngine.getViewport(viewportId);
-                const otherCamera = otherViewport.getCamera();
+                const otherCamera = getViewportICamera(otherViewport);
                 const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
                 vtkMath.normalize(otherViewPlaneNormal);
                 if (csUtils.isEqual(viewPlaneNormal, otherViewPlaneNormal, 1e-2) ||
@@ -818,7 +839,7 @@ class CrosshairsTool extends AnnotationTool {
                     const annotation = otherViewportsAnnotationsWithUniqueCameras[jj];
                     const { viewportId } = annotation.data;
                     const stockedViewport = renderingEngine.getViewport(viewportId);
-                    const cameraOfStocked = stockedViewport.getCamera();
+                    const cameraOfStocked = getViewportICamera(stockedViewport);
                     if (csUtils.isEqual(cameraOfStocked.viewPlaneNormal, otherCamera.viewPlaneNormal, 1e-2) &&
                         csUtils.isEqual(cameraOfStocked.position, otherCamera.position, 1)) {
                         cameraFound = true;
@@ -839,7 +860,7 @@ class CrosshairsTool extends AnnotationTool {
                 const annotation = otherNonLinkedViewportAnnotationsFromSameScene[i];
                 const { viewportId } = annotation.data;
                 const otherViewport = renderingEngine.getViewport(viewportId);
-                const otherCamera = otherViewport.getCamera();
+                const otherCamera = getViewportICamera(otherViewport);
                 const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
                 vtkMath.normalize(otherViewPlaneNormal);
                 if (csUtils.isEqual(viewPlaneNormal, otherViewPlaneNormal, 1e-2) ||
@@ -851,7 +872,7 @@ class CrosshairsTool extends AnnotationTool {
                     const annotation = otherViewportsAnnotationsWithUniqueCameras[jj];
                     const { viewportId } = annotation.data;
                     const stockedViewport = renderingEngine.getViewport(viewportId);
-                    const cameraOfStocked = stockedViewport.getCamera();
+                    const cameraOfStocked = getViewportICamera(stockedViewport);
                     if (csUtils.isEqual(cameraOfStocked.viewPlaneNormal, otherCamera.viewPlaneNormal, 1e-2) &&
                         csUtils.isEqual(cameraOfStocked.position, otherCamera.position, 1)) {
                         cameraFound = true;
@@ -869,7 +890,7 @@ class CrosshairsTool extends AnnotationTool {
                 }
                 const { viewportId } = annotation.data;
                 const otherViewport = renderingEngine.getViewport(viewportId);
-                const otherCamera = otherViewport.getCamera();
+                const otherCamera = getViewportICamera(otherViewport);
                 const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
                 vtkMath.normalize(otherViewPlaneNormal);
                 if (csUtils.isEqual(viewPlaneNormal, otherViewPlaneNormal, 1e-2) ||
@@ -881,7 +902,7 @@ class CrosshairsTool extends AnnotationTool {
                     const annotation = otherViewportsAnnotationsWithUniqueCameras[jj];
                     const { viewportId } = annotation.data;
                     const stockedViewport = renderingEngine.getViewport(viewportId);
-                    const cameraOfStocked = stockedViewport.getCamera();
+                    const cameraOfStocked = getViewportICamera(stockedViewport);
                     if (csUtils.isEqual(cameraOfStocked.viewPlaneNormal, otherCamera.viewPlaneNormal, 1e-2) &&
                         csUtils.isEqual(cameraOfStocked.position, otherCamera.position, 1)) {
                         cameraFound = true;
@@ -894,6 +915,14 @@ class CrosshairsTool extends AnnotationTool {
             return otherViewportsAnnotationsWithUniqueCameras;
         };
         this._checkIfViewportsRenderingSameScene = (viewport, otherViewport) => {
+            if (csUtils.isGenericViewport(viewport) ||
+                csUtils.isGenericViewport(otherViewport)) {
+                const ref = viewport.getViewReference?.();
+                const otherRef = otherViewport.getViewReference?.();
+                const a = ref?.dataId ?? ref?.FrameOfReferenceUID;
+                const b = otherRef?.dataId ?? otherRef?.FrameOfReferenceUID;
+                return !!a && a === b;
+            }
             const volumeIds = viewport.getAllVolumeIds();
             const otherVolumeIds = otherViewport.getAllVolumeIds();
             return (volumeIds.length === otherVolumeIds.length &&
@@ -1006,6 +1035,9 @@ class CrosshairsTool extends AnnotationTool {
                 });
             }
             else if (handles.activeOperation === OPERATION.ROTATE) {
+                if (csUtils.isGenericViewport(enabledElement.viewport)) {
+                    return;
+                }
                 const otherViewportAnnotations = this._getAnnotationsForViewportsWithDifferentCameras(enabledElement, annotations);
                 const viewportsAnnotationsToUpdate = otherViewportAnnotations.filter((annotation) => {
                     const { data } = annotation;
@@ -1033,7 +1065,7 @@ class CrosshairsTool extends AnnotationTool {
                     angle *= -1;
                 }
                 angle = Math.round(angle * 100) / 100;
-                const rotationAxis = viewport.getCamera().viewPlaneNormal;
+                const rotationAxis = getViewportICamera(viewport).viewPlaneNormal;
                 const { matrix } = vtkMatrixBuilder
                     .buildFromRadian()
                     .translate(center[0], center[1], center[2])
@@ -1047,7 +1079,7 @@ class CrosshairsTool extends AnnotationTool {
                         const { data } = annotation;
                         data.handles.toolCenter = center;
                         const otherViewport = renderingEngine.getViewport(data.viewportId);
-                        const camera = otherViewport.getCamera();
+                        const camera = getViewportICamera(otherViewport);
                         const { viewUp, position, focalPoint } = camera;
                         viewUp[0] += position[0];
                         viewUp[1] += position[1];
@@ -1076,6 +1108,9 @@ class CrosshairsTool extends AnnotationTool {
                 });
             }
             else if (handles.activeOperation === OPERATION.SLAB) {
+                if (csUtils.isGenericViewport(enabledElement.viewport)) {
+                    return;
+                }
                 const otherViewportAnnotations = this._getAnnotationsForViewportsWithDifferentCameras(enabledElement, annotations);
                 const referenceAnnotations = otherViewportAnnotations.filter((annotation) => {
                     const { data } = annotation;
@@ -1095,7 +1130,7 @@ class CrosshairsTool extends AnnotationTool {
                 viewportsAnnotationsToUpdate.forEach((annotation) => {
                     const { data } = annotation;
                     const otherViewport = renderingEngine.getViewport(data.viewportId);
-                    const camera = otherViewport.getCamera();
+                    const camera = getViewportICamera(otherViewport);
                     const normal = camera.viewPlaneNormal;
                     const dotProd = vtkMath.dot(delta, normal);
                     const projectedDelta = [...normal];
@@ -1140,7 +1175,7 @@ class CrosshairsTool extends AnnotationTool {
                             projectedDelta[2],
                         ];
                         vec3.normalize(normalizedProjectedDelta, normalizedProjectedDelta);
-                        let slabThicknessValue = otherViewport.getSlabThickness();
+                        let slabThicknessValue = getSlabThicknessOrDefault(otherViewport);
                         if (csUtils.isOpposite(normalizedProjectedDirection, normalizedProjectedDelta, 1e-3)) {
                             slabThicknessValue -= mod;
                         }
@@ -1310,7 +1345,7 @@ class CrosshairsTool extends AnnotationTool {
                 if (!enabledElement) {
                     return;
                 }
-                const camera = enabledElement.viewport.getCamera();
+                const camera = getViewportICamera(enabledElement.viewport);
                 const normal = [...camera.viewPlaneNormal];
                 const point = [...camera.focalPoint];
                 if (!this._isFinitePoint3(normal) || !this._isFinitePoint3(point)) {
@@ -1430,7 +1465,7 @@ class CrosshairsTool extends AnnotationTool {
                 if (!viewport) {
                     return;
                 }
-                const camera = viewport.getCamera();
+                const camera = getViewportICamera(viewport);
                 const { focalPoint, position, viewPlaneNormal } = camera;
                 const delta = [
                     toolCenter[0] - focalPoint[0],
@@ -1455,10 +1490,15 @@ class CrosshairsTool extends AnnotationTool {
                     position[1] + scrollDelta[1],
                     position[2] + scrollDelta[2],
                 ];
-                viewport.setCamera({
-                    focalPoint: newFocalPoint,
-                    position: newPosition,
-                });
+                if (csUtils.isGenericViewport(viewport)) {
+                    jumpToFocalPoint(viewport, newFocalPoint);
+                }
+                else {
+                    viewport.setCamera({
+                        focalPoint: newFocalPoint,
+                        position: newPosition,
+                    });
+                }
                 viewport.render();
             });
         }
@@ -1493,7 +1533,10 @@ class CrosshairsTool extends AnnotationTool {
     }
     _autoPanViewportIfNecessary(viewportId, renderingEngine) {
         const viewport = renderingEngine.getViewport(viewportId);
-        const { clientWidth, clientHeight } = viewport.canvas;
+        if (csUtils.isGenericViewport(viewport)) {
+            return;
+        }
+        const { clientWidth, clientHeight } = getDisplayedCanvasSize(viewport);
         const toolCenterCanvas = viewport.worldToCanvas(this.toolCenter);
         const pan = this.configuration.autoPan.panSize;
         const visiblePointCanvas = [
@@ -1522,7 +1565,7 @@ class CrosshairsTool extends AnnotationTool {
             visiblePointWorld[1] - this.toolCenter[1],
             visiblePointWorld[2] - this.toolCenter[2],
         ];
-        const camera = viewport.getCamera();
+        const camera = getViewportICamera(viewport);
         const { focalPoint, position } = camera;
         const updatedPosition = [
             position[0] - deltaPointsWorld[0],
@@ -1548,6 +1591,9 @@ class CrosshairsTool extends AnnotationTool {
         viewport.render();
     }
     setSlabThickness(viewport, slabThickness) {
+        if (csUtils.isGenericViewport(viewport)) {
+            return;
+        }
         let actorUIDs;
         const { filterActorUIDsToSetSlabThickness } = this.configuration;
         if (filterActorUIDsToSetSlabThickness &&
@@ -1573,7 +1619,7 @@ class CrosshairsTool extends AnnotationTool {
     _applyDeltaShiftToViewportCamera(renderingEngine, annotation, delta) {
         const { data } = annotation;
         const viewport = renderingEngine.getViewport(data.viewportId);
-        const camera = viewport.getCamera();
+        const camera = getViewportICamera(viewport);
         const normal = camera.viewPlaneNormal;
         const dotProd = vtkMath.dot(delta, normal);
         const projectedDelta = [...normal];
@@ -1588,10 +1634,15 @@ class CrosshairsTool extends AnnotationTool {
             const previousIgnoreFiredEvents = this._ignoreFiredEvents;
             this._ignoreFiredEvents = true;
             try {
-                viewport.setCamera({
-                    focalPoint: newFocalPoint,
-                    position: newPosition,
-                });
+                if (csUtils.isGenericViewport(viewport)) {
+                    jumpToFocalPoint(viewport, newFocalPoint);
+                }
+                else {
+                    viewport.setCamera({
+                        focalPoint: newFocalPoint,
+                        position: newPosition,
+                    });
+                }
             }
             finally {
                 this._ignoreFiredEvents = previousIgnoreFiredEvents;
@@ -1658,7 +1709,7 @@ class CrosshairsTool extends AnnotationTool {
         const minimalCrosshairConfig = getMinimalCrosshairConfig(this.configuration);
         const enabledElement = getEnabledElement(element);
         const { viewport } = enabledElement;
-        const { clientWidth, clientHeight } = viewport.canvas;
+        const { clientWidth, clientHeight } = getDisplayedCanvasSize(viewport);
         const canvasDiagonalLength = Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight);
         const { data } = annotation;
         const { rotationPoints } = data.handles;

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

@@ -12,7 +12,7 @@ declare class MagnifyTool extends BaseTool {
     } | null;
     constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
     private _hasBeenRemoved;
-    _getReferencedImageId(viewport: Types.IStackViewport | Types.IVolumeViewport): string;
+    _getReferencedImageId(viewport: Types.IViewport): string | undefined;
     preMouseDownCallback: (evt: EventTypes.InteractionEventType) => boolean;
     preTouchStartCallback: (evt: EventTypes.InteractionEventType) => void;
     _createMagnificationViewport: () => void;