updates

OHIF · Jan 22, 2025 · b24d873 · b24d873
1 parent 34908ca
commit b24d873
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 69 deletions.
diff --git a/extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx b/extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx
@@ -1,22 +1,6 @@
 import { useState, useCallback, useLayoutEffect, useRef } from 'react';
 import { getPanelElement, getPanelGroupElement } from 'react-resizable-panels';
-
-// Id needed to grab the panel group for converting pixels to percentages
-const viewerLayoutResizablePanelGroupId = 'viewerLayoutResizablePanelGroup';
-const viewerLayoutResizableLeftPanelId = 'viewerLayoutResizableLeftPanel';
-const viewerLayoutResizableRightPanelId = 'viewerLayoutResizableRightPanel';
-
-const sidePanelExpandedDefaultWidth = 280;
-const sidePanelExpandedInsideBorderSize = 4;
-const sidePanelExpandedDefaultOffsetWidth =
-  sidePanelExpandedDefaultWidth + sidePanelExpandedInsideBorderSize;
-const sidePanelCollapsedInsideBorderSize = 4;
-const sidePanelCollapsedOutsideBorderSize = 8;
-const sidePanelCollapsedWidth = 25;
-const sidePanelCollapsedOffsetWidth =
-  sidePanelCollapsedWidth +
-  sidePanelCollapsedInsideBorderSize +
-  sidePanelCollapsedOutsideBorderSize;
+import { panelGroupDefination } from './constants/panels';
 
 /**
  * Set the minimum and maximum css style width attributes for the given element.
@@ -43,15 +27,15 @@ const useResizablePanels = (
   setRightPanelClosed
 ) => {
   const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState(
-    sidePanelExpandedDefaultWidth
+    panelGroupDefination.left.expandedDefaultWidth
   );
   const [rightPanelExpandedWidth, setRightPanelExpandedWidth] = useState(
-    sidePanelExpandedDefaultWidth
+    panelGroupDefination.right.expandedDefaultWidth
   );
-
-  // Percentage sizes.
-  const [resizablePanelCollapsedSize, setResizablePanelCollapsedSize] = useState(0);
-  const [resizablePanelDefaultSize, setResizablePanelDefaultSize] = useState(0);
+  const [leftResizablePanelDefaultSize, setLeftResizePanelDefaultSize] = useState(0);
+  const [rightResizePanelDefaultSize, setRightResizePanelDefaultSize] = useState(0);
+  const [leftRizeablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = useState(0);
+  const [rightResizePanelCollapsedSize, setRightResizePanelCollapsedSize] = useState(0);
 
   const resizablePanelGroupElemRef = useRef(null);
   const resizableLeftPanelElemRef = useRef(null);
@@ -65,30 +49,33 @@ const useResizablePanels = (
   //   converting between percentages and pixels in various callbacks.
   // - Expand those panels that are initially expanded.
   useLayoutEffect(() => {
-    const panelGroupElem = getPanelGroupElement(viewerLayoutResizablePanelGroupId);
+    const panelGroupElem = getPanelGroupElement(panelGroupDefination.groupId);
 
     resizablePanelGroupElemRef.current = panelGroupElem;
     const { width: panelGroupWidth } = panelGroupElem.getBoundingClientRect();
 
-    const leftPanelElem = getPanelElement(viewerLayoutResizableLeftPanelId);
+    const leftPanelElem = getPanelElement(panelGroupDefination.left.panelId);
     resizableLeftPanelElemRef.current = leftPanelElem;
 
-    const rightPanelElem = getPanelElement(viewerLayoutResizableRightPanelId);
+    const rightPanelElem = getPanelElement(panelGroupDefination.right.panelId);
     resizableRightPanelElemRef.current = rightPanelElem;
 
-    const resizablePanelExpandedSize =
-      (sidePanelExpandedDefaultOffsetWidth / panelGroupWidth) * 100;
+    // we use the initialExpandedDefaultOffsetWidth on the first render incase the panel has min width but we want the initial state to be larger than that
+    const leftResizablePanelExpandedSize =
+      (panelGroupDefination.left.initialExpandedDefaultOffsetWidth / panelGroupWidth) * 100;
+    const rightResizablePanelExpandedSize =
+      (panelGroupDefination.right.initialExpandedDefaultOffsetWidth / panelGroupWidth) * 100;
 
     // Since both resizable panels are collapsed by default (i.e. their default size is zero),
     // on the very first render check if either/both side panels should be expanded.
     if (!leftPanelClosed) {
-      resizableLeftPanelAPIRef?.current?.expand(resizablePanelExpandedSize);
-      setMinMaxWidth(leftPanelElem, sidePanelExpandedDefaultOffsetWidth);
+      resizableLeftPanelAPIRef?.current?.expand(leftResizablePanelExpandedSize);
+      setMinMaxWidth(leftPanelElem, panelGroupDefination.left.initialExpandedDefaultOffsetWidth);
     }
 
     if (!rightPanelClosed) {
-      resizableRightPanelAPIRef?.current?.expand(resizablePanelExpandedSize);
-      setMinMaxWidth(rightPanelElem, sidePanelExpandedDefaultOffsetWidth);
+      resizableRightPanelAPIRef?.current?.expand(rightResizablePanelExpandedSize);
+      setMinMaxWidth(rightPanelElem, panelGroupDefination.right.initialExpandedDefaultOffsetWidth);
     }
   }, []); // no dependencies because this useLayoutEffect is only needed on the very first render
 
@@ -114,25 +101,38 @@ const useResizablePanels = (
     // for a panel.
     if (!resizableLeftPanelAPIRef.current.isCollapsed()) {
       const leftSize =
-        ((leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize) / panelGroupWidth) * 100;
+        ((leftPanelExpandedWidth + panelGroupDefination.shared.expandedInsideBorderSize) /
+          panelGroupWidth) *
+        100;
       resizableLeftPanelAPIRef.current.resize(leftSize);
     }
 
     if (!resizableRightPanelAPIRef.current.isCollapsed()) {
       const rightSize =
-        ((rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize) / panelGroupWidth) * 100;
+        ((rightPanelExpandedWidth + panelGroupDefination.shared.expandedInsideBorderSize) /
+          panelGroupWidth) *
+        100;
       resizableRightPanelAPIRef.current.resize(rightSize);
     }
 
     // This observer kicks in when the ViewportLayout resizable panel group
     // component is resized. This typically occurs when the browser window resizes.
     const observer = new ResizeObserver(() => {
       const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-      const defaultSize = (sidePanelExpandedDefaultOffsetWidth / panelGroupWidth) * 100;
+      const defaultLeftSize =
+        (panelGroupDefination.left.expandedDefaultOffsetWidth / panelGroupWidth) * 100;
+      const defaultRightSize =
+        (panelGroupDefination.right.expandedDefaultOffsetWidth / panelGroupWidth) * 100;
 
       // Set the new default and collapsed resizable panel sizes.
-      setResizablePanelDefaultSize(Math.min(50, defaultSize));
-      setResizablePanelCollapsedSize((sidePanelCollapsedOffsetWidth / panelGroupWidth) * 100);
+      setLeftResizePanelDefaultSize(Math.min(50, defaultLeftSize));
+      setRightResizePanelDefaultSize(Math.min(50, defaultRightSize));
+      setLeftResizePanelCollapsedSize(
+        (panelGroupDefination.left.collapsedOffsetWidth / panelGroupWidth) * 100
+      );
+      setRightResizePanelCollapsedSize(
+        (panelGroupDefination.right.collapsedOffsetWidth / panelGroupWidth) * 100
+      );
 
       if (
         resizableLeftPanelAPIRef.current.isCollapsed() &&
@@ -146,12 +146,12 @@ const useResizablePanels = (
 
       // Determine the current widths of the two side panels.
       let leftPanelOffsetWidth = resizableLeftPanelAPIRef.current.isCollapsed()
-        ? sidePanelCollapsedOffsetWidth
-        : leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize;
+        ? panelGroupDefination.left.collapsedOffsetWidth
+        : leftPanelExpandedWidth + panelGroupDefination.shared.expandedInsideBorderSize;
 
       let rightPanelOffsetWidth = resizableRightPanelAPIRef.current.isCollapsed()
-        ? sidePanelCollapsedOffsetWidth
-        : rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize;
+        ? panelGroupDefination.right.collapsedOffsetWidth
+        : rightPanelExpandedWidth + panelGroupDefination.shared.expandedInsideBorderSize;
 
       if (
         !resizableLeftPanelAPIRef.current.isCollapsed() &&
@@ -162,9 +162,11 @@ const useResizablePanels = (
         // Reduce the left panel width so that both panels might fit.
         leftPanelOffsetWidth = Math.max(
           panelGroupWidth - rightPanelOffsetWidth,
-          sidePanelExpandedDefaultOffsetWidth
+          panelGroupDefination.left.expandedDefaultOffsetWidth
+        );
+        setLeftPanelExpandedWidth(
+          leftPanelOffsetWidth - panelGroupDefination.shared.expandedInsideBorderSize
         );
-        setLeftPanelExpandedWidth(leftPanelOffsetWidth - sidePanelExpandedInsideBorderSize);
         setMinMaxWidth(resizableLeftPanelElemRef.current, leftPanelOffsetWidth);
       }
 
@@ -177,9 +179,11 @@ const useResizablePanels = (
         // Reduce the right panel width so that both panels might fit.
         rightPanelOffsetWidth = Math.max(
           panelGroupWidth - leftPanelOffsetWidth,
-          sidePanelExpandedDefaultOffsetWidth
+          panelGroupDefination.right.expandedDefaultOffsetWidth
+        );
+        setRightPanelExpandedWidth(
+          rightPanelOffsetWidth - panelGroupDefination.shared.expandedInsideBorderSize
         );
-        setRightPanelExpandedWidth(rightPanelOffsetWidth - sidePanelExpandedInsideBorderSize);
         setMinMaxWidth(resizableRightPanelElemRef.current, rightPanelOffsetWidth);
       }
     });
@@ -189,7 +193,12 @@ const useResizablePanels = (
     return () => {
       observer.disconnect();
     };
-  }, [leftPanelExpandedWidth, resizablePanelDefaultSize, rightPanelExpandedWidth]);
+  }, [
+    leftPanelExpandedWidth,
+    rightPanelExpandedWidth,
+    leftResizablePanelDefaultSize,
+    rightResizePanelDefaultSize,
+  ]);
 
   /**
    * Handles dragging of either side panel resize handle.
@@ -207,14 +216,14 @@ const useResizablePanels = (
         if (resizableLeftPanelAPIRef?.current?.isExpanded()) {
           setMinMaxWidth(
             resizableLeftPanelElemRef.current,
-            leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize
+            leftPanelExpandedWidth + panelGroupDefination.shared.expandedInsideBorderSize
           );
         }
 
         if (resizableRightPanelAPIRef?.current?.isExpanded()) {
           setMinMaxWidth(
             resizableRightPanelElemRef.current,
-            rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize
+            rightPanelExpandedWidth + panelGroupDefination.shared.expandedInsideBorderSize
           );
         }
       }
@@ -233,7 +242,7 @@ const useResizablePanels = (
     if (!isResizableHandleDraggingRef.current) {
       setMinMaxWidth(
         resizableLeftPanelElemRef.current,
-        leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize
+        leftPanelExpandedWidth + panelGroupDefination.shared.expandedInsideBorderSize
       );
     }
     setLeftPanelClosed(false);
@@ -245,7 +254,9 @@ const useResizablePanels = (
     }
 
     const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    setLeftPanelExpandedWidth((size / 100) * panelGroupWidth - sidePanelExpandedInsideBorderSize);
+    setLeftPanelExpandedWidth(
+      (size / 100) * panelGroupWidth - panelGroupDefination.shared.expandedInsideBorderSize
+    );
   }, []);
 
   const onRightPanelClose = useCallback(() => {
@@ -259,7 +270,7 @@ const useResizablePanels = (
     if (!isResizableHandleDraggingRef.current) {
       setMinMaxWidth(
         resizableRightPanelElemRef.current,
-        rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize
+        rightPanelExpandedWidth + panelGroupDefination.shared.expandedInsideBorderSize
       );
     }
     setRightPanelClosed(false);
@@ -270,53 +281,55 @@ const useResizablePanels = (
       return;
     }
     const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    setRightPanelExpandedWidth((size / 100) * panelGroupWidth - sidePanelExpandedInsideBorderSize);
+    setRightPanelExpandedWidth(
+      (size / 100) * panelGroupWidth - panelGroupDefination.shared.expandedInsideBorderSize
+    );
   }, []);
 
   return [
     {
       expandedWidth: leftPanelExpandedWidth,
-      collapsedWidth: sidePanelCollapsedWidth,
-      collapsedInsideBorderSize: sidePanelCollapsedInsideBorderSize,
-      collapsedOutsideBorderSize: sidePanelCollapsedOutsideBorderSize,
-      expandedInsideBorderSize: sidePanelExpandedInsideBorderSize,
+      collapsedWidth: panelGroupDefination.left.collapsedOffsetWidth,
+      collapsedInsideBorderSize: panelGroupDefination.shared.collapsedInsideBorderSize,
+      collapsedOutsideBorderSize: panelGroupDefination.shared.collapsedOutsideBorderSize,
+      expandedInsideBorderSize: panelGroupDefination.shared.expandedInsideBorderSize,
       onClose: onLeftPanelClose,
       onOpen: onLeftPanelOpen,
     },
     {
       expandedWidth: rightPanelExpandedWidth,
-      collapsedWidth: sidePanelCollapsedWidth,
-      collapsedInsideBorderSize: sidePanelCollapsedInsideBorderSize,
-      collapsedOutsideBorderSize: sidePanelCollapsedOutsideBorderSize,
-      expandedInsideBorderSize: sidePanelExpandedInsideBorderSize,
+      collapsedWidth: panelGroupDefination.right.collapsedOffsetWidth,
+      collapsedInsideBorderSize: panelGroupDefination.shared.collapsedInsideBorderSize,
+      collapsedOutsideBorderSize: panelGroupDefination.shared.collapsedOutsideBorderSize,
+      expandedInsideBorderSize: panelGroupDefination.shared.expandedInsideBorderSize,
       onClose: onRightPanelClose,
       onOpen: onRightPanelOpen,
     },
-    { direction: 'horizontal', id: viewerLayoutResizablePanelGroupId },
+    { direction: 'horizontal', id: panelGroupDefination.groupId },
     {
-      defaultSize: resizablePanelDefaultSize,
-      minSize: resizablePanelDefaultSize,
+      defaultSize: leftResizablePanelDefaultSize,
+      minSize: leftResizablePanelDefaultSize,
       onResize: onLeftPanelResize,
       collapsible: true,
-      collapsedSize: resizablePanelCollapsedSize,
+      collapsedSize: leftRizeablePanelCollapsedSize,
       onCollapse: () => setLeftPanelClosed(true),
       onExpand: () => setLeftPanelClosed(false),
       ref: resizableLeftPanelAPIRef,
       order: 0,
-      id: viewerLayoutResizableLeftPanelId,
+      id: panelGroupDefination.left.panelId,
     },
     { order: 1, id: 'viewerLayoutResizableViewportGridPanel' },
     {
-      defaultSize: resizablePanelDefaultSize,
-      minSize: resizablePanelDefaultSize,
+      defaultSize: rightResizePanelDefaultSize,
+      minSize: rightResizePanelDefaultSize,
       onResize: onRightPanelResize,
       collapsible: true,
-      collapsedSize: resizablePanelCollapsedSize,
+      collapsedSize: rightResizePanelCollapsedSize,
       onCollapse: () => setRightPanelClosed(true),
       onExpand: () => setRightPanelClosed(false),
       ref: resizableRightPanelAPIRef,
       order: 2,
-      id: viewerLayoutResizableRightPanelId,
+      id: panelGroupDefination.right.panelId,
     },
     onHandleDragging,
   ];

diff --git a/extensions/default/src/ViewerLayout/constants/panels.ts b/extensions/default/src/ViewerLayout/constants/panels.ts
@@ -0,0 +1,30 @@
+const panelGroupDefination = {
+  groupId: 'viewerLayoutResizablePanelGroup',
+  shared: {
+    expandedInsideBorderSize: 4,
+    collapsedInsideBorderSize: 4,
+    collapsedOutsideBorderSize: 8,
+    collapsedWidth: 25,
+  },
+  left: {
+    // id
+    panelId: 'viewerLayoutResizableLeftPanel',
+    // expanded width
+    expandedDefaultWidth: 282,
+    // expanded width + expanded inside border
+    expandedDefaultOffsetWidth: 145 + 4,
+    // initial expanded width
+    initialExpandedDefaultOffsetWidth: 282 + 4,
+    // collapsed width + collapsed inside border + collapsed outside border
+    collapsedOffsetWidth: 25 + 4 + 8,
+  },
+  right: {
+    panelId: 'viewerLayoutResizableRightPanel',
+    expandedDefaultWidth: 280,
+    expandedDefaultOffsetWidth: 280 + 4,
+    initialExpandedDefaultOffsetWidth: 280 + 4,
+    collapsedOffsetWidth: 25 + 4 + 8,
+  },
+};
+
+export { panelGroupDefination };