github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-01-15 06:18:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): upscaling tab boards/gallery collapse

Browse Source
This commit is contained in:
psychedelicious
2025-07-01 13:38:52 +10:00
parent fa72a97794
commit e9012280ab
4 changed files with 56 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
View File

@@ -218,14 +218,12 @@ const RightPanel = memo(() => {
[ctx._$rightPanelApi]
);
return (
<>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={rightPanelComponents}
onReady={onReady}
/>
</>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={rightPanelComponents}
onReady={onReady}
/>
);
});
RightPanel.displayName = 'RightPanel';
@@ -256,14 +254,12 @@ const LeftPanel = memo(() => {
[ctx._$leftPanelApi]
);
return (
<>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={leftPanelComponents}
onReady={onReady}
/>
</>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={leftPanelComponents}
onReady={onReady}
/>
);
});
LeftPanel.displayName = 'LeftPanel';

34
invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
View File

@@ -32,7 +32,6 @@ import { atom } from 'nanostores';
import { memo, useCallback, useRef, useState } from 'react';
import { GenerateTabLeftPanel } from './GenerateTabLeftPanel';
import { registerFocusListener } from './layout-focus-bridge';
import {
BOARD_PANEL_DEFAULT_HEIGHT_PX,
BOARD_PANEL_MIN_HEIGHT_PX,
@@ -78,7 +77,6 @@ const initializeCenterPanelLayout = (api: DockviewApi) => {
focusRegion: 'launchpad',
},
});
registerFocusListener(launchpadPanel, 'launchpad');
const viewerPanel = api.addPanel<PanelParameters>({
id: VIEWER_PANEL_ID,
@@ -93,7 +91,6 @@ const initializeCenterPanelLayout = (api: DockviewApi) => {
referencePanel: launchpadPanel.id,
},
});
registerFocusListener(viewerPanel, 'viewer');
return { launchpadPanel, viewerPanel } satisfies Record<string, IDockviewPanel>;
};
@@ -159,7 +156,6 @@ export const initializeRightPanelLayout = (api: GridviewApi) => {
focusRegion: 'gallery',
},
});
registerFocusListener(galleryPanel, 'gallery');
const boardsPanel = api.addPanel<PanelParameters>({
id: BOARDS_PANEL_ID,
@@ -173,7 +169,6 @@ export const initializeRightPanelLayout = (api: GridviewApi) => {
referencePanel: galleryPanel.id,
},
});
registerFocusListener(boardsPanel, 'boards');
boardsPanel.api.setSize({ height: BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
@@ -190,14 +185,12 @@ const RightPanel = memo(() => {
[ctx._$rightPanelApi]
);
return (
<>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={rightPanelComponents}
onReady={onReady}
/>
</>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={rightPanelComponents}
onReady={onReady}
/>
);
});
RightPanel.displayName = 'RightPanel';
@@ -214,7 +207,6 @@ export const initializeLeftPanelLayout = (api: GridviewApi) => {
focusRegion: 'settings',
},
});
registerFocusListener(settingsPanel, 'settings');
return { settingsPanel } satisfies Record<string, IGridviewPanel>;
};
@@ -229,14 +221,12 @@ const LeftPanel = memo(() => {
[ctx._$leftPanelApi]
);
return (
<>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={leftPanelComponents}
onReady={onReady}
/>
</>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={leftPanelComponents}
onReady={onReady}
/>
);
});
LeftPanel.displayName = 'LeftPanel';

40
invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
View File

@@ -175,20 +175,22 @@ export const initializeRightPanelLayout = (api: GridviewApi) => {
return { galleryPanel, boardsPanel } satisfies Record<string, IGridviewPanel>;
};
const onReadyRightPanel: IGridviewReactProps['onReady'] = (event) => {
initializeRightPanelLayout(event.api);
};
const RightPanel = memo(() => {
const ctx = useAutoLayoutContext();
const onReady = useCallback<IGridviewReactProps['onReady']>(
(event) => {
initializeRightPanelLayout(event.api);
ctx._$rightPanelApi.set(event.api);
},
[ctx._$rightPanelApi]
);
return (
<>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={rightPanelComponents}
onReady={onReadyRightPanel}
/>
</>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={rightPanelComponents}
onReady={onReady}
/>
);
});
RightPanel.displayName = 'RightPanel';
@@ -219,14 +221,12 @@ const LeftPanel = memo(() => {
[ctx._$leftPanelApi]
);
return (
<>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={leftPanelComponents}
onReady={onReady}
/>
</>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={leftPanelComponents}
onReady={onReady}
/>
);
});
LeftPanel.displayName = 'LeftPanel';

30
invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
View File

@@ -33,7 +33,6 @@ import { dockviewTheme } from 'features/ui/styles/theme';
import { atom } from 'nanostores';
import { memo, useCallback, useRef, useState } from 'react';
import { registerFocusListener } from './layout-focus-bridge';
import {
BOARD_PANEL_DEFAULT_HEIGHT_PX,
BOARD_PANEL_MIN_HEIGHT_PX,
@@ -203,14 +202,12 @@ const RightPanel = memo(() => {
[ctx._$rightPanelApi]
);
return (
<>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={rightPanelComponents}
onReady={onReady}
/>
</>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={rightPanelComponents}
onReady={onReady}
/>
);
});
RightPanel.displayName = 'RightPanel';
@@ -227,7 +224,6 @@ export const initializeLeftPanelLayout = (api: GridviewApi) => {
focusRegion: 'settings',
},
});
registerFocusListener(settingsPanel, 'settings');
return { settingsPanel } satisfies Record<string, IGridviewPanel>;
};
@@ -242,14 +238,12 @@ const LeftPanel = memo(() => {
[ctx._$leftPanelApi]
);
return (
<>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={leftPanelComponents}
onReady={onReady}
/>
</>
<GridviewReact
className="dockview-theme-invoke"
orientation={Orientation.VERTICAL}
components={leftPanelComponents}
onReady={onReady}
/>
);
});
LeftPanel.displayName = 'LeftPanel';