feat: dd

apps/aorta/src/modules/Root/Viewer/Crosshair/index.tsx

@@ -90,9 +90,6 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
   const renderingEngine = useRef<RenderingEngine>();
   const imageIds = useRef<string[]>();
 
-  cornerstoneTools.addTool(StackScrollMouseWheelTool);
-  cornerstoneTools.addTool(CrosshairsTool);
-
   const run = async () => {
     initDemo();
 
@@ -107,7 +104,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
 
     // Define a volume in memory
     const volume = await volumeLoader.createAndCacheVolume(volumeId, {
-      imageIds: imageIds.current,
+      imageIds: imageIds.current ?? [],
     });
 
     // Instantiate a rendering engine
@@ -146,6 +143,8 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
 
     renderingEngine.current.setViewports(viewportInputArray);
 
+    console.log(volume);
+
     // Set the volume to load
     volume.load();
 
@@ -164,31 +163,33 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
     // Define tool groups to add the segmentation display tool to
     const toolGroup = ToolGroupManager.createToolGroup(toolGroupId);
 
-    // 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, renderingEngineId);
-    toolGroup.addViewport(viewportId2, renderingEngineId);
-    toolGroup.addViewport(viewportId3, renderingEngineId);
+    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, renderingEngineId);
+      toolGroup.addViewport(viewportId2, renderingEngineId);
+      toolGroup.addViewport(viewportId3, renderingEngineId);
 
-    // Manipulation Tools
-    toolGroup.addTool(StackScrollMouseWheelTool.toolName);
-    // Add Crosshairs tool and configure it to link the three viewports
-    // These viewports could use different tool groups. See the PET-CT example
-    // for a more complicated used case.
+      // Manipulation Tools
+      toolGroup.addTool(StackScrollMouseWheelTool.toolName);
+      // Add Crosshairs tool and configure it to link the three viewports
+      // These viewports could use different tool groups. See the PET-CT example
+      // for a more complicated used case.
 
-    toolGroup.addTool(CrosshairsTool.toolName, {
-      getReferenceLineColor,
-      getReferenceLineControllable,
-      getReferenceLineDraggableRotatable,
-      getReferenceLineSlabThicknessControlsOn,
-    });
+      toolGroup.addTool(CrosshairsTool.toolName, {
+        getReferenceLineColor,
+        getReferenceLineControllable,
+        getReferenceLineDraggableRotatable,
+        getReferenceLineSlabThicknessControlsOn,
+      });
 
-    toolGroup.setToolActive(CrosshairsTool.toolName, {
-      bindings: [{ mouseButton: 1 }],
-    });
-    // As the Stack Scroll mouse wheel is a tool using the `mouseWheelCallback`
-    // hook instead of mouse buttons, it does not need to assign any mouse button.
-    toolGroup.setToolActive(StackScrollMouseWheelTool.toolName);
+      toolGroup.setToolActive(CrosshairsTool.toolName, {
+        bindings: [{ mouseButton: 1 }],
+      });
+      // As the Stack Scroll mouse wheel is a tool using the `mouseWheelCallback`
+      // hook instead of mouse buttons, it does not need to assign any mouse button.
+      toolGroup.setToolActive(StackScrollMouseWheelTool.toolName);
+    }
 
     renderingEngine.current.renderViewports([
       viewportId1,
@@ -198,14 +199,36 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
   };
 
   useEffect(() => {
+    cornerstoneTools.addTool(StackScrollMouseWheelTool);
+    cornerstoneTools.addTool(CrosshairsTool);
+    console.log("添加tool1");
+
     run();
+
+    return () => {
+      // TODO: 是否需要写在组件，根据页面需要
+      console.log("卸载tool2");
+      cornerstoneTools.removeTool(StackScrollMouseWheelTool);
+      cornerstoneTools.removeTool(CrosshairsTool);
+    };
   }, []);
 
   useEffect(() => {
     window.addEventListener("resize", () => {
       renderingEngine.current?.resize();
     });
-  });
+  }, []);
+
+  const test = () => {
+    // console.log(volumeLoader)
+    console.log(cornerstone.cache.getVolume(volumeId).getScalarData());
+  };
+
+  useEffect(() => {
+    document.addEventListener(Enums.Events.VOLUME_CACHE_VOLUME_ADDED, () => {
+      console.log(111);
+    });
+  }, []);
 
   return (
     <div>
@@ -214,6 +237,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
         <div style={{ width: 300, height: 300 }} ref={viewportId2Ref}></div>
         <div style={{ width: 300, height: 300 }} ref={viewportId3Ref}></div>
       </div>
+      <button onClick={test}>测试</button>
     </div>
   );
 };

apps/aorta/src/modules/Root/Viewer/Crosshair/util/initCornerstoneDICOMImageLoader.js

@@ -26,14 +26,8 @@ export default function initCornerstoneDICOMImageLoader() {
     },
   });
 
-  let maxWebWorkers = 1;
-
-  if (navigator.hardwareConcurrency) {
-    maxWebWorkers = Math.min(navigator.hardwareConcurrency, 7);
-  }
-
-  var config = {
-    maxWebWorkers,
+  const config = {
+    maxWebWorkers: navigator.hardwareConcurrency ? Math.min(navigator.hardwareConcurrency, 7) : 1,
     startWebWorkersOnDemand: false,
     taskConfiguration: {
       decodeTask: {