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,
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={

View File

@ -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

View File

@ -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">

View File

@ -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 = () => {

View File

@ -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>
) : (

View File

@ -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,