|
@@ -25,18 +25,18 @@ import { addImageToCell, Film } from '@/states/print/printSlice';
|
|
|
|
|
|
|
|
type ViewportContainerProps = {
|
|
type ViewportContainerProps = {
|
|
|
imageId: string;
|
|
imageId: string;
|
|
|
- currentFilm:Film; // 传入当前胶片对象
|
|
|
|
|
- indexOfCell: number; // 可选,格子索引
|
|
|
|
|
|
|
+ currentFilm: Film; // 传入当前胶片对象
|
|
|
|
|
+ indexOfCell: number; // 可选,格子索引
|
|
|
className?: string; // 可选
|
|
className?: string; // 可选
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const ViewportContainer = ({ imageId, className,currentFilm,indexOfCell }: ViewportContainerProps) => {
|
|
|
|
|
- console.log(`ViewportContainer 得到的属性 :${imageId}`)
|
|
|
|
|
|
|
+const ViewportContainer = ({ imageId, className, currentFilm, indexOfCell }: ViewportContainerProps) => {
|
|
|
|
|
+ console.log(`ViewportContainer 得到的属性 :${imageId}`)
|
|
|
const viewportRef = useRef(null);
|
|
const viewportRef = useRef(null);
|
|
|
const [renderingEngine, setRenderingEngine] = useState<any>(null);
|
|
const [renderingEngine, setRenderingEngine] = useState<any>(null);
|
|
|
const [stackViewport, setStackViewport] = useState<any>(null);
|
|
const [stackViewport, setStackViewport] = useState<any>(null);
|
|
|
const [hasImage, setHasImage] = useState<boolean>(false); // 跟踪是否已加载图像
|
|
const [hasImage, setHasImage] = useState<boolean>(false); // 跟踪是否已加载图像
|
|
|
- // ✅ 用 useMemo 保证 id 只生成一次
|
|
|
|
|
|
|
+ // ✅ 用 useMemo 保证 id 只生成一次
|
|
|
const viewportId = useMemo(() => `stackViewport-${imageId}-${uuidv4()}`, []);
|
|
const viewportId = useMemo(() => `stackViewport-${imageId}-${uuidv4()}`, []);
|
|
|
const dispatch = useDispatch();
|
|
const dispatch = useDispatch();
|
|
|
|
|
|
|
@@ -45,12 +45,16 @@ const ViewportContainer = ({ imageId, className,currentFilm,indexOfCell }: Viewp
|
|
|
// initImageLoader();
|
|
// initImageLoader();
|
|
|
|
|
|
|
|
// 创建渲染引擎实例
|
|
// 创建渲染引擎实例
|
|
|
- const engine = new RenderingEngine('myRenderingEngineForPrint');
|
|
|
|
|
- setRenderingEngine(engine);
|
|
|
|
|
|
|
+ const engineId = 'myRenderingEngineForPrint';
|
|
|
|
|
+ let engine: RenderingEngine | null = cornerstone.getRenderingEngines()?.find(en => en.id === engineId) || null;
|
|
|
|
|
+ // 不存在则创建
|
|
|
|
|
+ if (!engine) {
|
|
|
|
|
+ engine = new RenderingEngine(engineId);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
// 配置 Viewport
|
|
// 配置 Viewport
|
|
|
if (viewportRef.current) {
|
|
if (viewportRef.current) {
|
|
|
- const viewportInput:cornerstone.Types.PublicViewportInput = {
|
|
|
|
|
|
|
+ const viewportInput: cornerstone.Types.PublicViewportInput = {
|
|
|
viewportId: viewportId,
|
|
viewportId: viewportId,
|
|
|
type: Enums.ViewportType.STACK, // 序列视图类型
|
|
type: Enums.ViewportType.STACK, // 序列视图类型
|
|
|
element: viewportRef.current,
|
|
element: viewportRef.current,
|
|
@@ -61,17 +65,17 @@ const ViewportContainer = ({ imageId, className,currentFilm,indexOfCell }: Viewp
|
|
|
|
|
|
|
|
// 绑定 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 toolGroupId = `PRINT_TOOL_GROUP_${viewportId}`;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 创建工具组
|
|
// 创建工具组
|
|
|
const toolGroup = cornerstoneTools.ToolGroupManager.createToolGroup(toolGroupId);
|
|
const toolGroup = cornerstoneTools.ToolGroupManager.createToolGroup(toolGroupId);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
if (toolGroup) {
|
|
if (toolGroup) {
|
|
|
// 添加基础工具
|
|
// 添加基础工具
|
|
|
toolGroup.addTool(cornerstoneTools.StackScrollTool.toolName);
|
|
toolGroup.addTool(cornerstoneTools.StackScrollTool.toolName);
|
|
@@ -105,7 +109,7 @@ const ViewportContainer = ({ imageId, className,currentFilm,indexOfCell }: Viewp
|
|
|
|
|
|
|
|
// 将 viewport 添加到工具组
|
|
// 将 viewport 添加到工具组
|
|
|
toolGroup.addViewport(viewportId, 'myRenderingEngineForPrint');
|
|
toolGroup.addViewport(viewportId, 'myRenderingEngineForPrint');
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
console.log(`[DcmCell] 工具组已创建并配置: ${toolGroupId}`);
|
|
console.log(`[DcmCell] 工具组已创建并配置: ${toolGroupId}`);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -122,7 +126,7 @@ const ViewportContainer = ({ imageId, className,currentFilm,indexOfCell }: Viewp
|
|
|
cornerstoneTools.ToolGroupManager.destroyToolGroup(toolGroupId);
|
|
cornerstoneTools.ToolGroupManager.destroyToolGroup(toolGroupId);
|
|
|
console.log(`[DcmCell] 工具组已销毁: ${toolGroupId}`);
|
|
console.log(`[DcmCell] 工具组已销毁: ${toolGroupId}`);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 销毁渲染引擎
|
|
// 销毁渲染引擎
|
|
|
renderingEngine?.destroy();
|
|
renderingEngine?.destroy();
|
|
|
};
|
|
};
|
|
@@ -142,13 +146,13 @@ const ViewportContainer = ({ imageId, className,currentFilm,indexOfCell }: Viewp
|
|
|
const imageIds = getDcmImageUrl(seriesInstanceUID);
|
|
const imageIds = getDcmImageUrl(seriesInstanceUID);
|
|
|
console.log(`拖拽后要加载图像 是 ${imageIds}`);
|
|
console.log(`拖拽后要加载图像 是 ${imageIds}`);
|
|
|
// 3. 加载图像并设置到 Viewport
|
|
// 3. 加载图像并设置到 Viewport
|
|
|
- await stackViewport.setStack([imageIds],0);
|
|
|
|
|
|
|
+ await stackViewport.setStack([imageIds], 0);
|
|
|
// 4. 渲染图像
|
|
// 4. 渲染图像
|
|
|
stackViewport.render();
|
|
stackViewport.render();
|
|
|
// 5. 成功加载后隐藏提示
|
|
// 5. 成功加载后隐藏提示
|
|
|
setHasImage(true);
|
|
setHasImage(true);
|
|
|
// 6. 通知到slice
|
|
// 6. 通知到slice
|
|
|
- dispatch(addImageToCell({index:indexOfCell,imageId:imageIds[0]}));
|
|
|
|
|
|
|
+ dispatch(addImageToCell({ index: indexOfCell, imageId: imageIds[0] }));
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.error('加载图像失败:', error);
|
|
console.error('加载图像失败:', error);
|
|
|
}
|
|
}
|
|
@@ -173,7 +177,7 @@ const ViewportContainer = ({ imageId, className,currentFilm,indexOfCell }: Viewp
|
|
|
>
|
|
>
|
|
|
{/* Cornerstone 渲染挂载点 */}
|
|
{/* Cornerstone 渲染挂载点 */}
|
|
|
<div ref={viewportRef} style={{ width: '100%', height: '100%' }} />
|
|
<div ref={viewportRef} style={{ width: '100%', height: '100%' }} />
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
{/* 拖拽提示文字 - 只在没有图像时显示 */}
|
|
{/* 拖拽提示文字 - 只在没有图像时显示 */}
|
|
|
{!hasImage && (
|
|
{!hasImage && (
|
|
|
<div style={{
|
|
<div style={{
|