@pictogrammers/components 0.5.15 → 0.5.18

package/pg/inputTextareaAutocomplete/inputTextareaAutocomplete.ts

@@ -0,0 +1,267 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgInputTextarea from '../inputTextarea/inputTextarea';
+import PgOverlayMenu from '../overlayMenu/overlayMenu';
+
+import template from './inputTextareaAutocomplete.html';
+import style from './inputTextareaAutocomplete.css';
+
+function getCursorRowCol(
+  textArea: HTMLTextAreaElement
+): { row: number; col: number } {
+  const cursorIndex = textArea.selectionStart;
+  const textUpToCursor = textArea.value.substring(0, cursorIndex);
+  const lines = textUpToCursor.split('\n');
+  const row = lines.length - 1;
+  const col = lines[lines.length - 1].length;
+  return { row, col };
+}
+
+function getCaretCoordinates(
+  element: HTMLTextAreaElement,
+  position: number
+): { top: number; left: number; height: number } {
+  const mirror = document.createElement('div');
+  const computed = window.getComputedStyle(element);
+
+  [
+    'direction', 'boxSizing', 'width', 'overflowX', 'overflowY',
+    'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
+    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+    'fontStyle', 'fontVariant', 'fontWeight', 'fontSize', 'lineHeight', 'fontFamily',
+    'textAlign', 'textTransform', 'textIndent', 'letterSpacing', 'wordSpacing',
+  ].forEach(prop => {
+    (mirror.style as any)[prop] = (computed as any)[prop];
+  });
+
+  mirror.style.position = 'absolute';
+  mirror.style.visibility = 'hidden';
+  mirror.style.top = '0';
+  mirror.style.left = '0';
+  mirror.style.whiteSpace = 'pre-wrap';
+  mirror.style.overflowWrap = 'break-word';
+
+  mirror.textContent = element.value.substring(0, position);
+
+  const span = document.createElement('span');
+  span.textContent = '\u200b';
+  mirror.appendChild(span);
+
+  document.body.appendChild(mirror);
+
+  const rect = element.getBoundingClientRect();
+  const lineHeight = parseInt(computed.lineHeight) || parseInt(computed.fontSize) * 1.2;
+  const coords = {
+    top: rect.top + span.offsetTop - element.scrollTop + parseInt(computed.borderTopWidth),
+    left: rect.left + span.offsetLeft - element.scrollLeft + parseInt(computed.borderLeftWidth),
+    height: lineHeight,
+  };
+
+  document.body.removeChild(mirror);
+  return coords;
+}
+
+@Component({
+  selector: 'pg-input-textarea-autocomplete',
+  style,
+  template,
+})
+export default class PgInputTextareaAutocomplete extends PgInputTextarea {
+
+  @Prop() tokens: RegExp[] = [];
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.$input.addEventListener('input', this.handleCursorMove.bind(this));
+    this.$input.addEventListener('click', this.handleCursorMove.bind(this));
+    this.$input.addEventListener('keyup', this.handleCursorMove.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
+        }
+      })
+    );
+  }
+
+  #menuOpen = false;
+  #activeOverlay: PgOverlayMenu | null = null;
+  #ghostElement: HTMLDivElement | null = null;
+  #pendingMatchInfo: { row: number; matchStart: number; matchEnd: number; triggerChar: string } | null = null;
+
+  #closeMenu() {
+    if (this.#menuOpen && this.#activeOverlay) {
+      this.#activeOverlay.close(undefined);
+      this.#activeOverlay = null;
+      this.#menuOpen = false;
+    }
+    if (this.#ghostElement) {
+      this.#ghostElement.remove();
+      this.#ghostElement = null;
+    }
+  }
+
+  async #openMenu(
+    textArea: HTMLTextAreaElement,
+    matchStart: number,
+    row: number,
+    options: { label: string; value: string }[]
+  ) {
+    if (this.#ghostElement) {
+      this.#ghostElement.remove();
+    }
+
+    const fullText = textArea.value;
+    let lineStartPos = 0;
+    const textLines = fullText.split('\n');
+    for (let i = 0; i < row; i++) {
+      lineStartPos += textLines[i].length + 1;
+    }
+    const matchAbsStart = lineStartPos + matchStart;
+
+    const coords = getCaretCoordinates(textArea, matchAbsStart);
+
+    const ghost = document.createElement('div');
+    ghost.style.cssText = `position:fixed;top:${coords.top}px;left:${coords.left}px;width:1px;height:${coords.height}px;pointer-events:none;`;
+    document.body.appendChild(ghost);
+    this.#ghostElement = ghost;
+    this.#menuOpen = true;
+
+    const prevMenus = new Set(Array.from(document.querySelectorAll('pg-overlay-menu')));
+    const promise = PgOverlayMenu.open({
+      source: ghost,
+      items: options,
+    });
+    const newEl = Array.from(document.querySelectorAll('pg-overlay-menu')).find(el => !prevMenus.has(el as PgOverlayMenu));
+    this.#activeOverlay = (newEl ?? null) as PgOverlayMenu | null;
+
+    const result = await promise;
+
+    ghost.remove();
+    if (this.#ghostElement === ghost) this.#ghostElement = null;
+    this.#menuOpen = false;
+    this.#activeOverlay = null;
+
+    if (result !== undefined) {
+      const { item } = result;
+      const matchInfo = this.#pendingMatchInfo;
+      if (!matchInfo) return;
+
+      const text = textArea.value;
+      const lines = text.split('\n');
+      let linePos = 0;
+      for (let i = 0; i < matchInfo.row; i++) {
+        linePos += lines[i].length + 1;
+      }
+      const absStart = linePos + matchInfo.matchStart;
+      const absEnd = linePos + matchInfo.matchEnd;
+
+      const newText = text.substring(0, absStart) + matchInfo.triggerChar + item.value + text.substring(absEnd);
+      textArea.value = newText;
+      const newCursorPos = absStart + matchInfo.triggerChar.length + String(item.value).length;
+      textArea.setSelectionRange(newCursorPos, newCursorPos);
+
+      this.skipValue = true;
+      this.value = newText;
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: { value: newText, name: this.name }
+      }));
+    }
+
+    textArea.focus();
+  }
+
+  handleCursorMove(event: Event) {
+    const textArea = event.target as HTMLTextAreaElement;
+    const { row, col: column } = getCursorRowCol(textArea);
+
+    let matchIndex = 0;
+    let matchStart = -1;
+    let matchEnd = -1;
+    let matchText = '';
+
+    if (this.tokens.length > 0) {
+      const lines = textArea.value.split('\n');
+      const currentLine = lines[row] || '';
+
+      for (let i = 0; i < this.tokens.length; i++) {
+        const regex = new RegExp(this.tokens[i].source, 'g');
+        let match: RegExpExecArray | null;
+        while ((match = regex.exec(currentLine)) !== null) {
+          const start = match.index;
+          const end = match.index + match[0].length;
+          if (start <= column && column <= end) {
+            matchIndex = i + 1;
+            matchStart = start;
+            matchEnd = end;
+            matchText = match[0];
+            break;
+          }
+        }
+        if (matchIndex > 0) break;
+      }
+    }
+
+    let pendingOptions: { label: string; value: string }[] | null = null;
+    const setOptions = (options: { label: string; value: string }[]) => {
+      pendingOptions = options;
+    };
+
+    this.dispatchEvent(new CustomEvent('caret', {
+      detail: { column, row, matchIndex, matchText, setOptions }
+    }));
+
+    if (!pendingOptions || (pendingOptions as any[]).length === 0) {
+      this.#closeMenu();
+      return;
+    }
+
+    const options = pendingOptions as { label: string; value: string }[];
+    this.#pendingMatchInfo = { row, matchStart, matchEnd, triggerChar: matchText[0] ?? '' };
+
+    if (this.#menuOpen && this.#activeOverlay) {
+      const menuItems = (this.#activeOverlay as any).$menu.items;
+      menuItems.splice(0, menuItems.length, ...options);
+    } else if (!this.#menuOpen) {
+      this.#openMenu(textArea, matchStart, row, options);
+    }
+  }
+}

