@cornerstonejs/tools 1.31.0 → 1.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.31.0",
+  "version": "1.32.1",
   "description": "Cornerstone3D Tools",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.31.0",
+    "@cornerstonejs/core": "^1.32.1",
     "comlink": "^4.4.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
@@ -53,5 +53,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "280c27226cb94a0b422f28656e69dbc059f95323"
+  "gitHead": "bb586320e1b8c8d07ae7f695cc838ed529631050"
 }

package/src/index.ts

@@ -42,6 +42,7 @@ import {
   BidirectionalTool,
   PlanarFreehandROITool,
   ArrowAnnotateTool,
+  KeyImageTool,
   CrosshairsTool,
   ReferenceLinesTool,
   RectangleScissorsTool,
@@ -106,6 +107,7 @@ export {
   ArrowAnnotateTool,
   AngleTool,
   CobbAngleTool,
+  KeyImageTool,
   MagnifyTool,
   AdvancedMagnifyTool,
   ReferenceCursors,

package/src/stateManagement/annotation/AnnotationGroup.ts

@@ -0,0 +1,120 @@
+import { eventTarget, triggerEvent } from '@cornerstonejs/core';
+import Events from '../../enums/Events';
+import { getAnnotation } from './annotationState';
+
+export type BaseEventDetail = {
+  viewportId: string;
+  renderingEngineId: string;
+};
+
+/**
+ * An annotation group
+ */
+
+export default class AnnotationGroup {
+  private annotationUIDs = new Set<string>();
+  private _isVisible = true;
+
+  public visibleFilter: (uid: string) => boolean;
+
+  constructor() {
+    this.visibleFilter = this.unboundVisibleFilter.bind(this);
+  }
+
+  /**
+   * Returns true if other groups are free to hide this annotation.
+   * That is, if the annotation is not a member or is hidden.
+   */
+  protected unboundVisibleFilter(uid: string): boolean {
+    return !this._isVisible || !this.annotationUIDs.has(uid);
+  }
+
+  public has(uid: string): boolean {
+    return this.annotationUIDs.has(uid);
+  }
+  /**
+   * Sets whether annotations belonging to this group are visible or not.
+   * If there are multiple groups, then the set visible false should be called
+   * before before re-enabling the other groups with setVisible true.
+   */
+  public setVisible(
+    isVisible = true,
+    baseEvent: BaseEventDetail,
+    filter?: (annotationUID: string) => boolean
+  ) {
+    if (this._isVisible === isVisible) {
+      return;
+    }
+    this._isVisible = isVisible;
+    this.annotationUIDs.forEach((uid) => {
+      const annotation = getAnnotation(uid);
+      if (!annotation) {
+        this.annotationUIDs.delete(uid);
+        return;
+      }
+      if (annotation.isVisible === isVisible) {
+        return;
+      }
+      if (!isVisible && filter?.(uid) === false) {
+        return;
+      }
+      annotation.isVisible = isVisible;
+      const eventDetail = {
+        ...baseEvent,
+        annotation,
+      };
+      triggerEvent(eventTarget, Events.ANNOTATION_MODIFIED, eventDetail);
+    });
+  }
+
+  public get isVisible() {
+    return this._isVisible;
+  }
+
+  /** Finds the nearby/next annotation in the given direction */
+  public findNearby(uid: string, direction: 1) {
+    const uids = [...this.annotationUIDs];
+    if (uids.length === 0) {
+      return null;
+    }
+    if (!uid) {
+      return uids[direction === 1 ? 0 : uids.length - 1];
+    }
+    const index = uids.indexOf(uid);
+    if (
+      index === -1 ||
+      index + direction < 0 ||
+      index + direction >= uids.length
+    ) {
+      return null;
+    }
+    return uids[index + direction];
+  }
+
+  /**
+   * Adds the annotation to the group
+   * Does NOT change the visibility status of the annotation.
+   */
+  public add(...annotationUIDs: string[]) {
+    annotationUIDs.forEach((annotationUID) =>
+      this.annotationUIDs.add(annotationUID)
+    );
+  }
+
+  /**
+   * Removes the annotation from the group.
+   * Does not affect the visibility status of the annotation.
+   */
+  public remove(...annotationUIDs: string[]) {
+    annotationUIDs.forEach((annotationUID) =>
+      this.annotationUIDs.delete(annotationUID)
+    );
+  }
+
+  /**
+   * Removes everything from the group.
+   */
+  public clear() {
+    this.annotationUIDs.clear();
+  }
+}

package/src/stateManagement/annotation/annotationState.ts

@@ -75,7 +75,7 @@ function addAnnotation(
   annotation: Annotation,
   annotationGroupSelector: AnnotationGroupSelector
 ): string {
-  if (annotation.annotationUID === undefined) {
+  if (!annotation.annotationUID) {
     annotation.annotationUID = csUtils.uuidv4() as string;
   }
 

package/src/stateManagement/annotation/index.ts

@@ -4,6 +4,7 @@ import * as selection from './annotationSelection';
 import * as state from './annotationState';
 import * as visibility from './annotationVisibility';
 import FrameOfReferenceSpecificAnnotationManager from './FrameOfReferenceSpecificAnnotationManager';
+import AnnotationGroup from './AnnotationGroup';
 
 export {
   config,
@@ -12,4 +13,5 @@ export {
   state,
   visibility,
   FrameOfReferenceSpecificAnnotationManager,
+  AnnotationGroup,
 };

package/src/store/ToolGroupManager/ToolGroup.ts

@@ -47,6 +47,10 @@ export default class ToolGroup implements IToolGroup {
   id: string;
   viewportsInfo = [];
   toolOptions = {};
+  /**
+   * Options used for restoring a tool
+   */
+  restoreToolOptions = {};
   _toolInstances = {};
 
   constructor(id: string) {
@@ -270,7 +274,10 @@ export default class ToolGroup implements IToolGroup {
     }
 
     if (mode === ToolModes.Active) {
-      this.setToolActive(toolName, options);
+      this.setToolActive(
+        toolName,
+        options || this.restoreToolOptions[toolName]
+      );
       return;
     }
 
@@ -510,6 +517,8 @@ export default class ToolGroup implements IToolGroup {
       mode: Disabled,
     };
 
+    this.restoreToolOptions[toolName] = this.toolOptions[toolName];
+
     this.toolOptions[toolName] = toolOptions;
     toolInstance.mode = Disabled;
 

package/src/synchronizers/callbacks/stackImageSyncCallback.ts

@@ -12,7 +12,8 @@ import areViewportsCoplanar from './areViewportsCoplanar ';
 const getSpatialRegistration = (targetId, sourceId) =>
   utilities.spatialRegistrationMetadataProvider.get(
     'spatialRegistrationModule',
-    [targetId, sourceId]
+    targetId,
+    sourceId
   );
 
 /**

package/src/tools/annotation/KeyImageTool.ts

@@ -0,0 +1,435 @@
+import { Events } from '../../enums';
+import {
+  getEnabledElement,
+  triggerEvent,
+  eventTarget,
+  utilities as csUtils,
+} from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+
+import { AnnotationTool } from '../base';
+import {
+  addAnnotation,
+  getAnnotations,
+  removeAnnotation,
+} from '../../stateManagement/annotation/annotationState';
+
+import { drawArrow as drawArrowSvg } from '../../drawingSvg';
+import { state } from '../../store';
+import { getViewportIdsWithToolToRender } from '../../utilities/viewportFilters';
+import triggerAnnotationRenderForViewportIds from '../../utilities/triggerAnnotationRenderForViewportIds';
+import { AnnotationCompletedEventDetail } from '../../types/EventTypes';
+
+import { resetElementCursor } from '../../cursors/elementCursor';
+
+import {
+  EventTypes,
+  ToolHandle,
+  PublicToolProps,
+  ToolProps,
+  SVGDrawingHelper,
+} from '../../types';
+import { StyleSpecifier } from '../../types/AnnotationStyle';
+import { Annotation } from '../../types';
+
+type Point2 = Types.Point2;
+
+class KeyImageTool extends AnnotationTool {
+  static toolName;
+
+  public touchDragCallback: any;
+  public mouseDragCallback: any;
+  _throttledCalculateCachedStats: any;
+  editData: {
+    annotation: any;
+    viewportIdsToRender: string[];
+    handleIndex?: number;
+    movingTextBox?: boolean;
+    newAnnotation?: boolean;
+    hasMoved?: boolean;
+  } | null;
+  isDrawing: boolean;
+  isHandleOutsideImage: boolean;
+
+  constructor(
+    toolProps: PublicToolProps = {},
+    defaultToolProps: ToolProps = {
+      supportedInteractionTypes: ['Mouse', 'Touch'],
+      configuration: {
+        getTextCallback,
+        changeTextCallback,
+        canvasPosition: [10, 10],
+        canvasSize: 10,
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  /**
+   * Based on the current position of the mouse and the current imageId to create
+   * a Length Annotation and stores it in the annotationManager
+   *
+   * @param evt -  EventTypes.NormalizedMouseEventType
+   * @returns The annotation object.
+   *
+   */
+  addNewAnnotation = (evt: EventTypes.InteractionEventType) => {
+    const eventDetail = evt.detail;
+    const { currentPoints, element } = eventDetail;
+    const worldPos = currentPoints.world;
+    const enabledElement = getEnabledElement(element);
+    const { viewport, renderingEngine } = enabledElement;
+
+    const camera = viewport.getCamera();
+    const { viewPlaneNormal, viewUp } = camera;
+
+    const referencedImageId = this.getReferencedImageId(
+      viewport,
+      worldPos,
+      viewPlaneNormal,
+      viewUp
+    );
+
+    const FrameOfReferenceUID = viewport.getFrameOfReferenceUID();
+
+    const annotation = {
+      annotationUID: null as string,
+      highlighted: true,
+      invalidated: true,
+      metadata: {
+        toolName: this.getToolName(),
+        viewPlaneNormal: <Types.Point3>[...viewPlaneNormal],
+        viewUp: <Types.Point3>[...viewUp],
+        FrameOfReferenceUID,
+        referencedImageId,
+      },
+      data: {
+        text: '',
+        handles: {
+          points: new Array<Types.Point3>(),
+          textBox: {
+            hasMoved: false,
+            worldPosition: <Types.Point3>[0, 0, 0],
+            worldBoundingBox: {
+              topLeft: <Types.Point3>[0, 0, 0],
+              topRight: <Types.Point3>[0, 0, 0],
+              bottomLeft: <Types.Point3>[0, 0, 0],
+              bottomRight: <Types.Point3>[0, 0, 0],
+            },
+          },
+        },
+        label: '',
+      },
+    };
+
+    addAnnotation(annotation, element);
+
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      this.getToolName()
+    );
+
+    evt.preventDefault();
+
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+
+    this.configuration.getTextCallback((text) => {
+      if (!text) {
+        removeAnnotation(annotation.annotationUID);
+        triggerAnnotationRenderForViewportIds(
+          renderingEngine,
+          viewportIdsToRender
+        );
+        this.isDrawing = false;
+        return;
+      }
+      annotation.data.text = text;
+
+      const eventType = Events.ANNOTATION_COMPLETED;
+
+      const eventDetail: AnnotationCompletedEventDetail = {
+        annotation,
+      };
+
+      triggerEvent(eventTarget, eventType, eventDetail);
+
+      triggerAnnotationRenderForViewportIds(
+        renderingEngine,
+        viewportIdsToRender
+      );
+    });
+
+    return annotation;
+  };
+
+  public cancel() {
+    // No op - the annotation can't be in a partial state
+  }
+
+  /**
+   * It returns if the canvas point is near the provided length annotation in the provided
+   * element or not. A proximity is passed to the function to determine the
+   * proximity of the point to the annotation in number of pixels.
+   *
+   * @param element - HTML Element
+   * @param annotation - Annotation
+   * @param canvasCoords - Canvas coordinates
+   * @param proximity - Proximity to tool to consider
+   * @returns Boolean, whether the canvas point is near tool
+   */
+  isPointNearTool = (
+    element: HTMLDivElement,
+    annotation: Annotation,
+    canvasCoords: Types.Point2,
+    proximity: number
+  ): boolean => {
+    const enabledElement = getEnabledElement(element);
+    const { viewport } = enabledElement;
+    const { data } = annotation;
+
+    const { canvasPosition, canvasSize } = this.configuration;
+    if (!canvasPosition?.length) {
+      return false;
+    }
+    if (
+      Math.abs(canvasCoords[0] - canvasPosition[0] + canvasSize / 2) <=
+        canvasSize / 2 &&
+      Math.abs(canvasCoords[1] - canvasPosition[1] + canvasSize / 2) <=
+        canvasSize / 2
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  toolSelectedCallback = (
+    evt: EventTypes.InteractionEventType,
+    annotation: Annotation
+  ): void => {
+    annotation.highlighted = true;
+
+    evt.preventDefault();
+  };
+
+  handleSelectedCallback(
+    evt: EventTypes.InteractionEventType,
+    annotation: Annotation,
+    handle: ToolHandle
+  ): void {
+    // Nothing special to do here.
+  }
+
+  _endCallback = (evt: EventTypes.InteractionEventType): void => {
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+
+    this._deactivateModify(element);
+    resetElementCursor(element);
+  };
+
+  doubleClickCallback = (evt: EventTypes.TouchTapEventType): void => {
+    const eventDetail = evt.detail;
+    const { element } = eventDetail;
+    let annotations = getAnnotations(this.getToolName(), element);
+
+    annotations = this.filterInteractableAnnotationsForElement(
+      element,
+      annotations
+    );
+
+    if (!annotations?.length) {
+      return;
+    }
+
+    const clickedAnnotation = annotations.find((annotation) =>
+      this.isPointNearTool(
+        element,
+        annotation as Annotation,
+        eventDetail.currentPoints.canvas,
+        6 // Todo: get from configuration
+      )
+    );
+
+    if (!clickedAnnotation) {
+      return;
+    }
+
+    const annotation = clickedAnnotation as Annotation;
+
+    this.configuration.changeTextCallback(
+      clickedAnnotation,
+      evt.detail,
+      this._doneChangingTextCallback.bind(this, element, annotation)
+    );
+
+    this.isDrawing = false;
+
+    // This double click was handled and the dialogue was displayed.
+    // No need for any other listener to handle it too - stopImmediatePropagation
+    // helps ensure this primarily so that no other listeners on the target element
+    // get called.
+    evt.stopImmediatePropagation();
+    evt.preventDefault();
+  };
+
+  _doneChangingTextCallback(element, annotation, updatedText): void {
+    annotation.data.text = updatedText;
+
+    const { renderingEngine, viewportId, renderingEngineId } =
+      getEnabledElement(element);
+
+    const viewportIdsToRender = getViewportIdsWithToolToRender(
+      element,
+      this.getToolName()
+    );
+    triggerAnnotationRenderForViewportIds(renderingEngine, viewportIdsToRender);
+
+    // Dispatching annotation modified
+    const eventType = Events.ANNOTATION_MODIFIED;
+
+    triggerEvent(eventTarget, eventType, {
+      annotation,
+      viewportId,
+      renderingEngineId,
+    });
+  }
+
+  _activateModify = (element: HTMLDivElement) => {
+    state.isInteractingWithTool = true;
+
+    element.addEventListener(
+      Events.MOUSE_UP,
+      this._endCallback as EventListener
+    );
+    element.addEventListener(
+      Events.MOUSE_CLICK,
+      this._endCallback as EventListener
+    );
+
+    element.addEventListener(
+      Events.TOUCH_TAP,
+      this._endCallback as EventListener
+    );
+    element.addEventListener(
+      Events.TOUCH_END,
+      this._endCallback as EventListener
+    );
+  };
+
+  _deactivateModify = (element: HTMLDivElement) => {
+    state.isInteractingWithTool = false;
+
+    element.removeEventListener(
+      Events.MOUSE_UP,
+      this._endCallback as EventListener
+    );
+    element.removeEventListener(
+      Events.MOUSE_CLICK,
+      this._endCallback as EventListener
+    );
+
+    element.removeEventListener(
+      Events.TOUCH_TAP,
+      this._endCallback as EventListener
+    );
+    element.removeEventListener(
+      Events.TOUCH_END,
+      this._endCallback as EventListener
+    );
+  };
+
+  /**
+   * it is used to draw the length annotation in each
+   * request animation frame. It calculates the updated cached statistics if
+   * data is invalidated and cache it.
+   *
+   * @param enabledElement - The Cornerstone's enabledElement.
+   * @param svgDrawingHelper - The svgDrawingHelper providing the context for drawing.
+   */
+  renderAnnotation = (
+    enabledElement: Types.IEnabledElement,
+    svgDrawingHelper: SVGDrawingHelper
+  ): boolean => {
+    let renderStatus = false;
+    const { viewport } = enabledElement;
+    const { element } = viewport;
+
+    let annotations = getAnnotations(this.getToolName(), element);
+
+    // Todo: We don't need this anymore, filtering happens in triggerAnnotationRender
+    if (!annotations?.length) {
+      return renderStatus;
+    }
+
+    annotations = this.filterInteractableAnnotationsForElement(
+      element,
+      annotations
+    );
+
+    if (!annotations?.length) {
+      return renderStatus;
+    }
+
+    const styleSpecifier: StyleSpecifier = {
+      toolGroupId: this.toolGroupId,
+      toolName: this.getToolName(),
+      viewportId: enabledElement.viewport.id,
+    };
+
+    // Draw SVG
+    for (let i = 0; i < annotations.length; i++) {
+      const annotation = annotations[i];
+      const { annotationUID } = annotation;
+
+      styleSpecifier.annotationUID = annotationUID;
+
+      const color = this.getStyle('color', styleSpecifier, annotation);
+
+      const { canvasPosition, canvasSize } = this.configuration;
+      if (canvasPosition?.length) {
+        const arrowUID = '1';
+        drawArrowSvg(
+          svgDrawingHelper,
+          annotationUID,
+          arrowUID,
+          canvasPosition.map((it) => it + canvasSize) as Point2,
+          canvasPosition as Point2,
+          {
+            color,
+            width: 1,
+          }
+        );
+      }
+
+      renderStatus = true;
+
+      // If rendering engine has been destroyed while rendering
+      if (!viewport.getRenderingEngine()) {
+        console.warn('Rendering Engine has been destroyed');
+        return renderStatus;
+      }
+    }
+
+    return renderStatus;
+  };
+
+  _isInsideVolume(index1, index2, dimensions) {
+    return (
+      csUtils.indexWithinDimensions(index1, dimensions) &&
+      csUtils.indexWithinDimensions(index2, dimensions)
+    );
+  }
+}
+
+function getTextCallback(doneChangingTextCallback) {
+  return doneChangingTextCallback(prompt('Enter your annotation:'));
+}
+
+function changeTextCallback(data, eventData, doneChangingTextCallback) {
+  return doneChangingTextCallback(prompt('Enter your annotation:'));
+}
+
+KeyImageTool.toolName = 'KeyImage';
+
+export default KeyImageTool;

package/src/tools/annotation/PlanarFreehandROITool.ts

@@ -492,11 +492,7 @@ class PlanarFreehandROITool extends AnnotationTool {
 
     let annotationsToDisplay;
 
-    if (viewport instanceof StackViewport) {
-      // Use the default `filterAnnotationsForDisplay` utility, as the stack
-      // path doesn't require handles.
-      annotationsToDisplay = filterAnnotationsForDisplay(viewport, annotations);
-    } else if (viewport instanceof VolumeViewport) {
+    if (viewport instanceof VolumeViewport) {
       const camera = viewport.getCamera();
 
       const { spacingInNormalDirection } =
@@ -509,7 +505,9 @@ class PlanarFreehandROITool extends AnnotationTool {
         spacingInNormalDirection
       );
     } else {
-      throw new Error(`Viewport Type ${viewport.type} not supported`);
+      // Use the default `filterAnnotationsForDisplay` utility, as the stack
+      // path doesn't require handles.
+      annotationsToDisplay = filterAnnotationsForDisplay(viewport, annotations);
     }
 
     return annotationsToDisplay;