feat(LabelTool): add label tool

fixes cornerstonejs#1716

Author: daker

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,81 @@
+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);
+
+      console.log('Adding label at:', position);
+
+      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/src/index.ts

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

packages/tools/src/tools/annotation/LabelTool.ts

@@ -20,6 +20,7 @@ import VolumeRotateTool from './VolumeRotateTool';
 
 // Annotation tools
 import BidirectionalTool from './annotation/BidirectionalTool';
+import LabelTool from './annotation/LabelTool';
 import LengthTool from './annotation/LengthTool';
 import HeightTool from './annotation/HeightTool';
 import ProbeTool from './annotation/ProbeTool';
@@ -81,6 +82,7 @@ export {
   OverlayGridTool,
   SegmentationIntersectionTool,
   BidirectionalTool,
+  LabelTool,
   LengthTool,
   HeightTool,
   ProbeTool,

packages/tools/src/tools/index.ts

@@ -358,6 +358,15 @@ export interface ArrowAnnotation extends Annotation {
   };
 }
 
+export interface LabelAnnotation extends Annotation {
+  data: {
+    text: string;
+    handles: {
+      points: Types.Point3[];
+    };
+  };
+}
+
 export interface AngleAnnotation extends Annotation {
   data: {
     handles: {