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 more bounding box bugs

Browse Source
This commit is contained in:
psychedelicious 2022-10-28 14:14:28 +11:00
parent 6f51b2078e
commit dd71066391
3 changed files with 27 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx
View File

@ -118,32 +118,29 @@ const InpaintingCanvas = () => {
* Canvas onMouseMove * Canvas onMouseMove
* *
*/ */
const handleMouseMove = useCallback( const handleMouseMove = useCallback(() => {
() => { if (!stageRef.current) return;
if (!stageRef.current) return;
const scaledCursorPosition = getScaledCursorPosition(stageRef.current); const scaledCursorPosition = getScaledCursorPosition(stageRef.current);
if (!scaledCursorPosition) return; if (!scaledCursorPosition) return;
dispatch(setCursorPosition(scaledCursorPosition)); dispatch(setCursorPosition(scaledCursorPosition));
if (!maskLayerRef.current || !shouldLockBoundingBox) { if (!maskLayerRef.current || !shouldLockBoundingBox) {
return; return;
} }
lastCursorPosition.current = scaledCursorPosition; lastCursorPosition.current = scaledCursorPosition;
if (!isDrawing) return; if (!isDrawing) return;
didMouseMoveRef.current = true; didMouseMoveRef.current = true;
// Extend the current line // Extend the current line
dispatch( dispatch(
addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y]) addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y])
); );
}, }, [dispatch, isDrawing, shouldLockBoundingBox]);
[dispatch, isDrawing, shouldLockBoundingBox]
);
/** /**
* *
@ -260,7 +257,8 @@ const InpaintingCanvas = () => {
ref={maskLayerRef} ref={maskLayerRef}
> >
<InpaintingCanvasLines /> <InpaintingCanvasLines />
<InpaintingCanvasBrushPreview />
{shouldLockBoundingBox && <InpaintingCanvasBrushPreview />}
{shouldInvertMask && ( {shouldInvertMask && (
<KonvaImage <KonvaImage
@ -282,7 +280,9 @@ const InpaintingCanvas = () => {
<InpaintingBoundingBoxPreviewOverlay /> <InpaintingBoundingBoxPreviewOverlay />
)} )}
{shouldShowBoundingBox && <InpaintingBoundingBoxPreview />} {shouldShowBoundingBox && <InpaintingBoundingBoxPreview />}
<InpaintingCanvasBrushPreviewOutline /> {shouldLockBoundingBox && (
<InpaintingCanvasBrushPreviewOutline />
)}
</Layer> </Layer>
</> </>
)} )}

9
frontend/src/features/tabs/Inpainting/components/KeyboardEventManager.tsx
View File

@ -19,11 +19,8 @@ import {
const keyboardEventManagerSelector = createSelector( const keyboardEventManagerSelector = createSelector(
[(state: RootState) => state.options, (state: RootState) => state.inpainting], [(state: RootState) => state.options, (state: RootState) => state.inpainting],
(options: OptionsState, inpainting: InpaintingState) => { (options: OptionsState, inpainting: InpaintingState) => {
const { const { shouldShowMask, cursorPosition, shouldLockBoundingBox } =
shouldShowMask, inpainting;
cursorPosition,
shouldLockBoundingBox,
} = inpainting;
return { return {
activeTabName: tabMap[options.activeTab], activeTabName: tabMap[options.activeTab],
shouldShowMask, shouldShowMask,
@ -95,10 +92,8 @@ const KeyboardEventManager = () => {
if (e.type === 'keydown') { if (e.type === 'keydown') {
dispatch(setIsDrawing(false)); dispatch(setIsDrawing(false));
dispatch(setShouldLockBoundingBox(false)); dispatch(setShouldLockBoundingBox(false));
dispatch(setShouldShowBrush(false));
} else { } else {
dispatch(setShouldLockBoundingBox(true)); dispatch(setShouldLockBoundingBox(true));
dispatch(setShouldShowBrush(true));
} }
break; break;
} }

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

@ -237,6 +237,7 @@ export const inpaintingSlice = createSlice({
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,
@ -276,22 +277,18 @@ export const inpaintingSlice = createSlice({
roundedCanvasHeight - newBoundingBoxHeight roundedCanvasHeight - newBoundingBoxHeight
); );
const newBoundingBoxX = roundDownToMultiple(clampedX, 64);
const newBoundingBoxY = roundDownToMultiple(clampedY, 64);
state.boundingBoxDimensions = { state.boundingBoxDimensions = {
width: newBoundingBoxWidth, width: newBoundingBoxWidth,
height: newBoundingBoxHeight, height: newBoundingBoxHeight,
}; };
state.boundingBoxCoordinate = { state.boundingBoxCoordinate = {
x: newBoundingBoxX, x: clampedX,
y: newBoundingBoxY, y: clampedY,
}; };
}, },
setBoundingBoxCoordinate: (state, action: PayloadAction<Vector2d>) => { setBoundingBoxCoordinate: (state, action: PayloadAction<Vector2d>) => {
state.boundingBoxCoordinate = action.payload state.boundingBoxCoordinate = action.payload;
// const { x, y } = action.payload; // const { x, y } = action.payload;
// const maxX = // const maxX =