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): use updated algo to calc images per row in gallery for hotkey nav

Browse Source
This commit is contained in:
psychedelicious
2024-09-19 23:16:58 +10:00
parent f8f6fb95ea
commit 13db18f76f
1 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
View File

@@ -29,12 +29,36 @@ import type { ImageDTO } from 'services/api/types';
* Gets the number of images per row in the gallery by grabbing their DOM elements.
*/
const getImagesPerRow = (): number => {
const widthOfGalleryImage =
document.querySelector(`.${GALLERY_IMAGE_CLASS_NAME}`)?.getBoundingClientRect().width ?? 1;
const imageEl = document.querySelector(`.${GALLERY_IMAGE_CLASS_NAME}`);
const gridEl = document.querySelector(`.${GALLERY_GRID_CLASS_NAME}`);
const widthOfGalleryGrid = document.querySelector(`.${GALLERY_GRID_CLASS_NAME}`)?.getBoundingClientRect().width ?? 0;
if (!imageEl || !gridEl) {
return 0;
}
const container = gridEl.parentElement;
if (!container) {
return 0;
}
const imagesPerRow = Math.round(widthOfGalleryGrid / widthOfGalleryImage);
const imageRect = imageEl.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
// We need to account for the gap between images
const gridElStyle = window.getComputedStyle(gridEl);
const gap = parseFloat(gridElStyle.gap);
let imagesPerRow = 0;
let spaceUsed = 0;
// Floating point precision can cause imagesPerRow to be 1 too small. Adding 1px to the container size fixes
// this, without the possibility of accidentally adding an extra column.
while (spaceUsed + imageRect.width <= containerRect.width + 1) {
imagesPerRow++; // Increment the number of images
spaceUsed += imageRect.width; // Add image size to the used space
if (spaceUsed + gap <= containerRect.width) {
spaceUsed += gap; // Add gap size to the used space after each image except after the last image
}
}
return imagesPerRow;
};