mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
Misc fixes
This commit is contained in:
parent
4204740cb2
commit
2c250a515e
@ -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={
|
||||||
|
@ -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
|
||||||
|
@ -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">
|
||||||
|
@ -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 = () => {
|
||||||
|
@ -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>
|
||||||
) : (
|
) : (
|
||||||
|
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user