living-documentation 7.38.0 → 7.40.0

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

@@ -48,15 +48,25 @@ async function _selectionToBlob() {
   const cropW = Math.ceil(br.x - tl.x + PAD * 2);
   const cropH = Math.ceil(br.y - tl.y + PAD * 2);
 
-  // Temporarily deselect so highlights don't appear in the PNG
+  // Temporarily clear every selection state so interactive chrome (selected
+  // edge color, label resize handles, anchor handles) does not appear in PNGs.
   const savedNodeIds = [...st.selectedNodeIds];
+  const savedEdgeIds = [...(st.selectedEdgeIds || [])];
+  const savedNetworkNodeIds = st.network.getSelectedNodes();
+  const savedNetworkEdgeIds = st.network.getSelectedEdges();
   st.network.unselectAll();
   st.selectedNodeIds = [];
+  st.selectedEdgeIds = [];
+  st.exportingPng = true;
   st.network.redraw();
+  await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
 
   const visCanvas = document.querySelector('#vis-canvas canvas');
   if (!visCanvas) {
-    st.network.selectNodes(savedNodeIds);
+    st.exportingPng = false;
+    st.selectedNodeIds = savedNodeIds;
+    st.selectedEdgeIds = savedEdgeIds;
+    st.network.setSelection({ nodes: savedNetworkNodeIds, edges: savedNetworkEdgeIds });
     return null;
   }
 
@@ -73,9 +83,10 @@ async function _selectionToBlob() {
     cropX * dpr, cropY * dpr, cropW * dpr, cropH * dpr,
     0, 0, out.width, out.height
   );
+  st.exportingPng = false;
 
   const blob = await new Promise((res) => out.toBlob(res, 'image/png'));
-  return { blob, savedNodeIds };
+  return { blob, savedNodeIds, savedEdgeIds, savedNetworkNodeIds, savedNetworkEdgeIds };
 }
 
 // ── Copy selection as PNG (to clipboard) ─────────────────────────────────────
