feat(ui): ControlNet layout tweaks

invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx

@@ -1,19 +1,4 @@
-import {
-  Box,
-  Checkbox,
-  Flex,
-  FormControl,
-  FormLabel,
-  HStack,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
 import { memo, useCallback } from 'react';
-import { FaCopy, FaTrash } from 'react-icons/fa';
 import {
   ControlNetConfig,
   controlNetAdded,
@@ -21,19 +6,34 @@ import {
   controlNetToggled,
   isControlNetImagePreprocessedToggled,
 } from '../store/controlNetSlice';
+import { useAppDispatch } from 'app/store/storeHooks';
 import ParamControlNetModel from './parameters/ParamControlNetModel';
 import ParamControlNetWeight from './parameters/ParamControlNetWeight';
+import {
+  Checkbox,
+  Flex,
+  FormControl,
+  FormLabel,
+  HStack,
+  TabList,
+  TabPanels,
+  Tabs,
+  Tab,
+  TabPanel,
+  Box,
+} from '@chakra-ui/react';
+import { FaCopy, FaTrash } from 'react-icons/fa';
 
-import IAIButton from 'common/components/IAIButton';
-import IAIIconButton from 'common/components/IAIIconButton';
-import IAISwitch from 'common/components/IAISwitch';
-import { useToggle } from 'react-use';
-import { v4 as uuidv4 } from 'uuid';
-import ControlNetImagePreview from './ControlNetImagePreview';
-import ControlNetPreprocessButton from './ControlNetPreprocessButton';
-import ControlNetProcessorComponent from './ControlNetProcessorComponent';
 import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
+import ControlNetImagePreview from './ControlNetImagePreview';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { v4 as uuidv4 } from 'uuid';
+import { useToggle } from 'react-use';
 import ParamControlNetProcessorSelect from './parameters/ParamControlNetProcessorSelect';
+import ControlNetProcessorComponent from './ControlNetProcessorComponent';
+import ControlNetPreprocessButton from './ControlNetPreprocessButton';
+import IAIButton from 'common/components/IAIButton';
+import IAISwitch from 'common/components/IAISwitch';
 
 type ControlNetProps = {
   controlNet: ControlNetConfig;
@@ -48,7 +48,7 @@ const ControlNet = (props: ControlNetProps) => {
     beginStepPct,
     endStepPct,
     controlImage,
-    isPreprocessed: isControlImageProcessed,
+    isPreprocessed,
     processedControlImage,
     processorNode,
   } = props.controlNet;
@@ -83,18 +83,21 @@ const ControlNet = (props: ControlNetProps) => {
         borderRadius: 'base',
       }}
     >
-      <HStack>
+      <Flex sx={{ gap: 2 }}>
         <IAISwitch
           aria-label="Toggle ControlNet"
           isChecked={isEnabled}
           onChange={handleToggleIsEnabled}
         />
         <Box
-          w="full"
+          sx={{
-          opacity={isEnabled ? 1 : 0.5}
+            w: 'full',
-          pointerEvents={isEnabled ? 'auto' : 'none'}
+            minW: 0,
-          transitionProperty="common"
+            opacity: isEnabled ? 1 : 0.5,
-          transitionDuration="0.1s"
+            pointerEvents: isEnabled ? 'auto' : 'none',
+            transitionProperty: 'common',
+            transitionDuration: '0.1s',
+          }}
         >
           <ParamControlNetModel controlNetId={controlNetId} model={model} />
         </Box>
@@ -113,7 +116,7 @@ const ControlNet = (props: ControlNetProps) => {
           onClick={handleDelete}
           icon={<FaTrash />}
         />
-      </HStack>
+      </Flex>
       {isEnabled && (
         <>
           <Flex sx={{ gap: 4 }}>
@@ -122,21 +125,23 @@ const ControlNet = (props: ControlNetProps) => {
                 flexDir: 'column',
                 gap: 2,
                 w: 'full',
-                paddingInlineEnd: 2,
+                h: 32,
-                pb: shouldShowAdvanced ? 0 : 2,
+                paddingInlineStart: 2,
+                paddingInlineEnd: shouldShowAdvanced ? 2 : 0,
+                pb: 2,
+                justifyContent: 'space-between',
               }}
             >
               <Flex
                 sx={{
-                  w: 'max-content',
+                  justifyContent: 'space-between',
-                  columnGap: 4,
+                  w: 'full',
-                  p: 2,
                 }}
               >
                 <FormControl>
                   <HStack>
                     <Checkbox
-                      isChecked={isControlImageProcessed}
+                      isChecked={isPreprocessed}
                       onChange={handleToggleIsPreprocessed}
                     />
                     <FormLabel>Preprocessed</FormLabel>
@@ -152,49 +157,38 @@ const ControlNet = (props: ControlNetProps) => {
                   </HStack>
                 </FormControl>
               </Flex>
+              <ParamControlNetWeight
+                controlNetId={controlNetId}
+                weight={weight}
+                mini
+              />
+              <ParamControlNetBeginEnd
+                controlNetId={controlNetId}
+                beginStepPct={beginStepPct}
+                endStepPct={endStepPct}
+                mini
+              />
+            </Flex>
+            {!shouldShowAdvanced && (
               <Flex
                 sx={{
-                  w: 'full',
+                  alignItems: 'center',
-                  justifyContent: 'space-between',
+                  justifyContent: 'center',
-                  columnGap: 6,
+                  h: 32,
-                  p: 2,
+                  w: 32,
+                  aspectRatio: '1/1',
                 }}
               >
-                <Flex sx={{ flexDirection: 'column', w: 'full' }}>
+                <ControlNetImagePreview controlNet={props.controlNet} />
-                  <ParamControlNetWeight
-                    controlNetId={controlNetId}
-                    weight={weight}
-                    mini
-                  />
-                  <ParamControlNetBeginEnd
-                    controlNetId={controlNetId}
-                    beginStepPct={beginStepPct}
-                    endStepPct={endStepPct}
-                    mini
-                  />
-                </Flex>
-                {!shouldShowAdvanced && (
-                  <Flex
-                    sx={{
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      h: 24,
-                      w: 24,
-                      aspectRatio: '1/1',
-                    }}
-                  >
-                    <ControlNetImagePreview controlNet={props.controlNet} />
-                  </Flex>
-                )}
               </Flex>
-            </Flex>
+            )}
           </Flex>
           {shouldShowAdvanced && (
             <>
               <Box pt={2}>
                 <ControlNetImagePreview controlNet={props.controlNet} />
               </Box>
-              {!isControlImageProcessed && (
+              {!isPreprocessed && (
                 <>
                   <ParamControlNetProcessorSelect
                     controlNetId={controlNetId}

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx

@@ -30,6 +30,7 @@ const ParamIsControlNetModel = (props: ParamIsControlNetModelProps) => {
       items={CONTROLNET_MODELS}
       selectedItem={model}
       setSelectedItem={handleModelChanged}
+      withCheckIcon
     />
   );
 };

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx

@@ -39,6 +39,7 @@ const ParamControlNetProcessorSelect = (
       items={CONTROLNET_PROCESSOR_TYPES}
       selectedItem={processorNode.type ?? 'canny_image_processor'}
       setSelectedItem={handleProcessorTypeChanged}
+      withCheckIcon
     />
   );
 };

invokeai/frontend/web/src/features/controlNet/store/constants.ts

@@ -1,5 +1,6 @@
 import {
   ControlNetProcessorType,
+  RequiredCannyImageProcessorInvocation,
   RequiredControlNetProcessorNode,
 } from './types';
 
@@ -22,7 +23,7 @@ type ControlNetProcessorsDict = Record<
  *
  * TODO: Generate from the OpenAPI schema
  */
-export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
+export const CONTROLNET_PROCESSORS = {
   canny_image_processor: {
     type: 'canny_image_processor',
     label: 'Canny',