@cornerstonejs/tools 1.12.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "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": "^1.12.0",
+    "@cornerstonejs/core": "^1.13.0",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
@@ -52,5 +52,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "a97d174f00bc561ade811652f0167f3d783b1927"
+  "gitHead": "64173701acdeb7097e6ae4122606138065ebcecc"
 }

package/src/eventListeners/keyboard/keyDownListener.ts

@@ -64,11 +64,23 @@ function keyListener(evt: KeyboardEvent): void {
   triggerEvent(eventDetail.element, Events.KEY_DOWN, eventDetail);
 
   document.addEventListener('keyup', _onKeyUp);
+  document.addEventListener('visibilitychange', _onVisibilityChange);
 
   // Todo: handle combination of keys
   state.element.removeEventListener('keydown', keyListener);
 }
 
+/**
+ * Whenever the visibility (i.e. tab focus) changes such that the tab is NOT the
+ * active tab, reset the modifier key.
+ */
+function _onVisibilityChange(): void {
+  document.removeEventListener('visibilitychange', _onVisibilityChange);
+  if (document.visibilityState === 'hidden') {
+    resetModifierKey();
+  }
+}
+
 function _onKeyUp(evt: KeyboardEvent): void {
   const eventDetail: KeyUpEventDetail = {
     renderingEngineId: state.renderingEngineId,
@@ -81,6 +93,7 @@ function _onKeyUp(evt: KeyboardEvent): void {
 
   // Remove our temporary handlers
   document.removeEventListener('keyup', _onKeyUp);
+  document.removeEventListener('visibilitychange', _onVisibilityChange);
   state.element.addEventListener('keydown', keyListener);
 
   // Restore `state` to `defaultState`

package/src/store/ToolGroupManager/ToolGroup.ts

@@ -20,6 +20,7 @@ import {
   IToolGroup,
   SetToolBindingsType,
   ToolOptionsType,
+  ToolConfiguration,
 } from '../../types';
 
 import { MouseCursor, SVGMouseCursor } from '../../cursors';
@@ -87,9 +88,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];
@@ -605,7 +606,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) {

package/src/tools/annotation/AngleTool.ts

@@ -74,6 +74,7 @@ class AngleTool extends AnnotationTool {
       configuration: {
         shadow: true,
         preventHandleOutsideImage: false,
+        getTextLines: defaultGetTextLines,
       },
     }
   ) {
@@ -744,7 +745,7 @@ class AngleTool extends AnnotationTool {
         continue;
       }
 
-      const textLines = this._getTextLines(data, targetId);
+      const textLines = this.configuration.getTextLines(data, targetId);
 
       if (!data.handles.textBox.hasMoved) {
         // linked to the vertex by default
@@ -783,20 +784,6 @@ class AngleTool extends AnnotationTool {
     return renderStatus;
   };
 
-  // text line for the current active angle annotation
-  _getTextLines(data, targetId) {
-    const cachedVolumeStats = data.cachedStats[targetId];
-    const { angle } = cachedVolumeStats;
-
-    if (angle === undefined) {
-      return;
-    }
-
-    const textLines = [`${roundNumber(angle)} ${String.fromCharCode(176)}`];
-
-    return textLines;
-  }
-
   _calculateCachedStats(annotation, renderingEngine, enabledElement) {
     const data = annotation.data;
     const { viewportId, renderingEngineId } = enabledElement;
@@ -841,5 +828,18 @@ class AngleTool extends AnnotationTool {
   }
 }
 
+function defaultGetTextLines(data, targetId): string[] {
+  const cachedVolumeStats = data.cachedStats[targetId];
+  const { angle } = cachedVolumeStats;
+
+  if (angle === undefined) {
+    return;
+  }
+
+  const textLines = [`${roundNumber(angle)} ${String.fromCharCode(176)}`];
+
+  return textLines;
+}
+
 AngleTool.toolName = 'Angle';
 export default AngleTool;

package/src/tools/annotation/BidirectionalTool.ts

@@ -91,6 +91,7 @@ const { transformWorldToIndex } = csUtils;
  *
  * Read more in the Docs section of the website.
  */
+
 class BidirectionalTool extends AnnotationTool {
   static toolName;
 
@@ -115,6 +116,7 @@ class BidirectionalTool extends AnnotationTool {
       supportedInteractionTypes: ['Mouse', 'Touch'],
       configuration: {
         preventHandleOutsideImage: false,
+        getTextLines: defaultGetTextLines,
       },
     }
   ) {
@@ -1160,7 +1162,7 @@ class BidirectionalTool extends AnnotationTool {
 
       renderStatus = true;
 
-      const textLines = this._getTextLines(data, targetId);
+      const textLines = this.configuration.getTextLines(data, targetId);
 
       if (!textLines || textLines.length === 0) {
         continue;
@@ -1243,27 +1245,6 @@ class BidirectionalTool extends AnnotationTool {
     return wouldPutThroughShortAxis;
   };
 
-  /**
-   * get text box content
-   */
-  _getTextLines = (data, targetId) => {
-    const { cachedStats } = data;
-    const { length, width, unit } = cachedStats[targetId];
-
-    if (length === undefined) {
-      return;
-    }
-
-    // spaceBetweenSlices & pixelSpacing &
-    // magnitude in each direction? Otherwise, this is "px"?
-    const textLines = [
-      `L: ${roundNumber(length)} ${unit}`,
-      `W: ${roundNumber(width)} ${unit}`,
-    ];
-
-    return textLines;
-  };
-
   _calculateLength(pos1, pos2) {
     const dx = pos1[0] - pos2[0];
     const dy = pos1[1] - pos2[1];
@@ -1351,5 +1332,23 @@ class BidirectionalTool extends AnnotationTool {
   };
 }
 
+function defaultGetTextLines(data, targetId): string[] {
+  const { cachedStats } = data;
+  const { length, width, unit } = cachedStats[targetId];
+
+  if (length === undefined) {
+    return;
+  }
+
+  // spaceBetweenSlices & pixelSpacing &
+  // magnitude in each direction? Otherwise, this is "px"?
+  const textLines = [
+    `L: ${roundNumber(length)} ${unit}`,
+    `W: ${roundNumber(width)} ${unit}`,
+  ];
+
+  return textLines;
+}
+
 BidirectionalTool.toolName = 'Bidirectional';
 export default BidirectionalTool;

package/src/tools/annotation/CircleROITool.ts

@@ -68,6 +68,7 @@ import {
   getCanvasCircleRadius,
 } from '../../utilities/math/circle';
 import { pointInEllipse } from '../../utilities/math/ellipse';
+import { BasicStatsCalculator } from '../../utilities/math/basic';
 
 const { transformWorldToIndex } = csUtils;
 
@@ -117,8 +118,10 @@ const { transformWorldToIndex } = csUtils;
  *
  * Read more in the Docs section of the website.
  */
+
 class CircleROITool extends AnnotationTool {
   static toolName;
+
   touchDragCallback: any;
   mouseDragCallback: any;
   _throttledCalculateCachedStats: any;
@@ -143,6 +146,8 @@ class CircleROITool extends AnnotationTool {
         // Radius of the circle to draw  at the center point of the circle.
         // Set this zero(0) in order not to draw the circle.
         centerPointRadius: 0,
+        getTextLines: defaultGetTextLines,
+        statsCalculator: BasicStatsCalculator,
       },
     }
   ) {
@@ -821,7 +826,7 @@ class CircleROITool extends AnnotationTool {
 
       renderStatus = true;
 
-      const textLines = this._getTextLines(data, targetId);
+      const textLines = this.configuration.getTextLines(data, targetId);
       if (!textLines || textLines.length === 0) {
         continue;
       }
@@ -865,52 +870,6 @@ class CircleROITool extends AnnotationTool {
     return renderStatus;
   };
 
-  _getTextLines = (data, targetId: string): string[] => {
-    const cachedVolumeStats = data.cachedStats[targetId];
-    const {
-      radius,
-      radiusUnit,
-      area,
-      mean,
-      stdDev,
-      max,
-      isEmptyArea,
-      Modality,
-      areaUnit,
-      modalityUnit,
-    } = cachedVolumeStats;
-
-    const textLines: string[] = [];
-
-    if (radius) {
-      const radiusLine = isEmptyArea
-        ? `Radius: Oblique not supported`
-        : `Radius: ${roundNumber(radius)} ${radiusUnit}`;
-      textLines.push(radiusLine);
-    }
-
-    if (area) {
-      const areaLine = isEmptyArea
-        ? `Area: Oblique not supported`
-        : `Area: ${roundNumber(area)} ${areaUnit}`;
-      textLines.push(areaLine);
-    }
-
-    if (mean) {
-      textLines.push(`Mean: ${roundNumber(mean)} ${modalityUnit}`);
-    }
-
-    if (max) {
-      textLines.push(`Max: ${roundNumber(max)} ${modalityUnit}`);
-    }
-
-    if (stdDev) {
-      textLines.push(`Std Dev: ${roundNumber(stdDev)} ${modalityUnit}`);
-    }
-
-    return textLines;
-  };
-
   _calculateCachedStats = (
     annotation,
     viewport,
@@ -1011,57 +970,29 @@ class CircleROITool extends AnnotationTool {
             (worldHeight / aspect / scale / 2)
         );
 
-        let count = 0;
-        let mean = 0;
-        let stdDev = 0;
-        let max = -Infinity;
-
-        const meanMaxCalculator = ({ value: newValue }) => {
-          if (newValue > max) {
-            max = newValue;
-          }
-
-          mean += newValue;
-          count += 1;
-        };
-
-        pointInShapeCallback(
-          imageData,
-          (pointLPS, pointIJK) => pointInEllipse(ellipseObj, pointLPS),
-          meanMaxCalculator,
-          boundsIJK
+        const modalityUnit = getModalityUnit(
+          metadata.Modality,
+          annotation.metadata.referencedImageId,
+          modalityUnitOptions
         );
 
-        mean /= count;
-
-        const stdCalculator = ({ value }) => {
-          const valueMinusMean = value - mean;
-
-          stdDev += valueMinusMean * valueMinusMean;
-        };
-
-        pointInShapeCallback(
+        const pointsInShape = pointInShapeCallback(
           imageData,
           (pointLPS, pointIJK) => pointInEllipse(ellipseObj, pointLPS),
-          stdCalculator,
+          this.configuration.statsCalculator.statsCallback,
           boundsIJK
         );
 
-        stdDev /= count;
-        stdDev = Math.sqrt(stdDev);
-
-        const modalityUnit = getModalityUnit(
-          metadata.Modality,
-          annotation.metadata.referencedImageId,
-          modalityUnitOptions
-        );
+        const stats = this.configuration.statsCalculator.getStatistics();
 
         cachedStats[targetId] = {
           Modality: metadata.Modality,
           area,
-          mean,
-          max,
-          stdDev,
+          mean: stats[1]?.value,
+          max: stats[0]?.value,
+          stdDev: stats[2]?.value,
+          statsArray: stats,
+          pointsInShape: pointsInShape,
           isEmptyArea,
           areaUnit: getCalibratedAreaUnits(null, image),
           radius: worldWidth / 2 / scale,
@@ -1102,5 +1033,51 @@ class CircleROITool extends AnnotationTool {
   };
 }
 
+function defaultGetTextLines(data, targetId): string[] {
+  const cachedVolumeStats = data.cachedStats[targetId];
+  const {
+    radius,
+    radiusUnit,
+    area,
+    mean,
+    stdDev,
+    max,
+    isEmptyArea,
+    Modality,
+    areaUnit,
+    modalityUnit,
+  } = cachedVolumeStats;
+
+  const textLines: string[] = [];
+
+  if (radius) {
+    const radiusLine = isEmptyArea
+      ? `Radius: Oblique not supported`
+      : `Radius: ${roundNumber(radius)} ${radiusUnit}`;
+    textLines.push(radiusLine);
+  }
+
+  if (area) {
+    const areaLine = isEmptyArea
+      ? `Area: Oblique not supported`
+      : `Area: ${roundNumber(area)} ${areaUnit}`;
+    textLines.push(areaLine);
+  }
+
+  if (mean) {
+    textLines.push(`Mean: ${roundNumber(mean)} ${modalityUnit}`);
+  }
+
+  if (max) {
+    textLines.push(`Max: ${roundNumber(max)} ${modalityUnit}`);
+  }
+
+  if (stdDev) {
+    textLines.push(`Std Dev: ${roundNumber(stdDev)} ${modalityUnit}`);
+  }
+
+  return textLines;
+}
+
 CircleROITool.toolName = 'CircleROI';
 export default CircleROITool;

package/src/tools/annotation/CobbAngleTool.ts

@@ -75,6 +75,7 @@ class CobbAngleTool extends AnnotationTool {
       configuration: {
         shadow: true,
         preventHandleOutsideImage: false,
+        getTextLines: defaultGetTextLines,
       },
     }
   ) {
@@ -769,7 +770,7 @@ class CobbAngleTool extends AnnotationTool {
         continue;
       }
 
-      const textLines = this._getTextLines(data, targetId);
+      const textLines = this.configuration.getTextLines(data, targetId);
 
       if (!data.handles.textBox.hasMoved) {
         const canvasTextBoxCoords = getTextBoxCoordsCanvas(canvasCoordinates);
@@ -807,20 +808,6 @@ class CobbAngleTool extends AnnotationTool {
     return renderStatus;
   };
 
-  // text line for the current active angle annotation
-  _getTextLines(data, targetId) {
-    const cachedVolumeStats = data.cachedStats[targetId];
-    const { angle } = cachedVolumeStats;
-
-    if (angle === undefined) {
-      return;
-    }
-
-    const textLines = [`${angle.toFixed(2)} ${String.fromCharCode(176)}`];
-
-    return textLines;
-  }
-
   _calculateCachedStats(annotation, renderingEngine, enabledElement) {
     const data = annotation.data;
     const { viewportId, renderingEngineId } = enabledElement;
@@ -886,5 +873,18 @@ class CobbAngleTool extends AnnotationTool {
   }
 }
 
+function defaultGetTextLines(data, targetId): string[] {
+  const cachedVolumeStats = data.cachedStats[targetId];
+  const { angle } = cachedVolumeStats;
+
+  if (angle === undefined) {
+    return;
+  }
+
+  const textLines = [`${angle.toFixed(2)} ${String.fromCharCode(176)}`];
+
+  return textLines;
+}
+
 CobbAngleTool.toolName = 'CobbAngle';
 export default CobbAngleTool;

package/src/tools/annotation/DragProbeTool.ts

@@ -44,6 +44,7 @@ class DragProbeTool extends ProbeTool {
       configuration: {
         shadow: true,
         preventHandleOutsideImage: false,
+        getTextLines: defaultGetTextLines,
       },
     }
   ) {
@@ -205,7 +206,7 @@ class DragProbeTool extends ProbeTool {
 
     renderStatus = true;
 
-    const textLines = this._getTextLines(data, targetId);
+    const textLines = this.configuration.getTextLines(data, targetId);
     if (textLines) {
       const textCanvasCoordinates = [
         canvasCoordinates[0] + 6,
@@ -227,5 +228,22 @@ class DragProbeTool extends ProbeTool {
   };
 }
 
+function defaultGetTextLines(data, targetId): string[] {
+  const cachedVolumeStats = data.cachedStats[targetId];
+  const { index, value, modalityUnit } = cachedVolumeStats;
+
+  if (value === undefined) {
+    return;
+  }
+
+  const textLines = [];
+
+  textLines.push(`(${index[0]}, ${index[1]}, ${index[2]})`);
+
+  textLines.push(`${value.toFixed(2)} ${modalityUnit}`);
+
+  return textLines;
+}
+
 DragProbeTool.toolName = 'DragProbe';
 export default DragProbeTool;

package/src/tools/annotation/EllipticalROITool.ts

@@ -66,6 +66,7 @@ import {
   getModalityUnit,
 } from '../../utilities/getModalityUnit';
 import { isViewportPreScaled } from '../../utilities/viewport/isViewportPreScaled';
+import { BasicStatsCalculator } from '../../utilities/math/basic';
 
 const { transformWorldToIndex } = csUtils;
 
@@ -115,8 +116,10 @@ const { transformWorldToIndex } = csUtils;
  *
  * Read more in the Docs section of the website.
  */
+
 class EllipticalROITool extends AnnotationTool {
   static toolName;
+
   touchDragCallback: any;
   mouseDragCallback: any;
   _throttledCalculateCachedStats: any;
@@ -145,6 +148,8 @@ class EllipticalROITool extends AnnotationTool {
         // Radius of the circle to draw  at the center point of the ellipse.
         // Set this zero(0) in order not to draw the circle.
         centerPointRadius: 0,
+        getTextLines: defaultGetTextLines,
+        statsCalculator: BasicStatsCalculator,
       },
     }
   ) {
@@ -945,7 +950,7 @@ class EllipticalROITool extends AnnotationTool {
 
       renderStatus = true;
 
-      const textLines = this._getTextLines(data, targetId);
+      const textLines = this.configuration.getTextLines(data, targetId);
       if (!textLines || textLines.length === 0) {
         continue;
       }
@@ -989,35 +994,6 @@ class EllipticalROITool extends AnnotationTool {
     return renderStatus;
   };
 
-  _getTextLines = (data, targetId: string): string[] => {
-    const cachedVolumeStats = data.cachedStats[targetId];
-    const { area, mean, stdDev, max, isEmptyArea, areaUnit, modalityUnit } =
-      cachedVolumeStats;
-
-    const textLines: string[] = [];
-
-    if (area) {
-      const areaLine = isEmptyArea
-        ? `Area: Oblique not supported`
-        : `Area: ${roundNumber(area)} ${areaUnit}`;
-      textLines.push(areaLine);
-    }
-
-    if (mean) {
-      textLines.push(`Mean: ${roundNumber(mean)} ${modalityUnit}`);
-    }
-
-    if (max) {
-      textLines.push(`Max: ${roundNumber(max)} ${modalityUnit}`);
-    }
-
-    if (stdDev) {
-      textLines.push(`Std Dev: ${roundNumber(stdDev)} ${modalityUnit}`);
-    }
-
-    return textLines;
-  };
-
   _calculateCachedStats = (
     annotation,
     viewport,
@@ -1116,57 +1092,29 @@ class EllipticalROITool extends AnnotationTool {
           scale /
           scale;
 
-        let count = 0;
-        let mean = 0;
-        let stdDev = 0;
-        let max = -Infinity;
-
-        const meanMaxCalculator = ({ value: newValue }) => {
-          if (newValue > max) {
-            max = newValue;
-          }
-
-          mean += newValue;
-          count += 1;
-        };
-
-        pointInShapeCallback(
-          imageData,
-          (pointLPS, pointIJK) => pointInEllipse(ellipseObj, pointLPS),
-          meanMaxCalculator,
-          boundsIJK
+        const modalityUnit = getModalityUnit(
+          metadata.Modality,
+          annotation.metadata.referencedImageId,
+          modalityUnitOptions
         );
 
-        mean /= count;
-
-        const stdCalculator = ({ value }) => {
-          const valueMinusMean = value - mean;
-
-          stdDev += valueMinusMean * valueMinusMean;
-        };
-
-        pointInShapeCallback(
+        const pointsInShape = pointInShapeCallback(
           imageData,
           (pointLPS, pointIJK) => pointInEllipse(ellipseObj, pointLPS),
-          stdCalculator,
+          this.configuration.statsCalculator.statsCallback,
           boundsIJK
         );
 
-        stdDev /= count;
-        stdDev = Math.sqrt(stdDev);
-
-        const modalityUnit = getModalityUnit(
-          metadata.Modality,
-          annotation.metadata.referencedImageId,
-          modalityUnitOptions
-        );
+        const stats = this.configuration.statsCalculator.getStatistics();
 
         cachedStats[targetId] = {
           Modality: metadata.Modality,
           area,
-          mean,
-          max,
-          stdDev,
+          mean: stats[1]?.value,
+          max: stats[0]?.value,
+          stdDev: stats[2]?.value,
+          statsArray: stats,
+          pointsInShape: pointsInShape,
           isEmptyArea,
           areaUnit: getCalibratedAreaUnits(null, image),
           modalityUnit,
@@ -1248,5 +1196,34 @@ class EllipticalROITool extends AnnotationTool {
   }
 }
 
+function defaultGetTextLines(data, targetId): string[] {
+  const cachedVolumeStats = data.cachedStats[targetId];
+  const { area, mean, stdDev, max, isEmptyArea, areaUnit, modalityUnit } =
+    cachedVolumeStats;
+
+  const textLines: string[] = [];
+
+  if (area) {
+    const areaLine = isEmptyArea
+      ? `Area: Oblique not supported`
+      : `Area: ${roundNumber(area)} ${areaUnit}`;
+    textLines.push(areaLine);
+  }
+
+  if (mean) {
+    textLines.push(`Mean: ${roundNumber(mean)} ${modalityUnit}`);
+  }
+
+  if (max) {
+    textLines.push(`Max: ${roundNumber(max)} ${modalityUnit}`);
+  }
+
+  if (stdDev) {
+    textLines.push(`Std Dev: ${roundNumber(stdDev)} ${modalityUnit}`);
+  }
+
+  return textLines;
+}
+
 EllipticalROITool.toolName = 'EllipticalROI';
 export default EllipticalROITool;