@cornerstonejs/tools 5.0.0-beta.1 → 5.0.0

package/dist/esm/tools/OrientationControllerTool.js

@@ -0,0 +1,454 @@
+import { BaseTool } from './base';
+import { getEnabledElementByIds, Enums, eventTarget, } from '@cornerstonejs/core';
+import { getToolGroup } from '../store/ToolGroupManager';
+import * as ToolsEnums from '../enums';
+import { vec3, mat4, quat } from 'gl-matrix';
+import { vtkOrientationControllerWidget } from '../utilities/vtkjs/OrientationControllerWidget';
+const ADD_MARKER_DELAY_MS = 500;
+const POSITION_RETRY_DELAY_MS = 1000;
+const FACE_COLOR_SCHEMES = {
+    marker: {
+        topBottom: [0, 0, 255],
+        frontBack: [0, 255, 255],
+        leftRight: [255, 255, 0],
+    },
+    gray: {
+        topBottom: [180, 180, 180],
+        frontBack: [180, 180, 180],
+        leftRight: [180, 180, 180],
+    },
+    rgy: {
+        topBottom: [255, 0, 0],
+        frontBack: [0, 255, 0],
+        leftRight: [255, 255, 0],
+    },
+};
+const LETTER_COLOR_SCHEMES = {
+    mixed: {
+        zMinus: [255, 255, 255],
+        zPlus: [255, 255, 255],
+        yMinus: [255, 255, 255],
+        yPlus: [255, 255, 255],
+        xMinus: [0, 0, 0],
+        xPlus: [0, 0, 0],
+    },
+    rgy: {
+        zMinus: [255, 255, 255],
+        zPlus: [255, 255, 255],
+        yMinus: [255, 255, 255],
+        yPlus: [255, 255, 255],
+        xMinus: [0, 0, 0],
+        xPlus: [0, 0, 0],
+    },
+    white: {
+        zMinus: [255, 255, 255],
+        zPlus: [255, 255, 255],
+        yMinus: [255, 255, 255],
+        yPlus: [255, 255, 255],
+        xMinus: [255, 255, 255],
+        xPlus: [255, 255, 255],
+    },
+    black: {
+        zMinus: [0, 0, 0],
+        zPlus: [0, 0, 0],
+        yMinus: [0, 0, 0],
+        yPlus: [0, 0, 0],
+        xMinus: [0, 0, 0],
+        xPlus: [0, 0, 0],
+    },
+};
+const DEFAULT_FACE_COLOR_SCHEME = 'rgy';
+const DEFAULT_LETTER_COLOR_SCHEME = 'mixed';
+const ANIMATE_RESET_CAMERA_OPTIONS = {
+    resetZoom: false,
+    resetPan: true,
+    resetToCenter: true,
+};
+class OrientationControllerTool extends BaseTool {
+    constructor(toolProps = {}, defaultToolProps = {
+        supportedInteractionTypes: ['Mouse'],
+        configuration: {
+            enabled: true,
+            opacity: 1.0,
+            size: 0.04,
+            position: 'bottom-right',
+            colorScheme: 'rgy',
+            letterColorScheme: 'mixed',
+            showEdgeFaces: true,
+            showCornerFaces: true,
+            keepOrientationUp: true,
+            highlightColor: [255, 255, 255],
+            edgeColor: [200, 200, 200],
+            cornerColor: [150, 150, 150],
+            restingAmbient: 1.0,
+            hoverAmbient: 1.0,
+        },
+    }) {
+        super(toolProps, defaultToolProps);
+        this.widget = new vtkOrientationControllerWidget();
+        this.resizeObservers = new Map();
+        this.cameraHandlers = new Map();
+        this.animationFrameHandles = new Map();
+        this.animationTokens = new Map();
+        this._getViewportsInfo = () => {
+            const viewports = getToolGroup(this.toolGroupId)?.viewportsInfo;
+            return viewports || [];
+        };
+        this.onSetToolConfiguration = () => {
+            const viewportsInfo = this._getViewportsInfo();
+            const hasActiveMarkers = viewportsInfo.some(({ viewportId }) => {
+                return this.widget.getActors(viewportId) !== null;
+            });
+            if (hasActiveMarkers) {
+                this.removeMarkers();
+                this.addMarkers();
+            }
+        };
+        this.onViewportAdded = (evt) => {
+            const { viewportId, renderingEngineId, toolGroupId } = evt.detail;
+            if (toolGroupId !== this.toolGroupId) {
+                return;
+            }
+            if (this.widget.getActors(viewportId)) {
+                return;
+            }
+            setTimeout(() => {
+                this.addMarkerToViewport(viewportId, renderingEngineId);
+            }, ADD_MARKER_DELAY_MS);
+        };
+        this.onViewportRemoved = (evt) => {
+            const { viewportId, renderingEngineId, toolGroupId } = evt.detail;
+            if (toolGroupId !== this.toolGroupId) {
+                return;
+            }
+            const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
+            if (enabledElement) {
+                const { viewport } = enabledElement;
+                if (viewport.isOrientationChangeable()) {
+                    this.widget.removeActorsFromViewport(viewportId, viewport);
+                }
+                const cameraHandler = this.cameraHandlers.get(viewportId);
+                if (cameraHandler) {
+                    viewport.element.removeEventListener(Enums.Events.CAMERA_MODIFIED, cameraHandler);
+                    this.cameraHandlers.delete(viewportId);
+                }
+            }
+            this.widget.cleanup(viewportId);
+            const resizeObserver = this.resizeObservers.get(viewportId);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                this.resizeObservers.delete(viewportId);
+            }
+        };
+        this.addMarkers = () => {
+            const viewportsInfo = this._getViewportsInfo();
+            viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+                const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
+                if (!enabledElement) {
+                    return;
+                }
+                const { viewport } = enabledElement;
+                if (!viewport.isOrientationChangeable()) {
+                    return;
+                }
+                if (this.widget.getActors(viewportId)) {
+                    return;
+                }
+                setTimeout(() => {
+                    this.addMarkerToViewport(viewportId, renderingEngineId);
+                }, ADD_MARKER_DELAY_MS);
+            });
+        };
+        this.onCameraModified = (evt) => {
+            const { viewportId } = evt.detail;
+            if (!viewportId) {
+                return;
+            }
+            const actors = this.widget.getActors(viewportId);
+            if (!actors) {
+                return;
+            }
+            const viewportsInfo = this._getViewportsInfo();
+            const viewportInfo = viewportsInfo.find((vp) => vp.viewportId === viewportId);
+            if (!viewportInfo) {
+                return;
+            }
+            const enabledElement = getEnabledElementByIds(viewportId, viewportInfo.renderingEngineId);
+            if (!enabledElement) {
+                return;
+            }
+            const { viewport } = enabledElement;
+            if (!viewport.isOrientationChangeable()) {
+                return;
+            }
+            const volumeViewport = viewport;
+            this.widget.positionActors(volumeViewport, actors, this.getPositionConfig());
+            this.widget.syncOverlayViewport(viewportId, volumeViewport);
+            viewport.render();
+        };
+    }
+    getPositionConfig() {
+        return {
+            position: this.configuration.position || 'bottom-right',
+            size: this.configuration.size || 0.04,
+        };
+    }
+    getFaceColors() {
+        const colorScheme = this.configuration.colorScheme || 'rgy';
+        if (this.configuration.faceColors) {
+            const provided = this.configuration.faceColors;
+            if (provided.topBottom && provided.frontBack && provided.leftRight) {
+                return {
+                    topBottom: provided.topBottom,
+                    frontBack: provided.frontBack,
+                    leftRight: provided.leftRight,
+                };
+            }
+        }
+        return (FACE_COLOR_SCHEMES[colorScheme] ??
+            FACE_COLOR_SCHEMES[DEFAULT_FACE_COLOR_SCHEME]);
+    }
+    getLetterColors() {
+        const letterColorScheme = this.configuration.letterColorScheme || 'mixed';
+        return (LETTER_COLOR_SCHEMES[letterColorScheme] ??
+            LETTER_COLOR_SCHEMES[DEFAULT_LETTER_COLOR_SCHEME]);
+    }
+    onSetToolEnabled() {
+        this.removeMarkers();
+        this.addMarkers();
+        eventTarget.addEventListener(ToolsEnums.Events.TOOLGROUP_VIEWPORT_ADDED, this.onViewportAdded);
+        eventTarget.addEventListener(ToolsEnums.Events.TOOLGROUP_VIEWPORT_REMOVED, this.onViewportRemoved);
+    }
+    onSetToolDisabled() {
+        this.removeMarkers();
+        eventTarget.removeEventListener(ToolsEnums.Events.TOOLGROUP_VIEWPORT_ADDED, this.onViewportAdded);
+        eventTarget.removeEventListener(ToolsEnums.Events.TOOLGROUP_VIEWPORT_REMOVED, this.onViewportRemoved);
+    }
+    removeMarkers() {
+        const viewportsInfo = this._getViewportsInfo();
+        viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+            const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
+            if (enabledElement) {
+                const { viewport } = enabledElement;
+                if (viewport.isOrientationChangeable()) {
+                    this.widget.removeActorsFromViewport(viewportId, viewport);
+                }
+                const cameraHandler = this.cameraHandlers.get(viewportId);
+                if (cameraHandler) {
+                    viewport.element.removeEventListener(Enums.Events.CAMERA_MODIFIED, cameraHandler);
+                    this.cameraHandlers.delete(viewportId);
+                }
+            }
+            const resizeObserver = this.resizeObservers.get(viewportId);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                this.resizeObservers.delete(viewportId);
+            }
+        });
+        this.widget.cleanup();
+        this.resizeObservers.forEach((observer) => observer.disconnect());
+        this.resizeObservers.clear();
+        this.cameraHandlers.clear();
+        this.animationFrameHandles.forEach((handle) => cancelAnimationFrame(handle));
+        this.animationFrameHandles.clear();
+        this.animationTokens.clear();
+    }
+    createAnnotatedRhombActor() {
+        const faceColors = this.getFaceColors();
+        const letterColors = this.getLetterColors();
+        return this.widget.createActors({
+            faceColors,
+            letterColors,
+            opacity: this.configuration.opacity ?? 1.0,
+            showEdgeFaces: this.configuration.showEdgeFaces !== false,
+            showCornerFaces: this.configuration.showCornerFaces !== false,
+            highlightColor: this.configuration.highlightColor ?? [255, 255, 255],
+            edgeColor: this.configuration.edgeColor ?? [200, 200, 200],
+            cornerColor: this.configuration.cornerColor ?? [150, 150, 150],
+            restingAmbient: this.configuration.restingAmbient ?? 1.0,
+            hoverAmbient: this.configuration.hoverAmbient ?? 1.0,
+        });
+    }
+    addMarkerToViewport(viewportId, renderingEngineId) {
+        if (this.widget.getActors(viewportId)) {
+            return;
+        }
+        const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
+        if (!enabledElement) {
+            console.warn('OrientationControllerTool: No enabled element found');
+            return;
+        }
+        const { viewport } = enabledElement;
+        if (!viewport.isOrientationChangeable()) {
+            console.warn('OrientationControllerTool: Viewport does not support orientation changes');
+            return;
+        }
+        const element = viewport.element;
+        const volumeViewport = viewport;
+        const actors = this.createAnnotatedRhombActor();
+        this.widget.addActorsToViewport(viewportId, volumeViewport, actors);
+        const positioned = this.widget.positionActors(volumeViewport, actors, this.getPositionConfig());
+        if (!positioned) {
+            console.warn('OrientationControllerTool: Initial positioning failed, retrying...');
+            setTimeout(() => {
+                const repositioned = this.widget.positionActors(volumeViewport, actors, this.getPositionConfig());
+                if (repositioned) {
+                    viewport.render();
+                }
+                else {
+                    console.error('OrientationControllerTool: Retry positioning also failed');
+                }
+            }, POSITION_RETRY_DELAY_MS);
+        }
+        else {
+            viewport.render();
+        }
+        this.widget.syncOverlayViewport(viewportId, volumeViewport);
+        this.widget.setupPicker(viewportId, actors);
+        this.widget.setupMouseHandlers(viewportId, element, volumeViewport, actors, {
+            onFacePicked: (result) => {
+                const orientation = this.widget.getOrientationForFace(result.cellId);
+                if (orientation) {
+                    this.animateCameraToOrientation(volumeViewport, orientation.viewPlaneNormal, orientation.viewUp);
+                }
+            },
+            onFaceHover: (result) => {
+                if (result) {
+                    this.widget.highlightFace(result.pickedActor, result.cellId, volumeViewport, result.actorIndex === 0);
+                }
+                else {
+                    this.widget.clearHighlight();
+                }
+            },
+        });
+        const resizeObserver = new ResizeObserver(() => {
+            this.updateMarkerPosition(viewportId, renderingEngineId);
+        });
+        resizeObserver.observe(element);
+        this.resizeObservers.set(viewportId, resizeObserver);
+        const cameraHandler = (evt) => {
+            const detail = evt.detail;
+            if (detail.viewportId === viewportId) {
+                this.onCameraModified(evt);
+            }
+        };
+        element.addEventListener(Enums.Events.CAMERA_MODIFIED, cameraHandler);
+        this.cameraHandlers.set(viewportId, cameraHandler);
+    }
+    updateMarkerPosition(viewportId, renderingEngineId) {
+        const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
+        if (!enabledElement) {
+            return;
+        }
+        const actors = this.widget.getActors(viewportId);
+        if (!actors) {
+            return;
+        }
+        const { viewport } = enabledElement;
+        if (!viewport.isOrientationChangeable()) {
+            return;
+        }
+        this.widget.positionActors(viewport, actors, this.getPositionConfig());
+        this.widget.syncOverlayViewport(viewportId, viewport);
+        viewport.render();
+    }
+    animateCameraToOrientation(viewport, targetViewPlaneNormal, targetViewUp) {
+        const viewportId = viewport.id;
+        const existingHandle = this.animationFrameHandles.get(viewportId);
+        if (existingHandle !== undefined) {
+            cancelAnimationFrame(existingHandle);
+            this.animationFrameHandles.delete(viewportId);
+        }
+        const nextToken = (this.animationTokens.get(viewportId) ?? 0) + 1;
+        this.animationTokens.set(viewportId, nextToken);
+        const keepOrientationUp = this.configuration.keepOrientationUp !== false;
+        const renderer = viewport.getRenderer();
+        const camera = renderer.getActiveCamera();
+        const directionOfProjection = camera.getDirectionOfProjection();
+        const startViewUpArray = camera.getViewUp();
+        const startForward = vec3.fromValues(-directionOfProjection[0], -directionOfProjection[1], -directionOfProjection[2]);
+        const startUp = vec3.fromValues(startViewUpArray[0], startViewUpArray[1], startViewUpArray[2]);
+        const startRight = vec3.create();
+        vec3.cross(startRight, startUp, startForward);
+        vec3.normalize(startRight, startRight);
+        const startMatrix = mat4.fromValues(startRight[0], startRight[1], startRight[2], 0, startUp[0], startUp[1], startUp[2], 0, startForward[0], startForward[1], startForward[2], 0, 0, 0, 0, 1);
+        const targetForward = vec3.normalize(vec3.create(), targetViewPlaneNormal);
+        let targetUp;
+        if (keepOrientationUp) {
+            targetUp = vec3.fromValues(targetViewUp[0], targetViewUp[1], targetViewUp[2]);
+        }
+        else {
+            const currentFwd = vec3.normalize(vec3.create(), startForward);
+            const rotQuat = quat.create();
+            quat.rotationTo(rotQuat, currentFwd, targetForward);
+            targetUp = vec3.create();
+            vec3.transformQuat(targetUp, startUp, rotQuat);
+            vec3.normalize(targetUp, targetUp);
+        }
+        const upDotForward = vec3.dot(targetUp, targetForward);
+        vec3.scaleAndAdd(targetUp, targetUp, targetForward, -upDotForward);
+        if (vec3.length(targetUp) < 0.0001) {
+            targetUp = vec3.clone(startUp);
+            const fallbackDot = vec3.dot(targetUp, targetForward);
+            vec3.scaleAndAdd(targetUp, targetUp, targetForward, -fallbackDot);
+        }
+        vec3.normalize(targetUp, targetUp);
+        const targetRight = vec3.create();
+        vec3.cross(targetRight, targetUp, targetForward);
+        vec3.normalize(targetRight, targetRight);
+        vec3.cross(targetUp, targetForward, targetRight);
+        vec3.normalize(targetUp, targetUp);
+        const targetMatrix = mat4.fromValues(targetRight[0], targetRight[1], targetRight[2], 0, targetUp[0], targetUp[1], targetUp[2], 0, targetForward[0], targetForward[1], targetForward[2], 0, 0, 0, 0, 1);
+        const startQuat = mat4.getRotation(quat.create(), startMatrix);
+        const targetQuat = mat4.getRotation(quat.create(), targetMatrix);
+        let dotProduct = quat.dot(startQuat, targetQuat);
+        if (dotProduct < 0) {
+            quat.scale(targetQuat, targetQuat, -1);
+            dotProduct = -dotProduct;
+        }
+        const threshold = 0.99996;
+        if (dotProduct > threshold) {
+            return;
+        }
+        const duration = 150;
+        const animationStart = performance.now();
+        const finalNormal = [
+            targetForward[0],
+            targetForward[1],
+            targetForward[2],
+        ];
+        const finalUp = [targetUp[0], targetUp[1], targetUp[2]];
+        const animate = (now) => {
+            if (this.animationTokens.get(viewportId) !== nextToken) {
+                return;
+            }
+            const elapsed = now - animationStart;
+            const t = Math.min(1, elapsed / duration);
+            const isLastStep = t >= 1;
+            const easedT = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+            const interpolatedQuat = quat.create();
+            quat.slerp(interpolatedQuat, startQuat, targetQuat, easedT);
+            const interpolatedMatrix = mat4.create();
+            mat4.fromQuat(interpolatedMatrix, interpolatedQuat);
+            const interpolatedForward = interpolatedMatrix.slice(8, 11);
+            const interpolatedUp = interpolatedMatrix.slice(4, 7);
+            viewport.setCamera({
+                viewPlaneNormal: isLastStep ? finalNormal : interpolatedForward,
+                viewUp: isLastStep ? finalUp : interpolatedUp,
+            });
+            viewport.resetCamera(ANIMATE_RESET_CAMERA_OPTIONS);
+            viewport.render();
+            if (!isLastStep) {
+                const handle = requestAnimationFrame(animate);
+                this.animationFrameHandles.set(viewportId, handle);
+            }
+            else {
+                this.animationFrameHandles.delete(viewportId);
+            }
+        };
+        const handle = requestAnimationFrame(animate);
+        this.animationFrameHandles.set(viewportId, handle);
+    }
+}
+OrientationControllerTool.toolName = 'OrientationControllerTool';
+export default OrientationControllerTool;

