@cornerstonejs/tools 1.23.4 → 1.25.0

package/src/utilities/voi/colorbar/common/isColorbarSizeValid.ts

@@ -0,0 +1,7 @@
+import type { ColorbarSize } from '../types/ColorbarSize';
+
+const isColorbarSizeValid = (size: ColorbarSize) => {
+  return !!size && size.width > 0 && size.height > 0;
+};
+
+export { isColorbarSizeValid as default, isColorbarSizeValid };

package/src/utilities/voi/colorbar/common/isRangeTextPositionValid.ts

@@ -0,0 +1,16 @@
+import { ColorbarRangeTextPosition } from '../enums';
+
+function isRangeTextPositionValid(
+  colorbarWidth: number,
+  colorbarHeight: number,
+  rangeTextPosition: ColorbarRangeTextPosition
+) {
+  const isHorizontal = colorbarWidth >= colorbarHeight;
+  const validRangeTextPositions = isHorizontal
+    ? [ColorbarRangeTextPosition.Top, ColorbarRangeTextPosition.Bottom]
+    : [ColorbarRangeTextPosition.Left, ColorbarRangeTextPosition.Right];
+
+  return validRangeTextPositions.includes(rangeTextPosition);
+}
+
+export { isRangeTextPositionValid as default, isRangeTextPositionValid };

package/src/utilities/voi/colorbar/common/isRangeValid.ts

@@ -0,0 +1,7 @@
+import type { ColorbarImageRange } from '../types/ColorbarImageRange';
+
+const isRangeValid = (range: ColorbarImageRange) => {
+  return range && range.upper > range.lower;
+};
+
+export { isRangeValid as default, isRangeValid };

package/src/utilities/voi/colorbar/enums/ColorbarRangeTextPosition.ts

@@ -0,0 +1,11 @@
+/**
+ * Specify the position of the text/ticks.
+ * Left/Right are the valid options for a vertical colorbars and Top/Bottom
+ * for the horizontal ones.
+ */
+export enum ColorbarRangeTextPosition {
+  Top = 'top',
+  Left = 'left',
+  Bottom = 'bottom',
+  Right = 'right',
+}

package/src/utilities/voi/colorbar/enums/index.ts

@@ -0,0 +1 @@
+export { ColorbarRangeTextPosition } from './ColorbarRangeTextPosition';

package/src/utilities/voi/colorbar/index.ts

@@ -0,0 +1,8 @@
+import * as Enums from './enums';
+import type * as Types from './types';
+
+export type { Types };
+export { Enums };
+
+export { Colorbar } from './Colorbar';
+export { ViewportColorbar } from './ViewportColorbar';

package/src/utilities/voi/colorbar/types/ColorbarCanvasProps.ts

@@ -0,0 +1,14 @@
+import { IColorMapPreset } from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import type { ColorbarImageRange } from './ColorbarImageRange';
+import type { ColorbarSize } from './ColorbarSize';
+import type { ColorbarVOIRange } from './ColorbarVOIRange';
+
+export interface ColorbarCanvasProps {
+  colormap: IColorMapPreset;
+  size?: ColorbarSize;
+  imageRange?: ColorbarImageRange;
+  voiRange?: ColorbarVOIRange;
+
+  container?: HTMLElement;
+  showFullPixelValueRange?: boolean;
+}

package/src/utilities/voi/colorbar/types/ColorbarCommonProps.ts

@@ -0,0 +1,23 @@
+import { ColorbarRangeTextPosition } from '../enums/ColorbarRangeTextPosition';
+import type {
+  ColorbarImageRange,
+  ColorbarTicksStyle,
+  ColorbarVOIRange,
+} from '.';
+
+export type ColorbarCommonProps = {
+  // Image range from minPixelValue (lower) to maxPixelValue (upper)
+  imageRange?: ColorbarImageRange;
+  // VOI Range that is related to Window Width and Window Center
+  voiRange?: ColorbarVOIRange;
+  // Ticks props
+  ticks?: {
+    // Position where the range text (tiks) should be displayed related to the ticks bar
+    position?: ColorbarRangeTextPosition;
+    // Ticks style
+    style?: ColorbarTicksStyle;
+  };
+  // The color bar shall show a range from `imageRange.lower` to `imageRange.upper`
+  // when it is set to `true` or from `voiRange.lower` to `voiRange.upper` otherwise.
+  showFullPixelValueRange?: boolean;
+};

