@pictogrammers/components 0.5.21 → 0.5.23

package/package.json

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

package/pg/inputPixelEditor/inputPixelEditor.ts

@@ -304,7 +304,39 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#updateGrid();
   }
 
+  /**
+   * 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
+   */
+  #clipGrid(grid: number[][]) {
+    if (grid.length > this.height) {
+      grid.length = this.height;
+    }
+    for (let y = 0; y < grid.length; y++) {
+      if (grid[y].length > this.width) {
+        grid[y].length = this.width;
+      }
+    }
+  }
+
   #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);
+    // Drop selection pixels that now fall outside the canvas so the
+    // selection map stays in sync with the clipped #selection grid.
+    this.#selectionPixels.forEach(([x, y], key) => {
+      if (x >= this.width || y >= this.height) {
+        this.#selectionPixels.delete(key);
+      }
+    });
+    if (this.#selectionPixels.size === 0) {
+      this.$selectionPath.classList.toggle('hide', true);
+    }
+
     // Render individual pixels
     const data = this.#data.toReversed();
     const layerCount = data.length;

package/pg/inputSelect/__examples__/basic/basic.ts

@@ -17,7 +17,13 @@ export default class XPgInputSelectBasic extends HTMLElement {
       { label: 'Option 1', value: 'option1' },
       { label: 'Option 2', value: 'option2' },
       { label: 'Option 3', value: 'option3' },
-      { label: 'Option 4', value: 'option4' }
+      { label: 'Option 4', value: 'option4' },
+      { label: 'Option 5', value: 'option5' },
+      { label: 'Option 6', value: 'option6' },
+      { label: 'Option 7', value: 'option7' },
+      { label: 'Option 8', value: 'option8' },
+      { label: 'Option 9', value: 'option9' },
+      { label: 'Option 10', value: 'option10' }
     );
     this.$input.default = { label: 'None', value: '', disabled: true };
     //this.$input.value = this.$input.options[1].value;

package/pg/jsonBoolean/__examples__/basic/basic.ts

@@ -0,0 +1,28 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgJson from '../../jsonBoolean';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-json-boolean-basic',
+  template
+})
+export default class XPgJsonBasic extends HTMLElement {
+  @Part() $json: PgJson;
+
+  connectedCallback() {
+    this.$json.value = {
+      users: [{
+        name: 'Dipper Pines',
+        age: 12,
+      }]
+    }; // Array or Object
+    this.$json.addEventListener('change', (e: any) => {
+      const { parent, key, path, value } = e.detail;
+      if (value !== parent[key]) {
+        parent[key] = value;
+      }
+    });
+  }
+}

package/pg/jsonNumber/__examples__/basic/basic.ts

@@ -0,0 +1,28 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgJson from '../../jsonNumber';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-json-number-basic',
+  template
+})
+export default class XPgJsonBasic extends HTMLElement {
+  @Part() $json: PgJson;
+
+  connectedCallback() {
+    this.$json.value = {
+      users: [{
+        name: 'Dipper Pines',
+        age: 12,
+      }]
+    }; // Array or Object
+    this.$json.addEventListener('change', (e: any) => {
+      const { parent, key, path, value } = e.detail;
+      if (value !== parent[key]) {
+        parent[key] = value;
+      }
+    });
+  }
+}

package/pg/jsonString/__examples__/basic/basic.ts

@@ -0,0 +1,28 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgJson from '../../jsonString';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-json-string-basic',
+  template
+})
+export default class XPgJsonBasic extends HTMLElement {
+  @Part() $json: PgJson;
+
+  connectedCallback() {
+    this.$json.value = {
+      users: [{
+        name: 'Dipper Pines',
+        age: 12,
+      }]
+    }; // Array or Object
+    this.$json.addEventListener('change', (e: any) => {
+      const { parent, key, path, value } = e.detail;
+      if (value !== parent[key]) {
+        parent[key] = value;
+      }
+    });
+  }
+}

package/pg/menu/menu.css

