project-graph-mcp 2.2.6 → 2.3.1

package/vendor/symbiote-node/plugins/History.js

@@ -0,0 +1,384 @@
+/**
+ * History — undo/redo action stack for NodeEditor
+ *
+ * Records editor actions (addNode, removeNode, move, connect, disconnect)
+ * and provides undo()/redo() with Ctrl+Z / Ctrl+Shift+Z keyboard bindings.
+ * Plugin pattern: attach to editor via history.listen(editor).
+ *
+ * @module symbiote-node/plugins/History
+ */
+
+/**
+ * @typedef {object} HistoryAction
+ * @property {'addNode'|'removeNode'|'moveNode'|'addConnection'|'removeConnection'|'addFrame'|'removeFrame'} type
+ * @property {object} data - Serialized action data for undo/redo
+ */
+
+const MAX_STACK = 200;
+
+export class History {
+
+  /** @type {HistoryAction[]} */
+  #undoStack = [];
+
+  /** @type {HistoryAction[]} */
+  #redoStack = [];
+
+  /** @type {import('../core/Editor.js').NodeEditor|null} */
+  #editor = null;
+
+  /** @type {function|null} */
+  #getCanvas = null;
+
+  /** @type {boolean} - prevent recording actions triggered by undo/redo itself */
+  #isApplying = false;
+
+  /** @type {function[]} - unsubscribe functions */
+  #unsubs = [];
+
+  /** @type {object} - injected class constructors */
+  #classes = {};
+
+  /**
+   * Attach history tracking to an editor
+   * @param {import('../core/Editor.js').NodeEditor} editor
+   * @param {object} [options]
+   * @param {function} [options.getCanvas] - returns canvas element for position tracking
+   * @param {object} [options.classes] - class constructors: { Node, Connection, Frame, Socket, Input, Output, InputControl }
+   */
+  listen(editor, options = {}) {
+    this.#editor = editor;
+    this.#getCanvas = options.getCanvas || null;
+    this.#classes = options.classes || {};
+
+    // Track node additions
+    this.#unsubs.push(editor.on('nodecreated', (node) => {
+      if (this.#isApplying) return;
+      const canvas = this.#getCanvas?.();
+      const pos = canvas ? this.#getNodePosition(canvas, node.id) : [0, 0];
+      this.#push({
+        type: 'addNode',
+        data: { node: this.#serializeNode(node), position: pos },
+      });
+    }));
+
+    // Track node removals
+    this.#unsubs.push(editor.on('noderemove', (node) => {
+      if (this.#isApplying) return;
+      const canvas = this.#getCanvas?.();
+      const pos = canvas ? this.#getNodePosition(canvas, node.id) : [0, 0];
+      // Capture connections that will be removed with this node
+      const conns = editor.getNodeConnections(node.id).map(c => this.#serializeConnection(c));
+      this.#push({
+        type: 'removeNode',
+        data: { node: this.#serializeNode(node), position: pos, connections: conns },
+      });
+    }));
+
+    // Track node moves
+    this.#unsubs.push(editor.on('nodepicked', (node) => {
+      if (this.#isApplying) return;
+      const canvas = this.#getCanvas?.();
+      if (!canvas) return;
+      const pos = this.#getNodePosition(canvas, node.id);
+      node._historyStartPos = pos;
+    }));
+
+    this.#unsubs.push(editor.on('nodedragged', ({ id }) => {
+      if (this.#isApplying) return;
+      const node = editor.getNode(id);
+      if (!node?._historyStartPos) return;
+      const canvas = this.#getCanvas?.();
+      const endPos = canvas ? this.#getNodePosition(canvas, id) : [0, 0];
+      const startPos = node._historyStartPos;
+      // Only record if position actually changed
+      if (startPos[0] !== endPos[0] || startPos[1] !== endPos[1]) {
+        this.#push({
+          type: 'moveNode',
+          data: { nodeId: id, from: startPos, to: endPos },
+        });
+      }
+      delete node._historyStartPos;
+    }));
+
+    // Track connections
+    this.#unsubs.push(editor.on('connectioncreated', (conn) => {
+      if (this.#isApplying) return;
+      this.#push({
+        type: 'addConnection',
+        data: { connection: this.#serializeConnection(conn) },
+      });
+    }));
+
+    this.#unsubs.push(editor.on('connectionremove', (conn) => {
+      if (this.#isApplying) return;
+      this.#push({
+        type: 'removeConnection',
+        data: { connection: this.#serializeConnection(conn) },
+      });
+    }));
+
+    // Track frames
+    this.#unsubs.push(editor.on('framecreated', (frame) => {
+      if (this.#isApplying) return;
+      this.#push({
+        type: 'addFrame',
+        data: { frame: { ...frame } },
+      });
+    }));
+
+    this.#unsubs.push(editor.on('frameremove', (frame) => {
+      if (this.#isApplying) return;
+      this.#push({
+        type: 'removeFrame',
+        data: { frame: { ...frame } },
+      });
+    }));
+  }
+
+  /**
+   * Bind Ctrl+Z / Ctrl+Shift+Z keyboard shortcuts
+   * @param {HTMLElement} target - element to listen for keydown
+   */
+  bindKeyboard(target) {
+    const handler = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+        e.preventDefault();
+        if (e.shiftKey) this.redo();
+        else this.undo();
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === 'y') {
+        e.preventDefault();
+        this.redo();
+      }
+    };
+    target.addEventListener('keydown', handler);
+    this.#unsubs.push(() => target.removeEventListener('keydown', handler));
+  }
+
+  /** Undo last action */
+  undo() {
+    const action = this.#undoStack.pop();
+    if (!action) return;
+    this.#isApplying = true;
+    try {
+      this.#applyReverse(action);
+      this.#redoStack.push(action);
+    } finally {
+      this.#isApplying = false;
+    }
+  }
+
+  /** Redo last undone action */
+  redo() {
+    const action = this.#redoStack.pop();
+    if (!action) return;
+    this.#isApplying = true;
+    try {
+      this.#applyForward(action);
+      this.#undoStack.push(action);
+    } finally {
+      this.#isApplying = false;
+    }
+  }
+
+  /** @returns {number} */
+  get undoCount() { return this.#undoStack.length; }
+
+  /** @returns {number} */
+  get redoCount() { return this.#redoStack.length; }
+
+  /** Clear all history */
+  clear() {
+    this.#undoStack = [];
+    this.#redoStack = [];
+  }
+
+  /** Destroy and unsubscribe */
+  destroy() {
+    for (const unsub of this.#unsubs) {
+      if (typeof unsub === 'function') unsub();
+    }
+    this.#unsubs = [];
+    this.clear();
+    this.#editor = null;
+  }
+
+  // --- Private ---
+
+  #push(action) {
+    this.#undoStack.push(action);
+    if (this.#undoStack.length > MAX_STACK) this.#undoStack.shift();
+    this.#redoStack = []; // new action invalidates redo
+  }
+
+  #applyReverse(action) {
+    const editor = this.#editor;
+    const canvas = this.#getCanvas?.();
+    if (!editor) return;
+
+    switch (action.type) {
+      case 'addNode':
+        editor.removeNode(action.data.node.id);
+        break;
+
+      case 'removeNode': {
+        const { node: nodeData, position, connections } = action.data;
+        const restoredNode = this.#deserializeNode(nodeData);
+        editor.addNode(restoredNode);
+        if (canvas && position) {
+          canvas.setNodePosition(restoredNode.id, position[0], position[1]);
+        }
+        // Restore connections
+        for (const connData of connections) {
+          const { Connection } = this.#classes;
+          const conn = new Connection(connData.from, connData.out, connData.to, connData.in);
+          conn.id = connData.id;
+          try { editor.addConnection(conn); } catch { /* node may not exist */ }
+        }
+        break;
+      }
+
+      case 'moveNode':
+        if (canvas) {
+          canvas.setNodePosition(action.data.nodeId, action.data.from[0], action.data.from[1]);
+        }
+        break;
+
+      case 'addConnection':
+        editor.removeConnection(action.data.connection.id);
+        break;
+
+      case 'removeConnection': {
+        const connData = action.data.connection;
+        const { Connection } = this.#classes;
+        const conn = new Connection(connData.from, connData.out, connData.to, connData.in);
+        conn.id = connData.id;
+        try { editor.addConnection(conn); } catch { /* already exists */ }
+        break;
+      }
+
+      case 'addFrame':
+        editor.removeFrame(action.data.frame.id);
+        break;
+
+      case 'removeFrame': {
+        const { Frame } = this.#classes;
+        const frame = new Frame(action.data.frame.label, action.data.frame);
+        frame.id = action.data.frame.id;
+        editor.addFrame(frame);
+        break;
+      }
+    }
+  }
+
+  #applyForward(action) {
+    const editor = this.#editor;
+    const canvas = this.#getCanvas?.();
+    if (!editor) return;
+
+    switch (action.type) {
+      case 'addNode': {
+        const restoredNode = this.#deserializeNode(action.data.node);
+        editor.addNode(restoredNode);
+        if (canvas && action.data.position) {
+          canvas.setNodePosition(restoredNode.id, action.data.position[0], action.data.position[1]);
+        }
+        break;
+      }
+
+      case 'removeNode':
+        editor.removeNode(action.data.node.id);
+        break;
+
+      case 'moveNode':
+        if (canvas) {
+          canvas.setNodePosition(action.data.nodeId, action.data.to[0], action.data.to[1]);
+        }
+        break;
+
+      case 'addConnection': {
+        const connData = action.data.connection;
+        const { Connection } = this.#classes;
+        const conn = new Connection(connData.from, connData.out, connData.to, connData.in);
+        conn.id = connData.id;
+        try { editor.addConnection(conn); } catch { /* already exists */ }
+        break;
+      }
+
+      case 'removeConnection':
+        editor.removeConnection(action.data.connection.id);
+        break;
+
+      case 'addFrame': {
+        const { Frame } = this.#classes;
+        const frame = new Frame(action.data.frame.label, action.data.frame);
+        frame.id = action.data.frame.id;
+        editor.addFrame(frame);
+        break;
+      }
+
+      case 'removeFrame':
+        editor.removeFrame(action.data.frame.id);
+        break;
+    }
+  }
+
+  #serializeNode(node) {
+    return {
+      id: node.id,
+      label: node.label,
+      type: node.type,
+      category: node.category,
+      shape: node.shape,
+      params: { ...node.params },
+      inputs: Object.fromEntries(Object.entries(node.inputs).map(([k, v]) => [k, {
+        socket: v.socket ? { type: v.socket.type, color: v.socket.color } : null,
+        label: v.label,
+      }])),
+      outputs: Object.fromEntries(Object.entries(node.outputs).map(([k, v]) => [k, {
+        socket: v.socket ? { type: v.socket.type, color: v.socket.color } : null,
+        label: v.label,
+      }])),
+      controls: Object.fromEntries(Object.entries(node.controls).map(([k, v]) => [k, {
+        label: v.label,
+        value: v.value,
+        type: v.type,
+      }])),
+    };
+  }
+
+  #serializeConnection(conn) {
+    return { id: conn.id, from: conn.from, out: conn.out, to: conn.to, in: conn.in };
+  }
+
+  #deserializeNode(data) {
+    const { Node, Socket, Input, Output, InputControl } = this.#classes;
+    const node = new Node(data.label, {
+      type: data.type,
+      category: data.category,
+      shape: data.shape,
+    });
+    node.id = data.id;
+    node.params = { ...data.params };
+
+    for (const [key, inp] of Object.entries(data.inputs)) {
+      const socket = inp.socket ? new Socket(inp.socket.type, { color: inp.socket.color }) : new Socket('any');
+      node.addInput(key, new Input(socket, inp.label));
+    }
+    for (const [key, out] of Object.entries(data.outputs)) {
+      const socket = out.socket ? new Socket(out.socket.type, { color: out.socket.color }) : new Socket('any');
+      node.addOutput(key, new Output(socket, out.label));
+    }
+    for (const [key, ctrl] of Object.entries(data.controls)) {
+      node.addControl(key, new InputControl(ctrl.type || 'text', { label: ctrl.label, initial: ctrl.value }));
+    }
+
+    return node;
+  }
+
+  #getNodePosition(canvas, nodeId) {
+    const positions = canvas.getPositions();
+    return positions[nodeId] || [0, 0];
+  }
+}

