From 98e905ee482e25b8dd4a5b23a85e44297734205f Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 30 Aug 2023 04:51:32 +1200
Subject: [PATCH] ui: Combine mask and coherence under Compositing

---
 invokeai/frontend/web/public/locales/en.json  |  9 +--
 .../ParamCanvasCoherenceSteps.tsx             |  0
 .../ParamCanvasCoherenceStrength.tsx          |  0
 .../MaskAdjustment/ParamMaskBlur.tsx          |  0
 .../MaskAdjustment/ParamMaskBlurMethod.tsx    |  0
 .../ParamCompositingSettingsCollapse.tsx      | 57 +++++++++++++++++++
 .../ParamMaskAdjustmentCollapse.tsx           | 21 -------
 .../ParamCanvasCoherencePassCollapse.tsx      | 21 -------
 .../SDXLUnifiedCanvasTabParameters.tsx        |  6 +-
 .../UnifiedCanvas/UnifiedCanvasParameters.tsx |  6 +-
 10 files changed, 66 insertions(+), 54 deletions(-)
 rename invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/{SeamPainting => Compositing/CoherencePass}/ParamCanvasCoherenceSteps.tsx (100%)
 rename invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/{SeamPainting => Compositing/CoherencePass}/ParamCanvasCoherenceStrength.tsx (100%)
 rename invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/{ => Compositing}/MaskAdjustment/ParamMaskBlur.tsx (100%)
 rename invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/{ => Compositing}/MaskAdjustment/ParamMaskBlurMethod.tsx (100%)
 create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx
 delete mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse.tsx
 delete mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index e39f438146..3907acdc60 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -506,12 +506,13 @@
         "hiresStrength": "High Res Strength",
         "imageFit": "Fit Initial Image To Output Size",
         "codeformerFidelity": "Fidelity",
+        "compositingSettingsHeader": "Compositing Settings",
         "maskAdjustmentsHeader": "Mask Adjustments",
-        "maskBlur": "Mask Blur",
-        "maskBlurMethod": "Mask Blur Method",
+        "maskBlur": "Blur",
+        "maskBlurMethod": "Blur Method",
         "coherencePassHeader": "Coherence Pass",
