github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 13:55:08 -05: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 { x, y } = target.getBoundingClientRect();
if (x === 0 || y === 0) {
// If the target is not visible, do not show the badge
// If the parent element is not visible, we do not want to show the badge. This can be tricky to reliably
// determine. The best way I've found is to check the bounding rect of the target and its parent.
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);
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);