From 2c250a515ef5b2ebd1de83fbc0690007ec255110 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 29 Oct 2022 14:17:38 +1100
Subject: [PATCH] Misc fixes

---
 .../src/features/gallery/CurrentImageButtons.tsx   |  5 ++---
 frontend/src/features/gallery/ImageGallery.tsx     |  5 +++++
 .../Inpainting/InpaintingCanvasPlaceholder.tsx     |  4 ++--
 .../tabs/Inpainting/InpaintingControls.tsx         |  5 ++---
 .../features/tabs/Inpainting/InpaintingDisplay.tsx | 12 ++++++------
 .../features/tabs/Inpainting/inpaintingSlice.ts    | 14 +++++++-------
 6 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/frontend/src/features/gallery/CurrentImageButtons.tsx b/frontend/src/features/gallery/CurrentImageButtons.tsx
index 5439cce9d6..7a6dc4e3fa 100644
--- a/frontend/src/features/gallery/CurrentImageButtons.tsx
+++ b/frontend/src/features/gallery/CurrentImageButtons.tsx
@@ -23,14 +23,13 @@ import {
   MdHd,
   MdImage,
   MdInfo,
-  MdSettings,
 } from 'react-icons/md';
 import InvokePopover from './InvokePopover';
 import UpscaleOptions from '../options/AdvancedOptions/Upscale/UpscaleOptions';
 import FaceRestoreOptions from '../options/AdvancedOptions/FaceRestore/FaceRestoreOptions';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useToast } from '@chakra-ui/react';
-import { FaPaintBrush, FaSeedling } from 'react-icons/fa';
+import { FaCopy, FaPaintBrush, FaSeedling } from 'react-icons/fa';
 import { setImageToInpaint } from '../tabs/Inpainting/inpaintingSlice';
 import { hoverableImageSelector } from './gallerySliceSelectors';
 
