@cornerstonejs/core 1.28.3 → 1.30.0

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/{dist/esm/RenderingEngine/vtkClasses/vtkSlabCamera.d.ts → src/RenderingEngine/vtkClasses/vtkSlabCamera.ts}

@@ -1,4 +1,7 @@
-import type { mat4 } from 'gl-matrix';
+import macro from '@kitware/vtk.js/macros';
+import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
+import vtkMath from '@kitware/vtk.js/Common/Core/Math';
+import { vec3, mat4 } from 'gl-matrix';
 import type { vtkObject } from '@kitware/vtk.js/interfaces';
 
 // Copied from VTKCamera
@@ -744,6 +747,10 @@ export interface vtkSlabCamera extends vtkObject {
   setIsPerformingCoordinateTransformation(status: boolean): void;
 }
 
+const DEFAULT_VALUES = {
+  isPerformingCoordinateTransformation: false,
+};
+
 /**
  * Method use to decorate a given object (publicAPI+model) with vtkRenderer characteristics.
  *
@@ -751,11 +758,20 @@ export interface vtkSlabCamera extends vtkObject {
  * @param model - object on which data structure will be bounds (protected)
  * @param initialValues -
  */
-export function extend(
+function extend(
   publicAPI: any,
   model: any,
-  initialValues?: ICameraInitialValues
-): void;
+  initialValues: ICameraInitialValues = {}
+): void {
+  Object.assign(model, DEFAULT_VALUES, initialValues);
+
+  vtkCamera.extend(publicAPI, model, initialValues);
+
+  macro.setGet(publicAPI, model, ['isPerformingCoordinateTransformation']);
+
+  // Object methods
+  vtkSlabCamera(publicAPI, model);
+}
 
 /**
  * Method use to create a new instance of vtkCamera with its focal point at the origin,
@@ -763,9 +779,8 @@ export function extend(
  * and the clipping range is (.1,1000).
  * @param initialValues - for pre-setting some of its content
  */
-export function newInstance(
-  initialValues?: ICameraInitialValues
-): vtkSlabCamera;
+const newInstance: (initialValues?: ICameraInitialValues) => vtkSlabCamera =
+  macro.newInstance(extend, 'vtkSlabCamera');
 
 /**
  * vtkCamera is a virtual camera for 3D rendering. It provides methods
@@ -774,8 +789,134 @@ export function newInstance(
  * complex methods allow the manipulation of the computer graphics model
  * including view up vector, clipping planes, and camera perspective.
  */
