@ohif/app 3.13.0-beta.64 → 3.13.0-beta.66

package/dist/{9567.bundle.be350438bed4e656f278.js → 9567.bundle.ff782480a4c66e306027.js}

@@ -2571,6 +2571,35 @@ function getVOIMultipliers(viewport, volumeId, options) {
 
 
 
+/***/ },
+
+/***/ 51970
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Js: () => (/* binding */ beginOwnedDrag),
+/* harmony export */   Xt: () => (/* binding */ endOwnedDrag),
+/* harmony export */   lq: () => (/* binding */ isDragOwnedBy)
+/* harmony export */ });
+const dragOwnerByViewportId = new Map();
+function beginOwnedDrag(viewportId, owner) {
+    if (dragOwnerByViewportId.has(viewportId)) {
+        return false;
+    }
+    dragOwnerByViewportId.set(viewportId, owner);
+    return true;
+}
+function endOwnedDrag(viewportId, owner) {
+    if (dragOwnerByViewportId.get(viewportId) === owner) {
+        dragOwnerByViewportId.delete(viewportId);
+    }
+}
+function isDragOwnedBy(viewportId, owner) {
+    return dragOwnerByViewportId.get(viewportId) === owner;
+}
+
+
 /***/ },
 
 /***/ 38776
@@ -5674,22 +5703,26 @@ var vtkCellPicker$1 = {
 
 // EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Rendering/Core/Actor.js
 var Actor = __webpack_require__(44404);
+// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/Core/CellArray.js
+var CellArray = __webpack_require__(32461);
+// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Rendering/Core/Mapper.js + 1 modules
+var Mapper = __webpack_require__(81418);
+// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/Core/Points.js
+var Points = __webpack_require__(74973);
+// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/DataModel/PolyData.js + 7 modules
+var PolyData = __webpack_require__(27480);
+// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Rendering/Core/Renderer.js + 2 modules
+var Renderer = __webpack_require__(55524);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 1 modules
 var dist_esm = __webpack_require__(15327);
 // EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/macros.js
 var macros = __webpack_require__(28241);
-// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Rendering/Core/Mapper.js + 1 modules
-var Mapper = __webpack_require__(81418);
 // EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/Core/DataArray.js
 var DataArray = __webpack_require__(445);
 // EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Rendering/Core/Texture.js
 var Texture = __webpack_require__(41090);
 // EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/Core/ImageHelper.js
 var ImageHelper = __webpack_require__(74821);
-// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/Core/CellArray.js
-var CellArray = __webpack_require__(32461);
-// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/DataModel/PolyData.js + 7 modules
-var PolyData = __webpack_require__(27480);
 ;// ../../../node_modules/@cornerstonejs/tools/dist/esm/utilities/vtkjs/RhombicuboctahedronSource/index.js
 
 
@@ -5708,6 +5741,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) => {
@@ -5723,32 +5757,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);
@@ -6081,7 +6114,7 @@ function vtkAnnotatedRhombicuboctahedronActor(publicAPI, model) {
             }
         }
         if (model.showEdgeFaces !== false) {
-            const edgeColor = [200, 200, 200];
+            const edgeColor = model.edgeColor ?? [200, 200, 200];
             const edgeData = createEdgeFacesMesh(sourceScale, edgeColor);
             if (edgeData) {
                 const edgeFacesActor = Actor/* default.newInstance */.Ay.newInstance();
@@ -6102,7 +6135,7 @@ function vtkAnnotatedRhombicuboctahedronActor(publicAPI, model) {
             }
         }
         if (model.showCornerFaces !== false) {
-            const cornerColor = [150, 150, 150];
+            const cornerColor = model.cornerColor ?? [150, 150, 150];
             const cornerData = createCornerFacesMesh(sourceScale, cornerColor);
             if (cornerData) {
                 const cornerFacesActor = Actor/* default.newInstance */.Ay.newInstance();
@@ -6229,17 +6262,30 @@ function AnnotatedRhombicuboctahedronActor_extend(publicAPI, model, initialValue
 const AnnotatedRhombicuboctahedronActor_newInstance = macros/* default.newInstance */.Ay.newInstance(AnnotatedRhombicuboctahedronActor_extend, 'vtkAnnotatedRhombicuboctahedronActor');
 /* harmony default export */ const AnnotatedRhombicuboctahedronActor = ({ newInstance: AnnotatedRhombicuboctahedronActor_newInstance, extend: AnnotatedRhombicuboctahedronActor_extend });
 
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/utilities/interactionDragCoordinator.js
+var interactionDragCoordinator = __webpack_require__(51970);
 ;// ../../../node_modules/@cornerstonejs/tools/dist/esm/utilities/vtkjs/OrientationControllerWidget/index.js
 
 
 
 
+
+
+
+
+
+
 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();
+        this._highlightColor = [255, 255, 255];
+        this._restingAmbient = 1.0;
+        this._hoverAmbient = 1.0;
     }
     createActors(config) {
         const rgbToHex = (rgb) => {
@@ -6253,7 +6299,10 @@ class vtkOrientationControllerWidget {
         const rgbToHexColor = (rgb) => {
             return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
         };
-        const actorFactory = AnnotatedRhombicuboctahedronActor.newInstance();
+        const actorFactory = AnnotatedRhombicuboctahedronActor.newInstance({
+            edgeColor: config.edgeColor ?? [200, 200, 200],
+            cornerColor: config.cornerColor ?? [150, 150, 150],
+        });
         const defaultStyle = {
             fontStyle: 'bold',
             fontFamily: 'Arial',
@@ -6303,9 +6352,13 @@ class vtkOrientationControllerWidget {
         actorFactory.setShowEdgeFaces(config.showEdgeFaces);
         actorFactory.setShowCornerFaces(config.showCornerFaces);
         const actors = actorFactory.getActors();
+        this._highlightColor = config.highlightColor ?? [255, 255, 255];
+        this._restingAmbient = config.restingAmbient ?? 1.0;
+        this._hoverAmbient = config.hoverAmbient ?? 1.0;
         actors.forEach((actor) => {
             const property = actor.getProperty();
             property.setOpacity(config.opacity);
+            property.setAmbient(this._restingAmbient);
             actor.setVisibility(true);
         });
         return actors;
@@ -6315,19 +6368,48 @@ 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 = Renderer/* default.newInstance */.Ay.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$1.newInstance({ opacityThreshold: 0.0001 });
@@ -6345,10 +6427,11 @@ 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;
         }
@@ -6383,7 +6466,7 @@ class vtkOrientationControllerWidget {
         }
         return null;
     }
-    calculateMarkerPosition(viewport, position) {
+    calculateMarkerPosition(viewport, position, screenSizePixels) {
         const canvas = viewport.canvas;
         if (!canvas) {
             return null;
@@ -6391,25 +6474,30 @@ 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 === dist_esm.Enums.ViewportType.VOLUME_3D ? 55 : 35;
+        const marginRatio = viewport.type === dist_esm.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);
@@ -6439,7 +6527,7 @@ 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;
@@ -6458,6 +6546,172 @@ 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 = Points/* default.newInstance */.Ay.newInstance();
+                points.setData(new Float32Array(coords), 3);
+                const polys = CellArray/* default.newInstance */.Ay.newInstance({
+                    values: new Uint32Array([
+                        cellPointIds.length,
+                        ...Array.from(cellPointIds, (_, i) => i),
+                    ]),
+                });
+                const poly = PolyData/* default.newInstance */.Ay.newInstance();
+                poly.setPoints(points);
+                poly.setPolys(polys);
+                const faceMapper = Mapper/* default.newInstance */.Ay.newInstance();
+                faceMapper.setInputData(poly);
+                const faceActor = Actor/* default.newInstance */.Ay.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();
@@ -6485,9 +6739,10 @@ class vtkOrientationControllerWidget {
             viewport,
             isMainFace: false,
         };
-        colorArray[offset] = 255;
-        colorArray[offset + 1] = 255;
-        colorArray[offset + 2] = 255;
+        const hc = this._highlightColor;
+        colorArray[offset] = hc[0];
+        colorArray[offset + 1] = hc[1];
+        colorArray[offset + 2] = hc[2];
         colorArray[offset + 3] = 255;
         colors.modified();
         inputData.modified();
@@ -6498,9 +6753,35 @@ 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;
@@ -6530,21 +6811,46 @@ class vtkOrientationControllerWidget {
     }
     setupMouseHandlers(viewportId, element, viewport, actors, callbacks) {
         let isMouseDown = false;
+        let isCubeHovered = false;
+        const setAmbient = (full) => {
+            actors.forEach((actor) => {
+                const property = actor.getProperty();
+                property.setAmbient(full ? this._hoverAmbient : this._restingAmbient);
+            });
+            viewport.render();
+        };
+        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);
+                if (!isCubeHovered) {
+                    isCubeHovered = true;
+                    setAmbient(true);
                 }
+                const { pickedActor, cellId, actorIndex } = pickResult;
+                this.highlightFace(pickedActor, cellId, viewport, actorIndex === 0);
                 if (callbacks.onFaceHover) {
                     callbacks.onFaceHover(pickResult);
                 }
             }
             else {
+                if (isCubeHovered) {
+                    isCubeHovered = false;
+                    setAmbient(false);
+                }
                 this.clearHighlight();
                 if (callbacks.onFaceHover) {
                     callbacks.onFaceHover(null);
@@ -6560,22 +6866,37 @@ 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 };
+            (0,interactionDragCoordinator/* beginOwnedDrag */.Js)(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;
+            if (isCubeHovered) {
+                isCubeHovered = false;
+                setAmbient(false);
+            }
+            didDrag = false;
+            pendingPickResult = null;
+            mouseDownCanvas = null;
+            (0,interactionDragCoordinator/* endOwnedDrag */.Xt)(viewportId, 'orientation-controller');
             this.clearHighlight();
         };
         const dblclickHandler = (evt) => {
@@ -6585,17 +6906,18 @@ 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);
+            (0,interactionDragCoordinator/* endOwnedDrag */.Xt)(viewportId, 'orientation-controller');
         };
         this.mouseHandlers.set(viewportId, { cleanup });
         return { cleanup };
@@ -6603,7 +6925,19 @@ 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();
@@ -6704,12 +7038,31 @@ 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();
         }