@cornerstonejs/tools 3.0.2 → 3.0.4

package/dist/esm/tools/MIPJumpToClickTool.d.ts

@@ -0,0 +1,8 @@
+import { BaseTool } from './base';
+import type { PublicToolProps, ToolProps } from '../types';
+declare class MIPJumpToClickTool extends BaseTool {
+    static toolName: any;
+    constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
+    mouseClickCallback(evt: any): void;
+}
+export default MIPJumpToClickTool;

package/dist/esm/tools/MIPJumpToClickTool.js

@@ -0,0 +1,56 @@
+import { BaseTool } from './base';
+import { getEnabledElement, VolumeViewport } from '@cornerstonejs/core';
+import { utilities } from '@cornerstonejs/core';
+import { getPointInLineOfSightWithCriteria } from '../utilities/planar';
+import { getToolGroupForViewport } from '../store/ToolGroupManager';
+class MIPJumpToClickTool extends BaseTool {
+    constructor(toolProps = {}, defaultToolProps = {
+        supportedInteractionTypes: ['Mouse', 'Touch'],
+        configuration: {
+            targetViewportIds: [],
+        },
+    }) {
+        super(toolProps, defaultToolProps);
+    }
+    mouseClickCallback(evt) {
+        const { element, currentPoints } = evt.detail;
+        const enabledElement = getEnabledElement(element);
+        const { viewport, renderingEngine } = enabledElement;
+        const volumeId = viewport.getVolumeId();
+        if (!volumeId) {
+            throw new Error(`MIPJumpToClickTool: targetId is not a volumeId, you should only use MIPJumpToClickTool with a volumeId as the targetId`);
+        }
+        let maxIntensity = -Infinity;
+        const maxFn = (intensity, point) => {
+            if (intensity > maxIntensity) {
+                maxIntensity = intensity;
+                return point;
+            }
+        };
+        const brightestPoint = getPointInLineOfSightWithCriteria(viewport, currentPoints.world, volumeId, maxFn);
+        if (!brightestPoint || !brightestPoint.length) {
+            return;
+        }
+        const { targetViewportIds, toolGroupId } = this.configuration;
+        const viewports = renderingEngine.getViewports().filter((vp) => {
+            if (targetViewportIds?.indexOf(vp.id) >= 0) {
+                return true;
+            }
+            const foundToolGroup = getToolGroupForViewport(vp.id, renderingEngine.id);
+            if (toolGroupId && toolGroupId === foundToolGroup?.id) {
+                return true;
+            }
+            return false;
+        });
+        viewports.forEach((viewport) => {
+            if (viewport instanceof VolumeViewport) {
+                viewport.jumpToWorld(brightestPoint);
+            }
+            else {
+                console.warn('Cannot jump to specified world coordinates for a viewport that is not a VolumeViewport');
+            }
+        });
+    }
+}
+MIPJumpToClickTool.toolName = 'MIPJumpToClickTool';
+export default MIPJumpToClickTool;

package/dist/esm/tools/MagnifyTool.d.ts

@@ -0,0 +1,25 @@
+import { BaseTool } from './base';
+import type { Types } from '@cornerstonejs/core';
+import type { EventTypes, PublicToolProps, ToolProps } from '../types';
+import type { IPoints } from '../types';
+declare class MagnifyTool extends BaseTool {
+    static toolName: any;
+    editData: {
+        referencedImageId: string;
+        viewportIdsToRender: string[];
+        enabledElement: Types.IEnabledElement;
+        renderingEngine: Types.IRenderingEngine;
+        currentPoints: IPoints;
+    } | null;
+    constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
+    private _hasBeenRemoved;
+    _getReferencedImageId(viewport: Types.IStackViewport | Types.IVolumeViewport): string;
+    preMouseDownCallback: (evt: EventTypes.InteractionEventType) => boolean;
+    preTouchStartCallback: (evt: EventTypes.InteractionEventType) => void;
+    _createMagnificationViewport: () => void;
+    _dragCallback: (evt: EventTypes.InteractionEventType) => void;
+    _dragEndCallback: (evt: EventTypes.InteractionEventType) => void;
+    _activateDraw: (element: HTMLDivElement) => void;
+    _deactivateDraw: (element: HTMLDivElement) => void;
+}
+export default MagnifyTool;

