Cleanup

Author: Templarian

src/pg/inputPixelEditor/README.md

@@ -16,7 +16,6 @@ import { PgInputPixelEditor } from '@pictogrammers/components/pgInputPixelEditor
 | Attributes  | Tested   | Description |
 | ----------- | -------- | ----------- |
 | name        |          | Unique name in `pg-form` |
-| value       |          | Field value |
 | width       |          | Pixel width. Default `10` |
 | height      |          | Pixel height. Default `10` |
 | size        |          | Pixel size, minimum value `4`. Default `10` |
@@ -28,3 +27,25 @@ import { PgInputPixelEditor } from '@pictogrammers/components/pgInputPixelEditor
 | ---------- | -------- | ----------- |
 | change     |          | `{ detail: { value }` |
 | input      |          | `{ detail: { value }` |
+
+## Methods
+
+See usage for each method below.
+
+| Method     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| `save(callback, options)` | -        | Save file. |
+| `open(file, callback)` | -        | Open file. |
+| undo() | -           | Undo. |
+| hasUndo() | -     | Has undo |
+| hasRedo() | -     | Has redo |
+| redo() | -           | Redo. |
+| selectLayer() | -    |       |
+| getLayers() | -    | Get layer array. |
+| addLayer(option) | -        | Add layer. |
+| removeLayer(index) | -      | Remove layer. |
+| rotateClockwise() | -    | Rotate. |
+| rotateCounterclockwise() | -    | Rotate. |
+| move(x, y[, layer]) | -  | Move canvas. |
+| flipHorizontal() |
+| flipVertical() |

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

@@ -2,11 +2,11 @@
   <div class="props">
     <label>
       Width
-      <input part="width" type="range" min="10" max="22">
+      <input part="width" type="range" min="4" max="22">
     </label>
     <label>
       Height
-      <input part="height" type="range" min="10" max="22">
+      <input part="height" type="range" min="4" max="22">
     </label>
     <label>
       Size

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -341,8 +341,14 @@ export default class PgInputPixelEditor extends HTMLElement {
 
   handleKeyDown(event: KeyboardEvent) {
     console.log(event.shiftKey, event.ctrlKey, event.altKey, event.key);
-    if (event.key === ' ') {
-      console.log('space!')
+    switch(event.key) {
+      case ' ':
+        console.log('space');
+        break;
+      case 'Escape':
+        console.log('escape');
+        // Cancel editing
+        break;
     }
   }
 
@@ -590,6 +596,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     });
     this.#data[this.#layer] = cloned;
   }
+
   flipVertical() {
     const cloned = cloneGrid(this.#data[this.#layer]);
     const h = cloned.length - 1;
@@ -598,6 +605,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     });
     this.#data[this.#layer] = cloned;
   }
+
   move(translateX: number, translateY: number) {
     const cloned = fillGrid(this.width, this.height);
     for (let iy = 0; iy < this.height; iy++) {
@@ -658,7 +666,16 @@ export default class PgInputPixelEditor extends HTMLElement {
       // redraw canvas
     });*/
   }
-  rotate(counterClockwise: boolean = false) {
+
+  rotateClockwise() {
+    this.#rotate(false);
+  }
+
+  rotateCounterclockwise() {
+    this.#rotate(true);
+  }
+
+  #rotate(counterClockwise: boolean = false) {
     const cloned = cloneGrid(this.#data[this.#layer]);
     if (counterClockwise) {
       const newData = this.#data[0].map((val, index) => this.#data.map(row => row[row.length - 1 - index]));