living-documentation 3.6.0 → 3.8.0

package/dist/src/frontend/diagram/selection-overlay.js

@@ -1,36 +1,44 @@
-// ── Selection / resize overlay ────────────────────────────────────────────────
-// Dashed selection box + corner resize handles for selected nodes.
+// ── Selection / resize / rotate overlay ───────────────────────────────────────
+// Dashed selection box, corner resize handles, and top-centre rotation handle.
 
 import { st, markDirty } from './state.js';
-import { visNodeProps } from './node-rendering.js';
+import { visNodeProps, SHAPE_DEFAULTS } from './node-rendering.js';
 
+// ── Bounding box helper (works for all shapes including ctxRenderer) ──────────
+function nodeBounds(id) {
+  const n        = st.nodes.get(id);
+  const bodyNode = st.network.body.nodes[id];
+  if (!bodyNode) return null;
+  const cx = bodyNode.x, cy = bodyNode.y;
+  const shape    = n && n.shapeType || 'box';
+  const defaults = SHAPE_DEFAULTS[shape] || [60, 28];
+  const W = (n && n.nodeWidth)  || defaults[0];
+  const H = (n && n.nodeHeight) || defaults[1];
+  // Use the axis-aligned envelope of the (possibly rotated) bounding box.
+  const rot = (n && n.rotation) || 0;
+  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;
+  // Actor: head extends above cy - H/2 when unrotated
+  const headExtra = shape === 'actor' ? (28 * (H / 52) - H / 2) : 0;
+  return { minX: cx - hw, minY: cy - hh - headExtra, maxX: cx + hw, maxY: cy + hh };
+}
+
+// ── Overlay position ──────────────────────────────────────────────────────────
 export function updateSelectionOverlay() {
   if (!st.network || !st.selectedNodeIds.length) { hideSelectionOverlay(); return; }
 
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const id of st.selectedNodeIds) {
     try {
-      const n = st.nodes.get(id);
-      if (n && n.shapeType === 'actor') {
-        // getBoundingBox() returns wrong values for custom ctxRenderer shapes.
-        // Compute the visual bounds from the node's centre + scaled actor geometry.
-        const bodyNode = st.network.body.nodes[id];
-        if (!bodyNode) continue;
-        const cx = bodyNode.x, cy = bodyNode.y;
-        const W  = n.nodeWidth  || 30;
-        const H  = n.nodeHeight || 52;
-        const sy = H / 52;
-        minX = Math.min(minX, cx - W / 2);
-        minY = Math.min(minY, cy - 28 * sy); // head top
-        maxX = Math.max(maxX, cx + W / 2);
-        maxY = Math.max(maxY, cy + 24 * sy); // legs bottom
-      } else {
-        const bb = st.network.getBoundingBox(id);
-        minX = Math.min(minX, bb.left);
-        minY = Math.min(minY, bb.top);
-        maxX = Math.max(maxX, bb.right);
-        maxY = Math.max(maxY, bb.bottom);
-      }
+      const b = nodeBounds(id);
+      if (!b) continue;
+      minX = Math.min(minX, b.minX); minY = Math.min(minY, b.minY);
+      maxX = Math.max(maxX, b.maxX); maxY = Math.max(maxY, b.maxY);
     } catch (_) { /* node still being created */ }
   }
   if (minX === Infinity) { hideSelectionOverlay(); return; }
@@ -45,38 +53,41 @@ export function updateSelectionOverlay() {
   ov.style.width   = br.x - tl.x + PAD * 2 + 'px';
   ov.style.height  = br.y - tl.y + PAD * 2 + 'px';
 
+  // Position rotation handle: top-centre of the overlay, 28px above it.
+  const rh = document.getElementById('rh-rotate');
+  rh.style.left = (br.x - tl.x) / 2 + PAD - 8 + 'px';
+  rh.style.top  = '-28px';
+
+  // Position label rotation handle: top-centre offset left by 24px to avoid overlap.
+  const lrh = document.getElementById('rh-label-rotate');
+  lrh.style.left = (br.x - tl.x) / 2 + PAD - 8 - 24 + 'px';
+  lrh.style.top  = '-28px';
 }
 
 export function hideSelectionOverlay() {
   document.getElementById('selectionOverlay').style.display = 'none';
 }
 
