project-graph-mcp 2.2.6 → 2.3.0

package/vendor/symbiote-node/canvas/PseudoConnection.js

@@ -0,0 +1,80 @@
+/**
+ * PseudoConnection — temporary connection line during drag
+ *
+ * Renders dashed Bézier path + plus indicator at endpoint.
+ * Extracted from NodeCanvas to reduce complexity.
+ *
+ * @module symbiote-node/canvas/PseudoConnection
+ */
+
+export class PseudoConnection {
+
+  /** @type {SVGPathElement|null} */
+  #path = null;
+
+  /** @type {SVGGElement|null} */
+  #plusIndicator = null;
+
+  /** @type {SVGElement} */
+  #svg;
+
+  /**
+   * @param {SVGElement} svgLayer - pseudo SVG overlay
+   */
+  constructor(svgLayer) {
+    this.#svg = svgLayer;
+  }
+
+  /**
+   * Show pseudo-connection between two world-space points.
+   * pseudo-svg is inside .content which applies CSS transform (zoom+pan),
+   * so coordinates must be in world-space (same as ConnectionRenderer dots).
+   * @param {number} sx - Start X (world space)
+   * @param {number} sy - Start Y (world space)
+   * @param {number} ex - End X (world space)
+   * @param {number} ey - End Y (world space)
+   */
+  show(sx, sy, ex, ey) {
+    if (!this.#path) {
+      this.#path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      this.#path.setAttribute('class', 'pseudo-path');
+      this.#svg.appendChild(this.#path);
+    }
+
+    const dx = Math.abs(ex - sx) * 0.5;
+    const d = `M ${sx} ${sy} C ${sx + dx} ${sy}, ${ex - dx} ${ey}, ${ex} ${ey}`;
+    this.#path.setAttribute('d', d);
+
+    // Plus indicator at endpoint
+    if (!this.#plusIndicator) {
+      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      g.setAttribute('class', 'plus-indicator');
+      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+      circle.setAttribute('r', '8');
+      const h = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      h.setAttribute('x1', '-4'); h.setAttribute('y1', '0');
+      h.setAttribute('x2', '4'); h.setAttribute('y2', '0');
+      const v = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      v.setAttribute('x1', '0'); v.setAttribute('y1', '-4');
+      v.setAttribute('x2', '0'); v.setAttribute('y2', '4');
+      g.appendChild(circle);
+      g.appendChild(h);
+      g.appendChild(v);
+      this.#svg.appendChild(g);
+      this.#plusIndicator = g;
+    }
+    this.#plusIndicator.setAttribute('transform', `translate(${ex}, ${ey})`);
+  }
+
+  /** Hide and clean up pseudo-connection */
+  hide() {
+    if (this.#path) {
+      this.#path.remove();
+      this.#path = null;
+    }
+    if (this.#plusIndicator) {
+      this.#plusIndicator.remove();
+      this.#plusIndicator = null;
+    }
+  }
+}

package/vendor/symbiote-node/canvas/SubgraphManager.js

@@ -0,0 +1,201 @@
+/**
+ * SubgraphManager — Navigation stack for subgraph drill-down
+ *
+ * Manages a stack of editor contexts. When drilling into a subgraph,
+ * the current state is saved and the inner editor is loaded.
+ * Breadcrumb navigation allows jumping back to any level.
+ *
+ * @module symbiote-node/canvas/SubgraphManager
+ */
+
+/**
+ * @typedef {Object} NavEntry
+ * @property {import('../core/Editor.js').NodeEditor} editor
+ * @property {Object<string, { x: number, y: number }>} positions
+ * @property {{ panX: number, panY: number, zoom: number }} transform
+ * @property {string} label - Display label for breadcrumb
+ * @property {string|null} subgraphNodeId - SubgraphNode ID in parent (null for root)
+ */
+
+export class SubgraphManager {
+  /** @type {NavEntry[]} */
+  #stack = [];
+
+  /** @type {import('./NodeCanvas.js').NodeCanvas|null} */
+  #canvas = null;
+
+  /** @type {function|null} */
+  #onNavigate = null;
+
+  /**
+   * Initialize with canvas and root editor
+   * @param {*} canvas - NodeCanvas element
+   * @param {import('../core/Editor.js').NodeEditor} rootEditor
+   */
+  initialize(canvas, rootEditor) {
+    this.#canvas = canvas;
+    this.#stack = [{
+      editor: rootEditor,
+      positions: {},
+      transform: { panX: 0, panY: 0, zoom: 1 },
+      label: 'Root',
+      subgraphNodeId: null,
+    }];
+  }
+
+  /**
+   * Set navigation callback (for breadcrumb updates)
+   * @param {function} callback - (path: string[]) => void
+   */
+  onNavigate(callback) {
+    this.#onNavigate = callback;
+  }
+
+  /**
+   * Drill down into a SubgraphNode
+   * @param {import('../core/SubgraphNode.js').SubgraphNode} subgraphNode
+   */
+  drillDown(subgraphNode) {
+    if (!subgraphNode?._isSubgraph || !this.#canvas) return;
+
+    // Save current state
+    const current = this.#stack[this.#stack.length - 1];
+    current.positions = this.#capturePositions(current.editor, current.positions);
+    current.transform = this.#captureTransform();
+
+    // Push inner editor
+    this.#stack.push({
+      editor: subgraphNode.getInnerEditor(),
+      positions: subgraphNode.innerPositions,
+      transform: subgraphNode.innerTransform,
+      label: subgraphNode.label,
+      subgraphNodeId: subgraphNode.id,
+    });
+
+    // Switch canvas to inner editor
+    this.#applyLevel(this.#stack.length - 1);
+    this.#notifyNavigate();
+  }
+
+  /**
+   * Navigate up to a specific level
+   * @param {number} level - 0 = root
+   */
+  drillUp(level) {
+    if (level === undefined) level = this.#stack.length - 2;
+    if (level < 0 || level >= this.#stack.length || !this.#canvas) return;
+
+    // Save state of levels being popped (persist inner positions)
+    for (let i = this.#stack.length - 1; i > level; i--) {
+      const entry = this.#stack[i];
+      const parentEntry = this.#stack[i - 1];
+      if (entry.subgraphNodeId) {
+        const subNode = parentEntry.editor.getNode(entry.subgraphNodeId);
+        if (subNode?._isSubgraph) {
+          subNode.setInnerPositions(this.#capturePositions(entry.editor, entry.positions));
+          subNode.setInnerTransform(entry.transform);
+        }
+      }
+    }
+
+    // Save current deep level positions before truncating
+    const currentEntry = this.#stack[this.#stack.length - 1];
+    currentEntry.positions = this.#capturePositions(currentEntry.editor, currentEntry.positions);
+    currentEntry.transform = this.#captureTransform();
+
+    // Truncate stack
+    this.#stack.length = level + 1;
+
+    // Switch canvas
+    this.#applyLevel(level);
+    this.#notifyNavigate();
+  }
+
+  /**
+   * Get current breadcrumb path
+   * @returns {Array<{ label: string, level: number }>}
+   */
+  getPath() {
+    return this.#stack.map((entry, i) => ({
+      label: entry.label,
+      level: i,
+    }));
+  }
+
+  /**
+   * Get current depth (0 = root)
+   * @returns {number}
+   */
+  get depth() {
+    return this.#stack.length - 1;
+  }
+
+  /**
+   * Get current editor
+   * @returns {import('../core/Editor.js').NodeEditor}
+   */
+  get currentEditor() {
+    return this.#stack[this.#stack.length - 1].editor;
+  }
+
+  /**
+   * Apply a stack level to the canvas
+   * @param {number} level
+   */
+  #applyLevel(level) {
+    const entry = this.#stack[level];
+    if (!entry || !this.#canvas) return;
+
+    // Rebind editor
+    this.#canvas.setEditor(entry.editor);
+
+    // Restore positions
+    for (const [nodeId, pos] of Object.entries(entry.positions)) {
+      this.#canvas.setNodePosition(nodeId, pos.x, pos.y);
+    }
+
+    // Restore transform
+    this.#canvas.$.panX = entry.transform.panX;
+    this.#canvas.$.panY = entry.transform.panY;
+    this.#canvas.$.zoom = entry.transform.zoom;
+  }
+
+  /**
+   * Capture current node positions from editor.
+   * Falls back to existing entry positions when DOM elements
+   * have already been cleared (e.g. during setEditor transitions).
+   * @param {import('../core/Editor.js').NodeEditor} editor
+   * @param {Object<string, { x: number, y: number }>} [fallback={}]
+   * @returns {Object<string, { x: number, y: number }>}
+   */
+  #capturePositions(editor, fallback = {}) {
+    const positions = { ...fallback };
+    if (!this.#canvas) return positions;
+    for (const node of editor.getNodes()) {
+      const el = this.#canvas.getNodeView?.(node.id);
+      if (el?._position) {
+        positions[node.id] = { ...el._position };
+      }
+    }
+    return positions;
+  }
+
+  /**
+   * Capture current viewport transform
+   * @returns {{ panX: number, panY: number, zoom: number }}
+   */
+  #captureTransform() {
+    if (!this.#canvas) return { panX: 0, panY: 0, zoom: 1 };
+    return {
+      panX: this.#canvas.$.panX ?? 0,
+      panY: this.#canvas.$.panY ?? 0,
+      zoom: this.#canvas.$.zoom ?? 1,
+    };
+  }
+
+  #notifyNavigate() {
+    if (this.#onNavigate) {
+      this.#onNavigate(this.getPath());
+    }
+  }
+}