feat(ui): use node manager for addRegions

This commit is contained in:
psychedelicious 2024-06-20 11:24:04 +10:00
parent 657009c254
commit f41539532f

View File

@ -1,7 +1,6 @@
import { getStore } from 'app/store/nanostores/store'; import { getStore } from 'app/store/nanostores/store';
import { deepClone } from 'common/util/deepClone'; import { deepClone } from 'common/util/deepClone';
import openBase64ImageInTab from 'common/util/openBase64ImageInTab'; import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
import { RG_LAYER_NAME } from 'features/controlLayers/konva/naming';
import { KonvaNodeManager } from 'features/controlLayers/konva/nodeManager'; import { KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import { renderRegions } from 'features/controlLayers/konva/renderers/regions'; import { renderRegions } from 'features/controlLayers/konva/renderers/regions';
import { blobToDataURL } from 'features/controlLayers/konva/util'; import { blobToDataURL } from 'features/controlLayers/konva/util';
@ -261,22 +260,23 @@ export const getRGMaskBlobs = async (
): Promise<Record<string, Blob>> => { ): Promise<Record<string, Blob>> => {
const container = document.createElement('div'); const container = document.createElement('div');
const stage = new Konva.Stage({ container, ...documentSize }); const stage = new Konva.Stage({ container, ...documentSize });
renderRegions(new KonvaNodeManager(stage), regions, 1, 'brush', null); const manager = new KonvaNodeManager(stage);
const konvaLayers = stage.find<Konva.Layer>(`.${RG_LAYER_NAME}`); renderRegions(manager, regions, 1, 'brush', null);
const adapters = manager.getAll();
const blobs: Record<string, Blob> = {}; const blobs: Record<string, Blob> = {};
// First remove all layers // First remove all layers
for (const layer of konvaLayers) { for (const adapter of adapters) {
layer.remove(); adapter.konvaLayer.remove();
} }
// Next render each layer to a blob // Next render each layer to a blob
for (const layer of konvaLayers) { for (const adapter of adapters) {
const rg = regions.find((l) => l.id === layer.id()); const region = regions.find((l) => l.id === adapter.id);
if (!rg) { if (!region) {
continue; continue;
} }
stage.add(layer); stage.add(adapter.konvaLayer);
const blob = await new Promise<Blob>((resolve) => { const blob = await new Promise<Blob>((resolve) => {
stage.toBlob({ stage.toBlob({
callback: (blob) => { callback: (blob) => {
@ -292,12 +292,12 @@ export const getRGMaskBlobs = async (
openBase64ImageInTab([ openBase64ImageInTab([
{ {
base64, base64,
caption: `${rg.id}: ${rg.positivePrompt} / ${rg.negativePrompt}`, caption: `${region.id}: ${region.positivePrompt} / ${region.negativePrompt}`,
}, },
]); ]);
} }
layer.remove(); adapter.konvaLayer.remove();
blobs[layer.id()] = blob; blobs[adapter.id] = blob;
} }
return blobs; return blobs;