project-graph-mcp 2.2.4 → 2.3.0

package/vendor/symbiote-node/interactions/Drag.js

@@ -0,0 +1,102 @@
+/**
+ * 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;
+    // Skip if event originates from a socket (ConnectFlow handles those)
+    if (e.target.closest && e.target.closest('.sn-socket')) return;
+    // Optional hit-test: allow caller to reject drag (e.g. SVG perimeter check)
+    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();
+    const dx = e.pageX - this.#pointerStart.x;
+    const dy = e.pageY - this.#pointerStart.y;
+    const zoom = this.#getZoom();
+    const x = this.#startPosition.x + dx / zoom;
+    const 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);
+  }
+}

package/vendor/symbiote-node/interactions/Selector.js

@@ -0,0 +1,132 @@
+/**
+ * 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) {
+    const dx = Math.abs(end.x - start.x);
+    const dy = Math.abs(end.y - start.y);
+    return dx < TWITCH_THRESHOLD && dy < TWITCH_THRESHOLD;
+  }
+
+  #notify() {
+    if (this.#onChange) {
+      this.#onChange(this.#selectedNodes, this.#selectedConnections);
+    }
+  }
+}

package/vendor/symbiote-node/interactions/SnapGrid.js

@@ -0,0 +1,65 @@
+/**
+ * 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;
+  }
+}

package/vendor/symbiote-node/interactions/Zoom.js

@@ -0,0 +1,140 @@
+/**
+ * Zoom handler — wheel, touch pinch, and double-click zoom
+ *
+ * Adapted from Rete.js area-plugin/zoom.ts (123 LOC).
+ * Handles zoom relative to cursor/pinch center.
+ *
+ * @module symbiote-node/interactions/Zoom
+ */
+
+export class Zoom {
+  /** @type {PointerEvent[]} */
+  #pointers = [];
+
+  /** @type {{ cx: number, cy: number, distance: number }|null} */
+  #previous = null;
+
+  /** @type {HTMLElement|null} */
+  #container = null;
+
+  /** @type {HTMLElement|null} */
+  #content = null;
+
+  /** @type {function|null} */
+  #onZoom = null;
+
+  /**
+   * @param {number} [intensity=0.1] - Zoom sensitivity
+   */
+  constructor(intensity = 0.1) {
+    /** @type {number} */
+    this.intensity = intensity;
+  }
+
+  /**
+   * Initialize zoom handler
+   * @param {HTMLElement} container - Outer container
+   * @param {HTMLElement} content - Inner content element (for getBoundingClientRect)
+   * @param {function} onZoom - Callback: (delta, ox, oy, source)
+   * @param {function} [getTransform] - Optional callback returning {x, y} to avoid getBoundingClientRect layout thrashing
+   */
+  initialize(container, content, onZoom, getTransform = null) {
+    this.#container = container;
+    this.#content = content;
+    this.#onZoom = onZoom;
+    this.getTransform = getTransform;
+
+    container.addEventListener('wheel', this.#wheel, { passive: false });
+    container.addEventListener('pointerdown', this.#down);
+    container.addEventListener('dblclick', this.#dblclick);
+    window.addEventListener('pointermove', this.#move);
+    window.addEventListener('pointerup', this.#up);
+    window.addEventListener('pointercancel', this.#up);
+  }
+
+  #getRect() {
+    if (this.getTransform) {
+      const c = this.#container.getBoundingClientRect();
+      const t = this.getTransform();
+      return { left: c.left + t.x, top: c.top + t.y };
+    }
+    return this.#content.getBoundingClientRect();
+  }
+
+  #wheel = (e) => {
+    e.preventDefault();
+    const rect = this.#getRect();
+    // Normalize delta: trackpads send small frequent deltas, mice send large ones
+    const absDelta = Math.min(Math.abs(e.deltaY), 10) / 10;
+    const sign = e.deltaY < 0 ? 1 : -1;
+    const delta = sign * this.intensity * absDelta;
+    const ox = (rect.left - e.clientX) * delta;
+    const oy = (rect.top - e.clientY) * delta;
+    this.#onZoom(delta, ox, oy, 'wheel');
+  };
+
+  #dblclick = (e) => {
+    e.preventDefault();
+    const rect = this.#getRect();
+    const delta = 4 * this.intensity;
+    const ox = (rect.left - e.clientX) * delta;
+    const oy = (rect.top - e.clientY) * delta;
+    this.#onZoom(delta, ox, oy, 'dblclick');
+  };
+
+  #down = (e) => {
+    this.#pointers.push(e);
+  };
+
+  #move = (e) => {
+    this.#pointers = this.#pointers.map(p =>
+      p.pointerId === e.pointerId ? e : p
+    );
+    if (this.#pointers.length < 2) return;
+
+    const [p1, p2] = this.#pointers;
+    const distance = Math.sqrt(
+      (p1.clientX - p2.clientX) ** 2 + (p1.clientY - p2.clientY) ** 2
+    );
+    const cx = (p1.clientX + p2.clientX) / 2;
+    const cy = (p1.clientY + p2.clientY) / 2;
+
+    if (this.#previous && this.#previous.distance > 0) {
+      const rect = this.#getRect();
+      const delta = distance / this.#previous.distance - 1;
+      const ox = (rect.left - cx) * delta;
+      const oy = (rect.top - cy) * delta;
+      this.#onZoom(
+        delta,
+        ox - (this.#previous.cx - cx),
+        oy - (this.#previous.cy - cy),
+        'touch'
+      );
+    }
+    this.#previous = { cx, cy, distance };
+  };
+
+  #up = (e) => {
+    this.#previous = null;
+    this.#pointers = this.#pointers.filter(p => p.pointerId !== e.pointerId);
+  };
+
+  /**
+   * Whether a multi-touch zoom is in progress
+   * @returns {boolean}
+   */
+  isTranslating() {
+    return this.#pointers.length >= 2;
+  }
+
+  /** Cleanup event listeners */
+  destroy() {
+    if (!this.#container) return;
+    this.#container.removeEventListener('wheel', this.#wheel);
+    this.#container.removeEventListener('pointerdown', this.#down);
+    this.#container.removeEventListener('dblclick', this.#dblclick);
+    window.removeEventListener('pointermove', this.#move);
+    window.removeEventListener('pointerup', this.#up);
+    window.removeEventListener('pointercancel', this.#up);
+  }
+}

package/vendor/symbiote-node/layout/ActionZone/ActionZone.css.js

@@ -0,0 +1,88 @@
+/**
+ * @fileoverview ActionZone styles
+ */
+
+import { css } from '@symbiotejs/symbiote';
+
+/**
+ * Size of the triangular zone (px)
+ */
+export const ZONE_SIZE = 16;
+
+export const styles = css`
+action-zone {
+  position: absolute;
+  width: ${ZONE_SIZE}px;
+  height: ${ZONE_SIZE}px;
+  z-index: 100;
+  cursor: crosshair;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    opacity: 1 !important;
+  }
+
+  &[dragging] {
+    opacity: 1 !important;
+  }
+
+  /* Corner positioning */
+  &[corner="tl"] {
+    top: 0;
+    left: 0;
+  }
+
+  &[corner="tr"] {
+    top: 0;
+    right: 0;
+  }
+
+  &[corner="bl"] {
+    bottom: 0;
+    left: 0;
+  }
+
+  &[corner="br"] {
+    bottom: 0;
+    right: 0;
+  }
+
+  .zone-icon {
+    width: 100%;
+    height: 100%;
+    color: var(--layout-highlight, #888);
+    opacity: 0.6;
+  }
+
+  /* Rotate triangle based on corner */
+  &[corner="tl"] .zone-icon {
+    transform: rotate(0deg);
+  }
+
+  &[corner="tr"] .zone-icon {
+    transform: rotate(90deg);
+  }
+
+  &[corner="br"] .zone-icon {
+    transform: rotate(180deg);
+  }
+
+  &[corner="bl"] .zone-icon {
+    transform: rotate(270deg);
+  }
+
+  &[dragging] .zone-icon {
+    color: var(--layout-highlight, #aaa);
+    opacity: 1;
+  }
+}
+
+/* Parent hover rule */
+layout-node[node-type="panel"]:hover action-zone {
+  opacity: 0.5;
+}
+`;