living-documentation 3.6.0 → 3.8.0

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

@@ -1,9 +1,78 @@
 // ── 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);
+
+  // Grab vis-network's canvas element
+  const visCanvas = document.querySelector('#vis-canvas canvas');
+  if (!visCanvas) 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');
+  }
+}
 
 export function copySelected() {
   if (!st.network || !st.selectedNodeIds.length) return;

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

@@ -5,11 +5,14 @@ export const GRID_SIZE = 40;
 
 export const TOOL_BTN_MAP = {
   select: 'toolSelect',
-  'addNode:box': 'toolBox',
-  'addNode:ellipse': 'toolEllipse',
-  'addNode:database': 'toolDatabase',
-  'addNode:circle': 'toolCircle',
-  'addNode:actor': 'toolActor',
+  'addNode:box':       'toolBox',
+  'addNode:ellipse':   'toolEllipse',
+  'addNode:database':  'toolDatabase',
+  'addNode:circle':    'toolCircle',
+  'addNode:actor':     'toolActor',
+  'addNode:post-it':   'toolPostIt',
+  'addNode:text-free': 'toolTextFree',
+  'addNode:image':     'toolImage',
   addEdge: 'toolArrow',
 };
 

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

@@ -4,12 +4,29 @@
 import { st, markDirty } from './state.js';
 import { GRID_SIZE } from './constants.js';
 
+
 export function togglePhysics() {
   st.physicsEnabled = !st.physicsEnabled;
-  if (st.network) st.network.setOptions({ physics: { enabled: st.physicsEnabled } });
   const btn = document.getElementById('btnPhysics');
   btn.classList.toggle('tool-active', st.physicsEnabled);
-  btn.title = st.physicsEnabled ? 'Auto-espacement actif' : 'Auto-espacement inactif';
+  btn.title = st.physicsEnabled ? 'Anti-chevauchement actif' : 'Anti-chevauchement (espace les nœuds qui se superposent)';
+
+  if (!st.network) return;
+
+  st.network.setOptions({
+    physics: {
+      enabled: st.physicsEnabled,
+      stabilization: { enabled: false }, // no auto-stop — stays on until user toggles off
+      barnesHut: {
+        gravitationalConstant: -800, // mild repulsion — only pushes overlapping nodes
+        centralGravity: 0,           // no pull toward centre — distant nodes stay put
+        springLength: 100,
+        springConstant: 0.01,
+        damping: 0.6,                // high damping — nodes settle fast, no oscillation
+        avoidOverlap: 1,             // vis-network built-in overlap avoidance
+      },
+    },
+  });
 }
 
 export function toggleGrid() {

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/main.js

@@ -3,7 +3,7 @@
 
 import { st, markDirty }      from './state.js';
 import { TOOL_BTN_MAP }       from './constants.js';
-import { showNodePanel, hideNodePanel, setNodeColor, changeNodeFontSize, setTextAlign, setTextValign, changeZOrder } from './node-panel.js';
+import { showNodePanel, hideNodePanel, setNodeColor, changeNodeFontSize, setTextAlign, setTextValign, changeZOrder, activateStamp, cancelStamp, stepRotate } from './node-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 +11,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 +35,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();
@@ -69,6 +80,9 @@ document.getElementById('toolEllipse').addEventListener('click',  () => setTool(
 document.getElementById('toolDatabase').addEventListener('click', () => setTool('addNode', 'database'));
 document.getElementById('toolCircle').addEventListener('click',   () => setTool('addNode', 'circle'));
 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);
@@ -104,6 +118,19 @@ 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', '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('btnStampFontSize').addEventListener('click', () => activateStamp('fontSize'));
+document.getElementById('btnCopyPng').addEventListener('click', () => copySelectionAsPng());
 
 // ── Edge panel wiring ─────────────────────────────────────────────────────────
 
@@ -121,19 +148,45 @@ 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')  { setTool('select');          return; }
+  if (e.key === 'Escape' || e.key === 's' || e.key === 'S')  { cancelStamp(); 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; }
   if (e.key === 'c' || e.key === 'C')  { setTool('addNode', 'circle');   return; }
   if (e.key === 'a' || e.key === 'A')  { setTool('addNode', 'actor');    return; }
-  if (e.key === 'f' || e.key === 'F')  { setTool('addEdge');             return; }
+  if (e.key === 'f' || e.key === 'F')  { setTool('addEdge');                  return; }
+  if (e.key === 'p' || e.key === 'P')  { setTool('addNode', 'post-it');       return; }
+  if (e.key === 't' || e.key === 'T')  { setTool('addNode', 'text-free');     return; }
   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 =

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

@@ -3,7 +3,9 @@
 // and wires all network-level events.
 
 import { st, markDirty } from './state.js';
-import { visNodeProps }   from './node-rendering.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';
@@ -74,11 +76,8 @@ export function initNetwork(savedNodes, savedEdges) {
       if (!node) continue;
       if (alwaysShow === true || node.isBoundingBoxOverlappingWith(viewableArea) === true) {
         const r = node.draw(ctx);
-        // Custom shapes (actor) draw their own label inside drawNode(); skip
-        // vis-network's external-label callback to avoid double-rendering.
-        if (r.drawExternalLabel != null && node.options.shape !== 'custom') {
-          drawExternalLabelCallbacks.push(r.drawExternalLabel);
-        }
+        // All shapes are ctxRenderer (shape:'custom') and draw their own labels.
+        // Skip drawExternalLabel entirely to avoid double-rendering.
       } else {
         node.updateBoundingBox(ctx, node.selected);
       }
@@ -123,14 +122,20 @@ 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 id       = 'n' + Date.now();
+    const defaults = SHAPE_DEFAULTS[st.pendingShape] || [100, 40];
+    const defaultColor = st.pendingShape === 'post-it' ? 'c-amber' : 'c-gray';
     st.nodes.add({
-      id, label: 'Node',
-      shapeType: st.pendingShape, colorKey: 'c-gray',
-      nodeWidth: null, nodeHeight: null, fontSize: null,
+      id, label: st.pendingShape === 'text-free' ? 'Texte' : 'Node',
+      shapeType: st.pendingShape, colorKey: defaultColor,
+      nodeWidth: defaults[0], nodeHeight: defaults[1],
+      fontSize: null, rotation: 0, labelRotation: 0,
       x: params.pointer.canvas.x, y: params.pointer.canvas.y,
-      ...visNodeProps(st.pendingShape, 'c-gray', null, null, null, null, null),
+      ...visNodeProps(st.pendingShape, defaultColor, defaults[0], defaults[1], null, null, null),
     });
     markDirty();
     setTimeout(() => {
@@ -142,6 +147,45 @@ 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 onSelectNode(params) {
   st.selectedNodeIds = params.nodes;
   st.selectedEdgeIds = [];

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

@@ -2,7 +2,18 @@
 // Floating formatting toolbar for selected nodes (color, font, alignment, z-order).
 
 import { st, markDirty } from './state.js';
-import { visNodeProps, getActualNodeHeight } from './node-rendering.js';
+import { SHAPE_DEFAULTS } from './node-rendering.js';
+
+// All shapes are ctxRenderers — vis-network never re-reads the closure after
+// nodes.update(). Force refreshNeeded + redraw so the new colorKey/fontSize/
+// textAlign/textValign values are picked up on the next draw call via st.nodes.get(id).
+function forceRedraw() {
+  st.selectedNodeIds.forEach((id) => {
+    const bn = st.network && st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  if (st.network) st.network.redraw();
+}
 
 export function showNodePanel() {
   document.getElementById('nodePanel').classList.remove('hidden');
@@ -17,8 +28,9 @@ export function setNodeColor(colorKey) {
   st.selectedNodeIds.forEach((id) => {
     const n = st.nodes.get(id);
     if (!n) return;
-    st.nodes.update({ id, colorKey, ...visNodeProps(n.shapeType || 'box', colorKey, n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, n.textValign) });
+    st.nodes.update({ id, colorKey });
   });
+  forceRedraw();
   markDirty();
 }
 
@@ -28,31 +40,133 @@ export function changeNodeFontSize(delta) {
     const n = st.nodes.get(id);
     if (!n) return;
     const newSize = Math.max(8, Math.min(48, (n.fontSize || 13) + delta));
-    const ah = getActualNodeHeight(id);
-    st.nodes.update({ id, fontSize: newSize, ...visNodeProps(n.shapeType || 'box', n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, newSize, n.textAlign, n.textValign, ah) });
+    st.nodes.update({ id, fontSize: newSize });
   });
+  forceRedraw();
   markDirty();
 }
 
 export function setTextAlign(align) {
   if (!st.selectedNodeIds.length) return;
   st.selectedNodeIds.forEach((id) => {
-    const n  = st.nodes.get(id);
+    const n = st.nodes.get(id);
     if (!n) return;
-    const ah = getActualNodeHeight(id);
-    st.nodes.update({ id, textAlign: align, ...visNodeProps(n.shapeType || 'box', n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, n.fontSize, align, n.textValign, ah) });
+    st.nodes.update({ id, textAlign: align });
   });
+  forceRedraw();
   markDirty();
 }
 
 export function setTextValign(valign) {
   if (!st.selectedNodeIds.length) return;
   st.selectedNodeIds.forEach((id) => {
+    const n = st.nodes.get(id);
+    if (!n) return;
+    st.nodes.update({ id, textValign: valign });
+  });
+  forceRedraw();
+  markDirty();
+}
+
+// ── Stamp (format painter) ────────────────────────────────────────────────────
+// Uses a transparent DOM overlay (#stampOverlay) that intercepts canvas clicks
+// during stamp mode. This bypasses vis-network's event system entirely, avoiding
+// the deselectNode/click ordering problems that make st.activeStamp unreliable.
+
+const STAMP_BTNS = { color: 'btnStampColor', rotation: 'btnStampRotation', fontSize: 'btnStampFontSize' };
+
+export function activateStamp(type) {
+  if (!st.stampTargetIds.length) return; // targets were saved on mousedown
+  st.activeStamp = type;
+  const overlay = document.getElementById('stampOverlay');
+  overlay.style.display = 'block';
+  Object.entries(STAMP_BTNS).forEach(([t, id]) =>
+    document.getElementById(id).classList.toggle('tool-active', t === type)
+  );
+}
+
+export function cancelStamp() {
+  st.activeStamp = null;
+  st.stampTargetIds = [];
+  document.getElementById('stampOverlay').style.display = 'none';
+  Object.values(STAMP_BTNS).forEach((id) =>
+    document.getElementById(id).classList.remove('tool-active')
+  );
+}
+
+function applyStamp(sourceId) {
+  const source = st.nodes.get(sourceId);
+  if (!source || !st.activeStamp || !st.stampTargetIds.length) return;
+  const type    = st.activeStamp;
+  const targets = [...st.stampTargetIds]; // snapshot before cancelStamp clears the array
+  cancelStamp();
+
+  targets.forEach((id) => {
+    if (id === sourceId) return;
+    const target = st.nodes.get(id);
+    if (!target) return;
+    if (type === 'color')    st.nodes.update({ id, colorKey: source.colorKey || 'c-gray' });
+    if (type === 'rotation') st.nodes.update({ id, rotation: source.rotation || 0 });
+    if (type === 'fontSize') st.nodes.update({ id, fontSize: source.fontSize || 13 });
+    const bn = st.network && st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+  if (st.network) st.network.redraw();
+  markDirty();
+}
+
+// getNodeAt() is unreliable for shape:'custom' (bounding box near-zero).
+// Manual AABB hit test using DOMtoCanvas + node dimensions, topmost node first.
+function getNodeAtDOMPoint(domX, domY) {
+  if (!st.network || !st.nodes) return undefined;
+  const cp = st.network.DOMtoCanvas({ x: domX, y: domY });
+  for (let i = st.canonicalOrder.length - 1; i >= 0; i--) {
+    const id = st.canonicalOrder[i];
     const n  = st.nodes.get(id);
+    const bn = st.network.body.nodes[id];
+    if (!n || !bn) continue;
+    const defaults = SHAPE_DEFAULTS[n.shapeType] || [100, 40];
+    const w = n.nodeWidth  || defaults[0];
+    const h = n.nodeHeight || defaults[1];
+    const rot = 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;
+    }
+    if (Math.abs(cp.x - bn.x) <= hw && Math.abs(cp.y - bn.y) <= hh) return id;
+  }
+  return undefined;
+}
+
+// Wire the stamp overlay click.
+document.getElementById('stampOverlay').addEventListener('click', (e) => {
+  if (!st.activeStamp || !st.network) return;
+  const rect   = document.getElementById('vis-canvas').getBoundingClientRect();
+  const nodeId = getNodeAtDOMPoint(e.clientX - rect.left, e.clientY - rect.top);
+  if (nodeId !== undefined) {
+    applyStamp(nodeId);
+  } else {
+    cancelStamp();
+  }
+});
+
+// ── 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;
-    const ah = getActualNodeHeight(id);
-    st.nodes.update({ id, textValign: valign, ...visNodeProps(n.shapeType || 'box', n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, valign, ah) });
+    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();
 }