-        "coherenceSteps": "Coherence Pass Steps",
-        "coherenceStrength": "Coherence Pass Strength",
+        "coherenceSteps": "Steps",
+        "coherenceStrength": "Strength",
         "seamLowThreshold": "Low",
         "seamHighThreshold": "High",
         "scaleBeforeProcessing": "Scale Before Processing",
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherenceSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
similarity index 100%
rename from invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherenceSteps.tsx
rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherenceStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
similarity index 100%
rename from invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherenceStrength.tsx
rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
similarity index 100%
rename from invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlur.tsx
rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlurMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
similarity index 100%
rename from invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlurMethod.tsx
rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx
new file mode 100644
index 0000000000..a13fa01220
--- /dev/null
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx
@@ -0,0 +1,57 @@
+import { Divider, Flex, Text } from '@chakra-ui/react';
+import IAICollapse from 'common/components/IAICollapse';
+import { PropsWithChildren, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import ParamCanvasCoherenceSteps from './CoherencePass/ParamCanvasCoherenceSteps';
+import ParamCanvasCoherenceStrength from './CoherencePass/ParamCanvasCoherenceStrength';
+import ParamMaskBlur from './MaskAdjustment/ParamMaskBlur';
+import ParamMaskBlurMethod from './MaskAdjustment/ParamMaskBlurMethod';
+
+const ParamCompositingSettingsCollapse = () => {
+  const { t } = useTranslation();
+
+  return (
+    <IAICollapse label={t('parameters.compositingSettingsHeader')}>
+      <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+        <CompositingSettingsWrapper>
+          <Text fontSize="sm" fontWeight="bold">
+            {t('parameters.maskAdjustmentsHeader')}
+          </Text>
+          <ParamMaskBlur />
+          <ParamMaskBlurMethod />
+        </CompositingSettingsWrapper>
+        <Divider />
+        <CompositingSettingsWrapper>
+          <Text fontSize="sm" fontWeight="bold">
+            {t('parameters.coherencePassHeader')}
+          </Text>
+          <ParamCanvasCoherenceSteps />
+          <ParamCanvasCoherenceStrength />
+        </CompositingSettingsWrapper>
+      </Flex>
+    </IAICollapse>
+  );
+};
+
+const CompositingSettingsWrapper = memo((props: PropsWithChildren) => (
+  <Flex
+    sx={{
+      flexDir: 'column',
+      gap: 2,
+      bg: 'base.100',
+      px: 4,
+      pt: 2,
+      pb: 4,
+      borderRadius: 'base',
+      _dark: {
+        bg: 'base.750',
+      },
+    }}
+  >
+    {props.children}
+  </Flex>
+));
+
+CompositingSettingsWrapper.displayName = 'CompositingSettingsWrapper';
+
+export default memo(ParamCompositingSettingsCollapse);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse.tsx
deleted file mode 100644
index 9ca6503d3d..0000000000
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import IAICollapse from 'common/components/IAICollapse';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import ParamMaskBlur from './ParamMaskBlur';
-import ParamMaskBlurMethod from './ParamMaskBlurMethod';
-
-const ParamMaskAdjustmentCollapse = () => {
-  const { t } = useTranslation();
-
-  return (
-    <IAICollapse label={t('parameters.maskAdjustmentsHeader')}>
-      <Flex sx={{ flexDirection: 'column', gap: 2 }}>
-        <ParamMaskBlur />
-        <ParamMaskBlurMethod />
-      </Flex>
-    </IAICollapse>
-  );
-};
-
-export default memo(ParamMaskAdjustmentCollapse);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse.tsx
deleted file mode 100644
index b454c4ccec..0000000000
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import IAICollapse from 'common/components/IAICollapse';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import ParamCanvasCoherenceSteps from './ParamCanvasCoherenceSteps';
-import ParamCanvasCoherenceStrength from './ParamCanvasCoherenceStrength';
-
-const ParamCanvasCoherencePassCollapse = () => {
-  const { t } = useTranslation();
-
-  return (
-    <IAICollapse label={t('parameters.coherencePassHeader')}>
-      <Flex sx={{ flexDirection: 'column', gap: 2, paddingBottom: 2 }}>
-        <ParamCanvasCoherenceSteps />
-        <ParamCanvasCoherenceStrength />
-      </Flex>
-    </IAICollapse>
-  );
-};
-
-export default memo(ParamCanvasCoherencePassCollapse);
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
index 8fc4a3181c..01236d8ec3 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
@@ -1,8 +1,7 @@
 import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
+import ParamCompositingSettingsCollapse from 'features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse';
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
-import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse';
-import ParamCanvasCoherencePassCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
@@ -20,9 +19,8 @@ export default function SDXLUnifiedCanvasTabParameters() {
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamNoiseCollapse />
-      <ParamMaskAdjustmentCollapse />
       <ParamInfillAndScalingCollapse />
-      <ParamCanvasCoherencePassCollapse />
+      <ParamCompositingSettingsCollapse />
       <ParamSeamlessCollapse />
     </>
   );
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 a640e1bae4..1ee748ccce 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
@@ -1,9 +1,8 @@
 import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
+import ParamCompositingSettingsCollapse from 'features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse';
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
-import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse';
-import ParamCanvasCoherencePassCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
@@ -20,9 +19,8 @@ const UnifiedCanvasParameters = () => {
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamSymmetryCollapse />
-      <ParamMaskAdjustmentCollapse />
       <ParamInfillAndScalingCollapse />
-      <ParamCanvasCoherencePassCollapse />
+      <ParamCompositingSettingsCollapse />
       <ParamSeamlessCollapse />
       <ParamAdvancedCollapse />
     </>