From 196fb0e014912b198251a1f452b038ffe57e1b27 Mon Sep 17 00:00:00 2001
From: Rohinish <singhrohinish09@gmail.com>
Date: Wed, 3 Jan 2024 22:48:57 +0530
Subject: [PATCH] added support for bottom key

---
 .../CurrentImage/CurrentImagePreview.tsx      | 11 +++++-
 .../gallery/hooks/useNextPrevImage.ts         | 37 +++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
index 6a6c0aef14..585bd91954 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
@@ -46,7 +46,8 @@ const CurrentImagePreview = () => {
     handleLoadMoreImages,
     areMoreImagesAvailable,
     isFetching,
-    handleTopImage
+    handleTopImage,
+    handleBottomImage
   } = useNextPrevImage();
 
   useHotkeys(
@@ -85,6 +86,14 @@ const CurrentImagePreview = () => {
     [handleTopImage]
   );
 
+  useHotkeys(
+    'down',
+    () => {
+      handleBottomImage();
+    },
+    [handleBottomImage]
+  );
+
   const { currentData: imageDTO } = useGetImageDTOQuery(imageName ?? skipToken);
 
   const draggableData = useMemo<TypesafeDraggableData | undefined>(() => {
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useNextPrevImage.ts b/invokeai/frontend/web/src/features/gallery/hooks/useNextPrevImage.ts
index c14bebfff6..a5c613f80e 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useNextPrevImage.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useNextPrevImage.ts
@@ -79,10 +79,12 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
     const nextImageIndex = clamp(currentImageIndex + 1, 0, images.length - 1);
     const prevImageIndex = clamp(currentImageIndex - 1, 0, images.length - 1);
     const topImageIndex = clamp(currentImageIndex - imagesPerRow,0, images.length - 1)
+    const bottomImageIndex = clamp(currentImageIndex + imagesPerRow,0, images.length - 1)
 
     const nextImageId = images[nextImageIndex]?.image_name;
     const prevImageId = images[prevImageIndex]?.image_name;
     const topImageId = images[topImageIndex]?.image_name
+    const bottomImageId = images[bottomImageIndex]?.image_name
 
     const nextImage = nextImageId
       ? imagesSelectors.selectById(data, nextImageId)
@@ -93,6 +95,9 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
     const topImage = topImageId  
       ? selectors.selectById(data, topImageId)
       : undefined;
+    const bottomImage = bottomImageId  
+      ? selectors.selectById(data, bottomImageId)
+      : undefined;  
 
     const imagesLength = images.length;
 
@@ -107,7 +112,9 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
       prevImageIndex,
       queryArgs,
       topImageIndex,
-      topImage
+      topImage,
+      bottomImageIndex,
+      bottomImage
     };
   }
 );
@@ -126,7 +133,9 @@ export const useNextPrevImage = () => {
     loadedImagesCount,
     currentImageIndex,
     topImageIndex,
-    topImage
+    topImage,
+    bottomImageIndex,
+    bottomImage
   } = useAppSelector(nextPrevImageButtonsSelector);
 
   const handlePrevImage = useCallback(() => {
@@ -190,6 +199,27 @@ export const useNextPrevImage = () => {
     }
   },[dispatch, topImage, topImageIndex])
 
+  const handleBottomImage = useCallback(() => {
+    bottomImage && dispatch(imageSelected(bottomImage));
+    const range = $useNextPrevImageState.get().virtuosoRangeRef?.current;
+    const virtuoso = $useNextPrevImageState.get().virtuosoRef?.current;
+
+    if (!range || !virtuoso) {
+      return;
+    }
+
+    if (
+      bottomImageIndex !== undefined &&
+      (bottomImageIndex < range.startIndex || bottomImageIndex > range.endIndex)
+    ) {
+      virtuoso.scrollToIndex({
+        index: bottomImageIndex,
+        behavior: 'smooth',
+        align: getScrollToIndexAlign(bottomImageIndex, range),
+      });
+    }
+  },[dispatch, bottomImage, bottomImageIndex])
+
   const [listImages] = useLazyListImagesQuery();
 
   const handleLoadMoreImages = useCallback(() => {
@@ -208,6 +238,7 @@ export const useNextPrevImage = () => {
     areMoreImagesAvailable,
     handleLoadMoreImages,
     isFetching,
-    handleTopImage
+    handleTopImage,
+    handleBottomImage
   };
 };