@cornerstonejs/core 0.41.1 → 0.42.0

package/package.json

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

package/src/RenderingEngine/RenderingEngine.ts

@@ -502,6 +502,7 @@ class RenderingEngine implements IRenderingEngine {
       options = {
         background: [0, 0, 0],
         orientation: null,
+        displayArea: null,
       };
 
       if (type === ViewportType.ORTHOGRAPHIC) {

package/src/RenderingEngine/StackViewport.ts

@@ -1536,11 +1536,15 @@ class StackViewport extends Viewport implements IStackViewport {
     const columnCosines = direction.slice(3, 6);
     const dataType = imageData.getPointData().getScalars().getDataType();
 
+    // using epsilon comparison for float numbers comparison.
+    const isSameXSpacing = isEqual(xSpacing, image.rowPixelSpacing);
+    const isSameYSpacing = isEqual(ySpacing, image.columnPixelSpacing);
+
     // using spacing, size, and direction only for now
     return (
-      (xSpacing === image.rowPixelSpacing ||
+      (isSameXSpacing ||
         (image.rowPixelSpacing === null && xSpacing === 1.0)) &&
-      (ySpacing === image.columnPixelSpacing ||
+      (isSameYSpacing ||
         (image.columnPixelSpacing === null && ySpacing === 1.0)) &&
       xVoxels === image.columns &&
       yVoxels === image.rows &&

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,

package/src/utilities/isEqual.ts

@@ -1,27 +1,74 @@
+function areNumbersEqualWithTolerance(
+  num1: number,
+  num2: number,
+  tolerance: number
+): boolean {
+  return Math.abs(num1 - num2) <= tolerance;
+}
+
+function areArraysEqual(
+  arr1: ArrayLike<number>,
+  arr2: ArrayLike<number>,
+  tolerance = 1e-5
+): boolean {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+
+  for (let i = 0; i < arr1.length; i++) {
+    if (!areNumbersEqualWithTolerance(arr1[i], arr2[i], tolerance)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function isNumberType(value: any): value is number {
+  return typeof value === 'number';
+}
+
+function isNumberArrayLike(value: any): value is ArrayLike<number> {
+  return 'length' in value && typeof value[0] === 'number';
+}
+
 /**
- * returns equal if the two arrays are identical within the
- * given tolerance.
+ * Returns whether two values are equal or not, based on epsilon comparison.
+ * For array comparison, it does NOT strictly compare them but only compare its values.
+ * It can compare array of numbers and also typed array. Otherwise it will just return false.
  *
- * @param v1 - The first array of values
- * @param v2 - The second array of values.
+ * @param v1 - The first value to compare
+ * @param v2 - The second value to compare
  * @param tolerance - The acceptable tolerance, the default is 0.00001
  *
  * @returns True if the two values are within the tolerance levels.
  */
-export default function isEqual(
-  v1: number[] | Float32Array,
-  v2: number[] | Float32Array,
+export default function isEqual<ValueType>(
+  v1: ValueType,
+  v2: ValueType,
   tolerance = 1e-5
 ): boolean {
-  if (v1.length !== v2.length) {
+  // values must be the same type or not null
+  if (typeof v1 !== typeof v2 || v1 === null || v2 === null) {
     return false;
   }
 
-  for (let i = 0; i < v1.length; i++) {
-    if (Math.abs(v1[i] - v2[i]) > tolerance) {
-      return false;
-    }
+  // typeof object must have same constructor
+  if (
+    typeof v1 === 'object' &&
+    typeof v2 === 'object' &&
+    v1.constructor !== v2.constructor
+  ) {
+    return false;
   }
 
-  return true;
+  if (isNumberType(v1) && isNumberType(v2)) {
+    return areNumbersEqualWithTolerance(v1, v2, tolerance);
+  }
+
+  if (isNumberArrayLike(v1) && isNumberArrayLike(v2)) {
+    return areArraysEqual(v1, v2, tolerance);
+  }
+
+  return false;
 }