@cornerstonejs/tools 1.35.2 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.35.2",
+  "version": "1.36.0",
   "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.35.2",
+    "@cornerstonejs/core": "^1.36.0",
     "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": "323d50dd5e96fd476514db0cd2b62d526d480de0"
+  "gitHead": "616ef6915f122cab6d1e27e2d02ebc95484a4e37"
 }

package/src/drawingSvg/drawEllipse.ts

@@ -2,8 +2,7 @@ import type { Types } from '@cornerstonejs/core';
 import { SVGDrawingHelper } from '../types';
 
 import _getHash from './_getHash';
-import setAttributesIfNecessary from './setAttributesIfNecessary';
-import setNewAttributesIfValid from './setNewAttributesIfValid';
+import drawEllipseByCoordinates from './drawEllipseByCoordinates';
 
 function drawEllipse(
   svgDrawingHelper: SVGDrawingHelper,
@@ -13,59 +12,20 @@ function drawEllipse(
   corner2: Types.Point2,
   options = {},
   dataId = ''
-): void {
-  const { color, width, lineWidth, lineDash } = Object.assign(
-    {
-      color: 'dodgerblue',
-      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, 'ellipse', ellipseUID);
-  const existingEllipse = svgDrawingHelper.getSvgNode(svgNodeHash);
-
-  const w = Math.abs(corner1[0] - corner2[0]);
-  const h = Math.abs(corner1[1] - corner2[1]);
-  const xMin = Math.min(corner1[0], corner2[0]);
-  const yMin = Math.min(corner1[1], corner2[1]);
-
-  const center = [xMin + w / 2, yMin + h / 2];
-  const radiusX = w / 2;
-  const radiusY = h / 2;
-
-  const attributes = {
-    cx: `${center[0]}`,
-    cy: `${center[1]}`,
-    rx: `${radiusX}`,
-    ry: `${radiusY}`,
-    stroke: color,
-    fill: 'transparent',
-    'stroke-width': strokeWidth,
-    'stroke-dasharray': lineDash,
-  };
-
-  if (existingEllipse) {
-    setAttributesIfNecessary(attributes, existingEllipse);
-
-    svgDrawingHelper.setNodeTouched(svgNodeHash);
-  } else {
-    const svgEllipseElement = document.createElementNS(svgns, 'ellipse');
-
-    if (dataId !== '') {
-      svgEllipseElement.setAttribute('data-id', dataId);
-    }
-
-    setNewAttributesIfValid(attributes, svgEllipseElement);
-
-    svgDrawingHelper.appendNode(svgEllipseElement, svgNodeHash);
-  }
+){
+  const top: Types.Point2 = [ (corner1[0] + corner2[0]) / 2, corner1[1] ];
+  const bottom: Types.Point2 = [ (corner1[0] + corner2[0]) / 2, corner2[1] ];
+  const left: Types.Point2 = [ corner1[0], (corner1[1] + corner2[1]) / 2];
+  const right: Types.Point2 = [ corner2[0], (corner1[1] + corner2[1]) / 2];
+
+  drawEllipseByCoordinates(
+    svgDrawingHelper,
+    annotationUID,
+    ellipseUID,
+    [bottom, top, left, right],
+    options = {},
+    dataId = ''
+  )
 }
 
 export default drawEllipse;

package/src/drawingSvg/drawEllipseByCoordinates.ts

@@ -0,0 +1,73 @@
+2
+import type { Types } from '@cornerstonejs/core';
+import { SVGDrawingHelper } from '../types';
+
+import _getHash from './_getHash';
+import setAttributesIfNecessary from './setAttributesIfNecessary';
+import setNewAttributesIfValid from './setNewAttributesIfValid';
+
+function drawEllipseByCoordinates(
+  svgDrawingHelper: SVGDrawingHelper,
+  annotationUID: string,
+  ellipseUID: string,
+  canvasCoordinates: [Types.Point2, Types.Point2, Types.Point2, Types.Point2],
+  options = {},
+  dataId = ''
+): void {
+  const { color, width, lineWidth, lineDash } = Object.assign(
+    {
+      color: 'dodgerblue',
+      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, 'ellipse', ellipseUID);
+  const existingEllipse = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+  const [bottom, top, left, right] = canvasCoordinates;
+
+  const w = Math.hypot(left[0] - right[0], left[1] - right[1]);
+  const h = Math.hypot(top[0] - bottom[0], top[1] - bottom[1]);
+  const angle = Math.atan2(left[1] - right[1], left[0] - right[0]) * 180 / Math.PI;
+
+  const center = [(left[0] + right[0]) / 2 , ( top[1] + bottom[1] ) / 2];
+  const radiusX = w / 2;
+  const radiusY = h / 2;
+
+  const attributes = {
+    cx: `${center[0]}`,
+    cy: `${center[1]}`,
+    rx: `${radiusX}`,
+    ry: `${radiusY}`,
+    stroke: color,
+    fill: 'transparent',
+    'transform': `rotate(${angle} ${center[0]} ${center[1]})`,
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': lineDash,
+  };
+
+  if (existingEllipse) {
+    setAttributesIfNecessary(attributes, existingEllipse);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const svgEllipseElement = document.createElementNS(svgns, 'ellipse');
+
+    if (dataId !== '') {
+      svgEllipseElement.setAttribute('data-id', dataId);
+    }
+
+    setNewAttributesIfValid(attributes, svgEllipseElement);
+
+    svgDrawingHelper.appendNode(svgEllipseElement, svgNodeHash);
+  }
+}
+
+export default drawEllipseByCoordinates;

package/src/drawingSvg/index.ts

@@ -1,6 +1,7 @@
 import draw from './draw';
 import drawCircle from './drawCircle';
 import drawEllipse from './drawEllipse';
+import drawEllipseByCoordinates from './drawEllipseByCoordinates';
 import drawHandles from './drawHandles';
 import drawLine from './drawLine';
 import drawPolyline from './drawPolyline';
@@ -16,6 +17,7 @@ export {
   draw,
   drawCircle,
   drawEllipse,
+  drawEllipseByCoordinates,
   drawHandles,
   drawLine,
   drawPolyline,

package/src/eventListeners/segmentation/imageChangeEventListener.ts

@@ -71,6 +71,11 @@ function _imageChangeEventListener(evt) {
   ) as { viewport: Types.IStackViewport };
 
   const toolGroup = getToolGroupForViewport(viewportId, renderingEngineId);
+
+  if (!toolGroup) {
+    return;
+  }
+
   let toolGroupSegmentationRepresentations =
     SegmentationState.getSegmentationRepresentations(toolGroup.id) || [];
 

package/src/stateManagement/segmentation/SegmentationStateManager.ts

@@ -1,13 +1,11 @@
-import { utilities as csUtils } from '@cornerstonejs/core';
 import cloneDeep from 'lodash.clonedeep';
-
-import CORNERSTONE_COLOR_LUT from '../../constants/COLOR_LUT';
+import type { Types } from '@cornerstonejs/core';
+import { utilities as csUtils } from '@cornerstonejs/core';
 
 import { SegmentationRepresentations } from '../../enums';
 import getDefaultContourConfig from '../../tools/displayTools/Contour/contourConfig';
 import getDefaultLabelmapConfig from '../../tools/displayTools/Labelmap/labelmapConfig';
 import type {
-  ColorLUT,
   RepresentationConfig,
   Segmentation,
   SegmentationRepresentationConfig,
@@ -77,10 +75,14 @@ export default class SegmentationStateManager {
    * @param lutIndex - The index of the color LUT to retrieve.
    * @returns A ColorLUT object.
    */
-  getColorLUT(lutIndex: number): ColorLUT | undefined {
+  getColorLUT(lutIndex: number): Types.ColorLUT | undefined {
     return this.state.colorLUT[lutIndex];
   }
 
+  getNextColorLUTIndex(): number {
+    return this.state.colorLUT.length;
+  }
+
   /**
    * Reset the state to the default state
    */
@@ -104,8 +106,6 @@ export default class SegmentationStateManager {
    * @param segmentation - Segmentation
    */
   addSegmentation(segmentation: Segmentation): void {
-    this._initDefaultColorLUTIfNecessary();
-
     // Check if the segmentation already exists with the segmentationId
     if (this.getSegmentation(segmentation.segmentationId)) {
       throw new Error(
@@ -433,12 +433,12 @@ export default class SegmentationStateManager {
    * @param colorLUT - ColorLUT
    * @param lutIndex - The index of the color LUT table to add.
    */
-  addColorLUT(colorLUT: ColorLUT, lutIndex: number): void {
+  addColorLUT(colorLUT: Types.ColorLUT, lutIndex: number): void {
     if (this.state.colorLUT[lutIndex]) {
-      console.log('Color LUT table already exists, overwriting');
+      console.warn('Color LUT table already exists, overwriting');
     }
 
-    this.state.colorLUT[lutIndex] = colorLUT;
+    this.state.colorLUT[lutIndex] = structuredClone(colorLUT);
   }
 
   /**
@@ -500,13 +500,6 @@ export default class SegmentationStateManager {
 
     // 5. if added/removed segmentation is is inactive, do nothing
   }
-
-  _initDefaultColorLUTIfNecessary() {
-    // if colorLUTTable is not specified or the default one is not found
-    if (this.state.colorLUT.length === 0 || !this.state.colorLUT[0]) {
-      this.addColorLUT(CORNERSTONE_COLOR_LUT as ColorLUT, 0);
-    }
-  }
 }
 
 const defaultSegmentationStateManager = new SegmentationStateManager('DEFAULT');

package/src/stateManagement/segmentation/addSegmentationRepresentation.ts

@@ -0,0 +1,86 @@
+import { utilities } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
+import {
+  SegmentationRepresentationConfig,
+  RepresentationPublicInput,
+  ToolGroupSpecificRepresentation,
+} from '../../types/SegmentationStateTypes';
+import Representations from '../../enums/SegmentationRepresentations';
+import * as SegmentationConfig from './config/segmentationConfig';
+import {
+  addSegmentationRepresentation as addSegmentationRepresentationToState,
+  getNextColorLUTIndex,
+  addColorLUT,
+} from './segmentationState';
+import { getRepresentationSpecificConfig } from './helpers/getRepresentationSpecificConfig';
+import CORNERSTONE_COLOR_LUT from '../../constants/COLOR_LUT';
+
+async function addSegmentationRepresentation(
+  toolGroupId: string,
+  representationInput: RepresentationPublicInput,
+  toolGroupSpecificConfig?: SegmentationRepresentationConfig
+): Promise<string> {
+  const { segmentationId, options = {} } = representationInput;
+  const segmentationRepresentationUID = utilities.uuidv4();
+
+  // Todo: make segmentsHidden also an option that can get passed by
+  // the user
+  const segmentsHidden = new Set() as Set<number>;
+
+  const colorLUTOrIndexInput = options.colorLUTOrIndex;
+  let colorLUTIndexToUse;
+
+  if (typeof colorLUTOrIndexInput === 'number') {
+    colorLUTIndexToUse = colorLUTOrIndexInput;
+  } else {
+    const nextIndex = getNextColorLUTIndex();
+    const colorLUTToAdd = Array.isArray(colorLUTOrIndexInput)
+      ? colorLUTOrIndexInput
+      : CORNERSTONE_COLOR_LUT;
+    addColorLUT(colorLUTToAdd as Types.ColorLUT, nextIndex);
+    colorLUTIndexToUse = nextIndex;
+  }
+
+  const toolGroupSpecificRepresentation: ToolGroupSpecificRepresentation = {
+    segmentationId,
+    segmentationRepresentationUID,
+    type: Representations.Labelmap,
+    segmentsHidden,
+    colorLUTIndex: colorLUTIndexToUse,
+    active: true,
+    segmentationRepresentationSpecificConfig: {},
+    segmentSpecificConfig: {},
+    config: getRepresentationSpecificConfig(representationInput),
+  };
+
+  // Update the toolGroup specific configuration
+  if (toolGroupSpecificConfig) {
+    // Since setting configuration on toolGroup will trigger a segmentationRepresentation
+    // update event, we don't want to trigger the event twice, so we suppress
+    // the first one
+    const currentToolGroupConfig =
+      SegmentationConfig.getToolGroupSpecificConfig(toolGroupId);
+
+    const mergedConfig = utilities.deepMerge(
+      currentToolGroupConfig,
+      toolGroupSpecificConfig
+    );
+
+    SegmentationConfig.setToolGroupSpecificConfig(toolGroupId, {
+      renderInactiveSegmentations:
+        mergedConfig.renderInactiveSegmentations || true,
+      representations: {
+        ...mergedConfig.representations,
+      },
+    });
+  }
+
+  addSegmentationRepresentationToState(
+    toolGroupId,
+    toolGroupSpecificRepresentation
+  );
+
+  return segmentationRepresentationUID;
+}
+
+export { addSegmentationRepresentation };

package/src/stateManagement/segmentation/addSegmentationRepresentations.ts

@@ -1,14 +1,10 @@
-import _cloneDeep from 'lodash.clonedeep';
 import {
   SegmentationRepresentationConfig,
   RepresentationPublicInput,
 } from '../../types/SegmentationStateTypes';
-import Representations from '../../enums/SegmentationRepresentations';
 import { getToolGroup } from '../../store/ToolGroupManager';
 
-import { labelmapDisplay } from '../../tools/displayTools/Labelmap';
-import { contourDisplay } from '../../tools/displayTools/Contour';
-import { surfaceDisplay } from '../../tools/displayTools/Surface';
+import { addSegmentationRepresentation } from './addSegmentationRepresentation';
 
 /**
  * Set the specified segmentation representations on the viewports of the specified
@@ -33,7 +29,7 @@ async function addSegmentationRepresentations(
   }
 
   const promises = representationInputArray.map((representationInput) => {
-    return _addSegmentationRepresentation(
+    return addSegmentationRepresentation(
       toolGroupId,
       representationInput,
       toolGroupSpecificRepresentationConfig
@@ -45,41 +41,4 @@ async function addSegmentationRepresentations(
   return segmentationRepresentationUIDs;
 }
 
-async function _addSegmentationRepresentation(
-  toolGroupId: string,
-  representationInput: RepresentationPublicInput,
-  toolGroupSpecificRepresentationConfig?: SegmentationRepresentationConfig
-): Promise<string> {
-  let segmentationRepresentationUID;
-
-  if (representationInput.type === Representations.Labelmap) {
-    segmentationRepresentationUID =
-      await labelmapDisplay.addSegmentationRepresentation(
-        toolGroupId,
-        representationInput,
-        toolGroupSpecificRepresentationConfig
-      );
-  } else if (representationInput.type === Representations.Contour) {
-    segmentationRepresentationUID =
-      await contourDisplay.addSegmentationRepresentation(
-        toolGroupId,
-        representationInput,
-        toolGroupSpecificRepresentationConfig
-      );
-  } else if (representationInput.type === Representations.Surface) {
-    segmentationRepresentationUID =
-      await surfaceDisplay.addSegmentationRepresentation(
-        toolGroupId,
-        representationInput,
-        toolGroupSpecificRepresentationConfig
-      );
-  } else {
-    throw new Error(
-      `The representation type ${representationInput.type} is not supported`
-    );
-  }
-
-  return segmentationRepresentationUID;
-}
-
 export default addSegmentationRepresentations;

package/src/stateManagement/segmentation/config/segmentationColor.ts

@@ -1,9 +1,7 @@
 import { utilities } from '@cornerstonejs/core';
+import type { Types } from '@cornerstonejs/core';
 import * as SegmentationState from '../../../stateManagement/segmentation/segmentationState';
-import { Color } from '../../../types/SegmentationStateTypes';
-import { ColorLUT } from '../../../types/SegmentationStateTypes';
 import { triggerSegmentationRepresentationModified } from '../triggerSegmentationEvents';
-import { SegmentationRepresentations } from '../../../enums';
 
 /**
  * addColorLUT - Adds a new color LUT to the state at the given colorLUTIndex.
@@ -13,7 +11,7 @@ import { SegmentationRepresentations } from '../../../enums';
  * @param colorLUT - An array of The colorLUT to set.
  * @returns
  */
-function addColorLUT(colorLUT: ColorLUT, colorLUTIndex: number): void {
+function addColorLUT(colorLUT: Types.ColorLUT, colorLUTIndex: number): void {
   if (!colorLUT) {
     throw new Error('addColorLUT: colorLUT is required');
   }
@@ -81,7 +79,7 @@ function getColorForSegmentIndex(
   toolGroupId: string,
   segmentationRepresentationUID: string,
   segmentIndex: number
-): Color {
+): Types.Color {
   const segmentationRepresentation =
     SegmentationState.getSegmentationRepresentationByUID(
       toolGroupId,
@@ -105,7 +103,7 @@ function setColorForSegmentIndex(
   toolGroupId: string,
   segmentationRepresentationUID: string,
   segmentIndex: number,
-  color: Color
+  color: Types.Color
 ): void {
   // Get the reference to the color in the colorLUT.
   const colorReference = getColorForSegmentIndex(

package/src/stateManagement/segmentation/helpers/getRepresentationSpecificConfig.ts

@@ -0,0 +1,15 @@
+import SegmentationRepresentations from '../../../enums/SegmentationRepresentations';
+import { RepresentationPublicInput } from '../../../types';
+import { getRepresentationRenderingConfig as getLabelmapRenderingConfig } from '../../../tools/displayTools/Labelmap/labelmapDisplay';
+
+export function getRepresentationSpecificConfig(
+  representationInput: RepresentationPublicInput
+) {
+  const { type } = representationInput;
+
+  if (type === SegmentationRepresentations.Labelmap) {
+    return getLabelmapRenderingConfig();
+  } else {
+    return {};
+  }
+}

package/src/stateManagement/segmentation/segmentationState.ts

@@ -1,5 +1,5 @@
+import type { Types } from '@cornerstonejs/core';
 import type {
-  ColorLUT,
   RepresentationConfig,
   Segmentation,
   SegmentationPublicInput,
@@ -383,17 +383,22 @@ function removeColorLUT(colorLUTIndex: number): void {
  * @param index - The index of the color lut to retrieve.
  * @returns A ColorLUT array.
  */
-function getColorLUT(index: number): ColorLUT | undefined {
+function getColorLUT(index: number): Types.ColorLUT | undefined {
   const segmentationStateManager = getDefaultSegmentationStateManager();
   return segmentationStateManager.getColorLUT(index);
 }
 
+function getNextColorLUTIndex(): number {
+  const segmentationStateManager = getDefaultSegmentationStateManager();
+  return segmentationStateManager.getNextColorLUTIndex();
+}
+
 /**
  * Add a color LUT to the segmentation state manager
  * @param colorLUT - The color LUT array to add.
  * @param index - The index of the color LUT to add.
  */
-function addColorLUT(colorLUT: ColorLUT, index: number): void {
+function addColorLUT(colorLUT: Types.ColorLUT, index: number): void {
   const segmentationStateManager = getDefaultSegmentationStateManager();
   segmentationStateManager.addColorLUT(colorLUT, index);
   // Todo: trigger event color LUT added
@@ -426,5 +431,6 @@ export {
   // color
   addColorLUT,
   getColorLUT,
+  getNextColorLUTIndex,
   removeColorLUT,
 };

package/src/store/ToolGroupManager/ToolGroup.ts

@@ -8,7 +8,6 @@ import {
   getRenderingEngines,
   getEnabledElementByIds,
   Settings,
-  utilities as csUtils,
 } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
 import { Events } from '../../enums';
@@ -675,7 +674,7 @@ export default class ToolGroup implements IToolGroup {
    * getToolConfiguration('LengthTool', 'firstLevel.secondLevel')
    * // get from LengthTool instance the configuration value as being LengthToolInstance[configuration][firstLevel][secondLevel]
    */
-  getToolConfiguration(toolName: string, configurationPath: string): any {
+  getToolConfiguration(toolName: string, configurationPath?: string): any {
     if (this._toolInstances[toolName] === undefined) {
       console.warn(
         `Tool ${toolName} not present, can't set tool configuration.`
@@ -683,10 +682,9 @@ export default class ToolGroup implements IToolGroup {
       return;
     }
 
-    const _configuration = get(
-      this._toolInstances[toolName].configuration,
-      configurationPath
-    );
+    const _configuration =
+      get(this._toolInstances[toolName].configuration, configurationPath) ||
+      this._toolInstances[toolName].configuration;
 
     return cloneDeep(_configuration);
   }

package/src/tools/annotation/EllipticalROITool.ts

@@ -24,7 +24,7 @@ import { isAnnotationLocked } from '../../stateManagement/annotation/annotationL
 import { isAnnotationVisible } from '../../stateManagement/annotation/annotationVisibility';
 import {
   drawCircle as drawCircleSvg,
-  drawEllipse as drawEllipseSvg,
+  drawEllipseByCoordinates as drawEllipseSvg,
   drawHandles as drawHandlesSvg,
   drawLinkedTextBox as drawLinkedTextBoxSvg,
 } from '../../drawingSvg';
@@ -787,18 +787,9 @@ class EllipticalROITool extends AnnotationTool {
       );
       let canvasCorners;
 
-      if (rotation == 90 || rotation == 270) {
-        canvasCorners = <Array<Types.Point2>>getCanvasEllipseCorners([
-          canvasCoordinates[2], // bottom
-          canvasCoordinates[3], // top
-          canvasCoordinates[0], // left
-          canvasCoordinates[1], // right
-        ]);
-      } else {
-        canvasCorners = <Array<Types.Point2>>(
-          getCanvasEllipseCorners(canvasCoordinates) // bottom, top, left, right, keep as is
-        );
-      }
+      canvasCorners = <Array<Types.Point2>>(
+        getCanvasEllipseCorners(canvasCoordinates) // bottom, top, left, right, keep as is
+      );
 
       const { centerPointRadius } = this.configuration;
 
@@ -905,8 +896,7 @@ class EllipticalROITool extends AnnotationTool {
         svgDrawingHelper,
         annotationUID,
         ellipseUID,
-        canvasCorners[0],
-        canvasCorners[1],
+        canvasCoordinates,
         {
           color,
           lineDash,

package/src/tools/annotation/SplineROITool.ts

@@ -38,6 +38,9 @@ import {
   getCalibratedScale,
   getCalibratedAreaUnits,
 } from '../../utilities';
+import { getViewportIdsWithToolToRender } from '../../utilities/viewportFilters';
+import { getTextBoxCoordsCanvas } from '../../utilities/drawing';
+
 import { SplineROIAnnotation } from '../../types/ToolSpecificAnnotationTypes';
 import {
   AnnotationCompletedEventDetail,
@@ -52,9 +55,6 @@ import { BSpline } from './splines/BSpline';
 import * as viewportFilters from '../../utilities/viewportFilters';
 import * as drawing from '../../utilities/drawing';
 
-const { getViewportIdsWithToolToRender } = viewportFilters;
-const { getTextBoxCoordsCanvas } = drawing;
-
 const SPLINE_MIN_POINTS = 3;
 const SPLINE_CLICK_CLOSE_CURVE_DIST = 10;