feat: tools注册顺序导致的viewportInfo找不到

apps/desktop/electron/main.ts

@@ -38,9 +38,9 @@ const themeTitleBarStyles = {
 
 export const platform = process.platform === "darwin" ? "macos" : "windows";
 
-app.commandLine.appendSwitch('disable-web-security');
+app.commandLine.appendSwitch("disable-web-security");
-app.commandLine.appendSwitch('ignore-gpu-blocklist');
+app.commandLine.appendSwitch("ignore-gpu-blocklist");
-app.commandLine.appendSwitch('use-angle', 'gl');
+app.commandLine.appendSwitch("use-angle", "gl");
 
 // app.disableHardwareAcceleration()
 
@@ -55,7 +55,7 @@ function createWindow() {
     titleBarOverlay: { height: 36, ...themeTitleBarStyles[theme] }, // 渲染进程发消息动态改变这个
     webPreferences: {
       preload: path.join(__dirname, "preload.mjs"),
-      nodeIntegration: true
+      nodeIntegration: true,
     },
   });
 

apps/desktop/src/pages/Viewer/MprViewer/CornerstoneDicomLoader/initCornerstoneDicomImageLoader.ts

@@ -18,8 +18,6 @@ export const initCornerstoneDICOMImageLoader = () => {
     isMobile: false,
     enableCacheOptimization: false,
   });
-  console.log("preferSizeOverAccuracy", preferSizeOverAccuracy);
-  console.log("useNorm16Texture", useNorm16Texture);
 
   cornerstoneDICOMImageLoader.external.cornerstone = cornerstone;
   cornerstoneDICOMImageLoader.external.dicomParser = dicomParser;

apps/desktop/src/pages/Viewer/index.tsx

@@ -15,6 +15,7 @@ import {
   Enums as CoreEnums,
   cache,
 } from "@cornerstonejs/core";
