Fixes bounding box ending up offscreen

This commit is contained in:
psychedelicious 2022-11-17 16:36:53 +11:00 committed by blessedcoolant
parent 827f516baf
commit 1d540219fa
2 changed files with 49 additions and 2 deletions

View File

@ -6,6 +6,7 @@ import {
resetCanvasView,
setShouldLockToInitialImage,
setTool,
fitBoundingBoxToStage,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/store';
import _ from 'lodash';
@ -30,7 +31,10 @@ import IAICanvasMaskButtonPopover from './IAICanvasMaskButtonPopover';
import { mergeAndUploadCanvas } from 'features/canvas/util/mergeAndUploadCanvas';
import IAICheckbox from 'common/components/IAICheckbox';
import { ChangeEvent } from 'react';
import { canvasSelector, isStagingSelector } from 'features/canvas/store/canvasSelectors';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
export const selector = createSelector(
[canvasSelector, isStagingSelector],
@ -59,6 +63,7 @@ const IAICanvasOutpaintingControls = () => {
) => {
dispatch(setShouldLockToInitialImage(e.target.checked));
dispatch(resizeAndScaleCanvas());
dispatch(fitBoundingBoxToStage());
};
return (

View File

@ -4,7 +4,10 @@ import { IRect, Vector2d } from 'konva/lib/types';
import { RgbaColor } from 'react-colorful';
import * as InvokeAI from 'app/invokeai';
import _ from 'lodash';
import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
import {
roundDownToMultiple,
roundToMultiple,
} from 'common/util/roundDownToMultiple';
import {
canvasExtraReducers,
setInitialCanvasImage_reducer,
@ -498,6 +501,44 @@ export const canvasSlice = createSlice({
setShouldLockToInitialImage: (state, action: PayloadAction<boolean>) => {
state.shouldLockToInitialImage = action.payload;
},
fitBoundingBoxToStage: (state) => {
const { boundingBoxDimensions, boundingBoxCoordinates, stageDimensions } =
state;
if (
boundingBoxCoordinates.x < 0 ||
boundingBoxCoordinates.x + boundingBoxDimensions.width >
stageDimensions.width ||
boundingBoxCoordinates.y < 0 ||
boundingBoxCoordinates.y + boundingBoxDimensions.height >
stageDimensions.height
) {
const newBoundingBoxDimensions = {
width: roundDownToMultiple(
_.clamp(stageDimensions.width, 64, 512),
64
),
height: roundDownToMultiple(
_.clamp(stageDimensions.height, 64, 512),
64
),
};
const newBoundingBoxCoordinates = {
x: roundToMultiple(
stageDimensions.width / 2 - newBoundingBoxDimensions.width / 2,
64
),
y: roundToMultiple(
stageDimensions.height / 2 - newBoundingBoxDimensions.height / 2,
64
),
};
state.boundingBoxDimensions = newBoundingBoxDimensions;
state.boundingBoxCoordinates = newBoundingBoxCoordinates;
}
},
},
extraReducers: canvasExtraReducers,
});
@ -558,6 +599,7 @@ export const {
resizeCanvas,
resetCanvasView,
setCanvasContainerDimensions,
fitBoundingBoxToStage,
} = canvasSlice.actions;
export default canvasSlice.reducer;