@pictogrammers/components 0.5.14 → 0.5.17

package/pg/inputNumber/inputNumber.ts

@@ -26,6 +26,16 @@ export default class PgInputNumber extends HTMLElement {
   connectedCallback() {
     this.$input.addEventListener('input', this.handleInput.bind(this));
     this.$input.addEventListener('change', this.handleChange.bind(this));
+    this.$input.addEventListener('beforeinput', (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowUp':
+          this.#triggerInput(this.value + this.step);
+          break;
+        case 'ArrowDown':
+          this.#triggerInput(this.value - this.step);
+          break;
+      }
+    });
     this.$buttonMinus.addEventListener('increment', (e: any) => {
       this.#triggerInput(this.value - this.step);
     });
@@ -33,18 +43,10 @@ export default class PgInputNumber extends HTMLElement {
       this.#triggerInput(this.value + this.step);
     });
     this.$buttonMinus.addEventListener('finish', (e: any) => {
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: {
-          value: this.value,
-        },
-      }));
+      this.#triggerChange(this.value);
     });
     this.$buttonPlus.addEventListener('finish', (e: any) => {
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: {
-          value: this.value,
-        },
-      }));
+      this.#triggerChange(this.value);
     });
   }
 
@@ -54,6 +56,12 @@ export default class PgInputNumber extends HTMLElement {
     if (changes.value && !this.skipValue) {
       this.$input.value = `${this.value}`;
     }
+    if (changes.min) {
+      this.$input.min = `${this.min}`;
+    }
+    if (changes.max) {
+      this.$input.max = `${this.max}`;
+    }
     if (changes.placeholder) {
       this.$input.placeholder = this.placeholder;
     }
@@ -64,6 +72,9 @@ export default class PgInputNumber extends HTMLElement {
   }
 
   #triggerInput(value) {
+    if (value < this.min || value > this.max) {
+      return;
+    }
     this.dispatchEvent(
       new CustomEvent('input', {
         detail: {
@@ -81,14 +92,21 @@ export default class PgInputNumber extends HTMLElement {
     this.#triggerInput(value);
   }
 
-  handleChange(e) {
+  #triggerChange(value) {
+    if (value < this.min || value > this.max) {
+      return;
+    }
     this.dispatchEvent(
       new CustomEvent('change', {
         detail: {
-          value: e.target.value,
-          name: e.name
+          value: value,
+          name: this.name,
         }
       })
     );
   }
+
+  handleChange(e) {
+    this.#triggerChange(e.target.value);
+  }
 }

package/pg/inputPill/inputPill.html

@@ -0,0 +1,6 @@
+<span part="label"></span>
+<button part="remove" type="button" aria-label="Remove">
+  <svg part="removeIcon" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+  </svg>
+</button>

package/pg/inputPill/inputPill.html.tmp.26852.84ac63f4c46f

@@ -0,0 +1,6 @@
+<span part="label"></span>
+<button part="remove" type="button" aria-label="Remove">
+  <svg part="removeIcon" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+  </svg>
+</button>

package/pg/inputPill/inputPill.ts

@@ -0,0 +1,41 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputPill.html';
+import style from './inputPill.css';
+
+@Component({
+  selector: 'pg-input-pill',
+  style,
+  template,
+})
+export default class PgInputPill extends HTMLElement {
+  @Prop() label: string = '';
+  @Prop() value: string = '';
+
+  @Part() $label: HTMLSpanElement;
+  @Part() $remove: HTMLButtonElement;
+
+  #initialized: boolean = false;
+
+  connectedCallback() {
+    // Reconnects re-invoke connectedCallback; guard against duplicate listeners.
+    if (this.#initialized) return;
+    this.#initialized = true;
+    this.$remove.addEventListener('click', () => {
+      this.dispatchEvent(
+        new CustomEvent('remove', {
+          detail: {
+            value: this.value,
+            label: this.label,
+          }
+        })
+      );
+    });
+  }
+
+  render(changes) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+  }
+}

package/pg/inputPills/__examples__/basic/basic.html

@@ -0,0 +1,9 @@
+<div class="example">
+  <pg-input-pills part="input"></pg-input-pills>
+  <div>
+    <button part="add" type="button">Add Pill</button>
+  </div>
+  <div>
+    <code>onchange: <span part="value"></span></code>
+  </div>
+</div>

package/pg/inputPills/__examples__/basic/basic.html.tmp.26852.4771e4cad5b7

@@ -0,0 +1,9 @@
+<div class="example">
+  <pg-input-pills part="input"></pg-input-pills>
+  <div>
+    <button part="add" type="button">Add Pill</button>
+  </div>
+  <div>
+    <code>onchange: <span part="value"></span></code>
+  </div>
+</div>

package/pg/inputPixelEditor/README.md

@@ -16,20 +16,23 @@ import PgInputPixelEditor, {
 
 ## Attributes
 
-| 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` |
+| Attributes    | Tested   | Description |
+| ------------- | -------- | ----------- |
+| `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` (changing after init does not currently re-render) |
+| `transparent` |          | Show checkerboard background. Default `false` |
+| `placeholder` |          | Placeholder text (not yet implemented) |
 
 ## Events
 
-| Events      | Tested   | Description |
-| ----------- | -------- | ----------- |
-| `change`    |          | `{ detail: { value }` |
-| `reference` |          | `{ detail: { id, callback } }` |
+| Events        | Tested   | Description |
+| ------------- | -------- | ----------- |
+| `change`      |          | `{ detail: { export } }` — debounced, fires 1 second after the last edit |
+| `selectlayer` |          | `{ detail: { color, index } }` — fired in cursor input mode |
+| `debug`       |          | `{ detail: { x, y, width, height, canvas, context, baseLayer, editLayer, noEditLayer, previewLayer } }` — internal layers for debugging previews |
+| `reference`   |          | `{ detail: { id, callback } }` (not yet implemented) |
 
 ```typescript
 this.$input.addEventListener('reference', (e: any) => {
@@ -46,59 +49,71 @@ See usage for each method below.
 | Method     | Tested   | Description |
 | ---------- | -------- | ----------- |
 | `getJson(options)` | -        | Get JSON file. |
-| `getData()` | -           | Get layer data. |
-| `setData()` | -           | Set layer data. |
 | `setJson(json)` | -        | Set JSON file. |
+| `getData()` | -           | Get layer data as paths by color. |
+| `setData(data)` | -           | Set layer data from paths. |
 | `reset()` | -  | Reset canvas and data. |
+| `clear()` | -  | Clear all pixel data (deprecated, will be removed). |
+| `applyTemplate(grid)` | -  | Replace all data with a single-layer 2d color-index grid. |
 | `getExport()` | -  | 2d array of pixel color indexes. Already calculated. |
-| `getExport(id)` | -  | 2d array of pixel color indexes by export size. Minimal perf. |
-| `getExportCanvas()` | -  | Get new prepopulated HTML canvas, ideal for advanced export screens. |
+| `getExportPath()` | -  | SVG path string(s) for the export grid. |
+| `getExportLayerIndexes()` | -  | Indexes of layers flagged for export. |
+| `getExportCanvas(options)` | -  | Get new prepopulated HTML canvas, ideal for advanced export screens. |
 | `await getExportPng(options, meta)` | -  | Get png image with optional metadata. |
-| `undo()` | -           | Undo. |
-| `hasUndo()` | -     | Has undo |
-| `hasRedo()` | -     | Has redo |
-| `redo()` | -           | Redo. |
+| `await getSelectionPng(options, meta)` | -  | Get png of the current selection bounding box. Requires an active selection. |
+| `await copyPngToClipboard(blob, data)` | -  | Copy a png blob and JSON data to the clipboard. |
+| `undo()` | -           | Undo (partial — history is not yet recorded). |
+| `hasUndo()` | -     | Has undo. |
+| `hasRedo()` | -     | Has redo. |
+| `redo()` | -           | Redo (not yet implemented). |
 | `getHistory()` | -  | History list. |
-| `inputModeSelectRectangle()` | -  | Input Mode Select Rectangle |
-| `inputModeSelectEllipse()` | -  | Input Mode Select Ellipse |
-| `inputModeSelectLasso()` | -  | Input Mode Lasso |
-| `inputModeSelectMagicWand()` | -  | Input Mode Magic Wand |
-| `inputModePixel()` | -  | Input Mode Pixel |
-| `inputModeStamp(stamp)` | -  | Input Mode Stamp |
-| `inputModeLine()` | -  | Input Mode Line |
-| `inputModeRectangle()` | -  | Input Mode Rectangle |
-| `inputModeRectangleOutline()` | -  | Input Mode Rectangle Outline |
-| `inputModeEllipse()` | -  | Input Mode Ellipse |
-| `inputModeEllipseOutline()` | -  | Input Mode Ellipse Outline |
-| `selectLayer(index)` | -    | Select layer. |
-| `getLayers()` | -    | Get layer array. |
+| `clearHistory()` | -  | Clear undo/redo history. |
+| `inputModeCursor()` | -  | Input Mode Cursor — click to select layer. |
+| `inputModeSelectRectangle()` | -  | Input Mode Select Rectangle. |
+| `inputModeSelectEllipse()` | -  | Input Mode Select Ellipse. |
+| `inputModeSelectLasso()` | -  | Input Mode Lasso. |
+| `inputModeSelectMagicWand()` | -  | Input Mode Magic Wand. |
+| `inputModePixel()` | -  | Input Mode Pixel. |
+| `inputModePixelSize(size)` | -  | Set pixel brush size (not yet implemented). |
+| `inputModeStamp(stamp)` | -  | Input Mode Stamp. Accepts a `[x, y][]` offset array; a hover preview is shown. |
+| `inputModeLine()` | -  | Input Mode Line. |
+| `inputModeRectangle()` | -  | Input Mode Rectangle. |
+| `inputModeRectangleOutline()` | -  | Input Mode Rectangle Outline. |
+| `inputModeEllipse()` | -  | Input Mode Ellipse. |
+| `inputModeEllipseOutline()` | -  | Input Mode Ellipse Outline. |
+| `selectLayers(indexes)` | -    | Select one or more layers by index array. |
+| `getLayers()` | -    | Get layer index array. |
 | `addLayer(option)` | -        | Add layer. `name`, `type` required. |
-| `removeLayer(index)` | -      | Remove layer. |
-| `flattenLayers(layerIndexes)` | -      | Flatten layers. |
-| `getColor()` | -     | Get selected color |
-| `getColors()` | -    | Get colors. |
-| `getLayerColorIndexes()` | -  | Get selected layer colors. |
-| `selectColor(index)` | -    | Select color. |
-| `setColor(index, r, g, b, a)` | -  | Set Color. |
-| `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. |
-| `getSelection()` | -  | Get selection pixels. |
-| `clearSelection()` | -  | Clear selection. |
-| `moveSelection(x, y)` | -    | Move selection. |
-| `flipHorizontal()` | -  | Flip horizontal selection. |
-| `flipVertical()` | -  | Flip vertical selection. |
-| `invert()` | -  | Invert layer. |
-| `outline()` | -  | Outline layer with selected color. |
-| `glow()` | -  | Glow layer with selected color. |
-| `drawPixels([[x, y, color], ...])` | -  | Draw pixels. Color optional. |
-| `drawRectangle(x, y, width, height, isOutline)` | -  | Draw rectangle |
-| `drawEllipse(x, y, width, height, isOutline)` | -  | Draw ellipse. |
-| `drawLine()` | -  | Draw line. |
-| `flush()` | -  | Flush changes to history. |
+| `removeLayer(index)` | -      | Remove layer by index. |
+| `flattenLayers(layerIndexes)` | -      | Flatten layers (not yet implemented). |
+| `getColor(index)` | -     | Get color by index. |
+| `getColors()` | -    | Get all colors. |
+| `getColorAt(x, y)` | -    | Get the export color index at a coordinate. |
+| `getLayerAt(x, y)` | -    | Get the top-most layer index with a color at a coordinate, or `null`. |
+| `getLayerColorIndexes(layerIndex?)` | -  | Get unique color indexes on selected (or given) layer. |
+| `getLayerPaths()` | -  | Get SVG path strings per color per layer. |
+| `selectColor(index)` | -    | Set the active draw color. |
+| `setColor(index, r, g, b, a)` | -  | Update a color by index. |
+| `addColor(r, g, b, a)` | -    | Append a color. |
+| `removeColor(index)` | -    | Remove a color by index. |
+| `moveColor(startIndex, endIndex)` | -    | Move a color (not yet implemented). |
+| `mergeColor(fromIndex, toIndex)` | -    | Merge one color into another (not yet implemented). |
+| `rotateClockwise()` | -    | Rotate active layer 90° clockwise. |
+| `rotateCounterclockwise()` | -    | Rotate active layer 90° counter-clockwise. |
+| `move(x, y)` | -  | Translate active layer by x/y pixels. |
+| `flipHorizontal()` | -  | Flip active layer horizontally. |
+| `flipVertical()` | -  | Flip active layer vertically. |
+| `invert()` | -  | Invert active layer (2-color only). |
+| `outline(include?)` | -  | Draw outline around active layer with selected color. |
+| `glow(include?)` | -  | Draw glow (outer outline) with selected color. |
+| `applyGuides()` | -  | Draw guide lines onto the base layer. |
+| `clearGuides()` | -  | Clear guide lines (not yet implemented). |
+| `drawGrid(grid, layer?)` | -  | Draw a full 2d color-index grid onto a layer. |
+| `drawPixel(x, y, color, layer?)` | -  | Draw a single pixel. |
+| `hasSelection()` | -  | Returns true when pixels are selected. |
+| `getSelection()` | -  | Get selection pixels (not yet implemented). |
+| `clearSelection()` | -  | Deselect all pixels. |
+| `moveSelection(x, y)` | -    | Translate selection and its pixels by x/y. |
 
 ### `getJson(options)` Method
 
@@ -107,8 +122,8 @@ The `getJson` method allows getting the JSON representation of the current edito
 ```typescript
 @Part() $editor: PgInputPixelEditor;
 
-handleSave() {
-  const json = await this.$editor.save({
+async handleSave() {
+  const json = await this.$editor.getJson({
     // Include history
     history: true,
   });
@@ -118,16 +133,13 @@ handleSave() {
 
 ### `setJson(json)` Method
 
-The open method allows loading json for previously created images.
+The `setJson` method loads a previously saved JSON file into the editor.
 
 ```typescript
 @Part() $editor: PgInputPixelEditor;
 
-handleOpen() {
-  const error = await this.$editor.open(json);
-  if (error) {
-    throw new Error(error.message);
-  }
+async handleOpen(json) {
+  await this.$editor.setJson(json);
 }
 ```
 
@@ -135,6 +147,14 @@ handleOpen() {
 
 ### `change`
 
+Debounced — fires 1 second after the last edit. The detail contains the cached export grid.
+
+```typescript
+this.$input.addEventListener('change', (e: any) => {
+  const { export: grid } = e.detail;
+});
+```
+
 ### `selectLayer`
 
 Using `InputMode.Cursor` individual pixels can be clicked on to select the layer. Note, selecting a layer does not automatically select it. The event must be handled.
@@ -142,10 +162,25 @@ Using `InputMode.Cursor` individual pixels can be clicked on to select the layer
 ```typescript
 this.$input.addEventListener('selectlayer', (e: any) => {
   const { color, index } = e.detail;
-  this.selectLayers([index]);
+  this.$input.selectLayers([index]);
 })
 ```
 
+## Keyboard Shortcuts
+
+The wrapper is focusable (`tabindex="0"`); shortcuts apply while the editor has focus.
+
+| Keys | Description |
+| ---- | ----------- |
+| `Escape` | Clear the current selection. |
+| `Delete` | Delete the pixels in the current selection. |
+| `Arrow Keys` | Move the current selection by 1 pixel. |
+| `Shift + Arrow Keys` | Move the current selection by 10 pixels. |
+| `Ctrl + C` | Copy the selection (or the full export when nothing is selected) to the clipboard as a PNG. |
+| `Ctrl + V` | Paste clipboard PNG / easel JSON (work in progress — currently logs metadata only). |
+| `Ctrl + Z` | Undo. |
+| `Ctrl + Shift + Z` / `Ctrl + Y` | Redo. |
+
 ## JSON Format
 
 - `width` - Image width.
@@ -360,7 +395,7 @@ To create a repeating 10 pixel grid with an offset `5` and limit `10`. The use c
 
 Exports by default include the entire canvas, but can be resized to a specific pixel size or grid. The `x`, `y`, `width`, and `height` are optional.
 
-Use `getExport(id)` with a `id` value to get the data grid. This is ideal for export previews.
+Use `getExport()` to get the cached 2d color-index grid. Use `getExportCanvas(options)` with `x`, `y`, `width`, `height` to crop to a region — ideal for export previews.
 
 ```json
 {
@@ -388,7 +423,7 @@ Use `getExport(id)` with a `id` value to get the data grid. This is ideal for ex
 
 The history list contains every change made to the canvas. All feature insert an entry into history. Pens and pattern tools will group as to cut down history entries.
 
-Note: Calling the `draw*()` commands programatically will group into a single history item. To create multiple entries call `flush()`.
+Note: Calling the `draw*()` commands programmatically will group into a single history item.
 
 - Undo a change
 - Redo an undo

package/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -253,7 +253,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
           }
         })
       );
-      this.$input.addLayer();
+      this.$input.addLayer({ name: 'layer 1', type: 'pixel' });
     });
     this.$addLayerReference.addEventListener('click', () => {
       this.$layers.data.push(
@@ -268,7 +268,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
           }
         })
       );
-      this.$input.addLayer();
+      this.$input.addLayer({ name: 'layer 1', type: 'pixel' });
     });
     // Colors
     this.$colors.columns = [{
@@ -346,9 +346,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     });
     this.$addColor.addEventListener('click', () => {
       this.$colors.data.push(createTableItem({
-        r: 5,
-        g: 5,
-        b: 5,
+        r: 0,
+        g: 0,
+        b: 0,
         a: 1,
         selected: false,
         select: {
@@ -361,6 +361,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
           icon: IconTrash
         }
       }));
+      this.$input.addColor(0, 0, 0, 1);
     });
   }