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

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

@@ -0,0 +1,366 @@
+import { IColorMapPreset } from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import { vec2 } from 'gl-matrix';
+import { utilities as csUtils, Types } from '@cornerstonejs/core';
+import type { ColorbarProps, ColorbarVOIRange } from './types';
+import { isRangeValid, areColorbarRangesEqual } from './common';
+import { ColorbarRangeTextPosition } from './enums/ColorbarRangeTextPosition';
+import { ColorbarCanvas } from './ColorbarCanvas';
+import { ColorbarTicks } from './ColorbarTicks';
+import isRangeTextPositionValid from './common/isRangeTextPositionValid';
+import Widget from '../../../widgets/Widget';
+
+const DEFAULTS = {
+  MULTIPLIER: 1,
+  RANGE_TEXT_POSITION: ColorbarRangeTextPosition.Right,
+  TICKS_BAR_SIZE: 50,
+};
+
+type ColorbarPoints = {
+  page: Types.Point2;
+  client: Types.Point2;
+  local: Types.Point2;
+};
+
+/**
+ * A base colorbar class that is not associated with any viewport. It is
+ * possible to click and drag to change the VOI range, shows the ticks during
+ * interaction and it can show full image range or VOI range.
+ */
+class Colorbar extends Widget {
+  private _colormaps: Map<string, IColorMapPreset>;
+  private _activeColormapName: string;
+  private _eventListenersManager: csUtils.eventListener.MultiTargetEventListenerManager;
+  private _canvas: ColorbarCanvas;
+  private _ticksBar: ColorbarTicks;
+  private _rangeTextPosition: ColorbarRangeTextPosition;
+
+  private _isMouseOver = false;
+  private _isInteracting = false;
+
+  constructor(props: ColorbarProps) {
+    super(props);
+
+    this._eventListenersManager =
+      new csUtils.eventListener.MultiTargetEventListenerManager();
+    this._colormaps = Colorbar.getColormapsMap(props);
+    this._activeColormapName = Colorbar.getInitialColormapName(props);
+    this._canvas = this._createCanvas(props);
+    this._ticksBar = this._createTicksBar(props);
+    this._rangeTextPosition =
+      props.ticks?.position ?? DEFAULTS.RANGE_TEXT_POSITION;
+
+    this._canvas.appendTo(this.rootElement);
+    this._ticksBar.appendTo(this.rootElement);
+
+    this._addRootElementEventListeners();
+  }
+
+  /**
+   * Returns the active LUT name
+   */
+  public get activeColormapName() {
+    return this._activeColormapName;
+  }
+
+  /**
+   * Set the current active LUT name and re-renders the color bar
+   */
+  public set activeColormapName(colormapName: string) {
+    if (colormapName === this._activeColormapName) {
+      return;
+    }
+
+    const colormap = this._colormaps.get(colormapName);
+
+    if (!colormap) {
+      console.warn(`Invalid colormap name (${colormapName})`);
+      return;
+    }
+
+    this._activeColormapName = colormapName;
+    this._canvas.colormap = colormap;
+  }
+
+  public get imageRange() {
+    return this._canvas.imageRange;
+  }
+
+  public set imageRange(imageRange: ColorbarVOIRange) {
+    this._canvas.imageRange = imageRange;
+    this._ticksBar.imageRange = imageRange;
+  }
+
+  public get voiRange() {
+    return this._canvas.voiRange;
+  }
+
+  public set voiRange(voiRange: ColorbarVOIRange) {
+    const { voiRange: currentVoiRange } = this._canvas;
+
+    if (
+      !isRangeValid(voiRange) ||
+      areColorbarRangesEqual(voiRange, currentVoiRange)
+    ) {
+      return;
+    }
+
+    this._canvas.voiRange = voiRange;
+    this._ticksBar.voiRange = voiRange;
+    this.onVoiChange(voiRange);
+  }
+
+  public get showFullImageRange() {
+    return this._canvas.showFullImageRange;
+  }
+
+  public set showFullImageRange(value: boolean) {
+    this._canvas.showFullImageRange = value;
+    this._ticksBar.showFullPixelValueRange = value;
+  }
+
+  public destroy() {
+    super.destroy();
+    this._eventListenersManager.reset();
+  }
+
+  protected createRootElement(): HTMLElement {
+    const rootElement = document.createElement('div');
+
+    Object.assign(rootElement.style, {
+      position: 'relative',
+      fontSize: '0',
+      width: '100%',
+      height: '100%',
+    });
+
+    return rootElement;
+  }
+
+  protected onContainerResize() {
+    super.onContainerResize();
+    this.updateTicksBar();
+    this._canvas.size = this.containerSize;
+  }
+
+  protected getVOIMultipliers(): [number, number] {
+    return [DEFAULTS.MULTIPLIER, DEFAULTS.MULTIPLIER];
+  }
+
+  protected onVoiChange(voiRange: ColorbarVOIRange) {
+    // no-op
+  }
+
+  protected showTicks() {
+    this.updateTicksBar();
+    this._ticksBar.visible = true;
+  }
+
+  protected hideTicks() {
+    if (this._isInteracting || this._isMouseOver) {
+      return;
+    }
+
+    this._ticksBar.visible = false;
+  }
+
+  private static getColormapsMap(props: ColorbarProps) {
+    const { colormaps } = props;
+
+    return colormaps.reduce(
+      (items, item) => items.set(item.Name, item),
+      new Map<string, IColorMapPreset>()
+    );
+  }
+
+  private static getInitialColormapName(props: ColorbarProps) {
+    const { activeColormapName, colormaps } = props;
+    const colormapExists =
+      !!activeColormapName &&
+      colormaps.some((cm) => cm.Name === activeColormapName);
+
+    return colormapExists ? activeColormapName : colormaps[0].Name;
+  }
+
+  private _createCanvas(props: ColorbarProps) {
+    const { imageRange, voiRange, showFullPixelValueRange } = props;
+    const colormap = this._colormaps.get(this._activeColormapName);
+
+    return new ColorbarCanvas({
+      colormap,
+      imageRange,
+      voiRange: voiRange,
+      showFullPixelValueRange,
+    });
+  }
+
+  public _createTicksBar(props: ColorbarProps): ColorbarTicks {
+    const ticksProps = props.ticks;
+
+    return new ColorbarTicks({
+      imageRange: props.imageRange,
+      voiRange: props.voiRange,
+      ticks: ticksProps,
+      showFullPixelValueRange: props.showFullPixelValueRange,
+    });
+  }
+
+  private _getPointsFromMouseEvent(evt: MouseEvent): ColorbarPoints {
+    const { rootElement: element } = this;
+    const clientPoint: Types.Point2 = [evt.clientX, evt.clientY];
+    const pagePoint: Types.Point2 = [evt.pageX, evt.pageY];
+    const rect = element.getBoundingClientRect();
+    const localPoints: Types.Point2 = [
+      pagePoint[0] - rect.left - window.pageXOffset,
+      pagePoint[1] - rect.top - window.pageYOffset,
+    ];
+
+    return { client: clientPoint, page: pagePoint, local: localPoints };
+  }
+
+  private updateTicksBar() {
+    const { width: containerWidth, height: containerHeight } =
+      this.containerSize;
+
+    // ResizeObserver have not triggered any event when this happen
+    if (containerWidth === 0 && containerHeight === 0) {
+      return;
+    }
+
+    const { _ticksBar: ticksBar, _rangeTextPosition: rangeTextPosition } = this;
+    const isHorizontal = containerWidth >= containerHeight;
+    const width = isHorizontal ? containerWidth : DEFAULTS.TICKS_BAR_SIZE;
+    const height = isHorizontal ? DEFAULTS.TICKS_BAR_SIZE : containerHeight;
+
+    if (
+      !isRangeTextPositionValid(
+        containerWidth,
+        containerHeight,
+        rangeTextPosition
+      )
+    ) {
+      throw new Error(
+        'Invalid rangeTextPosition value for the current colobar orientation'
+      );
+    }
+
+    let ticksBarTop;
+    let ticksBarLeft;
+
+    ticksBar.size = { width, height };
+
+    if (isHorizontal) {
+      ticksBarLeft = 0;
+      ticksBarTop =
+        rangeTextPosition === ColorbarRangeTextPosition.Top
+          ? -height
+          : containerHeight;
+    } else {
+      ticksBarTop = 0;
+      ticksBarLeft =
+        rangeTextPosition === ColorbarRangeTextPosition.Left
+          ? -width
+          : containerWidth;
+    }
+
+    ticksBar.top = ticksBarTop;
+    ticksBar.left = ticksBarLeft;
+  }
+
+  private _mouseOverCallback = (evt) => {
+    this._isMouseOver = true;
+    this.showTicks();
+    evt.stopPropagation();
+  };
+
+  private _mouseOutCallback = (evt) => {
+    this._isMouseOver = false;
+    this.hideTicks();
+    evt.stopPropagation();
+  };
+
+  private _mouseDownCallback = (evt: MouseEvent) => {
+    this._isInteracting = true;
+    this.showTicks();
+    this._addVOIEventListeners(evt);
+    evt.stopPropagation();
+  };
+
+  private _mouseDragCallback = (evt, initialState) => {
+    const multipliers = this.getVOIMultipliers();
+    const currentPoints = this._getPointsFromMouseEvent(evt);
+    const { points: startPoints, voiRange: startVOIRange } = initialState;
+    const canvasDelta = vec2.sub(
+      vec2.create(),
+      currentPoints.local,
+      startPoints.local
+    );
+
+    const wwDelta = canvasDelta[0] * multipliers[0];
+    const wcDelta = canvasDelta[1] * multipliers[1];
+
+    if (!wwDelta && !wcDelta) {
+      return;
+    }
+
+    const { lower: voiLower, upper: voiUpper } = startVOIRange;
+    let { windowWidth, windowCenter } = csUtils.windowLevel.toWindowLevel(
+      voiLower,
+      voiUpper
+    );
+
+    windowWidth = Math.max(windowWidth + wwDelta, 1);
+    windowCenter += wcDelta;
+
+    const newVoiRange = csUtils.windowLevel.toLowHighRange(
+      windowWidth,
+      windowCenter
+    );
+
+    this.voiRange = newVoiRange;
+    evt.stopPropagation();
+    evt.preventDefault();
+  };
+
+  private _mouseUpCallback = (evt) => {
+    this._isInteracting = false;
+    this.hideTicks();
+    this._removeVOIEventListeners();
+    evt.stopPropagation();
+  };
+
+  private _addRootElementEventListeners() {
+    const { _eventListenersManager: manager } = this;
+    const { rootElement: element } = this;
+
+    manager.addEventListener(element, 'mouseover', this._mouseOverCallback);
+    manager.addEventListener(element, 'mouseout', this._mouseOutCallback);
+    manager.addEventListener(
+      element,
+      'mousedown',
+      this._mouseDownCallback as EventListener
+    );
+  }
+
+  private _addVOIEventListeners(evt: MouseEvent) {
+    const { _eventListenersManager: manager } = this;
+    const points = this._getPointsFromMouseEvent(evt);
+    const voiRange = { ...this._canvas.voiRange };
+    const initialDragState = { points, voiRange };
+
+    this._removeVOIEventListeners();
+
+    manager.addEventListener(document, 'voi.mouseup', this._mouseUpCallback);
+    manager.addEventListener(document, 'voi.mousemove', (evt) =>
+      this._mouseDragCallback(evt, initialDragState)
+    );
+  }
+
+  private _removeVOIEventListeners() {
+    const { _eventListenersManager: manager } = this;
+
+    manager.removeEventListener(document, 'voi.mouseup');
+    manager.removeEventListener(document, 'voi.mousemove');
+  }
+}
+
+export { Colorbar as default, Colorbar };

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

