From 6a4a5ece74993b08bf38fbed98c5dee7b53531a0 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 24 Jun 2024 12:22:25 +1000 Subject: [PATCH] feat(ui): minor change to canvas bbox state type --- .../controlLayers/store/bboxReducers.ts | 26 +++++++------------ .../controlLayers/store/canvasV2Slice.ts | 6 +++-- .../controlLayers/store/paramsReducers.ts | 4 +-- .../src/features/controlLayers/store/types.ts | 6 +++-- .../InfillAndScaling/ParamScaledHeight.tsx | 2 +- .../InfillAndScaling/ParamScaledWidth.tsx | 2 +- 6 files changed, 21 insertions(+), 25 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/store/bboxReducers.ts b/invokeai/frontend/web/src/features/controlLayers/store/bboxReducers.ts index dc75e2e8e6..f2e814290e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/bboxReducers.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/bboxReducers.ts @@ -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>) => { - 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) => { 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) => { - 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; diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts index 60d7151815..2e28fe6370 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts @@ -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, diff --git a/invokeai/frontend/web/src/features/controlLayers/store/paramsReducers.ts b/invokeai/frontend/web/src/features/controlLayers/store/paramsReducers.ts index ba36deaa32..fe7f895651 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/paramsReducers.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/paramsReducers.ts @@ -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); } } diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts index 482ffe1a5f..1d2b57922c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts @@ -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; diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx index 71a5dc28c9..d9871bc78f 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx @@ -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); diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx index ed09e4599a..6f5338c9ef 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx @@ -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);