@pictogrammers/components 0.5.15 → 0.5.17

package/pg/nodeEditorTextArray/nodeEditorTextArray.ts

@@ -0,0 +1,162 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import PgNodeInputText from '../nodeInputText/nodeInputText';
+
+import template from './nodeEditorTextArray.html';
+import style from './nodeEditorTextArray.css';
+
+function uuid() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+@Component({
+  selector: 'pg-node-editor-text-array',
+  style,
+  template,
+})
+export default class PgNodeEditorTextArray extends HTMLElement {
+
+  static type = 'TextArray';
+
+  @Prop() label: string = '';
+  @Prop() value: string[] = [];
+  @Prop() name: string = '';
+
+  @Part() $label: HTMLSpanElement;
+  @Part() $inputs: HTMLDivElement;
+  @Part() $add: HTMLButtonElement;
+
+  @Prop() #inputs: any[] = [];
+
+  #focusNext = false;
+
+  connectedCallback() {
+    // Map this.value to list
+    this.value.forEach((value) => {
+      this.#inputs.push({
+        value: value,
+        key: uuid(),
+      });
+    });
+    forEach({
+      container: this.$inputs,
+      items: this.#inputs,
+      type: () => PgNodeInputText,
+      create: ($item: PgNodeInputText, item: any) => {
+        $item.value = item.value;
+        $item.removable = true;
+        $item.addEventListener('change', (e: any) => {
+          e.stopPropagation();
+          const { index, value } = e.detail;
+          this.#inputs[index].value = value;
+          this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+              value: this.#inputs.map(x => x.value),
+            },
+          }));
+        });
+        $item.addEventListener('input', (e: any) => {
+          e.stopPropagation();
+          const { index, value } = e.detail;
+          this.#inputs[index].value = value;
+          this.dispatchEvent(new CustomEvent('input', {
+            detail: {
+              value: this.#inputs.map(x => x.value),
+            },
+          }));
+        });
+        $item.addEventListener('inputprevious', (e: any) => {
+          const { index, selectionIndex } = e.detail;
+          const $items = Array.from(this.$inputs.children);
+          if ($items.length > 1) {
+            if (index === 0) {
+              ($items[$items.length - 1] as any).selectionStart = selectionIndex;
+              ($items[$items.length - 1] as any).selectionEnd = selectionIndex;
+              ($items[$items.length - 1] as any).focus();
+            } else {
+              ($items[index - 1] as any).selectionStart = selectionIndex;
+              ($items[index - 1] as any).selectionEnd = selectionIndex;
+              ($items[index - 1] as any).focus();
+            }
+          }
+        });
+        $item.addEventListener('inputnext', (e: any) => {
+          const { index, selectionIndex } = e.detail;
+          const $items = Array.from(this.$inputs.children);
+          if ($items.length > 1) {
+            if (index === $items.length - 1) {
+              ($items[0] as any).selectionStart = selectionIndex;
+              ($items[0] as any).selectionEnd = selectionIndex;
+              ($items[0] as any).focus();
+            } else {
+              ($items[index + 1] as any).selectionStart = selectionIndex;
+              ($items[index + 1] as any).selectionEnd = selectionIndex;
+              ($items[index + 1] as any).focus();
+            }
+          }
+        });
+        $item.addEventListener('enter', (e: any) => {
+          const { index } = e.detail;
+          const emptyItem = this.#inputs.findIndex(x => x.value === '');
+          if (emptyItem !== -1) {
+            (this.$inputs.children[emptyItem] as any).focus();
+            return;
+          }
+          this.#focusNext = true;
+          this.#inputs.splice(index + 1, 0, {
+            key: uuid(),
+            value: '',
+          });
+        });
+        $item.addEventListener('remove', (e: any) => {
+          const { index } = e.detail;
+          if (this.#inputs.length > 1) {
+            this.#inputs.splice(index, 1);
+            // Emit updated array
+            this.dispatchEvent(new CustomEvent('change', {
+              detail: {
+                value: this.#inputs.map(x => x.value),
+              },
+            }));
+          }
+        });
+      },
+      connect: ($item) => {
+        if (this.#focusNext) {
+          $item.focus();
+          this.#focusNext = false;
+        }
+      },
+    });
+
+    this.$add.addEventListener('click', () => {
+      this.#focusNext = true;
+      this.#inputs.push({
+        key: uuid(),
+        value: '',
+      });
+      // Emit updated array
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: { value: [...this.value, ''] },
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+  }
+
+  get height() {
+    return this.#inputs.length + 1;
+  }
+
+  focus() {
+    const first = this.$inputs.firstElementChild as PgNodeInputText;
+    first?.focus();
+  }
+}

