living-documentation 7.35.0 → 7.37.0

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

@@ -44,6 +44,12 @@ function setTool(tool, shape) {
   }
 }
 
+window.addEventListener('diagram:setTool', (e) => {
+  const detail = e.detail || {};
+  if (!detail.tool) return;
+  setTool(detail.tool, detail.shape);
+});
+
 function selectAll() {
   if (!st.network || !st.nodes || !st.edges) return;
   const ids = st.nodes.getIds();

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

@@ -34,6 +34,8 @@ let _draggingAnchorIds = new Set();
 let _rehookEdgeId      = null;
 let _rehookHoveredNodeId  = null;
 let _rehookHoveredPortKey = null;
+let _pointerDownSelection = { nodeIds: [], edgeIds: [] };
+let _edgeLabelPointerAbort = null;
 
 // Returns true when an edge can enter rehook mode (at least one non-anchor endpoint).
 // Works for both port edges and native vis-network edges.
@@ -126,7 +128,11 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
         callback(data);
         markDirty();
         _addEdgeFromPort = null;
-        setTimeout(() => { if (st.currentTool === 'addEdge') st.network.addEdgeMode(); }, 0);
+        setTimeout(() => {
+          if (st.currentTool === 'addEdge') {
+            window.dispatchEvent(new CustomEvent('diagram:setTool', { detail: { tool: 'select' } }));
+          }
+        }, 0);
       },
     },
   };
@@ -138,6 +144,13 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   // Must be registered BEFORE any other capture-phase mousedown listeners on
   // the container so it can stopImmediatePropagation for locked targets.
   installUnlockHold(container);
+  container.addEventListener('mousedown', (e) => {
+    if (e.button !== 0) return;
+    _pointerDownSelection = {
+      nodeIds: [...(st.selectedNodeIds || [])],
+      edgeIds: [...(st.selectedEdgeIds || [])],
+    };
+  }, { capture: true });
 
   // ── Z-order patch ──────────────────────────────────────────────────────────
   // vis.js renders in 3 passes (normal → selected → hovered), which breaks
@@ -189,7 +202,7 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
       } else if (fromIsAnchor && !toIsAnchor) {
         level = toLevel;
       } else {
-        level = Math.min(fromLevel, toLevel);
+        level = Math.max(fromLevel, toLevel);
       }
       if (!edgesByLevel.has(level)) edgesByLevel.set(level, []);
       edgesByLevel.get(level).push(edge);
@@ -385,14 +398,13 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
       ctx.restore();
     });
 
