diff --git a/frontend/src/features/canvas/store/canvasExtraReducers.ts b/frontend/src/features/canvas/store/canvasExtraReducers.ts deleted file mode 100644 index 44e8a73e82..0000000000 --- a/frontend/src/features/canvas/store/canvasExtraReducers.ts +++ /dev/null @@ -1,92 +0,0 @@ -import * as InvokeAI from 'app/invokeai'; -import { initialLayerState } from './canvasSlice'; -import { CanvasState } from './canvasTypes'; -import { - roundDownToMultiple, - roundToMultiple, -} from 'common/util/roundDownToMultiple'; -import _ from 'lodash'; -import { mergeAndUploadCanvas } from '../util/mergeAndUploadCanvas'; -import { uploadImage } from 'features/gallery/util/uploadImage'; -import { ActionReducerMapBuilder } from '@reduxjs/toolkit'; - -export const setInitialCanvasImage_reducer = ( - state: CanvasState, - image: InvokeAI.Image -) => { - const newBoundingBoxDimensions = { - width: roundDownToMultiple(_.clamp(image.width, 64, 512), 64), - height: roundDownToMultiple(_.clamp(image.height, 64, 512), 64), - }; - - const newBoundingBoxCoordinates = { - x: roundToMultiple( - image.width / 2 - newBoundingBoxDimensions.width / 2, - 64 - ), - y: roundToMultiple( - image.height / 2 - newBoundingBoxDimensions.height / 2, - 64 - ), - }; - - state.boundingBoxDimensions = newBoundingBoxDimensions; - - state.boundingBoxCoordinates = newBoundingBoxCoordinates; - - state.pastLayerStates.push(state.layerState); - state.layerState = { - ...initialLayerState, - objects: [ - { - kind: 'image', - layer: 'base', - x: 0, - y: 0, - width: image.width, - height: image.height, - image: image, - }, - ], - }; - state.futureLayerStates = []; - - state.isCanvasInitialized = false; - state.doesCanvasNeedScaling = true; -}; - -export const canvasExtraReducers = ( - builder: ActionReducerMapBuilder -) => { - builder.addCase(mergeAndUploadCanvas.fulfilled, (state, action) => { - if (!action.payload) return; - const { image, kind, originalBoundingBox } = action.payload; - - if (kind === 'temp_merged_canvas') { - state.pastLayerStates.push({ - ...state.layerState, - }); - - state.futureLayerStates = []; - - state.layerState.objects = [ - { - kind: 'image', - layer: 'base', - ...originalBoundingBox, - image, - }, - ]; - } - }); - builder.addCase(uploadImage.fulfilled, (state, action) => { - if (!action.payload) return; - const { image, kind, activeTabName } = action.payload; - - if (kind !== 'init') return; - - if (activeTabName === 'unifiedCanvas') { - setInitialCanvasImage_reducer(state, image); - } - }); -}; diff --git a/frontend/src/features/canvas/store/canvasSlice.ts b/frontend/src/features/canvas/store/canvasSlice.ts index b252a1b2e4..d93ea4788c 100644 --- a/frontend/src/features/canvas/store/canvasSlice.ts +++ b/frontend/src/features/canvas/store/canvasSlice.ts @@ -8,10 +8,8 @@ import { roundDownToMultiple, roundToMultiple, } from 'common/util/roundDownToMultiple'; -import { - canvasExtraReducers, - setInitialCanvasImage_reducer, -} from './canvasExtraReducers'; +import { canvasExtraReducers } from './reducers/extraReducers'; +import { setInitialCanvasImage as setInitialCanvasImage_reducer } from './reducers/setInitialCanvasImage'; import calculateScale from '../util/calculateScale'; import calculateCoordinates from '../util/calculateCoordinates'; import floorCoordinates from '../util/floorCoordinates'; diff --git a/frontend/src/features/canvas/store/reducers/extraReducers.ts b/frontend/src/features/canvas/store/reducers/extraReducers.ts new file mode 100644 index 0000000000..5c990d2867 --- /dev/null +++ b/frontend/src/features/canvas/store/reducers/extraReducers.ts @@ -0,0 +1,42 @@ +import { CanvasState } from '../canvasTypes'; +import _ from 'lodash'; +import { mergeAndUploadCanvas } from '../../util/mergeAndUploadCanvas'; +import { uploadImage } from 'features/gallery/util/uploadImage'; +import { ActionReducerMapBuilder } from '@reduxjs/toolkit'; +import { setInitialCanvasImage } from './setInitialCanvasImage'; + +export const canvasExtraReducers = ( + builder: ActionReducerMapBuilder +) => { + builder.addCase(mergeAndUploadCanvas.fulfilled, (state, action) => { + if (!action.payload) return; + const { image, kind, originalBoundingBox } = action.payload; + + if (kind === 'temp_merged_canvas') { + state.pastLayerStates.push({ + ...state.layerState, + }); + + state.futureLayerStates = []; + + state.layerState.objects = [ + { + kind: 'image', + layer: 'base', + ...originalBoundingBox, + image, + }, + ]; + } + }); + builder.addCase(uploadImage.fulfilled, (state, action) => { + if (!action.payload) return; + const { image, kind, activeTabName } = action.payload; + + if (kind !== 'init') return; + + if (activeTabName === 'unifiedCanvas') { + setInitialCanvasImage(state, image); + } + }); +}; diff --git a/frontend/src/features/canvas/store/reducers/setInitialCanvasImage.ts b/frontend/src/features/canvas/store/reducers/setInitialCanvasImage.ts new file mode 100644 index 0000000000..527f014ed3 --- /dev/null +++ b/frontend/src/features/canvas/store/reducers/setInitialCanvasImage.ts @@ -0,0 +1,53 @@ +import * as InvokeAI from 'app/invokeai'; +import { initialLayerState } from '../canvasSlice'; +import { CanvasState } from '../canvasTypes'; +import { + roundDownToMultiple, + roundToMultiple, +} from 'common/util/roundDownToMultiple'; +import _ from 'lodash'; + +export const setInitialCanvasImage = ( + state: CanvasState, + image: InvokeAI.Image +) => { + const newBoundingBoxDimensions = { + width: roundDownToMultiple(_.clamp(image.width, 64, 512), 64), + height: roundDownToMultiple(_.clamp(image.height, 64, 512), 64), + }; + + const newBoundingBoxCoordinates = { + x: roundToMultiple( + image.width / 2 - newBoundingBoxDimensions.width / 2, + 64 + ), + y: roundToMultiple( + image.height / 2 - newBoundingBoxDimensions.height / 2, + 64 + ), + }; + + state.boundingBoxDimensions = newBoundingBoxDimensions; + + state.boundingBoxCoordinates = newBoundingBoxCoordinates; + + state.pastLayerStates.push(state.layerState); + state.layerState = { + ...initialLayerState, + objects: [ + { + kind: 'image', + layer: 'base', + x: 0, + y: 0, + width: image.width, + height: image.height, + image: image, + }, + ], + }; + state.futureLayerStates = []; + + state.isCanvasInitialized = false; + state.doesCanvasNeedScaling = true; +};