living-documentation 7.0.0

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

@@ -0,0 +1,161 @@
+// ── Alignment guides ───────────────────────────────────────────────────────────
+// Detects center-to-center horizontal/vertical alignment during drag.
+// Priority: same shapeType. Fallback: any shapeType if no same-type match found on that axis.
+
+import { st, markDirty } from './state.js';
+import { t }             from './t.js';
+
+const THRESHOLD = 6; // world units — snap detection distance
+const EXT       = 40; // world units — line extension beyond both centers
+
+export let activeGuides = [];
+
+export function applyAlignGuidesState(enabled) {
+  st.alignGuides = enabled;
+  const btn = document.getElementById('btnAlign');
+  btn.classList.toggle('tool-active', enabled);
+  btn.title = t('diagram.toolbar.align_guides');
+  if (!enabled) activeGuides = [];
+}
+
+export function toggleAlignGuides() {
+  applyAlignGuidesState(!st.alignGuides);
+  markDirty();
+  if (!st.alignGuides && st.network) st.network.redraw();
+}
+
+// Among candidates on the same axis, pick the closest to the dragged center.
+// Tiebreak: for H axis (same Y) prefer rightmost (largest ox);
+//           for V axis (same X) prefer lowest   (largest oy).
+function pickBest(candidates, dx, dy, axis) {
+  if (!candidates.length) return null;
+  return candidates.reduce((best, curr) => {
+    const dBest = axis === 'h' ? Math.abs(dx - best.ox) : Math.abs(dy - best.oy);
+    const dCurr = axis === 'h' ? Math.abs(dx - curr.ox) : Math.abs(dy - curr.oy);
+    if (dCurr < dBest) return curr;
+    if (dCurr === dBest)
+      return axis === 'h' ? (curr.ox > best.ox ? curr : best)
+                          : (curr.oy > best.oy ? curr : best);
+    return best;
+  });
+}
+
+// Collects all candidates per axis, separated by same-type / any-type.
+function collectCandidates(draggedBody, draggedType, draggedIds) {
+  const dx = draggedBody.x, dy = draggedBody.y;
+  const sameH = [], sameV = [], anyH = [], anyV = [];
+
+  for (const otherId of st.nodes.getIds()) {
+    if (draggedIds.has(otherId)) continue;
+    const other = st.nodes.get(otherId);
+    if (!other) continue;
+    const otherBody = st.network.body.nodes[otherId];
+    if (!otherBody) continue;
+    const ox = otherBody.x, oy = otherBody.y;
+    const sameType = other.shapeType === draggedType;
+    const c = { ox, oy };
+
+    if (Math.abs(dy - oy) <= THRESHOLD) (sameType ? sameH : anyH).push(c);
+    if (Math.abs(dx - ox) <= THRESHOLD) (sameType ? sameV : anyV).push(c);
+  }
+
+  return { sameH, sameV, anyH, anyV };
+}
+
+// Returns the best snap target Y (H axis) and X (V axis) for a dragged node.
+// Same-type nodes take priority; any-type is used as fallback if no same-type match found.
+function findSnapAxes(draggedBody, draggedType, draggedIds) {
+  const dx = draggedBody.x, dy = draggedBody.y;
+  const { sameH, sameV, anyH, anyV } = collectCandidates(draggedBody, draggedType, draggedIds);
+
+  const hMatch = pickBest(sameH.length ? sameH : anyH, dx, dy, 'h');
+  const vMatch = pickBest(sameV.length ? sameV : anyV, dx, dy, 'v');
+
+  return {
+    snapX: vMatch ? vMatch.ox : dx,
+    snapY: hMatch ? hMatch.oy : dy,
+  };
+}
+
+// Called at dragEnd — snaps each dragged node onto the guide axis when active.
+export function snapToAlignGuides(params) {
+  if (!st.alignGuides || !params.nodes || !params.nodes.length || !st.network) return;
+
+  const draggedIds = new Set(params.nodes);
+
+  for (const draggedId of params.nodes) {
+    const draggedNode = st.nodes.get(draggedId);
+    if (!draggedNode) continue;
+    const draggedBody = st.network.body.nodes[draggedId];
+    if (!draggedBody) continue;
+
+    const { snapX, snapY } = findSnapAxes(draggedBody, draggedNode.shapeType, draggedIds);
+    if (snapX !== draggedBody.x || snapY !== draggedBody.y) {
+      st.network.moveNode(draggedId, snapX, snapY);
+    }
+  }
+}
+
+export function clearAlignGuides() {
+  if (activeGuides.length) {
+    activeGuides = [];
+    if (st.network) st.network.redraw();
+  }
+}
+
+export function onDragging(params) {
+  if (!st.alignGuides || !params.nodes || !params.nodes.length) {
+    clearAlignGuides();
+    return;
+  }
+
+  const draggedIds = new Set(params.nodes);
+  const newGuides  = [];
+
+  for (const draggedId of params.nodes) {
+    const draggedNode = st.nodes.get(draggedId);
+    if (!draggedNode) continue;
+    const draggedType = draggedNode.shapeType;
+    const draggedBody = st.network.body.nodes[draggedId];
+    if (!draggedBody) continue;
+    const dx = draggedBody.x;
+    const dy = draggedBody.y;
+
+    const { sameH, sameV, anyH, anyV } = collectCandidates(draggedBody, draggedType, draggedIds);
+
+    const hMatch = pickBest(sameH.length ? sameH : anyH, dx, dy, 'h');
+    const vMatch = pickBest(sameV.length ? sameV : anyV, dx, dy, 'v');
+
+    if (hMatch) newGuides.push({ type: 'h', y: (dy + hMatch.oy) / 2, x1: Math.min(dx, hMatch.ox) - EXT, x2: Math.max(dx, hMatch.ox) + EXT });
+    if (vMatch) newGuides.push({ type: 'v', x: (dx + vMatch.ox) / 2, y1: Math.min(dy, vMatch.oy) - EXT, y2: Math.max(dy, vMatch.oy) + EXT });
+  }
+
+  activeGuides = newGuides;
+  if (st.network) st.network.redraw();
+}
+
+// Called on network "afterDrawing" — draws guides in canvas (world) coordinates.
+export function drawAlignmentGuides(ctx) {
+  if (!st.alignGuides || !activeGuides.length) return;
+
+  const isDark = document.documentElement.classList.contains('dark');
+  ctx.save();
+  ctx.strokeStyle = isDark ? 'rgba(210, 210, 210, 0.9)' : 'rgba(50, 50, 50, 0.85)';
+  ctx.lineWidth   = 0.5;
+  ctx.setLineDash([4, 4]);
+  ctx.beginPath();
+
+  for (const guide of activeGuides) {
+    if (guide.type === 'h') {
+      ctx.moveTo(guide.x1, guide.y);
+      ctx.lineTo(guide.x2, guide.y);
+    } else {
+      ctx.moveTo(guide.x,  guide.y1);
+      ctx.lineTo(guide.x,  guide.y2);
+    }
+  }
+
+  ctx.stroke();
+  ctx.setLineDash([]);
+  ctx.restore();
+}

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