-    // Track hover during mousemove — computed before any mousedown fires.
-    container.addEventListener('mousemove', (e) => {
+    function edgeLabelHitAt(clientX, clientY) {
       if (!st.network || !st.edgeLabelBBox) return;
-      const cp = st.network.DOMtoCanvas({ x: e.offsetX, y: e.offsetY });
+      const rect = container.getBoundingClientRect();
+      const cp = st.network.DOMtoCanvas({ x: clientX - rect.left, y: clientY - rect.top });
       const hr = 8 / st.network.getScale();
 
       // ── Resize handle detection ──────────────────────────────────────────────
-      let found = null;
       for (const edgeId of (st.selectedEdgeIds || [])) {
         const edge = st.edges && st.edges.get(edgeId);
         if (!edge || !edge.label) continue;
@@ -405,18 +417,12 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
         const ly = dx * Math.sin(r) + dy * Math.cos(r);
 
         if (Math.hypot(lx - (-bbox.w / 2), ly) < hr || Math.hypot(lx - (bbox.w / 2), ly) < hr) {
-          found = { edgeId, bboxCx: bbox.cx, bboxCy: bbox.cy, rotation: bbox.rotation || 0 };
-          break;
+          return { type: 'handle', edgeId, bboxCx: bbox.cx, bboxCy: bbox.cy, rotation: bbox.rotation || 0 };
         }
       }
-      if (Boolean(found) !== Boolean(_hoverHandle)) {
-        container.style.cursor = found ? 'ew-resize' : (_hoverLabelDrag ? 'grab' : '');
-      }
-      _hoverHandle = found;
 
-      // ── Label box hover detection (drag) — only when no handle hovered ───────
-      let labelFound = null;
-      if (!found && st.selectedEdgeIds && st.selectedEdgeIds.length === 1) {
+      // ── Label box detection (drag) — only when no handle hovered ───────────
+      if (st.selectedEdgeIds && st.selectedEdgeIds.length === 1) {
         const edgeId = st.selectedEdgeIds[0];
         const edge = st.edges && st.edges.get(edgeId);
         if (edge && edge.label) {
@@ -427,39 +433,104 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
             const lx = dx * Math.cos(r) - dy * Math.sin(r);
             const ly = dx * Math.sin(r) + dy * Math.cos(r);
             if (Math.abs(lx) <= bbox.w / 2 && Math.abs(ly) <= bbox.h / 2) {
-              labelFound = { edgeId };
+              return { type: 'label', edgeId };
             }
           }
         }
       }
+
+      return null;
+    }
+
+    // Track hover during mousemove — computed before any mousedown fires.
+    container.addEventListener('mousemove', (e) => {
+      const hit = edgeLabelHitAt(e.clientX, e.clientY);
+      const found = hit && hit.type === 'handle'
+        ? { edgeId: hit.edgeId, bboxCx: hit.bboxCx, bboxCy: hit.bboxCy, rotation: hit.rotation }
+        : null;
+      if (Boolean(found) !== Boolean(_hoverHandle)) {
+        container.style.cursor = found ? 'ew-resize' : (_hoverLabelDrag ? 'grab' : '');
+      }
+      _hoverHandle = found;
+
+      const labelFound = !found && hit && hit.type === 'label' ? { edgeId: hit.edgeId } : null;
       if (Boolean(labelFound) !== Boolean(_hoverLabelDrag)) {
         if (!found) container.style.cursor = labelFound ? 'grab' : '';
       }
       _hoverLabelDrag = labelFound;
     });
 
-    // Mousedown: start resize (handles take priority) or label drag.
-    container.addEventListener('mousedown', (e) => {
-      if (e.button !== 0) return;
-      if (_hoverHandle) {
+    function startEdgeLabelPointerInteraction(e) {
+      if (e.button !== 0) return false;
+      if (!container.contains(e.target)) return false;
+      const hit = edgeLabelHitAt(e.clientX, e.clientY);
+      if (hit && hit.type === 'handle') {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        _hoverHandle = { edgeId: hit.edgeId, bboxCx: hit.bboxCx, bboxCy: hit.bboxCy, rotation: hit.rotation };
         _lr = { ..._hoverHandle, dragging: false };
         st.network.setOptions({ interaction: { dragView: false } });
-      } else if (_hoverLabelDrag) {
-        const edge = st.edges && st.edges.get(_hoverLabelDrag.edgeId);
-        if (!edge) return;
+        return true;
+      } else if (hit && hit.type === 'label') {
+        const edge = st.edges && st.edges.get(hit.edgeId);
+        if (!edge) return false;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        _hoverLabelDrag = { edgeId: hit.edgeId };
         _ld = {
-          edgeId: _hoverLabelDrag.edgeId,
+          edgeId: hit.edgeId,
           startMouse: { x: e.clientX, y: e.clientY },
           startOffsetX: edge.edgeLabelOffsetX || 0,
           startOffsetY: edge.edgeLabelOffsetY || 0,
           dragging: false,
         };
         st.network.setOptions({ interaction: { dragView: false } });
+        return true;
       }
-    }, { capture: true });
+      return false;
+    }
+
+    if (_edgeLabelPointerAbort) _edgeLabelPointerAbort.abort();
+    _edgeLabelPointerAbort = new AbortController();
+
+    // Mousedown: start resize (handles take priority) or label drag.
+    // The document-level capture listener runs before vis-network's internal
+    // pointer handlers, so a node underneath the edge label cannot start moving.
+    document.addEventListener('pointerdown', startEdgeLabelPointerInteraction, {
+      capture: true,
+      signal: _edgeLabelPointerAbort.signal,
+    });
+    document.addEventListener('mousedown', startEdgeLabelPointerInteraction, {
+      capture: true,
+      signal: _edgeLabelPointerAbort.signal,
+    });
+    container.addEventListener('pointerdown', (e) => {
+      startEdgeLabelPointerInteraction(e);
+    }, { capture: true, signal: _edgeLabelPointerAbort.signal });
+    container.addEventListener('mousedown', (e) => {
+      startEdgeLabelPointerInteraction(e);
+    }, { capture: true, signal: _edgeLabelPointerAbort.signal });
+
+    document.addEventListener('dblclick', (e) => {
+      if (!container.contains(e.target)) return;
+      const hit = edgeLabelHitAt(e.clientX, e.clientY);
+      if (!hit || hit.type !== 'label') return;
+
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      _lr = null;
+      _ld = null;
+      st.network.setOptions({ interaction: { dragView: true } });
+      st.selectedNodeIds = [];
+      st.selectedEdgeIds = [hit.edgeId];
+      st.network.setSelection({ nodes: [], edges: [hit.edgeId] });
+      hideNodePanel();
+      showEdgePanel();
+      startEdgeLabelEdit();
+    }, { capture: true, signal: _edgeLabelPointerAbort.signal });
 
     // Update width (resize) or offset (label drag) while dragging.
-    document.addEventListener('mousemove', (e) => {
+    function onEdgeLabelPointerMove(e) {
       if (!st.network) return;
       if (_lr) {
         if (!_lr.dragging) { _lr.dragging = true; pushSnapshot(); }
@@ -485,10 +556,12 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
         });
         st.network.redraw();
       }
-    });
+    }
+    document.addEventListener('pointermove', onEdgeLabelPointerMove, { signal: _edgeLabelPointerAbort.signal });
+    document.addEventListener('mousemove', onEdgeLabelPointerMove, { signal: _edgeLabelPointerAbort.signal });
 
     // Commit on mouseup.
-    document.addEventListener('mouseup', () => {
+    function onEdgeLabelPointerUp() {
       if (_lr) {
         st.network.setOptions({ interaction: { dragView: true } });
         if (_lr.dragging) markDirty();
@@ -500,7 +573,9 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
         _ld = null;
       }
       container.style.cursor = _hoverHandle ? 'ew-resize' : (_hoverLabelDrag ? 'grab' : '');
-    });
+    }
+    document.addEventListener('pointerup', onEdgeLabelPointerUp, { signal: _edgeLabelPointerAbort.signal });
+    document.addEventListener('mouseup', onEdgeLabelPointerUp, { signal: _edgeLabelPointerAbort.signal });
   }
 
   // ── Free-arrow body drag ──────────────────────────────────────────────────────
