othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(panels): Allow for setting the initial and minimum expanded widths of each side panel. (#5207)

Browse Source
This commit is contained in:
Joe Boccanfuso 2025-07-14 11:50:27 -04:00 committed by GitHub
parent 1f33b291b9
commit 545411137c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 59 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx
View File

@ -1,6 +1,6 @@
import { useState, useCallback, useLayoutEffect, useRef } from 'react'; import { useState, useCallback, useLayoutEffect, useRef } from 'react';
import { getPanelElement, getPanelGroupElement } from 'react-resizable-panels'; import { getPanelElement, getPanelGroupElement } from 'react-resizable-panels';
import { panelGroupDefinition } from './constants/panels'; import { getPanelGroupDefinition } from './constants/panels';
/** /**
* Set the minimum and maximum css style width attributes for the given element. * Set the minimum and maximum css style width attributes for the given element.
@ -30,8 +30,21 @@ const useResizablePanels = (
rightPanelClosed, rightPanelClosed,
setRightPanelClosed, setRightPanelClosed,
hasLeftPanels, hasLeftPanels,
hasRightPanels hasRightPanels,
leftPanelInitialExpandedWidth,
rightPanelInitialExpandedWidth,
leftPanelMinimumExpandedWidth,
rightPanelMinimumExpandedWidth
) => { ) => {
const [panelGroupDefinition] = useState(
getPanelGroupDefinition({
leftPanelInitialExpandedWidth,
rightPanelInitialExpandedWidth,
leftPanelMinimumExpandedWidth,
rightPanelMinimumExpandedWidth,
})
);
const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState( const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState(
panelGroupDefinition.left.initialExpandedWidth panelGroupDefinition.left.initialExpandedWidth
); );

66
extensions/default/src/ViewerLayout/constants/panels.ts
View File

@ -3,36 +3,40 @@ const collapsedInsideBorderSize = 4;
const collapsedOutsideBorderSize = 4; const collapsedOutsideBorderSize = 4;
const collapsedWidth = 25; const collapsedWidth = 25;
const rightPanelInitialExpandedWidth = 280; const getPanelGroupDefinition = ({
const leftPanelInitialExpandedWidth = 282; leftPanelInitialExpandedWidth = 282,
rightPanelInitialExpandedWidth = 280,
const panelGroupDefinition = { leftPanelMinimumExpandedWidth = 145,
groupId: 'viewerLayoutResizablePanelGroup', rightPanelMinimumExpandedWidth = 280,
shared: { }) => {
expandedInsideBorderSize, return {
collapsedInsideBorderSize, groupId: 'viewerLayoutResizablePanelGroup',
collapsedOutsideBorderSize, shared: {
collapsedWidth, expandedInsideBorderSize,
}, collapsedInsideBorderSize,
left: { collapsedOutsideBorderSize,
// id collapsedWidth,
panelId: 'viewerLayoutResizableLeftPanel', },
// expanded width left: {
initialExpandedWidth: leftPanelInitialExpandedWidth, // id
// expanded width + expanded inside border panelId: 'viewerLayoutResizableLeftPanel',
minimumExpandedOffsetWidth: 145 + expandedInsideBorderSize, // expanded width
// initial expanded width initialExpandedWidth: leftPanelInitialExpandedWidth,
initialExpandedOffsetWidth: leftPanelInitialExpandedWidth + expandedInsideBorderSize, // expanded width + expanded inside border
// collapsed width + collapsed inside border + collapsed outside border minimumExpandedOffsetWidth: leftPanelMinimumExpandedWidth + expandedInsideBorderSize,
collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize, // initial expanded width
}, initialExpandedOffsetWidth: leftPanelInitialExpandedWidth + expandedInsideBorderSize,
right: { // collapsed width + collapsed inside border + collapsed outside border
panelId: 'viewerLayoutResizableRightPanel', collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
initialExpandedWidth: rightPanelInitialExpandedWidth, },
minimumExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize, right: {
initialExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize, panelId: 'viewerLayoutResizableRightPanel',
collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize, initialExpandedWidth: rightPanelInitialExpandedWidth,
}, minimumExpandedOffsetWidth: rightPanelMinimumExpandedWidth + expandedInsideBorderSize,
initialExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
},
};
}; };
export { panelGroupDefinition }; export { getPanelGroupDefinition };

10
extensions/default/src/ViewerLayout/index.tsx
View File

@ -24,6 +24,10 @@ function ViewerLayout({
rightPanelClosed = false, rightPanelClosed = false,
leftPanelResizable = false, leftPanelResizable = false,
rightPanelResizable = false, rightPanelResizable = false,
leftPanelInitialExpandedWidth,
rightPanelInitialExpandedWidth,
leftPanelMinimumExpandedWidth,
rightPanelMinimumExpandedWidth,
}: withAppTypes): React.FunctionComponent { }: withAppTypes): React.FunctionComponent {
const [appConfig] = useAppConfig(); const [appConfig] = useAppConfig();
@ -54,7 +58,11 @@ function ViewerLayout({
rightPanelClosed, rightPanelClosed,
setRightPanelClosed, setRightPanelClosed,
hasLeftPanels, hasLeftPanels,
hasRightPanels hasRightPanels,
leftPanelInitialExpandedWidth,
rightPanelInitialExpandedWidth,
leftPanelMinimumExpandedWidth,
rightPanelMinimumExpandedWidth
); );
const handleMouseEnter = () => { const handleMouseEnter = () => {