From 3f781016f62b62bd462e12d78906f902c2b577b5 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 31 Jul 2024 15:06:46 +1000 Subject: [PATCH] feat(ui): add `repr` methods to layer and object classes --- .../controlLayers/konva/CanvasBrushLine.ts | 20 +++++++++++++++- .../controlLayers/konva/CanvasEraserLine.ts | 20 +++++++++++++++- .../controlLayers/konva/CanvasImage.ts | 21 ++++++++++++++++ .../controlLayers/konva/CanvasLayer.ts | 24 +++++++++++++------ .../controlLayers/konva/CanvasRect.ts | 20 +++++++++++++++- 5 files changed, 95 insertions(+), 10 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts index c052a55775..794ce82b17 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasBrushLine.ts @@ -1,4 +1,5 @@ import { rgbaColorToString } from 'common/util/colorCodeTransformers'; +import { deepClone } from 'common/util/deepClone'; import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer'; import type { BrushLine } from 'features/controlLayers/store/types'; import Konva from 'konva'; @@ -52,7 +53,7 @@ export class CanvasBrushLine { this.state = state; } - async update(state: BrushLine, force?: boolean): Promise { + update(state: BrushLine, force?: boolean): boolean { if (force || this.state !== state) { this.parent._log.trace(`Updating brush line ${this.id}`); const { points, color, clip, strokeWidth } = state; @@ -74,4 +75,21 @@ export class CanvasBrushLine { this.parent._log.trace(`Destroying brush line ${this.id}`); this.konva.group.destroy(); } + + show() { + this.konva.group.visible(true); + } + + hide() { + this.konva.group.visible(false); + } + + repr() { + return { + id: this.id, + type: this.type, + parent: this.parent.id, + state: deepClone(this.state), + }; + } } diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts index a1d8d19311..7ba26b02f9 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEraserLine.ts @@ -1,4 +1,5 @@ import { rgbaColorToString } from 'common/util/colorCodeTransformers'; +import { deepClone } from 'common/util/deepClone'; import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer'; import type { EraserLine } from 'features/controlLayers/store/types'; import { RGBA_RED } from 'features/controlLayers/store/types'; @@ -53,7 +54,7 @@ export class CanvasEraserLine { this.state = state; } - async update(state: EraserLine, force?: boolean): Promise { + update(state: EraserLine, force?: boolean): boolean { if (force || this.state !== state) { this.parent._log.trace(`Updating eraser line ${this.id}`); const { points, clip, strokeWidth } = state; @@ -74,4 +75,21 @@ export class CanvasEraserLine { this.parent._log.trace(`Destroying eraser line ${this.id}`); this.konva.group.destroy(); } + + show() { + this.konva.group.visible(true); + } + + hide() { + this.konva.group.visible(false); + } + + repr() { + return { + id: this.id, + type: this.type, + parent: this.parent.id, + state: deepClone(this.state), + }; + } } diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts index 91650fef60..9fb722a3bc 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts @@ -1,3 +1,4 @@ +import { deepClone } from 'common/util/deepClone'; import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer'; import { FILTER_MAP } from 'features/controlLayers/konva/filters'; import { loadImage } from 'features/controlLayers/konva/util'; @@ -157,4 +158,24 @@ export class CanvasImage { this.parent._log.trace(`Destroying image ${this.id}`); this.konva.group.destroy(); } + + show() { + this.konva.group.visible(true); + } + + hide() { + this.konva.group.visible(false); + } + + repr() { + return { + id: this.id, + type: this.type, + parent: this.parent.id, + imageName: this.imageName, + isLoading: this.isLoading, + isError: this.isError, + state: deepClone(this.state), + }; + } } diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts index d6f9197438..7cf905053c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts @@ -655,14 +655,24 @@ export class CanvasLayer { ); }, CanvasManager.BBOX_DEBOUNCE_MS); - logDebugInfo(msg = 'Debug info') { - const debugInfo = { + repr() { + return { id: this.id, - state: this._state, - rect: this.rect, - bbox: this.bbox, - objects: Array.from(this.objects.values()).map((obj) => obj.id), + type: 'layer', + state: deepClone(this._state), + rect: deepClone(this.rect), + bbox: deepClone(this.bbox), + bboxNeedsUpdate: this._bboxNeedsUpdate, + isFirstRender: this._isFirstRender, isTransforming: this.isTransforming, + isPendingBboxCalculation: this.isPendingBboxCalculation, + objects: Array.from(this.objects.values()).map((obj) => obj.repr()), + }; + } + + logDebugInfo(msg = 'Debug info') { + const info = { + repr: this.repr(), interactionRectAttrs: { x: this.konva.interactionRect.x(), y: this.konva.interactionRect.y(), @@ -684,6 +694,6 @@ export class CanvasLayer { offsetY: this.konva.objectGroup.offsetY(), }, }; - this._log.debug(debugInfo, msg); + this._log.trace(info, msg); } } diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRect.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRect.ts index 47386717b1..13d1ef1d65 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRect.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasRect.ts @@ -1,4 +1,5 @@ import { rgbaColorToString } from 'common/util/colorCodeTransformers'; +import { deepClone } from 'common/util/deepClone'; import type { CanvasLayer } from 'features/controlLayers/konva/CanvasLayer'; import type { RectShape } from 'features/controlLayers/store/types'; import Konva from 'konva'; @@ -45,7 +46,7 @@ export class CanvasRect { this.state = state; } - async update(state: RectShape, force?: boolean): Promise { + update(state: RectShape, force?: boolean): boolean { if (this.state !== state || force) { this.parent._log.trace(`Updating rect ${this.id}`); const { x, y, width, height, color } = state; @@ -67,4 +68,21 @@ export class CanvasRect { this.parent._log.trace(`Destroying rect ${this.id}`); this.konva.group.destroy(); } + + show() { + this.konva.group.visible(true); + } + + hide() { + this.konva.group.visible(false); + } + + repr() { + return { + id: this.id, + type: this.type, + parent: this.parent.id, + state: deepClone(this.state), + }; + } }