@@ -0,0 +1,172 @@
+// ── Clipboard (copy / paste) ───────────────────────────────────────────────────
+
+import { st, markDirty } from './state.js';
+import { pushSnapshot }  from './history.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';
+import { t }             from './t.js';
+import { uploadImageBlob } from './image-upload.js';
+
+// ── Shared: render selection to a PNG blob ────────────────────────────────────
+
+async function _selectionToBlob() {
+  if (!st.network || !st.selectedNodeIds.length) return null;
+
+  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 so highlights don't appear in the PNG
+  const savedNodeIds = [...st.selectedNodeIds];
+  st.network.unselectAll();
+  st.selectedNodeIds = [];
+  st.network.redraw();
+
+  const visCanvas = document.querySelector('#vis-canvas canvas');
+  if (!visCanvas) {
+    st.network.selectNodes(savedNodeIds);
+    return null;
+  }
+
+  // Crop into an offscreen canvas
+  const out = document.createElement('canvas');
+  out.width  = cropW * dpr;
+  out.height = cropH * dpr;
+  const octx = out.getContext('2d');
+
+  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
+  );
+
+  const blob = await new Promise((res) => out.toBlob(res, 'image/png'));
+  return { blob, savedNodeIds };
+}
+
+// ── Copy selection as PNG (to clipboard) ─────────────────────────────────────
+
+export async function copySelectionAsPng() {
+  const result = await _selectionToBlob();
+  if (!result) return;
+  const { blob, savedNodeIds } = 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);
+  }
+}
+
+// ── Save selection as PNG to server ──────────────────────────────────────────
+
+export async function saveSelectionAsPng(filename) {
+  const result = await _selectionToBlob();
+  if (!result) return;
+  const { blob, savedNodeIds } = result;
+  try {
+    const name = filename.replace(/\.[^.]+$/, ''); // strip extension
+    await uploadImageBlob(blob, 'png', name);
+    showToast(t('diagram.toast.diagram_saved_png'));
+  } catch {
+    showToast(t('diagram.toast.diagram_save_png_error'), 'error');
+  } finally {
+    st.network.selectNodes(savedNodeIds);
+  }
+}
+
+export function copySelected() {
+  if (!st.network || !st.selectedNodeIds.length) return;
+
+  // Use vis-network's full selection — includes anchor endpoints of free arrows,
+  // which are excluded from st.selectedNodeIds (no node panel for anchors).
+  const allNodeIds    = st.network.getSelectedNodes();
+  const allEdgeIds    = new Set(st.network.getSelectedEdges());
+
+  const positions   = st.network.getPositions(allNodeIds);
+  const copiedNodes = allNodeIds.map((id) => {
+    const { ctxRenderer, ...rest } = st.nodes.get(id);
+    return { ...rest, x: positions[id]?.x ?? rest.x, y: positions[id]?.y ?? rest.y };
+  });
+
+  // Edges where both endpoints are in the selection, plus any explicitly selected edges.
+  const selectedSet = new Set(allNodeIds);
+  const copiedEdges = st.edges.get().filter((e) =>
+    (selectedSet.has(e.from) && selectedSet.has(e.to)) || allEdgeIds.has(e.id)
+  );
+
+  st.clipboard = { nodes: copiedNodes, edges: copiedEdges };
+}
+
+export function pasteClipboard() {
+  if (!st.clipboard || !st.clipboard.nodes.length || !st.network) return;
+  pushSnapshot();
+
+  const OFFSET = 40;
+  const idMap  = {};
+  st.clipboard.nodes.forEach((n) => { idMap[n.id] = 'n' + Date.now() + Math.random().toString(36).slice(2); });
+
+  const newNodes = st.clipboard.nodes.map((n) => ({
+    ...n, id: idMap[n.id], x: (n.x || 0) + OFFSET, y: (n.y || 0) + OFFSET,
+    ...visNodeProps(n.shapeType || 'box', n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, n.textValign),
+  }));
+  const newEdges = st.clipboard.edges.map((e) => ({
+    ...e,
+    id: 'e' + Date.now() + Math.random().toString(36).slice(2),
+    from: idMap[e.from], to: idMap[e.to],
+    ...visEdgeProps(e.arrowDir ?? 'to', e.dashes ?? false),
+    ...(e.fontSize ? { font: { size: e.fontSize, align: 'middle', color: '#6b7280' } } : {}),
+  }));
+
+  st.nodes.add(newNodes);
+  st.edges.add(newEdges);
+
+  const newIds = newNodes.map((n) => n.id);
+  st.network.selectNodes(newIds);
+  st.selectedNodeIds = newIds;
+  st.selectedEdgeIds = [];
+  showNodePanel();
+  markDirty();
+
+  // Offset clipboard so each successive paste is staggered
+  st.clipboard = {
+    nodes: st.clipboard.nodes.map((n) => ({ ...n, x: (n.x || 0) + OFFSET, y: (n.y || 0) + OFFSET })),
+    edges: st.clipboard.edges,
+  };
+}

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

