@cornerstonejs/tools 3.0.2 → 3.0.4

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

@@ -0,0 +1,280 @@
+import { isColorbarSizeValid, isRangeValid, areColorbarRangesEqual, areColorbarSizesEqual, } from './common';
+import { ColorbarRangeTextPosition } from './enums/ColorbarRangeTextPosition';
+const DEFAULTS = {
+    FONT: '10px Arial',
+    COLOR: 'white',
+    TICK_SIZE: 5,
+    TICK_WIDTH: 1,
+    TICK_LABEL_MARGIN: 3,
+    MAX_NUM_TICKS: 8,
+    TICKS_STEPS: [1, 2.5, 5, 10],
+};
+class ColorbarTicks {
+    constructor(props) {
+        ColorbarTicks.validateProps(props);
+        const { top = 0, left = 0, size = { width: 20, height: 100 }, imageRange = { lower: 0, upper: 1 }, voiRange = { lower: 0, upper: 1 }, ticks: ticksProps, container, showFullPixelValueRange = false, } = props;
+        const { style: ticksStyle, position: rangeTextPosition } = ticksProps ?? {};
+        this._imageRange = imageRange;
+        this._voiRange = voiRange;
+        this._font = ticksStyle?.font ?? DEFAULTS.FONT;
+        this._color = ticksStyle?.color ?? DEFAULTS.COLOR;
+        this._tickSize = ticksStyle?.tickSize ?? DEFAULTS.TICK_SIZE;
+        this._tickWidth = ticksStyle?.tickWidth ?? DEFAULTS.TICK_WIDTH;
+        this._labelMargin = ticksStyle?.labelMargin ?? DEFAULTS.TICK_LABEL_MARGIN;
+        this._maxNumTicks = ticksStyle?.maxNumTicks ?? DEFAULTS.MAX_NUM_TICKS;
+        this._rangeTextPosition =
+            rangeTextPosition ?? ColorbarRangeTextPosition.Right;
+        this._showFullPixelValueRange = showFullPixelValueRange;
+        this._canvas = this._createCanvasElement(size, top, left);
+        if (container) {
+            this.appendTo(container);
+        }
+    }
+    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 top() {
+        return Number.parseInt(this._canvas.style.top);
+    }
+    set top(top) {
+        const { _canvas: canvas } = this;
+        const currentTop = this.top;
+        if (top === currentTop) {
+            return;
+        }
+        canvas.style.top = `${top}px`;
+        this.render();
+    }
+    get left() {
+        return Number.parseInt(this._canvas.style.left);
+    }
+    set left(left) {
+        const { _canvas: canvas } = this;
+        const currentLeft = this.left;
+        if (left === currentLeft) {
+            return;
+        }
+        canvas.style.left = `${left}px`;
+        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 tickSize() {
+        return this._tickSize;
+    }
+    set tickSize(tickSize) {
+        if (tickSize === this._tickSize) {
+            return;
+        }
+        this._tickSize = tickSize;
+        this.render();
+    }
+    get tickWidth() {
+        return this._tickWidth;
+    }
+    set tickWidth(tickWidth) {
+        if (tickWidth === this._tickWidth) {
+            return;
+        }
+        this._tickWidth = tickWidth;
+        this.render();
+    }
+    get color() {
+        return this._color;
+    }
+    set color(color) {
+        if (color === this._color) {
+            return;
+        }
+        this._color = color;
+        this.render();
+    }
+    get showFullPixelValueRange() {
+        return this._showFullPixelValueRange;
+    }
+    set showFullPixelValueRange(showFullRange) {
+        if (showFullRange === this._showFullPixelValueRange) {
+            return;
+        }
+        this._showFullPixelValueRange = showFullRange;
+        this.render();
+    }
+    get visible() {
+        return this._canvas.style.display === 'block';
+    }
+    set visible(visible) {
+        if (visible === this.visible) {
+            return;
+        }
+        this._canvas.style.display = visible ? 'block' : 'none';
+        if (visible) {
+            this.render();
+        }
+    }
+    appendTo(container) {
+        container.appendChild(this._canvas);
+        this.render();
+    }
+    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`,
+        });
+    }
+    _createCanvasElement(size, top, left) {
+        const canvas = document.createElement('canvas');
+        Object.assign(canvas.style, {
+            display: 'none',
+            position: 'absolute',
+            boxSizing: 'border-box',
+            top: `${top}px`,
+            left: `${left}px`,
+        });
+        this._setCanvasSize(canvas, size);
+        return canvas;
+    }
+    _getTicks(range) {
+        const { lower, upper } = range;
+        const rangeValue = upper - lower;
+        const roughStep = rangeValue / (this._maxNumTicks - 1);
+        const stepPower = Math.pow(10, -Math.floor(Math.log10(Math.abs(roughStep))));
+        const roughtStepNormalized = roughStep * stepPower;
+        const normalizedStep = DEFAULTS.TICKS_STEPS.find((n) => n >= roughtStepNormalized);
+        const step = normalizedStep / stepPower;
+        const scaleMax = Math.ceil(upper / step) * step;
+        const scaleMin = Math.floor(lower / step) * step;
+        const ticksCount = Math.round((scaleMax - scaleMin) / step) + 1;
+        const ticks = [];
+        for (let i = 0; i < ticksCount; i++) {
+            ticks.push(scaleMin + i * step);
+        }
+        return { scaleMin, scaleMax, step, ticks };
+    }
+    _getLeftTickInfo({ position, labelMeasure }) {
+        const { width } = this._canvas;
+        const labelX = width - this.tickSize - labelMeasure.width - this._labelMargin;
+        const labelPoint = [labelX, position];
+        const tickPoints = {
+            start: [width - this._tickSize, position],
+            end: [width, position],
+        };
+        return { labelPoint, tickPoints };
+    }
+    _getRightTickInfo({ position }) {
+        const labelPoint = [this._tickSize + this._labelMargin, position];
+        const tickPoints = {
+            start: [0, position],
+            end: [this._tickSize, position],
+        };
+        return { labelPoint, tickPoints };
+    }
+    _getTopTickInfo({ position, labelMeasure }) {
+        throw new Error('Not implemented');
+    }
+    _getBottomTickInfo({ position, labelMeasure }) {
+        throw new Error('Not implemented');
+    }
+    render() {
+        const { _canvas: canvas } = this;
+        if (!canvas.isConnected || !this.visible) {
+            return;
+        }
+        const { width, height } = canvas;
+        const isHorizontal = width >= height;
+        const maxCanvasPixelValue = isHorizontal ? width : height;
+        const canvasContext = canvas.getContext('2d');
+        const { _voiRange: voiRange } = this;
+        const range = this._showFullPixelValueRange
+            ? this._imageRange
+            : { ...voiRange };
+        const rangeWidth = range.upper - range.lower;
+        const { ticks } = this._getTicks(range);
+        canvasContext.clearRect(0, 0, width, height);
+        canvasContext.font = this._font;
+        canvasContext.textBaseline = 'middle';
+        canvasContext.fillStyle = this._color;
+        canvasContext.strokeStyle = this._color;
+        canvasContext.lineWidth = this.tickWidth;
+        ticks.forEach((tick) => {
+            let position = Math.round(maxCanvasPixelValue * ((tick - range.lower) / rangeWidth));
+            if (!isHorizontal) {
+                position = height - position;
+            }
+            if (position < 0 || position > maxCanvasPixelValue) {
+                return;
+            }
+            const label = tick.toString();
+            const labelMeasure = canvasContext.measureText(label);
+            let tickInfo;
+            if (isHorizontal) {
+                if (this._rangeTextPosition === ColorbarRangeTextPosition.Top) {
+                    tickInfo = this._getTopTickInfo({ position, labelMeasure });
+                }
+                else {
+                    tickInfo = this._getBottomTickInfo({ position, labelMeasure });
+                }
+            }
+            else {
+                if (this._rangeTextPosition === ColorbarRangeTextPosition.Left) {
+                    tickInfo = this._getLeftTickInfo({ position, labelMeasure });
+                }
+                else {
+                    tickInfo = this._getRightTickInfo({ position });
+                }
+            }
+            const { labelPoint, tickPoints } = tickInfo;
+            const { start: tickStart, end: tickEnd } = tickPoints;
+            canvasContext.beginPath();
+            canvasContext.moveTo(tickStart[0], tickStart[1]);
+            canvasContext.lineTo(tickEnd[0], tickEnd[1]);
+            canvasContext.fillText(label, labelPoint[0], labelPoint[1]);
+            canvasContext.stroke();
+            return position;
+        });
+    }
+}
+export { ColorbarTicks as default, ColorbarTicks };

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

@@ -0,0 +1,25 @@
+import type { Types } from '@cornerstonejs/core';
+import { Colorbar } from './Colorbar';
+import type { ViewportColorbarProps, ColorbarVOIRange } from './types';
+declare class ViewportColorbar extends Colorbar {
+    private _element;
+    private _volumeId;
+    private _hideTicksTime;
+    private _hideTicksTimeoutId;
+    constructor(props: ViewportColorbarProps);
+    get element(): HTMLDivElement;
+    get enabledElement(): Types.IEnabledElement;
+    protected getVOIMultipliers(): [number, number];
+    protected onVoiChange(voiRange: ColorbarVOIRange): void;
+    private static _getImageRange;
+    private static _getVOIRange;
+    private autoHideTicks;
+    private showAndAutoHideTicks;
+    private _stackNewImageCallback;
+    private _imageVolumeModifiedCallback;
+    private _viewportVOIModifiedCallback;
+    private _viewportColormapModifiedCallback;
+    private _addCornerstoneEventListener;
+    destroy(): void;
+}
+export { ViewportColorbar as default, ViewportColorbar };

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

@@ -0,0 +1,146 @@
+import { eventTarget, VolumeViewport, StackViewport, Enums, utilities, getEnabledElement, cache, } from '@cornerstonejs/core';
+import { Colorbar } from './Colorbar';
+import { getVOIMultipliers } from '../../getVOIMultipliers';
+const { Events } = Enums;
+const defaultImageRange = { lower: -1000, upper: 1000 };
+class ViewportColorbar extends Colorbar {
+    constructor(props) {
+        const { element, volumeId } = props;
+        const imageRange = ViewportColorbar._getImageRange(element, volumeId);
+        const voiRange = ViewportColorbar._getVOIRange(element, volumeId);
+        super({ ...props, imageRange, voiRange });
+        this.autoHideTicks = () => {
+            if (this._hideTicksTimeoutId) {
+                return;
+            }
+            const timeLeft = this._hideTicksTime - Date.now();
+            if (timeLeft <= 0) {
+                this.hideTicks();
+            }
+            else {
+                this._hideTicksTimeoutId = window.setTimeout(() => {
+                    this._hideTicksTimeoutId = 0;
+                    this.autoHideTicks();
+                }, timeLeft);
+            }
+        };
+        this._stackNewImageCallback = () => {
+            this.imageRange = ViewportColorbar._getImageRange(this._element);
+        };
+        this._imageVolumeModifiedCallback = (evt) => {
+            const { volumeId } = evt.detail;
+            if (volumeId !== this._volumeId) {
+                return;
+            }
+            const { _element: element } = this;
+            this.imageRange = ViewportColorbar._getImageRange(element, volumeId);
+        };
+        this._viewportVOIModifiedCallback = (evt) => {
+            const { viewportId, volumeId, range: voiRange, colormap } = evt.detail;
+            const { viewport } = this.enabledElement;
+            if (viewportId !== viewport.id || volumeId !== this._volumeId) {
+                return;
+            }
+            this.voiRange = voiRange;
+            if (colormap) {
+                this.activeColormapName = colormap.name;
+            }
+            this.showAndAutoHideTicks();
+        };
+        this._viewportColormapModifiedCallback = (evt) => {
+            const { viewportId, colormap, volumeId } = evt.detail;
+            const { viewport } = this.enabledElement;
+            if (viewportId !== viewport.id || volumeId !== this._volumeId) {
+                return;
+            }
+            this.activeColormapName = colormap.name;
+        };
+        this._element = element;
+        this._volumeId = volumeId;
+        this._addCornerstoneEventListener();
+    }
+    get element() {
+        return this._element;
+    }
+    get enabledElement() {
+        return getEnabledElement(this._element);
+    }
+    getVOIMultipliers() {
+        const { viewport } = this.enabledElement;
+        return getVOIMultipliers(viewport, this._volumeId);
+    }
+    onVoiChange(voiRange) {
+        super.onVoiChange(voiRange);
+        const { viewport } = this.enabledElement;
+        if (viewport instanceof StackViewport) {
+            viewport.setProperties({
+                voiRange: voiRange,
+            });
+            viewport.render();
+        }
+        else if (viewport instanceof VolumeViewport) {
+            const { _volumeId: volumeId } = this;
+            const viewportsContainingVolumeUID = utilities.getViewportsWithVolumeId(volumeId);
+            viewport.setProperties({ voiRange }, volumeId);
+            viewportsContainingVolumeUID.forEach((vp) => vp.render());
+        }
+    }
+    static _getImageRange(element, volumeId) {
+        const enabledElement = getEnabledElement(element);
+        const { viewport } = enabledElement;
+        const actor = viewport.getImageActor(volumeId);
+        if (!actor) {
+            return defaultImageRange;
+        }
+        const imageData = actor.getMapper().getInputData();
+        const scalarData = imageData.getPointData().getScalars();
+        let imageRange;
+        if (!scalarData) {
+            if (!volumeId) {
+                throw new Error('volumeId is required when scalarData is not available');
+            }
+            const volume = cache.getVolume(volumeId);
+            const [minValue, maxValue] = volume.voxelManager.getRange();
+            imageRange = [minValue, maxValue];
+        }
+        else {
+            imageRange = scalarData.getRange();
+        }
+        return imageRange[0] === 0 && imageRange[1] === 0
+            ? defaultImageRange
+            : { lower: imageRange[0], upper: imageRange[1] };
+    }
+    static _getVOIRange(element, volumeId) {
+        const enabledElement = getEnabledElement(element);
+        const { viewport } = enabledElement;
+        const actor = viewport.getImageActor(volumeId);
+        if (!actor) {
+            return defaultImageRange;
+        }
+        const voiRange = actor.getProperty().getRGBTransferFunction(0).getRange();
+        return voiRange[0] === 0 && voiRange[1] === 0
+            ? defaultImageRange
+            : { lower: voiRange[0], upper: voiRange[1] };
+    }
+    showAndAutoHideTicks(interval = 1000) {
+        this._hideTicksTime = Date.now() + interval;
+        this.showTicks();
+        this.autoHideTicks();
+    }
+    _addCornerstoneEventListener() {
+        const { _element: element } = this;
+        eventTarget.addEventListener(Events.IMAGE_VOLUME_MODIFIED, this._imageVolumeModifiedCallback);
+        element.addEventListener(Events.STACK_NEW_IMAGE, this._stackNewImageCallback);
+        element.addEventListener(Events.VOI_MODIFIED, this._viewportVOIModifiedCallback);
+        element.addEventListener(Events.COLORMAP_MODIFIED, this._viewportColormapModifiedCallback);
+    }
+    destroy() {
+        super.destroy();
+        const { _element: element } = this;
+        eventTarget.removeEventListener(Events.IMAGE_VOLUME_MODIFIED, this._imageVolumeModifiedCallback);
+        element.removeEventListener(Events.STACK_NEW_IMAGE, this._stackNewImageCallback);
+        element.removeEventListener(Events.VOI_MODIFIED, this._viewportVOIModifiedCallback);
+        element.removeEventListener(Events.COLORMAP_MODIFIED, this._viewportColormapModifiedCallback);
+    }
+}
+export { ViewportColorbar as default, ViewportColorbar };

package/dist/esm/utilities/voi/colorbar/common/areColorbarRangesEqual.d.ts

@@ -0,0 +1,3 @@
+import type { ColorbarImageRange } from '../types/ColorbarImageRange';
+declare const areColorbarRangesEqual: (a: ColorbarImageRange, b: ColorbarImageRange) => boolean;
+export { areColorbarRangesEqual as default, areColorbarRangesEqual };

package/dist/esm/utilities/voi/colorbar/common/areColorbarRangesEqual.js

@@ -0,0 +1,4 @@
+const areColorbarRangesEqual = (a, b) => {
+    return !!a && !!b && a.lower === b.lower && a.upper === b.upper;
+};
+export { areColorbarRangesEqual as default, areColorbarRangesEqual };

package/dist/esm/utilities/voi/colorbar/common/areColorbarSizesEqual.d.ts

@@ -0,0 +1,3 @@
+import type { ColorbarSize } from '../types/ColorbarSize';
+declare const areColorbarSizesEqual: (a: ColorbarSize, b: ColorbarSize) => boolean;
+export { areColorbarSizesEqual as default, areColorbarSizesEqual };

package/dist/esm/utilities/voi/colorbar/common/areColorbarSizesEqual.js

@@ -0,0 +1,4 @@
+const areColorbarSizesEqual = (a, b) => {
+    return !!a && !!b && a.width === b.width && a.height === b.height;
+};
+export { areColorbarSizesEqual as default, areColorbarSizesEqual };

package/dist/esm/utilities/voi/colorbar/common/index.d.ts

@@ -0,0 +1,4 @@
+export { isRangeValid } from './isRangeValid';
+export { isColorbarSizeValid } from './isColorbarSizeValid';
+export { areColorbarRangesEqual } from './areColorbarRangesEqual';
+export { areColorbarSizesEqual } from './areColorbarSizesEqual';

package/dist/esm/utilities/voi/colorbar/common/index.js

@@ -0,0 +1,4 @@
+export { isRangeValid } from './isRangeValid';
+export { isColorbarSizeValid } from './isColorbarSizeValid';
+export { areColorbarRangesEqual } from './areColorbarRangesEqual';
+export { areColorbarSizesEqual } from './areColorbarSizesEqual';

package/dist/esm/utilities/voi/colorbar/common/isColorbarSizeValid.d.ts

@@ -0,0 +1,3 @@
+import type { ColorbarSize } from '../types/ColorbarSize';
+declare const isColorbarSizeValid: (size: ColorbarSize) => boolean;
+export { isColorbarSizeValid as default, isColorbarSizeValid };

package/dist/esm/utilities/voi/colorbar/common/isColorbarSizeValid.js

@@ -0,0 +1,4 @@
+const isColorbarSizeValid = (size) => {
+    return !!size && size.width > 0 && size.height > 0;
+};
+export { isColorbarSizeValid as default, isColorbarSizeValid };

package/dist/esm/utilities/voi/colorbar/common/isRangeTextPositionValid.d.ts

@@ -0,0 +1,3 @@
+import { ColorbarRangeTextPosition } from '../enums';
+declare function isRangeTextPositionValid(colorbarWidth: number, colorbarHeight: number, rangeTextPosition: ColorbarRangeTextPosition): boolean;
+export { isRangeTextPositionValid as default, isRangeTextPositionValid };

package/dist/esm/utilities/voi/colorbar/common/isRangeTextPositionValid.js

@@ -0,0 +1,9 @@
+import { ColorbarRangeTextPosition } from '../enums';
+function isRangeTextPositionValid(colorbarWidth, colorbarHeight, rangeTextPosition) {
+    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/dist/esm/utilities/voi/colorbar/common/isRangeValid.d.ts

@@ -0,0 +1,3 @@
+import type { ColorbarImageRange } from '../types/ColorbarImageRange';
+declare const isRangeValid: (range: ColorbarImageRange) => boolean;
+export { isRangeValid as default, isRangeValid };

package/dist/esm/utilities/voi/colorbar/common/isRangeValid.js

@@ -0,0 +1,4 @@
+const isRangeValid = (range) => {
+    return range && range.upper > range.lower;
+};
+export { isRangeValid as default, isRangeValid };

package/dist/esm/utilities/voi/colorbar/enums/ColorbarRangeTextPosition.d.ts

@@ -0,0 +1,6 @@
+export declare enum ColorbarRangeTextPosition {
+    Top = "top",
+    Left = "left",
+    Bottom = "bottom",
+    Right = "right"
+}

package/dist/esm/utilities/voi/colorbar/enums/ColorbarRangeTextPosition.js

@@ -0,0 +1,7 @@
+export var ColorbarRangeTextPosition;
+(function (ColorbarRangeTextPosition) {
+    ColorbarRangeTextPosition["Top"] = "top";
+    ColorbarRangeTextPosition["Left"] = "left";
+    ColorbarRangeTextPosition["Bottom"] = "bottom";
+    ColorbarRangeTextPosition["Right"] = "right";
+})(ColorbarRangeTextPosition || (ColorbarRangeTextPosition = {}));

package/dist/esm/utilities/voi/colorbar/enums/index.d.ts

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

package/dist/esm/utilities/voi/colorbar/enums/index.js

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

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

@@ -0,0 +1,6 @@
+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/dist/esm/utilities/voi/colorbar/index.js

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

package/dist/esm/utilities/voi/colorbar/types/ColorbarCanvasProps.d.ts

@@ -0,0 +1,12 @@
+import type { 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/dist/esm/utilities/voi/colorbar/types/ColorbarCommonProps.d.ts

@@ -0,0 +1,11 @@
+import type { ColorbarRangeTextPosition } from '../enums/ColorbarRangeTextPosition';
+import type { ColorbarImageRange, ColorbarTicksStyle, ColorbarVOIRange } from '.';
+export type ColorbarCommonProps = {
+    imageRange?: ColorbarImageRange;
+    voiRange?: ColorbarVOIRange;
+    ticks?: {
+        position?: ColorbarRangeTextPosition;
+        style?: ColorbarTicksStyle;
+    };
+    showFullPixelValueRange?: boolean;
+};

package/dist/esm/utilities/voi/colorbar/types/ColorbarImageRange.d.ts

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

package/dist/esm/utilities/voi/colorbar/types/ColorbarProps.d.ts

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

package/dist/esm/utilities/voi/colorbar/types/ColorbarSize.d.ts

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

package/dist/esm/utilities/voi/colorbar/types/ColorbarTicksProps.d.ts

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

package/dist/esm/utilities/voi/colorbar/types/ColorbarTicksStyle.d.ts

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

package/dist/esm/utilities/voi/colorbar/types/ColorbarVOIRange.d.ts

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

package/dist/esm/utilities/voi/colorbar/types/ViewportColorbarProps.d.ts

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