Add more debug info

Author: Templarian

src/pg/inputPixelEditor/__examples__/basic/basic.html

@@ -1,9 +1,18 @@
 <div class="example">
-  <pg-input-pixel-editor part="input" width="10" height="10" size="10" style="box-shadow:0 0 1rem rgba(0, 0, 0, 0.25)"></pg-input-pixel-editor>
+  <pg-input-pixel-editor part="input" width="10" height="10" size="10" style="box-shadow:0 0 0.5rem rgba(0, 0, 0, 0.2)"></pg-input-pixel-editor>
   <div>
     <code>onchange: <span part="value1"></span></code>
   </div>
   <div>
     <code>oninput: <span part="value2"></span></code>
   </div>
+  <div>
+    <button part="modePixel">Pixel</button>
+    <button part="modeLine">Line</button>
+    <button part="modeRectangle">Rectangle</button>
+    <button part="modeRectangleOutline">Rectangle Outline</button>
+    <button part="modeEllipse">Ellipse</button>
+    <button part="modeEllipseOutline">Ellipse Outline</button>
+  </div>
+  <div part="debug"></div>
 </div>

src/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -12,10 +12,28 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $input: PgInputPixelEditor;
   @Part() $value1: HTMLSpanElement;
   @Part() $value2: HTMLSpanElement;
+  @Part() $debug: HTMLDivElement;
+
+  @Part() $modePixel: HTMLButtonElement;
+  @Part() $modeLine: HTMLButtonElement;
+  @Part() $modeRectangle: HTMLButtonElement;
+  @Part() $modeRectangleOutline: HTMLButtonElement;
+  @Part() $modeEllipse: HTMLButtonElement;
+  @Part() $modeEllipseOutline: HTMLButtonElement;
 
   connectedCallback() {
     this.$input.addEventListener('change', this.handleChange.bind(this));
     this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('debug', this.handleDebug.bind(this));
+    this.$modePixel.addEventListener('click', () => {
+      this.$input.inputModePixel();
+    });
+    this.$modeLine.addEventListener('click', () => {
+      this.$input.inputModeLine();
+    });
+    this.$modeRectangle.addEventListener('click', () => {
+      this.$input.inputModeRectangle();
+    });
   }
 
   handleChange(e: CustomEvent) {
@@ -27,4 +45,11 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     const { value } = e.detail;
     this.$value2.innerText = value;
   }
+
+  handleDebug(e: CustomEvent) {
+    const { baseLayer, editLayer, previewLayer } = e.detail;
+    this.$debug.appendChild(baseLayer);
+    this.$debug.appendChild(editLayer);
+    this.$debug.appendChild(previewLayer);
+  }
 }

src/pg/inputPixelEditor/inputPixelEditor.css

@@ -4,4 +4,5 @@
 
 canvas {
   touch-action: none;
+  user-select: none;
 }

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -121,7 +121,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     const path = bitmaskToPath(this.#data, { scale: 1 });
     console.log('change:', path);
     this.dispatchEvent(new CustomEvent('change', {
-      detail: path
+      detail: { value: path }
     }));
     /*this.dispatchEvent(new CustomEvent('change', {
       detail: data
@@ -225,6 +225,13 @@ export default class PgInputPixelEditor extends HTMLElement {
       minX * totalSize, minY * totalSize, maxX * totalSize, maxY * totalSize,
       minX * totalSize, minY * totalSize, maxX * totalSize, maxY * totalSize
     );
+    this.dispatchEvent(new CustomEvent('debug', {
+      detail: {
+        editLayer: this.#editLayer,
+        baseLayer: this.#baseLayer,
+        previewLayer: this.#previewLayer
+      }
+    }));
     console.log('render preview', minX, minY, maxX, maxY);
   }
 
@@ -376,7 +383,6 @@ export default class PgInputPixelEditor extends HTMLElement {
           }
           break;
         case InputMode.Line:
-          console.log(x, y)
           this.#setPreview(getLinePixels(startX, startY, lastX, lastY), x, y);
           break;
         case InputMode.Rectangle:
@@ -396,7 +402,6 @@ export default class PgInputPixelEditor extends HTMLElement {
   }
 
   handlePointerEnter(event: MouseEvent) {
-    console.log('hmmmm')
     if (!this.#isPressed && !this.#isEditing) {
       this.#isEditing = true;
       // base layer to main canvas