Support transparent.

Author: Templarian

src/pg/inputPixelEditor/README.md

@@ -15,37 +15,117 @@ import { PgInputPixelEditor } from '@pictogrammers/components/pgInputPixelEditor
 
 | Attributes  | Tested   | Description |
 | ----------- | -------- | ----------- |
-| name        |          | Unique name in `pg-form` |
-| width       |          | Pixel width. Default `10` |
-| height      |          | Pixel height. Default `10` |
-| size        |          | Pixel size, minimum value `4`. Default `10` |
-| gridSize    |          | Grid spacing between cells. Default `1` |
+| `name`      |          | Unique name in `pg-form` |
+| `width`     |          | Pixel width. Default `10` |
+| `height`    |          | Pixel height. Default `10` |
+| `size`      |          | Pixel size, minimum value `4`. Default `10` |
+| `gridSize`  |          | Grid spacing between cells. Default `1` |
 
 ## Events
 
 | Events     | Tested   | Description |
 | ---------- | -------- | ----------- |
-| change     |          | `{ detail: { value }` |
-| input      |          | `{ detail: { value }` |
+| `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() |
+| `save(options)` | -        | Save file. |
+| `open(json)` | -        | Open file. |
+| `undo()` | -           | Undo. |
+| `hasUndo()` | -     | Has undo |
+| `hasRedo()` | -     | Has redo |
+| `redo()` | -           | Redo. |
+| `selectLayer()` | -    | Select layer. |
+| `getLayers()` | -    | Get layer array. |
+| `addLayer(option)` | -        | Add layer. |
+| `removeLayer(index)` | -      | Remove layer. |
+| `moveLayer(startIndex, endIndex)` | -    | Move layer. |
+| `getColors()` | -    | Get colors. |
+| `addColor(r, g, b, a)` | -    | Add color. |
+| `removeColor(index)` | -    | Remove color. |
+| `moveColor(startIndex, endIndex)` | -    | Move index. |
+| `rotateClockwise()` | -    | Rotate. |
+| `rotateCounterclockwise()` | -    | Rotate. |
+| `move(x, y[, layer])` | -  | Move. |
+| `flipHorizontal()` | -  | Flip horizontal. |
+| `flipVertical()` | -  | Flip vertical. |
+| `invert()` | -  | Invert layer. |
+
+### `save(options)` Method
+
+The save method allows getting the JSON representation of the current editor.
+
+```typescript
+@Part() $editor: PgInputPixelEditor;
+
+handleSave() {
+  const json = await this.$editor.save({
+    // Include history
+    history: true,
+  });
+  // use json
+}
+```
+
+### `open(json)` Method
+
+The open method allows loading json for previously created images.
+
+```typescript
+@Part() $editor: PgInputPixelEditor;
+
+handleOpen() {
+  const error = await this.$editor.open(json);
+  if (error) {
+    throw new Error(error.message);
+  }
+}
+```
+
+## JSON Format
+
+- `width` - Image width.
+- `height` - Image width.
+- `transparent` - Render transparent background.
+
+A complete JSON storage for a 10x10 image.
+
+```json
+{
+  "width": 10,
+  "height": 10,
+  "transparent": true,
+  "colors": [
+    [0, 0, 0, 0],
+    [0, 0, 0, 1]
+  ],
+  "layers": [
+    {
+      "name": "Layer 1",
+      "export": true,
+      "locked": false,
+      "visible": true,
+      "opacity": 1
+    }
+  ],
+  "data": [
+    [
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
+      [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    ]
+  ]
+}
+```

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

@@ -18,6 +18,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $width: HTMLInputElement;
   @Part() $height: HTMLInputElement;
   @Part() $size: HTMLInputElement;
+  @Part() $transparent: HTMLInputElement;
 
   @Part() $reset: HTMLButtonElement;
   @Part() $clear: HTMLButtonElement;
@@ -36,6 +37,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     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.$transparent.addEventListener('input', this.handleTransparentChange.bind(this));
     this.$input.addEventListener('input', this.handleInput.bind(this));
     this.$input.addEventListener('debug', this.handleDebug.bind(this));
     this.$modePixel.addEventListener('click', () => {
@@ -99,4 +101,8 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$input.size = e.target.value;
     this.$debug.innerHTML = '';
   }
+
+  handleTransparentChange(e) {
+    this.$input.transparent = e.target.checked;
+  }
 }

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -152,6 +152,25 @@ export default class PgInputPixelEditor extends HTMLElement {
     if (changes.width || changes.height || changes.size) {
       this.#init();
     }
+    if (changes.transparent) {
+      const totalSize = this.size + this.gridSize;
+      const actualWidth = this.width * totalSize - this.gridSize;
+      const actualHeight = this.height * totalSize - this.gridSize;
+      if (this.transparent) {
+        for (let y = 0; y < this.height; y++) {
+          for (let x = 0; x < this.width; x++) {
+            this.#baseLayerContext.fillStyle = WHITE;
+            this.#baseLayerContext.fillRect(x * totalSize, y * totalSize, this.size + 1, this.size + 1);
+            this.#baseLayerContext.fillStyle = '#DDD';
+            this.#baseLayerContext.fillRect(x * totalSize + 5, y * totalSize, 5, 5);
+            this.#baseLayerContext.fillRect(x * totalSize, y * totalSize + 5, 5, 5);
+          }
+        }
+      } else {
+        this.#baseLayerContext.clearRect(0, 0, actualWidth, actualHeight);
+      }
+      this.#updateGrid();
+    }
   }
 
   #reset = true;
@@ -247,14 +266,6 @@ export default class PgInputPixelEditor extends HTMLElement {
     // No Edit Layer
     this.#noEditLayerContext.fillStyle = this.#colors[color] === 'transparent' ? WHITE : this.#colors[color];
     this.#noEditLayerContext.fillRect(x * totalSize, y * totalSize, this.size, this.size);
-    // Update pixel grid
-    /*if (!props.disableTransparency && colors[color] === 'transparent') {
-      pixelContext.fillStyle = '#DDD';
-      pixelContext.fillRect(x * totalSize + 1, y * totalSize + 1, size, size);
-      pixelContext.fillStyle = WHITE;
-      pixelContext.fillRect(x * totalSize + 1, y * totalSize + 1, 5, 5);
-      pixelContext.fillRect(x * totalSize + 6, y * totalSize + 6, 5, 5);
-    } else {*/
     // base layer to main canvas
     this.#context.drawImage(
       this.#baseLayer,
@@ -341,7 +352,7 @@ export default class PgInputPixelEditor extends HTMLElement {
 
   handleKeyDown(event: KeyboardEvent) {
     console.log(event.shiftKey, event.ctrlKey, event.altKey, event.key);
-    switch(event.key) {
+    switch (event.key) {
       case ' ':
         console.log('space');
         break;
@@ -622,6 +633,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     });
     this.#data[this.#layer] = cloned;
   }
+
   invert() {
     // Only works with 2 colors
     if (this.#colors.length > 2) {
@@ -640,6 +652,7 @@ export default class PgInputPixelEditor extends HTMLElement {
   clearGuides() {
 
   }
+
   undo() {
     // ToDo: Rewrite to use new history api
     const revert = this.#undoHistory.pop();
@@ -655,6 +668,7 @@ export default class PgInputPixelEditor extends HTMLElement {
         break;
     }
   }
+
   redo() {
     // ToDo: Rewrite to use new history api
     /*const revert = this.#redoHistory.pop();
@@ -694,27 +708,35 @@ export default class PgInputPixelEditor extends HTMLElement {
     }
     this.#data[this.#layer] = cloned;
   }
+
   hasUndo() {
     return this.#undoHistory.length !== 0;
   }
+
   hasRedo() {
     return this.#redoHistory.length !== 0;
   }
+
   inputModePixel() {
     this.#inputMode = InputMode.Pixel;
   }
+
   inputModeLine() {
     this.#inputMode = InputMode.Line;
   }
+
   inputModeRectangle() {
     this.#inputMode = InputMode.Rectangle;
   }
+
   inputModeRectangleOutline() {
     this.#inputMode = InputMode.RectangleOutline;
   }
+
   inputModeEllipse() {
     this.#inputMode = InputMode.Ellipse;
   }
+
   inputModeEllipseOutline() {
     this.#inputMode = InputMode.EllipseOutline;
   }

src/pg/markdown/markdown.css

@@ -221,6 +221,17 @@ table code {
   transform: translateY(-1px);
 }
 
+h1 > code,
+h2 > code,
+h3 > code,
+h4 > code,
+h5 > code {
+  border: 1px solid #DDD;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  background: #F1F1F1;
+}
+
 p > svg.icon,
 blockquote > svg.icon,
 p > a.icon > svg.icon,