@cornerstonejs/tools 4.21.6 → 4.21.8

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

@@ -4,6 +4,8 @@ declare class OrientationControllerTool extends BaseTool {
     private widget;
     private resizeObservers;
     private cameraHandlers;
+    private animationFrameHandles;
+    private animationTokens;
     constructor(toolProps?: {}, defaultToolProps?: {
         supportedInteractionTypes: string[];
         configuration: {

package/dist/esm/tools/OrientationControllerTool.js

@@ -84,6 +84,8 @@ class OrientationControllerTool extends BaseTool {
         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 || [];
@@ -177,6 +179,7 @@ class OrientationControllerTool extends BaseTool {
             }
             const volumeViewport = viewport;
             this.widget.positionActors(volumeViewport, actors, this.getPositionConfig());
+            this.widget.syncOverlayViewport(viewportId, volumeViewport);
             viewport.render();
         };
     }
@@ -242,6 +245,9 @@ class OrientationControllerTool extends BaseTool {
         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();
@@ -255,6 +261,9 @@ class OrientationControllerTool extends BaseTool {
         });
     }
     addMarkerToViewport(viewportId, renderingEngineId) {
+        if (this.widget.getActors(viewportId)) {
+            return;
+        }
         const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
         if (!enabledElement) {
             console.warn('OrientationControllerTool: No enabled element found');
@@ -295,8 +304,8 @@ class OrientationControllerTool extends BaseTool {
                 }
             },
             onFaceHover: (result) => {
-                if (result && result.actorIndex !== 0) {
-                    this.widget.highlightFace(result.pickedActor, result.cellId, volumeViewport, false);
+                if (result) {
+                    this.widget.highlightFace(result.pickedActor, result.cellId, volumeViewport, result.actorIndex === 0);
                 }
                 else {
                     this.widget.clearHighlight();
@@ -335,6 +344,14 @@ class OrientationControllerTool extends BaseTool {
         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();
@@ -346,34 +363,33 @@ class OrientationControllerTool extends BaseTool {
         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 currentUp = vec3.normalize(vec3.create(), startUp);
-            const normalizedForward = vec3.create();
-            vec3.normalize(normalizedForward, targetViewPlaneNormal);
-            const dot = vec3.dot(currentUp, normalizedForward);
+            const currentFwd = vec3.normalize(vec3.create(), startForward);
+            const rotQuat = quat.create();
+            quat.rotationTo(rotQuat, currentFwd, targetForward);
             targetUp = vec3.create();
-            vec3.scaleAndAdd(targetUp, currentUp, normalizedForward, -dot);
+            vec3.transformQuat(targetUp, startUp, rotQuat);
             vec3.normalize(targetUp, targetUp);
-            if (vec3.length(targetUp) < 0.001) {
-                if (Math.abs(normalizedForward[2]) < 0.9) {
-                    targetUp = vec3.fromValues(0, 0, 1);
-                }
-                else {
-                    targetUp = vec3.fromValues(0, 1, 0);
-                }
-                const dot2 = vec3.dot(targetUp, normalizedForward);
-                vec3.scaleAndAdd(targetUp, targetUp, normalizedForward, -dot2);
-                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, targetViewPlaneNormal);
+        vec3.cross(targetRight, targetUp, targetForward);
         vec3.normalize(targetRight, targetRight);
-        const targetMatrix = mat4.fromValues(targetRight[0], targetRight[1], targetRight[2], 0, targetUp[0], targetUp[1], targetUp[2], 0, targetViewPlaneNormal[0], targetViewPlaneNormal[1], targetViewPlaneNormal[2], 0, 0, 0, 0, 1);
+        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);
@@ -385,13 +401,21 @@ class OrientationControllerTool extends BaseTool {
         if (dotProduct > threshold) {
             return;
         }
-        const steps = 10;
         const duration = 150;
-        const stepDuration = duration / steps;
-        let currentStep = 0;
-        const animate = () => {
-            currentStep++;
-            const t = currentStep / steps;
+        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);
@@ -400,16 +424,21 @@ class OrientationControllerTool extends BaseTool {
             const interpolatedForward = interpolatedMatrix.slice(8, 11);
             const interpolatedUp = interpolatedMatrix.slice(4, 7);
             viewport.setCamera({
-                viewPlaneNormal: interpolatedForward,
-                viewUp: interpolatedUp,
+                viewPlaneNormal: isLastStep ? finalNormal : interpolatedForward,
+                viewUp: isLastStep ? finalUp : interpolatedUp,
             });
             viewport.resetCamera(ANIMATE_RESET_CAMERA_OPTIONS);
             viewport.render();
-            if (currentStep < steps) {
-                setTimeout(animate, stepDuration);
+            if (!isLastStep) {
+                const handle = requestAnimationFrame(animate);
+                this.animationFrameHandles.set(viewportId, handle);
+            }
+            else {
+                this.animationFrameHandles.delete(viewportId);
             }
         };
-        animate();
+        const handle = requestAnimationFrame(animate);
+        this.animationFrameHandles.set(viewportId, handle);
     }
 }
 export default OrientationControllerTool;

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

@@ -17,6 +17,7 @@ declare class VolumeCroppingTool extends BaseTool {
     originalClippingPlanes: ClippingPlane[];
     draggingSphereIndex: number | null;
     rotatePlanesOnDrag: boolean;
+    suppressPlaneRotationForCurrentDrag: boolean;
     cornerDragOffset: [number, number, number] | null;
     faceDragOffset: number | null;
     volumeDirectionVectors: {
@@ -50,6 +51,7 @@ declare class VolumeCroppingTool extends BaseTool {
     preMouseDownCallback: (evt: EventTypes.InteractionEventType) => boolean;
     setHandlesVisible(visible: boolean): void;
     getHandlesVisible(): any;
+    setHandleRadius(radius: number): void;
     getClippingPlanesVisible(): any;
     setClippingPlanesVisible(visible: boolean): void;
     getRotatePlanesOnDrag(): boolean;

package/dist/esm/tools/VolumeCroppingTool.js

@@ -11,6 +11,7 @@ import { getToolGroup } from '../store/ToolGroupManager';
 import { Events } from '../enums';
 import { PLANEINDEX, SPHEREINDEX, NUM_CLIPPING_PLANES, extractVolumeDirectionVectors, parseCornerKey, copyClippingPlanes, } from '../utilities/volumeCropping';
 import { addLine3DBetweenPoints, calculateAdaptiveSphereRadius, } from '../utilities/draw3D';
+import { isDragOwnedBy } from '../utilities/interactionDragCoordinator';
 class VolumeCroppingTool extends BaseTool {
     constructor(toolProps = {}, defaultToolProps = {
         configuration: {
@@ -41,6 +42,7 @@ class VolumeCroppingTool extends BaseTool {
         this.originalClippingPlanes = [];
         this.draggingSphereIndex = null;
         this.rotatePlanesOnDrag = false;
+        this.suppressPlaneRotationForCurrentDrag = false;
         this.cornerDragOffset = null;
         this.faceDragOffset = null;
         this.volumeDirectionVectors = null;
@@ -63,6 +65,7 @@ class VolumeCroppingTool extends BaseTool {
             const { element } = eventDetail;
             const enabledElement = getEnabledElement(element);
             const { viewport } = enabledElement;
+            this.suppressPlaneRotationForCurrentDrag = isDragOwnedBy(viewport.id, 'orientation-controller');
             const actorEntry = viewport.getDefaultActor();
             const actor = actorEntry.actor;
             const mapper = actor.getMapper();
@@ -135,6 +138,7 @@ class VolumeCroppingTool extends BaseTool {
                     this.draggingSphereIndex = null;
                     this.cornerDragOffset = null;
                     this.faceDragOffset = null;
+                    this.suppressPlaneRotationForCurrentDrag = false;
                     viewport.render();
                     this._hasResolutionChanged = false;
                 };
@@ -768,6 +772,23 @@ class VolumeCroppingTool extends BaseTool {
     getHandlesVisible() {
         return this.configuration.showHandles;
     }
+    setHandleRadius(radius) {
+        this.configuration.sphereRadius = radius;
+        this.sphereStates.forEach((state) => {
+            if (state?.sphereSource?.setRadius) {
+                state.sphereSource.setRadius(radius);
+                state.sphereSource.modified();
+            }
+        });
+        const viewportsInfo = this._getViewportsInfo();
+        const [viewport3D] = viewportsInfo;
+        if (!viewport3D) {
+            return;
+        }
+        const renderingEngine = getRenderingEngine(viewport3D.renderingEngineId);
+        const viewport = renderingEngine?.getViewport(viewport3D.viewportId);
+        viewport?.render();
+    }
     getClippingPlanesVisible() {
         return this.configuration.showClippingPlanes;
     }
@@ -803,7 +824,8 @@ class VolumeCroppingTool extends BaseTool {
         }
         else {
             const shiftKey = evt.detail.event?.shiftKey ?? false;
-            if (this.rotatePlanesOnDrag === true || shiftKey) {
+            if ((this.rotatePlanesOnDrag === true || shiftKey) &&
+                !this.suppressPlaneRotationForCurrentDrag) {
                 this._rotateClippingPlanes(evt);
                 return;
             }

package/dist/esm/utilities/interactionDragCoordinator.d.ts

@@ -0,0 +1,5 @@
+type DragOwner = 'orientation-controller';
+export declare function beginOwnedDrag(viewportId: string, owner: DragOwner): boolean;
+export declare function endOwnedDrag(viewportId: string, owner: DragOwner): void;
+export declare function isDragOwnedBy(viewportId: string, owner: DragOwner): boolean;
+export {};

package/dist/esm/utilities/interactionDragCoordinator.js

@@ -0,0 +1,16 @@
+const dragOwnerByViewportId = new Map();
+export function beginOwnedDrag(viewportId, owner) {
+    if (dragOwnerByViewportId.has(viewportId)) {
+        return false;
+    }
+    dragOwnerByViewportId.set(viewportId, owner);
+    return true;
+}
+export function endOwnedDrag(viewportId, owner) {
+    if (dragOwnerByViewportId.get(viewportId) === owner) {
+        dragOwnerByViewportId.delete(viewportId);
+    }
+}
+export function isDragOwnedBy(viewportId, owner) {
+    return dragOwnerByViewportId.get(viewportId) === owner;
+}

package/dist/esm/utilities/segmentation/utilsForWorker.js

@@ -12,6 +12,10 @@ export const triggerWorkerProgress = (workerType, progress) => {
 };
 export const getSegmentationDataForWorker = (segmentationId, segmentIndices) => {
     const segmentation = getSegmentation(segmentationId);
+    if (!segmentation?.representationData) {
+        console.debug('getSegmentationDataForWorker: segmentation missing or not ready', segmentationId);
+        return null;
+    }
     const { representationData } = segmentation;
     const { Labelmap } = representationData;
     if (!Labelmap) {

package/dist/esm/utilities/vtkjs/OrientationControllerWidget/index.d.ts

@@ -35,14 +35,16 @@ export interface MouseHandlersCallbacks {
 export declare class vtkOrientationControllerWidget {
     private actors;
     private pickers;
+    private overlayRenderers;
+    private renderWindows;
     private highlightedFace;
     private mouseHandlers;
     createActors(config: OrientationControllerConfig): vtkActor[];
     addActorsToViewport(viewportId: string, viewport: Types.IVolumeViewport, actors: vtkActor[]): void;
-    removeActorsFromViewport(viewportId: string, viewport: Types.IVolumeViewport): void;
+    removeActorsFromViewport(viewportId: string, _viewport: Types.IVolumeViewport): void;
     setupPicker(viewportId: string, actors: vtkActor[]): vtkCellPicker;
     pickAtPosition(evt: MouseEvent, viewportId: string, viewport: Types.IVolumeViewport, element: HTMLDivElement, actors: vtkActor[]): PickResult | null;
-    calculateMarkerPosition(viewport: Types.IVolumeViewport, position: PositionConfig['position']): [number, number, number] | null;
+    calculateMarkerPosition(viewport: Types.IVolumeViewport, position: PositionConfig['position'], screenSizePixels: number): [number, number, number] | null;
     positionActors(viewport: Types.IVolumeViewport, actors: vtkActor[], config: PositionConfig): boolean;
     highlightFace(actor: vtkActor, cellId: number, viewport: Types.IVolumeViewport, isMainFace?: boolean): void;
     clearHighlight(): void;
@@ -50,7 +52,7 @@ export declare class vtkOrientationControllerWidget {
         cleanup: () => void;
     };
     getActors(viewportId: string): vtkActor[] | undefined;
-    syncOverlayViewport(_viewportId: string, _viewport: Types.IVolumeViewport): void;
+    syncOverlayViewport(viewportId: string, viewport: Types.IVolumeViewport): void;
     getOrientationForFace(cellId: number): {
         viewPlaneNormal: number[];
         viewUp: number[];

package/dist/esm/utilities/vtkjs/OrientationControllerWidget/index.js

@@ -1,11 +1,19 @@
 import vtkCellPicker from '@kitware/vtk.js/Rendering/Core/CellPicker';
 import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkCellArray from '@kitware/vtk.js/Common/Core/CellArray';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkPoints from '@kitware/vtk.js/Common/Core/Points';
+import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 import { Enums } from '@cornerstonejs/core';
 import vtkAnnotatedRhombicuboctahedronActor from '../AnnotatedRhombicuboctahedronActor';
+import { beginOwnedDrag, endOwnedDrag } from '../../interactionDragCoordinator';
 export class vtkOrientationControllerWidget {
     constructor() {
         this.actors = new Map();
         this.pickers = new Map();
+        this.overlayRenderers = new Map();
+        this.renderWindows = new Map();
         this.highlightedFace = null;
         this.mouseHandlers = new Map();
     }
@@ -83,19 +91,48 @@ export class vtkOrientationControllerWidget {
         if (existingActors) {
             this.removeActorsFromViewport(viewportId, viewport);
         }
-        actors.forEach((actor, index) => {
-            const uid = `orientation-controller-${viewportId}-${index}`;
-            viewport.addActor({ actor, uid });
+        const renderWindow = viewport
+            .getRenderingEngine()
+            .getOffscreenMultiRenderWindow(viewport.id)
+            .getRenderWindow();
+        const mainRenderer = viewport
+            .getRenderingEngine()
+            ?.getRenderer(viewportId) ?? viewport.getRenderer();
+        const vtkMainRenderer = mainRenderer;
+        const overlayRenderer = vtkRenderer.newInstance();
+        overlayRenderer.setLayer(1);
+        overlayRenderer.setInteractive(false);
+        overlayRenderer.setPreserveColorBuffer(true);
+        overlayRenderer.setActiveCamera(vtkMainRenderer.getActiveCamera());
+        const vp = vtkMainRenderer.getViewport();
+        overlayRenderer.setViewport(...vp);
+        if (renderWindow.getNumberOfLayers() < 2) {
+            renderWindow.setNumberOfLayers(2);
+        }
+        renderWindow.addRenderer(overlayRenderer);
+        actors.forEach((actor) => {
+            overlayRenderer.addActor(actor);
         });
         this.actors.set(viewportId, actors);
+        this.overlayRenderers.set(viewportId, overlayRenderer);
+        this.renderWindows.set(viewportId, renderWindow);
     }
-    removeActorsFromViewport(viewportId, viewport) {
+    removeActorsFromViewport(viewportId, _viewport) {
         const actors = this.actors.get(viewportId);
-        if (actors) {
-            const uids = actors.map((_, index) => `orientation-controller-${viewportId}-${index}`);
-            viewport.removeActors(uids);
-            this.actors.delete(viewportId);
+        const overlayRenderer = this.overlayRenderers.get(viewportId);
+        const renderWindow = this.renderWindows.get(viewportId);
+        if (actors && overlayRenderer) {
+            actors.forEach((actor) => {
+                overlayRenderer.removeActor(actor);
+            });
+            if (renderWindow) {
+                renderWindow.removeRenderer(overlayRenderer);
+            }
+            overlayRenderer.delete();
         }
+        this.actors.delete(viewportId);
+        this.overlayRenderers.delete(viewportId);
+        this.renderWindows.delete(viewportId);
     }
     setupPicker(viewportId, actors) {
         const picker = vtkCellPicker.newInstance({ opacityThreshold: 0.0001 });
@@ -113,10 +150,11 @@ export class vtkOrientationControllerWidget {
         if (!picker) {
             return null;
         }
-        const mainRenderer = viewport
-            .getRenderingEngine()
-            ?.getRenderer(viewportId) ?? viewport.getRenderer();
-        const renderer = mainRenderer;
+        const renderer = this.overlayRenderers.get(viewportId) ??
+            viewport
+                .getRenderingEngine()
+                ?.getRenderer(viewportId) ??
+            viewport.getRenderer();
         if (!renderer) {
             return null;
         }
@@ -151,7 +189,7 @@ export class vtkOrientationControllerWidget {
         }
         return null;
     }
-    calculateMarkerPosition(viewport, position) {
+    calculateMarkerPosition(viewport, position, screenSizePixels) {
         const canvas = viewport.canvas;
         if (!canvas) {
             return null;
@@ -159,25 +197,30 @@ export class vtkOrientationControllerWidget {
         const devicePixelRatio = window.devicePixelRatio || 1;
         const canvasWidth = canvas.clientWidth || canvas.width / devicePixelRatio;
         const canvasHeight = canvas.clientHeight || canvas.height / devicePixelRatio;
-        const cornerOffset = viewport.type === Enums.ViewportType.VOLUME_3D ? 55 : 35;
+        const marginRatio = viewport.type === Enums.ViewportType.VOLUME_3D ? 1.3 : 1.1;
+        const marginPxRaw = marginRatio * screenSizePixels;
+        const halfPx = screenSizePixels * 0.5;
+        const maxMarginX = Math.max(0, (canvasWidth - screenSizePixels) / 2);
+        const maxMarginY = Math.max(0, (canvasHeight - screenSizePixels) / 2);
+        const marginPx = Math.min(marginPxRaw, maxMarginX, maxMarginY);
         let canvasX;
         let canvasY;
         switch (position) {
             case 'top-left':
-                canvasX = cornerOffset;
-                canvasY = cornerOffset;
+                canvasX = marginPx + halfPx;
+                canvasY = marginPx + halfPx;
                 break;
             case 'top-right':
-                canvasX = canvasWidth - cornerOffset;
-                canvasY = cornerOffset;
+                canvasX = canvasWidth - marginPx - halfPx;
+                canvasY = marginPx + halfPx;
                 break;
             case 'bottom-left':
-                canvasX = cornerOffset;
-                canvasY = canvasHeight - cornerOffset;
+                canvasX = marginPx + halfPx;
+                canvasY = canvasHeight - marginPx - halfPx;
                 break;
             default:
-                canvasX = canvasWidth - cornerOffset;
-                canvasY = canvasHeight - cornerOffset;
+                canvasX = canvasWidth - marginPx - halfPx;
+                canvasY = canvasHeight - marginPx - halfPx;
         }
         const canvasPos = [canvasX, canvasY];
         const worldPos = viewport.canvasToWorld(canvasPos);
@@ -207,7 +250,7 @@ export class vtkOrientationControllerWidget {
         const markerSize = screenSizePixels * worldUnitsPerPixel;
         actors.forEach((actor) => {
             actor.setScale(markerSize, markerSize, markerSize);
-            const worldPos = this.calculateMarkerPosition(viewport, config.position);
+            const worldPos = this.calculateMarkerPosition(viewport, config.position, screenSizePixels);
             if (!worldPos) {
                 console.warn('OrientationControllerWidget: Could not get world position');
                 return;
@@ -226,6 +269,172 @@ export class vtkOrientationControllerWidget {
         }
         this.clearHighlight();
         if (isMainFace) {
+            const textureCollection = actor.getTextures?.();
+            const textureCandidate = Array.isArray(textureCollection)
+                ? textureCollection[0]
+                : textureCollection?.getItem?.(0);
+            const texture = textureCandidate;
+            const imageData = texture?.getInputData?.();
+            const scalars = imageData?.getPointData().getScalars();
+            const pixels = scalars?.getData();
+            const dims = imageData?.getDimensions();
+            if (!imageData ||
+                !scalars ||
+                !pixels ||
+                !dims ||
+                cellId < 0 ||
+                cellId > 5) {
+                const mapper = actor.getMapper();
+                const polyData = mapper.getInputData();
+                if (!polyData?.getCellPoints) {
+                    return;
+                }
+                const { cellPointIds } = polyData.getCellPoints(cellId);
+                if (!cellPointIds || cellPointIds.length < 3) {
+                    return;
+                }
+                const src = polyData.getPoints().getData();
+                const coords = [];
+                Array.from(cellPointIds).forEach((pid) => {
+                    const o = pid * 3;
+                    coords.push(src[o], src[o + 1], src[o + 2]);
+                });
+                const points = vtkPoints.newInstance();
+                points.setData(new Float32Array(coords), 3);
+                const polys = vtkCellArray.newInstance({
+                    values: new Uint32Array([
+                        cellPointIds.length,
+                        ...Array.from(cellPointIds, (_, i) => i),
+                    ]),
+                });
+                const poly = vtkPolyData.newInstance();
+                poly.setPoints(points);
+                poly.setPolys(polys);
+                const faceMapper = vtkMapper.newInstance();
+                faceMapper.setInputData(poly);
+                const faceActor = vtkActor.newInstance();
+                faceActor.setMapper(faceMapper);
+                const [sx, sy, sz] = actor.getScale();
+                const [px, py, pz] = actor.getPosition();
+                const [ox, oy, oz] = actor.getOrientation();
+                faceActor.setScale(sx, sy, sz);
+                faceActor.setPosition(px, py, pz);
+                faceActor.setOrientation(ox, oy, oz);
+                faceActor.setPickable(false);
+                const p = faceActor.getProperty();
+                p.setLighting(false);
+                p.setAmbient(1);
+                p.setDiffuse(0);
+                p.setColor(1, 1, 1);
+                p.setOpacity(0.58);
+                this.overlayRenderers.get(viewport.id)?.addActor(faceActor);
+                this.highlightedFace = {
+                    actor,
+                    cellId,
+                    originalColor: [0, 0, 0, 0],
+                    viewport,
+                    isMainFace: true,
+                    mainFaceHighlightActor: faceActor,
+                };
+                viewport.render();
+                return;
+            }
+            const [imageWidth, imageHeight] = dims;
+            const tileWidth = Math.floor(imageWidth / 3);
+            const tileHeight = Math.floor(imageHeight / 2);
+            const tileCol = cellId % 3;
+            const tileRow = Math.floor(cellId / 3);
+            const x0 = tileCol * tileWidth;
+            const y0 = tileRow * tileHeight;
+            const tileBackup = new Uint8Array(tileWidth * tileHeight * 4);
+            let b = 0;
+            for (let y = 0; y < tileHeight; y++) {
+                for (let x = 0; x < tileWidth; x++) {
+                    const srcIndex = ((y0 + y) * imageWidth + (x0 + x)) * 4;
+                    tileBackup[b++] = pixels[srcIndex];
+                    tileBackup[b++] = pixels[srcIndex + 1];
+                    tileBackup[b++] = pixels[srcIndex + 2];
+                    tileBackup[b++] = pixels[srcIndex + 3];
+                }
+            }
+            const bgSampleIndices = [
+                ((y0 + 8) * imageWidth + (x0 + 8)) * 4,
+                ((y0 + 8) * imageWidth + (x0 + tileWidth - 9)) * 4,
+                ((y0 + tileHeight - 9) * imageWidth + (x0 + 8)) * 4,
+                ((y0 + tileHeight - 9) * imageWidth + (x0 + tileWidth - 9)) * 4,
+            ];
+            const bgColor = [0, 0, 0];
+            bgSampleIndices.forEach((idx) => {
+                bgColor[0] += pixels[idx];
+                bgColor[1] += pixels[idx + 1];
+                bgColor[2] += pixels[idx + 2];
+            });
+            bgColor[0] /= bgSampleIndices.length;
+            bgColor[1] /= bgSampleIndices.length;
+            bgColor[2] /= bgSampleIndices.length;
+            const glyphThreshold = 42;
+            const faceBrighten = 72;
+            const isGlyphPixel = (x, y) => {
+                if (x < 0 || x >= tileWidth || y < 0 || y >= tileHeight) {
+                    return false;
+                }
+                const idx = ((y0 + y) * imageWidth + (x0 + x)) * 4;
+                const dr = pixels[idx] - bgColor[0];
+                const dg = pixels[idx + 1] - bgColor[1];
+                const db = pixels[idx + 2] - bgColor[2];
+                return Math.sqrt(dr * dr + dg * dg + db * db) >= glyphThreshold;
+            };
+            const borderWidth = Math.max(4, Math.floor(tileWidth * 0.035));
+            for (let y = 0; y < tileHeight; y++) {
+                for (let x = 0; x < tileWidth; x++) {
+                    const onBorder = x < borderWidth ||
+                        x >= tileWidth - borderWidth ||
+                        y < borderWidth ||
+                        y >= tileHeight - borderWidth;
+                    if (onBorder || isGlyphPixel(x, y)) {
+                        continue;
+                    }
+                    const idx = ((y0 + y) * imageWidth + (x0 + x)) * 4;
+                    pixels[idx] = Math.min(255, pixels[idx] + faceBrighten);
+                    pixels[idx + 1] = Math.min(255, pixels[idx + 1] + faceBrighten);
+                    pixels[idx + 2] = Math.min(255, pixels[idx + 2] + faceBrighten);
+                }
+            }
+            for (let y = 0; y < tileHeight; y++) {
+                for (let x = 0; x < tileWidth; x++) {
+                    const onBorder = x < borderWidth ||
+                        x >= tileWidth - borderWidth ||
+                        y < borderWidth ||
+                        y >= tileHeight - borderWidth;
+                    if (!onBorder) {
+                        continue;
+                    }
+                    const idx = ((y0 + y) * imageWidth + (x0 + x)) * 4;
+                    pixels[idx] = 0;
+                    pixels[idx + 1] = 0;
+                    pixels[idx + 2] = 0;
+                }
+            }
+            scalars.modified();
+            imageData.modified();
+            texture.modified?.();
+            actor.modified?.();
+            this.highlightedFace = {
+                actor,
+                cellId,
+                originalColor: [0, 0, 0, 0],
+                viewport,
+                isMainFace: true,
+                mainFaceTextureData: tileBackup,
+                mainFaceTile: {
+                    x0,
+                    y0,
+                    width: tileWidth,
+                    height: tileHeight,
+                    imageWidth,
+                },
+            };
+            viewport.render();
             return;
         }
         const mapper = actor.getMapper();
@@ -266,9 +475,35 @@ export class vtkOrientationControllerWidget {
             return;
         }
         const { actor, cellId, originalColor, viewport, isMainFace } = this.highlightedFace;
-        if (isMainFace && this.highlightedFace.originalScale) {
-            const scale = this.highlightedFace.originalScale;
-            actor.setScale(scale[0], scale[1], scale[2]);
+        if (isMainFace) {
+            const backup = this.highlightedFace.mainFaceTextureData;
+            const tile = this.highlightedFace.mainFaceTile;
+            const textures = actor.getTextures?.();
+            const texture = textures?.[0];
+            const imageData = texture?.getInputData?.();
+            const scalars = imageData?.getPointData().getScalars();
+            const pixels = scalars?.getData();
+            if (backup && tile && scalars && imageData && pixels) {
+                let b = 0;
+                for (let y = 0; y < tile.height; y++) {
+                    for (let x = 0; x < tile.width; x++) {
+                        const dstIndex = ((tile.y0 + y) * tile.imageWidth + (tile.x0 + x)) * 4;
+                        pixels[dstIndex] = backup[b++];
+                        pixels[dstIndex + 1] = backup[b++];
+                        pixels[dstIndex + 2] = backup[b++];
+                        pixels[dstIndex + 3] = backup[b++];
+                    }
+                }
+                scalars.modified();
+                imageData.modified();
+                texture.modified?.();
+                actor.modified?.();
+            }
+            else if (this.highlightedFace.mainFaceHighlightActor) {
+                const overlayRenderer = this.overlayRenderers.get(viewport.id);
+                overlayRenderer?.removeActor(this.highlightedFace.mainFaceHighlightActor);
+                this.highlightedFace.mainFaceHighlightActor.delete();
+            }
             viewport.render();
             this.highlightedFace = null;
             return;
@@ -298,16 +533,25 @@ export class vtkOrientationControllerWidget {
     }
     setupMouseHandlers(viewportId, element, viewport, actors, callbacks) {
         let isMouseDown = false;
+        let didDrag = false;
+        let pendingPickResult = null;
+        let mouseDownCanvas = null;
+        const clickTolerancePx = 3;
         const hoverHandler = (evt) => {
             if (isMouseDown) {
+                if (mouseDownCanvas) {
+                    const dx = evt.clientX - mouseDownCanvas.x;
+                    const dy = evt.clientY - mouseDownCanvas.y;
+                    if (dx * dx + dy * dy > clickTolerancePx * clickTolerancePx) {
+                        didDrag = true;
+                    }
+                }
                 return;
             }
             const pickResult = this.pickAtPosition(evt, viewportId, viewport, element, actors);
             if (pickResult) {
                 const { pickedActor, cellId, actorIndex } = pickResult;
-                if (actorIndex !== 0) {
-                    this.highlightFace(pickedActor, cellId, viewport, false);
-                }
+                this.highlightFace(pickedActor, cellId, viewport, actorIndex === 0);
                 if (callbacks.onFaceHover) {
                     callbacks.onFaceHover(pickResult);
                 }
@@ -328,22 +572,33 @@ export class vtkOrientationControllerWidget {
                 return;
             }
             isMouseDown = true;
-            let globalCellId = pickResult.cellId;
-            if (pickResult.actorIndex === 1) {
-                globalCellId = pickResult.cellId + 6;
-            }
-            else if (pickResult.actorIndex === 2) {
-                globalCellId = pickResult.cellId + 18;
-            }
-            callbacks.onFacePicked({
-                ...pickResult,
-                cellId: globalCellId,
-            });
-            evt.preventDefault();
-            evt.stopPropagation();
+            didDrag = false;
+            pendingPickResult = pickResult;
+            mouseDownCanvas = { x: evt.clientX, y: evt.clientY };
+            beginOwnedDrag(viewportId, 'orientation-controller');
         };
-        const mouseUpHandler = () => {
+        const mouseUpHandler = (evt) => {
+            if (isMouseDown && !didDrag && pendingPickResult) {
+                let globalCellId = pendingPickResult.cellId;
+                if (pendingPickResult.actorIndex === 1) {
+                    globalCellId = pendingPickResult.cellId + 6;
+                }
+                else if (pendingPickResult.actorIndex === 2) {
+                    globalCellId = pendingPickResult.cellId + 18;
+                }
+                callbacks.onFacePicked({
+                    ...pendingPickResult,
+                    cellId: globalCellId,
+                });
+                evt.preventDefault();
+                evt.stopImmediatePropagation();
+                evt.stopPropagation();
+            }
             isMouseDown = false;
+            didDrag = false;
+            pendingPickResult = null;
+            mouseDownCanvas = null;
+            endOwnedDrag(viewportId, 'orientation-controller');
             this.clearHighlight();
         };
         const dblclickHandler = (evt) => {
@@ -353,17 +608,18 @@ export class vtkOrientationControllerWidget {
                 evt.stopImmediatePropagation();
             }
         };
-        element.addEventListener('mousemove', hoverHandler);
-        element.addEventListener('mousedown', clickHandler);
+        element.addEventListener('mousemove', hoverHandler, true);
+        element.addEventListener('mousedown', clickHandler, true);
         element.addEventListener('mouseup', mouseUpHandler);
         element.addEventListener('mouseleave', mouseUpHandler);
         element.addEventListener('dblclick', dblclickHandler, true);
         const cleanup = () => {
-            element.removeEventListener('mousemove', hoverHandler);
-            element.removeEventListener('mousedown', clickHandler);
+            element.removeEventListener('mousemove', hoverHandler, true);
+            element.removeEventListener('mousedown', clickHandler, true);
             element.removeEventListener('mouseup', mouseUpHandler);
             element.removeEventListener('mouseleave', mouseUpHandler);
             element.removeEventListener('dblclick', dblclickHandler, true);
+            endOwnedDrag(viewportId, 'orientation-controller');
         };
         this.mouseHandlers.set(viewportId, { cleanup });
         return { cleanup };
@@ -371,7 +627,19 @@ export class vtkOrientationControllerWidget {
     getActors(viewportId) {
         return this.actors.get(viewportId);
     }
-    syncOverlayViewport(_viewportId, _viewport) {
+    syncOverlayViewport(viewportId, viewport) {
+        const overlayRenderer = this.overlayRenderers.get(viewportId);
+        if (!overlayRenderer) {
+            return;
+        }
+        const mainRenderer = viewport
+            .getRenderingEngine()
+            ?.getRenderer(viewportId) ?? viewport.getRenderer();
+        if (!mainRenderer) {
+            return;
+        }
+        const mainVp = mainRenderer.getViewport();
+        overlayRenderer.setViewport(...mainVp);
     }
     getOrientationForFace(cellId) {
         const orientations = new Map();
@@ -472,12 +740,31 @@ export class vtkOrientationControllerWidget {
                 handler.cleanup();
                 this.mouseHandlers.delete(viewportId);
             }
+            const overlayRenderer = this.overlayRenderers.get(viewportId);
+            const renderWindow = this.renderWindows.get(viewportId);
+            if (overlayRenderer) {
+                if (renderWindow) {
+                    renderWindow.removeRenderer(overlayRenderer);
+                }
+                overlayRenderer.delete();
+            }
             this.actors.delete(viewportId);
             this.pickers.delete(viewportId);
+            this.overlayRenderers.delete(viewportId);
+            this.renderWindows.delete(viewportId);
         }
         else {
             this.mouseHandlers.forEach((handler) => handler.cleanup());
             this.mouseHandlers.clear();
+            this.overlayRenderers.forEach((overlayRenderer, vpId) => {
+                const renderWindow = this.renderWindows.get(vpId);
+                if (renderWindow) {
+                    renderWindow.removeRenderer(overlayRenderer);
+                }
+                overlayRenderer.delete();
+            });
+            this.overlayRenderers.clear();
+            this.renderWindows.clear();
             this.actors.clear();
             this.pickers.clear();
         }

package/dist/esm/utilities/vtkjs/RhombicuboctahedronSource/index.js

@@ -15,6 +15,7 @@ const EDGE_FACES = [
     11, 4, 5, 6, 22, 21, 4, 6, 7, 15, 14, 4, 7, 4, 17, 18, 4, 8, 11, 17, 16, 4, 9,
     20, 21, 10, 4, 13, 23, 22, 14, 4, 12, 19, 18, 15,
 ];
+const FACE_HALF_SIZE = 0.792;
 function vtkRhombicuboctahedronSource(publicAPI, model) {
     model.classHierarchy.push('vtkRhombicuboctahedronSource');
     publicAPI.requestData = (inData, outData) => {
@@ -30,32 +31,31 @@ function vtkRhombicuboctahedronSource(publicAPI, model) {
             }
         }
         const phi = 1.4;
-        const faceSize = 0.88;
         const vertices = [];
-        vertices.push(-faceSize, -faceSize, -phi);
-        vertices.push(faceSize, -faceSize, -phi);
-        vertices.push(faceSize, faceSize, -phi);
-        vertices.push(-faceSize, faceSize, -phi);
-        vertices.push(-faceSize, -faceSize, phi);
-        vertices.push(faceSize, -faceSize, phi);
-        vertices.push(faceSize, faceSize, phi);
-        vertices.push(-faceSize, faceSize, phi);
-        vertices.push(-faceSize, -phi, -faceSize);
-        vertices.push(faceSize, -phi, -faceSize);
-        vertices.push(faceSize, -phi, faceSize);
-        vertices.push(-faceSize, -phi, faceSize);
-        vertices.push(-faceSize, phi, -faceSize);
-        vertices.push(faceSize, phi, -faceSize);
-        vertices.push(faceSize, phi, faceSize);
-        vertices.push(-faceSize, phi, faceSize);
-        vertices.push(-phi, -faceSize, -faceSize);
-        vertices.push(-phi, -faceSize, faceSize);
-        vertices.push(-phi, faceSize, faceSize);
-        vertices.push(-phi, faceSize, -faceSize);
-        vertices.push(phi, -faceSize, -faceSize);
-        vertices.push(phi, -faceSize, faceSize);
-        vertices.push(phi, faceSize, faceSize);
-        vertices.push(phi, faceSize, -faceSize);
+        vertices.push(-FACE_HALF_SIZE, -FACE_HALF_SIZE, -phi);
+        vertices.push(FACE_HALF_SIZE, -FACE_HALF_SIZE, -phi);
+        vertices.push(FACE_HALF_SIZE, FACE_HALF_SIZE, -phi);
+        vertices.push(-FACE_HALF_SIZE, FACE_HALF_SIZE, -phi);
+        vertices.push(-FACE_HALF_SIZE, -FACE_HALF_SIZE, phi);
+        vertices.push(FACE_HALF_SIZE, -FACE_HALF_SIZE, phi);
+        vertices.push(FACE_HALF_SIZE, FACE_HALF_SIZE, phi);
+        vertices.push(-FACE_HALF_SIZE, FACE_HALF_SIZE, phi);
+        vertices.push(-FACE_HALF_SIZE, -phi, -FACE_HALF_SIZE);
+        vertices.push(FACE_HALF_SIZE, -phi, -FACE_HALF_SIZE);
+        vertices.push(FACE_HALF_SIZE, -phi, FACE_HALF_SIZE);
+        vertices.push(-FACE_HALF_SIZE, -phi, FACE_HALF_SIZE);
+        vertices.push(-FACE_HALF_SIZE, phi, -FACE_HALF_SIZE);
+        vertices.push(FACE_HALF_SIZE, phi, -FACE_HALF_SIZE);
+        vertices.push(FACE_HALF_SIZE, phi, FACE_HALF_SIZE);
+        vertices.push(-FACE_HALF_SIZE, phi, FACE_HALF_SIZE);
+        vertices.push(-phi, -FACE_HALF_SIZE, -FACE_HALF_SIZE);
+        vertices.push(-phi, -FACE_HALF_SIZE, FACE_HALF_SIZE);
+        vertices.push(-phi, FACE_HALF_SIZE, FACE_HALF_SIZE);
+        vertices.push(-phi, FACE_HALF_SIZE, -FACE_HALF_SIZE);
+        vertices.push(phi, -FACE_HALF_SIZE, -FACE_HALF_SIZE);
+        vertices.push(phi, -FACE_HALF_SIZE, FACE_HALF_SIZE);
+        vertices.push(phi, FACE_HALF_SIZE, FACE_HALF_SIZE);
+        vertices.push(phi, FACE_HALF_SIZE, -FACE_HALF_SIZE);
         let textureCoords = null;
         if (model.generate3DTextureCoordinates) {
             textureCoords = new Float64Array(24 * 3);

package/dist/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.21.6";
+export declare const version = "4.21.8";

package/dist/esm/version.js

@@ -1 +1 @@
-export const version = '4.21.6';
+export const version = '4.21.8';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "4.21.6",
+  "version": "4.21.8",
   "description": "Cornerstone3D Tools",
   "types": "./dist/esm/index.d.ts",
   "module": "./dist/esm/index.js",
@@ -105,11 +105,11 @@
     "lodash.get": "4.4.2"
   },
   "devDependencies": {
-    "@cornerstonejs/core": "4.21.6",
+    "@cornerstonejs/core": "4.21.8",
     "canvas": "3.2.0"
   },
   "peerDependencies": {
-    "@cornerstonejs/core": "4.21.6",
+    "@cornerstonejs/core": "4.21.8",
     "@kitware/vtk.js": "34.15.1",
     "@types/d3-array": "3.2.1",
     "@types/d3-interpolate": "3.0.4",
@@ -128,5 +128,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "f353e5f47d7535dd369b6a7e65ef12ef3f797153"
+  "gitHead": "65b9f66a24ac61dfa72640089ffde095dfff9d90"
 }