package/pg/node/README.md

@@ -0,0 +1,35 @@
+# `<pg-nodes>`
+
+The `pg-nodes` component allows creating and linking `PgNode` extended data types.
+
+> If a `type` is omitted a `fields` property is required. See below for details.
+
+```typescript
+import '@pictogrammers/components/pgNodes';
+import { PgNodes } from '@pictogrammers/components/pgNodes';
+```
+
+```html
+<pg-nodes></pg-nodes>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| `fields`    |          | Node list |
+
+> Note: All nodes are sized off a `1rem` grid.
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { index, item[, field] }` |
+| input      |          | `{ detail: { index, item[, field] }` |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| n/a   |  |  |

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

@@ -0,0 +1,34 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgNode from '../../node';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-node-basic',
+  template,
+})
+export default class XPgNodeBasic extends HTMLElement {
+
+  @Part() $node: PgNode;
+
+  connectedCallback() {
+    this.$node.fields = [{
+      label: 'Name',
+      value: 'foo',
+      name: 'name',
+      type: 'text',
+    }];
+    this.$node.addEventListener('change', this.#handleChange.bind(this));
+    this.$node.addEventListener('input', this.#handleInput.bind(this));
+  }
+
+  #handleChange(e: CustomEvent) {
+    const { item } = e.detail;
+    //this.$value1.textContent = value;
+  }
+
+  #handleInput(e: CustomEvent) {
+    const { item } = e.detail;
+    //this.$value2.textContent = value;
+  }
+}

