From cffcf809774a1ebc6e07e4fa155d85f88bfd84df Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 30 May 2023 16:55:10 +1000
Subject: [PATCH] fix(ui): remove w/h from canvas params, add bbox w/h

---
 invokeai/frontend/web/public/locales/en.json      |  2 ++
 .../Canvas/BoundingBox/ParamBoundingBoxHeight.tsx | 15 ++++++++++-----
 .../Canvas/BoundingBox/ParamBoundingBoxWidth.tsx  | 15 ++++++++++-----
 .../UnifiedCanvas/UnifiedCanvasCoreParameters.tsx | 12 ++++++------
 .../UnifiedCanvas/UnifiedCanvasParameters.tsx     |  2 --
 5 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 4bd1e5aab3..de11352233 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -454,6 +454,8 @@
         "height": "Height",
         "scheduler": "Scheduler",
         "seed": "Seed",
+        "boundingBoxWidth": "Bounding Box Width",
+        "boundingBoxHeight": "Bounding Box Height",
         "imageToImage": "Image to Image",
         "randomizeSeed": "Randomize Seed",
         "shuffle": "Shuffle Seed",
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
index 75ec70f257..dc83ba8907 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
@@ -2,18 +2,22 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider from 'common/components/IAISlider';
-import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import { memo } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
-  canvasSelector,
-  (canvas) => {
+  [canvasSelector, isStagingSelector],
+  (canvas, isStaging) => {
     const { boundingBoxDimensions } = canvas;
     return {
       boundingBoxDimensions,
+      isStaging,
     };
   },
   defaultSelectorOptions
@@ -21,7 +25,7 @@ const selector = createSelector(
 
 const ParamBoundingBoxWidth = () => {
   const dispatch = useAppDispatch();
-  const { boundingBoxDimensions } = useAppSelector(selector);
+  const { boundingBoxDimensions, isStaging } = useAppSelector(selector);
 
   const { t } = useTranslation();
 
@@ -45,12 +49,13 @@ const ParamBoundingBoxWidth = () => {
 
   return (
     <IAISlider
-      label={t('parameters.height')}
+      label={t('parameters.boundingBoxHeight')}
       min={64}
       max={1024}
       step={64}
       value={boundingBoxDimensions.height}
       onChange={handleChangeHeight}
+      isDisabled={isStaging}
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
index cf6ccff852..e3ee3d5368 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
@@ -2,18 +2,22 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider from 'common/components/IAISlider';
-import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import { memo } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
-  canvasSelector,
-  (canvas) => {
+  [canvasSelector, isStagingSelector],
+  (canvas, isStaging) => {
     const { boundingBoxDimensions } = canvas;
     return {
       boundingBoxDimensions,
+      isStaging,
     };
   },
   defaultSelectorOptions
@@ -21,7 +25,7 @@ const selector = createSelector(
 
 const ParamBoundingBoxWidth = () => {
   const dispatch = useAppDispatch();
-  const { boundingBoxDimensions } = useAppSelector(selector);
+  const { boundingBoxDimensions, isStaging } = useAppSelector(selector);
 
   const { t } = useTranslation();
 
@@ -45,12 +49,13 @@ const ParamBoundingBoxWidth = () => {
 
   return (
     <IAISlider
-      label={t('parameters.width')}
+      label={t('parameters.boundingBoxWidth')}
       min={64}
       max={1024}
       step={64}
       value={boundingBoxDimensions.width}
       onChange={handleChangeWidth}
+      isDisabled={isStaging}
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
index f2529e5529..1b6b61f018 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
@@ -7,11 +7,11 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
 import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
 import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
-import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
-import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
 import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
 import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
 import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
+import ParamBoundingBoxWidth from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth';
+import ParamBoundingBoxHeight from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight';
 
 const selector = createSelector(
   uiSelector,
@@ -41,8 +41,8 @@ const UnifiedCanvasCoreParameters = () => {
           <ParamIterations />
           <ParamSteps />
           <ParamCFGScale />
-          <ParamWidth />
-          <ParamHeight />
+          <ParamBoundingBoxWidth />
+          <ParamBoundingBoxHeight />
           <ImageToImageStrength />
           <ImageToImageFit />
           <ParamSchedulerAndModel />
@@ -55,8 +55,8 @@ const UnifiedCanvasCoreParameters = () => {
             <ParamCFGScale />
           </Flex>
           <ParamSchedulerAndModel />
-          <ParamWidth />
-          <ParamHeight />
+          <ParamBoundingBoxWidth />
+          <ParamBoundingBoxHeight />
           <ImageToImageStrength />
         </Flex>
       )}
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
index 4aa68ad56a..c4501ffc44 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
@@ -2,7 +2,6 @@ import ProcessButtons from 'features/parameters/components/ProcessButtons/Proces
 import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse';
 import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
-import ParamBoundingBoxCollapse from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse';
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
 import ParamSeamCorrectionCollapse from 'features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse';
 import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
@@ -20,7 +19,6 @@ const UnifiedCanvasParameters = () => {
       <ParamSeedCollapse />
       <ParamVariationCollapse />
       <ParamSymmetryCollapse />
-      <ParamBoundingBoxCollapse />
       <ParamSeamCorrectionCollapse />
       <ParamInfillAndScalingCollapse />
     </>