Add resize handles.

Author: Templarian

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

@@ -1,11 +1,17 @@
 <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>
   <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="clear">clear</button>
     <button part="modePixel">Pixel</button>

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

@@ -15,6 +15,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $value1: HTMLSpanElement;
   @Part() $value2: HTMLSpanElement;
   @Part() $debug: HTMLDivElement;
+  @Part() $width: HTMLInputElement;
+  @Part() $height: HTMLInputElement;
+  @Part() $size: HTMLInputElement;
 
   @Part() $clear: HTMLButtonElement;
   @Part() $modePixel: HTMLButtonElement;
@@ -25,7 +28,13 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $modeEllipseOutline: HTMLButtonElement;
 
   connectedCallback() {
+    this.$width.value = '10';
+    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.$input.addEventListener('input', this.handleInput.bind(this));
     this.$input.addEventListener('debug', this.handleDebug.bind(this));
     this.$modePixel.addEventListener('click', () => {
@@ -71,4 +80,19 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     //context.lineWidth = 1;
     //context.strokeRect(x, y, width, height);
   }
+
+  handleWidthChange(e) {
+    this.$input.width = e.target.value;
+    this.$debug.innerHTML = '';
+  }
+
+  handleHeightChange(e) {
+    this.$input.height = e.target.value;
+    this.$debug.innerHTML = '';
+  }
+
+  handleSizeChange(e) {
+    this.$input.size = e.target.value;
+    this.$debug.innerHTML = '';
+  }
 }

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -14,6 +14,7 @@ import iterateGrid from './utils/interateGrid';
 import bitmaskToPath from './utils/bitmapToMask';
 import createLayer from './utils/createLayer';
 import diffGrid from './utils/diffGrid';
+import { getGuides } from './utils/getGuides';
 
 type Pixel = { x: number, y: number };
 
@@ -152,25 +153,39 @@ export default class PgInputPixelEditor extends HTMLElement {
     }
   }
 
+  #reset = true;
   #init() {
     const totalSize = this.size + this.gridSize;
     const actualWidth = this.width * totalSize - this.gridSize;
     const actualHeight = this.height * totalSize - this.gridSize;
     this.$canvas.width = actualWidth;
     this.$canvas.height = actualHeight;
-    this.#layer = 0;
-    this.#layers = [{
-      name: 'Layer 1',
-      export: true,
-      locked: false,
-      visible: true,
-      opacity: 1
-    }];
-    this.#data = [fillGrid(this.width, this.height)];
     [this.#baseLayer, this.#baseLayerContext] = createLayer(actualWidth, actualHeight);
     [this.#editLayer, this.#editLayerContext] = createLayer(actualWidth, actualHeight);
     [this.#noEditLayer, this.#noEditLayerContext] = createLayer(actualWidth, actualHeight);
     [this.#previewLayer, this.#previewLayerContext] = createLayer(actualWidth, actualHeight);
+    if (this.#reset) {
+      this.#layer = 0;
+      this.#layers = [{
+        name: 'Layer 1',
+        export: true,
+        locked: false,
+        visible: true,
+        opacity: 1
+      }];
+      this.#data = [fillGrid(this.width, this.height)];
+      this.#reset = false;
+    }
+    this.#redraw();
+  }
+
+  #redraw() {
+    // Render individual pixels
+    this.#data[this.#layer].forEach((row, y) => {
+      row.forEach((cell, x) => {
+        this.#setPixel(x, y, cell);
+      });
+    });
   }
 
   #handleChange() {
@@ -579,6 +594,13 @@ export default class PgInputPixelEditor extends HTMLElement {
       cloned[y][x] = cloned[y][x] === 0 ? 1 : 0;
     });
     this.#data[this.#layer] = cloned;
+  }
+  applyGuides() {
+    const guides = getGuides(this.width, this.height, this.size, this.gridSize);
+    this.#baseLayerContext.drawImage(guides, 0, 0);
+  }
+  clearGuides() {
+
   }
   undo() {
     // ToDo: Rewrite to use new history api