package/vendor/symbiote-node/plugins/Readonly.js

@@ -0,0 +1,59 @@
+/**
+ * Readonly — toggle readonly mode for node editor
+ *
+ * When enabled, blocks node creation, deletion, connection
+ * creation/removal, and node dragging.
+ *
+ * Adapted from Rete.js readonly plugin (63 LOC).
+ * @module symbiote-node/plugins/Readonly
+ */
+
+export class Readonly {
+
+  /** @type {boolean} */
+  #enabled = false;
+
+  /** @type {import('../core/Editor.js').NodeEditor|null} */
+  #editor = null;
+
+  /**
+   * @param {import('../core/Editor.js').NodeEditor} editor
+   */
+  constructor(editor) {
+    this.#editor = editor;
+  }
+
+  /** Enable readonly mode */
+  enable() {
+    this.#enabled = true;
+    this.#editor.emit('readonlychanged', true);
+  }
+
+  /** Disable readonly mode */
+  disable() {
+    this.#enabled = false;
+    this.#editor.emit('readonlychanged', false);
+  }
+
+  /** Toggle readonly mode */
+  toggle() {
+    this.#enabled ? this.disable() : this.enable();
+  }
+
+  /**
+   * Whether readonly is currently enabled
+   * @returns {boolean}
+   */
+  get isEnabled() {
+    return this.#enabled;
+  }
+
+  /**
+   * Guard check — throws if readonly
+   * Use before mutation operations
+   * @returns {boolean} true if operation should be blocked
+   */
+  shouldBlock() {
+    return this.#enabled;
+  }
+}

