dros/src/pages/view/components/viewers/stack.image.viewer.tsx

import React, { useEffect, useRef } from 'react';
import * as cornerstone from '@cornerstonejs/core';
import type { Types } from '@cornerstonejs/core';
import * as cornerstoneTools from '@cornerstonejs/tools';
import { annotation, SplineROITool } from '@cornerstonejs/tools';
import { eventTarget } from '@cornerstonejs/core';
import { registerGlobalTools } from '@/utils/cornerstoneToolsSetup';
import { MeasurementToolManager } from '@/utils/measurementToolManager';
import TibialPlateauAngleTool from '@/components/measures/TibialPlateauAngleTool';
import DARAMeasurementTool from '@/components/measures/DARAMeasurementTool';
import HipDIMeasurementTool from '@/components/measures/HipDIMeasurementTool';
import HipNHAAngleMeasurementTool from '@/components/measures/HipNHAAngleMeasurementTool';
import VHSMeasurementTool from '@/components/measures/VHSMeasurementTool';
import TPLOMeasurementTool from '@/components/measures/TPLOMeasurementTool';
import TTAMeasurementTool from '@/components/measures/TTAMeasurementTool';
import CBLOMeasurementTool from '@/components/measures/CBLOMeasurementTool';
import HipCoverageMeasurementTool from '@/components/measures/HipCoverageMeasurementTool';
import HipDorsalCoverageTool from '@/components/measures/HipDorsalCoverageTool';
import CircleCenterMeasurementTool from '@/components/measures/CircleCenterMeasurementTool';
import MidlineMeasurementTool from '@/components/measures/MidlineMeasurementTool';
import FindMidpointMeasurementTool from '@/components/measures/FindMidpointMeasurementTool';
import VerticalTiltMeasurementTool from '@/components/measures/VerticalTiltMeasurementTool';
import HorizontalTiltMeasurementTool from '@/components/measures/HorizontalTiltMeasurementTool';
import LineGrayscaleMeasurementTool from '@/components/measures/LineGrayscaleMeasurementTool';
import RectangleGrayscaleMeasurementTool from '@/components/measures/RectangleGrayscaleMeasurementTool';
import MaskTool from '@/components/tools/MaskTool';
import DicomOverlayTool from '@/components/overlay/DicomOverlayTool';
import ImageViewerErrorBoundary from './ImageViewerErrorBoundary';
import { boolean } from 'zod';
import { EVENTS } from '@cornerstonejs/core';
import { useSelector, useDispatch } from 'react-redux';
import { selectOverlayEnabled } from '@/states/view/dicomOverlaySlice';
import { initPlayback, setFrameDetectionResult } from '@/states/view/playbackSlice';
import PolygonLengthMeasurementTool from '@/components/measures/PolygonLengthMeasurementTool';
import PolylineLengthMeasurementTool from '@/components/measures/PolylineLengthMeasurementTool';
import { PlaybackController } from '@/pages/view/components/playback/PlaybackController';
import { FloatingPlaybackControls } from '@/pages/view/components/playback/FloatingPlaybackControls';
import { getIpPort } from '@/API/config';

const {
  MagnifyTool,
  PanTool,
  WindowLevelTool,
  StackScrollTool,
  ZoomTool,
  LabelTool,
  LengthTool,
  AngleTool,//角度测量工具
  ToolGroupManager,
  Enums: csToolsEnums,
  PlanarRotateTool,
} = cornerstoneTools;

// 导入 cursors 用于光标管理
import { cursors } from '@cornerstonejs/tools';
const { MouseBindings } = csToolsEnums;
// 全局工具状态变化监听器注册标志
let cursorResetListenerRegistered = false;
// let toolGroup: cornerstoneTools.Types.IToolGroup;
// let currentViewportId: string;

/**
 * 增强错误信息，添加更多上下文
 */
function enhanceError(
  error: unknown,
  context: {
    imageUrls: string[];
    imageIndex: number;
    viewportId: string;
  }
): Error {
  const baseError = error instanceof Error ? error : new Error(String(error));
  const { imageUrls, imageIndex, viewportId } = context;
  const contextInfo = {
    imageUrls,
    imageIndex,
    viewportId,
    timestamp: new Date().toISOString(),
    userAgent: navigator.userAgent
  };

  // 创建增强的错误消息
  const enhancedMessage = `[${context.viewportId}] 图像加载失败: ${baseError.message}
    上下文信息: ${JSON.stringify(contextInfo, null, 2)}`;

  const enhancedError = new Error(enhancedMessage);
  enhancedError.name = `ImageLoadError`;
  enhancedError.stack = `${enhancedError.name}: ${enhancedMessage}\n原错误堆栈: ${baseError.stack}`;

  return enhancedError;
}

/**
 * 判断是否为严重错误，需要抛出给 Error Boundary
 */
function isCriticalError(error: Error): boolean {
  const message = error.message.toLowerCase();

  // 以下类型的错误被认为是严重的，需要用户干预
  const criticalErrors = [
    '图像url列表为空',
    '图像索引无效',
    '401', // 认证失败
    '403', // 权限不足
    '404', // 文件不存在
    '500', // 服务器错误
    '认证失败',
    '权限不足',
    'unauthorized',
    'forbidden',
    'not found',
    'internal server error'
  ];

  return criticalErrors.some(keyword => message.includes(keyword));
}

function getToolgroupByViewportId(currentViewportId: string) {
  const toolGroup = ToolGroupManager.getToolGroup(
    `STACK_TOOL_GROUP_ID_${currentViewportId}`
  );
  if (!toolGroup) {
    console.log('toolGroup not found');
    throw new Error('Tool group not found');
  }
  return toolGroup;
}
function overlayRedRectangle(currentViewportId: string) {
  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
    .viewport as cornerstone.StackViewport;
  const viewportElement = viewport.element;
  const annotations = cornerstoneTools.annotation.state.getAnnotations(
    'LinearSplineROI',
    viewportElement
  );

  if (!annotations || annotations.length === 0) {
    console.log('No ROI annotations found');
    return;
  }

  const annotation = annotations[annotations.length - 1];
  const points = annotation?.data?.handles?.points;

  // 创建一个覆盖 Canvas
  const canvas = document.createElement('canvas');
  canvas.style.position = 'absolute';
  canvas.width = viewportElement.clientWidth;
  canvas.height = viewportElement.clientHeight;
  viewportElement.firstChild?.appendChild(canvas);

  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error('Failed to get 2D context from canvas');
  }
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';

  // 将 ROI 坐标转换为 Canvas 坐标
  if (!points) {
    console.log('No points found in handles');
    return;
  }

  // Convert all points to canvas coordinates
  const z = viewport.getCurrentImageIdIndex() || 0;
  const canvasPoints = points.map((point: Types.Point2 | Types.Point3) => {
    const point3D: Types.Point3 =
      point.length === 2 ? [point[0], point[1], z] : point;
    return viewport.worldToCanvas(point3D);
  });

  // Log for debugging
  console.log('Canvas Points:', canvasPoints);

  // Draw the polygon
  ctx.beginPath();
  ctx.rect(0, 0, canvas.width, canvas.height); // Full canvas for evenodd rule
  ctx.moveTo(canvasPoints[0][0], canvasPoints[0][1]); // Start at the first point
  for (let i = 1; i < canvasPoints.length; i++) {
    ctx.lineTo(canvasPoints[i][0], canvasPoints[i][1]); // Connect to subsequent points
  }
  ctx.closePath(); // Close the polygon
  ctx.fill('evenodd'); // Fill with red
}

