@cornerstonejs/tools 2.0.0-beta.3 → 2.0.0-beta.30

package/dist/esm/utilities/viewportFilters/filterViewportsWithSameOrientation.js

@@ -7,4 +7,3 @@ export function filterViewportsWithSameOrientation(viewports, camera) {
     });
 }
 export default filterViewportsWithSameOrientation;
-//# sourceMappingURL=filterViewportsWithSameOrientation.js.map

package/dist/esm/utilities/viewportFilters/filterViewportsWithToolEnabled.d.ts

@@ -1,2 +1,2 @@
 import type { Types } from '@cornerstonejs/core';
-export default function filterViewportsWithToolEnabled(viewports: Array<Types.IStackViewport | Types.IVolumeViewport>, toolName: string): Array<Types.IStackViewport | Types.IVolumeViewport>;
+export default function filterViewportsWithToolEnabled(viewports: Array<Types.IViewport>, toolName: string): Array<Types.IStackViewport | Types.IVolumeViewport>;

package/dist/esm/utilities/viewportFilters/filterViewportsWithToolEnabled.js

@@ -1,12 +1,12 @@
-import { ToolGroupManager } from '../../store';
 import { ToolModes } from '../../enums';
+import { getToolGroupForViewport } from '../../store/ToolGroupManager';
 const { Active, Passive, Enabled } = ToolModes;
 export default function filterViewportsWithToolEnabled(viewports, toolName) {
     const numViewports = viewports.length;
     const viewportsWithToolEnabled = [];
     for (let vp = 0; vp < numViewports; vp++) {
         const viewport = viewports[vp];
-        const toolGroup = ToolGroupManager.getToolGroupForViewport(viewport.id, viewport.renderingEngineId);
+        const toolGroup = getToolGroupForViewport(viewport.id, viewport.renderingEngineId);
         if (!toolGroup) {
             continue;
         }
@@ -26,4 +26,3 @@ function _toolGroupHasActiveEnabledOrPassiveTool(toolGroup, toolName) {
     const toolMode = tool.mode;
     return toolMode === Active || toolMode === Passive || toolMode === Enabled;
 }
-//# sourceMappingURL=filterViewportsWithToolEnabled.js.map

package/dist/esm/utilities/viewportFilters/getViewportIdsWithToolToRender.js

@@ -15,4 +15,3 @@ export default function getViewportIdsWithToolToRender(element, toolName, requir
     const viewportIds = viewports.map((vp) => vp.id);
     return viewportIds;
 }
-//# sourceMappingURL=getViewportIdsWithToolToRender.js.map

package/dist/esm/utilities/viewportFilters/index.js

@@ -3,4 +3,3 @@ import filterViewportsWithToolEnabled from './filterViewportsWithToolEnabled';
 import getViewportIdsWithToolToRender from './getViewportIdsWithToolToRender';
 import filterViewportsWithParallelNormals from './filterViewportsWithParallelNormals';
 export { filterViewportsWithToolEnabled, filterViewportsWithFrameOfReferenceUID, getViewportIdsWithToolToRender, filterViewportsWithParallelNormals, };
-//# sourceMappingURL=index.js.map

package/dist/esm/utilities/voi/colorbar/Colorbar.d.ts

@@ -0,0 +1,44 @@
+import type { ColorbarProps, ColorbarVOIRange } from './types';
+import { ColorbarTicks } from './ColorbarTicks';
+import Widget from '../../../widgets/Widget';
+declare class Colorbar extends Widget {
+    private _colormaps;
+    private _activeColormapName;
+    private _eventListenersManager;
+    private _canvas;
+    private _ticksBar;
+    private _rangeTextPosition;
+    private _isMouseOver;
+    private _isInteracting;
+    constructor(props: ColorbarProps);
+    get activeColormapName(): string;
+    set activeColormapName(colormapName: string);
+    get imageRange(): ColorbarVOIRange;
+    set imageRange(imageRange: ColorbarVOIRange);
+    get voiRange(): ColorbarVOIRange;
+    set voiRange(voiRange: ColorbarVOIRange);
+    get showFullImageRange(): boolean;
+    set showFullImageRange(value: boolean);
+    destroy(): void;
+    protected createRootElement(): HTMLElement;
+    protected onContainerResize(): void;
+    protected getVOIMultipliers(): [number, number];
+    protected onVoiChange(voiRange: ColorbarVOIRange): void;
+    protected showTicks(): void;
+    protected hideTicks(): void;
+    private static getColormapsMap;
+    private static getInitialColormapName;
+    private _createCanvas;
+    _createTicksBar(props: ColorbarProps): ColorbarTicks;
+    private _getPointsFromMouseEvent;
+    private updateTicksBar;
+    private _mouseOverCallback;
+    private _mouseOutCallback;
+    private _mouseDownCallback;
+    private _mouseDragCallback;
+    private _mouseUpCallback;
+    private _addRootElementEventListeners;
+    private _addVOIEventListeners;
+    private _removeVOIEventListeners;
+}
+export { Colorbar as default, Colorbar };

package/dist/esm/utilities/voi/colorbar/Colorbar.js

@@ -0,0 +1,242 @@
+import { vec2 } from 'gl-matrix';
+import { utilities as csUtils } from '@cornerstonejs/core';
+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,
+};
+class Colorbar extends Widget {
+    constructor(props) {
+        super(props);
+        this._isMouseOver = false;
+        this._isInteracting = false;
+        this._mouseOverCallback = (evt) => {
+            this._isMouseOver = true;
+            this.showTicks();
+            evt.stopPropagation();
+        };
+        this._mouseOutCallback = (evt) => {
+            this._isMouseOver = false;
+            this.hideTicks();
+            evt.stopPropagation();
+        };
+        this._mouseDownCallback = (evt) => {
+            this._isInteracting = true;
+            this.showTicks();
+            this._addVOIEventListeners(evt);
+            evt.stopPropagation();
+        };
+        this._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();
+        };
+        this._mouseUpCallback = (evt) => {
+            this._isInteracting = false;
+            this.hideTicks();
+            this._removeVOIEventListeners();
+            evt.stopPropagation();
+        };
+        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();
+    }
+    get activeColormapName() {
+        return this._activeColormapName;
+    }
+    set activeColormapName(colormapName) {
+        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;
+    }
+    get imageRange() {
+        return this._canvas.imageRange;
+    }
+    set imageRange(imageRange) {
+        this._canvas.imageRange = imageRange;
+        this._ticksBar.imageRange = imageRange;
+    }
+    get voiRange() {
+        return this._canvas.voiRange;
+    }
+    set voiRange(voiRange) {
+        const { voiRange: currentVoiRange } = this._canvas;
+        if (!isRangeValid(voiRange) ||
+            areColorbarRangesEqual(voiRange, currentVoiRange)) {
+            return;
+        }
+        this._canvas.voiRange = voiRange;
+        this._ticksBar.voiRange = voiRange;
+        this.onVoiChange(voiRange);
+    }
+    get showFullImageRange() {
+        return this._canvas.showFullImageRange;
+    }
+    set showFullImageRange(value) {
+        this._canvas.showFullImageRange = value;
+        this._ticksBar.showFullPixelValueRange = value;
+    }
+    destroy() {
+        super.destroy();
+        this._eventListenersManager.reset();
+    }
+    createRootElement() {
+        const rootElement = document.createElement('div');
+        Object.assign(rootElement.style, {
+            position: 'relative',
+            fontSize: '0',
+            width: '100%',
+            height: '100%',
+        });
+        return rootElement;
+    }
+    onContainerResize() {
+        super.onContainerResize();
+        this.updateTicksBar();
+        this._canvas.size = this.containerSize;
+    }
+    getVOIMultipliers() {
+        return [DEFAULTS.MULTIPLIER, DEFAULTS.MULTIPLIER];
+    }
+    onVoiChange(voiRange) {
+    }
+    showTicks() {
+        this.updateTicksBar();
+        this._ticksBar.visible = true;
+    }
+    hideTicks() {
+        if (this._isInteracting || this._isMouseOver) {
+            return;
+        }
+        this._ticksBar.visible = false;
+    }
+    static getColormapsMap(props) {
+        const { colormaps } = props;
+        return colormaps.reduce((items, item) => items.set(item.Name, item), new Map());
+    }
+    static getInitialColormapName(props) {
+        const { activeColormapName, colormaps } = props;
+        const colormapExists = !!activeColormapName &&
+            colormaps.some((cm) => cm.Name === activeColormapName);
+        return colormapExists ? activeColormapName : colormaps[0].Name;
+    }
+    _createCanvas(props) {
+        const { imageRange, voiRange, showFullPixelValueRange } = props;
+        const colormap = this._colormaps.get(this._activeColormapName);
+        return new ColorbarCanvas({
+            colormap,
+            imageRange,
+            voiRange: voiRange,
+            showFullPixelValueRange,
+        });
+    }
+    _createTicksBar(props) {
+        const ticksProps = props.ticks;
+        return new ColorbarTicks({
+            imageRange: props.imageRange,
+            voiRange: props.voiRange,
+            ticks: ticksProps,
+            showFullPixelValueRange: props.showFullPixelValueRange,
+        });
+    }
+    _getPointsFromMouseEvent(evt) {
+        const { rootElement: element } = this;
+        const clientPoint = [evt.clientX, evt.clientY];
+        const pagePoint = [evt.pageX, evt.pageY];
+        const rect = element.getBoundingClientRect();
+        const localPoints = [
+            pagePoint[0] - rect.left - window.pageXOffset,
+            pagePoint[1] - rect.top - window.pageYOffset,
+        ];
+        return { client: clientPoint, page: pagePoint, local: localPoints };
+    }
+    updateTicksBar() {
+        const { width: containerWidth, height: containerHeight } = this.containerSize;
+        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;
+    }
+    _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);
+    }
+    _addVOIEventListeners(evt) {
+        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));
+    }
+    _removeVOIEventListeners() {
+        const { _eventListenersManager: manager } = this;
+        manager.removeEventListener(document, 'voi.mouseup');
+        manager.removeEventListener(document, 'voi.mousemove');
+    }
+}
+export { Colorbar as default, Colorbar };