package/dist/esm/tools/MagnifyTool.js

@@ -0,0 +1,180 @@
+import { BaseTool } from './base';
+import { Events } from '../enums';
+import { getEnabledElement, StackViewport } from '@cornerstonejs/core';
+import { getViewportIdsWithToolToRender } from '../utilities/viewportFilters';
+import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
+import { state } from '../store/state';
+import { Enums } from '@cornerstonejs/core';
+import { hideElementCursor, resetElementCursor, } from '../cursors/elementCursor';
+const MAGNIFY_VIEWPORT_ID = 'magnify-viewport';
+class MagnifyTool extends BaseTool {
+    constructor(toolProps = {}, defaultToolProps = {
+        supportedInteractionTypes: ['Mouse', 'Touch'],
+        configuration: {
+            magnifySize: 10,
+            magnifyWidth: 250,
+            magnifyHeight: 250,
+        },
+    }) {
+        super(toolProps, defaultToolProps);
+        this._hasBeenRemoved = false;
+        this.preMouseDownCallback = (evt) => {
+            const eventDetail = evt.detail;
+            const { element, currentPoints } = eventDetail;
+            const enabledElement = getEnabledElement(element);
+            const { viewport, renderingEngine } = enabledElement;
+            if (!(viewport instanceof StackViewport)) {
+                throw new Error('MagnifyTool only works on StackViewports');
+            }
+            const referencedImageId = this._getReferencedImageId(viewport);
+            if (!referencedImageId) {
+                throw new Error('MagnifyTool: No referenced image id found, reconstructed planes not supported yet');
+            }
+            const viewportIdsToRender = getViewportIdsWithToolToRender(element, this.getToolName());
+            this.editData = {
+                referencedImageId,
+                viewportIdsToRender,
+                enabledElement,
+                renderingEngine,
+                currentPoints,
+            };
+            this._createMagnificationViewport();
+            this._activateDraw(element);
+            hideElementCursor(element);
+            evt.preventDefault();
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
+            return true;
+        };
+        this.preTouchStartCallback = (evt) => {
+            this.preMouseDownCallback(evt);
+        };
+        this._createMagnificationViewport = () => {
+            const { enabledElement, referencedImageId, viewportIdsToRender, renderingEngine, currentPoints, } = this.editData;
+            const { viewport } = enabledElement;
+            const { element } = viewport;
+            const viewportProperties = viewport.getProperties();
+            const { canvas: canvasPos, world: worldPos } = currentPoints;
+            let magnifyToolElement;
+            magnifyToolElement = element.querySelector('.magnifyTool');
+            if (magnifyToolElement === null) {
+                const magnifyElement = document.createElement('div');
+                magnifyElement.classList.add('magnifyTool');
+                magnifyElement.style.display = 'block';
+                magnifyElement.style.width = `${this.configuration.magnifyWidth}px`;
+                magnifyElement.style.height = `${this.configuration.magnifyHeight}px`;
+                magnifyElement.style.position = 'absolute';
+                magnifyToolElement = magnifyElement;
+                const viewportElement = element.querySelector('.viewport-element');
+                viewportElement.appendChild(magnifyElement);
+                const viewportInput = {
+                    viewportId: MAGNIFY_VIEWPORT_ID,
+                    type: Enums.ViewportType.STACK,
+                    element: magnifyToolElement,
+                };
+                renderingEngine.enableElement(viewportInput);
+            }
+            magnifyToolElement.style.top = `${canvasPos[1] - this.configuration.magnifyHeight / 2}px`;
+            magnifyToolElement.style.left = `${canvasPos[0] - this.configuration.magnifyWidth / 2}px`;
+            const magnifyViewport = renderingEngine.getViewport(MAGNIFY_VIEWPORT_ID);
+            magnifyViewport.setStack([referencedImageId]).then(() => {
+                if (this._hasBeenRemoved) {
+                    return;
+                }
+                magnifyViewport.setProperties(viewportProperties);
+                const { parallelScale } = viewport.getCamera();
+                const { focalPoint, position, viewPlaneNormal } = magnifyViewport.getCamera();
+                const distance = Math.sqrt(Math.pow(focalPoint[0] - position[0], 2) +
+                    Math.pow(focalPoint[1] - position[1], 2) +
+                    Math.pow(focalPoint[2] - position[2], 2));
+                const updatedFocalPoint = [
+                    worldPos[0],
+                    worldPos[1],
+                    worldPos[2],
+                ];
+                const updatedPosition = [
+                    updatedFocalPoint[0] + distance * viewPlaneNormal[0],
+                    updatedFocalPoint[1] + distance * viewPlaneNormal[1],
+                    updatedFocalPoint[2] + distance * viewPlaneNormal[2],
+                ];
+                magnifyViewport.setCamera({
+                    parallelScale: parallelScale * (1 / this.configuration.magnifySize),
+                    focalPoint: updatedFocalPoint,
+                    position: updatedPosition,
+                });
+                magnifyViewport.render();
+            });
+            magnifyToolElement.style.display = 'block';
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
+        };
+        this._dragCallback = (evt) => {
+            const eventDetail = evt.detail;
+            const { deltaPoints, element, currentPoints } = eventDetail;
+            const deltaPointsWorld = deltaPoints.world;
+            const canvasPos = currentPoints.canvas;
+            const enabledElement = getEnabledElement(element);
+            const { renderingEngine } = enabledElement;
+            const magnifyViewport = renderingEngine.getViewport(MAGNIFY_VIEWPORT_ID);
+            const magnifyElement = element.querySelector('.magnifyTool');
+            if (!magnifyElement) {
+                return;
+            }
+            magnifyElement.style.top = `${canvasPos[1] - this.configuration.magnifyHeight / 2}px`;
+            magnifyElement.style.left = `${canvasPos[0] - this.configuration.magnifyWidth / 2}px`;
+            const { focalPoint, position } = magnifyViewport.getCamera();
+            const updatedPosition = [
+                position[0] + deltaPointsWorld[0],
+                position[1] + deltaPointsWorld[1],
+                position[2] + deltaPointsWorld[2],
+            ];
+            const updatedFocalPoint = [
+                focalPoint[0] + deltaPointsWorld[0],
+                focalPoint[1] + deltaPointsWorld[1],
+                focalPoint[2] + deltaPointsWorld[2],
+            ];
+            magnifyViewport.setCamera({
+                focalPoint: updatedFocalPoint,
+                position: updatedPosition,
+            });
+            magnifyViewport.render();
+        };
+        this._dragEndCallback = (evt) => {
+            const { element } = evt.detail;
+            const enabledElement = getEnabledElement(element);
+            const { renderingEngine } = enabledElement;
+            renderingEngine.disableElement(MAGNIFY_VIEWPORT_ID);
+            const viewportElement = element.querySelector('.viewport-element');
+            const magnifyToolElement = viewportElement.querySelector('.magnifyTool');
+            viewportElement.removeChild(magnifyToolElement);
+            this._deactivateDraw(element);
+            resetElementCursor(element);
+            this._hasBeenRemoved = true;
+        };
+        this._activateDraw = (element) => {
+            state.isInteractingWithTool = true;
+            this._hasBeenRemoved = false;
+            element.addEventListener(Events.MOUSE_UP, this._dragEndCallback);
+            element.addEventListener(Events.MOUSE_DRAG, this._dragCallback);
+            element.addEventListener(Events.MOUSE_CLICK, this._dragEndCallback);
+            element.addEventListener(Events.TOUCH_END, this._dragEndCallback);
+            element.addEventListener(Events.TOUCH_DRAG, this._dragCallback);
+        };
+        this._deactivateDraw = (element) => {
+            state.isInteractingWithTool = false;
+            element.removeEventListener(Events.MOUSE_UP, this._dragEndCallback);
+            element.removeEventListener(Events.MOUSE_DRAG, this._dragCallback);
+            element.removeEventListener(Events.MOUSE_CLICK, this._dragEndCallback);
+            element.removeEventListener(Events.TOUCH_END, this._dragEndCallback);
+            element.removeEventListener(Events.TOUCH_DRAG, this._dragCallback);
+        };
+    }
+    _getReferencedImageId(viewport) {
+        const targetId = this.getTargetId(viewport);
+        let referencedImageId;
+        if (viewport instanceof StackViewport) {
+            referencedImageId = targetId.split('imageId:')[1];
+        }
+        return referencedImageId;
+    }
+}
+MagnifyTool.toolName = 'Magnify';
+export default MagnifyTool;

