@cornerstonejs/tools 2.0.0-beta.6 → 2.0.0-beta.7

package/src/drawingSvg/drawRectByCoordinates.ts

@@ -0,0 +1,87 @@
+import type { Types } from '@cornerstonejs/core';
+
+import _getHash from './_getHash';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+import { SVGDrawingHelper } from '../types';
+
+export default function drawRectByCoordinates(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  rectangleUID: string,
+  canvasCoordinates: Types.Point2[],
+  options = {},
+  dataId = ''
+): void {
+  const {
+    color,
+    width: _width,
+    lineWidth,
+    lineDash,
+  } = Object.assign(
+    {
+      color: 'rgb(0, 255, 0)',
+      width: '2',
+      lineWidth: undefined,
+      lineDash: undefined,
+    },
+    options
+  );
+
+  // for supporting both lineWidth and width options
+
+  const strokeWidth = lineWidth || _width;
+
+  const svgns = 'http://www.w3.org/2000/svg';
+  const svgNodeHash = _getHash(annotationUID, 'rect', rectangleUID);
+  const existingRect = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+  const [topLeft, topRight, bottomLeft, bottomRight] = canvasCoordinates;
+
+  const width = Math.hypot(topLeft[0] - topRight[0], topLeft[1] - topRight[1]);
+  const height = Math.hypot(
+    topLeft[0] - bottomLeft[0],
+    topLeft[1] - bottomLeft[1]
+  );
+
+  const center = [
+    (bottomRight[0] + topLeft[0]) / 2,
+    (bottomRight[1] + topLeft[1]) / 2,
+  ];
+  const leftEdgeCenter = [
+    (bottomLeft[0] + topLeft[0]) / 2,
+    (bottomLeft[1] + topLeft[1]) / 2,
+  ];
+  const angle =
+    (Math.atan2(center[1] - leftEdgeCenter[1], center[0] - leftEdgeCenter[0]) *
+      180) /
+    Math.PI;
+
+  const attributes = {
+    x: `${center[0] - width / 2}`,
+    y: `${center[1] - height / 2}`,
+    width: `${width}`,
+    height: `${height}`,
+    stroke: color,
+    fill: 'transparent',
+    transform: `rotate(${angle} ${center[0]} ${center[1]})`,
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': lineDash,
+  };
+
+  if (existingRect) {
+    setAttributesIfNecessary(attributes, existingRect);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const svgRectElement = document.createElementNS(svgns, 'rect');
+
+    if (dataId !== '') {
+      svgRectElement.setAttribute('data-id', dataId);
+    }
+
+    setNewAttributesIfValid(attributes, svgRectElement);
+
+    svgDrawingHelper.appendNode(svgRectElement, svgNodeHash);
+  }
+}

package/src/drawingSvg/drawRedactionRect.ts

@@ -0,0 +1,62 @@
+import _getHash from './_getHash';
+import _setAttributesIfNecessary from './setAttributesIfNecessary';
+import _setNewAttributesIfValid from './setNewAttributesIfValid';
+
+// <rect x="120" y="100" width="100" height="100" />
+export default function drawRedactionRect(
+  svgDrawingHelper: any,
+  annotationUID: string,
+  rectangleUID: string,
+  start: any,
+  end: any,
+  options = {}
+): void {
+  const {
+    color,
+    width: _width,
+    lineWidth,
+    lineDash,
+  } = Object.assign(
+    {
+      color: 'rgb(0, 255, 0)',
+      width: '2',
+      lineWidth: undefined,
+      lineDash: undefined,
+    },
+    options
+  );
+
+  // for supporting both lineWidth and width options
+  const strokeWidth = lineWidth || _width;
+
+  const svgns = 'http://www.w3.org/2000/svg';
+  const svgNodeHash = _getHash(annotationUID, 'rect', rectangleUID);
+  const existingRect = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+  const tlhc = [Math.min(start[0], end[0]), Math.min(start[1], end[1])];
+  const width = Math.abs(start[0] - end[0]);
+  const height = Math.abs(start[1] - end[1]);
+
+  const attributes = {
+    x: `${tlhc[0]}`,
+    y: `${tlhc[1]}`,
+    width: `${width}`,
+    height: `${height}`,
+    stroke: color,
+    fill: 'black',
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': lineDash,
+  };
+
+  if (existingRect) {
+    _setAttributesIfNecessary(attributes, existingRect);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const svgRectElement = document.createElementNS(svgns, 'rect');
+
+    _setNewAttributesIfValid(attributes, svgRectElement);
+
+    svgDrawingHelper.appendNode(svgRectElement, svgNodeHash);
+  }
+}

