Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): organize IAIDndImage component

Browse Source
This commit is contained in:
psychedelicious 2023-06-03 11:17:02 +10:00
parent 6b824eb112
commit d92c7f5483
5 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/features/controlNet/components/parameters/IAISelectableImage.tsx → invokeai/frontend/web/src/common/components/IAIDndImage.tsx
View File

@ -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',

2
invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
View File

@ -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';

2
invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
View File

@ -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';

2
invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx
View File

@ -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';

2
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
View File

@ -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';