@@ -279,7 +278,7 @@ const CurrentImageButtons = ({ image }: CurrentImageButtonsProps) => {
       />
 
       <IAIIconButton
-        icon={<MdSettings />}
+        icon={<FaCopy />}
         tooltip="Use All"
         aria-label="Use All"
         isDisabled={
diff --git a/frontend/src/features/gallery/ImageGallery.tsx b/frontend/src/features/gallery/ImageGallery.tsx
index 0594dbbdf6..4e6b466134 100644
--- a/frontend/src/features/gallery/ImageGallery.tsx
+++ b/frontend/src/features/gallery/ImageGallery.tsx
@@ -30,6 +30,7 @@ import IAIPopover from '../../common/components/IAIPopover';
 import IAISlider from '../../common/components/IAISlider';
 import { BiReset } from 'react-icons/bi';
 import IAICheckbox from '../../common/components/IAICheckbox';
+import { setNeedsCache } from '../tabs/Inpainting/inpaintingSlice';
 
 export default function ImageGallery() {
   const dispatch = useAppDispatch();
@@ -111,6 +112,7 @@ export default function ImageGallery() {
   const timeoutIdRef = useRef<number | null>(null);
 
   const handleSetShouldPinGallery = () => {
+    dispatch(setNeedsCache(true))
     dispatch(setShouldPinGallery(!shouldPinGallery));
     setGallerySize({
       ...gallerySize,
@@ -119,14 +121,17 @@ export default function ImageGallery() {
   };
 
   const handleToggleGallery = () => {
+    dispatch(setNeedsCache(true))
     shouldShowGallery ? handleCloseGallery() : handleOpenGallery();
   };
 
   const handleOpenGallery = () => {
+    dispatch(setNeedsCache(true))
     dispatch(setShouldShowGallery(true));
   };
 
   const handleCloseGallery = () => {
+    dispatch(setNeedsCache(true))
     dispatch(
       setGalleryScrollPosition(
         galleryContainerRef.current ? galleryContainerRef.current.scrollTop : 0
diff --git a/frontend/src/features/tabs/Inpainting/InpaintingCanvasPlaceholder.tsx b/frontend/src/features/tabs/Inpainting/InpaintingCanvasPlaceholder.tsx
index 4219e2abc2..923db0ed76 100644
--- a/frontend/src/features/tabs/Inpainting/InpaintingCanvasPlaceholder.tsx
+++ b/frontend/src/features/tabs/Inpainting/InpaintingCanvasPlaceholder.tsx
@@ -5,7 +5,7 @@ import { setStageScale } from './inpaintingSlice';
 
 const InpaintingCanvasPlaceholder = () => {
   const dispatch = useAppDispatch();
-  const { needsRepaint, imageToInpaint } = useAppSelector(
+  const { needsCache, imageToInpaint } = useAppSelector(
     (state: RootState) => state.inpainting
   );
   const ref = useRef<HTMLDivElement>(null);
@@ -22,7 +22,7 @@ const InpaintingCanvasPlaceholder = () => {
     );
 
     dispatch(setStageScale(scale));
-  }, [dispatch, imageToInpaint, needsRepaint]);
+  }, [dispatch, imageToInpaint, needsCache]);
 
   return (
     <div ref={ref} className="inpainting-canvas-area">
diff --git a/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx b/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx
index 81f1b6eb9b..a091104ece 100644
--- a/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx
+++ b/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx
@@ -24,10 +24,9 @@ import {
   undo,
   setShouldShowMask,
   setShouldInvertMask,
-  setNeedsRepaint,
+  setNeedsCache,
   toggleShouldLockBoundingBox,
   clearImageToInpaint,
-  setShouldShowBoundingBox,
 } from './inpaintingSlice';
 
 import { MdInvertColors, MdInvertColorsOff } from 'react-icons/md';
@@ -284,7 +283,7 @@ const InpaintingControls = () => {
 
   const handleDualDisplay = () => {
     dispatch(setShowDualDisplay(!showDualDisplay));
-    dispatch(setNeedsRepaint(true));
+    dispatch(setNeedsCache(true));
   };
 
   const handleClearImage = () => {
diff --git a/frontend/src/features/tabs/Inpainting/InpaintingDisplay.tsx b/frontend/src/features/tabs/Inpainting/InpaintingDisplay.tsx
index 752dc55641..cfc65e9168 100644
--- a/frontend/src/features/tabs/Inpainting/InpaintingDisplay.tsx
+++ b/frontend/src/features/tabs/Inpainting/InpaintingDisplay.tsx
@@ -9,15 +9,15 @@ import { OptionsState } from '../../options/optionsSlice';
 import InpaintingCanvas from './InpaintingCanvas';
 import InpaintingCanvasPlaceholder from './InpaintingCanvasPlaceholder';
 import InpaintingControls from './InpaintingControls';
-import { InpaintingState, setNeedsRepaint } from './inpaintingSlice';
+import { InpaintingState, setNeedsCache } from './inpaintingSlice';
 
 const inpaintingDisplaySelector = createSelector(
   [(state: RootState) => state.inpainting, (state: RootState) => state.options],
   (inpainting: InpaintingState, options: OptionsState) => {
-    const { needsRepaint, imageToInpaint } = inpainting;
+    const { needsCache, imageToInpaint } = inpainting;
     const { showDualDisplay } = options;
     return {
-      needsRepaint,
+      needsCache,
       showDualDisplay,
       imageToInpaint,
     };
@@ -31,13 +31,13 @@ const inpaintingDisplaySelector = createSelector(
 
 const InpaintingDisplay = () => {
   const dispatch = useAppDispatch();
-  const { showDualDisplay, needsRepaint, imageToInpaint } = useAppSelector(
+  const { showDualDisplay, needsCache, imageToInpaint } = useAppSelector(
     inpaintingDisplaySelector
   );
 
   useLayoutEffect(() => {
     const resizeCallback = _.debounce(
-      () => dispatch(setNeedsRepaint(true)),
+      () => dispatch(setNeedsCache(true)),
       250
     );
     window.addEventListener('resize', resizeCallback);
@@ -48,7 +48,7 @@ const InpaintingDisplay = () => {
     <div className="inpainting-main-area">
       <InpaintingControls />
       <div className="inpainting-canvas-area">
-        {needsRepaint ? <InpaintingCanvasPlaceholder /> : <InpaintingCanvas />}
+        {needsCache ? <InpaintingCanvasPlaceholder /> : <InpaintingCanvas />}
       </div>
     </div>
   ) : (
diff --git a/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts b/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts
index 4cb49a7704..fe0e12bbed 100644
--- a/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts
+++ b/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts
@@ -48,7 +48,7 @@ export interface InpaintingState {
   shouldShowBrush: boolean;
   shouldShowBrushPreview: boolean;
   imageToInpaint?: InvokeAI.Image;
-  needsRepaint: boolean;
+  needsCache: boolean;
   stageScale: number;
   isDrawing: boolean;
   shouldUseInpaintReplace: boolean;
@@ -75,7 +75,7 @@ const initialInpaintingState: InpaintingState = {
   shouldShowCheckboardTransparency: false,
   shouldShowBrush: true,
   shouldShowBrushPreview: false,
-  needsRepaint: false,
+  needsCache: false,
   isDrawing: false,
   stageScale: 1,
   shouldUseInpaintReplace: false,
@@ -201,7 +201,7 @@ export const inpaintingSlice = createSlice({
       };
 
       state.imageToInpaint = action.payload;
-      state.needsRepaint = true;
+      state.needsCache = true;
     },
     setCanvasDimensions: (state, action: PayloadAction<Dimensions>) => {
       state.canvasDimensions = action.payload;
@@ -291,12 +291,12 @@ export const inpaintingSlice = createSlice({
     setBoundingBoxPreviewFill: (state, action: PayloadAction<RgbaColor>) => {
       state.boundingBoxPreviewFill = action.payload;
     },
-    setNeedsRepaint: (state, action: PayloadAction<boolean>) => {
-      state.needsRepaint = action.payload;
+    setNeedsCache: (state, action: PayloadAction<boolean>) => {
+      state.needsCache = action.payload;
     },
     setStageScale: (state, action: PayloadAction<number>) => {
       state.stageScale = action.payload;
-      state.needsRepaint = false;
+      state.needsCache = false;
     },
     setShouldShowBoundingBoxFill: (state, action: PayloadAction<boolean>) => {
       state.shouldShowBoundingBoxFill = action.payload;
@@ -346,7 +346,7 @@ export const {
   setBoundingBoxDimensions,
   setBoundingBoxCoordinate,
   setBoundingBoxPreviewFill,
-  setNeedsRepaint,
+  setNeedsCache,
   setStageScale,
   toggleTool,
   setShouldShowBoundingBoxFill,