package/src/drawingSvg/index.ts

@@ -1,13 +1,18 @@
 import draw from './draw';
 import drawCircle from './drawCircle';
 import drawEllipse from './drawEllipse';
+import drawEllipseByCoordinates from './drawEllipseByCoordinates';
 import drawHandles from './drawHandles';
+import drawHandle from './drawHandle';
 import drawLine from './drawLine';
 import drawPolyline from './drawPolyline';
+import drawPath from './drawPath';
 import drawLinkedTextBox from './drawLinkedTextBox';
 import drawRect from './drawRect';
+import drawRectByCoordinates from './drawRectByCoordinates';
 import drawTextBox from './drawTextBox';
 import drawArrow from './drawArrow';
+import drawRedactionRect from './drawRedactionRect';
 import setAttributesIfNecessary from './setAttributesIfNecessary';
 import setNewAttributesIfValid from './setNewAttributesIfValid';
 
@@ -15,13 +20,18 @@ export {
   draw,
   drawCircle,
   drawEllipse,
+  drawEllipseByCoordinates,
   drawHandles,
+  drawHandle,
   drawLine,
   drawPolyline,
+  drawPath,
   drawLinkedTextBox,
   drawRect,
+  drawRectByCoordinates,
   drawTextBox,
   drawArrow,
+  drawRedactionRect,
   setAttributesIfNecessary,
   setNewAttributesIfValid,
 };

package/src/enums/AnnotationStyleStates.ts

@@ -11,12 +11,15 @@
  *   The annotation has been selected by the user;
  * Locked:
  *   The annotation has been locked;
+ * AutoGenerated:
+ *   The annotation has been auto generated;
  */
 enum AnnotationStyleStates {
   Default = '',
   Highlighted = 'Highlighted',
   Selected = 'Selected',
   Locked = 'Locked',
+  AutoGenerated = 'AutoGenerated',
 }
 
 export default AnnotationStyleStates;

package/src/enums/ChangeTypes.ts

@@ -0,0 +1,36 @@
+/**
+ * ChangeTypes defines the types of changes occurring on annotation and
+ * segmentation data.
+ */
+enum ChangeTypes {
+  /**
+   * Interaction events are done when the user is actively interacting with
+   * an annotation, and probably means the event shouldn't be handled/used.
+   */
+  Interaction = 'Interaction',
+  /**
+   * HandlesUpdated occurs when the handle data is added or removed, or moved around
+   */
+  HandlesUpdated = 'HandlesUpdated',
+  /**
+   * StatsUpdated occurs when the stats are updated/calculated.  This can be used
+   * to ignore stats calculations changes occurring on initial load, while still
+   * rendering other updates.
+   */
+  StatsUpdated = 'StatsUpdated',
+  /**
+   * InitialSetup occurs when an annotation has been created initially and
+   * has the first render/data calculation being applied.
+   */
+  InitialSetup = 'InitialSetup',
+  /**
+   * Completed occurs only for the annotation completed event, just to identify it
+   */
+  Completed = 'Completed',
+  /**
+   * Occurs when an interpolation result is updated with more tool specific data.
+   */
+  InterpolationUpdated = 'InterpolationUpdated',
+}
+
+export default ChangeTypes;

package/src/enums/Events.ts

