feat(ui): do not change images if the dropped image is the same image

This commit is contained in:
psychedelicious 2023-06-04 17:16:50 +10:00
parent 03f3ad435a
commit a664ee30a2
5 changed files with 33 additions and 18 deletions

View File

@ -21,7 +21,7 @@ import { v4 as uuidv4 } from 'uuid';
type IAIDndImageProps = {
image: ImageDTO | null | undefined;
onDrop: (image: ImageDTO) => void;
onDrop: (droppedImage: ImageDTO) => void;
onReset?: () => void;
onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void;

View File

@ -36,11 +36,16 @@ const ControlNetImagePreview = (props: Props) => {
const isMouseOverImage = useHoverDirty(containerRef);
const handleControlImageChanged = useCallback(
(controlImage: ImageDTO) => {
dispatch(controlNetImageChanged({ controlNetId, controlImage }));
const handleDrop = useCallback(
(droppedImage: ImageDTO) => {
if (controlImage?.image_name === droppedImage.image_name) {
return;
}
dispatch(
controlNetImageChanged({ controlNetId, controlImage: droppedImage })
);
},
[controlNetId, dispatch]
[controlImage, controlNetId, dispatch]
);
const shouldShowProcessedImageBackdrop =
@ -58,7 +63,7 @@ const ControlNetImagePreview = (props: Props) => {
<Box ref={containerRef} sx={{ position: 'relative', w: 'full', h: 'full' }}>
<IAIDndImage
image={controlImage}
onDrop={handleControlImageChanged}
onDrop={handleDrop}
isDropDisabled={Boolean(
processedControlImage && processorType !== 'none'
)}
@ -108,7 +113,7 @@ const ControlNetImagePreview = (props: Props) => {
>
<IAIDndImage
image={processedControlImage}
onDrop={handleControlImageChanged}
onDrop={handleDrop}
payloadImage={controlImage}
/>
</Box>

View File

@ -67,9 +67,12 @@ const CurrentImagePreview = () => {
const handleDrop = useCallback(
(droppedImage: ImageDTO) => {
if (droppedImage.image_name === image?.image_name) {
return;
}
dispatch(imageSelected(droppedImage));
},
[dispatch]
[dispatch, image?.image_name]
);
return (

View File

@ -19,17 +19,21 @@ const ImageInputFieldComponent = (
const dispatch = useAppDispatch();
const handleChange = useCallback(
(image: ImageDTO) => {
const handleDrop = useCallback(
(droppedImage: ImageDTO) => {
if (field.value?.image_name === droppedImage.image_name) {
return;
}
dispatch(
fieldValueChanged({
nodeId,
fieldName: field.name,
value: image,
value: droppedImage,
})
);
},
[dispatch, field.name, nodeId]
[dispatch, field.name, field.value?.image_name, nodeId]
);
const handleReset = useCallback(() => {
@ -53,7 +57,7 @@ const ImageInputFieldComponent = (
>
<IAIDndImage
image={field.value}
onDrop={handleChange}
onDrop={handleDrop}
onReset={handleReset}
resetIconSize="sm"
/>

View File

@ -53,11 +53,14 @@ const InitialImagePreview = () => {
}
}, [dispatch, t, toaster, shouldFetchImages]);
const handleChange = useCallback(
(image: ImageDTO) => {
dispatch(initialImageChanged(image));
const handleDrop = useCallback(
(droppedImage: ImageDTO) => {
if (droppedImage.image_name === initialImage?.image_name) {
return;
}
dispatch(initialImageChanged(droppedImage));
},
[dispatch]
[dispatch, initialImage?.image_name]
);
const handleReset = useCallback(() => {
@ -76,7 +79,7 @@ const InitialImagePreview = () => {
>
<IAIDndImage
image={initialImage}
onDrop={handleChange}
onDrop={handleDrop}
onReset={handleReset}
fallback={<IAIImageFallback sx={{ bg: 'none' }} />}
/>