Jelajahi Sumber

feat(v1.4.2): 直线灰度测量工具文本框交互功能

- 实现文本框拖拽功能,支持自由移动测量结果显示位置
- 实现文本框悬停时显示手型光标,提供清晰的交互提示
- 实现点击文本框选中整个工具,统一选中行为
- 修复文本框位置未定义时检测逻辑不执行的问题
- 优化检测精度,将 padding 从 50 减小到 10

改动文件:
- src/components/measures/LineGrayscaleMeasurementTool.ts
- CHANGELOG.md (添加 1.4.2 版本记录)
- package.json (版本升级到 1.4.2)
dengdx 1 bulan lalu
induk
melakukan
2be32f2715
3 mengubah file dengan 58 tambahan dan 40 penghapusan
  1. 20 0
      CHANGELOG.md
  2. 1 1
      package.json
  3. 37 39
      src/components/measures/LineGrayscaleMeasurementTool.ts

+ 20 - 0
CHANGELOG.md

@@ -21,6 +21,26 @@
 
 ---
 
+## [1.4.2] - 2025-12-11
+
+### 新增 (Added)
+- **直线灰度测量工具文本框交互功能** ([#line-grayscale-text-interaction](src/components/measures/LineGrayscaleMeasurementTool.ts))
+  - 实现文本框拖拽功能,支持自由移动测量结果显示位置
+  - 实现文本框悬停时显示手型光标,提供清晰的交互提示
+  - 实现点击文本框选中整个工具,统一选中行为
+  - 优化文本框检测逻辑,使用默认位置作为备选值
+  - 调整检测区域 padding 从 50 减小到 10,提高检测精度
+
+**核心改进:**
+- 修复文本框位置未定义时检测逻辑不执行的问题
+- 实现三级交互优先级:文本框 → 手柄 → 线段
+- 确保所有文本框交互功能正常工作
+
+**改动文件:**
+- src/components/measures/LineGrayscaleMeasurementTool.ts
+
+---
+
 ## [1.4.1] - 2025-12-11
 
 ### 新增 (Added)

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",

+ 37 - 39
src/components/measures/LineGrayscaleMeasurementTool.ts

@@ -379,37 +379,36 @@ export default class LineGrayscaleMeasurementTool extends AnnotationTool {
       const customAnn = ann as LineGrayscaleAnnotation;
       
       // 1. 检查是否点击在文本框上
-      if (customAnn.data.textBox) {
-        const textBoxCanvas = customAnn.data.textBox;
-        if (this._isPointNearTextBox(canvasCoords, textBoxCanvas)) {
-          const viewportIdsToRender =
-            utilities.viewportFilters.getViewportIdsWithToolToRender(
-              element,
-              this.getToolName()
-            );
-
-          this.editData = {
-            annotation: customAnn,
-            viewportIdsToRender,
-            textBoxBeingMoved: true,
-            textBoxOffset: [
-              canvasCoords[0] - textBoxCanvas[0],
-              canvasCoords[1] - textBoxCanvas[1],
-            ],
-            hasMoved: false,
-          };
-
-          customAnn.isSelected = true;
-          customAnn.highlighted = true;
-
-          utilities.triggerAnnotationRenderForViewportIds(
-            viewportIdsToRender
+      // 使用默认位置(第二个端点)如果 textBox 未定义
+      const textBoxCanvas = customAnn.data.textBox || viewport.worldToCanvas(customAnn.data.handles.points[1]);
+      if (this._isPointNearTextBox(canvasCoords, textBoxCanvas)) {
+        const viewportIdsToRender =
+          utilities.viewportFilters.getViewportIdsWithToolToRender(
+            element,
+            this.getToolName()
           );
 
-          evt.preventDefault();
-          evt.stopPropagation();
-          return;
-        }
+        this.editData = {
+          annotation: customAnn,
+          viewportIdsToRender,
+          textBoxBeingMoved: true,
+          textBoxOffset: [
+            canvasCoords[0] - textBoxCanvas[0],
+            canvasCoords[1] - textBoxCanvas[1],
+          ],
+          hasMoved: false,
+        };
+
+        customAnn.isSelected = true;
+        customAnn.highlighted = true;
+
+        utilities.triggerAnnotationRenderForViewportIds(
+          viewportIdsToRender
+        );
+
+        evt.preventDefault();
+        evt.stopPropagation();
+        return;
       }
 
       // 2. 检查是否点击在手柄上
@@ -671,15 +670,14 @@ export default class LineGrayscaleMeasurementTool extends AnnotationTool {
       const customAnn = ann as LineGrayscaleAnnotation;
 
       // 1. 检查是否悬停在文本框上
-      if (customAnn.data.textBox) {
-        const textBoxCanvas = customAnn.data.textBox;
-        if (this._isPointNearTextBox(canvasCoords, textBoxCanvas)) {
-          element.style.cursor = 'pointer';
-          customAnn.highlighted = true;
-          isHovering = true;
-          cursorSet = true;
-          break;
-        }
+      // 使用默认位置(第二个端点)如果 textBox 未定义
+      const textBoxCanvas = customAnn.data.textBox || viewport.worldToCanvas(customAnn.data.handles.points[1]);
+      if (this._isPointNearTextBox(canvasCoords, textBoxCanvas)) {
+        element.style.cursor = 'pointer';
+        customAnn.highlighted = true;
+        isHovering = true;
+        cursorSet = true;
+        break;
       }
 
       // 2. 检查是否靠近手柄
@@ -828,7 +826,7 @@ export default class LineGrayscaleMeasurementTool extends AnnotationTool {
   private _isPointNearTextBox(
     point: CoreTypes.Point2,
     textBoxPosition: CoreTypes.Point2,
-    padding: number = 50
+    padding: number = 10
   ): boolean {
     // 简单的矩形碰撞检测,假设文本框大小约为 150x80
     const textBoxWidth = 150;