github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-17 00:41:22 -05:00
Code Issues Packages Projects Releases Wiki Activity

just remove while loop

Browse Source
This commit is contained in:
Mary Hipp
2024-09-19 14:55:14 -04:00
committed by Kent Keirsey
parent 079d05b5d6
commit f47cf39eca
1 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,13 +29,33 @@ 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 imagesPerRow = Math.round(widthOfGalleryGrid / widthOfGalleryImage);
return imagesPerRow
const container = gridEl.parentElement;
if (!container) {
return 0;
}
const imageRect = imageEl.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
const gridElStyle = window.getComputedStyle(gridEl);
const gap = parseFloat(gridElStyle.gap);
// Validate input values
if (imageRect.width <= 0 || gap < 0) {
return 0;
}
// Calculate maximum number of images per row
const imagesPerRow = Math.floor((containerRect.width + 1) / (imageRect.width + gap));
return imagesPerRow;
};
/**