project-graph-mcp 2.2.6 → 2.3.0

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

@@ -0,0 +1,962 @@
+import { getShape } from '../shapes/index.js';
+
+/**
+ * Parallel support for connection rendering via HTML5 Canvas API.
+ * This is used to test performance against the DOM-bound SVG renderer.
+ */
+export class CanvasConnectionRenderer {
+  #canvasLayer;
+  #dotLayer;
+  #nodeViews;
+  #editor;
+  #onConnectionClick;
+  #getZoom;
+  #getPan;
+  #onDotDrag;
+
+  #pathStyle = 'bezier';
+  #connectionData = new Map();
+  #ctx;
+  #resizeObserver;
+  #animationFrameId;
+  #batchMode = false;
+  #batchDirty = false;
+
+  /** @type {Array<{id:string, x:number, y:number, w:number, h:number, degree:number, color:string, label:string}>} */
+  #phantomNodes = [];
+  /** @type {Map<string, Object>} Fast lookup for phantom proxy by nodeId */
+  #phantomMap = new Map();
+
+  // Computed styles matching the theme
+  #colorParams = {
+    normal: '#4a9eff',
+    selected: '#ff6b6b',
+    width: 2,
+    flowingColor: '#4a9eff', // We use --sn-conn-color directly
+  };
+
+  /**
+   * @param {Object} config
+   * @param {HTMLCanvasElement} config.canvasLayer
+   * @param {HTMLElement} config.dotLayer
+   * @param {Map<string, HTMLElement>} config.nodeViews
+   * @param {import('../core/GraphEditor.js').GraphEditor} config.editor
+   * @param {function(string, MouseEvent)} config.onConnectionClick
+   * @param {function(): number} config.getZoom
+   * @param {function(): {x: number, y: number}} config.getPan
+   * @param {function(Object)} config.onDotDrag
+   */
+  constructor(config = {}) {
+    this.#canvasLayer = config.canvasLayer || document.createElement('canvas');
+    this.#dotLayer = config.dotLayer;
+    this.#nodeViews = config.nodeViews;
+    this.#editor = config.editor;
+    this.#onConnectionClick = config.onConnectionClick;
+    this.#getZoom = config.getZoom || (() => 1);
+    this.#getPan = config.getPan || (() => ({ x: 0, y: 0 }));
+    this.#onDotDrag = config.onDotDrag;
+
+    this.#ctx = this.#canvasLayer.getContext('2d', { alpha: true, desynchronized: false });
+    this.#initResizeObserver();
+    this.#updateStyles();
+
+    // Start render loop for flow animations (if flowing exists)
+    this.#animationFrameId = requestAnimationFrame(this.#renderLoop);
+  }
+
+  /**
+   * Resize observer to keep the canvas 1:1 with device pixels
+   */
+  #initResizeObserver() {
+    const parent = this.#canvasLayer.parentElement;
+    if (!parent) return;
+
+    this.#resizeObserver = new ResizeObserver((entries) => {
+      const rect = entries[0].contentRect;
+      const dpr = window.devicePixelRatio || 1;
+
+      this.#canvasLayer.width = rect.width * dpr;
+      this.#canvasLayer.height = rect.height * dpr;
+
+      this.redraw();
+    });
+
+    this.#resizeObserver.observe(parent);
+  }
+
+  #updateStyles() {
+    const computed = getComputedStyle(document.body);
+    this.#colorParams.normal = computed.getPropertyValue('--sn-conn-color').trim() || '#4a9eff';
+    this.#colorParams.selected = computed.getPropertyValue('--sn-conn-selected').trim() || '#ff6b6b';
+    this.#colorParams.outline = computed.getPropertyValue('--sn-port-outline').trim() || '#16213e';
+    this.#colorParams.bg = computed.getPropertyValue('--sn-bg').trim() || '#1a1a2e';
+    this.#colorParams.width = parseFloat(computed.getPropertyValue('--sn-conn-width')) || 2;
+  }
+
+  /** @param {'bezier'|'orthogonal'|'straight'|'pcb'} style */
+  setPathStyle(style) {
+    this.#pathStyle = style;
+    this.redraw();
+  }
+
+  get data() {
+    return this.#connectionData;
+  }
+
+  addBatch(conns) {
+    for (const conn of conns) {
+      this.#connectionData.set(conn.id, conn);
+    }
+    this.redraw();
+  }
+
+  refreshAll() {
+    this.redraw();
+  }
+
+  add(conn) {
+    this.#connectionData.set(conn.id, conn);
+    this.redraw();
+  }
+
+  remove(conn) {
+    this.#connectionData.delete(conn.id);
+    this.redraw();
+  }
+
+  updateForNode(nodeId) {
+    this.redraw();
+  }
+
+  setFlowing(connId, active) {
+    const conn = this.#connectionData.get(connId);
+    if (conn) conn.flowing = active;
+  }
+
+  setAllFlowing(active) {
+    for (const conn of this.#connectionData.values()) {
+      conn.flowing = active;
+    }
+  }
+
+  setPathStyle(style) {
+    this.#pathStyle = style;
+    this.redraw();
+  }
+
+  highlightDotsForNodes(compatibleNodeIds) { }
+  clearDotHighlights() { }
+  renderFreeDots(nodeId) { }
+  removeFreeDot(nodeId, key, side) { }
+  refreshFreeDots(nodeId) { }
+  findNearestDot(wx, wy, radius = 20) { return null; }
+
+  clear() {
+    this.#connectionData.clear();
+    this.#phantomNodes = [];
+    this.#phantomMap.clear();
+    this.redraw();
+  }
+
+  // #phantomMap moved to class field declarations (line 25)
+
+  /**
+   * Set phantom nodes — nodes without DOM that are rendered as Canvas dots.
+   * @param {Array<{id:string, x:number, y:number, w:number, h:number, degree:number, color:string, label:string}>} nodes
+   */
+  setPhantomNodes(nodes) {
+    this.#phantomNodes = nodes || [];
+    this.#phantomMap.clear();
+    for (const n of this.#phantomNodes) {
+      this.#phantomMap.set(n.id, n);
+    }
+    this.redraw();
+  }
+
+  /** Retrieve actual connector coordinate relative to the origin */
+  getSocketOffset(nodeEl, portKey, side, targetPos) {
+    if (!nodeEl) return { x: 0, y: 0 };
+    const w = nodeEl._cachedW || nodeEl.offsetWidth || 180;
+    const h = nodeEl._cachedH || nodeEl.offsetHeight || 100;
+
+    let basePortX = side === 'output' ? w : 0;
+
+    // Fast path: cached layout coords for the node
+    if (nodeEl._slotCache && nodeEl._slotCache.has(portKey)) {
+      const cached = nodeEl._slotCache.get(portKey);
+      return {
+        x: cached.x,
+        y: cached.y,
+        angle: cached.angle
+      };
+    }
+
+    const nodeModel = this.#editor?.getNode(nodeEl.id);
+    const isParamNode = nodeModel?.type === 'param';
+    let portIndex = 0;
+    let totalPorts = 1;
+
+    if (nodeModel && nodeModel.type !== 'param') {
+      const portsData = side === 'output' ? nodeModel.outputs : nodeModel.inputs;
+      if (portsData) {
+        const keys = Object.keys(portsData);
+        totalPorts = keys.length || 1;
+        const idx = keys.indexOf(portKey);
+        if (idx !== -1) portIndex = idx;
+      }
+    }
+
+    // Delegate to UniversalSvgShape if defined and handles geometric coordinates (SVGShape)
+    const shapeConfig = getShape(nodeModel?.shape);
+    if (shapeConfig && shapeConfig.pathData && shapeConfig.getSocketPosition) {
+      const pos = shapeConfig.getSocketPosition(side, portIndex, totalPorts, { width: w, height: h }, targetPos);
+      if (pos) return pos;
+    }
+
+    // Standard shapes: read from DOM socket elements
+    const container = side === 'output'
+      ? nodeEl.querySelector('.outputs')
+      : nodeEl.querySelector('.inputs');
+
+    if (container) {
+      const portItems = container.querySelectorAll('port-item');
+      for (const portItem of portItems) {
+        if (String(portItem.$.key) === String(portKey)) {
+          const socket = portItem.querySelector('.sn-socket');
+          if (socket) {
+            const nodeRect = nodeEl.getBoundingClientRect();
+            const socketRect = socket.getBoundingClientRect();
+            const z = this.#getZoom();
+            return {
+              x: (socketRect.left - nodeRect.left + socketRect.width / 2) / z,
+              y: (socketRect.top - nodeRect.top + socketRect.height / 2) / z,
+            };
+          }
+        }
+      }
+    }
+
+    return {
+      x: side === 'output' ? (nodeEl._cachedW || nodeEl.offsetWidth || 180) : 0,
+      y: (nodeEl._cachedH || nodeEl.offsetHeight || 100) / 2,
+    };
+  }
+
+  #hasSelection = false;
+  #activeConnIds = new Set();
+
+  setSelectionState(hasSelection, activeConnIds) {
+    this.#hasSelection = hasSelection;
+    this.#activeConnIds = activeConnIds;
+    this.redraw();
+  }
+
+  /** Suppress redraws during batch operations (e.g. setEditor initialization) */
+  setBatchMode(on) {
+    this.#batchMode = on;
+    if (!on && this.#batchDirty) {
+      this.#batchDirty = false;
+      this.redraw();
+    }
+  }
+
+  /** Perform full synchronous redraw of all connections */
+  redraw() {
+    if (this.#batchMode) { this.#batchDirty = true; return; }
+    const ctx = this.#ctx;
+    if (!ctx) return;
+
+    // Reset and clear with devicePixelRatio
+    const dpr = window.devicePixelRatio || 1;
+    const zoom = this.#getZoom();
+    this._frameZoom = zoom; // cache for #plotPath LOD
+    const pan = this.#getPan();
+
+    // Reset transform to identity to clear the raw screen buffer
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, this.#canvasLayer.width, this.#canvasLayer.height);
+
+    // Set view transform: Map World coordinates -> Screen coordinates
+    ctx.setTransform(dpr * zoom, 0, 0, dpr * zoom, dpr * pan.x, dpr * pan.y);
+
+    // Update theme vars
+    this.#updateStyles();
+
+    const time = Date.now();
+    let hasFlowing = false;
+
+
+    // Cache node layout geometry once per frame for the router (Map for O(1) lookup)
+    this._nodeRectMap = new Map();
+    for (const [nid, el] of this.#nodeViews) {
+      if (el && el._position) {
+        this._nodeRectMap.set(nid, {
+          id: nid,
+          x: el._position.x,
+          y: el._position.y,
+          w: el._cachedW || 180,
+          h: el._cachedH || 60,
+          el: el
+        });
+      }
+    }
+    // Include phantom nodes in geometry cache for FAR_ZOOM routing
+    for (const node of this.#phantomNodes) {
+      if (node && !this._nodeRectMap.has(node.id)) {
+        this._nodeRectMap.set(node.id, {
+          id: node.id,
+          x: node.x || 0,
+          y: node.y || 0,
+          w: node.w || 180,
+          h: node.h || 60,
+          el: null
+        });
+      }
+    }
+
+    // Pre-compute connection index once per frame (avoids O(N²) Array.from+indexOf in routing)
+    const connIndexMap = new Map();
+    let ci = 0;
+    for (const key of this.#connectionData.keys()) {
+      connIndexMap.set(key, ci++);
+    }
+    this._connIndexMap = connIndexMap;
+
+    // Collect connected sockets to draw caps over them (fixes DOM/Canvas sub-pixel drift seams)
+    const socketsToDraw = new Map();
+
+    const drawConnection = (id, connection) => {
+      // Draw connection
+      const isFlowing = connection.flowing;
+      const isActive = this.#activeConnIds ? this.#activeConnIds.has(connection.id) : false;
+      const isSelected = isActive;
+      const isDimmed = !isActive && this.#hasSelection;
+
+      const fromNode = this.#editor?.getNode(connection.from);
+      const toNode = this.#editor?.getNode(connection.to);
+      const fromColor = fromNode?.outputs?.[connection.out]?.socket?.color;
+      const toColor = toNode?.inputs?.[connection.in]?.socket?.color;
+
+      // Scale lineWidth inversely with zoom to maintain screen visibility
+      // At zoom 0.003, a 2px world line = 0.006 screen px (invisible)
+      // minScreenWidth = 1.5 screen px → in world coords = 1.5 / zoom
+      const baseWidth = this.#colorParams.width;
+      ctx.lineWidth = Math.max(baseWidth, 1.5 / zoom);
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.globalAlpha = 1.0;
+
+      ctx.beginPath();
+      let coords = null;
+      try {
+        coords = this.#plotPath(ctx, connection);
+      } catch (err) {
+        console.warn('Path failed:', err);
+      }
+      if (!coords) return;
+
+      // Save caps for later drawing (ensures they are on top of all paths)
+      socketsToDraw.set(`${connection.from}:${connection.out}`, { x: coords.startX, y: coords.startY, color: fromColor || this.#colorParams.normal });
+      socketsToDraw.set(`${connection.to}:${connection.in}`, { x: coords.endX, y: coords.endY, color: toColor || this.#colorParams.normal });
+
+      let finalColor;
+      if (fromColor && toColor && fromColor !== toColor) {
+        const grad = ctx.createLinearGradient(coords.startX, coords.startY, coords.endX, coords.endY);
+        grad.addColorStop(0, fromColor);
+        grad.addColorStop(1, toColor);
+        finalColor = grad;
+      } else {
+        finalColor = fromColor || this.#colorParams.normal;
+      }
+
+      if (isDimmed) {
+        // Actually, color-mix doesn't work on CanvasGradient. If it's a gradient, fallback to solid fromColor.
+        let baseColor = fromColor || this.#colorParams.normal;
+        finalColor = `color-mix(in srgb, ${baseColor} 15%, ${this.#colorParams.bg})`;
+      }
+
+      ctx.strokeStyle = finalColor;
+      ctx.fillStyle = finalColor;
+
+      if (isFlowing) {
+        ctx.setLineDash([10, 10]);
+        ctx.lineDashOffset = -(time / 20) % 20;
+        hasFlowing = true;
+      } else {
+        ctx.setLineDash([]);
+      }
+
+      // Apply drop shadow for selected lines to make them pop 
+      if (isSelected && !isDimmed) {
+        ctx.shadowColor = ctx.strokeStyle;
+        ctx.shadowBlur = 8;
+      } else {
+        ctx.shadowBlur = 0;
+      }
+
+      ctx.stroke(coords.path2D);
+
+      // draw direction arrow
+      if (coords.arrow) {
+        ctx.save();
+        ctx.translate(coords.arrow.x, coords.arrow.y);
+        // Transform from typical left-to-right arrow drawn along X axis
+        ctx.rotate(coords.arrow.angle);
+        ctx.beginPath();
+        ctx.moveTo(-5, -3.5);
+        ctx.lineTo(5, 0);
+        ctx.lineTo(-5, 3.5);
+        ctx.closePath();
+        ctx.fillStyle = ctx.strokeStyle; // inherited from path 
+        ctx.fill();
+        ctx.restore();
+      }
+    };
+
+    if (this.#hasSelection) {
+      for (const [id, connection] of this.#connectionData) {
+        if (!this.#activeConnIds.has(connection.id)) drawConnection(id, connection);
+      }
+      for (const [id, connection] of this.#connectionData) {
+        if (this.#activeConnIds.has(connection.id)) drawConnection(id, connection);
+      }
+    } else {
+      for (const [id, connection] of this.#connectionData) {
+        drawConnection(id, connection);
+      }
+    }
+
+    // Draw caps for connected sockets to hide DOM subpixel drift
+    ctx.setLineDash([]);
+
+    for (const [, pos] of socketsToDraw) {
+      ctx.beginPath();
+      // HTML ::after is 12x12 (content) + 2px border = 16px total.
+      // Canvas r=7 (dia 14) + lineWidth 2 = 14+-1 = 12px inner fill, 16px total outer bound.
+      ctx.arc(pos.x, pos.y, 7, 0, Math.PI * 2);
+      ctx.fillStyle = pos.color;
+      ctx.fill();
+      ctx.lineWidth = 2; // Match the 2px solid CSS outline exactly
+      ctx.strokeStyle = this.#colorParams.outline; // Match var(--sn-port-outline) / var(--sn-node-bg)
+      ctx.stroke();
+    }
+
+    // ─── Draw phantom node dots (Obsidian-style) ───
+    this.#drawPhantomDots(ctx, zoom);
+
+    // Stop flow animation if none flowing to save CPU
+    if (!hasFlowing && this.#animationFrameId) {
+      cancelAnimationFrame(this.#animationFrameId);
+      this.#animationFrameId = null;
+    } else if (hasFlowing && !this.#animationFrameId) {
+      this.#animationFrameId = requestAnimationFrame(this.#renderLoop);
+    }
+  }
+
+  /**
+   * Draw phantom nodes as colored dots with size proportional to degree.
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} zoom
+   */
+  #drawPhantomDots(ctx, zoom) {
+    if (this.#phantomNodes.length === 0) return;
+
+    ctx.shadowBlur = 0;
+    ctx.setLineDash([]);
+
+    // At very low zoom, scale dot size to maintain minimum screen visibility
+    // minScreen = 8px → in world coords = 8 / zoom
+    const minWorldW = Math.max(180, 8 / zoom);
+    const minWorldH = Math.max(60, 4 / zoom);
+    const showLabels = zoom > 0.15;
+    const labelFontSize = Math.max(9, Math.min(14, 12 / zoom));
+
+    for (const node of this.#phantomNodes) {
+      if (!node || node.w === undefined || node.h === undefined) continue;
+
+      const w = Math.max(minWorldW, node.w);
+      const h = Math.max(minWorldH, node.h);
+      // Center the enlarged dot on the original position
+      const x = (node.x || 0) - (w - node.w) / 2;
+      const y = (node.y || 0) - (h - node.h) / 2;
+
+      ctx.beginPath();
+      try {
+        const r = Math.min(6, w * 0.1, h * 0.1);
+        if (ctx.roundRect) ctx.roundRect(x, y, w, h, r);
+        else ctx.rect(x, y, w, h);
+      } catch (e) {
+        ctx.rect(x, y, w, h);
+      }
+
+      ctx.fillStyle = node.color || this.#colorParams.normal;
+      ctx.globalAlpha = 0.85;
+      ctx.fill();
+
+      // Stroke — scale lineWidth for visibility
+      ctx.lineWidth = Math.max(1.5, 1 / zoom);
+      ctx.strokeStyle = this.#colorParams.outline;
+      ctx.stroke();
+      ctx.globalAlpha = 1.0;
+
+      // Label at medium+ zoom
+      if (showLabels && node.label) {
+        ctx.fillStyle = '#fff';
+        ctx.globalAlpha = 1;
+        ctx.font = `${labelFontSize}px sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(x + 4, y, w - 8, h);
+        ctx.clip();
+        ctx.fillText(node.label, x + w / 2, y + h / 2);
+        ctx.restore();
+      }
+    }
+  }
+
+  /**
+   * Create a minimal proxy object for a phantom node so #plotPath can work.
+   * Mimics the shape of a DOM nodeView element with _position and _cachedW/H.
+   */
+  #getPhantomProxy(nodeId) {
+    const phantom = this.#phantomMap.get(nodeId);
+    if (!phantom) return null;
+    return {
+      id: phantom.id,
+      _position: { x: phantom.x, y: phantom.y },
+      _cachedW: phantom.w,
+      _cachedH: phantom.h,
+      offsetWidth: phantom.w,
+      offsetHeight: phantom.h,
+      getAttribute: () => null,
+      querySelector: () => null,
+      querySelectorAll: () => [],
+      style: {},
+    };
+  }
+
+  #renderLoop = () => {
+    this.redraw();
+    this.#animationFrameId = requestAnimationFrame(this.#renderLoop);
+  };
+
+  #plotPath(ctx, conn) {
+    let fromElNodeView = this.#nodeViews.get(conn.from);
+    let toElNodeView = this.#nodeViews.get(conn.to);
+
+    // Fallback to phantom proxy for nodes without DOM
+    if (!fromElNodeView) fromElNodeView = this.#getPhantomProxy(conn.from);
+    if (!toElNodeView) toElNodeView = this.#getPhantomProxy(conn.to);
+    if (!fromElNodeView || !toElNodeView) return;
+
+    let fromPos = fromElNodeView._position || { x: 0, y: 0 };
+    let toPos = toElNodeView._position || { x: 0, y: 0 };
+
+    let fromEl = fromElNodeView;
+    let toEl = toElNodeView;
+
+    if (this._nodeRectMap) {
+      const c1 = this._nodeRectMap.get(conn.from);
+      if (c1) { fromPos = { x: c1.x, y: c1.y }; if (c1.el) fromEl = c1.el; }
+      const c2 = this._nodeRectMap.get(conn.to);
+      if (c2) { toPos = { x: c2.x, y: c2.y }; if (c2.el) toEl = c2.el; }
+    }
+
+    const fromW = fromEl._cachedW || fromEl.offsetWidth || 180;
+    const fromH = fromEl._cachedH || fromEl.offsetHeight || 100;
+    const toW = toEl._cachedW || toEl.offsetWidth || 180;
+    const toH = toEl._cachedH || toEl.offsetHeight || 100;
+    
+    const fromSize = { width: fromW, height: fromH };
+    const toSize = { width: toW, height: toH };
+    const fromNode = this.#editor?.getNode(conn.from);
+    const toNode = this.#editor?.getNode(conn.to);
+    const fromShape = getShape(fromNode?.shape);
+    const toShape = getShape(toNode?.shape);
+
+    const fromCenter = { x: fromPos.x + fromW / 2, y: fromPos.y + fromH / 2 };
+    const toCenter = { x: toPos.x + toW / 2, y: toPos.y + toH / 2 };
+
+    const fromOffset = this.getSocketOffset(fromEl, conn.out, 'output', toCenter);
+    const toOffset = this.getSocketOffset(toEl, conn.in, 'input', fromCenter);
+
+    const startX = fromPos.x + fromOffset.x;
+    const startY = fromPos.y + fromOffset.y;
+    const endX = toPos.x + toOffset.x;
+    const endY = toPos.y + toOffset.y;
+
+
+    let d;
+    let arrow = { x: endX, y: endY, angle: 0 };
+    const effectiveStyle = this.#pathStyle;
+    if (effectiveStyle === 'straight') {
+      d = `M ${startX} ${startY} L ${endX} ${endY}`;
+      arrow.x = (startX + endX) / 2;
+      arrow.y = (startY + endY) / 2;
+      arrow.angle = Math.atan2(endY - startY, endX - startX);
+    } else if (effectiveStyle === 'orthogonal') {
+      const connIndex = this._connIndexMap ? (this._connIndexMap.get(conn.id) ?? 0) : 0;
+      const traceOffset = (connIndex > -1 ? connIndex % 10 : 0) * 4;
+
+      const fromAngle = fromOffset.angle !== undefined ? fromOffset.angle : 0;
+      const toAngle = toOffset.angle !== undefined ? toOffset.angle : 180;
+
+      const stubLen = 20;
+      const getDxDy = (deg) => ({
+        dx: Math.round(Math.cos(deg * Math.PI / 180)),
+        dy: Math.round(Math.sin(deg * Math.PI / 180))
+      });
+
+      const fDir = getDxDy(fromAngle);
+      const tDir = getDxDy(toAngle);
+
+      const p1x = startX + fDir.dx * stubLen;
+      const p1y = startY + fDir.dy * stubLen;
+      const p2x = endX + tDir.dx * stubLen;
+      const p2y = endY + tDir.dy * stubLen;
+
+      const fromH = fromEl._cachedH || 60;
+      const toH = toEl._cachedH || 60;
+
+      let pts = [{ x: startX, y: startY }, { x: p1x, y: p1y }];
+      const skipObstacles = this._nodeRectMap && this._nodeRectMap.size > 200;
+
+      if (endX < startX) {
+        const bottomY = Math.max(fromPos.y + fromH, toPos.y + toH) + 30 + traceOffset;
+        pts.push({ x: p1x, y: bottomY });
+        pts.push({ x: p2x, y: bottomY });
+      } else if (skipObstacles) {
+        // Large graph: simple mid-X routing without obstacle checks
+        const midX = (p1x + p2x) / 2 + traceOffset;
+        pts.push({ x: midX, y: p1y });
+        pts.push({ x: midX, y: p2y });
+      } else {
+        const maxH = Math.max(fromH, toH);
+        if (Math.abs(p1y - p2y) < maxH) {
+          let nodeBetween = false;
+          const obstacleIter = this._nodeRectMap ? this._nodeRectMap.values() : [];
+          for (const rect of obstacleIter) {
+            const nx = rect.x;
+            const ny = rect.y;
+            const nw = rect.w || 180;
+            const nh = rect.h || 60;
+            if (nx > p1x && nx + nw < p2x) {
+              if (Math.min(p1y, p2y) <= ny + nh && Math.max(p1y, p2y) >= ny) {
+                nodeBetween = true; break;
+              }
+            }
+          }
+
+          if (nodeBetween) {
+            const detourY = Math.min(fromPos.y, toPos.y) - 30 - traceOffset;
+            pts.push({ x: p1x, y: detourY });
+            pts.push({ x: p2x, y: detourY });
+          } else {
+            const midX = (p1x + p2x) / 2 + traceOffset;
+            pts.push({ x: midX, y: p1y });
+            pts.push({ x: midX, y: p2y });
+          }
+        } else {
+          let midX = (p1x + p2x) / 2 + traceOffset;
+          let obstacleNode = null;
+          const minY = Math.min(p1y, p2y);
+          const maxY = Math.max(p1y, p2y);
+
+          const obstIter = this._nodeRectMap ? this._nodeRectMap.values() : [];
+          for (const rect of obstIter) {
+            const nx = rect.x;
+            const ny = rect.y;
+            const nw = rect.w || 180;
+            const nh = rect.h || 60;
+            if (midX >= nx && midX <= nx + nw) {
+              if (ny <= maxY && ny + nh >= minY) {
+                obstacleNode = { x: nx, w: nw };
+                break;
+              }
+            }
+          }
+
+          if (obstacleNode) {
+            const leftDist = Math.abs(midX - obstacleNode.x);
+            const rightDist = Math.abs(midX - (obstacleNode.x + obstacleNode.w));
+            if (leftDist < rightDist) {
+              midX = obstacleNode.x - 30 - traceOffset;
+            } else {
+              midX = obstacleNode.x + obstacleNode.w + 30 + traceOffset;
+            }
+          }
+
+          pts.push({ x: midX, y: p1y });
+          pts.push({ x: midX, y: p2y });
+        }
+      }
+
+      pts.push({ x: p2x, y: p2y });
+      pts.push({ x: endX, y: endY });
+
+      let path = `M ${pts[0].x} ${pts[0].y}`;
+      for (let i = 1; i < pts.length; i++) {
+        const prev = pts[i - 1];
+        const curr = pts[i];
+        if (curr.x === prev.x && curr.y === prev.y) continue;
+        if (curr.x !== prev.x && curr.y !== prev.y) {
+          path += ` H ${curr.x} V ${curr.y}`;
+        } else if (curr.x !== prev.x) {
+          path += ` H ${curr.x}`;
+        } else if (curr.y !== prev.y) {
+          path += ` V ${curr.y}`;
+        }
+      }
+      if (pts.length >= 2) {
+        const midIndex = Math.floor(pts.length / 2);
+        const p1 = pts[midIndex - 1];
+        const p2 = pts[midIndex];
+        if (p1 && p2) {
+          arrow.x = (p1.x + p2.x) / 2;
+          arrow.y = (p1.y + p2.y) / 2;
+          arrow.angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+        }
+      }
+      d = path;
+    } else if (effectiveStyle === 'pcb') {
+      // ─── PCB Grid-Based Trace Routing ───
+      // All waypoints snap to a grid. Stubs exit perpendicular to node surface
+      // with a minimum length, then route on grid channels with chamfered corners.
+
+      const TRACE_GRID = 5;  // Dense trace grid (5px)
+      const STUB_MIN = 20;   // minimum perpendicular stub from node edge
+      const CHAMFER = 8;     // 45° chamfer radius (px)
+
+      // Snap a coordinate to the trace grid
+      const snapGrid = (v) => Math.round(v / TRACE_GRID) * TRACE_GRID;
+
+      // Connection channel index for parallel trace separation
+      const connIndex = this._connIndexMap ? (this._connIndexMap.get(conn.id) ?? 0) : 0;
+
+      // Determine unique channel shift to prevent parallel traces overlapping
+      // Alternates: 0, +5, -5, +10, -10...
+      const shiftIndex = (connIndex > -1 ? connIndex % 12 : 0);
+      const channelShift = (shiftIndex % 2 === 0 ? 1 : -1) * Math.ceil(shiftIndex / 2) * TRACE_GRID;
+
+      // Compute perpendicular stub directions from surface normals
+      const fromAngle = fromOffset.angle !== undefined ? fromOffset.angle : 0;
+      const toAngle = toOffset.angle !== undefined ? toOffset.angle : 180;
+
+      // Snap angle to cardinal direction (→ ↓ ← ↑)
+      const snapDir = (deg) => {
+        const r = ((deg % 360) + 360) % 360;
+        if (r < 45 || r >= 315) return { dx: 1, dy: 0 };     // right
+        if (r >= 45 && r < 135) return { dx: 0, dy: 1 };     // down
+        if (r >= 135 && r < 225) return { dx: -1, dy: 0 };    // left
+        return { dx: 0, dy: -1 };                              // up
+      };
+
+      const fDir = snapDir(fromAngle);
+      const tDir = snapDir(toAngle);
+
+      // Stub endpoints: extend strictly perpedicular, no grid snapping on the orthogonal axis
+      // to avoid diagonal stubs from pins that are floating (not grid aligned).
+      const stubFromX = fDir.dx === 0 ? startX : startX + fDir.dx * STUB_MIN;
+      const stubFromY = fDir.dy === 0 ? startY : startY + fDir.dy * STUB_MIN;
+      const stubToX = tDir.dx === 0 ? endX : endX + tDir.dx * STUB_MIN;
+      const stubToY = tDir.dy === 0 ? endY : endY + tDir.dy * STUB_MIN;
+
+      const fromH = fromEl.offsetHeight || 60;
+      const toH = toEl.offsetHeight || 60;
+
+      // Build orthogonal waypoints on grid
+      let pts = [
+        { x: startX, y: startY },
+        { x: stubFromX, y: stubFromY },
+      ];
+      // Skip obstacle avoidance on large graphs — O(N) per connection is too expensive
+      // and produces worse visual results at high density anyway
+      const skipObstacles = this._nodeRectMap && this._nodeRectMap.size > 200;
+
+      // Very simple heuristic orthogonal router
+      if (endX < startX - 20) {
+        // Backwards routing: U-turn below obstacles in the path
+        let maxObstacleY = Math.max(fromPos.y + fromH, toPos.y + toH);
+
+        if (!skipObstacles) {
+          const minXForObstacle = Math.min(stubFromX, stubToX);
+          const maxXForObstacle = Math.max(stubFromX, stubToX);
+          const iter = this._nodeRectMap ? this._nodeRectMap.values() : [];
+          for (const rect of iter) {
+            const nx = rect.x;
+            const ny = rect.y;
+            const nw = rect.w;
+            const nh = rect.h;
+            const pad = TRACE_GRID * 2;
+            if (nx + nw + pad >= minXForObstacle && nx - pad <= maxXForObstacle) {
+              if (ny + nh > maxObstacleY) {
+                maxObstacleY = ny + nh;
+              }
+            }
+          }
+        }
+
+        const bottomY = snapGrid(maxObstacleY + 30) + Math.abs(channelShift);
+        pts.push({ x: stubFromX, y: bottomY });
+        pts.push({ x: stubToX, y: bottomY });
+      } else {
+        // Forward routing: mid-X channel
+        let midX = snapGrid((stubFromX + stubToX) / 2) + channelShift;
+
+        // Same-height shortcut
+        if (Math.abs(stubFromY - stubToY) < TRACE_GRID * 2) {
+          pts.push({ x: stubToX, y: stubFromY });
+        } else {
+          if (!skipObstacles) {
+            // Obstacle check for mid-X vertical segment
+            const minY = Math.min(stubFromY, stubToY);
+            const maxY = Math.max(stubFromY, stubToY);
+            const pad = TRACE_GRID * 4;
+
+            const iter = this._nodeRectMap ? this._nodeRectMap.values() : [];
+            for (const rect of iter) {
+              if (rect.id === conn.from || rect.id === conn.to) continue;
+              const nx = rect.x, ny = rect.y;
+              const nw = rect.w, nh = rect.h;
+
+              if (midX >= nx - pad && midX <= nx + nw + pad) {
+                if (ny - pad <= maxY && ny + nh + pad >= minY) {
+                  const leftX = snapGrid(nx - pad) + channelShift;
+                  const rightX = snapGrid(nx + nw + pad) + channelShift;
+                  midX = Math.abs(midX - leftX) < Math.abs(midX - rightX) ? leftX : rightX;
+                  break;
+                }
+              }
+            }
+          }
+
+          pts.push({ x: midX, y: stubFromY });
+          pts.push({ x: midX, y: stubToY });
+        }
+      }
+
+      pts.push({ x: stubToX, y: stubToY });
+      pts.push({ x: endX, y: endY });
+
+      // Path building and Chamfering
+
+      // Log route stats (debug only)
+      if (CanvasConnectionRenderer.debug) {
+        const fromLabel = fromEl._nodeData?.label || conn.from;
+        const toLabel = toEl._nodeData?.label || conn.to;
+        console.log(`[PCB] ${fromLabel} → ${toLabel} | waypoints=${pts.length}`);
+      }
+
+      // Build SVG path with 45° chamfered corners
+      let path = `M ${pts[0].x} ${pts[0].y}`;
+      for (let i = 1; i < pts.length; i++) {
+        const prev = pts[i - 1];
+        const curr = pts[i];
+        if (Math.abs(curr.x - prev.x) < 0.5 && Math.abs(curr.y - prev.y) < 0.5) continue;
+
+        const next = pts[i + 1];
+        if (next) {
+          // Determine if there's a turn at curr → need chamfer
+          const dx1 = curr.x - prev.x, dy1 = curr.y - prev.y;
+          const dx2 = next.x - curr.x, dy2 = next.y - curr.y;
+          const isH1 = Math.abs(dx1) > Math.abs(dy1);
+          const isH2 = Math.abs(dx2) > Math.abs(dy2);
+
+          if (isH1 !== isH2) {
+            // Corner turn — apply 45° chamfer
+            const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+            const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+            if (len1 < 1 || len2 < 1) {
+              // Degenerate segment — skip chamfer, go straight
+              path += ` L ${curr.x} ${curr.y}`;
+              continue;
+            }
+            const c = Math.min(CHAMFER, len1 / 2, len2 / 2);
+
+            // Pre-corner point
+            const nx1 = dx1 / len1, ny1 = dy1 / len1;
+            const preX = curr.x - nx1 * c;
+            const preY = curr.y - ny1 * c;
+            // Post-corner point
+            const nx2 = dx2 / len2, ny2 = dy2 / len2;
+            const postX = curr.x + nx2 * c;
+            const postY = curr.y + ny2 * c;
+
+            path += ` L ${preX} ${preY} L ${postX} ${postY}`;
+            continue;
+          }
+        }
+
+        // Straight segment — use H/V for axis-aligned, L for diagonal stubs
+        if (Math.abs(curr.y - prev.y) < 0.5) {
+          path += ` H ${curr.x}`;
+        } else if (Math.abs(curr.x - prev.x) < 0.5) {
+          path += ` V ${curr.y}`;
+        } else {
+          path += ` L ${curr.x} ${curr.y}`;
+        }
+      }
+      if (pts.length >= 2) {
+        const midIndex = Math.floor(pts.length / 2);
+        const p1 = pts[midIndex - 1];
+        const p2 = pts[midIndex];
+        if (p1 && p2) {
+          arrow.x = (p1.x + p2.x) / 2;
+          arrow.y = (p1.y + p2.y) / 2;
+          arrow.angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+        }
+      }
+      d = path;
+    } else {
+      // Tangent direction: use dynamic edge angle if available, else fixed socket angle
+      let fromAngleDeg, toAngleDeg;
+
+      if (fromOffset.angle !== undefined) {
+        fromAngleDeg = fromOffset.angle;
+      } else {
+        const fromPortIndex = fromNode ? Object.keys(fromNode.outputs).indexOf(conn.out) : 0;
+        const fromPortTotal = fromNode ? Object.keys(fromNode.outputs).length : 1;
+        const pos = fromShape?.getSocketPosition?.('output', fromPortIndex, fromPortTotal, fromSize);
+        fromAngleDeg = pos?.angle ?? 0;
+      }
+
+      if (toOffset.angle !== undefined) {
+        toAngleDeg = toOffset.angle;
+      } else {
+        const toPortIndex = toNode ? Object.keys(toNode.inputs).indexOf(conn.in) : 0;
+        const toPortTotal = toNode ? Object.keys(toNode.inputs).length : 1;
+        const pos = toShape?.getSocketPosition?.('input', toPortIndex, toPortTotal, toSize);
+        toAngleDeg = pos?.angle ?? 180;
+      }
+
+      const dist = Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2);
+      const cpLen = Math.max(50, dist * 0.4);
+      const fromRad = (fromAngleDeg * Math.PI) / 180;
+      const toRad = (toAngleDeg * Math.PI) / 180;
+
+      const cp1x = startX + Math.cos(fromRad) * cpLen;
+      const cp1y = startY + Math.sin(fromRad) * cpLen;
+      const cp2x = endX + Math.cos(toRad) * cpLen;
+      const cp2y = endY + Math.sin(toRad) * cpLen;
+
+      d = `M ${startX} ${startY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX} ${endY}`;
+
+      arrow.x = (startX + 3 * cp1x + 3 * cp2x + endX) / 8;
+      arrow.y = (startY + 3 * cp1y + 3 * cp2y + endY) / 8;
+      arrow.angle = Math.atan2(endY + cp2y - cp1y - startY, endX + cp2x - cp1x - startX);
+    }
+
+
+    const p = new Path2D(d);
+    return { startX, startY, endX, endY, path2D: p, arrow, pathStyle: effectiveStyle };
+  }
+
+  destroy() {
+    if (this.#resizeObserver) this.#resizeObserver.disconnect();
+    if (this.#animationFrameId) cancelAnimationFrame(this.#animationFrameId);
+    this.#connectionData.clear();
+  }
+}