From 336d72873f1686e3b20b68f671aac5c2c3b8105b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 30 Jul 2024 16:35:27 +1000
Subject: [PATCH] feat(ui): add debug button

---
 .../controlLayers/components/ControlLayersToolbar.tsx      | 7 +++++++
 .../web/src/features/controlLayers/konva/CanvasManager.ts  | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
index 7ae7d61fcb..3818167eec 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
@@ -27,6 +27,12 @@ export const ControlLayersToolbar = memo(() => {
       l.calculateBbox();
     }
   }, [canvasManager]);
+  const debug = useCallback(() => {
+    if (!canvasManager) {
+      return;
+    }
+    canvasManager.logDebugInfo();
+  }, [canvasManager]);
   return (
     <Flex w="full" gap={2}>
       <Flex flex={1} justifyContent="center">
@@ -40,6 +46,7 @@ export const ControlLayersToolbar = memo(() => {
         {tool === 'eraser' && <EraserWidth />}
       </Flex>
       <Button onClick={bbox}>bbox</Button>
+      <Button onClick={debug}>debug</Button>
       <Flex flex={1} justifyContent="center">
         <Flex gap={2} marginInlineStart="auto" alignItems="center">
           <FillColorPicker />
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
index 607a7e08a7..cb5954c619 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
@@ -547,4 +547,11 @@ export class CanvasManager {
       return getInitialImage({ ...arg, manager: this });
     }
   }
+
+  logDebugInfo() {
+    console.log(this);
+    for (const layer of this.layers.values()) {
+      console.log(layer);
+    }
+  }
 }