another stage

dicom-viewer/src/App.tsx

@@ -270,8 +270,8 @@ function App() {
             } */
 
             cornerstoneTools.utilities.stackPrefetch.enable(viewport.element);
+            renderingEngine.resize(true, true)
             console.log(i, viewport)
-            viewport.resetCameraForResize();
             viewport.render();
 
             // Attach overlay update for each viewport
@@ -279,6 +279,17 @@ function App() {
             // Initial overlay update
             updateOverlay(i, viewport);
           }
+
+          /*           // Resize and render all viewports to ensure correct canvas size
+                    for (let i = 0; i < viewportGrid.rows * viewportGrid.cols; i++) {
+                      const renderingEngineId = `renderingEngine_${i}`;
+                      const viewportId = `CT_${i}`;
+                      const renderingEngine = renderingEnginesRef.current[renderingEngineId];
+                      if (renderingEngine) {
+                        const viewport = renderingEngine.getViewport(viewportId);
+                        renderingEngine.resize(true, false)
+                      }
+                    } */
           applyMouseToolBindings();
           return;
         }
@@ -333,17 +344,24 @@ function App() {
       applyMouseToolBindings();
     };
 
-    // Delay setup by 100ms (adjust as needed)
+      setup();
+/*     // Delay setup by 100ms (adjust as needed)
     const timeout = setTimeout(() => {
       setup();
-    }, 300);
 
     return () => clearTimeout(timeout);
+    }, 300); */
+
+    return;
+
   }, [elementRef, updateOverlay, viewportGrid, loadedImageIds]);
 
   // Handler to reset the view (camera and window/level)
-  const handleResetView = useCallback(() => {
-    const viewport = viewportRef.current
+  const handleDoubleClick = useCallback((viewportIdx: numebr) => {
+    const renderingEngineId = `renderingEngine_${viewportIdx}`;
+    const viewportId = `CT_${viewportIdx}`;
+    const renderingEngine = renderingEnginesRef.current[renderingEngineId];
+    const viewport = renderingEngine.getViewport(viewportId);
     if (viewport && typeof viewport.resetCamera === "function") {
       viewport.resetCamera();
       viewport.resetProperties(); // Resets window/level and other properties
@@ -351,16 +369,13 @@ function App() {
     }
   }, [])
 
-  // Double-click handler (reuse the same logic)
-  const handleDoubleClick = handleResetView
-
   // Handler to apply a preset for a specific viewport
   const handleApplyPreset = useCallback((viewportIdx: number, center: number, width: number) => {
     console.log("Applying preset:", center, width);
     const renderingEngineId = `renderingEngine_${viewportIdx}`;
     const viewportId = `CT_${viewportIdx}`;
     try {
-const renderingEngine = renderingEnginesRef.current[renderingEngineId];
+      const renderingEngine = renderingEnginesRef.current[renderingEngineId];
       console.log("Rendering engine:", renderingEngine);
       if (renderingEngine) {
         const viewport = renderingEngine.getViewport(viewportId);
@@ -437,6 +452,7 @@ const renderingEngine = renderingEnginesRef.current[renderingEngineId];
           display: "flex",
           flexDirection: "column",
         }}
+        onDoubleClick={() => handleDoubleClick(i)}
       >
         {/* Overlay info (bottom left of viewport) */}
         <div
@@ -558,27 +574,6 @@ const renderingEngine = renderingEnginesRef.current[renderingEngineId];
 
   return (
     <div style={{ position: "relative", width: "100vw", height: "100vh", background: "#111" }}>
-      {/* Reset View Button */}
-      <button
-        style={{
-          position: "absolute",
-          top: 8,
-          left: 8,
-          zIndex: 10,
-          padding: "6px 12px",
-          background: "#222",
-          color: "#fff",
-          border: "none",
-          borderRadius: "4px",
-          cursor: "pointer",
-          opacity: 0.85,
-          userSelect: "none",
-        }}
-        onClick={handleResetView}
-      >
-        Reset View
-      </button>
-
       {/* Viewport grid menu at top center */}
       <div
         style={{