feat(LabelTool): add label tool

common/reviews/api/tools.api.md

@@ -3449,6 +3449,17 @@ type KeyUpEventDetail = KeyDownEventDetail;
 // @public (undocumented)
 type KeyUpEventType = Types_2.CustomEventType<KeyUpEventDetail>;
 
+// @public (undocumented)
+interface LabelAnnotation extends Annotation {
+    // (undocumented)
+    data: {
+        text: string;
+        handles: {
+            points: Types_2.Point3[];
+        };
+    };
+}
+
 // @public (undocumented)
 export class LabelmapBaseTool extends BaseTool {
     constructor(toolProps: any, defaultToolProps: any);
@@ -3580,6 +3591,57 @@ type LabelmapToolOperationDataStack = LabelmapToolOperationData & LabelmapSegmen
 // @public (undocumented)
 type LabelmapToolOperationDataVolume = LabelmapToolOperationData & LabelmapSegmentationDataVolume;
 
+// @public (undocumented)
+export class LabelTool extends AnnotationTool {
+    constructor(toolProps?: PublicToolProps, defaultToolProps?: ToolProps);
+    // (undocumented)
+    _activateDraw: (element: HTMLDivElement) => void;
+    // (undocumented)
+    _activateModify: (element: HTMLDivElement) => void;
+    // (undocumented)
+    addNewAnnotation: (evt: EventTypes_2.InteractionEventType) => LabelAnnotation;
+    // (undocumented)
+    cancel: (element: HTMLDivElement) => string;
+    // (undocumented)
+    _deactivateDraw: (element: HTMLDivElement) => void;
+    // (undocumented)
+    _deactivateModify: (element: HTMLDivElement) => void;
+    // (undocumented)
+    _doneChangingTextCallback(element: any, annotation: any, updatedText: any): void;
+    // (undocumented)
+    _dragCallback: (evt: EventTypes_2.InteractionEventType) => void;
+    // (undocumented)
+    editData: {
+        annotation: Annotation;
+        viewportIdsToRender: string[];
+        newAnnotation?: boolean;
+        hasMoved?: boolean;
+        offset: Types_2.Point3;
+    } | null;
+    // (undocumented)
+    _endCallback: (evt: EventTypes_2.InteractionEventType) => void;
+    // (undocumented)
+    handleSelectedCallback(evt: EventTypes_2.InteractionEventType, annotation: Annotation, handle: ToolHandle, interactionType: InteractionTypes): void;
+    // (undocumented)
+    static hydrate: (viewportId: string, position: Types_2.Point3, text: string, options?: {
+        annotationUID?: string;
+    }) => LabelAnnotation;
+    // (undocumented)
+    isDrawing: boolean;
+    // (undocumented)
+    isHandleOutsideImage: boolean;
+    // (undocumented)
+    _isInsideVolume(index1: any, index2: any, dimensions: any): boolean;
+    // (undocumented)
+    isPointNearTool: (element: HTMLDivElement, annotation: LabelAnnotation, canvasCoords: Types_2.Point2, proximity: number) => boolean;
+    // (undocumented)
+    renderAnnotation: (enabledElement: Types_2.IEnabledElement, svgDrawingHelper: SVGDrawingHelper) => boolean;
+    // (undocumented)
+    static toolName: any;
+    // (undocumented)
+    toolSelectedCallback: (evt: EventTypes_2.InteractionEventType, annotation: LabelAnnotation) => void;
+}
+
 // @public (undocumented)
 interface LengthAnnotation extends Annotation {
     // (undocumented)
@@ -6261,6 +6323,7 @@ declare namespace ToolSpecificAnnotationTypes {
         PlanarFreehandContourSegmentationAnnotation,
         InterpolationROIAnnotation,
         ArrowAnnotation,
+        LabelAnnotation,
         AngleAnnotation,
         UltrasoundDirectionalAnnotation,
         CobbAngleAnnotation,

packages/core/src/utilities/windowLevel.ts

@@ -30,8 +30,8 @@ function toWindowLevel(
  *
  * LINEAR (default):
  * - Uses the DICOM standard formula from C.11.2.1.2.1:
- *   if x =< c - 0.5 - (w-1)/2 => lower bound
- *   if x > c - 0.5 + (w-1)/2 => upper bound
+ *   if x {'<='} c - 0.5 - (w-1)/2 {'=>'} lower bound
+ *   if x {'>'} c - 0.5 + (w-1)/2 {'=>'} upper bound
  *
  * LINEAR_EXACT (C.11.2.1.3.2):
  * - Uses:

packages/tools/examples/dynamicallyAddAnnotations/index.ts

@@ -17,6 +17,7 @@ import {
   ArrowAnnotateTool,
   CircleROITool,
   EllipticalROITool,
+  LabelTool,
   LengthTool,
   ProbeTool,
   RectangleROITool,
@@ -32,6 +33,7 @@ console.debug(
 );
 
 const tools = [
+  LabelTool,
   AngleTool,
   ArrowAnnotateTool,
   EllipticalROITool,

packages/tools/examples/dynamicallyAddAnnotations/labelToolUI.ts

@@ -0,0 +1,79 @@
+import { getEnabledElementByViewportId, utilities } from '@cornerstonejs/core';
+import type { Point2 } from '@cornerstonejs/core/types';
+import { LabelTool } from '@cornerstonejs/tools';
+import { typeToIdMap, typeToStartIdMap, typeToEndIdMap } from './constants';
+
+function getInputValue(form: HTMLFormElement, inputId: string): number {
+  return Number((form.querySelector(`#${inputId}`) as HTMLInputElement).value);
+}
+
+function getCoordinates(
+  form: HTMLFormElement,
+  type: 'canvas' | 'image'
+): Point2 {
+  const position: Point2 = [
+    getInputValue(form, `${typeToStartIdMap[type]}-1`),
+    getInputValue(form, `${typeToStartIdMap[type]}-2`),
+  ];
+  return position;
+}
+
+function createFormElement(): HTMLFormElement {
+  const form = document.createElement('form');
+  form.style.marginBottom = '10px';
+
+  ['canvas', 'image'].forEach((coordType) => {
+    form.innerHTML += `
+      <label style="margin-right: 20px;">${
+        coordType.charAt(0).toUpperCase() + coordType.slice(1)
+      } Coords: Start [${coordType === 'canvas' ? 'x, y' : 'i, j'}]:</label>
+      <input style="width:40px" type="number" id="${coordType}-start-1" placeholder="${
+      coordType === 'canvas' ? 'x' : 'i'
+    }" value="10">
+      <input style="width:40px" type="number" id="${coordType}-start-2" placeholder="${
+      coordType === 'canvas' ? 'y' : 'j'
+    }" value="10">
+      <label style="margin-left: 52px; margin-right: 21px;">Text:</label>
+      <input style="width:100px" type="text" id="${coordType}-text" placeholder="My Annotation" value="">
+      <br>
+      <button style="margin-left: 52px;" type="button" id="${coordType}-stack">Add Stack</button>
+      <button type="button" id="${coordType}-volume">Add Volume</button>
+      <br><br>
+    `;
+  });
+
+  return form;
+}
+
+function addButtonListeners(form: HTMLFormElement): void {
+  const buttons = form.querySelectorAll('button');
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      const [type, viewportType] = button.id.split('-') as [
+        'canvas' | 'image',
+        keyof typeof typeToIdMap
+      ];
+      const enabledElement = getEnabledElementByViewportId(
+        typeToIdMap[viewportType]
+      );
+      const viewport = enabledElement.viewport;
+      const coords = getCoordinates(form, type);
+      const textInput = form.querySelector(`#${type}-text`) as HTMLInputElement;
+      const text = textInput ? textInput.value : '';
+      const currentImageId = viewport.getCurrentImageId() as string;
+
+      const position =
+        type === 'image'
+          ? utilities.imageToWorldCoords(currentImageId, coords)
+          : viewport.canvasToWorld(coords);
+
+      LabelTool.hydrate(viewport.id, position, text);
+    });
+  });
+}
+
+export function createLabelToolUI(): HTMLFormElement {
+  const form = createFormElement();
+  addButtonListeners(form);
+  return form;
+}

packages/tools/examples/dynamicallyAddAnnotations/toolSpecificUI.ts

@@ -6,6 +6,7 @@ import { createProbeToolUI } from './probeToolUI';
 import { createRectangleROIToolUI } from './rectangleROIToolUI';
 import { createCircleROIToolUI } from './circleROIToolUI';
 import { createSplineROIToolUI } from './splineROIToolUI';
+import { createLabelToolUI } from './labelToolUI';
 
 interface ToolUIConfig {
   toolName: string;
@@ -31,6 +32,9 @@ function createToolUI(toolName: string, config: ToolUIConfig): ToolUI | null {
     case 'EllipticalROI':
       forms = [createEllipseROIToolUI()];
       break;
+    case 'Label':
+      forms = [createLabelToolUI()];
+      break;
     case 'Length':
       forms = [createLengthToolUI()];
       break;

packages/tools/examples/stackAnnotationTools/index.ts

@@ -33,6 +33,7 @@ const {
   PlanarFreehandROITool,
   EraserTool,
   KeyImageTool,
+  LabelTool,
   Enums: csToolsEnums,
 } = cornerstoneTools;
 
@@ -124,6 +125,7 @@ const toolsNames = [
   PlanarFreehandROITool.toolName,
   EraserTool.toolName,
   KeyImageTool.toolName,
+  LabelTool.toolName,
 ];
 let selectedToolName = toolsNames[0];
 
@@ -225,7 +227,7 @@ async function run() {
   cornerstoneTools.addTool(PlanarFreehandROITool);
   cornerstoneTools.addTool(EraserTool);
   cornerstoneTools.addTool(KeyImageTool);
-
+  cornerstoneTools.addTool(LabelTool);
   // Define a tool group, which defines how mouse events map to tool commands for
   // Any viewport using the group
   const toolGroup = ToolGroupManager.createToolGroup(toolGroupId);
@@ -246,7 +248,7 @@ async function run() {
   toolGroup.addTool(PlanarFreehandROITool.toolName);
   toolGroup.addTool(EraserTool.toolName);
   toolGroup.addTool(KeyImageTool.toolName);
-
+  toolGroup.addTool(LabelTool.toolName);
   // Set the initial state of the tools, here we set one tool active on left click.
   // This means left click will draw that tool.
   toolGroup.setToolActive(toolsNames[0], {

packages/tools/src/drawingSvg/drawTextBox.ts

@@ -104,11 +104,16 @@ function _drawTextGroup(
     setAttributesIfNecessary(textAttributes, textElement);
     setAttributesIfNecessary(textGroupAttributes, existingTextGroup);
 
+    // Add data attribute for annotation UID
+    existingTextGroup.setAttribute('data-annotation-uid', annotationUID);
+
     textGroupBoundingBox = _drawTextBackground(existingTextGroup, background);
 
     svgDrawingHelper.setNodeTouched(svgNodeHash);
   } else {
     const textGroup = document.createElementNS(svgns, 'g');
+    // Add data attribute for annotation UID
+    textGroup.setAttribute('data-annotation-uid', annotationUID);
 
     textGroup.setAttribute('transform', `translate(${x} ${y})`);
 
@@ -150,13 +155,13 @@ function _createTextElement(
   const dropShadowStyle = `filter:url(#shadow-${svgDrawingHelper.svgLayerElement.id});`;
   const combinedStyle = `${noSelectStyle}${dropShadowStyle}`;
 
-  // font-size="100"
   textElement.setAttribute('x', '0');
   textElement.setAttribute('y', '0');
   textElement.setAttribute('fill', color);
   textElement.setAttribute('font-family', fontFamily);
   textElement.setAttribute('font-size', fontSize);
   textElement.setAttribute('style', combinedStyle);
+  textElement.setAttribute('pointer-events', 'visible');
 
   return textElement;
 }

packages/tools/src/index.ts

@@ -33,6 +33,7 @@ import {
   StackScrollTool,
   PlanarRotateTool,
   MIPJumpToClickTool,
+  LabelTool,
   LengthTool,
   HeightTool,
   ProbeTool,
@@ -107,6 +108,7 @@ export {
   PlanarRotateTool,
   MIPJumpToClickTool,
   // Annotation Tools
+  LabelTool,
   LengthTool,
   HeightTool,
   CrosshairsTool,