-export declare const vtkSlabCamera: {
-  newInstance: typeof newInstance;
-  extend: typeof extend;
-};
-export default vtkSlabCamera;
+
+/**
+ * vtkSlabCamera - A derived class of the core vtkCamera class
+ *
+ * This customization is necesssary because when we do coordinate transformations
+ * we need to set the cRange between [d, d + 0.1],
+ * where d is distance between the camera position and the focal point.
+ * While when we render we set to the clippingRange [0.01, d * 2],
+ * where d is the calculated from the bounds of all the actors.
+ *
+ * @param {*} publicAPI The public API to extend
+ * @param {*} model The private model to extend.
+ */
+function vtkSlabCamera(publicAPI, model) {
+  model.classHierarchy.push('vtkSlabCamera');
+
+  // Set up private variables and methods
+  const tmpMatrix = mat4.identity(new Float64Array(16) as unknown as mat4);
+  const tmpvec1 = new Float64Array(3) as unknown as vec3;
+
+  /**
+   * getProjectionMatrix - A fork of vtkCamera's getProjectionMatrix method.
+   * This fork performs most of the same actions, but define crange around
+   * model.distance when doing coordinate transformations.
+   */
+  publicAPI.getProjectionMatrix = (aspect, nearz, farz) => {
+    const result = mat4.create();
+
+    if (model.projectionMatrix) {
+      const scale = 1 / model.physicalScale;
+      vec3.set(tmpvec1, scale, scale, scale);
+
+      mat4.copy(result, model.projectionMatrix);
+      mat4.scale(result, result, tmpvec1);
+      mat4.transpose(result, result);
+      return result;
+    }
+
+    mat4.identity(tmpMatrix);
+
+    let cRange0 = model.clippingRange[0];
+    let cRange1 = model.clippingRange[1];
+    if (model.isPerformingCoordinateTransformation) {
+      /**
+       * NOTE: this is necessary because we want the coordinate transformation
+       * respect to the view plane (plane orthogonal to the camera and passing to
+       * the focal point).
+       *
+       * When vtk.js computes the coordinate transformations, it simply uses the
+       * camera matrix (no ray casting).
+       *
+       * However for the volume viewport the clipping range is set to be
+       * (-RENDERING_DEFAULTS.MAXIMUM_RAY_DISTANCE, RENDERING_DEFAULTS.MAXIMUM_RAY_DISTANCE).
+       * The clipping range is used in the camera method getProjectionMatrix().
+       * The projection matrix is used then for viewToWorld/worldToView methods of
+       * the renderer. This means that vkt.js will not return the coordinates of
+       * the point on the view plane (i.e. the depth coordinate will corresponded
+       * to the focal point).
+       *
+       * Therefore the clipping range has to be set to (distance, distance + 0.01),
+       * where now distance is the distance between the camera position and focal
+       * point. This is done internally, in our camera customization when the flag
+       * isPerformingCoordinateTransformation is set to true.
+       */
+      cRange0 = model.distance;
+      cRange1 = model.distance + 0.1;
+    }
+
+    const cWidth = cRange1 - cRange0;
+    const cRange = [
+      cRange0 + ((nearz + 1) * cWidth) / 2.0,
+      cRange0 + ((farz + 1) * cWidth) / 2.0,
+    ];
+
+    if (model.parallelProjection) {
+      // set up a rectangular parallelipiped
+      const width = model.parallelScale * aspect;
+      const height = model.parallelScale;
+
+      const xmin = (model.windowCenter[0] - 1.0) * width;
+      const xmax = (model.windowCenter[0] + 1.0) * width;
+      const ymin = (model.windowCenter[1] - 1.0) * height;
+      const ymax = (model.windowCenter[1] + 1.0) * height;
+
+      mat4.ortho(tmpMatrix, xmin, xmax, ymin, ymax, cRange[0], cRange[1]);
+      mat4.transpose(tmpMatrix, tmpMatrix);
+    } else if (model.useOffAxisProjection) {
+      throw new Error('Off-Axis projection is not supported at this time');
+    } else {
+      const tmp = Math.tan(vtkMath.radiansFromDegrees(model.viewAngle) / 2.0);
+      let width;
+      let height;
+      if (model.useHorizontalViewAngle === true) {
+        width = cRange0 * tmp;
+        height = (cRange0 * tmp) / aspect;
+      } else {
+        width = cRange0 * tmp * aspect;
+        height = cRange0 * tmp;
+      }
+
+      const xmin = (model.windowCenter[0] - 1.0) * width;
+      const xmax = (model.windowCenter[0] + 1.0) * width;
+      const ymin = (model.windowCenter[1] - 1.0) * height;
+      const ymax = (model.windowCenter[1] + 1.0) * height;
+      const znear = cRange[0];
+      const zfar = cRange[1];
+
+      tmpMatrix[0] = (2.0 * znear) / (xmax - xmin);
+      tmpMatrix[5] = (2.0 * znear) / (ymax - ymin);
+      tmpMatrix[2] = (xmin + xmax) / (xmax - xmin);
+      tmpMatrix[6] = (ymin + ymax) / (ymax - ymin);
+      tmpMatrix[10] = -(znear + zfar) / (zfar - znear);
+      tmpMatrix[14] = -1.0;
+      tmpMatrix[11] = (-2.0 * znear * zfar) / (zfar - znear);
+      tmpMatrix[15] = 0.0;
+    }
+
+    mat4.copy(result, tmpMatrix);
+
+    return result;
+  };
+}
+
+// ----------------------------------------------------------------------------
+// Object factory
+// ----------------------------------------------------------------------------
+
+// ----------------------------------------------------------------------------
+
+export default { newInstance, extend };
+export { newInstance, extend };

package/src/cache/cache.ts

@@ -377,7 +377,10 @@ class Cache implements ICache {
           return;
         }
 
