@cornerstonejs/core 1.29.0 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "description": "",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -46,5 +46,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "7e7c3eb2156c26f594af9e664405f64d9e269f4d"
+  "gitHead": "9098e604b0099ed3e779d85faa6a1d0e2a4cc4c7"
 }

package/src/RenderingEngine/StackViewport.ts

@@ -554,6 +554,11 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     return actor;
   };
 
+  /** Gets the number of slices */
+  public getNumberOfSlices = (): number => {
+    return this.imageIds.length;
+  };
+
   /**
    * Retrieves the metadata from the metadata provider, and optionally adds the
    * scaling to the viewport if modality is PET and scaling metadata is provided.

package/src/RenderingEngine/VideoViewport.ts

@@ -1,4 +1,9 @@
-import { Events as EVENTS, VideoViewport as VideoViewportEnum } from '../enums';
+import { vec3 } from 'gl-matrix';
+import {
+  Events as EVENTS,
+  VideoViewport as VideoViewportEnum,
+  MetadataModules,
+} from '../enums';
 import {
   IVideoViewport,
   VideoViewportProperties,
@@ -7,7 +12,9 @@ import {
   ICamera,
   InternalVideoCamera,
   VideoViewportInput,
+  VOIRange,
 } from '../types';
+import * as metaData from '../metaData';
 import { Transform } from './helpers/cpuFallback/rendering/transform';
 import { triggerEvent } from '../utilities';
 import Viewport from './Viewport';
@@ -18,7 +25,9 @@ import { getOrCreateCanvas } from './helpers';
  * looking into an internal scene, and an associated target output `canvas`.
  */
 class VideoViewport extends Viewport implements IVideoViewport {
+  public modality;
   // Viewport Data
+  protected imageId: string;
   readonly uid;
   readonly renderingEngineId: string;
   readonly canvasContext: CanvasRenderingContext2D;
@@ -30,12 +39,43 @@ class VideoViewport extends Viewport implements IVideoViewport {
   private mute = true;
   private isPlaying = false;
   private scrollSpeed = 1;
-  private fps = 30; // TODO We need to find a good solution for this.
+  private playbackRate = 1;
+
+  protected metadata;
+
+  /**
+   * The fps, frames per second is used to calculate time/frame mapping values.
+   * It is provided by the CINE Module in the metadata, defaulting to 30 if not
+   * provided.
+   */
+  private fps = 30;
+
   private videoCamera: InternalVideoCamera = {
     panWorld: [0, 0],
     parallelScale: 1,
   };
 
+  /**
+   * feFilter is an inline string value for the CSS filter on the video
+   * CSS filters can reference SVG filters, so for the typical use case here
+   * the CSS filter is actually an link link to a SVG filter.
+   */
+  private feFilter: string;
+
+  /**
+   * An average white point value, used to color balance the image so that
+   * the given white is mapped to [255,255,255] via multiplication per channel.
+   */
+  private averageWhite: [number, number, number];
+
+  /**
+   * The VOI Range is used to apply contrast/brightness adjustments to the image.
+   */
+  private voiRange: VOIRange = {
+    lower: 0,
+    upper: 255,
+  };
+
   constructor(props: VideoViewportInput) {
     super({
       ...props,
@@ -82,6 +122,86 @@ class VideoViewport extends Viewport implements IVideoViewport {
     this.videoElement.remove();
   }
 
+  private _getImageDataMetadata() {
+    const imagePlaneModule = metaData.get(
+      MetadataModules.IMAGE_PLANE,
+      this.imageId
+    );
+
+    let rowCosines = <Point3>imagePlaneModule.rowCosines;
+    let columnCosines = <Point3>imagePlaneModule.columnCosines;
+
+    // if null or undefined
+    if (rowCosines == null || columnCosines == null) {
+      rowCosines = <Point3>[1, 0, 0];
+      columnCosines = <Point3>[0, 1, 0];
+    }
+
+    const rowCosineVec = vec3.fromValues(
+      rowCosines[0],
+      rowCosines[1],
+      rowCosines[2]
+    );
+    const colCosineVec = vec3.fromValues(
+      columnCosines[0],
+      columnCosines[1],
+      columnCosines[2]
+    );
+    const scanAxisNormal = vec3.create();
+    vec3.cross(scanAxisNormal, rowCosineVec, colCosineVec);
+
+    let origin = imagePlaneModule.imagePositionPatient;
+    // if null or undefined
+    if (origin == null) {
+      origin = [0, 0, 0];
+    }
+
+    const xSpacing = imagePlaneModule.columnPixelSpacing;
+    const ySpacing = imagePlaneModule.rowPixelSpacing;
+    const xVoxels = imagePlaneModule.columns;
+    const yVoxels = imagePlaneModule.rows;
+
+    const zSpacing = 1;
+    const zVoxels = 1;
+
+    return {
+      bitsAllocated: 8,
+      numComps: 3,
+      origin,
+      direction: [...rowCosineVec, ...colCosineVec, ...scanAxisNormal],
+      dimensions: [xVoxels, yVoxels, zVoxels],
+      spacing: [xSpacing, ySpacing, zSpacing],
+      numVoxels: xVoxels * yVoxels * zVoxels,
+      imagePlaneModule,
+    };
+  }
+
+  /**
+   * Sets the video image id to show and hte frame number.
+   * Requirements are to have the imageUrlModule in the metadata
+   * with the rendered endpoint being the raw video in video/mp4 format.
+   */
+  public setVideo(
+    imageIds: string | string[],
+    frameNumber?: number
+  ): Promise<unknown> {
+    this.imageId = Array.isArray(imageIds) ? imageIds[0] : imageIds;
+    const { imageId } = this;
+    const { rendered } = metaData.get(MetadataModules.IMAGE_URL, imageId);
+    const generalSeries = metaData.get(MetadataModules.GENERAL_SERIES, imageId);
+    this.modality = generalSeries?.Modality;
+    this.metadata = this._getImageDataMetadata();
+
+    return this.setVideoURL(rendered).then(() => {
+      const { cineRate = 30 } = metaData.get(MetadataModules.CINE, imageId);
+      this.fps = cineRate;
+      if (frameNumber !== undefined) {
+        this.pause();
+        this.setFrame(frameNumber);
+      }
+    });
+  }
+
   public async setVideoURL(videoURL: string) {
     return new Promise((resolve) => {
       this.videoElement.src = videoURL;
@@ -126,10 +246,8 @@ class VideoViewport extends Viewport implements IVideoViewport {
   }
 
   public async pause() {
-    if (this.isPlaying) {
-      await this.videoElement.pause();
-      this.isPlaying = false;
-    }
+    await this.videoElement.pause();
+    this.isPlaying = false;
   }
 
   public async scroll(delta = 1) {
@@ -162,8 +280,6 @@ class VideoViewport extends Viewport implements IVideoViewport {
     if (videoElement.paused) {
       // Need to wait for seek update
       const seekEventListener = (evt) => {
-        console.log('seeked');
-
         renderFrame();
 
         videoElement.removeEventListener('seeked', seekEventListener);
@@ -214,21 +330,30 @@ class VideoViewport extends Viewport implements IVideoViewport {
     this.setTime((frame - 1) / this.fps);
   }
 
-  public setProperties(videoInterface: VideoViewportProperties) {
-    if (videoInterface.loop !== undefined) {
-      this.videoElement.loop = videoInterface.loop;
+  public setProperties(props: VideoViewportProperties) {
+    if (props.loop !== undefined) {
+      this.videoElement.loop = props.loop;
     }
 
-    if (videoInterface.muted !== undefined) {
-      this.videoElement.muted = videoInterface.muted;
+    if (props.muted !== undefined) {
+      this.videoElement.muted = props.muted;
     }
 
-    if (videoInterface.playbackRate !== undefined) {
-      this.setPlaybackRate(videoInterface.playbackRate);
+    if (props.playbackRate !== undefined) {
+      this.setPlaybackRate(props.playbackRate);
+    }
+
+    if (props.scrollSpeed !== undefined) {
+      this.setScrollSpeed(props.scrollSpeed);
+    }
+
+    if (props.voiRange) {
+      this.setVOI(props.voiRange);
     }
   }
 
   public setPlaybackRate(rate = 1) {
+    this.playbackRate = rate;
     // Minimum playback speed in chrome is 0.0625 compared to normal
     if (rate < 0.0625) {
       this.pause();
@@ -255,6 +380,9 @@ class VideoViewport extends Viewport implements IVideoViewport {
     return {
       loop: this.videoElement.loop,
       muted: this.videoElement.muted,
+      playbackRate: this.playbackRate,
+      scrollSpeed: this.scrollSpeed,
+      voiRange: { ...this.voiRange },
     };
   };
 
@@ -265,8 +393,101 @@ class VideoViewport extends Viewport implements IVideoViewport {
     });
   }
 
+  protected getScalarData() {
+    const canvas = document.createElement('canvas');
+    canvas.width = this.videoWidth;
+    canvas.height = this.videoHeight;
+    const context = canvas.getContext('2d');
+    context.drawImage(this.videoElement, 0, 0);
+    const canvasData = context.getImageData(
+      0,
+      0,
+      this.videoWidth,
+      this.videoHeight
+    );
+    const { data: scalarData } = canvasData;
+    (scalarData as any).getRange = () => [0, 255];
+    return scalarData;
+  }
+
   public getImageData() {
-    return null;
+    const { metadata } = this;
+
+    const spacing = metadata.spacing;
+
+    return {
+      dimensions: metadata.dimensions,
+      spacing,
+      origin: metadata.origin,
+      direction: metadata.direction,
+      metadata: { Modality: this.modality },
+      imageData: {
+        getDirection: () => metadata.direction,
+        getDimensions: () => metadata.dimensions,
+        getRange: () => [0, 255],
+        getScalarData: () => this.getScalarData(),
+        getSpacing: () => metadata.spacing,
+        worldToIndex: (point: Point3) => {
+          const canvasPoint = this.worldToCanvas(point);
+          const pixelCoord = this.canvasToIndex(canvasPoint);
+          return [pixelCoord[0], pixelCoord[1], 0];
+        },
+        indexToWorld: (point: Point3) => {
+          const canvasPoint = this.indexToCanvas([point[0], point[1]]);
+          return this.canvasToWorld(canvasPoint);
+        },
+      },
+      hasPixelSpacing: this.hasPixelSpacing,
+      calibration: this.calibration,
+      preScale: {
+        scaled: false,
+      },
+    };
+  }
+
+  public setVOI(voiRange: VOIRange): void {
+    this.voiRange = voiRange;
+    this.setColorTransform();
+  }
+
+  public setWindowLevel(windowWidth = 256, windowCenter = 128) {
+    const lower = windowCenter - windowWidth / 2;
+    const upper = windowCenter + windowWidth / 2 - 1;
+    this.setVOI({ lower, upper });
+    this.setColorTransform();
+  }
+
+  public setAverageWhite(averageWhite: [number, number, number]) {
+    this.averageWhite = averageWhite;
+    this.setColorTransform();
+  }
+
+  protected setColorTransform() {
+    if (!this.voiRange && !this.averageWhite) {
+      this.feFilter = null;
+      return;
+    }
+    const white = this.averageWhite || [255, 255, 255];
+    const maxWhite = Math.max(...white);
+    const scaleWhite = white.map((c) => maxWhite / c);
+    // From the DICOM standard: ((x - (c - 0.5)) / (w-1) + 0.5) * (ymax- ymin) + ymin
+    // which is x/(w-1) - (c - 0.5) / (w-1) + 0.5  for this case
+    const { lower = 0, upper = 255 } = this.voiRange || {};
+    const wlScale = (upper - lower + 1) / 255;
+    const wlDelta = lower / 255;
+    this.feFilter = `url('data:image/svg+xml,\
+      <svg xmlns="http://www.w3.org/2000/svg">\
+        <filter id="colour" color-interpolation-filters="linearRGB">\
+        <feColorMatrix type="matrix" \
+        values="\
+          ${scaleWhite[0] * wlScale} 0 0 0 ${wlDelta} \
+          0 ${scaleWhite[1] * wlScale} 0 0 ${wlDelta} \
+          0 0 ${scaleWhite[2] * wlScale} 0 ${wlDelta} \
+          0 0 0 1 0" />\
+        </filter>\
+      </svg>#colour')`;
+
+    this.canvas.style.filter = this.feFilter;
   }
 
   public setCamera(camera: ICamera): void {
@@ -339,6 +560,10 @@ class VideoViewport extends Viewport implements IVideoViewport {
     return true;
   };
 
+  public getNumberOfSlices = (): number => {
+    return (this.videoElement.duration * this.fps) / this.scrollSpeed;
+  };
+
   public getFrameOfReferenceUID = (): string => {
     // The video itself is the frame of reference.
     return this.videoElement.src;
@@ -411,6 +636,20 @@ class VideoViewport extends Viewport implements IVideoViewport {
     return canvasPos;
   };
 
+  protected canvasToIndex = (canvasPos: Point2): Point2 => {
+    const [x, y] = canvasPos;
+    const ratio = this.videoWidth / this.canvas.width;
+    const pan = this.getPan();
+    return [(x + pan[0]) * ratio, (y + pan[1]) * ratio];
+  };
+
+  protected indexToCanvas = (indexPos: Point2): Point2 => {
+    const [x, y] = indexPos;
+    const ratio = this.canvas.width / this.videoWidth;
+    const pan = this.getPan();
+    return [x * ratio - pan[0], y * ratio - pan[1]];
+  };
+
   private refreshRenderValues() {
     // this means that each unit (pixel) in the world (video) would be
     // represented by n pixels in the canvas.

package/src/RenderingEngine/Viewport.ts

@@ -127,6 +127,7 @@ class Viewport implements IViewport {
   resize: () => void;
   getProperties: () => void;
   updateRenderingPipeline: () => void;
+  getNumberOfSlices: () => number;
 
   static get useCustomRenderingPipeline(): boolean {
     return false;

package/src/RenderingEngine/VolumeViewport.ts

@@ -25,6 +25,7 @@ import BaseVolumeViewport from './BaseVolumeViewport';
 import setDefaultVolumeVOI from './helpers/setDefaultVolumeVOI';
 import { setTransferFunctionNodes } from '../utilities/transferFunctionUtils';
 import { ImageActor } from '../types/IActor';
+import getImageSliceDataForVolumeViewport from '../utilities/getImageSliceDataForVolumeViewport';
 
 /**
  * An object representing a VolumeViewport. VolumeViewports are used to render
@@ -82,6 +83,12 @@ class VolumeViewport extends BaseVolumeViewport {
     return super.setVolumes(volumeInputArray, immediate, suppressEvents);
   }
 
+  /** Gets the number of slices the volume is broken up into in the camera direction */
+  public getNumberOfSlices = (): number => {
+    const { numberOfSlices } = getImageSliceDataForVolumeViewport(this);
+    return numberOfSlices;
+  };
+
   /**
    * Creates and adds volume actors for all volumes defined in the `volumeInputArray`.
    * For each entry, if a `callback` is supplied, it will be called with the new volume actor as input.

package/src/enums/MetadataModules.ts

@@ -0,0 +1,20 @@
+/**
+ * Contains the names for the metadata modules.
+ * Recommendation is to add all module names here rather than having them
+ * just use string names.
+ * The naming convention is that the enum has the modules in it, so the
+ * enum key does not repeat the Modules, but the enum value does (to agree
+ * with existing naming conventions)
+ */
+enum MetadataModules {
+  CINE = 'cineModule',
+  IMAGE_URL = 'imageUrlModule',
+  GENERAL_SERIES = 'generalSeriesModule',
+  PATIENT_STUDY = 'patientStudyModule',
+  NM_MULTIFRAME_GEOMETRY = 'nmMultiframeGeometryModule',
+  IMAGE_PLANE = 'imagePlaneModule',
+  IMAGE_PIXEL = 'imagePixelModule',
+  MULTIFRAME = 'multiframeModule',
+}
+
+export default MetadataModules;

package/src/enums/index.ts

@@ -13,6 +13,7 @@ import CalibrationTypes from './CalibrationTypes';
 import ViewportStatus from './ViewportStatus';
 import ImageQualityStatus from './ImageQualityStatus';
 import * as VideoViewport from './VideoViewport';
+import MetadataModules from './MetadataModules';
 
 export {
   Events,
@@ -29,5 +30,6 @@ export {
   DynamicOperatorType,
   ViewportStatus,
   VideoViewport,
+  MetadataModules,
   ImageQualityStatus,
 };

package/src/types/IVideoViewport.ts

@@ -19,15 +19,22 @@ export default interface IVideoViewport extends IViewport {
    */
   getProperties: () => VideoViewportProperties;
 
+  setVideo: (
+    imageIds: string | string[],
+    imageIdIndex?: number
+  ) => Promise<unknown>;
+
   setVideoURL: (url: string) => void;
 
   play: () => void;
 
   pause: () => void;
+
   /**
    * Reset the viewport properties to the default values
    */
   resetProperties(): void;
+
   /**
    * Centers Pan and resets the zoom for stack viewport.
    */

package/src/types/IViewport.ts

@@ -104,6 +104,8 @@ interface IViewport {
   setPan(pan: Point2, storeAsInitialCamera?: boolean);
   /** sets the camera */
   setCamera(cameraInterface: ICamera, storeAsInitialCamera?: boolean): void;
+  /** Gets the number of slices in the current camera orientation */
+  getNumberOfSlices(): number;
   /** whether the viewport has custom rendering */
   customRenderViewportToCanvas: () => unknown;
   _getCorners(bounds: Array<number>): Array<number>[];

package/src/types/VideoViewportProperties.ts

@@ -9,9 +9,7 @@ type VideoViewportProperties = ViewportProperties & {
   muted?: boolean;
   pan?: Point2;
   playbackRate?: number;
-  // The zoom factor, naming consistent with vtk cameras for now,
-  // but this isn't necessarily necessary.
-  parallelScale?: number;
+  scrollSpeed?: number;
 };
 
 export default VideoViewportProperties;

package/src/utilities/index.ts

@@ -52,6 +52,7 @@ import getImageLegacy from './getImageLegacy';
 import ProgressiveIterator from './ProgressiveIterator';
 import decimate from './decimate';
 import imageRetrieveMetadataProvider from './imageRetrieveMetadataProvider';
+import isVideoTransferSyntax from './isVideoTransferSyntax';
 
 // name spaces
 import * as planar from './planar';
@@ -119,4 +120,5 @@ export {
   decimate,
   imageRetrieveMetadataProvider,
   transferFunctionUtils,
+  isVideoTransferSyntax,
 };

package/src/utilities/isVideoTransferSyntax.ts

@@ -0,0 +1,26 @@
+export const videoUIDs = new Set<string>([
+  '1.2.840.10008.1.2.4.100',
+  '1.2.840.10008.1.2.4.100.1',
+  '1.2.840.10008.1.2.4.101',
+  '1.2.840.10008.1.2.4.101.1',
+  '1.2.840.10008.1.2.4.102',
+  '1.2.840.10008.1.2.4.102.1',
+  '1.2.840.10008.1.2.4.103',
+  '1.2.840.10008.1.2.4.103.1',
+  '1.2.840.10008.1.2.4.104',
+  '1.2.840.10008.1.2.4.104.1',
+  '1.2.840.10008.1.2.4.105',
+  '1.2.840.10008.1.2.4.105.1',
+  '1.2.840.10008.1.2.4.106',
+  '1.2.840.10008.1.2.4.106.1',
+  '1.2.840.10008.1.2.4.107',
+  '1.2.840.10008.1.2.4.108',
+]);
+
+export default function isVideoTransferSyntax(uidOrUids: string | string[]) {
+  if (!uidOrUids) {
+    return false;
+  }
+  const uids = Array.isArray(uidOrUids) ? uidOrUids : [uidOrUids];
+  return uids.find((uid) => videoUIDs.has(uid));
+}