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, setBoundingBoxDimensions,
setIsBoundingBoxTransforming, setIsBoundingBoxTransforming,
setIsDrawing, setIsDrawing,
setIsMovingBoundingBox,
setShouldShowBrush, setShouldShowBrush,
} from '../inpaintingSlice'; } from '../inpaintingSlice';
import { rgbaColorToString } from '../util/colorToString'; import { rgbaColorToString } from '../util/colorToString';
import { import {
DASH_WIDTH, DASH_WIDTH,
// MARCHING_ANTS_SPEED, // MARCHING_ANTS_SPEED,
TRANSFORMER_ANCHOR_SIZE,
} from '../util/constants'; } from '../util/constants';
const boundingBoxPreviewSelector = createSelector( const boundingBoxPreviewSelector = createSelector(
@ -48,7 +46,6 @@ const boundingBoxPreviewSelector = createSelector(
imageToInpaint, imageToInpaint,
dash: DASH_WIDTH / stageScale, // scale dash lengths dash: DASH_WIDTH / stageScale, // scale dash lengths
strokeWidth: 1 / stageScale, // scale stroke thickness strokeWidth: 1 / stageScale, // scale stroke thickness
anchorSize: TRANSFORMER_ANCHOR_SIZE,
isMovingBoundingBox, isMovingBoundingBox,
}; };
}, },
@ -158,10 +155,8 @@ const InpaintingBoundingBoxPreview = () => {
boundingBoxCoordinate, boundingBoxCoordinate,
boundingBoxDimensions, boundingBoxDimensions,
strokeWidth, strokeWidth,
anchorSize,
stageScale, stageScale,
imageToInpaint, imageToInpaint,
isMovingBoundingBox,
} = useAppSelector(boundingBoxPreviewSelector); } = useAppSelector(boundingBoxPreviewSelector);
const transformerRef = useRef<Konva.Transformer>(null); const transformerRef = useRef<Konva.Transformer>(null);
@ -237,11 +232,12 @@ const InpaintingBoundingBoxPreview = () => {
<Transformer <Transformer
ref={transformerRef} ref={transformerRef}
rotateEnabled={false} rotateEnabled={false}
anchorSize={anchorSize} anchorSize={15}
anchorFill={'rgba(212,216,234,1)'}
anchorStroke={'rgb(42,42,42)'} anchorStroke={'rgb(42,42,42)'}
borderEnabled={true} borderEnabled={true}
borderStroke={'black'} borderStroke={'black'}
borderDash={[DASH_WIDTH, DASH_WIDTH]} borderDash={[4, 4]}
anchorCornerRadius={3} anchorCornerRadius={3}
ignoreStroke={true} ignoreStroke={true}
keepRatio={false} 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>) => { setBoundingBoxDimensions: (state, action: PayloadAction<Dimensions>) => {
state.boundingBoxDimensions = action.payload; state.boundingBoxDimensions = action.payload;
// const { width: boundingBoxWidth, height: boundingBoxHeight } = const { width: boundingBoxWidth, height: boundingBoxHeight } =
// action.payload; action.payload;
// const { x: boundingBoxX, y: boundingBoxY } = state.boundingBoxCoordinate; const { x: boundingBoxX, y: boundingBoxY } = state.boundingBoxCoordinate;
// const { width: canvasWidth, height: canvasHeight } = const { width: canvasWidth, height: canvasHeight } =
// state.canvasDimensions; state.canvasDimensions;
// const roundedCanvasWidth = roundDownToMultiple(canvasWidth, 64); const roundedCanvasWidth = roundDownToMultiple(canvasWidth, 64);
// const roundedCanvasHeight = roundDownToMultiple(canvasHeight, 64); const roundedCanvasHeight = roundDownToMultiple(canvasHeight, 64);
// const roundedBoundingBoxWidth = roundDownToMultiple(boundingBoxWidth, 64); const roundedBoundingBoxWidth = roundDownToMultiple(boundingBoxWidth, 64);
// const roundedBoundingBoxHeight = roundDownToMultiple( const roundedBoundingBoxHeight = roundDownToMultiple(
// boundingBoxHeight, boundingBoxHeight,
// 64 64
// ); );
// const overflowX = boundingBoxX + boundingBoxWidth - canvasWidth; const overflowX = boundingBoxX + boundingBoxWidth - canvasWidth;
// const overflowY = boundingBoxY + boundingBoxHeight - canvasHeight; const overflowY = boundingBoxY + boundingBoxHeight - canvasHeight;
// const newBoundingBoxWidth = _.clamp( const newBoundingBoxWidth = _.clamp(
// roundedBoundingBoxWidth, roundedBoundingBoxWidth,
// 64, 64,
// roundedCanvasWidth roundedCanvasWidth
// ); );
// const newBoundingBoxHeight = _.clamp( const newBoundingBoxHeight = _.clamp(
// roundedBoundingBoxHeight, roundedBoundingBoxHeight,
// 64, 64,
// roundedCanvasHeight roundedCanvasHeight
// ); );
console.log(overflowX, boundingBoxX, boundingBoxX - overflowX);
const overflowCorrectedX =
overflowX > 0 ? boundingBoxX - overflowX : boundingBoxX;
// const overflowCorrectedX = const overflowCorrectedY =
// overflowX > 0 ? boundingBoxX - overflowX : boundingBoxX; overflowY > 0 ? boundingBoxY - overflowY : boundingBoxY;
// const overflowCorrectedY = const clampedX = _.clamp(
// overflowY > 0 ? boundingBoxY - overflowY : boundingBoxY; overflowCorrectedX,
0,
roundedCanvasWidth - newBoundingBoxWidth
);
// const clampedX = _.clamp( const clampedY = _.clamp(
// overflowCorrectedX, overflowCorrectedY,
// 64, 0,
// roundedCanvasWidth - newBoundingBoxWidth roundedCanvasHeight - newBoundingBoxHeight
// ); );
// const clampedY = _.clamp( const newBoundingBoxX = roundDownToMultiple(clampedX, 64);
// overflowCorrectedY,
// 64,
// roundedCanvasHeight - newBoundingBoxHeight
// );
// const newBoundingBoxX = roundDownToMultiple(clampedX, 64); const newBoundingBoxY = roundDownToMultiple(clampedY, 64);
// const newBoundingBoxY = roundDownToMultiple(clampedY, 64); state.boundingBoxDimensions = {
width: newBoundingBoxWidth,
height: newBoundingBoxHeight,
};
// state.boundingBoxDimensions = { state.boundingBoxCoordinate = {
// width: newBoundingBoxWidth, x: newBoundingBoxX,
// height: newBoundingBoxHeight, y: newBoundingBoxY,
// }; };
// state.boundingBoxCoordinate = {
// x: newBoundingBoxX,
// y: newBoundingBoxY,
// };
}, },
setBoundingBoxCoordinate: (state, action: PayloadAction<Vector2d>) => { setBoundingBoxCoordinate: (state, action: PayloadAction<Vector2d>) => {
state.boundingBoxCoordinate = action.payload; state.boundingBoxCoordinate = action.payload;
@ -340,7 +340,7 @@ export const {
setShouldShowBoundingBoxFill, setShouldShowBoundingBoxFill,
setIsBoundingBoxTransforming, setIsBoundingBoxTransforming,
setIsDrawing, setIsDrawing,
setShouldShowBrush setShouldShowBrush,
} = inpaintingSlice.actions; } = inpaintingSlice.actions;
export default inpaintingSlice.reducer; export default inpaintingSlice.reducer;