+// ── Resize ────────────────────────────────────────────────────────────────────
 function onResizeStart(e, corner) {
   if (!st.selectedNodeIds.length || !st.network) return;
   e.preventDefault();
   e.stopPropagation();
 
   const startBBs = st.selectedNodeIds.map((id) => {
-    const n  = st.nodes.get(id);
-    // getBoundingBox() returns wrong values for custom ctxRenderer shapes (actor).
-    // Fall back to the actor's reference dimensions when no resize has happened yet.
-    let initW, initH;
-    if (n && n.shapeType === 'actor') {
-      initW = n.nodeWidth  || 30;
-      initH = n.nodeHeight || 52;
-    } else {
-      const bb = st.network.getBoundingBox(id);
-      initW = n.nodeWidth  || Math.round(bb.right  - bb.left);
-      initH = n.nodeHeight || Math.round(bb.bottom - bb.top);
-    }
+    const n = st.nodes.get(id);
+    const b = nodeBounds(id);
+    const shape    = (n && n.shapeType) || 'box';
+    const defaults = SHAPE_DEFAULTS[shape] || [60, 28];
+    const initW = (n && n.nodeWidth)  || (b ? Math.round(b.maxX - b.minX) : defaults[0]);
+    const initH = (n && n.nodeHeight) || (b ? Math.round(b.maxY - b.minY) : defaults[1]);
     return { id, node: n, initW, initH };
   });
 
-  const initBoxW = startBBs.reduce((max, b) => Math.max(max, b.initW), 0);
-  const initBoxH = startBBs.reduce((max, b) => Math.max(max, b.initH), 0);
+  const initBoxW = startBBs.reduce((m, b) => Math.max(m, b.initW), 0);
+  const initBoxH = startBBs.reduce((m, b) => Math.max(m, b.initH), 0);
 
   st.resizeDrag = { corner, startMouse: { x: e.clientX, y: e.clientY }, startBBs, initBoxW, initBoxH };
-
   st.selectedNodeIds.forEach((id) => st.nodes.update({ id, fixed: true }));
   document.getElementById('vis-canvas').style.pointerEvents = 'none';
   document.addEventListener('mousemove', onResizeDrag);
@@ -88,9 +99,8 @@ function onResizeDrag(e) {
   const scale = st.network.getScale();
   const cdx   = (e.clientX - st.resizeDrag.startMouse.x) / scale;
   const cdy   = (e.clientY - st.resizeDrag.startMouse.y) / scale;
-  const MIN   = 40;
+  const MIN   = 20;
   const c     = st.resizeDrag.corner;
-
   const updatedIds = [];
 
   if (st.resizeDrag.startBBs.length === 1) {
@@ -102,7 +112,7 @@ function onResizeDrag(e) {
     if (c === 'tl') { nW = initW - cdx; nH = initH - cdy; }
     nW = Math.max(MIN, Math.round(nW));
     nH = Math.max(MIN, Math.round(nH));
-    st.nodes.update({ id, nodeWidth: nW, nodeHeight: nH, ...visNodeProps(node.shapeType || 'box', node.colorKey || 'c-gray', nW, nH, node.fontSize, node.textAlign, node.textValign, nH) });
+    st.nodes.update({ id, nodeWidth: nW, nodeHeight: nH, ...visNodeProps(node.shapeType || 'box', node.colorKey || 'c-gray', nW, nH, node.fontSize, node.textAlign, node.textValign) });
     updatedIds.push(id);
   } else {
     const { initBoxW, initBoxH } = st.resizeDrag;
@@ -111,25 +121,17 @@ function onResizeDrag(e) {
     if (c === 'bl') { sx = (initBoxW - cdx) / initBoxW; sy = (initBoxH + cdy) / initBoxH; }
     if (c === 'tr') { sx = (initBoxW + cdx) / initBoxW; sy = (initBoxH - cdy) / initBoxH; }
     if (c === 'tl') { sx = (initBoxW - cdx) / initBoxW; sy = (initBoxH - cdy) / initBoxH; }
-    sx = Math.max(0.1, sx);
-    sy = Math.max(0.1, sy);
+    sx = Math.max(0.1, sx); sy = Math.max(0.1, sy);
     for (const { id, node, initW, initH } of st.resizeDrag.startBBs) {
       const nW = Math.max(MIN, Math.round(initW * sx));
       const nH = Math.max(MIN, Math.round(initH * sy));
-      st.nodes.update({ id, nodeWidth: nW, nodeHeight: nH, ...visNodeProps(node.shapeType || 'box', node.colorKey || 'c-gray', nW, nH, node.fontSize, node.textAlign, node.textValign, nH) });
+      st.nodes.update({ id, nodeWidth: nW, nodeHeight: nH, ...visNodeProps(node.shapeType || 'box', node.colorKey || 'c-gray', nW, nH, node.fontSize, node.textAlign, node.textValign) });
       updatedIds.push(id);
     }
   }
 
-  // vis-network's needsRefresh() can return false for certain shapes (e.g. database)
-  // when only widthConstraint or heightConstraint changes, because the check is based
-  // on label/font state, not constraints. Force the internal refresh flag and redraw.
-  updatedIds.forEach((id) => {
-    const bn = st.network.body.nodes[id];
-    if (bn) bn.refreshNeeded = true;
-  });
+  updatedIds.forEach((id) => { const bn = st.network.body.nodes[id]; if (bn) bn.refreshNeeded = true; });
   st.network.redraw();
-
   updateSelectionOverlay();
 }
 
@@ -143,7 +145,112 @@ function onResizeEnd() {
   markDirty();
 }
 
-// ── Wire corner handle mouse events ───────────────────────────────────────────
+// ── Rotation ──────────────────────────────────────────────────────────────────
+function onRotateStart(e) {
+  if (!st.selectedNodeIds.length || !st.network) return;
+  e.preventDefault();
+  e.stopPropagation();
+
+  // Barycentre of the selection in canvas coordinates.
+  const positions = st.network.getPositions(st.selectedNodeIds);
+  const ids = st.selectedNodeIds;
+  const cx = ids.reduce((s, id) => s + (positions[id] ? positions[id].x : 0), 0) / ids.length;
+  const cy = ids.reduce((s, id) => s + (positions[id] ? positions[id].y : 0), 0) / ids.length;
+
+  const nodeAngles = ids.map((id) => {
+    const n = st.nodes.get(id);
+    const pos = positions[id] || { x: 0, y: 0 };
+    return {
+      id,
+      initRotation: (n && n.rotation) || 0,
+      // Position relative to barycentre at drag start
+      relX: pos.x - cx,
+      relY: pos.y - cy,
+    };
+  });
+
+  // Horizontal drag → rotation: right = clockwise, left = counter-clockwise.
+  // 1 px = 1 degree.
+  st.rotateDrag = { startX: e.clientX, nodeAngles, cx, cy };
+  document.getElementById('vis-canvas').style.pointerEvents = 'none';
+  document.addEventListener('mousemove', onRotateDrag);
+  document.addEventListener('mouseup',   onRotateEnd);
+}
+
+function onRotateDrag(e) {
+  if (!st.rotateDrag || !st.network) return;
+  const { startX, nodeAngles, cx, cy } = st.rotateDrag;
+  const dx    = e.clientX - startX;
+  const delta = dx * (Math.PI / 180); // 1 px = 1 degree
+  const cos   = Math.cos(delta);
+  const sin   = Math.sin(delta);
+
+  nodeAngles.forEach(({ id, initRotation, relX, relY }) => {
+    // Rotate the node's position around the barycentre
+    const newX = cx + relX * cos - relY * sin;
+    const newY = cy + relX * sin + relY * cos;
+    st.network.moveNode(id, newX, newY);
+    // Rotate the node's own orientation
+    st.nodes.update({ id, rotation: initRotation + delta });
+    const bn = st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  st.network.redraw();
+  updateSelectionOverlay();
+}
+
+function onRotateEnd() {
+  if (!st.rotateDrag) return;
+  document.getElementById('vis-canvas').style.pointerEvents = '';
+  document.removeEventListener('mousemove', onRotateDrag);
+  document.removeEventListener('mouseup',   onRotateEnd);
+  st.rotateDrag = null;
+  markDirty();
+}
+
+// ── Label rotation ────────────────────────────────────────────────────────────
+function onLabelRotateStart(e) {
+  if (!st.selectedNodeIds.length || !st.network) return;
+  e.preventDefault();
+  e.stopPropagation();
+
+  const nodeAngles = st.selectedNodeIds.map((id) => {
+    const n = st.nodes.get(id);
+    return { id, initLabelRotation: (n && n.labelRotation) || 0 };
+  });
+
+  st.labelRotateDrag = { startX: e.clientX, nodeAngles };
+  document.getElementById('vis-canvas').style.pointerEvents = 'none';
+  document.addEventListener('mousemove', onLabelRotateDrag);
+  document.addEventListener('mouseup',   onLabelRotateEnd);
+}
+
+function onLabelRotateDrag(e) {
+  if (!st.labelRotateDrag || !st.network) return;
+  const { startX, nodeAngles } = st.labelRotateDrag;
+  const dx    = e.clientX - startX;
+  const delta = dx * (Math.PI / 180); // 1 px = 1 degree
+
+  nodeAngles.forEach(({ id, initLabelRotation }) => {
+    st.nodes.update({ id, labelRotation: initLabelRotation + delta });
+    const bn = st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  st.network.redraw();
+}
+
+function onLabelRotateEnd() {
+  if (!st.labelRotateDrag) return;
+  document.getElementById('vis-canvas').style.pointerEvents = '';
+  document.removeEventListener('mousemove', onLabelRotateDrag);
+  document.removeEventListener('mouseup',   onLabelRotateEnd);
+  st.labelRotateDrag = null;
+  markDirty();
+}
+
+// ── Wire handles ──────────────────────────────────────────────────────────────
 ['tl', 'tr', 'bl', 'br'].forEach((corner) => {
   document.getElementById('rh-' + corner).addEventListener('mousedown', (e) => onResizeStart(e, corner));
 });
+document.getElementById('rh-rotate').addEventListener('mousedown', onRotateStart);
+document.getElementById('rh-label-rotate').addEventListener('mousedown', onLabelRotateStart);

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

@@ -19,6 +19,10 @@ export const st = {
   editingNodeId: null,
   editingEdgeId: null,
   resizeDrag: null,
+  rotateDrag: null,        // { startX, nodeAngles: [{id, initRotation}] }
+  labelRotateDrag: null,   // { startX, nodeAngles: [{id, initLabelRotation}] }
+  activeStamp: null,       // 'color' | 'rotation' | 'fontSize' | null
+  stampTargetIds: [],      // node IDs waiting to receive the stamped property
   clipboard: null,        // { nodes: [], edges: [] }
   canonicalOrder: [],     // user-defined z-order, immune to vis.js hover reordering
 };

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(); });
+}

package/dist/src/frontend/diagram.html

@@ -151,7 +151,7 @@
         background: rgba(0, 0, 0, 0.78);
       }
 
-      /* Resize / selection overlay */
+      /* Resize / rotation / selection overlay */
       #selectionOverlay {
         position: absolute;
         display: none;
@@ -174,6 +174,83 @@
       .dark .resize-handle {
         background: #374151;
       }
+      #rh-rotate {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background: white;
+        border: 2px solid #f97316;
+        border-radius: 50%;
+        pointer-events: all;
+        z-index: 1;
+        cursor: grab;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        color: #f97316;
+      }
+      #rh-rotate:active { cursor: grabbing; }
+      .dark #rh-rotate { background: #374151; }
+      #rh-label-rotate {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background: white;
+        border: 2px solid #6366f1;
+        border-radius: 50%;
+        pointer-events: all;
+        z-index: 1;
+        cursor: grab;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        color: #6366f1;
+      }
+      #rh-label-rotate:active { cursor: grabbing; }
+      .dark #rh-label-rotate { background: #374151; }
+
+      /* Toast notifications */
+      #toastContainer {
+        position: fixed;
+        bottom: 1.5rem;
+        right: 1.5rem;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 0.5rem;
+        z-index: 1000;
+        pointer-events: none;
+      }
+      .ld-toast {
+        pointer-events: all;
+        padding: 0.6rem 1rem;
+        border-radius: 0.5rem;
+        font-size: 0.8rem;
+        font-weight: 500;
+        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+        cursor: pointer;
+        opacity: 0;
+        transform: translateY(0.5rem);
+        transition: opacity 0.2s ease, transform 0.2s ease;
+        background: #1c1917;
+        color: #fafaf9;
+        border: 1px solid #292524;
+      }
+      .dark .ld-toast {
+        background: #fafaf9;
+        color: #1c1917;
+        border-color: #e7e5e4;
+      }
+      .ld-toast--error {
+        background: #7f1d1d;
+        color: #fef2f2;
+        border-color: #991b1b;
+      }
+      .ld-toast--visible {
+        opacity: 1;
+        transform: translateY(0);
+      }
     </style>
   </head>
   <body
