mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
Improves bounding box interaction
Added spacebar-hold-to-transform back.
This commit is contained in:
parent
8282e5d045
commit
423ae32097
File diff suppressed because one or more lines are too long
2
frontend/dist/index.html
vendored
2
frontend/dist/index.html
vendored
@ -6,7 +6,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>InvokeAI - A Stable Diffusion Toolkit</title>
|
<title>InvokeAI - A Stable Diffusion Toolkit</title>
|
||||||
<link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
|
<link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
|
||||||
<script type="module" crossorigin src="./assets/index.def1e5a0.js"></script>
|
<script type="module" crossorigin src="./assets/index.784f40b4.js"></script>
|
||||||
<link rel="stylesheet" href="./assets/index.e29f3ddc.css">
|
<link rel="stylesheet" href="./assets/index.e29f3ddc.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { createSelector } from '@reduxjs/toolkit';
|
import { createSelector } from '@reduxjs/toolkit';
|
||||||
import Konva from 'konva';
|
import Konva from 'konva';
|
||||||
|
import { Context } from 'konva/lib/Context';
|
||||||
import { KonvaEventObject } from 'konva/lib/Node';
|
import { KonvaEventObject } from 'konva/lib/Node';
|
||||||
import { Box } from 'konva/lib/shapes/Transformer';
|
import { Box } from 'konva/lib/shapes/Transformer';
|
||||||
import { Vector2d } from 'konva/lib/types';
|
import { Vector2d } from 'konva/lib/types';
|
||||||
@ -42,6 +43,7 @@ const boundingBoxPreviewSelector = createSelector(
|
|||||||
isTransformingBoundingBox,
|
isTransformingBoundingBox,
|
||||||
isMovingBoundingBox,
|
isMovingBoundingBox,
|
||||||
isMouseOverBoundingBox,
|
isMouseOverBoundingBox,
|
||||||
|
isSpacebarHeld,
|
||||||
} = inpainting;
|
} = inpainting;
|
||||||
return {
|
return {
|
||||||
boundingBoxCoordinate,
|
boundingBoxCoordinate,
|
||||||
@ -57,6 +59,7 @@ const boundingBoxPreviewSelector = createSelector(
|
|||||||
isTransformingBoundingBox,
|
isTransformingBoundingBox,
|
||||||
isMouseOverBoundingBox,
|
isMouseOverBoundingBox,
|
||||||
isMovingBoundingBox,
|
isMovingBoundingBox,
|
||||||
|
isSpacebarHeld,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -111,6 +114,7 @@ const InpaintingBoundingBoxPreview = () => {
|
|||||||
isTransformingBoundingBox,
|
isTransformingBoundingBox,
|
||||||
isMovingBoundingBox,
|
isMovingBoundingBox,
|
||||||
isMouseOverBoundingBox,
|
isMouseOverBoundingBox,
|
||||||
|
isSpacebarHeld,
|
||||||
} = useAppSelector(boundingBoxPreviewSelector);
|
} = useAppSelector(boundingBoxPreviewSelector);
|
||||||
|
|
||||||
const transformerRef = useRef<Konva.Transformer>(null);
|
const transformerRef = useRef<Konva.Transformer>(null);
|
||||||
@ -297,6 +301,11 @@ const InpaintingBoundingBoxPreview = () => {
|
|||||||
dispatch(setIsMouseOverBoundingBox(false));
|
dispatch(setIsMouseOverBoundingBox(false));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const spacebarHeldHitFunc = (context: Context, shape: Konva.Shape) => {
|
||||||
|
context.rect(0, 0, imageToInpaint?.width, imageToInpaint?.height);
|
||||||
|
context.fillShape(shape);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Rect
|
<Rect
|
||||||
@ -307,7 +316,8 @@ const InpaintingBoundingBoxPreview = () => {
|
|||||||
ref={shapeRef}
|
ref={shapeRef}
|
||||||
stroke={isMouseOverBoundingBox ? 'rgba(255,255,255,0.3)' : 'white'}
|
stroke={isMouseOverBoundingBox ? 'rgba(255,255,255,0.3)' : 'white'}
|
||||||
strokeWidth={Math.floor((isMouseOverBoundingBox ? 8 : 1) / stageScale)}
|
strokeWidth={Math.floor((isMouseOverBoundingBox ? 8 : 1) / stageScale)}
|
||||||
fillEnabled={false}
|
fillEnabled={isSpacebarHeld}
|
||||||
|
hitFunc={isSpacebarHeld ? spacebarHeldHitFunc : undefined}
|
||||||
hitStrokeWidth={Math.floor(13 / stageScale)}
|
hitStrokeWidth={Math.floor(13 / stageScale)}
|
||||||
listening={!isDrawing && !shouldLockBoundingBox}
|
listening={!isDrawing && !shouldLockBoundingBox}
|
||||||
onMouseOver={() => {
|
onMouseOver={() => {
|
||||||
|
@ -11,6 +11,8 @@ import { OptionsState } from '../../../options/optionsSlice';
|
|||||||
import {
|
import {
|
||||||
InpaintingState,
|
InpaintingState,
|
||||||
setIsDrawing,
|
setIsDrawing,
|
||||||
|
setIsSpacebarHeld,
|
||||||
|
setNeedsCache,
|
||||||
setShouldLockBoundingBox,
|
setShouldLockBoundingBox,
|
||||||
toggleTool,
|
toggleTool,
|
||||||
} from '../inpaintingSlice';
|
} from '../inpaintingSlice';
|
||||||
@ -93,11 +95,8 @@ const KeyboardEventManager = () => {
|
|||||||
}
|
}
|
||||||
case ' ': {
|
case ' ': {
|
||||||
if (!shouldShowMask) break;
|
if (!shouldShowMask) break;
|
||||||
|
dispatch(setIsSpacebarHeld(e.type === 'keydown'));
|
||||||
if (e.type === 'keydown') {
|
dispatch(setShouldLockBoundingBox(e.type !== 'keydown'));
|
||||||
dispatch(setIsDrawing(false));
|
|
||||||
}
|
|
||||||
dispatch(setShouldLockBoundingBox(!shouldLockBoundingBox));
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -57,6 +57,7 @@ export interface InpaintingState {
|
|||||||
shouldUseInpaintReplace: boolean;
|
shouldUseInpaintReplace: boolean;
|
||||||
inpaintReplace: number;
|
inpaintReplace: number;
|
||||||
shouldLockBoundingBox: boolean;
|
shouldLockBoundingBox: boolean;
|
||||||
|
isSpacebarHeld: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const initialInpaintingState: InpaintingState = {
|
const initialInpaintingState: InpaintingState = {
|
||||||
@ -87,6 +88,7 @@ const initialInpaintingState: InpaintingState = {
|
|||||||
shouldUseInpaintReplace: false,
|
shouldUseInpaintReplace: false,
|
||||||
inpaintReplace: 1,
|
inpaintReplace: 1,
|
||||||
shouldLockBoundingBox: true,
|
shouldLockBoundingBox: true,
|
||||||
|
isSpacebarHeld: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
const initialState: InpaintingState = initialInpaintingState;
|
const initialState: InpaintingState = initialInpaintingState;
|
||||||
@ -334,6 +336,9 @@ export const inpaintingSlice = createSlice({
|
|||||||
setIsMouseOverBoundingBox: (state, action: PayloadAction<boolean>) => {
|
setIsMouseOverBoundingBox: (state, action: PayloadAction<boolean>) => {
|
||||||
state.isMouseOverBoundingBox = action.payload;
|
state.isMouseOverBoundingBox = action.payload;
|
||||||
},
|
},
|
||||||
|
setIsSpacebarHeld: (state, action: PayloadAction<boolean>) => {
|
||||||
|
state.isSpacebarHeld = action.payload;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -372,6 +377,7 @@ export const {
|
|||||||
setIsMovingBoundingBox,
|
setIsMovingBoundingBox,
|
||||||
setIsTransformingBoundingBox,
|
setIsTransformingBoundingBox,
|
||||||
setIsMouseOverBoundingBox,
|
setIsMouseOverBoundingBox,
|
||||||
|
setIsSpacebarHeld,
|
||||||
} = inpaintingSlice.actions;
|
} = inpaintingSlice.actions;
|
||||||
|
|
||||||
export default inpaintingSlice.reducer;
|
export default inpaintingSlice.reducer;
|
||||||
|
Loading…
Reference in New Issue
Block a user