diff --git a/frontend/src/common/components/ImageUploader.tsx b/frontend/src/common/components/ImageUploader.tsx index 0cb6660a6b..c6d9418ea3 100644 --- a/frontend/src/common/components/ImageUploader.tsx +++ b/frontend/src/common/components/ImageUploader.tsx @@ -8,8 +8,6 @@ import { import { useAppDispatch, useAppSelector } from 'app/store'; import { FileRejection, useDropzone } from 'react-dropzone'; import { useToast } from '@chakra-ui/react'; -// import { uploadImage } from 'app/socketio/actions'; -import { UploadImagePayload } from 'app/invokeai'; import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext'; import { activeTabNameSelector } from 'features/options/store/optionsSelectors'; import { tabDict } from 'features/tabs/components/InvokeTabs'; @@ -46,8 +44,6 @@ const ImageUploader = (props: ImageUploaderProps) => { const fileAcceptedCallback = useCallback( async (file: File) => { - // setIsHandlingUpload(true); - dispatch(uploadImage({ imageFile: file })); }, [dispatch] @@ -122,12 +118,7 @@ const ImageUploader = (props: ImageUploaderProps) => { return; } - // const payload: UploadImagePayload = { file }; - // if (['img2img', 'inpainting'].includes(activeTabName)) { - // payload.destination = activeTabName as ImageUploadDestination; - // } - - // dispatch(uploadImage(payload)); + dispatch(uploadImage({ imageFile: file })); }; document.addEventListener('paste', pasteImageListener); return () => { @@ -135,7 +126,9 @@ const ImageUploader = (props: ImageUploaderProps) => { }; }, [dispatch, toast, activeTabName]); - const overlaySecondaryText = ['img2img', 'unifiedCanvas'].includes(activeTabName) + const overlaySecondaryText = ['img2img', 'unifiedCanvas'].includes( + activeTabName + ) ? ` to ${tabDict[activeTabName as keyof typeof tabDict].tooltip}` : ``; diff --git a/frontend/src/features/canvas/store/canvasSlice.ts b/frontend/src/features/canvas/store/canvasSlice.ts index d68e03e2b1..773a9ed7a6 100644 --- a/frontend/src/features/canvas/store/canvasSlice.ts +++ b/frontend/src/features/canvas/store/canvasSlice.ts @@ -154,6 +154,8 @@ export const canvasSlice = createSlice({ }, setInitialCanvasImage: (state, action: PayloadAction) => { const image = action.payload; + const { stageDimensions } = state; + const newBoundingBoxDimensions = { width: roundDownToMultiple(_.clamp(image.width, 64, 512), 64), height: roundDownToMultiple(_.clamp(image.height, 64, 512), 64), @@ -174,6 +176,7 @@ export const canvasSlice = createSlice({ state.boundingBoxCoordinates = newBoundingBoxCoordinates; state.pastLayerStates.push(state.layerState); + state.layerState = { ...initialLayerState, objects: [ @@ -191,6 +194,25 @@ export const canvasSlice = createSlice({ state.futureLayerStates = []; state.isCanvasInitialized = false; + const newScale = calculateScale( + stageDimensions.width, + stageDimensions.height, + image.width, + image.height, + STAGE_PADDING_PERCENTAGE + ); + + const newCoordinates = calculateCoordinates( + stageDimensions.width, + stageDimensions.height, + 0, + 0, + image.width, + image.height, + newScale + ); + state.stageScale = newScale; + state.stageCoordinates = newCoordinates; state.doesCanvasNeedScaling = true; }, setStageDimensions: (state, action: PayloadAction) => {