feat: 待解决mpr页面刷新的报错问题

apps/desktop/src/components/base/SideBarLeft/index.tsx

@@ -6,7 +6,8 @@ export const SideBarLeft = () => {
   const location = useLocation();
 
   const handleClick = (item: MenuItem) => {
-    console.log(`Clicked on ${item.name}`);
+    console.log(`Clicked on ${item.name}`)
+    console.log(window.location.href)
   };
 
   return (

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

@@ -44,7 +44,6 @@ export const createImageIdsAndCacheMetaData = async (
     });
 
     const modality = (instances[0] as unknown as any)[MODALITY].Value[0];
-    console.log("modality", modality);
 
     let imageIds = instances.map((instanceMetaData: any) => {
       const SeriesInstanceUID = instanceMetaData[SERIES_INSTANCE_UID].Value[0];

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

@@ -5,10 +5,11 @@ import { init as csRenderInit } from "@cornerstonejs/core";
 import { init as csToolsInit } from "@cornerstonejs/tools";
 
 // 入口
-export const initCornerstone = async () => {
+export const initCornerstone = async (callback?: () => void) => {
   initProviders();
   initCornerstoneDICOMImageLoader();
   initVolumeLoader();
   await csRenderInit();
   await csToolsInit();
+  callback?.();
 };

apps/desktop/src/pages/Viewer/MprViewer/Crosshair.tsx

@@ -66,6 +66,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
   const viewportRef_CORONAL = useRef<HTMLDivElement | null>(null);
   const renderingEngine = useRef<RenderingEngine>();
   const imageIds = useRef<string[]>();
+  const ts = "-" + Date.now();
 
   useEffect(() => {
     cornerstoneTools.addTool(StackScrollMouseWheelTool);
@@ -80,17 +81,22 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
       )
         return;
 
+      renderingEngine.current = new RenderingEngine(
+        props.SeriesInstanceUID + ts
+      );
+      const toolGroup = ToolGroupManager.createToolGroup(
+        props.SeriesInstanceUID + ts
+      );
+
       imageIds.current = await createImageIdsAndCacheMetaData({
         StudyInstanceUID: props.StudyInstanceUID,
         SeriesInstanceUID: props.SeriesInstanceUID,
         wadoRsRoot: "http://localhost:8042/dicom-web",
       });
 
-      renderingEngine.current = new RenderingEngine(props.SeriesInstanceUID);
-
       // Define a volume in memory
       const volume = await volumeLoader.createAndCacheVolume(
-        props.SeriesInstanceUID,
+        props.SeriesInstanceUID + ts,
         {
           imageIds: imageIds.current ?? [],
         }
@@ -100,7 +106,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
       const { windowCenter, windowWidth } = volume.cornerstoneImageMetaData;
       const defaultWindowCenter = 50;
       const defaultWindowWidth = 850;
-      console.log(2, windowCenter, windowWidth);
+      console.log("采用默认窗宽/位: ", windowCenter, windowWidth);
 
       // Create the viewports
       const viewportInputArray: PublicViewportInput[] = [
@@ -143,7 +149,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
         renderingEngine.current,
         [
           {
-            volumeId: props.SeriesInstanceUID,
+            volumeId: props.SeriesInstanceUID + ts,
             callback: ({ volumeActor }) =>
               setCtTransferFunctionForVolumeActor({
                 volumeActor,
@@ -155,16 +161,12 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
         [viewportId1, viewportId2, viewportId3]
       );
 
-      const toolGroup = ToolGroupManager.createToolGroup(
-        props.SeriesInstanceUID
-      );
-
       if (toolGroup) {
         // For the crosshairs to operate, the viewports must currently be
         // added ahead of setting the tool active. This will be improved in the future.
-        toolGroup.addViewport(viewportId1, props.SeriesInstanceUID);
-        toolGroup.addViewport(viewportId2, props.SeriesInstanceUID);
-        toolGroup.addViewport(viewportId3, props.SeriesInstanceUID);
+        toolGroup.addViewport(viewportId1, props.SeriesInstanceUID + ts);
+        toolGroup.addViewport(viewportId2, props.SeriesInstanceUID + ts);
+        toolGroup.addViewport(viewportId3, props.SeriesInstanceUID + ts);
 
         // Manipulation Tools
         toolGroup.addTool(StackScrollMouseWheelTool.toolName);
@@ -212,9 +214,9 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
       cornerstoneTools.removeTool(CrosshairsTool);
       cornerstoneTools.removeTool(WindowLevelTool);
       renderingEngine.current?.destroy();
-      ToolGroupManager.destroyToolGroup(props.SeriesInstanceUID);
+      ToolGroupManager.destroyToolGroup(props.SeriesInstanceUID + ts);
     };
-  }, [props]);
+  }, [props, ts]);
 
   useEffect(() => {
     const resize = () => renderingEngine.current?.resize();

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

@@ -26,9 +26,15 @@ export const Viewer = () => {
   }, [currentDicom]);
 
   useEffect(() => {
-    initCornerstone().then(() => setCornerstoneLoaded(true));
+    initCornerstone(() => {
+      setCornerstoneLoaded(true);
+    });
   }, []);
 
+  useEffect(() => {
+    console.log(currentDicom, cornerstoneLoaded);
+  }, [cornerstoneLoaded, currentDicom]);
+
   return (
     <div className="w-full h-full flex">
       <div className="w-2/3 h-full">vr</div>
@@ -41,8 +47,9 @@ export const Viewer = () => {
               SeriesInstanceUID={currentDicom.SeriesInstanceUID}
             />
           )}
-        {Object.values(currentDicom).some((i) => !i) && "导入dicom"}
       </div>
+
+      {Object.values(currentDicom).some((i) => !i) && "导入dicom"}
     </div>
   );
 };