@@ -83,14 +94,16 @@ async function _selectionToBlob() {
 export async function copySelectionAsPng() {
   const result = await _selectionToBlob();
   if (!result) return;
-  const { blob, savedNodeIds } = result;
+  const { blob, savedNodeIds, savedEdgeIds, savedNetworkNodeIds, savedNetworkEdgeIds } = result;
   try {
     await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
     showToast(t('diagram.toast.png_copied'));
   } catch {
     showToast(t('diagram.toast.png_copy_error'), 'error');
   } finally {
-    st.network.selectNodes(savedNodeIds);
+    st.selectedNodeIds = savedNodeIds;
+    st.selectedEdgeIds = savedEdgeIds;
+    st.network.setSelection({ nodes: savedNetworkNodeIds, edges: savedNetworkEdgeIds });
   }
 }
 
@@ -99,7 +112,7 @@ export async function copySelectionAsPng() {
 export async function saveSelectionAsPng(filename) {
   const result = await _selectionToBlob();
   if (!result) return;
-  const { blob, savedNodeIds } = result;
+  const { blob, savedNodeIds, savedEdgeIds, savedNetworkNodeIds, savedNetworkEdgeIds } = result;
   try {
     const name = filename.replace(/\.[^.]+$/, ''); // strip extension
     await uploadImageBlob(blob, 'png', name);
@@ -107,7 +120,9 @@ export async function saveSelectionAsPng(filename) {
   } catch {
     showToast(t('diagram.toast.diagram_save_png_error'), 'error');
   } finally {
-    st.network.selectNodes(savedNodeIds);
+    st.selectedNodeIds = savedNodeIds;
+    st.selectedEdgeIds = savedEdgeIds;
+    st.network.setSelection({ nodes: savedNetworkNodeIds, edges: savedNetworkEdgeIds });
   }
 }
 

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

@@ -74,6 +74,22 @@ function syncNodeLockButton() {
   btn.classList.toggle('tool-active', allLocked);
 }
 
+function syncNodeFontSizeValue() {
+  const el = document.getElementById('nodeFontSizeValue');
+  if (!el) return;
+  const sizes = (st.selectedNodeIds || []).map((id) => {
+    const n = st.nodes && st.nodes.get(id);
+    return n && n.shapeType !== 'anchor' ? (n.fontSize || 13) : null;
+  }).filter((size) => size !== null);
+
+  if (!sizes.length) {
+    el.textContent = '–';
+    return;
+  }
+  const first = sizes[0];
+  el.textContent = sizes.every((size) => size === first) ? String(first) : '–';
+}
+
 function setEdgeLocked(edge, locked) {
   if (!edge) return;
   const fromN = st.nodes && st.nodes.get(edge.from);
@@ -94,6 +110,7 @@ export function showNodePanel() {
   document.getElementById('nodePanel').classList.remove('hidden');
   document.getElementById('nodePanelControls').classList.remove('hidden');
   syncNodeLockButton();
+  syncNodeFontSizeValue();
   // 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');
@@ -171,6 +188,7 @@ export function changeNodeFontSize(delta) {
     st.nodes.update({ id, fontSize: newSize });
   });
   persistNodeStyle();
+  syncNodeFontSizeValue();
   forceRedraw();
   markDirty();
 }

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

@@ -679,6 +679,7 @@ function makeAnchorRenderer() {
     const r = 4;
     return {
       drawNode() {
+        if (st.exportingPng) return;
         if (!selected && !hover) return; // invisible at rest
         ctx.save();
         ctx.translate(x, y);

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

@@ -123,6 +123,7 @@ export function getNearestPort(nodeId, canvasPos) {
  * `highlightedPort` (if any) is rendered larger and fully orange.
  */
 export function drawPortDots(ctx, nodeId, highlightedPort) {
+  if (st.exportingPng) return;
   for (const key of PORT_KEYS) {
     const p = getPortPosition(nodeId, key);
     if (!p) continue;
@@ -383,4 +384,3 @@ function _distToSegment(p, a, b) {
   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));
 }
-

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

@@ -31,6 +31,7 @@ export const st = {
   edgeLabelCanvasPos: {}, // edgeId → {x, y} canvas coords of last drawn label, used by label editor
   edgeLabelBBox: {},     // edgeId → {cx, cy, w, h, rotation} canvas world coords, used by label resize
   freeArrowFirstPoint: null, // addEdge two-click flow: {x, y} canvas coords of first click, or null
+  exportingPng: false, // suppress interactive-only canvas chrome during PNG export
 };
 
 export function markDirty() {

package/dist/src/frontend/diagram.html

@@ -681,6 +681,11 @@
           >
             Aa−
           </button>
+          <span
+            id="nodeFontSizeValue"
+            class="inline-flex items-center justify-center min-w-[2.25rem] h-6 px-1 text-[11px] font-mono text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded bg-white/80 dark:bg-gray-800/80"
+            data-i18n-title="diagram.node_panel.font_size_value"
+          >13</span>
           <button
             id="btnNodeFontIncrease"
             class="tool-btn !w-8 !h-6"

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

@@ -434,6 +434,7 @@
   "diagram.node_panel.edit_link": "Add / edit link",
   "diagram.node_panel.bg_opacity": "Background opacity",
   "diagram.node_panel.font_decrease": "Decrease font size",
+  "diagram.node_panel.font_size_value": "Current font size",
   "diagram.node_panel.font_increase": "Increase font size",
   "diagram.node_panel.align_left": "Align left",
   "diagram.node_panel.align_center": "Align center",

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

@@ -434,6 +434,7 @@
   "diagram.node_panel.edit_link": "Ajouter / modifier un lien",
   "diagram.node_panel.bg_opacity": "Opacité du fond",
   "diagram.node_panel.font_decrease": "Réduire la police",
+  "diagram.node_panel.font_size_value": "Taille de police actuelle",
   "diagram.node_panel.font_increase": "Agrandir la police",
   "diagram.node_panel.align_left": "Aligner à gauche",
   "diagram.node_panel.align_center": "Centrer horizontalement",

package/package.json

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