Adds inpainting image reset button

frontend/src/features/gallery/ImageGallery.tsx

@@ -25,7 +25,7 @@ import { ButtonGroup, Spacer, useToast } from '@chakra-ui/react';
 import { CSSTransition } from 'react-transition-group';
 import { Direction } from 're-resizable/lib/resizer';
 import { imageGallerySelector } from './gallerySliceSelectors';
-import { FaWrench } from 'react-icons/fa';
+import { FaImage, FaUser, FaWrench } from 'react-icons/fa';
 import IAIPopover from '../../common/components/IAIPopover';
 import IAISlider from '../../common/components/IAISlider';
 import { BiReset } from 'react-icons/bi';
@@ -319,17 +319,38 @@ export default function ImageGallery() {
           }}
         >
           <div className="image-gallery-header">
-            {activeTabName !== 'inpainting' ? (
+            {/*{activeTabName !== 'inpainting' ? (
               <>
                 <h1>Your Invocations</h1>
                 <Spacer />
               </>
-            ) : null}
-
+            ) : null}*/}
+            <div>
+              <ButtonGroup
+                size="sm"
+                isAttached
+                variant="solid"
+                className="image-gallery-category-btn-group"
+              >
+                <IAIIconButton
+                  aria-label="Show Invocations"
+                  tooltip="Show Invocations"
+                  data-selected={currentCategory === 'result'}
+                  icon={<FaImage />}
+                  onClick={() => dispatch(setCurrentCategory('result'))}
+                />
+                <IAIIconButton
+                  aria-label="Show Uploads"
+                  tooltip="Show Uploads"
+                  data-selected={currentCategory === 'user'}
+                  icon={<FaUser />}
+                  onClick={() => dispatch(setCurrentCategory('user'))}
+                />
+              </ButtonGroup>
+            </div>
             <IAIPopover
               trigger="hover"
               hasArrow={activeTabName === 'inpainting' ? false : true}
-              // styleClass="image-gallery-settings-popover"
               triggerComponent={
                 <IAIIconButton
                   size={'sm'}
@@ -341,27 +362,6 @@ export default function ImageGallery() {
               }
             >
               <div className="image-gallery-settings-popover">
-                <div>
-                  <ButtonGroup
-                    size="sm"
-                    isAttached
-                    variant="solid"
-                    className="image-gallery-category-btn-group"
-                  >
-                    <Button
-                      data-selected={currentCategory === 'result'}
-                      onClick={() => dispatch(setCurrentCategory('result'))}
-                    >
-                      Invocations
-                    </Button>
-                    <Button
-                      data-selected={currentCategory === 'user'}
-                      onClick={() => dispatch(setCurrentCategory('user'))}
-                    >
-                      Uploads
-                    </Button>
-                  </ButtonGroup>
-                </div>
                 <div>
                   <IAISlider
                     value={galleryImageMinimumWidth}
@@ -469,3 +469,18 @@ export default function ImageGallery() {
     </CSSTransition>
   );
 }
+
+// <IAIIconButton
+//                   aria-label="Show Invocations"
+//                   tooltip="Show Invocations"
+//                   data-selected={currentCategory === 'result'}
+//                   icon={<FaImage />}
+//                   onClick={() => dispatch(setCurrentCategory('result'))}
+//                 />
+//                 <IAIIconButton
+//                   aria-label="Show Uploads"
+//                   tooltip="Show Uploads"
+//                   data-selected={currentCategory === 'user'}
+//                   icon={<FaUser />}
+//                   onClick={() => dispatch(setCurrentCategory('user'))}
+//                 />

frontend/src/features/tabs/Inpainting/InpaintingControls.tsx

@@ -6,6 +6,7 @@ import {
   FaPalette,
   FaPlus,
   FaRedo,
+  FaTrash,
   FaUndo,
 } from 'react-icons/fa';
 import { BiHide, BiShow } from 'react-icons/bi';
@@ -24,6 +25,7 @@ import {
   setShouldInvertMask,
   setNeedsRepaint,
   toggleShouldLockBoundingBox,
+  clearImageToInpaint,
 } from './inpaintingSlice';
 
 import { MdInvertColors, MdInvertColorsOff } from 'react-icons/md';
@@ -278,124 +280,132 @@ const InpaintingControls = () => {
     dispatch(setNeedsRepaint(true));
   };
 
+  const handleClearImage = () => {
+    dispatch(clearImageToInpaint());
+  };
+
   return (
     <div className="inpainting-settings">
-        <div className="inpainting-buttons-group">
-          <IAIPopover
-            trigger="hover"
-            onOpen={handleShowBrushPreview}
-            onClose={handleHideBrushPreview}
-            triggerComponent={
-              <IAIIconButton
-                aria-label="Brush (B)"
-                tooltip="Brush (B)"
-                icon={<FaPaintBrush />}
-                onClick={handleSelectBrushTool}
-                data-selected={tool === 'brush'}
-                isDisabled={!shouldShowMask}
-              />
-            }
-          >
-            <div className="inpainting-slider-numberinput">
-              <IAISlider
-                label="Brush Size"
-                value={brushSize}
-                onChange={handleChangeBrushSize}
-                min={1}
-                max={200}
-                width="100px"
-                focusThumbOnChange={false}
-                isDisabled={!shouldShowMask}
-              />
-              <IAINumberInput
-                value={brushSize}
-                onChange={handleChangeBrushSize}
-                width={'80px'}
-                min={1}
-                max={999}
-                isDisabled={!shouldShowMask}
-              />
-            </div>
-          </IAIPopover>
-          <IAIIconButton
-            aria-label="Eraser (E)"
-            tooltip="Eraser (E)"
-            icon={<FaEraser />}
-            onClick={handleSelectEraserTool}
-            data-selected={tool === 'eraser'}
-            isDisabled={!shouldShowMask}
-          />
-        </div>
-        <div className="inpainting-buttons-group">
-          <IAIPopover
-            trigger="hover"
-            triggerComponent={
-              <IAIIconButton
-                aria-label="Mask Color"
-                tooltip="Mask Color"
-                icon={<FaPalette />}
-                isDisabled={!shouldShowMask}
-                cursor={'pointer'}
-              />
-            }
-          >
-            <IAIColorPicker
-              color={maskColor}
-              onChange={handleChangeMaskColor}
+      <div className="inpainting-buttons-group">
+        <IAIPopover
+          trigger="hover"
+          onOpen={handleShowBrushPreview}
+          onClose={handleHideBrushPreview}
+          triggerComponent={
+            <IAIIconButton
+              aria-label="Brush (B)"
+              tooltip="Brush (B)"
+              icon={<FaPaintBrush />}
+              onClick={handleSelectBrushTool}
+              data-selected={tool === 'brush'}
+              isDisabled={!shouldShowMask}
             />
-          </IAIPopover>
-          <IAIIconButton
-            aria-label="Hide/Show Mask (H)"
-            tooltip="Hide/Show Mask (H)"
-            data-selected={!shouldShowMask}
-            icon={shouldShowMask ? <BiShow size={22} /> : <BiHide size={22} />}
-            onClick={handleToggleShouldShowMask}
-          />
-          <IAIIconButton
-            tooltip="Invert Mask Display (Shift+M)"
-            aria-label="Invert Mask Display (Shift+M)"
-            data-selected={shouldInvertMask}
-            icon={
-              shouldInvertMask ? (
-                <MdInvertColors size={22} />
-              ) : (
-                <MdInvertColorsOff size={22} />
-              )
-            }
-            onClick={handleToggleShouldInvertMask}
-            isDisabled={!shouldShowMask}
-          />
-        </div>
-        <div className="inpainting-buttons-group">
-          <IAIIconButton
-            aria-label="Undo"
-            tooltip="Undo"
-            icon={<FaUndo />}
-            onClick={handleUndo}
-            isDisabled={!canUndo || !shouldShowMask}
-          />
-          <IAIIconButton
-            aria-label="Redo"
-            tooltip="Redo"
-            icon={<FaRedo />}
-            onClick={handleRedo}
-            isDisabled={!canRedo || !shouldShowMask}
-          />
-          <IAIIconButton
-            aria-label="Clear Mask (Shift + C)"
-            tooltip="Clear Mask (Shift + C)"
-            icon={<FaPlus size={18} style={{ transform: 'rotate(45deg)' }} />}
-            onClick={handleClearMask}
-            isDisabled={isMaskEmpty || !shouldShowMask}
-          />
-          <IAIIconButton
-            aria-label="Split Layout (Shift+J)"
-            tooltip="Split Layout (Shift+J)"
-            icon={<VscSplitHorizontal />}
-            data-selected={showDualDisplay}
-            onClick={handleDualDisplay}
-          />
-        </div>
+          }
+        >
+          <div className="inpainting-slider-numberinput">
+            <IAISlider
+              label="Brush Size"
+              value={brushSize}
+              onChange={handleChangeBrushSize}
+              min={1}
+              max={200}
+              width="100px"
+              focusThumbOnChange={false}
+              isDisabled={!shouldShowMask}
+            />
+            <IAINumberInput
+              value={brushSize}
+              onChange={handleChangeBrushSize}
+              width={'80px'}
+              min={1}
+              max={999}
+              isDisabled={!shouldShowMask}
+            />
+          </div>
+        </IAIPopover>
+        <IAIIconButton
+          aria-label="Eraser (E)"
+          tooltip="Eraser (E)"
+          icon={<FaEraser />}
+          onClick={handleSelectEraserTool}
+          data-selected={tool === 'eraser'}
+          isDisabled={!shouldShowMask}
+        />
+      </div>
+      <div className="inpainting-buttons-group">
+        <IAIPopover
+          trigger="hover"
+          triggerComponent={
+            <IAIIconButton
+              aria-label="Mask Color"
+              tooltip="Mask Color"
+              icon={<FaPalette />}
+              isDisabled={!shouldShowMask}
+              cursor={'pointer'}
+            />
+          }
+        >
+          <IAIColorPicker color={maskColor} onChange={handleChangeMaskColor} />
+        </IAIPopover>
+        <IAIIconButton
+          aria-label="Hide/Show Mask (H)"
+          tooltip="Hide/Show Mask (H)"
+          data-selected={!shouldShowMask}
+          icon={shouldShowMask ? <BiShow size={22} /> : <BiHide size={22} />}
+          onClick={handleToggleShouldShowMask}
+        />
+        <IAIIconButton
+          tooltip="Invert Mask Display (Shift+M)"
+          aria-label="Invert Mask Display (Shift+M)"
+          data-selected={shouldInvertMask}
+          icon={
+            shouldInvertMask ? (
+              <MdInvertColors size={22} />
+            ) : (
+              <MdInvertColorsOff size={22} />
+            )
+          }
+          onClick={handleToggleShouldInvertMask}
+          isDisabled={!shouldShowMask}
+        />
+      </div>
+      <div className="inpainting-buttons-group">
+        <IAIIconButton
+          aria-label="Undo"
+          tooltip="Undo"
+          icon={<FaUndo />}
+          onClick={handleUndo}
+          isDisabled={!canUndo || !shouldShowMask}
+        />
+        <IAIIconButton
+          aria-label="Redo"
+          tooltip="Redo"
+          icon={<FaRedo />}
+          onClick={handleRedo}
+          isDisabled={!canRedo || !shouldShowMask}
+        />
+        <IAIIconButton
+          aria-label="Clear Mask Canvas (Shift + C)"
+          tooltip="Clear Mask Canvas (Shift + C)"
+          icon={<FaPlus size={18} style={{ transform: 'rotate(45deg)' }} />}
+          onClick={handleClearMask}
+          isDisabled={isMaskEmpty || !shouldShowMask}
+        />
+        <IAIIconButton
+          aria-label="Clear Image"
+          tooltip="Clear Image"
+          icon={<FaTrash size={18} />}
+          onClick={handleClearImage}
+          // isDisabled={}
+        />
+        <IAIIconButton
+          aria-label="Split Layout (Shift+J)"
+          tooltip="Split Layout (Shift+J)"
+          icon={<VscSplitHorizontal />}
+          data-selected={showDualDisplay}
+          onClick={handleDualDisplay}
+        />
+      </div>
     </div>
   );
 };

frontend/src/features/tabs/Inpainting/inpaintingSlice.ts

@@ -337,6 +337,7 @@ export const {
   setShouldShowBrushPreview,
   setMaskColor,
   clearMask,
+  clearImageToInpaint,
   undo,
   redo,
   setCursorPosition,

frontend/src/styles/Mixins/_Variables.scss

@@ -10,8 +10,7 @@ $app-content-height: calc(100vh - $app-content-height-cutoff);
 $app-gallery-height: calc(100vh - ($app-content-height-cutoff + 5.5rem));
 $app-gallery-popover-height: calc(100vh - ($app-content-height-cutoff + 6rem));
 $app-metadata-height: calc(100vh - ($app-content-height-cutoff + 4.4rem));
-// $app-text-to-image-height: calc(100vh - 9.4375rem);
-$app-text-to-image-height: calc(100vh - 9.4375rem - 1.925rem - 1.35rem);
+$app-text-to-image-height: calc(100vh - 9.4375rem - 1.925rem - 1.15rem); // do not touch ffs
 
 // option bar
 $options-bar-max-width: 22.5rem;