@cornerstonejs/core 2.0.0-beta.1 → 2.0.0-beta.10

package/src/RenderingEngine/helpers/getOrCreateCanvas.ts

@@ -1,5 +1,6 @@
 const VIEWPORT_ELEMENT = 'viewport-element';
 const CANVAS_CSS_CLASS = 'cornerstone-canvas';
+export const EPSILON = 1e-4;
 
 /**
  * Create a canvas and append it to the element
@@ -13,6 +14,7 @@ function createCanvas(element: Element | HTMLDivElement): HTMLCanvasElement {
   canvas.style.position = 'absolute';
   canvas.style.width = '100%';
   canvas.style.height = '100%';
+  canvas.style.imageRendering = 'pixelated';
   canvas.classList.add(CANVAS_CSS_CLASS);
   element.appendChild(canvas);
 
@@ -30,6 +32,8 @@ export function createViewportElement(element: HTMLDivElement): HTMLDivElement {
   div.style.position = 'relative';
   div.style.width = '100%';
   div.style.height = '100%';
+  // Hide any canvas elements not viewable
+  div.style.overflow = 'hidden';
   div.classList.add(VIEWPORT_ELEMENT);
   element.appendChild(div);
 
@@ -39,6 +43,12 @@ export function createViewportElement(element: HTMLDivElement): HTMLDivElement {
 /**
  * Create a canvas or returns the one that already exists for a given element.
  * It first checks if the element has a canvas, if not it creates one and returns it.
+ * The canvas is updated for:
+ *   1. width/height in screen pixels to completely cover the div element
+ *   2. CSS width/height in CSS pixels to be the size of the physical screen pixels
+ *      width and height (from #1)
+ * This allows drawing to the canvas and having pixel perfect/exact drawing to
+ * the physical screen pixels.
  *
  * @param element - An HTML Element
  * @returns canvas a Canvas DOM element
@@ -54,5 +64,26 @@ export default function getOrCreateCanvas(
   const internalDiv =
     element.querySelector(viewportElement) || createViewportElement(element);
 
-  return internalDiv.querySelector(canvasSelector) || createCanvas(internalDiv);
+  const canvas = (internalDiv.querySelector(canvasSelector) ||
+    createCanvas(internalDiv)) as HTMLCanvasElement;
+  // Fit the canvas into the div
+  const rect = internalDiv.getBoundingClientRect();
+  const devicePixelRatio = window.devicePixelRatio || 1;
+
+  // The width/height is the number of physical pixels which will completely
+  // cover the div so that no pixels, fractional or full are left uncovered.
+  // Thus, it is the ceiling of the CSS size times the physical pixels.
+  // In theory, the physical pixels can be offset from CSS pixels, but in practice
+  // this hasn't been observed.
+  const width = Math.ceil(rect.width * devicePixelRatio);
+  const height = Math.ceil(rect.height * devicePixelRatio);
+  canvas.width = width;
+  canvas.height = height;
+  // Reset the size of the canvas to be the number of physical pixels,
+  // expressed as CSS pixels, with a tiny extra amount to prevent clipping
+  // to the next lower size in the physical display.
+  canvas.style.width = (width + EPSILON) / devicePixelRatio + 'px';
+  canvas.style.height = (height + EPSILON) / devicePixelRatio + 'px';
+
+  return canvas;
 }

package/src/RenderingEngine/helpers/index.ts

@@ -4,6 +4,7 @@ import getOrCreateCanvas from './getOrCreateCanvas';
 import setVolumesForViewports from './setVolumesForViewports';
 import addVolumesToViewports from './addVolumesToViewports';
 import volumeNewImageEventDispatcher from './volumeNewImageEventDispatcher';
+import addImageSlicesToViewports from './addImageSlicesToViewports';
 
 export {
   createVolumeActor,
@@ -11,5 +12,6 @@ export {
   getOrCreateCanvas,
   setVolumesForViewports,
   addVolumesToViewports,
+  addImageSlicesToViewports,
   volumeNewImageEventDispatcher,
 };

package/src/RenderingEngine/helpers/setDefaultVolumeVOI.ts

@@ -8,6 +8,7 @@ import { loadAndCacheImage } from '../../loaders/imageLoader';
 import * as metaData from '../../metaData';
 import { getMinMax, windowLevel } from '../../utilities';
 import { RequestType } from '../../enums';
+import cache from '../../cache';
 
 const PRIORITY = 0;
 const REQUEST_TYPE = RequestType.Prefetch;
@@ -20,31 +21,36 @@ const REQUEST_TYPE = RequestType.Prefetch;
  * Finally it sets the VOI on the volumeActor transferFunction
  * @param volumeActor - The volume actor
  * @param imageVolume - The image volume that we want to set the VOI for.
+ * @param useNativeDataType -  The image data type is native or Float32Array
  */
 async function setDefaultVolumeVOI(
   volumeActor: VolumeActor,
   imageVolume: IImageVolume,
-  use16BitTexture: boolean
+  useNativeDataType: boolean
 ): Promise<void> {
   let voi = getVOIFromMetadata(imageVolume);
 
-  if (!voi) {
-    voi = await getVOIFromMinMax(imageVolume, use16BitTexture);
+  if (!voi && imageVolume?.imageIds?.length) {
+    voi = await getVOIFromMinMax(imageVolume, useNativeDataType);
+    voi = handlePreScaledVolume(imageVolume, voi);
   }
-
-  if (!voi || voi.lower === undefined || voi.upper === undefined) {
-    throw new Error(
-      'Could not get VOI from metadata, nor from the min max of the image middle slice'
-    );
+  // if (!voi || voi.lower === undefined || voi.upper === undefined) {
+  //   throw new Error(
+  //     'Could not get VOI from metadata, nor from the min max of the image middle slice'
+  //   );
+  // }
+  if (
+    (voi?.lower === 0 && voi?.upper === 0) ||
+    voi?.lower === undefined ||
+    voi?.upper === undefined
+  ) {
+    return;
   }
 
-  voi = handlePreScaledVolume(imageVolume, voi);
-  const { lower, upper } = voi;
-
   volumeActor
     .getProperty()
     .getRGBTransferFunction(0)
-    .setMappingRange(lower, upper);
+    .setMappingRange(voi.lower, voi.upper);
 }
 
 function handlePreScaledVolume(imageVolume: IImageVolume, voi: VOIRange) {
@@ -72,35 +78,36 @@ function handlePreScaledVolume(imageVolume: IImageVolume, voi: VOIRange) {
 }
 
 /**
- * Get the VOI from the metadata of the middle slice of the image volume. It checks
- * the metadata for the VOI and if it is not found, it returns null
+ * Get the VOI from the metadata of the middle slice of the image volume or the metadata of the image volume
+ * It checks the metadata for the VOI and if it is not found, it returns null
  *
  * @param imageVolume - The image volume that we want to get the VOI from.
  * @returns VOIRange with lower and upper values
  */
 function getVOIFromMetadata(imageVolume: IImageVolume): VOIRange {
-  const { imageIds } = imageVolume;
-
-  const imageIdIndex = Math.floor(imageIds.length / 2);
-  const imageId = imageIds[imageIdIndex];
-
-  const voiLutModule = metaData.get('voiLutModule', imageId);
-
-  if (voiLutModule && voiLutModule.windowWidth && voiLutModule.windowCenter) {
-    const { windowWidth, windowCenter } = voiLutModule;
-
-    const voi = {
-      windowWidth: Array.isArray(windowWidth) ? windowWidth[0] : windowWidth,
-      windowCenter: Array.isArray(windowCenter)
-        ? windowCenter[0]
-        : windowCenter,
-    };
-
+  const { imageIds, metadata } = imageVolume;
+  let voi;
+  if (imageIds.length) {
+    const imageIdIndex = Math.floor(imageIds.length / 2);
+    const imageId = imageIds[imageIdIndex];
+    const voiLutModule = metaData.get('voiLutModule', imageId);
+    if (voiLutModule && voiLutModule.windowWidth && voiLutModule.windowCenter) {
+      const { windowWidth, windowCenter } = voiLutModule;
+      voi = {
+        windowWidth: Array.isArray(windowWidth) ? windowWidth[0] : windowWidth,
+        windowCenter: Array.isArray(windowCenter)
+          ? windowCenter[0]
+          : windowCenter,
+      };
+    }
+  } else {
+    voi = metadata?.voiLut?.[0];
+  }
+  if (voi) {
     const { lower, upper } = windowLevel.toLowHighRange(
       Number(voi.windowWidth),
       Number(voi.windowCenter)
     );
-
     return {
       lower,
       upper,
@@ -113,11 +120,12 @@ function getVOIFromMetadata(imageVolume: IImageVolume): VOIRange {
  * and max pixel values, it calculates the VOI.
  *
  * @param imageVolume - The image volume that we want to get the VOI from.
+ * @param useNativeDataType -  The image data type is native or Float32Array
  * @returns The VOIRange with lower and upper values
  */
 async function getVOIFromMinMax(
   imageVolume: IImageVolume,
-  use16BitTexture: boolean
+  useNativeDataType: boolean
 ): Promise<VOIRange> {
   const { imageIds } = imageVolume;
   const scalarData = imageVolume.getScalarData();
@@ -157,10 +165,11 @@ async function getVOIFromMinMax(
 
   const options = {
     targetBuffer: {
-      type: use16BitTexture ? undefined : 'Float32Array',
+      type: useNativeDataType ? undefined : 'Float32Array',
     },
     priority: PRIORITY,
     requestType: REQUEST_TYPE,
+    useNativeDataType,
     preScale: {
       enabled: true,
       scalingParameters: scalingParametersToUse,
@@ -175,20 +184,27 @@ async function getVOIFromMinMax(
   // instead. For the first scenario, we use the arrayBuffer of the volume to get the correct
   // slice for the imageScalarData, and for the second scenario we use the getPixelData
   // on the Cornerstone IImage object to get the pixel data.
-  const image = await loadAndCacheImage(imageId, options);
-
-  let imageScalarData;
-  if (!image) {
-    imageScalarData = _getImageScalarDataFromImageVolume(
-      imageVolume,
-      byteOffset,
-      bytePerPixel,
-      voxelsPerImage
-    );
-  } else {
-    imageScalarData = image.getPixelData();
+  // Note: we don't want to use the derived or generated images for setting the
+  // default VOI, because they are not the original. This is ugly but don't
+  // know how to do it better.
+  let image = cache.getImage(imageId);
+
+  if (!imageVolume.referencedImageIds?.length) {
+    // we should ignore the cache here,
+    // since we want to load the image from with the most
+    // recent prescale settings
+    image = await loadAndCacheImage(imageId, { ...options, ignoreCache: true });
   }
 
+  const imageScalarData = image
+    ? image.getPixelData()
+    : _getImageScalarDataFromImageVolume(
+        imageVolume,
+        byteOffset,
+        bytePerPixel,
+        voxelsPerImage
+      );
+
   // Get the min and max pixel values of the middle slice
   const { min, max } = getMinMax(imageScalarData);
 
@@ -205,7 +221,7 @@ function _getImageScalarDataFromImageVolume(
   voxelsPerImage
 ) {
   const { scalarData } = imageVolume;
-  const { volumeBuffer } = scalarData;
+  const { buffer } = scalarData;
   if (scalarData.BYTES_PER_ELEMENT !== bytePerPixel) {
     byteOffset *= scalarData.BYTES_PER_ELEMENT / bytePerPixel;
   }
@@ -213,11 +229,7 @@ function _getImageScalarDataFromImageVolume(
   const TypedArray = scalarData.constructor;
   const imageScalarData = new TypedArray(voxelsPerImage);
 
-  const volumeBufferView = new TypedArray(
-    volumeBuffer,
-    byteOffset,
-    voxelsPerImage
-  );
+  const volumeBufferView = new TypedArray(buffer, byteOffset, voxelsPerImage);
 
   imageScalarData.set(volumeBufferView);
 

package/src/RenderingEngine/helpers/setVolumesForViewports.ts

@@ -34,7 +34,9 @@ async function setVolumesForViewports(
 
     // if not instance of BaseVolumeViewport, throw
     if (!(viewport instanceof BaseVolumeViewport)) {
-      throw new Error('setVolumesForViewports only supports VolumeViewport and VolumeViewport3D');
+      throw new Error(
+        'setVolumesForViewports only supports VolumeViewport and VolumeViewport3D'
+      );
     }
   });
 

package/src/RenderingEngine/helpers/viewportTypeToViewportClass.ts

@@ -3,12 +3,14 @@ import StackViewport from '../StackViewport';
 import VolumeViewport from '../VolumeViewport';
 import ViewportType from '../../enums/ViewportType';
 import VolumeViewport3D from '../VolumeViewport3D';
+import VideoViewport from '../VideoViewport';
 
 const viewportTypeToViewportClass = {
   [ViewportType.ORTHOGRAPHIC]: VolumeViewport,
   [ViewportType.PERSPECTIVE]: VolumeViewport,
   [ViewportType.STACK]: StackViewport,
   [ViewportType.VOLUME_3D]: VolumeViewport3D,
+  [ViewportType.VIDEO]: VideoViewport,
 };
 
 export default viewportTypeToViewportClass;