+
 import {
   IStackViewport,
   PublicViewportInput,
@@ -31,7 +32,7 @@ import {
 } from "./MprViewer/index.config";
 import setCtTransferFunctionForVolumeActor from "./MprViewer/CornerstoneDicomLoader/setCtTransferFunctionForVolumeActor";
 import { Slider } from "@/components/ui/slider";
-import { stackViewportId, toolGroupStackId } from "./StackViewer/index.config";
+import { stackViewportId } from "./StackViewer/index.config";
 import { ToolBarMenu } from "./ToolBarMenu";
 import { Model3DViewer } from "./ModelViewer";
 
@@ -50,7 +51,6 @@ const wadoRsRoot = "http://localhost:8042/dicom-web";
 const renderingEngineId = "renderEngineNo1";
 
 const { ViewportType, OrientationAxis } = CoreEnums;
-const wwwl = { windowCenter: 50, windowWidth: 850 };
 
 export const Viewer = () => {
   const volumeViewport1Ref = useRef<HTMLDivElement | null>(null);
@@ -69,6 +69,7 @@ export const Viewer = () => {
   const [imageIds, setImageIds] = useState<string[]>();
   const renderingEngineRef = useRef<RenderingEngine>();
   const volumeId = SeriesInstanceUID;
+  const toolGroupStackId = "STACK_TOOL_GROUP:" + SeriesInstanceUID;
 
   useEffect(() => {
     cornerstoneTools.addTool(StackScrollMouseWheelTool);
@@ -89,6 +90,7 @@ export const Viewer = () => {
         SeriesInstanceUID,
         wadoRsRoot,
       });
+      
       // 这一步会对imageIds进行排序，如果不排序imageIds会错误乱,stackViewport顺序会错误
       const volume = await volumeLoader.createAndCacheVolume(
         SeriesInstanceUID,
@@ -140,7 +142,6 @@ export const Viewer = () => {
         ...volumeViewportInput,
         stackViewportInput,
       ]);
-      renderingEngineRef.current.enableElement(stackViewportInput);
       const stackViewport = renderingEngineRef.current.getViewport(
         stackViewportId
       ) as IStackViewport;
@@ -148,22 +149,6 @@ export const Viewer = () => {
       stackViewport.setStack(volume.imageIds);
       setImageIds(volume.imageIds);
 
-      await setVolumesForViewports(
-        renderingEngineRef.current,
-        [
-          {
-            volumeId: SeriesInstanceUID,
-            callback: ({ volumeActor }) =>
-              setCtTransferFunctionForVolumeActor({
-                volumeActor,
-                defaultWindowCenter: wwwl.windowCenter,
-                defaultWindowWidth: wwwl.windowWidth,
-              }),
-          },
-        ],
-        [viewportId1, viewportId2, viewportId3]
-      );
-
       const toolGroupMpr = ToolGroupManager.createToolGroup(toolGroupMprId);
       if (toolGroupMpr) {
         toolGroupMpr.addViewport(viewportId1, renderingEngineId);
@@ -204,6 +189,15 @@ export const Viewer = () => {
         });
       }
 
+      /**
+       * 先注册toolGroup，不然会找不到viewportInfo
+       */
+      await setVolumesForViewports(
+        renderingEngineRef.current,
+        [{ volumeId: SeriesInstanceUID }],
+        [viewportId1, viewportId2, viewportId3]
+      );
+
       // 默认windowWidtth
       // const { windowCenter, windowWidth } =
       //   volumeRef.current.cornerstoneImageMetaData;
@@ -214,34 +208,22 @@ export const Viewer = () => {
     });
 
     return () => {
-      renderingEngineRef.current?.disableElement(stackViewportId);
+      // renderingEngineRef.current?.disableElement(stackViewportId);
-      renderingEngineRef.current?.disableElement(viewportId1);
+      // renderingEngineRef.current?.disableElement(viewportId1);
-      renderingEngineRef.current?.disableElement(viewportId2);
+      // renderingEngineRef.current?.disableElement(viewportId2);
-      renderingEngineRef.current?.disableElement(viewportId3);
+      // renderingEngineRef.current?.disableElement(viewportId3);
+      cache.purgeCache();
+      ToolGroupManager.destroy();
       renderingEngineRef.current?.destroy();
 
-      ToolGroupManager.destroyToolGroup(toolGroupMprId);
-      ToolGroupManager.destroyToolGroup(toolGroupStackId);
-
-      cache.purgeCache();
-      console.log(cache.getVolume(volumeId!));
-
       cornerstoneTools.removeTool(StackScrollMouseWheelTool);
-      1;
       cornerstoneTools.removeTool(CrosshairsTool);
       cornerstoneTools.removeTool(WindowLevelTool);
       cornerstoneTools.removeTool(ZoomTool);
     };
-  }, [SeriesInstanceUID, StudyInstanceUID, volumeId]);
+  }, [SeriesInstanceUID, StudyInstanceUID, toolGroupStackId, volumeId]);
 
-  const onChangeIndex = (value: number[]) => {
+  const onChangeIndex = (value: number[]) => setIndex(value[0]);
-    setIndex(value[0]);
-  };
-
-  useEffect(
-    () => setIndex(imageIds ? Math.floor(imageIds.length / 2) : 0),
-    [imageIds]
-  );
 
   /**
    * 滚轮换图逻辑
@@ -262,10 +244,12 @@ export const Viewer = () => {
     };
   }, [imageIds, index]);
 
+  // stack换图
   useEffect(() => {
-    if (renderingEngineRef.current) {
+    const engine = renderingEngineRef.current;
-      const viewport = renderingEngineRef.current.getViewport(stackViewportId);
+    if (engine) {
-      (viewport as IStackViewport)?.setImageIdIndex(index);
+      const viewport = engine.getViewport(stackViewportId) as IStackViewport;
+      viewport?.setImageIdIndex(index);
     }
   }, [index]);
 
@@ -331,8 +315,14 @@ export const Viewer = () => {
           </ResizablePanel>
           <ResizableHandle withHandle />
           <ResizablePanel defaultSize={50}>
-            <div className="w-full h-1/3 border-b border-1 border-secondary" ref={volumeViewport1Ref} />
+            <div
-            <div className="w-full h-1/3 border-b border-1 border-secondary" ref={volumeViewport2Ref} />
+              className="w-full h-1/3 border-b border-1 border-secondary"
+              ref={volumeViewport1Ref}
+            />
+            <div
+              className="w-full h-1/3 border-b border-1 border-secondary"
+              ref={volumeViewport2Ref}
+            />
             <div className="w-full h-1/3" ref={volumeViewport3Ref} />
           </ResizablePanel>
         </ResizablePanelGroup>