@@ -12,6 +12,8 @@
   border-radius: 0.5rem;
   background-color: var(--pg-menu-background-color, #FFFFFF);
   box-shadow: var(--pg-menu-box-shadow, none);
+  max-height: var(--pg-menu-max-height);
+  overflow: var(--pg-menu-overflow);
 }
 
 [part=items].check {

package/pg/modalAlert/modalAlert.css

@@ -16,25 +16,8 @@
   overflow: hidden;
   min-width: 15rem;
 }
-header {
-  border-bottom: 1px solid #ccc;
-  background: #f1f1f1;
-  padding: 0.75rem 1rem;
-}
-header h2 {
+[part="headerText"] {
   font-size: 1.25rem;
   margin: 0;
   font-weight: normal;
-}
-main {
-  padding: 0.5rem 1rem;
-}
-footer {
-  display: flex;
-  flex-direction: row;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid #ccc;
-  background: #f1f1f1;
-  justify-content: flex-end;
-  gap: 0.5rem;
 }

package/pg/modalAlert/modalAlert.html

@@ -4,18 +4,18 @@
     id="dialog1"
     aria-labelledby="dialog_label"
     aria-modal="true">
-    <header part="header">
+    <pg-modal-header part="header">
       <h2 id="dialog_label"
         class="dialog_label"
         part="headerText">
         Alert
       </h2>
-    </header>
-    <main>
+    </pg-modal-header>
+    <pg-modal-body>
       <p part="message"></p>
-    </main>
-    <footer>
+    </pg-modal-body>
+    <pg-modal-footer>
       <pg-button part="okay" variant="brand">Okay</pg-button>
-    </footer>
+    </pg-modal-footer>
   </div>
 </div>

package/pg/modalAlert/modalAlert.ts

@@ -5,6 +5,10 @@ import style from './modalAlert.css';
 
 import PgOverlay from '../overlay/overlay';
 import PgButton from '../button/button';
+import PgModalHeader from '../modalHeader/modalHeader';
+
+import '../modalBody/modalBody';
+import '../modalFooter/modalFooter';
 
 @Component({
   selector: 'pg-modal-alert',
@@ -15,7 +19,7 @@ export default class PgModalAlert extends PgOverlay {
   @Prop() header: string = 'Are you sure?';
   @Prop() message: string = 'Are you sure?';
 
-  @Part() $header: HTMLDivElement;
+  @Part() $header: PgModalHeader;
   @Part() $headerText: HTMLHeadingElement;
   @Part() $message: HTMLDivElement;
   @Part() $okay: PgButton;

package/pg/modalPrompt/README.md

@@ -0,0 +1,34 @@
+# `PgModalPrompt`
+
+The `PgModalPrompt` creates a dialog with a single text field, an okay button, and a cancel button. For a message only dialog use `PgModalAlert`. For okay/cancel without a field use `PgModalConfirm`.
+
+```typescript
+import PgModalPrompt from '@pictogrammers/components/pg/modalPrompt';
+```
+
+```typescript
+const result = await PgModalPrompt.open({
+  header: 'Rename Item',
+  message: 'Enter a new name for the item.',
+  value: 'Untitled',
+  placeholder: 'Name',
+});
+if (result === null) {
+  console.log('Cancelled');
+} else {
+  console.log('New name:', result);
+}
+```
+
+## Props
+
+| Props       | Default                    | Description |
+| ----------- | --------------------------- | ----------- |
+| header      | `'Please provide a value'` | Dialog title |
+| message     | `''`                        | Optional message shown above the field |
+| value       | `''`                        | Initial value of the field |
+| placeholder | `''`                        | Placeholder text for the field |
+| okay        | `'Okay'`                    | Okay button label |
+| cancel      | `'Cancel'`                  | Cancel button label |
+
+`close()` resolves with the field's value when `Okay` is clicked (or `Enter` is pressed), and `null` when `Cancel` is clicked or `Escape` is pressed.

package/pg/modalPrompt/__examples__/basic/basic.html

@@ -0,0 +1,4 @@
+<div class="example">
+  <button part="button">Launch Prompt Modal</button>
+  <div><code>Result: </code><code part="result"></code></div>
+</div>

package/pg/modalPrompt/__examples__/basic/basic.ts

@@ -0,0 +1,33 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgModalPrompt from '../../modalPrompt';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-modal-prompt-basic',
+  template
+})
+export default class XPgModalPromptBasic extends HTMLElement {
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
+
+  currentValue = 'Hello World!';
+
+  connectedCallback() {
+    this.$result.textContent = `${this.currentValue}`;
+    this.$button.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  async handleClick() {
+    const result = await PgModalPrompt.open({
+      header: 'Rename Item',
+      message: 'Enter a new name for the item.',
+      value: this.currentValue,
+      placeholder: 'Name',
+    });
+    this.currentValue = result;
+    this.$result.textContent = `${result}`;
+  }
+
+}

package/pg/modalPrompt/index.ts

@@ -0,0 +1,3 @@
+import PgModalPrompt from './modalPrompt';
+
+export default PgModalPrompt;

package/pg/modalPrompt/modalPrompt.css

@@ -0,0 +1,32 @@
+.backdrop {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  justify-content: center;
+  align-items: center;
+}
+.dialog {
+  background: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 1rem rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  min-width: 15rem;
+}
+[part="headerText"] {
+  font-size: 1.25rem;
+  margin: 0;
+  font-weight: normal;
+}
+[part="message"] {
+  margin-block: 0.5rem 1rem;
+}
+[part="message"]:empty {
+  display: none;
+}
+[part="input"] {
+  margin-block-end: 0.5rem;
+}

package/pg/modalPrompt/modalPrompt.html

@@ -0,0 +1,23 @@
+<div class="backdrop">
+  <div class="dialog"
+    role="dialog"
+    id="dialog1"
+    aria-labelledby="dialog_label"
+    aria-modal="true">
+    <pg-modal-header part="header">
+      <h2 id="dialog_label"
+        class="dialog_label"
+        part="headerText">
+        Prompt
+      </h2>
+    </pg-modal-header>
+    <pg-modal-body>
+      <p part="message"></p>
+      <pg-input-text part="input"></pg-input-text>
+    </pg-modal-body>
+    <pg-modal-footer>
+      <pg-button part="cancel">Cancel</pg-button>
+      <pg-button part="okay" variant="brand">Okay</pg-button>
+    </pg-modal-footer>
+  </div>
+</div>

package/pg/modalPrompt/modalPrompt.ts

@@ -0,0 +1,89 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './modalPrompt.html';
+import style from './modalPrompt.css';
+
+import PgOverlay from '../overlay/overlay';
+import PgButton from '../button/button';
+import PgInputText from '../inputText/inputText';
+import PgModalHeader from '../modalHeader/modalHeader';
+
+import '../modalBody/modalBody';
+import '../modalFooter/modalFooter';
+
+@Component({
+  selector: 'pg-modal-prompt',
+  template,
+  style
+})
+export default class PgModalPrompt extends PgOverlay {
+  @Prop() header: string = 'Please provide a value';
+  @Prop() message: string = '';
+  @Prop() value: string = '';
+  @Prop() placeholder: string = '';
+  @Prop() cancel: string = 'Cancel';
+  @Prop() okay: string = 'Okay';
+
+  @Part() $header: PgModalHeader;
+  @Part() $headerText: HTMLHeadingElement;
+  @Part() $message: HTMLParagraphElement;
+  @Part() $input: PgInputText;
+  @Part() $okay: PgButton;
+  @Part() $cancel: PgButton;
+
+  #cacheKeydownHandler: any;
+
+  connectedCallback() {
+    this.$okay.addEventListener('click', this.#handleOkay.bind(this));
+    this.$cancel.addEventListener('click', this.#handleCancel.bind(this));
+    this.$input.addEventListener('keydown', this.#handleInputKeyDown.bind(this));
+    this.#cacheKeydownHandler ??= this.#handleKeyDown.bind(this);
+    document.addEventListener('keydown', this.#cacheKeydownHandler);
+    this.$input.focus();
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this.#cacheKeydownHandler);
+  }
+
+  #handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      this.close(null);
+    }
+  }
+
+  #handleInputKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      this.#handleOkay();
+    }
+  }
+
+  #handleOkay() {
+    this.close(this.$input.value);
+  }
+
+  #handleCancel() {
+    this.close(null);
+  }
+
+  render(changes) {
+    if (changes.header) {
+      this.$headerText.textContent = this.header;
+    }
+    if (changes.message) {
+      this.$message.textContent = this.message;
+    }
+    if (changes.value) {
+      this.$input.value = this.value;
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+    if (changes.okay) {
+      this.$okay.textContent = this.okay;
+    }
+    if (changes.cancel) {
+      this.$cancel.textContent = this.cancel;
+    }
+  }
+}

package/pg/node/__examples__/basic/basic.html

@@ -0,0 +1,9 @@
+<div class="example" style="position: relative;">
+  <pg-node part="node"></pg-node>
+  <div>
+    <code>onchange: <span part="value1"></span></code>
+  </div>
+  <div>
+    <code>oninput: <span part="value2"></span></code>
+  </div>
+</div>

package/pg/node/__examples__/basic/basic.ts

@@ -2,6 +2,7 @@ import { Component, Part } from '@pictogrammers/element';
 import PgNode from '../../node';
 
 import template from './basic.html';
+import PgNodeEditorText from 'components/pg/nodeEditorText/nodeEditorText';
 
 @Component({
   selector: 'x-pg-node-basic',
@@ -12,11 +13,12 @@ export default class XPgNodeBasic extends HTMLElement {
   @Part() $node: PgNode;
 
   connectedCallback() {
+    this.$node.editors.push(PgNodeEditorText);
     this.$node.fields = [{
       label: 'Name',
       value: 'foo',
       name: 'name',
-      type: 'text',
+      type: 'Text',
     }];
     this.$node.addEventListener('change', this.#handleChange.bind(this));
     this.$node.addEventListener('input', this.#handleInput.bind(this));

package/pg/node/node.ts

@@ -40,7 +40,11 @@ export default class PgNode extends HTMLElement {
       container: this.$items,
       items: this.fields,
       type: (item) => {
-        return this.editors.find(x => x.type === item.type);
+        const comp = this.editors.find(x => x.type === item.type);
+        if (!comp) {
+          throw new Error(`"${item.name}" missing in editors array.`);
+        }
+        return comp;
       },
       create: ($item: any, item) => {
         this.height += $item.height;
@@ -54,6 +58,14 @@ export default class PgNode extends HTMLElement {
           this.#syncFieldHeight(item.itemKey, $item);
           this.#dispatchArg('change', item.itemKey, e.detail.value);
         });
+        // Editor events don't compose past this shadow root; proxy the
+        // Link editor's events up for pg-nodes.
+        $item.addEventListener('nodepulse', (e: any) => {
+          this.dispatchEvent(new CustomEvent('nodepulse', { detail: e.detail }));
+        });
+        $item.addEventListener('nodeselection', (e: any) => {
+          this.dispatchEvent(new CustomEvent('nodeselection', { detail: e.detail }));
+        });
       },
     });
 
@@ -67,10 +79,12 @@ export default class PgNode extends HTMLElement {
         this.height += $item.height;
       },
       connect: ($item: any, item) => {
-        // Measured mid-setup, before render() applies the host styles, so
-        // the adjust constant differs from the post-layout one below.
-        const top = this.$node.getBoundingClientRect().top;
-        this.#registerOutputPin(item.key, item.label, $item.getBoundingClientRect().top - top + 31);
+        let height = 0;
+        this.#fieldHeights.forEach((value) => {
+          height += value;
+        });
+        const index = Array.from(this.$outputs.children).indexOf($item);
+        this.#registerOutputPin(item.key, item.label, ((height + index + 2) * 16) + 5);
       },
     });
     this.#intrinsicHeight = this.height;
@@ -78,6 +92,11 @@ export default class PgNode extends HTMLElement {
       this.height = requestedHeight;
     }
     this.$node.addEventListener('pointerover', this.#handlePointerOver.bind(this));
+    this.$node.addEventListener('animationend', (e: AnimationEvent) => {
+      if (e.animationName === 'pg-node-pulse') {
+        this.$node.classList.remove('pulse');
+      }
+    });
   }
 
   // Editor heights are cached by field key so a change event only triggers a
@@ -262,9 +281,13 @@ export default class PgNode extends HTMLElement {
     }
   }
 
+  // Blue attention pulse (3 flashes); the animationend listener added in
+  // connectedCallback clears the class so it can run again later.
   pulse() {
-    // todo: add css class to create a blue animated pulse.
-    // it should also focus the node into view as it may be scrolled out of view.
-    // it should only pulse 3 times.
+    this.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+    // Restart the animation when a pulse is already running.
+    this.$node.classList.remove('pulse');
+    void this.$node.offsetWidth;
+    this.$node.classList.add('pulse');
   }
 }

package/pg/nodeEditorLink/nodeEditorLink.ts

@@ -0,0 +1,66 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nodeEditorLink.html';
+import style from './nodeEditorLink.css';
+
+@Component({
+  selector: 'pg-node-editor-link',
+  style,
+  template,
+})
+export default class PgNodeEditorLink extends HTMLElement {
+
+  static type = 'Link';
+
+  @Prop() label: string = '';
+  @Prop() value: number = 0;
+  @Prop() name: string = '';
+
+  @Part() $label: HTMLSpanElement;
+  @Part() $link: HTMLButtonElement;
+  @Part() $select: HTMLButtonElement;
+
+  connectedCallback() {
+    // Pulse the linked node; pg-node proxies this up to pg-nodes.
+    this.$link.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('nodepulse', {
+        detail: {
+          id: this.value,
+        }
+      }));
+    });
+    // Ask pg-nodes to enter selection mode; it calls back with the picked id.
+    this.$select.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('nodeselection', {
+        detail: {
+          value: this.value,
+          callback: (nodeId: number) => {
+            this.value = nodeId;
+            this.dispatchEvent(new CustomEvent('change', {
+              detail: {
+                value: nodeId,
+              }
+            }));
+          },
+        }
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.value) {
+      this.$link.textContent = `Node ${this.value}`;
+    }
+  }
+
+  get height() {
+    return 2;
+  }
+
+  focus() {
+    this.$link.focus();
+  }
+}

package/pg/nodeEditorRange/nodeEditorRange.html

@@ -0,0 +1,28 @@
+<label>
+  <span part="label"></span>
+  <input type="number" part="min">
+</label>
+<button>
+  <svg viewBox="0 0 24 24">
+    <path d="M19,13H5V11H19V13Z" />
+  </svg>
+</button>
+<button>
+  <svg viewBox="0 0 24 24">
+    <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
+  </svg>
+</button>
+<label>
+  <span part="label"></span>
+  <input type="range" part="max">
+</label>
+<button>
+  <svg viewBox="0 0 24 24">
+    <path d="M19,13H5V11H19V13Z" />
+  </svg>
+</button>
+<button>
+  <svg viewBox="0 0 24 24">
+    <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
+  </svg>
+</button>

package/pg/nodeEditorRange/nodeEditorRange.ts

@@ -20,22 +20,39 @@ export default class PgNodeEditorRange extends HTMLElement {
   @Prop() step: number = 1;
 
   @Part() $label: HTMLLabelElement;
-  @Part() $input: HTMLInputElement;
+  @Part() $min: HTMLInputElement;
+  @Part() $max: HTMLInputElement;
 
   connectedCallback() {
-    this.$input.addEventListener('change', (e: any) => {
+    this.$min.addEventListener('change', (e: any) => {
       e.stopPropagation();
       this.dispatchEvent(new CustomEvent('change', {
         detail: {
-          value: Number(this.$input.value),
+          value: Number(this.$min.value),
         }
       }));
     });
-    this.$input.addEventListener('input', (e: any) => {
+    this.$min.addEventListener('input', (e: any) => {
       e.stopPropagation();
       this.dispatchEvent(new CustomEvent('input', {
         detail: {
-          value: Number(this.$input.value),
+          value: Number(this.$min.value),
+        }
+      }));
+    });
+    this.$max.addEventListener('change', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: Number(this.$max.value),
+        }
+      }));
+    });
+    this.$max.addEventListener('input', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('input', {
+        detail: {
+          value: Number(this.$max.value),
         }
       }));
     });
@@ -46,16 +63,16 @@ export default class PgNodeEditorRange extends HTMLElement {
       this.$label.textContent = this.label;
     }
     if (changes.value) {
-      this.$input.value = String(this.value);
+      this.$min.value = String(this.value);
     }
     if (changes.min) {
-      this.$input.min = String(this.min);
+      this.$min.min = String(this.min);
     }
     if (changes.max) {
-      this.$input.max = String(this.max);
+      this.$min.max = String(this.max);
     }
     if (changes.step) {
-      this.$input.step = String(this.step);
+      this.$min.step = String(this.step);
     }
   }
 
@@ -64,6 +81,6 @@ export default class PgNodeEditorRange extends HTMLElement {
   }
 
   focus() {
-    this.$input.focus();
+    this.$min.focus();
   }
 }

package/pg/nodeEditorText/nodeEditorText.ts

@@ -1,57 +1,58 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
-
-import template from './nodeEditorText.html';
-import style from './nodeEditorText.css';
-
-@Component({
-  selector: 'pg-node-editor-text',
-  style,
-  template,
-})
-export default class PgNodeEditorText extends HTMLElement {
-
-  static type = 'Text';
-
-  @Prop() label: string = '';
-  @Prop() value: string = '';
-  @Prop() name: string = '';
-
-  @Part() $label: HTMLLabelElement;
-  @Part() $input: HTMLInputElement;
-
-  connectedCallback() {
-    this.$input.addEventListener('change', (e: any) => {
-      e.stopPropagation();
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: {
-          value: this.$input.value,
-        }
-      }));
-    });
-    this.$input.addEventListener('input', (e: any) => {
-      e.stopPropagation();
-      this.dispatchEvent(new CustomEvent('input', {
-        detail: {
-          value: this.$input.value,
-        }
-      }));
-    });
-  }
-
-  render(changes: any) {
-    if (changes.label) {
-      this.$label.textContent = this.label;
-    }
-    if (changes.value) {
-      this.$input.value = this.value;
-    }
-  }
-
-  get height() {
-    return 2;
-  }
-
-  focus() {
-    this.$input.focus();
-  }
-}
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgNodeInputText from '../nodeInputText/nodeInputText';
+import template from './nodeEditorText.html';
+import style from './nodeEditorText.css';
+
+@Component({
+  selector: 'pg-node-editor-text',
+  style,
+  template,
+})
+export default class PgNodeEditorText extends HTMLElement {
+
+  static type = 'Text';
+
+  @Prop() label: string = '';
+  @Prop() value: string = '';
+  @Prop() name: string = '';
+
+  @Part() $label: HTMLSpanElement;
+  @Part() $input: PgNodeInputText;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: e.detail.value,
+        }
+      }));
+    });
+    this.$input.addEventListener('input', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('input', {
+        detail: {
+          value: e.detail.value,
+        }
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.value) {
+      this.$input.value = this.value;
+    }
+  }
+
+  get height() {
+    return 2;
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+}

package/pg/nodeEditorTextArray/nodeEditorTextArray.ts

@@ -110,6 +110,12 @@ export default class PgNodeEditorTextArray extends HTMLElement {
             key: uuid(),
             value: '',
           });
+          // Emit updated array
+          this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+              value: this.#inputs.map(x => x.value),
+            },
+          }));
         });
         $item.addEventListener('remove', (e: any) => {
           const { index } = e.detail;
@@ -138,9 +144,12 @@ export default class PgNodeEditorTextArray extends HTMLElement {
         key: uuid(),
         value: '',
       });
-      // Emit updated array
+      // Emit updated array (#inputs is the live list; this.value is only the
+      // initial prop and goes stale after the first edit)
       this.dispatchEvent(new CustomEvent('change', {
-        detail: { value: [...this.value, ''] },
+        detail: {
+          value: this.#inputs.map(x => x.value),
+        },
       }));
     });
   }
@@ -152,7 +161,7 @@ export default class PgNodeEditorTextArray extends HTMLElement {
   }
 
   get height() {
-    return this.#inputs.length + 1;
+    return (this.#inputs.length || 1) + 1;
   }
 
   focus() {

package/pg/nodes/README.md

@@ -39,6 +39,8 @@ import '@pictogrammers/components/pgNodes';
 
 ### Editors
 
+Nodes are made of input fields controlled by editor components. Each editor has a `static type = 'Text';` definition unique to the script.
+
 ```typescript
 this.$script.editors.push(PgNodeEditorText);
 ```

package/pg/nodes/__examples__/basic/basic.ts

@@ -58,7 +58,7 @@ export default class XPgNodesBasic extends HTMLElement {
     this.$script.nodes.push({
       name: 'stateHas',
       label: 'Has',
-      width: 6,
+      width: 10,
       args: [{
         key: 'key',
         label: 'Key',
@@ -117,8 +117,13 @@ export default class XPgNodesBasic extends HTMLElement {
     }, {
       name: 'stateSet',
       label: 'Set',
-      width: 6,
+      width: 10,
       args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }, {
         key: 'value',
         label: 'Value',
         editor: 'Text',
@@ -142,6 +147,11 @@ export default class XPgNodesBasic extends HTMLElement {
       label: 'Equals',
       width: 10,
       args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }, {
         key: 'value',
         label: 'Value',
         editor: 'Text',
@@ -170,6 +180,11 @@ export default class XPgNodesBasic extends HTMLElement {
       label: 'Less Than',
       width: 10,
       args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }, {
         key: 'value',
         label: 'Value',
         editor: 'Number',
@@ -198,6 +213,11 @@ export default class XPgNodesBasic extends HTMLElement {
       label: 'Less Than or Equal',
       width: 10,
       args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }, {
         key: 'value',
         label: 'Value',
         editor: 'Number',
@@ -226,6 +246,11 @@ export default class XPgNodesBasic extends HTMLElement {
       label: 'Greater Than',
       width: 10,
       args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }, {
         key: 'value',
         label: 'Value',
         editor: 'Number',
@@ -254,6 +279,11 @@ export default class XPgNodesBasic extends HTMLElement {
       label: 'Greater Than or Equal',
       width: 10,
       args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }, {
         key: 'value',
         label: 'Value',
         editor: 'Number',
@@ -352,8 +382,13 @@ export default class XPgNodesBasic extends HTMLElement {
     }, {
       name: 'isTrue',
       label: 'Is True',
-      width: 4,
-      args: [],
+      width: 10,
+      args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }],
       nodes: [{
         key: 't',
         label: 'True',
@@ -375,8 +410,13 @@ export default class XPgNodesBasic extends HTMLElement {
     }, {
       name: 'isFalse',
       label: 'Is False',
-      width: 4,
-      args: [],
+      width: 10,
+      args: [{
+        key: 'key',
+        label: 'Key',
+        editor: 'Text',
+        value: '',
+      }],
       nodes: [{
         key: 't',
         label: 'True',
@@ -556,10 +596,11 @@ export default class XPgNodesBasic extends HTMLElement {
     });
     this.$script.items.push({
       id: 2,
-      x: 30,
+      x: 28,
       y: 2,
       node: 'stateSet',
       args: {
+        key: 'health',
         value: '10',
       },
       nodes: {
@@ -568,10 +609,11 @@ export default class XPgNodesBasic extends HTMLElement {
     });
     this.$script.items.push({
       id: 3,
-      x: 30,
+      x: 28,
       y: 10,
       node: 'stateSet',
       args: {
+        key: 'health',
         value: '20',
       },
       nodes: {
@@ -580,7 +622,7 @@ export default class XPgNodesBasic extends HTMLElement {
     });
     this.$script.items.push({
       id: 4,
-      x: 44,
+      x: 40,
       y: 8,
       node: 'log',
       args: {

package/pg/overlayMenu/overlayMenu.css

@@ -15,4 +15,13 @@
   overflow: visible;
   position-visibility: always;
   position-anchor: auto;
+  position-try-fallbacks: --pg-menu-up, --pg-menu-over;
+}
+
+@position-try --pg-menu-up {
+  max-height: 10rem;
+}
+
+@position-try --pg-menu-over {
+  max-height: 5rem;
 }

package/pg/overlayMenu/overlayMenu.ts

@@ -51,6 +51,24 @@ export default class PgOverlayMenu extends PgOverlay {
     if (!this.preventFocus) {
       this.$menu.focus(index);
     }
+    // Overlay
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        console.log(entry);
+        // 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');
+        }
+      });
+    }, {
+      trackVisibility: true,
+      root: null,      // Defaults to the browser viewport
+      threshold: 0     // Triggers as soon as even 1 pixel enters or leaves
+    });
+
+    observer.observe(this.$overlay);
   }
 
   #toggle(e: ToggleEvent) {

package/pg/overlaySelectMenu/overlaySelectMenu.css

@@ -2,7 +2,7 @@
   display: contents;
 }
 
-[part="overlay"] {
+[part=overlay] {
   margin: 0;
   padding: 0;
   border: 0;
@@ -17,3 +17,7 @@
   position-visibility: always;
   position-anchor: auto;
 }
+
+[part=overlay].no-offset {
+  margin: 0;
+}

package/pg/overlaySelectMenu/overlaySelectMenu.ts

@@ -77,6 +77,24 @@ 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');
+        }
+      });
+    }, {
+      root: null,      // Defaults to the browser viewport
+      threshold: 1     // Triggers as soon as even 1 pixel enters or leaves
+    });
+
+    observer.observe(this.$overlay);
   }
 
   #toggle(e: ToggleEvent) {
@@ -99,4 +117,4 @@ export default class PgOverlaySelectMenu extends PgOverlay {
     this.close({ value: null });
     this.source?.focus();
   }
-}
+}

package/pg/tree/README.md

@@ -22,6 +22,7 @@ Each item in the `items` array follows this structure:
 {
   label: string;
   icon: { path: string };
+  disableRename: boolean;
   isFolder: boolean;      // true enables the drop-onto zone and .items CSS class
   expanded?: boolean;     // folders only
   items?: any[];          // child items (folders only)

package/pg/tree/__examples__/basic/basic.ts

@@ -22,14 +22,15 @@ function createFolder(label, expanded = true, items: any[] = []) {
     isFolder: true,
     actions: [{
       type: PgTreeButtonIcon,
+      label: 'Show/Hide',
       icon:  IconEye,
       enabled: true
     },
     {
       type: PgTreeButtonIcon,
-      label: 'Delete',
+      label: 'Lock/Unlock',
       icon: IconUnlock,
-      enabled: false
+      enabled: true
     }],
     items
   };
@@ -43,12 +44,13 @@ function createItem(label) {
     label,
     actions: [{
       type: PgTreeButtonIcon,
+      label: 'Show/Hide',
       icon:  IconEye,
       enabled: true
     },
     {
       type: PgTreeButtonIcon,
-      label: 'Delete',
+      label: 'Lock/Unlock',
       icon: IconUnlock,
       enabled: false
     }]
@@ -89,10 +91,8 @@ export default class XPgTreeBasic extends HTMLElement {
         action.enabled = true;
       }
     });
-    this.$tree.addEventListener('move', (e: any) => {
-      this.#selectedItems.forEach((item: any) => {
-        item.move(e.detail.item, e.detail.position);
-      });
+    this.$tree.addEventListener('move', (_e: any) => {
+      // Tree handles all data manipulation internally; this is a notification only
     });
     this.$tree.addEventListener('rename', (e: any) => {
       const { item, label } = e.detail;

package/pg/treeItem/treeItem.ts

@@ -19,6 +19,7 @@ export default class PgTreeItem extends HTMLElement {
   @Prop() label: string = '';
   @Prop() selected: boolean = false;
   @Prop() expanded: boolean = false;
+  @Prop() disableRename: boolean = false;
   @Prop() isFolder: boolean = false;
   @Prop() icon: { path: string } = { path: noIcon };
   @Prop() actions: any[] = [];
@@ -179,7 +180,7 @@ export default class PgTreeItem extends HTMLElement {
   }
 
   #handleKeyDownLabel(e: KeyboardEvent) {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' && !this.disableRename) {
       this.#enableRename();
       e.preventDefault();
     } else if (e.key === 'ArrowUp') {
@@ -270,6 +271,7 @@ export default class PgTreeItem extends HTMLElement {
   #ignoreNextClick = false;
   #handleDoubleClick(e: MouseEvent) {
     if (e.ctrlKey || e.shiftKey) return;
+    if (this.disableRename) return;
     this.#enableRename();
     e.preventDefault();
   }