@cornerstonejs/core 0.12.1 → 0.13.2

package/dist/esm/RenderingEngine/StackViewport.js

@@ -1,15 +1,16 @@
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import vtkVolume from '@kitware/vtk.js/Rendering/Core/Volume';
-import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
 import _cloneDeep from 'lodash.clonedeep';
 import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
 import { vec2, vec3, mat4 } from 'gl-matrix';
+import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
+import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import * as metaData from '../metaData';
 import Viewport from './Viewport';
 import eventTarget from '../eventTarget';
 import Events from '../enums/Events';
-import { triggerEvent, isEqual, invertRgbTransferFunction, windowLevel as windowLevelUtil, imageIdToURI, } from '../utilities';
+import { triggerEvent, isEqual, invertRgbTransferFunction, windowLevel as windowLevelUtil, imageIdToURI, isImageActor, } from '../utilities';
 import drawImageSync from './helpers/cpuFallback/drawImageSync';
 import { getColormap } from './helpers/cpuFallback/colors/index';
 import { loadAndCacheImage } from '../imageLoader';
@@ -26,6 +27,7 @@ import { getShouldUseCPURendering } from '../init';
 import RequestType from '../enums/RequestType';
 import getScalingParameters from '../utilities/getScalingParameters';
 import cache from '../cache';
