@cornerstonejs/core 1.69.0 → 1.70.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "1.69.0",
+  "version": "1.70.1",
   "description": "",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -47,5 +47,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "ac8dc9249f6c25fc8de8c1f716af606a9301dd54"
+  "gitHead": "374a9dd49081ea9f87c8af202ca07e2e10a63170"
 }

package/src/RenderingEngine/BaseVolumeViewport.ts

@@ -3,7 +3,7 @@ import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransf
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
 
-import { vec3 } from 'gl-matrix';
+import { vec2, vec3 } from 'gl-matrix';
 
 import cache from '../cache';
 import {
@@ -399,7 +399,7 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
     return newRGBTransferFunction;
   }
 
-  private setInterpolationType(
+  protected setInterpolationType(
     interpolationType: InterpolationType,
     volumeId?: string
   ) {
@@ -491,10 +491,34 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
     this.viewportProperties.voiRange = voiRangeToUse;
   }
 
-  private setRotation(rotation: number): void {
+  protected setRotation = (rotation: number) => {
+    const panFit = this.getPan(this.fitToCanvasCamera);
+    const pan = this.getPan();
     const previousCamera = this.getCamera();
+    const panSub = vec2.sub([0, 0], panFit, pan) as Point2;
+    this.setPan(panSub, false);
+    const { flipVertical } = this.getCamera();
 
+    // Moving back to zero rotation, for new scrolled slice rotation is 0 after camera reset
+    const initialViewUp = flipVertical
+      ? vec3.negate([0, 0, 0], this.initialViewUp)
+      : this.initialViewUp;
+
+    this.setCameraNoEvent({
+      viewUp: initialViewUp as Point3,
+    });
+
+    // rotating camera to the new value
     this.rotateCamera(rotation);
+    const afterPan = this.getPan();
+    const afterPanFit = this.getPan(this.fitToCanvasCamera);
+    const newCenter = vec2.sub([0, 0], afterPan, afterPanFit);
+    const newOffset = vec2.add([0, 0], panFit, newCenter) as Point2;
+    this.setPan(newOffset, false);
+
+    if (this._suppressCameraModifiedEvents) {
+      return;
+    }
 
     // New camera after rotation
     const camera = this.getCamera();
@@ -510,7 +534,7 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
 
     triggerEvent(this.element, Events.CAMERA_MODIFIED, eventDetail);
     this.viewportProperties.rotation = rotation;
-  }
+  };
 
   private rotateCamera(rotation: number): void {
     const rotationToApply = rotation - this.getRotation();
@@ -1148,7 +1172,7 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
 
     // The initial view up vector without any rotation, but incorporating vertical flip.
     const initialViewUp = flipVertical
-      ? vec3.negate(vec3.create(), this.initialViewUp)
+      ? vec3.negate([0, 0, 0], this.initialViewUp)
       : this.initialViewUp;
 
     if (!initialViewUp) {
@@ -1165,7 +1189,7 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
     // viewPlaneNormal.
 
     const initialToCurrentViewUpCross = vec3.cross(
-      vec3.create(),
+      [0, 0, 0],
       initialViewUp,
       currentViewUp
     );

package/src/RenderingEngine/CanvasActor/index.ts

@@ -209,7 +209,8 @@ export default class CanvasActor implements ICanvasActor {
     const imageData = this.viewport.getImageData();
     Object.assign(this.image, {
       worldToIndex: (worldPos) => imageData.imageData.worldToIndex(worldPos),
-      indexToWorld: (index) => imageData.imageData.indexToWorld(index),
+      indexToWorld: (index, destPoint) =>
+        imageData.imageData.indexToWorld(index, destPoint),
       getDimensions: () => imageData.dimensions,
       getScalarData: () => this.derivedImage?.getPixelData(),
       getDirection: () => imageData.direction,

package/src/RenderingEngine/RenderingEngine.ts

@@ -48,6 +48,7 @@ const VIEWPORT_MIN_SIZE = 2;
  * to leverage the power of vtk.js whilst only using one WebGL context for the processing, and allowing
  * us to share texture memory across on-screen viewports that show the same data.
  *
+ *
  * Instantiating a rendering engine:
  * ```js
  * const renderingEngine = new RenderingEngine('pet-ct-rendering-engine');
@@ -74,7 +75,7 @@ const VIEWPORT_MIN_SIZE = 2;
 class RenderingEngine implements IRenderingEngine {
   /** Unique identifier for renderingEngine */
   readonly id: string;
-  /** A flag which tells if the renderingEngine has been destroyed */
+  /** A flag which tells if the renderingEngine has been destroyed or not */
   public hasBeenDestroyed: boolean;
   public offscreenMultiRenderWindow: any;
   readonly offScreenCanvasContainer: any; // WebGL
@@ -154,9 +155,7 @@ class RenderingEngine implements IRenderingEngine {
 
     // 1.a) If there is a found viewport, we remove the viewport and create a new viewport
     if (viewport) {
-      console.log('Viewport already exists, disabling it first');
       this.disableElement(viewportId);
-      console.log(`Viewport ${viewportId} disabled`);
     }
 
     // 2.a) See if viewport uses a custom rendering pipeline.
@@ -603,6 +602,10 @@ class RenderingEngine implements IRenderingEngine {
     keepCamera = true,
     immediate = true
   ) {
+    // Ensure all the canvases are ready for rendering
+    vtkDrivenViewports.forEach((vp: IStackViewport | IVolumeViewport) => {
+      getOrCreateCanvas(vp.element);
+    });
     const canvasesDrivenByVtkJs = vtkDrivenViewports.map((vp) => vp.canvas);
 
     if (canvasesDrivenByVtkJs.length) {
@@ -620,16 +623,8 @@ class RenderingEngine implements IRenderingEngine {
 
     // 3. Reset viewport cameras
     vtkDrivenViewports.forEach((vp: IStackViewport | IVolumeViewport) => {
-      const canvas = getOrCreateCanvas(vp.element);
-      const rect = canvas.getBoundingClientRect();
-      const devicePixelRatio = window.devicePixelRatio || 1;
-      canvas.width = rect.width * devicePixelRatio;
-      canvas.height = rect.height * devicePixelRatio;
-
       const prevCamera = vp.getCamera();
       const rotation = vp.getRotation();
-      const pan = vp.getPan();
-      const zoom = vp.getZoom();
       const { flipHorizontal } = prevCamera;
       vp.resetCamera();
 
@@ -645,7 +640,6 @@ class RenderingEngine implements IRenderingEngine {
           if (rotation) {
             vp.setProperties({ rotation });
           }
-          console.log('What to do with pan and zoom', pan[0], pan[1], zoom);
         } else {
           vp.setCamera(prevCamera);
         }
@@ -677,12 +671,6 @@ class RenderingEngine implements IRenderingEngine {
     const canvas = getOrCreateCanvas(viewportInputEntry.element);
     canvasesDrivenByVtkJs.push(canvas);
 
-    const devicePixelRatio = window.devicePixelRatio || 1;
-
-    const rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width * devicePixelRatio;
-    canvas.height = rect.height * devicePixelRatio;
-
     // 2.c Calculating the new size for offScreen Canvas
     const { offScreenCanvasWidth, offScreenCanvasHeight } =
       this._resizeOffScreenCanvas(canvasesDrivenByVtkJs);
@@ -769,7 +757,6 @@ class RenderingEngine implements IRenderingEngine {
       offScreenCanvasHeight,
       xOffset
     );
-
     // 2. Add a renderer to the offScreenMultiRenderWindow
     this.offscreenMultiRenderWindow.addRenderer({
       viewport: [
@@ -966,21 +953,17 @@ class RenderingEngine implements IRenderingEngine {
   ): { offScreenCanvasWidth: number; offScreenCanvasHeight: number } {
     const { offScreenCanvasContainer, offscreenMultiRenderWindow } = this;
 
-    const devicePixelRatio = window.devicePixelRatio || 1;
-
     // 1. Calculated the height of the offScreen canvas to be the maximum height
     // between canvases
     const offScreenCanvasHeight = Math.max(
-      ...canvasesDrivenByVtkJs.map(
-        (canvas) => canvas.clientHeight * devicePixelRatio
-      )
+      ...canvasesDrivenByVtkJs.map((canvas) => canvas.height)
     );
 
     // 2. Calculating the width of the offScreen canvas to be the sum of all
     let offScreenCanvasWidth = 0;
 
     canvasesDrivenByVtkJs.forEach((canvas) => {
-      offScreenCanvasWidth += canvas.clientWidth * devicePixelRatio;
+      offScreenCanvasWidth += canvas.width;
     });
 
     offScreenCanvasContainer.width = offScreenCanvasWidth;
@@ -1009,8 +992,6 @@ class RenderingEngine implements IRenderingEngine {
     // Redefine viewport properties
     let _xOffset = 0;
 
-    const devicePixelRatio = window.devicePixelRatio || 1;
-
     for (let i = 0; i < viewportsDrivenByVtkJs.length; i++) {
       const viewport = viewportsDrivenByVtkJs[i];
       const {
@@ -1029,7 +1010,7 @@ class RenderingEngine implements IRenderingEngine {
         _xOffset
       );
 
-      _xOffset += viewport.canvas.clientWidth * devicePixelRatio;
+      _xOffset += viewport.canvas.width;
 
       viewport.sx = sx;
       viewport.sy = sy;
@@ -1065,22 +1046,17 @@ class RenderingEngine implements IRenderingEngine {
     _xOffset: number
   ): ViewportDisplayCoords {
     const { canvas } = viewport;
-    const { clientWidth, clientHeight } = canvas;
-    const devicePixelRatio = window.devicePixelRatio || 1;
-    const height = clientHeight * devicePixelRatio;
-    const width = clientWidth * devicePixelRatio;
+    const { width: sWidth, height: sHeight } = canvas;
 
     // Update the canvas drawImage offsets.
     const sx = _xOffset;
     const sy = 0;
-    const sWidth = width;
-    const sHeight = height;
 
     const sxStartDisplayCoords = sx / offScreenCanvasWidth;
 
     // Need to offset y if it not max height
     const syStartDisplayCoords =
-      sy + (offScreenCanvasHeight - height) / offScreenCanvasHeight;
+      sy + (offScreenCanvasHeight - sHeight) / offScreenCanvasHeight;
 
     const sWidthDisplayCoords = sWidth / offScreenCanvasWidth;
     const sHeightDisplayCoords = sHeight / offScreenCanvasHeight;

package/src/RenderingEngine/StackViewport.ts

@@ -7,9 +7,9 @@ import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/C
 import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
 import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
 import { mat4, vec2, vec3 } from 'gl-matrix';
-import _cloneDeep from 'lodash.clonedeep';
 import eventTarget from '../eventTarget';
 import * as metaData from '../metaData';
+import cloneDeep from 'lodash.clonedeep';
 import type {
   ActorEntry,
   CPUFallbackColormapData,
@@ -34,6 +34,7 @@ import type {
   StackViewportProperties,
   VOIRange,
   ViewReference,
+  ViewPresentation,
   VolumeActor,
 } from '../types';
 import {
@@ -382,7 +383,9 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
 
   private setVOI: (voiRange: VOIRange, options?: SetVOIOptions) => void;
 
-  private setInterpolationType: (interpolationType: InterpolationType) => void;
+  protected setInterpolationType: (
+    interpolationType: InterpolationType
+  ) => void;
 
   private setInvertColor: (invert: boolean) => void;
 
@@ -480,12 +483,12 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
           );
           return [pixelCoord[0], pixelCoord[1], 0];
         },
-        indexToWorld: (point: Point3) => {
+        indexToWorld: (point: Point3, destPoint?: Point3) => {
           const canvasPoint = pixelToCanvas(this._cpuFallbackEnabledElement, [
             point[0],
             point[1],
           ]);
-          return this.canvasToWorldCPU(canvasPoint);
+          return this.canvasToWorldCPU(canvasPoint, destPoint);
         },
       },
       scalarData: this.cpuImagePixelData,
@@ -551,7 +554,6 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     const { preferSizeOverAccuracy } = getConfiguration().rendering;
 
     if (preferSizeOverAccuracy) {
-      // @ts-ignore for now until vtk is updated
       mapper.setPreferSizeOverAccuracy(true);
     }
 
@@ -1151,13 +1153,17 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
       : (360 - initialToCurrentViewUpAngle) % 360;
   };
 
-  private setRotation(rotation: number): void {
+  protected setRotation = (rotation: number) => {
     const previousCamera = this.getCamera();
 
     this.useCPURendering
       ? this.setRotationCPU(rotation)
       : this.setRotationGPU(rotation);
 
+    if (this._suppressCameraModifiedEvents) {
+      return;
+    }
+
     // New camera after rotation
     const camera = this.getCamera();
 
@@ -1171,7 +1177,7 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     };
 
     triggerEvent(this.element, Events.CAMERA_MODIFIED, eventDetail);
-  }
+  };
 
   private setVOILUTFunction(
     voiLUTFunction: VOILUTFunctionType,
@@ -1200,9 +1206,18 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     viewport.rotation = rotation;
   }
 
+  /**
+   * The rotation that is being set is intended to be around the currently
+   * display center of the image.  However, the roll operation does it around
+   * another point which can result in the image disappearing.  The set/get
+   * pan values move the center of rotation to the center of the image as
+   * currently actually displayed.
+   */
   private setRotationGPU(rotation: number): void {
+    const panFit = this.getPan(this.fitToCanvasCamera);
     const pan = this.getPan();
-    this.setPan([0, 0]);
+    const panSub = vec2.sub([0, 0], panFit, pan) as Point2;
+    this.setPan(panSub, false);
     const { flipVertical } = this.getCamera();
 
     // Moving back to zero rotation, for new scrolled slice rotation is 0 after camera reset
@@ -1216,7 +1231,11 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
 
     // rotating camera to the new value
     this.getVtkActiveCamera().roll(-rotation);
-    this.setPan(pan);
+    const afterPan = this.getPan();
+    const afterPanFit = this.getPan(this.fitToCanvasCamera);
+    const newCenter = vec2.sub([0, 0], afterPan, afterPanFit);
+    const newOffset = vec2.add([0, 0], panFit, newCenter) as Point2;
+    this.setPan(newOffset, false);
   }
 
   private setInterpolationTypeGPU(interpolationType: InterpolationType): void {
@@ -2232,7 +2251,7 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
 
     // Cache camera props so we can trigger one camera changed event after
     // The full transition.
-    const previousCameraProps = _cloneDeep(this.getCamera());
+    const previousCameraProps = cloneDeep(this.getCamera());
     if (sameImageData && !this.stackInvalidated) {
       // 3a. If we can reuse it, replace the scalar data under the hood
       this._updateVTKImageDataFromCornerstoneImage(image);
@@ -2673,7 +2692,10 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     this._publishCalibratedEvent = false;
   }
 
-  private canvasToWorldCPU = (canvasPos: Point2): Point3 => {
+  private canvasToWorldCPU = (
+    canvasPos: Point2,
+    worldPos: Point3 = [0, 0, 0]
+  ): Point3 => {
     if (!this._cpuFallbackEnabledElement.image) {
       return;
     }
@@ -2683,8 +2705,6 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     // convert pixel coordinate to world coordinate
     const { origin, spacing, direction } = this.getImageData();
 
-    const worldPos = vec3.fromValues(0, 0, 0);
-
     // Calculate size of spacing vector in normal direction
     const iVector = direction.slice(0, 3) as Point3;
     const jVector = direction.slice(3, 6) as Point3;
@@ -2693,7 +2713,7 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     vec3.scaleAndAdd(worldPos, origin, iVector, px * spacing[0]);
     vec3.scaleAndAdd(worldPos, worldPos, jVector, py * spacing[1]);
 
-    return [worldPos[0], worldPos[1], worldPos[2]] as Point3;
+    return worldPos;
   };
 
   private worldToCanvasCPU = (worldPos: Point3): Point2 => {
@@ -2881,6 +2901,27 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     };
   }
 
+  /**
+   * Applies the view reference, which may navigate the slice index and apply
+   * other camera modifications
+   */
+  public setView(viewRef?: ViewReference, viewPres?: ViewPresentation): void {
+    const camera = this.getCamera();
+    super.setView(viewRef, viewPres);
+    if (viewRef) {
+      const { viewPlaneNormal, sliceIndex } = viewRef;
+      if (
+        viewPlaneNormal &&
+        !isEqual(viewPlaneNormal, camera.viewPlaneNormal)
+      ) {
+        return;
+      }
+      if (sliceIndex || sliceIndex === 0) {
+        this.setImageIdIndex(sliceIndex as number);
+      }
+    }
+  }
+
   public getReferenceId(specifier: ViewReferenceSpecifier = {}): string {
     const { sliceIndex: sliceIndex = this.currentImageIdIndex } = specifier;
     if (Array.isArray(sliceIndex)) {

package/src/RenderingEngine/VideoViewport.ts

@@ -543,9 +543,9 @@ class VideoViewport extends Viewport implements IVideoViewport {
           const pixelCoord = this.canvasToIndex(canvasPoint);
           return [pixelCoord[0], pixelCoord[1], 0];
         },
-        indexToWorld: (point: Point3) => {
+        indexToWorld: (point: Point2, destPoint?: Point3) => {
           const canvasPoint = this.indexToCanvas([point[0], point[1]]);
-          return this.canvasToWorld(canvasPoint);
+          return this.canvasToWorld(canvasPoint, destPoint);
         },
       },
       hasPixelSpacing: this.hasPixelSpacing,
@@ -856,7 +856,10 @@ class VideoViewport extends Viewport implements IVideoViewport {
    * @param canvasPos - to convert to world
    * @returns World position
    */
-  public canvasToWorld = (canvasPos: Point2): Point3 => {
+  public canvasToWorld = (
+    canvasPos: Point2,
+    destPos: Point3 = [0, 0, 0]
+  ): Point3 => {
     const pan: Point2 = this.videoCamera.panWorld; // In world coordinates
     const worldToCanvasRatio: number = this.getWorldToCanvasRatio();
 
@@ -870,13 +873,15 @@ class VideoViewport extends Viewport implements IVideoViewport {
       canvasPos[1] - panOffsetCanvas[1],
     ];
 
-    const worldPos: Point3 = [
-      subCanvasPos[0] / worldToCanvasRatio,
-      subCanvasPos[1] / worldToCanvasRatio,
+    // Replace the x,y values only in place in the world position
+    // as the z is unchanging for video display
+    destPos.splice(
       0,
-    ];
-
-    return worldPos;
+      2,
+      subCanvasPos[0] / worldToCanvasRatio,
+      subCanvasPos[1] / worldToCanvasRatio
+    );
+    return destPos;
   };
 
   /**