From f47cf39ecaedefa9d9cdb6b95c566364e81e1cf6 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Thu, 19 Sep 2024 14:55:14 -0400 Subject: [PATCH] just remove while loop --- .../gallery/hooks/useGalleryNavigation.ts | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts index 1e98123e38..7e699aff97 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts @@ -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; }; /**