package/pg/nodeEntry/nodeEntry.css

@@ -0,0 +1,61 @@
+:host {
+  display: contents;
+}
+
+[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;
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid rgba(67, 227, 64, 0.5);
+  border-radius: 0.25rem;
+  background: #1D1D1D;
+  color: #FFF;
+  width: var(--pg-node-width, 12rem);
+  min-height: var(--pg-node-height, 3rem);
+  padding-block-end: 0.25rem;
+}
+
+[part=node]:hover {
+  border-color: rgba(67, 227, 64, 0.75);
+}
+
+textarea {
+  background-color: #2B2B2B;
+  border: 0;
+  color: #FFF;
+  font-family: var(--pg-input-text-font-family, var(--pg-font-family, system-ui));
+  margin-inline: 0.25rem;
+  resize: none;
+  flex: 1;
+}
+
+textarea:focus {
+  box-shadow: 0 0 0 2px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.75));
+  outline: 0;
+}
+
+[part=node].selected {
+  outline: 2px solid #248BE5;
+  outline-offset: 2px;
+}
+
+[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/nodeEntry/nodeEntry.ts

@@ -0,0 +1,164 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nodeEntry.html';
+import style from './nodeEntry.css';
+import PgNodeResize from '../nodeResize/nodeResize';
+
+const ANCHOR_NAME = '--node-entry-resize-anchor';
+
+@Component({
+  selector: 'pg-node-entry',
+  style,
+  template,
+})
+export default class PgNodeEntry extends HTMLElement {
+  @Prop() x: number = 0;
+  @Prop() y: number = 0;
+  @Prop() width: number = 12;
+  @Prop() height: number = 5;
+  @Prop() itemId: number = 0;
+  @Prop() fields: any = [];
+  @Prop() debug: boolean = false;
+
+  @Part() $node: HTMLDivElement;
+  @Part() $header: HTMLDivElement;
+  @Part() $input: HTMLTextAreaElement;
+
+  connectedCallback() {
+    this.height = this.getMinHeight();
+    this.$node.addEventListener('pointerover', this.#handlePointerOver.bind(this));
+    this.$input.addEventListener('input', () => {
+      this.dispatchEvent(new CustomEvent('input', {
+        detail: {
+          id: 0,
+          type: 'arg',
+          key: 'description',
+          value: this.$input.value,
+        }
+      }));
+    });
+    this.$input.addEventListener('change', () => {
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          id: 0,
+          type: 'arg',
+          key: 'description',
+          value: this.$input.value,
+        }
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.fields) {
+      const field = this.fields.find((f: any) => f.key === 'description');
+      if (field) {
+        this.$input.value = field.value ?? '';
+      }
+    }
+    if (changes.x) {
+      this.$node.style.setProperty('left', `${this.x}rem`);
+    }
+    if (changes.y) {
+      this.$node.style.setProperty('top', `${this.y}rem`);
+    }
+    if (changes.width) {
+      this.$node.style.setProperty('--pg-node-width', `${this.width}rem`);
+    }
+    if (changes.height) {
+      this.$node.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,
+      }
+    }));
+  }
+
+  #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: { 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 5;
+  }
+
+  getMinWidth() {
+    return 6;
+  }
+}

package/pg/nodeEntry/nodeEntry.ts.tmp.28724.dda67762bca5

