living-documentation 3.7.0 → 4.0.0

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

@@ -4,6 +4,8 @@
 
 import { st, markDirty } from './state.js';
 import { visNodeProps, SHAPE_DEFAULTS }   from './node-rendering.js';
+import { uploadImageFile } from './image-upload.js';
+import { showToast }       from './toast.js';
 import { visEdgeProps }   from './edge-rendering.js';
 import { showNodePanel, hideNodePanel } from './node-panel.js';
 import { showEdgePanel, hideEdgePanel } from './edge-panel.js';
@@ -12,6 +14,8 @@ import { updateSelectionOverlay, hideSelectionOverlay } from './selection-overla
 import { drawGrid, onDragEnd } from './grid.js';
 import { drawDebugOverlay }    from './debug.js';
 import { updateZoomDisplay }   from './zoom.js';
+import { expandSelectionToGroup, drawGroupOutlines } from './groups.js';
+import { navigateNodeLink, hideLinkPanel }           from './link-panel.js';
 
 export function initNetwork(savedNodes, savedEdges) {
   const container = document.getElementById('vis-canvas');
@@ -63,26 +67,49 @@ export function initNetwork(savedNodes, savedEdges) {
   st.canonicalOrder = [...st.network.body.nodeIndices];
   st.network.renderer._drawNodes = function (ctx, alwaysShow = false) {
     const bodyNodes = this.body.nodes;
+    const bodyEdges = this.body.edges;
     const margin    = 20;
     const topLeft     = this.canvas.DOMtoCanvas({ x: -margin, y: -margin });
     const bottomRight = this.canvas.DOMtoCanvas({ x: this.canvas.frame.canvas.clientWidth + margin, y: this.canvas.frame.canvas.clientHeight + margin });
     const viewableArea = { top: topLeft.y, left: topLeft.x, bottom: bottomRight.y, right: bottomRight.x };
-    const drawExternalLabelCallbacks = [];
 
-    for (const id of st.canonicalOrder) {
+    // Build a map: canonical index → list of edges whose topmost endpoint is at that index.
+    const orderMap = new Map();
+    st.canonicalOrder.forEach((id, i) => orderMap.set(id, i));
+
+    const edgesByLevel = new Map(); // canonicalIndex → edge[]
+    for (const edgeId of Object.keys(bodyEdges)) {
+      const edge = bodyEdges[edgeId];
+      if (!edge.connected) continue;
+      const level = Math.min(orderMap.get(edge.fromId) ?? 0, orderMap.get(edge.toId) ?? 0);
+      if (!edgesByLevel.has(level)) edgesByLevel.set(level, []);
+      edgesByLevel.get(level).push(edge);
+    }
+
+    for (let i = 0; i < st.canonicalOrder.length; i++) {
+      const id   = st.canonicalOrder[i];
+      // Draw edges whose topmost node is at this level, before drawing the node.
+      const edges = edgesByLevel.get(i);
+      if (edges) edges.forEach((e) => e.draw(ctx));
+
       const node = bodyNodes[id];
       if (!node) continue;
       if (alwaysShow === true || node.isBoundingBoxOverlappingWith(viewableArea) === true) {
-        const r = node.draw(ctx);
-        // All shapes are ctxRenderer (shape:'custom') and draw their own labels.
-        // Skip drawExternalLabel entirely to avoid double-rendering.
+        node.draw(ctx);
       } else {
         node.updateBoundingBox(ctx, node.selected);
       }
     }
-    return { drawExternalLabels() { for (const draw of drawExternalLabelCallbacks) draw(); } };
+    return { drawExternalLabels() {} };
   };
 
+  // ── Z-order patch for edges ────────────────────────────────────────────────
+  // vis.js draws all edges before all nodes in separate passes.
+  // We neutralise _drawEdges (make it a no-op) and instead draw each edge
+  // inside _drawNodes, just before the node whose canonical index equals the
+  // max index of its two endpoints. This guarantees true z-order interleaving.
+  st.network.renderer._drawEdges = function () { /* no-op — edges drawn in _drawNodes */ };
+
   // Keep canonicalOrder in sync with DataSet add/remove events
   st.nodes.on('add', (_, { items }) => {
     const existing = new Set(st.canonicalOrder);
@@ -93,7 +120,9 @@ export function initNetwork(savedNodes, savedEdges) {
     st.canonicalOrder = st.canonicalOrder.filter((id) => !removed.has(id));
   });
 
+  st.network.on('click',        onClickNode);
   st.network.on('doubleClick',  onDoubleClick);
+  st.network.on('dragStart',    onDragStart);
   st.network.on('selectNode',   onSelectNode);
   st.network.on('deselectNode', onDeselectAll);
   st.network.on('selectEdge',   onSelectEdge);
@@ -102,6 +131,7 @@ export function initNetwork(savedNodes, savedEdges) {
   st.network.on('dragEnd',      onDragEnd);
   st.network.on('beforeDrawing', drawGrid);
   st.network.on('afterDrawing',  updateSelectionOverlay);
+  st.network.on('afterDrawing',  (ctx) => drawGroupOutlines(ctx));
   st.network.on('afterDrawing',  () => drawDebugOverlay());
 
   document.getElementById('emptyState').classList.add('hidden');
@@ -120,6 +150,9 @@ function onDoubleClick(params) {
     st.selectedEdgeIds = [params.edges[0]];
     showEdgePanel();
     startEdgeLabelEdit();
+  } else if (st.currentTool === 'addNode' && st.pendingShape === 'image') {
+    const canvasPos = params.pointer.canvas;
+    pickAndCreateImageNode(canvasPos.x, canvasPos.y);
   } else if (st.currentTool === 'addNode') {
     const id       = 'n' + Date.now();
     const defaults = SHAPE_DEFAULTS[st.pendingShape] || [100, 40];
@@ -142,8 +175,74 @@ function onDoubleClick(params) {
   }
 }
 
+// ── Image node creation ───────────────────────────────────────────────────────
+
+function pickAndCreateImageNode(canvasX, canvasY) {
+  const input = document.createElement('input');
+  input.type   = 'file';
+  input.accept = 'image/*';
+  input.onchange = async () => {
+    const file = input.files && input.files[0];
+    if (!file) return;
+    try {
+      const src = await uploadImageFile(file);
+      createImageNode(src, canvasX, canvasY);
+    } catch {
+      showToast('Impossible d\'importer l\'image', 'error');
+    }
+  };
+  input.click();
+}
+
+export function createImageNode(imageSrc, canvasX, canvasY) {
+  if (!st.network) return;
+  const id = 'n' + Date.now();
+  const defaults = SHAPE_DEFAULTS['image'];
+  st.nodes.add({
+    id, label: '', imageSrc,
+    shapeType: 'image', colorKey: 'c-gray',
+    nodeWidth: defaults[0], nodeHeight: defaults[1],
+    fontSize: null, rotation: 0, labelRotation: 0,
+    x: canvasX, y: canvasY,
+    ...visNodeProps('image', 'c-gray', defaults[0], defaults[1], null, null, null),
+  });
+  markDirty();
+  setTimeout(() => {
+    st.network.selectNodes([id]);
+    st.selectedNodeIds = [id];
+    showNodePanel();
+  }, 50);
+}
+
+function onClickNode(params) {
+  if (params.nodes.length === 1 && params.event.srcEvent.shiftKey) {
+    navigateNodeLink(params.nodes[0]);
+  }
+}
+
+// Expand group selection at dragStart so vis-network moves all members together.
+// dragStart fires before the move, unlike selectNode which fires after mouseup.
+function onDragStart(params) {
+  if (!params.nodes.length) return;
+  const expanded = expandSelectionToGroup(params.nodes);
+  if (expanded.length > params.nodes.length) {
+    st.network.selectNodes(expanded);
+    st.selectedNodeIds = expanded;
+  }
+}
+
+let _expandingGroup = false;
 function onSelectNode(params) {
-  st.selectedNodeIds = params.nodes;
+  if (_expandingGroup) return;
+  const expanded = expandSelectionToGroup(params.nodes);
+  if (expanded.length > params.nodes.length) {
+    _expandingGroup = true;
+    st.network.selectNodes(expanded);
+    _expandingGroup = false;
+    st.selectedNodeIds = expanded;
+  } else {
+    st.selectedNodeIds = params.nodes;
+  }
   st.selectedEdgeIds = [];
   hideEdgePanel();
   showNodePanel();
@@ -158,6 +257,7 @@ function onSelectEdge(params) {
 }
 
 function onDeselectAll() {
+  hideLinkPanel();
   st.selectedNodeIds = [];
   st.selectedEdgeIds = [];
   hideNodePanel();

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

@@ -154,6 +154,22 @@ document.getElementById('stampOverlay').addEventListener('click', (e) => {
   }
 });
 
+// ── Step rotation ─────────────────────────────────────────────────────────────
+
+export function stepRotate(degrees) {
+  if (!st.selectedNodeIds.length) return;
+  const delta = degrees * (Math.PI / 180);
+  st.selectedNodeIds.forEach((id) => {
+    const n = st.nodes.get(id);
+    if (!n) return;
+    st.nodes.update({ id, rotation: (n.rotation || 0) + delta });
+    const bn = st.network && st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  if (st.network) st.network.redraw();
+  markDirty();
+}
+
 export function changeZOrder(direction) {
   // direction: +1 = bring to front (last in canonicalOrder = drawn on top)
   //            -1 = send to back   (first in canonicalOrder = drawn below)

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

@@ -7,6 +7,31 @@
 import { NODE_COLORS } from './constants.js';
 import { st } from './state.js';
 
+// ── Link indicator ────────────────────────────────────────────────────────────
+// Small chain icon drawn at bottom-right of any node that has a nodeLink.
+function drawLinkIndicator(ctx, id, W, H) {
+  const n = st.nodes && st.nodes.get(id);
+  if (!n || !n.nodeLink) return;
+  const r = 7;
+  const bx = W / 2 - r;
+  const by = H / 2 - r;
+  ctx.save();
+  ctx.fillStyle   = n.nodeLink.type === 'url' ? '#3b82f6' : '#f97316';
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth   = 1;
+  ctx.beginPath(); ctx.arc(bx, by, r, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth   = 1.2;
+  ctx.lineCap     = 'round';
+  // Tiny link icon inside the badge
+  ctx.beginPath();
+  ctx.moveTo(bx - 1.5, by + 1.5); ctx.lineTo(bx + 1.5, by - 1.5);
+  ctx.moveTo(bx - 2.5, by - 0.5); ctx.lineTo(bx - 0.5, by - 2.5);
+  ctx.moveTo(bx + 0.5, by + 2.5); ctx.lineTo(bx + 2.5, by + 0.5);
+  ctx.stroke();
+  ctx.restore();
+}
+
 // ── Drawing helpers ───────────────────────────────────────────────────────────
 
 // Draw multi-line label centred at (0,0) in the current (possibly rotated) ctx.
@@ -91,6 +116,7 @@ export function makeBoxRenderer(colorKey) {
         roundRect(ctx, -W / 2, -H / 2, W, H, 4);
         ctx.fill(); ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -110,6 +136,7 @@ export function makeEllipseRenderer(colorKey) {
         ctx.beginPath(); ctx.ellipse(0, 0, W / 2, H / 2, 0, 0, Math.PI * 2);
         ctx.fill(); ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -130,6 +157,7 @@ export function makeCircleRenderer(colorKey) {
         ctx.beginPath(); ctx.arc(0, 0, R, 0, Math.PI * 2);
         ctx.fill(); ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, W, labelRotation);
+        drawLinkIndicator(ctx, id, W, W);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: W },
@@ -160,6 +188,7 @@ export function makeDatabaseRenderer(colorKey) {
         ctx.beginPath(); ctx.ellipse(0, bodyTop, rx, ry, 0, 0, Math.PI * 2);
         ctx.fill(); ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -201,6 +230,7 @@ export function makePostItRenderer(colorKey) {
         ctx.lineTo(W / 2,        -H / 2 + fold);
         ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -224,6 +254,7 @@ export function makeTextFreeRenderer(colorKey) {
           ctx.setLineDash([]);
         }
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -266,6 +297,103 @@ export function makeActorRenderer(colorKey) {
           lines.forEach((line, i) => ctx.fillText(line, 0, startY + i * lineH));
           ctx.restore();
         }
+        drawLinkIndicator(ctx, id, W, H);
+        ctx.restore();
+      },
+      nodeDimensions: { width: W, height: H },
+    };
+  };
+}
+
+// ── Image node ────────────────────────────────────────────────────────────────
+// Images are loaded once and cached. When still loading a placeholder is drawn;
+// once the image is ready network.redraw() is called so the frame updates.
+
+const _imgCache = new Map(); // src → HTMLImageElement | 'loading' | 'error'
+
+function getCachedImage(src, redrawFn) {
+  if (!src) return null;
+  const cached = _imgCache.get(src);
+  if (cached === 'loading' || cached === 'error') return null;
+  if (cached) return cached;
+  _imgCache.set(src, 'loading');
+  const img = new Image();
+  img.onload  = () => { _imgCache.set(src, img); redrawFn && redrawFn(); };
+  img.onerror = () => { _imgCache.set(src, 'error'); };
+  img.src = src;
+  return null;
+}
+
+export function makeImageRenderer(colorKey) {
+  return function ({ ctx, x, y, id, state: visState, label }) {
+    const { W, H, rotation, labelRotation, textAlign, textValign, fontSize, c } = nodeData(id, 160, 120, colorKey || 'c-gray');
+    const n      = st.nodes && st.nodes.get(id);
+    const src    = n && n.imageSrc;
+    const img    = getCachedImage(src, () => st.network && st.network.redraw());
+    return {
+      drawNode() {
+        ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
+        // Border (always visible, orange when selected)
+        ctx.strokeStyle = visState.selected ? '#f97316' : c.border;
+        ctx.lineWidth   = visState.selected ? 2 : 1;
+        roundRect(ctx, -W / 2, -H / 2, W, H, 4);
+        ctx.stroke();
+
+        if (img) {
+          // Clip to rounded rect then draw image
+          ctx.save();
+          roundRect(ctx, -W / 2, -H / 2, W, H, 4);
+          ctx.clip();
+          ctx.drawImage(img, -W / 2, -H / 2, W, H);
+          ctx.restore();
+        } else {
+          // Placeholder: light fill + icon
+          ctx.fillStyle = visState.selected ? c.hbg : c.bg;
+          roundRect(ctx, -W / 2, -H / 2, W, H, 4);
+          ctx.fill();
+          ctx.fillStyle = c.border;
+          ctx.font = `${Math.round(Math.min(W, H) * 0.25)}px system-ui`;
+          ctx.textAlign    = 'center';
+          ctx.textBaseline = 'middle';
+          ctx.fillText(src ? '…' : '🖼', 0, 0);
+        }
+
+        if (label) {
+          const lines  = String(label).split('\n');
+          const lineH  = fontSize * 1.3;
+          const pad    = 6;
+          const stripH = lines.length * lineH + pad * 2 - (lineH - fontSize);
+          ctx.save();
+          ctx.font = `${fontSize}px system-ui,-apple-system,sans-serif`;
+          const maxTextW = Math.max(...lines.map((l) => ctx.measureText(l).width));
+          const stripW   = maxTextW + pad * 2;
+          const M = 5; // margin from image edge
+          // Horizontal position based on textAlign
+          let stripX;
+          if (textAlign === 'left')       stripX = -W / 2 + M;
+          else if (textAlign === 'right') stripX = W / 2 - stripW - M;
+          else                            stripX = -stripW / 2;
+          // Vertical position based on textValign
+          let stripY;
+          if (textValign === 'top')         stripY = -H / 2 + M;
+          else if (textValign === 'bottom') stripY = H / 2 - stripH - M;
+          else                              stripY = -stripH / 2;
+          ctx.globalAlpha = 0.7;
+          ctx.fillStyle   = '#000';
+          roundRect(ctx, stripX, stripY, stripW, stripH, 4);
+          ctx.fill();
+          ctx.globalAlpha = 1;
+          // Draw text centered inside the box
+          if (labelRotation) ctx.rotate(labelRotation);
+          ctx.fillStyle    = '#fff';
+          ctx.textAlign    = 'center';
+          ctx.textBaseline = 'middle';
+          const textCX = stripX + stripW / 2;
+          const startY = stripY + pad + fontSize / 2;
+          lines.forEach((line, i) => ctx.fillText(line, textCX, startY + i * lineH));
+          ctx.restore();
+        }
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -294,6 +422,7 @@ const RENDERER_MAP = {
   'post-it':  makePostItRenderer,
   'text-free':makeTextFreeRenderer,
   actor:      makeActorRenderer,
+  image:      makeImageRenderer,
 };
 
 // Default dimensions per shape type (used when nodeWidth/nodeHeight are null).
@@ -305,6 +434,7 @@ export const SHAPE_DEFAULTS = {
   actor:      [30,  52],
   'post-it':  [120, 100],
   'text-free':[80,  30],
+  image:      [160, 120],
 };
 
 // Builds the full vis.js node property object.

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

@@ -52,7 +52,10 @@ export async function loadDiagramList() {
   const res   = await fetch('/api/diagrams');
   st.diagrams = await res.json();
   renderDiagramList();
-  if (st.diagrams.length > 0) openDiagram(st.diagrams[0].id);
+  if (!st.diagrams.length) return;
+  const urlId  = new URLSearchParams(window.location.search).get('id');
+  const target = urlId && st.diagrams.find((d) => d.id === urlId) ? urlId : st.diagrams[0].id;
+  openDiagram(target);
 }
 
 export async function openDiagram(id) {
@@ -116,6 +119,9 @@ export async function saveDiagram() {
       nodeWidth: n.nodeWidth || null, nodeHeight: n.nodeHeight || null,
       fontSize: n.fontSize || null, textAlign: n.textAlign || null, textValign: n.textValign || null,
       rotation: n.rotation || 0, labelRotation: n.labelRotation || 0,
+      imageSrc: n.imageSrc || null,
+      groupId: n.groupId || null,
+      nodeLink: n.nodeLink || null,
       x: positions[n.id]?.x ?? n.x, y: positions[n.id]?.y ?? n.y,
     }));
 

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

@@ -0,0 +1,21 @@
+// ── Toast notifications ───────────────────────────────────────────────────────
+// Minimal sonner-style toasts, no dependencies.
+
+export function showToast(message, type = 'success', duration = 3500) {
+  const container = document.getElementById('toastContainer');
+  const el = document.createElement('div');
+  el.className = 'ld-toast ld-toast--' + type;
+  el.textContent = message;
+  container.appendChild(el);
+
+  // Animate in on next frame
+  requestAnimationFrame(() => el.classList.add('ld-toast--visible'));
+
+  const hide = () => {
+    el.classList.remove('ld-toast--visible');
+    el.addEventListener('transitionend', () => el.remove(), { once: true });
+  };
+
+  const timer = setTimeout(hide, duration);
+  el.addEventListener('click', () => { clearTimeout(timer); hide(); });
+}