@@ -304,6 +381,35 @@
           <line x1="6" y1="10" x2="9.5" y2="15" />
         </svg>
       </button>
+      <button
+        id="toolPostIt"
+        class="tool-btn"
+        title="Post-it (P)"
+      >
+        <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.4">
+          <path d="M1 1 H9 L12 4 V12 H1 Z" />
+          <path d="M9 1 V4 H12" stroke-opacity="0.5"/>
+        </svg>
+      </button>
+      <button
+        id="toolTextFree"
+        class="tool-btn"
+        title="Texte libre (T)"
+        style="font-size:11px; font-weight:600;"
+      >
+        T
+      </button>
+      <button
+        id="toolImage"
+        class="tool-btn"
+        title="Image — double-clic sur le canvas pour choisir un fichier, ou coller (⌘V) depuis le presse-papier"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="1" y="1" width="12" height="12" rx="1.5"/>
+          <circle cx="4.5" cy="4.5" r="1.2"/>
+          <path d="M1 9.5 L4 6.5 L6.5 9 L9 7 L13 10.5"/>
+        </svg>
+      </button>
       <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
 
       <button
@@ -458,6 +564,9 @@
         <!-- Debug overlay layer -->
         <div id="debugLayer"></div>
 
+        <!-- Stamp overlay: intercepts canvas clicks during stamp mode -->
+        <div id="stampOverlay" style="position:absolute;inset:0;display:none;z-index:9;"></div>
+
         <!-- Selection / resize overlay -->
         <div id="selectionOverlay">
           <div
