@cornerstonejs/core 1.55.0 → 1.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "1.55.0",
+  "version": "1.56.0",
   "description": "",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -47,5 +47,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "78d3c2fd9e2cd07d1ec5b84201f9f909ff6ce7cf"
+  "gitHead": "73863e2aac88c70974cf966ca4e0eae11c1e67dc"
 }

package/src/RenderingEngine/CanvasActor/CanvasMapper.ts

@@ -0,0 +1,17 @@
+import CanvasActor from '.';
+
+/**
+ * Mimics the VTK mapper functionality, but for non-vtk canvas based rendering
+ * classes.
+ */
+export default class CanvasMapper {
+  private actor: CanvasActor;
+
+  constructor(actor: CanvasActor) {
+    this.actor = actor;
+  }
+
+  getInputData() {
+    return this.actor.getImage();
+  }
+}

package/src/RenderingEngine/CanvasActor/CanvasProperties.ts

@@ -0,0 +1,49 @@
+import CanvasActor from '.';
+
+/**
+ * Properties for rendering on a labelmap canvas actor.
+ * Mostly a no-op right now, but the transfer function settings are live.
+ */
+export default class CanvasProperties {
+  private actor: CanvasActor;
+  private opacity = 0.4;
+  private outlineOpacity = 0.4;
+  private transferFunction = [];
+
+  constructor(actor: CanvasActor) {
+    this.actor = actor;
+  }
+
+  public setRGBTransferFunction(index, cfun) {
+    this.transferFunction[index] = cfun;
+  }
+
+  public setScalarOpacity(opacity: number) {
+    // No-op until this gets set correctly
+    // this.opacity = opacity;
+  }
+
+  public setInterpolationTypeToNearest() {
+    // No-op
+  }
+
+  public setUseLabelOutline() {
+    // No-op - not implemented
+  }
+
+  public setLabelOutlineOpacity(opacity) {
+    this.outlineOpacity = opacity;
+  }
+
+  public setLabelOutlineThickness() {
+    // No-op - requires outline to be implemented first
+  }
+
+  public getColor(index: number) {
+    const cfun = this.transferFunction[0];
+    const r = cfun.getRedValue(index);
+    const g = cfun.getGreenValue(index);
+    const b = cfun.getBlueValue(index);
+    return [r, g, b, this.opacity];
+  }
+}

package/src/RenderingEngine/CanvasActor/index.ts