@@ -18,6 +18,12 @@ enum Events {
    */
   TOOL_ACTIVATED = 'CORNERSTONE_TOOLS_TOOL_ACTIVATED',
 
+  // fired when a viewport is added to the toolGroup
+  TOOLGROUP_VIEWPORT_ADDED = 'CORNERSTONE_TOOLS_TOOLGROUP_VIEWPORT_ADDED',
+
+  // fired when a viewport is removed from the toolGroup
+  TOOLGROUP_VIEWPORT_REMOVED = 'CORNERSTONE_TOOLS_TOOLGROUP_VIEWPORT_REMOVED',
+
   /**
    * Triggers on the eventTarget when a mode of a tool is changed (active, passive, enabled and disabled).
    *
@@ -96,6 +102,22 @@ enum Events {
    */
   ANNOTATION_RENDERED = 'CORNERSTONE_TOOLS_ANNOTATION_RENDERED',
 
+  /**
+   * Triggers on the eventTarget when an annotation interpolation process completed.
+   * Make use of {@link EventTypes.AnnotationInterpolationCompletedEventType | Annotation Interpolation process Completed Event Type}
+   * for typing your event listeners for this annotation interpolation complete event, and see what
+   * event detail is included in {@link EventTypes.AnnotationInterpolationCompletedEventDetail | Annotation interpolation process Event Detail}.
+   */
+  ANNOTATION_INTERPOLATION_PROCESS_COMPLETED = 'CORNERSTONE_TOOLS_ANNOTATION_INTERPOLATION_PROCESS_COMPLETED',
+
+  /**
+   * Triggers on the eventTarget when interpolated annotations are removed.
+   * Make use of {@link EventTypes.AnnotationInterpolationRemovedEventType | Annotation Interpolation Removed Event Type}
+   * for typing your event listeners for this interpolated annotation removed event, and see what
+   * event detail is included in {@link EventTypes.AnnotationInterpolationRemovedEventDetail | Annotation interpolation removed Event Detail}.
+   */
+  INTERPOLATED_ANNOTATIONS_REMOVED = 'CORNERSTONE_TOOLS_INTERPOLATED_ANNOTATIONS_REMOVED',
+
   ///////////////////////////////////////
   //        Segmentations Events
   ///////////////////////////////////////

package/src/enums/SegmentationRepresentations.ts

@@ -6,7 +6,7 @@
 enum SegmentationRepresentations {
   Labelmap = 'LABELMAP',
   Contour = 'CONTOUR',
-  // Todo: add more representations
+  Surface = 'SURFACE',
 }
 
 export default SegmentationRepresentations;

package/src/enums/StrategyCallbacks.ts

@@ -0,0 +1,55 @@
+/**
+ * Defines the names of the strategy callbacks used for performing enhanced
+ * strategy operations.
+ */
+enum StrategyCallbacks {
+  /**
+   * startStrategy is called at the start of a strategy, typically on mouse down
+   * Note this is separate from preview and the endings for preview, which could
+   * be called alternatively, but this may be nested within a preview.
+   */
+  OnInteractionStart = 'onInteractionStart',
+  /**
+   * finishStrategy is called at the end of a strategy being applied, usually on
+   * mouse up.
+   */
+  OnInteractionEnd = 'onInteractionEnd',
+  /**
+   * The preview can be used for tools to show what would happen on accepting
+   * before the change is actually done.  For example, a spline tool might
+   * show a preview state, and allow that to be accepted or rejected.
+   */
+  Preview = 'preview',
+  RejectPreview = 'rejectPreview',
+  AcceptPreview = 'acceptPreview',
+
+  /**
+   * Fills the given reygion
+   */
+  Fill = 'fill',
+
+  /**
+   * The default strategy function, often synonymous with fill
+   */
+  StrategyFunction = 'strategyFunction',
+
+  /**
+   * For threshold functions, this creates the thresold test.  Mostly an internal
+   * detail, but might be useful to share between strategies.
+   */
+  CreateIsInThreshold = 'createIsInThreshold',
+
+  /**
+   *  Some strategy functions need to initialize some data before being runnable.
+   * This is mostly an internal detail, just useful to have an enum here for this.
+   */
+  Initialize = 'initialize',
+
+  // Internal Details
+  INTERNAL_setValue = 'setValue',
+
+  /** inner circle size  */
+  ComputeInnerCircleRadius = 'computeInnerCircleRadius',
+}
+
+export default StrategyCallbacks;

package/src/enums/WorkerTypes.ts

@@ -0,0 +1,16 @@
+/**
+ * Worker Types are used to define the types the worker that is getting performed
+ */
+enum ChangeTypes {
+  POLYSEG_CONTOUR_TO_LABELMAP = 'polySeg/convertContourToVolumeLabelmap',
+
+  POLYSEG_SURFACE_TO_LABELMAP = 'polySeg/convertSurfacesToVolumeLabelmap',
+
+  POLYSEG_CONTOUR_TO_SURFACE = 'polySeg/convertContourToSurface',
+
+  POLYSEG_LABELMAP_TO_SURFACE = 'polySeg/convertLabelmapToSurface',
+
+  SURFACE_CLIPPING = 'surfaceClipping',
+}
+
+export default ChangeTypes;

package/src/enums/index.js

@@ -4,6 +4,9 @@ import AnnotationStyleStates from './AnnotationStyleStates';
 import Events from './Events';
 import SegmentationRepresentations from './SegmentationRepresentations';
 import { Swipe } from './Touch';
+import StrategyCallbacks from './StrategyCallbacks';
+import ChangeTypes from './ChangeTypes';
+import WorkerTypes from './WorkerTypes';
 
 export {
   MouseBindings,
@@ -13,4 +16,7 @@ export {
   Events,
   SegmentationRepresentations,
   Swipe,
+  StrategyCallbacks,
+  ChangeTypes,
+  WorkerTypes,
 };

package/src/eventDispatchers/annotationInterpolationEventDispatcher.ts

@@ -0,0 +1,42 @@
+import { eventTarget } from '@cornerstonejs/core';
+import Events from '../enums/Events';
+import InterpolationManager from '../utilities/segmentation/InterpolationManager/InterpolationManager';
+
+/**
+ * The enable and disable add/remove the event listeners that dispatch the
+ * required events to the interpolation manager.
+ */
+const enable = function () {
+  eventTarget.addEventListener(
+    Events.ANNOTATION_COMPLETED,
+    InterpolationManager.handleAnnotationCompleted as EventListener
+  );
+  eventTarget.addEventListener(
+    Events.ANNOTATION_MODIFIED,
+    InterpolationManager.handleAnnotationUpdate as EventListener
+  );
+  eventTarget.addEventListener(
+    Events.ANNOTATION_REMOVED,
+    InterpolationManager.handleAnnotationDelete as EventListener
+  );
+};
+
+const disable = function () {
+  eventTarget.removeEventListener(
+    Events.ANNOTATION_COMPLETED,
+    InterpolationManager.handleAnnotationCompleted as EventListener
+  );
+  eventTarget.removeEventListener(
+    Events.ANNOTATION_MODIFIED,
+    InterpolationManager.handleAnnotationUpdate as EventListener
+  );
+  eventTarget.removeEventListener(
+    Events.ANNOTATION_REMOVED,
+    InterpolationManager.handleAnnotationDelete as EventListener
+  );
+};
+
+export default {
+  enable,
+  disable,
+};

package/src/eventDispatchers/cameraResetEventDispatcher.ts

@@ -0,0 +1,41 @@
+import { Enums, Types } from '@cornerstonejs/core';
+import { ToolModes } from '../enums';
+import getToolsWithModesForMouseEvent from './shared/getToolsWithModesForMouseEvent';
+
+const { Active, Passive, Enabled } = ToolModes;
+
+/**
+ * When the camera is reset, check what tools need to react to this.
+ *
+ * - First we get all tools which are active, passive or enabled on the element.
+ * - If any of these tools have a `onCameraReset` method, we call it.
+ *
+ * @param evt - The normalized camera reset event.
+ */
+const onCameraReset = function (evt: Types.EventTypes.CameraResetEvent) {
+  // @ts-ignore
+  const enabledTools = getToolsWithModesForMouseEvent(evt, [
+    Active,
+    Passive,
+    Enabled,
+  ]);
+
+  enabledTools.forEach((tool) => {
+    if (tool.onResetCamera) {
+      tool.onResetCamera(evt);
+    }
+  });
+};
+
+const enable = function (element) {
+  element.addEventListener(Enums.Events.CAMERA_RESET, onCameraReset);
+};
+
+const disable = function (element) {
+  element.removeEventListener(Enums.Events.CAMERA_RESET, onCameraReset);
+};
+
+export default {
+  enable,
+  disable,
+};

package/src/eventDispatchers/index.js

@@ -4,6 +4,8 @@ import keyboardToolEventDispatcher from './keyboardToolEventDispatcher';
 import cameraModifiedEventDispatcher from './cameraModifiedEventDispatcher';
 import imageSpacingCalibratedEventDispatcher from './imageSpacingCalibratedEventDispatcher';
 import touchToolEventDispatcher from './touchToolEventDispatcher';
+import annotationInterpolationEventDispatcher from './annotationInterpolationEventDispatcher';
+import cameraResetEventDispatcher from './cameraResetEventDispatcher';
 
 export {
   imageRenderedEventDispatcher,
@@ -12,4 +14,6 @@ export {
   cameraModifiedEventDispatcher,
   imageSpacingCalibratedEventDispatcher,
   touchToolEventDispatcher,
+  annotationInterpolationEventDispatcher,
+  cameraResetEventDispatcher,
 };

package/src/eventDispatchers/keyboardEventHandlers/keyDown.ts

@@ -1,6 +1,8 @@
 import { ToolGroupManager } from '../../store';
 import getActiveToolForKeyboardEvent from '../shared/getActiveToolForKeyboardEvent';
+import getToolsWithActionsForKeyboardEvent from '../shared/getToolsWithActionsForKeyboardEvents';
 import { KeyDownEventType } from '../../types/EventTypes';
+import ToolModes from '../../enums/ToolModes';
 
 /**
  * KeyDown event listener to handle viewport cursor icon changes
@@ -11,19 +13,34 @@ export default function keyDown(evt: KeyDownEventType): void {
   // get the active tool given the key and mouse button
   const activeTool = getActiveToolForKeyboardEvent(evt);
 
-  if (!activeTool) {
-    return;
-  }
+  if (activeTool) {
+    const { renderingEngineId, viewportId } = evt.detail;
+
+    const toolGroup = ToolGroupManager.getToolGroupForViewport(
+      viewportId,
+      renderingEngineId
+    );
 
-  const { renderingEngineId, viewportId } = evt.detail;
+    const toolName = activeTool.getToolName();
+    if (Object.keys(toolGroup.toolOptions).includes(toolName)) {
+      toolGroup.setViewportsCursorByToolName(toolName);
+    }
+  }
 
-  const toolGroup = ToolGroupManager.getToolGroupForViewport(
-    viewportId,
-    renderingEngineId
-  );
+  const activeToolsWithEventBinding = getToolsWithActionsForKeyboardEvent(evt, [
+    ToolModes.Active,
+  ]);
 
-  const toolName = activeTool.getToolName();
-  if (Object.keys(toolGroup.toolOptions).includes(toolName)) {
-    toolGroup.setViewportsCursorByToolName(toolName);
+  if (activeToolsWithEventBinding?.size) {
+    const { element } = evt.detail;
+    for (const [key, value] of [...activeToolsWithEventBinding.entries()]) {
+      // Calls the method that implements the action, which can be a string
+      // in which case it belongs to the tool instance, or a function
+      // Call it on the tool instance, with the element and configuration value
+      // so that the method can depend on the specific configuration in use.
+      const method =
+        typeof value.method === 'function' ? value.method : key[value.method];
+      method.call(key, element, value, evt);
+    }
   }
 }

package/src/eventDispatchers/mouseEventHandlers/mouseDown.ts

@@ -82,6 +82,14 @@ export default function mouseDown(evt: EventTypes.MouseDownEventType) {
     ...(passiveToolsIfEventWasPrimaryMouseButton || []),
   ];
 
+  // Actions need to run before tool/handle selected callbacks otherwise actions
+  // like the one from SplineTool to remove/add control points would not work.
+  const actionExecuted = mouseDownAnnotationAction(evt);
+
+  if (actionExecuted) {
+    return;
+  }
+
   const eventDetail = evt.detail;
   const { element } = eventDetail;
 
@@ -151,12 +159,6 @@ export default function mouseDown(evt: EventTypes.MouseDownEventType) {
     }
   }
 
-  const actionExecuted = mouseDownAnnotationAction(evt);
-
-  if (actionExecuted) {
-    return;
-  }
-
   // Don't stop propagation so that mouseDownActivate can handle the event
 }
 

package/src/eventDispatchers/shared/getActiveToolForKeyboardEvent.ts

@@ -1,5 +1,5 @@
 import { ToolGroupManager } from '../../store';
-import { ToolModes, MouseBindings } from '../../enums';
+import { ToolModes } from '../../enums';
 import { keyEventListener } from '../../eventListeners';
 import { EventTypes } from '../../types';
 import { getMouseButton } from '../../eventListeners/mouse/mouseDownListener';
@@ -24,6 +24,7 @@ export default function getActiveToolForKeyboardEvent(
   const mouseButton = getMouseButton();
 
   // If any keyboard modifier key is also pressed
+  // TODO - get the real modifier key
   const modifierKey = keyEventListener.getModifierKey();
 
   const toolGroup = ToolGroupManager.getToolGroupForViewport(
@@ -42,6 +43,9 @@ export default function getActiveToolForKeyboardEvent(
     const toolName = toolGroupToolNames[j];
     const toolOptions = toolGroup.toolOptions[toolName];
 
+    if (toolOptions.mode !== Active) {
+      continue;
+    }
     // tool has binding that matches the mouse button, if mouseEvent is undefined
     // it uses the primary button
     const correctBinding =
@@ -52,7 +56,7 @@ export default function getActiveToolForKeyboardEvent(
           binding.modifierKey === modifierKey
       );
 
-    if (toolOptions.mode === Active && correctBinding) {
+    if (correctBinding) {
       return toolGroup.getToolInstance(toolName);
     }
   }

package/src/eventDispatchers/shared/getActiveToolForMouseEvent.ts

@@ -1,5 +1,5 @@
 import { ToolGroupManager } from '../../store';
-import { MouseBindings, ToolModes } from '../../enums';
+import { ToolModes } from '../../enums';
 import { keyEventListener } from '../../eventListeners';
 import { EventTypes } from '../../types';
 import getMouseModifier from './getMouseModifier';

package/src/eventDispatchers/shared/getToolsWithActionsForKeyboardEvents.ts

@@ -0,0 +1,53 @@
+import { ToolGroupManager } from '../../store';
+import { ToolModes } from '../../enums';
+import { EventTypes } from '../../types';
+
+/**
+ * Given the normalized mouse event and a filter of modes,
+ * find all the tools on the element that are in one of the specified modes.
+ * If the evtButton is specified, only tools with a matching binding will be returned.
+ * @param evt - The normalized mouseDown event.
+ * @param modesFilter - An array of entries from the `ToolModes` enum.
+ */
+export default function getToolsWithModesForKeyboardEvent(
+  evt: EventTypes.KeyDownEventType,
+  toolModes: ToolModes[]
+) {
+  const toolsWithActions = new Map();
+  const { renderingEngineId, viewportId } = evt.detail;
+  const toolGroup = ToolGroupManager.getToolGroupForViewport(
+    viewportId,
+    renderingEngineId
+  );
+
+  if (!toolGroup) {
+    return toolsWithActions;
+  }
+
+  const toolGroupToolNames = Object.keys(toolGroup.toolOptions);
+  const key = evt.detail.key;
+
+  for (let j = 0; j < toolGroupToolNames.length; j++) {
+    const toolName = toolGroupToolNames[j];
+    const tool = toolGroup.getToolInstance(toolName);
+    const actionsConfig = tool.configuration?.actions;
+    if (!actionsConfig) {
+      continue;
+    }
+    const actions = Object.values(actionsConfig);
+
+    if (!actions?.length || !toolModes.includes(tool.mode)) {
+      continue;
+    }
+
+    const action = actions.find((action: any) =>
+      action.bindings.some((binding) => binding.key === key)
+    );
+
+    if (action) {
+      toolsWithActions.set(tool, action);
+    }
+  }
+
+  return toolsWithActions;
+}