living-documentation 7.39.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-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/package.json

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