From d92c7f5483389210314803fe6df90e18007e98ba Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 3 Jun 2023 11:17:02 +1000
Subject: [PATCH] feat(ui): organize IAIDndImage component

---
 .../components/IAIDndImage.tsx}                   | 15 ++++++++-------
 .../components/ControlNetImagePreview.tsx         |  2 +-
 .../gallery/components/CurrentImagePreview.tsx    |  2 +-
 .../fields/ImageInputFieldComponent.tsx           |  2 +-
 .../ImageToImage/InitialImagePreview.tsx          |  2 +-
 5 files changed, 12 insertions(+), 11 deletions(-)
 rename invokeai/frontend/web/src/{features/controlNet/components/parameters/IAISelectableImage.tsx => common/components/IAIDndImage.tsx} (96%)

diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/IAISelectableImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
similarity index 96%
rename from invokeai/frontend/web/src/features/controlNet/components/parameters/IAISelectableImage.tsx
rename to invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index 26da39baf2..a6667e73be 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/IAISelectableImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@@ -19,9 +19,7 @@ import { FaImage, FaTimes } from 'react-icons/fa';
 import { ImageDTO } from 'services/api';
 import { v4 as uuidv4 } from 'uuid';
 
-const PLACEHOLDER_MIN_HEIGHT = 36;
-
-type IAISelectableImageProps = {
+type IAIDndImageProps = {
   image: ImageDTO | null | undefined;
   onDrop: (image: ImageDTO) => void;
   onReset?: () => void;
@@ -34,9 +32,10 @@ type IAISelectableImageProps = {
   isDropDisabled?: boolean;
   fallback?: ReactElement;
   payloadImage?: ImageDTO | null | undefined;
+  minSize?: number;
 };
 
-const IAIDndImage = (props: IAISelectableImageProps) => {
+const IAIDndImage = (props: IAIDndImageProps) => {
   const {
     image,
     onDrop,
@@ -49,6 +48,7 @@ const IAIDndImage = (props: IAISelectableImageProps) => {
     isDragDisabled = false,
     fallback = <IAIImageFallback />,
     payloadImage,
+    minSize = 36,
   } = props;
   const dndId = useRef(uuidv4());
   const { getUrl } = useGetUrl();
@@ -86,8 +86,9 @@ const IAIDndImage = (props: IAISelectableImageProps) => {
         alignItems: 'center',
         justifyContent: 'center',
         position: 'relative',
-        minW: 36,
-        minH: 36,
+        minW: minSize,
+        minH: minSize,
+        userSelect: 'none',
       }}
       {...attributes}
       {...listeners}
@@ -144,7 +145,7 @@ const IAIDndImage = (props: IAISelectableImageProps) => {
         <>
           <Flex
             sx={{
-              minH: PLACEHOLDER_MIN_HEIGHT,
+              minH: minSize,
               bg: 'base.850',
               w: 'full',
               h: 'full',
diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
index 8c445fe7b4..9be1049d99 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
@@ -6,7 +6,7 @@ import {
 } from '../store/controlNetSlice';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { Box } from '@chakra-ui/react';
-import IAIDndImage from './parameters/IAISelectableImage';
+import IAIDndImage from 'common/components/IAIDndImage';
 import { createSelector } from '@reduxjs/toolkit';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { AnimatePresence, motion } from 'framer-motion';
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
index 3934547093..d102f00b3b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
@@ -12,7 +12,7 @@ import { systemSelector } from 'features/system/store/systemSelectors';
 import { configSelector } from '../../system/store/configSelectors';
 import { useAppToaster } from 'app/components/Toaster';
 import { imageSelected } from '../store/gallerySlice';
-import IAIDndImage from 'features/controlNet/components/parameters/IAISelectableImage';
+import IAIDndImage from 'common/components/IAIDndImage';
 import { ImageDTO } from 'services/api';
 import { IAIImageFallback } from 'common/components/IAIImageFallback';
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx
index c83a0b4a40..8275e70f62 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx
@@ -8,7 +8,7 @@ import {
 import { memo, useCallback } from 'react';
 
 import { FieldComponentProps } from './types';
-import IAIDndImage from 'features/controlNet/components/parameters/IAISelectableImage';
+import IAIDndImage from 'common/components/IAIDndImage';
 import { ImageDTO } from 'services/api';
 import { Flex } from '@chakra-ui/react';
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
index d8687581d6..817ae197b6 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
@@ -12,7 +12,7 @@ import { generationSelector } from 'features/parameters/store/generationSelector
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { configSelector } from '../../../../system/store/configSelectors';
 import { useAppToaster } from 'app/components/Toaster';
-import IAIDndImage from 'features/controlNet/components/parameters/IAISelectableImage';
+import IAIDndImage from 'common/components/IAIDndImage';
 import { ImageDTO } from 'services/api';
 import { IAIImageFallback } from 'common/components/IAIImageFallback';