package/pg/node/index.ts

@@ -0,0 +1,3 @@
+import PgNode from './node';
+
+export default PgNode;

package/pg/node/node.css

@@ -0,0 +1,53 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: var(--pg-node-width, 12rem);
+  min-height: var(--pg-node-height, 3rem);
+}
+
+[part=header] {
+  font-size: 0.75rem;
+  line-height: 1.375rem;
+  padding-inline: 0.5rem;
+  padding-block: 0 0.125rem;
+  background-color: #181818;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+[part=node] {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  box-sizing: border-box;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  border-radius: 0.25rem;
+  background: #1D1D1D;
+  color: #FFF;
+  padding-block-end: 0.25rem;
+}
+
+[part=node]:hover {
+  border-color: rgba(255, 255, 255, 0.75);
+}
+
+[part=node].selected {
+  outline: 2px solid #248BE5 !important;
+  outline-offset: 1px !important;
+}
+
+[part=nodes] {
+  margin-bottom: -0.125rem;
+  margin-top: 0.125rem;
+}
+
+[part=node].debug {
+  border-color: #4ade80;
+  box-shadow: 0 0 0.5rem rgba(74, 222, 128, 0.75);
+  outline: 1px solid #1a1d2e;
+  outline-offset: 0;
+}
+
+[part=node].debug [part=header] {
+  color: #4ade80;
+}

package/pg/node/node.html

@@ -0,0 +1,5 @@
+<div part="node">
+  <div part="header">Node</div>
+  <div part="items"></div>
+  <div part="nodes"></div>
+</div>

package/pg/node/node.ts

