feat(ui): make image field collection scrollable

Author: psychedelicious

invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts

@@ -2,6 +2,7 @@ import { deepClone } from 'common/util/deepClone';
 import { merge } from 'lodash-es';
 import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars';
 import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
+import type { CSSProperties } from 'react';
 
 OverlayScrollbars.plugin(ClickScrollPlugin);
 
@@ -27,3 +28,8 @@ export const getOverlayScrollbarsParams = (
   merge(params, { options: { overflow: { y: overflowY, x: overflowX } } });
   return params;
 };
+
+export const overlayScrollbarsStyles: CSSProperties = {
+  height: '100%',
+  width: '100%',
+};

invokeai/frontend/web/src/features/dnd/DndImageFromImageName.tsx

@@ -1,8 +1,10 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Flex, Grid, GridItem } from '@invoke-ai/ui-library';
+import { Box, Flex, Grid, GridItem } from '@invoke-ai/ui-library';
 import { useAppStore } from 'app/store/nanostores/store';
 import { IAINoContentFallback, IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
+import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
 import { UploadMultipleImageButton } from 'common/hooks/useImageUploadButton';
+import { TRANSPARENCY_CHECKERBOARD_PATTERN_DARK_DATAURL } from 'features/controlLayers/konva/patterns/transparency-checkerboard-pattern';
 import type { AddImagesToNodeImageFieldCollection } from 'features/dnd/dnd';
 import { addImagesToNodeImageFieldCollectionDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
@@ -12,6 +14,7 @@ import { removeImageFromNodeImageFieldCollectionAction } from 'features/imageAct
 import { useFieldIsInvalid } from 'features/nodes/hooks/useFieldIsInvalid';
 import { fieldImageCollectionValueChanged } from 'features/nodes/store/nodesSlice';
 import type { ImageFieldCollectionInputInstance, ImageFieldCollectionInputTemplate } from 'features/nodes/types/field';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold, PiExclamationMarkBold } from 'react-icons/pi';
@@ -20,6 +23,8 @@ import type { ImageDTO } from 'services/api/types';
 
 import type { FieldComponentProps } from './types';
 
+const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+
 const sx = {
   borderWidth: 1,
   '&[data-error=true]': {
@@ -68,15 +73,7 @@ export const ImageFieldCollectionInputComponent = memo(
     );
 
     return (
-      <Flex
-        position="relative"
-        className="nodrag"
-        w="full"
-        h="full"
-        minH={16}
-        alignItems="stretch"
-        justifyContent="center"
-      >
+      <Flex position="relative" w="full" h="full" minH={16} maxH={64} alignItems="stretch" justifyContent="center">
         {(!field.value || field.value.length === 0) && (
           <UploadMultipleImageButton
             w="full"
@@ -88,23 +85,17 @@ export const ImageFieldCollectionInputComponent = memo(
           />
         )}
         {field.value && field.value.length > 0 && (
-          <Grid
-            className="nopan"
-            borderRadius="base"
-            w="full"
-            h="full"
-            templateColumns="repeat(3, 1fr)"
-            gap={1}
-            sx={sx}
-            data-error={isInvalid}
-            p={1}
-          >
-            {field.value.map(({ image_name }) => (
-              <GridItem key={image_name} position="relative">
-                <ImageGridItemContent imageName={image_name} onRemoveImage={onRemoveImage} />
-              </GridItem>
-            ))}
-          </Grid>
+          <Box w="full" h="auto" p={1} sx={sx} data-error={isInvalid} borderRadius="base">
+            <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayscrollbarsOptions}>
+              <Grid className="nopan nowheel" w="full" h="full" templateColumns="repeat(4, 1fr)" gap={1}>
+                {field.value.map(({ image_name }) => (
+                  <GridItem key={image_name} position="relative" className="nodrag">
+                    <ImageGridItemContent imageName={image_name} onRemoveImage={onRemoveImage} />
+                  </GridItem>
+                ))}
+              </Grid>
+            </OverlayScrollbarsComponent>
+          </Box>
         )}
         <DndDropTarget
           dndTarget={addImagesToNodeImageFieldCollectionDndTarget}
@@ -135,7 +126,16 @@ const ImageGridItemContent = memo(
 
     return (
       <>
-        <DndImage imageDTO={query.data} asThumbnail />
+        <DndImage
+          imageDTO={query.data}
+          asThumbnail
+          objectFit="contain"
+          w="full"
+          h="full"
+          aspectRatio="1/1"
+          backgroundSize={8}
+          backgroundImage={TRANSPARENCY_CHECKERBOARD_PATTERN_DARK_DATAURL}
+        />
         <DndImageIcon
           onClick={onClickRemove}
           icon={<PiArrowCounterClockwiseBold />}