@@ -0,0 +1,231 @@
+import type { IViewport } from '../../types/IViewport';
+import type { ICanvasActor } from '../../types/IActor';
+import CanvasProperties from './CanvasProperties';
+import CanvasMapper from './CanvasMapper';
+
+/**
+ * Handles canvas rendering of derived image data, typically label maps.
+ * This class will update the canvas from the given viewport with a
+ * derived image.  The derived image can be a standard Cornerstone labelmap
+ * or be an RLE based one.  The RLE based ones are significantly faster to
+ * render as they only render the area actually relevant.
+ */
+export default class CanvasActor implements ICanvasActor {
+  private image;
+  private derivedImage;
+  private canvasProperties = new CanvasProperties(this);
+  private visibility = false;
+  private mapper = new CanvasMapper(this);
+  private viewport;
+  protected className = 'CanvasActor';
+  protected canvas;
+
+  constructor(viewport: IViewport, derivedImage) {
+    this.derivedImage = derivedImage;
+    this.viewport = viewport;
+  }
+
+  /**
+   * Renders an RLE representation of the viewport data.  This is optimized to
+   * avoid iterating over any data not actually containing data.
+   */
+  protected renderRLE(viewport, context, voxelManager) {
+    const { width, height } = this.image;
+    let { canvas } = this;
+    if (!canvas || canvas.width !== width || canvas.height !== height) {
+      this.canvas = canvas = new window.OffscreenCanvas(width, height);
+    }
+    const localContext = canvas.getContext('2d');
+    const imageData = localContext.createImageData(width, height);
+    const { data: imageArray } = imageData;
+    imageArray.fill(0);
+    const { map } = voxelManager;
+    let dirtyX = Infinity;
+    let dirtyY = Infinity;
+    let dirtyX2 = -Infinity;
+    let dirtyY2 = -Infinity;
+    for (let y = 0; y < height; y++) {
+      const row = map.getRun(y, 0);
+      if (!row) {
+        continue;
+      }
+      dirtyY = Math.min(dirtyY, y);
+      dirtyY2 = Math.max(dirtyY2, y);
+      const baseOffset = (y * width) << 2;
+      let indicesToDelete;
+      for (const run of row) {
+        const { start: start, end, value: segmentIndex } = run;
+        if (segmentIndex === 0) {
+          indicesToDelete ||= [];
+          indicesToDelete.push(row.indexOf(run));
+          continue;
+        }
+        dirtyX = Math.min(dirtyX, start);
+        dirtyX2 = Math.max(dirtyX2, end);
+        const rgb = this.canvasProperties
+          .getColor(segmentIndex)
+          .map((v) => v * 255);
+        let startOffset = baseOffset + (start << 2);
+
+        for (let i = start; i < end; i++) {
+          imageArray[startOffset++] = rgb[0];
+          imageArray[startOffset++] = rgb[1];
+          imageArray[startOffset++] = rgb[2];
+          imageArray[startOffset++] = rgb[3];
+        }
+      }
+    }
+
+    if (dirtyX > width) {
+      return;
+    }
+    const dirtyWidth = dirtyX2 - dirtyX;
+    const dirtyHeight = dirtyY2 - dirtyY;
+    localContext.putImageData(
+      imageData,
+      0,
+      0,
+      dirtyX,
+      dirtyY,
+      dirtyWidth,
+      dirtyHeight
+    );
+    context.drawImage(
+      canvas,
+      dirtyX,
+      dirtyY,
+      dirtyWidth,
+      dirtyHeight,
+      dirtyX,
+      dirtyY,
+      dirtyWidth,
+      dirtyHeight
+    );
+  }
+
+  public render(viewport: IViewport, context: CanvasRenderingContext2D): void {
+    if (!this.visibility) {
+      return;
+    }
+    const image = this.image || this.getImage();
+
+    const { width, height } = image;
+
+    const data = image.getScalarData();
+    if (!data) {
+      return;
+    }
+    const { voxelManager } = image;
+    if (voxelManager) {
+      if (voxelManager.map.getRun) {
+        return this.renderRLE(viewport, context, voxelManager);
+      }
+    }
+    let { canvas } = this;
+    if (!canvas || canvas.width !== width || canvas.height !== height) {
+      this.canvas = canvas = new window.OffscreenCanvas(width, height);
+    }
+    const localContext = canvas.getContext('2d');
+    const imageData = localContext.createImageData(width, height);
+    const { data: imageArray } = imageData;
+    let offset = 0;
+    let destOffset = 0;
+    let dirtyX = Infinity;
+    let dirtyY = Infinity;
+    let dirtyX2 = -Infinity;
+    let dirtyY2 = -Infinity;
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        // const destOffset = (x + y * width) * 4;
+        const segmentIndex = data[offset++];
+        if (segmentIndex) {
+          dirtyX = Math.min(x, dirtyX);
+          dirtyY = Math.min(y, dirtyY);
+          dirtyX2 = Math.max(x, dirtyX2);
+          dirtyY2 = Math.max(y, dirtyY2);
+          const rgb = this.canvasProperties.getColor(segmentIndex);
+          imageArray[destOffset] = rgb[0] * 255;
+          imageArray[destOffset + 1] = rgb[1] * 255;
+          imageArray[destOffset + 2] = rgb[2] * 255;
+          imageArray[destOffset + 3] = 127;
+          // imageArray.fill(55, offset, offset + 4);
+        }
+        destOffset += 4;
+      }
+    }
+
+    if (dirtyX > width) {
+      return;
+    }
+    const dirtyWidth = dirtyX2 - dirtyX + 1;
+    const dirtyHeight = dirtyY2 - dirtyY + 1;
+    localContext.putImageData(
+      imageData,
+      0,
+      0,
+      dirtyX,
+      dirtyY,
+      dirtyWidth,
+      dirtyHeight
+    );
+    context.drawImage(
+      canvas,
+      dirtyX,
+      dirtyY,
+      dirtyWidth,
+      dirtyHeight,
+      dirtyX,
+      dirtyY,
+      dirtyWidth,
+      dirtyHeight
+    );
+  }
+
+  public getClassName() {
+    return this.className;
+  }
+
+  public getProperty() {
+    return this.canvasProperties;
+  }
+
+  public setVisibility(visibility: boolean) {
+    this.visibility = visibility;
+  }
+
+  public getMapper() {
+    return this.mapper;
+  }
+
+  public isA(actorType) {
+    return actorType === this.className;
+  }
+
+  public getImage() {
+    if (this.image) {
+      return this.image;
+    }
+    this.image = { ...this.derivedImage };
+    const imageData = this.viewport.getImageData();
+    Object.assign(this.image, {
+      worldToIndex: (worldPos) => imageData.imageData.worldToIndex(worldPos),
+      indexToWorld: (index) => imageData.imageData.indexToWorld(index),
+      getDimensions: () => imageData.dimensions,
+      getScalarData: () => this.derivedImage?.getPixelData(),
+      getDirection: () => imageData.direction,
+      getSpacing: () => imageData.spacing,
+      setOrigin: () => null,
+      /**
+       * Stores the new image cache data to update the image object, and sets
+       * the image instance (this object) to null so that the next getImage
+       * refreshes the display.
+       */
+      setDerivedImage: (image) => {
+        this.derivedImage = image;
+        this.image = null;
+      },
+      modified: () => null,
+    });
+    return this.image;
+  }
+}

