dros/src/components/measures/LineGrayscaleMeasurementTool.ts

import { Point3, Point2 } from './mathUtils';
import {
  utilities as csUtils,
  Types as CoreTypes,
  getEnabledElement,
  cache,
} from '@cornerstonejs/core';
import * as cornerstone from '@cornerstonejs/core';

import {
  AnnotationTool,
  utilities,
  Types,
  annotation,
  drawing,
} from '@cornerstonejs/tools';

const {
  drawHandles,
  drawLinkedTextBox,
  drawLine: drawLineSvg,
} = drawing;

import {
  PublicToolProps,
  ToolProps,
  EventTypes,
  SVGDrawingHelper,
} from '@cornerstonejs/tools/dist/esm/types';

/**
 * 直线灰度测量注解接口
 */
interface LineGrayscaleAnnotation extends Types.Annotation {
  data: {
    handles: {
      // 控制点（两个端点,世界坐标）
      points: CoreTypes.Point3[];
      // 当前激活的手柄索引（0或1,null表示未激活）
      activeHandleIndex: number | null;
    };
    label?: string;
    // 文本框位置（Canvas坐标）
    textBox?: CoreTypes.Point2;
    // 缓存的统计结果
    cachedStats?: {
      [targetId: string]: {
        // 平均灰度值
        mean: number;
        // 最小灰度值
        min: number;
        // 最大灰度值
        max: number;
        // 采样点数量
        sampleCount: number;
        // 直线长度（mm）
        lineLength: number;
      };
    };
  };
}

/**
 * 像素采样结果
 */
interface PixelSampleResult {
  values: number[];
  coordinates: Array<{ x: number; y: number }>;
  count: number;
}

/**
 * 直线灰度测量工具
 * 功能: 在医学影像上绘制直线,计算并显示直线路径上的灰度值统计信息
 */
export default class LineGrayscaleMeasurementTool extends AnnotationTool {
  static toolName = 'LineGrayscaleMeasurementTool';

  editData: {
    annotation: Types.Annotation;
    viewportIdsToRender: string[];
    handleIndex?: number;
    newAnnotation?: boolean;
    hasMoved?: boolean;
    textBoxBeingMoved?: boolean;
    textBoxOffset?: CoreTypes.Point2;
  } | null = null;

  isDrawing: boolean = false;

  /**
   * 创建默认注解（工具激活时自动创建）
   */
  static createDefaultAnnotation(
    element: HTMLDivElement,
    viewport: CoreTypes.IStackViewport | CoreTypes.IVolumeViewport
  ): LineGrayscaleAnnotation {
    const enabledElement = getEnabledElement(element);
    if (!enabledElement) {
      throw new Error('Element is not enabled');
    }

    // 获取viewport的尺寸
    const canvas = viewport.canvas;
    const { width, height } = canvas;
    const centerX = width / 2;
    const centerY = height / 2;

    // 设置起点和终点（Canvas坐标,水平线,长度100px）
    const startCanvas: CoreTypes.Point2 = [centerX - 50, centerY];
    const endCanvas: CoreTypes.Point2 = [centerX + 50, centerY];

    // 转换为世界坐标
    const startWorld = viewport.canvasToWorld(startCanvas);
    const endWorld = viewport.canvasToWorld(endCanvas);

    const camera = viewport.getCamera();
    const { viewPlaneNormal, viewUp } = camera;
    if (viewPlaneNormal === undefined || viewUp === undefined) {
      throw new Error('Camera parameters are undefined');
    }

    // 创建注解对象
    const annotationData = {
      invalidated: true,
      highlighted: false,
      metadata: {
        viewPlaneNormal: [...viewPlaneNormal] as CoreTypes.Point3,
        viewUp: [...viewUp] as CoreTypes.Point3,
        FrameOfReferenceUID: viewport.getFrameOfReferenceUID(),
        referencedImageId: viewport.getCurrentImageId?.() || '',
        toolName: LineGrayscaleMeasurementTool.toolName,
      },
      data: {
        label: '',
        handles: {
          points: [startWorld, endWorld],
          activeHandleIndex: null,
        },
        cachedStats: {},
      },
    } as LineGrayscaleAnnotation;

    return annotationData;
  }

