Misc fixes

This commit is contained in:
psychedelicious 2022-10-29 14:17:38 +11:00
parent 4204740cb2
commit 2c250a515e
6 changed files with 24 additions and 21 deletions

View File

@ -23,14 +23,13 @@ import {
MdHd, MdHd,
MdImage, MdImage,
MdInfo, MdInfo,
MdSettings,
} from 'react-icons/md'; } from 'react-icons/md';
import InvokePopover from './InvokePopover'; import InvokePopover from './InvokePopover';
import UpscaleOptions from '../options/AdvancedOptions/Upscale/UpscaleOptions'; import UpscaleOptions from '../options/AdvancedOptions/Upscale/UpscaleOptions';
import FaceRestoreOptions from '../options/AdvancedOptions/FaceRestore/FaceRestoreOptions'; import FaceRestoreOptions from '../options/AdvancedOptions/FaceRestore/FaceRestoreOptions';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useToast } from '@chakra-ui/react'; 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 { setImageToInpaint } from '../tabs/Inpainting/inpaintingSlice';
import { hoverableImageSelector } from './gallerySliceSelectors'; import { hoverableImageSelector } from './gallerySliceSelectors';
@ -279,7 +278,7 @@ const CurrentImageButtons = ({ image }: CurrentImageButtonsProps) => {
/> />
<IAIIconButton <IAIIconButton
icon={<MdSettings />} icon={<FaCopy />}
tooltip="Use All" tooltip="Use All"
aria-label="Use All" aria-label="Use All"
isDisabled={ isDisabled={

View File

@ -30,6 +30,7 @@ import IAIPopover from '../../common/components/IAIPopover';
import IAISlider from '../../common/components/IAISlider'; import IAISlider from '../../common/components/IAISlider';
import { BiReset } from 'react-icons/bi'; import { BiReset } from 'react-icons/bi';
import IAICheckbox from '../../common/components/IAICheckbox'; import IAICheckbox from '../../common/components/IAICheckbox';
import { setNeedsCache } from '../tabs/Inpainting/inpaintingSlice';
export default function ImageGallery() { export default function ImageGallery() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -111,6 +112,7 @@ export default function ImageGallery() {
const timeoutIdRef = useRef<number | null>(null); const timeoutIdRef = useRef<number | null>(null);
const handleSetShouldPinGallery = () => { const handleSetShouldPinGallery = () => {
dispatch(setNeedsCache(true))
dispatch(setShouldPinGallery(!shouldPinGallery)); dispatch(setShouldPinGallery(!shouldPinGallery));
setGallerySize({ setGallerySize({
...gallerySize, ...gallerySize,
@ -119,14 +121,17 @@ export default function ImageGallery() {
}; };
const handleToggleGallery = () => { const handleToggleGallery = () => {
dispatch(setNeedsCache(true))
shouldShowGallery ? handleCloseGallery() : handleOpenGallery(); shouldShowGallery ? handleCloseGallery() : handleOpenGallery();
}; };
const handleOpenGallery = () => { const handleOpenGallery = () => {
dispatch(setNeedsCache(true))
dispatch(setShouldShowGallery(true)); dispatch(setShouldShowGallery(true));
}; };
const handleCloseGallery = () => { const handleCloseGallery = () => {
dispatch(setNeedsCache(true))
dispatch( dispatch(
setGalleryScrollPosition( setGalleryScrollPosition(
galleryContainerRef.current ? galleryContainerRef.current.scrollTop : 0 galleryContainerRef.current ? galleryContainerRef.current.scrollTop : 0

View File

@ -5,7 +5,7 @@ import { setStageScale } from './inpaintingSlice';
const InpaintingCanvasPlaceholder = () => { const InpaintingCanvasPlaceholder = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { needsRepaint, imageToInpaint } = useAppSelector( const { needsCache, imageToInpaint } = useAppSelector(
(state: RootState) => state.inpainting (state: RootState) => state.inpainting
); );
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
@ -22,7 +22,7 @@ const InpaintingCanvasPlaceholder = () => {
); );
dispatch(setStageScale(scale)); dispatch(setStageScale(scale));
}, [dispatch, imageToInpaint, needsRepaint]); }, [dispatch, imageToInpaint, needsCache]);
return ( return (
<div ref={ref} className="inpainting-canvas-area"> <div ref={ref} className="inpainting-canvas-area">

View File

@ -24,10 +24,9 @@ import {
undo, undo,
setShouldShowMask, setShouldShowMask,
setShouldInvertMask, setShouldInvertMask,
setNeedsRepaint, setNeedsCache,
toggleShouldLockBoundingBox, toggleShouldLockBoundingBox,
clearImageToInpaint, clearImageToInpaint,
setShouldShowBoundingBox,
} from './inpaintingSlice'; } from './inpaintingSlice';
import { MdInvertColors, MdInvertColorsOff } from 'react-icons/md'; import { MdInvertColors, MdInvertColorsOff } from 'react-icons/md';
@ -284,7 +283,7 @@ const InpaintingControls = () => {
const handleDualDisplay = () => { const handleDualDisplay = () => {
dispatch(setShowDualDisplay(!showDualDisplay)); dispatch(setShowDualDisplay(!showDualDisplay));
dispatch(setNeedsRepaint(true)); dispatch(setNeedsCache(true));
}; };
const handleClearImage = () => { const handleClearImage = () => {

View File

@ -9,15 +9,15 @@ import { OptionsState } from '../../options/optionsSlice';
import InpaintingCanvas from './InpaintingCanvas'; import InpaintingCanvas from './InpaintingCanvas';
import InpaintingCanvasPlaceholder from './InpaintingCanvasPlaceholder'; import InpaintingCanvasPlaceholder from './InpaintingCanvasPlaceholder';
import InpaintingControls from './InpaintingControls'; import InpaintingControls from './InpaintingControls';
import { InpaintingState, setNeedsRepaint } from './inpaintingSlice'; import { InpaintingState, setNeedsCache } from './inpaintingSlice';
const inpaintingDisplaySelector = createSelector( const inpaintingDisplaySelector = createSelector(
[(state: RootState) => state.inpainting, (state: RootState) => state.options], [(state: RootState) => state.inpainting, (state: RootState) => state.options],
(inpainting: InpaintingState, options: OptionsState) => { (inpainting: InpaintingState, options: OptionsState) => {
const { needsRepaint, imageToInpaint } = inpainting; const { needsCache, imageToInpaint } = inpainting;
const { showDualDisplay } = options; const { showDualDisplay } = options;
return { return {
needsRepaint, needsCache,
showDualDisplay, showDualDisplay,
imageToInpaint, imageToInpaint,
}; };
@ -31,13 +31,13 @@ const inpaintingDisplaySelector = createSelector(
const InpaintingDisplay = () => { const InpaintingDisplay = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { showDualDisplay, needsRepaint, imageToInpaint } = useAppSelector( const { showDualDisplay, needsCache, imageToInpaint } = useAppSelector(
inpaintingDisplaySelector inpaintingDisplaySelector
); );
useLayoutEffect(() => { useLayoutEffect(() => {
const resizeCallback = _.debounce( const resizeCallback = _.debounce(
() => dispatch(setNeedsRepaint(true)), () => dispatch(setNeedsCache(true)),
250 250
); );
window.addEventListener('resize', resizeCallback); window.addEventListener('resize', resizeCallback);
@ -48,7 +48,7 @@ const InpaintingDisplay = () => {
<div className="inpainting-main-area"> <div className="inpainting-main-area">
<InpaintingControls /> <InpaintingControls />
<div className="inpainting-canvas-area"> <div className="inpainting-canvas-area">
{needsRepaint ? <InpaintingCanvasPlaceholder /> : <InpaintingCanvas />} {needsCache ? <InpaintingCanvasPlaceholder /> : <InpaintingCanvas />}
</div> </div>
</div> </div>
) : ( ) : (

View File

@ -48,7 +48,7 @@ export interface InpaintingState {
shouldShowBrush: boolean; shouldShowBrush: boolean;
shouldShowBrushPreview: boolean; shouldShowBrushPreview: boolean;
imageToInpaint?: InvokeAI.Image; imageToInpaint?: InvokeAI.Image;
needsRepaint: boolean; needsCache: boolean;
stageScale: number; stageScale: number;
isDrawing: boolean; isDrawing: boolean;
shouldUseInpaintReplace: boolean; shouldUseInpaintReplace: boolean;
@ -75,7 +75,7 @@ const initialInpaintingState: InpaintingState = {
shouldShowCheckboardTransparency: false, shouldShowCheckboardTransparency: false,
shouldShowBrush: true, shouldShowBrush: true,
shouldShowBrushPreview: false, shouldShowBrushPreview: false,
needsRepaint: false, needsCache: false,
isDrawing: false, isDrawing: false,
stageScale: 1, stageScale: 1,
shouldUseInpaintReplace: false, shouldUseInpaintReplace: false,
@ -201,7 +201,7 @@ export const inpaintingSlice = createSlice({
}; };
state.imageToInpaint = action.payload; state.imageToInpaint = action.payload;
state.needsRepaint = true; state.needsCache = true;
}, },
setCanvasDimensions: (state, action: PayloadAction<Dimensions>) => { setCanvasDimensions: (state, action: PayloadAction<Dimensions>) => {
state.canvasDimensions = action.payload; state.canvasDimensions = action.payload;
@ -291,12 +291,12 @@ export const inpaintingSlice = createSlice({
setBoundingBoxPreviewFill: (state, action: PayloadAction<RgbaColor>) => { setBoundingBoxPreviewFill: (state, action: PayloadAction<RgbaColor>) => {
state.boundingBoxPreviewFill = action.payload; state.boundingBoxPreviewFill = action.payload;
}, },
setNeedsRepaint: (state, action: PayloadAction<boolean>) => { setNeedsCache: (state, action: PayloadAction<boolean>) => {
state.needsRepaint = action.payload; state.needsCache = action.payload;
}, },
setStageScale: (state, action: PayloadAction<number>) => { setStageScale: (state, action: PayloadAction<number>) => {
state.stageScale = action.payload; state.stageScale = action.payload;
state.needsRepaint = false; state.needsCache = false;
}, },
setShouldShowBoundingBoxFill: (state, action: PayloadAction<boolean>) => { setShouldShowBoundingBoxFill: (state, action: PayloadAction<boolean>) => {
state.shouldShowBoundingBoxFill = action.payload; state.shouldShowBoundingBoxFill = action.payload;
@ -346,7 +346,7 @@ export const {
setBoundingBoxDimensions, setBoundingBoxDimensions,
setBoundingBoxCoordinate, setBoundingBoxCoordinate,
setBoundingBoxPreviewFill, setBoundingBoxPreviewFill,
setNeedsRepaint, setNeedsCache,
setStageScale, setStageScale,
toggleTool, toggleTool,
setShouldShowBoundingBoxFill, setShouldShowBoundingBoxFill,