+import correctShift from './helpers/cpuFallback/rendering/correctShift';
 const EPSILON = 1;
 class StackViewport extends Viewport {
     constructor(props) {
@@ -58,18 +60,10 @@ class StackViewport extends Viewport {
             return imagePlaneModule.frameOfReferenceUID;
         };
         this.createActorMapper = (imageData) => {
-            const mapper = vtkVolumeMapper.newInstance();
+            const mapper = vtkImageMapper.newInstance();
             mapper.setInputData(imageData);
-            const actor = vtkVolume.newInstance();
+            const actor = vtkImageSlice.newInstance();
             actor.setMapper(mapper);
-            const [xSize, ySize, zSize] = imageData.getDimensions();
-            const [xSpacing, ySpacing, zSpacing] = imageData.getSpacing();
-            const vSize = vec3.length([
-                xSize * xSpacing,
-                ySize * ySpacing,
-                zSize * zSpacing,
-            ]);
-            mapper.setSampleDistance(vSize / mapper.getMaximumSamplesPerRay());
             if (imageData.getPointData().getNumberOfComponents() > 1) {
                 actor.getProperty().setIndependentComponents(false);
             }
@@ -122,17 +116,34 @@ class StackViewport extends Viewport {
         };
         this.canvasToWorldGPU = (canvasPos) => {
             const renderer = this.getRenderer();
+            const vtkCamera = this.getVtkActiveCamera();
+            const crange = vtkCamera.getClippingRange();
+            const distance = vtkCamera.getDistance();
+            vtkCamera.setClippingRange(distance, distance + 0.1);
             const offscreenMultiRenderWindow = this.getRenderingEngine().offscreenMultiRenderWindow;
             const openGLRenderWindow = offscreenMultiRenderWindow.getOpenGLRenderWindow();
             const size = openGLRenderWindow.getSize();
-            const displayCoord = [canvasPos[0] + this.sx, canvasPos[1] + this.sy];
+            const devicePixelRatio = window.devicePixelRatio || 1;
+            const canvasPosWithDPR = [
+                canvasPos[0] * devicePixelRatio,
+                canvasPos[1] * devicePixelRatio,
+            ];
+            const displayCoord = [
+                canvasPosWithDPR[0] + this.sx,
+                canvasPosWithDPR[1] + this.sy,
+            ];
             displayCoord[1] = size[1] - displayCoord[1];
             let worldCoord = openGLRenderWindow.displayToWorld(displayCoord[0], displayCoord[1], 0, renderer);
+            vtkCamera.setClippingRange(crange[0], crange[1]);
             worldCoord = this.applyFlipTx(worldCoord);
             return worldCoord;
         };
         this.worldToCanvasGPU = (worldPos) => {
             const renderer = this.getRenderer();
+            const vtkCamera = this.getVtkActiveCamera();
+            const crange = vtkCamera.getClippingRange();
+            const distance = vtkCamera.getDistance();
+            vtkCamera.setClippingRange(distance, distance + 0.1);
             const offscreenMultiRenderWindow = this.getRenderingEngine().offscreenMultiRenderWindow;
             const openGLRenderWindow = offscreenMultiRenderWindow.getOpenGLRenderWindow();
             const size = openGLRenderWindow.getSize();
@@ -142,7 +153,13 @@ class StackViewport extends Viewport {
                 displayCoord[0] - this.sx,
                 displayCoord[1] - this.sy,
             ];
-            return canvasCoord;
+            vtkCamera.setClippingRange(crange[0], crange[1]);
+            const devicePixelRatio = window.devicePixelRatio || 1;
+            const canvasCoordWithDPR = [
+                canvasCoord[0] / devicePixelRatio,
+                canvasCoord[1] / devicePixelRatio,
+            ];
+            return canvasCoordWithDPR;
         };
         this.getCurrentImageIdIndex = () => {
             return this.currentImageIdIndex;
@@ -239,7 +256,7 @@ class StackViewport extends Viewport {
             return;
         }
         const { actor } = defaultActor;
-        if (!actor.isA('vtkVolume')) {
+        if (!isImageActor(actor)) {
             return;
         }
         const vtkImageData = actor.getMapper().getInputData();
@@ -252,6 +269,7 @@ class StackViewport extends Viewport {
             imageData: actor.getMapper().getInputData(),
             metadata: { Modality: this.modality },
             scaling: this.scaling,
+            hasPixelSpacing: this.hasPixelSpacing,
         };
     }
     getImageDataCPU() {
@@ -283,6 +301,7 @@ class StackViewport extends Viewport {
                 },
             },
             scalarData: this.cpuImagePixelData,
+            hasPixelSpacing: this.hasPixelSpacing,
         };
     }
     buildMetadata(imageId) {
@@ -305,6 +324,7 @@ class StackViewport extends Viewport {
         }
         this.modality = modality;
         let imagePlaneModule = metaData.get('imagePlaneModule', imageId);
+        imagePlaneModule = this._getImagePlaneModule(imagePlaneModule);
         if (!this.useCPURendering) {
             imagePlaneModule = this.calibrateIfNecessary(imageId, imagePlaneModule);
         }
@@ -366,9 +386,9 @@ class StackViewport extends Viewport {
         };
         return imagePlaneModule;
     }
-    setProperties({ voiRange, invert, interpolationType, rotation, } = {}) {
+    setProperties({ voiRange, invert, interpolationType, rotation, } = {}, suppressEvents = false) {
         if (typeof voiRange !== 'undefined' || !this.voiApplied) {
-            this.setVOI(voiRange);
+            this.setVOI(voiRange, suppressEvents);
         }
         if (typeof invert !== 'undefined') {
             this.setInvertColor(invert);
@@ -417,12 +437,13 @@ class StackViewport extends Viewport {
         });
     }
     _setPropertiesFromCache() {
+        const suppressEvents = true;
         this.setProperties({
             voiRange: this.voiRange,
             rotation: this.rotation,
             interpolationType: this.interpolationType,
             invert: this.invert,
-        });
+        }, suppressEvents);
     }
     getCameraCPU() {
         const { metadata, viewport } = this._cpuFallbackEnabledElement;
@@ -433,45 +454,69 @@ class StackViewport extends Viewport {
             const rotationMatrix = mat4.fromRotation(mat4.create(), (this.rotation * Math.PI) / 180, viewPlaneNormal);
             viewUp = vec3.transformMat4(vec3.create(), viewUp, rotationMatrix);
         }
+        const canvasCenter = [
+            this.element.clientWidth / 2,
+            this.element.clientHeight / 2,
+        ];
+        const canvasCenterWorld = this.canvasToWorld(canvasCenter);
+        const topLeftWorld = this.canvasToWorld([0, 0]);
+        const bottomLeftWorld = this.canvasToWorld([0, this.element.clientHeight]);
+        const parallelScale = vec3.distance(topLeftWorld, bottomLeftWorld) / 2;
         return {
             parallelProjection: true,
-            focalPoint: [0, 0, 0],
+            focalPoint: canvasCenterWorld,
             position: [0, 0, 0],
-            parallelScale: viewport.scale,
+            parallelScale,
+            scale: viewport.scale,
             viewPlaneNormal: [
                 viewPlaneNormal[0],
                 viewPlaneNormal[1],
                 viewPlaneNormal[2],
             ],
             viewUp: [viewUp[0], viewUp[1], viewUp[2]],
+            flipHorizontal: this.flipHorizontal,
+            flipVertical: this.flipVertical,
         };
     }
     setCameraCPU(cameraInterface) {
-        const { viewport } = this._cpuFallbackEnabledElement;
+        const { viewport, image } = this._cpuFallbackEnabledElement;
         const previousCamera = this.getCameraCPU();
-        const { focalPoint, viewUp, parallelScale, flipHorizontal, flipVertical } = cameraInterface;
+        const { focalPoint, viewUp, parallelScale, scale, flipHorizontal, flipVertical, } = cameraInterface;
+        const { clientHeight } = this.element;
         if (focalPoint) {
-            const focalPointCanvas = this.worldToCanvasCPU(cameraInterface.focalPoint);
-            const previousFocalPointCanvas = this.worldToCanvasCPU(previousCamera.focalPoint);
-            const deltaCanvas = vec2.create();
-            vec2.subtract(deltaCanvas, vec2.fromValues(previousFocalPointCanvas[0], previousFocalPointCanvas[1]), vec2.fromValues(focalPointCanvas[0], focalPointCanvas[1]));
-            viewport.translation.x += deltaCanvas[0] / previousCamera.parallelScale;
-            viewport.translation.y += deltaCanvas[1] / previousCamera.parallelScale;
-        }
-        if (parallelScale && previousCamera.parallelScale !== parallelScale) {
-            const diff = previousCamera.parallelScale - parallelScale;
-            viewport.scale += diff;
-        }
-        if (flipHorizontal || flipVertical) {
+            const focalPointCanvas = this.worldToCanvasCPU(focalPoint);
+            const focalPointPixel = canvasToPixel(this._cpuFallbackEnabledElement, focalPointCanvas);
+            const prevFocalPointCanvas = this.worldToCanvasCPU(previousCamera.focalPoint);
+            const prevFocalPointPixel = canvasToPixel(this._cpuFallbackEnabledElement, prevFocalPointCanvas);
+            const deltaPixel = vec2.create();
+            vec2.subtract(deltaPixel, vec2.fromValues(focalPointPixel[0], focalPointPixel[1]), vec2.fromValues(prevFocalPointPixel[0], prevFocalPointPixel[1]));
+            const shift = correctShift({ x: deltaPixel[0], y: deltaPixel[1] }, viewport);
+            viewport.translation.x -= shift.x;
+            viewport.translation.y -= shift.y;
+        }
+        if (parallelScale) {
+            const { rowPixelSpacing } = image;
+            const scale = (clientHeight * rowPixelSpacing * 0.5) / parallelScale;
+            viewport.scale = scale;
+            viewport.parallelScale = parallelScale;
+        }
+        if (scale) {
+            const { rowPixelSpacing } = image;
+            viewport.scale = scale;
+            viewport.parallelScale = (clientHeight * rowPixelSpacing * 0.5) / scale;
+        }
+        if (flipHorizontal !== undefined || flipVertical !== undefined) {
             this.setFlipCPU({ flipHorizontal, flipVertical });
         }
+        this._cpuFallbackEnabledElement.transform = calculateTransform(this._cpuFallbackEnabledElement);
         const updatedCamera = {
             ...previousCamera,
             focalPoint,
             viewUp,
-            parallelScale,
             flipHorizontal,
             flipVertical,
+            parallelScale: viewport.parallelScale,
+            scale: viewport.scale,
         };
         const eventDetail = {
             previousCamera,
@@ -490,12 +535,12 @@ class StackViewport extends Viewport {
         viewport.vflip = flipVertical;
         this.flipVertical = viewport.vflip;
     }
-    setVOI(voiRange) {
+    setVOI(voiRange, suppressEvents) {
         if (this.useCPURendering) {
-            this.setVOICPU(voiRange);
+            this.setVOICPU(voiRange, suppressEvents);
             return;
         }
-        this.setVOIGPU(voiRange);
+        this.setVOIGPU(voiRange, suppressEvents);
     }
     setRotation(rotationCache, rotation) {
         const previousCamera = this.getCamera();
@@ -548,7 +593,7 @@ class StackViewport extends Viewport {
             return;
         }
         const { actor } = defaultActor;
-        if (!actor.isA('vtkVolume')) {
+        if (!isImageActor(actor)) {
             return;
         }
         const volumeProperty = actor.getProperty();
@@ -579,17 +624,27 @@ class StackViewport extends Viewport {
             return;
         }
         const { actor } = defaultActor;
-        if (!actor.isA('vtkVolume')) {
+        if (!isImageActor(actor)) {
             return;
         }
-        const volumeActor = actor;
-        const tfunc = volumeActor.getProperty().getRGBTransferFunction(0);
-        if ((!this.invert && invert) || (this.invert && !invert)) {
-            invertRgbTransferFunction(tfunc);
+        if (actor.isA('vtkVolume')) {
+            const volumeActor = actor;
+            const tfunc = volumeActor.getProperty().getRGBTransferFunction(0);
+            if ((!this.invert && invert) || (this.invert && !invert)) {
+                invertRgbTransferFunction(tfunc);
+            }
+            this.invert = invert;
+        }
+        else if (actor.isA('vtkImageSlice')) {
+            const imageSliceActor = actor;
+            const tfunc = imageSliceActor.getProperty().getRGBTransferFunction(0);
+            if ((!this.invert && invert) || (this.invert && !invert)) {
+                invertRgbTransferFunction(tfunc);
+            }
+            this.invert = invert;
         }
-        this.invert = invert;
     }
-    setVOICPU(voiRange) {
+    setVOICPU(voiRange, suppressEvents) {
         const { viewport, image } = this._cpuFallbackEnabledElement;
         if (!viewport || !image) {
             return;
@@ -623,36 +678,38 @@ class StackViewport extends Viewport {
             viewportId: this.id,
             range: voiRange,
         };
-        triggerEvent(this.element, Events.VOI_MODIFIED, eventDetail);
+        if (!suppressEvents) {
+            triggerEvent(this.element, Events.VOI_MODIFIED, eventDetail);
+        }
     }
-    setVOIGPU(voiRange) {
+    setVOIGPU(voiRange, suppressEvents) {
         const defaultActor = this.getDefaultActor();
         if (!defaultActor) {
             return;
         }
         const { actor } = defaultActor;
-        if (!actor.isA('vtkVolume')) {
+        if (!isImageActor(actor)) {
             return;
         }
-        const volumeActor = actor;
-        const tfunc = volumeActor.getProperty().getRGBTransferFunction(0);
-        if (typeof voiRange === 'undefined') {
-            const imageData = volumeActor.getMapper().getInputData();
+        const imageActor = actor;
+        let voiRangeToUse = voiRange;
+        if (typeof voiRangeToUse === 'undefined') {
+            const imageData = imageActor.getMapper().getInputData();
             const range = imageData.getPointData().getScalars().getRange();
-            tfunc.setRange(range[0], range[1]);
-            voiRange = { lower: range[0], upper: range[1] };
-        }
-        else {
-            const { lower, upper } = voiRange;
-            tfunc.setRange(lower, upper);
+            voiRangeToUse = { lower: range[0], upper: range[1] };
         }
+        const { windowWidth, windowCenter } = windowLevelUtil.toWindowLevel(voiRangeToUse.lower, voiRangeToUse.upper);
+        imageActor.getProperty().setColorWindow(windowWidth);
+        imageActor.getProperty().setColorLevel(windowCenter);
         this.voiApplied = true;
-        this.voiRange = voiRange;
+        this.voiRange = voiRangeToUse;
         const eventDetail = {
             viewportId: this.id,
-            range: voiRange,
+            range: voiRangeToUse,
         };
-        triggerEvent(this.element, Events.VOI_MODIFIED, eventDetail);
+        if (!suppressEvents) {
+            triggerEvent(this.element, Events.VOI_MODIFIED, eventDetail);
+        }
     }
     _addScalingToViewport(imageIdScalingFactor) {
         if (!this.scaling.PET) {
@@ -784,8 +841,8 @@ class StackViewport extends Viewport {
         if (!imageData) {
             return false;
         }
-        const [xSpacing, ySpacing, zSpacing] = imageData.getSpacing();
-        const [xVoxels, yVoxels, zVoxels] = imageData.getDimensions();
+        const [xSpacing, ySpacing] = imageData.getSpacing();
+        const [xVoxels, yVoxels] = imageData.getDimensions();
         const imagePlaneModule = metaData.get('imagePlaneModule', image.imageId);
         const direction = imageData.getDirection();
         const rowCosines = direction.slice(0, 3);
@@ -988,9 +1045,6 @@ class StackViewport extends Viewport {
         const previousCameraProps = _cloneDeep(this.getCamera());
         if (sameImageData && !this.stackInvalidated) {
             this._updateVTKImageDataFromCornerstoneImage(image);
-            const direction = this._imageData.getDirection();
-            const { viewPlaneNormal, viewUp } = this._getCameraOrientation(direction);
-            this.setCameraNoEvent({ viewUp, viewPlaneNormal });
             const cameraProps = this.getCamera();
             this.panCache[0] = this.cameraPosOnRender[0] - cameraProps.position[0];
             this.panCache[1] = this.cameraPosOnRender[1] - cameraProps.position[1];
@@ -1034,6 +1088,18 @@ class StackViewport extends Viewport {
         }
         this.initialVOIRange = voiRange;
         this.setProperties({ voiRange });
+        const cfun = vtkColorTransferFunction.newInstance();
+        let lower = 0;
+        let upper = 1024;
+        if (voiRange &&
+            voiRange.lower !== undefined &&
+            voiRange.upper !== undefined) {
+            lower = voiRange.lower;
+            upper = voiRange.upper;
+        }
+        cfun.addRGBPoint(lower, 0.0, 0.0, 0.0);
+        cfun.addRGBPoint(upper, 1.0, 1.0, 1.0);
+        actor.getProperty().setRGBTransferFunction(0, cfun);
         const { position } = this.getCamera();
         this.cameraPosOnRender = position;
         this.stackInvalidated = false;
@@ -1046,6 +1112,7 @@ class StackViewport extends Viewport {
             throw new Error(`ImageIdIndex provided ${imageIdIndex} is invalid, the stack only has ${this.imageIds.length} elements`);
         }
         this.currentImageIdIndex = imageIdIndex;
+        this.hasPixelSpacing = true;
         const imageId = await this._loadAndDisplayImage(this.imageIds[imageIdIndex], imageIdIndex);
         return imageId;
     }
@@ -1066,6 +1133,14 @@ class StackViewport extends Viewport {
             return;
         }
         resetCamera(this._cpuFallbackEnabledElement, resetPan, resetZoom);
+        const { scale } = this._cpuFallbackEnabledElement.viewport;
+        const { clientWidth, clientHeight } = this.element;
+        const center = [clientWidth / 2, clientHeight / 2];
+        const centerWorld = this.canvasToWorldCPU(center);
+        this.setCameraCPU({
+            focalPoint: centerWorld,
+            scale,
+        });
     }
     resetCameraGPU(resetPan, resetZoom) {
         return super.resetCamera(resetPan, resetZoom);
@@ -1263,6 +1338,34 @@ class StackViewport extends Viewport {
     unsetColormapGPU() {
         throw new Error('unsetColormapGPU not implemented.');
     }
+    _getImagePlaneModule(imagePlaneModule) {
+        const newImagePlaneModule = {
+            ...imagePlaneModule,
+        };
+        if (!newImagePlaneModule.columnPixelSpacing) {
+            newImagePlaneModule.columnPixelSpacing = 1;
+            this.hasPixelSpacing = false;
+        }
+        if (!newImagePlaneModule.rowPixelSpacing) {
+            newImagePlaneModule.rowPixelSpacing = 1;
+            this.hasPixelSpacing = false;
+        }
+        if (!newImagePlaneModule.columnCosines) {
+            newImagePlaneModule.columnCosines = [0, 1, 0];
+        }
+        if (!newImagePlaneModule.rowCosines) {
+            newImagePlaneModule.rowCosines = [1, 0, 0];
+        }
+        if (!newImagePlaneModule.imagePositionPatient) {
+            newImagePlaneModule.imagePositionPatient = [0, 0, 0];
+        }
+        if (!newImagePlaneModule.imageOrientationPatient) {
+            newImagePlaneModule.imageOrientationPatient = new Float32Array([
+                1, 0, 0, 0, 1, 0,
+            ]);
+        }
+        return newImagePlaneModule;
+    }
 }
 export default StackViewport;
 //# sourceMappingURL=StackViewport.js.map