pgInputPixelEditor

Author: Templarian

src/pg/inputPixelEditor/README.md

@@ -0,0 +1,30 @@
+# `<pg-input-pixel-editor>`
+
+The `pg-input-pixel-editor` component is used to edit images. Tailored for pen or mouse input the editor can be used for various image editing tasks.
+
+```typescript
+import '@pictogrammers/components/pgInputPixelEditor';
+import { PgInputPixelEditor } from '@pictogrammers/components/pgInputPixelEditor';
+```
+
+```html
+<pg-input-pixel-editor></pg-input-pixel-editor>
+```
+
+## Attributes
+
+| 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` |
+| gridSize    |          | Grid spacing between cells. Default `1` |
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { value }` |
+| input      |          | `{ detail: { value }` |

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

@@ -0,0 +1,9 @@
+<div class="example">
+  <pg-input-pixel-editor part="input" width="10" height="10" size="10"></pg-input-pixel-editor>
+  <div>
+    <code>onchange: <span part="value1"></span></code>
+  </div>
+  <div>
+    <code>oninput: <span part="value2"></span></code>
+  </div>
+</div>

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

@@ -0,0 +1,30 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgInputPixelEditor from '../../inputPixelEditor';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-pixel-editor-basic',
+  template
+})
+export default class XPgInputPixelEditorBasic extends HTMLElement {
+
+  @Part() $input: PgInputPixelEditor;
+  @Part() $value1: HTMLSpanElement;
+  @Part() $value2: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+  }
+
+  handleChange(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value1.innerText = value;
+  }
+
+  handleInput(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value2.innerText = value;
+  }
+}

src/pg/inputPixelEditor/inputPixelEditor.css

@@ -0,0 +1 @@
+<canvas part="canvas"></canvas>