function registerTools(viewportId, renderingEngineId) {
  // 确保全局工具已注册（只会执行一次）
  registerGlobalTools();

  // 创建该 viewport 的工具组
  const toolGroupId = `STACK_TOOL_GROUP_ID_${viewportId}`;

  // 检查工具组是否已存在
  let toolGroup = ToolGroupManager.getToolGroup(toolGroupId);

  if (toolGroup) {
    // 工具组已存在 - 需要重新绑定到新的视口元素
    console.log(`[registerTools] Tool group already exists, re-binding viewport: ${viewportId}`);

    try {
      // 移除旧的视口绑定（清理过时的引用）
      toolGroup.removeViewports(renderingEngineId, viewportId);
      console.log(`[registerTools] Removed old viewport binding`);
    } catch (error) {
      console.warn(`[registerTools] Failed to remove old viewport binding:`, error);
    }

    // 重新添加视口到工具组（创建新的绑定）
    toolGroup.addViewport(viewportId, renderingEngineId);
    console.log(`[registerTools] Re-added viewport to tool group`);

    return; // 重新绑定完成，退出
  }

  // 工具组不存在 - 创建新的工具组
  const toolGroupTmp = ToolGroupManager.createToolGroup(toolGroupId);
  if (!toolGroupTmp) {
    console.error(
      `[registerTools] Failed to create tool group for viewport: ${viewportId}`
    );
    return;
  }
  toolGroup = toolGroupTmp;

  // 添加工具到工具组
  toolGroup.addTool(MagnifyTool.toolName);
  toolGroup.addTool(PanTool.toolName);
  toolGroup.addTool(WindowLevelTool.toolName);
  toolGroup.addTool(StackScrollTool.toolName);
  toolGroup.addTool(ZoomTool.toolName);
  toolGroup.addTool(LabelTool.toolName);
  toolGroup.addTool(PlanarRotateTool.toolName);
  toolGroup.addTool(LengthTool.toolName); // 添加线段测量工具
  toolGroup.addTool(AngleTool.toolName); // 添加角度测量工具
  toolGroup.addTool(TibialPlateauAngleTool.toolName); // 添加胫骨平台夹角测量工具
  toolGroup.addTool(DARAMeasurementTool.toolName); // 添加髋臼水平角测量工具
  toolGroup.addTool(HipDIMeasurementTool.toolName); // 添加髋关节牵引指数测量工具
  toolGroup.addTool(HipNHAAngleMeasurementTool.toolName); // 添加髋关节水平角测量工具
  toolGroup.addTool(VHSMeasurementTool.toolName); // 添加心锥比测量工具
  toolGroup.addTool(TPLOMeasurementTool.toolName); // 添加TPLO测量工具
  toolGroup.addTool(TTAMeasurementTool.toolName); // 添加TTA测量工具
  toolGroup.addTool(CBLOMeasurementTool.toolName); // 添加CBLO测量工具
  toolGroup.addTool(HipCoverageMeasurementTool.toolName); // 添加股骨头覆盖率测量工具
  toolGroup.addTool(HipDorsalCoverageTool.toolName); // 添加髋臼背覆盖测量工具
  toolGroup.addTool(CircleCenterMeasurementTool.toolName); // 添加找圆心测量工具
  toolGroup.addTool(MidlineMeasurementTool.toolName); // 添加找中线测量工具
  toolGroup.addTool(FindMidpointMeasurementTool.toolName); // 添加找中点测量工具
  toolGroup.addTool(VerticalTiltMeasurementTool.toolName); // 添加直线垂直倾斜度测量工具
  toolGroup.addTool(HorizontalTiltMeasurementTool.toolName); // 添加直线水平倾斜度测量工具
  toolGroup.addTool(DicomOverlayTool.toolName); // 添加DICOM四角信息显示工具
  toolGroup.addTool(PolygonLengthMeasurementTool.toolName); // 添加多边形长度测量工具
  toolGroup.addTool(PolylineLengthMeasurementTool.toolName); // 添加拆线长度测量工具
  toolGroup.addTool(LineGrayscaleMeasurementTool.toolName); // 添加直线灰度测量工具
  toolGroup.addTool(RectangleGrayscaleMeasurementTool.toolName); // 添加矩形区域灰度测量工具
  toolGroup.addTool(MaskTool.toolName); // 添加掩码工具

  // 设置默认工具状态
  setupDefaultToolStates(toolGroup);

  // 添加 viewport 到工具组
  toolGroup.addViewport(viewportId, renderingEngineId);

  // 添加全局工具模式变化监听器，自动重置光标（当前项目中使用一对一映射）
  if (!cursorResetListenerRegistered) {
    eventTarget.addEventListener(
      cornerstoneTools.Enums.Events.TOOL_MODE_CHANGED,
      (event) => {
        // 检查是否有活动工具，当前一对一映射设计只关注全局活动工具状态
        const allToolGroups = ToolGroupManager.getAllToolGroups();

        let hasActiveTool = false;
        for (const toolGroup of allToolGroups) {
          if (toolGroup.getActivePrimaryMouseButtonTool()) {
            hasActiveTool = true;
            break;
          }
        }

        if (!hasActiveTool) {
          // 没有活动工具时，重置所有视口光标为默认（适用于当前一对一设计）
          for (const toolGroup of allToolGroups) {
            const viewportIds = toolGroup.getViewportIds();
            viewportIds.forEach(viewportId => {
              try {
                const enabledElement = cornerstone.getEnabledElementByViewportId(viewportId);
                if (enabledElement?.viewport.element) {
                  enabledElement.viewport.element.style.cursor = 'default';
                }
              } catch (error) {
                // 忽略错误，可能视口已被销毁
              }
            });
          }
        }
      }
    );
    cursorResetListenerRegistered = true; // 防止重复注册
  }

  console.log(`[registerTools] Tools registered for viewport: ${viewportId}`);
}

/**
 * 设置默认工具状态
 */
function setupDefaultToolStates(toolGroup: cornerstoneTools.Types.IToolGroup) {
  // 设置平移工具（中键）
  toolGroup.setToolActive(PanTool.toolName, {
    bindings: [
      {
        mouseButton: MouseBindings.Auxiliary, // Middle Click
      },
    ],
  });

  // 设置缩放工具（右键）
  toolGroup.setToolActive(ZoomTool.toolName, {
    bindings: [
      {
        mouseButton: MouseBindings.Secondary, // Right Click
      },
    ],
  });

  // 设置滚轮滚动工具
  toolGroup.setToolActive(StackScrollTool.toolName, {
    bindings: [
      {
        mouseButton: MouseBindings.Wheel, // Mouse Wheel
      },
    ],
  });

  // 其他工具默认为被动状态
  toolGroup.setToolPassive(MagnifyTool.toolName);
  toolGroup.setToolPassive(WindowLevelTool.toolName);
  toolGroup.setToolPassive(LabelTool.toolName);
  toolGroup.setToolPassive(PlanarRotateTool.toolName);
  toolGroup.setToolPassive(LengthTool.toolName);
  toolGroup.setToolPassive(AngleTool.toolName);
  toolGroup.setToolPassive(TibialPlateauAngleTool.toolName);
  toolGroup.setToolPassive(DARAMeasurementTool.toolName);
  toolGroup.setToolPassive(HipDIMeasurementTool.toolName);
  toolGroup.setToolPassive(HipNHAAngleMeasurementTool.toolName);
  toolGroup.setToolPassive(VHSMeasurementTool.toolName);
  toolGroup.setToolPassive(TPLOMeasurementTool.toolName);
  toolGroup.setToolPassive(TTAMeasurementTool.toolName);
  toolGroup.setToolPassive(CBLOMeasurementTool.toolName);
  toolGroup.setToolPassive(HipCoverageMeasurementTool.toolName);
  toolGroup.setToolPassive(HipDorsalCoverageTool.toolName);
  toolGroup.setToolPassive(CircleCenterMeasurementTool.toolName);
  toolGroup.setToolPassive(MidlineMeasurementTool.toolName);
  toolGroup.setToolPassive(FindMidpointMeasurementTool.toolName);
  toolGroup.setToolPassive(VerticalTiltMeasurementTool.toolName);
  toolGroup.setToolPassive(HorizontalTiltMeasurementTool.toolName);
  toolGroup.setToolPassive(PolygonLengthMeasurementTool.toolName);
  toolGroup.setToolPassive(PolylineLengthMeasurementTool.toolName);
  toolGroup.setToolPassive(LineGrayscaleMeasurementTool.toolName);
  toolGroup.setToolPassive(RectangleGrayscaleMeasurementTool.toolName);
  toolGroup.setToolPassive(MaskTool.toolName);
}
export function addLMark(currentViewportId: string): void {
  // Implement the logic to add an L mark
  console.log('Adding L Mark viewport id : ', currentViewportId);
  const toolGroup = getToolgroupByViewportId(currentViewportId);
  // currentViewportId = viewportId;
  toolGroup.setToolActive(LabelTool.toolName, {
    bindings: [
      // {
      //   mouseButton: MouseBindings.Primary, // Left Click
      // },
    ],
  });
  const position: Types.Point3 = [100, 100, 0]; // Example position
  const text = 'L'; // Predefined text
  LabelTool.hydrate(currentViewportId, position, text);
  toolGroup.setToolPassive(LabelTool.toolName, {
    removeAllBindings: true,
  });
  // const enabledElement = cornerstone.getEnabledElementByViewportId(currentViewportId);
  // cursors.elementCursor.resetElementCursor(elementRef.current as HTMLDivElement);
}
export function addRLabel(viewportId) {
  const toolGroup = getToolgroupByViewportId(viewportId);
  toolGroup.setToolActive(LabelTool.toolName, {
    bindings: [],
  });
  const element = document.getElementById(viewportId);
  const elementHeight = element ? element.getBoundingClientRect().height : 0;
  const position: Types.Point3 = [100, elementHeight / 2, 0]; // Example position
  const text = 'R'; // Predefined text
  LabelTool.hydrate(viewportId, position, text);
  toolGroup.setToolPassive(LabelTool.toolName, { removeAllBindings: true });
}

export function adjustBrightnessAndContrast(currentViewportId: string) {
  const toolGroup = getToolgroupByViewportId(currentViewportId);
  const planar = toolGroup.getToolInstance(WindowLevelTool.toolName); // Reset rotation angle
  const isActive = planar.mode === csToolsEnums.ToolModes.Active;
  if (isActive) {
    toolGroup.setToolPassive(WindowLevelTool.toolName, {
      removeAllBindings: true,
    });
  } else {
    toolGroup.setToolActive(WindowLevelTool.toolName, {
      bindings: [
        {
          mouseButton: MouseBindings.Primary, // Left Click
        },
      ],
    });
  }
}

