@cornerstonejs/tools 2.0.0-beta.2 → 2.0.0-beta.20

package/dist/esm/tools/AnnotationEraserTool.js

@@ -0,0 +1,52 @@
+import { BaseTool } from './base';
+import { ToolGroupManager } from '../store';
+import { getAnnotations, removeAnnotation, } from '../stateManagement/annotation/annotationState';
+import { setAnnotationSelected } from '../stateManagement/annotation/annotationSelection';
+class AnnotationEraserTool extends BaseTool {
+    constructor(toolProps = {}, defaultToolProps = {
+        supportedInteractionTypes: ['Mouse', 'Touch'],
+    }) {
+        super(toolProps, defaultToolProps);
+        this.preMouseDownCallback = (evt) => {
+            return this._deleteNearbyAnnotations(evt, 'mouse');
+        };
+        this.preTouchStartCallback = (evt) => {
+            return this._deleteNearbyAnnotations(evt, 'touch');
+        };
+    }
+    _deleteNearbyAnnotations(evt, interactionType) {
+        const { renderingEngineId, viewportId, element, currentPoints } = evt.detail;
+        const toolGroup = ToolGroupManager.getToolGroupForViewport(viewportId, renderingEngineId);
+        if (!toolGroup) {
+            return false;
+        }
+        const tools = toolGroup._toolInstances;
+        const annotationsToRemove = [];
+        for (const toolName in tools) {
+            const toolInstance = tools[toolName];
+            if (typeof toolInstance.isPointNearTool !== 'function' ||
+                typeof toolInstance.filterInteractableAnnotationsForElement !==
+                    'function') {
+                continue;
+            }
+            const annotations = getAnnotations(toolName, element);
+            if (!annotations.length) {
+                continue;
+            }
+            const interactableAnnotations = toolInstance.filterInteractableAnnotationsForElement(element, annotations) || [];
+            for (const annotation of interactableAnnotations) {
+                if (toolInstance.isPointNearTool(element, annotation, currentPoints.canvas, 10, interactionType)) {
+                    annotationsToRemove.push(annotation.annotationUID);
+                }
+            }
+        }
+        for (const annotationUID of annotationsToRemove) {
+            setAnnotationSelected(annotationUID);
+            removeAnnotation(annotationUID);
+        }
+        evt.preventDefault();
+        return true;
+    }
+}
+AnnotationEraserTool.toolName = 'Eraser';
+export default AnnotationEraserTool;

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

@@ -28,11 +28,12 @@ declare class CrosshairsTool extends AnnotationTool {
         normal: Types.Point3;
         point: Types.Point3;
     };
-    _getViewportsInfo: () => Types.IViewportId[];
+    _getViewportsInfo: () => any[];
     onSetToolActive(): void;
     onSetToolPassive(): void;
     onSetToolEnabled(): void;
     onSetToolDisabled(): void;
+    resetCrosshairs: () => void;
     computeToolCenter: (viewportsInfo: any) => void;
     addNewAnnotation: (evt: EventTypes.InteractionEventType) => CrosshairsAnnotation;
     cancel: () => void;
