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

Fixes bug with overflowing bounding box

Browse Source
This commit is contained in:
psychedelicious 2022-10-27 22:36:34 +11:00
parent 6eeef7c17e
commit 00b5466f0d
2 changed files with 53 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/features/tabs/Inpainting/components/InpaintingBoundingBoxPreview.tsx
View File

@ -17,14 +17,12 @@ import {
setBoundingBoxDimensions,
setIsBoundingBoxTransforming,
setIsDrawing,
setIsMovingBoundingBox,
setShouldShowBrush,
} from '../inpaintingSlice';
import { rgbaColorToString } from '../util/colorToString';
import {
DASH_WIDTH,
// MARCHING_ANTS_SPEED,
TRANSFORMER_ANCHOR_SIZE,
} from '../util/constants';
const boundingBoxPreviewSelector = createSelector(
@ -48,7 +46,6 @@ const boundingBoxPreviewSelector = createSelector(
imageToInpaint,
dash: DASH_WIDTH / stageScale, // scale dash lengths
strokeWidth: 1 / stageScale, // scale stroke thickness
anchorSize: TRANSFORMER_ANCHOR_SIZE,
isMovingBoundingBox,
};
},
@ -158,10 +155,8 @@ const InpaintingBoundingBoxPreview = () => {
boundingBoxCoordinate,
boundingBoxDimensions,
strokeWidth,
anchorSize,
stageScale,
imageToInpaint,
isMovingBoundingBox,
} = useAppSelector(boundingBoxPreviewSelector);
const transformerRef = useRef<Konva.Transformer>(null);
@ -237,11 +232,12 @@ const InpaintingBoundingBoxPreview = () => {
<Transformer
ref={transformerRef}
rotateEnabled={false}
anchorSize={anchorSize}
anchorSize={15}
anchorFill={'rgba(212,216,234,1)'}
anchorStroke={'rgb(42,42,42)'}
borderEnabled={true}
borderStroke={'black'}
borderDash={[DASH_WIDTH, DASH_WIDTH]}
borderDash={[4, 4]}
anchorCornerRadius={3}
ignoreStroke={true}
keepRatio={false}

100
frontend/src/features/tabs/Inpainting/inpaintingSlice.ts
View File

@ -221,66 +221,66 @@ export const inpaintingSlice = createSlice({
},
setBoundingBoxDimensions: (state, action: PayloadAction<Dimensions>) => {
state.boundingBoxDimensions = action.payload;
// const { width: boundingBoxWidth, height: boundingBoxHeight } =
// action.payload;
// const { x: boundingBoxX, y: boundingBoxY } = state.boundingBoxCoordinate;
// const { width: canvasWidth, height: canvasHeight } =
// state.canvasDimensions;
const { width: boundingBoxWidth, height: boundingBoxHeight } =
action.payload;
const { x: boundingBoxX, y: boundingBoxY } = state.boundingBoxCoordinate;
const { width: canvasWidth, height: canvasHeight } =
state.canvasDimensions;
// const roundedCanvasWidth = roundDownToMultiple(canvasWidth, 64);
// const roundedCanvasHeight = roundDownToMultiple(canvasHeight, 64);
// const roundedBoundingBoxWidth = roundDownToMultiple(boundingBoxWidth, 64);
// const roundedBoundingBoxHeight = roundDownToMultiple(
// boundingBoxHeight,
// 64
// );
const roundedCanvasWidth = roundDownToMultiple(canvasWidth, 64);
const roundedCanvasHeight = roundDownToMultiple(canvasHeight, 64);
const roundedBoundingBoxWidth = roundDownToMultiple(boundingBoxWidth, 64);
const roundedBoundingBoxHeight = roundDownToMultiple(
boundingBoxHeight,
64
);
// const overflowX = boundingBoxX + boundingBoxWidth - canvasWidth;
// const overflowY = boundingBoxY + boundingBoxHeight - canvasHeight;
const overflowX = boundingBoxX + boundingBoxWidth - canvasWidth;
const overflowY = boundingBoxY + boundingBoxHeight - canvasHeight;
// const newBoundingBoxWidth = _.clamp(
// roundedBoundingBoxWidth,
// 64,
// roundedCanvasWidth
// );
const newBoundingBoxWidth = _.clamp(
roundedBoundingBoxWidth,
64,
roundedCanvasWidth
);
// const newBoundingBoxHeight = _.clamp(
// roundedBoundingBoxHeight,
// 64,
// roundedCanvasHeight
// );
const newBoundingBoxHeight = _.clamp(
roundedBoundingBoxHeight,
64,
roundedCanvasHeight
);
console.log(overflowX, boundingBoxX, boundingBoxX - overflowX);
const overflowCorrectedX =
overflowX > 0 ? boundingBoxX - overflowX : boundingBoxX;
// const overflowCorrectedX =
// overflowX > 0 ? boundingBoxX - overflowX : boundingBoxX;
const overflowCorrectedY =
overflowY > 0 ? boundingBoxY - overflowY : boundingBoxY;
// const overflowCorrectedY =
// overflowY > 0 ? boundingBoxY - overflowY : boundingBoxY;
const clampedX = _.clamp(
overflowCorrectedX,
0,
roundedCanvasWidth - newBoundingBoxWidth
);
// const clampedX = _.clamp(
// overflowCorrectedX,
// 64,
// roundedCanvasWidth - newBoundingBoxWidth
// );
const clampedY = _.clamp(
overflowCorrectedY,
0,
roundedCanvasHeight - newBoundingBoxHeight
);
// const clampedY = _.clamp(
// overflowCorrectedY,
// 64,
// roundedCanvasHeight - newBoundingBoxHeight
// );
const newBoundingBoxX = roundDownToMultiple(clampedX, 64);
// const newBoundingBoxX = roundDownToMultiple(clampedX, 64);
const newBoundingBoxY = roundDownToMultiple(clampedY, 64);
// const newBoundingBoxY = roundDownToMultiple(clampedY, 64);
state.boundingBoxDimensions = {
width: newBoundingBoxWidth,
height: newBoundingBoxHeight,
};
// state.boundingBoxDimensions = {
// width: newBoundingBoxWidth,
// height: newBoundingBoxHeight,
// };
// state.boundingBoxCoordinate = {
// x: newBoundingBoxX,
// y: newBoundingBoxY,
// };
state.boundingBoxCoordinate = {
x: newBoundingBoxX,
y: newBoundingBoxY,
};
},
setBoundingBoxCoordinate: (state, action: PayloadAction<Vector2d>) => {
state.boundingBoxCoordinate = action.payload;
@ -340,7 +340,7 @@ export const {
setShouldShowBoundingBoxFill,
setIsBoundingBoxTransforming,
setIsDrawing,
setShouldShowBrush
setShouldShowBrush,
} = inpaintingSlice.actions;
export default inpaintingSlice.reducer;