From 61d52e96b7e5f293ab72c25dde52a22c14cffede Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 1 Aug 2024 19:53:04 +1000
Subject: [PATCH] feat(ui): prepare staging area

---
 .../controlLayers/konva/CanvasStagingArea.ts  | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingArea.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingArea.ts
index 88dfa3e3cd..278e3dbfc0 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingArea.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingArea.ts
@@ -1,27 +1,37 @@
-import { CanvasEntity } from 'features/controlLayers/konva/CanvasEntity';
 import { CanvasImage } from 'features/controlLayers/konva/CanvasImage';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import type { StagingAreaImage } from 'features/controlLayers/store/types';
+import { getPrefixedId } from 'features/controlLayers/konva/util';
+import type { GetLoggingContext, StagingAreaImage } from 'features/controlLayers/store/types';
 import Konva from 'konva';
+import type { Logger } from 'roarr';
 
-export class CanvasStagingArea extends CanvasEntity {
-  static NAME_PREFIX = 'staging-area';
-  static GROUP_NAME = `${CanvasStagingArea.NAME_PREFIX}_group`;
+export class CanvasStagingArea {
+  static TYPE = 'staging_area';
+  static GROUP_NAME = `${CanvasStagingArea.TYPE}_group`;
+
+  id: string;
+  manager: CanvasManager;
+  log: Logger;
+  getLoggingContext: GetLoggingContext;
 
-  type = 'staging_area';
   konva: { group: Konva.Group };
 
   image: CanvasImage | null;
   selectedImage: StagingAreaImage | null;
 
   constructor(manager: CanvasManager) {
-    super('staging-area', manager);
+    this.id = getPrefixedId(CanvasStagingArea.TYPE);
+    this.manager = manager;
+    this.getLoggingContext = this.manager.buildEntityGetLoggingContext(this);
+    this.log = this.manager.buildLogger(this.getLoggingContext);
+    this.log.debug('Creating staging area');
+
     this.konva = { group: new Konva.Group({ name: CanvasStagingArea.GROUP_NAME, listening: false }) };
     this.image = null;
     this.selectedImage = null;
   }
 
-  async render() {
+  render = async () => {
     const session = this.manager.stateApi.getSession();
     const bboxRect = this.manager.stateApi.getBbox().rect;
     const shouldShowStagedImage = this.manager.stateApi.getShouldShowStagedImage();
@@ -65,13 +75,13 @@ export class CanvasStagingArea extends CanvasEntity {
     } else {
       this.image?.konva.group.visible(false);
     }
-  }
+  };
 
-  repr() {
+  repr = () => {
     return {
       id: this.id,
-      type: this.type,
+      type: CanvasStagingArea.TYPE,
       selectedImage: this.selectedImage,
     };
-  }
+  };
 }