package/dist/esm/tools/OrientationMarkerTool.d.ts

@@ -0,0 +1,78 @@
+import vtkAnnotatedCubeActor from '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor';
+import { BaseTool } from './base';
+declare enum OverlayMarkerType {
+    ANNOTATED_CUBE = 1,
+    AXES = 2,
+    CUSTOM = 3
+}
+type FaceProperty = {
+    text?: string;
+    faceColor?: string;
+    fontColor?: string;
+    faceRotation?: number;
+};
+type AnnotatedCubeConfig = {
+    faceProperties: {
+        xPlus: FaceProperty;
+        xMinus: FaceProperty;
+        yPlus: FaceProperty;
+        yMinus: FaceProperty;
+        zPlus: FaceProperty;
+        zMinus: FaceProperty;
+    };
+    defaultStyle: {
+        fontStyle?: string;
+        fontFamily?: string;
+        fontColor?: string;
+        fontSizeScale?: (res: number) => number;
+        faceColor?: string;
+        edgeThickness?: number;
+        edgeColor?: string;
+        resolution?: number;
+    };
+};
+type OverlayConfiguration = {
+    [OverlayMarkerType.ANNOTATED_CUBE]: AnnotatedCubeConfig;
+    [OverlayMarkerType.AXES]: Record<string, never>;
+    [OverlayMarkerType.CUSTOM]: {
+        polyDataURL: string;
+    };
+};
+declare class OrientationMarkerTool extends BaseTool {
+    static toolName: any;
+    static CUBE: number;
+    static AXIS: number;
+    static VTPFILE: number;
+    orientationMarkers: any;
+    updatingOrientationMarker: any;
+    polyDataURL: any;
+    _resizeObservers: Map<any, any>;
+    static OVERLAY_MARKER_TYPES: typeof OverlayMarkerType;
+    constructor(toolProps?: {}, defaultToolProps?: {
+        configuration: {
+            orientationWidget: {
+                enabled: boolean;
+                viewportCorner: import("@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget/Constants").Corners;
+                viewportSize: number;
+                minPixelSize: number;
+                maxPixelSize: number;
+            };
+            overlayMarkerType: OverlayMarkerType;
+            overlayConfiguration: OverlayConfiguration;
+        };
+    });
+    onSetToolEnabled: () => void;
+    onSetToolActive: () => void;
+    onSetToolDisabled: () => void;
+    _getViewportsInfo: () => any[];
+    resize: (viewportId: any) => void;
+    _unsubscribeToViewportNewVolumeSet(): void;
+    _subscribeToViewportEvents(): void;
+    private cleanUpData;
+    private initViewports;
+    addAxisActorInViewport(viewport: any): Promise<void>;
+    private createCustomActor;
+    private createAnnotationCube;
+    createAnnotatedCubeActor(): Promise<vtkAnnotatedCubeActor>;
+}
+export default OrientationMarkerTool;

