@cornerstonejs/core 2.0.0-beta.6 → 2.0.0-beta.8

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,232 @@
+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, 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 - 1,
+      dirtyY - 1,
+      dirtyWidth + 2,
+      dirtyHeight + 2
+    );
+    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, destPoint) =>
+        imageData.imageData.indexToWorld(index, destPoint),
+      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/RenderingEngine.ts

@@ -11,8 +11,13 @@ import viewportTypeUsesCustomRenderingPipeline from './helpers/viewportTypeUsesC
 import getOrCreateCanvas from './helpers/getOrCreateCanvas';
 import { getShouldUseCPURendering, isCornerstoneInitialized } from '../init';
 import type IStackViewport from '../types/IStackViewport';
+import type IVideoViewport from '../types/IVideoViewport';
 import type IRenderingEngine from '../types/IRenderingEngine';
 import type IVolumeViewport from '../types/IVolumeViewport';
+import type { IViewport } from '../types/IViewport';
+import VideoViewport from './VideoViewport';
+import viewportTypeToViewportClass from './helpers/viewportTypeToViewportClass';
+
 import type * as EventTypes from '../types/EventTypes';
 import type {
   ViewportInput,
@@ -20,7 +25,7 @@ import type {
   InternalViewportInput,
   NormalizedViewportInput,
 } from '../types/IViewport';
-import { OrientationAxis, ViewportStatus } from '../enums';
+import { OrientationAxis } from '../enums';
 import VolumeViewport3D from './VolumeViewport3D';
 
 type ViewportDisplayCoords = {
@@ -43,6 +48,7 @@ const VIEWPORT_MIN_SIZE = 2;
  * to leverage the power of vtk.js whilst only using one WebGL context for the processing, and allowing
  * us to share texture memory across on-screen viewports that show the same data.
  *
+ *
  * Instantiating a rendering engine:
  * ```js
  * const renderingEngine = new RenderingEngine('pet-ct-rendering-engine');
@@ -73,7 +79,7 @@ class RenderingEngine implements IRenderingEngine {
   public hasBeenDestroyed: boolean;
   public offscreenMultiRenderWindow: any;
   readonly offScreenCanvasContainer: any; // WebGL
-  private _viewports: Map<string, IStackViewport | IVolumeViewport>;
+  private _viewports: Map<string, IViewport>;
   private _needsRender: Set<string> = new Set();
   private _animationFrameSet = false;
   private _animationFrameHandle: number | null = null;
@@ -149,9 +155,7 @@ class RenderingEngine implements IRenderingEngine {
 
     // 1.a) If there is a found viewport, we remove the viewport and create a new viewport
     if (viewport) {
-      console.log('Viewport already exists, disabling it first');
       this.disableElement(viewportId);
-      console.log(`Viewport ${viewportId} disabled`);
     }
 
     // 2.a) See if viewport uses a custom rendering pipeline.
@@ -227,13 +231,11 @@ class RenderingEngine implements IRenderingEngine {
       this._clearAnimationFrame();
     }
 
-    // 8. Resize the offScreen canvas to accommodate for the new size (after removal)
-    // Note: Resize should not reset pan and zoom when disabling an element.
-    // This is because we are only resizing the offscreen canvas to deal with the element
-    // which was removed, and do not wish to alter the current state of any other currently enabled element
-    const immediate = true;
-    const keepCamera = true;
-    this.resize(immediate, keepCamera);
+    // Note: we should not call resize at the end of here, the reason is that
+    // in batch rendering, we might disable a viewport and enable others at the same
+    // time which would interfere with each other. So we just let the enable
+    // to call resize, and also resize getting called by applications on the
+    // DOM resize event.
   }
 
   /**
@@ -302,6 +304,14 @@ class RenderingEngine implements IRenderingEngine {
 
     this.setVtkjsDrivenViewports(vtkDrivenViewportInputEntries);
     this.setCustomViewports(customRenderingViewportInputEntries);
+
+    // Making sure the setViewports api also can fill the canvas
+    // properly
+    viewportInputEntries.forEach((vp) => {
+      const canvas = getOrCreateCanvas(vp.element);
+      const { background } = vp.defaultOptions;
+      this.fillCanvasWithBackgroundColor(canvas, background);
+    });
   }
 
   /**
@@ -346,7 +356,7 @@ class RenderingEngine implements IRenderingEngine {
    *
    * @returns viewport
    */
-  public getViewport(viewportId: string): IStackViewport | IVolumeViewport {
+  public getViewport(viewportId: string): IViewport {
     return this._viewports.get(viewportId);
   }
 
@@ -355,7 +365,7 @@ class RenderingEngine implements IRenderingEngine {
    *
    * @returns Array of viewports
    */
-  public getViewports(): Array<IStackViewport | IVolumeViewport> {
+  public getViewports(): Array<IViewport> {
     this._throwIfDestroyed();
 
     return this._getViewportsAsArray();
@@ -371,12 +381,30 @@ class RenderingEngine implements IRenderingEngine {
     const viewports = this.getViewports();
 
     const isStackViewport = (
-      viewport: IStackViewport | IVolumeViewport
+      viewport: IViewport
     ): viewport is StackViewport => {
       return viewport instanceof StackViewport;
     };
 
-    return viewports.filter(isStackViewport);
+    return viewports.filter(isStackViewport) as Array<IStackViewport>;
+  }
+
+  /**
+   * Filters all the available viewports and return the stack viewports
+   * @returns stack viewports registered on the rendering Engine
+   */
+  public getVideoViewports(): Array<IVideoViewport> {
+    this._throwIfDestroyed();
+
+    const viewports = this.getViewports();
+
+    const isVideoViewport = (
+      viewport: IViewport
+    ): viewport is VideoViewport => {
+      return viewport instanceof VideoViewport;
+    };
+
+    return viewports.filter(isVideoViewport) as Array<IVideoViewport>;
   }
 
   /**
@@ -389,7 +417,7 @@ class RenderingEngine implements IRenderingEngine {
     const viewports = this.getViewports();
 
     const isVolumeViewport = (
-      viewport: IStackViewport | IVolumeViewport
+      viewport: IViewport
     ): viewport is BaseVolumeViewport => {
       return viewport instanceof BaseVolumeViewport;
     };
@@ -574,6 +602,10 @@ class RenderingEngine implements IRenderingEngine {
     keepCamera = true,
     immediate = true
   ) {
+    // Ensure all the canvases are ready for rendering
+    vtkDrivenViewports.forEach((vp: IStackViewport | IVolumeViewport) => {
+      getOrCreateCanvas(vp.element);
+    });
     const canvasesDrivenByVtkJs = vtkDrivenViewports.map((vp) => vp.canvas);
 
     if (canvasesDrivenByVtkJs.length) {
@@ -591,17 +623,37 @@ class RenderingEngine implements IRenderingEngine {
 
     // 3. Reset viewport cameras
     vtkDrivenViewports.forEach((vp: IStackViewport | IVolumeViewport) => {
-      const canvas = getOrCreateCanvas(vp.element);
-      const rect = canvas.getBoundingClientRect();
-      const devicePixelRatio = window.devicePixelRatio || 1;
-      canvas.width = rect.width * devicePixelRatio;
-      canvas.height = rect.height * devicePixelRatio;
-
       const prevCamera = vp.getCamera();
-      vp.resetCamera();
+      const rotation = vp.getRotation();
+      const { flipHorizontal } = prevCamera;
+      const resetPan = true;
+      const resetZoom = true;
+      const resetToCenter = true;
+      const resetRotation = false;
+      const supressEvents = true;
+      vp.resetCamera(
+        resetPan,
+        resetZoom,
+        resetToCenter,
+        resetRotation,
+        supressEvents
+      );
 
+      const displayArea = vp.getDisplayArea();
+
+      // TODO - make this use get/set Presentation or in some way preserve the
+      // basic presentation info on this viewport, rather than preserving camera
       if (keepCamera) {
-        vp.setCamera(prevCamera);
+        if (displayArea) {
+          if (flipHorizontal) {
+            vp.setCamera({ flipHorizontal });
+          }
+          if (rotation) {
+            vp.setProperties({ rotation });
+          }
+        } else {
+          vp.setCamera(prevCamera);
+        }
       }
     });
 
@@ -630,12 +682,6 @@ class RenderingEngine implements IRenderingEngine {
     const canvas = getOrCreateCanvas(viewportInputEntry.element);
     canvasesDrivenByVtkJs.push(canvas);
 
-    const devicePixelRatio = window.devicePixelRatio || 1;
-
-    const rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width * devicePixelRatio;
-    canvas.height = rect.height * devicePixelRatio;
-
     // 2.c Calculating the new size for offScreen Canvas
     const { offScreenCanvasWidth, offScreenCanvasHeight } =
       this._resizeOffScreenCanvas(canvasesDrivenByVtkJs);
@@ -722,7 +768,6 @@ class RenderingEngine implements IRenderingEngine {
       offScreenCanvasHeight,
       xOffset
     );
-
     // 2. Add a renderer to the offScreenMultiRenderWindow
     this.offscreenMultiRenderWindow.addRenderer({
       viewport: [
@@ -822,15 +867,9 @@ class RenderingEngine implements IRenderingEngine {
     };
 
     // 4. Create a proper viewport based on the type of the viewport
+    const ViewportType = viewportTypeToViewportClass[type];
 
-    if (type !== ViewportType.STACK) {
-      // In the future these will need to be pluggable, but we aren't there yet
-      // and these are just Stacks for now.
-      throw new Error('Support for fully custom viewports not yet implemented');
-    }
-
-    // 4.a Create stack viewport
-    const viewport = new StackViewport(viewportInput);
+    const viewport = new ViewportType(viewportInput);
 
     // 5. Storing the viewports
     this._viewports.set(viewportId, viewport);
@@ -925,21 +964,17 @@ class RenderingEngine implements IRenderingEngine {
   ): { offScreenCanvasWidth: number; offScreenCanvasHeight: number } {
     const { offScreenCanvasContainer, offscreenMultiRenderWindow } = this;
 
-    const devicePixelRatio = window.devicePixelRatio || 1;
-
     // 1. Calculated the height of the offScreen canvas to be the maximum height
     // between canvases
     const offScreenCanvasHeight = Math.max(
-      ...canvasesDrivenByVtkJs.map(
-        (canvas) => canvas.clientHeight * devicePixelRatio
-      )
+      ...canvasesDrivenByVtkJs.map((canvas) => canvas.height)
     );
 
     // 2. Calculating the width of the offScreen canvas to be the sum of all
     let offScreenCanvasWidth = 0;
 
     canvasesDrivenByVtkJs.forEach((canvas) => {
-      offScreenCanvasWidth += canvas.clientWidth * devicePixelRatio;
+      offScreenCanvasWidth += canvas.width;
     });
 
     offScreenCanvasContainer.width = offScreenCanvasWidth;
@@ -961,15 +996,13 @@ class RenderingEngine implements IRenderingEngine {
    * @returns _xOffset the final offset which will be used for the next viewport
    */
   private _resize(
-    viewportsDrivenByVtkJs: Array<IStackViewport | IVolumeViewport>,
+    viewportsDrivenByVtkJs: Array<IViewport>,
     offScreenCanvasWidth: number,
     offScreenCanvasHeight: number
   ): number {
     // Redefine viewport properties
     let _xOffset = 0;
 
-    const devicePixelRatio = window.devicePixelRatio || 1;
-
     for (let i = 0; i < viewportsDrivenByVtkJs.length; i++) {
       const viewport = viewportsDrivenByVtkJs[i];
       const {
@@ -988,7 +1021,7 @@ class RenderingEngine implements IRenderingEngine {
         _xOffset
       );
 
-      _xOffset += viewport.canvas.clientWidth * devicePixelRatio;
+      _xOffset += viewport.canvas.width;
 
       viewport.sx = sx;
       viewport.sy = sy;
@@ -1018,28 +1051,23 @@ class RenderingEngine implements IRenderingEngine {
    * @param _xOffset - xOffSet to draw
    */
   private _getViewportCoordsOnOffScreenCanvas(
-    viewport: InternalViewportInput | IStackViewport | IVolumeViewport,
+    viewport: InternalViewportInput | IViewport,
     offScreenCanvasWidth: number,
     offScreenCanvasHeight: number,
     _xOffset: number
   ): ViewportDisplayCoords {
     const { canvas } = viewport;
-    const { clientWidth, clientHeight } = canvas;
-    const devicePixelRatio = window.devicePixelRatio || 1;
-    const height = clientHeight * devicePixelRatio;
-    const width = clientWidth * devicePixelRatio;
+    const { width: sWidth, height: sHeight } = canvas;
 
     // Update the canvas drawImage offsets.
     const sx = _xOffset;
     const sy = 0;
-    const sWidth = width;
-    const sHeight = height;
 
     const sxStartDisplayCoords = sx / offScreenCanvasWidth;
 
     // Need to offset y if it not max height
     const syStartDisplayCoords =
-      sy + (offScreenCanvasHeight - height) / offScreenCanvasHeight;
+      sy + (offScreenCanvasHeight - sHeight) / offScreenCanvasHeight;
 
     const sWidthDisplayCoords = sWidth / offScreenCanvasWidth;
     const sHeightDisplayCoords = sHeight / offScreenCanvasHeight;
@@ -1177,7 +1205,7 @@ class RenderingEngine implements IRenderingEngine {
    * @param viewport - The viewport to render
    */
   private renderViewportUsingCustomOrVtkPipeline(
-    viewport: IStackViewport | IVolumeViewport
+    viewport: IViewport
   ): EventTypes.ImageRenderedEventDetail[] {
     let eventDetail;
 
@@ -1187,7 +1215,7 @@ class RenderingEngine implements IRenderingEngine {
       viewport.sWidth < VIEWPORT_MIN_SIZE ||
       viewport.sHeight < VIEWPORT_MIN_SIZE
     ) {
-      console.log('Viewport is too small', viewport.sWidth, viewport.sHeight);
+      console.warn('Viewport is too small', viewport.sWidth, viewport.sHeight);
       return;
     }
     if (viewportTypeUsesCustomRenderingPipeline(viewport.type) === true) {
@@ -1221,7 +1249,7 @@ class RenderingEngine implements IRenderingEngine {
    * @param offScreenCanvas - The offscreen canvas to render from.
    */
   private _renderViewportFromVtkCanvasToOnscreenCanvas(
-    viewport: IStackViewport | IVolumeViewport,
+    viewport: IViewport,
     offScreenCanvas
   ): EventTypes.ImageRenderedEventDetail {
     const {
@@ -1267,7 +1295,7 @@ class RenderingEngine implements IRenderingEngine {
    *
    * @param viewport - The `Viewport` to render.
    */
-  private _resetViewport(viewport: IStackViewport | IVolumeViewport) {
+  private _resetViewport(viewport: IViewport) {
     const renderingEngineId = this.id;
 
     const { element, canvas, id: viewportId } = viewport;
@@ -1278,6 +1306,8 @@ class RenderingEngine implements IRenderingEngine {
       renderingEngineId,
     };
 
+    viewport.removeWidgets();
+
     // Trigger first before removing the data attributes, as we need the enabled
     // element to remove tools associated with the viewport
     triggerEvent(eventTarget, Events.ELEMENT_DISABLED, eventDetail);