-        if (Number.isNaN(image.sizeInBytes)) {
+        if (
+          image.sizeInBytes === undefined ||
+          Number.isNaN(image.sizeInBytes)
+        ) {
           throw new Error(
             'putImageLoadObject: image.sizeInBytes must not be undefined'
           );

package/src/enums/Events.ts

@@ -85,12 +85,21 @@ enum Events {
    */
   IMAGE_VOLUME_LOADING_COMPLETED = 'CORNERSTONE_IMAGE_VOLUME_LOADING_COMPLETED',
   /**
-   * Triggers on the eventTarget when the image has successfully loaded by imageLoaders
+   * Triggers on the eventTarget when the image has successfully loaded by imageLoaders.
+   * This event may be fired multiple times for different statuses as the image data gets loaded.
    *
    * Make use of {@link EventTypes.ImageLoadedEvent | ImageLoaded Event Type } for typing your event listeners for IMAGE_LOADED event,
    * and see what event detail is included in {@link EventTypes.ImageLoadedEventDetail | ImageLoaded Event Detail }
    */
   IMAGE_LOADED = 'CORNERSTONE_IMAGE_LOADED',
+  /**
+   * Triggers on the eventTarget when progressive loading stages are completed.
+   * That is, the stage is complete for all images included in that stage (which
+   * can be zero).  If you need individual image load information related to
+   * the stage, see the status attribute on the IMAGE_LOADED event - which has
+   * the status of the image, but not the actual stage that loaded it.
+   */
+  IMAGE_RETRIEVAL_STAGE = 'CORNERSTONE_IMAGE_RETRIEVAL_STAGE',
   /**
    * Triggers on the eventTarget when the image has failed loading by imageLoaders
    *
@@ -176,14 +185,6 @@ enum Events {
    * and see what event detail is included in {@link EventTypes.ImageSpacingCalibratedEventDetail | ImageSpacingCalibrated Event Detail }
    */
   IMAGE_SPACING_CALIBRATED = 'CORNERSTONE_IMAGE_SPACING_CALIBRATED',
-  /**
-   * Triggers on the eventTarget when there is a progress in the image load process. Note: this event
-   * is being used in the dicom-image-loader repository. See {@link https://github.com/cornerstonejs/cornerstoneDICOMImageLoader/blob/master/src/imageLoader/internal/xhrRequest.js | here}
-   *
-   * Make use of {@link EventTypes.ImageLoadProgress | ImageLoadProgress Event Type } for typing your event listeners for IMAGE_LOAD_PROGRESS event,
-   * and see what event detail is included in {@link EventTypes.ImageLoadProgressEventDetail | ImageLoadProgress Event Detail }
-   */
-  IMAGE_LOAD_PROGRESS = 'CORNERSTONE_IMAGE_LOAD_PROGRESS',
 
   /**
    * Triggers on the event target when a new stack is set on its stack viewport.

package/src/enums/ImageQualityStatus.ts

@@ -0,0 +1,37 @@
+/**
+ * Status of a frame as it gets loaded.  This is ordered, with lower
+ * values being more lossy, and higher values being less lossy.
+ */
+enum ImageQualityStatus {
+  /**
+   *  Replicate is a duplicated image, from some larger distance
+   */
+  FAR_REPLICATE = 1,
+
+  // Skipping a value here and after the next replicate to allow for interpolation
+  // enum values.
+
+  /**
+   * Adjacent replicate is a duplicated image of a nearby image
+   */
+  ADJACENT_REPLICATE = 3,
+
+  /**
+   * Sub resolution images are encodings of smaller than full resolution
+   * images.  The encoding may or may not be lossy, but the lower resolution
+   * means it has lost information already compared to full resolution/lossless.
+   */
+  SUBRESOLUTION = 6,
+
+  /**
+   *  Lossy images, encoded with a lossy encoding, but full resolution or size.
+   */
+  LOSSY = 7,
+  /**
+   *  Full resolution means the image is full resolution/complete data/lossless
+   * (or at least as lossless as the image is going to get)
+   */
+  FULL_RESOLUTION = 8,
+}
+
+export default ImageQualityStatus;