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): remove inheritance of CanvasObject

Browse Source 
JS is terrible
This commit is contained in:
psychedelicious 2024-08-01 19:43:27 +10:00
parent 661fd55556
commit e873b69850
9 changed files with 149 additions and 93 deletions

28
invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts

@ -1,15 +1,22 @@
import type { JSONObject } from 'common/types';
import { rgbaColorToString } from 'common/util/colorCodeTransformers';
import { deepClone } from 'common/util/deepClone';
import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer';
import { CanvasObject } from 'features/controlLayers/konva/CanvasObject';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import type { BrushLine } from 'features/controlLayers/store/types';
import Konva from 'konva';
import type { Logger } from 'roarr';
export class CanvasBrushLine extends CanvasObject {
static NAME_PREFIX = 'brush-line';
static GROUP_NAME = `${CanvasBrushLine.NAME_PREFIX}_group`;
static LINE_NAME = `${CanvasBrushLine.NAME_PREFIX}_line`;
export class CanvasBrushLine {
static TYPE = 'brush_line';
static GROUP_NAME = `${CanvasBrushLine.TYPE}_group`;
static LINE_NAME = `${CanvasBrushLine.TYPE}_line`;
id: string;
parent: CanvasLayer;
manager: CanvasManager;
log: Logger;
getLoggingContext: (extra?: JSONObject) => JSONObject;
state: BrushLine;
konva: {
@ -18,10 +25,15 @@ export class CanvasBrushLine extends CanvasObject {
};
constructor(state: BrushLine, parent: CanvasLayer) {
super(state.id, parent);
this.log.trace({ state }, 'Creating brush line');
const { id, strokeWidth, clip, color, points } = state;
this.id = id;
this.parent = parent;
this.manager = parent.manager;
const { strokeWidth, clip, color, points } = state;
this.getLoggingContext = this.manager.buildObjectGetLoggingContext(this);
this.log = this.manager.buildLogger(this.getLoggingContext);
this.log.trace({ state }, 'Creating brush line');
this.konva = {
group: new Konva.Group({

2
invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity.ts

@ -19,7 +19,7 @@ export abstract class CanvasEntity {
getLoggingContext = (extra?: Record<string, unknown>) => {
return {
...this.manager._getLoggingContext(),
...this.manager.getLoggingContext(),
layerId: this.id,
...extra,
};

27
invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts

@ -1,16 +1,23 @@
import type { JSONObject } from 'common/types';
import { rgbaColorToString } from 'common/util/colorCodeTransformers';
import { deepClone } from 'common/util/deepClone';
import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer';
import { CanvasObject } from 'features/controlLayers/konva/CanvasObject';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import type { EraserLine } from 'features/controlLayers/store/types';
import { RGBA_RED } from 'features/controlLayers/store/types';
import Konva from 'konva';
import type { Logger } from 'roarr';
export class CanvasEraserLine extends CanvasObject {
static NAME_PREFIX = 'eraser-line';
static GROUP_NAME = `${CanvasEraserLine.NAME_PREFIX}_group`;
static LINE_NAME = `${CanvasEraserLine.NAME_PREFIX}_line`;
export class CanvasEraserLine {
static TYPE = 'eraser_line';
static GROUP_NAME = `${CanvasEraserLine.TYPE}_group`;
static LINE_NAME = `${CanvasEraserLine.TYPE}_line`;
id: string;
parent: CanvasLayer;
manager: CanvasManager;
log: Logger;
getLoggingContext: (extra?: JSONObject) => JSONObject;
state: EraserLine;
konva: {
@ -19,10 +26,14 @@ export class CanvasEraserLine extends CanvasObject {
};
constructor(state: EraserLine, parent: CanvasLayer) {
super(state.id, parent);
this.log.trace({ state }, 'Creating eraser line');
const { id, strokeWidth, clip, points } = state;
this.id = id;
this.parent = parent;
this.manager = parent.manager;
this.getLoggingContext = this.manager.buildObjectGetLoggingContext(this);
this.log = this.manager.buildLogger(this.getLoggingContext);
const { strokeWidth, clip, points } = state;
this.log.trace({ state }, 'Creating eraser line');
this.konva = {
group: new Konva.Group({

37
invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts

@ -1,23 +1,28 @@
import type { JSONObject } from 'common/types';
import { deepClone } from 'common/util/deepClone';
import type { CanvasControlAdapter } from 'features/controlLayers/konva/CanvasControlAdapter';
import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer';
import { CanvasObject } from 'features/controlLayers/konva/CanvasObject';
import type { CanvasStagingArea } from 'features/controlLayers/konva/CanvasStagingArea';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { FILTER_MAP } from 'features/controlLayers/konva/filters';
import { loadImage } from 'features/controlLayers/konva/util';
import type { ImageObject } from 'features/controlLayers/store/types';
import { t } from 'i18next';
import Konva from 'konva';
import type { Logger } from 'roarr';
import { getImageDTO } from 'services/api/endpoints/images';
export class CanvasImage extends CanvasObject {
static NAME_PREFIX = 'canvas-image';
static GROUP_NAME = `${CanvasImage.NAME_PREFIX}_group`;
static IMAGE_NAME = `${CanvasImage.NAME_PREFIX}_image`;
static PLACEHOLDER_GROUP_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-group`;
static PLACEHOLDER_RECT_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-rect`;
static PLACEHOLDER_TEXT_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-text`;
export class CanvasImage {
static TYPE = 'image';
static GROUP_NAME = `${CanvasImage.TYPE}_group`;
static IMAGE_NAME = `${CanvasImage.TYPE}_image`;
static PLACEHOLDER_GROUP_NAME = `${CanvasImage.TYPE}_placeholder-group`;
static PLACEHOLDER_RECT_NAME = `${CanvasImage.TYPE}_placeholder-rect`;
static PLACEHOLDER_TEXT_NAME = `${CanvasImage.TYPE}_placeholder-text`;
id: string;
parent: CanvasLayer;
manager: CanvasManager;
log: Logger;
getLoggingContext: (extra?: JSONObject) => JSONObject;
state: ImageObject;
konva: {
@ -29,11 +34,15 @@ export class CanvasImage extends CanvasObject {
isLoading: boolean;
isError: boolean;
constructor(state: ImageObject, parent: CanvasLayer | CanvasStagingArea | CanvasControlAdapter) {
super(state.id, parent);
this.log.trace({ state }, 'Creating image');
constructor(state: ImageObject, parent: CanvasLayer) {
const { id, width, height, x, y } = state;
this.id = id;
this.parent = parent;
this.manager = parent.manager;
this.getLoggingContext = this.manager.buildObjectGetLoggingContext(this);
this.log = this.manager.buildLogger(this.getLoggingContext);
const { width, height, x, y } = state;
this.log.trace({ state }, 'Creating image');
this.konva = {
group: new Konva.Group({ name: CanvasImage.GROUP_NAME, listening: false, x, y }),

27
invokeai/frontend/web/src/features/controlLayers/konva/CanvasInteractionRect.ts

@ -1,17 +1,30 @@
import { nanoid } from '@reduxjs/toolkit';
import { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer';
import { CanvasObject } from 'features/controlLayers/konva/CanvasObject';
import type { JSONObject } from 'common/types';
import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { getPrefixedId } from 'features/controlLayers/konva/util';
import Konva from 'konva';
import type { Logger } from 'roarr';
export class CanvasInteractionRect extends CanvasObject {
export class CanvasInteractionRect {
static TYPE = 'interaction_rect';
id: string;
parent: CanvasLayer;
manager: CanvasManager;
log: Logger;
getLoggingContext: (extra?: JSONObject) => JSONObject;
konva: {
rect: Konva.Rect;
};
constructor(parent: CanvasLayer) {
super(`${CanvasInteractionRect.TYPE}:${nanoid()}`, parent);
this.id = getPrefixedId(CanvasInteractionRect.TYPE);
this.parent = parent;
this.manager = parent.manager;
this.getLoggingContext = this.manager.buildObjectGetLoggingContext(this);
this.log = this.manager.buildLogger(this.getLoggingContext);
this.konva = {
rect: new Konva.Rect({
@ -62,10 +75,6 @@ export class CanvasInteractionRect extends CanvasObject {
return {
id: this.id,
type: CanvasInteractionRect.TYPE,
x: this.konva.rect.x(),
y: this.konva.rect.y(),
width: this.konva.rect.width(),
height: this.konva.rect.height(),
};
};
}

35
invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts

@ -2,14 +2,21 @@ import type { Store } from '@reduxjs/toolkit';
import { logger } from 'app/logging/logger';
import type { RootState } from 'app/store/store';
import type { JSONObject } from 'common/types';
import type { CanvasBrushLine } from 'features/controlLayers/konva/CanvasBrushLine';
import type { CanvasEraserLine } from 'features/controlLayers/konva/CanvasEraserLine';
import type { CanvasImage } from 'features/controlLayers/konva/CanvasImage';
import { CanvasInitialImage } from 'features/controlLayers/konva/CanvasInitialImage';
import type { CanvasInteractionRect } from 'features/controlLayers/konva/CanvasInteractionRect';
import { CanvasProgressPreview } from 'features/controlLayers/konva/CanvasProgressPreview';
import type { CanvasRect } from 'features/controlLayers/konva/CanvasRect';
import type { CanvasTransformer } from 'features/controlLayers/konva/CanvasTransformer';
import {
getCompositeLayerImage,
getControlAdapterImage,
getGenerationMode,
getInitialImage,
getInpaintMaskImage,
getPrefixedId,
getRegionMaskImage,
nanoid,
} from 'features/controlLayers/konva/util';
@ -113,7 +120,7 @@ export class CanvasManager {
...message,
context: {
...message.context,
...this._getLoggingContext(),
...this.getLoggingContext(),
},
};
});
@ -568,7 +575,7 @@ export class CanvasManager {
}
}
_getLoggingContext() {
getLoggingContext() {
return {
// timestamp: new Date().toISOString(),
};
@ -586,6 +593,28 @@ export class CanvasManager {
});
}
buildObjectGetLoggingContext = (
instance: CanvasBrushLine | CanvasEraserLine | CanvasRect | CanvasImage | CanvasTransformer | CanvasInteractionRect
) => {
return (extra?: JSONObject): JSONObject => {
return {
...instance.parent.getLoggingContext(),
objectId: instance.id,
...extra,
};
};
};
buildEntityGetLoggingContext = (instance: CanvasLayer) => {
return (extra?: JSONObject): JSONObject => {
return {
...instance.manager.getLoggingContext(),
entityId: instance.id,
...extra,
};
};
};
logDebugInfo() {
// eslint-disable-next-line no-console
console.log(this);
@ -594,4 +623,6 @@ export class CanvasManager {
console.log(layer);
}
}
getPrefixedId = getPrefixedId;
}

39
invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject.ts

@ -1,39 +0,0 @@
import type { JSONObject } from 'common/types';
import type { CanvasControlAdapter } from 'features/controlLayers/konva/CanvasControlAdapter';
import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import type { CanvasStagingArea } from 'features/controlLayers/konva/CanvasStagingArea';
import type { Logger } from 'roarr';
export abstract class CanvasObject {
id: string;
parent: CanvasLayer | CanvasStagingArea | CanvasControlAdapter;
manager: CanvasManager;
log: Logger;
constructor(id: string, parent: CanvasLayer | CanvasStagingArea | CanvasControlAdapter) {
this.id = id;
this.parent = parent;
this.manager = parent.manager;
this.log = this.manager.buildLogger(this.getLoggingContext);
}
/**
* Get a serializable representation of the object.
*/
abstract repr(): JSONObject;
/**
* Get the logging context for this object.
* @param extra Extra data to merge into the context
* @returns The logging context for this object
*/
getLoggingContext = (extra?: Record<string, unknown>) => {
return {
...this.parent.getLoggingContext(),
objectId: this.id,
...extra,
};
};
}

26
invokeai/frontend/web/src/features/controlLayers/konva/CanvasRect.ts

@ -1,15 +1,22 @@
import type { JSONObject } from 'common/types';
import { rgbaColorToString } from 'common/util/colorCodeTransformers';
import { deepClone } from 'common/util/deepClone';
import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer';
import { CanvasObject } from 'features/controlLayers/konva/CanvasObject';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import type { RectShape } from 'features/controlLayers/store/types';
import Konva from 'konva';
import type { Logger } from 'roarr';
export class CanvasRect extends CanvasObject {
static NAME_PREFIX = 'canvas-rect';
static GROUP_NAME = `${CanvasRect.NAME_PREFIX}_group`;
static RECT_NAME = `${CanvasRect.NAME_PREFIX}_rect`;
export class CanvasRect {
static TYPE = 'rect';
static GROUP_NAME = `${CanvasRect.TYPE}_group`;
static RECT_NAME = `${CanvasRect.TYPE}_rect`;
id: string;
parent: CanvasLayer;
manager: CanvasManager;
log: Logger;
getLoggingContext: (extra?: JSONObject) => JSONObject;
state: RectShape;
konva: {
@ -18,11 +25,14 @@ export class CanvasRect extends CanvasObject {
};
constructor(state: RectShape, parent: CanvasLayer) {
super(state.id, parent);
const { id, x, y, width, height, color } = state;
this.id = id;
this.parent = parent;
this.manager = parent.manager;
this.getLoggingContext = this.manager.buildObjectGetLoggingContext(this);
this.log = this.manager.buildLogger(this.getLoggingContext);
this.log.trace({ state }, 'Creating rect');
const { x, y, width, height, color } = state;
this.konva = {
group: new Konva.Group({ name: CanvasRect.GROUP_NAME, listening: false }),
rect: new Konva.Rect({

21
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts

@ -1,19 +1,32 @@
import type { JSONObject } from 'common/types';
import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer';
import { CanvasObject } from 'features/controlLayers/konva/CanvasObject';
import { nanoid } from 'features/controlLayers/konva/util';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { getPrefixedId } from 'features/controlLayers/konva/util';
import type { Coordinate } from 'features/controlLayers/store/types';
import Konva from 'konva';
import type { Logger } from 'roarr';
export class CanvasTransformer extends CanvasObject {
export class CanvasTransformer {
static TYPE = 'transformer';
id: string;
parent: CanvasLayer;
manager: CanvasManager;
log: Logger;
getLoggingContext: (extra?: JSONObject) => JSONObject;
isActive: boolean;
konva: {
transformer: Konva.Transformer;
};
constructor(parent: CanvasLayer) {
super(`${CanvasTransformer.TYPE}:${nanoid()}`, parent);
this.parent = parent;
this.manager = parent.manager;
this.id = getPrefixedId(CanvasTransformer.TYPE);
this.getLoggingContext = this.manager.buildObjectGetLoggingContext(this);
this.log = this.manager.buildLogger(this.getLoggingContext);
this.isActive = false;
this.konva = {