symbiote-ui 0.3.0-alpha.4

package/inspector/TemplatePreview/TemplatePreview.tpl.js

@@ -0,0 +1,33 @@
+/**
+ * TemplatePreview template
+ * @module symbiote-node/inspector/TemplatePreview.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <div class="tpl-preview-section">
+    <div class="tpl-chips-label">
+      <span class="material-symbols-outlined">sell</span> <span ${{ textContent: 'placeholdersLabel' }}></span>
+    </div>
+    <div class="tpl-chips" itemize="placeholderChips">
+      <template>
+        <span class="tpl-chip">{{name}}</span>
+      </template>
+    </div>
+    <div class="tpl-chips-empty" ${{ '@hidden': '!noPlaceholders' }}>
+      <span ${{ textContent: 'emptyLabel' }}></span>
+    </div>
+  </div>
+  <div class="tpl-preview-section">
+    <div class="tpl-preview-label">
+      <span class="material-symbols-outlined">data_object</span> <span ${{ textContent: 'testDataLabel' }}></span>
+    </div>
+    <textarea class="tpl-test-data" rows="3" spellcheck="false"></textarea>
+  </div>
+  <div class="tpl-preview-section">
+    <div class="tpl-preview-label">
+      <span class="material-symbols-outlined">visibility</span> <span ${{ textContent: 'previewLabel' }}></span>
+    </div>
+    <div class="tpl-preview-result" ${{ textContent: 'previewText' }}></div>
+  </div>
+`;

package/interactions/ConnectFlow.js

@@ -0,0 +1,304 @@
+/**
+ * ConnectFlow — interactive socket-to-socket connection creation
+ *
+ * Simplified version of Rete.js ClassicFlow.
+ * Handles: pointerdown on socket → drag pseudo-line → pointerup on target socket → create connection.
+ *
+ * @module symbiote-node/interactions/ConnectFlow
+ */
+
+import { Connection } from '../core/Connection.js';
+
+/**
+ * @typedef {object} SocketData
+ * @property {string} nodeId - Node ID
+ * @property {string} key - Port key
+ * @property {'input'|'output'} side - Port side
+ * @property {HTMLElement} element - Socket DOM element
+ */
+
+export class ConnectFlow {
+  /** @type {SocketData|null} */
+  #picked = null;
+
+  /** @type {import('../core/Editor.js').NodeEditor} */
+  #editor;
+
+  /** @type {function} */
+  #getNodePosition;
+
+  /** @type {function} */
+  #getNodeSize;
+
+  /** @type {function} */
+  #getTransform;
+
+  /** @type {function|null} */
+  #onPseudoStart = null;
+
+  /** @type {function|null} */
+  #onPseudoMove = null;
+
+  /** @type {function|null} */
+  #onPseudoEnd = null;
+
+  /** @type {function|null} */
+  #onDropEmpty = null;
+
+  /** @type {function|null} - called during drag with world XY + picked socket */
+  #onCompatibleMove = null;
+
+  /** @type {function|null} - find nearest SVG dot as drop target */
+  #findNearestDot = null;
+
+  /** @type {number} - last time compatible move was emitted (ms) */
+  #lastMoveTime = 0;
+
+  /** @type {{ x: number, y: number }|null} - cached start position from pick */
+  #pickedStartPos = null;
+
+  /** @type {Set<SocketData>} */
+  #sockets = new Set();
+
+  /**
+   * @param {import('../core/Editor.js').NodeEditor} editor
+   * @param {object} callbacks
+   * @param {function} callbacks.getNodePosition
+   * @param {function} callbacks.getNodeSize
+   * @param {function} callbacks.getTransform - Returns { x, y, k, rect }
+   * @param {function} callbacks.onPseudoStart
+   * @param {function} callbacks.onPseudoMove
+   * @param {function} callbacks.onPseudoEnd
+   * @param {function} [callbacks.onDropEmpty] - Called when connection dropped in empty space
+   */
+  constructor(editor, callbacks) {
+    this.#editor = editor;
+    this.#getNodePosition = callbacks.getNodePosition;
+    this.#getNodeSize = callbacks.getNodeSize;
+    this.#getTransform = callbacks.getTransform;
+    this.#onPseudoStart = callbacks.onPseudoStart;
+    this.#onPseudoMove = callbacks.onPseudoMove;
+    this.#onPseudoEnd = callbacks.onPseudoEnd;
+    this.#onDropEmpty = callbacks.onDropEmpty || null;
+    this.#onCompatibleMove = callbacks.onCompatibleMove || null;
+    this.#findNearestDot = callbacks.findNearestDot || null;
+
+    window.addEventListener('pointermove', this.#onMove);
+    window.addEventListener('pointerup', this.#onUp);
+  }
+
+  /**
+   * Register a socket element for connection interaction
+   * @param {HTMLElement} socketEl
+   * @param {SocketData} data
+   */
+  registerSocket(socketEl, data) {
+    this.#sockets.add(data);
+    socketEl.addEventListener('pointerdown', (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.#pick(data);
+    });
+  }
+
+  /**
+   * Whether a connection drag is in progress
+   * @returns {boolean}
+   */
+  isPicking() {
+    return this.#picked !== null;
+  }
+
+  /**
+   * Get the currently picked socket data (during drag)
+   * @returns {SocketData|null}
+   */
+  getPickedSocket() {
+    return this.#picked;
+  }
+
+  /**
+   * Externally initiate a connection drag from socket data
+   * @param {SocketData} data
+   */
+  pickSocket(data) {
+
+    if (!this.#sockets.has(data)) {
+      this.#sockets.add(data);
+    }
+    this.#pick(data);
+  }
+
+  #pick(data) {
+    this.#picked = data;
+    let pos = this.#getSocketWorldPosition(data);
+    if (this.#onPseudoStart) this.#onPseudoStart(pos.x, pos.y, data);
+  }
+
+  #onMove = (e) => {
+    if (!this.#picked) return;
+    e.preventDefault();
+
+    let startPos = this.#getSocketWorldPosition(this.#picked);
+    let t = this.#getTransform();
+
+    let endX = (e.clientX - t.rect.left - t.x) / t.k;
+    let endY = (e.clientY - t.rect.top - t.y) / t.k;
+
+    if (this.#onPseudoMove) this.#onPseudoMove(startPos.x, startPos.y, endX, endY);
+
+
+    let now = performance.now();
+    if (this.#onCompatibleMove && now - this.#lastMoveTime > 16) {
+      this.#lastMoveTime = now;
+      this.#onCompatibleMove(endX, endY, this.#picked);
+    }
+  };
+
+  #onUp = (e) => {
+    if (!this.#picked) return;
+
+
+    let t = this.#getTransform();
+    let pointerX = (e.clientX - t.rect.left - t.x) / t.k;
+    let pointerY = (e.clientY - t.rect.top - t.y) / t.k;
+    let target = this.#findNearestSocket(pointerX, pointerY);
+
+    if (target && this.#canConnect(this.#picked, target)) {
+      this.#makeConnection(this.#picked, target);
+    } else if (this.#findNearestDot) {
+
+      let dotTarget = this.#findNearestDot(pointerX, pointerY);
+      if (dotTarget) {
+        let dotSocket = { nodeId: dotTarget.nodeId, key: dotTarget.key, side: dotTarget.side };
+        if (this.#canConnect(this.#picked, dotSocket)) {
+          this.#makeConnection(this.#picked, dotSocket);
+        } else if (this.#onDropEmpty) {
+          this.#onDropEmpty(pointerX, pointerY, this.#picked);
+        }
+      } else if (this.#onDropEmpty) {
+        this.#onDropEmpty(pointerX, pointerY, this.#picked);
+      }
+    } else if (this.#onDropEmpty) {
+
+      this.#onDropEmpty(pointerX, pointerY, this.#picked);
+    }
+
+    this.#picked = null;
+    if (this.#onPseudoEnd) this.#onPseudoEnd();
+  };
+  /**
+   * Get socket position in graph coordinate space
+   * Uses getBoundingClientRect with zoom compensation
+   * @param {SocketData} data
+   * @returns {{ x: number, y: number }}
+   */
+  #getSocketWorldPosition(data) {
+
+    if (data.worldX !== undefined && data.worldY !== undefined) {
+      return { x: data.worldX, y: data.worldY };
+    }
+
+    let pos = this.#getNodePosition(data.nodeId);
+    if (!pos) return { x: 0, y: 0 };
+
+    if (data.element) {
+      let graphNode = data.element.closest('graph-node');
+      if (graphNode) {
+        let t = this.#getTransform();
+        let nodeRect = graphNode.getBoundingClientRect();
+        let socketRect = data.element.getBoundingClientRect();
+
+        let offsetX = (socketRect.left - nodeRect.left + socketRect.width / 2) / t.k;
+        let offsetY = (socketRect.top - nodeRect.top + socketRect.height / 2) / t.k;
+        return { x: pos.x + offsetX, y: pos.y + offsetY };
+      }
+    }
+
+
+    let size = this.#getNodeSize(data.nodeId);
+    if (!size) return { x: 0, y: 0 };
+    return {
+      x: data.side === 'output' ? pos.x + size.width : pos.x,
+      y: pos.y + size.height / 2,
+    };
+  }
+
+  /**
+   * Find nearest registered socket within snap distance
+   * Uses registered socket collection instead of DOM hit-testing
+   * @param {number} worldX - Pointer X in graph coordinates
+   * @param {number} worldY - Pointer Y in graph coordinates
+   * @returns {SocketData|null}
+   */
+  #findNearestSocket(worldX, worldY) {
+    const SNAP_DISTANCE = 30;
+    let nearest = null;
+    let nearestDist = SNAP_DISTANCE;
+
+    for (const socket of this.#sockets) {
+
+      if (socket === this.#picked) continue;
+
+      let pos = this.#getSocketWorldPosition(socket);
+      let dx = worldX - pos.x;
+      let dy = worldY - pos.y;
+      let dist = Math.sqrt(dx * dx + dy * dy);
+
+      if (dist < nearestDist) {
+        nearestDist = dist;
+        nearest = socket;
+      }
+    }
+
+    return nearest;
+  }
+
+  /**
+   * Check if two sockets can be connected
+   * @param {SocketData} from
+   * @param {SocketData} to
+   * @returns {boolean}
+   */
+  #canConnect(from, to) {
+    if (from.side === to.side) return false;
+    if (from.nodeId === to.nodeId) return false;
+
+    let fromNode = this.#editor.getNode(from.nodeId);
+    let toNode = this.#editor.getNode(to.nodeId);
+    if (!fromNode || !toNode) return false;
+
+    let isFromOutput = from.side === 'output';
+    let output = isFromOutput ? fromNode.outputs[from.key] : toNode.outputs[to.key];
+    let input = isFromOutput ? toNode.inputs[to.key] : fromNode.inputs[from.key];
+
+    if (!output || !input) return false;
+
+    return output.socket.isCompatibleWith(input.socket);
+  }
+
+  /**
+   * Create the connection
+   * @param {SocketData} from
+   * @param {SocketData} to
+   */
+  #makeConnection(from, to) {
+    let sourceData = from.side === 'output' ? from : to;
+    let targetData = from.side === 'input' ? from : to;
+
+    let sourceNode = this.#editor.getNode(sourceData.nodeId);
+    let targetNode = this.#editor.getNode(targetData.nodeId);
+    if (!sourceNode || !targetNode) return;
+
+    let conn = new Connection(sourceNode, sourceData.key, targetNode, targetData.key);
+    this.#editor.addConnection(conn);
+  }
+
+  /** Cleanup */
+  destroy() {
+    window.removeEventListener('pointermove', this.#onMove);
+    window.removeEventListener('pointerup', this.#onUp);
+  }
+}
+
+export { ConnectFlow as default };

package/interactions/Drag.js

@@ -0,0 +1,104 @@
+/**
+ * Drag handler — pointer-based drag with zoom compensation
+ *
+ * Adapted from Rete.js area-plugin/drag.ts (86 LOC).
+ * Handles both canvas panning and node dragging.
+ *
+ * @module symbiote-node/interactions/Drag
+ */
+
+export class Drag {
+  /** @type {{ x: number, y: number }|null} */
+  #pointerStart = null;
+
+  /** @type {{ x: number, y: number }|null} */
+  #startPosition = null;
+
+  /** @type {function|null} */
+  #onTranslate = null;
+
+  /** @type {function|null} */
+  #onStart = null;
+
+  /** @type {function|null} */
+  #onDrop = null;
+
+  /** @type {function} */
+  #getZoom = () => 1;
+
+  /** @type {function} */
+  #getPosition = () => ({ x: 0, y: 0 });
+
+  /** @type {HTMLElement|null} */
+  #element = null;
+
+  /** @type {function|null} - optional hit-test before starting drag */
+  #shouldStart = null;
+
+  /**
+   * Initialize drag handler on element
+   * @param {HTMLElement} element - Element to attach drag to
+   * @param {object} config
+   * @param {function} config.getPosition - Returns current {x, y}
+   * @param {function} config.getZoom - Returns current zoom level
+   * @param {object} callbacks
+   * @param {function} callbacks.onStart - Called on drag start
+   * @param {function} callbacks.onTranslate - Called with (x, y) during drag
+   * @param {function} callbacks.onDrop - Called on drag end
+   */
+  initialize(element, config, callbacks) {
+    this.#element = element;
+    this.#getPosition = config.getPosition;
+    this.#getZoom = config.getZoom;
+    this.#onStart = callbacks.onStart || null;
+    this.#onTranslate = callbacks.onTranslate;
+    this.#onDrop = callbacks.onDrop || null;
+    this.#shouldStart = callbacks.shouldStart || null;
+
+    element.style.touchAction = 'none';
+    element.addEventListener('pointerdown', this.#down);
+    window.addEventListener('pointermove', this.#move);
+    window.addEventListener('pointerup', this.#up);
+  }
+
+  #down = (e) => {
+    if (e.pointerType === 'mouse' && e.button !== 0) return;
+
+    if (e.target.closest && e.target.closest('.sn-socket')) return;
+
+    if (this.#shouldStart && !this.#shouldStart(e)) return;
+    e.stopPropagation();
+    this.#pointerStart = { x: e.pageX, y: e.pageY };
+    this.#startPosition = { ...this.#getPosition() };
+    if (this.#onStart) this.#onStart(e);
+  };
+
+  #move = (e) => {
+    if (!this.#pointerStart || !this.#startPosition) return;
+    e.preventDefault();
+    let dx = e.pageX - this.#pointerStart.x;
+    let dy = e.pageY - this.#pointerStart.y;
+    let zoom = this.#getZoom();
+    let x = this.#startPosition.x + dx / zoom;
+    let y = this.#startPosition.y + dy / zoom;
+    if (this.#onTranslate) this.#onTranslate(x, y, e);
+  };
+
+  #up = (e) => {
+    if (!this.#pointerStart) return;
+    this.#pointerStart = null;
+    this.#startPosition = null;
+    if (this.#onDrop) this.#onDrop(e);
+  };
+
+  /** Cleanup event listeners */
+  destroy() {
+    if (this.#element) {
+      this.#element.removeEventListener('pointerdown', this.#down);
+    }
+    window.removeEventListener('pointermove', this.#move);
+    window.removeEventListener('pointerup', this.#up);
+  }
+}
+
+export { Drag as default };

package/interactions/Selector.js

@@ -0,0 +1,133 @@
+/**
+ * Selector — multi-select manager for nodes and connections
+ *
+ * Handles single select, Ctrl/Meta+click accumulation,
+ * canvas deselect, and group translate of selected nodes.
+ *
+ * Adapted from Rete.js selectable extension (208 LOC).
+ * @module symbiote-node/interactions/Selector
+ */
+
+/** @type {number} Minimum pointer movement to consider a drag (pixels) */
+const TWITCH_THRESHOLD = 4;
+
+export class Selector {
+  /** @type {Set<string>} */
+  #selectedNodes = new Set();
+
+  /** @type {Set<string>} */
+  #selectedConnections = new Set();
+
+  /** @type {function|null} */
+  #onChange = null;
+
+  /**
+   * @param {object} config
+   * @param {function} config.onChange - Called when selection changes: (nodes: Set, connections: Set)
+   */
+  constructor(config = {}) {
+    this.#onChange = config.onChange || null;
+  }
+
+  /**
+   * Select a node (single or accumulate with Ctrl/Meta)
+   * @param {string} nodeId
+   * @param {boolean} accumulate - Ctrl/Meta held
+   */
+  selectNode(nodeId, accumulate = false) {
+    if (!accumulate) {
+      this.#selectedNodes.clear();
+      this.#selectedConnections.clear();
+    }
+
+    if (this.#selectedNodes.has(nodeId) && accumulate) {
+      this.#selectedNodes.delete(nodeId);
+    } else {
+      this.#selectedNodes.add(nodeId);
+    }
+
+    this.#notify();
+  }
+
+  /**
+   * Select a connection
+   * @param {string} connId
+   * @param {boolean} accumulate
+   */
+  selectConnection(connId, accumulate = false) {
+    if (!accumulate) {
+      this.#selectedNodes.clear();
+      this.#selectedConnections.clear();
+    }
+
+    if (this.#selectedConnections.has(connId) && accumulate) {
+      this.#selectedConnections.delete(connId);
+    } else {
+      this.#selectedConnections.add(connId);
+    }
+
+    this.#notify();
+  }
+
+  /**
+   * Deselect everything
+   */
+  unselectAll() {
+    if (this.#selectedNodes.size === 0 && this.#selectedConnections.size === 0) return;
+    this.#selectedNodes.clear();
+    this.#selectedConnections.clear();
+    this.#notify();
+  }
+
+  /**
+   * @param {string} nodeId
+   * @returns {boolean}
+   */
+  isNodeSelected(nodeId) {
+    return this.#selectedNodes.has(nodeId);
+  }
+
+  /**
+   * @param {string} connId
+   * @returns {boolean}
+   */
+  isConnectionSelected(connId) {
+    return this.#selectedConnections.has(connId);
+  }
+
+  /**
+   * Get all selected node IDs
+   * @returns {Set<string>}
+   */
+  getSelectedNodes() {
+    return this.#selectedNodes;
+  }
+
+  /**
+   * Get all selected connection IDs
+   * @returns {Set<string>}
+   */
+  getSelectedConnections() {
+    return this.#selectedConnections;
+  }
+
+  /**
+   * Check if pointer was a twitch (< 4px movement)
+   * @param {{ x: number, y: number }} start
+   * @param {{ x: number, y: number }} end
+   * @returns {boolean}
+   */
+  static isTwitch(start, end) {
+    let dx = Math.abs(end.x - start.x);
+    let dy = Math.abs(end.y - start.y);
+    return dx < TWITCH_THRESHOLD && dy < TWITCH_THRESHOLD;
+  }
+
+  #notify() {
+    if (this.#onChange) {
+      this.#onChange(this.#selectedNodes, this.#selectedConnections);
+    }
+  }
+}
+
+export { Selector as default };

package/interactions/SnapGrid.js

@@ -0,0 +1,66 @@
+/**
+ * SnapGrid — grid snapping for node positions
+ *
+ * Rounds coordinates to nearest grid cell.
+ * Supports dynamic (during drag) and static (on drop) modes.
+ *
+ * Adapted from Rete.js snap grid (62 LOC).
+ * @module symbiote-node/interactions/SnapGrid
+ */
+
+export class SnapGrid {
+  /** @type {number} */
+  #size;
+
+  /** @type {boolean} */
+  #dynamic;
+
+  /**
+   * @param {object} config
+   * @param {number} [config.size=16] - Grid cell size in pixels
+   * @param {boolean} [config.dynamic=true] - Snap during drag (true) or only on drop (false)
+   */
+  constructor(config = {}) {
+    this.#size = config.size || 16;
+    this.#dynamic = config.dynamic !== false;
+  }
+
+  /**
+   * Snap coordinates to nearest grid cell
+   * @param {number} x
+   * @param {number} y
+   * @returns {{ x: number, y: number }}
+   */
+  snap(x, y) {
+    return {
+      x: Math.round(x / this.#size) * this.#size,
+      y: Math.round(y / this.#size) * this.#size,
+    };
+  }
+
+  /**
+   * Whether to snap during drag or only on drop
+   * @returns {boolean}
+   */
+  get isDynamic() {
+    return this.#dynamic;
+  }
+
+  /**
+   * Get grid size
+   * @returns {number}
+   */
+  get size() {
+    return this.#size;
+  }
+
+  /**
+   * Update grid size
+   * @param {number} size
+   */
+  setSize(size) {
+    this.#size = size;
+  }
+}
+
+export { SnapGrid as default };