Invert support.

Author: Templarian

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

@@ -28,6 +28,7 @@
   <div>
     <button part="reset">Reset</button>
     <button part="clear">Clear</button>
+    <button part="invert">Invert</button>
     <button part="modePixel">Pixel</button>
     <button part="modeLine">Line</button>
     <button part="modeRectangle">Rectangle</button>

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

@@ -22,6 +22,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
 
   @Part() $reset: HTMLButtonElement;
   @Part() $clear: HTMLButtonElement;
+  @Part() $invert: HTMLButtonElement;
   @Part() $modePixel: HTMLButtonElement;
   @Part() $modeLine: HTMLButtonElement;
   @Part() $modeRectangle: HTMLButtonElement;
@@ -64,6 +65,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$clear.addEventListener('click', () => {
       this.$input.clear();
     });
+    this.$invert.addEventListener('click', () => {
+      this.$input.invert();
+    });
   }
 
   handleChange(e: CustomEvent) {

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -301,6 +301,14 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#delayedChange();
   }
 
+  #setPixelAll() {
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        this.#setPixel(x, y, this.#data[this.#layer][y][x]);
+      }
+    }
+  }
+
   #setPreview(pixels: Pixel[], previousX: number, previousY: number) {
     const totalSize = this.size + this.gridSize;
     const actualWidth = this.width * totalSize - this.gridSize;
@@ -656,16 +664,17 @@ export default class PgInputPixelEditor extends HTMLElement {
     if (this.#colors.length > 2) {
       return;
     }
-    const cloned = cloneGrid(this.#data[this.#layer]);
-    iterateGrid(cloned, (x, y) => {
-      cloned[y][x] = cloned[y][x] === 0 ? 1 : 0;
+    iterateGrid(this.#data[this.#layer], (x, y) => {
+      this.#data[this.#layer][y][x] = this.#data[this.#layer] [y][x] === 0 ? 1 : 0;
     });
-    this.#data[this.#layer] = cloned;
+    this.#setPixelAll();
   }
+
   applyGuides() {
     const guides = getGuides(this.width, this.height, this.size, this.gridSize);
     this.#baseLayerContext.drawImage(guides, 0, 0);
   }
+
   clearGuides() {
 
   }