/**
 * 防抖工具函数
 * @param func 要防抖的函数
 * @param wait 等待时间（毫秒）
 * @returns 防抖后的函数
 */
function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout | null = null;
  return (...args: Parameters<T>) => {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

function containImage(viewport: cornerstone.StackViewport) {
  viewport.getRenderingEngine().resize(/* immediate */ true);
  console.log(`使用 resetCamera方式`)
  viewport.resetCamera({ resetPan: true, resetZoom: true }); // 重置 pan/zoom 到 contain
  viewport.render();
}

/**
 * 保持宽高比的图像适应函数
 * 确保图像完全显示在容器内，同时保持原始宽高比（可能会有黑边）
 * @param currentViewportId 当前视口ID
 */
export function fitImageWithAspectRatio(currentViewportId: string): void {
  try {
    console.log(`[fitImageWithAspectRatio] 重新适配大小`)
    const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
      .viewport as cornerstone.StackViewport;

    if (!viewport) {
      console.warn(`[fitImageWithAspectRatio] Viewport not found: ${currentViewportId}`);
      return;
    }
    containImage(viewport)

  } catch (error) {
    console.error(`[fitImageWithAspectRatio] Error fitting image with aspect ratio:`, error);
  }
}

export function fitImageSize(currentViewportId: string) {
  // 使用新的保持宽高比的适应函数
  fitImageWithAspectRatio(currentViewportId);
}

export function deleteSelectedMark(currentViewportId: string): void {
  const viewport =
    cornerstone.getEnabledElementByViewportId(currentViewportId).viewport;
  const allAnnotations = cornerstoneTools.annotation.state.getAllAnnotations();

  // 删除所有 LabelTool 创建的标记（包括 L/R 标记、预定义标记、自定义标记、时间戳标记）
  for (const annotation of allAnnotations) {
    if (annotation.metadata?.toolName === LabelTool.toolName) {
      cornerstoneTools.annotation.state.removeAnnotation(
        annotation.annotationUID!
      );
    }
  }

  viewport.render();
}

export function addMark(currentViewportId: string): void {
  // Implement the logic to add a mask
  console.log('Adding Mask');
  // Add the specific logic to add a mask here
  cornerstoneTools.addTool(SplineROITool);
  const toolGroup = getToolgroupByViewportId(currentViewportId);
  toolGroup.addTool(SplineROITool.toolName);
  toolGroup.addToolInstance('LinearSplineROI', SplineROITool.toolName, {
    spline: {
      type: SplineROITool.SplineTypes.Linear,
    },
  });
  toolGroup.setToolActive('LinearSplineROI', {
    bindings: [{ mouseButton: MouseBindings.Primary }],
  });
}

/**
 * 添加自定义文本标记到图像
 */
export function addCustomMark(currentViewportId: string, text: string): void {
  console.log(`Adding custom mark: ${text} to viewport: ${currentViewportId}`);

  const toolGroup = getToolgroupByViewportId(currentViewportId);

  // 激活标签工具
  toolGroup.setToolActive(LabelTool.toolName, {
    bindings: [],
  });

  // 获取视口元素和位置
  const element = document.getElementById(currentViewportId);
  if (!element) {
    console.error(`Element not found for viewport: ${currentViewportId}`);
    return;
  }

  // 计算标记位置（图像中心位置）
  const elementHeight = element.getBoundingClientRect().height;
  const elementWidth = element.getBoundingClientRect().width;
  const position: Types.Point3 = [elementWidth / 2, elementHeight / 2, 0];

  // 添加标签
  LabelTool.hydrate(currentViewportId, position, text);

  // 恢复工具状态
  toolGroup.setToolPassive(LabelTool.toolName, {
    removeAllBindings: true,
  });

  console.log(`Custom mark "${text}" added successfully`);
}

export function remoteMask(currentViewportId: string): void {
  // 1. 获取所有 annotation
  const all = annotation.state.getAllAnnotations();

  // 2. 过滤出 LinearSplineROI 产生的
  const toRemove = all.filter(
    (a) => a.metadata?.toolName === 'LinearSplineROI'
  );

  // 3. 逐条删掉
  toRemove.forEach((a) => {
    if (a.annotationUID) {
      annotation.state.removeAnnotation(a.annotationUID);
    }
  });
  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
    .viewport as cornerstone.StackViewport;
  viewport.render();

  console.log('Deleting Digital Mask');

  const viewportElement = viewport.element;
  const firstChild = viewportElement.firstChild;
  if (firstChild) {
    const canvasElements = Array.from(firstChild.childNodes).filter(
      (child): child is Element =>
        child instanceof Element && child.tagName === 'CANVAS'
    );
    canvasElements.slice(1).forEach((canvas) => {
      firstChild.removeChild(canvas);
    });
  }
}
export function HorizontalFlip(currentViewportId: string): void {
  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
    .viewport as cornerstone.StackViewport;
  // 切换水平翻转状态
  const { flipHorizontal } = viewport.getCamera();
  viewport.setCamera({ flipHorizontal: !flipHorizontal });
  console.log('Flipping Image Horizontally');
}

export function VerticalFlip(currentViewportId: string): void {
  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
    .viewport as cornerstone.StackViewport;
  // 切换竖直翻转状态
  const { flipVertical } = viewport.getCamera();
  viewport.setCamera({ flipVertical: !flipVertical });
}


export function RotateCounterclockwise90(currentViewportId: string): void {
  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
    .viewport as cornerstone.StackViewport;
  // 获取当前相机
  const camera = viewport.getCamera();

  // 计算新的旋转角度（当前角度 + 90度）
  const newRotation = (camera.rotation ?? 0) + 90;

  // 但计算viewUp向量时，我们应该使用90度的弧度，而不是新角度的弧度！
  const ninetyDegreesRadians = (90 * Math.PI) / 180;

  // 获取当前的viewUp向量
  const currentViewUp = camera.viewUp || [0, 1, 0];

  // 计算旋转后的viewUp向量（这才是正确的相对旋转）
  const newViewUp: [number, number, number] = [
    currentViewUp[0] * Math.cos(ninetyDegreesRadians) -
    currentViewUp[1] * Math.sin(ninetyDegreesRadians),
    currentViewUp[0] * Math.sin(ninetyDegreesRadians) +
    currentViewUp[1] * Math.cos(ninetyDegreesRadians),
    0,
  ];

  // 设置新的相机参数
  viewport.setCamera({
    ...camera,
    viewUp: newViewUp,
    rotation: newRotation % 360, // 确保角度在0-359范围内
  });

  viewport.render();

  console.log('Rotating Image Counterclockwise 90°');
}

export function RotateClockwise90(currentViewportId: string): void {
  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
    .viewport as cornerstone.StackViewport;
  const camera = viewport.getCamera();
  // 计算新的旋转角度（当前角度 - 90度）
  const newRotation = (camera.rotation ?? 0) - 90;

  // 但计算viewUp向量时，我们应该使用90度的弧度，而不是新角度的弧度！
  const ninetyDegreesRadians = (90 * Math.PI) / 180;

  // 获取当前的viewUp向量
  const currentViewUp = camera.viewUp || [0, 1, 0];

  // 计算顺时针旋转90度的viewUp向量（与逆时针相反）
  const newViewUp: [number, number, number] = [
    currentViewUp[0] * Math.cos(ninetyDegreesRadians) +
    currentViewUp[1] * Math.sin(ninetyDegreesRadians),
    -currentViewUp[0] * Math.sin(ninetyDegreesRadians) +
    currentViewUp[1] * Math.cos(ninetyDegreesRadians),
    0,
  ];

  // 设置新的相机参数
  viewport.setCamera({
    ...camera,
    viewUp: newViewUp,
    rotation: newRotation % 360, // 确保角度在0-359范围内
  });

  viewport.render();
  console.log('Rotating Image Clockwise 90°');
}

export function ResetImage(currentViewportId: string): void {
  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
    .viewport as cornerstone.StackViewport;

  // 获取当前图像ID以访问原始元数据
  const currentImageId = viewport.getCurrentImageId();

  // 计算正确的原始invert值
  // 不能直接使用 viewport.getProperties().invert,因为"反色对比"功能会修改它
  // 需要从图像的原始元数据中获取 photometricInterpretation
  let correctOriginalInvert = false; // 默认值

  try {
    // 从Cornerstone缓存中获取图像对象
    const image = cornerstone.cache.getImage(currentImageId) as any;

    if (image) {
      // 方法1: 从图像的metadata中获取photometricInterpretation
      const photometricInterpretation =
        image.photometricInterpretation ||
        image.metadata?.dicomMetadata?.image?.photometricInterpretation ||
        image.imageFrame?.photometricInterpretation;

      // MONOCHROME1需要invert=true才能正确显示
      if (photometricInterpretation === 'MONOCHROME1') {
        correctOriginalInvert = true;
      }

      console.log('从图像元数据解析原始invert值', {
        imageId: currentImageId,
        photometricInterpretation,
        correctOriginalInvert
      });
    } else {
      console.warn('无法从缓存获取图像,使用默认invert值');
    }
  } catch (error) {
    console.warn('获取图像元数据失败,使用默认invert值', error);
  }

  // 重置相机设置(缩放、平移、旋转等)
  viewport.resetCamera();

  // 重置视口属性
  viewport.resetProperties();

  // ⚠️ 重要发现：resetProperties() 后需要使用反转的 invert 值
  // 
  // 原因分析：
  // 1. 初始加载时：MONOCHROME1 图像使用 invert=true 正常显示
  // 2. resetProperties() 后：渲染管线状态改变，需要 invert=false 才能正常显示
  // 3. 这可能与 resetProperties() 重置了 VOI LUT 或其他影响渲染的属性有关
  // 
  // 因此：
  // - MONOCHROME1 (correctOriginalInvert=true) → 设置 invert=false
  // - MONOCHROME2 (correctOriginalInvert=false) → 设置 invert=true
  // 
  // 这个行为虽然反直觉，但经过实际验证是正确的
  viewport.setProperties({ invert: !correctOriginalInvert });

  viewport.render();

  console.log('Resetting Image', {
    imageId: currentImageId,
    restoredInvert: correctOriginalInvert
  });
}

export function InvertImage(currentViewportId: string): void {
  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
    .viewport as cornerstone.StackViewport;
  // Implement the logic to invert the image
  const invert = !viewport.getProperties().invert;
  viewport.setProperties({ invert });
  viewport.render();
  console.log('Inverting Image');
}

export function setOriginalSize(currentViewportId: string) {
  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
    .viewport as cornerstone.StackViewport;
  
  // 1) 先reset到fit状态
  viewport.resetCamera();

  // 2) 计算像素级1:1需要的zoom(完全忽略spacing!)
  const { dimensions } = viewport.getImageData();
  const canvas = viewport.canvas;

  // fit状态下,图像缩放到canvas的比例
  const fitScale = Math.min(
    canvas.clientWidth / dimensions[0],
    canvas.clientHeight / dimensions[1]
  );
  
  // 要达到像素级1:1,需要的zoom = 1 / fitScale
  const finalZoom = 1 / fitScale;
  
  console.log(`[setOriginalSize] Pixel-perfect 1:1 zoom calculation:`);
  console.log(`  - Image dimensions: ${dimensions[0]}x${dimensions[1]}`);
  console.log(`  - Canvas size: ${canvas.clientWidth}x${canvas.clientHeight}`);
  console.log(`  - Fit scale: ${fitScale.toFixed(4)}`);
  console.log(`  - Final zoom (1:1): ${finalZoom.toFixed(4)}`);
  
  viewport.setZoom(finalZoom);
  viewport.render();
}

export function activateMagnifier(currentViewportId: string) {
  console.log('Activating Magnifier');
  const toolGroup = getToolgroupByViewportId(currentViewportId);
  const isActive =
    toolGroup.getActivePrimaryMouseButtonTool() === MagnifyTool.toolName;
  if (isActive) {
    toolGroup.setToolPassive(MagnifyTool.toolName, {
      removeAllBindings: true,
    });
  } else {
    toolGroup.setToolActive(MagnifyTool.toolName, {
      bindings: [
        {
          mouseButton: MouseBindings.Primary, // Left Click
        },
      ],
    });
  }
}

export function invertContrast(currentViewportId: string) {
  const viewport =
    cornerstone.getEnabledElementByViewportId(currentViewportId).viewport;
  const targetBool = !viewport.getProperties().invert;
  viewport.setProperties({
    invert: targetBool,
  });
  viewport.render();
}

export function rotateAnyAngle(currentViewportId: string) {
  const toolGroup = getToolgroupByViewportId(currentViewportId);
  const planar = toolGroup.getToolInstance(PlanarRotateTool.toolName); // Reset rotation angle
  const isActive = planar.mode === csToolsEnums.ToolModes.Active;
  console.log(
    `PlanarRotateTool is currently ${isActive ? 'active' : 'inactive'}`
  );
  if (isActive) {
    toolGroup.setToolPassive(PlanarRotateTool.toolName, {
      removeAllBindings: true,
    });
  } else {
    toolGroup.setToolActive(PlanarRotateTool.toolName, {
      bindings: [
        {
          mouseButton: MouseBindings.Primary, // Left Click
        },
      ],
    });
  }
  console.log('Rotating Image by Any Angle');
}

// ==================== 线段测量相关函数 ====================

/**
 * 激活线段测量工具
 */
export function activateLengthMeasurement(viewportId: string): boolean {
  console.log(
    `[activateLengthMeasurement] Activating length measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.activateLengthTool(viewportId);
}

/**
 * 停用线段测量工具
 */
export function deactivateLengthMeasurement(viewportId: string): boolean {
  console.log(
    `[deactivateLengthMeasurement] Deactivating length measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.deactivateLengthTool(viewportId);
}

/**
 * 切换线段测量工具状态
 */
export function toggleLengthMeasurement(viewportId: string): boolean {
  console.log(
    `[toggleLengthMeasurement] Toggling length measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.toggleLengthTool(viewportId);
}

/**
 * 清除线段测量标注
 */
export function clearLengthMeasurements(viewportId: string): boolean {
  console.log(
    `[clearLengthMeasurements] Clearing length measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.clearLengthMeasurements(viewportId);
}

/**
 * 获取线段测量结果
 */
// eslint-disable-next-line
export function getLengthMeasurements(viewportId: string): any[] {
  console.log(
    `[getLengthMeasurements] Getting length measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.getLengthMeasurements(viewportId);
}

/**
 * 检查线段测量工具是否激活
 */
export function isLengthMeasurementActive(viewportId: string): boolean {
  return MeasurementToolManager.isLengthToolActive(viewportId);
}

// ==================== 角度测量相关函数 ====================

/**
 * 激活角度测量工具
 */
export function activateAngleMeasurement(viewportId: string): boolean {
  console.log(
    `[activateAngleMeasurement] Activating angle measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.activateAngleTool(viewportId);
}

/**
 * 停用角度测量工具
 */
export function deactivateAngleMeasurement(viewportId: string): boolean {
  console.log(
    `[deactivateAngleMeasurement] Deactivating angle measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.deactivateAngleTool(viewportId);
}

/**
 * 切换角度测量工具状态
 */
export function toggleAngleMeasurement(viewportId: string): boolean {
  console.log(
    `[toggleAngleMeasurement] Toggling angle measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.toggleAngleTool(viewportId);
}

/**
 * 清除角度测量标注
 */
export function clearAngleMeasurements(viewportId: string): boolean {
  console.log(
    `[clearAngleMeasurements] Clearing angle measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.clearAngleMeasurements(viewportId);
}

/**
 * 获取角度测量结果
 */
// eslint-disable-next-line
export function getAngleMeasurements(viewportId: string): any[] {
  console.log(
    `[getAngleMeasurements] Getting angle measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.getAngleMeasurements(viewportId);
}

/**
 * 检查角度测量工具是否激活
 */
export function isAngleMeasurementActive(viewportId: string): boolean {
  return MeasurementToolManager.isAngleToolActive(viewportId);
}

// ==================== 胫骨平台夹角测量相关函数 ====================

/**
 * 激活胫骨平台夹角测量工具
 */
export function activateTibialPlateauAngleMeasurement(viewportId: string): boolean {
  console.log(
    `[activateTibialPlateauAngleMeasurement] Activating TPA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.activateTibialPlateauAngleTool(viewportId);
}

/**
 * 停用胫骨平台夹角测量工具
 */
export function deactivateTibialPlateauAngleMeasurement(viewportId: string): boolean {
  console.log(
    `[deactivateTibialPlateauAngleMeasurement] Deactivating TPA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.deactivateTibialPlateauAngleTool(viewportId);
}

/**
 * 切换胫骨平台夹角测量工具状态
 */
export function toggleTibialPlateauAngleMeasurement(viewportId: string): boolean {
  console.log(
    `[toggleTibialPlateauAngleMeasurement] Toggling TPA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.toggleTibialPlateauAngleTool(viewportId);
}

/**
 * 清除胫骨平台夹角测量标注
 */
export function clearTibialPlateauAngleMeasurements(viewportId: string): boolean {
  console.log(
    `[clearTibialPlateauAngleMeasurements] Clearing TPA measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.clearTibialPlateauAngleMeasurements(viewportId);
}

/**
 * 获取胫骨平台夹角测量结果
 */
// eslint-disable-next-line
export function getTibialPlateauAngleMeasurements(viewportId: string): any[] {
  console.log(
    `[getTibialPlateauAngleMeasurements] Getting TPA measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.getTibialPlateauAngleMeasurements(viewportId);
}

/**
 * 检查胫骨平台夹角测量工具是否激活
 */
export function isTibialPlateauAngleMeasurementActive(viewportId: string): boolean {
  return MeasurementToolManager.isTibialPlateauAngleToolActive(viewportId);
}

// ==================== 髋臼水平角测量相关函数 ====================

/**
 * 激活髋臼水平角测量工具
 */
export function activateDARAMeasurement(viewportId: string): boolean {
  console.log(
    `[activateDARAMeasurement] Activating DARA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.activateDARAMeasurementTool(viewportId);
}

/**
 * 停用髋臼水平角测量工具
 */
export function deactivateDARAMeasurement(viewportId: string): boolean {
  console.log(
    `[deactivateDARAMeasurement] Deactivating DARA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.deactivateDARAMeasurementTool(viewportId);
}

/**
 * 切换髋臼水平角测量工具状态
 */
export function toggleDARAMeasurement(viewportId: string): boolean {
  console.log(
    `[toggleDARAMeasurement] Toggling DARA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.toggleDARAMeasurementTool(viewportId);
}

/**
 * 清除髋臼水平角测量标注
 */
export function clearDARAMeasurements(viewportId: string): boolean {
  console.log(
    `[clearDARAMeasurements] Clearing DARA measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.clearDARAMeasurements(viewportId);
}

/**
 * 获取髋臼水平角测量结果
 */
// eslint-disable-next-line
export function getDARAMeasurements(viewportId: string): any[] {
  console.log(
    `[getDARAMeasurements] Getting DARA measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.getDARAMeasurements(viewportId);
}

/**
 * 检查髋臼水平角测量工具是否激活
 */
export function isDARAMeasurementActive(viewportId: string): boolean {
  return MeasurementToolManager.isDARAMeasurementToolActive(viewportId);
}

// ==================== 髋关节牵引指数测量相关函数 ====================

/**
 * 激活髋关节牵引指数测量工具
 */
export function activateHipDIMeasurement(viewportId: string): boolean {
  console.log(
    `[activateHipDIMeasurement] Activating HipDI measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.activateHipDIMeasurementTool(viewportId);
}

/**
 * 停用髋关节牵引指数测量工具
 */
export function deactivateHipDIMeasurement(viewportId: string): boolean {
  console.log(
    `[deactivateHipDIMeasurement] Deactivating HipDI measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.deactivateHipDIMeasurementTool(viewportId);
}

/**
 * 切换髋关节牵引指数测量工具状态
 */
export function toggleHipDIMeasurement(viewportId: string): boolean {
  console.log(
    `[toggleHipDIMeasurement] Toggling HipDI measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.toggleHipDIMeasurementTool(viewportId);
}

/**
 * 清除髋关节牵引指数测量标注
 */
export function clearHipDIMeasurements(viewportId: string): boolean {
  console.log(
    `[clearHipDIMeasurements] Clearing HipDI measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.clearHipDIMeasurements(viewportId);
}

/**
 * 获取髋关节牵引指数测量结果
 */
// eslint-disable-next-line
export function getHipDIMeasurements(viewportId: string): any[] {
  console.log(
    `[getHipDIMeasurements] Getting HipDI measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.getHipDIMeasurements(viewportId);
}

/**
 * 检查髋关节牵引指数测量工具是否激活
 */
export function isHipDIMeasurementActive(viewportId: string): boolean {
  return MeasurementToolManager.isHipDIMeasurementToolActive(viewportId);
}

// ==================== 髋关节水平角测量相关函数 ====================

/**
 * 激活髋关节水平角测量工具
 */
export function activateHipNHAAngleMeasurement(viewportId: string): boolean {
  console.log(
    `[activateHipNHAAngleMeasurement] Activating HipNHA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.activateHipNHAAngleMeasurementTool(viewportId);
}

/**
 * 停用髋关节水平角测量工具
 */
export function deactivateHipNHAAngleMeasurement(viewportId: string): boolean {
  console.log(
    `[deactivateHipNHAAngleMeasurement] Deactivating HipNHA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.deactivateHipNHAAngleMeasurementTool(viewportId);
}

/**
 * 切换髋关节水平角测量工具状态
 */
export function toggleHipNHAAngleMeasurement(viewportId: string): boolean {
  console.log(
    `[toggleHipNHAAngleMeasurement] Toggling HipNHA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.toggleHipNHAAngleMeasurementTool(viewportId);
}

/**
 * 清除髋关节水平角测量标注
 */
export function clearHipNHAAngleMeasurements(viewportId: string): boolean {
  console.log(
    `[clearHipNHAAngleMeasurements] Clearing HipNHA measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.clearHipNHAAngleMeasurements(viewportId);
}

/**
 * 获取髋关节水平角测量结果
 */
// eslint-disable-next-line
export function getHipNHAAngleMeasurements(viewportId: string): any[] {
  console.log(
    `[getHipNHAAngleMeasurements] Getting HipNHA measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.getHipNHAAngleMeasurements(viewportId);
}

/**
 * 检查髋关节水平角测量工具是否激活
 */
export function isHipNHAAngleMeasurementActive(viewportId: string): boolean {
  return MeasurementToolManager.isHipNHAAngleMeasurementToolActive(viewportId);
}

// ==================== TPLO测量相关函数 ====================

/**
 * 激活TPLO测量工具
 */
export function activateTPLOMeasurement(viewportId: string): boolean {
  console.log(
    `[activateTPLOMeasurement] Activating TPLO measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.activateTPLOMeasurementTool(viewportId);
}

/**
 * 停用TPLO测量工具
 */
export function deactivateTPLOMeasurement(viewportId: string): boolean {
  console.log(
    `[deactivateTPLOMeasurement] Deactivating TPLO measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.deactivateTPLOMeasurementTool(viewportId);
}

/**
 * 切换TPLO测量工具状态
 */
export function toggleTPLOMeasurement(viewportId: string): boolean {
  console.log(
    `[toggleTPLOMeasurement] Toggling TPLO measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.toggleTPLOMeasurementTool(viewportId);
}

/**
 * 清除TPLO测量标注
 */
export function clearTPLOMeasurements(viewportId: string): boolean {
  console.log(
    `[clearTPLOMeasurements] Clearing TPLO measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.clearTPLOMeasurements(viewportId);
}

/**
 * 获取TPLO测量结果
 */
// eslint-disable-next-line
export function getTPLOMeasurements(viewportId: string): any[] {
  console.log(
    `[getTPLOMeasurements] Getting TPLO measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.getTPLOMeasurements(viewportId);
}

/**
 * 检查TPLO测量工具是否激活
 */
export function isTPLOMeasurementActive(viewportId: string): boolean {
  return MeasurementToolManager.isTPLOMeasurementToolActive(viewportId);
}

// ==================== TTA测量相关函数 ====================

/**
 * 激活TTA测量工具
 */
export function activateTTAMeasurement(viewportId: string): boolean {
  console.log(
    `[activateTTAMeasurement] Activating TTA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.activateTTAMeasurementTool(viewportId);
}

/**
 * 停用TTA测量工具
 */
export function deactivateTTAMeasurement(viewportId: string): boolean {
  console.log(
    `[deactivateTTAMeasurement] Deactivating TTA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.deactivateTTAMeasurementTool(viewportId);
}

/**
 * 切换TTA测量工具状态
 */
export function toggleTTAMeasurement(viewportId: string): boolean {
  console.log(
    `[toggleTTAMeasurement] Toggling TTA measurement for viewport: ${viewportId}`
  );
  return MeasurementToolManager.toggleTTAMeasurementTool(viewportId);
}

/**
 * 清除TTA测量标注
 */
export function clearTTAMeasurements(viewportId: string): boolean {
  console.log(
    `[clearTTAMeasurements] Clearing TTA measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.clearTTAMeasurements(viewportId);
}

/**
 * 获取TTA测量结果
 */
// eslint-disable-next-line
export function getTTAMeasurements(viewportId: string): any[] {
  console.log(
    `[getTTAMeasurements] Getting TTA measurements for viewport: ${viewportId}`
  );
  return MeasurementToolManager.getTTAMeasurements(viewportId);
}

/**
 * 检查TTA测量工具是否激活
 */
export function isTTAMeasurementActive(viewportId: string): boolean {
  return MeasurementToolManager.isTTAMeasurementToolActive(viewportId);
}

// ==================== CBLO测量相关函数 ====================

export function activateCBLOMeasurement(viewportId: string): boolean {
  console.log(`[activateCBLOMeasurement] Activating CBLO measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateCBLOMeasurementTool(viewportId);
}

export function deactivateCBLOMeasurement(viewportId: string): boolean {
  console.log(`[deactivateCBLOMeasurement] Deactivating CBLO measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateCBLOMeasurementTool(viewportId);
}

export function clearCBLOMeasurements(viewportId: string): boolean {
  console.log(`[clearCBLOMeasurements] Clearing CBLO measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearCBLOMeasurements(viewportId);
}

// ==================== HipCoverage测量相关函数 ====================

export function activateHipCoverageMeasurement(viewportId: string): boolean {
  console.log(`[activateHipCoverageMeasurement] Activating HipCoverage measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateHipCoverageMeasurementTool(viewportId);
}

export function deactivateHipCoverageMeasurement(viewportId: string): boolean {
  console.log(`[deactivateHipCoverageMeasurement] Deactivating HipCoverage measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateHipCoverageMeasurementTool(viewportId);
}

export function clearHipCoverageMeasurements(viewportId: string): boolean {
  console.log(`[clearHipCoverageMeasurements] Clearing HipCoverage measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearHipCoverageMeasurements(viewportId);
}

// ==================== HipDorsalCoverage测量相关函数 ====================

export function activateHipDorsalCoverageMeasurement(viewportId: string): boolean {
  console.log(`[activateHipDorsalCoverageMeasurement] Activating HipDorsalCoverage measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateHipDorsalCoverageTool(viewportId);
}

export function deactivateHipDorsalCoverageMeasurement(viewportId: string): boolean {
  console.log(`[deactivateHipDorsalCoverageMeasurement] Deactivating HipDorsalCoverage measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateHipDorsalCoverageTool(viewportId);
}

export function clearHipDorsalCoverageMeasurements(viewportId: string): boolean {
  console.log(`[clearHipDorsalCoverageMeasurements] Clearing HipDorsalCoverage measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearHipDorsalCoverageMeasurements(viewportId);
}

// ==================== 找圆心测量相关函数 ====================

export function activateCircleCenterMeasurement(viewportId: string): boolean {
  console.log(`[activateCircleCenterMeasurement] Activating CircleCenter measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateCircleCenterMeasurementTool(viewportId);
}

export function deactivateCircleCenterMeasurement(viewportId: string): boolean {
  console.log(`[deactivateCircleCenterMeasurement] Deactivating CircleCenter measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateCircleCenterMeasurementTool(viewportId);
}

export function clearCircleCenterMeasurements(viewportId: string): boolean {
  console.log(`[clearCircleCenterMeasurements] Clearing CircleCenter measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearCircleCenterMeasurements(viewportId);
}

// ==================== 找中线测量相关函数 ====================

export function activateMidlineMeasurement(viewportId: string): boolean {
  console.log(`[activateMidlineMeasurement] Activating Midline measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateMidlineMeasurementTool(viewportId);
}

export function deactivateMidlineMeasurement(viewportId: string): boolean {
  console.log(`[deactivateMidlineMeasurement] Deactivating Midline measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateMidlineMeasurementTool(viewportId);
}

export function clearMidlineMeasurements(viewportId: string): boolean {
  console.log(`[clearMidlineMeasurements] Clearing Midline measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearMidlineMeasurements(viewportId);
}

// ==================== 找中点测量相关函数 ====================

export function activateFindMidpointMeasurement(viewportId: string): boolean {
  console.log(`[activateFindMidpointMeasurement] Activating FindMidpoint measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateFindMidpointMeasurementTool(viewportId);
}

export function deactivateFindMidpointMeasurement(viewportId: string): boolean {
  console.log(`[deactivateFindMidpointMeasurement] Deactivating FindMidpoint measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateFindMidpointMeasurementTool(viewportId);
}

export function clearFindMidpointMeasurements(viewportId: string): boolean {
  console.log(`[clearFindMidpointMeasurements] Clearing FindMidpoint measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearFindMidpointMeasurements(viewportId);
}

// ==================== 直线垂直倾斜度测量相关函数 ====================

export function activateVerticalTiltMeasurement(viewportId: string): boolean {
  console.log(`[activateVerticalTiltMeasurement] Activating VerticalTilt measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateVerticalTiltMeasurementTool(viewportId);
}

export function deactivateVerticalTiltMeasurement(viewportId: string): boolean {
  console.log(`[deactivateVerticalTiltMeasurement] Deactivating VerticalTilt measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateVerticalTiltMeasurementTool(viewportId);
}

export function clearVerticalTiltMeasurements(viewportId: string): boolean {
  console.log(`[clearVerticalTiltMeasurements] Clearing VerticalTilt measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearVerticalTiltMeasurements(viewportId);
}

// ==================== 直线水平倾斜度测量相关函数 ====================

export function activateHorizontalTiltMeasurement(viewportId: string): boolean {
  console.log(`[activateHorizontalTiltMeasurement] Activating HorizontalTilt measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateHorizontalTiltMeasurementTool(viewportId);
}

export function deactivateHorizontalTiltMeasurement(viewportId: string): boolean {
  console.log(`[deactivateHorizontalTiltMeasurement] Deactivating HorizontalTilt measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateHorizontalTiltMeasurementTool(viewportId);
}

export function clearHorizontalTiltMeasurements(viewportId: string): boolean {
  console.log(`[clearHorizontalTiltMeasurements] Clearing HorizontalTilt measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearHorizontalTiltMeasurements(viewportId);
}

// ==================== 多边形长度测量相关函数 ====================

/**
 * 激活多边形长度测量工具
 */
export function activatePolygonLengthMeasurement(viewportId: string): boolean {
  console.log(`[activatePolygonLengthMeasurement] Activating PolygonLength measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activatePolygonLengthMeasurementTool(viewportId);
}

/**
 * 停用多边形长度测量工具
 */
export function deactivatePolygonLengthMeasurement(viewportId: string): boolean {
  console.log(`[deactivatePolygonLengthMeasurement] Deactivating PolygonLength measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivatePolygonLengthMeasurementTool(viewportId);
}

/**
 * 清除多边形长度测量标注
 */
export function clearPolygonLengthMeasurements(viewportId: string): boolean {
  console.log(`[clearPolygonLengthMeasurements] Clearing PolygonLength measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearPolygonLengthMeasurements(viewportId);
}

// ==================== 拆线长度测量相关函数 ====================

/**
 * 激活拆线长度测量工具
 */
export function activatePolylineLengthMeasurement(viewportId: string): boolean {
  console.log(`[activatePolylineLengthMeasurement] Activating PolylineLength measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activatePolylineLengthMeasurementTool(viewportId);
}

/**
 * 停用拆线长度测量工具
 */
export function deactivatePolylineLengthMeasurement(viewportId: string): boolean {
  console.log(`[deactivatePolylineLengthMeasurement] Deactivating PolylineLength measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivatePolylineLengthMeasurementTool(viewportId);
}

/**
 * 清除拆线长度测量标注
 */
export function clearPolylineLengthMeasurements(viewportId: string): boolean {
  console.log(`[clearPolylineLengthMeasurements] Clearing PolylineLength measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearPolylineLengthMeasurements(viewportId);
}
// ==================== 直线灰度测量相关函数 ====================

/**
 * 激活直线灰度测量工具
 */
export function activateLineGrayscaleMeasurement(viewportId: string): boolean {
  console.log(`[activateLineGrayscaleMeasurement] Activating LineGrayscale measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateLineGrayscaleMeasurementTool(viewportId);
}

/**
 * 停用直线灰度测量工具
 */
export function deactivateLineGrayscaleMeasurement(viewportId: string): boolean {
  console.log(`[deactivateLineGrayscaleMeasurement] Deactivating LineGrayscale measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateLineGrayscaleMeasurementTool(viewportId);
}

/**
 * 清除直线灰度测量标注
 */
export function clearLineGrayscaleMeasurements(viewportId: string): boolean {
  console.log(`[clearLineGrayscaleMeasurements] Clearing LineGrayscale measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearLineGrayscaleMeasurements(viewportId);
}

// ==================== 矩形区域灰度测量相关函数 ====================

/**
 * 激活矩形区域灰度测量工具
 */
export function activateRectangleGrayscaleMeasurement(viewportId: string): boolean {
  console.log(`[activateRectangleGrayscaleMeasurement] Activating RectangleGrayscale measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.activateRectangleGrayscaleMeasurementTool(viewportId);
}

/**
 * 停用矩形区域灰度测量工具
 */
export function deactivateRectangleGrayscaleMeasurement(viewportId: string): boolean {
  console.log(`[deactivateRectangleGrayscaleMeasurement] Deactivating RectangleGrayscale measurement for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateRectangleGrayscaleMeasurementTool(viewportId);
}

/**
 * 清除矩形区域灰度测量标注
 */
export function clearRectangleGrayscaleMeasurements(viewportId: string): boolean {
  console.log(`[clearRectangleGrayscaleMeasurements] Clearing RectangleGrayscale measurements for viewport: ${viewportId}`);
  return MeasurementToolManager.clearRectangleGrayscaleMeasurements(viewportId);
}

// ==================== 掩码工具相关函数 ====================

/**
 * 激活掩码工具
 */
export function activateMask(viewportId: string): boolean {
  console.log(`[activateMask] Activating mask tool for viewport: ${viewportId}`);
  return MeasurementToolManager.activateMaskTool(viewportId);
}

/**
 * 停用掩码工具
 */
export function deactivateMask(viewportId: string): boolean {
  console.log(`[deactivateMask] Deactivating mask tool for viewport: ${viewportId}`);
  return MeasurementToolManager.deactivateMaskTool(viewportId);
}

/**
 * 清除掩码标注
 */
export function clearMask(viewportId: string): boolean {
  console.log(`[clearMask] Clearing mask annotations for viewport: ${viewportId}`);
  return MeasurementToolManager.clearMaskAnnotations(viewportId);
}

export class ImageLoadError extends Error {
  constructor(message: string, failedImageIds: string[]) {
    super(message);
    this.name = 'ImageLoadError';
    this.failedImageIds = failedImageIds; // 附加失败 ID 列表
  }
  failedImageIds: string[];
}

/**
 * 安全的图像栈设置函数，带超时保护和错误捕获
 * @param viewport - Cornerstone viewport 实例
 * @param imageIds - 图像 ID 数组
 * @param imageIndex - 当前图像索引
 * @param timeout - 超时时间（毫秒），默认30秒
 */
export async function safeSetStack(
  viewport: any,
  imageIds: string[],
  imageIndex: number,
  timeout: number = 30000
): Promise<void> {
  const errors: string[] = [];

  // 错误事件处理器
  const handler = (evt: any) => {
    console.error(`捕获到图像加载错误: ${evt.detail.imageId}`);
    errors.push(evt.detail.imageId);
  };

  // 添加错误监听器
  eventTarget.addEventListener(EVENTS.IMAGE_LOAD_ERROR, handler);

  try {
    // 创建超时 Promise
    const timeoutPromise = new Promise<never>((_, reject) => {
      setTimeout(() => {
        reject(new Error(`图像加载超时 (${timeout}ms)`));
      }, timeout);
    });

    // 等待 setStack 完成或超时
    await Promise.race([
      viewport.setStack(imageIds, imageIndex),
      timeoutPromise
    ]);

    // setStack 完成后，检查是否有错误
    if (errors.length > 0) {
      throw new ImageLoadError(
        `图像加载失败：共 ${errors.length} 张（${errors.join(', ')}）`,
        errors
      );
    }

    console.log(`✅ 图像栈设置成功: ${imageIds.length} 张图像`);
  } finally {
    // 无论成功失败，都移除监听器（清理资源）
    eventTarget.removeEventListener(EVENTS.IMAGE_LOAD_ERROR, handler);
  }
}

const StackViewer = ({
  imageIndex = 0,
  imageUrls = [],
  viewportId,
  renderingEngineId,
  selected
}: {
  imageIndex?: number;
  imageUrls?: string[];
  viewportId: string;
  renderingEngineId: string;
  selected?: boolean;
}) => {
  const elementRef = useRef<HTMLDivElement>(null);
  // 用于捕获异步错误并在渲染时抛出，让 Error Boundary 能够捕获
  const [renderError, setRenderError] = React.useState<Error | null>(null);
  // 获取overlay启用状态
  const overlayEnabled = useSelector(selectOverlayEnabled);
  // 获取 dispatch
  const dispatch = useDispatch();

  // 监听overlay状态变化，启用/禁用DicomOverlayTool
  useEffect(() => {
    try {
      const toolGroup = MeasurementToolManager.getToolGroup(viewportId);
      // const toolGroup = ToolGroupManager.getToolGroup(`STACK_TOOL_GROUP_ID_${viewportId}`);
      if (!toolGroup) {
        console.warn(`[StackViewer] Tool group not found for viewport: ${viewportId}`);
        return;
      }

      if (overlayEnabled) {
        console.log(`[StackViewer] Enabling DicomOverlay for viewport: ${viewportId}`);
        toolGroup.setToolEnabled(DicomOverlayTool.toolName);
      } else {
        console.log(`[StackViewer] Disabling DicomOverlay for viewport: ${viewportId}`);
        toolGroup.setToolDisabled(DicomOverlayTool.toolName);
        //再次启用，表示关闭四角信息
        toolGroup.setToolEnabled(DicomOverlayTool.toolName);
      }
    } catch (error) {
      console.error(`[StackViewer] Error toggling DicomOverlay:`, error);
    }
  }, [overlayEnabled, viewportId]);

  // // 监听imageUrls变化并重新加载图像
  // useEffect(() => {
  //   const renderingEngine = cornerstone.getRenderingEngine(renderingEngineId);
  //   if (!renderingEngine) {
  //     return;
  //   }

  //   const viewport = renderingEngine.getViewport(viewportId) as cornerstone.Types.IStackViewport;
  //   if (viewport && imageUrls.length > 0) {
  //     console.log(`[StackViewer] imageUrls changed for viewport ${viewportId}, reloading...`);
  //     viewport.setStack(imageUrls, imageIndex).then(() => {
  //       viewport.render();
  //     }).catch((error) => {
  //       console.error('[StackViewer] Error reloading image stack:', error);
  //     });
  //   }
  // }, [imageUrls, imageIndex, viewportId, renderingEngineId]);

  useEffect(() => {
    const setup = async () => {
      // 清除之前的错误状态（如果有）
      setRenderError(null);

      // // 初始化 Cornerstone
      // cornerstone.init();
      // cornerstoneTools.init();
      // const state = store.getState();
      // console.log(`当前系统模式：${state.systemMode.mode}`);

      // const token =
      //   state.systemMode.mode === SystemMode.Emergency
      //     ? state.product.guest
      //     : state.userInfo.token;
      // console.log(`token stack.image.viewer: ${token}`);

      // cornerstoneDICOMImageLoader.init({
      //   maxWebWorkers: navigator.hardwareConcurrency || 1,
      //   errorInterceptor: (error) => {
      //     if (error.status === 401) {
      //       console.error('Authentication failed. Please refresh the token.');
      //     }
      //     console.error(`请求dcm文件出错:${error}`);
      //   },
      //   beforeSend: (xhr, imageId, defaultHeaders) => {
      //     return {
      //       ...defaultHeaders,
      //       Authorization: `Bearer ${token}`,
      //       Language: 'en',
      //       Product: 'DROS',
      //       Source: 'Electron',
      //     };
      //   },
      // });
      // const currentViewportId = viewportId;
      eventTarget.addEventListener(
        cornerstoneTools.Enums.Events.ANNOTATION_COMPLETED,
        (evt) => {
          const { annotation } = evt.detail;
          console.log('Annotation completed event:', annotation);
          if (annotation.metadata.toolName === 'LinearSplineROI') {
            console.log('SplineROITool annotation completed:', annotation);
            overlayRedRectangle(viewportId);
            //取消工具激活状态
            const toolGroup = ToolGroupManager.getToolGroup(
              'STACK_TOOL_GROUP_ID'
            );
            if (!toolGroup) {
              console.log('toolGroup not found');
            }
            toolGroup?.setToolPassive('LinearSplineROI', {
              removeAllBindings: true,
            });
          }
        }
      );
      const viewportInput: cornerstone.Types.PublicViewportInput = {
        viewportId,
        element: elementRef.current!,
        type: cornerstone.Enums.ViewportType.STACK,
      };
      const renderingEngine = cornerstone.getRenderingEngine(renderingEngineId);
      if (!renderingEngine) {
        console.error(
          `[stack.image.viewer] No rendering engine with id ${renderingEngineId} found`
        );
        return;
      }
      // Enable the element for use with Cornerstone
      renderingEngine.enableElement(viewportInput);
      registerTools(viewportId, renderingEngine.id);

      // Get the stack viewport that was created
      const viewport = renderingEngine.getViewport(
        viewportId
      ) as cornerstone.Types.IStackViewport;

      // 增强的图像加载逻辑，包含完善的错误处理
      try {
        console.log(`重新加载图像----开始`);
        console.log(`图像URLs:`, imageUrls);
        console.log(`图像索引:`, imageIndex);

        // 1. 验证图像URLs
        if (!imageUrls || imageUrls.length === 0) {
          throw new Error('图像URL列表为空');
        }

        // 2. 验证图像索引
        if (imageIndex < 0 || imageIndex >= imageUrls.length) {
          throw new Error(`图像索引无效: ${imageIndex}, 有效范围: 0-${imageUrls.length - 1}`);
        }

        // 3. 预检查图像可访问性（可选）
        // await validateImageUrls(imageUrls);

        // 4. 多帧DICOM预处理：检测并扩展imageIds
        let finalImageUrls = imageUrls;
        let detectedFrameCount = 1;

        // 只有当imageUrls只有一个元素时，才可能是多帧DICOM需要expansion
        if (imageUrls.length === 1) {
          try {
            // 预先分析DICOM元数据以检测帧数
            const { DicomMetadataAnalyzer } = await import('@/utils/dicom/DicomMetadataAnalyzer');
            const quickAnalysis = await DicomMetadataAnalyzer.analyze(imageUrls[0], undefined, {
              baseUrl: getIpPort()
            });

            detectedFrameCount = quickAnalysis.frameCount;

            // 如果检测到多帧，扩展imageIds数组
            if (detectedFrameCount > 1) {
              console.log(`[StackViewer] 检测到多帧DICOM (${detectedFrameCount}帧)，扩展imageIds...`);

              const baseImageId = imageUrls[0];
              const expandedImageIds: string[] = [];

              for (let i = 0; i < detectedFrameCount; i++) {
                // 为每一帧创建对应的imageId
                expandedImageIds.push(`${baseImageId}${baseImageId.includes('?') ? '&' : '?'}frame=${i}`);
              }

              finalImageUrls = expandedImageIds;
              console.log(`[StackViewer] ImageIds已扩展:`, {
                原始: 1,
                扩展后: expandedImageIds.length,
                示例: expandedImageIds.slice(0, Math.min(3, expandedImageIds.length))
              });
            }
          } catch (error) {
            console.warn(`[StackViewer] 多帧预检测失败，使用原始imageUrls:`, error);
          }
        }

        // 5. 设置图像栈，使用扩展后的imageUrls
        await safeSetStack(viewport, finalImageUrls, imageIndex);

        // 5. 初始化播放状态(用于多帧播放控制)
        // 使用 DicomMetadataAnalyzer 进行深度分析，从 DICOM 元数据读取帧数
        let totalFrames: number; // Declare totalFrames here

        try {
          // 导入 DicomMetadataAnalyzer (需要在文件顶部添加 import)
          const { DicomMetadataAnalyzer } = await import('@/utils/dicom/DicomMetadataAnalyzer');

          // 使用第一个图像进行分析
          const imageId = imageUrls[imageIndex];

          // 使用 DicomMetadataAnalyzer 进行完整分析
          const analysisResult = await DicomMetadataAnalyzer.analyze(imageId, viewport, {
            baseUrl: getIpPort()
          });

          // 获取 viewport 的实际 imageIds（用于交叉验证）
          const actualImageIds = viewport.getImageIds();
          const viewportFrameCount = actualImageIds.length;

          // 混合验证：比较元数据帧数与 viewport 帧数
          const metadataFrameCount = analysisResult.frameCount;
          totalFrames = metadataFrameCount;//viewportFrameCount; // Assign value here // 优先使用 viewport 的值，它反映实际加载情况

          // 验证一致性
          const isConsistent = metadataFrameCount === viewportFrameCount;
          if (!isConsistent) {
            console.warn(`[StackViewer] 帧数不一致检测:`, {
              imageId,
              metadataFrames: metadataFrameCount,
              viewportFrames: viewportFrameCount,
              analysisConfidence: analysisResult.confidence
            });
          }

          console.log(`[StackViewer] DICOM分析完成:`, {
            imageUrlsCount: imageUrls.length,
            metadataFrames: metadataFrameCount,
            viewportFrames: viewportFrameCount,
            finalTotalFrames: totalFrames,
            isMultiFrame: totalFrames > 1,
            frameType: analysisResult.frameType,
            isEnhanced: analysisResult.isEnhanced,
            confidence: analysisResult.confidence,
            isConsistent
          });

          dispatch(initPlayback({
            viewportId,
            totalFrames
          }));

          // 标记帧检测完成，使用完整的分析结果
          dispatch(setFrameDetectionResult({
            viewportId,
            isMultiFrame: totalFrames > 1,
            totalFrames,
            analysisResult: {
              ...analysisResult,
              // 使用 viewport 的实际帧数覆盖分析结果
              frameCount: totalFrames,
              isMultiFrame: totalFrames > 1
            }
          }));

        } catch (error) {
          // 如果 DicomMetadataAnalyzer 失败，降级到简单检测
          console.warn(`[StackViewer] DICOM分析失败，降级到简单检测:`, error);

          const actualImageIds = viewport.getImageIds();
          totalFrames = actualImageIds.length; // Assign value here

          console.log(`[StackViewer] 使用简单检测方法:`, {
            imageUrlsCount: imageUrls.length,
            actualFrames: totalFrames,
            isMultiFrame: totalFrames > 1
          });

          dispatch(initPlayback({
            viewportId,
            totalFrames
          }));

          dispatch(setFrameDetectionResult({
            viewportId,
            isMultiFrame: totalFrames > 1,
            totalFrames,
            analysisResult: {
              frameCount: totalFrames,
              isMultiFrame: totalFrames > 1,
              frameType: 'dynamic',
              isEnhanced: false,
              analysisTimestamp: new Date(),
              analysisVersion: '1.0.0',
              confidence: 0.5 // 降级检测的可信度较低
            }
          }));
        }

        console.log(`[StackViewer] 播放状态初始化完成: ${totalFrames} 帧`); // This log statement is now outside the inner try-catch

        // 6. 图像加载完成后，自动应用保持宽高比的适应
        fitImageWithAspectRatio(viewportId);

        console.log(`重新加载图像----结束`);

      } catch (error) {

        // 不直接抛出错误，而是保存到状态中
        // 在下次渲染时抛出，这样 Error Boundary 才能捕获
        const enhancedError = enhanceError(error, { imageUrls, imageIndex, viewportId });
        setRenderError(enhancedError);
        return; // 不再继续执行后续代码
        // 根据错误严重程度决定处理策略
        if (isCriticalError(enhancedError)) {
          // 严重错误：保存到状态，让 Error Boundary 处理
          console.error('🚨 严重图像加载错误，将在渲染时抛出给 Error Boundary:', enhancedError);
          setRenderError(enhancedError);
          return; // 不再继续执行后续代码
        } else {
          // 非严重错误：仅记录日志，继续运行
          console.warn('⚠️ 图像加载警告:', enhancedError);
          // 可以在这里尝试降级策略，比如显示占位符
        }
      }
      viewport.render();
    };

    setup();

    // ✅ 添加清理函数：确保组件卸载时正确清理 viewport
    return () => {
      try {
        const renderingEngine = cornerstone.getRenderingEngine(renderingEngineId);
        if (renderingEngine) {
          console.log(`[StackViewer] Cleaning up viewport: ${viewportId}`);
          renderingEngine.disableElement(viewportId);
        }
      } catch (error) {
        console.warn(`[StackViewer] Error disabling element ${viewportId}:`, error);
      }
    };
  }, [elementRef, imageIndex, viewportId, renderingEngineId, imageUrls[0]]);

  // 监听容器大小变化，自动保持宽高比
  useEffect(() => {
    if (!elementRef.current) return;

    // 创建防抖的适应函数
    const debouncedFit = debounce(() => {
      // console.log(`容器大小变化了---------`)
      requestAnimationFrame(() => {
        fitImageWithAspectRatio(viewportId);
      });

    }, 100);

    // 创建ResizeObserver监听容器大小变化
    const resizeObserver = new ResizeObserver(debouncedFit);
    resizeObserver.observe(elementRef.current);

    console.log(`[StackViewer] ResizeObserver attached to viewport: ${viewportId}`);

    // 清理函数
    return () => {
      resizeObserver.disconnect();
      console.log(`[StackViewer] ResizeObserver disconnected from viewport: ${viewportId}`);
    };
  }, [viewportId]);

  // 在渲染期间检查错误状态，如果有错误则抛出
  // 这样 Error Boundary 就能捕获到异步错误了
  if (renderError) {
    throw renderError;
  }

  return (
    <div
      id={viewportId}
      ref={elementRef}
      onContextMenu={(e) => e.preventDefault()}
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: '#000',
        border: selected ? '2px solid blue' : '1px solid gray',
        position: 'relative', // 让浮动控制条能够正确定位
      }}
    >
      {/* 播放控制器（逻辑组件，不渲染UI） */}
      <PlaybackController
        viewportId={viewportId}
        renderingEngineId={renderingEngineId}
        enabled={true}
      />

      {/* 浮动播放控制条（UI组件） */}
      <FloatingPlaybackControls
        viewportId={viewportId}
        position="bottom"
        autoHide={true}
        showAdvancedControls={true}
      />
    </div>
  );
};

/**
 * 带错误边界的 StackViewer 包装组件
 * 自动处理图像加载错误，提供优雅的错误恢复机制
 */
export const StackViewerWithErrorBoundary = ({
  imageIndex = 0,
  imageUrls = [],
  viewportId,
  renderingEngineId,
  selected,
  maxRetries = 3,
  onError
}: {
  imageIndex?: number;
  imageUrls?: string[];
  viewportId: string;
  renderingEngineId: string;
  selected?: boolean;
  maxRetries?: number;
  onError?: (error: Error, errorInfo: any) => void;
}) => {
  return (
    <ImageViewerErrorBoundary
      maxRetries={maxRetries}
      onError={onError}
    >
      <StackViewer
        imageIndex={imageIndex}
        imageUrls={imageUrls}
        viewportId={viewportId}
        renderingEngineId={renderingEngineId}
        selected={selected}
      />
    </ImageViewerErrorBoundary>
  );
};

export default StackViewer;