@ohif/app 3.10.0-beta.76 → 3.10.0-beta.78

package/dist/{1919.bundle.a56f8d9725154e8785e7.js → 1919.bundle.31872868d6d682f65000.js}

@@ -1358,8 +1358,8 @@ function WorkflowPanel({
 
 
 
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 116 modules
-var cornerstone_src = __webpack_require__(29199);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 117 modules
+var cornerstone_src = __webpack_require__(7490);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicExport.tsx
 
 

package/dist/{2701.bundle.b0e1042f5a528fb6bd2b.js → 2701.bundle.835eb3e0006bcfb85469.js}

@@ -27,8 +27,8 @@ var dicomSRModule = __webpack_require__(76654);
 var ui_src = __webpack_require__(32907);
 // EXTERNAL MODULE: ../../../extensions/cornerstone-dicom-sr/src/utils/createReferencedImageDisplaySet.ts
 var createReferencedImageDisplaySet = __webpack_require__(92643);
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 116 modules
-var cornerstone_src = __webpack_require__(29199);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 117 modules
+var cornerstone_src = __webpack_require__(7490);
 // EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
 var ui_next_src = __webpack_require__(18817);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx

package/dist/{2897.bundle.47ef91cbdce2c8d82aff.js → 2897.bundle.64b79bbbfa3cd956b6ed.js}

@@ -3073,8 +3073,8 @@ function ViewerHeader({
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.10.0-beta.76";
-  const commitHash = "61699d00b6ce1e53631fd8c01e783701e01a7373";
+  const versionNumber = "3.10.0-beta.78";
+  const commitHash = "6abb095b8a39c5ae4f8df8852b3ddb3249ec463f";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -3236,9 +3236,9 @@ const SidePanelWithServices = ({
 // EXTERNAL MODULE: ../../../node_modules/react-resizable-panels/dist/react-resizable-panels.browser.esm.js
 var react_resizable_panels_browser_esm = __webpack_require__(17825);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/constants/panels.ts
-const expandedInsideBorderSize = 4;
+const expandedInsideBorderSize = 0;
 const collapsedInsideBorderSize = 4;
-const collapsedOutsideBorderSize = 8;
+const collapsedOutsideBorderSize = 4;
 const collapsedWidth = 25;
 const rightPanelInitialExpandedWidth = 280;
 const leftPanelInitialExpandedWidth = 282;
@@ -3279,7 +3279,7 @@ const panelGroupDefinition = {
 /**
  * Set the minimum and maximum css style width attributes for the given element.
  * The two style attributes are cleared whenever the width
- * arguments is undefined.
+ * argument is undefined.
  * <p>
  * This utility is used as part of a HACK throughout the ViewerLayout component as
  * the means of restricting the side panel widths during the resizing of the
@@ -3298,7 +3298,7 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
   const [rightPanelExpandedWidth, setRightPanelExpandedWidth] = (0,react.useState)(panelGroupDefinition.right.initialExpandedWidth);
   const [leftResizablePanelMinimumSize, setLeftResizablePanelMinimumSize] = (0,react.useState)(0);
   const [rightResizablePanelMinimumSize, setRightResizablePanelMinimumSize] = (0,react.useState)(0);
-  const [leftResizeablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = (0,react.useState)(0);
+  const [leftResizablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = (0,react.useState)(0);
   const [rightResizePanelCollapsedSize, setRightResizePanelCollapsedSize] = (0,react.useState)(0);
   const resizablePanelGroupElemRef = (0,react.useRef)(null);
   const resizableLeftPanelElemRef = (0,react.useRef)(null);
@@ -3307,6 +3307,9 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
   const resizableRightPanelAPIRef = (0,react.useRef)(null);
   const isResizableHandleDraggingRef = (0,react.useRef)(false);
 
+  // The total width of both handles.
+  const resizableHandlesWidth = (0,react.useRef)(null);
+
   // This useLayoutEffect is used to...
   // - Grab a reference to the various resizable panel elements needed for
   //   converting between percentages and pixels in various callbacks.
@@ -3314,25 +3317,29 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
   (0,react.useLayoutEffect)(() => {
     const panelGroupElem = (0,react_resizable_panels_browser_esm/* getPanelGroupElement */.Gx)(panelGroupDefinition.groupId);
     resizablePanelGroupElemRef.current = panelGroupElem;
-    const {
-      width: panelGroupWidth
-    } = panelGroupElem.getBoundingClientRect();
     const leftPanelElem = (0,react_resizable_panels_browser_esm/* getPanelElement */.PV)(panelGroupDefinition.left.panelId);
     resizableLeftPanelElemRef.current = leftPanelElem;
     const rightPanelElem = (0,react_resizable_panels_browser_esm/* getPanelElement */.PV)(panelGroupDefinition.right.panelId);
     resizableRightPanelElemRef.current = rightPanelElem;
 
+    // Calculate and set the width of both handles combined.
+    const resizeHandles = document.querySelectorAll('[data-panel-resize-handle-id]');
+    resizableHandlesWidth.current = 0;
+    resizeHandles.forEach(resizeHandle => {
+      resizableHandlesWidth.current += resizeHandle.offsetWidth;
+    });
+
     // 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.
     // we use the initialExpandedOffsetWidth on the first render incase the panel has min width but we want the initial state to be larger than that
 
     if (!leftPanelClosed) {
-      const leftResizablePanelExpandedSize = panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth * 100;
+      const leftResizablePanelExpandedSize = getPercentageSize(panelGroupDefinition.left.initialExpandedOffsetWidth);
       resizableLeftPanelAPIRef?.current?.expand(leftResizablePanelExpandedSize);
       setMinMaxWidth(leftPanelElem, panelGroupDefinition.left.initialExpandedOffsetWidth);
     }
     if (!rightPanelClosed) {
-      const rightResizablePanelExpandedSize = panelGroupDefinition.right.initialExpandedOffsetWidth / panelGroupWidth * 100;
+      const rightResizablePanelExpandedSize = getPercentageSize(panelGroupDefinition.right.initialExpandedOffsetWidth);
       resizableRightPanelAPIRef?.current?.expand(rightResizablePanelExpandedSize);
       setMinMaxWidth(rightPanelElem, panelGroupDefinition.right.initialExpandedOffsetWidth);
     }
@@ -3348,67 +3355,34 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
   //   values whenever the resizable panel group is resized (e.g. whenever the
   //   browser window is resized).
   (0,react.useLayoutEffect)(() => {
-    const {
-      width: panelGroupWidth
-    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-
     // Ensure the side panels' percentage size is in synch with the pixel width of the
     // expanded side panels. In general the two get out-of-sync during a browser
     // window resize. Note that this code is here and NOT in the ResizeObserver
     // because it has to be done AFTER the minimum percentage size for a panel is
-    // updated which occurs only AFTER the render following a resize. And by virtue
-    // of the dependency on the  `resizablePanelDefaultSize` state, this code
-    // is executed on the render following an update of the minimum percentage size
+    // updated which occurs only AFTER the render following a browser window resize.
+    // And by virtue of the dependency on the minimum size state variables, this code
+    // is executed on the render following an update of the minimum percentage sizes
     // for a panel.
     if (!resizableLeftPanelAPIRef.current.isCollapsed()) {
-      const leftSize = (leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize) / panelGroupWidth * 100;
+      const leftSize = getPercentageSize(leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
       resizableLeftPanelAPIRef.current.resize(leftSize);
     }
     if (!resizableRightPanelAPIRef.current.isCollapsed()) {
-      const rightSize = (rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize) / panelGroupWidth * 100;
+      const rightSize = getPercentageSize(rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
       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 minimumLeftSize = panelGroupDefinition.left.minimumExpandedOffsetWidth / panelGroupWidth * 100;
-      const minimumRightSize = panelGroupDefinition.right.minimumExpandedOffsetWidth / panelGroupWidth * 100;
-
-      // Set the new default and collapsed resizable panel sizes.
-      setLeftResizablePanelMinimumSize(Math.min(50, minimumLeftSize));
-      setRightResizablePanelMinimumSize(Math.min(50, minimumRightSize));
-      setLeftResizePanelCollapsedSize(panelGroupDefinition.left.collapsedOffsetWidth / panelGroupWidth * 100);
-      setRightResizePanelCollapsedSize(panelGroupDefinition.right.collapsedOffsetWidth / panelGroupWidth * 100);
-      if (resizableLeftPanelAPIRef.current.isCollapsed() && resizableRightPanelAPIRef.current.isCollapsed()) {
-        return;
-      }
-
-      // The code that follows is to handle cases when the group panel is resized to be
-      // too small to display either side panel at its current width.
-
-      // Determine the current widths of the two side panels.
-      let leftPanelOffsetWidth = resizableLeftPanelAPIRef.current.isCollapsed() ? panelGroupDefinition.left.collapsedOffsetWidth : leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize;
-      let rightPanelOffsetWidth = resizableRightPanelAPIRef.current.isCollapsed() ? panelGroupDefinition.right.collapsedOffsetWidth : rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize;
-      if (!resizableLeftPanelAPIRef.current.isCollapsed() && leftPanelOffsetWidth + rightPanelOffsetWidth > panelGroupWidth) {
-        // There is not enough space to show both panels at their pre-resize widths.
-        // Note that at this point, the viewport grid component is zero width.
-        // Reduce the left panel width so that both panels might fit.
-        leftPanelOffsetWidth = Math.max(panelGroupWidth - rightPanelOffsetWidth, panelGroupDefinition.left.minimumExpandedOffsetWidth);
-        setLeftPanelExpandedWidth(leftPanelOffsetWidth - panelGroupDefinition.shared.expandedInsideBorderSize);
-        setMinMaxWidth(resizableLeftPanelElemRef.current, leftPanelOffsetWidth);
-      }
-      if (!resizableRightPanelAPIRef.current.isCollapsed() && rightPanelOffsetWidth + leftPanelOffsetWidth > panelGroupWidth) {
-        // There is not enough space to show both panels at their pre-resize widths.
-        // Note that at this point, the viewport grid component is zero width.
-        // Reduce the right panel width so that both panels might fit.
-        rightPanelOffsetWidth = Math.max(panelGroupWidth - leftPanelOffsetWidth, panelGroupDefinition.right.minimumExpandedOffsetWidth);
-        setRightPanelExpandedWidth(rightPanelOffsetWidth - panelGroupDefinition.shared.expandedInsideBorderSize);
-        setMinMaxWidth(resizableRightPanelElemRef.current, rightPanelOffsetWidth);
-      }
+      const minimumLeftSize = getPercentageSize(panelGroupDefinition.left.minimumExpandedOffsetWidth);
+      const minimumRightSize = getPercentageSize(panelGroupDefinition.right.minimumExpandedOffsetWidth);
+
+      // Set the new minimum and collapsed resizable panel sizes.
+      setLeftResizablePanelMinimumSize(minimumLeftSize);
+      setRightResizablePanelMinimumSize(minimumRightSize);
+      setLeftResizePanelCollapsedSize(getPercentageSize(panelGroupDefinition.left.collapsedOffsetWidth));
+      setRightResizePanelCollapsedSize(getPercentageSize(panelGroupDefinition.right.collapsedOffsetWidth));
     });
     observer.observe(resizablePanelGroupElemRef.current);
     return () => {
@@ -3440,21 +3414,21 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     resizableLeftPanelAPIRef?.current?.collapse();
   }, [setLeftPanelClosed]);
   const onLeftPanelOpen = (0,react.useCallback)(() => {
-    const {
-      width: panelGroupWidth
-    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    resizableLeftPanelAPIRef?.current?.expand(panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth * 100);
+    resizableLeftPanelAPIRef?.current?.expand(getPercentageSize(panelGroupDefinition.left.initialExpandedOffsetWidth));
     setLeftPanelClosed(false);
   }, [setLeftPanelClosed]);
   const onLeftPanelResize = (0,react.useCallback)(size => {
-    if (resizableLeftPanelAPIRef.current.isCollapsed()) {
+    if (!resizablePanelGroupElemRef?.current || resizableLeftPanelAPIRef.current.isCollapsed()) {
       return;
     }
-    const {
-      width: panelGroupWidth
-    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    const newExpandedWidth = size / 100 * panelGroupWidth - panelGroupDefinition.shared.expandedInsideBorderSize;
+    const newExpandedWidth = getExpandedPixelWidth(size);
     setLeftPanelExpandedWidth(newExpandedWidth);
+    if (!isResizableHandleDraggingRef.current) {
+      // This typically gets executed when the left panel is expanded via one of the UI
+      // buttons. It is done here instead of in the onLeftPanelOpen method
+      // because here we know the size of the expanded panel.
+      setMinMaxWidth(resizableLeftPanelElemRef.current, newExpandedWidth);
+    }
   }, []);
   const onRightPanelClose = (0,react.useCallback)(() => {
     setRightPanelClosed(true);
@@ -3462,22 +3436,45 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     resizableRightPanelAPIRef?.current?.collapse();
   }, [setRightPanelClosed]);
   const onRightPanelOpen = (0,react.useCallback)(() => {
-    const {
-      width: panelGroupWidth
-    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    resizableRightPanelAPIRef?.current?.expand(panelGroupDefinition.right.initialExpandedOffsetWidth / panelGroupWidth * 100);
+    resizableRightPanelAPIRef?.current?.expand(getPercentageSize(panelGroupDefinition.right.initialExpandedOffsetWidth));
     setRightPanelClosed(false);
   }, [setRightPanelClosed]);
   const onRightPanelResize = (0,react.useCallback)(size => {
-    if (resizableRightPanelAPIRef?.current?.isCollapsed()) {
+    if (!resizablePanelGroupElemRef?.current || resizableRightPanelAPIRef.current.isCollapsed()) {
       return;
     }
+    const newExpandedWidth = getExpandedPixelWidth(size);
+    setRightPanelExpandedWidth(newExpandedWidth);
+    if (!isResizableHandleDraggingRef.current) {
+      // This typically gets executed when the right panel is expanded via one of the UI
+      // buttons. It is done here instead of in the onRightPanelOpen method
+      // because here we know the size of the expanded panel.
+      setMinMaxWidth(resizableRightPanelElemRef.current, newExpandedWidth);
+    }
+  }, []);
+
+  /**
+   * Gets the percentage size corresponding to the given pixel size.
+   * Note that the width attributed to the handles must be taken into account.
+   */
+  const getPercentageSize = pixelSize => {
     const {
       width: panelGroupWidth
     } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    const newExpandedWidth = size / 100 * panelGroupWidth - panelGroupDefinition.shared.expandedInsideBorderSize;
-    setRightPanelExpandedWidth(newExpandedWidth);
-  }, []);
+    return pixelSize / (panelGroupWidth - resizableHandlesWidth.current) * 100;
+  };
+
+  /**
+   * Gets the width in pixels for an expanded panel given its percentage size/width.
+   * Note that the width attributed to the handles must be taken into account.
+   */
+  const getExpandedPixelWidth = percentageSize => {
+    const {
+      width: panelGroupWidth
+    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
+    const expandedWidth = percentageSize / 100 * (panelGroupWidth - resizableHandlesWidth.current) - panelGroupDefinition.shared.expandedInsideBorderSize;
+    return expandedWidth;
+  };
   return [{
     expandedWidth: leftPanelExpandedWidth,
     collapsedWidth: panelGroupDefinition.shared.collapsedWidth,
@@ -3502,7 +3499,7 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     minSize: leftResizablePanelMinimumSize,
     onResize: onLeftPanelResize,
     collapsible: true,
-    collapsedSize: leftResizeablePanelCollapsedSize,
+    collapsedSize: leftResizablePanelCollapsedSize,
     onCollapse: () => setLeftPanelClosed(true),
     onExpand: () => setLeftPanelClosed(false),
     ref: resizableLeftPanelAPIRef,
@@ -3536,6 +3533,7 @@ function ViewerLayout_extends() { return ViewerLayout_extends = Object.assign ?
 
 
 
+const resizableHandleClassName = 'mt-[1px] bg-black';
 function ViewerLayout({
   // From Extension Module Params
   extensionManager,
@@ -3648,7 +3646,7 @@ function ViewerLayout({
   }, leftPanelProps))), /*#__PURE__*/react.createElement(ui_next_src/* ResizableHandle */.WM, {
     onDragging: onHandleDragging,
     disabled: !leftPanelResizable,
-    className: "!w-0"
+    className: resizableHandleClassName
   })) : null, /*#__PURE__*/react.createElement(ui_next_src/* ResizablePanel */.wV, resizableViewportGridPanelProps, /*#__PURE__*/react.createElement("div", {
     className: "flex h-full flex-1 flex-col"
   }, /*#__PURE__*/react.createElement("div", {
@@ -3660,7 +3658,7 @@ function ViewerLayout({
   })))), hasRightPanels ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_next_src/* ResizableHandle */.WM, {
     onDragging: onHandleDragging,
     disabled: !rightPanelResizable,
-    className: "!w-0"
+    className: resizableHandleClassName
   }), /*#__PURE__*/react.createElement(ui_next_src/* ResizablePanel */.wV, resizableRightPanelProps, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, ViewerLayout_extends({
     side: "right",
     isExpanded: !rightPanelClosedState,

package/dist/{4526.bundle.90118ca1c32e0a4c7314.js → 4526.bundle.7d643ae29b3ac24f4972.js}

@@ -144,8 +144,8 @@ function _getStatusComponent({
     side: "bottom"
   }, /*#__PURE__*/react.createElement(ToolTipMessage, null))), !ToolTipMessage && /*#__PURE__*/react.createElement(StatusArea, null));
 }
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 116 modules
-var cornerstone_src = __webpack_require__(29199);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 117 modules
+var cornerstone_src = __webpack_require__(7490);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/index.js + 2 modules
 var enums = __webpack_require__(99737);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx

package/dist/{5770.bundle.4e4a67dd013f0faa1eff.js → 5770.bundle.a141e0d905d7f8583ed2.js}

@@ -75,8 +75,8 @@ __webpack_require__.d(__webpack_exports__, {
 var react = __webpack_require__(86326);
 // EXTERNAL MODULE: ../../core/src/index.ts + 73 modules
 var src = __webpack_require__(10532);
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 116 modules
-var cornerstone_src = __webpack_require__(29199);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 117 modules
+var cornerstone_src = __webpack_require__(7490);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/adapters/dist/esm/index.js + 62 modules
 var esm = __webpack_require__(4904);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 94 modules

package/dist/{6201.bundle.403edc53e7164620ff5a.js → 6201.bundle.c12aad45324561ef6a49.js}

@@ -28,8 +28,8 @@ var src = __webpack_require__(10532);
 var esm = __webpack_require__(81985);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/adapters/dist/esm/index.js + 62 modules
 var dist_esm = __webpack_require__(4904);
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 116 modules
-var cornerstone_src = __webpack_require__(29199);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 117 modules
+var cornerstone_src = __webpack_require__(7490);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-pmap/src/getSopClassHandlerModule.ts
 
 

package/dist/{7197.bundle.1654101bf836a84b875a.js → 7197.bundle.38967aed63fbf5958bba.js}

@@ -771,7 +771,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 
 const Component = /*#__PURE__*/react.lazy(() => {
-  return Promise.all(/* import() */[__webpack_require__.e(3334), __webpack_require__.e(9199), __webpack_require__.e(4526)]).then(__webpack_require__.bind(__webpack_require__, 58295));
+  return Promise.all(/* import() */[__webpack_require__.e(3334), __webpack_require__.e(7490), __webpack_require__.e(4526)]).then(__webpack_require__.bind(__webpack_require__, 58295));
 });
 const OHIFCornerstoneSEGViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {