@pictogrammers/components 0.5.24 → 0.5.26

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.5.24",
+    "version": "0.5.26",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

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

@@ -184,6 +184,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
       }
     });
     // Layers
+    // The input no longer seeds a default layer; create the one shown
+    // as already-selected in the layers table below.
+    this.$input.addLayer({ name: 'Layer 1', type: 'pixel' });
     this.$layers.columns = [{
       label: 'Name',
       key: 'name',

package/pg/inputPixelEditor/inputPixelEditor.ts

@@ -173,7 +173,6 @@ export default class PgInputPixelEditor extends HTMLElement {
   #colors: Color[] = [
     [0, 0, 0, 0],
     [0, 0, 0, 1],
-    [255, 0, 255, 1]
   ];
   #baseLayer: HTMLCanvasElement;
   #baseLayerContext: CanvasRenderingContext2D;
@@ -282,16 +281,14 @@ export default class PgInputPixelEditor extends HTMLElement {
     }
     this.$selection.setAttribute('viewBox', `0 0 ${this.width * this.size} ${this.height * this.size}`);
     if (this.#reset) {
+      // No default layer: callers (e.g. addLayer()) are expected to build
+      // up #layers/#data explicitly. A seeded "Layer 1" here used to sit
+      // at index 0 unknown to callers that always addLayer() their own
+      // first layer too, leaving a phantom extra layer that (combined with
+      // setData's indexing) silently absorbed every layer's paint.
       this.#layer = [0];
-      this.#layers = [{
-        name: 'Layer 1',
-        type: 'pixel',
-        export: true,
-        locked: false,
-        visible: true,
-        opacity: 1
-      }];
-      this.#data = [fillGrid(this.width, this.height)];
+      this.#layers = [];
+      this.#data = [];
       this.#export = fillGrid(this.width, this.height);
       this.#selectionPreview = fillGrid(this.width, this.height);
       this.#selection = fillGrid(this.width, this.height);
@@ -305,29 +302,46 @@ export default class PgInputPixelEditor extends HTMLElement {
   }
 
   /**
-   * Clip a cached grid so its dimensions never exceed the current
-   * width/height. Used when the canvas is made smaller.
-   * @param grid 2d grid to clip in place
+   * Grow or clip a cached grid in place so it is exactly width x height.
+   * New rows/cells are filled with 0. Each grid is resized independently
+   * so multi-layer grids never drift out of sync with each other (a prior
+   * version resized `#export`/`#selection`/`#selectionPreview` once per
+   * layer instead of once per grid, and used a single layer's length to
+   * decide whether other layers needed growing, which could leave a layer
+   * short and let #redraw read past its real length).
+   * @param grid 2d grid to resize in place
+   * @param width target width
+   * @param height target height
    */
-  #clipGrid(grid: number[][]) {
-    if (grid.length > this.height) {
-      grid.length = this.height;
+  #resizeGrid(grid: number[][], width: number, height: number) {
+    if (grid.length > height) {
+      grid.length = height;
     }
-    for (let y = 0; y < grid.length; y++) {
-      if (grid[y].length > this.width) {
-        grid[y].length = this.width;
+    for (let y = 0; y < height; y++) {
+      if (!grid[y]) {
+        grid[y] = new Array(width).fill(0);
+        continue;
+      }
+      if (grid[y].length > width) {
+        grid[y].length = width;
+      } else {
+        for (let x = grid[y].length; x < width; x++) {
+          grid[y].push(0);
+        }
       }
     }
   }
 
   #redraw() {
-    // When the canvas shrinks, clip the cached grids so stale rows/columns
-    // outside the new bounds are dropped (the grow case is handled below).
-    this.#clipGrid(this.#export);
-    this.#clipGrid(this.#selection);
-    this.#clipGrid(this.#selectionPreview);
+    // Resize every cached grid to the current width/height so stale
+    // rows/columns are dropped when shrinking and missing rows/columns are
+    // backfilled with 0 when growing, before anything reads from them.
+    this.#data.forEach((layer) => this.#resizeGrid(layer, this.width, this.height));
+    this.#resizeGrid(this.#export, this.width, this.height);
+    this.#resizeGrid(this.#selection, this.width, this.height);
+    this.#resizeGrid(this.#selectionPreview, this.width, this.height);
     // Drop selection pixels that now fall outside the canvas so the
-    // selection map stays in sync with the clipped #selection grid.
+    // selection map stays in sync with the resized #selection grid.
     this.#selectionPixels.forEach(([x, y], key) => {
       if (x >= this.width || y >= this.height) {
         this.#selectionPixels.delete(key);
@@ -337,33 +351,26 @@ export default class PgInputPixelEditor extends HTMLElement {
       this.$selectionPath.classList.toggle('hide', true);
     }
 
-    // Render individual pixels
-    const data = this.#data.toReversed();
-    const layerCount = data.length;
+    // Render individual pixels, topmost non-transparent layer wins. A cell
+    // with no color on any layer still needs #setPixel if #export disagrees,
+    // so it actually clears to background — e.g. after removeColor/moveColor
+    // zero out cells that used to hold paint. Skipping that check (instead
+    // of just unconditionally calling #setPixel for every blank cell) keeps
+    // the common case — most cells are already blank on both sides — as
+    // cheap as it was before, since #setPixel does real canvas work per call.
     for (let y = 0; y < this.height; y++) {
-      if (y >= data[0].length) {
-        for (let l = 0; l < layerCount; l++) {
-          data[l].push(new Array(this.width).fill(0));
-          this.#export.push(new Array(this.width).fill(0));
-          this.#selection.push(new Array(this.width).fill(0));
-          this.#selectionPreview.push(new Array(this.width).fill(0));
-        }
-      }
       for (let x = 0; x < this.width; x++) {
-        if (x >= data[0][y].length) {
-          for (let l = 0; l < layerCount; l++) {
-            data[l][y].push(0);
-            this.#export[y].push(0);
-            this.#selection[y].push(0);
-            this.#selectionPreview[y].push(0);
-          }
-        }
-        for (let l = 0; l < layerCount; l++) {
-          if (data[l][y][x] !== 0) {
-            this.#setPixel(x, y, data[l][y][x]);
+        let painted = false;
+        for (let l = this.#data.length - 1; l >= 0; l--) {
+          if (this.#data[l][y][x] !== 0) {
+            this.#setPixel(x, y, this.#data[l][y][x], [l]);
+            painted = true;
             break;
           }
         }
+        if (!painted && this.#export[y][x] !== 0) {
+          this.#setPixel(x, y, 0, [this.#layer[0]]);
+        }
       }
     }
   }
@@ -548,15 +555,18 @@ export default class PgInputPixelEditor extends HTMLElement {
     );
     // preview layer
     this.#previewLayerContext.clearRect(0, 0, actualWidth, actualHeight);
+    const center = this.size / 2;
+    const outerRadius = Math.max(1, this.size * 0.3);
+    const innerRadius = Math.max(0.5, outerRadius - 1);
     pixels.forEach(({ x, y }) => {
       this.#previewLayerContext.fillStyle = WHITE;
       this.#previewLayerContext.beginPath();
-      this.#previewLayerContext.arc(x * totalSize + 5, y * totalSize + 5, 3, 0, 2 * Math.PI);
+      this.#previewLayerContext.arc(x * totalSize + center, y * totalSize + center, outerRadius, 0, 2 * Math.PI);
       this.#previewLayerContext.closePath();
       this.#previewLayerContext.fill();
       this.#previewLayerContext.fillStyle = '#1B79C8';
       this.#previewLayerContext.beginPath();
-      this.#previewLayerContext.arc(x * totalSize + 5, y * totalSize + 5, 2, 0, 2 * Math.PI);
+      this.#previewLayerContext.arc(x * totalSize + center, y * totalSize + center, innerRadius, 0, 2 * Math.PI);
       this.#previewLayerContext.closePath();
       this.#previewLayerContext.fill();
     });
@@ -1224,7 +1234,7 @@ export default class PgInputPixelEditor extends HTMLElement {
 
   invert() {
     // Only works with 2 colors
-    if (this.#colors.length > 2) {
+    if (this.getActiveColors().length > 2) {
       return;
     }
     iterateGrid(this.#data[this.#layer[0]], (x, y) => {
@@ -1432,30 +1442,129 @@ export default class PgInputPixelEditor extends HTMLElement {
     return this.#colors;
   }
 
+  /**
+   * Replace the full palette, e.g. to sync an externally-managed palette
+   * (a file-level color list) onto this editor. Does not remap existing
+   * pixel data; callers are responsible for the new colors lining up with
+   * indexes already painted on this editor.
+   *
+   * Clones `colors` (and each entry) so this editor's palette stays its
+   * own array — callers commonly push the same list onto several editors
+   * to keep them in sync, and sharing the array by reference would make
+   * every one of those editors mutate the same underlying palette.
+   * @param colors New palette
+   */
+  setColors(colors: Color[]) {
+    this.#colors = colors.map((color) => [...color] as Color);
+    this.#redraw();
+    this.#handleColorsChange();
+  }
+
   addColor(r: number, g: number, b: number, a: number) {
     this.#colors.push([r, g, b, a]);
+    this.#handleColorsChange();
   }
 
-  removeColor(index) {
+  /**
+   * Remove a color from the palette. Index 0 (the background/empty color)
+   * can't be removed. Pixels painted with the removed color become empty
+   * (0); pixels painted with a later color shift down to match the new
+   * palette indexes.
+   * @param index Color index to remove
+   */
+  removeColor(index: number) {
+    if (index <= 0 || index >= this.#colors.length) { return; }
     this.#colors.splice(index, 1);
+    this.#data.forEach((layer) => {
+      for (let y = 0; y < layer.length; y++) {
+        for (let x = 0; x < layer[y].length; x++) {
+          const value = layer[y][x];
+          if (value === index) {
+            layer[y][x] = 0;
+          } else if (value > index) {
+            layer[y][x] = value - 1;
+          }
+        }
+      }
+    });
+    if (this.#color === index) {
+      this.#color = 0;
+    } else if (this.#color > index) {
+      this.#color -= 1;
+    }
+    this.#redraw();
+    this.#handleColorsChange();
   }
 
   getColor(index) {
     return this.#colors[index];
   }
 
-  setColor(index, r, g, b, a) {
+  setColor(index: number, r: number, g: number, b: number, a: number) {
     this.#colors[index] = [r, g, b, a];
+    this.#redraw();
+    this.#handleColorsChange();
   }
 
-  moveColor(startIndex, endIndex) {
+  /**
+   * Reorder a color within the palette. Index 0 (the background/empty
+   * color) can't be moved, and nothing can move into index 0. Repaints
+   * pixels so they keep showing the same color at its new index.
+   * @param startIndex Current color index
+   * @param endIndex Target color index
+   */
+  moveColor(startIndex: number, endIndex: number) {
+    if (startIndex === endIndex) { return; }
+    if (startIndex <= 0 || endIndex <= 0
+      || startIndex >= this.#colors.length || endIndex >= this.#colors.length) {
+      return;
+    }
+    const [moved] = this.#colors.splice(startIndex, 1);
+    this.#colors.splice(endIndex, 0, moved);
+    const mapIndex = (value: number) => {
+      if (value === startIndex) { return endIndex; }
+      if (startIndex < endIndex && value > startIndex && value <= endIndex) { return value - 1; }
+      if (startIndex > endIndex && value >= endIndex && value < startIndex) { return value + 1; }
+      return value;
+    };
+    this.#data.forEach((layer) => {
+      for (let y = 0; y < layer.length; y++) {
+        for (let x = 0; x < layer[y].length; x++) {
+          layer[y][x] = mapIndex(layer[y][x]);
+        }
+      }
+    });
+    this.#color = mapIndex(this.#color);
+    this.#redraw();
+    this.#handleColorsChange();
+  }
 
+  #handleColorsChange() {
+    this.dispatchEvent(new CustomEvent('colorschange', {
+      detail: { colors: this.#colors }
+    }));
   }
 
   getColorAt(x: number, y: number) {
     return this.#export[y][x];
   }
 
+  /**
+   * Instead of returning all colors only include
+   * the currently used colors.
+   */
+  getActiveColors(): Color[] {
+    // Index 0 is the empty pixel and is never included
+    const used = new Set<number>();
+    for (const layer of this.#data) {
+      getGridColorIndexes(layer).forEach((index) => used.add(index));
+    }
+    return [...used]
+      .sort((a, b) => a - b)
+      .filter((index) => index < this.#colors.length)
+      .map((index) => this.#colors[index]);
+  }
+
   /**
    * Get layer index with first valid color.
    * @param x x
@@ -1484,14 +1593,43 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#layers.push({
       name,
       type,
-      export: optional.exclude ?? true,
+      // `exclude` means "exclude from export"; invert it, don't pass it
+      // straight through, or every layer a caller explicitly includes
+      // (exclude: false) ends up marked excluded.
+      export: !(optional.exclude ?? false),
       locked: optional.locked ?? false,
       visible: optional.hidden ?? true,
       opacity: optional.opacity ?? 1,
     });
-    // short hand for initial data
+    // short hand for initial data: `data` is this new layer's own color
+    // group list (getData()'s per-layer shape), applied at its real index
+    // — not routed through setData(), whose indexing is relative to the
+    // layers passed in that call, not this layer's actual position.
     if (optional.data) {
-      this.setData(optional.data);
+      this.#setLayerData(this.#layers.length - 1, optional.data);
+    }
+  }
+
+  #setLayerData(layerIndex: number, layerColorGroups: { color: number; path: string }[]) {
+    const { type } = this.#layers[layerIndex];
+    switch (type) {
+      case 'pixel':
+        layerColorGroups.forEach(({ color, path }) => {
+          const temp = maskToBitmap(path, this.width, this.height);
+          temp.forEach((tempY, y) => {
+            tempY.forEach((tempX, x) => {
+              if (tempX !== 0) {
+                this.#setPixel(x, y, color, [layerIndex]);
+              }
+            });
+          });
+        });
+        break;
+      case 'reference':
+        console.log('reference', layerColorGroups);
+        break;
+      default:
+        throw new Error(`unknown type ${type}`);
     }
   }
 
@@ -1606,30 +1744,17 @@ export default class PgInputPixelEditor extends HTMLElement {
   }
 
   /**
-   * Set data
+   * Set data. Mirrors getData()'s shape exactly: `data[layerIndex]` is the
+   * full list of color groups for that layer (one entry per distinct color
+   * used on it), not a single {color, path}. A layer can use more than one
+   * color, and treating `data[i]` as "the i-th layer's one color" instead
+   * of "layer i's color list" misreads every color past the first as
+   * belonging to a different layer — silently painting it onto whichever
+   * other layer happens to sit at that index, or throwing if none does.
    */
   setData(data: any[]) {
-    data.forEach((layerData, layerIndex) => {
-      const { type } = this.#layers[layerIndex];
-      switch(type) {
-        case 'pixel':
-          const { color, path } = layerData;
-          const temp = maskToBitmap(path, this.width, this.height);
-          temp.forEach((tempY, y) => {
-            tempY.forEach((tempX, x) => {
-              if (tempX !== 0) {
-                //this.#data[layerIndex][y][x] = color;
-                this.#setPixel(x, y, color, [layerIndex]);
-              }
-            });
-          });
-          break;
-        case 'reference':
-          console.log('reference', layerData);
-          break;
-        default:
-          throw new Error(`unknown type ${type}`);
-      }
+    data.forEach((layerColorGroups, layerIndex) => {
+      this.#setLayerData(layerIndex, layerColorGroups);
     });
   }
 

package/pg/inputTextarea copy/README.md

@@ -1,39 +0,0 @@
-# `<pg-input-textarea>`
-
-The `pg-input-textarea` component creates an input that accepts multiline text. Additionally it can resize.
-
-```typescript
-import '@pictogrammers/components/pgInputTextarea';
-import { PgInputTextarea } from '@pictogrammers/components/pgInputTextarea';
-```
-
-```html
-<pg-input-textarea value="50"></pg-input-textarea>
-```
-
-## Attributes
-
-| Attributes  | Tested   | Description |
-| ----------- | -------- | ----------- |
-| name        |          | Unique name in `pg-form` |
-| value       |          | Field value |
-| placeholder |          | Placeholder text |
-
-## Events
-
-| Events     | Tested   | Description |
-| ---------- | -------- | ----------- |
-| change     |          | `{ detail: { value }` |
-| input      |          | `{ detail: { value }` |
-| caret      |          | `{ detail: { column, row }}` |
-
-## CSS Variables
-
-| CSS Variables       | Default   | Description |
-| ------------------- | --------- | ----------- |
-| `--pg-input-textarea-padding-inline` | `0.5rem` | Padding inline. |
-| `--pg-input-textarea-padding-inline-start` | `0.5rem` | Padding inline start. |
-| `--pg-input-textarea-padding-inline-end` | `0.5rem` | Padding inline end. |
-| `--pg-input-textarea-padding-block` | `0.25rem` | Padding block. |
-| `--pg-input-textarea-padding-block-start` | `0.25rem` | Padding block start. |
-| `--pg-input-textarea-padding-block-end` | `0.25rem` | Padding block end. |

package/pg/inputTextarea copy/inputTextarea.css

@@ -1,41 +0,0 @@
-:host {
-  display: block;
-  font-family: var(--pg-font-family, system-ui);
-}
-
-[part=input] {
-  border: 1px solid var(--pg-input-text-border-color, #453C4F);
-  border-radius: 0.125rem;
-  padding-inline-start: var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem));
-  padding-inline-end: var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem));
-  padding-block-start: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
-  padding-block-end: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
-  font-family: var(--pg-input-text-font-family, var(--pg-font-family));
-  font-size: 1rem;
-  outline: none;
-  field-sizing: content;
-  min-width: calc(
-    100%
-    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
-    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
-    - 2px
-  );
-  max-width: calc(
-    var(--pg-input-text-max-width, 100%)
-    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
-    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
-    - 2px
-  );
-  background-color: transparent;
-}
-
-[part=input]:read-only {
-  border-color: transparent;
-}
-
-[part=input]:active {
-  box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));
-}
-[part=input]:focus {
-  box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
-}

package/pg/inputTextarea copy/inputTextarea.html

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

package/pg/inputTextarea copy/inputTextarea.spec.ts

@@ -1,59 +0,0 @@
-import { selectComponent, getProps } from '@pictogrammers/element';
-
-import './inputTextarea';
-import PgInputText from './inputTextarea';
-
-const PG_INPUT_TEXT = 'pg-input-text';
-
-describe('pg-input-text', () => {
-
-  beforeEach(() => {
-    var c = document.createElement(PG_INPUT_TEXT);
-    document.body.appendChild(c);
-  });
-
-  afterEach(() => {
-    while (document.body.firstChild) {
-      document.body.removeChild(document.body.firstChild);
-    }
-  });
-
-  it('should be registered', () => {
-    expect(customElements.get(PG_INPUT_TEXT)).toBeDefined();
-  });
-
-  it('should only expose known props', () => {
-    const props = getProps(PG_INPUT_TEXT);
-    expect(props.length).toBe(3);
-    expect(props).toContain('name');
-    expect(props).toContain('value');
-    expect(props).toContain('placeholder');
-  });
-
-  it('should default value to empty', () => {
-    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
-    const { $input } = component;
-    expect($input.value).toEqual('');
-  });
-
-  it('should set value to "Hello World!"', () => {
-    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
-    component.value = 'Hello World!';
-    const { $input } = component;
-    expect($input.value).toEqual('Hello World!');
-  });
-
-  it('should default placeholder to empty', () => {
-    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
-    const { $input } = component;
-    expect($input.placeholder).toEqual('');
-  });
-
-  it('should set placeholder to "Hello World!"', () => {
-    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
-    component.placeholder = 'Hello World!';
-    const { $input } = component;
-    expect($input.placeholder).toEqual('Hello World!');
-  });
-
-});

package/pg/inputTextarea copy/inputTextarea.ts

@@ -1,79 +0,0 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
-
-import template from './inputTextarea.html';
-import style from './inputTextarea.css';
-
-@Component({
-  selector: 'pg-input-textarea',
-  style,
-  template
-})
-export default class PgInputTextarea extends HTMLElement {
-  @Prop() name: string = '';
-  @Prop() value: string = '';
-  @Prop() placeholder: string = '';
-  @Prop() readOnly: boolean = false;
-
-  @Part() $input: HTMLInputElement;
-
-  connectedCallback() {
-    this.$input.addEventListener('input', this.handleInput.bind(this));
-    this.$input.addEventListener('change', this.handleChange.bind(this));
-    this.$input.addEventListener('focus', this.handleFocus.bind(this));
-    this.$input.addEventListener('focus', this.handleBlur.bind(this));
-  }
-
-  focus() {
-    this.$input.focus();
-  }
-
-  skipValue = false;
-
-  render(changes) {
-    if (changes.value && !this.skipValue) {
-      this.$input.value = this.value;
-    }
-    if (changes.placeholder) {
-      this.$input.placeholder = this.placeholder;
-    }
-    if (changes.readOnly) {
-      this.$input.readOnly = this.readOnly;
-    }
-    this.skipValue = false;
-  }
-
-  handleInput(e) {
-    e.stopPropagation();
-    this.skipValue = true;
-    this.value = e.target.value;
-    this.dispatchEvent(
-      new CustomEvent('input', {
-        detail: {
-          value: e.target.value,
-          name: e.name
-        }
-      })
-    );
-  }
-
-  handleChange(e) {
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        detail: {
-          value: e.target.value,
-          name: e.name
-        }
-      })
-    );
-  }
-
-  handleFocus(e: any) {
-    e.preventDefault();
-    this.dispatchEvent(new CustomEvent('focus'));
-  }
-
-  handleBlur(e: any) {
-    e.preventDefault();
-    this.dispatchEvent(new CustomEvent('blur'));
-  }
-}