living-documentation 7.36.0 → 7.38.0

package/dist/src/frontend/diagram/edge-panel.js

@@ -4,6 +4,7 @@
 import { st, markDirty } from './state.js';
 import { visEdgeProps }  from './edge-rendering.js';
 import { pushSnapshot }  from './history.js';
+import { t }             from './t.js';
 
 const DEFAULT_EDGE_COLOR = '#a8a29e';
 const FREE_ARROW_STYLE_KEY = 'ld-free-arrow-style';
@@ -33,12 +34,55 @@ export function getLastFreeArrowStyle() {
   catch { return {}; }
 }
 
+function isEdgeLocked(edge) {
+  if (!edge) return false;
+  const fromN = st.nodes && st.nodes.get(edge.from);
+  const toN   = st.nodes && st.nodes.get(edge.to);
+  const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+  return isFreeArrow ? !!(fromN.locked && toN.locked) : !!edge.edgeLocked;
+}
+
+function selectedEdgeLockState() {
+  const edgeIds = (st.selectedEdgeIds || []).filter((id) => st.edges && st.edges.get(id));
+  if (!edgeIds.length) return { allLocked: false, edgeIds };
+  return {
+    allLocked: edgeIds.every((id) => isEdgeLocked(st.edges.get(id))),
+    edgeIds,
+  };
+}
+
+function syncEdgeLockButton() {
+  const btn = document.getElementById('btnEdgeLock');
+  if (!btn) return;
+  const { allLocked } = selectedEdgeLockState();
+  btn.textContent = allLocked ? '🔓' : '🔒';
+  btn.title = t(allLocked ? 'diagram.edge_panel.unlock' : 'diagram.edge_panel.lock');
+  btn.setAttribute('aria-label', btn.title);
+  btn.classList.toggle('tool-active', allLocked);
+}
+
+function setEdgeLocked(edge, locked) {
+  if (!edge) return;
+  const fromN = st.nodes && st.nodes.get(edge.from);
+  const toN   = st.nodes && st.nodes.get(edge.to);
+  const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+  if (isFreeArrow) {
+    [edge.from, edge.to].forEach((nodeId) => {
+      st.nodes.update({ id: nodeId, locked, fixed: locked ? { x: true, y: true } : false, draggable: !locked });
+      const bn = st.network && st.network.body.nodes[nodeId];
+      if (bn) bn.refreshNeeded = true;
+    });
+  } else {
+    st.edges.update({ id: edge.id, edgeLocked: locked });
+  }
+}
+
 export function showEdgePanel() {
   if (!st.selectedEdgeIds.length) return;
   const e = st.edges.get(st.selectedEdgeIds[0]);
   if (!e) return;
 
-  document.getElementById('btnEdgeLock').classList.remove('tool-active');
+  syncEdgeLockButton();
   document.getElementById('edgePanelControls').classList.remove('hidden');
 
   const dir    = e.arrowDir ?? 'to';
@@ -69,33 +113,22 @@ export function showEdgePanel() {
 }
 
 export function toggleEdgeLock() {
-  if (!st.selectedEdgeIds.length) return;
+  const { allLocked, edgeIds } = selectedEdgeLockState();
+  if (!edgeIds.length) return;
+  const nextLocked = !allLocked;
   pushSnapshot();
-  // Locking is a one-way UI action — once locked, the only way back is the
-  // long-press on the shape itself (see unlock-hold.js).
-  st.selectedEdgeIds.forEach((id) => {
-    const e = st.edges.get(id);
-    if (!e) return;
-    const fromN = st.nodes && st.nodes.get(e.from);
-    const toN   = st.nodes && st.nodes.get(e.to);
-    const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
-    if (isFreeArrow) {
-      [e.from, e.to].forEach((nodeId) => {
-        st.nodes.update({ id: nodeId, locked: true, fixed: { x: true, y: true }, draggable: false });
-        const bn = st.network && st.network.body.nodes[nodeId];
-        if (bn) bn.refreshNeeded = true;
-      });
-    } else {
-      st.edges.update({ id, edgeLocked: true });
-    }
-  });
+  edgeIds.forEach((id) => setEdgeLocked(st.edges.get(id), nextLocked));
   if (st.network) {
-    st.network.unselectAll();
     st.network.redraw();
+    if (nextLocked) st.network.unselectAll();
+  }
+  if (nextLocked) {
+    st.selectedNodeIds = [];
+    st.selectedEdgeIds = [];
+    hideEdgePanel();
+  } else {
+    syncEdgeLockButton();
   }
-  st.selectedNodeIds = [];
-  st.selectedEdgeIds = [];
-  hideEdgePanel();
   markDirty();
 }
 

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

@@ -35,6 +35,7 @@ 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.
@@ -397,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;
@@ -417,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) {
@@ -439,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(); }
@@ -497,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();
@@ -512,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 ──────────────────────────────────────────────────────
@@ -1115,14 +1178,45 @@ function nearestPortEdgeAt(canvasPos, threshold = 8) {
   return nearest && nearestDist <= threshold ? nearest : null;
 }
 
