|
@@ -1,6 +1,7 @@
|
|
|
// ViewportContainer.jsx
|
|
// ViewportContainer.jsx
|
|
|
import React, { useRef, useEffect, useState, useMemo } from 'react';
|
|
import React, { useRef, useEffect, useState, useMemo } from 'react';
|
|
|
import * as cornerstone from '@cornerstonejs/core';
|
|
import * as cornerstone from '@cornerstonejs/core';
|
|
|
|
|
+import * as cornerstoneTools from '@cornerstonejs/tools';
|
|
|
import {
|
|
import {
|
|
|
RenderingEngine,
|
|
RenderingEngine,
|
|
|
Enums
|
|
Enums
|
|
@@ -54,13 +55,69 @@ const ViewportContainer = ({ imageId, className }: ViewportContainerProps) => {
|
|
|
|
|
|
|
|
// 绑定 Viewport 到引擎
|
|
// 绑定 Viewport 到引擎
|
|
|
engine.enableElement(viewportInput);
|
|
engine.enableElement(viewportInput);
|
|
|
|
|
+
|
|
|
// 获取 Viewport 实例
|
|
// 获取 Viewport 实例
|
|
|
const viewport = engine.getViewport(viewportId);
|
|
const viewport = engine.getViewport(viewportId);
|
|
|
setStackViewport(viewport);
|
|
setStackViewport(viewport);
|
|
|
|
|
+
|
|
|
|
|
+ // ========== 添加工具支持 ==========
|
|
|
|
|
+ const toolGroupId = `PRINT_TOOL_GROUP_${viewportId}`;
|
|
|
|
|
+
|
|
|
|
|
+ // 创建工具组
|
|
|
|
|
+ const toolGroup = cornerstoneTools.ToolGroupManager.createToolGroup(toolGroupId);
|
|
|
|
|
+
|
|
|
|
|
+ if (toolGroup) {
|
|
|
|
|
+ // 添加基础工具
|
|
|
|
|
+ toolGroup.addTool(cornerstoneTools.StackScrollTool.toolName);
|
|
|
|
|
+ toolGroup.addTool(cornerstoneTools.ZoomTool.toolName);
|
|
|
|
|
+ toolGroup.addTool(cornerstoneTools.PanTool.toolName);
|
|
|
|
|
+ toolGroup.addTool(cornerstoneTools.WindowLevelTool.toolName);
|
|
|
|
|
+
|
|
|
|
|
+ // 激活滚轮滚动工具(解决滚轮错误)
|
|
|
|
|
+ toolGroup.setToolActive(cornerstoneTools.StackScrollTool.toolName, {
|
|
|
|
|
+ bindings: [{
|
|
|
|
|
+ mouseButton: cornerstoneTools.Enums.MouseBindings.Wheel
|
|
|
|
|
+ }]
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 激活缩放工具(右键)
|
|
|
|
|
+ toolGroup.setToolActive(cornerstoneTools.ZoomTool.toolName, {
|
|
|
|
|
+ bindings: [{
|
|
|
|
|
+ mouseButton: cornerstoneTools.Enums.MouseBindings.Secondary
|
|
|
|
|
+ }]
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 激活平移工具(中键)
|
|
|
|
|
+ toolGroup.setToolActive(cornerstoneTools.PanTool.toolName, {
|
|
|
|
|
+ bindings: [{
|
|
|
|
|
+ mouseButton: cornerstoneTools.Enums.MouseBindings.Auxiliary
|
|
|
|
|
+ }]
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 其他工具设置为被动状态
|
|
|
|
|
+ toolGroup.setToolPassive(cornerstoneTools.WindowLevelTool.toolName);
|
|
|
|
|
+
|
|
|
|
|
+ // 将 viewport 添加到工具组
|
|
|
|
|
+ toolGroup.addViewport(viewportId, 'myRenderingEngineForPrint');
|
|
|
|
|
+
|
|
|
|
|
+ console.log(`[DcmCell] 工具组已创建并配置: ${toolGroupId}`);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 组件卸载时清理
|
|
// 组件卸载时清理
|
|
|
return () => {
|
|
return () => {
|
|
|
|
|
+ // 销毁工具组
|
|
|
|
|
+ const toolGroupId = `PRINT_TOOL_GROUP_${viewportId}`;
|
|
|
|
|
+ const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId);
|
|
|
|
|
+ if (toolGroup) {
|
|
|
|
|
+ // 先从工具组中移除 viewport
|
|
|
|
|
+ toolGroup.removeViewports(engine.id, viewportId);
|
|
|
|
|
+ // 然后销毁工具组
|
|
|
|
|
+ cornerstoneTools.ToolGroupManager.destroyToolGroup(toolGroupId);
|
|
|
|
|
+ console.log(`[DcmCell] 工具组已销毁: ${toolGroupId}`);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 销毁渲染引擎
|
|
|
renderingEngine?.destroy();
|
|
renderingEngine?.destroy();
|
|
|
};
|
|
};
|
|
|
}, []);
|
|
}, []);
|
|
@@ -129,4 +186,4 @@ const ViewportContainer = ({ imageId, className }: ViewportContainerProps) => {
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-export default ViewportContainer;
|
|
|
|
|
|
|
+export default ViewportContainer;
|