package/vendor/symbiote-node/shapes/CircleShape.js

@@ -0,0 +1,80 @@
+/**
+ * CircleShape — circular hub node
+ *
+ * Sockets distributed around the perimeter of a circle.
+ * Inputs on left semicircle, outputs on right semicircle.
+ *
+ * @module symbiote-node/shapes/CircleShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+export class CircleShape extends NodeShape {
+  name = 'circle';
+
+  getSocketPosition(side, index, total, { width, height }) {
+    const r = Math.min(width, height) / 2;
+    const cx = width / 2;
+    const cy = height / 2;
+
+    // Inputs: left semicircle (90° to 270°), top to bottom
+    // Outputs: right semicircle (-90° to 90°), top to bottom
+    const arcSpan = Math.PI * 0.8; // 144 degrees
+    const centerAngle = side === 'input' ? Math.PI : 0;
+    const startAngle = centerAngle - arcSpan / 2;
+    const step = total > 1 ? arcSpan / (total - 1) : 0;
+    const angle = startAngle + step * index;
+
+    return {
+      x: cx + r * Math.cos(angle),
+      y: cy + r * Math.sin(angle),
+      angle: (angle * 180) / Math.PI,
+    };
+  }
+
+  /**
+   * Get pin position on a specific side of the circle.
+   * Pins follow an arc in the corresponding quadrant.
+   *
+   * @param {'top'|'right'|'bottom'|'left'} side
+   * @param {number} t - position along the side (0..1)
+   * @param {{ width: number, height: number }} size
+   * @returns {{ x: number, y: number, angle: number }}
+   */
+  getSidePosition(side, t, size) {
+    const r = Math.min(size.width, size.height) / 2;
+    const cx = size.width / 2;
+    const cy = size.height / 2;
+
+    // Each side spans a 90° arc centered on the cardinal direction
+    const CENTERS = { right: 0, bottom: Math.PI / 2, left: Math.PI, top: -Math.PI / 2 };
+    const ARC = Math.PI * 0.8; // 144° arc to avoid exact corners
+    const MARGIN = 0.2;
+    const effectiveT = MARGIN + t * (1 - 2 * MARGIN);
+
+    const center = CENTERS[side];
+    const a = center - ARC / 2 + ARC * effectiveT;
+
+    return {
+      x: cx + r * Math.cos(a),
+      y: cy + r * Math.sin(a),
+      angle: (a * 180) / Math.PI,
+    };
+  }
+
+  getBorderRadius() {
+    return '50%';
+  }
+
+  get hasHeader() {
+    return false;
+  }
+
+  get hasControls() {
+    return false;
+  }
+
+  getMinSize() {
+    return { minWidth: 80, minHeight: 80 };
+  }
+}

