@cornerstonejs/core 1.71.0 → 1.71.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "1.71.0",
+  "version": "1.71.1",
   "description": "",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -47,5 +47,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "03c01970a50a7383de86bb15c8d4f344a8ff7d25"
+  "gitHead": "434959300faeb4eb32dfc2dc19a3aa5aaf1f2a51"
 }

package/src/RenderingEngine/VideoViewport.ts

@@ -635,7 +635,7 @@ class VideoViewport extends Viewport implements IVideoViewport {
 
     // NOTE: the parallel scale should be done first
     // because it affects the focal point later
-    if (camera.parallelScale !== undefined) {
+    if (parallelScale) {
       this.videoCamera.parallelScale =
         this.element.clientHeight / 2 / parallelScale;
     }
@@ -885,7 +885,7 @@ class VideoViewport extends Viewport implements IVideoViewport {
   };
 
   /**
-   * Converts and [x,y] video coordinate to a Cornerstone3D VideoViewport.
+   * Converts `[x, y, 0]` world video coordinate to canvas CSS coordinates.
    *
    * @param  worldPos - world coord to convert to canvas
    * @returns Canvas position
@@ -894,47 +894,53 @@ class VideoViewport extends Viewport implements IVideoViewport {
     const pan: Point2 = this.videoCamera.panWorld;
     const worldToCanvasRatio: number = this.getWorldToCanvasRatio();
 
-    const subCanvasPos: Point2 = [
+    const canvasPos: Point2 = [
       (worldPos[0] + pan[0]) * worldToCanvasRatio,
       (worldPos[1] + pan[1]) * worldToCanvasRatio,
     ];
 
-    const canvasPos: Point2 = [subCanvasPos[0], subCanvasPos[1]];
-
     return canvasPos;
   };
 
   public getPan(): Point2 {
-    const worldPan = this.videoCamera.panWorld;
-    return [worldPan[0], worldPan[1]];
+    const panWorld = this.videoCamera.panWorld;
+    return [panWorld[0], panWorld[1]];
   }
 
   public getRotation = () => 0;
 
+  /**
+   * Uses the transform to convert canvas coordinates into index coordinates.
+   */
   protected canvasToIndex = (canvasPos: Point2): Point2 => {
     const transform = this.getTransform();
     transform.invert();
 
-    return transform.transformPoint(canvasPos);
+    return transform.transformPoint(
+      <Point2>canvasPos.map((it) => it * devicePixelRatio)
+    );
   };
 
   protected indexToCanvas = (indexPos: Point2): Point2 => {
     const transform = this.getTransform();
-    return transform.transformPoint(indexPos);
+    return <Point2>(
+      transform.transformPoint(indexPos).map((it) => it / devicePixelRatio)
+    );
   };
 
+  /**
+   * Sets  initial video camera to center the image area.  The values
+   * are set in canvas CSS pixel units and NOT in canvas index units.
+   */
   private refreshRenderValues() {
     // this means that each unit (pixel) in the world (video) would be
-    // represented by n pixels in the canvas.
-    let worldToCanvasRatio = this.canvas.width / this.videoWidth;
+    // represented by n pixels in the canvas, measured in css pixels
+    let worldToCanvasRatio = this.canvas.offsetWidth / this.videoWidth;
 
     if (this.videoHeight * worldToCanvasRatio > this.canvas.height) {
       // If by fitting the width, we exceed the height of the viewport, then we need to decrease the
       // size of the viewport further by considering its verticality.
-      const secondWorldToCanvasRatio =
-        this.canvas.height / (this.videoHeight * worldToCanvasRatio);
-
-      worldToCanvasRatio *= secondWorldToCanvasRatio;
+      worldToCanvasRatio = this.canvas.offsetHeight / this.videoHeight;
     }
 
     // Set the width as big as possible, this is the portion of the canvas
@@ -943,8 +949,8 @@ class VideoViewport extends Viewport implements IVideoViewport {
     const drawHeight = Math.floor(this.videoHeight * worldToCanvasRatio);
 
     // calculate x and y offset in order to center the image
-    const xOffsetCanvas = this.canvas.width / 2 - drawWidth / 2;
-    const yOffsetCanvas = this.canvas.height / 2 - drawHeight / 2;
+    const xOffsetCanvas = (this.canvas.offsetWidth - drawWidth) / 2;
+    const yOffsetCanvas = (this.canvas.offsetHeight - drawHeight) / 2;
 
     const xOffsetWorld = xOffsetCanvas / worldToCanvasRatio;
     const yOffsetWorld = yOffsetCanvas / worldToCanvasRatio;
@@ -965,17 +971,27 @@ class VideoViewport extends Viewport implements IVideoViewport {
     this.renderFrame();
   };
 
+  /**
+   * Creates a transform from video index coordinates to canvas coordinates.
+   */
   protected getTransform() {
     const panWorld: Point2 = this.videoCamera.panWorld;
+    const devicePixelRatio = window.devicePixelRatio || 1;
     const worldToCanvasRatio: number = this.getWorldToCanvasRatio();
     const canvasToWorldRatio: number = this.getCanvasToWorldRatio();
-    const halfCanvas = [this.canvas.width / 2, this.canvas.height / 2];
+    const halfCanvas = [
+      this.canvas.offsetWidth / 2,
+      this.canvas.offsetHeight / 2,
+    ];
     const halfCanvasWorldCoordinates = [
       halfCanvas[0] * canvasToWorldRatio,
       halfCanvas[1] * canvasToWorldRatio,
     ];
     const transform = new Transform();
 
+    // Start by converting into canvas index coordinates FROM canvas css pixel coordinates
+    transform.scale(devicePixelRatio, devicePixelRatio);
+
     // Translate to the center of the canvas (move origin of the transform
     // to the center of the canvas)
     transform.translate(halfCanvas[0], halfCanvas[1]);
@@ -1021,11 +1037,19 @@ class VideoViewport extends Viewport implements IVideoViewport {
     return new CanvasActor(this, image);
   }
 
+  /**
+   * Renders the video frame to the viewport.
+   */
   private renderFrame = () => {
     const transform = this.getTransform();
     const transformationMatrix: number[] = transform.getMatrix();
 
-    this.canvasContext.transform(
+    const ctx = this.canvasContext;
+
+    ctx.resetTransform();
+
+    // Need to correct the transform for device pixel ratio scaling.
+    ctx.transform(
       transformationMatrix[0],
       transformationMatrix[1],
       transformationMatrix[2],
@@ -1034,13 +1058,7 @@ class VideoViewport extends Viewport implements IVideoViewport {
       transformationMatrix[5]
     );
 
-    this.canvasContext.drawImage(
-      this.videoElement,
-      0,
-      0,
-      this.videoWidth,
-      this.videoHeight
-    );
+    ctx.drawImage(this.videoElement, 0, 0, this.videoWidth, this.videoHeight);
 
     for (const actor of this.getActors()) {
       (actor.actor as ICanvasActor).render(this, this.canvasContext);