@cornerstonejs/core 0.41.2 → 0.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "0.41.2",
+  "version": "0.42.1",
   "description": "",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -51,5 +51,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "e682bc7d33796f1ff962e42f3bed54d276dc6ad4"
+  "gitHead": "bf2fa6e9424f88d324d0226bb0a8921d9bc38bd7"
 }

package/src/RenderingEngine/RenderingEngine.ts

@@ -34,6 +34,9 @@ type ViewportDisplayCoords = {
   sHeight: number;
 };
 
+// Rendering engines seem to not like rendering things less than 2 pixels per side
+const VIEWPORT_MIN_SIZE = 2;
+
 /**
  * A RenderingEngine takes care of the full pipeline of creating viewports and rendering
  * them on a large offscreen canvas and transmitting this data back to the screen. This allows us
@@ -502,6 +505,7 @@ class RenderingEngine implements IRenderingEngine {
       options = {
         background: [0, 0, 0],
         orientation: null,
+        displayArea: null,
       };
 
       if (type === ViewportType.ORTHOGRAPHIC) {
@@ -1115,6 +1119,8 @@ class RenderingEngine implements IRenderingEngine {
     this._animationFrameHandle = null;
 
     eventDetailArray.forEach((eventDetail) => {
+      // Very small viewports won't have an element
+      if (!eventDetail?.element) return;
       triggerEvent(eventDetail.element, Events.IMAGE_RENDERED, eventDetail);
     });
   };
@@ -1165,6 +1171,15 @@ class RenderingEngine implements IRenderingEngine {
   ): EventTypes.ImageRenderedEventDetail[] {
     let eventDetail;
 
+    // Rendering engines start having issues without at least two pixels
+    // in each direction
+    if (
+      viewport.sWidth < VIEWPORT_MIN_SIZE ||
+      viewport.sHeight < VIEWPORT_MIN_SIZE
+    ) {
+      console.log('Viewport is too small', viewport.sWidth, viewport.sHeight);
+      return;
+    }
     if (viewportTypeUsesCustomRenderingPipeline(viewport.type) === true) {
       eventDetail =
         viewport.customRenderViewportToCanvas() as EventTypes.ImageRenderedEventDetail;

package/src/RenderingEngine/Viewport.ts

@@ -21,6 +21,7 @@ import type {
   Point3,
   FlipDirection,
   EventTypes,
+  DisplayArea,
 } from '../types';
 import type { ViewportInput, IViewport } from '../types/IViewport';
 import type { vtkSlabCamera } from './vtkClasses/vtkSlabCamera';
@@ -62,7 +63,7 @@ class Viewport implements IViewport {
   _actors: Map<string, any>;
   /** Default options for the viewport which includes orientation, viewPlaneNormal and backgroundColor */
   readonly defaultOptions: any;
-  /** options for the viewport which includes orientation axis and backgroundColor */
+  /** options for the viewport which includes orientation axis, backgroundColor and displayArea */
   options: ViewportInputOptions;
   private _suppressCameraModifiedEvents = false;
   /** A flag representing if viewport methods should fire events or not */