package/dist/esm/utilities/voi/colorbar/ColorbarCanvas.d.ts

@@ -0,0 +1,29 @@
+import type { IColorMapPreset } from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import type { ColorbarCanvasProps } from './types/ColorbarCanvasProps';
+import type { ColorbarImageRange, ColorbarVOIRange } from './types';
+import type { ColorbarSize } from './types/ColorbarSize';
+declare class ColorbarCanvas {
+    private _canvas;
+    private _imageRange;
+    private _voiRange;
+    private _colormap;
+    private _showFullImageRange;
+    constructor(props: ColorbarCanvasProps);
+    get colormap(): IColorMapPreset;
+    set colormap(colormap: IColorMapPreset);
+    get size(): ColorbarSize;
+    set size(size: ColorbarSize);
+    get imageRange(): ColorbarImageRange;
+    set imageRange(imageRange: ColorbarImageRange);
+    get voiRange(): ColorbarVOIRange;
+    set voiRange(voiRange: ColorbarVOIRange);
+    get showFullImageRange(): boolean;
+    set showFullImageRange(showFullImageRange: boolean);
+    appendTo(container: HTMLElement): void;
+    dispose(): void;
+    private static validateProps;
+    private _setCanvasSize;
+    private _createRootElement;
+    private render;
+}
+export { ColorbarCanvas as default, ColorbarCanvas };

