mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-02-17 14:17:42 -05:00
90aa97edd4
This introduces the core functionality for batch operations on images and multiple selection in the gallery/batch manager. A number of other substantial changes are included: - `imagesSlice` is consolidated into `gallerySlice`, allowing for simpler selection of filtered images - `batchSlice` is added to manage the batch - The wonky context pattern for image deletion has been changed, much simpler now using a `imageDeletionSlice` and redux listeners; this needs to be implemented still for the other image modals - Minimum gallery size in px implemented as a hook - Many style fixes & several bug fixes TODO: - The UI and UX need to be figured out, especially for controlnet - Batch processing is not hooked up; generation does not do anything with batch - Routes to support batch image operations, specifically delete and add/remove to/from boards
83 lines
1.7 KiB
TypeScript
83 lines
1.7 KiB
TypeScript
import { Box, ChakraProps, Flex, Heading, Image } from '@chakra-ui/react';
|
|
import { memo } from 'react';
|
|
import { TypesafeDraggableData } from './typesafeDnd';
|
|
|
|
type OverlayDragImageProps = {
|
|
dragData: TypesafeDraggableData | null;
|
|
};
|
|
|
|
const BOX_SIZE = 28;
|
|
|
|
const STYLES: ChakraProps['sx'] = {
|
|
w: BOX_SIZE,
|
|
h: BOX_SIZE,
|
|
maxW: BOX_SIZE,
|
|
maxH: BOX_SIZE,
|
|
shadow: 'dark-lg',
|
|
borderRadius: 'lg',
|
|
borderWidth: 2,
|
|
borderStyle: 'dashed',
|
|
borderColor: 'base.100',
|
|
opacity: 0.5,
|
|
bg: 'base.800',
|
|
color: 'base.50',
|
|
_dark: {
|
|
borderColor: 'base.200',
|
|
bg: 'base.900',
|
|
color: 'base.100',
|
|
},
|
|
};
|
|
|
|
const DragPreview = (props: OverlayDragImageProps) => {
|
|
if (!props.dragData) {
|
|
return;
|
|
}
|
|
|
|
if (props.dragData.payloadType === 'IMAGE_DTO') {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
position: 'relative',
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
userSelect: 'none',
|
|
cursor: 'none',
|
|
}}
|
|
>
|
|
<Image
|
|
sx={{
|
|
...STYLES,
|
|
}}
|
|
src={props.dragData.payload.imageDTO.thumbnail_url}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (props.dragData.payloadType === 'IMAGE_NAMES') {
|
|
return (
|
|
<Flex
|
|
sx={{
|
|
cursor: 'none',
|
|
userSelect: 'none',
|
|
position: 'relative',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDir: 'column',
|
|
...STYLES,
|
|
}}
|
|
>
|
|
<Heading>{props.dragData.payload.imageNames.length}</Heading>
|
|
<Heading size="sm">Images</Heading>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
export default memo(DragPreview);
|