living-documentation 7.0.0

package/dist/src/frontend/diagram/persistence.js

@@ -0,0 +1,161 @@
+// ── Persistence ───────────────────────────────────────────────────────────────
+// API calls (CRUD) for diagrams + sidebar list rendering.
+
+import { st, markDirty } from './state.js';
+import { initNetwork }   from './network.js';
+import { resetHistory }  from './history.js';
+import { t }             from './t.js';
+import { hideNodePanel } from './node-panel.js';
+import { hideEdgePanel } from './edge-panel.js';
+import { hideLabelInput }       from './label-editor.js';
+import { hideSelectionOverlay } from './selection-overlay.js';
+import { applyGridState }        from './grid.js';
+import { applyAlignGuidesState } from './alignment.js';
+
+function escapeHtml(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+export function renderDiagramList() {
+  const list = document.getElementById('diagramList');
+  list.innerHTML = '';
+  if (!st.diagrams.length) {
+    list.innerHTML = `<p class="text-xs text-gray-400 dark:text-gray-600 px-3 py-3">${t('diagram.sidebar.empty')}</p>`;
+    return;
+  }
+  st.diagrams.forEach((d) => {
+    const isActive = d.id === st.currentDiagramId;
+    const item     = document.createElement('div');
+    item.className = [
+      'group flex items-center gap-1 px-2 py-1.5 mx-1 my-0.5 rounded-md cursor-pointer',
+      'hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors',
+      isActive ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : 'text-gray-700 dark:text-gray-300',
+    ].join(' ');
+
+    const titleSpan = document.createElement('span');
+    titleSpan.className   = 'flex-1 text-sm truncate';
+    titleSpan.textContent = d.title;
+
+    const deleteBtn = document.createElement('button');
+    deleteBtn.title     = t('diagram.sidebar.delete_title');
+    deleteBtn.className = 'hidden group-hover:flex items-center justify-center w-4 h-4 rounded text-gray-400 hover:text-red-500 shrink-0';
+    deleteBtn.textContent = '✕';
+    deleteBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      await deleteDiagram(d.id);
+    });
+
+    item.appendChild(titleSpan);
+    item.appendChild(deleteBtn);
+    item.addEventListener('click', (e) => { if (e.target.tagName === 'BUTTON') return; openDiagram(d.id); });
+    list.appendChild(item);
+  });
+}
+
+export async function loadDiagramList() {
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+  renderDiagramList();
+  if (!st.diagrams.length) return;
+  const urlId  = new URLSearchParams(window.location.search).get('id');
+  const target = urlId && st.diagrams.find((d) => d.id === urlId) ? urlId : st.diagrams[0].id;
+  openDiagram(target);
+}
+
+export async function openDiagram(id) {
+  const res     = await fetch(`/api/diagrams/${id}`);
+  const diagram = await res.json();
+  st.currentDiagramId = id;
+  st.isDirty          = false;
+  st.edgesStraight    = diagram.edgesStraight === true;
+  document.getElementById('btnSave').disabled      = true;
+  document.getElementById('diagramTitle').value    = diagram.title || '';
+  document.getElementById('btnEdgeStraight').classList.toggle('tool-active', st.edgesStraight);
+  applyGridState(diagram.gridEnabled ?? true);
+  applyAlignGuidesState(diagram.alignGuides ?? true);
+  initNetwork(diagram.nodes || [], diagram.edges || [], st.edgesStraight);
+  resetHistory();
+  renderDiagramList();
+}
+
+export async function newDiagram() {
+  const id = 'd' + Date.now();
+  await fetch(`/api/diagrams/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title: t('diagram.toast.new_diagram_title'), nodes: [], edges: [] }),
+  });
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+  renderDiagramList();
+  openDiagram(id);
+}
+
+export async function deleteDiagram(id) {
+  if (!confirm(t('diagram.toast.confirm_delete'))) return;
+  await fetch(`/api/diagrams/${id}`, { method: 'DELETE' });
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+
+  if (st.currentDiagramId === id) {
+    st.currentDiagramId = null;
+    if (st.network) { st.network.destroy(); st.network = null; }
+    st.nodes = null;
+    st.edges = null;
+    document.getElementById('diagramTitle').value   = '';
+    document.getElementById('btnSave').disabled     = true;
+    hideNodePanel();
+    hideEdgePanel();
+    hideLabelInput();
+    hideSelectionOverlay();
+    if (st.diagrams.length > 0) openDiagram(st.diagrams[0].id);
+    else document.getElementById('emptyState').classList.remove('hidden');
+  }
+  renderDiagramList();
+}
+
+export async function saveDiagram() {
+  if (!st.currentDiagramId || !st.network) return;
+  const positions = st.network.getPositions();
+
+  // Serialise in canonicalOrder so z-order is restored on next load.
+  const nodeData = st.canonicalOrder
+    .map((id) => st.nodes.get(id))
+    .filter(Boolean)
+    .map((n) => ({
+      id: n.id, label: n.label,
+      shapeType: n.shapeType || 'box', colorKey: n.colorKey || 'c-gray',
+      nodeWidth: n.nodeWidth || null, nodeHeight: n.nodeHeight || null,
+      fontSize: n.fontSize || null, textAlign: n.textAlign || null, textValign: n.textValign || null,
+      bgOpacity: n.bgOpacity ?? null,
+      rotation: n.rotation || 0, labelRotation: n.labelRotation || 0,
+      imageSrc: n.imageSrc || null,
+      groupId: n.groupId || null,
+      nodeLink: n.nodeLink || null,
+      locked: n.locked || false,
+      x: positions[n.id]?.x ?? n.x, y: positions[n.id]?.y ?? n.y,
+    }));
+
+  const edgeData = st.edges.get().map((e) => ({
+    id: e.id, from: e.from, to: e.to,
+    label: e.label || '', arrowDir: e.arrowDir || 'to',
+    dashes: e.dashes || false, fontSize: e.fontSize || null,
+    labelRotation: e.labelRotation || 0,
+    edgeLabelOffsetX: e.edgeLabelOffsetX || 0, edgeLabelOffsetY: e.edgeLabelOffsetY || 0,
+    fromPort: e.fromPort || null, toPort: e.toPort || null,
+    edgeColor: e.edgeColor || null, edgeWidth: e.edgeWidth || null,
+    edgeLocked: e.edgeLocked || false, edgeLabelWidth: e.edgeLabelWidth || null,
+  }));
+
+  const title = document.getElementById('diagramTitle').value || t('diagram.toast.untitled');
+  await fetch(`/api/diagrams/${st.currentDiagramId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title, nodes: nodeData, edges: edgeData, edgesStraight: st.edgesStraight, gridEnabled: st.gridEnabled, alignGuides: st.alignGuides }),
+  });
+  st.isDirty = false;
+  document.getElementById('btnSave').disabled = true;
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+  renderDiagramList();
+}