package/dist/esm/tools/OrientationMarkerTool.js

@@ -17,10 +17,6 @@ var OverlayMarkerType;
     OverlayMarkerType[OverlayMarkerType["CUSTOM"] = 3] = "CUSTOM";
 })(OverlayMarkerType || (OverlayMarkerType = {}));
 class OrientationMarkerTool extends BaseTool {
-    static { this.CUBE = 1; }
-    static { this.AXIS = 2; }
-    static { this.VTPFILE = 3; }
-    static { this.OVERLAY_MARKER_TYPES = OverlayMarkerType; }
     constructor(toolProps = {}, defaultToolProps = {
         configuration: {
             orientationWidget: {
@@ -282,5 +278,9 @@ class OrientationMarkerTool extends BaseTool {
         return axes;
     }
 }
+OrientationMarkerTool.CUBE = 1;
+OrientationMarkerTool.AXIS = 2;
+OrientationMarkerTool.VTPFILE = 3;
+OrientationMarkerTool.OVERLAY_MARKER_TYPES = OverlayMarkerType;
 OrientationMarkerTool.toolName = 'OrientationMarker';
 export default OrientationMarkerTool;

package/dist/esm/tools/PanTool.js

@@ -1,5 +1,5 @@
 import { BaseTool } from './base';
-import { getEnabledElement, utilities as csUtils } from '@cornerstonejs/core';
+import { getEnabledElement, utilities as csUtils, viewportHasPan, } from '@cornerstonejs/core';
 class PanTool extends BaseTool {
     constructor(toolProps = {}, defaultToolProps = {
         supportedInteractionTypes: ['Mouse', 'Touch'],
@@ -7,7 +7,7 @@ class PanTool extends BaseTool {
             limitToViewport: false,
             ignoreX: false,
             ignoreY: false,
-            ignoreZ: false
+            ignoreZ: false,
         },
     }) {
         super(toolProps, defaultToolProps);
@@ -92,7 +92,19 @@ class PanTool extends BaseTool {
             deltaPointsWorld[2] = 0;
         }
         const viewport = enabledElement.viewport;
-        const camera = viewport.getCamera();
+        const camera = getLegacyCamera(viewport);
+        if (!hasLegacyCameraPosition(camera)) {
+            if (!viewportHasPan(viewport)) {
+                return;
+            }
+            const pan = viewport.getPan();
+            viewport.setPan([
+                pan[0] + deltaPointsCanvas[0],
+                pan[1] + deltaPointsCanvas[1],
+            ]);
+            viewport.render();
+            return;
+        }
         const { focalPoint, position } = camera;
         if (this.configuration.limitToViewport &&
             !this._checkImageInViewport(viewport, deltaPointsCanvas)) {
@@ -115,5 +127,16 @@ class PanTool extends BaseTool {
         viewport.render();
     }
 }
+function getLegacyCamera(viewport) {
+    const maybeViewport = viewport;
+    return typeof maybeViewport.getCamera === 'function'
+        ? maybeViewport.getCamera()
+        : undefined;
+}
+function hasLegacyCameraPosition(camera) {
+    return Boolean(camera &&
+        Array.isArray(camera.focalPoint) &&
+        Array.isArray(camera.position));
+}
 PanTool.toolName = 'Pan';
 export default PanTool;

package/dist/esm/tools/PlanarRotateTool.js

@@ -2,6 +2,8 @@ import { BaseVolumeViewport, getEnabledElement } from '@cornerstonejs/core';
 import { mat4, vec3 } from 'gl-matrix';
 import { BaseTool } from './base';
 import angleBetweenLines from '../utilities/math/angle/angleBetweenLines';
+import getViewportICamera from '../utilities/getViewportICamera';
+import { applyViewportPresentation, getViewportPresentation, } from '../utilities/viewportPresentation';
 class PlanarRotateTool extends BaseTool {
     constructor(toolProps = {}, defaultToolProps = {
         supportedInteractionTypes: ['Mouse', 'Touch'],
@@ -24,13 +26,16 @@ class PlanarRotateTool extends BaseTool {
         const startPointWorld = startPoints.world;
         const enabledElement = getEnabledElement(element);
         const { viewport } = enabledElement;
-        const camera = viewport.getCamera();
+        const camera = getViewportICamera(viewport);
         const width = element.clientWidth;
         const height = element.clientHeight;
         const centerCanvas = [width * 0.5, height * 0.5];
         const centerWorld = viewport.canvasToWorld(centerCanvas);
         let angle = angleBetweenLines([startPointWorld, centerWorld], [centerWorld, currentPointWorld]);
         const { viewPlaneNormal } = camera;
+        if (!viewPlaneNormal) {
+            return;
+        }
         const v1 = vec3.sub(vec3.create(), centerWorld, startPointWorld);
         const v2 = vec3.sub(vec3.create(), centerWorld, currentPointWorld);
         const cross = vec3.cross(vec3.create(), v1, v2);
@@ -43,7 +48,10 @@ class PlanarRotateTool extends BaseTool {
         this.setAngle(viewport, angle);
     }
     setAngle(viewport, angle) {
-        const { viewPlaneNormal, viewUp } = viewport.getCamera();
+        const { viewPlaneNormal, viewUp } = getViewportICamera(viewport);
+        if (!viewPlaneNormal || !viewUp) {
+            return;
+        }
         if (viewport instanceof BaseVolumeViewport) {
             const rotAngle = (((angle + 360) % 360) * Math.PI) / 180;
             const rotMat = mat4.identity(new Float32Array(16));
@@ -52,10 +60,17 @@ class PlanarRotateTool extends BaseTool {
             viewport.setCamera({ viewUp: rotatedViewUp });
         }
         else {
-            const { rotation } = viewport.getViewPresentation();
-            viewport.setViewPresentation({
+            const presentation = getViewportPresentation(viewport);
+            if (!presentation) {
+                return;
+            }
+            const { rotation = 0 } = presentation;
+            const didApply = applyViewportPresentation(viewport, {
                 rotation: (rotation + angle + 360) % 360,
             });
+            if (!didApply) {
+                return;
+            }
         }
         viewport.render();
     }

package/dist/esm/tools/ReferenceCursors.js

@@ -96,7 +96,13 @@ class ReferenceCursors extends AnnotationDisplayTool {
         };
         this.onCameraModified = (evt) => {
             const eventDetail = evt.detail;
-            const { element, previousCamera, camera } = eventDetail;
+            const { previousCamera, camera } = eventDetail;
+            const element = eventDetail.element ||
+                evt.currentTarget ||
+                evt.target;
+            if (!element || !previousCamera) {
+                return;
+            }
             const enabledElement = getEnabledElement(element);
             const viewport = enabledElement.viewport;
             if (element !== this._elementWithCursor) {

package/dist/esm/tools/SculptorTool/CircleSculptCursor.js

@@ -11,7 +11,6 @@ class CircleSculptCursor {
             maxToolSize: null,
         };
     }
-    static { this.shapeName = 'Circle'; }
     renderShape(svgDrawingHelper, canvasLocation, options) {
         const circleUID = '0';
         drawCircleSvg(svgDrawingHelper, 'SculptorTool', circleUID, canvasLocation, this.toolInfo.toolSize, options);
@@ -74,4 +73,5 @@ class CircleSculptCursor {
         return vec3.distance(point, mousePoint) < this.toolInfo.radius;
     }
 }
+CircleSculptCursor.shapeName = 'Circle';
 export default CircleSculptCursor;

package/dist/esm/tools/TrackballRotateTool.js

@@ -4,6 +4,7 @@ import { eventTarget, getEnabledElement, getEnabledElementByIds, } from '@corner
 import { mat4, vec3 } from 'gl-matrix';
 import { BaseTool } from './base';
 import { getToolGroup } from '../store/ToolGroupManager';
+import { applyViewportPresentation, getViewportPresentation, } from '../utilities/viewportPresentation';
 class TrackballRotateTool extends BaseTool {
     constructor(toolProps = {}, defaultToolProps = {
         supportedInteractionTypes: ['Mouse', 'Touch'],
@@ -64,9 +65,9 @@ class TrackballRotateTool extends BaseTool {
                                 return;
                             }
                             const { viewport } = element;
-                            const viewPresentation = viewport.getViewPresentation();
+                            const viewPresentation = getViewportPresentation(viewport);
                             viewport.resetCamera();
-                            viewport.setViewPresentation(viewPresentation);
+                            applyViewportPresentation(viewport, viewPresentation);
                             viewport.render();
                         });
                         resizeObserver.observe(element);