@@ -0,0 +1,164 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nodeEntry.html';
+import style from './nodeEntry.css';
+import PgNodeResize from '../nodeResize/nodeResize';
+
+const ANCHOR_NAME = '--node-entry-resize-anchor';
+
+@Component({
+  selector: 'pg-node-entry',
+  style,
+  template,
+})
+export default class PgNodeEntry extends HTMLElement {
+  @Prop() x: number = 0;
+  @Prop() y: number = 0;
+  @Prop() width: number = 12;
+  @Prop() height: number = 5;
+  @Prop() itemId: number = 0;
+  @Prop() fields: any = [];
+  @Prop() debug: boolean = false;
+
+  @Part() $node: HTMLDivElement;
+  @Part() $header: HTMLDivElement;
+  @Part() $input: HTMLTextAreaElement;
+
+  connectedCallback() {
+    this.height = this.getMinHeight();
+    this.$node.addEventListener('pointerover', this.#handlePointerOver.bind(this));
+    this.$input.addEventListener('input', () => {
+      this.dispatchEvent(new CustomEvent('input', {
+        detail: {
+          id: 0,
+          type: 'arg',
+          key: 'description',
+          value: this.$input.value,
+        }
+      }));
+    });
+    this.$input.addEventListener('change', () => {
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          id: 0,
+          type: 'arg',
+          key: 'description',
+          value: this.$input.value,
+        }
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.fields) {
+      const field = this.fields.find((f: any) => f.key === 'description');
+      if (field) {
+        this.$input.value = field.value ?? '';
+      }
+    }
+    if (changes.x) {
+      this.$node.style.setProperty('left', `${this.x}rem`);
+    }
+    if (changes.y) {
+      this.$node.style.setProperty('top', `${this.y}rem`);
+    }
+    if (changes.width) {
+      this.$node.style.setProperty('--pg-node-width', `${this.width}rem`);
+    }
+    if (changes.height) {
+      this.$node.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,
+      }
+    }));
+  }
+
+  #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: { 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 5;
+  }
+
+  getMinWidth() {
+    return 6;
+  }
+}

package/pg/nodeInputText/nodeInputText.css

@@ -0,0 +1,75 @@
+:host {
+  display: flex;
+}
+
+[part=input] {
+  border: 0;
+  border-top-left-radius: var(--pg-node-input-text-border-top-left-radius, 0.125rem);
+  border-top-right-radius: var(--pg-node-input-text-border-top-right-radius, 0.125rem);
+  border-bottom-left-radius: var(--pg-node-input-text-border-bottom-left-radius, 0.125rem);
+  border-bottom-right-radius: var(--pg-node-input-text-border-bottom-right-radius, 0.125rem);
+  padding-inline-start: 0.25rem;
+  padding-inline-end: 0.25rem;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  font-family: var(--pg-input-text-font-family, var(--pg-font-family));
+  font-size: 0.75rem;
+  line-height: 1rem;
+  outline: none;
+  field-sizing: content;
+  min-width: calc(
+    100%
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.25rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.25rem))
+  );
+  background-color: #2B2B2B;
+  color: #FFF;
+  outline: 1px solid #444;
+}
+
+[part=input]:read-only {
+  border-color: transparent;
+}
+
+[part=input]:active {
+  outline-color: rgb(79, 143, 249, 0.75);
+}
+
+[part=input]:focus {
+  outline-color: rgb(79, 143, 249, 0.75);
+  z-index: 1;
+}
+
+[part=input]:hover + button:not(.hide),
+[part=input]:focus + button:not(.hide) {
+  display: flex;
+}
+
+.hide {
+  display: none;
+}
+
+[part=input]:has(+ button:not(.hide):active) {
+  outline-color: #cd2626;
+  border-radius: 0.125rem;
+  z-index: 1;
+}
+
+[part=input] + [part=remove]:not(.hide):active {
+  color: #cd2626;
+}
+
+[part=remove] {
+  display: none;
+  background: transparent;
+  border: 0;
+  color: rgba(255, 255, 255, 0.5);
+  margin-left: -1rem;
+  padding: 0;
+  align-items: center;
+  z-index: 2;
+}
+[part=remove]:hover {
+  color: rgba(255, 255, 255, 0.8);
+  display: flex;
+}

package/pg/nodeInputText/nodeInputText.html

@@ -0,0 +1,4 @@
+<input type="text" part="input" autocomplete="off">
+<button part="remove" class="hide">
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="currentColor" d="M9.535 3.05a1 1 0 0 1 1.414 1.415L8.414 6.999l2.536 2.536a1 1 0 0 1-1.415 1.414L7 8.414 4.465 10.95A1.001 1.001 0 0 1 3.05 9.535L5.585 7 3.05 4.464A1 1 0 0 1 4.465 3.05L7 5.585z"/></svg>
+</button>