living-documentation 3.7.0 → 4.0.0

package/README.md

@@ -22,6 +22,8 @@ No cloud, no database, no build step — just point it at a folder of `.md` file
 - **Admin panel** — configure title, theme, filename pattern, and extra files in the browser
 - **Inline editing** — edit any document directly in the browser, saves to disk instantly
 - **Image paste** — paste an image from clipboard in the editor; auto-uploaded and inserted as Markdown
+- **Word Cloud** — visualise the dominant vocabulary of any folder on disk; supports `.md`, `.ts`, `.java`, `.kt`, `.py`, `.go`, `.rs`, `.cs`, `.swift`, `.rb`, `.html`, `.css`, `.yml`, `.json` and more; stop words filtered per language
+- **Diagram editor** — built-in canvas diagram editor (vis-network); deep-link to any diagram with `?id=`
 - **Zero frontend build** — Tailwind and highlight.js loaded from CDN
 
 ---

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

@@ -1,9 +1,88 @@
 // ── Clipboard (copy / paste) ───────────────────────────────────────────────────
 
 import { st, markDirty } from './state.js';
-import { visNodeProps }  from './node-rendering.js';
+import { visNodeProps, SHAPE_DEFAULTS }  from './node-rendering.js';
 import { visEdgeProps }  from './edge-rendering.js';
 import { showNodePanel } from './node-panel.js';
