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

feat(ui): rename konva node manager

Browse Source
This commit is contained in:
psychedelicious 2024-06-19 21:19:20 +10:00
parent dab42e258c
commit 382bc6d978
8 changed files with 319 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
invokeai/frontend/web/src/features/controlLayers/konva/entityToKonvaMap.ts
View File

@ -1,112 +0,0 @@
import type { BrushLine, EraserLine, ImageObject, RectShape } from 'features/controlLayers/store/types';
import type Konva from 'konva';
export type BrushLineEntry = {
id: string;
type: BrushLine['type'];
konvaLine: Konva.Line;
konvaLineGroup: Konva.Group;
};
export type EraserLineEntry = {
id: string;
type: EraserLine['type'];
konvaLine: Konva.Line;
konvaLineGroup: Konva.Group;
};
export type RectShapeEntry = {
id: string;
type: RectShape['type'];
konvaRect: Konva.Rect;
};
export type ImageEntry = {
id: string;
type: ImageObject['type'];
konvaImageGroup: Konva.Group;
konvaPlaceholderGroup: Konva.Group;
konvaPlaceholderText: Konva.Text;
konvaImage: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately
isLoading: boolean;
isError: boolean;
};
type Entry = BrushLineEntry | EraserLineEntry | RectShapeEntry | ImageEntry;
export class EntityToKonvaMap {
stage: Konva.Stage;
mappings: Record<string, EntityToKonvaMapping>;
constructor(stage: Konva.Stage) {
this.stage = stage;
this.mappings = {};
}
addMapping(id: string, konvaLayer: Konva.Layer, konvaObjectGroup: Konva.Group): EntityToKonvaMapping {
const mapping = new EntityToKonvaMapping(id, konvaLayer, konvaObjectGroup, this);
this.mappings[id] = mapping;
return mapping;
}
getMapping(id: string): EntityToKonvaMapping | undefined {
return this.mappings[id];
}
getMappings(): EntityToKonvaMapping[] {
return Object.values(this.mappings);
}
destroyMapping(id: string): void {
const mapping = this.getMapping(id);
if (!mapping) {
return;
}
mapping.konvaObjectGroup.destroy();
delete this.mappings[id];
}
}
export class EntityToKonvaMapping {
id: string;
konvaLayer: Konva.Layer;
konvaObjectGroup: Konva.Group;
konvaNodeEntries: Record<string, Entry>;
map: EntityToKonvaMap;
constructor(id: string, konvaLayer: Konva.Layer, konvaObjectGroup: Konva.Group, map: EntityToKonvaMap) {
this.id = id;
this.konvaLayer = konvaLayer;
this.konvaObjectGroup = konvaObjectGroup;
this.konvaNodeEntries = {};
this.map = map;
}
addEntry<T extends Entry>(entry: T): T {
this.konvaNodeEntries[entry.id] = entry;
return entry;
}
getEntry<T extends Entry>(id: string): T | undefined {
return this.konvaNodeEntries[id] as T | undefined;
}
getEntries<T extends Entry>(): T[] {
return Object.values(this.konvaNodeEntries) as T[];
}
destroyEntry(id: string): void {
const entry = this.getEntry(id);
if (!entry) {
return;
}
if (entry.type === 'brush_line' || entry.type === 'eraser_line') {
entry.konvaLineGroup.destroy();
} else if (entry.type === 'rect_shape') {
entry.konvaRect.destroy();
} else if (entry.type === 'image') {
entry.konvaImageGroup.destroy();
}
delete this.konvaNodeEntries[id];
}
}

126
invokeai/frontend/web/src/features/controlLayers/konva/nodeManager.ts Normal file
View File

@ -0,0 +1,126 @@
import type { BrushLine, EraserLine, ImageObject, RectShape } from 'features/controlLayers/store/types';
import type Konva from 'konva';
export type BrushLineObjectRecord = {
id: string;
type: BrushLine['type'];
konvaLine: Konva.Line;
konvaLineGroup: Konva.Group;
};
export type EraserLineObjectRecord = {
id: string;
type: EraserLine['type'];
konvaLine: Konva.Line;
konvaLineGroup: Konva.Group;
};
export type RectShapeObjectRecord = {
id: string;
type: RectShape['type'];
konvaRect: Konva.Rect;
};
export type ImageObjectRecord = {
id: string;
type: ImageObject['type'];
konvaImageGroup: Konva.Group;
konvaPlaceholderGroup: Konva.Group;
konvaPlaceholderRect: Konva.Rect;
konvaPlaceholderText: Konva.Text;
konvaImage: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately
isLoading: boolean;
isError: boolean;
};
type ObjectRecord = BrushLineObjectRecord | EraserLineObjectRecord | RectShapeObjectRecord | ImageObjectRecord;
export class KonvaNodeManager {
stage: Konva.Stage;
adapters: Map<string, EntityKonvaAdapter>;
constructor(stage: Konva.Stage) {
this.stage = stage;
this.adapters = new Map();
}
add(id: string, konvaLayer: Konva.Layer, konvaObjectGroup: Konva.Group): EntityKonvaAdapter {
const adapter = new EntityKonvaAdapter(id, konvaLayer, konvaObjectGroup, this);
this.adapters.set(id, adapter);
return adapter;
}
get(id: string): EntityKonvaAdapter | undefined {
return this.adapters.get(id);
}
getAll(): EntityKonvaAdapter[] {
return Array.from(this.adapters.values());
}
destroy(id: string): boolean {
const adapter = this.get(id);
if (!adapter) {
return false;
}
adapter.konvaLayer.destroy();
return this.adapters.delete(id);
}
}
export class EntityKonvaAdapter {
id: string;
konvaLayer: Konva.Layer; // Every entity is associated with a konva layer
konvaObjectGroup: Konva.Group; // Every entity's nodes are part of an object group
objectRecords: Map<string, ObjectRecord>;
manager: KonvaNodeManager;
constructor(id: string, konvaLayer: Konva.Layer, konvaObjectGroup: Konva.Group, manager: KonvaNodeManager) {
this.id = id;
this.konvaLayer = konvaLayer;
this.konvaObjectGroup = konvaObjectGroup;
this.objectRecords = new Map();
this.manager = manager;
this.konvaLayer.add(this.konvaObjectGroup);
this.manager.stage.add(this.konvaLayer);
}
add<T extends ObjectRecord>(objectRecord: T): T {
this.objectRecords.set(objectRecord.id, objectRecord);
if (objectRecord.type === 'brush_line' || objectRecord.type === 'eraser_line') {
objectRecord.konvaLineGroup.add(objectRecord.konvaLine);
this.konvaObjectGroup.add(objectRecord.konvaLineGroup);
} else if (objectRecord.type === 'rect_shape') {
this.konvaObjectGroup.add(objectRecord.konvaRect);
} else if (objectRecord.type === 'image') {
objectRecord.konvaPlaceholderGroup.add(objectRecord.konvaPlaceholderRect);
objectRecord.konvaPlaceholderGroup.add(objectRecord.konvaPlaceholderText);
objectRecord.konvaImageGroup.add(objectRecord.konvaPlaceholderGroup);
this.konvaObjectGroup.add(objectRecord.konvaImageGroup);
}
return objectRecord;
}
get<T extends ObjectRecord>(id: string): T | undefined {
return this.objectRecords.get(id) as T | undefined;
}
getAll<T extends ObjectRecord>(): T[] {
return Array.from(this.objectRecords.values()) as T[];
}
destroy(id: string): boolean {
const record = this.get(id);
if (!record) {
return false;
}
if (record.type === 'brush_line' || record.type === 'eraser_line') {
record.konvaLineGroup.destroy();
} else if (record.type === 'rect_shape') {
record.konvaRect.destroy();
} else if (record.type === 'image') {
record.konvaImageGroup.destroy();
}
return this.objectRecords.delete(id);
}
}

