pre perviewport stacks

dicom-viewer/src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useCallback, useState } from "react"
-import createImageIds from "./lib/createImageIds.ts"
+import { createImageIds, availableImageIds } from "./lib/createImageIds.ts"
 import {
   RenderingEngine,
   Enums,
@@ -251,7 +251,7 @@ function App() {
   };
 
   // Helper to apply all mouse tool bindings (normal or ctrl)
-const applyMouseToolBindings = useCallback(() => {
+  const applyMouseToolBindings = useCallback(() => {
     // Apply to both stack and volume tool groups
     const stackToolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(STACK_TOOL_GROUP_ID);
     const volumeToolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(VOLUME_TOOL_GROUP_ID);
@@ -292,7 +292,7 @@ const applyMouseToolBindings = useCallback(() => {
         });
       }
     });
-}, [mouseToolBindings, ctrlMouseToolBindings]);
+  }, [mouseToolBindings, ctrlMouseToolBindings]);
 
   const [sideMenuOpen, setSideMenuOpen] = useState(false);
 
@@ -412,22 +412,6 @@ const applyMouseToolBindings = useCallback(() => {
         .slice(0, viewportGrid.rows * viewportGrid.cols)
         .filter(mode => mode === 'volume').length;
 
-      // After the viewport setup loop, outside the for-loop:
-      if (
-        crossReferenceEnabled &&
-        visibleVolumeViewports >= 2
-      ) {
-        if (!volumeToolGroup.hasTool(CrosshairsTool.toolName)) {
-          volumeToolGroup.addTool(CrosshairsTool.toolName);
-        }
-        volumeToolGroup.setToolEnabled(CrosshairsTool.toolName);
-        volumeToolGroup.setToolActive(CrosshairsTool.toolName, {
-          bindings: [{ mouseButton: MouseBindings.Primary }],
-        });
-      } else if (volumeToolGroup.hasTool(CrosshairsTool.toolName)) {
-        volumeToolGroup.setToolDisabled(CrosshairsTool.toolName);
-      }
-
       // --- In your setup function, after tool group creation, enable/disable ReferenceLinesTool for each tool group ---
       if (referenceLinesEnabled) {
         if (!stackToolGroup.hasTool(ReferenceLinesTool.toolName)) {
@@ -521,15 +505,13 @@ const applyMouseToolBindings = useCallback(() => {
             });
           }
 
-          // Example: create and set a volume (you may need to adapt this for your data)
-          const volumeId = 'myVolumeId';
-          const volume = await volumeLoader.createAndCacheVolume(volumeId, { imageIds });
+          // Use a unique volumeId per viewport
+          const volumeId = `myVolumeId_${i}`;
+          const volume = await volumeLoader.createAndCacheVolume(volumeId, { imageIds: sortedImageIds });
           volume.load();
-          //await volumeLoader.loadVolume(volumeId);
           viewport.setVolumes([{ volumeId }]);
-          // Optionally restore properties for volume
           viewport.render();
-          return
+          continue
         }
         viewport.render();
 
@@ -586,6 +568,30 @@ const applyMouseToolBindings = useCallback(() => {
         updateOverlay(i, viewport);
       }
 
+      const activeVolumeViewports = [];
+      for (let i = 0; i < viewportGrid.rows * viewportGrid.cols; i++) {
+        const viewportId = `CT_${i}`;
+        const viewport = renderingEngineRef.current?.getViewport(viewportId);
+        if (viewport && viewportModes[i] === 'volume') {
+          activeVolumeViewports.push(viewport);
+        }
+      }
+
+      if (
+        crossReferenceEnabled &&
+        activeVolumeViewports.length >= 2
+      ) {
+        if (!volumeToolGroup.hasTool(CrosshairsTool.toolName)) {
+          volumeToolGroup.addTool(CrosshairsTool.toolName);
+        }
+        volumeToolGroup.setToolEnabled(CrosshairsTool.toolName);
+        volumeToolGroup.setToolActive(CrosshairsTool.toolName, {
+          bindings: [{ mouseButton: MouseBindings.Primary }],
+        });
+      } else if (volumeToolGroup.hasTool(CrosshairsTool.toolName)) {
+        volumeToolGroup.setToolDisabled(CrosshairsTool.toolName);
+      }
+
       // 7. Apply mouse tool bindings
       applyMouseToolBindings();
     };

dicom-viewer/src/lib/createImageIds.ts

@@ -65,7 +65,7 @@ import { readFile } from "dicom-parser"
 
 const NUM_IMAGES = 15 // set to however many images you have
 
-export default async function createImageIds() {
+export async function createImageIds() {
   const imageIds = []
   for (let i = 1; i <= NUM_IMAGES; i++) {
     const fileName = `IMG${String(i)}.dcm`
@@ -73,3 +73,15 @@ export default async function createImageIds() {
   }
   return imageIds
 }
+
+
+export async function availableImageIds() {
+  // Example: two stacks, each with 10 images
+  const stacks = [
+    Array.from({ length: 15 }, (_, i) => `wadouri:/test_images/stack2/IMG${i + 1}.dcm`),
+    Array.from({ length: 25 }, (_, i) => `wadouri:/test_images/stack5/IMG${i + 1}.dcm`),
+    Array.from({ length: 26 }, (_, i) => `wadouri:/test_images/stack3/IMG${i + 1}.dcm`),
+    // Add more stacks as needed
+  ];
+  return stacks;
+}