github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): queue count badge renders when left panel collapsed

Browse Source
This commit is contained in:
psychedelicious
2025-07-29 12:24:40 +10:00
parent e8aa91931d
commit ea2e1ea8f0
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
invokeai/frontend/web/src/features/queue/components/QueueCountBadge.tsx
View File

@@ -28,13 +28,24 @@ export const QueueCountBadge = memo(({ targetRef }: Props) => {
} }
const cb = () => { const cb = () => {
const { x, y } = target.getBoundingClientRect(); // If the parent element is not visible, we do not want to show the badge. This can be tricky to reliably
if (x === 0 || y === 0) { // determine. The best way I've found is to check the bounding rect of the target and its parent.
// If the target is not visible, do not show the badge const badgeElRect = target.getBoundingClientRect();
const parentElRect = parent.getBoundingClientRect();
if (
badgeElRect.x === 0 ||
badgeElRect.y === 0 ||
badgeElRect.width === 0 ||
badgeElRect.height === 0 ||
parentElRect.x === 0 ||
parentElRect.y === 0 ||
parentElRect.width === 0 ||
parentElRect.height === 0
) {
setBadgePos(null); setBadgePos(null);
return; return;
} }
setBadgePos({ x: `${x - 7}px`, y: `${y - 5}px` }); setBadgePos({ x: `${badgeElRect.x - 7}px`, y: `${badgeElRect.y - 5}px` });
}; };
const resizeObserver = new ResizeObserver(cb); const resizeObserver = new ResizeObserver(cb);