+import { showToast }     from './toast.js';
+
+// ── Copy selection as PNG ─────────────────────────────────────────────────────
+
+export async function copySelectionAsPng() {
+  if (!st.network || !st.selectedNodeIds.length) return;
+
+  const PAD = 20;
+  const dpr = window.devicePixelRatio || 1;
+
+  // Compute bounding box in canvas coordinates
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const id of st.selectedNodeIds) {
+    const n  = st.nodes.get(id);
+    const bn = st.network.body.nodes[id];
+    if (!bn) continue;
+    const defaults = SHAPE_DEFAULTS[(n && n.shapeType) || 'box'] || [100, 40];
+    const w   = (n && n.nodeWidth)  || defaults[0];
+    const h   = (n && n.nodeHeight) || defaults[1];
+    const rot = (n && n.rotation)   || 0;
+    let hw, hh;
+    if (rot === 0) {
+      hw = w / 2; hh = h / 2;
+    } else {
+      const cos = Math.abs(Math.cos(rot)); const sin = Math.abs(Math.sin(rot));
+      hw = (w * cos + h * sin) / 2;
+      hh = (w * sin + h * cos) / 2;
+    }
+    minX = Math.min(minX, bn.x - hw); maxX = Math.max(maxX, bn.x + hw);
+    minY = Math.min(minY, bn.y - hh); maxY = Math.max(maxY, bn.y + hh);
+  }
+
+  // Convert canvas coords to DOM pixels
+  const tl = st.network.canvasToDOM({ x: minX, y: minY });
+  const br = st.network.canvasToDOM({ x: maxX, y: maxY });
+
+  const cropX = Math.max(0, Math.floor(tl.x - PAD));
+  const cropY = Math.max(0, Math.floor(tl.y - PAD));
+  const cropW = Math.ceil(br.x - tl.x + PAD * 2);
+  const cropH = Math.ceil(br.y - tl.y + PAD * 2);
+
+  // Temporarily deselect everything so orange highlights don't appear in the PNG
+  const savedNodeIds = [...st.selectedNodeIds];
+  st.network.unselectAll();
+  st.network.redraw();
+
+  // Grab vis-network's canvas element
+  const visCanvas = document.querySelector('#vis-canvas canvas');
+  if (!visCanvas) {
+    st.network.selectNodes(savedNodeIds);
+    return;
+  }
+
+  // Crop into an offscreen canvas
+  const out = document.createElement('canvas');
+  out.width  = cropW * dpr;
+  out.height = cropH * dpr;
+  const octx = out.getContext('2d');
+
+  // Fill background matching current theme
+  const isDark = document.documentElement.classList.contains('dark');
+  octx.fillStyle = isDark ? '#030712' : '#f9fafb';
+  octx.fillRect(0, 0, out.width, out.height);
+
+  octx.drawImage(visCanvas,
+    cropX * dpr, cropY * dpr, cropW * dpr, cropH * dpr,
+    0, 0, out.width, out.height
+  );
+
+  try {
+    const blob = await new Promise((res) => out.toBlob(res, 'image/png'));
+    await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
+    showToast('PNG copié dans le presse-papier');
+  } catch {
+    showToast('Impossible de copier l\'image', 'error');
+  } finally {
+    st.network.selectNodes(savedNodeIds);
+  }
+}
 
 export function copySelected() {
   if (!st.network || !st.selectedNodeIds.length) return;

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

@@ -12,6 +12,7 @@ export const TOOL_BTN_MAP = {
   'addNode:actor':     'toolActor',
   'addNode:post-it':   'toolPostIt',
   'addNode:text-free': 'toolTextFree',
+  'addNode:image':     'toolImage',
   addEdge: 'toolArrow',
 };
 

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

@@ -0,0 +1,99 @@
+// ── Group management ──────────────────────────────────────────────────────────
+
+import { st, markDirty } from './state.js';
+import { SHAPE_DEFAULTS } from './node-rendering.js';
+
+// ── Create / destroy ──────────────────────────────────────────────────────────
+
+export function groupNodes() {
+  if (st.selectedNodeIds.length < 2) return;
+  const groupId = 'g' + Date.now();
+  st.selectedNodeIds.forEach((id) => st.nodes.update({ id, groupId }));
+  markDirty();
+}
+
+export function ungroupNodes() {
+  if (!st.selectedNodeIds.length) return;
+  // Collect all members of any group touched by the selection
+  const groupIds = new Set(
+    st.selectedNodeIds.map((id) => { const n = st.nodes.get(id); return n && n.groupId; }).filter(Boolean)
+  );
+  st.nodes.get().forEach((n) => {
+    if (n.groupId && groupIds.has(n.groupId)) st.nodes.update({ id: n.id, groupId: null });
+  });
+  markDirty();
+}
+
+// ── Selection expansion ───────────────────────────────────────────────────────
+// Called from onSelectNode — expands selection to all group members.
+
+export function expandSelectionToGroup(nodeIds) {
+  const groupIds = new Set();
+  nodeIds.forEach((id) => {
+    const n = st.nodes.get(id);
+    if (n && n.groupId) groupIds.add(n.groupId);
+  });
+  if (!groupIds.size) return nodeIds;
+
+  const expanded = new Set(nodeIds);
+  st.nodes.get().forEach((n) => {
+    if (n.groupId && groupIds.has(n.groupId)) expanded.add(n.id);
+  });
+  return [...expanded];
+}
+
+// ── Group outline (drawn on canvas in afterDrawing) ───────────────────────────
+
+function nodeBounds(id) {
+  const n        = st.nodes.get(id);
+  const bodyNode = st.network.body.nodes[id];
+  if (!bodyNode) return null;
+  const shape    = (n && n.shapeType) || 'box';
+  const defaults = SHAPE_DEFAULTS[shape] || [100, 40];
+  const W   = (n && n.nodeWidth)  || defaults[0];
+  const H   = (n && n.nodeHeight) || defaults[1];
+  const rot = (n && n.rotation)   || 0;
+  const cx = bodyNode.x, cy = bodyNode.y;
+  if (rot === 0) {
+    return { minX: cx - W / 2, minY: cy - H / 2, maxX: cx + W / 2, maxY: cy + H / 2 };
+  }
+  const cos = Math.abs(Math.cos(rot)); const sin = Math.abs(Math.sin(rot));
+  const hw = (W * cos + H * sin) / 2;
+  const hh = (W * sin + H * cos) / 2;
+  return { minX: cx - hw, minY: cy - hh, maxX: cx + hw, maxY: cy + hh };
+}
+
+export function drawGroupOutlines(ctx) {
+  if (!st.network || !st.selectedNodeIds.length) return;
+
+  // Find groupIds that have at least one selected member
+  const selectedSet = new Set(st.selectedNodeIds);
+  const activeGroups = new Set();
+  st.selectedNodeIds.forEach((id) => {
+    const n = st.nodes.get(id);
+    if (n && n.groupId) activeGroups.add(n.groupId);
+  });
+  if (!activeGroups.size) return;
+
+  // For each active group, compute bounding box over ALL members
+  activeGroups.forEach((groupId) => {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    st.nodes.get().forEach((n) => {
+      if (n.groupId !== groupId) return;
+      const b = nodeBounds(n.id);
+      if (!b) return;
+      minX = Math.min(minX, b.minX); minY = Math.min(minY, b.minY);
+      maxX = Math.max(maxX, b.maxX); maxY = Math.max(maxY, b.maxY);
+    });
+    if (minX === Infinity) return;
+
+    const PAD = 14;
+    ctx.save();
+    ctx.strokeStyle = '#6366f1';
+    ctx.lineWidth   = 1.5;
+    ctx.setLineDash([6, 4]);
+    ctx.strokeRect(minX - PAD, minY - PAD, maxX - minX + PAD * 2, maxY - minY + PAD * 2);
+    ctx.setLineDash([]);
+    ctx.restore();
+  });
+}

package/dist/src/frontend/diagram/image-upload.js

@@ -0,0 +1,34 @@
+// ── Image upload helper ───────────────────────────────────────────────────────
+// Converts a File or Blob to base64 and uploads it via POST /api/images/upload.
+// Returns the absolute URL path usable in an <img> or ctx.drawImage(), e.g. "/images/foo.png".
+
+async function toBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload  = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+export async function uploadImageFile(file) {
+  const ext    = (file.name.split('.').pop() || 'png').toLowerCase();
+  const base64 = await toBase64(file);
+  return _upload(base64, ext);
+}
+
+export async function uploadImageBlob(blob, ext = 'png') {
+  const base64 = await toBase64(blob);
+  return _upload(base64, ext);
+}
+
+async function _upload(base64, ext) {
+  const res  = await fetch('/api/images/upload', {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body:    JSON.stringify({ data: base64, ext }),
+  });
+  if (!res.ok) throw new Error('Upload failed');
+  const { filename } = await res.json();
+  return `/images/${filename}`;
+}

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

@@ -0,0 +1,138 @@
+// ── Node link panel ───────────────────────────────────────────────────────────
+// Lets the user attach a URL or diagram link to a node.
+
+import { st, markDirty } from './state.js';
+import { openDiagram }   from './persistence.js';
+import { showToast }     from './toast.js';
+
+let _panelNodeId = null;
+
+export function showLinkPanel(nodeId) {
+  _panelNodeId = nodeId;
+  const n    = st.nodes.get(nodeId);
+  const link = (n && n.nodeLink) || null;
+
+  const panel = document.getElementById('linkPanel');
+  panel.classList.remove('hidden');
+
+  // Populate form from existing link
+  const typeUrl      = document.getElementById('linkTypeUrl');
+  const typeDiagram  = document.getElementById('linkTypeDiagram');
+  const typeNew      = document.getElementById('linkTypeNew');
+  const urlInput     = document.getElementById('linkUrlInput');
+  const diagSelect   = document.getElementById('linkDiagramSelect');
+  const newNameInput = document.getElementById('linkNewName');
+
+  // Populate diagram list
+  diagSelect.innerHTML = '';
+  st.diagrams.forEach((d) => {
+    if (d.id === st.currentDiagramId) return; // skip current
+    const opt = document.createElement('option');
+    opt.value       = d.id;
+    opt.textContent = d.title;
+    diagSelect.appendChild(opt);
+  });
+
+  if (link && link.type === 'url') {
+    typeUrl.checked    = true;
+    urlInput.value     = link.value;
+    newNameInput.value = '';
+  } else if (link && link.type === 'diagram') {
+    typeDiagram.checked = true;
+    diagSelect.value    = link.value;
+    urlInput.value      = '';
+    newNameInput.value  = '';
+  } else {
+    typeUrl.checked = true;
+    urlInput.value  = '';
+    newNameInput.value = '';
+  }
+
+  _syncLinkPanelVisibility();
+}
+
+export function hideLinkPanel() {
+  document.getElementById('linkPanel').classList.add('hidden');
+  _panelNodeId = null;
+}
+
+function _syncLinkPanelVisibility() {
+  const typeUrl     = document.getElementById('linkTypeUrl').checked;
+  const typeDiagram = document.getElementById('linkTypeDiagram').checked;
+  const typeNew     = document.getElementById('linkTypeNew').checked;
+  document.getElementById('linkUrlRow').classList.toggle('hidden', !typeUrl);
+  document.getElementById('linkDiagramRow').classList.toggle('hidden', !typeDiagram);
+  document.getElementById('linkNewRow').classList.toggle('hidden', !typeNew);
+}
+
+export function saveLinkPanel() {
+  if (_panelNodeId === null) return;
+  const typeUrl     = document.getElementById('linkTypeUrl').checked;
+  const typeDiagram = document.getElementById('linkTypeDiagram').checked;
+  const typeNew     = document.getElementById('linkTypeNew').checked;
+
+  if (typeUrl) {
+    const value = document.getElementById('linkUrlInput').value.trim();
+    st.nodes.update({ id: _panelNodeId, nodeLink: value ? { type: 'url', value } : null });
+    markDirty();
+    hideLinkPanel();
+  } else if (typeDiagram) {
+    const value = document.getElementById('linkDiagramSelect').value;
+    if (!value) return;
+    st.nodes.update({ id: _panelNodeId, nodeLink: { type: 'diagram', value } });
+    markDirty();
+    hideLinkPanel();
+  } else if (typeNew) {
+    const name = document.getElementById('linkNewName').value.trim();
+    if (!name) return;
+    _createAndLinkDiagram(name);
+  }
+}
+
+async function _createAndLinkDiagram(title) {
+  const id = 'd' + Date.now();
+  await fetch(`/api/diagrams/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title, nodes: [], edges: [] }),
+  });
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+  st.nodes.update({ id: _panelNodeId, nodeLink: { type: 'diagram', value: id } });
+  markDirty();
+  hideLinkPanel();
+  showToast(`Diagramme "${title}" créé et lié`);
+}
+
+export function removeLinkPanel() {
+  if (_panelNodeId === null) return;
+  st.nodes.update({ id: _panelNodeId, nodeLink: null });
+  markDirty();
+  hideLinkPanel();
+}
+
+// ── Navigation ────────────────────────────────────────────────────────────────
+// Called on click (not drag). Returns true if navigation happened.
+
+export function navigateNodeLink(nodeId) {
+  const n    = st.nodes.get(nodeId);
+  const link = n && n.nodeLink;
+  if (!link) return false;
+  if (link.type === 'url') {
+    window.open(link.value, '_blank', 'noopener');
+    return true;
+  }
+  if (link.type === 'diagram') {
+    openDiagram(link.value);
+    return true;
+  }
+  return false;
+}
+
+// ── Wire radio buttons ────────────────────────────────────────────────────────
+['linkTypeUrl', 'linkTypeDiagram', 'linkTypeNew'].forEach((id) => {
+  document.getElementById(id).addEventListener('change', _syncLinkPanelVisibility);
+});
+document.getElementById('btnLinkSave').addEventListener('click',   saveLinkPanel);
+document.getElementById('btnLinkRemove').addEventListener('click', removeLinkPanel);
+document.getElementById('btnLinkCancel').addEventListener('click', hideLinkPanel);

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

@@ -3,7 +3,9 @@
 
 import { st, markDirty }      from './state.js';
 import { TOOL_BTN_MAP }       from './constants.js';
-import { showNodePanel, hideNodePanel, setNodeColor, changeNodeFontSize, setTextAlign, setTextValign, changeZOrder, activateStamp, cancelStamp } from './node-panel.js';
+import { showNodePanel, hideNodePanel, setNodeColor, changeNodeFontSize, setTextAlign, setTextValign, changeZOrder, activateStamp, cancelStamp, stepRotate } from './node-panel.js';
+import { groupNodes, ungroupNodes } from './groups.js';
+import { showLinkPanel, hideLinkPanel } from './link-panel.js';
 import { hideEdgePanel, setEdgeArrow, setEdgeDashes, changeEdgeFontSize } from './edge-panel.js';
 import { startLabelEdit, startEdgeLabelEdit, hideLabelInput } from './label-editor.js';
 import { hideSelectionOverlay } from './selection-overlay.js';
@@ -11,7 +13,10 @@ import { togglePhysics, toggleGrid } from './grid.js';
 import { toggleDebug }   from './debug.js';
 import { adjustZoom, resetZoom } from './zoom.js';
 import { loadDiagramList, newDiagram, saveDiagram } from './persistence.js';
-import { copySelected, pasteClipboard } from './clipboard.js';
+import { copySelected, pasteClipboard, copySelectionAsPng } from './clipboard.js';
+import { createImageNode } from './network.js';
+import { uploadImageBlob } from './image-upload.js';
+import { showToast }       from './toast.js';
 
 // ── Tool management ───────────────────────────────────────────────────────────
 
@@ -32,6 +37,14 @@ function setTool(tool, shape) {
   else if (st.network) st.network.disableEditMode();
 }
 
+function selectAll() {
+  if (!st.network || !st.nodes) return;
+  const ids = st.nodes.getIds();
+  st.network.selectNodes(ids);
+  st.selectedNodeIds = ids;
+  showNodePanel();
+}
+
 function deleteSelected() {
   if (!st.network) return;
   st.network.deleteSelected();
@@ -71,6 +84,7 @@ document.getElementById('toolCircle').addEventListener('click',   () => setTool(
 document.getElementById('toolActor').addEventListener('click',    () => setTool('addNode', 'actor'));
 document.getElementById('toolPostIt').addEventListener('click',   () => setTool('addNode', 'post-it'));
 document.getElementById('toolTextFree').addEventListener('click', () => setTool('addNode', 'text-free'));
+document.getElementById('toolImage').addEventListener('click',    () => setTool('addNode', 'image'));
 document.getElementById('toolArrow').addEventListener('click',    () => setTool('addEdge'));
 
 document.getElementById('btnDelete').addEventListener('click', deleteSelected);
@@ -96,6 +110,9 @@ document.getElementById('nodePanel').addEventListener('click', (e) => {
   if (colorBtn) setNodeColor(colorBtn.dataset.color);
 });
 document.getElementById('btnNodeLabelEdit').addEventListener('click', startLabelEdit);
+document.getElementById('btnNodeLink').addEventListener('click', () => {
+  if (st.selectedNodeIds.length === 1) showLinkPanel(st.selectedNodeIds[0]);
+});
 document.getElementById('btnNodeFontDecrease').addEventListener('click', () => changeNodeFontSize(-1));
 document.getElementById('btnNodeFontIncrease').addEventListener('click', () => changeNodeFontSize(1));
 document.getElementById('btnAlignLeft').addEventListener('click',   () => setTextAlign('left'));
@@ -106,17 +123,21 @@ document.getElementById('btnValignMiddle').addEventListener('click', () => setTe
 document.getElementById('btnValignBottom').addEventListener('click', () => setTextValign('bottom'));
 document.getElementById('btnZOrderBack').addEventListener('click',  () => changeZOrder(-1));
 document.getElementById('btnZOrderFront').addEventListener('click', () => changeZOrder(1));
+document.getElementById('btnRotateCW').addEventListener('click',    () => stepRotate(10));
+document.getElementById('btnRotateCCW').addEventListener('click',   () => stepRotate(-10));
 // Stamp buttons: capture targets on mousedown (before vis-network can fire
 // deselectNode), then activate the stamp mode on click.
-['btnStampColor', 'btnStampRotation', 'btnStampFontSize'].forEach((id) => {
+['btnStampColor', 'btnStampFontSize'].forEach((id) => {
   document.getElementById(id).addEventListener('mousedown', (e) => {
     e.preventDefault(); // prevent canvas focus loss
     st.stampTargetIds = [...st.selectedNodeIds]; // save before any deselect fires
   });
 });
 document.getElementById('btnStampColor').addEventListener('click',    () => activateStamp('color'));
-document.getElementById('btnStampRotation').addEventListener('click', () => activateStamp('rotation'));
 document.getElementById('btnStampFontSize').addEventListener('click', () => activateStamp('fontSize'));
+document.getElementById('btnCopyPng').addEventListener('click', () => copySelectionAsPng());
+document.getElementById('btnGroup').addEventListener('click',   () => groupNodes());
+document.getElementById('btnUngroup').addEventListener('click', () => ungroupNodes());
 
 // ── Edge panel wiring ─────────────────────────────────────────────────────────
 
@@ -134,10 +155,12 @@ document.getElementById('btnEdgeLabelEdit').addEventListener('click', startEdgeL
 document.addEventListener('keydown', (e) => {
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
   if (e.key === 'Delete' || e.key === 'Backspace')            { deleteSelected();           return; }
-  if ((e.metaKey || e.ctrlKey) && e.key === 'c')             { e.preventDefault(); copySelected();    return; }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'a')             { e.preventDefault(); selectAll();       return; }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'c' && e.shiftKey) { e.preventDefault(); copySelectionAsPng(); return; }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'c')               { e.preventDefault(); copySelected();       return; }
   if ((e.metaKey || e.ctrlKey) && e.key === 'v')             { e.preventDefault(); pasteClipboard();  return; }
   if ((e.metaKey || e.ctrlKey) && e.key === 's')             { e.preventDefault(); saveDiagram();     return; }
-  if (e.key === 'Escape' || e.key === 's' || e.key === 'S')  { cancelStamp(); setTool('select'); return; }
+  if (e.key === 'Escape' || e.key === 's' || e.key === 'S')  { cancelStamp(); hideLinkPanel(); setTool('select'); return; }
   if (e.key === 'r' || e.key === 'R')  { setTool('addNode', 'box');      return; }
   if (e.key === 'e' || e.key === 'E')  { setTool('addNode', 'ellipse');  return; }
   if (e.key === 'd' || e.key === 'D')  { setTool('addNode', 'database'); return; }
@@ -149,6 +172,28 @@ document.addEventListener('keydown', (e) => {
   if (e.key === 'g' || e.key === 'G')  { toggleGrid();                   return; }
 });
 
+// ── Paste image from clipboard ────────────────────────────────────────────────
+document.addEventListener('paste', async (e) => {
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+  if (!st.network) return;
+  const items = Array.from(e.clipboardData.items || []);
+  const imageItem = items.find((it) => it.type.startsWith('image/'));
+  if (!imageItem) return;
+  e.preventDefault();
+  const blob = imageItem.getAsFile();
+  if (!blob) return;
+  const ext = imageItem.type.split('/')[1] || 'png';
+  try {
+    const src = await uploadImageBlob(blob, ext);
+    // Place at centre of current viewport
+    const center = st.network.getViewPosition();
+    createImageNode(src, center.x, center.y);
+    showToast('Image ajoutée');
+  } catch {
+    showToast('Impossible d\'importer l\'image', 'error');
+  }
+});
+
 // ── Dark mode initialisation ──────────────────────────────────────────────────
 
 document.getElementById('darkIcon').textContent =