+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;
-    const fromN = st.nodes.get(e.from);
-    const toN   = st.nodes.get(e.to);
-    const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
-    return isFreeArrow ? !(fromN.locked && toN.locked) : !e.edgeLocked;
+    return isEdgeInteractive(e);
   }).map((e) => e.id);
 }
 
@@ -1167,25 +1261,36 @@ function selectNodesFromClick(nodeId, srcEvent) {
 }
 
 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] : [];
-  }
-
-  if (effectiveNodes.length > 0) {
-    st.selectedNodeIds = effectiveNodes;
-    st.network.selectNodes(st.selectedNodeIds);
+  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') {

package/dist/src/frontend/diagram/node-panel.js

@@ -4,6 +4,7 @@
 import { st, markDirty } from './state.js';
 import { SHAPE_DEFAULTS } from './node-rendering.js';
 import { pushSnapshot }   from './history.js';
+import { t }              from './t.js';
 
 // ── Last-used style persistence (per shape type) ──────────────────────────────
 // Saves colorKey/fontSize/textAlign/textValign per shapeType to localStorage so
@@ -38,10 +39,61 @@ function forceRedraw() {
   if (st.network) st.network.redraw();
 }
 
+function isEdgeLocked(edge) {
+  if (!edge) return false;
+  const fromN = st.nodes && st.nodes.get(edge.from);
+  const toN   = st.nodes && st.nodes.get(edge.to);
+  const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+  return isFreeArrow ? !!(fromN.locked && toN.locked) : !!(edge.edgeLocked || (fromN && fromN.locked && toN && toN.locked));
+}
+
+function selectedLockState() {
+  const nodeIds = (st.selectedNodeIds || []).filter((id) => {
+    const n = st.nodes && st.nodes.get(id);
+    return n && n.shapeType !== 'anchor';
+  });
+  const edgeIds = (st.selectedEdgeIds || []).filter((id) => st.edges && st.edges.get(id));
+  const total = nodeIds.length + edgeIds.length;
+  if (!total) return { allLocked: false, nodeIds, edgeIds };
+
+  const nodesLocked = nodeIds.every((id) => {
+    const n = st.nodes.get(id);
+    return !!(n && n.locked);
+  });
+  const edgesLocked = edgeIds.every((id) => isEdgeLocked(st.edges.get(id)));
+  return { allLocked: nodesLocked && edgesLocked, nodeIds, edgeIds };
+}
+
+function syncNodeLockButton() {
+  const btn = document.getElementById('btnNodeLock');
+  if (!btn) return;
+  const { allLocked } = selectedLockState();
+  btn.textContent = allLocked ? '🔓' : '🔒';
+  btn.title = t(allLocked ? 'diagram.node_panel.unlock' : 'diagram.node_panel.lock');
+  btn.setAttribute('aria-label', btn.title);
+  btn.classList.toggle('tool-active', allLocked);
+}
+
+function setEdgeLocked(edge, locked) {
+  if (!edge) return;
+  const fromN = st.nodes && st.nodes.get(edge.from);
+  const toN   = st.nodes && st.nodes.get(edge.to);
+  const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+  if (isFreeArrow) {
+    [edge.from, edge.to].forEach((nodeId) => {
+      st.nodes.update({ id: nodeId, locked, fixed: locked ? { x: true, y: true } : false, draggable: !locked });
+      const bn = st.network && st.network.body.nodes[nodeId];
+      if (bn) bn.refreshNeeded = true;
+    });
+  } else {
+    st.edges.update({ id: edge.id, edgeLocked: locked });
+  }
+}
+
 export function showNodePanel() {
   document.getElementById('nodePanel').classList.remove('hidden');
   document.getElementById('nodePanelControls').classList.remove('hidden');
-  document.getElementById('btnNodeLock').classList.remove('tool-active');
+  syncNodeLockButton();
   // Sync the opacity slider with the first selected node's current value so the
   // slider reflects the live state rather than whatever position it was left at.
   const slider = document.getElementById('nodeBgOpacity');
@@ -57,22 +109,27 @@ export function hideNodePanel() {
 }
 
 export function toggleNodeLock() {
-  if (!st.selectedNodeIds.length) return;
+  const { allLocked, nodeIds, edgeIds } = selectedLockState();
+  if (!nodeIds.length && !edgeIds.length) return;
+  const nextLocked = !allLocked;
   pushSnapshot();
-  // Locking is a one-way UI action — once locked, the only way back is the
-  // long-press on the shape itself (see unlock-hold.js).
-  st.selectedNodeIds.forEach((id) => {
-    st.nodes.update({ id, locked: true, fixed: { x: true, y: true }, draggable: false });
+  nodeIds.forEach((id) => {
+    st.nodes.update({ id, locked: nextLocked, fixed: nextLocked ? { x: true, y: true } : false, draggable: !nextLocked });
     const bn = st.network && st.network.body.nodes[id];
     if (bn) bn.refreshNeeded = true;
   });
+  edgeIds.forEach((id) => setEdgeLocked(st.edges.get(id), nextLocked));
   if (st.network) {
-    st.network.unselectAll();
     st.network.redraw();
+    if (nextLocked) st.network.unselectAll();
+  }
+  if (nextLocked) {
+    st.selectedNodeIds = [];
+    st.selectedEdgeIds = [];
+    hideNodePanel();
+  } else {
+    syncNodeLockButton();
   }
-  st.selectedNodeIds = [];
-  st.selectedEdgeIds = [];
-  hideNodePanel();
   markDirty();
 }
 

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/src/frontend/i18n/en.json

@@ -428,7 +428,8 @@
   "diagram.sidebar.empty": "No diagrams",
   "diagram.sidebar.delete_title": "Delete",
 
-  "diagram.node_panel.lock": "Lock shape",
+  "diagram.node_panel.lock": "Lock selection",
+  "diagram.node_panel.unlock": "Unlock selection",
   "diagram.node_panel.edit_label": "Edit text (double-click)",
   "diagram.node_panel.edit_link": "Add / edit link",
   "diagram.node_panel.bg_opacity": "Background opacity",
@@ -461,6 +462,7 @@
   "diagram.link_panel.remove_btn": "Remove",
 
   "diagram.edge_panel.lock": "Lock arrow",
+  "diagram.edge_panel.unlock": "Unlock arrow",
   "diagram.edge_panel.no_arrow": "Simple line",
   "diagram.edge_panel.arrow_to": "Directional arrow",
   "diagram.edge_panel.arrow_both": "Bidirectional",

package/dist/src/frontend/i18n/fr.json

@@ -428,7 +428,8 @@
   "diagram.sidebar.empty": "Aucun diagramme",
   "diagram.sidebar.delete_title": "Supprimer",
 
-  "diagram.node_panel.lock": "Verrouiller la forme",
+  "diagram.node_panel.lock": "Verrouiller la sélection",
+  "diagram.node_panel.unlock": "Déverrouiller la sélection",
   "diagram.node_panel.edit_label": "Modifier le texte (double-clic)",
   "diagram.node_panel.edit_link": "Ajouter / modifier un lien",
   "diagram.node_panel.bg_opacity": "Opacité du fond",
@@ -461,6 +462,7 @@
   "diagram.link_panel.remove_btn": "Retirer",
 
   "diagram.edge_panel.lock": "Verrouiller la flèche",
+  "diagram.edge_panel.unlock": "Déverrouiller la flèche",
   "diagram.edge_panel.no_arrow": "Trait simple",
   "diagram.edge_panel.arrow_to": "Flèche directionnelle",
   "diagram.edge_panel.arrow_both": "Bidirectionnelle",

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.36.0",
+  "version": "7.38.0",
   "description": "A CLI tool that serves a local Markdown documentation viewer",
   "main": "dist/src/server.js",
   "bin": {