  constructor(
    toolProps: PublicToolProps = {},
    defaultToolProps: ToolProps = {
      supportedInteractionTypes: ['Mouse', 'Touch'],
      configuration: {
        shadow: true,
        preventHandleOutsideImage: false,
      },
    }
  ) {
    super(toolProps, defaultToolProps);
  }

  /**
   * 禁用手动绘制（仅支持预设注解）
   */
  addNewAnnotation(
    evt: EventTypes.InteractionEventType
  ): LineGrayscaleAnnotation {
    evt.preventDefault();
    return {} as LineGrayscaleAnnotation;
  }

  /**
   * 检查点是否靠近工具
   */
  isPointNearTool(
    element: HTMLDivElement,
    annotation: LineGrayscaleAnnotation,
    canvasCoords: CoreTypes.Point2,
    proximity: number
  ): boolean {
    const enabledElement = getEnabledElement(element);
    if (!enabledElement) {
      return false;
    }
    const { viewport } = enabledElement;

    const points = annotation.data.handles.points;

    // 检查是否靠近任意一个手柄点
    for (let i = 0; i < points.length; i++) {
      const point = points[i];
      const canvasPoint = viewport.worldToCanvas(point);
      const distance = Math.sqrt(
        Math.pow(canvasPoint[0] - canvasCoords[0], 2) +
        Math.pow(canvasPoint[1] - canvasCoords[1], 2)
      );

      if (distance < proximity) {
        return true;
      }
    }

    // 检查是否靠近直线
    if (points.length >= 2) {
      const p1Canvas = viewport.worldToCanvas(points[0]);
      const p2Canvas = viewport.worldToCanvas(points[1]);
      const dist = this._distanceToSegment(canvasCoords, p1Canvas, p2Canvas);
      if (dist < proximity) {
        return true;
      }
    }

    return false;
  }

  /**
   * 计算点到线段的距离
   */
  private _distanceToSegment(
    point: CoreTypes.Point2,
    lineStart: CoreTypes.Point2,
    lineEnd: CoreTypes.Point2
  ): number {
    const x = point[0];
    const y = point[1];
    const x1 = lineStart[0];
    const y1 = lineStart[1];
    const x2 = lineEnd[0];
    const y2 = lineEnd[1];

    const A = x - x1;
    const B = y - y1;
    const C = x2 - x1;
    const D = y2 - y1;

    const dot = A * C + B * D;
    const lenSq = C * C + D * D;
    let param = -1;

    if (lenSq !== 0) {
      param = dot / lenSq;
    }

    let xx, yy;

    if (param < 0) {
      xx = x1;
      yy = y1;
    } else if (param > 1) {
      xx = x2;
      yy = y2;
    } else {
      xx = x1 + param * C;
      yy = y1 + param * D;
    }

    const dx = x - xx;
    const dy = y - yy;

    return Math.sqrt(dx * dx + dy * dy);
  }

  /**
   * 取消操作
   */
  cancel(element: HTMLDivElement): string {
    if (this.isDrawing) {
      this.isDrawing = false;
      this._deactivateDraw(element);
      this._deactivateModify(element);

      const enabledElement = getEnabledElement(element);
      if (enabledElement) {
        const viewportIdsToRender =
          utilities.viewportFilters.getViewportIdsWithToolToRender(
            element,
            this.getToolName()
          );

        utilities.triggerAnnotationRenderForViewportIds(
          viewportIdsToRender
        );
      }

      this.editData = null;
      return this.getToolName();
    }

    return '';
  }

  _activateDraw(element: HTMLDivElement): void {
    element.addEventListener(
      'CORNERSTONE_TOOLS_MOUSE_DRAG',
      this._dragCallback as EventListener
    );
    element.addEventListener(
      'CORNERSTONE_TOOLS_MOUSE_UP',
      this._endCallback as EventListener
    );
  }

  _deactivateDraw(element: HTMLDivElement): void {
    element.removeEventListener(
      'CORNERSTONE_TOOLS_MOUSE_DRAG',
      this._dragCallback as EventListener
    );
    element.removeEventListener(
      'CORNERSTONE_TOOLS_MOUSE_UP',
      this._endCallback as EventListener
    );
  }

