feat(ui): add repr methods to layer and object classes

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<boolean> {
+  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),
+    };
+  }
 }

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<boolean> {
+  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),
+    };
+  }
 }

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),
+    };
+  }
 }

invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts

@@ -655,14 +655,24 @@ export class CanvasLayer {
     );
   }, CanvasManager.BBOX_DEBOUNCE_MS);
 
-  logDebugInfo(msg = 'Debug info') {
+  repr() {
-    const debugInfo = {
+    return {
       id: this.id,
-      state: this._state,
+      type: 'layer',
-      rect: this.rect,
+      state: deepClone(this._state),
-      bbox: this.bbox,
+      rect: deepClone(this.rect),
-      objects: Array.from(this.objects.values()).map((obj) => obj.id),
+      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);
   }
 }

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<boolean> {
+  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),
+    };
+  }
 }