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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "Cornerstone3D Tools",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^2.0.0-beta.2",
+    "@cornerstonejs/core": "^2.0.0-beta.4",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
@@ -52,5 +52,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "c154f7531c166db29a54fe41c76a22ecc7ac47c8"
+  "gitHead": "deefd5fb773ca3eb6fc4f2047c15a2b1a3ac82de"
 }

package/src/drawingSvg/getSvgDrawingHelper.ts

@@ -38,7 +38,10 @@ function getSvgDrawingHelper(element: HTMLDivElement): SVGDrawingHelper {
 function _getSvgLayer(element) {
   const viewportElement = `.${VIEWPORT_ELEMENT}`;
   const internalDivElement = element.querySelector(viewportElement);
-  const svgLayer = internalDivElement.querySelector('.svg-layer');
+
+  // Using :scope to make sure the right svg layer is selected otherwise it
+  // may select one from a nested viewport (eg: AdvancedMagnifyTool).
+  const svgLayer = internalDivElement.querySelector(':scope > .svg-layer');
 
   return svgLayer;
 }

package/src/enums/Events.ts

@@ -18,6 +18,15 @@ enum Events {
    */
   TOOL_ACTIVATED = 'CORNERSTONE_TOOLS_TOOL_ACTIVATED',
 
+  /**
+   * Triggers on the eventTarget when a mode of a tool is changed (active, passive, enabled and disabled).
+   *
+   * Make use of {@link EventTypes.ToolModeChangedEventType | Tool Mode Changed Event Type  }
+   * for typing your event listeners for this tool activated event, and see what event
+   * detail is included in {@link EventTypes.ToolModeChangedEventDetail | Tool Mode Changed Event Detail}.
+   */
+  TOOL_MODE_CHANGED = 'CORNERSTONE_TOOLS_TOOL_MODE_CHANGED',
+
   ///////////////////////////////////////
   //            Annotations
   ///////////////////////////////////////

package/src/eventDispatchers/mouseEventHandlers/mouseDown.ts

@@ -20,6 +20,7 @@ import filterToolsWithAnnotationsForElement from '../../store/filterToolsWithAnn
 import filterMoveableAnnotationTools from '../../store/filterMoveableAnnotationTools';
 import getActiveToolForMouseEvent from '../shared/getActiveToolForMouseEvent';
 import getToolsWithModesForMouseEvent from '../shared/getToolsWithModesForMouseEvent';
+import mouseDownAnnotationAction from './mouseDownAnnotationAction';
 
 const { Active, Passive } = ToolModes;
 
@@ -39,8 +40,10 @@ const { Active, Passive } = ToolModes;
  * - Next we check any tools are interactable (e.g. moving an entire length annotation rather than one of its handles:
  *   `filterMoveableAnnotationTools`). If interactable tools are found, the first tool found consumes the event and the
  *   event does not propagate further.
- * - Finally, if the `activeTool` has `postMouseDownCallback`, this is called.  If the callback returns `true`,
+ * - If the `activeTool` has `postMouseDownCallback`, this is called.  If the callback returns `true`,
  *   the event does not propagate further.
+ * - Finally, look for annotations actions that could handle the event such as showing a dropdown to allow the user
+ *   change the magnifying glass zoom factor.
  *
  * If the event is not consumed the event will bubble to the `mouseDownActivate` handler.
  *
@@ -133,7 +136,7 @@ export default function mouseDown(evt: EventTypes.MouseDownEventType) {
     );
 
     toggleAnnotationSelection(annotation.annotationUID, isMultiSelect);
-    tool.toolSelectedCallback(evt, annotation, 'Mouse');
+    tool.toolSelectedCallback(evt, annotation, 'Mouse', canvasCoords);
 
     return;
   }
@@ -148,6 +151,12 @@ 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/mouseEventHandlers/mouseDownAnnotationAction.ts

@@ -0,0 +1,72 @@
+import { getEnabledElement } from '@cornerstonejs/core';
+import { state } from '../../store';
+import { ToolModes } from '../../enums';
+import { EventTypes } from '../../types';
+
+// Util
+import filterToolsWithAnnotationsForElement from '../../store/filterToolsWithAnnotationsForElement';
+import filterMoveableAnnotationTools from '../../store/filterMoveableAnnotationTools';
+import getToolsWithActionsForMouseEvent from '../shared/getToolsWithActionsForMouseEvent';
+
+const { Active, Passive } = ToolModes;
+
+/**
+ * Look for active or passive annotations with an action that could handle the
+ * event based on the bindings and invoke the first one found.
+ *
+ * @param evt - The normalized mouseDown event.
+ * @returns True if an action has executed or false otherwise
+ */
+export default function mouseDownAnnotationAction(
+  evt: EventTypes.MouseDownEventType
+): boolean {
+  // If a tool has locked the current state it is dealing with an interaction within its own eventLoop.
+  if (state.isInteractingWithTool) {
+    return false;
+  }
+
+  const eventDetail = evt.detail;
+  const { element } = eventDetail;
+  const enabledElement = getEnabledElement(element);
+  const { canvas: canvasCoords } = eventDetail.currentPoints;
+
+  if (!enabledElement) {
+    return false;
+  }
+
+  // Find all tools that might respond to this mouse down
+  const toolsWithActions = getToolsWithActionsForMouseEvent(evt, [
+    Active,
+    Passive,
+  ]);
+
+  const tools = Array.from(toolsWithActions.keys());
+
+  // Filter tools with annotations for this element
+  const annotationToolsWithAnnotations = filterToolsWithAnnotationsForElement(
+    element,
+    tools
+  );
+
+  // Only moveable annotations (unlocked, visible and close to the canvas coordinates) may trigger actions
+  const moveableAnnotationTools = filterMoveableAnnotationTools(
+    element,
+    annotationToolsWithAnnotations,
+    canvasCoords
+  );
+
+  // If there are annotation tools that are interactable, select the first one
+  // that isn't locked. If there's only one annotation tool, select it.
+  if (moveableAnnotationTools.length > 0) {
+    const { tool, annotation } = moveableAnnotationTools[0];
+    const action = toolsWithActions.get(tool);
+    const method =
+      typeof action.method === 'string' ? tool[action.method] : action.method;
+
+    method.call(tool, evt, annotation);
+
+    return true;
+  }
+
+  return false;
+}

package/src/eventDispatchers/shared/getToolsWithActionsForMouseEvent.ts

@@ -0,0 +1,66 @@
+import { ToolGroupManager } from '../../store';
+import { ToolModes } from '../../enums';
+import { ToolAction, EventTypes } from '../../types';
+
+import { keyEventListener } from '../../eventListeners';
+import getMouseModifier from './getMouseModifier';
+
+type ModesFilter = Array<ToolModes>;
+
+/**
+ * Given the mouse event and a list of tool modes, find all tool instances
+ * with actions that were added to the tool group associated with the viewport
+ * that triggered the event.
+ *
+ * @param evt - mouseDown event triggered by a cornerstone viewport
+ * @param toolModes - List of tool modes used to filter the tools registered
+ *                    in the viewport's tool group
+ */
+export default function getToolsWithActionsForMouseEvent(
+  evt: EventTypes.MouseMoveEventType,
+  toolModes: ToolModes[]
+): Map<any, ToolAction> {
+  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 defaultMousePrimary = toolGroup.getDefaultMousePrimary();
+  const mouseEvent = evt.detail.event;
+  const mouseButton = mouseEvent?.buttons ?? defaultMousePrimary;
+  const modifierKey =
+    getMouseModifier(mouseEvent) || keyEventListener.getModifierKey();
+
+  for (let j = 0; j < toolGroupToolNames.length; j++) {
+    const toolName = toolGroupToolNames[j];
+    const tool = toolGroup.getToolInstance(toolName);
+    const actions = tool.configuration?.actions;
+
+    if (!actions?.length || !toolModes.includes(tool.mode)) {
+      continue;
+    }
+
+    const action = actions.find(
+      (action) =>
+        action.bindings.length &&
+        action.bindings.some(
+          (binding) =>
+            binding.mouseButton === mouseButton &&
+            binding.modifierKey === modifierKey
+        )
+    );
+
+    if (action) {
+      toolsWithActions.set(tool, action);
+    }
+  }
+
+  return toolsWithActions;
+}

package/src/eventListeners/keyboard/keyDownListener.ts

@@ -1,4 +1,3 @@
-import _cloneDeep from 'lodash.clonedeep';
 import { getEnabledElement, triggerEvent } from '@cornerstonejs/core';
 import Events from '../../enums/Events';
 import { KeyDownEventDetail, KeyUpEventDetail } from '../../types/EventTypes';
@@ -97,7 +96,7 @@ function _onKeyUp(evt: KeyboardEvent): void {
   state.element.addEventListener('keydown', keyListener);
 
   // Restore `state` to `defaultState`
-  state = _cloneDeep(defaultState);
+  state = structuredClone(defaultState);
   triggerEvent(eventDetail.element, Events.KEY_UP, eventDetail);
 }
 

package/src/eventListeners/mouse/mouseDownListener.ts

@@ -262,7 +262,13 @@ function _onMouseDrag(evt: MouseEvent) {
     deltaPoints,
   };
 
-  triggerEvent(state.element, MOUSE_DRAG, eventDetail);
+  const consumed = !triggerEvent(state.element, MOUSE_DRAG, eventDetail);
+
+  // Events.MOUSE_DRAG was consumed, thus no other listener should handle this event.
+  if (consumed) {
+    evt.stopImmediatePropagation();
+    evt.preventDefault();
+  }
 
   // Update the last points
   state.lastPoints = _copyPoints(currentPoints);

package/src/eventListeners/mouse/mouseMoveListener.ts

@@ -27,7 +27,13 @@ function mouseMoveListener(evt: MouseEvent) {
     event: evt,
   };
 
-  triggerEvent(element, eventName, eventDetail);
+  const consumed = !triggerEvent(element, eventName, eventDetail);
+
+  // Events.MOUSE_MOVE was consumed, thus no other listener should handle this event.
+  if (consumed) {
+    evt.stopImmediatePropagation();
+    evt.preventDefault();
+  }
 }
 
 export default mouseMoveListener;

