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

package/src/constants/backgroundColors.ts

@@ -0,0 +1,5 @@
+const backgroundColors = {
+  slicer3D: [160 / 255, 164 / 255, 217 / 255],
+};
+
+export default backgroundColors;

package/src/constants/index.ts

@@ -3,6 +3,7 @@ import RENDERING_DEFAULTS from './rendering';
 import EPSILON from './epsilon';
 import MPR_CAMERA_VALUES from './mprCameraValues';
 import VIEWPORT_PRESETS from './viewportPresets';
+import BACKGROUND_COLORS from './backgroundColors';
 
 export {
   CPU_COLORMAPS,
@@ -10,4 +11,5 @@ export {
   MPR_CAMERA_VALUES,
   EPSILON,
   VIEWPORT_PRESETS,
+  BACKGROUND_COLORS,
 };

package/src/enums/Events.ts

@@ -5,6 +5,7 @@ enum Events {
   /**
    * ERROR CODES
    */
+  ERROR_EVENT = 'CORNERSTONE_ERROR',
 
   /**
    * Error that is thrown when the ImageCache exceeds its max cache size.
@@ -38,6 +39,12 @@ 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 preset (used in volume viewport 3D)
+   *
+   * Make use of {@link EventTypes.PresetModifiedEvent | PresetModified Event Type } for typing your event listeners for PRESET_MODIFIED event,
+   */
+  PRESET_MODIFIED = 'CORNERSTONE_VIEWPORT_RENDERING_PRESET_MODIFIED',
   /**
    * Triggers on the HTML element when viewport modifies its display area
    *
@@ -209,10 +216,35 @@ enum Events {
    * Triggers when the scroll function is called with a delta that is out of bounds.
    * This is usually for signaling that the user may want a different volume for partially loaded volumes which is meant to optimize memory.
    */
-  VOLUME_SCROLL_OUT_OF_BOUNDS = 'CORNERSTONE_VOLUME_SCROLL_OUT_OF_BOUNDS',
+  VOLUME_SCROLL_OUT_OF_BOUNDS = 'VOLUME_SCROLL_OUT_OF_BOUNDS',
+
+  /**
+   * Triggers when the scroll function is called on a volume.
+   */
+  VOLUME_VIEWPORT_SCROLL = 'VOLUME_VIEWPORT_SCROLL',
+
+  /**
+   * Triggers when the clipping planes has been updated
+   */
+  CLIPPING_PLANES_UPDATED = 'CORNERSTONE_CLIPPING_PLANES_UPDATED',
+
+  /**
+   * Triggers when the webworker has made progress
+   * You should use it with a workerType to indicate the type of worker that is making progress
+   * Checkout the polySEG convertors in the cornerstone tools
+   * to lean how to use it
+   */
+  WEB_WORKER_PROGRESS = 'CORNERSTONE_WEB_WORKER_PROGRESS',
   // IMAGE_CACHE_FULL = 'CORNERSTONE_IMAGE_CACHE_FULL',
   // PRE_RENDER = 'CORNERSTONE_PRE_RENDER',
   // ELEMENT_RESIZED = 'CORNERSTONE_ELEMENT_RESIZED',
+
+  /**
+   * Triggers on the HTML element when viewport modifies its colormap
+   * Make use of {@link EventTypes.ColormapModifiedEvent | ColormapModified Event Type } for typing your event listeners for COLORMAP_MODIFIED event,
+   * and see what event detail is included in {@link EventTypes.ColormapModifiedEventDetail | ColormapModified Event Detail }
+   */
+  COLORMAP_MODIFIED = 'CORNERSTONE_COLORMAP_MODIFIED',
 }
 
 export default Events;

package/src/enums/GeometryType.ts

@@ -1,5 +1,6 @@
 enum GeometryType {
   CONTOUR = 'contour',
+  SURFACE = 'Surface',
 }
 
 export default GeometryType;

package/src/enums/MetadataModules.ts

@@ -0,0 +1,32 @@
+/**
+ * Contains the names for the metadata modules.
+ * Recommendation is to add all module names here rather than having them
+ * just use string names.
+ * The naming convention is that the enum has the modules in it, so the
+ * enum key does not repeat the Modules, but the enum value does (to agree
+ * with existing naming conventions)
+ */
+enum MetadataModules {
+  CALIBRATION = 'calibrationModule',
+  CINE = 'cineModule',
+  GENERAL_IMAGE = 'generalImageModule',
+  GENERAL_SERIES = 'generalSeriesModule',
+  GENERAL_STUDY = 'generalStudyModule',
+  IMAGE_PIXEL = 'imagePixelModule',
+  IMAGE_PLANE = 'imagePlaneModule',
+  IMAGE_URL = 'imageUrlModule',
+  MODALITY_LUT = 'modalityLutModule',
+  MULTIFRAME = 'multiframeModule',
+  NM_MULTIFRAME_GEOMETRY = 'nmMultiframeGeometryModule',
+  OVERLAY_PLANE = 'overlayPlaneModule',
+  PATIENT = 'patientModule',
+  PATIENT_STUDY = 'patientStudyModule',
+  PET_IMAGE = 'petImageModule',
+  PET_ISOTOPE = 'petIsotopeModule',
+  PET_SERIES = 'petSeriesModule',
+  SOP_COMMON = 'sopCommonModule',
+  ULTRASOUND_ENHANCED_REGION = 'ultrasoundEnhancedRegionModule',
+  VOI_LUT = 'voiLutModule',
+}
+
+export default MetadataModules;

package/src/enums/RequestType.ts

@@ -6,8 +6,10 @@ enum RequestType {
   Interaction = 'interaction',
   /** Second highest priority for loading*/
   Thumbnail = 'thumbnail',
-  /** Lowest priority for loading*/
+  /** Third highest priority for loading, usually used for image loading in the background*/
   Prefetch = 'prefetch',
+  /** Lower priority, often used for background computations in the worker */
+  Compute = 'compute',
 }
 
 export default RequestType;

package/src/enums/VideoEnums.ts

@@ -0,0 +1,9 @@
+/**
+ * video viewport speed units
+ */
+enum SpeedUnit {
+  FRAME = 'f',
+  SECOND = 's',
+}
+
+export { SpeedUnit };

package/src/enums/ViewportType.ts

@@ -16,6 +16,7 @@ enum ViewportType {
   /** Perspective Viewport: Not Implemented yet */
   PERSPECTIVE = 'perspective',
   VOLUME_3D = 'volume3d',
+  VIDEO = 'video',
 }
 
 export default ViewportType;

package/src/enums/index.ts

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

package/src/eventTarget.ts

@@ -3,13 +3,30 @@
  */
 class CornerstoneEventTarget implements EventTarget {
   private listeners;
+  private debouncedListeners;
 
   constructor() {
     this.listeners = {};
+    this.debouncedListeners = {};
   }
 
   public reset() {
     this.listeners = {};
+    this.debouncedListeners = {};
+  }
+
+  public addEventListenerOnce(type, callback) {
+    // Create a wrapper function to encapsulate the original callback
+    const onceWrapper = (event) => {
+      // Remove the listener after its first invocation
+      this.removeEventListener(type, onceWrapper);
+
+      // Call the original callback
+      callback.call(this, event);
+    };
+
+    // Add the wrapper as the listener
+    this.addEventListener(type, onceWrapper);
   }
 
   public addEventListener(type, callback) {
@@ -25,6 +42,62 @@ class CornerstoneEventTarget implements EventTarget {
     this.listeners[type].push(callback);
   }
 
+  /**
+   * Adds a debounced event listener to the event target.
+   *
+   * @param type - The type of the event to listen for.
+   * @param callback - The callback function to be executed when the event is triggered.
+   * @param delay - The delay in milliseconds before the callback is invoked after the last event.
+   */
+  public addEventListenerDebounced(type, callback, delay) {
+    // Ensure the dictionary for the type exists
+    this.debouncedListeners[type] = this.debouncedListeners[type] || {};
+    const debouncedCallbacks = this.debouncedListeners[type];
+
+    // Check if there's already a debounced version of this callback registered
+    if (!debouncedCallbacks[callback]) {
+      const handle = (event) => {
+        // Clear any existing timeout to reset the debounce timer
+        if (debouncedCallbacks[callback]) {
+          clearTimeout(debouncedCallbacks[callback].timeoutId);
+        }
+
+        // Set a new timeout
+        debouncedCallbacks[callback].timeoutId = setTimeout(() => {
+          callback.call(this, event);
+        }, delay);
+      };
+
+      // Store the handle and initial timeoutId (null initially)
+      debouncedCallbacks[callback] = {
+        original: callback,
+        handle,
+        timeoutId: null,
+      };
+
+      // Register the debounced handler
+      this.addEventListener(type, handle);
+    }
+  }
+
+  /**
+   * Removes a debounced event listener from the event target.
+   *
+   * @param type - The type of the event.
+   * @param callback - The callback function to be removed.
+   */
+  public removeEventListenerDebounced(type, callback) {
+    if (
+      this.debouncedListeners[type] &&
+      this.debouncedListeners[type][callback]
+    ) {
+      const debounced = this.debouncedListeners[type][callback];
+      this.removeEventListener(type, debounced.handle);
+      clearTimeout(debounced.timeoutId);
+      delete this.debouncedListeners[type][callback];
+    }
+  }
+
   public removeEventListener(type, callback) {
     if (!this.listeners[type]) {
       return;
@@ -52,7 +125,11 @@ class CornerstoneEventTarget implements EventTarget {
     const stackLength = stack.length;
 
     for (let i = 0; i < stackLength; i++) {
-      stack[i].call(this, event);
+      try {
+        stack[i].call(this, event);
+      } catch (error) {
+        console.error(`error in event listener of type:  ${event.type}`, error);
+      }
     }
 
     return !event.defaultPrevented;

package/src/getEnabledElement.ts

@@ -1,7 +1,7 @@
 import getRenderingEngine, {
   getRenderingEngines,
 } from './RenderingEngine/getRenderingEngine';
-import { IEnabledElement } from './types';
+import { IEnabledElement, IStackViewport, IVolumeViewport } from './types';
 
 /**
  * A convenience method to find an EnabledElement given a reference to its
@@ -67,7 +67,9 @@ export function getEnabledElementByIds(
     return;
   }
 
-  const viewport = renderingEngine.getViewport(viewportId);
+  const viewport = renderingEngine.getViewport(viewportId) as
+    | IStackViewport
+    | IVolumeViewport;
 
   if (!viewport) {
     return;
@@ -84,6 +86,26 @@ export function getEnabledElementByIds(
   };
 }
 
+/**
+ * Retrieves the enabled element by the specified viewport ID. it searches
+ * through all the rendering engines to find the viewport with the specified
+ *
+ * @param viewportId - The ID of the viewport.
+ * @returns The enabled element associated with the specified viewport ID.
+ */
+export function getEnabledElementByViewportId(viewportId: string) {
+  const renderingEngines = getRenderingEngines();
+
+  for (let i = 0; i < renderingEngines.length; i++) {
+    const renderingEngine = renderingEngines[i];
+    const viewport = renderingEngine.getViewport(viewportId);
+
+    if (viewport) {
+      return getEnabledElementByIds(viewportId, renderingEngine.id);
+    }
+  }
+}
+
 /**
  * Get all the enabled elements from all the rendering engines
  * @returns An array of enabled elements.

package/src/index.ts

@@ -12,18 +12,20 @@ import VolumeViewport from './RenderingEngine/VolumeViewport';
 import VolumeViewport3D from './RenderingEngine/VolumeViewport3D';
 import BaseVolumeViewport from './RenderingEngine/BaseVolumeViewport';
 import StackViewport from './RenderingEngine/StackViewport';
+import VideoViewport from './RenderingEngine/VideoViewport';
 import Viewport from './RenderingEngine/Viewport';
 import eventTarget from './eventTarget';
 import {
   getRenderingEngine,
   getRenderingEngines,
 } from './RenderingEngine/getRenderingEngine';
-import cache, { ImageVolume } from './cache';
+import cache, { ImageVolume, Surface } from './cache';
 import imageRetrievalPoolManager from './requestPool/imageRetrievalPoolManager';
 import imageLoadPoolManager from './requestPool/imageLoadPoolManager';
 
 import getEnabledElement, {
   getEnabledElementByIds,
+  getEnabledElementByViewportId,
   getEnabledElements,
 } from './getEnabledElement';
 import * as metaData from './metaData';
@@ -39,6 +41,8 @@ import {
   resetUseSharedArrayBuffer,
   getConfiguration,
   setConfiguration,
+  getWebWorkerManager,
+  canRenderFloatTextures,
 } from './init';
 
 // Classes
@@ -65,6 +69,7 @@ import triggerEvent from './utilities/triggerEvent';
 import {
   setVolumesForViewports,
   addVolumesToViewports,
+  addImageSlicesToViewports,
 } from './RenderingEngine/helpers';
 
 // Add new types here so that they can be imported singly as required.
@@ -84,6 +89,8 @@ export {
   // configs
   getConfiguration,
   setConfiguration,
+  getWebWorkerManager,
+  canRenderFloatTextures,
   // enums
   Enums,
   CONSTANTS,
@@ -96,14 +103,17 @@ export {
   VolumeViewport3D,
   Viewport,
   StackViewport,
+  VideoViewport,
   RenderingEngine,
   ImageVolume,
+  Surface,
   // Helpers
   getRenderingEngine,
   getRenderingEngines,
   getEnabledElement,
   getEnabledElementByIds,
   getEnabledElements,
+  getEnabledElementByViewportId,
   createVolumeActor,
   getOrCreateCanvas,
   createVolumeMapper,
@@ -123,6 +133,7 @@ export {
   utilities,
   setVolumesForViewports,
   addVolumesToViewports,
+  addImageSlicesToViewports,
   //
   imageLoadPoolManager as requestPoolManager,
   imageRetrievalPoolManager,

package/src/init.ts

@@ -6,36 +6,42 @@ let useSharedArrayBuffer = true;
 let sharedArrayBufferMode = SharedArrayBufferModes.TRUE;
 import { deepMerge } from './utilities';
 import { Cornerstone3DConfig } from './types';
+import CentralizedWebWorkerManager from './webWorkerManager/webWorkerManager';
+
 // TODO: move sharedArrayBuffer into config.
 // TODO: change config into a class with methods to better control get/set
 const defaultConfig: Cornerstone3DConfig = {
   gpuTier: undefined,
   detectGPUConfig: {},
+  isMobile: false, // is mobile device
   rendering: {
     useCPURendering: false,
     // GPU rendering options
     preferSizeOverAccuracy: false,
-    useNorm16Texture: false, // _hasNorm16TextureSupport(),
+    useNorm16Texture: false,
     strictZSpacingForVolumeViewport: true,
   },
   // cache
-  // ...
+  enableCacheOptimization: true,
 };
 
 let config: Cornerstone3DConfig = {
   gpuTier: undefined,
   detectGPUConfig: {},
+  isMobile: false, // is mobile device
   rendering: {
     useCPURendering: false,
     // GPU rendering options
     preferSizeOverAccuracy: false,
-    useNorm16Texture: false, // _hasNorm16TextureSupport(),
+    useNorm16Texture: false,
     strictZSpacingForVolumeViewport: true,
   },
   // cache
-  // ...
+  enableCacheOptimization: true,
 };
 
+let webWorkerManager = null;
+
 function _getGLContext(): RenderingContext {
   // Create canvas element. The canvas is not added to the
   // document itself, so it is never displayed in the
@@ -73,23 +79,33 @@ function hasSharedArrayBuffer() {
   }
 }
 
-// Todo: commenting this out until proper support for int16 textures
-// are added to browsers, current implementation is buggy
-// function _hasNorm16TextureSupport() {
-//   const gl = _getGLContext();
+function _hasNorm16TextureSupport() {
+  const gl = _getGLContext();
 
-//   if (gl) {
-//     const ext = (gl as WebGL2RenderingContext).getExtension(
-//       'EXT_texture_norm16'
-//     );
+  if (gl) {
+    const ext = (gl as WebGL2RenderingContext).getExtension(
+      'EXT_texture_norm16'
+    );
 
-//     if (ext) {
-//       return true;
-//     }
-//   }
+    if (ext) {
+      return true;
+    }
+  }
 
-//   return false;
-// }
+  return false;
+}
+
+function isIOS() {
+  if (/iPad|iPhone|iPod/.test(navigator.platform)) {
+    return true;
+  } else {
+    return (
+      navigator.maxTouchPoints &&
+      navigator.maxTouchPoints > 2 &&
+      /MacIntel/.test(navigator.platform)
+    );
+  }
+}
 
 /**
  * Initialize the cornerstone-core. If the browser has a webgl context and
@@ -108,6 +124,22 @@ async function init(configuration = config): Promise<boolean> {
   // merge configs
   config = deepMerge(defaultConfig, configuration);
 
+  if (isIOS()) {
+    // iOS devices don't have support for OES_texture_float_linear
+    // and thus we should use native data type if we are on iOS
+    config.rendering.useNorm16Texture = _hasNorm16TextureSupport();
+
+    if (!config.rendering.useNorm16Texture) {
+      if (configuration.rendering?.preferSizeOverAccuracy) {
+        config.rendering.preferSizeOverAccuracy = true;
+      } else {
+        console.log(
+          'norm16 texture not supported, you can turn on the preferSizeOverAccuracy flag to use native data type, but be aware of the inaccuracy of the rendering in high bits'
+        );
+      }
+    }
+  }
+
   // gpuTier
   const hasWebGLContext = _hasActiveWebGLContext();
   if (!hasWebGLContext) {
@@ -120,7 +152,7 @@ async function init(configuration = config): Promise<boolean> {
       'CornerstoneRender: Using detect-gpu to get the GPU benchmark:',
       config.gpuTier
     );
-    if (config.gpuTier.tier < 1) {
+    if (config.gpuTier?.tier < 1) {
       console.log(
         'CornerstoneRender: GPU is not powerful enough, using CPU rendering'
       );
@@ -133,6 +165,11 @@ async function init(configuration = config): Promise<boolean> {
   setUseSharedArrayBuffer(sharedArrayBufferMode);
 
   csRenderInitialized = true;
+
+  if (!webWorkerManager) {
+    webWorkerManager = new CentralizedWebWorkerManager();
+  }
+
   return csRenderInitialized;
 }
 
@@ -156,6 +193,18 @@ function setPreferSizeOverAccuracy(status: boolean): void {
   _updateRenderingPipelinesForAllViewports();
 }
 
+/**
+ * Only IPhone IOS cannot render float textures right now due to the lack of support for OES_texture_float_linear.
+ * So we should not use float textures on IOS devices.
+ */
+function canRenderFloatTextures(): boolean {
+  if (!isIOS()) {
+    return true;
+  }
+
+  return false;
+}
+
 /**
  * Resets the cornerstone-core init state if it has been manually
  * initialized to force use the cpu rendering (e.g., for tests)
@@ -256,6 +305,14 @@ function _updateRenderingPipelinesForAllViewports(): void {
   );
 }
 
+function getWebWorkerManager() {
+  if (!webWorkerManager) {
+    webWorkerManager = new CentralizedWebWorkerManager();
+  }
+
+  return webWorkerManager;
+}
+
 export {
   init,
   getShouldUseCPURendering,
@@ -268,4 +325,6 @@ export {
   resetUseSharedArrayBuffer,
   getConfiguration,
   setConfiguration,
+  getWebWorkerManager,
+  canRenderFloatTextures,
 };

package/src/loaders/geometryLoader.ts

@@ -1,13 +1,14 @@
 import '@kitware/vtk.js/Rendering/Profiles/Geometry';
 
 import cache from '../cache';
-import { ContourSet } from '../cache/classes/ContourSet';
 import { GeometryType } from '../enums';
-import { IGeometry, PublicContourSetData } from '../types';
+import { IGeometry, PublicContourSetData, PublicSurfaceData } from '../types';
+import { createContourSet } from './utils/contourSet/createContourSet';
+import { createSurface } from './utils/surface/createSurface';
 
 type GeometryOptions = {
   type: GeometryType;
-  geometryData: PublicContourSetData; // | PublicClosedSurfaceData, ...
+  geometryData: PublicContourSetData | PublicSurfaceData;
 };
 
 /**
@@ -33,7 +34,15 @@ async function createAndCacheGeometry(
   }
 
   if (options.type === GeometryType.CONTOUR) {
-    geometry = _createContourSet(geometryId, options.geometryData);
+    geometry = createContourSet(
+      geometryId,
+      options.geometryData as PublicContourSetData
+    );
+  } else if (options.type === GeometryType.SURFACE) {
+    geometry = createSurface(
+      geometryId,
+      options.geometryData as PublicSurfaceData
+    );
   } else {
     throw new Error('Unknown geometry type, Only CONTOUR is supported');
   }
@@ -47,63 +56,4 @@ async function createAndCacheGeometry(
   return geometry;
 }
 
-// Todo: this should be moved
-function _createContourSet(
-  geometryId: string,
-  contourSetData: PublicContourSetData
-) {
-  // validate the data to make sure it is a valid contour set
-  if (!contourSetData || contourSetData.data.length === 0) {
-    throw new Error(
-      'Invalid contour set data, see publicContourSetData type for more info'
-    );
-  }
-
-  // make sure it each has id, and each has data of type Point3[]
-  if (!contourSetData.id) {
-    throw new Error(
-      'Invalid contour set data, each contour set must have an id'
-    );
-  }
-
-  if (!contourSetData.data || !Array.isArray(contourSetData.data)) {
-    throw new Error(
-      'Invalid contour set data, each contour set must have an array of contours'
-    );
-  }
-
-  contourSetData.data.forEach((contourData) => {
-    if (!contourData.points || !Array.isArray(contourData.points)) {
-      throw new Error(
-        'Invalid contour set data, each contour must have an array of points'
-      );
-    }
-
-    contourData.points.forEach((point) => {
-      if (!point || !Array.isArray(point) || point.length !== 3) {
-        throw new Error(
-          'Invalid contour set data, each point must be an array of length 3'
-        );
-      }
-    });
-  });
-
-  const contourSet = new ContourSet({
-    id: contourSetData.id,
-    data: contourSetData.data,
-    color: contourSetData.color,
-    frameOfReferenceUID: contourSetData.frameOfReferenceUID,
-    segmentIndex: contourSetData.segmentIndex,
-  });
-
-  const geometry: IGeometry = {
-    id: geometryId,
-    type: GeometryType.CONTOUR,
-    data: contourSet,
-    sizeInBytes: contourSet.getSizeInBytes(),
-  };
-
-  return geometry;
-}
-
 export { createAndCacheGeometry };