@@ -0,0 +1,270 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import template from './node.html';
+import style from './node.css';
+import PgNodeResize from '../nodeResize/nodeResize';
+import PgNodeOutput from '../nodeOutput/nodeOutput';
+
+const ANCHOR_NAME = '--node-resize-anchor';
+
+@Component({
+  selector: 'pg-node',
+  style,
+  template,
+})
+export default class PgNode extends HTMLElement {
+  @Prop() x: number = 0;
+  @Prop() y: number = 0;
+  @Prop() width: number = 12;
+  @Prop() height: number = 3;
+  // The node type's declared width; nodes cannot be resized below it.
+  @Prop() minWidth: number = 6;
+  @Prop() itemId: number = 0;
+  @Prop() label: string = '';
+  @Prop() fields: any = [];
+  @Prop() outputs: any = [];
+  @Prop() debug: boolean = false;
+  @Prop() editors: any = [];
+
+  @Part() $node: HTMLDivElement;
+  @Part() $items: HTMLDivElement;
+  @Part() $outputs: HTMLDivElement;
+  @Part() $header: HTMLDivElement;
+
+  connectedCallback() {
+    // The height synced from the item (a persisted resize) is recomputed
+    // below as the intrinsic minimum; keep the larger of the two.
+    const requestedHeight = this.height;
+    this.height = 2;
+    forEach({
+      container: this.$items,
+      items: this.fields,
+      type: (item) => {
+        return this.editors.find(x => x.type === item.type);
+      },
+      create: ($item: any, item) => {
+        this.height += $item.height;
+        this.#fieldHeights.set(item.itemKey, $item.height);
+        $item.addEventListener('input', (e: any) => {
+          this.#dispatchArg('input', item.itemKey, e.detail.value);
+        });
+        $item.addEventListener('change', (e: any) => {
+          // Editors can grow or shrink on change (e.g. TextArray rows);
+          // reflow first so change listeners see the final geometry.
+          this.#syncFieldHeight(item.itemKey, $item);
+          this.#dispatchArg('change', item.itemKey, e.detail.value);
+        });
+      },
+    });
+
+    forEach({
+      container: this.$outputs,
+      items: this.outputs,
+      type: (item) => {
+        return item.key === 'then' ? null : PgNodeOutput;
+      },
+      create: ($item: PgNodeOutput, _item) => {
+        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);
+      },
+    });
+    this.#intrinsicHeight = this.height;
+    if (requestedHeight > this.height) {
+      this.height = requestedHeight;
+    }
+    this.$node.addEventListener('pointerover', this.#handlePointerOver.bind(this));
+  }
+
+  // Editor heights are cached by field key so a change event only triggers a
+  // reflow (node height + output pin offsets) when a height actually changed.
+  #fieldHeights = new Map<string, number>();
+  #intrinsicHeight = 2;
+  #syncFieldHeight(key: string, $item: any) {
+    const previous = this.#fieldHeights.get(key) ?? 0;
+    if ($item.height === previous) return;
+    this.#fieldHeights.set(key, $item.height);
+    // Auto-sized nodes track their content; manually resized nodes only grow
+    // when the content no longer fits.
+    const wasAuto = this.height === this.#intrinsicHeight;
+    this.#intrinsicHeight += $item.height - previous;
+    this.height = wasAuto ? this.#intrinsicHeight : Math.max(this.height, this.#intrinsicHeight);
+    this.#registerOutputPins();
+  }
+
+  #dispatchArg(type: 'input' | 'change', key: string, value: any) {
+    this.dispatchEvent(new CustomEvent(type, {
+      detail: {
+        type: 'arg',
+        id: this.itemId,
+        key,
+        value,
+      }
+    }));
+  }
+
+  #registerOutputPin(key: string, label: string, offset: number) {
+    this.dispatchEvent(new CustomEvent('registernodeoutput', {
+      detail: {
+        node: this.itemId,
+        key,
+        label,
+        offset,
+      }
+    }));
+  }
+
+  // Re-measures every rendered output row. 'then' outputs render no row
+  // (their pin stays on the header line), so the DOM index advances only
+  // for outputs that produced an element.
+  #registerOutputPins() {
+    const top = this.$node.getBoundingClientRect().top;
+    let domIndex = 0;
+    this.outputs.forEach((output: any) => {
+      if (output.key === 'then') return;
+      const $output = this.$outputs.children[domIndex++];
+      if (!$output) return;
+      this.#registerOutputPin(output.key, output.label, $output.getBoundingClientRect().top - top + 9);
+    });
+  }
+
+  render(changes: any) {
+    if (changes.outputs) {
+      this.outputs.forEach(({ key, label }: any) => {
+        this.dispatchEvent(new CustomEvent('registernode', {
+          detail: {
+            node: this.itemId,
+            key,
+            label,
+          }
+        }));
+      });
+    }
+    if (changes.label) {
+      this.$header.textContent = this.label;
+    }
+    if (changes.x) {
+      this.style.setProperty('left', `${this.x}rem`);
+    }
+    if (changes.y) {
+      this.style.setProperty('top', `${this.y}rem`);
+    }
+    if (changes.width) {
+      this.style.setProperty('--pg-node-width', `${this.width}rem`);
+    }
+    if (changes.height) {
+      this.style.setProperty('--pg-node-height', `${this.height}rem`);
+    }
+    if (changes.debug) {
+      this.$node.classList.toggle('debug', this.debug);
+    }
+    if (this.#resizeElement) {
+      if (changes.x) this.#resizeElement.x = this.x;
+      if (changes.y) this.#resizeElement.y = this.y;
+      if (changes.width) this.#resizeElement.width = this.width;
+      if (changes.height) this.#resizeElement.height = this.height;
+    }
+  }
+
+  #handleSelect(e: any) {
+    this.dispatchEvent(new CustomEvent('select', {
+      detail: {
+        nodeId: this.itemId,
+        addToSelection: !!(e?.detail?.shiftKey || e?.detail?.ctrlKey),
+      }
+    }));
+  }
+
+  #resizeElement: PgNodeResize | null = null;
+  #handlePointerOver(_e: any) {
+    if (this.#resizeElement) {
+      this.#resizeElement.style.visibility = 'visible';
+      return;
+    }
+    // @ts-ignore
+    this.$node.style.anchorName = ANCHOR_NAME;
+    const ele = document.createElement('pg-node-resize') as PgNodeResize;
+    ele.addEventListener('pointerout', this.#handlePointerOut.bind(this));
+    ele.style.setProperty('position-anchor', ANCHOR_NAME);
+    ele.x = this.x;
+    ele.y = this.y;
+    ele.width = this.width;
+    ele.height = this.height;
+    ele.minHeight = this.getMinHeight();
+    ele.minWidth = this.getMinWidth();
+    ele.addEventListener('change', (e: any) => {
+      const { x, y, width, height } = e.detail;
+      this.x = x;
+      this.y = y;
+      this.width = width;
+      this.height = height;
+      ele.x = x;
+      ele.y = y;
+      ele.width = width;
+      ele.height = height;
+      this.dispatchEvent(new CustomEvent('change', { detail: { type: 'transform', x, y, width, height } }));
+    });
+    ele.addEventListener('dragstart', () => {
+      this.dispatchEvent(new CustomEvent('nodedragstart', { detail: { nodeId: this.itemId } }));
+    });
+    ele.addEventListener('dragmove', (e: any) => {
+      this.dispatchEvent(new CustomEvent('nodedragmove', { detail: e.detail }));
+    });
+    ele.addEventListener('dragend', (e: any) => {
+      const { dx, dy, complete } = e.detail;
+      this.dispatchEvent(new CustomEvent('nodedragend', { detail: { nodeId: this.itemId } }));
+      // Only commit when the node actually landed on a new grid position.
+      if (!complete || (dx === 0 && dy === 0)) return;
+      this.x += dx;
+      this.y += dy;
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: { type: 'transform', x: this.x, y: this.y, width: this.width, height: this.height, final: true },
+      }));
+    });
+    ele.addEventListener('select', this.#handleSelect.bind(this));
+    this.shadowRoot?.appendChild(ele);
+    this.#resizeElement = ele;
+    this.$node.classList.toggle('resize', true);
+  }
+
+  #handlePointerOut(_e: any) {
+    this.$node.classList.toggle('resize', false);
+    if (this.#resizeElement) {
+      this.#resizeElement.style.visibility = 'hidden';
+    }
+  }
+
+  select() {
+    this.$node.classList.toggle('selected', true);
+  }
+
+  deselect() {
+    this.$node.classList.toggle('selected', false);
+  }
+
+  getMinHeight() {
+    return Array.from(this.$items.children).reduce((val, $item: any) => {
+      return val + $item.height;
+    }, 2);
+  }
+
+  getMinWidth() {
+    return this.minWidth;
+  }
+
+  focus() {
+    if (this.$items.children.length) {
+      (this.$items.children[0] as any).focus();
+    }
+  }
+
+  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.
+  }
+}