From 127b54f81273b8ab7b38aa634756f09b3b175869 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Thu, 18 May 2023 15:35:36 -0400 Subject: [PATCH 1/3] add some IDs --- .../features/gallery/components/CurrentImageButtons.tsx | 2 ++ .../web/src/features/gallery/components/HoverableImage.tsx | 7 ++++++- .../parameters/components/ProcessButtons/CancelButton.tsx | 1 + 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx index 65e9dcb43c..b0f1401c35 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx @@ -417,6 +417,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { size="sm" onClick={handleSendToImageToImage} leftIcon={} + id="send-to-img2img" > {t('parameters.sendToImg2Img')} @@ -425,6 +426,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { size="sm" onClick={handleSendToCanvas} leftIcon={} + id="send-to-canvas" > {t('parameters.sendToUnifiedCanvas')} diff --git a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx index 6eb44de99c..a82f199a2b 100644 --- a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx @@ -250,11 +250,16 @@ const HoverableImage = memo((props: HoverableImageProps) => { } onClickCapture={handleSendToImageToImage} + id="send-to-img2img" > {t('parameters.sendToImg2Img')} {isCanvasEnabled && ( - } onClickCapture={handleSendToCanvas}> + } + onClickCapture={handleSendToCanvas} + id="send-to-canvas" + > {t('parameters.sendToUnifiedCanvas')} )} diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx index 23f2ae409a..57b556f88c 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx @@ -132,6 +132,7 @@ const CancelButton = ( isDisabled={!isConnected || !isProcessing || !isCancelable} onClick={handleClickCancel} colorScheme="error" + id="cancel-button" {...rest} /> From ff0e79fa9a5c8856e707c1f79b71066618b9d738 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Thu, 18 May 2023 16:15:19 -0400 Subject: [PATCH 2/3] add id for invoke button --- .../parameters/components/ProcessButtons/InvokeButton.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx index 68d607c0fa..7042bc8c41 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx @@ -56,6 +56,7 @@ export default function InvokeButton(props: InvokeButton) { tooltip={t('parameters.invoke')} tooltipProps={{ placement: 'bottom' }} colorScheme="accent" + id="invoke-button" {...rest} /> ) : ( @@ -67,6 +68,7 @@ export default function InvokeButton(props: InvokeButton) { flexGrow={1} w="100%" colorScheme="accent" + id="invoke-button" fontWeight={700} {...rest} > From 650d69ef5b570405ff80d604f0f439fa6b9af383 Mon Sep 17 00:00:00 2001 From: Mary Hipp Rogers Date: Mon, 22 May 2023 08:16:11 -0400 Subject: [PATCH 3/3] added optional middleware prop and new actions needed (#3437) * added optional middleware prop and new actions needed * accidental import * make middleware an array --------- Co-authored-by: Mary Hipp --- .../frontend/web/src/app/components/InvokeAIUI.tsx | 11 +++++++++-- .../gallery/components/CurrentImageButtons.tsx | 8 +++++++- .../features/gallery/components/HoverableImage.tsx | 8 +++++++- .../web/src/features/gallery/store/actions.ts | 4 ++++ 4 files changed, 27 insertions(+), 4 deletions(-) diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx index c04a8184d7..69b2756f96 100644 --- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx +++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx @@ -15,6 +15,7 @@ import { PartialAppConfig } from 'app/types/invokeai'; import '../../i18n'; import { socketMiddleware } from 'services/events/middleware'; +import { Middleware } from '@reduxjs/toolkit'; const App = lazy(() => import('./App')); const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider')); @@ -25,6 +26,7 @@ interface Props extends PropsWithChildren { config?: PartialAppConfig; headerComponent?: ReactNode; setIsReady?: (isReady: boolean) => void; + middleware?: Middleware[]; } const InvokeAIUI = ({ @@ -33,6 +35,7 @@ const InvokeAIUI = ({ config, headerComponent, setIsReady, + middleware, }: Props) => { useEffect(() => { // configure API client token @@ -54,8 +57,12 @@ const InvokeAIUI = ({ // the `apiUrl`/`token` dynamically. // rebuild socket middleware with token and apiUrl - addMiddleware(socketMiddleware()); - }, [apiUrl, token]); + if (middleware && middleware.length > 0) { + addMiddleware(socketMiddleware(), ...middleware); + } else { + addMiddleware(socketMiddleware()); + } + }, [apiUrl, token, middleware]); return ( diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx index b0f1401c35..8193dbe1ce 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx @@ -55,7 +55,11 @@ import { useGetUrl } from 'common/util/getUrl'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useParameters } from 'features/parameters/hooks/useParameters'; import { initialImageSelected } from 'features/parameters/store/actions'; -import { requestedImageDeletion } from '../store/actions'; +import { + requestedImageDeletion, + sentImageToCanvas, + sentImageToImg2Img, +} from '../store/actions'; import FaceRestoreSettings from 'features/parameters/components/Parameters/FaceRestore/FaceRestoreSettings'; import UpscaleSettings from 'features/parameters/components/Parameters/Upscale/UpscaleSettings'; import { allParametersSet } from 'features/parameters/store/generationSlice'; @@ -252,6 +256,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { useHotkeys('p', handleUsePrompt, [image]); const handleSendToImageToImage = useCallback(() => { + dispatch(sentImageToImg2Img()); dispatch(initialImageSelected(image)); }, [dispatch, image]); @@ -327,6 +332,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { const handleSendToCanvas = useCallback(() => { if (!image) return; + dispatch(sentImageToCanvas()); if (isLightboxOpen) dispatch(setIsLightboxOpen(false)); // dispatch(setInitialCanvasImage(selectedImage)); diff --git a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx index a82f199a2b..8f3fff4ff3 100644 --- a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx @@ -33,7 +33,11 @@ import { isEqual } from 'lodash-es'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useParameters } from 'features/parameters/hooks/useParameters'; import { initialImageSelected } from 'features/parameters/store/actions'; -import { requestedImageDeletion } from '../store/actions'; +import { + requestedImageDeletion, + sentImageToCanvas, + sentImageToImg2Img, +} from '../store/actions'; import { useAppToaster } from 'app/components/Toaster'; export const selector = createSelector( @@ -157,6 +161,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { }, [image, recallSeed]); const handleSendToImageToImage = useCallback(() => { + dispatch(sentImageToImg2Img()); dispatch(initialImageSelected(image)); }, [dispatch, image]); @@ -168,6 +173,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { * TODO: the rest of these */ const handleSendToCanvas = () => { + dispatch(sentImageToCanvas()); dispatch(setInitialCanvasImage(image)); dispatch(resizeAndScaleCanvas()); diff --git a/invokeai/frontend/web/src/features/gallery/store/actions.ts b/invokeai/frontend/web/src/features/gallery/store/actions.ts index 55c974b169..a7454047b1 100644 --- a/invokeai/frontend/web/src/features/gallery/store/actions.ts +++ b/invokeai/frontend/web/src/features/gallery/store/actions.ts @@ -5,3 +5,7 @@ import { SelectedImage } from 'features/parameters/store/actions'; export const requestedImageDeletion = createAction< Image | SelectedImage | undefined >('gallery/requestedImageDeletion'); + +export const sentImageToCanvas = createAction('gallery/sentImageToCanvas'); + +export const sentImageToImg2Img = createAction('gallery/sentImageToImg2Img');