浏览代码

优化一个性能问题,避免重创多个engine,同时解决多分格情况下拖拽引起崩溃的问题,可能是引擎销毁引起的

dengdx 1 月之前
父节点
当前提交
f5c566de50
共有 1 个文件被更改,包括 20 次插入16 次删除
  1. 20 16
      src/pages/output/print/DcmCell.tsx

+ 20 - 16
src/pages/output/print/DcmCell.tsx

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