14
invokeai/frontend/web/src/features/controlLayers/konva/renderers/arrange.ts
View File

@ -1,27 +1,27 @@
import type { EntityToKonvaMap } from 'features/controlLayers/konva/entityToKonvaMap';
import { BACKGROUND_LAYER_ID, PREVIEW_LAYER_ID } from 'features/controlLayers/konva/naming'; import { BACKGROUND_LAYER_ID, PREVIEW_LAYER_ID } from 'features/controlLayers/konva/naming';
import type { KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import type { ControlAdapterEntity, LayerEntity, RegionEntity } from 'features/controlLayers/store/types'; import type { ControlAdapterEntity, LayerEntity, RegionEntity } from 'features/controlLayers/store/types';
import type Konva from 'konva'; import type Konva from 'konva';
export const arrangeEntities = ( export const arrangeEntities = (
stage: Konva.Stage, stage: Konva.Stage,
layerMap: EntityToKonvaMap, layerManager: KonvaNodeManager,
layers: LayerEntity[], layers: LayerEntity[],
controlAdapterMap: EntityToKonvaMap, controlAdapterManager: KonvaNodeManager,
controlAdapters: ControlAdapterEntity[], controlAdapters: ControlAdapterEntity[],
regionMap: EntityToKonvaMap, regionManager: KonvaNodeManager,
regions: RegionEntity[] regions: RegionEntity[]
): void => { ): void => {
let zIndex = 0; let zIndex = 0;
stage.findOne<Konva.Layer>(`#${BACKGROUND_LAYER_ID}`)?.zIndex(++zIndex); stage.findOne<Konva.Layer>(`#${BACKGROUND_LAYER_ID}`)?.zIndex(++zIndex);
for (const layer of layers) { for (const layer of layers) {
layerMap.getMapping(layer.id)?.konvaLayer.zIndex(++zIndex); layerManager.get(layer.id)?.konvaLayer.zIndex(++zIndex);
} }
for (const ca of controlAdapters) { for (const ca of controlAdapters) {
controlAdapterMap.getMapping(ca.id)?.konvaLayer.zIndex(++zIndex); controlAdapterManager.get(ca.id)?.konvaLayer.zIndex(++zIndex);
} }
for (const rg of regions) { for (const rg of regions) {
regionMap.getMapping(rg.id)?.konvaLayer.zIndex(++zIndex); regionManager.get(rg.id)?.konvaLayer.zIndex(++zIndex);
} }
stage.findOne<Konva.Layer>(`#${PREVIEW_LAYER_ID}`)?.zIndex(++zIndex); stage.findOne<Konva.Layer>(`#${PREVIEW_LAYER_ID}`)?.zIndex(++zIndex);
}; };

42
invokeai/frontend/web/src/features/controlLayers/konva/renderers/controlAdapters.ts
View File

@ -1,6 +1,6 @@
import type { EntityToKonvaMap, EntityToKonvaMapping, ImageEntry } from 'features/controlLayers/konva/entityToKonvaMap';
import { LightnessToAlphaFilter } from 'features/controlLayers/konva/filters'; import { LightnessToAlphaFilter } from 'features/controlLayers/konva/filters';
import { CA_LAYER_IMAGE_NAME, CA_LAYER_NAME, CA_LAYER_OBJECT_GROUP_NAME } from 'features/controlLayers/konva/naming'; import { CA_LAYER_IMAGE_NAME, CA_LAYER_NAME, CA_LAYER_OBJECT_GROUP_NAME } from 'features/controlLayers/konva/naming';
import type { EntityKonvaAdapter, ImageObjectRecord, KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import { import {
createImageObjectGroup, createImageObjectGroup,
createObjectGroup, createObjectGroup,
@ -21,10 +21,10 @@ import { assert } from 'tsafe';
* @param stage The konva stage * @param stage The konva stage
* @param entity The control adapter layer state * @param entity The control adapter layer state
*/ */
const getControlAdapter = (map: EntityToKonvaMap, entity: ControlAdapterEntity): EntityToKonvaMapping => { const getControlAdapter = (manager: KonvaNodeManager, entity: ControlAdapterEntity): EntityKonvaAdapter => {
let mapping = map.getMapping(entity.id); const adapter = manager.get(entity.id);
if (mapping) { if (adapter) {
return mapping; return adapter;
} }
const konvaLayer = new Konva.Layer({ const konvaLayer = new Konva.Layer({
id: entity.id, id: entity.id,
@ -33,9 +33,9 @@ const getControlAdapter = (map: EntityToKonvaMap, entity: ControlAdapterEntity):
listening: false, listening: false,
}); });
const konvaObjectGroup = createObjectGroup(konvaLayer, CA_LAYER_OBJECT_GROUP_NAME); const konvaObjectGroup = createObjectGroup(konvaLayer, CA_LAYER_OBJECT_GROUP_NAME);
map.stage.add(konvaLayer); konvaLayer.add(konvaObjectGroup);
mapping = map.addMapping(entity.id, konvaLayer, konvaObjectGroup); manager.stage.add(konvaLayer);
return mapping; return manager.add(entity.id, konvaLayer, konvaObjectGroup);
}; };
/** /**
@ -45,26 +45,26 @@ const getControlAdapter = (map: EntityToKonvaMap, entity: ControlAdapterEntity):
* @param entity The control adapter layer state * @param entity The control adapter layer state
* @param getImageDTO A function to retrieve an image DTO from the server, used to update the image source * @param getImageDTO A function to retrieve an image DTO from the server, used to update the image source
*/ */
export const renderControlAdapter = async (map: EntityToKonvaMap, entity: ControlAdapterEntity): Promise<void> => { export const renderControlAdapter = async (manager: KonvaNodeManager, entity: ControlAdapterEntity): Promise<void> => {
const mapping = getControlAdapter(map, entity); const adapter = getControlAdapter(manager, entity);
const imageObject = entity.processedImageObject ?? entity.imageObject; const imageObject = entity.processedImageObject ?? entity.imageObject;
if (!imageObject) { if (!imageObject) {
// The user has deleted/reset the image // The user has deleted/reset the image
mapping.getEntries().forEach((entry) => { adapter.getAll().forEach((entry) => {
mapping.destroyEntry(entry.id); adapter.destroy(entry.id);
}); });
return; return;
} }
let entry = mapping.getEntries<ImageEntry>()[0]; let entry = adapter.getAll<ImageObjectRecord>()[0];
const opacity = entity.opacity; const opacity = entity.opacity;
const visible = entity.isEnabled; const visible = entity.isEnabled;
const filters = entity.filter === 'LightnessToAlphaFilter' ? [LightnessToAlphaFilter] : []; const filters = entity.filter === 'LightnessToAlphaFilter' ? [LightnessToAlphaFilter] : [];
if (!entry) { if (!entry) {
entry = await createImageObjectGroup({ entry = await createImageObjectGroup({
mapping, adapter: adapter,
obj: imageObject, obj: imageObject,
name: CA_LAYER_IMAGE_NAME, name: CA_LAYER_IMAGE_NAME,
onLoad: (konvaImage) => { onLoad: (konvaImage) => {
@ -83,7 +83,7 @@ export const renderControlAdapter = async (map: EntityToKonvaMap, entity: Contro
assert(imageSource instanceof HTMLImageElement, `Image source must be an HTMLImageElement`); assert(imageSource instanceof HTMLImageElement, `Image source must be an HTMLImageElement`);
if (imageSource.id !== imageObject.image.name) { if (imageSource.id !== imageObject.image.name) {
updateImageSource({ updateImageSource({
entry, objectRecord: entry,
image: imageObject.image, image: imageObject.image,
onLoad: (konvaImage) => { onLoad: (konvaImage) => {
konvaImage.filters(filters); konvaImage.filters(filters);
@ -103,14 +103,14 @@ export const renderControlAdapter = async (map: EntityToKonvaMap, entity: Contro
} }
}; };
export const renderControlAdapters = (map: EntityToKonvaMap, entities: ControlAdapterEntity[]): void => { export const renderControlAdapters = (manager: KonvaNodeManager, entities: ControlAdapterEntity[]): void => {
// Destroy nonexistent layers // Destroy nonexistent layers
for (const mapping of map.getMappings()) { for (const adapters of manager.getAll()) {
if (!entities.find((ca) => ca.id === mapping.id)) { if (!entities.find((ca) => ca.id === adapters.id)) {
map.destroyMapping(mapping.id); manager.destroy(adapters.id);
} }
} }
for (const ca of entities) { for (const entity of entities) {
renderControlAdapter(map, ca); renderControlAdapter(manager, entity);
} }
}; };

62
invokeai/frontend/web/src/features/controlLayers/konva/renderers/layers.ts
View File

@ -1,4 +1,3 @@
import type { EntityToKonvaMap, EntityToKonvaMapping } from 'features/controlLayers/konva/entityToKonvaMap';
import { import {
RASTER_LAYER_BRUSH_LINE_NAME, RASTER_LAYER_BRUSH_LINE_NAME,
RASTER_LAYER_ERASER_LINE_NAME, RASTER_LAYER_ERASER_LINE_NAME,
@ -7,6 +6,7 @@ import {
RASTER_LAYER_OBJECT_GROUP_NAME, RASTER_LAYER_OBJECT_GROUP_NAME,
RASTER_LAYER_RECT_SHAPE_NAME, RASTER_LAYER_RECT_SHAPE_NAME,
} from 'features/controlLayers/konva/naming'; } from 'features/controlLayers/konva/naming';
import type { EntityKonvaAdapter, KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import { import {
createImageObjectGroup, createImageObjectGroup,
createObjectGroup, createObjectGroup,
@ -29,13 +29,13 @@ import Konva from 'konva';
* @param onPosChanged Callback for when the layer's position changes * @param onPosChanged Callback for when the layer's position changes
*/ */
const getLayer = ( const getLayer = (
map: EntityToKonvaMap, map: KonvaNodeManager,
entity: LayerEntity, entity: LayerEntity,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
): EntityToKonvaMapping => { ): EntityKonvaAdapter => {
let mapping = map.getMapping(entity.id); const adapter = map.get(entity.id);
if (mapping) { if (adapter) {
return mapping; return adapter;
} }
// This layer hasn't been added to the konva state yet // This layer hasn't been added to the konva state yet
const konvaLayer = new Konva.Layer({ const konvaLayer = new Konva.Layer({
@ -54,9 +54,7 @@ const getLayer = (
} }
const konvaObjectGroup = createObjectGroup(konvaLayer, RASTER_LAYER_OBJECT_GROUP_NAME); const konvaObjectGroup = createObjectGroup(konvaLayer, RASTER_LAYER_OBJECT_GROUP_NAME);
map.stage.add(konvaLayer); return map.add(entity.id, konvaLayer, konvaObjectGroup);
mapping = map.addMapping(entity.id, konvaLayer, konvaObjectGroup);
return mapping;
}; };
/** /**
@ -67,15 +65,15 @@ const getLayer = (
* @param onPosChanged Callback for when the layer's position changes * @param onPosChanged Callback for when the layer's position changes
*/ */
export const renderLayer = async ( export const renderLayer = async (
map: EntityToKonvaMap, manager: KonvaNodeManager,
entity: LayerEntity, entity: LayerEntity,
tool: Tool, tool: Tool,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
) => { ) => {
const mapping = getLayer(map, entity, onPosChanged); const adapter = getLayer(manager, entity, onPosChanged);
// Update the layer's position and listening state // Update the layer's position and listening state
mapping.konvaLayer.setAttrs({ adapter.konvaLayer.setAttrs({
listening: tool === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events listening: tool === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events
x: Math.floor(entity.x), x: Math.floor(entity.x),
y: Math.floor(entity.y), y: Math.floor(entity.y),
@ -83,35 +81,35 @@ export const renderLayer = async (
const objectIds = entity.objects.map(mapId); const objectIds = entity.objects.map(mapId);
// Destroy any objects that are no longer in state // Destroy any objects that are no longer in state
for (const entry of mapping.getEntries()) { for (const objectRecord of adapter.getAll()) {
if (!objectIds.includes(entry.id)) { if (!objectIds.includes(objectRecord.id)) {
mapping.destroyEntry(entry.id); adapter.destroy(objectRecord.id);
} }
} }
for (const obj of entity.objects) { for (const obj of entity.objects) {
if (obj.type === 'brush_line') { if (obj.type === 'brush_line') {
const entry = getBrushLine(mapping, obj, RASTER_LAYER_BRUSH_LINE_NAME); const objectRecord = getBrushLine(adapter, obj, RASTER_LAYER_BRUSH_LINE_NAME);
// Only update the points if they have changed. // Only update the points if they have changed.
if (entry.konvaLine.points().length !== obj.points.length) { if (objectRecord.konvaLine.points().length !== obj.points.length) {
entry.konvaLine.points(obj.points); objectRecord.konvaLine.points(obj.points);
} }
} else if (obj.type === 'eraser_line') { } else if (obj.type === 'eraser_line') {
const entry = getEraserLine(mapping, obj, RASTER_LAYER_ERASER_LINE_NAME); const objectRecord = getEraserLine(adapter, obj, RASTER_LAYER_ERASER_LINE_NAME);
// Only update the points if they have changed. // Only update the points if they have changed.
if (entry.konvaLine.points().length !== obj.points.length) { if (objectRecord.konvaLine.points().length !== obj.points.length) {
entry.konvaLine.points(obj.points); objectRecord.konvaLine.points(obj.points);
} }
} else if (obj.type === 'rect_shape') { } else if (obj.type === 'rect_shape') {
getRectShape(mapping, obj, RASTER_LAYER_RECT_SHAPE_NAME); getRectShape(adapter, obj, RASTER_LAYER_RECT_SHAPE_NAME);
} else if (obj.type === 'image') { } else if (obj.type === 'image') {
createImageObjectGroup({ mapping, obj, name: RASTER_LAYER_IMAGE_NAME }); createImageObjectGroup({ adapter, obj, name: RASTER_LAYER_IMAGE_NAME });
} }
} }
// Only update layer visibility if it has changed. // Only update layer visibility if it has changed.
if (mapping.konvaLayer.visible() !== entity.isEnabled) { if (adapter.konvaLayer.visible() !== entity.isEnabled) {
mapping.konvaLayer.visible(entity.isEnabled); adapter.konvaLayer.visible(entity.isEnabled);
} }
// const bboxRect = konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(layerState, konvaLayer); // const bboxRect = konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(layerState, konvaLayer);
@ -132,22 +130,22 @@ export const renderLayer = async (
// bboxRect.visible(false); // bboxRect.visible(false);
// } // }
mapping.konvaObjectGroup.opacity(entity.opacity); adapter.konvaObjectGroup.opacity(entity.opacity);
}; };
export const renderLayers = ( export const renderLayers = (
map: EntityToKonvaMap, manager: KonvaNodeManager,
entities: LayerEntity[], entities: LayerEntity[],
tool: Tool, tool: Tool,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
): void => { ): void => {
// Destroy nonexistent layers // Destroy nonexistent layers
for (const mapping of map.getMappings()) { for (const adapter of manager.getAll()) {
if (!entities.find((l) => l.id === mapping.id)) { if (!entities.find((l) => l.id === adapter.id)) {
map.destroyMapping(mapping.id); manager.destroy(adapter.id);
} }
} }
for (const layer of entities) { for (const entity of entities) {
renderLayer(map, layer, tool, onPosChanged); renderLayer(manager, entity, tool, onPosChanged);
} }
}; };

172
invokeai/frontend/web/src/features/controlLayers/konva/renderers/objects.ts
View File

@ -1,11 +1,4 @@
import { rgbaColorToString } from 'common/util/colorCodeTransformers'; import { rgbaColorToString } from 'common/util/colorCodeTransformers';
import type {
BrushLineEntry,
EntityToKonvaMapping,
EraserLineEntry,
ImageEntry,
RectShapeEntry,
} from 'features/controlLayers/konva/entityToKonvaMap';
import { import {
getLayerBboxId, getLayerBboxId,
getObjectGroupId, getObjectGroupId,
@ -13,6 +6,13 @@ import {
LAYER_BBOX_NAME, LAYER_BBOX_NAME,
PREVIEW_GENERATION_BBOX_DUMMY_RECT, PREVIEW_GENERATION_BBOX_DUMMY_RECT,
} from 'features/controlLayers/konva/naming'; } from 'features/controlLayers/konva/naming';
import type {
BrushLineObjectRecord,
EntityKonvaAdapter,
EraserLineObjectRecord,
ImageObjectRecord,
RectShapeObjectRecord,
} from 'features/controlLayers/konva/nodeManager';
import type { import type {
BrushLine, BrushLine,
CanvasEntity, CanvasEntity,
@ -39,32 +39,33 @@ import { v4 as uuidv4 } from 'uuid';
* @param layerObjectGroup The konva layer's object group to add the line to * @param layerObjectGroup The konva layer's object group to add the line to
* @param name The konva name for the line * @param name The konva name for the line
*/ */
export const getBrushLine = (mapping: EntityToKonvaMapping, brushLine: BrushLine, name: string): BrushLineEntry => { export const getBrushLine = (
let entry = mapping.getEntry<BrushLineEntry>(brushLine.id); adapter: EntityKonvaAdapter,
if (entry) { brushLine: BrushLine,
return entry; name: string
): BrushLineObjectRecord => {
const objectRecord = adapter.get<BrushLineObjectRecord>(brushLine.id);
if (objectRecord) {
return objectRecord;
} }
const { id, strokeWidth, clip, color } = brushLine;
const konvaLineGroup = new Konva.Group({ const konvaLineGroup = new Konva.Group({
clip: brushLine.clip, clip,
listening: false, listening: false,
}); });
const konvaLine = new Konva.Line({ const konvaLine = new Konva.Line({
id: brushLine.id, id,
name, name,
strokeWidth: brushLine.strokeWidth, strokeWidth,
tension: 0, tension: 0,
lineCap: 'round', lineCap: 'round',
lineJoin: 'round', lineJoin: 'round',
shadowForStrokeEnabled: false, shadowForStrokeEnabled: false,
globalCompositeOperation: 'source-over', globalCompositeOperation: 'source-over',
listening: false, listening: false,
stroke: rgbaColorToString(brushLine.color), stroke: rgbaColorToString(color),
}); });
konvaLineGroup.add(konvaLine); return adapter.add({ id, type: 'brush_line', konvaLine, konvaLineGroup });
mapping.konvaObjectGroup.add(konvaLineGroup);
entry = mapping.addEntry({ id: brushLine.id, type: 'brush_line', konvaLine, konvaLineGroup });
return entry;
}; };
/** /**
@ -73,20 +74,25 @@ export const getBrushLine = (mapping: EntityToKonvaMapping, brushLine: BrushLine
* @param layerObjectGroup The konva layer's object group to add the line to * @param layerObjectGroup The konva layer's object group to add the line to
* @param name The konva name for the line * @param name The konva name for the line
*/ */
export const getEraserLine = (mapping: EntityToKonvaMapping, eraserLine: EraserLine, name: string): EraserLineEntry => { export const getEraserLine = (
let entry = mapping.getEntry<EraserLineEntry>(eraserLine.id); adapter: EntityKonvaAdapter,
if (entry) { eraserLine: EraserLine,
return entry; name: string
): EraserLineObjectRecord => {
const objectRecord = adapter.get<EraserLineObjectRecord>(eraserLine.id);
if (objectRecord) {
return objectRecord;
} }
const { id, strokeWidth, clip } = eraserLine;
const konvaLineGroup = new Konva.Group({ const konvaLineGroup = new Konva.Group({
clip: eraserLine.clip, clip,
listening: false, listening: false,
}); });
const konvaLine = new Konva.Line({ const konvaLine = new Konva.Line({
id: eraserLine.id, id,
name, name,
strokeWidth: eraserLine.strokeWidth, strokeWidth,
tension: 0, tension: 0,
lineCap: 'round', lineCap: 'round',
lineJoin: 'round', lineJoin: 'round',
@ -94,12 +100,8 @@ export const getEraserLine = (mapping: EntityToKonvaMapping, eraserLine: EraserL
globalCompositeOperation: 'destination-out', globalCompositeOperation: 'destination-out',
listening: false, listening: false,
stroke: rgbaColorToString(DEFAULT_RGBA_COLOR), stroke: rgbaColorToString(DEFAULT_RGBA_COLOR),
clip: eraserLine.clip,
}); });
konvaLineGroup.add(konvaLine); return adapter.add({ id, type: 'eraser_line', konvaLine, konvaLineGroup });
mapping.konvaObjectGroup.add(konvaLineGroup);
entry = mapping.addEntry({ id: eraserLine.id, type: 'eraser_line', konvaLine, konvaLineGroup });
return entry;
}; };
/** /**
@ -108,87 +110,89 @@ export const getEraserLine = (mapping: EntityToKonvaMapping, eraserLine: EraserL
* @param layerObjectGroup The konva layer's object group to add the rect to * @param layerObjectGroup The konva layer's object group to add the rect to
* @param name The konva name for the rect * @param name The konva name for the rect
*/ */
export const getRectShape = (mapping: EntityToKonvaMapping, rectShape: RectShape, name: string): RectShapeEntry => { export const getRectShape = (
let entry = mapping.getEntry<RectShapeEntry>(rectShape.id); adapter: EntityKonvaAdapter,
if (entry) { rectShape: RectShape,
return entry; name: string
): RectShapeObjectRecord => {
const objectRecord = adapter.get<RectShapeObjectRecord>(rectShape.id);
if (objectRecord) {
return objectRecord;
} }
const { id, x, y, width, height } = rectShape;
const konvaRect = new Konva.Rect({ const konvaRect = new Konva.Rect({
id: rectShape.id, id,
key: rectShape.id,
name, name,
x: rectShape.x, x,
y: rectShape.y, y,
width: rectShape.width, width,
height: rectShape.height, height,
listening: false, listening: false,
fill: rgbaColorToString(rectShape.color), fill: rgbaColorToString(rectShape.color),
}); });
mapping.konvaObjectGroup.add(konvaRect); return adapter.add({ id: rectShape.id, type: 'rect_shape', konvaRect });
entry = mapping.addEntry({ id: rectShape.id, type: 'rect_shape', konvaRect });
return entry;
}; };
export const updateImageSource = async (arg: { export const updateImageSource = async (arg: {
entry: ImageEntry; objectRecord: ImageObjectRecord;
image: ImageWithDims; image: ImageWithDims;
getImageDTO?: (imageName: string) => Promise<ImageDTO | null>; getImageDTO?: (imageName: string) => Promise<ImageDTO | null>;
onLoading?: () => void; onLoading?: () => void;
onLoad?: (konvaImage: Konva.Image) => void; onLoad?: (konvaImage: Konva.Image) => void;
onError?: () => void; onError?: () => void;
}) => { }) => {
const { entry, image, getImageDTO = defaultGetImageDTO, onLoading, onLoad, onError } = arg; const { objectRecord, image, getImageDTO = defaultGetImageDTO, onLoading, onLoad, onError } = arg;
try { try {
entry.isLoading = true; objectRecord.isLoading = true;
if (!entry.konvaImage) { if (!objectRecord.konvaImage) {
entry.konvaPlaceholderGroup.visible(true); objectRecord.konvaPlaceholderGroup.visible(true);
entry.konvaPlaceholderText.text(t('common.loadingImage', 'Loading Image')); objectRecord.konvaPlaceholderText.text(t('common.loadingImage', 'Loading Image'));
} }
onLoading?.(); onLoading?.();
const imageDTO = await getImageDTO(image.name); const imageDTO = await getImageDTO(image.name);
if (!imageDTO) { if (!imageDTO) {
entry.isLoading = false; objectRecord.isLoading = false;
entry.isError = true; objectRecord.isError = true;
entry.konvaPlaceholderGroup.visible(true); objectRecord.konvaPlaceholderGroup.visible(true);
entry.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load')); objectRecord.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load'));
onError?.(); onError?.();
return; return;
} }
const imageEl = new Image(); const imageEl = new Image();
imageEl.onload = () => { imageEl.onload = () => {
if (entry.konvaImage) { if (objectRecord.konvaImage) {
entry.konvaImage.setAttrs({ objectRecord.konvaImage.setAttrs({
image: imageEl, image: imageEl,
}); });
} else { } else {
entry.konvaImage = new Konva.Image({ objectRecord.konvaImage = new Konva.Image({
id: entry.id, id: objectRecord.id,
listening: false, listening: false,
image: imageEl, image: imageEl,
}); });
entry.konvaImageGroup.add(entry.konvaImage); objectRecord.konvaImageGroup.add(objectRecord.konvaImage);
} }
entry.isLoading = false; objectRecord.isLoading = false;
entry.isError = false; objectRecord.isError = false;
entry.konvaPlaceholderGroup.visible(false); objectRecord.konvaPlaceholderGroup.visible(false);
onLoad?.(entry.konvaImage); onLoad?.(objectRecord.konvaImage);
}; };
imageEl.onerror = () => { imageEl.onerror = () => {
entry.isLoading = false; objectRecord.isLoading = false;
entry.isError = true; objectRecord.isError = true;
entry.konvaPlaceholderGroup.visible(true); objectRecord.konvaPlaceholderGroup.visible(true);
entry.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load')); objectRecord.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load'));
onError?.(); onError?.();
}; };
imageEl.id = image.name; imageEl.id = image.name;
imageEl.src = imageDTO.image_url; imageEl.src = imageDTO.image_url;
} catch { } catch {
entry.isLoading = false; objectRecord.isLoading = false;
entry.isError = true; objectRecord.isError = true;
entry.konvaPlaceholderGroup.visible(true); objectRecord.konvaPlaceholderGroup.visible(true);
entry.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load')); objectRecord.konvaPlaceholderText.text(t('common.imageFailedToLoad', 'Image Failed to Load'));
onError?.(); onError?.();
} }
}; };
@ -199,18 +203,18 @@ export const updateImageSource = async (arg: {
* @returns The konva group for the image placeholder, and callbacks to handle loading and error states * @returns The konva group for the image placeholder, and callbacks to handle loading and error states
*/ */
export const createImageObjectGroup = (arg: { export const createImageObjectGroup = (arg: {
mapping: EntityToKonvaMapping; adapter: EntityKonvaAdapter;
obj: ImageObject; obj: ImageObject;
name: string; name: string;
getImageDTO?: (imageName: string) => Promise<ImageDTO | null>; getImageDTO?: (imageName: string) => Promise<ImageDTO | null>;
onLoad?: (konvaImage: Konva.Image) => void; onLoad?: (konvaImage: Konva.Image) => void;
onLoading?: () => void; onLoading?: () => void;
onError?: () => void; onError?: () => void;
}): ImageEntry => { }): ImageObjectRecord => {
const { mapping, obj, name, getImageDTO = defaultGetImageDTO, onLoad, onLoading, onError } = arg; const { adapter, obj, name, getImageDTO = defaultGetImageDTO, onLoad, onLoading, onError } = arg;
let entry = mapping.getEntry<ImageEntry>(obj.id); let objectRecord = adapter.get<ImageObjectRecord>(obj.id);
if (entry) { if (objectRecord) {
return entry; return objectRecord;
} }
const { id, image } = obj; const { id, image } = obj;
const { width, height } = obj; const { width, height } = obj;
@ -234,23 +238,19 @@ export const createImageObjectGroup = (arg: {
text: t('common.loadingImage', 'Loading Image'), text: t('common.loadingImage', 'Loading Image'),
listening: false, listening: false,
}); });
konvaPlaceholderGroup.add(konvaPlaceholderRect); objectRecord = adapter.add({
konvaPlaceholderGroup.add(konvaPlaceholderText);
konvaImageGroup.add(konvaPlaceholderGroup);
mapping.konvaObjectGroup.add(konvaImageGroup);
entry = mapping.addEntry({
id, id,
type: 'image', type: 'image',
konvaImageGroup, konvaImageGroup,
konvaPlaceholderGroup, konvaPlaceholderGroup,
konvaPlaceholderRect,
konvaPlaceholderText, konvaPlaceholderText,
konvaImage: null, konvaImage: null,
isLoading: false, isLoading: false,
isError: false, isError: false,
}); });
updateImageSource({ entry, image, getImageDTO, onLoad, onLoading, onError }); updateImageSource({ objectRecord, image, getImageDTO, onLoad, onLoading, onError });
return entry; return objectRecord;
}; };
/** /**

92
invokeai/frontend/web/src/features/controlLayers/konva/renderers/regions.ts
View File

@ -1,5 +1,4 @@
import { rgbColorToString } from 'common/util/colorCodeTransformers'; import { rgbColorToString } from 'common/util/colorCodeTransformers';
import type { EntityToKonvaMap, EntityToKonvaMapping } from 'features/controlLayers/konva/entityToKonvaMap';
import { import {
COMPOSITING_RECT_NAME, COMPOSITING_RECT_NAME,
RG_LAYER_BRUSH_LINE_NAME, RG_LAYER_BRUSH_LINE_NAME,
@ -8,6 +7,7 @@ import {
RG_LAYER_OBJECT_GROUP_NAME, RG_LAYER_OBJECT_GROUP_NAME,
RG_LAYER_RECT_SHAPE_NAME, RG_LAYER_RECT_SHAPE_NAME,
} from 'features/controlLayers/konva/naming'; } from 'features/controlLayers/konva/naming';
import type { EntityKonvaAdapter, KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import { getLayerBboxFast } from 'features/controlLayers/konva/renderers/bbox'; import { getLayerBboxFast } from 'features/controlLayers/konva/renderers/bbox';
import { import {
createObjectGroup, createObjectGroup,
@ -49,13 +49,13 @@ const createCompositingRect = (konvaLayer: Konva.Layer): Konva.Rect => {
* @param onLayerPosChanged Callback for when the layer's position changes * @param onLayerPosChanged Callback for when the layer's position changes
*/ */
const getRegion = ( const getRegion = (
map: EntityToKonvaMap, manager: KonvaNodeManager,
entity: RegionEntity, entity: RegionEntity,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
): EntityToKonvaMapping => { ): EntityKonvaAdapter => {
let mapping = map.getMapping(entity.id); const adapter = manager.get(entity.id);
if (mapping) { if (adapter) {
return mapping; return adapter;
} }
// This layer hasn't been added to the konva state yet // This layer hasn't been added to the konva state yet
const konvaLayer = new Konva.Layer({ const konvaLayer = new Konva.Layer({
@ -74,9 +74,7 @@ const getRegion = (
} }
const konvaObjectGroup = createObjectGroup(konvaLayer, RG_LAYER_OBJECT_GROUP_NAME); const konvaObjectGroup = createObjectGroup(konvaLayer, RG_LAYER_OBJECT_GROUP_NAME);
map.stage.add(konvaLayer); return manager.add(entity.id, konvaLayer, konvaObjectGroup);
mapping = map.addMapping(entity.id, konvaLayer, konvaObjectGroup);
return mapping;
}; };
/** /**
@ -88,17 +86,17 @@ const getRegion = (
* @param onPosChanged Callback for when the layer's position changes * @param onPosChanged Callback for when the layer's position changes
*/ */
export const renderRegion = ( export const renderRegion = (
map: EntityToKonvaMap, manager: KonvaNodeManager,
entity: RegionEntity, entity: RegionEntity,
globalMaskLayerOpacity: number, globalMaskLayerOpacity: number,
tool: Tool, tool: Tool,
selectedEntityIdentifier: CanvasEntityIdentifier | null, selectedEntityIdentifier: CanvasEntityIdentifier | null,
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
): void => { ): void => {
const mapping = getRegion(map, entity, onPosChanged); const adapter = getRegion(manager, entity, onPosChanged);
// Update the layer's position and listening state // Update the layer's position and listening state
mapping.konvaLayer.setAttrs({ adapter.konvaLayer.setAttrs({
listening: tool === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events listening: tool === 'move', // The layer only listens when using the move tool - otherwise the stage is handling mouse events
x: Math.floor(entity.x), x: Math.floor(entity.x),
y: Math.floor(entity.y), y: Math.floor(entity.y),
@ -112,67 +110,67 @@ export const renderRegion = (
const objectIds = entity.objects.map(mapId); const objectIds = entity.objects.map(mapId);
// Destroy any objects that are no longer in state // Destroy any objects that are no longer in state
for (const entry of mapping.getEntries()) { for (const objectRecord of adapter.getAll()) {
if (!objectIds.includes(entry.id)) { if (!objectIds.includes(objectRecord.id)) {
mapping.destroyEntry(entry.id); adapter.destroy(objectRecord.id);
groupNeedsCache = true; groupNeedsCache = true;
} }
} }
for (const obj of entity.objects) { for (const obj of entity.objects) {
if (obj.type === 'brush_line') { if (obj.type === 'brush_line') {
const entry = getBrushLine(mapping, obj, RG_LAYER_BRUSH_LINE_NAME); const objectRecord = getBrushLine(adapter, obj, RG_LAYER_BRUSH_LINE_NAME);
// Only update the points if they have changed. The point values are never mutated, they are only added to the // Only update the points if they have changed. The point values are never mutated, they are only added to the
// array, so checking the length is sufficient to determine if we need to re-cache. // array, so checking the length is sufficient to determine if we need to re-cache.
if (entry.konvaLine.points().length !== obj.points.length) { if (objectRecord.konvaLine.points().length !== obj.points.length) {
entry.konvaLine.points(obj.points); objectRecord.konvaLine.points(obj.points);
groupNeedsCache = true; groupNeedsCache = true;
} }
// Only update the color if it has changed. // Only update the color if it has changed.
if (entry.konvaLine.stroke() !== rgbColor) { if (objectRecord.konvaLine.stroke() !== rgbColor) {
entry.konvaLine.stroke(rgbColor); objectRecord.konvaLine.stroke(rgbColor);
groupNeedsCache = true; groupNeedsCache = true;
} }
} else if (obj.type === 'eraser_line') { } else if (obj.type === 'eraser_line') {
const entry = getEraserLine(mapping, obj, RG_LAYER_ERASER_LINE_NAME); const objectRecord = getEraserLine(adapter, obj, RG_LAYER_ERASER_LINE_NAME);
// Only update the points if they have changed. The point values are never mutated, they are only added to the // Only update the points if they have changed. The point values are never mutated, they are only added to the
// array, so checking the length is sufficient to determine if we need to re-cache. // array, so checking the length is sufficient to determine if we need to re-cache.
if (entry.konvaLine.points().length !== obj.points.length) { if (objectRecord.konvaLine.points().length !== obj.points.length) {
entry.konvaLine.points(obj.points); objectRecord.konvaLine.points(obj.points);
groupNeedsCache = true; groupNeedsCache = true;
} }
// Only update the color if it has changed. // Only update the color if it has changed.
if (entry.konvaLine.stroke() !== rgbColor) { if (objectRecord.konvaLine.stroke() !== rgbColor) {
entry.konvaLine.stroke(rgbColor); objectRecord.konvaLine.stroke(rgbColor);
groupNeedsCache = true; groupNeedsCache = true;
} }
} else if (obj.type === 'rect_shape') { } else if (obj.type === 'rect_shape') {
const entry = getRectShape(mapping, obj, RG_LAYER_RECT_SHAPE_NAME); const objectRecord = getRectShape(adapter, obj, RG_LAYER_RECT_SHAPE_NAME);
// Only update the color if it has changed. // Only update the color if it has changed.
if (entry.konvaRect.fill() !== rgbColor) { if (objectRecord.konvaRect.fill() !== rgbColor) {
entry.konvaRect.fill(rgbColor); objectRecord.konvaRect.fill(rgbColor);
groupNeedsCache = true; groupNeedsCache = true;
} }
} }
} }
// Only update layer visibility if it has changed. // Only update layer visibility if it has changed.
if (mapping.konvaLayer.visible() !== entity.isEnabled) { if (adapter.konvaLayer.visible() !== entity.isEnabled) {
mapping.konvaLayer.visible(entity.isEnabled); adapter.konvaLayer.visible(entity.isEnabled);
groupNeedsCache = true; groupNeedsCache = true;
} }
if (mapping.konvaObjectGroup.getChildren().length === 0) { if (adapter.konvaObjectGroup.getChildren().length === 0) {
// No objects - clear the cache to reset the previous pixel data // No objects - clear the cache to reset the previous pixel data
mapping.konvaObjectGroup.clearCache(); adapter.konvaObjectGroup.clearCache();
return; return;
} }
const compositingRect = const compositingRect =
mapping.konvaLayer.findOne<Konva.Rect>(`.${COMPOSITING_RECT_NAME}`) ?? createCompositingRect(mapping.konvaLayer); adapter.konvaLayer.findOne<Konva.Rect>(`.${COMPOSITING_RECT_NAME}`) ?? createCompositingRect(adapter.konvaLayer);
const isSelected = selectedEntityIdentifier?.id === entity.id; const isSelected = selectedEntityIdentifier?.id === entity.id;
/** /**
@ -188,32 +186,32 @@ export const renderRegion = (
*/ */
if (isSelected && tool !== 'move') { if (isSelected && tool !== 'move') {
// We must clear the cache first so Konva will re-draw the group with the new compositing rect // We must clear the cache first so Konva will re-draw the group with the new compositing rect
if (mapping.konvaObjectGroup.isCached()) { if (adapter.konvaObjectGroup.isCached()) {
mapping.konvaObjectGroup.clearCache(); adapter.konvaObjectGroup.clearCache();
} }
// The user is allowed to reduce mask opacity to 0, but we need the opacity for the compositing rect to work // The user is allowed to reduce mask opacity to 0, but we need the opacity for the compositing rect to work
mapping.konvaObjectGroup.opacity(1); adapter.konvaObjectGroup.opacity(1);
compositingRect.setAttrs({ compositingRect.setAttrs({
// The rect should be the size of the layer - use the fast method if we don't have a pixel-perfect bbox already // The rect should be the size of the layer - use the fast method if we don't have a pixel-perfect bbox already
...(!entity.bboxNeedsUpdate && entity.bbox ? entity.bbox : getLayerBboxFast(mapping.konvaLayer)), ...(!entity.bboxNeedsUpdate && entity.bbox ? entity.bbox : getLayerBboxFast(adapter.konvaLayer)),
fill: rgbColor, fill: rgbColor,
opacity: globalMaskLayerOpacity, opacity: globalMaskLayerOpacity,
// Draw this rect only where there are non-transparent pixels under it (e.g. the mask shapes) // Draw this rect only where there are non-transparent pixels under it (e.g. the mask shapes)
globalCompositeOperation: 'source-in', globalCompositeOperation: 'source-in',
visible: true, visible: true,
// This rect must always be on top of all other shapes // This rect must always be on top of all other shapes
zIndex: mapping.konvaObjectGroup.getChildren().length, zIndex: adapter.konvaObjectGroup.getChildren().length,
}); });
} else { } else {
// The compositing rect should only be shown when the layer is selected. // The compositing rect should only be shown when the layer is selected.
compositingRect.visible(false); compositingRect.visible(false);
// Cache only if needed - or if we are on this code path and _don't_ have a cache // Cache only if needed - or if we are on this code path and _don't_ have a cache
if (groupNeedsCache || !mapping.konvaObjectGroup.isCached()) { if (groupNeedsCache || !adapter.konvaObjectGroup.isCached()) {
mapping.konvaObjectGroup.cache(); adapter.konvaObjectGroup.cache();
} }
// Updating group opacity does not require re-caching // Updating group opacity does not require re-caching
mapping.konvaObjectGroup.opacity(globalMaskLayerOpacity); adapter.konvaObjectGroup.opacity(globalMaskLayerOpacity);
} }
// const bboxRect = // const bboxRect =
@ -236,7 +234,7 @@ export const renderRegion = (
}; };
export const renderRegions = ( export const renderRegions = (
map: EntityToKonvaMap, manager: KonvaNodeManager,
entities: RegionEntity[], entities: RegionEntity[],
maskOpacity: number, maskOpacity: number,
tool: Tool, tool: Tool,
@ -244,12 +242,12 @@ export const renderRegions = (
onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void onPosChanged?: (arg: PosChangedArg, entityType: CanvasEntity['type']) => void
): void => { ): void => {
// Destroy nonexistent layers // Destroy nonexistent layers
for (const mapping of map.getMappings()) { for (const adapter of manager.getAll()) {
if (!entities.find((rg) => rg.id === mapping.id)) { if (!entities.find((rg) => rg.id === adapter.id)) {
map.destroyMapping(mapping.id); manager.destroy(adapter.id);
} }
} }
for (const rg of entities) { for (const entity of entities) {
renderRegion(map, rg, maskOpacity, tool, selectedEntityIdentifier, onPosChanged); renderRegion(manager, entity, maskOpacity, tool, selectedEntityIdentifier, onPosChanged);
} }
}; };

8
invokeai/frontend/web/src/features/controlLayers/konva/renderers/renderer.ts
View File

@ -3,7 +3,7 @@ import type { Store } from '@reduxjs/toolkit';
import { logger } from 'app/logging/logger'; import { logger } from 'app/logging/logger';
import { $isDebugging } from 'app/store/nanostores/isDebugging'; import { $isDebugging } from 'app/store/nanostores/isDebugging';
import type { RootState } from 'app/store/store'; import type { RootState } from 'app/store/store';
import { EntityToKonvaMap } from 'features/controlLayers/konva/entityToKonvaMap'; import { KonvaNodeManager } from 'features/controlLayers/konva/nodeManager';
import { setStageEventHandlers } from 'features/controlLayers/konva/events'; import { setStageEventHandlers } from 'features/controlLayers/konva/events';
import { arrangeEntities } from 'features/controlLayers/konva/renderers/arrange'; import { arrangeEntities } from 'features/controlLayers/konva/renderers/arrange';
import { renderBackgroundLayer } from 'features/controlLayers/konva/renderers/background'; import { renderBackgroundLayer } from 'features/controlLayers/konva/renderers/background';
@ -282,9 +282,9 @@ export const initializeRenderer = (
// the entire state over when needed. // the entire state over when needed.
const debouncedUpdateBboxes = debounce(updateBboxes, 300); const debouncedUpdateBboxes = debounce(updateBboxes, 300);
const regionMap = new EntityToKonvaMap(stage); const regionMap = new KonvaNodeManager(stage);
const layerMap = new EntityToKonvaMap(stage); const layerMap = new KonvaNodeManager(stage);
const controlAdapterMap = new EntityToKonvaMap(stage); const controlAdapterMap = new KonvaNodeManager(stage);
const renderCanvas = () => { const renderCanvas = () => {
const { canvasV2 } = store.getState(); const { canvasV2 } = store.getState();