package/src/utilities/voi/colorbar/types/ColorbarImageRange.ts

@@ -0,0 +1,4 @@
+export type ColorbarImageRange = {
+  lower: number;
+  upper: number;
+};

package/src/utilities/voi/colorbar/types/ColorbarProps.ts

@@ -0,0 +1,8 @@
+import { IColorMapPreset } from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import { WidgetProps } from '../../../../widgets/types';
+import { ColorbarCommonProps } from '.';
+
+export type ColorbarProps = (WidgetProps & ColorbarCommonProps) & {
+  colormaps: IColorMapPreset[];
+  activeColormapName?: string;
+};

package/src/utilities/voi/colorbar/types/ColorbarSize.ts

@@ -0,0 +1,4 @@
+export type ColorbarSize = {
+  width: number;
+  height: number;
+};

package/src/utilities/voi/colorbar/types/ColorbarTicksProps.ts

@@ -0,0 +1,8 @@
+import type { ColorbarCommonProps, ColorbarSize } from '.';
+
+export type ColorbarTicksProps = ColorbarCommonProps & {
+  top?: number;
+  left?: number;
+  size?: ColorbarSize;
+  container?: HTMLElement;
+};

package/src/utilities/voi/colorbar/types/ColorbarTicksStyle.ts

@@ -0,0 +1,8 @@
+export type ColorbarTicksStyle = {
+  font?: string;
+  color?: string;
+  tickSize?: number;
+  tickWidth?: number;
+  labelMargin?: number;
+  maxNumTicks?: number;
+};

package/src/utilities/voi/colorbar/types/ColorbarVOIRange.ts

@@ -0,0 +1,3 @@
+import type { ColorbarImageRange } from './ColorbarImageRange';
+
+export type ColorbarVOIRange = ColorbarImageRange;

package/src/utilities/voi/colorbar/types/ViewportColorbarProps.ts

@@ -0,0 +1,6 @@
+import type { ColorbarProps } from './ColorbarProps';
+
+export type ViewportColorbarProps = ColorbarProps & {
+  element: HTMLDivElement;
+  volumeId?: string;
+};

package/src/utilities/voi/colorbar/types/index.ts

@@ -0,0 +1,8 @@
+export type { ColorbarCommonProps } from './ColorbarCommonProps';
+export type { ColorbarProps } from './ColorbarProps';
+export type { ColorbarImageRange } from './ColorbarImageRange';
+export type { ColorbarVOIRange } from './ColorbarVOIRange';
+export type { ColorbarSize } from './ColorbarSize';
+export type { ColorbarTicksProps } from './ColorbarTicksProps';
+export type { ColorbarTicksStyle } from './ColorbarTicksStyle';
+export type { ViewportColorbarProps } from './ViewportColorbarProps';

package/src/utilities/voi/index.ts

@@ -0,0 +1,3 @@
+import * as colorbar from './colorbar';
+
+export { colorbar };

package/src/widgets/Widget.ts