package/dist/esm/tools/OrientationMarkerTool.js

@@ -0,0 +1,284 @@
+import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';
+import vtkAnnotatedCubeActor from '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor';
+import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkXMLPolyDataReader from '@kitware/vtk.js/IO/XML/XMLPolyDataReader';
+import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
+import { BaseTool } from './base';
+import { Enums, eventTarget, getEnabledElementByIds, getRenderingEngines, } from '@cornerstonejs/core';
+import { filterViewportsWithToolEnabled } from '../utilities/viewportFilters';
+import { getToolGroup } from '../store/ToolGroupManager';
+import { Events } from '../enums';
+var OverlayMarkerType;
+(function (OverlayMarkerType) {
+    OverlayMarkerType[OverlayMarkerType["ANNOTATED_CUBE"] = 1] = "ANNOTATED_CUBE";
+    OverlayMarkerType[OverlayMarkerType["AXES"] = 2] = "AXES";
+    OverlayMarkerType[OverlayMarkerType["CUSTOM"] = 3] = "CUSTOM";
+})(OverlayMarkerType || (OverlayMarkerType = {}));
+class OrientationMarkerTool extends BaseTool {
+    static { this.CUBE = 1; }
+    static { this.AXIS = 2; }
+    static { this.VTPFILE = 3; }
+    static { this.OVERLAY_MARKER_TYPES = OverlayMarkerType; }
+    constructor(toolProps = {}, defaultToolProps = {
+        configuration: {
+            orientationWidget: {
+                enabled: true,
+                viewportCorner: vtkOrientationMarkerWidget.Corners.BOTTOM_RIGHT,
+                viewportSize: 0.15,
+                minPixelSize: 100,
+                maxPixelSize: 300,
+            },
+            overlayMarkerType: OrientationMarkerTool.OVERLAY_MARKER_TYPES.ANNOTATED_CUBE,
+            overlayConfiguration: {
+                [OrientationMarkerTool.OVERLAY_MARKER_TYPES.ANNOTATED_CUBE]: {
+                    faceProperties: {
+                        xPlus: { text: 'L', faceColor: '#ffff00', faceRotation: 90 },
+                        xMinus: { text: 'R', faceColor: '#ffff00', faceRotation: 270 },
+                        yPlus: {
+                            text: 'P',
+                            faceColor: '#00ffff',
+                            fontColor: 'white',
+                            faceRotation: 180,
+                        },
+                        yMinus: { text: 'A', faceColor: '#00ffff', fontColor: 'white' },
+                        zPlus: { text: 'S' },
+                        zMinus: { text: 'I' },
+                    },
+                    defaultStyle: {
+                        fontStyle: 'bold',
+                        fontFamily: 'Arial',
+                        fontColor: 'black',
+                        fontSizeScale: (res) => res / 2,
+                        faceColor: '#0000ff',
+                        edgeThickness: 0.1,
+                        edgeColor: 'black',
+                        resolution: 400,
+                    },
+                },
+                [OrientationMarkerTool.OVERLAY_MARKER_TYPES.AXES]: {},
+                [OrientationMarkerTool.OVERLAY_MARKER_TYPES.CUSTOM]: {
+                    polyDataURL: 'https://raw.githubusercontent.com/Slicer/Slicer/80ad0a04dacf134754459557bf2638c63f3d1d1b/Base/Logic/Resources/OrientationMarkers/Human.vtp',
+                },
+            },
+        },
+    }) {
+        super(toolProps, defaultToolProps);
+        this._resizeObservers = new Map();
+        this.onSetToolEnabled = () => {
+            this.initViewports();
+            this._subscribeToViewportEvents();
+        };
+        this.onSetToolActive = () => {
+            this.initViewports();
+            this._subscribeToViewportEvents();
+        };
+        this.onSetToolDisabled = () => {
+            this.cleanUpData();
+            this._unsubscribeToViewportNewVolumeSet();
+        };
+        this._getViewportsInfo = () => {
+            const viewports = getToolGroup(this.toolGroupId).viewportsInfo;
+            return viewports;
+        };
+        this.resize = (viewportId) => {
+            const orientationMarker = this.orientationMarkers[viewportId];
+            if (!orientationMarker) {
+                return;
+            }
+            const { orientationWidget } = orientationMarker;
+            orientationWidget.updateViewport();
+        };
+        this.orientationMarkers = {};
+        this.updatingOrientationMarker = {};
+    }
+    _unsubscribeToViewportNewVolumeSet() {
+        const unsubscribe = () => {
+            const viewportsInfo = this._getViewportsInfo();
+            viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+                const { viewport } = getEnabledElementByIds(viewportId, renderingEngineId);
+                const { element } = viewport;
+                element.removeEventListener(Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, this.initViewports.bind(this));
+                const resizeObserver = this._resizeObservers.get(viewportId);
+                resizeObserver.unobserve(element);
+            });
+        };
+        eventTarget.removeEventListener(Events.TOOLGROUP_VIEWPORT_ADDED, (evt) => {
+            if (evt.detail.toolGroupId !== this.toolGroupId) {
+                return;
+            }
+            unsubscribe();
+            this.initViewports();
+        });
+    }
+    _subscribeToViewportEvents() {
+        const subscribeToElementResize = () => {
+            const viewportsInfo = this._getViewportsInfo();
+            viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+                const { viewport } = getEnabledElementByIds(viewportId, renderingEngineId);
+                const { element } = viewport;
+                this.initViewports();
+                element.addEventListener(Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, this.initViewports.bind(this));
+                const resizeObserver = new ResizeObserver(() => {
+                    setTimeout(() => {
+                        const element = getEnabledElementByIds(viewportId, renderingEngineId);
+                        if (!element) {
+                            return;
+                        }
+                        const { viewport } = element;
+                        this.resize(viewportId);
+                        viewport.render();
+                    }, 100);
+                });
+                resizeObserver.observe(element);
+                this._resizeObservers.set(viewportId, resizeObserver);
+            });
+        };
+        subscribeToElementResize();
+        eventTarget.addEventListener(Events.TOOLGROUP_VIEWPORT_ADDED, (evt) => {
+            if (evt.detail.toolGroupId !== this.toolGroupId) {
+                return;
+            }
+            subscribeToElementResize();
+            this.initViewports();
+        });
+    }
+    cleanUpData() {
+        const renderingEngines = getRenderingEngines();
+        const renderingEngine = renderingEngines[0];
+        const viewports = renderingEngine.getViewports();
+        viewports.forEach((viewport) => {
+            const orientationMarker = this.orientationMarkers[viewport.id];
+            if (!orientationMarker) {
+                return;
+            }
+            const { actor, orientationWidget } = orientationMarker;
+            orientationWidget?.setEnabled(false);
+            orientationWidget?.delete();
+            actor?.delete();
+            const renderWindow = viewport
+                .getRenderingEngine()
+                .offscreenMultiRenderWindow.getRenderWindow();
+            renderWindow.render();
+            viewport.getRenderingEngine().render();
+            delete this.orientationMarkers[viewport.id];
+        });
+    }
+    initViewports() {
+        const renderingEngines = getRenderingEngines();
+        const renderingEngine = renderingEngines[0];
+        if (!renderingEngine) {
+            return;
+        }
+        let viewports = renderingEngine.getViewports();
+        viewports = filterViewportsWithToolEnabled(viewports, this.getToolName());
+        viewports.forEach((viewport) => {
+            const widget = viewport.getWidget(this.getToolName());
+            if (!widget || widget.isDeleted()) {
+                this.addAxisActorInViewport(viewport);
+            }
+        });
+    }
+    async addAxisActorInViewport(viewport) {
+        const viewportId = viewport.id;
+        if (!this.updatingOrientationMarker[viewportId]) {
+            this.updatingOrientationMarker[viewportId] = true;
+            const type = this.configuration.overlayMarkerType;
+            const overlayConfiguration = this.configuration.overlayConfiguration[type];
+            if (this.orientationMarkers[viewportId]) {
+                const { actor, orientationWidget } = this.orientationMarkers[viewportId];
+                viewport.getRenderer().removeActor(actor);
+                orientationWidget.setEnabled(false);
+            }
+            let actor;
+            if (type === 1) {
+                actor = this.createAnnotationCube(overlayConfiguration);
+            }
+            else if (type === 2) {
+                actor = vtkAxesActor.newInstance();
+            }
+            else if (type === 3) {
+                actor = await this.createCustomActor();
+            }
+            const renderer = viewport.getRenderer();
+            const renderWindow = viewport
+                .getRenderingEngine()
+                .offscreenMultiRenderWindow.getRenderWindow();
+            const { enabled, viewportCorner, viewportSize, minPixelSize, maxPixelSize, } = this.configuration.orientationWidget;
+            const orientationWidget = vtkOrientationMarkerWidget.newInstance({
+                actor,
+                interactor: renderWindow.getInteractor(),
+                parentRenderer: renderer,
+            });
+            orientationWidget.setEnabled(enabled);
+            orientationWidget.setViewportCorner(viewportCorner);
+            orientationWidget.setViewportSize(viewportSize);
+            orientationWidget.setMinPixelSize(minPixelSize);
+            orientationWidget.setMaxPixelSize(maxPixelSize);
+            orientationWidget.updateMarkerOrientation();
+            this.orientationMarkers[viewportId] = {
+                orientationWidget,
+                actor,
+            };
+            viewport.addWidget(this.getToolName(), orientationWidget);
+            renderWindow.render();
+            viewport.getRenderingEngine().render();
+            this.updatingOrientationMarker[viewportId] = false;
+        }
+    }
+    async createCustomActor() {
+        const url = this.configuration.overlayConfiguration[OverlayMarkerType.CUSTOM]
+            .polyDataURL;
+        const response = await fetch(url);
+        const arrayBuffer = await response.arrayBuffer();
+        const vtpReader = vtkXMLPolyDataReader.newInstance();
+        vtpReader.parseAsArrayBuffer(arrayBuffer);
+        vtpReader.update();
+        const polyData = vtkPolyData.newInstance();
+        polyData.shallowCopy(vtpReader.getOutputData());
+        polyData.getPointData().setActiveScalars('Color');
+        const mapper = vtkMapper.newInstance();
+        mapper.setInputData(polyData);
+        mapper.setColorModeToDirectScalars();
+        const actor = vtkActor.newInstance();
+        actor.setMapper(mapper);
+        actor.rotateZ(180);
+        return actor;
+    }
+    createAnnotationCube(overlayConfiguration) {
+        const actor = vtkAnnotatedCubeActor.newInstance();
+        actor.setDefaultStyle({ ...overlayConfiguration.defaultStyle });
+        actor.setXPlusFaceProperty({
+            ...overlayConfiguration.faceProperties.xPlus,
+        });
+        actor.setXMinusFaceProperty({
+            ...overlayConfiguration.faceProperties.xMinus,
+        });
+        actor.setYPlusFaceProperty({
+            ...overlayConfiguration.faceProperties.yPlus,
+        });
+        actor.setYMinusFaceProperty({
+            ...overlayConfiguration.faceProperties.yMinus,
+        });
+        actor.setZPlusFaceProperty({
+            ...overlayConfiguration.faceProperties.zPlus,
+        });
+        actor.setZMinusFaceProperty({
+            ...overlayConfiguration.faceProperties.zMinus,
+        });
+        return actor;
+    }
+    async createAnnotatedCubeActor() {
+        const axes = vtkAnnotatedCubeActor.newInstance();
+        const { faceProperties, defaultStyle } = this.configuration.annotatedCube;
+        axes.setDefaultStyle(defaultStyle);
+        Object.keys(faceProperties).forEach((key) => {
+            const methodName = `set${key.charAt(0).toUpperCase() + key.slice(1)}FaceProperty`;
+            axes[methodName](faceProperties[key]);
+        });
+        return axes;
+    }
+}
+OrientationMarkerTool.toolName = 'OrientationMarker';
+export default OrientationMarkerTool;

package/dist/esm/tools/OverlayGridTool.d.ts

@@ -0,0 +1,29 @@
+import type { Types } from '@cornerstonejs/core';
+import type { PublicToolProps, ToolProps, SVGDrawingHelper, Annotation } from '../types';
+import AnnotationDisplayTool from './base/AnnotationDisplayTool';
+export interface OverlayGridAnnotation extends Annotation {
+    data: {
+        viewportData: Map<string, object>;
+        pointSets: Array<object>;
+    };
+}
+declare class OverlayGridTool extends AnnotationDisplayTool {
+    static toolName: any;
+    _throttledCalculateCachedStats: Function;
+    isDrawing: boolean;
+    isHandleOutsideImage: boolean;
+    constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
+    onSetToolEnabled: () => void;
+    onSetToolActive: () => void;
+    _init: () => void;
+    calculateImageIdPointSets: (imageId: string) => {
+        pointSet1: Types.Point3[];
+        pointSet2: Types.Point3[];
+    };
+    renderAnnotation: (enabledElement: Types.IEnabledElement, svgDrawingHelper: SVGDrawingHelper) => boolean;
+    private initializeViewportData;
+    private isPerpendicular;
+    private isParallel;
+    private getImageIdNormal;
+}
+export default OverlayGridTool;