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

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

@ -64,8 +64,10 @@ const initialState: CanvasV2State = {
width: 512,
height: 512,
scaleMethod: 'auto',
scaledWidth: 512,
scaledHeight: 512,
scaledSize: {
width: 512,
height: 512,
},
},
settings: {
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;
if (state.bbox.scaleMethod === 'auto') {
const scaledBboxDims = getScaledBoundingBoxDimensions(bboxDims, optimalDimension);
state.bbox.scaledWidth = scaledBboxDims.width;
state.bbox.scaledHeight = scaledBboxDims.height;
state.bbox.scaledSize = getScaledBoundingBoxDimensions(bboxDims, optimalDimension);
}
}

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

@ -831,9 +831,11 @@ export type CanvasV2State = {
y: number;
width: ParameterWidth;
height: ParameterHeight;
scaledSize: {
width: ParameterWidth;
height: ParameterHeight;
};
scaleMethod: BoundingBoxScaleMethod;
scaledWidth: ParameterWidth;
scaledHeight: ParameterHeight;
};
compositing: {
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 optimalDimension = useAppSelector(selectOptimalDimension);
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 sliderMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxHeight.sliderMax);
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 optimalDimension = useAppSelector(selectOptimalDimension);
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 sliderMax = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.sliderMax);
const numberInputMin = useAppSelector((s) => s.config.sd.scaledBoundingBoxWidth.numberInputMin);