package/src/RenderingEngine/VideoViewport.ts

@@ -1,7 +1,7 @@
 import { vec3 } from 'gl-matrix';
 import {
   Events as EVENTS,
-  VideoViewport as VideoViewportEnum,
+  VideoEnums as VideoViewportEnum,
   MetadataModules,
 } from '../enums';
 import type {
@@ -13,6 +13,8 @@ import type {
   InternalVideoCamera,
   VideoViewportInput,
   VOIRange,
+  ICanvasActor,
+  IImage,
   TargetSpecifier,
 } from '../types';
 import * as metaData from '../metaData';
@@ -20,6 +22,16 @@ import { Transform } from './helpers/cpuFallback/rendering/transform';
 import { triggerEvent } from '../utilities';
 import Viewport from './Viewport';
 import { getOrCreateCanvas } from './helpers';
+import CanvasActor from './CanvasActor';
+import cache from '../cache';
+
+/**
+ * A data type for the scalar data for video data.
+ */
+export type CanvasScalarData = Uint8ClampedArray & {
+  frameNumber?: number;
+  getRange?: () => [number, number];
+};
 
 /**
  * An object representing a single stack viewport, which is a camera
@@ -43,6 +55,8 @@ class VideoViewport extends Viewport implements IVideoViewport {
   private isPlaying = false;
   private scrollSpeed = 1;
   private playbackRate = 1;
+  private scalarData: CanvasScalarData;
+
   /**
    * The range is the set of frames to play
    */
@@ -132,11 +146,9 @@ class VideoViewport extends Viewport implements IVideoViewport {
     this.videoElement.remove();
   }
 
-  private _getImageDataMetadata() {
-    const imagePlaneModule = metaData.get(
-      MetadataModules.IMAGE_PLANE,
-      this.imageId
-    );
+  public getImageDataMetadata(image: IImage | string) {
+    const imageId = typeof image === 'string' ? image : image.imageId;
+    const imagePlaneModule = metaData.get(MetadataModules.IMAGE_PLANE, imageId);
 
     let rowCosines = <Point3>imagePlaneModule.rowCosines;
     let columnCosines = <Point3>imagePlaneModule.columnCosines;
@@ -159,8 +171,6 @@ class VideoViewport extends Viewport implements IVideoViewport {
     );
 
     const { rows, columns } = imagePlaneModule;
-    this.videoWidth = columns;
-    this.videoHeight = rows;
     const scanAxisNormal = vec3.create();
     vec3.cross(scanAxisNormal, rowCosineVec, colCosineVec);
 
@@ -183,6 +193,8 @@ class VideoViewport extends Viewport implements IVideoViewport {
       bitsAllocated: 8,
       numComps: 3,
       origin,
+      rows,
+      columns,
       direction: [...rowCosineVec, ...colCosineVec, ...scanAxisNormal],
       dimensions: [xVoxels, yVoxels, zVoxels],
       spacing: [xSpacing, ySpacing, zSpacing],
@@ -202,7 +214,7 @@ class VideoViewport extends Viewport implements IVideoViewport {
     const { rendered } = metaData.get(MetadataModules.IMAGE_URL, imageId);
     const generalSeries = metaData.get(MetadataModules.GENERAL_SERIES, imageId);
     this.modality = generalSeries?.Modality;
-    this.metadata = this._getImageDataMetadata();
+    this.metadata = this.getImageDataMetadata(imageId);
 
     return this.setVideoURL(rendered).then(() => {
       let { cineRate, numberOfFrames } = metaData.get(
@@ -224,11 +236,14 @@ class VideoViewport extends Viewport implements IVideoViewport {
       this.play();
       // This is ugly, but without it, the video often fails to render initially
       // so having a play, followed by a pause fixes things.
-      // 50 ms is a tested value that seems to work to prevent exceptions
-      window.setTimeout(() => {
-        this.pause();
-        this.setFrameNumber(frameNumber || 1);
-      }, 50);
+      // 100 ms is a tested value that seems to work to prevent exceptions
+      return new Promise((resolve) => {
+        window.setTimeout(() => {
+          this.pause();
+          this.setFrameNumber(frameNumber || 1);
+          resolve(this);
+        }, 100);
+      });
     });
   }
 
@@ -257,6 +272,19 @@ class VideoViewport extends Viewport implements IVideoViewport {
     });
   }
 
+  /**
+   * Gets all the image ids associated with this video element.  This will
+   * have # of frames elements.
+   */
+  public getImageIds(): string[] {
+    const imageIds = new Array<string>(this.numberOfFrames);
+    const baseImageId = this.imageId.replace(/[0-9]+$/, '');
+    for (let i = 0; i < this.numberOfFrames; i++) {
+      imageIds[i] = `${baseImageId}${i + 1}`;
+    }
+    return imageIds;
+  }
+
   public togglePlayPause(): boolean {
     if (this.isPlaying) {
       this.pause();
@@ -454,7 +482,10 @@ class VideoViewport extends Viewport implements IVideoViewport {
     });
   }
 
-  protected getScalarData() {
+  protected getScalarData(): CanvasScalarData {
+    if (this.scalarData?.frameNumber === this.getFrameNumber()) {
+      return this.scalarData;
+    }
     const canvas = document.createElement('canvas');
     canvas.width = this.videoWidth;
     canvas.height = this.videoHeight;
@@ -466,8 +497,10 @@ class VideoViewport extends Viewport implements IVideoViewport {
       this.videoWidth,
       this.videoHeight
     );
-    const { data: scalarData } = canvasData;
-    (scalarData as any).getRange = () => [0, 255];
+    const scalarData = canvasData.data as CanvasScalarData;
+    scalarData.getRange = () => [0, 255];
+    scalarData.frameNumber = this.getFrameNumber();
+    this.scalarData = scalarData;
     return scalarData;
   }
 
@@ -866,6 +899,34 @@ class VideoViewport extends Viewport implements IVideoViewport {
     );
     return transform;
   }
+
+  /**
+   * Nothing to do for the clipping planes for video as they don't exist.
+   */
+  public updateCameraClippingPlanesAndRange() {
+    // No-op
+  }
+
+  public addImages(stackInputs: Array<any>) {
+    const actors = this.getActors();
+    stackInputs.forEach((stackInput) => {
+      const image = cache.getImage(stackInput.imageId);
+
+      const imageActor = this.createActorMapper(image);
+      if (imageActor) {
+        actors.push({ uid: stackInput.actorUID, actor: imageActor });
+        if (stackInput.callback) {
+          stackInput.callback({ imageActor, imageId: stackInput.imageId });
+        }
+      }
+    });
+    this.setActors(actors);
+  }
+
+  protected createActorMapper(image) {
+    return new CanvasActor(this, image);
+  }
+
   private renderFrame = () => {
     const transform = this.getTransform();
     const transformationMatrix: number[] = transform.getMatrix();
@@ -887,9 +948,13 @@ class VideoViewport extends Viewport implements IVideoViewport {
       this.videoHeight
     );
 
+    for (const actor of this.getActors()) {
+      (actor.actor as ICanvasActor).render(this, this.canvasContext);
+    }
     this.canvasContext.resetTransform();
 
-    triggerEvent(this.element, EVENTS.IMAGE_RENDERED, {
+    // This is stack new image to agree with stack/non-volume viewports
+    triggerEvent(this.element, EVENTS.STACK_NEW_IMAGE, {
       element: this.element,
       viewportId: this.id,
       viewport: this,

package/src/RenderingEngine/Viewport.ts

@@ -504,7 +504,7 @@ class Viewport implements IViewport {
     }
 
     const renderer = this.getRenderer();
-    renderer.addActor(actor);
+    renderer?.addActor(actor);
     this._actors.set(actorUID, Object.assign({}, actorEntry));
 
     // when we add an actor we should update the camera clipping range and
@@ -516,7 +516,7 @@ class Viewport implements IViewport {
    * Remove all actors from the renderer
    */
   public removeAllActors(): void {
-    this.getRenderer().removeAllViewProps();
+    this.getRenderer()?.removeAllViewProps();
     this._actors = new Map();
     return;
   }

package/src/RenderingEngine/helpers/addImageSlicesToViewports.ts

@@ -33,9 +33,9 @@ async function addImageSlicesToViewports(
     }
 
     // if not instance of BaseVolumeViewport, throw
-    if (!(viewport instanceof StackViewport)) {
+    if (!(viewport as IStackViewport).addImages) {
       console.warn(
-        `Viewport with Id ${viewportId} is not a StackViewport. Cannot add image segmentation to this viewport.`
+        `Viewport with Id ${viewportId} does not have addImages. Cannot add image segmentation to this viewport.`
       );
 
       return;

package/src/RenderingEngine/vtkClasses/vtkStreamingOpenGLTexture.js

@@ -4,7 +4,7 @@ import HalfFloat from '@kitware/vtk.js/Common/Core/HalfFloat';
 import { getConfiguration } from '../../init';
 
 /**
- * vtkStreamingOpenGLTexture - A dervied class of the core vtkOpenGLTexture.
+ * vtkStreamingOpenGLTexture - A derived class of the core vtkOpenGLTexture.
  * This class has methods to update the texture memory on the GPU slice by slice
  * in an efficient yet GPU-architecture friendly manner.
  *

package/src/enums/index.ts

@@ -12,7 +12,7 @@ import DynamicOperatorType from './DynamicOperatorType';
 import CalibrationTypes from './CalibrationTypes';
 import ViewportStatus from './ViewportStatus';
 import ImageQualityStatus from './ImageQualityStatus';
-import * as VideoViewport from './VideoViewport';
+import * as VideoEnums from './VideoEnums';
 import MetadataModules from './MetadataModules';
 
 export {
@@ -29,7 +29,7 @@ export {
   VOILUTFunctionType,
   DynamicOperatorType,
   ViewportStatus,
-  VideoViewport,
+  VideoEnums,
   MetadataModules,
   ImageQualityStatus,
 };

package/src/loaders/imageLoader.ts

@@ -28,24 +28,37 @@ export interface ImageLoaderOptions {
   additionalDetails?: Record<string, unknown>;
 }
 
-interface DerivedImageOptions {
-  imageId?: string;
-  targetBufferType?: PixelDataTypedArrayString;
-}
-
 interface DerivedImages {
   imageIds: Array<string>;
   promises: Array<Promise<IImage>>;
 }
 
-interface LocalImageOptions {
+type LocalImageOptions = {
   scalarData?: PixelDataTypedArray;
   targetBufferType?: PixelDataTypedArrayString;
   dimensions?: Point2;
   spacing?: Point3;
   origin?: Point3;
   direction?: Mat3;
-}
+  /**
+   * Skip creation of the actual buffer object.
+   * In fact, this creates a very short buffer, as there are lots of places
+   * assuming a buffer exists.
+   * This can be used when there are alternative representations of the image data.
+   */
+  skipCreateBuffer?: boolean;
+  /**
+   * A method to call to update the image object when it gets added to the cache.
+   * This can be used to create alternative representations of the image data,
+   * such as a VoxelManager.
+   */
+  onCacheAdd?: (image: IImage) => void;
+};
+
+type DerivedImageOptions = LocalImageOptions & {
+  imageId?: string;
+  targetBufferType?: PixelDataTypedArrayString;
+};
 
 /**
  * This module deals with ImageLoaders, loading images and caching images
@@ -248,6 +261,8 @@ export function createAndCacheDerivedImage(
     options.imageId = `derived:${uuidv4()}`;
   }
 
+  const { imageId, skipCreateBuffer, onCacheAdd } = options;
+
   const imagePlaneModule = metaData.get('imagePlaneModule', referencedImageId);
 
   const length = imagePlaneModule.rows * imagePlaneModule.columns;
@@ -257,8 +272,11 @@ export function createAndCacheDerivedImage(
     length
   );
 
-  const imageScalarData = new TypedArrayConstructor(length);
-  const derivedImageId = options.imageId;
+  // Use a buffer of size 1 for no data
+  const imageScalarData = new TypedArrayConstructor(
+    skipCreateBuffer ? 1 : length
+  );
+  const derivedImageId = imageId;
 
   ['imagePixelModule', 'imagePlaneModule', 'generalSeriesModule'].forEach(
     (type) => {
@@ -270,8 +288,8 @@ export function createAndCacheDerivedImage(
   );
 
   const localImage = createAndCacheLocalImage(
-    { scalarData: imageScalarData },
-    options.imageId,
+    { scalarData: imageScalarData, onCacheAdd, skipCreateBuffer },
+    imageId,
     true
   );
 
@@ -292,10 +310,11 @@ export function createAndCacheDerivedImage(
  * @param options
  * @param options.getDerivedImageId - function to get the derived imageId
  * @param options.targetBufferType - target buffer type
+ * @param options.skipBufferCreate - avoid creating the buffer
  */
 export function createAndCacheDerivedImages(
   referencedImageIds: Array<string>,
-  options: {
+  options: DerivedImageOptions & {
     getDerivedImageId?: (referencedImageId: string) => string;
     targetBufferType?: PixelDataTypedArrayString;
   } = {}
@@ -309,9 +328,8 @@ export function createAndCacheDerivedImages(
   const derivedImageIds = [];
   const allPromises = referencedImageIds.map((referencedImageId) => {
     const newOptions: DerivedImageOptions = {
-      imageId: options.getDerivedImageId
-        ? options.getDerivedImageId(referencedImageId)
-        : `derived:${uuidv4()}`,
+      imageId:
+        options.getDerivedImageId?.(referencedImageId) || `derived:${uuidv4()}`,
       ...options,
     };
     derivedImageIds.push(newOptions.imageId);
@@ -370,7 +388,7 @@ export function createAndCacheLocalImage(
 
     image.sizeInBytes = imageScalarData.byteLength;
     image.getPixelData = () => imageScalarData;
-  } else {
+  } else if (options.skipCreateBuffer !== true) {
     const { numBytes, TypedArrayConstructor } = getBufferConfiguration(
       options.targetBufferType,
       length
@@ -382,6 +400,11 @@ export function createAndCacheLocalImage(
     image.getPixelData = () => imageScalarData;
   }
 
+  // The onCacheAdd may modify the size in bytes for this image, which is ok,
+  // as this is used after resolution for cache storage.  It may also do
+  // thinks like adding alternative representations such as VoxelManager
+  options.onCacheAdd?.(image);
+
   const imageLoadObject = {
     promise: Promise.resolve(image),
   };