package/vendor/symbiote-node/shapes/CommentShape.js

@@ -0,0 +1,35 @@
+/**
+ * CommentShape — wide annotation banner node
+ *
+ * No sockets, no header, no controls.
+ * Just text content with semi-transparent background.
+ * Used for annotations and documentation on the canvas.
+ *
+ * @module symbiote-node/shapes/CommentShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+export class CommentShape extends NodeShape {
+  name = 'comment';
+
+  getSocketPosition() {
+    return { x: 0, y: 0, angle: 0 };
+  }
+
+  getBorderRadius() {
+    return 'var(--sn-comment-radius, 6px)';
+  }
+
+  get hasHeader() {
+    return false;
+  }
+
+  get hasControls() {
+    return false;
+  }
+
+  getMinSize() {
+    return { minWidth: 200, minHeight: 40 };
+  }
+}

package/vendor/symbiote-node/shapes/DiamondShape.js

@@ -0,0 +1,115 @@
+/**
+ * DiamondShape — condition/decision rhombus node
+ *
+ * Input at top vertex, outputs distributed along bottom edges.
+ * Classic if/else, switch/case pattern.
+ *
+ * @module symbiote-node/shapes/DiamondShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+export class DiamondShape extends NodeShape {
+  name = 'diamond';
+
+  getSocketPosition(side, index, total, { width, height }) {
+    const cx = width / 2;
+    const cy = height / 2;
+
+    if (side === 'input') {
+      // Inputs distributed along top edges
+      if (total === 1) {
+        return { x: cx, y: 0, angle: 270 };
+      }
+      // Multiple inputs: spread along top-left and top-right edges
+      const t = (index + 1) / (total + 1);
+      return {
+        x: cx * (1 - t),
+        y: cy * t,
+        angle: 225 + 90 * (index / (total - 1)),
+      };
+    }
+
+    // Outputs along bottom edges
+    if (total === 1) {
+      return { x: cx, y: height, angle: 90 };
+    }
+    if (total === 2) {
+      // True: bottom-left, False: bottom-right
+      return index === 0
+        ? { x: cx * 0.35, y: cy + cy * 0.65, angle: 225 }
+        : { x: width - cx * 0.35, y: cy + cy * 0.65, angle: 315 };
+    }
+    // 3+ outputs: spread along bottom edges
+    const t = (index + 1) / (total + 1);
+    return {
+      x: t < 0.5 ? cx * (1 - 2 * t) : cx + cx * (2 * t - 1),
+      y: t < 0.5 ? cy + cy * 2 * t : cy + cy * (2 - 2 * t),
+      angle: 135 + 90 * (index / (total - 1)),
+    };
+  }
+
+  /**
+   * Get pin position on a specific side of the diamond.
+   * Each side maps to two diagonal edges meeting at that cardinal vertex.
+   *
+   * @param {'top'|'right'|'bottom'|'left'} side
+   * @param {number} t - position along the side (0..1)
+   * @param {{ width: number, height: number }} size
+   * @returns {{ x: number, y: number, angle: number }}
+   */
+  getSidePosition(side, t, size) {
+    const cx = size.width / 2;
+    const cy = size.height / 2;
+    const NORMALS = { top: -90, right: 0, bottom: 90, left: 180 };
+    const MARGIN = 0.2;
+    const effectiveT = MARGIN + t * (1 - 2 * MARGIN);
+
+    // Diamond vertices: top(cx,0), right(w,cy), bottom(cx,h), left(0,cy)
+    // Each "side" spans two edges meeting at the cardinal vertex
+    const vertices = {
+      top:    [{ x: 0, y: cy }, { x: cx, y: 0 }, { x: size.width, y: cy }],
+      right:  [{ x: cx, y: 0 }, { x: size.width, y: cy }, { x: cx, y: size.height }],
+      bottom: [{ x: 0, y: cy }, { x: cx, y: size.height }, { x: size.width, y: cy }],
+      left:   [{ x: cx, y: 0 }, { x: 0, y: cy }, { x: cx, y: size.height }],
+    };
+
+    const [p0, p1, p2] = vertices[side];
+
+    // effectiveT spans from p0 → p1 → p2 (two edges)
+    let x, y;
+    if (effectiveT <= 0.5) {
+      const segT = effectiveT * 2;
+      x = p0.x + (p1.x - p0.x) * segT;
+      y = p0.y + (p1.y - p0.y) * segT;
+    } else {
+      const segT = (effectiveT - 0.5) * 2;
+      x = p1.x + (p2.x - p1.x) * segT;
+      y = p1.y + (p2.y - p1.y) * segT;
+    }
+
+    return { x, y, angle: NORMALS[side] };
+  }
+
+  getBorderRadius() {
+    return '0';
+  }
+
+  getClipPath({ width, height }) {
+    const cx = width / 2;
+    const cy = height / 2;
+    return `polygon(${cx}px 0, ${width}px ${cy}px, ${cx}px ${height}px, 0 ${cy}px)`;
+  }
+
+  get hasHeader() {
+    return false;
+  }
+
+  get hasControls() {
+    return false;
+  }
+
+  getMinSize() {
+    return { minWidth: 100, minHeight: 100 };
+  }
+}