From c235b52e3bb733045aa6b634ff5feef7ff7c1e20 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 7 Nov 2024 00:18:13 +0100
Subject: [PATCH] fix canvas initialization, add add methods to attach canvas
 to main body for ez debug

---
 src/ext/lib/aard/Aard.ts        |  3 ++-
 src/ext/lib/aard/gl/GlCanvas.ts | 29 +++++++++++++++++++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/ext/lib/aard/Aard.ts b/src/ext/lib/aard/Aard.ts
index 1925166..b079905 100644
--- a/src/ext/lib/aard/Aard.ts
+++ b/src/ext/lib/aard/Aard.ts
@@ -290,9 +290,10 @@ class Aard {
    */
   private init() {
     this.canvasStore = {
-      main: new GlCanvas(new GlCanvas(this.settings.active.arDetect.canvasDimensions.sampleCanvas)),
+      main: new GlCanvas(new GlCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-gl'})),
     };
 
+
     this.canvasSamples = {
       top: generateSampleArray(
         this.settings.active.arDetect.sampling.staticCols,
diff --git a/src/ext/lib/aard/gl/GlCanvas.ts b/src/ext/lib/aard/gl/GlCanvas.ts
index ad4266a..836cb4c 100644
--- a/src/ext/lib/aard/gl/GlCanvas.ts
+++ b/src/ext/lib/aard/gl/GlCanvas.ts
@@ -4,6 +4,7 @@ import { GlCanvasBuffers, initBuffers } from './gl-init';
 export interface GlCanvasOptions {
   width: number;
   height: number;
+  id?: string;
 }
 
 // Vertex shader program
@@ -91,17 +92,19 @@ export class GlCanvas {
 
   constructor(options: GlCanvasOptions) {
     this.canvas = document.createElement('canvas');
+    this.canvas.setAttribute('width', `${options.width}`);
+    this.canvas.setAttribute('height', `${options.height}`);
+
     this.gl = this.canvas.getContext('webgl');
 
     if (!this.gl) {
       throw new Error('WebGL not supported');
     }
-
-    this.canvas.width = options.width;
-    this.canvas.height = options.height;
+    if(options.id) {
+      this.canvas.setAttribute('id', options.id);
+    }
 
     this.frameBufferSize = options.width * options.height * 4;
-
     this.initWebgl();
   }
 
@@ -123,6 +126,24 @@ export class GlCanvas {
     return this.frameBuffer;
   }
 
+  showCanvas() {
+    this.canvas.style.display = 'block';
+    this.canvas.style.position = 'fixed';
+    this.canvas.style.left = '0px';
+    this.canvas.style.top = '0px';
+    this.canvas.style.border = '1px dotted red';
+    this.canvas.style.zIndex = '1000000';
+    document.body.appendChild(this.canvas);
+  }
+
+  hideCanvas() {
+    this.canvas.style.display = '';
+    this.canvas.style.position = '';
+    this.canvas.style.left = '';
+    this.canvas.style.top = '';
+    this.canvas.remove();
+  }
+
   /**
    * Cleans up after itself
    */