@@ -0,0 +1,109 @@
+// ── Constants ─────────────────────────────────────────────────────────────────
+// Pure compile-time values shared across all diagram modules.
+
+export const GRID_SIZE = 20;
+
+export const TOOL_BTN_MAP = {
+  select: 'toolSelect',
+  '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',
+};
+
+export const NODE_COLORS = {
+  'c-gray':   { bg: '#f5f5f4', border: '#a8a29e', font: '#292524', hbg: '#e7e5e4', hborder: '#78716c' },
+  'c-blue':   { bg: '#dbeafe', border: '#3b82f6', font: '#1e40af', hbg: '#bfdbfe', hborder: '#2563eb' },
+  'c-green':  { bg: '#dcfce7', border: '#22c55e', font: '#166534', hbg: '#bbf7d0', hborder: '#16a34a' },
+  'c-amber':  { bg: '#fef9c3', border: '#f59e0b', font: '#78350f', hbg: '#fef08a', hborder: '#d97706' },
+  'c-rose':   { bg: '#ffe4e6', border: '#f43f5e', font: '#881337', hbg: '#fecdd3', hborder: '#e11d48' },
+  'c-purple': { bg: '#ede9fe', border: '#8b5cf6', font: '#4c1d95', hbg: '#ddd6fe', hborder: '#7c3aed' },
+  'c-teal':   { bg: '#ccfbf1', border: '#14b8a6', font: '#134e4a', hbg: '#99f6e4', hborder: '#0d9488' },
+  'c-orange': { bg: '#ffedd5', border: '#f97316', font: '#7c2d12', hbg: '#fed7aa', hborder: '#ea580c' },
+  'c-cyan':   { bg: '#cffafe', border: '#06b6d4', font: '#164e63', hbg: '#a5f3fc', hborder: '#0891b2' },
+  'c-indigo': { bg: '#e0e7ff', border: '#6366f1', font: '#312e81', hbg: '#c7d2fe', hborder: '#4f46e5' },
+  'c-pink':   { bg: '#fce7f3', border: '#ec4899', font: '#831843', hbg: '#fbcfe8', hborder: '#db2777' },
+  'c-lime':   { bg: '#ecfccb', border: '#84cc16', font: '#365314', hbg: '#d9f99d', hborder: '#65a30d' },
+  'c-red':    { bg: '#fee2e2', border: '#ef4444', font: '#7f1d1d', hbg: '#fecaca', hborder: '#dc2626' },
+  'c-sky':    { bg: '#e0f2fe', border: '#0ea5e9', font: '#0c4a6e', hbg: '#bae6fd', hborder: '#0284c7' },
+  'c-slate':  { bg: '#f1f5f9', border: '#64748b', font: '#0f172a', hbg: '#e2e8f0', hborder: '#475569' },
+};
+
+// Default palette shown in the diagram editor (can be overridden via admin config).
+export const DEFAULT_NODE_PALETTE = [
+  'c-gray','c-slate','c-blue','c-sky','c-cyan','c-teal','c-green','c-lime',
+  'c-amber','c-orange','c-red','c-rose','c-pink','c-purple','c-indigo',
+];
+
+export const DEFAULT_EDGE_PALETTE = [
+  '#a8a29e','#374151','#3b82f6','#14b8a6','#22c55e','#f97316','#ef4444','#a855f7',
+];
+
+// Per-slot lightness ratio (border_L / bg_L) derived from the original NODE_COLORS pairs.
+// Applied when a slot's bg is customised so the border preserves the same contrast as the original.
+export const NODE_L_RATIOS = {
+  'c-gray':   0.667, 'c-slate':  0.488, 'c-blue':   0.645, 'c-sky':    0.518,
+  'c-cyan':   0.473, 'c-teal':   0.448, 'c-green':  0.489, 'c-lime':   0.496,
+  'c-amber':  0.570, 'c-orange': 0.578, 'c-red':    0.640, 'c-rose':   0.636,
+  'c-pink':   0.638, 'c-purple': 0.694, 'c-indigo': 0.710,
+};
+
+// Derive border/font/hover colors from a custom bg hex, using HSL so the hue is preserved.
+// lRatio = border_L / bg_L; use NODE_L_RATIOS[key] for per-slot accuracy.
+export function deriveNodeColors(bgHex, lRatio = 0.60) {
+  const r = parseInt(bgHex.slice(1, 3), 16) / 255;
+  const g = parseInt(bgHex.slice(3, 5), 16) / 255;
+  const b = parseInt(bgHex.slice(5, 7), 16) / 255;
+
+  // RGB → HSL
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  const d = max - min;
+  let h = 0, s = 0;
+  if (d > 0) {
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if      (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else                h = ((r - g) / d + 4) / 6;
+  }
+
+  function hslToHex(hh, ss, ll) {
+    let rr, gg, bb;
+    if (ss === 0) {
+      rr = gg = bb = ll;
+    } else {
+      const hue2rgb = (p, q, t) => {
+        if (t < 0) t += 1; if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+      };
+      const q = ll < 0.5 ? ll * (1 + ss) : ll + ss - ll * ss;
+      const p = 2 * ll - q;
+      rr = hue2rgb(p, q, hh + 1 / 3);
+      gg = hue2rgb(p, q, hh);
+      bb = hue2rgb(p, q, hh - 1 / 3);
+    }
+    return '#' + [rr, gg, bb]
+      .map((v) => Math.max(0, Math.min(255, Math.round(v * 255))).toString(16).padStart(2, '0'))
+      .join('');
+  }
+
+  const borderL   = l * lRatio;
+  const hbgL      = l * 0.93;          // slightly darker than bg for hover
+  const hborderL  = borderL * 0.89;    // slightly darker than border for hover
+
+  return {
+    bg:      bgHex,
+    border:  hslToHex(h, s, borderL),
+    font:    l > 0.5 ? '#292524' : '#fafaf9',
+    hbg:     hslToHex(h, s, Math.min(l, hbgL)),
+    hborder: hslToHex(h, s, Math.min(borderL, hborderL)),
+  };
+}

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

@@ -0,0 +1,43 @@
+// ── Debug overlay ─────────────────────────────────────────────────────────────
+// DOM overlay showing node IDs and bounding-box coordinates for each node.
+// Toggled by the showDiagramDebug config flag (Admin panel).
+
+import { st } from './state.js';
+
+export function toggleDebug() {
+  st.debugMode = !st.debugMode;
+  document.getElementById('btnDebug').classList.toggle('tool-active', st.debugMode);
+  if (st.network) st.network.redraw();
+}
+
+// Called on network "afterDrawing". Recycles existing .debug-box elements by node id.
+export function drawDebugOverlay() {
+  const layer = document.getElementById('debugLayer');
+  if (!st.debugMode || !st.network) { layer.innerHTML = ''; return; }
+
+  const existing = new Map(
+    [...layer.querySelectorAll('.debug-box')].map((el) => [el.dataset.nid, el])
+  );
+  const seen = new Set();
+
+  for (const id of st.canonicalOrder) {
+    const bodyNode = st.network.body.nodes[id];
+    if (!bodyNode) continue;
+    const w  = bodyNode.shape.width  || 0;
+    const h  = bodyNode.shape.height || 0;
+    const cx = bodyNode.x, cy = bodyNode.y;
+    const L  = cx - w / 2, T = cy - h / 2;
+
+    const dom  = st.network.canvasToDOM({ x: cx + w / 2 + 8, y: cy - h / 2 });
+    const text = [`id : ${id}`, `cx=${Math.round(cx)}  cy=${Math.round(cy)}`, `w =${Math.round(w)}   h =${Math.round(h)}`, `L =${Math.round(L)}   T =${Math.round(T)}`].join('\n');
+
+    let box = existing.get(String(id));
+    if (!box) { box = document.createElement('div'); box.className = 'debug-box'; box.dataset.nid = String(id); layer.appendChild(box); }
+    box.textContent = text;
+    box.style.left  = Math.round(dom.x) + 'px';
+    box.style.top   = Math.round(dom.y) + 'px';
+    seen.add(String(id));
+  }
+
+  existing.forEach((el, nid) => { if (!seen.has(nid)) el.remove(); });
+}