feat(LabelTool): add label tool

fixes #1716
cornerstonejs · Dec 20, 2024 · f940754 · f940754
1 parent 1732887
commit f940754
Show file tree

Hide file tree

Showing 8 changed files with 641 additions and 2 deletions.
diff --git a/packages/core/src/utilities/windowLevel.ts b/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:

diff --git a/packages/tools/examples/dynamicallyAddAnnotations/index.ts b/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,

diff --git a/packages/tools/examples/dynamicallyAddAnnotations/labelToolUI.ts b/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;
+}
diff --git a/packages/tools/examples/dynamicallyAddAnnotations/toolSpecificUI.ts b/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;

diff --git a/packages/tools/src/index.ts b/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,