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(ui): minor change to canvas bbox state type

Browse Source
This commit is contained in:
psychedelicious 2024-06-24 12:22:25 +10:00
parent 73a1449eaf
commit a7c9848e99
6 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
invokeai/frontend/web/src/features/controlLayers/store/bboxReducers.ts
View File

@ -3,37 +3,31 @@ import type { BoundingBoxScaleMethod, CanvasV2State, Dimensions } from 'features
import { getScaledBoundingBoxDimensions } from 'features/controlLayers/util/getScaledBoundingBoxDimensions'; import { getScaledBoundingBoxDimensions } from 'features/controlLayers/util/getScaledBoundingBoxDimensions';
import { getOptimalDimension } from 'features/parameters/util/optimalDimension'; import { getOptimalDimension } from 'features/parameters/util/optimalDimension';
import type { IRect } from 'konva/lib/types'; import type { IRect } from 'konva/lib/types';
import { pick } from 'lodash-es';
export const bboxReducers = { export const bboxReducers = {
scaledBboxChanged: (state, action: PayloadAction<Partial<Dimensions>>) => { scaledBboxChanged: (state, action: PayloadAction<Partial<Dimensions>>) => {
const { width, height } = action.payload; state.layers.imageCache = null;
state.bbox.scaledWidth = width ?? state.bbox.scaledWidth; state.bbox.scaledSize = { ...state.bbox.scaledSize, ...action.payload };
state.bbox.scaledHeight = height ?? state.bbox.scaledHeight;
}, },
bboxScaleMethodChanged: (state, action: PayloadAction<BoundingBoxScaleMethod>) => { bboxScaleMethodChanged: (state, action: PayloadAction<BoundingBoxScaleMethod>) => {
state.bbox.scaleMethod = action.payload; state.bbox.scaleMethod = action.payload;
state.layers.imageCache = null;
if (action.payload === 'auto') { if (action.payload === 'auto') {
const bboxDims = { width: state.bbox.width, height: state.bbox.height };
const optimalDimension = getOptimalDimension(state.params.model); const optimalDimension = getOptimalDimension(state.params.model);
const scaledBboxDims = getScaledBoundingBoxDimensions(bboxDims, optimalDimension); const size = pick(state.bbox, 'width', 'height');
state.bbox.scaledWidth = scaledBboxDims.width; state.bbox.scaledSize = getScaledBoundingBoxDimensions(size, optimalDimension);
state.bbox.scaledHeight = scaledBboxDims.height;
} }
}, },
bboxChanged: (state, action: PayloadAction<IRect>) => { bboxChanged: (state, action: PayloadAction<IRect>) => {
const { x, y, width, height } = action.payload; state.bbox = { ...state.bbox, ...action.payload };
state.bbox.x = x; state.layers.imageCache = null;
state.bbox.y = y;
state.bbox.width = width;
state.bbox.height = height;
if (state.bbox.scaleMethod === 'auto') { if (state.bbox.scaleMethod === 'auto') {
const bboxDims = { width: state.bbox.width, height: state.bbox.height };
const optimalDimension = getOptimalDimension(state.params.model); const optimalDimension = getOptimalDimension(state.params.model);
const scaledBboxDims = getScaledBoundingBoxDimensions(bboxDims, optimalDimension); const size = pick(state.bbox, 'width', 'height');
state.bbox.scaledWidth = scaledBboxDims.width; state.bbox.scaledSize = getScaledBoundingBoxDimensions(size, optimalDimension);
state.bbox.scaledHeight = scaledBboxDims.height;
} }
}, },
} satisfies SliceCaseReducers<CanvasV2State>; } satisfies SliceCaseReducers<CanvasV2State>;

6
invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts
View File

@ -64,8 +64,10 @@ const initialState: CanvasV2State = {
width: 512, width: 512,
height: 512, height: 512,
scaleMethod: 'auto', scaleMethod: 'auto',
scaledWidth: 512, scaledSize: {
scaledHeight: 512, width: 512,
height: 512,
},
}, },
settings: { settings: {
maskOpacity: 0.3, maskOpacity: 0.3,

4
invokeai/frontend/web/src/features/controlLayers/store/paramsReducers.ts
View File

@ -68,9 +68,7 @@ export const paramsReducers = {
state.bbox.height = bboxDims.height; state.bbox.height = bboxDims.height;
if (state.bbox.scaleMethod === 'auto') { if (state.bbox.scaleMethod === 'auto') {
const scaledBboxDims = getScaledBoundingBoxDimensions(bboxDims, optimalDimension); state.bbox.scaledSize = getScaledBoundingBoxDimensions(bboxDims, optimalDimension);
state.bbox.scaledWidth = scaledBboxDims.width;
state.bbox.scaledHeight = scaledBboxDims.height;
} }
} }

6
invokeai/frontend/web/src/features/controlLayers/store/types.ts
View File

@ -831,9 +831,11 @@ export type CanvasV2State = {
y: number; y: number;
width: ParameterWidth; width: ParameterWidth;
height: ParameterHeight; height: ParameterHeight;
scaledSize: {
width: ParameterWidth;
height: ParameterHeight;
};
scaleMethod: BoundingBoxScaleMethod; scaleMethod: BoundingBoxScaleMethod;
scaledWidth: ParameterWidth;
scaledHeight: ParameterHeight;
}; };
compositing: { compositing: {
maskBlur: number; maskBlur: number;

2
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
View File

@ -10,7 +10,7 @@ const ParamScaledHeight = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const optimalDimension = useAppSelector(selectOptimalDimension); const optimalDimension = useAppSelector(selectOptimalDimension);
const isManual = useAppSelector((s) => s.canvasV2.bbox.scaleMethod === 'manual'); const isManual = useAppSelector((s) => s.canvasV2.bbox.scaleMethod === 'manual');
const height = useAppSelector((s) => s.canvasV2.bbox.scaledHeight); const height = useAppSelector((s) => s.canvasV2.bbox.scaledSize.height);
const sliderMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.sliderMin); const sliderMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.sliderMin);
const sliderMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.sliderMax); const sliderMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.sliderMax);
const numberInputMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.numberInputMin); const numberInputMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.numberInputMin);

2
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
View File

@ -10,7 +10,7 @@ const ParamScaledWidth = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const optimalDimension = useAppSelector(selectOptimalDimension); const optimalDimension = useAppSelector(selectOptimalDimension);
const isManual = useAppSelector((s) => s.canvasV2.bbox.scaleMethod === 'manual'); const isManual = useAppSelector((s) => s.canvasV2.bbox.scaleMethod === 'manual');
const width = useAppSelector((s) => s.canvasV2.bbox.scaledWidth); const width = useAppSelector((s) => s.canvasV2.bbox.scaledSize.width);
const sliderMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.sliderMin); const sliderMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.sliderMin);
const sliderMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.sliderMax); const sliderMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.sliderMax);
const numberInputMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.numberInputMin); const numberInputMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.numberInputMin);