package/src/index.ts

@@ -54,10 +54,13 @@ import {
   AngleTool,
   CobbAngleTool,
   MagnifyTool,
+  AdvancedMagnifyTool,
   ReferenceCursors,
   ReferenceLines,
   PaintFillTool,
   ScaleOverlayTool,
+  OrientationMarkerTool,
+  OverlayGridTool,
 } from './tools';
 
 import * as Enums from './enums';
@@ -88,6 +91,7 @@ export {
   LengthTool,
   CrosshairsTool,
   ReferenceLinesTool,
+  OverlayGridTool,
   ProbeTool,
   RectangleROITool,
   EllipticalROITool,
@@ -98,6 +102,7 @@ export {
   AngleTool,
   CobbAngleTool,
   MagnifyTool,
+  AdvancedMagnifyTool,
   ReferenceCursors,
   ReferenceLines,
   ScaleOverlayTool,
@@ -110,6 +115,7 @@ export {
   RectangleROIThresholdTool,
   RectangleROIStartEndThresholdTool,
   BrushTool,
+  OrientationMarkerTool,
   // Synchronizers
   synchronizers,
   Synchronizer,

package/src/stateManagement/annotation/FrameOfReferenceSpecificAnnotationManager.ts

@@ -1,4 +1,3 @@
-import cloneDeep from 'lodash.clonedeep';
 import {
   Annotation,
   Annotations,
@@ -314,14 +313,14 @@ class FrameOfReferenceSpecificAnnotationManager implements IAnnotationManager {
       const toolSpecificAnnotations =
         frameOfReferenceSpecificAnnotations[toolName];
 
-      return cloneDeep(toolSpecificAnnotations);
+      return structuredClone(toolSpecificAnnotations);
     } else if (groupKey) {
       const frameOfReferenceSpecificAnnotations = annotations[groupKey];
 
-      return cloneDeep(frameOfReferenceSpecificAnnotations);
+      return structuredClone(frameOfReferenceSpecificAnnotations);
     }
 
-    return cloneDeep(annotations);
+    return structuredClone(annotations);
   };
 
   /**
@@ -361,7 +360,7 @@ class FrameOfReferenceSpecificAnnotationManager implements IAnnotationManager {
       annotations[groupKey] = <GroupSpecificAnnotations>state;
     } else {
       // Set entire annotations
-      this.annotations = <AnnotationState>cloneDeep(state);
+      this.annotations = <AnnotationState>structuredClone(state);
     }
   };
 

package/src/stateManagement/segmentation/SegmentationStateManager.ts

@@ -1,5 +1,4 @@
 import { utilities as csUtils } from '@cornerstonejs/core';
-import cloneDeep from 'lodash.clonedeep';
 
 import CORNERSTONE_COLOR_LUT from '../../constants/COLOR_LUT';
 
@@ -52,7 +51,7 @@ export default class SegmentationStateManager {
     if (!uid) {
       uid = csUtils.uuidv4();
     }
-    this.state = cloneDeep(initialDefaultState);
+    this.state = structuredClone(initialDefaultState);
     this.uid = uid;
   }
 
@@ -85,7 +84,7 @@ export default class SegmentationStateManager {
    * Reset the state to the default state
    */
   resetState(): void {
-    this.state = cloneDeep(initialDefaultState);
+    this.state = structuredClone(initialDefaultState);
   }
 
   /**

package/src/stateManagement/segmentation/addSegmentationRepresentations.ts

@@ -1,4 +1,3 @@
-import _cloneDeep from 'lodash.clonedeep';
 import {
   SegmentationRepresentationConfig,
   RepresentationPublicInput,

package/src/stateManagement/segmentation/addSegmentations.ts

@@ -1,4 +1,3 @@
-import _cloneDeep from 'lodash.clonedeep';
 import { SegmentationPublicInput } from '../../types/SegmentationStateTypes';
 import { validateSegmentationInput } from './helpers';
 import { addSegmentation as addSegmentationToState } from './segmentationState';
@@ -18,7 +17,7 @@ function addSegmentations(
   validateSegmentationInput(segmentationInputArray);
 
   segmentationInputArray.map((segInput) => {
-    const segmentationInput = _cloneDeep(segInput);
+    const segmentationInput = structuredClone(segInput);
 
     addSegmentationToState(segmentationInput);
   });

package/src/store/ToolGroupManager/ToolGroup.ts

@@ -1,5 +1,4 @@
 import { MouseBindings, ToolModes } from '../../enums';
-import cloneDeep from 'lodash.clonedeep';
 import get from 'lodash.get';
 import {
   triggerEvent,
@@ -12,8 +11,11 @@ import {
 } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
 import { Events } from '../../enums';
-import { ToolActivatedEventDetail } from '../../types/EventTypes';
-import { state } from '../index';
+import {
+  ToolActivatedEventDetail,
+  ToolModeChangedEventDetail,
+} from '../../types/EventTypes';
+import { ToolGroupManager, state } from '../index';
 import {
   IToolBinding,
   IToolClassReference,
@@ -385,6 +387,7 @@ export default class ToolGroup implements IToolGroup {
     };
 
     triggerEvent(eventTarget, Events.TOOL_ACTIVATED, eventDetail);
+    this._triggerToolModeChangedEvent(toolName, Active, toolBindingsOptions);
   }
 
   /**
@@ -440,6 +443,13 @@ export default class ToolGroup implements IToolGroup {
       toolInstance.onSetToolPassive();
     }
     this._renderViewports();
+
+    // It would make sense to use `toolInstance.mode` as mode when setting a tool
+    // as passive because it can still be actived in the end but `Passive` must
+    // be used when synchronizing ToolGroups so that other ToolGroups can take the
+    // same action (update tool bindings). Should the event have two different modes
+    // to handle this special case?
+    this._triggerToolModeChangedEvent(toolName, Passive);
   }
 
   /**
@@ -473,6 +483,7 @@ export default class ToolGroup implements IToolGroup {
     }
 
     this._renderViewports();
+    this._triggerToolModeChangedEvent(toolName, Enabled);
   }
 
   /**
@@ -505,6 +516,7 @@ export default class ToolGroup implements IToolGroup {
       toolInstance.onSetToolDisabled();
     }
     this._renderViewports();
+    this._triggerToolModeChangedEvent(toolName, Disabled);
   }
 
   /**
@@ -666,7 +678,50 @@ export default class ToolGroup implements IToolGroup {
       configurationPath
     );
 
-    return cloneDeep(_configuration);
+    return structuredClone(_configuration);
+  }
+
+  /**
+   *
+   * @param newToolGroupId - Id of the new (clone) tool group
+   * @param fnToolFilter - Function to filter which tools from this tool group
+   * should be added to the new (clone) one. Example: only annotations tools
+   * can be filtered and added to the new tool group.
+   * @returns A new tool group that is a clone of this one
+   */
+  public clone(
+    newToolGroupId,
+    fnToolFilter: (toolName: string) => void = null
+  ): IToolGroup {
+    let toolGroup = ToolGroupManager.getToolGroup(newToolGroupId);
+
+    if (toolGroup) {
+      console.warn(`ToolGroup ${newToolGroupId} already exists`);
+      return toolGroup;
+    }
+
+    toolGroup = ToolGroupManager.createToolGroup(newToolGroupId);
+    fnToolFilter = fnToolFilter ?? (() => true);
+
+    Object.keys(this._toolInstances)
+      .filter(fnToolFilter)
+      .forEach((toolName) => {
+        const sourceToolInstance = this._toolInstances[toolName];
+        const sourceToolOptions = this.toolOptions[toolName];
+        const sourceToolMode = sourceToolInstance.mode;
+
+        toolGroup.addTool(toolName);
+
+        (toolGroup as unknown as ToolGroup).setToolMode(
+          toolName,
+          sourceToolMode,
+          {
+            bindings: sourceToolOptions.bindings ?? [],
+          }
+        );
+      });
+
+    return toolGroup;
   }
 
   /**
@@ -692,6 +747,27 @@ export default class ToolGroup implements IToolGroup {
       getRenderingEngine(renderingEngineId).renderViewport(viewportId);
     });
   }
+
+  /**
+   * Trigger ToolModeChangedEvent when changing the tool mode
+   * @param toolName - Tool name
+   * @param mode - Tool mode
+   * @param toolBindingsOptions - Binding options used when a tool is activated
+   */
+  private _triggerToolModeChangedEvent(
+    toolName: string,
+    mode: ToolModes,
+    toolBindingsOptions?: SetToolBindingsType
+  ): void {
+    const eventDetail: ToolModeChangedEventDetail = {
+      toolGroupId: this.id,
+      toolName,
+      mode,
+      toolBindingsOptions,
+    };
+
+    triggerEvent(eventTarget, Events.TOOL_MODE_CHANGED, eventDetail);
+  }
 }
 
 function hasSameBinding(

package/src/store/state.ts

@@ -1,5 +1,3 @@
-import _cloneDeep from 'lodash.clonedeep';
-
 import { IToolGroup, IToolClassReference } from '../types';
 import Synchronizer from './SynchronizerManager/Synchronizer';
 import svgNodeCache, { resetSvgNodeCache } from './svgNodeCache';
@@ -46,7 +44,15 @@ let state: ICornerstoneTools3dState = {
 
 function resetCornerstoneToolsState(): void {
   resetSvgNodeCache();
-  state = _cloneDeep(defaultState);
+  state = {
+    ...structuredClone({
+      ...defaultState,
+      svgNodeCache: {},
+    }),
+    svgNodeCache: {
+      ...defaultState.svgNodeCache,
+    },
+  };
 }
 
 export {

package/src/synchronizers/callbacks/stackImageSyncCallback.ts

@@ -85,7 +85,7 @@ export default async function stackImageSyncCallback(
     const frameOfReferenceUID2 = tViewport.getFrameOfReferenceUID();
     if (
       frameOfReferenceUID1 === frameOfReferenceUID2 &&
-      options.useInitialPosition !== false
+      options?.useInitialPosition !== false
     ) {
       registrationMatrixMat4 = mat4.identity(mat4.create());
     } else {