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 { ImageDTO } from 'services/api';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
const PLACEHOLDER_MIN_HEIGHT = 36; type IAIDndImageProps = {
type IAISelectableImageProps = {
image: ImageDTO | null | undefined; image: ImageDTO | null | undefined;
onDrop: (image: ImageDTO) => void; onDrop: (image: ImageDTO) => void;
onReset?: () => void; onReset?: () => void;
@ -34,9 +32,10 @@ type IAISelectableImageProps = {
isDropDisabled?: boolean; isDropDisabled?: boolean;
fallback?: ReactElement; fallback?: ReactElement;
payloadImage?: ImageDTO | null | undefined; payloadImage?: ImageDTO | null | undefined;
minSize?: number;
}; };
const IAIDndImage = (props: IAISelectableImageProps) => { const IAIDndImage = (props: IAIDndImageProps) => {
const { const {
image, image,
onDrop, onDrop,
@ -49,6 +48,7 @@ const IAIDndImage = (props: IAISelectableImageProps) => {
isDragDisabled = false, isDragDisabled = false,
fallback = <IAIImageFallback />, fallback = <IAIImageFallback />,
payloadImage, payloadImage,
minSize = 36,
} = props; } = props;
const dndId = useRef(uuidv4()); const dndId = useRef(uuidv4());
const { getUrl } = useGetUrl(); const { getUrl } = useGetUrl();
@ -86,8 +86,9 @@ const IAIDndImage = (props: IAISelectableImageProps) => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
position: 'relative', position: 'relative',
minW: 36, minW: minSize,
minH: 36, minH: minSize,
userSelect: 'none',
}} }}
{...attributes} {...attributes}
{...listeners} {...listeners}
@ -144,7 +145,7 @@ const IAIDndImage = (props: IAISelectableImageProps) => {
<> <>
<Flex <Flex
sx={{ sx={{
minH: PLACEHOLDER_MIN_HEIGHT, minH: minSize,
bg: 'base.850', bg: 'base.850',
w: 'full', w: 'full',
h: 'full', h: 'full',

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

@ -6,7 +6,7 @@ import {
} from '../store/controlNetSlice'; } from '../store/controlNetSlice';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { Box } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import IAIDndImage from './parameters/IAISelectableImage'; import IAIDndImage from 'common/components/IAIDndImage';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { AnimatePresence, motion } from 'framer-motion'; 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 { configSelector } from '../../system/store/configSelectors';
import { useAppToaster } from 'app/components/Toaster'; import { useAppToaster } from 'app/components/Toaster';
import { imageSelected } from '../store/gallerySlice'; 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 { ImageDTO } from 'services/api';
import { IAIImageFallback } from 'common/components/IAIImageFallback'; 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 { memo, useCallback } from 'react';
import { FieldComponentProps } from './types'; import { FieldComponentProps } from './types';
import IAIDndImage from 'features/controlNet/components/parameters/IAISelectableImage'; import IAIDndImage from 'common/components/IAIDndImage';
import { ImageDTO } from 'services/api'; import { ImageDTO } from 'services/api';
import { Flex } from '@chakra-ui/react'; 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 { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { configSelector } from '../../../../system/store/configSelectors'; import { configSelector } from '../../../../system/store/configSelectors';
import { useAppToaster } from 'app/components/Toaster'; 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 { ImageDTO } from 'services/api';
import { IAIImageFallback } from 'common/components/IAIImageFallback'; import { IAIImageFallback } from 'common/components/IAIImageFallback';