feat: stackViewport渲染

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

@@ -19,6 +19,7 @@ import {
   viewportId3,
   ViewportId,
 } from "./Crosshair.config";
+import { IStackViewport } from "@cornerstonejs/core/dist/types/types";
 
 const {
   ToolGroupManager,
@@ -63,6 +64,7 @@ interface CrosshairMprProps {
 
 export const CrosshairMpr = (props: CrosshairMprProps) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const viewportStack = useRef<HTMLDivElement | null>(null);
   const viewportRef_AXIAL = useRef<HTMLDivElement | null>(null);
   const viewportRef_SAGITTAL = useRef<HTMLDivElement | null>(null);
   const viewportRef_CORONAL = useRef<HTMLDivElement | null>(null);
@@ -116,6 +118,17 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
       const defaultWindowWidth = 850;
       console.log("采用默认窗宽/位: ", windowCenter, windowWidth);
 
+      // 定义 Stack 视口
+      const stackViewport = "stack" + props.SeriesInstanceUID + ts;
+      const viewportInput: PublicViewportInput = {
+        viewportId: stackViewport,
+        type: CoreEnums.ViewportType.STACK, // 用于 Stack 视图
+        element: viewportStack.current!,
+        defaultOptions: {
+          background: [0, 0, 0],
+        },
+      };
+
       // Create the viewports
       const viewportInputArray: PublicViewportInput[] = [
         {
@@ -124,7 +137,7 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
           element: viewportRef_AXIAL.current,
           defaultOptions: {
             orientation: CoreEnums.OrientationAxis.AXIAL,
-            background: [0, 0, 0], 
+            background: [0, 0, 0],
           },
         },
         {
@@ -147,7 +160,16 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
         },
       ];
 
-      renderingEngine.current.setViewports(viewportInputArray);
+      renderingEngine.current.setViewports([
+        ...viewportInputArray,
+        viewportInput,
+      ]);
+
+      const viewport = renderingEngine.current.getViewport(
+        stackViewport
+      ) as IStackViewport;
+
+      viewport.setStack(imageIds.current, 80);
 
       // Set the volume to load
       volume.load();
@@ -280,9 +302,10 @@ export const CrosshairMpr = (props: CrosshairMprProps) => {
 
   return (
     <div ref={containerRef} className="w-full h-full flex flex-col">
-      <div className="w-full h-1/3" ref={viewportRef_AXIAL} />
-      <div className="w-full h-1/3" ref={viewportRef_SAGITTAL} />
-      <div className="w-full h-1/3" ref={viewportRef_CORONAL} />
+      <div className="w-full h-1/4" ref={viewportRef_AXIAL} />
+      <div className="w-full h-1/4" ref={viewportRef_SAGITTAL} />
+      <div className="w-full h-1/4" ref={viewportRef_CORONAL} />
+      <div className="w-full h-1/4" ref={viewportStack} />
     </div>
   );
 };

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

@@ -1,13 +1,14 @@
 import { useLocation } from "react-router-dom";
 import { initCornerstone } from "./MprViewer/CornerstoneDicomLoader/init";
 import { CrosshairMpr } from "./MprViewer/Crosshair";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import { ToolBarMenu } from "./MprViewer/ToolBarMenu";
+import { RenderingEngine } from "@cornerstonejs/core";
 
 export interface CurrentDicom {
   SeriesInstanceUID: string | null;
@@ -36,7 +37,7 @@ export const Viewer = () => {
     initCornerstone(() => {
       setCornerstoneLoaded(true);
     });
-  }, []);
+  }, [queryParams]);
 
   useEffect(() => {
     console.log(cornerstoneLoaded);
@@ -49,14 +50,14 @@ export const Viewer = () => {
       </div>
       <div className="flex-grow">
         <ResizablePanelGroup direction="horizontal" className="w-full h-full">
-          <ResizablePanel defaultSize={61.8}>
+          <ResizablePanel defaultSize={50}>
             <div className="h-full">
               <ResizablePanelGroup
                 direction="vertical"
                 className="w-full h-full"
               >
                 <ResizablePanel defaultSize={50}>
-                  <div>top</div>
+                  <div id="stackElement" className="w-full h-full"></div>
                 </ResizablePanel>
                 <ResizableHandle withHandle />
                 <ResizablePanel defaultSize={50}>
@@ -66,7 +67,7 @@ export const Viewer = () => {
             </div>
           </ResizablePanel>
           <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={38.2}>
+          <ResizablePanel defaultSize={50}>
             {cornerstoneLoaded &&
               currentDicom.StudyInstanceUID &&
               currentDicom.SeriesInstanceUID && (