Cleanup testing

Author: Templarian

src/pg/inputPixelEditor/__examples__/basic/basic.css

@@ -6,4 +6,15 @@
 
 [part="debug"] canvas {
   border: 1px solid #FFF;
+}
+
+.props {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.5rem;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
 }

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

@@ -1,8 +1,21 @@
 <div class="example">
-  <div>
-    <input part="width" type="range" min="10" max="400">
-    <input part="height" type="range" min="10" max="240">
-    <input part="size" type="range" min="4" max="16">
+  <div class="props">
+    <label>
+      Width
+      <input part="width" type="range" min="10" max="22">
+    </label>
+    <label>
+      Height
+      <input part="height" type="range" min="10" max="22">
+    </label>
+    <label>
+      Size
+      <input part="size" type="range" min="4" max="16">
+    </label>
+    <label>
+      <input part="transparent" type="checkbox">
+      Transparent
+    </label>
   </div>
   <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>
@@ -13,7 +26,8 @@
   </div>
 
   <div>
-    <button part="clear">clear</button>
+    <button part="reset">Reset</button>
+    <button part="clear">Clear</button>
     <button part="modePixel">Pixel</button>
     <button part="modeLine">Line</button>
     <button part="modeRectangle">Rectangle</button>

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

@@ -19,6 +19,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $height: HTMLInputElement;
   @Part() $size: HTMLInputElement;
 
+  @Part() $reset: HTMLButtonElement;
   @Part() $clear: HTMLButtonElement;
   @Part() $modePixel: HTMLButtonElement;
   @Part() $modeLine: HTMLButtonElement;
@@ -32,9 +33,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$height.value = '10';
     this.$size.value = '10';
     this.$input.addEventListener('change', this.handleChange.bind(this));
-    this.$width.addEventListener('change', this.handleWidthChange.bind(this));
-    this.$height.addEventListener('change', this.handleHeightChange.bind(this));
-    this.$size.addEventListener('change', this.handleSizeChange.bind(this));
+    this.$width.addEventListener('input', this.handleWidthChange.bind(this));
+    this.$height.addEventListener('input', this.handleHeightChange.bind(this));
+    this.$size.addEventListener('input', this.handleSizeChange.bind(this));
     this.$input.addEventListener('input', this.handleInput.bind(this));
     this.$input.addEventListener('debug', this.handleDebug.bind(this));
     this.$modePixel.addEventListener('click', () => {
@@ -55,6 +56,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$modeEllipseOutline.addEventListener('click', () => {
       this.$input.inputModeEllipseOutline();
     });
+    this.$reset.addEventListener('click', () => {
+      this.$input.reset();
+    });
     this.$clear.addEventListener('click', () => {
       this.$input.clear();
     });

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -1,4 +1,4 @@
-import { Component, Prop, Part, normalizeInt } from '@pictogrammers/element';
+import { Component, Prop, Part, normalizeInt, normalizeBoolean } from '@pictogrammers/element';
 
 import template from './inputPixelEditor.html';
 import style from './inputPixelEditor.css';
@@ -71,6 +71,7 @@ export default class PgInputPixelEditor extends HTMLElement {
   @Prop(normalizeInt) height: number = 10;
   @Prop(normalizeInt) size: number = 10;
   @Prop(normalizeInt) gridSize: number = 1;
+  @Prop(normalizeBoolean) transparent: boolean = false;
   @Prop() placeholder: string = '';
 
   @Part() $canvas: HTMLCanvasElement;
@@ -175,17 +176,37 @@ export default class PgInputPixelEditor extends HTMLElement {
       }];
       this.#data = [fillGrid(this.width, this.height)];
       this.#reset = false;
+      this.#undoHistory = [];
+      this.#redoHistory = [];
+    } else {
+      this.#redraw();
     }
-    this.#redraw();
   }
 
   #redraw() {
     // Render individual pixels
-    this.#data[this.#layer].forEach((row, y) => {
-      row.forEach((cell, x) => {
-        this.#setPixel(x, y, cell);
-      });
-    });
+    const data = this.#data.toReversed();
+    const layerCount = data.length;
+    for (let y = 0; y < this.height; y++) {
+      if (y >= data[0].length) {
+        for (let l = 0; l < layerCount; l++) {
+          data[l].push(new Array(this.width).fill(0));
+        }
+      }
+      for (let x = 0; x < this.width; x++) {
+        if (x >= data[0][y].length) {
+          for (let l = 0; l < layerCount; l++) {
+            data[l][y].push(0);
+          }
+        }
+        for (let l = 0; l < layerCount; l++) {
+          if (data[l][y][x] !== 0) {
+            this.#setPixel(x, y, data[l][y][x]);
+            break;
+          }
+        }
+      }
+    }
   }
 
   #handleChange() {
@@ -526,6 +547,7 @@ export default class PgInputPixelEditor extends HTMLElement {
   mergeColor(fromIndex: number, toIndex: number) {
     // ToDo: Code this
   }
+
   clear() {
     const gridEmpty = fillGrid(this.width, this.height);
     const diff = diffGrid(this.#data[this.#layer], gridEmpty);
@@ -545,13 +567,21 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#data = [fillGrid(this.width, this.height)];
     this.#updateGrid();
   }
+
+  reset() {
+    this.#reset = true;
+    this.#init();
+  }
+
   clearHistory() {
     this.#undoHistory = [];
     this.#redoHistory = [];
   }
+
   applyTemplate(template: number[][]) {
     this.#data = [template];
   }
+
   flipHorizontal() {
     const cloned = cloneGrid(this.#data[this.#layer]);
     const w = cloned[0].length - 1;
@@ -606,14 +636,14 @@ export default class PgInputPixelEditor extends HTMLElement {
     // ToDo: Rewrite to use new history api
     const revert = this.#undoHistory.pop();
     if (!revert) { return; }
-    switch(revert.type) {
+    switch (revert.type) {
       case HistoryType.Pixel:
-          this.#redoHistory.push(revert);
-          (revert.data as HistoryPixelType).pixels.forEach((item) => {
-            const [x, y] = item;
-            this.#data[this.#layer][y][x] = item[2];
-            // redraw canvas
-          });
+        this.#redoHistory.push(revert);
+        (revert.data as HistoryPixelType).pixels.forEach((item) => {
+          const [x, y] = item;
+          this.#data[this.#layer][y][x] = item[2];
+          // redraw canvas
+        });
         break;
     }
   }

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "ES2015",
     "target": "ES2017",
-    "lib": ["ES2017", "ES5", "ES6", "DOM"],
+    "lib": ["ES2023", "ES5", "ES6", "DOM"],
     "moduleResolution": "node",
     "baseUrl": "src",
     "sourceMap": true,