@pictogrammers/components 0.5.25 → 0.5.27

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.5.25",
+    "version": "0.5.27",
     "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);
@@ -354,15 +351,26 @@ export default class PgInputPixelEditor extends HTMLElement {
       this.$selectionPath.classList.toggle('hide', true);
     }
 
-    // Render individual pixels, topmost non-transparent layer wins
+    // 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++) {
       for (let x = 0; x < this.width; 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]]);
+        }
       }
     }
   }
@@ -547,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();
     });
@@ -1223,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) => {
@@ -1431,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
@@ -1483,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}`);
     }
   }
 
@@ -1605,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/overlayMenu/overlayMenu.ts

@@ -63,7 +63,9 @@ export default class PgOverlayMenu extends PgOverlay {
         }
       });
     }, {
+      // @ts-ignore
       trackVisibility: true,
+      delay: 100,
       root: null,      // Defaults to the browser viewport
       threshold: 0     // Triggers as soon as even 1 pixel enters or leaves
     });

package/pg/overlaySelectMenu/overlaySelectMenu.ts

@@ -77,18 +77,26 @@ export default class PgOverlaySelectMenu extends PgOverlay {
     this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
     // Focus
     this.$menu.focus(index);
-    // Overlay
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        console.log(entry.intersectionRatio);
-        //this.$overlay.classList.toggle('no-offset', entry.intersectionRatio < 1);
-        // entry.isIntersecting will be false if it is entirely outside the viewport
-        if (!entry.isIntersecting) {
-          console.log('Element is completely outside the viewport');
-        } else {
-          console.log('Element is at least partially inside the viewport');
-        }
-      });
+    // Keep the menu fully within the viewport once its real size is known
+    const observer = new IntersectionObserver(([entry]) => {
+      observer.disconnect();
+      if (entry.intersectionRatio === 1) {
+        return;
+      }
+      const { top, bottom } = entry.boundingClientRect;
+      const viewportHeight = entry.rootBounds?.height ?? window.innerHeight;
+      let offset = 0;
+      if (bottom > viewportHeight) {
+        offset = viewportHeight - bottom;
+      }
+      // Prefer keeping the top edge visible over the bottom if it can't fully fit
+      if (top + offset < 0) {
+        offset = -top;
+      }
+      if (offset !== 0) {
+        y += offset;
+        this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
+      }
     }, {
       root: null,      // Defaults to the browser viewport
       threshold: 1     // Triggers as soon as even 1 pixel enters or leaves

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'));
-  }
-}