feat: mpr

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

@@ -12,6 +12,7 @@ import * as cornerstoneTools from "@cornerstonejs/tools";
 import createImageIdsAndCacheMetaData from "./util/createImageIdsAndCacheMetaData";
 import { PublicViewportInput } from "@cornerstonejs/core/dist/types/types/IViewport.js";
 import setCtTransferFunctionForVolumeActor from "./util/setCtTransferFunctionForVolumeActor";
+import * as cornerstone from "@cornerstonejs/core";
 
 const {
   ToolGroupManager,
@@ -80,10 +81,14 @@ function getReferenceLineSlabThicknessControlsOn(viewportId) {
   return index !== -1;
 }
 
+const renderingEngineId = "myRenderingEngine";
+
 export const CrosshairMpr = (props: CrosshairMprProps) => {
   const viewportId1Ref = useRef(null);
   const viewportId2Ref = useRef(null);
   const viewportId3Ref = useRef(null);
+  const renderingEngine = useRef<RenderingEngine>();
+  const imageIds = useRef<string[]>();
 
   cornerstoneTools.addTool(StackScrollMouseWheelTool);
   cornerstoneTools.addTool(CrosshairsTool);
@@ -92,7 +97,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
     initDemo();
 
     // Get Cornerstone imageIds for the source data and fetch metadata into RAM
-    const imageIds = await createImageIdsAndCacheMetaData({
+    imageIds.current = await createImageIdsAndCacheMetaData({
       StudyInstanceUID:
         "1.2.840.113564.345049290535.9692.637552042156233117.433089",
       SeriesInstanceUID:
@@ -102,12 +107,11 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
 
     // Define a volume in memory
     const volume = await volumeLoader.createAndCacheVolume(volumeId, {
-      imageIds,
+      imageIds: imageIds.current,
     });
 
     // Instantiate a rendering engine
-    const renderingEngineId = "myRenderingEngine";
-    const renderingEngine = new RenderingEngine(renderingEngineId);
+    renderingEngine.current = new RenderingEngine(renderingEngineId);
 
     // Create the viewports
     const viewportInputArray: PublicViewportInput[] = [
@@ -140,14 +144,14 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
       },
     ];
 
-    renderingEngine.setViewports(viewportInputArray);
+    renderingEngine.current.setViewports(viewportInputArray);
 
     // Set the volume to load
     volume.load();
 
     // Set volumes on the viewports
     await setVolumesForViewports(
-      renderingEngine,
+      renderingEngine.current,
       [
         {
           volumeId,
@@ -186,12 +190,23 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
     // hook instead of mouse buttons, it does not need to assign any mouse button.
     toolGroup.setToolActive(StackScrollMouseWheelTool.toolName);
 
-    renderingEngine.renderViewports([viewportId1, viewportId2, viewportId3]);
+    renderingEngine.current.renderViewports([
+      viewportId1,
+      viewportId2,
+      viewportId3,
+    ]);
   };
 
   useEffect(() => {
     run();
   }, []);
+
+  useEffect(() => {
+    window.addEventListener("resize", () => {
+      renderingEngine.current?.resize();
+    });
+  });
+
   return (
     <div>
       <div style={{ display: "flex", gap: 20 }}>