feat: Send Canvas Image & Mask To ControlNet

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

@@ -17,11 +17,13 @@ import { stateSelector } from 'app/store/store';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAISwitch from 'common/components/IAISwitch';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useToggle } from 'react-use';
 import { v4 as uuidv4 } from 'uuid';
 import ControlNetImagePreview from './ControlNetImagePreview';
 import ControlNetProcessorComponent from './ControlNetProcessorComponent';
 import ParamControlNetShouldAutoConfig from './ParamControlNetShouldAutoConfig';
+import ControlNetCanvasImageImports from './imports/ControlNetCanvasImageImports';
 import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
 import ParamControlNetControlMode from './parameters/ParamControlNetControlMode';
 import ParamControlNetProcessorSelect from './parameters/ParamControlNetProcessorSelect';
@@ -36,6 +38,8 @@ const ControlNet = (props: ControlNetProps) => {
   const { controlNetId } = controlNet;
   const dispatch = useAppDispatch();
 
+  const activeTabName = useAppSelector(activeTabNameSelector);
+
   const selector = createSelector(
     stateSelector,
     ({ controlNet }) => {
@@ -108,6 +112,9 @@ const ControlNet = (props: ControlNetProps) => {
         >
           <ParamControlNetModel controlNet={controlNet} />
         </Box>
+        {activeTabName === 'unifiedCanvas' && (
+          <ControlNetCanvasImageImports controlNet={controlNet} />
+        )}
         <IAIIconButton
           size="sm"
           tooltip="Duplicate"
@@ -167,6 +174,7 @@ const ControlNet = (props: ControlNetProps) => {
           />
         )}
       </Flex>
+
       <Flex sx={{ w: 'full', flexDirection: 'column', gap: 3 }}>
         <Flex sx={{ gap: 4, w: 'full', alignItems: 'center' }}>
           <Flex

invokeai/frontend/web/src/features/controlNet/components/imports/ControlNetCanvasImageImports.tsx

@@ -0,0 +1,54 @@
+import { Flex } from '@chakra-ui/react';
+import { useAppDispatch } from 'app/store/storeHooks';
+import IAIIconButton from 'common/components/IAIIconButton';
+import {
+  canvasImageToControlNet,
+  canvasMaskToControlNet,
+} from 'features/canvas/store/actions';
+import { ControlNetConfig } from 'features/controlNet/store/controlNetSlice';
+import { memo, useCallback } from 'react';
+import { FaImage, FaMask } from 'react-icons/fa';
+
+type ControlNetCanvasImageImportsProps = {
+  controlNet: ControlNetConfig;
+};
+
+const ControlNetCanvasImageImports = (
+  props: ControlNetCanvasImageImportsProps
+) => {
+  const { controlNet } = props;
+  const dispatch = useAppDispatch();
+
+  const handleImportImageFromCanvas = useCallback(() => {
+    dispatch(canvasImageToControlNet({ controlNet }));
+  }, [controlNet, dispatch]);
+
+  const handleImportMaskFromCanvas = useCallback(() => {
+    dispatch(canvasMaskToControlNet({ controlNet }));
+  }, [controlNet, dispatch]);
+
+  return (
+    <Flex
+      sx={{
+        gap: 2,
+      }}
+    >
+      <IAIIconButton
+        size="sm"
+        icon={<FaImage />}
+        tooltip="Import Image From Canvas"
+        aria-label="Import Image From Canvas"
+        onClick={handleImportImageFromCanvas}
+      />
+      <IAIIconButton
+        size="sm"
+        icon={<FaMask />}
+        tooltip="Import Mask From Canvas"
+        aria-label="Import Mask From Canvas"
+        onClick={handleImportMaskFromCanvas}
+      />
+    </Flex>
+  );
+};
+
+export default memo(ControlNetCanvasImageImports);