@cornerstonejs/tools 3.0.0-beta.5 → 3.0.0-beta.6

package/dist/esm/stateManagement/annotation/helpers/state.d.ts

@@ -4,7 +4,7 @@ import type { AnnotationRemovedEventDetail } from '../../../types/EventTypes';
 declare function triggerAnnotationAddedForElement(annotation: Annotation, element: HTMLDivElement): void;
 declare function triggerAnnotationAddedForFOR(annotation: Annotation): void;
 declare function triggerAnnotationRemoved(eventDetail: AnnotationRemovedEventDetail): void;
-declare function triggerAnnotationModified(annotation: Annotation, element: HTMLDivElement, changeType?: ChangeTypes): void;
+declare function triggerAnnotationModified(annotation: Annotation, element?: HTMLDivElement, changeType?: ChangeTypes): void;
 declare function triggerAnnotationCompleted(annotation: Annotation): void;
 declare function triggerContourAnnotationCompleted(annotation: Annotation, contourHoleProcessingEnabled?: boolean): void;
 export { triggerAnnotationAddedForElement, triggerAnnotationAddedForFOR, triggerAnnotationRemoved, triggerAnnotationModified, triggerAnnotationCompleted, triggerContourAnnotationCompleted, };

package/dist/esm/stateManagement/annotation/helpers/state.js