  _activateModify(element: HTMLDivElement): void {
    element.addEventListener(
      'CORNERSTONE_TOOLS_MOUSE_DOWN',
      this._mouseDownModifyCallback as EventListener
    );
    element.addEventListener(
      'CORNERSTONE_TOOLS_MOUSE_DRAG',
      this._mouseDragModifyCallback as EventListener
    );
    element.addEventListener(
      'CORNERSTONE_TOOLS_MOUSE_UP',
      this._mouseUpModifyCallback as EventListener
    );
    element.addEventListener(
      'CORNERSTONE_TOOLS_MOUSE_MOVE',
      this._mouseMoveModifyCallback as EventListener
    );
    element.addEventListener(
      'keydown',
      this._keyDownCallback as EventListener
    );
  }

  _deactivateModify(element: HTMLDivElement): void {
    element.removeEventListener(
      'CORNERSTONE_TOOLS_MOUSE_DOWN',
      this._mouseDownModifyCallback as EventListener
    );
    element.removeEventListener(
      'CORNERSTONE_TOOLS_MOUSE_DRAG',
      this._mouseDragModifyCallback as EventListener
    );
    element.removeEventListener(
      'CORNERSTONE_TOOLS_MOUSE_UP',
      this._mouseUpModifyCallback as EventListener
    );
    element.removeEventListener(
      'CORNERSTONE_TOOLS_MOUSE_MOVE',
      this._mouseMoveModifyCallback as EventListener
    );
    element.removeEventListener(
      'keydown',
      this._keyDownCallback as EventListener
    );
  }

  _mouseDownModifyCallback = (evt: EventTypes.InteractionEventType): void => {
    const eventDetail = evt.detail;
    const { element, currentPoints } = eventDetail;
    const canvasCoords = currentPoints.canvas;

    const enabledElement = getEnabledElement(element);
    if (!enabledElement) {
      return;
    }
    const { viewport } = enabledElement;

    const annotations = annotation.state.getAnnotations(this.getToolName(), element);
    
    if (!annotations || annotations.length === 0) {
      return;
    }

    // 查找最近的手柄
    for (const ann of annotations) {
      const customAnn = ann as LineGrayscaleAnnotation;
      const handle = this.getHandleNearImagePoint(
        element,
        customAnn,
        canvasCoords,
        6
      );

      if (handle) {
        const viewportIdsToRender =
          utilities.viewportFilters.getViewportIdsWithToolToRender(
            element,
            this.getToolName()
          );

        this.editData = {
          annotation: customAnn,
          viewportIdsToRender,
          handleIndex: customAnn.data.handles.activeHandleIndex || 0,
          hasMoved: false,
        };

        customAnn.isSelected = true;
        customAnn.highlighted = true;

        utilities.triggerAnnotationRenderForViewportIds(
          viewportIdsToRender
        );

        evt.preventDefault();
        evt.stopPropagation();
        return;
      }
    }

    // 如果没有点击在工具上，取消所有选中状态
    for (const ann of annotations) {
      const customAnn = ann as LineGrayscaleAnnotation;
      customAnn.isSelected = false;
    }
  };

  _mouseDragModifyCallback = (evt: EventTypes.InteractionEventType): void => {
    if (!this.editData) {
      return;
    }

    const eventDetail = evt.detail;
    const { currentPoints } = eventDetail;

    const enabledElement = getEnabledElement(eventDetail.element);
    if (!enabledElement) {
      return;
    }

    const { annotation: ann, viewportIdsToRender } = this.editData;
    const customAnn = ann as LineGrayscaleAnnotation;
    const { data } = customAnn;

    // 处理手柄拖拽
    const worldPos = currentPoints.world;
    const activeHandleIndex = data.handles.activeHandleIndex;

    if (activeHandleIndex !== null && activeHandleIndex >= 0 && activeHandleIndex < data.handles.points.length) {
      data.handles.points[activeHandleIndex] = worldPos;

      this._updateCachedStats(customAnn, enabledElement);

      this.editData.hasMoved = true;

      utilities.triggerAnnotationRenderForViewportIds(
        viewportIdsToRender
      );

      evt.preventDefault();
      evt.stopPropagation();
    }
  };