@@ -0,0 +1,290 @@
+import { IColorMapPreset } from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import { utilities } from '@cornerstonejs/core';
+import interpolateVec3 from '../../math/vec3/interpolateVec3';
+import { ColorbarCanvasProps } from './types/ColorbarCanvasProps';
+import type { ColorbarImageRange, ColorbarVOIRange } from './types';
+import type { ColorbarSize } from './types/ColorbarSize';
+import {
+  isRangeValid,
+  areColorbarRangesEqual,
+  isColorbarSizeValid,
+  areColorbarSizesEqual,
+} from './common';
+
+const { clamp } = utilities;
+
+/**
+ * Canvas referenced by the color bar where the colormap is rendered. It may
+ * show the full image range or only the VOI range.
+ */
+class ColorbarCanvas {
+  private _canvas: HTMLCanvasElement;
+  private _imageRange: ColorbarImageRange;
+  private _voiRange: ColorbarVOIRange;
+  private _colormap: IColorMapPreset;
+  private _showFullImageRange: boolean;
+
+  constructor(props: ColorbarCanvasProps) {
+    ColorbarCanvas.validateProps(props);
+
+    const {
+      colormap,
+      size = { width: 20, height: 100 },
+      imageRange = { lower: 0, upper: 1 },
+      voiRange = { lower: 0, upper: 1 },
+      container,
+      showFullPixelValueRange = false,
+    } = props;
+
+    this._colormap = colormap;
+    this._imageRange = imageRange;
+    this._voiRange = voiRange;
+    this._showFullImageRange = showFullPixelValueRange;
+    this._canvas = this._createRootElement(size);
+
+    if (container) {
+      this.appendTo(container);
+    }
+  }
+
+  public get colormap(): IColorMapPreset {
+    return this._colormap;
+  }
+
+  public set colormap(colormap: IColorMapPreset) {
+    this._colormap = colormap;
+    this.render();
+  }
+
+  public get size(): ColorbarSize {
+    const { width, height } = this._canvas;
+    return { width, height };
+  }
+
+  public set size(size: ColorbarSize) {
+    const { _canvas: canvas } = this;
+
+    if (!isColorbarSizeValid(size) || areColorbarSizesEqual(canvas, size)) {
+      return;
+    }
+
+    this._setCanvasSize(canvas, size);
+    this.render();
+  }
+
+  public get imageRange(): ColorbarImageRange {
+    return { ...this._imageRange };
+  }
+
+  public set imageRange(imageRange: ColorbarImageRange) {
+    if (
+      !isRangeValid(imageRange) ||
+      areColorbarRangesEqual(imageRange, this._imageRange)
+    ) {
+      return;
+    }
+
+    this._imageRange = imageRange;
+    this.render();
+  }
+
+  public get voiRange(): ColorbarVOIRange {
+    return { ...this._voiRange };
+  }
+
+  public set voiRange(voiRange: ColorbarVOIRange) {
+    if (
+      !isRangeValid(voiRange) ||
+      areColorbarRangesEqual(voiRange, this._voiRange)
+    ) {
+      return;
+    }
+
+    this._voiRange = voiRange;
+    this.render();
+  }
+
+  public get showFullImageRange(): boolean {
+    return this._showFullImageRange;
+  }
+
+  public set showFullImageRange(showFullImageRange: boolean) {
+    if (showFullImageRange === this._showFullImageRange) {
+      return;
+    }
+
+    this._showFullImageRange = showFullImageRange;
+    this.render();
+  }
+
+  public appendTo(container: HTMLElement) {
+    container.appendChild(this._canvas);
+    this.render();
+  }
+
+  public dispose() {
+    const { _canvas: canvas } = this;
+    const { parentElement } = canvas;
+
+    parentElement?.removeChild(canvas);
+  }
+
+  private static validateProps(props: ColorbarCanvasProps) {
+    const { size, imageRange, voiRange } = props;
+
+    if (size && !isColorbarSizeValid(size)) {
+      throw new Error('Invalid "size"');
+    }
+
+    if (imageRange && !isRangeValid(imageRange)) {
+      throw new Error('Invalid "imageRange"');
+    }
+
+    if (voiRange && !isRangeValid(voiRange)) {
+      throw new Error('Invalid "voiRange"');
+    }
+  }
+
+  private _setCanvasSize(canvas: HTMLCanvasElement, size: ColorbarSize) {
+    const { width, height } = size;
+
+    canvas.width = width;
+    canvas.height = height;
+
+    Object.assign(canvas.style, {
+      width: `${width}px`,
+      height: `${height}px`,
+    });
+  }
+
+  private _createRootElement(size: ColorbarSize) {
+    const canvas = document.createElement('canvas');
+
+    Object.assign(canvas.style, {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      pointerEvents: 'none',
+      boxSizing: 'border-box',
+    });
+
+    this._setCanvasSize(canvas, size);
+
+    return canvas;
+  }
+
+  private render(): void {
+    if (!this._canvas.isConnected) {
+      return;
+    }
+
+    const { _colormap: colormap } = this;
+    const { RGBPoints: rgbPoints } = colormap;
+    const colorsCount = rgbPoints.length / 4;
+
+    // Returns a color point from rgbPoints. Each point has position, red,
+    // green and blue components which means each point has an offset equal
+    // to `4 * index`
+    const getColorPoint = (index) => {
+      const offset = 4 * index;
+
+      // It can get out of bounds when `voiRange.upper` is smaller than
+      // `imageRange.upper`. It's also checking if is smaller than zero
+      // for safety only because that should never happens.
+      if (index < 0 || index >= colorsCount) {
+        return;
+      }
+
+      return {
+        index,
+        position: rgbPoints[offset],
+        color: [
+          rgbPoints[offset + 1],
+          rgbPoints[offset + 2],
+          rgbPoints[offset + 3],
+        ],
+      };
+    };
+
+    const { width, height } = this._canvas;
+    const canvasContext = this._canvas.getContext('2d');
+    const isHorizontal = width > height;
+    const maxValue = isHorizontal ? width : height;
+    const { _voiRange: voiRange } = this;
+    const range = this._showFullImageRange ? this._imageRange : { ...voiRange };
+
+    const { windowWidth } = utilities.windowLevel.toWindowLevel(
+      voiRange.lower,
+      voiRange.upper
+    );
+
+    let previousColorPoint = undefined;
+    let currentColorPoint = getColorPoint(0);
+
+    // Starts from `range.lower` incrementing by incRawPixelValue on each iteration
+    const incRawPixelValue = (range.upper - range.lower) / (maxValue - 1);
+    let rawPixelValue = range.lower;
+
+    for (let i = 0; i < maxValue; i++) {
+      const tVoiRange = (rawPixelValue - voiRange.lower) / windowWidth;
+
+      // Find the color in a linear way (O(n) complexity).
+      // currentColorPoint shall move to the next color until tVoiRange is smaller
+      // than or equal to next color position.
+      if (currentColorPoint) {
+        for (let i = currentColorPoint.index; i < colorsCount; i++) {
+          if (tVoiRange <= currentColorPoint.position) {
+            break;
+          }
+
+          previousColorPoint = currentColorPoint;
+          currentColorPoint = getColorPoint(i + 1);
+        }
+      }
+
+      let normColor;
+
+      // For:
+      //   - firstColorPoint = getColorPoint(0)
+      //   - secondColorPoint = getColorPoint(1)
+      //   - lastColorPoint = getColorPoint(colorsCount - 1)
+      // Then
+      //   - previousColorPoint shall be undefined when tVoiRange < firstColorPoint.position
+      //   - currentColorPoint shall be undefined when tVoiRange > lastColorPoint.position
+      //   - previousColorPoint and currentColorPoint will be defined when
+      //     currentColorPoint.position is between secondColorPoint.position and
+      //     lastColorPoint.position.
+      if (!previousColorPoint) {
+        normColor = [...currentColorPoint.color];
+      } else if (!currentColorPoint) {
+        normColor = [...previousColorPoint.color];
+      } else {
+        const tColorRange =
+          (tVoiRange - previousColorPoint.position) /
+          (currentColorPoint.position - previousColorPoint.position);
+
+        normColor = interpolateVec3(
+          previousColorPoint.color,
+          currentColorPoint.color,
+          tColorRange
+        );
+      }
+
+      const color = normColor.map((color) =>
+        clamp(Math.round(color * 255), 0, 255)
+      );
+
+      canvasContext.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+
+      if (isHorizontal) {
+        canvasContext.fillRect(i, 0, 1, height);
+      } else {
+        canvasContext.fillRect(0, height - i - 1, width, 1);
+      }
+
+      rawPixelValue += incRawPixelValue;
+    }
+  }
+}
+
+export { ColorbarCanvas as default, ColorbarCanvas };