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

feat: Make BBox Handles adapt to Aspect Ratio lock

Browse Source
This commit is contained in:
blessedcoolant 2023-07-10 20:37:00 +12:00
parent 15175bb998
commit 0bfa5ffd8e
5 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/public/locales/en.json
View File

@ -528,7 +528,7 @@
"hidePreview": "Hide Preview", "hidePreview": "Hide Preview",
"showPreview": "Show Preview", "showPreview": "Show Preview",
"controlNetControlMode": "Control Mode", "controlNetControlMode": "Control Mode",
"clipSkip": "Clip Skip", "clipSkip": "CLIP Skip",
"aspectRatio": "Ratio" "aspectRatio": "Ratio"
}, },
"settings": { "settings": {

33
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
View File

@ -12,6 +12,7 @@ import {
setIsMovingBoundingBox, setIsMovingBoundingBox,
setIsTransformingBoundingBox, setIsTransformingBoundingBox,
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import { uiSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva'; import Konva from 'konva';
import { GroupConfig } from 'konva/lib/Group'; import { GroupConfig } from 'konva/lib/Group';
import { KonvaEventObject } from 'konva/lib/Node'; import { KonvaEventObject } from 'konva/lib/Node';
@ -22,8 +23,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { Group, Rect, Transformer } from 'react-konva'; import { Group, Rect, Transformer } from 'react-konva';
const boundingBoxPreviewSelector = createSelector( const boundingBoxPreviewSelector = createSelector(
canvasSelector, [canvasSelector, uiSelector],
(canvas) => { (canvas, ui) => {
const { const {
boundingBoxCoordinates, boundingBoxCoordinates,
boundingBoxDimensions, boundingBoxDimensions,
@ -35,6 +36,8 @@ const boundingBoxPreviewSelector = createSelector(
shouldSnapToGrid, shouldSnapToGrid,
} = canvas; } = canvas;
const { aspectRatio } = ui;
return { return {
boundingBoxCoordinates, boundingBoxCoordinates,
boundingBoxDimensions, boundingBoxDimensions,
@ -45,6 +48,7 @@ const boundingBoxPreviewSelector = createSelector(
shouldSnapToGrid, shouldSnapToGrid,
tool, tool,
hitStrokeWidth: 20 / stageScale, hitStrokeWidth: 20 / stageScale,
aspectRatio,
}; };
}, },
{ {
@ -70,6 +74,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
shouldSnapToGrid, shouldSnapToGrid,
tool, tool,
hitStrokeWidth, hitStrokeWidth,
aspectRatio,
} = useAppSelector(boundingBoxPreviewSelector); } = useAppSelector(boundingBoxPreviewSelector);
const transformerRef = useRef<Konva.Transformer>(null); const transformerRef = useRef<Konva.Transformer>(null);
@ -137,12 +142,22 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
const x = Math.round(rect.x()); const x = Math.round(rect.x());
const y = Math.round(rect.y()); const y = Math.round(rect.y());
dispatch( if (aspectRatio) {
setBoundingBoxDimensions({ const newHeight = roundToMultiple(width / aspectRatio, 64);
width, dispatch(
height, setBoundingBoxDimensions({
}) width: width,
); height: newHeight,
})
);
} else {
dispatch(
setBoundingBoxDimensions({
width,
height,
})
);
}
dispatch( dispatch(
setBoundingBoxCoordinates({ setBoundingBoxCoordinates({
@ -154,7 +169,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
// Reset the scale now that the coords/dimensions have been un-scaled // Reset the scale now that the coords/dimensions have been un-scaled
rect.scaleX(1); rect.scaleX(1);
rect.scaleY(1); rect.scaleY(1);
}, [dispatch, shouldSnapToGrid]); }, [dispatch, shouldSnapToGrid, aspectRatio]);
const anchorDragBoundFunc = useCallback( const anchorDragBoundFunc = useCallback(
( (

2
invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
View File

@ -879,7 +879,7 @@ export const canvasSlice = createSlice({
if (ratio) { if (ratio) {
state.boundingBoxDimensions.height = roundToMultiple( state.boundingBoxDimensions.height = roundToMultiple(
state.boundingBoxDimensions.width / ratio, state.boundingBoxDimensions.width / ratio,
8 64
); );
} }
}); });

4
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
View File

@ -42,7 +42,7 @@ const ParamBoundingBoxWidth = () => {
}) })
); );
if (aspectRatio) { if (aspectRatio) {
const newWidth = roundToMultiple(v * aspectRatio, 8); const newWidth = roundToMultiple(v * aspectRatio, 64);
dispatch( dispatch(
setBoundingBoxDimensions({ setBoundingBoxDimensions({
width: newWidth, width: newWidth,
@ -60,7 +60,7 @@ const ParamBoundingBoxWidth = () => {
}) })
); );
if (aspectRatio) { if (aspectRatio) {
const newWidth = roundToMultiple(512 * aspectRatio, 8); const newWidth = roundToMultiple(512 * aspectRatio, 64);
dispatch( dispatch(
setBoundingBoxDimensions({ setBoundingBoxDimensions({
width: newWidth, width: newWidth,

4
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
View File

@ -42,7 +42,7 @@ const ParamBoundingBoxWidth = () => {
}) })
); );
if (aspectRatio) { if (aspectRatio) {
const newHeight = roundToMultiple(v / aspectRatio, 8); const newHeight = roundToMultiple(v / aspectRatio, 64);
dispatch( dispatch(
setBoundingBoxDimensions({ setBoundingBoxDimensions({
width: Math.floor(v), width: Math.floor(v),
@ -60,7 +60,7 @@ const ParamBoundingBoxWidth = () => {
}) })
); );
if (aspectRatio) { if (aspectRatio) {
const newHeight = roundToMultiple(512 / aspectRatio, 8); const newHeight = roundToMultiple(512 / aspectRatio, 64);
dispatch( dispatch(
setBoundingBoxDimensions({ setBoundingBoxDimensions({
width: Math.floor(512), width: Math.floor(512),