package/dist/src/frontend/diagram/ports.js

@@ -0,0 +1,386 @@
+// ── Connection ports (attachment points) ──────────────────────────────────────
+// Each node exposes 8 attachment points: N, NE, E, SE, S, SW, W, NW.
+// Port edges bypass vis-network's centre-to-centre rendering with custom bezier
+// curves rooted at the chosen port positions.
+//
+// Backwards-compatible: edges without fromPort/toPort continue to use
+// vis-network's native rendering unchanged.
+
+import { st } from './state.js';
+import { SHAPE_DEFAULTS } from './node-rendering.js';
+
+/**
+ * Splits `text` into lines that each fit within `maxWidth` canvas units.
+ * Requires ctx.font to be set before calling.
+ */
+export function wrapText(ctx, text, maxWidth) {
+  if (!maxWidth || !text) return [text || ''];
+  const words = text.split(/\s+/);
+  const lines = [];
+  let line = '';
+  for (const word of words) {
+    const test = line ? line + ' ' + word : word;
+    if (line && ctx.measureText(test).width > maxWidth) {
+      lines.push(line);
+      line = word;
+    } else {
+      line = test;
+    }
+  }
+  if (line) lines.push(line);
+  return lines.length ? lines : [text];
+}
+
+export const PORT_KEYS = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+
+const SQRT2_INV = 1 / Math.sqrt(2);
+
+// Offset fraction [ox, oy] from node centre, in units of half-width / half-height.
+// Rectangular shapes: corners reach [±1, ±1], mid-sides [0, ±1] or [±1, 0].
+const PORT_OFFSETS_RECT = {
+  N:  [ 0,  -1], NE: [ 1,  -1], E:  [ 1,   0], SE: [ 1,   1],
+  S:  [ 0,   1], SW: [-1,   1], W:  [-1,   0], NW: [-1,  -1],
+};
+
+// Circular / elliptical shapes: all points lie on the circumference.
+const PORT_OFFSETS_CIRC = {
+  N:  [ 0,            -1          ], NE: [ SQRT2_INV,  -SQRT2_INV ],
+  E:  [ 1,             0          ], SE: [ SQRT2_INV,   SQRT2_INV ],
+  S:  [ 0,             1          ], SW: [-SQRT2_INV,   SQRT2_INV ],
+  W:  [-1,             0          ], NW: [-SQRT2_INV,  -SQRT2_INV ],
+};
+
+// Database / cylinder: diagonal ports sit at the cylinder wall (x=±1) at the
+// junction between the side body and the elliptic cap (y ≈ ±0.76, derived from
+// cap ry = H×0.12 → body_top_frac = 1 − 2×0.12 = 0.76).
+const PORT_OFFSETS_DATABASE = {
+  N:  [ 0,     -1    ], NE: [ 1,     -0.76 ],
+  E:  [ 1,      0    ], SE: [ 1,      0.76 ],
+  S:  [ 0,      1    ], SW: [-1,      0.76 ],
+  W:  [-1,      0    ], NW: [-1,     -0.76 ],
+};
+
+// Outward-pointing unit normals used to compute bezier control points.
+const PORT_NORMALS = {
+  N:  [ 0,            -1          ], NE: [ SQRT2_INV,  -SQRT2_INV ],
+  E:  [ 1,             0          ], SE: [ SQRT2_INV,   SQRT2_INV ],
+  S:  [ 0,             1          ], SW: [-SQRT2_INV,   SQRT2_INV ],
+  W:  [-1,             0          ], NW: [-SQRT2_INV,  -SQRT2_INV ],
+};
+
+// Shapes whose ports follow an elliptical boundary (no sharp corners).
+const CIRCULAR_SHAPES = new Set(['circle', 'ellipse']);
+
+// ── Geometry helpers ──────────────────────────────────────────────────────────
+
+function nodeGeometry(nodeId) {
+  const n = st.nodes && st.nodes.get(nodeId);
+  if (!n) return null;
+  const pos = st.network && st.network.getPositions([nodeId])[nodeId];
+  if (!pos) return null;
+  const shapeType = n.shapeType || 'box';
+  const defaults  = SHAPE_DEFAULTS[shapeType] || [100, 40];
+  const W = n.nodeWidth  || defaults[0];
+  // 'circle' is always square (H = W); 'ellipse' uses its own height.
+  const H = shapeType === 'circle' ? W : (n.nodeHeight || defaults[1]);
+  return { cx: pos.x, cy: pos.y, W, H, rotation: n.rotation || 0, shapeType };
+}
+
+/** Returns the world-space {x, y} of a port on a node. */
+export function getPortPosition(nodeId, portKey) {
+  const geo = nodeGeometry(nodeId);
+  if (!geo) return null;
+  const { cx, cy, W, H, rotation, shapeType } = geo;
+  const offsets = shapeType === 'database'      ? PORT_OFFSETS_DATABASE
+               : CIRCULAR_SHAPES.has(shapeType) ? PORT_OFFSETS_CIRC
+               : PORT_OFFSETS_RECT;
+  const [ox, oy] = offsets[portKey] || [0, 0];
+  let dx = ox * W / 2;
+  let dy = oy * H / 2;
+  if (rotation) {
+    const cos = Math.cos(rotation), sin = Math.sin(rotation);
+    [dx, dy] = [dx * cos - dy * sin, dx * sin + dy * cos];
+  }
+  return { x: cx + dx, y: cy + dy };
+}
+
+/** Returns the port key whose position is closest to `canvasPos` (world coords). */
+export function getNearestPort(nodeId, canvasPos) {
+  let minD2 = Infinity, nearest = 'N';
+  for (const key of PORT_KEYS) {
+    const p = getPortPosition(nodeId, key);
+    if (!p) continue;
+    const d2 = (canvasPos.x - p.x) ** 2 + (canvasPos.y - p.y) ** 2;
+    if (d2 < minD2) { minD2 = d2; nearest = key; }
+  }
+  return nearest;
+}
+
+// ── Port dot visualisation ────────────────────────────────────────────────────
+
+/**
+ * Draws 8 port hint dots for `nodeId` in the vis-network afterDrawing context.
+ * `highlightedPort` (if any) is rendered larger and fully orange.
+ */
+export function drawPortDots(ctx, nodeId, highlightedPort) {
+  for (const key of PORT_KEYS) {
+    const p = getPortPosition(nodeId, key);
+    if (!p) continue;
+    const hl = key === highlightedPort;
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, hl ? 6 : 4, 0, Math.PI * 2);
+    ctx.fillStyle   = hl ? '#f97316' : 'rgba(249,115,22,0.45)';
+    ctx.strokeStyle = '#ffffff';
+    ctx.lineWidth   = 1.5;
+    ctx.fill();
+    ctx.stroke();
+    ctx.restore();
+  }
+}
+
+// ── Custom edge rendering ─────────────────────────────────────────────────────
+
+function bezierAt(p0, cp1, cp2, p3, t) {
+  const mt = 1 - t;
+  return {
+    x: mt ** 3 * p0.x + 3 * mt ** 2 * t * cp1.x + 3 * mt * t ** 2 * cp2.x + t ** 3 * p3.x,
+    y: mt ** 3 * p0.y + 3 * mt ** 2 * t * cp1.y + 3 * mt * t ** 2 * cp2.y + t ** 3 * p3.y,
+  };
+}
+
+function drawArrowhead(ctx, x, y, angle, size) {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(angle);
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(-size * 1.6, -size * 0.55);
+  ctx.lineTo(-size * 1.6,  size * 0.55);
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+function centerPos(nodeId) {
+  const p = st.network && st.network.getPositions([nodeId])[nodeId];
+  return p || null;
+}
+
+function isAnchorNode(nodeId) {
+  const n = st.nodes && st.nodes.get(nodeId);
+  return !!(n && n.shapeType === 'anchor');
+}
+
+/**
+ * Draws a port-anchored edge on the vis-network canvas context (world coordinates).
+ * Called from the _drawNodes patch instead of vis-network's native e.draw(ctx).
+ *
+ * Handles:
+ *  - Bezier curve (when both ports are set and not in straight mode)
+ *  - Straight line fallback
+ *  - Arrowheads (to / both / none)
+ *  - Dashes
+ *  - Label (rotated or plain) at the curve midpoint
+ */
+export function drawPortEdge(ctx, edgeData) {
+  const fromIsAnchor = isAnchorNode(edgeData.from);
+  const toIsAnchor   = isAnchorNode(edgeData.to);
+
+  const fromPos = (edgeData.fromPort && !fromIsAnchor)
+    ? getPortPosition(edgeData.from, edgeData.fromPort)
+    : centerPos(edgeData.from);
+  const toPos = (edgeData.toPort && !toIsAnchor)
+    ? getPortPosition(edgeData.to, edgeData.toPort)
+    : centerPos(edgeData.to);
+
+  if (!fromPos || !toPos) return;
+
+  const selected  = st.selectedEdgeIds && st.selectedEdgeIds.includes(edgeData.id);
+  const baseColor = edgeData.edgeColor || '#a8a29e';
+  const color     = selected ? '#f97316' : baseColor;
+  const lw        = selected ? Math.max(2.5, (edgeData.edgeWidth || 1.5) + 1) : (edgeData.edgeWidth || 1.5);
+  const arrSz     = lw * 5;
+
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.fillStyle   = color;
+  ctx.lineWidth   = lw;
+  if (edgeData.dashes) ctx.setLineDash([6, 4]);
+
+  // Bezier control points: only when both endpoints are real ports and not in straight mode.
+  let cp1, cp2;
+  const useBezier =
+    !st.edgesStraight &&
+    edgeData.fromPort && !fromIsAnchor &&
+    edgeData.toPort   && !toIsAnchor;
+
+  if (useBezier) {
+    const dist    = Math.hypot(toPos.x - fromPos.x, toPos.y - fromPos.y);
+    const tension = Math.max(60, dist * 0.4);
+    const fn = PORT_NORMALS[edgeData.fromPort];
+    const tn = PORT_NORMALS[edgeData.toPort];
+    cp1 = { x: fromPos.x + fn[0] * tension, y: fromPos.y + fn[1] * tension };
+    cp2 = { x: toPos.x   + tn[0] * tension, y: toPos.y   + tn[1] * tension };
+  }
+
+  // ── Path ──────────────────────────────────────────────────────────────────
+  ctx.beginPath();
+  ctx.moveTo(fromPos.x, fromPos.y);
+  if (cp1 && cp2) ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, toPos.x, toPos.y);
+  else            ctx.lineTo(toPos.x, toPos.y);
+  ctx.stroke();
+
+  // ── Arrowheads ─────────────────────────────────────────────────────────────
+  const arrowDir = edgeData.arrowDir ?? 'to';
+  const drawTo   = arrowDir === 'to'   || arrowDir === 'both';
+  const drawFrom = arrowDir === 'both';
+
+  if (drawTo) {
+    const a = cp2
+      ? Math.atan2(toPos.y - cp2.y, toPos.x - cp2.x)
+      : Math.atan2(toPos.y - fromPos.y, toPos.x - fromPos.x);
+    drawArrowhead(ctx, toPos.x, toPos.y, a, arrSz);
+  }
+  if (drawFrom) {
+    const a = cp1
+      ? Math.atan2(fromPos.y - cp1.y, fromPos.x - cp1.x)
+      : Math.atan2(fromPos.y - toPos.y, fromPos.x - toPos.x);
+    drawArrowhead(ctx, fromPos.x, fromPos.y, a, arrSz);
+  }
+
+  // ── Label midpoint — always compute so the label editor can open here ────────
+  const mid = (cp1 && cp2)
+    ? bezierAt(fromPos, cp1, cp2, toPos, 0.5)
+    : { x: (fromPos.x + toPos.x) / 2, y: (fromPos.y + toPos.y) / 2 };
+
+  const ox = edgeData.edgeLabelOffsetX || 0;
+  const oy = edgeData.edgeLabelOffsetY || 0;
+  const lx = mid.x + ox;
+  const ly = mid.y + oy;
+
+  // Store the DOM position using the canvas transform — same matrix used to
+  // draw the label, so it's pixel-perfect for the textarea positioning.
+  {
+    const m   = ctx.getTransform();
+    const dpr = window.devicePixelRatio || 1;
+    const canvasEl      = ctx.canvas;
+    const container     = document.getElementById('vis-canvas').parentElement;
+    const canvasRect    = canvasEl.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    st.edgeLabelCanvasPos[edgeData.id] = {
+      x: (m.a * lx + m.e) / dpr + (canvasRect.left - containerRect.left),
+      y: (m.d * ly + m.f) / dpr + (canvasRect.top  - containerRect.top),
+    };
+  }
+
+  // ── Label ─────────────────────────────────────────────────────────────────
+  if (edgeData.label) {
+    const fontSize   = edgeData.fontSize || 11;
+    const lineHeight = fontSize * 1.5;
+    const PAD_X = 6, PAD_Y = 4;
+
+    ctx.save();
+    ctx.translate(lx, ly);
+    if (edgeData.labelRotation && Math.abs(edgeData.labelRotation) > 0.001) {
+      ctx.rotate(edgeData.labelRotation);
+    }
+    ctx.font = `${fontSize}px system-ui,-apple-system,sans-serif`;
+
+    const fixedW = edgeData.edgeLabelWidth || null;
+    const innerW = fixedW ? fixedW - PAD_X * 2 : null;
+    const lines  = fixedW ? wrapText(ctx, edgeData.label, innerW) : [edgeData.label];
+    const textW  = fixedW ? innerW : ctx.measureText(edgeData.label).width;
+    const boxW   = textW + PAD_X * 2;
+    const boxH   = lines.length * lineHeight + PAD_Y * 2;
+
+    // Always store bbox (needed for resize handles, even when not selected)
+    st.edgeLabelBBox[edgeData.id] = {
+      cx: lx, cy: ly,
+      w: boxW, h: boxH,
+      rotation: edgeData.labelRotation || 0,
+    };
+
+    const totalH   = lines.length * lineHeight;
+    const TEXT_PAD = 3; // tight padding behind text only (not the full resize box)
+    const isDark   = document.documentElement.classList.contains('dark');
+    const bgFill   = isDark ? 'rgba(3,7,18,0.82)' : 'rgba(249,250,251,0.82)';
+
+    // Opaque background tight around the text — makes the arrow appear to pass behind.
+    ctx.save();
+    ctx.fillStyle = bgFill;
+    ctx.fillRect(-textW / 2 - TEXT_PAD, -totalH / 2 - TEXT_PAD,
+                  textW + TEXT_PAD * 2,   totalH + TEXT_PAD * 2);
+    ctx.restore();
+
+    // Dashed border box — only when the edge is selected
+    if (st.selectedEdgeIds && st.selectedEdgeIds.includes(edgeData.id)) {
+      ctx.save();
+      ctx.strokeStyle = '#9ca3af';
+      ctx.lineWidth   = 0.8;
+      ctx.setLineDash([3, 3]);
+      ctx.strokeRect(-boxW / 2, -boxH / 2, boxW, boxH);
+      ctx.setLineDash([]);
+      ctx.restore();
+    }
+
+    ctx.fillStyle    = '#6b7280';
+    ctx.textAlign    = 'center';
+    ctx.textBaseline = 'middle';
+    lines.forEach((line, i) => {
+      const y = -totalH / 2 + i * lineHeight + lineHeight / 2;
+      ctx.fillText(line, 0, y);
+    });
+
+    ctx.restore();
+  }
+
+  ctx.setLineDash([]);
+  ctx.restore();
+}
+
+// ── Hit detection ─────────────────────────────────────────────────────────────
+
+/**
+ * Returns the minimum distance (world units) from point `p` to the visual path
+ * of a port edge — matching the bezier geometry used by drawPortEdge exactly.
+ */
+export function distanceToPortEdge(edgeData, p) {
+  const fromIsAnch = isAnchorNode(edgeData.from);
+  const toIsAnch   = isAnchorNode(edgeData.to);
+  const fromPos = (edgeData.fromPort && !fromIsAnch)
+    ? getPortPosition(edgeData.from, edgeData.fromPort) : centerPos(edgeData.from);
+  const toPos = (edgeData.toPort && !toIsAnch)
+    ? getPortPosition(edgeData.to, edgeData.toPort) : centerPos(edgeData.to);
+  if (!fromPos || !toPos) return Infinity;
+
+  if (!st.edgesStraight && edgeData.fromPort && !fromIsAnch && edgeData.toPort && !toIsAnch) {
+    const dist    = Math.hypot(toPos.x - fromPos.x, toPos.y - fromPos.y);
+    const tension = Math.max(60, dist * 0.4);
+    const fn = PORT_NORMALS[edgeData.fromPort];
+    const tn = PORT_NORMALS[edgeData.toPort];
+    const cp1 = { x: fromPos.x + fn[0] * tension, y: fromPos.y + fn[1] * tension };
+    const cp2 = { x: toPos.x   + tn[0] * tension, y: toPos.y   + tn[1] * tension };
+    return _distToBezier(p, fromPos, cp1, cp2, toPos);
+  }
+  return _distToSegment(p, fromPos, toPos);
+}
+
+function _distToBezier(p, p0, cp1, cp2, p3, samples = 24) {
+  let minD = Infinity;
+  for (let i = 0; i <= samples; i++) {
+    const pt = bezierAt(p0, cp1, cp2, p3, i / samples);
+    const d  = Math.hypot(p.x - pt.x, p.y - pt.y);
+    if (d < minD) minD = d;
+  }
+  return minD;
+}
+
+function _distToSegment(p, a, b) {
+  const dx = b.x - a.x, dy = b.y - a.y;
+  const len2 = dx * dx + dy * dy;
+  if (len2 === 0) return Math.hypot(p.x - a.x, p.y - a.y);
+  const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / len2));
+  return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+