@pictogrammers/components 0.5.15 → 0.5.18

package/pg/nodeResize/nodeResize.ts

@@ -0,0 +1,156 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nodeResize.html';
+import style from './nodeResize.css';
+import { drag } from './dragUtil';
+
+@Component({
+  selector: 'pg-node-resize',
+  style,
+  template,
+})
+export default class PgNodeResize extends HTMLElement {
+
+  @Prop() gridSize: number = 16;
+  @Prop() x: number = 0;
+  @Prop() y: number = 0;
+  @Prop() width: number = 12;
+  @Prop() height: number = 3;
+  @Prop() minWidth: number = 12;
+  @Prop() minHeight: number = 3;
+
+  @Part() $header: HTMLDivElement;
+  @Part() $northWest: HTMLDivElement;
+  @Part() $north: HTMLDivElement;
+  @Part() $northEast: HTMLDivElement;
+  @Part() $west: HTMLDivElement;
+  @Part() $east: HTMLDivElement;
+  @Part() $southWest: HTMLDivElement;
+  @Part() $south: HTMLDivElement;
+  @Part() $southEast: HTMLDivElement;
+
+  connectedCallback() {
+    let startX = 0, startY = 0, startWidth = 0, startHeight = 0;
+
+    const start = () => {
+      startX = this.x;
+      startY = this.y;
+      startWidth = this.width;
+      startHeight = this.height;
+      this.classList.toggle('preview', true);
+    };
+
+    // wDir: -1 = west edge moves (x + width change), 0 = no width, 1 = east edge (width only)
+    // hDir: -1 = north edge moves (y + height change), 0 = no height, 1 = south edge (height only)
+    const addHandle = (source: HTMLElement, wDir: -1 | 0 | 1, hDir: -1 | 0 | 1) => {
+      drag({
+        source,
+        gridSize: this.gridSize,
+        start,
+        move: (dx, dy) => {
+          const gs = this.gridSize;
+
+          // Snap units — must mirror dragUtil's snapUnits exactly
+          const snapDx = Math.floor((dx + gs / 2) / gs);
+          const snapDy = Math.floor((dy + gs / 2) / gs);
+
+          // Snapped dimension in grid units, clamped to min (what the anchor currently reflects)
+          const snappedW = wDir !== 0 ? Math.max(startWidth  + wDir * snapDx, this.minWidth)  : startWidth;
+          const snappedH = hDir !== 0 ? Math.max(startHeight + hDir * snapDy, this.minHeight) : startHeight;
+
+          // Pixel-accurate cursor tracking, clamped so the preview never goes below min.
+          // When clamped, effectivePx === snappedPx and the delta becomes 0 (overlay freezes).
+          const effectiveWPx = wDir !== 0 ? Math.max(startWidth  * gs + wDir * dx, this.minWidth  * gs) : startWidth  * gs;
+          const effectiveHPx = hDir !== 0 ? Math.max(startHeight * gs + hDir * dy, this.minHeight * gs) : startHeight * gs;
+
+          // Sub-pixel delta from the snapped anchor position
+          const dw = effectiveWPx - snappedW * gs;
+          const dh = effectiveHPx - snappedH * gs;
+
+          // For west/north handles the opposite edge is fixed, so x/y shift opposite to size.
+          this.style.setProperty('--node-resize-delta-x',      `${wDir === -1 ? -dw : 0}px`);
+          this.style.setProperty('--node-resize-delta-width',  `${dw}px`);
+          this.style.setProperty('--node-resize-delta-y',      `${hDir === -1 ? -dh : 0}px`);
+          this.style.setProperty('--node-resize-delta-height', `${dh}px`);
+
+          const atMinW = wDir !== 0 && startWidth  * gs + wDir * dx < this.minWidth  * gs;
+          const atMinH = hDir !== 0 && startHeight * gs + hDir * dy < this.minHeight * gs;
+          source.classList.toggle('stop', atMinW || atMinH);
+        },
+        snap: (dx, dy) => {
+          this.emit(...this.#compute(startX, startY, startWidth, startHeight, dx, dy, wDir, hDir));
+        },
+        end: (dx, dy, complete) => {
+          if (complete) {
+            this.emit(...this.#compute(startX, startY, startWidth, startHeight, dx, dy, wDir, hDir));
+          } else {
+            this.emit(startX, startY, startWidth, startHeight);
+          }
+          source.classList.toggle('stop', false);
+          this.classList.toggle('preview', false);
+          this.style.setProperty('--node-resize-delta-x', '0px');
+          this.style.setProperty('--node-resize-delta-y', '0px');
+          this.style.setProperty('--node-resize-delta-width', '0px');
+          this.style.setProperty('--node-resize-delta-height', '0px');
+        },
+      });
+    };
+
+    addHandle(this.$northWest, -1, -1);
+    addHandle(this.$north,      0, -1);
+    addHandle(this.$northEast,  1, -1);
+    addHandle(this.$west,      -1,  0);
+    addHandle(this.$east,       1,  0);
+    addHandle(this.$southWest, -1,  1);
+    addHandle(this.$south,      0,  1);
+    addHandle(this.$southEast,  1,  1);
+
+    // Header: translate the whole node — no resize, both x and y move together.
+    // The node is not moved while dragging; drag events let the host draw
+    // snapped previews and commit the final position on release.
+    let didDrag = false;
+    drag({
+      source: this.$header,
+      gridSize: this.gridSize,
+      start: () => {
+        didDrag = false;
+        this.dispatchEvent(new CustomEvent('dragstart'));
+      },
+      snap: (dx, dy) => {
+        didDrag = true;
+        this.dispatchEvent(new CustomEvent('dragmove', { detail: { dx, dy } }));
+      },
+      end: (dx, dy, complete) => {
+        this.dispatchEvent(new CustomEvent('dragend', { detail: { dx, dy, complete } }));
+      },
+    });
+    this.$header.addEventListener('click', (e: MouseEvent) => {
+      // The click after a drag must not change the selection.
+      if (didDrag) return;
+      this.dispatchEvent(new CustomEvent('select', {
+        detail: { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey },
+      }));
+    });
+  }
+
+  render(_changes: any) {}
+
+  #compute(
+    startX: number, startY: number,
+    startWidth: number, startHeight: number,
+    dx: number, dy: number,
+    wDir: -1 | 0 | 1, hDir: -1 | 0 | 1
+  ): [number, number, number, number] {
+    const newWidth  = wDir !== 0 ? Math.max(startWidth  + wDir * dx, this.minWidth)  : startWidth;
+    const newHeight = hDir !== 0 ? Math.max(startHeight + hDir * dy, this.minHeight) : startHeight;
+    const newX = wDir === -1 ? startX + (startWidth  - newWidth)  : startX;
+    const newY = hDir === -1 ? startY + (startHeight - newHeight) : startY;
+    return [newX, newY, newWidth, newHeight];
+  }
+
+  emit(x: number, y: number, width: number, height: number) {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { x, y, width, height },
+    }));
+  }
+}

