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 canvas rendering of control images

Browse Source
This commit is contained in:
psychedelicious 2024-05-02 08:56:13 +10:00 committed by Kent Keirsey
parent efb571401c
commit 8ceb94497e
2 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
View File

@ -305,6 +305,9 @@ export const controlLayersSlice = createSlice({
const { layerId, processorConfig } = action.payload; const { layerId, processorConfig } = action.payload;
const layer = selectCALayerOrThrow(state, layerId); const layer = selectCALayerOrThrow(state, layerId);
layer.controlAdapter.processorConfig = processorConfig; layer.controlAdapter.processorConfig = processorConfig;
if (!processorConfig) {
layer.controlAdapter.processedImage = null;
}
}, },
caLayerIsFilterEnabledChanged: (state, action: PayloadAction<{ layerId: string; isFilterEnabled: boolean }>) => { caLayerIsFilterEnabledChanged: (state, action: PayloadAction<{ layerId: string; isFilterEnabled: boolean }>) => {
const { layerId, isFilterEnabled } = action.payload; const { layerId, isFilterEnabled } = action.payload;

25
invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
View File

@ -431,29 +431,30 @@ const updateControlNetLayerImageSource = async (
konvaLayer: Konva.Layer, konvaLayer: Konva.Layer,
reduxLayer: ControlAdapterLayer reduxLayer: ControlAdapterLayer
) => { ) => {
if (reduxLayer.controlAdapter.image) { const image = reduxLayer.controlAdapter.processedImage ?? reduxLayer.controlAdapter.image;
const { imageName } = reduxLayer.controlAdapter.image; if (image) {
const { imageName } = image;
const req = getStore().dispatch(imagesApi.endpoints.getImageDTO.initiate(imageName)); const req = getStore().dispatch(imagesApi.endpoints.getImageDTO.initiate(imageName));
const imageDTO = await req.unwrap(); const imageDTO = await req.unwrap();
req.unsubscribe(); req.unsubscribe();
const image = new Image(); const imageEl = new Image();
const imageId = getCALayerImageId(reduxLayer.id, imageName); const imageId = getCALayerImageId(reduxLayer.id, imageName);
image.onload = () => { imageEl.onload = () => {
// Find the existing image or create a new one - must find using the name, bc the id may have just changed // Find the existing image or create a new one - must find using the name, bc the id may have just changed
const konvaImage = const konvaImage =
konvaLayer.findOne<Konva.Image>(`.${CA_LAYER_IMAGE_NAME}`) ?? createControlNetLayerImage(konvaLayer, image); konvaLayer.findOne<Konva.Image>(`.${CA_LAYER_IMAGE_NAME}`) ?? createControlNetLayerImage(konvaLayer, imageEl);
// Update the image's attributes // Update the image's attributes
konvaImage.setAttrs({ konvaImage.setAttrs({
id: imageId, id: imageId,
image, image: imageEl,
}); });
updateControlNetLayerImageAttrs(stage, konvaImage, reduxLayer); updateControlNetLayerImageAttrs(stage, konvaImage, reduxLayer);
// Must cache after this to apply the filters // Must cache after this to apply the filters
konvaImage.cache(); konvaImage.cache();
image.id = imageId; imageEl.id = imageId;
}; };
image.src = imageDTO.image_url; imageEl.src = imageDTO.image_url;
} else { } else {
konvaLayer.findOne(`.${CA_LAYER_IMAGE_NAME}`)?.destroy(); konvaLayer.findOne(`.${CA_LAYER_IMAGE_NAME}`)?.destroy();
} }
@ -499,12 +500,10 @@ const renderControlNetLayer = (stage: Konva.Stage, reduxLayer: ControlAdapterLay
const canvasImageSource = konvaImage?.image(); const canvasImageSource = konvaImage?.image();
let imageSourceNeedsUpdate = false; let imageSourceNeedsUpdate = false;
if (canvasImageSource instanceof HTMLImageElement) { if (canvasImageSource instanceof HTMLImageElement) {
if ( const image = reduxLayer.controlAdapter.processedImage ?? reduxLayer.controlAdapter.image;
reduxLayer.controlAdapter.image && if (image && canvasImageSource.id !== getCALayerImageId(reduxLayer.id, image.imageName)) {
canvasImageSource.id !== getCALayerImageId(reduxLayer.id, reduxLayer.controlAdapter.image.imageName)
) {
imageSourceNeedsUpdate = true; imageSourceNeedsUpdate = true;
} else if (!reduxLayer.controlAdapter.image) { } else if (!image) {
imageSourceNeedsUpdate = true; imageSourceNeedsUpdate = true;
} }
} else if (!canvasImageSource) { } else if (!canvasImageSource) {