@@ -72,6 +73,10 @@ class Viewport implements IViewport {
    * the relative pan/zoom
    */
   protected initialCamera: ICamera;
+  /** The camera that is defined for resetting displayArea to ensure absolute displayArea
+   * settings
+   */
+  private fitToCanvasCamera: ICamera;
 
   constructor(props: ViewportInput) {
     this.id = props.id;
@@ -155,7 +160,9 @@ class Viewport implements IViewport {
 
     // TODO When this is needed we need to move the camera position.
     // We can steal some logic from the tools we build to do this.
-
+    if (this.options?.displayArea) {
+      this.setDisplayArea(this.options?.displayArea);
+    }
     if (immediate) {
       this.render();
     }
@@ -528,6 +535,80 @@ class Viewport implements IViewport {
     return intersections;
   }
 
+  /**
+   * Sets the camera to an initial bounds. If
+   * resetPan and resetZoom are true it places the focal point at the center of
+   * the volume (or slice); otherwise, only the camera zoom and camera Pan or Zoom
+   * is reset for the current view.
+   * @param displayArea - The display area of interest.
+   * @param suppressEvents - If true, don't fire displayArea event.
+   */
+  public setDisplayArea(
+    displayArea: DisplayArea,
+    suppressEvents = false
+  ): void {
+    const { storeAsInitialCamera } = displayArea;
+
+    // make calculations relative to the fitToCanvasCamera view
+    this.setCamera(this.fitToCanvasCamera, false);
+
+    const { imageArea, imageCanvasPoint } = displayArea;
+
+    if (imageArea) {
+      const [areaX, areaY] = imageArea;
+      const zoom = Math.min(this.getZoom() / areaX, this.getZoom() / areaY);
+      this.setZoom(zoom, storeAsInitialCamera);
+    }
+
+    // getting the image info
+    const imageData = this.getDefaultImageData();
+    if (imageCanvasPoint && imageData) {
+      const { imagePoint, canvasPoint } = imageCanvasPoint;
+      const [canvasX, canvasY] = canvasPoint;
+      const devicePixelRatio = window?.devicePixelRatio || 1;
+      const validateCanvasPanX = this.sWidth / devicePixelRatio;
+      const validateCanvasPanY = this.sHeight / devicePixelRatio;
+      const canvasPanX = validateCanvasPanX * (canvasX - 0.5);
+      const canvasPanY = validateCanvasPanY * (canvasY - 0.5);
+
+      const dimensions = imageData.getDimensions();
+      const canvasZero = this.worldToCanvas([0, 0, 0]);
+      const canvasEdge = this.worldToCanvas(dimensions);
+      const canvasImage = [
+        canvasEdge[0] - canvasZero[0],
+        canvasEdge[1] - canvasZero[1],
+      ];
+      const [imgWidth, imgHeight] = canvasImage;
+      const [imageX, imageY] = imagePoint;
+      const imagePanX = imgWidth * (0.5 - imageX);
+      const imagePanY = imgHeight * (0.5 - imageY);
+
+      const newPositionX = imagePanX + canvasPanX;
+      const newPositionY = imagePanY + canvasPanY;
+
+      const deltaPoint2: Point2 = [newPositionX, newPositionY];
+      this.setPan(deltaPoint2, storeAsInitialCamera);
+    }
+
+    if (storeAsInitialCamera) {
+      this.options.displayArea = displayArea;
+    }
+
+    if (!suppressEvents) {
+      const eventDetail: EventTypes.DisplayAreaModifiedEventDetail = {
+        viewportId: this.id,
+        displayArea: displayArea,
+        storeAsInitialCamera: storeAsInitialCamera,
+      };
+
+      triggerEvent(this.element, Events.DISPLAY_AREA_MODIFIED, eventDetail);
+    }
+  }
+
+  public getDisplayArea(): DisplayArea | undefined {
+    return this.options?.displayArea;
+  }
+
   /**
    * Resets the camera based on the rendering volume(s) bounds. If
    * resetPan and resetZoom are true it places the focal point at the center of
@@ -556,7 +637,6 @@ class Viewport implements IViewport {
     });
 
     const previousCamera = _cloneDeep(this.getCamera());
-
     const bounds = renderer.computeVisiblePropBounds();
     const focalPoint = <Point3>[0, 0, 0];
     const imageData = this.getDefaultImageData();
@@ -673,6 +753,8 @@ class Viewport implements IViewport {
 
     const modifiedCamera = _cloneDeep(this.getCamera());
 
+    this.setFitToCanvasCamera(_cloneDeep(this.getCamera()));
+
     if (storeAsInitialCamera) {
       this.setInitialCamera(modifiedCamera);
     }
@@ -688,6 +770,16 @@ class Viewport implements IViewport {
 
     this.triggerCameraModifiedEventIfNecessary(previousCamera, modifiedCamera);
 
+    if (
+      imageData &&
+      this.options?.displayArea &&
+      resetZoom &&
+      resetPan &&
+      resetToCenter
+    ) {
+      this.setDisplayArea(this.options?.displayArea);
+    }
+
     return true;
   }
 
@@ -701,6 +793,16 @@ class Viewport implements IViewport {
     this.initialCamera = camera;
   }
 
+  /**
+   * Sets the provided camera as the displayArea camera.
+   * This allows computing differences applied later as compared to the initial
+   * position, for things like zoom and pan.
+   * @param camera - to store as the initial value.
+   */
+  protected setFitToCanvasCamera(camera: ICamera): void {
+    this.fitToCanvasCamera = camera;
+  }
+
   /**
    * Helper function to return the current canvas pan value.
    *

package/src/enums/Events.ts

@@ -38,6 +38,13 @@ enum Events {
    * and see what event detail is included in {@link EventTypes.VoiModifiedEventDetail | VoiModified Event Detail }
    */
   VOI_MODIFIED = 'CORNERSTONE_VOI_MODIFIED',
+  /**
+   * Triggers on the HTML element when viewport modifies its display area
+   *
+   * Make use of {@link EventTypes.DisplayAreaModifiedEvent | DisplayAreaModified Event Type } for typing your event listeners for DISPLAY_AREA_MODIFIED event,
+   * and see what event detail is included in {@link EventTypes.DisplayAreaModifiedEventDetail | DisplayAreaModified Event Detail }
+   */
+  DISPLAY_AREA_MODIFIED = 'CORNERSTONE_DISPLAY_AREA_MODIFIED',
   /**
    * Triggers on the eventTarget when the element is disabled
    *

package/src/types/EventTypes.ts

@@ -8,6 +8,8 @@ import type IImage from './IImage';
 import type IImageVolume from './IImageVolume';
 import type { VOIRange } from './voi';
 import type VOILUTFunctionType from '../enums/VOILUTFunctionType';
+import type DisplayArea from './displayArea';
+
 /**
  * CAMERA_MODIFIED Event's data
  */
@@ -40,6 +42,20 @@ type VoiModifiedEventDetail = {
   VOILUTFunction?: VOILUTFunctionType;
 };
 
+/**
+ * DISPLAY_AREA_MODIFIED Event's data
+ */
+type DisplayAreaModifiedEventDetail = {
+  /** Viewport Unique ID in the renderingEngine */
+  viewportId: string;
+  /** new display area */
+  displayArea: DisplayArea;
+  /** Unique ID for the volume in the cache */
+  volumeId?: string;
+  /** Whether displayArea was stored as initial view */
+  storeAsInitialCamera?: boolean;
+};
+
 /**
  * ELEMENT_DISABLED Event's data
  */
@@ -259,6 +275,11 @@ type CameraModifiedEvent = CustomEventType<CameraModifiedEventDetail>;
  */
 type VoiModifiedEvent = CustomEventType<VoiModifiedEventDetail>;
 
+/**
+ * DISPLAY_AREA_MODIFIED Event type
+ */
+type DisplayAreaModifiedEvent = CustomEventType<DisplayAreaModifiedEventDetail>;
+
 /**
  * ELEMENT_DISABLED Event type
  */
@@ -362,6 +383,8 @@ export type {
   CameraModifiedEvent,
   VoiModifiedEvent,
   VoiModifiedEventDetail,
+  DisplayAreaModifiedEvent,
+  DisplayAreaModifiedEventDetail,
   ElementDisabledEvent,
   ElementDisabledEventDetail,
   ElementEnabledEvent,

package/src/types/IViewport.ts

@@ -4,6 +4,7 @@ import Point3 from './Point3';
 import ViewportInputOptions from './ViewportInputOptions';
 import { ActorEntry } from './IActor';
 import ViewportType from '../enums/ViewportType';
+import DisplayArea from './displayArea';
 
 /**
  * Viewport interface for cornerstone viewports
@@ -73,6 +74,14 @@ interface IViewport {
   render(): void;
   /** set options for the viewport */
   setOptions(options: ViewportInputOptions, immediate: boolean): void;
+  /** set displayArea for the viewport */
+  setDisplayArea(
+    displayArea: DisplayArea,
+    callResetCamera?: boolean,
+    suppressEvents?: boolean
+  );
+  /** returns the displayArea */
+  getDisplayArea(): DisplayArea | undefined;
   /** reset camera and options*/
   reset(immediate: boolean): void;
   /** returns the canvas */

package/src/types/ViewportInputOptions.ts

@@ -1,6 +1,6 @@
 import { OrientationAxis } from '../enums';
 import OrientationVectors from './OrientationVectors';
-
+import DisplayArea from './displayArea';
 /**
  * This type defines the shape of viewport input options, so we can throw when it is incorrect.
  */
@@ -9,6 +9,8 @@ type ViewportInputOptions = {
   background?: [number, number, number];
   /** orientation of the viewport which can be either an Enum for axis Enums.OrientationAxis.[AXIAL|SAGITTAL|CORONAL|DEFAULT] or an object with viewPlaneNormal and viewUp */
   orientation?: OrientationAxis | OrientationVectors;
+  /** displayArea of interest */
+  displayArea?: DisplayArea;
   /** whether the events should be suppressed and not fired*/
   suppressEvents?: boolean;
   /**

package/src/types/displayArea.ts

@@ -0,0 +1,10 @@
+type DisplayArea = {
+  imageArea: [number, number]; // areaX, areaY
+  imageCanvasPoint: {
+    imagePoint: [number, number]; // imageX, imageY
+    canvasPoint: [number, number]; // canvasX, canvasY
+  };
+  storeAsInitialCamera: boolean;
+};
+
+export default DisplayArea;

package/src/types/index.ts

@@ -5,6 +5,7 @@ import type IEnabledElement from './IEnabledElement';
 import type ICache from './ICache';
 import type { IVolume, VolumeScalarData } from './IVolume';
 import type { VOI, VOIRange } from './voi';
+import type DisplayArea from './displayArea';
 import type ImageLoaderFn from './ImageLoaderFn';
 import type IImageVolume from './IImageVolume';
 import type IDynamicImageVolume from './IDynamicImageVolume';
@@ -125,6 +126,7 @@ export type {
   ViewportInputOptions,
   VOIRange,
   VOI,
+  DisplayArea,
   FlipDirection,
   ICachedImage,
   ICachedVolume,