package/dist/esm/utilities/voi/colorbar/ColorbarCanvas.js

@@ -0,0 +1,182 @@
+import { utilities } from '@cornerstonejs/core';
+import interpolateVec3 from '../../math/vec3/interpolateVec3';
+import { isRangeValid, areColorbarRangesEqual, isColorbarSizeValid, areColorbarSizesEqual, } from './common';
+const { clamp } = utilities;
+class ColorbarCanvas {
+    constructor(props) {
+        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);
+        }
+    }
+    get colormap() {
+        return this._colormap;
+    }
+    set colormap(colormap) {
+        this._colormap = colormap;
+        this.render();
+    }
+    get size() {
+        const { width, height } = this._canvas;
+        return { width, height };
+    }
+    set size(size) {
+        const { _canvas: canvas } = this;
+        if (!isColorbarSizeValid(size) || areColorbarSizesEqual(canvas, size)) {
+            return;
+        }
+        this._setCanvasSize(canvas, size);
+        this.render();
+    }
+    get imageRange() {
+        return { ...this._imageRange };
+    }
+    set imageRange(imageRange) {
+        if (!isRangeValid(imageRange) ||
+            areColorbarRangesEqual(imageRange, this._imageRange)) {
+            return;
+        }
+        this._imageRange = imageRange;
+        this.render();
+    }
+    get voiRange() {
+        return { ...this._voiRange };
+    }
+    set voiRange(voiRange) {
+        if (!isRangeValid(voiRange) ||
+            areColorbarRangesEqual(voiRange, this._voiRange)) {
+            return;
+        }
+        this._voiRange = voiRange;
+        this.render();
+    }
+    get showFullImageRange() {
+        return this._showFullImageRange;
+    }
+    set showFullImageRange(showFullImageRange) {
+        if (showFullImageRange === this._showFullImageRange) {
+            return;
+        }
+        this._showFullImageRange = showFullImageRange;
+        this.render();
+    }
+    appendTo(container) {
+        container.appendChild(this._canvas);
+        this.render();
+    }
+    dispose() {
+        const { _canvas: canvas } = this;
+        const { parentElement } = canvas;
+        parentElement?.removeChild(canvas);
+    }
+    static validateProps(props) {
+        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"');
+        }
+    }
+    _setCanvasSize(canvas, size) {
+        const { width, height } = size;
+        canvas.width = width;
+        canvas.height = height;
+        Object.assign(canvas.style, {
+            width: `${width}px`,
+            height: `${height}px`,
+        });
+    }
+    _createRootElement(size) {
+        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;
+    }
+    render() {
+        if (!this._canvas.isConnected) {
+            return;
+        }
+        const { _colormap: colormap } = this;
+        const { RGBPoints: rgbPoints } = colormap;
+        const colorsCount = rgbPoints.length / 4;
+        const getColorPoint = (index) => {
+            const offset = 4 * index;
+            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');
+        if (!canvasContext) {
+            return;
+        }
+        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);
+        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;
+            if (currentColorPoint) {
+                for (let i = currentColorPoint.index; i < colorsCount; i++) {
+                    if (tVoiRange <= currentColorPoint.position) {
+                        break;
+                    }
+                    previousColorPoint = currentColorPoint;
+                    currentColorPoint = getColorPoint(i + 1);
+                }
+            }
+            let normColor;
+            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 };

