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): reactflow drag interactions with custom scrollbar

Browse Source
This commit is contained in:
psychedelicious
2024-11-18 18:05:23 -06:00
parent 24f61d21b2
commit 91d981a49e
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
View File

@@ -73,7 +73,16 @@ export const ImageFieldCollectionInputComponent = memo(
); );
return ( return (
<Flex position="relative" w="full" h="full" minH={16} maxH={64} alignItems="stretch" justifyContent="center"> <Flex
className="nodrag"
position="relative"
w="full"
h="full"
minH={16}
maxH={64}
alignItems="stretch"
justifyContent="center"
>
{(!field.value || field.value.length === 0) && ( {(!field.value || field.value.length === 0) && (
<UploadMultipleImageButton <UploadMultipleImageButton
w="full" w="full"
@@ -86,8 +95,13 @@ export const ImageFieldCollectionInputComponent = memo(
)} )}
{field.value && field.value.length > 0 && ( {field.value && field.value.length > 0 && (
<Box w="full" h="auto" p={1} sx={sx} data-error={isInvalid} borderRadius="base"> <Box w="full" h="auto" p={1} sx={sx} data-error={isInvalid} borderRadius="base">
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayscrollbarsOptions}> <OverlayScrollbarsComponent
<Grid className="nopan nowheel" w="full" h="full" templateColumns="repeat(4, 1fr)" gap={1}> className="nowheel"
defer
style={overlayScrollbarsStyles}
options={overlayscrollbarsOptions}
>
<Grid w="full" h="full" templateColumns="repeat(4, 1fr)" gap={1}>
{field.value.map(({ image_name }) => ( {field.value.map(({ image_name }) => (
<GridItem key={image_name} position="relative" className="nodrag"> <GridItem key={image_name} position="relative" className="nodrag">
<ImageGridItemContent imageName={image_name} onRemoveImage={onRemoveImage} /> <ImageGridItemContent imageName={image_name} onRemoveImage={onRemoveImage} />