@@ -0,0 +1,169 @@
+import type { WidgetProps, WidgetSize } from './types';
+
+/**
+ * Base class for any widget that can be added to cornerstone. Currently it is
+ * responsible only for holding the `rootElement`, contains a method that allows
+ * adding it to the DOM and it also listens to container's size changes when the
+ * widget is already added to the DOM. `dispose` must be called to destroy the
+ * widget because it removes the widget from the DOM and stop listening to
+ * container changes.
+ *
+ * You can apply some styles to widgets using the widget id or the `widget` class.
+ *
+ * Example:
+ *   type ColorPickerProps = WidgetProps & {
+ *     selectedColor: string;
+ *   }
+ *
+ *   class ColorPicker extends Widget {
+ *     constructor(props: ColorPickerProps) {
+ *       super(props);
+ *       // [code]
+ *     }
+ *
+ *     public show() {
+ *       console.log('Show color picker');
+ *     }
+ *
+ *     protected containerResized() {
+ *       console.log('New container size: ', this.containerSize);
+ *     }
+ *   }
+ *
+ *   const colorPicker = new ColorPicker({
+ *     container: document.body,
+ *     selectedColor: '#000';
+ *   });
+ *
+ *   // another way to add the color picker to the DOM
+ *   colorPicker.appendTo(document.body)
+ *
+ *   // Show color picker
+ *   colorPicker.show();
+ */
+abstract class Widget {
+  private _id: string;
+  private _rootElement: HTMLElement;
+  private _containerSize: WidgetSize;
+  private _containerResizeObserver: ResizeObserver;
+
+  constructor({ id, container }: WidgetProps) {
+    this._id = id;
+    this._containerSize = { width: 0, height: 0 };
+    this._rootElement = this.createRootElement(id);
+    this._containerResizeObserver = new ResizeObserver(
+      this._containerResizeCallback
+    );
+
+    if (container) {
+      this.appendTo(container);
+    }
+  }
+
+  /**
+   * Widget id
+   */
+  public get id() {
+    return this._id;
+  }
+
+  /**
+   * Widget's root element
+   */
+  public get rootElement(): HTMLElement {
+    return this._rootElement;
+  }
+
+  /**
+   * Append the widget to a parent element
+   * @param container - HTML element where the widget should be added to
+   */
+  public appendTo(container: HTMLElement) {
+    const {
+      _rootElement: rootElement,
+      _containerResizeObserver: resizeObserver,
+    } = this;
+    const { parentElement: currentContainer } = rootElement;
+
+    if (!container || container === currentContainer) {
+      return;
+    }
+
+    if (currentContainer) {
+      resizeObserver.unobserve(currentContainer);
+    }
+
+    container.appendChild(rootElement);
+    resizeObserver.observe(container);
+  }
+
+  /**
+   * Removes the widget from the DOM and stop listening to DOM events
+   */
+  public destroy() {
+    const {
+      _rootElement: rootElement,
+      _containerResizeObserver: resizeObserver,
+    } = this;
+    const { parentElement } = rootElement;
+
+    parentElement?.removeChild(rootElement);
+    resizeObserver.disconnect();
+  }
+
+  protected get containerSize(): WidgetSize {
+    // Returns a copy to prevent any external change
+    return { ...this._containerSize };
+  }
+
+  /**
+   * Creates the root element which is a div by default
+   * @param id - Root element id
+   * @returns A new HTML element where all other elements should be added to
+   */
+  protected createRootElement(id: string): HTMLElement {
+    const rootElement = document.createElement('div');
+
+    rootElement.id = id;
+    rootElement.classList.add('widget');
+
+    Object.assign(rootElement.style, {
+      width: '100%',
+      height: '100%',
+    });
+
+    return rootElement;
+  }
+
+  /**
+   * Method called every time widget's container is resize giving the
+   * opportunity to children classes to act when that happens.
+   */
+  protected onContainerResize() {
+    // no-op
+  }
+
+  private _containerResizeCallback = (entries: ResizeObserverEntry[]): void => {
+    let width;
+    let height;
+
+    const { contentRect, contentBoxSize } = entries[0];
+
+    // `contentRect` is better supported than `borderBoxSize` or `contentBoxSize`,
+    // but it is left over from an earlier implementation of the Resize Observer API
+    // and may be deprecated in future versions.
+    // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect
+    if (contentRect) {
+      width = contentRect.width;
+      height = contentRect.height;
+    } else if (contentBoxSize?.length) {
+      width = contentBoxSize[0].inlineSize;
+      height = contentBoxSize[0].blockSize;
+    }
+
+    this._containerSize = { width, height };
+    this.onContainerResize();
+  };
+}
+
+export { Widget as default, Widget };

package/src/widgets/types/WidgetProps.ts

@@ -0,0 +1,4 @@
+export type WidgetProps = {
+  id: string;
+  container?: HTMLElement;
+};

package/src/widgets/types/WidgetSize.ts

@@ -0,0 +1,4 @@
+export type WidgetSize = {
+  width: number;
+  height: number;
+};

package/src/widgets/types/index.ts

@@ -0,0 +1,2 @@
+export { WidgetProps } from './WidgetProps';
+export { WidgetSize } from './WidgetSize';