  _mouseUpModifyCallback = (evt: EventTypes.InteractionEventType): void => {
    if (!this.editData) {
      return;
    }

    const { annotation: ann } = this.editData;
    const customAnn = ann as LineGrayscaleAnnotation;

    customAnn.data.handles.activeHandleIndex = null;
    customAnn.highlighted = false;

    const eventDetail = evt.detail;
    const { element } = eventDetail;

    const viewportIdsToRender =
      utilities.viewportFilters.getViewportIdsWithToolToRender(
        element,
        this.getToolName()
      );

    utilities.triggerAnnotationRenderForViewportIds(
      viewportIdsToRender
    );

    this.editData = null;

    evt.preventDefault();
    evt.stopPropagation();
  };

  _mouseMoveModifyCallback = (evt: EventTypes.InteractionEventType): void => {
    const eventDetail = evt.detail;
    const { element, currentPoints } = eventDetail;
    if (!currentPoints || !currentPoints.canvas) {
      return;
    }
    const canvasCoords = currentPoints.canvas;

    const enabledElement = getEnabledElement(element);
    if (!enabledElement) {
      return;
    }
    const { viewport } = enabledElement;

    const annotations = annotation.state.getAnnotations(this.getToolName(), element);
    if (!annotations || annotations.length === 0) {
      element.style.cursor = 'default';
      return;
    }

    let isHovering = false;

    // 检查是否悬停在手柄或直线上
    for (const ann of annotations) {
      const customAnn = ann as LineGrayscaleAnnotation;

      // 检查是否靠近手柄
      const handle = this.getHandleNearImagePoint(element, customAnn, canvasCoords, 6);
      if (handle) {
        element.style.cursor = 'crosshair';
        customAnn.highlighted = true;
        isHovering = true;
        break;
      }

      // 检查是否靠近直线
      if (this.isPointNearTool(element, customAnn, canvasCoords, 10)) {
        element.style.cursor = 'crosshair';
        customAnn.highlighted = true;
        isHovering = true;
        break;
      }
    }

    // 如果没有悬停，重置高亮和光标
    if (!isHovering) {
      for (const ann of annotations) {
        const customAnn = ann as LineGrayscaleAnnotation;
        customAnn.highlighted = false;
      }
      element.style.cursor = 'default';
    }

    // 触发渲染以更新高亮状态
    const viewportIdsToRender = utilities.viewportFilters.getViewportIdsWithToolToRender(
      element,
      this.getToolName()
    );
    utilities.triggerAnnotationRenderForViewportIds(viewportIdsToRender);
  };

  _keyDownCallback = (evt: KeyboardEvent): void => {
    if (evt.key === 'Delete') {
      const element = document.activeElement as HTMLDivElement;
      if (!element) return;

      const annotations = annotation.state.getAnnotations(this.getToolName(), element);

      // 查找选中的注解
      const selectedAnnotation = annotations.find(ann => ann.isSelected);
      if (selectedAnnotation) {
        // 删除选中的注解
        annotation.state.removeAnnotation(selectedAnnotation.annotationUID || '');

        // 触发视图更新
        const viewportIdsToRender =
          utilities.viewportFilters.getViewportIdsWithToolToRender(
            element,
            this.getToolName()
          );
        utilities.triggerAnnotationRenderForViewportIds(viewportIdsToRender);

        evt.preventDefault();
        evt.stopPropagation();
      }
    }
  };

  handleSelectedCallback(
    evt: EventTypes.InteractionEventType,
    annotation: LineGrayscaleAnnotation
  ): void {
    const eventDetail = evt.detail;
    const { element } = eventDetail;

    annotation.highlighted = true;

    const viewportIdsToRender =
      utilities.viewportFilters.getViewportIdsWithToolToRender(
        element,
        this.getToolName()
      );

    utilities.triggerAnnotationRenderForViewportIds(
      viewportIdsToRender
    );

    evt.preventDefault();
  }

  toolSelectedCallback(
    evt: EventTypes.InteractionEventType,
    annotation: LineGrayscaleAnnotation
  ): void {
    // 实现工具选中逻辑
  }

  _dragCallback = (evt: EventTypes.InteractionEventType): void => {
    this.isDrawing = true;
    // 实现拖拽逻辑
  };

