Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix progress images in canvas

Browse Source
This commit is contained in:
psychedelicious 2023-05-29 18:40:01 +10:00 committed by Kent Keirsey
parent 6fe28980b0
commit 4522f3f4c9
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
View File

@ -1,18 +1,24 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl'; import { systemSelector } from 'features/system/store/systemSelectors';
import { GalleryState } from 'features/gallery/store/gallerySlice';
import { ImageConfig } from 'konva/lib/shapes/Image'; import { ImageConfig } from 'konva/lib/shapes/Image';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Image as KonvaImage } from 'react-konva'; import { Image as KonvaImage } from 'react-konva';
import { canvasSelector } from '../store/canvasSelectors';
const selector = createSelector( const selector = createSelector(
[(state: RootState) => state.gallery], [systemSelector, canvasSelector],
(gallery: GalleryState) => { (system, canvas) => {
return gallery.intermediateImage ? gallery.intermediateImage : null; const { progressImage, sessionId } = system;
const { sessionId: canvasSessionId, boundingBox } =
canvas.layerState.stagingArea;
return {
boundingBox,
progressImage: sessionId === canvasSessionId ? progressImage : undefined,
};
}, },
{ {
memoizeOptions: { memoizeOptions: {
@ -25,33 +31,34 @@ type Props = Omit<ImageConfig, 'image'>;
const IAICanvasIntermediateImage = (props: Props) => { const IAICanvasIntermediateImage = (props: Props) => {
const { ...rest } = props; const { ...rest } = props;
const intermediateImage = useAppSelector(selector); const { progressImage, boundingBox } = useAppSelector(selector);
const { getUrl } = useGetUrl();
const [loadedImageElement, setLoadedImageElement] = const [loadedImageElement, setLoadedImageElement] =
useState<HTMLImageElement | null>(null); useState<HTMLImageElement | null>(null);
useEffect(() => { useEffect(() => {
if (!intermediateImage) return; if (!progressImage) {
return;
}
const tempImage = new Image(); const tempImage = new Image();
tempImage.onload = () => { tempImage.onload = () => {
setLoadedImageElement(tempImage); setLoadedImageElement(tempImage);
}; };
tempImage.src = getUrl(intermediateImage.url);
}, [intermediateImage, getUrl]);
if (!intermediateImage?.boundingBox) return null; tempImage.src = progressImage.dataURL;
}, [progressImage]);
const { if (!(progressImage && boundingBox)) {
boundingBox: { x, y, width, height }, return null;
} = intermediateImage; }
return loadedImageElement ? ( return loadedImageElement ? (
<KonvaImage <KonvaImage
x={x} x={boundingBox.x}
y={y} y={boundingBox.y}
width={width} width={boundingBox.width}
height={height} height={boundingBox.height}
image={loadedImageElement} image={loadedImageElement}
listening={false} listening={false}
{...rest} {...rest}

2
invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx
View File

@ -62,7 +62,7 @@ const IAICanvasStagingArea = (props: Props) => {
<Group {...rest}> <Group {...rest}>
{shouldShowStagingImage && currentStagingAreaImage && ( {shouldShowStagingImage && currentStagingAreaImage && (
<IAICanvasImage <IAICanvasImage
url={getUrl(currentStagingAreaImage.image.image_url)} url={getUrl(currentStagingAreaImage.image.image_url) ?? ''}
x={x} x={x}
y={y} y={y}
/> />