package/dist/esm/utilities/voi/colorbar/ColorbarTicks.d.ts

@@ -0,0 +1,46 @@
+import type { ColorbarVOIRange, ColorbarSize, ColorbarTicksProps } from './types';
+declare class ColorbarTicks {
+    private _canvas;
+    private _imageRange;
+    private _voiRange;
+    private _color;
+    private _tickSize;
+    private _tickWidth;
+    private _labelMargin;
+    private _maxNumTicks;
+    private _rangeTextPosition;
+    private _showFullPixelValueRange;
+    private _font;
+    constructor(props: ColorbarTicksProps);
+    get size(): ColorbarSize;
+    set size(size: ColorbarSize);
+    get top(): number;
+    set top(top: number);
+    get left(): number;
+    set left(left: number);
+    get imageRange(): ColorbarVOIRange;
+    set imageRange(imageRange: ColorbarVOIRange);
+    get voiRange(): ColorbarVOIRange;
+    set voiRange(voiRange: ColorbarVOIRange);
+    get tickSize(): number;
+    set tickSize(tickSize: number);
+    get tickWidth(): number;
+    set tickWidth(tickWidth: number);
+    get color(): string;
+    set color(color: string);
+    get showFullPixelValueRange(): boolean;
+    set showFullPixelValueRange(showFullRange: boolean);
+    get visible(): boolean;
+    set visible(visible: boolean);
+    appendTo(container: HTMLElement): void;
+    private static validateProps;
+    private _setCanvasSize;
+    private _createCanvasElement;
+    private _getTicks;
+    private _getLeftTickInfo;
+    private _getRightTickInfo;
+    private _getTopTickInfo;
+    private _getBottomTickInfo;
+    private render;
+}
+export { ColorbarTicks as default, ColorbarTicks };