  _endCallback = (evt: EventTypes.InteractionEventType): void => {
    // 实现结束逻辑
  };

  getHandleNearImagePoint(
    element: HTMLDivElement,
    annotation: LineGrayscaleAnnotation,
    canvasCoords: CoreTypes.Point2,
    proximity: number
  ): Types.ToolHandle | undefined {
    const enabledElement = getEnabledElement(element);
    if (!enabledElement) {
      return undefined;
    }
    const { viewport } = enabledElement;

    const points = annotation.data.handles.points;

    const handleProximity = Math.max(proximity, 15);

    for (let i = 0; i < points.length; i++) {
      const point = points[i];
      const canvasPoint = viewport.worldToCanvas(point);
      const distance = Math.sqrt(
        Math.pow(canvasPoint[0] - canvasCoords[0], 2) +
        Math.pow(canvasPoint[1] - canvasCoords[1], 2)
      );

      if (distance < handleProximity) {
        annotation.data.handles.activeHandleIndex = i;
        return {
          worldPosition: point,
        } as Types.ToolHandle;
      }
    }
    
    annotation.data.handles.activeHandleIndex = null;
    return undefined;
  }

  /**
   * 更新缓存的统计数据
   */
  private _updateCachedStats(
    annotation: LineGrayscaleAnnotation,
    enabledElement: CoreTypes.IEnabledElement
  ): void {
    const { viewport } = enabledElement;
    const { points } = annotation.data.handles;

    if (points.length < 2) {
      return;
    }

    // 使用Cornerstone缓存系统获取图像
    const imageId = viewport.getCurrentImageId?.();
    if (!imageId) {
      console.warn('[LineGrayscaleTool] No imageId available');
      return;
    }

    const image = cornerstone.cache.getImage(imageId);
    if (!image) {
      console.warn('[LineGrayscaleTool] Image not found in cache');
      return;
    }

    // 采样像素
    const sampleResult = this._samplePixelsAlongLine(points[0], points[1], image, viewport);

    // 计算统计值
    const stats = this._calculateGrayscaleStats(sampleResult.values, points[0], points[1]);

    // 更新缓存
    const targetId = `imageId:${imageId}`;
    if (!annotation.data.cachedStats) {
      annotation.data.cachedStats = {};
    }
    annotation.data.cachedStats[targetId] = stats;
  }

  /**
   * 沿直线采样像素（Bresenham算法）
   */
  private _samplePixelsAlongLine(
    startWorld: CoreTypes.Point3,
    endWorld: CoreTypes.Point3,
    image: any,
    viewport: CoreTypes.IStackViewport | CoreTypes.IVolumeViewport
  ): PixelSampleResult {
    // 使用正确的API获取像素数据
    const pixelData = image.getPixelData();
    const { width, height } = image;

    // 使用viewport坐标转换（世界坐标→Canvas坐标）
    const startCanvas = viewport.worldToCanvas(startWorld);
    const endCanvas = viewport.worldToCanvas(endWorld);

    // Canvas坐标直接对应像素坐标（对于2D视图）
    const startPixel = [
      Math.floor(startCanvas[0]),
      Math.floor(startCanvas[1]),
    ];

    const endPixel = [
      Math.floor(endCanvas[0]),
      Math.floor(endCanvas[1]),
    ];

    // Bresenham直线算法
    const pixels = this._bresenhamLine(
      startPixel[0],
      startPixel[1],
      endPixel[0],
      endPixel[1]
    );

    // 采样灰度值
    const values: number[] = [];
    const coordinates: Array<{ x: number; y: number }> = [];

    for (const pixel of pixels) {
      const { x, y } = pixel;

      // 边界检查
      if (x < 0 || x >= width || y < 0 || y >= height) {
        continue;
      }

      // 计算像素索引（行优先）
      const index = y * width + x;
      const value = pixelData[index];

      values.push(value);
      coordinates.push({ x, y });
    }

    return {
      values,
      coordinates,
      count: values.length,
    };
  }