@@ -45,8 +45,8 @@ function triggerAnnotationRemoved(eventDetail) {
     triggerEvent(eventTarget, eventType, eventDetail);
 }
 function triggerAnnotationModified(annotation, element, changeType = ChangeTypes.HandlesUpdated) {
-    const enabledElement = getEnabledElement(element);
-    const { viewportId, renderingEngineId } = enabledElement;
+    const enabledElement = element && getEnabledElement(element);
+    const { viewportId, renderingEngineId } = enabledElement || {};
     const eventType = Events.ANNOTATION_MODIFIED;
     const eventDetail = {
         annotation,

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

@@ -20,9 +20,6 @@ declare class CrosshairsTool extends AnnotationTool {
     _getReferenceLineControllable?: (viewportId: string) => boolean;
     _getReferenceLineDraggableRotatable?: (viewportId: string) => boolean;
     _getReferenceLineSlabThicknessControlsOn?: (viewportId: string) => boolean;
-    editData: {
-        annotation: Annotation;
-    } | null;
     constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
     initializeViewport: ({ renderingEngineId, viewportId, }: Types.IViewportId) => {
         normal: Types.Point3;

package/dist/esm/tools/annotation/KeyImageTool.d.ts

@@ -1,30 +1,33 @@
 import type { Types } from '@cornerstonejs/core';
 import { AnnotationTool } from '../base';
-import type { EventTypes, ToolHandle, PublicToolProps, ToolProps, SVGDrawingHelper, Annotation } from '../../types';
+import type { EventTypes, PublicToolProps, ToolProps, SVGDrawingHelper, Annotation } from '../../types';
+import type { KeyImageAnnotation } from '../../types/ToolSpecificAnnotationTypes';
 declare class KeyImageTool extends AnnotationTool {
     static toolName: string;
+    static dataSeries: {
+        data: {
+            seriesLevel: boolean;
+        };
+    };
+    static dataPoint: {
+        data: {
+            isPoint: boolean;
+        };
+    };
     _throttledCalculateCachedStats: Function;
-    editData: {
-        annotation: Annotation;
-        viewportIdsToRender: string[];
-        handleIndex?: number;
-        movingTextBox?: boolean;
-        newAnnotation?: boolean;
-        hasMoved?: boolean;
-    } | null;
-    isDrawing: boolean;
-    isHandleOutsideImage: boolean;
     constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
     addNewAnnotation: (evt: EventTypes.InteractionEventType) => Annotation;
-    cancel(): void;
     isPointNearTool: (element: HTMLDivElement, annotation: Annotation, canvasCoords: Types.Point2, proximity: number) => boolean;
     toolSelectedCallback: (evt: EventTypes.InteractionEventType, annotation: Annotation) => void;
-    handleSelectedCallback(evt: EventTypes.InteractionEventType, annotation: Annotation, handle: ToolHandle): void;
+    handleSelectedCallback(evt: EventTypes.InteractionEventType, annotation: KeyImageAnnotation): void;
+    static setPoint(annotation: any, isPoint?: boolean, element?: any): void;
     _endCallback: (evt: EventTypes.InteractionEventType) => void;
     doubleClickCallback: (evt: EventTypes.TouchTapEventType) => void;
     _doneChangingTextCallback(element: any, annotation: any, updatedText: any): void;
-    _activateModify: (element: HTMLDivElement) => void;
-    _deactivateModify: (element: HTMLDivElement) => void;
+    _dragCallback: (evt: any) => void;
+    cancel(element: HTMLDivElement): string;
+    _activateModify: (element: any) => void;
+    _deactivateModify: (element: any) => void;
     renderAnnotation: (enabledElement: Types.IEnabledElement, svgDrawingHelper: SVGDrawingHelper) => boolean;
     _isInsideVolume(index1: any, index2: any, dimensions: any): boolean;
 }

package/dist/esm/tools/annotation/KeyImageTool.js

@@ -3,13 +3,23 @@ import { getEnabledElement, utilities as csUtils } from '@cornerstonejs/core';
 import { AnnotationTool } from '../base';
 import { addAnnotation, getAnnotations, removeAnnotation, } from '../../stateManagement/annotation/annotationState';
 import { triggerAnnotationCompleted, triggerAnnotationModified, } from '../../stateManagement/annotation/helpers/state';
-import { drawArrow as drawArrowSvg } from '../../drawingSvg';
+import { drawArrow as drawArrowSvg, drawHandles as drawHandlesSvg, } from '../../drawingSvg';
 import { state } from '../../store/state';
 import { getViewportIdsWithToolToRender } from '../../utilities/viewportFilters';
 import triggerAnnotationRenderForViewportIds from '../../utilities/triggerAnnotationRenderForViewportIds';
-import { resetElementCursor } from '../../cursors/elementCursor';
+import { resetElementCursor, hideElementCursor, } from '../../cursors/elementCursor';
 class KeyImageTool extends AnnotationTool {
     static { this.toolName = 'KeyImage'; }
+    static { this.dataSeries = {
+        data: {
+            seriesLevel: true,
+        },
+    }; }
+    static { this.dataPoint = {
+        data: {
+            isPoint: true,
+        },
+    }; }
     constructor(toolProps = {}, defaultToolProps = {
         supportedInteractionTypes: ['Mouse', 'Touch'],
         configuration: {
@@ -17,15 +27,25 @@ class KeyImageTool extends AnnotationTool {
             changeTextCallback,
             canvasPosition: [10, 10],
             canvasSize: 10,
+            handleRadius: '6',
+            seriesLevel: false,
+            isPoint: false,
         },
     }) {
         super(toolProps, defaultToolProps);
         this.addNewAnnotation = (evt) => {
             const eventDetail = evt.detail;
-            const { element } = eventDetail;
+            const { element, currentPoints } = eventDetail;
             const enabledElement = getEnabledElement(element);
             const { viewport } = enabledElement;
-            const annotation = (this.constructor).createAnnotationForViewport(viewport);
+            const worldPos = currentPoints.world;
+            const annotation = (this.constructor).createAnnotationForViewport(viewport, {
+                data: {
+                    handles: { points: [[...worldPos]] },
+                    seriesLevel: this.configuration.seriesLevel,
+                    isPoint: this.configuration.isPoint,
+                },
+            });
             addAnnotation(annotation, element);
             const viewportIdsToRender = getViewportIdsWithToolToRender(element, this.getToolName());
             evt.preventDefault();
@@ -48,6 +68,9 @@ class KeyImageTool extends AnnotationTool {
             const enabledElement = getEnabledElement(element);
             const { viewport } = enabledElement;
             const { data } = annotation;
+            if (!data?.isPoint) {
+                return false;
+            }
             const { canvasPosition, canvasSize } = this.configuration;
             if (!canvasPosition?.length) {
                 return false;
@@ -67,9 +90,28 @@ class KeyImageTool extends AnnotationTool {
         this._endCallback = (evt) => {
             const eventDetail = evt.detail;
             const { element } = eventDetail;
-            this.doneEditMemo();
+            const { annotation, viewportIdsToRender, newAnnotation } = this.editData;
+            const { viewportId, renderingEngine } = getEnabledElement(element);
+            this.eventDispatchDetail = {
+                viewportId,
+                renderingEngineId: renderingEngine.id,
+            };
             this._deactivateModify(element);
             resetElementCursor(element);
+            if (newAnnotation) {
+                this.createMemo(element, annotation, { newAnnotation });
+            }
+            this.editData = null;
+            this.isDrawing = false;
+            this.doneEditMemo();
+            if (this.isHandleOutsideImage &&
+                this.configuration.preventHandleOutsideImage) {
+                removeAnnotation(annotation.annotationUID);
+            }
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
+            if (newAnnotation) {
+                triggerAnnotationCompleted(annotation);
+            }
         };
         this.doubleClickCallback = (evt) => {
             const eventDetail = evt.detail;
@@ -91,19 +133,35 @@ class KeyImageTool extends AnnotationTool {
             evt.stopImmediatePropagation();
             evt.preventDefault();
         };
+        this._dragCallback = (evt) => {
+            this.isDrawing = true;
+            const eventDetail = evt.detail;
+            const { currentPoints, element } = eventDetail;
+            const worldPos = currentPoints.world;
+            const { annotation, viewportIdsToRender, newAnnotation } = this.editData;
+            const { data } = annotation;
+            this.createMemo(element, annotation, { newAnnotation });
+            data.handles.points[0] = [...worldPos];
+            annotation.invalidated = true;
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
+        };
         this._activateModify = (element) => {
             state.isInteractingWithTool = true;
             element.addEventListener(Events.MOUSE_UP, this._endCallback);
+            element.addEventListener(Events.MOUSE_DRAG, this._dragCallback);
             element.addEventListener(Events.MOUSE_CLICK, this._endCallback);
-            element.addEventListener(Events.TOUCH_TAP, this._endCallback);
             element.addEventListener(Events.TOUCH_END, this._endCallback);
+            element.addEventListener(Events.TOUCH_DRAG, this._dragCallback);
+            element.addEventListener(Events.TOUCH_TAP, this._endCallback);
         };
         this._deactivateModify = (element) => {
             state.isInteractingWithTool = false;
             element.removeEventListener(Events.MOUSE_UP, this._endCallback);
+            element.removeEventListener(Events.MOUSE_DRAG, this._dragCallback);
             element.removeEventListener(Events.MOUSE_CLICK, this._endCallback);
-            element.removeEventListener(Events.TOUCH_TAP, this._endCallback);
             element.removeEventListener(Events.TOUCH_END, this._endCallback);
+            element.removeEventListener(Events.TOUCH_DRAG, this._dragCallback);
+            element.removeEventListener(Events.TOUCH_TAP, this._endCallback);
         };
         this.renderAnnotation = (enabledElement, svgDrawingHelper) => {
             let renderStatus = false;
@@ -124,15 +182,24 @@ class KeyImageTool extends AnnotationTool {
             };
             for (let i = 0; i < annotations.length; i++) {
                 const annotation = annotations[i];
-                const { annotationUID } = annotation;
+                const { annotationUID, data } = annotation;
                 styleSpecifier.annotationUID = annotationUID;
-                const { color } = this.getAnnotationStyle({
+                const { color, lineWidth } = this.getAnnotationStyle({
                     annotation,
                     styleSpecifier,
                 });
                 const { canvasPosition, canvasSize } = this.configuration;
-                if (canvasPosition?.length) {
-                    const arrowUID = '1';
+                const arrowUID = '1';
+                if (data?.isPoint) {
+                    const point = data.handles.points[0];
+                    const canvasCoordinates = viewport.worldToCanvas(point);
+                    drawHandlesSvg(svgDrawingHelper, annotationUID, arrowUID, [canvasCoordinates], {
+                        color,
+                        lineWidth,
+                        handleRadius: this.configuration.handleRadius,
+                    });
+                }
+                else if (canvasPosition?.length) {
                     drawArrowSvg(svgDrawingHelper, annotationUID, arrowUID, canvasPosition.map((it) => it + canvasSize), canvasPosition, {
                         color,
                         width: 1,
@@ -147,18 +214,47 @@ class KeyImageTool extends AnnotationTool {
             return renderStatus;
         };
     }
-    cancel() {
+    handleSelectedCallback(evt, annotation) {
+        const eventDetail = evt.detail;
+        const { element } = eventDetail;
+        annotation.highlighted = true;
+        const viewportIdsToRender = getViewportIdsWithToolToRender(element, this.getToolName());
+        this.editData = {
+            annotation,
+            viewportIdsToRender,
+        };
+        this._activateModify(element);
+        hideElementCursor(element);
+        triggerAnnotationRenderForViewportIds(viewportIdsToRender);
+        evt.preventDefault();
     }
-    handleSelectedCallback(evt, annotation, handle) {
+    static setPoint(annotation, isPoint = !annotation.data.isPoint, element) {
+        annotation.data.isPoint = isPoint;
+        triggerAnnotationModified(annotation, element);
     }
     _doneChangingTextCallback(element, annotation, updatedText) {
         annotation.data.text = updatedText;
-        const enabledElement = getEnabledElement(element);
-        const { renderingEngine } = enabledElement;
         const viewportIdsToRender = getViewportIdsWithToolToRender(element, this.getToolName());
         triggerAnnotationRenderForViewportIds(viewportIdsToRender);
         triggerAnnotationModified(annotation, element);
     }
+    cancel(element) {
+        if (this.isDrawing) {
+            this.isDrawing = false;
+            this._deactivateModify(element);
+            resetElementCursor(element);
+            const { annotation, viewportIdsToRender, newAnnotation } = this.editData;
+            const { data } = annotation;
+            annotation.highlighted = false;
+            data.handles.activeHandleIndex = null;
+            triggerAnnotationRenderForViewportIds(viewportIdsToRender);
+            if (newAnnotation) {
+                triggerAnnotationCompleted(annotation);
+            }
+            this.editData = null;
+            return annotation.annotationUID;
+        }
+    }
     _isInsideVolume(index1, index2, dimensions) {
         return (csUtils.indexWithinDimensions(index1, dimensions) &&
             csUtils.indexWithinDimensions(index2, dimensions));

package/dist/esm/tools/annotation/ProbeTool.d.ts

@@ -1,21 +1,10 @@
 import type { Types } from '@cornerstonejs/core';
 import { AnnotationTool } from '../base';
 import { ChangeTypes } from '../../enums';
-import type { EventTypes, ToolHandle, PublicToolProps, SVGDrawingHelper, Annotation } from '../../types';
+import type { EventTypes, ToolHandle, PublicToolProps, SVGDrawingHelper } from '../../types';
 import type { ProbeAnnotation } from '../../types/ToolSpecificAnnotationTypes';
 declare class ProbeTool extends AnnotationTool {
     static toolName: string;
-    editData: {
-        annotation: Annotation;
-        viewportIdsToRender: string[];
-        newAnnotation?: boolean;
-    } | null;
-    eventDispatchDetail: {
-        viewportId: string;
-        renderingEngineId: string;
-    };
-    isDrawing: boolean;
-    isHandleOutsideImage: boolean;
     static probeDefaults: {
         supportedInteractionTypes: string[];
         configuration: {

package/dist/esm/tools/base/AnnotationTool.d.ts

@@ -3,6 +3,20 @@ import AnnotationDisplayTool from './AnnotationDisplayTool';
 import type { Annotation, Annotations, EventTypes, ToolHandle, InteractionTypes, ToolProps, PublicToolProps } from '../../types';
 import type { AnnotationStyle, StyleSpecifier } from '../../types/AnnotationStyle';
 declare abstract class AnnotationTool extends AnnotationDisplayTool {
+    protected eventDispatchDetail: {
+        viewportId: string;
+        renderingEngineId: string;
+    };
+    isDrawing: boolean;
+    isHandleOutsideImage: boolean;
+    editData: {
+        annotation: Annotation;
+        viewportIdsToRender?: string[];
+        newAnnotation?: boolean;
+        handleIndex?: number;
+        movingTextBox?: boolean;
+        hasMoved?: boolean;
+    } | null;
     static createAnnotation(...annotationBaseData: any[]): Annotation;
     static createAnnotationForViewport<T extends Annotation>(viewport: any, ...annotationBaseData: any[]): T;
     static createAndAddAnnotation(viewport: any, ...annotationBaseData: any[]): void;

package/dist/esm/types/EventTypes.d.ts

@@ -61,10 +61,10 @@ type AnnotationCompletedEventDetail = {
     changeType?: ChangeTypes.Completed;
 };
 type AnnotationModifiedEventDetail = {
-    viewportId: string;
-    renderingEngineId: string;
     annotation: Annotation;
     changeType?: ChangeTypes;
+    viewportId?: string;
+    renderingEngineId?: string;
 };
 type AnnotationRemovedEventDetail = {
     annotation: Annotation;

package/dist/esm/types/ToolSpecificAnnotationTypes.d.ts

@@ -52,6 +52,12 @@ export interface ProbeAnnotation extends Annotation {
         label: string;
     };
 }
+export type KeyImageAnnotation = ProbeAnnotation & {
+    data: {
+        isPoint: boolean;
+        seriesLevel: boolean;
+    };
+};
 export interface LengthAnnotation extends Annotation {
     data: {
         handles: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.6",
   "description": "Cornerstone3D Tools",
   "types": "./dist/esm/index.d.ts",
   "module": "./dist/esm/index.js",
@@ -104,7 +104,7 @@
     "canvas": "^2.11.2"
   },
   "peerDependencies": {
-    "@cornerstonejs/core": "^3.0.0-beta.5",
+    "@cornerstonejs/core": "^3.0.0-beta.6",
     "@kitware/vtk.js": "32.9.0",
     "@types/d3-array": "^3.0.4",
     "@types/d3-interpolate": "^3.0.1",
@@ -123,5 +123,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "6edb49c79f664736747d8698c5bea8b30f78831d"
+  "gitHead": "c29fc0d8731f785f43184ab9fe43e59140e98386"
 }