@cornerstonejs/core 2.0.0-beta.1 → 2.0.0-beta.10

package/src/utilities/calculateViewportsSpatialRegistration.ts

@@ -1,9 +1,15 @@
 import { vec3, mat4 } from 'gl-matrix';
-import { IStackViewport } from '../types';
-import { StackViewport } from '../RenderingEngine';
+import { IStackViewport, IVolumeViewport } from '../types';
 import spatialRegistrationMetadataProvider from './spatialRegistrationMetadataProvider';
 import { metaData } from '..';
-import isEqual from './isEqual';
+
+/**
+ * Defines the allowed difference as a percent between the unit normals before
+ * two planes are considered not coplanar.  Since this value is small compared
+ * to the unit lenght, this value is approximately the angular difference, measured
+ * in radians.  That is, allow about a 3 degrees variation.
+ */
+const ALLOWED_DELTA = 0.05;
 
 /**
  * It calculates the registration matrix between two viewports (currently only
@@ -18,43 +24,31 @@ import isEqual from './isEqual';
  * @param viewport2 - The second stack viewport
  */
 function calculateViewportsSpatialRegistration(
-  viewport1: IStackViewport,
-  viewport2: IStackViewport
+  viewport1: IStackViewport | IVolumeViewport,
+  viewport2: IStackViewport | IVolumeViewport
 ): void {
-  if (
-    !(viewport1 instanceof StackViewport) ||
-    !(viewport2 instanceof StackViewport)
-  ) {
-    throw new Error(
-      'calculateViewportsSpatialRegistration: Both viewports must be StackViewports, volume viewports are not supported yet'
-    );
-  }
-
-  const isSameFrameOfReference =
-    viewport1.getFrameOfReferenceUID() === viewport2.getFrameOfReferenceUID();
-
-  if (isSameFrameOfReference) {
-    return;
-  }
-
   const imageId1 = viewport1.getCurrentImageId();
   const imageId2 = viewport2.getCurrentImageId();
 
   const imagePlaneModule1 = metaData.get('imagePlaneModule', imageId1);
   const imagePlaneModule2 = metaData.get('imagePlaneModule', imageId2);
 
-  const isSameImagePlane =
-    imagePlaneModule1 &&
-    imagePlaneModule2 &&
-    isEqual(
-      imagePlaneModule1.imageOrientationPatient,
-      imagePlaneModule2.imageOrientationPatient
-    );
+  if (!imagePlaneModule1 || !imagePlaneModule2) {
+    console.log('Viewport spatial registration requires image plane module');
+    return;
+  }
+  const { imageOrientationPatient: iop2 } = imagePlaneModule2;
+  const isSameImagePlane = imagePlaneModule1.imageOrientationPatient.every(
+    (v, i) => Math.abs(v - iop2[i]) < ALLOWED_DELTA
+  );
 
   if (!isSameImagePlane) {
-    throw new Error(
-      'Viewport spatial registration only supported for same orientation (hence translation only) for now'
+    console.log(
+      'Viewport spatial registration only supported for same orientation (hence translation only) for now',
+      imagePlaneModule1?.imageOrientationPatient,
+      imagePlaneModule2?.imageOrientationPatient
     );
+    return;
   }
 
   const imagePositionPatient1 = imagePlaneModule1.imagePositionPatient;
@@ -67,7 +61,6 @@ function calculateViewportsSpatialRegistration(
   );
 
   const mat = mat4.fromTranslation(mat4.create(), translation);
-
   spatialRegistrationMetadataProvider.add([viewport1.id, viewport2.id], mat);
 }
 

package/src/utilities/clamp.ts

@@ -0,0 +1,5 @@
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value));
+}
+
+export { clamp as default, clamp };

package/src/utilities/color.ts