@@ -41,10 +42,11 @@ declare class CrosshairsTool extends AnnotationTool {
     isPointNearTool: (element: HTMLDivElement, annotation: CrosshairsAnnotation, canvasCoords: Types.Point2, proximity: number) => boolean;
     toolSelectedCallback: (evt: EventTypes.InteractionEventType, annotation: Annotation, interactionType: InteractionTypes) => void;
     onCameraModified: (evt: any) => void;
+    onResetCamera: (evt: any) => void;
     mouseMoveCallback: (evt: EventTypes.MouseMoveEventType, filteredToolAnnotations: Annotations) => boolean;
     filterInteractableAnnotationsForElement: (element: any, annotations: any) => any;
     renderAnnotation: (enabledElement: Types.IEnabledElement, svgDrawingHelper: SVGDrawingHelper) => boolean;
-    _getAnnotations: (enabledElement: Types.IEnabledElement) => Annotations;
+    _getAnnotations: (enabledElement: Types.IEnabledElement) => Annotation[];
     _onNewVolume: (e: any) => void;
     _unsubscribeToViewportNewVolumeSet(viewportsInfo: any): void;
     _subscribeToViewportNewVolumeSet(viewports: any): void;

package/dist/esm/tools/CrosshairsTool.js

@@ -39,7 +39,12 @@ class CrosshairsTool extends AnnotationTool {
         supportedInteractionTypes: ['Mouse'],
         configuration: {
             shadow: true,
-            viewportIndicators: true,
+            viewportIndicators: false,
+            viewportIndicatorsConfig: {
+                radius: 5,
+                x: null,
+                y: null,
+            },
             autoPan: {
                 enabled: false,
                 panSize: 10,
@@ -98,9 +103,38 @@ class CrosshairsTool extends AnnotationTool {
             const viewports = getToolGroup(this.toolGroupId).viewportsInfo;
             return viewports;
         };
+        this.resetCrosshairs = () => {
+            const viewportsInfo = this._getViewportsInfo();
+            viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+                const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
+                const viewport = enabledElement.viewport;
+                const resetPan = true;
+                const resetZoom = true;
+                const resetToCenter = true;
+                const resetRotation = true;
+                const suppressEvents = true;
+                viewport.resetCamera({
+                    resetPan,
+                    resetZoom,
+                    resetToCenter,
+                    resetRotation,
+                    suppressEvents,
+                });
+                viewport.resetSlabThickness();
+                const { element } = viewport;
+                let annotations = this._getAnnotations(enabledElement);
+                annotations = this.filterInteractableAnnotationsForElement(element, annotations);
+                if (annotations.length) {
+                    removeAnnotation(annotations[0].annotationUID);
+                }
+                viewport.render();
+            });
+            this.computeToolCenter(viewportsInfo);
+        };
         this.computeToolCenter = (viewportsInfo) => {
             if (!viewportsInfo.length || viewportsInfo.length === 1) {
-                throw new Error('For crosshairs to operate, at least two viewports must be given.');
+                console.warn('For crosshairs to operate, at least two viewports must be given.');
+                return;
             }
             const [firstViewport, secondViewport, thirdViewport] = viewportsInfo;
             const { normal: normal1, point: point1 } = this.initializeViewport(firstViewport);
@@ -120,8 +154,7 @@ class CrosshairsTool extends AnnotationTool {
             const secondPlane = csUtils.planar.planeEquation(normal2, point2);
             const thirdPlane = csUtils.planar.planeEquation(normal3, point3);
             this.toolCenter = csUtils.planar.threePlaneIntersection(firstPlane, secondPlane, thirdPlane);
-            const { renderingEngine } = getEnabledElementByIds(viewportsInfo[0].viewportId, viewportsInfo[0].renderingEngineId);
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportsInfo.map(({ viewportId }) => viewportId));
+            triggerAnnotationRenderForViewportIds(viewportsInfo.map(({ viewportId }) => viewportId));
         };
         this.addNewAnnotation = (evt) => {
             const eventDetail = evt.detail;
@@ -229,7 +262,10 @@ class CrosshairsTool extends AnnotationTool {
             }
             const requireSameOrientation = false;
             const viewportIdsToRender = getViewportIdsWithToolToRender(element, this.getToolName(), requireSameOrientation);
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
+        };
+        this.onResetCamera = (evt) => {
+            this.resetCrosshairs();
         };
         this.mouseMoveCallback = (evt, filteredToolAnnotations) => {
             const { element, currentPoints } = evt.detail;
@@ -613,11 +649,14 @@ class CrosshairsTool extends AnnotationTool {
             data.handles.rotationPoints = newRtpoints;
             data.handles.slabThicknessPoints = newStpoints;
             if (this.configuration.viewportIndicators) {
+                const { viewportIndicatorsConfig } = this.configuration;
+                const xOffset = viewportIndicatorsConfig?.xOffset || 0.95;
+                const yOffset = viewportIndicatorsConfig?.yOffset || 0.05;
                 const referenceColorCoordinates = [
-                    clientWidth * 0.95,
-                    clientHeight * 0.05,
+                    clientWidth * xOffset,
+                    clientHeight * yOffset,
                 ];
-                const circleRadius = canvasDiagonalLength * 0.01;
+                const circleRadius = viewportIndicatorsConfig?.circleRadius || canvasDiagonalLength * 0.01;
                 const circleUID = '0';
                 drawCircleSvg(svgDrawingHelper, annotationUID, circleUID, referenceColorCoordinates, circleRadius, { color, fill: color });
             }
@@ -625,7 +664,13 @@ class CrosshairsTool extends AnnotationTool {
         };
         this._getAnnotations = (enabledElement) => {
             const { viewport } = enabledElement;
-            return getAnnotations(this.getToolName(), viewport.element);
+            const annotations = getAnnotations(this.getToolName(), viewport.element) || [];
+            const viewportIds = this._getViewportsInfo().map(({ viewportId }) => viewportId);
+            const toolGroupAnnotations = annotations.filter((annotation) => {
+                const { data } = annotation;
+                return viewportIds.includes(data.viewportId);
+            });
+            return toolGroupAnnotations;
         };
         this._onNewVolume = (e) => {
             const viewportsInfo = this._getViewportsInfo();
@@ -857,11 +902,9 @@ class CrosshairsTool extends AnnotationTool {
             this._deactivateModify(element);
             resetElementCursor(element);
             this.editData = null;
-            const enabledElement = getEnabledElement(element);
-            const { renderingEngine } = enabledElement;
             const requireSameOrientation = false;
             const viewportIdsToRender = getViewportIdsWithToolToRender(element, this.getToolName(), requireSameOrientation);
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
         };
         this._dragCallback = (evt) => {
             const eventDetail = evt.detail;
@@ -1402,4 +1445,3 @@ class CrosshairsTool extends AnnotationTool {
 }
 CrosshairsTool.toolName = 'Crosshairs';
 export default CrosshairsTool;
-//# sourceMappingURL=CrosshairsTool.js.map

package/dist/esm/tools/MIPJumpToClickTool.js

@@ -1,5 +1,6 @@
 import { BaseTool } from './base';
 import { getEnabledElement, VolumeViewport } from '@cornerstonejs/core';
+import { utilities } from '@cornerstonejs/core';
 import { getPointInLineOfSightWithCriteria } from '../utilities/planar';
 import jumpToWorld from '../utilities/viewport/jumpToWorld';
 import { getToolGroupForViewport } from '../store/ToolGroupManager';
@@ -20,7 +21,7 @@ class MIPJumpToClickTool extends BaseTool {
         if (!targetId.startsWith('volumeId')) {
             throw new Error(`MIPJumpToClickTool: targetId is not a volumeId, you should only use MIPJumpToClickTool with a volumeId as the targetId`);
         }
-        const volumeId = targetId.split('volumeId:')[1];
+        const volumeId = utilities.getVolumeId(targetId);
         let maxIntensity = -Infinity;
         const maxFn = (intensity, point) => {
             if (intensity > maxIntensity) {
@@ -55,4 +56,3 @@ class MIPJumpToClickTool extends BaseTool {
 }
 MIPJumpToClickTool.toolName = 'MIPJumpToClickTool';
 export default MIPJumpToClickTool;
-//# sourceMappingURL=MIPJumpToClickTool.js.map

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

@@ -13,6 +13,7 @@ declare class MagnifyTool extends BaseTool {
         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;

package/dist/esm/tools/MagnifyTool.js

@@ -17,6 +17,7 @@ class MagnifyTool extends BaseTool {
         },
     }) {
         super(toolProps, defaultToolProps);
+        this._hasBeenRemoved = false;
         this.preMouseDownCallback = (evt) => {
             const eventDetail = evt.detail;
             const { element, currentPoints } = eventDetail;
@@ -41,7 +42,7 @@ class MagnifyTool extends BaseTool {
             this._activateDraw(element);
             hideElementCursor(element);
             evt.preventDefault();
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
             return true;
         };
         this.preTouchStartCallback = (evt) => {
@@ -51,7 +52,7 @@ class MagnifyTool extends BaseTool {
             const { enabledElement, referencedImageId, viewportIdsToRender, renderingEngine, currentPoints, } = this.editData;
             const { viewport } = enabledElement;
             const { element } = viewport;
-            const { voiRange } = viewport.getProperties();
+            const viewportProperties = viewport.getProperties();
             const { canvas: canvasPos, world: worldPos } = currentPoints;
             let magnifyToolElement;
             magnifyToolElement = element.querySelector('.magnifyTool');
@@ -76,7 +77,10 @@ class MagnifyTool extends BaseTool {
             magnifyToolElement.style.left = `${canvasPos[0] - this.configuration.magnifyWidth / 2}px`;
             const magnifyViewport = renderingEngine.getViewport(MAGNIFY_VIEWPORT_ID);
             magnifyViewport.setStack([referencedImageId]).then(() => {
-                magnifyViewport.setProperties({ voiRange });
+                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) +
@@ -100,7 +104,7 @@ class MagnifyTool extends BaseTool {
                 magnifyViewport.render();
             });
             magnifyToolElement.style.display = 'block';
-            triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
         };
         this._dragCallback = (evt) => {
             const eventDetail = evt.detail;
@@ -143,9 +147,11 @@ class MagnifyTool extends BaseTool {
             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);
@@ -172,4 +178,3 @@ class MagnifyTool extends BaseTool {
 }
 MagnifyTool.toolName = 'Magnify';
 export default MagnifyTool;
-//# sourceMappingURL=MagnifyTool.js.map

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

@@ -0,0 +1,94 @@
+import vtkAnnotatedCubeActor from '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor';
+import { BaseTool } from './base';
+declare class OrientationMarkerTool extends BaseTool {
+    static toolName: any;
+    static CUBE: number;
+    static AXIS: number;
+    static VTPFILE: number;
+    orientationMarkers: any;
+    polyDataURL: any;
+    _resizeObservers: Map<any, any>;
+    static OVERLAY_MARKER_TYPES: {
+        ANNOTATED_CUBE: number;
+        AXES: number;
+        CUSTOM: number;
+    };
+    constructor(toolProps?: {}, defaultToolProps?: {
+        configuration: {
+            orientationWidget: {
+                enabled: boolean;
+                viewportCorner: import("@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget/Constants").Corners;
+                viewportSize: number;
+                minPixelSize: number;
+                maxPixelSize: number;
+            };
+            overlayMarkerType: number;
+            overlayConfiguration: {
+                [x: number]: {
+                    faceProperties: {
+                        xPlus: {
+                            text: string;
+                            faceColor: string;
+                            faceRotation: number;
+                        };
+                        xMinus: {
+                            text: string;
+                            faceColor: string;
+                            faceRotation: number;
+                        };
+                        yPlus: {
+                            text: string;
+                            faceColor: string;
+                            fontColor: string;
+                            faceRotation: number;
+                        };
+                        yMinus: {
+                            text: string;
+                            faceColor: string;
+                            fontColor: string;
+                        };
+                        zPlus: {
+                            text: string;
+                        };
+                        zMinus: {
+                            text: string;
+                        };
+                    };
+                    defaultStyle: {
+                        fontStyle: string;
+                        fontFamily: string;
+                        fontColor: string;
+                        fontSizeScale: (res: any) => number;
+                        faceColor: string;
+                        edgeThickness: number;
+                        edgeColor: string;
+                        resolution: number;
+                    };
+                    polyDataURL?: undefined;
+                } | {
+                    faceProperties?: undefined;
+                    defaultStyle?: undefined;
+                    polyDataURL?: undefined;
+                } | {
+                    polyDataURL: string;
+                    faceProperties?: undefined;
+                    defaultStyle?: undefined;
+                };
+            };
+        };
+    });
+    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,277 @@
+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';
+const OverlayMarkerType = {
+    ANNOTATED_CUBE: 1,
+    AXES: 2,
+    CUSTOM: 3,
+};
+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: 'R', faceColor: '#ffff00', faceRotation: 90 },
+                        xMinus: { text: 'L', 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 = {};
+    }
+    _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) => {
+            if (!viewport.getWidget(this.getToolName())) {
+                this.addAxisActorInViewport(viewport);
+            }
+        });
+    }
+    async addAxisActorInViewport(viewport) {
+        const viewportId = viewport.id;
+        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();
+    }
+    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;