@@ -480,6 +589,15 @@
             class="resize-handle"
             style="bottom: -5px; right: -5px; cursor: se-resize"
           ></div>
+          <div id="rh-rotate" title="Rotation forme">↻</div>
+          <div id="rh-label-rotate" title="Rotation texte" style="left: 0; top: -28px;">
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <g transform="rotate(25,5,5)">
+                <line x1="2.5" y1="3" x2="7.5" y2="3"/>
+                <line x1="5" y1="3" x2="5" y2="8"/>
+              </g>
+            </svg>
+          </div>
         </div>
 
         <!-- Node panel -->
@@ -752,6 +870,60 @@
               <rect x="5" y="1" width="8" height="8" rx="1" />
             </svg>
           </button>
+
+          <div class="panel-sep"></div>
+
+          <!-- Stamp: copy color (goutte) -->
+          <button
+            id="btnStampColor"
+            class="tool-btn !w-7 !h-6"
+            title="Tampon couleur — sélectionner les cibles, cliquer ici, puis cliquer la source"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M7 2 C7 2 3 6.5 3 9 a4 4 0 0 0 8 0 C11 6.5 7 2 7 2 Z" fill="currentColor" fill-opacity="0.25"/>
+            </svg>
+          </button>
+
+          <!-- Stamp: copy font size -->
+          <button
+            id="btnStampFontSize"
+            class="tool-btn !w-7 !h-6 font-mono text-xs font-bold"
+            title="Tampon taille police — sélectionner les cibles, cliquer ici, puis cliquer la source"
+          >Aa</button>
+
+          <div class="panel-sep"></div>
+
+          <!-- Rotation anti-horaire 10° -->
+          <button
+            id="btnRotateCCW"
+            class="tool-btn !w-7 !h-6"
+            title="Rotation anti-horaire 10°"
+            style="font-size:15px; line-height:1;"
+          >↺</button>
+
+          <!-- Rotation horaire 10° -->
+          <button
+            id="btnRotateCW"
+            class="tool-btn !w-7 !h-6"
+            title="Rotation horaire 10°"
+            style="font-size:15px; line-height:1;"
+          >↻</button>
+
+          <div class="panel-sep"></div>
+
+          <!-- Copy as PNG -->
+          <button
+            id="btnCopyPng"
+            class="tool-btn !h-6 px-1.5 font-mono text-xs font-semibold flex items-center gap-0.5"
+            title="Copier la sélection en PNG (⌘⇧C)"
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="5" y1="7" x2="5" y2="1"/>
+              <polyline points="2,4 5,1 8,4"/>
+              <line x1="1" y1="9" x2="9" y2="9"/>
+            </svg>
+            PNG
+          </button>
         </div>
 
         <!-- Edge panel -->
@@ -873,6 +1045,7 @@
       </div>
     </div>
 
+    <div id="toastContainer"></div>
     <script type="module" src="/diagram/main.js"></script>
   </body>
 </html>

package/package.json

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