@@ -0,0 +1,33 @@
+function componentToHex(c) {
+  const hex = c.toString(16);
+  return hex.length == 1 ? '0' + hex : hex;
+}
+
+/**
+ * Converts RGB color values to a hexadecimal color string.
+ * @param r - The red component value (0-255).
+ * @param g - The green component value (0-255).
+ * @param b - The blue component value (0-255).
+ * @returns The hexadecimal color string representation.
+ */
+function rgbToHex(r, g, b) {
+  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+
+/**
+ * Converts a hexadecimal color code to an RGB object.
+ * @param hex - The hexadecimal color code to convert.
+ * @returns An object representing the RGB values of the color, or null if the input is invalid.
+ */
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+export { hexToRgb, rgbToHex };

package/src/utilities/colormap.ts

@@ -1,4 +1,8 @@
-import { ColormapRegistration } from '../types';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+
+import { ColormapPublic, ColormapRegistration } from '../types';
+import isEqual from './isEqual';
+import { actorIsA } from './actorCheck';
 
 const _colormaps = new Map();
 
@@ -29,4 +33,79 @@ function getColormapNames() {
   return Array.from(_colormaps.keys());
 }
 
-export { getColormap, getColormapNames, registerColormap };
+/**
+ * Finds a colormap that matches the given RGB points.
+ *
+ * @param rgbPoints - The RGB points to match against the colormaps.
+ * @returns  The matched colormap object or null if no match is found.
+ */
+function findMatchingColormap(rgbPoints, actor): ColormapPublic | null {
+  const colormapsVTK = vtkColorMaps.rgbPresetNames.map((presetName) =>
+    vtkColorMaps.getPresetByName(presetName)
+  );
+
+  const colormapsCS3D = getColormapNames().map((colormapName) =>
+    getColormap(colormapName)
+  );
+
+  const colormaps = colormapsVTK.concat(colormapsCS3D);
+
+  // Find the colormap that matches the given RGB points
+  const matchedColormap = colormaps.find((colormap) => {
+    const { RGBPoints: presetRGBPoints } = colormap;
+
+    if (presetRGBPoints.length !== rgbPoints.length) {
+      return false;
+    }
+
+    for (let i = 0; i < presetRGBPoints.length; i += 4) {
+      if (
+        !isEqual(
+          presetRGBPoints.slice(i + 1, i + 4),
+          rgbPoints.slice(i + 1, i + 4)
+        )
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+
+  if (!matchedColormap) {
+    return null;
+  }
+
+  const opacity = [];
+  if (actorIsA(actor, 'vtkVolume')) {
+    const opacityPoints = actor
+      .getProperty()
+      .getScalarOpacity(0)
+      .getDataPointer();
+
+    if (!opacityPoints) {
+      return {
+        name: matchedColormap.Name,
+      };
+    }
+
+    for (let i = 0; i < opacityPoints.length; i += 2) {
+      opacity.push({
+        value: opacityPoints[i],
+        opacity: opacityPoints[i + 1],
+      });
+    }
+  }
+
+  return {
+    name: matchedColormap.Name,
+    opacity,
+  };
+}
+
+export {
+  getColormap,
+  getColormapNames,
+  registerColormap,
+  findMatchingColormap,
+};

package/src/utilities/convertStackToVolumeViewport.ts

@@ -0,0 +1,117 @@
+import { IStackViewport, IVolumeViewport, Point3 } from '../types';
+import { setVolumesForViewports } from '../RenderingEngine/helpers';
+import {
+  createAndCacheVolume,
+  getUnknownVolumeLoaderSchema,
+} from '../loaders/volumeLoader';
+import { Events, OrientationAxis, ViewportType } from '../enums';
+
+/**
+ * Converts a stack viewport to a volume viewport.
+ *
+ * @param params - The parameters for the conversion.
+ * @param params.viewport - The stack viewport to convert.
+ * @param params.options - The options for the conversion.
+ * @param [params.options.volumeId] - The volumeId that will get generated, it should have the volume loader schema defined if not we will use the default one.
+ * @param [params.options.viewportId] - The viewportId that will get used for new viewport. If not provided, the stack viewport id will be used.
+ * @param [params.options.background] - The background color of the volume viewport.
+ * @returns The converted volume viewport.
+ */
+async function convertStackToVolumeViewport({
+  viewport,
+  options,
+}: {
+  viewport: IStackViewport;
+  options: {
+    volumeId: string;
+    viewportId?: string;
+    background?: Point3;
+    orientation?: OrientationAxis;
+  };
+}): Promise<IVolumeViewport> {
+  const renderingEngine = viewport.getRenderingEngine();
+
+  let { volumeId } = options;
+
+  // if there is no loader schema for the volume Id, we will use the default one
+  // which we can get from the volume loader
+  if (volumeId.split(':').length === 1) {
+    const schema = getUnknownVolumeLoaderSchema();
+    volumeId = `${schema}:${volumeId}`;
+  }
+
+  const { id, element } = viewport;
+  const viewportId = options.viewportId || id;
+
+  const imageIds = viewport.getImageIds();
+
+  // It is important to keep the camera before enabling the viewport
+  const prevCamera = viewport.getCamera();
+
+  // this will disable the stack viewport and remove it from the toolGroup
+  renderingEngine.enableElement({
+    viewportId,
+    type: ViewportType.ORTHOGRAPHIC,
+    element,
+    defaultOptions: {
+      background: options.background,
+      orientation: options.orientation,
+    },
+  });
+
+  // Ideally here we should be able to just create a local volume and not use the
+  // volume louder but we don't know if the stack is already pre-cached for all its
+  // imageIds or not so we just let the loader handle it and we have cache
+  // optimizations in place to avoid fetching the same imageId if it is already
+  // cached
+  const volume = await createAndCacheVolume(volumeId, {
+    imageIds,
+  });
+
+  volume.load();
+
+  // we should get the new viewport from the renderingEngine since the stack viewport
+  // was disabled and replaced with a volume viewport of the same id
+  const volumeViewport = <IVolumeViewport>(
+    renderingEngine.getViewport(viewportId)
+  );
+
+  setVolumesForViewports(
+    renderingEngine,
+    [
+      {
+        volumeId,
+      },
+    ],
+    [viewportId]
+  );
+
+  const volumeViewportNewVolumeHandler = () => {
+    if (!options.orientation) {
+      volumeViewport.setCamera({
+        ...prevCamera,
+      });
+    }
+    volumeViewport.render();
+
+    element.removeEventListener(
+      Events.VOLUME_VIEWPORT_NEW_VOLUME,
+      volumeViewportNewVolumeHandler
+    );
+  };
+
+  const addVolumeViewportNewVolumeListener = () => {
+    element.addEventListener(
+      Events.VOLUME_VIEWPORT_NEW_VOLUME,
+      volumeViewportNewVolumeHandler
+    );
+  };
+
+  addVolumeViewportNewVolumeListener();
+
+  volumeViewport.render();
+
+  return volumeViewport;
+}
+
+export { convertStackToVolumeViewport };

package/src/utilities/convertToGrayscale.ts

@@ -0,0 +1,27 @@
+export default function convertToGrayscale(
+  scalarData,
+  width: number,
+  height: number
+) {
+  const isRGBA = scalarData.length === width * height * 4;
+  const isRGB = scalarData.length === width * height * 3;
+  if (isRGBA || isRGB) {
+    const newScalarData = new Float32Array(width * height);
+    let offset = 0;
+    let destOffset = 0;
+    const increment = isRGBA ? 4 : 3;
+    for (let x = 0; x < width; x++) {
+      for (let y = 0; y < height; y++) {
+        const r = scalarData[offset];
+        const g = scalarData[offset + 1];
+        const b = scalarData[offset + 2];
+        newScalarData[destOffset] = (r + g + b) / 3;
+        offset += increment;
+        destOffset++;
+      }
+    }
+    return newScalarData;
+  } else {
+    return scalarData;
+  }
+}

package/src/utilities/convertVolumeToStackViewport.ts

@@ -0,0 +1,125 @@
+import * as Types from '../types';
+import cache, { ImageVolume } from '../cache';
+import { ViewportType } from '../enums';
+
+/**
+ * Converts a volume viewport to a stack viewport.
+ *
+ * @param params - The parameters for the conversion.
+ * @param params.viewport - The volume viewport to convert.
+ * @param params.options - The conversion options.
+ * @param [params.options.viewportId] - The new stackViewportId, If not provided, the volume viewport id will be used.
+ * @param [params.options.background] - The background color of the stack viewport.
+ * @param [params.options.decache] - Whether to decache the volume. Defaults to false.
+ *
+ * @returns The converted stack viewport.
+ */
+async function convertVolumeToStackViewport({
+  viewport,
+  options,
+}: {
+  viewport: Types.IVolumeViewport;
+  options: {
+    viewportId?: string;
+    background?: Types.Point3;
+  };
+}): Promise<Types.IStackViewport> {
+  const volumeViewport = viewport;
+  const { id, element } = volumeViewport;
+  const renderingEngine = viewport.getRenderingEngine();
+  const imageIdIndex = viewport.getCurrentImageIdIndex();
+
+  const { background } = options;
+  const viewportId = options.viewportId || id;
+
+  const actorEntry = volumeViewport.getDefaultActor();
+  const { uid: volumeId } = actorEntry;
+  const volume = cache.getVolume(volumeId) as Types.IImageVolume;
+
+  if (!(volume instanceof ImageVolume)) {
+    throw new Error(
+      'Currently, you cannot decache a volume that is not an ImageVolume. So, unfortunately, volumes such as nifti  (which are basic Volume, without imageIds) cannot be decached.'
+    );
+  }
+
+  const viewportInput = {
+    viewportId,
+    type: ViewportType.STACK,
+    element,
+    defaultOptions: {
+      background,
+    },
+  };
+
+  renderingEngine.enableElement(viewportInput);
+
+  // Get the stack viewport that was created
+  const stackViewport = <Types.IStackViewport>(
+    renderingEngine.getViewport(viewportId)
+  );
+
+  // So here we have two scenarios that we need to handle:
+  // 1. the volume was derived from a stack and we need to decache it, this is easy
+  // since we just need purge the volume from the cache and those images will get
+  // their copy of the image back
+  // 2. It was actually a native volume and we need to decache it, this is a bit more
+  // complicated since then we need to decide on the imageIds for it to get
+  // decached to
+  const hasCachedImages = volume.imageCacheOffsetMap.size > 0;
+  // Initialize the variable to hold the final result
+  let isAllImagesCached = false;
+
+  if (hasCachedImages) {
+    // Check if every imageId in the volume is in the _imageCache
+    isAllImagesCached = volume.imageIds.every((imageId) =>
+      cache.getImage(imageId)
+    );
+  }
+
+  const volumeUsedInOtherViewports = renderingEngine
+    .getVolumeViewports()
+    .find((vp) => vp.hasVolumeId(volumeId));
+
+  volume.decache(!volumeUsedInOtherViewports && isAllImagesCached);
+
+  const stack = [...volume.imageIds].reverse();
+
+  let imageIdIndexToJump = Math.max(
+    volume.imageIds.length - imageIdIndex - 1,
+    0
+  );
+
+  // Check to see if the image is already cached or not. If it's not, we will use another
+  // nearby imageId for the first image to jump to. There seem to be a lot of side effects
+  // if we jump to an image that is not cached in stack viewport while we convert
+  // from a volume viewport. For example, if we switch back and forth between stack and volume,
+  // and then try to jump to an image that is not cached, the image will not render at
+  // all when the full volume is filled. I'm not sure why yet.
+  const imageToJump = cache.getImage(stack[imageIdIndexToJump]);
+  if (!imageToJump) {
+    let minDistance = Infinity;
+    let minDistanceIndex = null;
+
+    stack.forEach((imageId, index) => {
+      const image = cache.getImage(imageId);
+      if (image) {
+        const distance = Math.abs(imageIdIndexToJump - index);
+        if (distance < minDistance) {
+          minDistance = distance;
+          minDistanceIndex = index;
+        }
+      }
+    });
+
+    imageIdIndexToJump = minDistanceIndex;
+  }
+
+  await stackViewport.setStack(stack, imageIdIndexToJump ?? 0);
+
+  // Render the image
+  stackViewport.render();
+
+  return stackViewport;
+}
+
+export { convertVolumeToStackViewport };

package/src/utilities/createFloat32SharedArray.ts

@@ -1,6 +1,10 @@
-import global from '../global';
 import { getShouldUseSharedArrayBuffer } from '../init';
 
+const SMALL_MEMORY_LIMIT = 2 * 1024 * 1024 * 1024 - 2;
+const BIG_MEMORY_LIMIT = SMALL_MEMORY_LIMIT * 2;
+// Wasm page size
+const PAGE_SIZE = 65536;
+
 /**
  * A helper function that creates a new Float32Array that utilized a shared
  * array buffer. This allows the array to be updated  simultaneously in
@@ -37,9 +41,20 @@ function createFloat32SharedArray(length: number): Float32Array {
     );
   }
 
-  const sharedArrayBuffer = new SharedArrayBuffer(length * 4);
+  const byteLength = length * 4;
 
-  return new Float32Array(sharedArrayBuffer);
+  if (byteLength < SMALL_MEMORY_LIMIT) {
+    const sharedArrayBuffer = new SharedArrayBuffer(byteLength);
+    return new Float32Array(sharedArrayBuffer);
+  } else if (byteLength < BIG_MEMORY_LIMIT) {
+    const pages = Math.ceil(byteLength / PAGE_SIZE);
+    const memory = new WebAssembly.Memory({
+      initial: pages,
+      maximum: pages,
+      shared: true,
+    });
+    return new Float32Array(memory.buffer, 0, length);
+  }
 }
 
 export default createFloat32SharedArray;

package/src/utilities/createSigmoidRGBTransferFunction.ts

@@ -1,7 +1,7 @@
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import { VOIRange } from '../types';
-import { windowLevel as windowLevelUtil } from '.';
+import * as windowLevelUtil from './windowLevel';
 
 /**
  * A utility that can be used to generate an Sigmoid RgbTransferFunction.

package/src/utilities/decimate.ts

@@ -0,0 +1,17 @@
+/**
+ * Return the decimated indices for the given list.
+ * @param list - to decimate the indices for
+ * @param interleave - the interleave interval for decimation
+ * @param offset - where to start the interleave from
+ */
+export default function decimate(
+  list: Array<unknown>,
+  interleave: number,
+  offset = 0
+): number[] {
+  const interleaveIndices = [];
+  for (let i = offset; i < list.length; i += interleave) {
+    interleaveIndices.push(i);
+  }
+  return interleaveIndices;
+}

package/src/utilities/deepMerge.ts

@@ -31,7 +31,12 @@ const defaultArrayMerge = (target, source, optionsArgument) => {
     } else if (isMergeableObject(e)) {
       destination[i] = deepMerge(target[i], e, optionsArgument);
     } else if (target.indexOf(e) === -1) {
-      destination.push(cloneIfNecessary(e, optionsArgument));
+      // IMPORTANT: WE SHOULD NOT PUSH NEW ELEMENTS TO THE ARRAY
+      // INSTEAD WE SHOULD REPLACE THE ELEMENT, this will result
+      // in unexpected behaviors if the initial tool parameters
+      // are desired to override the default tool parameters that are
+      // arrays
+      destination[i] = cloneIfNecessary(e, optionsArgument);
     }
   });
 

package/src/utilities/eventListener/MultiTargetEventListenerManager.ts

@@ -0,0 +1,90 @@
+import TargetEventListeners from './TargetEventListeners';
+
+/**
+ * MultiTargetEventListenerManager allows you to add event listeners to multiple
+ * HTML elements (targets) with support for event types with namespace,
+ * allow removing events without having to pass a callback and makes it possible
+ * to remove all event lsiteners from all HTML elements in a much simpler avoiding
+ * leaving listeners behind which would result in memory leaks.
+ *
+ * @example
+ * Adding and removing event listeners
+ * ```javascript
+ *   const eventListenerManager = new MultiTargetEventListenerManager()
+ *   const element1 = document.getElementById('foo');
+ *   const element2 = document.getElementById('bar');
+ *   const mouseoverCallback = () => { };
+ *   const mouseoutCallback = () => { };
+ *   const dragCallback = () => { };
+ *
+ *   eventListenerManager.addEventListener(element1, 'mouseover', mouseoverCallback);
+ *   eventListenerManager.addEventListener(element1, 'mouseout', mouseoutCallback);
+ *
+ *   eventListenerManager.addEventListener(element2, 'voi.mousemove', dragCallback);
+ *   eventListenerManager.addEventListener(element2, 'voi.drag', dragCallback);
+ *   eventListenerManager.addEventListener(element2, 'voi.mouseup', () => {
+ *     // do not need to store a reference of this function
+ *   }));
+ *
+ *   // Removes a specific event listener from element2
+ *   eventListenerManager.removeEventListener(element2, 'voi.mousemove', dragCallback)
+ *
+ *   // Removes all "mouseup" event listeners added to "voi" namespace on element2
+ *   eventListenerManager.removeEventListener(element2, 'voi.mouseup')
+ *
+ *   // Removes all event listeners added to element1 and element2
+ *   eventListenerManager.reset();
+ * ```
+ */
+class MultiTargetEventListenerManager {
+  private _targetsEventListeners = new Map<EventTarget, TargetEventListeners>();
+
+  public addEventListener(
+    target: EventTarget,
+    type: string,
+    callback: EventListener,
+    options?: AddEventListenerOptions
+  ) {
+    let eventListeners = this._targetsEventListeners.get(target);
+
+    if (!eventListeners) {
+      eventListeners = new TargetEventListeners(target);
+      this._targetsEventListeners.set(target, eventListeners);
+    }
+
+    eventListeners.addEventListener(type, callback, options);
+  }
+
+  public removeEventListener(
+    target: EventTarget,
+    type: string,
+    callback?: EventListener,
+    options?: EventListenerOptions
+  ) {
+    const eventListeners = this._targetsEventListeners.get(target);
+
+    if (!eventListeners) {
+      return;
+    }
+
+    eventListeners.removeEventListener(type, callback, options);
+
+    if (eventListeners.isEmpty) {
+      this._targetsEventListeners.delete(target);
+    }
+  }
+
+  public reset() {
+    Array.from(this._targetsEventListeners.entries()).forEach(
+      ([target, targetEventListeners]) => {
+        targetEventListeners.reset();
+        this._targetsEventListeners.delete(target);
+      }
+    );
+  }
+}
+
+export {
+  MultiTargetEventListenerManager as default,
+  MultiTargetEventListenerManager,
+};