  /**
   * Bresenham直线算法实现
   */
  private _bresenhamLine(
    x0: number,
    y0: number,
    x1: number,
    y1: number
  ): Array<{ x: number; y: number }> {
    const pixels: Array<{ x: number; y: number }> = [];

    const dx = Math.abs(x1 - x0);
    const dy = Math.abs(y1 - y0);
    const sx = x0 < x1 ? 1 : -1;
    const sy = y0 < y1 ? 1 : -1;
    let err = dx - dy;

    let x = x0;
    let y = y0;

    while (true) {
      pixels.push({ x, y });

      if (x === x1 && y === y1) break;

      const e2 = 2 * err;
      if (e2 > -dy) {
        err -= dy;
        x += sx;
      }
      if (e2 < dx) {
        err += dx;
        y += sy;
      }
    }

    return pixels;
  }

  /**
   * 计算灰度统计值
   */
  private _calculateGrayscaleStats(
    values: number[],
    startWorld: CoreTypes.Point3,
    endWorld: CoreTypes.Point3
  ): {
    mean: number;
    min: number;
    max: number;
    sampleCount: number;
    lineLength: number;
  } {
    if (values.length === 0) {
      return {
        mean: 0,
        min: 0,
        max: 0,
        sampleCount: 0,
        lineLength: 0,
      };
    }

    // 计算平均值
    const sum = values.reduce((acc, val) => acc + val, 0);
    const mean = Math.round(sum / values.length);

    // 计算最小值和最大值
    const min = Math.min(...values);
    const max = Math.max(...values);

    // 计算物理距离（mm）
    const dx = endWorld[0] - startWorld[0];
    const dy = endWorld[1] - startWorld[1];
    const dz = endWorld[2] - startWorld[2];
    const lineLength = Math.sqrt(dx * dx + dy * dy + dz * dz);

    return {
      mean,
      min,
      max,
      sampleCount: values.length,
      lineLength: parseFloat(lineLength.toFixed(2)),
    };
  }

  /**
   * 渲染注解
   */
  renderAnnotation = (
    enabledElement: CoreTypes.IEnabledElement,
    svgDrawingHelper: SVGDrawingHelper
  ): boolean => {
    const { viewport } = enabledElement;
    const { element } = viewport;

    let annotations = annotation.state.getAnnotations(
      LineGrayscaleMeasurementTool.toolName,
      element
    ) as LineGrayscaleAnnotation[];

    if (!annotations || annotations.length === 0) {
      return false;
    }

    const targetId = `imageId:${(viewport as any).getCurrentImageId?.() || ''}`;
    const styleSpecifier: any = {
      toolGroupId: this.toolGroupId,
      toolName: this.getToolName(),
      viewportId: viewport.id,
    };

    for (const annotationItem of annotations) {
      const { annotationUID, data } = annotationItem;
      const { points } = data.handles;
      const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));

      if (!annotationUID) {
        continue;
      }

      styleSpecifier.annotationUID = annotationUID;

      const lineWidth = this.getStyle('lineWidth', styleSpecifier, annotationItem);
      const lineDash = this.getStyle('lineDash', styleSpecifier, annotationItem);
      const color = this.getStyle('color', styleSpecifier, annotationItem);

      // 绘制直线
      const lineUID = `${annotationUID}-line`;
      drawLineSvg(
        svgDrawingHelper,
        annotationUID,
        lineUID,
        canvasCoordinates[0],
        canvasCoordinates[1],
        {
          color,
          width: lineWidth,
          lineDash,
        }
      );

      // 绘制手柄
      const handleGroupUID = `${annotationUID}-handles`;
      drawHandles(
        svgDrawingHelper,
        annotationUID,
        handleGroupUID,
        canvasCoordinates,
        {
          color,
        }
      );

      // 绘制统计文本
      const stats = data.cachedStats?.[targetId];
      if (stats) {
        const textLines = [
          `平均: ${stats.mean}`,
          `最小: ${stats.min}`,
          `最大: ${stats.max}`,
          `长度: ${stats.lineLength.toFixed(2)}mm`,
        ];

        const textBoxPosition = data.textBox || canvasCoordinates[1];
        const textBoxUID = `${annotationUID}-text`;

        drawLinkedTextBox(
          svgDrawingHelper,
          annotationUID,
          textBoxUID,
          textLines,
          textBoxPosition,
          [canvasCoordinates[1]],
          {},
          {
            color,
          }
        );
      }
    }

    return true;
  };

}