@@ -1037,48 +1112,185 @@ function _distToSegment(px, py, ax, ay, bx, by) {
 }
 
 
-// Returns the topmost (highest z-order) node whose bounding box contains canvasPos.
+function nodeContainsCanvasPoint(id, canvasPos) {
+  const n  = st.nodes.get(id);
+  const bn = st.network && st.network.body.nodes[id];
+  if (!n || !bn || n.shapeType === 'anchor') return false;
+
+  const shapeType = n.shapeType || 'box';
+  const defaults  = SHAPE_DEFAULTS[shapeType] || [60, 28];
+  const W = n.nodeWidth || defaults[0];
+  const H = shapeType === 'circle' ? W : (n.nodeHeight || defaults[1]);
+
+  const dx = canvasPos.x - bn.x;
+  const dy = canvasPos.y - bn.y;
+  const rot = n.rotation || 0;
+  const lx = rot ? dx * Math.cos(-rot) - dy * Math.sin(-rot) : dx;
+  const ly = rot ? dx * Math.sin(-rot) + dy * Math.cos(-rot) : dy;
+
+  if (shapeType === 'circle' || shapeType === 'ellipse') {
+    const rx = W / 2;
+    const ry = H / 2;
+    return rx > 0 && ry > 0 && ((lx * lx) / (rx * rx) + (ly * ly) / (ry * ry)) <= 1;
+  }
+
+  return Math.abs(lx) <= W / 2 && Math.abs(ly) <= H / 2;
+}
+
+// Returns the topmost (highest z-order) node containing canvasPos.
 // Ignores anchor nodes and respects st.canonicalOrder.
 function topmostNodeAt(canvasPos) {
-  let topmost = null;
-  let topmostIdx = -1;
-  for (const id of st.canonicalOrder) {
-    const n  = st.nodes.get(id);
-    const bn = st.network && st.network.body.nodes[id];
-    if (!n || !bn || n.shapeType === 'anchor') continue;
-    const defaults = SHAPE_DEFAULTS[n.shapeType || 'box'] || [60, 28];
-    const W  = n.nodeWidth  || defaults[0];
-    const H  = n.nodeHeight || defaults[1];
-    const cx = bn.x, cy = bn.y;
-    if (canvasPos.x >= cx - W / 2 && canvasPos.x <= cx + W / 2 &&
-        canvasPos.y >= cy - H / 2 && canvasPos.y <= cy + H / 2) {
-      const idx = st.canonicalOrder.indexOf(id);
-      if (idx > topmostIdx) { topmostIdx = idx; topmost = id; }
+  for (let i = st.canonicalOrder.length - 1; i >= 0; i--) {
+    const id = st.canonicalOrder[i];
+    if (nodeContainsCanvasPoint(id, canvasPos)) return id;
+  }
+  return null;
+}
+
+function edgeDrawLevel(edgeData) {
+  if (!edgeData) return -1;
+  const fromLevel = st.canonicalOrder.indexOf(edgeData.from);
+  const toLevel   = st.canonicalOrder.indexOf(edgeData.to);
+  if (fromLevel === -1 && toLevel === -1) return -1;
+  if (fromLevel === -1) return toLevel;
+  if (toLevel === -1) return fromLevel;
+
+  const fromNode = st.nodes.get(edgeData.from);
+  const toNode   = st.nodes.get(edgeData.to);
+  const fromIsAnchor = fromNode && fromNode.shapeType === 'anchor';
+  const toIsAnchor   = toNode   && toNode.shapeType   === 'anchor';
+  if (toIsAnchor && !fromIsAnchor) return fromLevel;
+  if (fromIsAnchor && !toIsAnchor) return toLevel;
+  return Math.max(fromLevel, toLevel);
+}
+
+function nearestPortEdgeAt(canvasPos, threshold = 8) {
+  const portEdges = st.edges.get({ filter: (e) => e.fromPort || e.toPort });
+  let nearest = null;
+  let nearestDist = Infinity;
+  for (const edge of portEdges) {
+    const d = distanceToPortEdge(edge, canvasPos);
+    if (d < nearestDist) {
+      nearestDist = d;
+      nearest = edge;
     }
   }
-  return topmost;
+  return nearest && nearestDist <= threshold ? nearest : null;
 }
 
-function onDoubleClick(params) {
-  // Locked nodes never intercept double-click — filter them out first.
-  const unlockedNodes = params.nodes.filter(id => { const n = st.nodes.get(id); return n && !n.locked; });
-
-  // When nodes and edges both match the click position, honour z-order:
-  // only give the click to a node if it is truly the topmost element there.
-  // Otherwise fall through to edge handling.
-  let effectiveNodes = unlockedNodes;
-  if (unlockedNodes.length > 0 && params.edges.length > 0) {
-    const top = topmostNodeAt(params.pointer.canvas);
-    effectiveNodes = (top && unlockedNodes.includes(top)) ? [top] : [];
+function edgeLabelAtCanvasPoint(canvasPos) {
+  if (!st.edgeLabelBBox || !st.edges) return null;
+
+  let bestEdgeId = null;
+  let bestLevel = -1;
+  for (const edge of st.edges.get()) {
+    if (!edge || !edge.label) continue;
+    const bbox = st.edgeLabelBBox[edge.id];
+    if (!bbox) continue;
+
+    const r  = -(bbox.rotation || 0);
+    const dx = canvasPos.x - bbox.cx;
+    const dy = canvasPos.y - bbox.cy;
+    const lx = dx * Math.cos(r) - dy * Math.sin(r);
+    const ly = dx * Math.sin(r) + dy * Math.cos(r);
+    if (Math.abs(lx) > bbox.w / 2 || Math.abs(ly) > bbox.h / 2) continue;
+
+    const level = edgeDrawLevel(edge);
+    if (level >= bestLevel) {
+      bestLevel = level;
+      bestEdgeId = edge.id;
+    }
   }
+  return bestEdgeId;
+}
+
+function isEdgeInteractive(edge) {
+  if (!edge) return false;
+  const fromN = st.nodes.get(edge.from);
+  const toN   = st.nodes.get(edge.to);
+  const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+  return isFreeArrow ? !(fromN.locked && toN.locked) : !edge.edgeLocked;
+}
+
+function selectableEdgesForNodes(nodeIds) {
+  const selectedSet = new Set(nodeIds);
+  return st.edges.get().filter((e) => {
+    if (!selectedSet.has(e.from) || !selectedSet.has(e.to)) return false;
+    return isEdgeInteractive(e);
+  }).map((e) => e.id);
+}
 
-  if (effectiveNodes.length > 0) {
-    st.selectedNodeIds = effectiveNodes;
-    st.network.selectNodes(st.selectedNodeIds);
+function selectNodesFromClick(nodeId, srcEvent) {
+  const additive = !!(srcEvent && (srcEvent.metaKey || srcEvent.ctrlKey));
+  const clicked = expandSelectionToGroup([nodeId]).filter((id) => {
+    const n = st.nodes.get(id);
+    return n && !n.locked && n.shapeType !== 'anchor';
+  });
+  if (!clicked.length) return;
+
+  let nodeIds;
+  if (additive) {
+    const next = new Set(_pointerDownSelection.nodeIds || []);
+    const allAlreadySelected = clicked.every((id) => next.has(id));
+    clicked.forEach((id) => {
+      if (allAlreadySelected) next.delete(id);
+      else next.add(id);
+    });
+    nodeIds = Array.from(next).filter((id) => {
+      const n = st.nodes.get(id);
+      return n && !n.locked && n.shapeType !== 'anchor';
+    });
+  } else {
+    nodeIds = clicked;
+  }
+
+  const edgeIds = selectableEdgesForNodes(nodeIds);
+  _addingEdgesToSelection = true;
+  st.network.setSelection({ nodes: nodeIds, edges: edgeIds });
+  _addingEdgesToSelection = false;
+  st.selectedNodeIds = nodeIds;
+  st.selectedEdgeIds = edgeIds;
+  _rehookEdgeId = _rehookHoveredNodeId = _rehookHoveredPortKey = null;
+
+  hideEdgePanel();
+  if (nodeIds.length) showNodePanel();
+  else {
+    hideNodePanel();
+    hideSelectionOverlay();
+  }
+}
+
+function onDoubleClick(params) {
+  const srcEvent = params.event && params.event.srcEvent;
+  const clientPos = srcEvent ? { x: srcEvent.clientX, y: srcEvent.clientY } : null;
+  const labelEdgeId = edgeLabelAtCanvasPoint(params.pointer.canvas);
+  const nativeEdgeId = clientPos ? st.network.getEdgeAt(clientPos) : null;
+  const portEdge = nearestPortEdgeAt(params.pointer.canvas);
+  const edgeCandidates = [labelEdgeId, nativeEdgeId, portEdge && portEdge.id, ...params.edges]
+    .filter((id, index, list) => id && list.indexOf(id) === index)
+    .filter((id) => isEdgeInteractive(st.edges.get(id)));
+  const edgeId = edgeCandidates.reduce((bestId, id) => {
+    if (!bestId) return id;
+    return edgeDrawLevel(st.edges.get(id)) >= edgeDrawLevel(st.edges.get(bestId)) ? id : bestId;
+  }, null);
+
+  const topNodeId = topmostNodeAt(params.pointer.canvas);
+  const topNode = topNodeId && st.nodes.get(topNodeId);
+  const canEditTopNode = topNode && !topNode.locked && topNode.shapeType !== 'anchor';
+  const topNodeWins = canEditTopNode && !labelEdgeId && (!edgeId || st.canonicalOrder.indexOf(topNodeId) >= edgeDrawLevel(st.edges.get(edgeId)));
+
+  if (topNodeWins) {
+    st.selectedNodeIds = [topNodeId];
+    st.selectedEdgeIds = [];
+    st.network.setSelection({ nodes: st.selectedNodeIds, edges: [] });
     showNodePanel();
+    hideEdgePanel();
     startLabelEdit();
-  } else if (params.edges.length > 0) {
-    st.selectedEdgeIds = [params.edges[0]];
+  } else if (edgeId) {
+    st.selectedNodeIds = [];
+    st.selectedEdgeIds = [edgeId];
+    st.network.setSelection({ nodes: [], edges: [edgeId] });
+    hideNodePanel();
     showEdgePanel();
     startEdgeLabelEdit();
   } else if (st.currentTool === 'addNode' && st.pendingShape === 'image') {
@@ -1229,8 +1441,8 @@ function onClickNode(params) {
         update.color  = { color: 'rgba(0,0,0,0)', highlight: 'rgba(0,0,0,0)', hover: 'rgba(0,0,0,0)' };
         update.arrows = { to: { enabled: false }, from: { enabled: false } };
       }
-      st.edges.update(update);
       pushSnapshot();
+      st.edges.update(update);
       markDirty();
       const edgeId = edgeData.id;
       _rehookHoveredNodeId = _rehookHoveredPortKey = null;
@@ -1244,14 +1456,34 @@ function onClickNode(params) {
     }
   }
 
-  // When a node is reported, params.edges is always empty — vis-network short-circuits
+  // When a node is reported, params.edges is usually empty — vis-network short-circuits
   // edge detection once a node is found. Fix: call getEdgeAt() directly with CLIENT
   // coordinates. params.pointer.DOM is already offset-relative to the container, so
   // passing it to getEdgeAt() causes a double-subtraction of the container rect and
   // returns null. Passing clientX/Y lets vis-network do its own pixel-perfect detection.
   if (params.nodes.length > 0) {
     const clientPos = { x: params.event.srcEvent.clientX, y: params.event.srcEvent.clientY };
-    const edgeId = st.network.getEdgeAt(clientPos);
+    const nativeEdgeId = st.network.getEdgeAt(clientPos);
+    const portEdge = nearestPortEdgeAt(params.pointer.canvas);
+    const edgeId = nativeEdgeId || (portEdge && portEdge.id);
+
+    // First honour the app-managed z-order. vis-network may report an edge or a
+    // lower node at the click point; compare draw levels so the visibly top
+    // element gets the click.
+    const top = topmostNodeAt(params.pointer.canvas);
+    if (top) {
+      const topNode = st.nodes.get(top);
+      const topLevel = st.canonicalOrder.indexOf(top);
+      const edgeLevel = edgeId ? edgeDrawLevel(st.edges.get(edgeId)) : -1;
+      if (topNode && !topNode.locked && topNode.shapeType !== 'anchor') {
+        if (!edgeId || topLevel >= edgeLevel) {
+          setTimeout(() => {
+            selectNodesFromClick(top, params.event.srcEvent);
+          }, 0);
+          return;
+        }
+      }
+    }
     if (edgeId) {
       const edge  = st.edges.get(edgeId);
       const fromN = edge && st.nodes.get(edge.from);
@@ -1277,12 +1509,12 @@ function onClickNode(params) {
       return;
     }
     // No edge at click position — apply z-order correction for the topmost node.
-    const top = topmostNodeAt(params.pointer.canvas);
+    const fallbackTop = topmostNodeAt(params.pointer.canvas);
     const clickable = params.nodes.filter(id => {
       const n = st.nodes.get(id);
       return n && !n.locked && n.shapeType !== 'anchor';
     });
-    if (!top || !clickable.includes(top)) {
+    if (!fallbackTop || !clickable.includes(fallbackTop)) {
       const fallbackEdgeId = params.edges.length > 0 ? params.edges[0] : null;
       if (fallbackEdgeId) {
         setTimeout(() => {
@@ -1305,19 +1537,12 @@ function onClickNode(params) {
   // Also check the canvas for port-edge proximity when nothing was hit.
   if (params.nodes.length === 0 && params.edges.length === 0) {
     const cp        = params.pointer.canvas;
-    const THRESHOLD = 8;
 
     // ── Port edge proximity check ──────────────────────────────────────────
     // vis-network's hit detection uses the invisible centre-to-centre ghost,
     // so port edges that diverge visually from that path are not selectable.
-    // We scan all port edges and pick the one whose bezier path is closest.
-    const portEdges = st.edges.get({ filter: (e) => e.fromPort || e.toPort });
-    let nearest = null, nearestDist = Infinity;
-    for (const edge of portEdges) {
-      const d = distanceToPortEdge(edge, cp);
-      if (d < nearestDist) { nearestDist = d; nearest = edge; }
-    }
-    if (nearest && nearestDist <= THRESHOLD) {
+    const nearest = nearestPortEdgeAt(cp);
+    if (nearest) {
       st.network.selectEdges([nearest.id]);
       st.selectedEdgeIds = [nearest.id];
       st.selectedNodeIds = [];

package/dist/src/frontend/diagram/unlock-hold.js

@@ -21,6 +21,29 @@ function isEdgeLocked(edge) {
   return isFreeArrow ? !!(fromN.locked && toN.locked) : !!edge.edgeLocked;
 }
 
+function hitInteractiveEdgeLabel(container, clientX, clientY) {
+  if (!st.network || !st.edgeLabelBBox || !st.selectedEdgeIds || st.selectedEdgeIds.length !== 1) return false;
+  const edgeId = st.selectedEdgeIds[0];
+  const edge = st.edges && st.edges.get(edgeId);
+  if (!edge || !edge.label) return false;
+  const bbox = st.edgeLabelBBox[edgeId];
+  if (!bbox) return false;
+
+  const rect = container.getBoundingClientRect();
+  const cp = st.network.DOMtoCanvas({ x: clientX - rect.left, y: clientY - rect.top });
+  const r = -(bbox.rotation || 0);
+  const dx = cp.x - bbox.cx;
+  const dy = cp.y - bbox.cy;
+  const lx = dx * Math.cos(r) - dy * Math.sin(r);
+  const ly = dx * Math.sin(r) + dy * Math.cos(r);
+
+  const handleRadius = 8 / st.network.getScale();
+  const onLeftHandle = Math.hypot(lx + bbox.w / 2, ly) <= handleRadius;
+  const onRightHandle = Math.hypot(lx - bbox.w / 2, ly) <= handleRadius;
+  const insideLabelBox = Math.abs(lx) <= bbox.w / 2 && Math.abs(ly) <= bbox.h / 2;
+  return onLeftHandle || onRightHandle || insideLabelBox;
+}
+
 // Returns a target descriptor ({type, id, ...}) if the DOM point lands on a
 // locked node or locked edge, otherwise null.
 function hitTestLocked(container, clientX, clientY) {
@@ -154,6 +177,7 @@ function onUp() {
 export function installUnlockHold(container) {
   container.addEventListener('mousedown', (e) => {
     if (e.button !== 0) return;
+    if (hitInteractiveEdgeLabel(container, e.clientX, e.clientY)) return;
     const target = hitTestLocked(container, e.clientX, e.clientY);
     if (!target) return;
 

package/dist/starting-doc/.diagrams.json

@@ -1902,8 +1902,8 @@
         "groupId": null,
         "nodeLink": null,
         "locked": false,
-        "x": -173,
-        "y": 51
+        "x": -164,
+        "y": 84
       },
       {
         "id": "n1",
@@ -1996,50 +1996,50 @@
         "dashes": false,
         "fontSize": null,
         "labelRotation": 0,
-        "edgeLabelOffsetX": -31,
-        "edgeLabelOffsetY": -23,
-        "fromPort": null,
-        "toPort": null,
+        "edgeLabelOffsetX": 31,
+        "edgeLabelOffsetY": -22,
+        "fromPort": "E",
+        "toPort": "W",
         "edgeColor": null,
         "edgeWidth": null,
         "edgeLocked": false,
         "edgeLabelWidth": 209.01385498046875
       },
       {
-        "id": "e2",
-        "from": "n3",
-        "to": "n1",
-        "label": "browses and edits docs via",
-        "arrowDir": "to",
+        "id": "e3",
+        "from": "n1",
+        "to": "n4",
+        "label": "reads from / writes to",
+        "arrowDir": "both",
         "dashes": false,
         "fontSize": null,
         "labelRotation": 0,
-        "edgeLabelOffsetX": -53,
-        "edgeLabelOffsetY": 45,
-        "fromPort": null,
-        "toPort": null,
+        "edgeLabelOffsetX": 0,
+        "edgeLabelOffsetY": 0,
+        "fromPort": "S",
+        "toPort": "N",
         "edgeColor": null,
         "edgeWidth": null,
         "edgeLocked": false,
-        "edgeLabelWidth": 209.98614501953125
+        "edgeLabelWidth": 126.26385498046875
       },
       {
-        "id": "e3",
-        "from": "n1",
-        "to": "n4",
-        "label": "reads from / writes to",
-        "arrowDir": "both",
+        "id": "e1777978776487",
+        "from": "n3",
+        "to": "n1",
+        "label": "browses and edits docs via",
+        "arrowDir": "to",
         "dashes": false,
         "fontSize": null,
         "labelRotation": 0,
         "edgeLabelOffsetX": 0,
         "edgeLabelOffsetY": 0,
-        "fromPort": null,
-        "toPort": null,
+        "fromPort": "E",
+        "toPort": "W",
         "edgeColor": null,
         "edgeWidth": null,
         "edgeLocked": false,
-        "edgeLabelWidth": 126.26385498046875
+        "edgeLabelWidth": 178.28289794921875
       }
     ],
     "edgesStraight": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "living-documentation",
-  "version": "7.35.0",
+  "version": "7.37.0",
   "description": "A CLI tool that serves a local Markdown documentation viewer",
   "main": "dist/src/server.js",
   "bin": {