project-graph-mcp 2.2.6 → 2.3.0

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

@@ -0,0 +1,80 @@
+/**
+ * NodeShape — abstract base class for node geometry
+ *
+ * Defines socket placement strategy and outline path for any node shape.
+ * Each shape determines WHERE sockets appear and at WHAT ANGLE
+ * connections should exit/enter.
+ *
+ * @module symbiote-node/shapes/NodeShape
+ */
+
+export class NodeShape {
+
+  /** @type {string} */
+  name = 'base';
+
+  /**
+   * Get socket position on the shape outline
+   * @param {'input'|'output'} side
+   * @param {number} index - ordinal index of this port
+   * @param {number} total - total ports on this side
+   * @param {{ width: number, height: number }} size - node dimensions
+   * @returns {{ x: number, y: number, angle: number }}
+   *   x, y are relative to node top-left corner
+   *   angle is in degrees: 0 = right, 90 = down, 180 = left, 270 = up
+   */
+  getSocketPosition(side, index, total, size) {
+    throw new Error('getSocketPosition must be implemented');
+  }
+
+  /**
+   * Get SVG outline path for the shape
+   * @param {{ width: number, height: number }} size
+   * @returns {string} SVG path d attribute
+   */
+  getOutlinePath(size) {
+    return '';
+  }
+
+  /**
+   * CSS border-radius value for the shape
+   * @param {{ width: number, height: number }} size
+   * @returns {string}
+   */
+  getBorderRadius(size) {
+    return 'var(--sn-node-radius, 10px)';
+  }
+
+  /**
+   * Whether this shape uses standard header+body layout
+   * @returns {boolean}
+   */
+  get hasHeader() {
+    return true;
+  }
+
+  /**
+   * Whether this shape supports embedded controls
+   * @returns {boolean}
+   */
+  get hasControls() {
+    return true;
+  }
+
+  /**
+   * CSS clip-path for non-rectangular shapes
+   * @param {{ width: number, height: number }} size
+   * @returns {string|null} null = no clip
+   */
+  getClipPath(size) {
+    return null;
+  }
+
+  /**
+   * Minimum node dimensions for this shape
+   * @returns {{ minWidth: number, minHeight: number }}
+   */
+  getMinSize() {
+    return { minWidth: 180, minHeight: 60 };
+  }
+}

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

@@ -0,0 +1,91 @@
+/**
+ * PillShape — compact horizontal pill node
+ *
+ * Small node with rounded ends, label centered, 1 input left, 1 output right.
+ * No header, no controls. Ideal for simple operations (multiply, add, etc.)
+ *
+ * @module symbiote-node/shapes/PillShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+export class PillShape extends NodeShape {
+  name = 'pill';
+
+  getSocketPosition(side, index, total, { width, height }) {
+    const r = height / 2;
+    if (total <= 1) {
+      return {
+        x: side === 'input' ? 0 : width,
+        y: height / 2,
+        angle: side === 'input' ? 180 : 0,
+      };
+    }
+
+    // Multiple sockets: distribute along the rounded end
+    const arcAngle = Math.PI * 0.6; // 108 degrees arc
+    const startAngle = side === 'input' ? Math.PI - arcAngle / 2 : -arcAngle / 2;
+    const step = arcAngle / (total - 1);
+    const a = startAngle + step * index;
+
+    const cx = side === 'input' ? r : width - r;
+    return {
+      x: cx + r * Math.cos(a),
+      y: height / 2 + r * Math.sin(a),
+      angle: (a * 180) / Math.PI,
+    };
+  }
+
+  /**
+   * Get pin position on a specific side of the pill.
+   * Left/right follow the rounded semicircle arc.
+   * Top/bottom follow the flat straight edge.
+   *
+   * @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 NORMALS = { top: -90, right: 0, bottom: 90, left: 180 };
+    const MARGIN = 0.2;
+    const effectiveT = MARGIN + t * (1 - 2 * MARGIN);
+    const r = size.height / 2;
+
+    if (side === 'top' || side === 'bottom') {
+      // Flat edge between the two semicircles
+      const x = r + effectiveT * (size.width - 2 * r);
+      const y = side === 'top' ? 0 : size.height;
+      return { x, y, angle: NORMALS[side] };
+    }
+
+    // Rounded semicircle ends
+    const arcSpan = Math.PI * 0.8; // 144° arc
+    const cx = side === 'left' ? r : size.width - r;
+    const centerAngle = side === 'left' ? Math.PI : 0;
+    const startAngle = centerAngle - arcSpan / 2;
+    const a = startAngle + arcSpan * effectiveT;
+
+    return {
+      x: cx + r * Math.cos(a),
+      y: size.height / 2 + r * Math.sin(a),
+      angle: (a * 180) / Math.PI,
+    };
+  }
+
+  getBorderRadius({ height }) {
+    return `${height / 2}px`;
+  }
+
+  get hasHeader() {
+    return false;
+  }
+
+  get hasControls() {
+    return false;
+  }
+
+  getMinSize() {
+    return { minWidth: 100, minHeight: 40 };
+  }
+}

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

@@ -0,0 +1,72 @@
+/**
+ * RectShape — standard rectangular node card
+ *
+ * Sockets arranged vertically on left (inputs) and right (outputs).
+ * Default shape for most nodes.
+ *
+ * @module symbiote-node/shapes/RectShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+export class RectShape extends NodeShape {
+  name = 'rect';
+
+  /** @type {number} */
+  #headerHeight;
+
+  /**
+   * @param {object} [config]
+   * @param {number} [config.headerHeight=36] - Height of header area
+   */
+  constructor(config = {}) {
+    super();
+    this.#headerHeight = config.headerHeight || 36;
+  }
+
+  getSocketPosition(side, index, total, { width, height }) {
+    const bodyHeight = height - this.#headerHeight;
+    const spacing = bodyHeight / (total + 1);
+    const y = this.#headerHeight + spacing * (index + 1);
+
+    return {
+      x: side === 'input' ? 0 : width,
+      y,
+      angle: side === 'input' ? 180 : 0,
+    };
+  }
+
+  /**
+   * Get pin position on a specific side of the rectangle.
+   * Required for PCB path style — without this, ConnectionRenderer
+   * skips rect nodes entirely.
+   *
+   * @param {'top'|'right'|'bottom'|'left'} side
+   * @param {number} t - position along the side (0..1), 0.5 = center
+   * @param {{ width: number, height: number }} size
+   * @returns {{ x: number, y: number, angle: number }}
+   */
+  getSidePosition(side, t, size) {
+    const NORMALS = { top: -90, right: 0, bottom: 90, left: 180 };
+    const MARGIN = 0.2;
+    const effectiveT = MARGIN + t * (1 - 2 * MARGIN);
+
+    let x, y;
+    switch (side) {
+      case 'top':    x = size.width * effectiveT; y = 0; break;
+      case 'right':  x = size.width; y = size.height * effectiveT; break;
+      case 'bottom': x = size.width * effectiveT; y = size.height; break;
+      case 'left':   x = 0; y = size.height * effectiveT; break;
+    }
+
+    return { x, y, angle: NORMALS[side] };
+  }
+
+  getBorderRadius() {
+    return 'var(--sn-node-radius, 10px)';
+  }
+
+  getMinSize() {
+    return { minWidth: 180, minHeight: 60 };
+  }
+}