package/pg/nodes/README.md

@@ -0,0 +1,177 @@
+# `<pg-nodes>`
+
+The `pg-nodes` component renders an interactive connected node graph.
+
+```typescript
+import '@pictogrammers/components/pgNodes';
+```
+
+```html
+<pg-nodes part="script"></pg-nodes>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| `items`     |          | 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] }` |
+| statechange |          | `{ detail: { nodeId, state }` |
+
+## Methods
+
+| Method | Tested
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| n/a   |  |  |
+
+
+### Editors
+
+```typescript
+this.$script.editors.push(PgNodeEditorText);
+```
+
+### Nodes
+
+Node types define the argument schema and execution handler for reusable logic blocks.
+
+```typescript
+this.$script.nodes.push({
+  name: 'setState',
+  label: 'Set',
+  args: [{
+    key: 'key',
+    label: 'Key',
+    editor: 'Text',
+  }, {
+    key: 'value',
+    label: 'Value',
+    editor: 'Text',
+  }],
+  nodes: [{
+    key: 'then',
+    label: 'Then',
+  }],
+  handler: ({ state, nodes, key, value }) => {
+    state.set(key, value);
+    return nodes;
+  },
+}, {
+  name: 'equals',
+  label: 'State Equals',
+  width: 8,
+  args: [{
+    key: 'key',
+    label: 'Key',
+    editor: 'Text',
+  }, {
+    key: 'value',
+    label: 'Value',
+    editor: 'Text',
+  }],
+  nodes: [{
+    key: 't',
+    label: 'True',
+  }, {
+    key: 'f',
+    label: 'False',
+  }],
+  handler: ({ state, t, f, key, value }) => {
+    if (state.get(key) === value) {
+      return t;
+    } else {
+      return f;
+    }
+  },
+}, {
+  name: 'log',
+  label: 'Log',
+  width: 12,
+  args: [{
+    key: 'message',
+    label: 'Message',
+    editor: 'Text',
+  }],
+  nodes: [{
+    key: 'then',
+    label: 'Then',
+  }],
+  handler: ({ state, nodes, message }) => {
+    console.log(message);
+    return nodes;
+  },
+});
+```
+
+### Items
+
+Items are instances of node types positioned on the canvas grid.
+
+```typescript
+// Entry node (id 0 is implicitly type 'entry')
+this.$script.items.push({
+  id: 0,
+  x: 2,
+  y: 2,
+  args: {
+    key: 'description',
+    value: 'Script description',
+  },
+  nodes: {
+    then: [1]
+  }
+});
+// Script nodes
+this.$script.items.push({
+  id: 1,
+  x: 12,
+  y: 2,
+  node: 'equals',
+  args: {
+    key: 'health',
+    value: 5,
+  },
+  nodes: {
+    t: [2],
+    f: [3],
+  }
+});
+this.$script.items.push({
+  id: 2,
+  x: 24,
+  y: 2,
+  node: 'setState',
+  args: {
+    key: 'health',
+    value: 10,
+  },
+  nodes: {
+    then: []
+  }
+});
+this.$script.items.push({
+  id: 3,
+  x: 24,
+  y: 10,
+  node: 'setState',
+  args: {
+    key: 'health',
+    value: 20,
+  },
+  nodes: {
+    then: []
+  }
+});
+```

package/pg/nodes/__examples__/basic/basic.html

@@ -0,0 +1,33 @@
+<div class="example">
+  <div style="display: flex;height: 20rem;align-self: stretch;flex-direction: column;">
+    <pg-nodes part="script"></pg-nodes>
+  </div>
+  <div>
+    <button part="debug">Debug</button>
+    <button part="play">Play</button>
+    <button>Pause</button>
+    <button>Previous</button>
+    <button part="debugNext">Next</button>
+    <button part="restart">Restart</button>
+    |
+    <button part="save">Save</button>
+    |
+    <pg-input-select part="files"></pg-input-select>
+    <button part="open">Open</button>
+    <button part="delete">Delete</button>
+    |
+    <button part="new">New</button>
+    |
+    <button part="fullscreen">Fullscreen</button>
+  </div>
+  <div>
+    <code>onchange: <span part="value1"></span></code>
+  </div>
+  <div>
+    <code>oninput: <span part="value2"></span></code>
+  </div>
+  <h3 style="margin: 0;">State</h3>
+  <pre part="state"></pre>
+  <h3 style="margin: 0;">Log</h3>
+  <pre part="log"></pre>
+</div>