@cornerstonejs/tools 2.0.0-beta.1 → 2.0.0-beta.3

package/src/eventListeners/touch/touchStartListener.ts

@@ -168,7 +168,9 @@ function touchStartListener(evt: TouchEvent) {
   state.renderingEngineId = renderingEngineId;
   state.viewportId = viewportId;
   // this prevents multiple start firing
-  if (state.isTouchStart) return;
+  if (state.isTouchStart) {
+    return;
+  }
   // this will clear on touchstart and touchend
   clearTimeout(state.pressTimeout);
   state.pressTimeout = setTimeout(() => _onTouchPress(evt), state.pressDelay);
@@ -187,7 +189,9 @@ function touchStartListener(evt: TouchEvent) {
  */
 function _onTouchPress(evt: TouchEvent) {
   const totalDistance = state.accumulatedDistance.canvas;
-  if (totalDistance > state.pressMaxDistance) return;
+  if (totalDistance > state.pressMaxDistance) {
+    return;
+  }
   const eventDetail: EventTypes.TouchPressEventDetail = {
     event: evt, // touchstart native event
     eventName: TOUCH_PRESS,
@@ -384,7 +388,9 @@ function _onTouchEnd(evt: TouchEvent): void {
 function _checkTouchTap(evt: TouchEvent): void {
   const currentTime = new Date().getTime();
   const startTime = state.startTime.getTime();
-  if (currentTime - startTime > tapState.tapToleranceMs) return;
+  if (currentTime - startTime > tapState.tapToleranceMs) {
+    return;
+  }
 
   // first tap, initialize the state
   if (tapState.taps === 0) {
@@ -422,7 +428,9 @@ function _checkTouchTap(evt: TouchEvent): void {
   // region where the user has the option to perform unlimited multitaps as long
   // as they are < the tapToleranceMs value. So a tap somewhere else on the screen
   // that is > the tapMaxDistance will start a separate and new "TapChain".
-  if (distanceFromStart > tapState.tapMaxDistance) return;
+  if (distanceFromStart > tapState.tapMaxDistance) {
+    return;
+  }
 
   clearTimeout(tapState.tapTimeout);
   tapState.taps += 1;
@@ -447,7 +455,9 @@ function _checkTouchTap(evt: TouchEvent): void {
 function _checkTouchSwipe(evt: TouchEvent, deltaPoints: IPoints) {
   const currentTime = new Date().getTime();
   const startTime = state.startTime.getTime();
-  if (state.swiped || currentTime - startTime > state.swipeToleranceMs) return;
+  if (state.swiped || currentTime - startTime > state.swipeToleranceMs) {
+    return;
+  }
   const [x, y] = deltaPoints.canvas;
   const eventDetail: EventTypes.TouchSwipeEventDetail = {
     event: evt,

package/src/index.ts

@@ -23,6 +23,7 @@ import * as segmentation from './stateManagement/segmentation';
 import {
   BaseTool,
   AnnotationTool,
+  AnnotationDisplayTool,
   PanTool,
   TrackballRotateTool,
   DragProbeTool,
@@ -53,10 +54,13 @@ import {
   AngleTool,
   CobbAngleTool,
   MagnifyTool,
+  AdvancedMagnifyTool,
   ReferenceCursors,
   ReferenceLines,
   PaintFillTool,
   ScaleOverlayTool,
+  OrientationMarkerTool,
+  OverlayGridTool,
 } from './tools';
 
 import * as Enums from './enums';
@@ -71,6 +75,7 @@ export {
   // Base Tools
   BaseTool,
   AnnotationTool,
+  AnnotationDisplayTool,
   // Manipulation Tools
   PanTool,
   TrackballRotateTool,
@@ -86,6 +91,7 @@ export {
   LengthTool,
   CrosshairsTool,
   ReferenceLinesTool,
+  OverlayGridTool,
   ProbeTool,
   RectangleROITool,
   EllipticalROITool,
@@ -96,6 +102,7 @@ export {
   AngleTool,
   CobbAngleTool,
   MagnifyTool,
+  AdvancedMagnifyTool,
   ReferenceCursors,
   ReferenceLines,
   ScaleOverlayTool,
@@ -108,6 +115,7 @@ export {
   RectangleROIThresholdTool,
   RectangleROIStartEndThresholdTool,
   BrushTool,
+  OrientationMarkerTool,
   // Synchronizers
   synchronizers,
   Synchronizer,

package/src/stateManagement/annotation/config/ToolStyle.ts

@@ -35,6 +35,7 @@ class ToolStyle {
       lineWidth: '1',
       lineDash: '',
       shadow: true,
+      textBoxVisibility: true,
       textBoxFontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
       textBoxFontSize: '14px',
       textBoxColor: 'rgb(255, 255, 0)',

package/src/stateManagement/annotation/config/getState.ts

@@ -11,13 +11,17 @@ import { AnnotationStyleStates } from '../../../enums';
  */
 function getState(annotation?: Annotation): AnnotationStyleStates {
   if (annotation) {
-    if (annotation.data && annotation.highlighted)
+    if (annotation.data && annotation.highlighted) {
       return AnnotationStyleStates.Highlighted;
-    if (isAnnotationSelected(annotation.annotationUID))
+    }
+    if (isAnnotationSelected(annotation.annotationUID)) {
       return AnnotationStyleStates.Selected;
+    }
 
     // Todo: make annotation lock api not to rely on the annotation itself
-    if (isAnnotationLocked(annotation)) return AnnotationStyleStates.Locked;
+    if (isAnnotationLocked(annotation)) {
+      return AnnotationStyleStates.Locked;
+    }
   }
 
   return AnnotationStyleStates.Default;

package/src/stateManagement/annotation/config/helpers.ts

@@ -15,8 +15,12 @@ function getHierarchalPropertyStyles(
   mode?: ToolModes
 ): string[] {
   const list = [`${property}`];
-  if (state) list.push(`${list[0]}${state}`);
-  if (mode) list.push(`${list[list.length - 1]}${mode}`);
+  if (state) {
+    list.push(`${list[0]}${state}`);
+  }
+  if (mode) {
+    list.push(`${list[list.length - 1]}${mode}`);
+  }
   return list;
 }
 

package/src/store/SynchronizerManager/Synchronizer.ts

@@ -205,6 +205,7 @@ class Synchronizer {
     }
 
     this._ignoreFiredEvents = true;
+    const promises = [];
     try {
       for (let i = 0; i < this._targetViewports.length; i++) {
         const targetViewport = this._targetViewports[i];
@@ -214,19 +215,26 @@ class Synchronizer {
         if (targetIsSource) {
           continue;
         }
-
-        this._eventHandler(
-          this,
-          sourceViewport,
-          targetViewport,
-          sourceEvent,
-          this._options
+        promises.push(
+          this._eventHandler(
+            this,
+            sourceViewport,
+            targetViewport,
+            sourceEvent,
+            this._options
+          )
         );
       }
     } catch (ex) {
       console.warn(`Synchronizer, for: ${this._eventName}`, ex);
     } finally {
-      this._ignoreFiredEvents = false;
+      if (promises.length) {
+        Promise.allSettled(promises).then(() => {
+          this._ignoreFiredEvents = false;
+        });
+      } else {
+        this._ignoreFiredEvents = false;
+      }
     }
   }
 

package/src/store/ToolGroupManager/ToolGroup.ts

@@ -2,6 +2,8 @@ import { MouseBindings, ToolModes } from '../../enums';
 import cloneDeep from 'lodash.clonedeep';
 import get from 'lodash.get';
 import {
+  triggerEvent,
+  eventTarget,
   getRenderingEngine,
   getRenderingEngines,
   getEnabledElementByIds,
@@ -9,13 +11,19 @@ import {
   utilities as csUtils,
 } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
-import { state } from '../index';
+import { Events } from '../../enums';
+import {
+  ToolActivatedEventDetail,
+  ToolModeChangedEventDetail,
+} from '../../types/EventTypes';
+import { ToolGroupManager, state } from '../index';
 import {
   IToolBinding,
   IToolClassReference,
   IToolGroup,
   SetToolBindingsType,
   ToolOptionsType,
+  ToolConfiguration,
 } from '../../types';
 
 import { MouseCursor, SVGMouseCursor } from '../../cursors';
@@ -69,7 +77,7 @@ export default class ToolGroup implements IToolGroup {
     const toolInstance = this._toolInstances[toolInstanceName];
     if (!toolInstance) {
       console.warn(
-        `'${toolInstanceName}' is not registered with this toolGroup.`
+        `'${toolInstanceName}' is not registered with this toolGroup (${this.id}).`
       );
       return;
     }
@@ -83,9 +91,9 @@ export default class ToolGroup implements IToolGroup {
    * to set the tool to be active or passive or in other states.
    *
    * @param toolName - string
-   * @param configuration - Tool configuration objects
+   * @param configuration - Tool configuration objects and a custom statistics calculator if needed
    */
-  addTool(toolName: string, configuration = {}): void {
+  addTool(toolName: string, configuration: ToolConfiguration = {}): void {
     const toolDefinition = state.tools[toolName];
     const hasToolName = typeof toolName !== 'undefined' && toolName !== '';
     const localToolInstance = this.toolOptions[toolName];
@@ -372,6 +380,15 @@ export default class ToolGroup implements IToolGroup {
       toolInstance.onSetToolActive();
     }
     this._renderViewports();
+
+    const eventDetail: ToolActivatedEventDetail = {
+      toolGroupId: this.id,
+      toolName,
+      toolBindingsOptions,
+    };
+
+    triggerEvent(eventTarget, Events.TOOL_ACTIVATED, eventDetail);
+    this._triggerToolModeChangedEvent(toolName, Active, toolBindingsOptions);
   }
 
   /**
@@ -427,6 +444,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);
   }
 
   /**
@@ -460,6 +484,7 @@ export default class ToolGroup implements IToolGroup {
     }
 
     this._renderViewports();
+    this._triggerToolModeChangedEvent(toolName, Enabled);
   }
 
   /**
@@ -492,6 +517,7 @@ export default class ToolGroup implements IToolGroup {
       toolInstance.onSetToolDisabled();
     }
     this._renderViewports();
+    this._triggerToolModeChangedEvent(toolName, Disabled);
   }
 
   /**
@@ -593,7 +619,7 @@ export default class ToolGroup implements IToolGroup {
    */
   public setToolConfiguration(
     toolName: string,
-    configuration: Record<any, any>,
+    configuration: ToolConfiguration,
     overwrite?: boolean
   ): boolean {
     if (this._toolInstances[toolName] === undefined) {
@@ -608,7 +634,10 @@ export default class ToolGroup implements IToolGroup {
     if (overwrite) {
       _configuration = configuration;
     } else {
-      _configuration = csUtils.deepMerge(
+      // We should not deep copy here, it is the job of the application to
+      // deep copy the configuration before passing it to the toolGroup, otherwise
+      // some strange appending behaviour happens for the arrays
+      _configuration = Object.assign(
         this._toolInstances[toolName].configuration,
         configuration
       );
@@ -653,6 +682,49 @@ export default class ToolGroup implements IToolGroup {
     return cloneDeep(_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;
+  }
+
   /**
    * Check if the tool binding is set to be primary mouse button.
    * @param toolOptions - The options for the tool mode.
@@ -676,6 +748,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/ToolGroupManager/getToolGroupsWithToolName.ts

@@ -15,7 +15,9 @@ function getToolGroupsWithToolName(toolName: string): IToolGroup[] | [] {
     const toolGroupToolNames = Object.keys(toolOptions);
 
     for (let i = 0; i < toolGroupToolNames.length; i++) {
-      if (toolName !== toolGroupToolNames[i]) continue;
+      if (toolName !== toolGroupToolNames[i]) {
+        continue;
+      }
 
       /* filter out tools that don't have options */
       if (!toolOptions[toolName]) {

package/src/synchronizers/callbacks/stackImageSyncCallback.ts

@@ -1,4 +1,4 @@
-import { vec3 } from 'gl-matrix';
+import { vec3, mat4 } from 'gl-matrix';
 import {
   getRenderingEngine,
   Types,
@@ -8,28 +8,27 @@ import {
 import { Synchronizer } from '../../store';
 import { jumpToSlice } from '../../utilities';
 import areViewportsCoplanar from './areViewportsCoplanar ';
+
+const getSpatialRegistration = (targetId, sourceId) =>
+  utilities.spatialRegistrationMetadataProvider.get(
+    'spatialRegistrationModule',
+    [targetId, sourceId]
+  );
+
 /**
  * Synchronizer callback to synchronize the source viewport image to the
- * target viewports closest image in its stack. There are two scenarios
+ * target viewports closest image in its stack.
  *
- * 1) viewports are in the same frameOfReferenceUID then we can use the
- * absolute imagePositionPatient for the source viewport's current image
- * and set the target viewport's image to the closest image in its stack
- * (which might have different slice thickness so cannot use slice number)
+ * This synchronizer does a setup (which can already be predefined as required)
+ * to register the target and soruce viewports.  The registration will default
+ * to the identity registration if the same FOR is present in both viewports,
+ * unless the option `useInitialPosition` is set in the target viewport.
  *
- * 2) viewports have different frameOfReferenceUIDs then we look inside the
- * registrationMetadataProvider to check if there is a corresponding matrix
- * for mapping between the source and target viewport if so it is used to
- * and is applied to the imagePositionPatient of the source viewport's to
- * get the imagePositionPatient of the target viewport's closest image in
- * its stack.
- * Note for 2) The consuming apps using Cornerstone3D (OHIF, etc) are responsible
- * to provide such data in the registrationMetadataProvider. This can be done
+ * The consuming apps using Cornerstone3D (OHIF, etc) MAY provide such data in
+ * the registrationMetadataProvider to override the data here. This can be done
  * by various methods 1) Using spatialRegistrationModule inside dicom 2) assuming
  * the user has actually manually scrolled the target viewport to the correct
  * slice before initiating the synchronization 3) using some other method
- * But overall, the consuming app is responsible for providing the data.
- *
  *
  * @param synchronizerInstance - The Instance of the Synchronizer
  * @param sourceViewport - The list of IDs defining the source viewport.
@@ -53,13 +52,16 @@ export default async function stackImageSyncCallback(
     sourceViewport.viewportId
   ) as Types.IStackViewport;
 
+  const options = synchronizerInstance.getOptions(targetViewport.viewportId);
+
+  if (options?.disabled) {
+    return;
+  }
+
   const tViewport = renderingEngine.getViewport(
     targetViewport.viewportId
   ) as Types.IStackViewport;
 
-  const frameOfReferenceUID1 = sViewport.getFrameOfReferenceUID();
-  const frameOfReferenceUID2 = tViewport.getFrameOfReferenceUID();
-
   const imageId1 = sViewport.getCurrentImageId();
   const imagePlaneModule1 = metaData.get('imagePlaneModule', imageId1);
   const sourceImagePositionPatient = imagePlaneModule1.imagePositionPatient;
@@ -70,69 +72,62 @@ export default async function stackImageSyncCallback(
     return;
   }
 
-  if (frameOfReferenceUID1 === frameOfReferenceUID2) {
-    // if frames of references are the same we can use the absolute
-    // imagePositionPatient to find the closest image in the target viewport's stack
-    const closestImageIdIndex = _getClosestImageIdIndex(
-      sourceImagePositionPatient,
-      targetImageIds
-    );
+  // if the frame of reference is different we need to use the registrationMetadataProvider
+  // and add that to the imagePositionPatient of the source viewport to get the
+  // imagePositionPatient of the target viewport's closest image in its stack
+  let registrationMatrixMat4 = getSpatialRegistration(
+    targetViewport.viewportId,
+    sourceViewport.viewportId
+  );
 
+  if (!registrationMatrixMat4) {
+    const frameOfReferenceUID1 = sViewport.getFrameOfReferenceUID();
+    const frameOfReferenceUID2 = tViewport.getFrameOfReferenceUID();
     if (
-      closestImageIdIndex.index !== -1 &&
-      tViewport.getCurrentImageIdIndex() !== closestImageIdIndex.index
+      frameOfReferenceUID1 === frameOfReferenceUID2 &&
+      options?.useInitialPosition !== false
     ) {
-      // await tViewport.setImageIdIndex(closestImageIdIndex.index);
-      await jumpToSlice(tViewport.element, {
-        imageIndex: closestImageIdIndex.index,
-      });
-
-      return;
-    }
-  } else {
-    // if the frame of reference is different we need to use the registrationMetadataProvider
-    // and add that to the imagePositionPatient of the source viewport to get the
-    // imagePositionPatient of the target viewport's closest image in its stack
-    const registrationMatrixMat4 =
-      utilities.spatialRegistrationMetadataProvider.get(
-        'spatialRegistrationModule',
-        [targetViewport.viewportId, sourceViewport.viewportId]
+      registrationMatrixMat4 = mat4.identity(mat4.create());
+    } else {
+      utilities.calculateViewportsSpatialRegistration(sViewport, tViewport);
+      registrationMatrixMat4 = getSpatialRegistration(
+        targetViewport.viewportId,
+        sourceViewport.viewportId
       );
-
+    }
     if (!registrationMatrixMat4) {
-      throw new Error(
-        `No registration matrix found for sourceViewport: ${sourceViewport.viewportId} and targetViewport: ${targetViewport.viewportId}, viewports with different frameOfReferenceUIDs must have a registration matrix in the registrationMetadataProvider. Use calculateViewportsRegistrationMatrix to calculate the matrix.`
-      );
+      return;
     }
+  }
 
-    // apply the registration matrix to the source viewport's imagePositionPatient
-    // to get the target viewport's imagePositionPatient
-    const targetImagePositionPatientWithRegistrationMatrix = vec3.transformMat4(
-      vec3.create(),
-      sourceImagePositionPatient,
-      registrationMatrixMat4
-    );
+  // apply the registration matrix to the source viewport's imagePositionPatient
+  // to get the target viewport's imagePositionPatient
+  const targetImagePositionPatientWithRegistrationMatrix = vec3.transformMat4(
+    vec3.create(),
+    sourceImagePositionPatient,
+    registrationMatrixMat4
+  );
 
-    // find the closest image in the target viewport's stack to the
-    // targetImagePositionPatientWithRegistrationMatrix
-    const closestImageIdIndex2 = _getClosestImageIdIndex(
-      targetImagePositionPatientWithRegistrationMatrix,
-      targetImageIds
-    );
+  // find the closest image in the target viewport's stack to the
+  // targetImagePositionPatientWithRegistrationMatrix
+  const closestImageIdIndex2 = _getClosestImageIdIndex(
+    targetImagePositionPatientWithRegistrationMatrix,
+    targetImageIds
+  );
 
-    if (
-      closestImageIdIndex2.index !== -1 &&
-      tViewport.getCurrentImageIdIndex() !== closestImageIdIndex2.index
-    ) {
-      await jumpToSlice(tViewport.element, {
-        imageIndex: closestImageIdIndex2.index,
-      });
-    }
+  if (
+    closestImageIdIndex2.index !== -1 &&
+    tViewport.getCurrentImageIdIndex() !== closestImageIdIndex2.index
+  ) {
+    await jumpToSlice(tViewport.element, {
+      imageIndex: closestImageIdIndex2.index,
+    });
   }
 }
 
 function _getClosestImageIdIndex(targetPoint, imageIds) {
   // todo: this does not assume orientation yet, but that can be added later
+  // todo: handle multiframe images
   return imageIds.reduce(
     (closestImageIdIndex, imageId, index) => {
       const { imagePositionPatient } = metaData.get(

package/src/synchronizers/callbacks/voiSyncCallback.ts

@@ -39,7 +39,7 @@ export default function voiSyncCallback(
     voiRange: range,
   };
 
-  if (options.syncInvertState && invertStateChanged) {
+  if (options?.syncInvertState && invertStateChanged) {
     tProperties.invert = invert;
   }