living-ai-documentation 1.0.0

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

@@ -0,0 +1,157 @@
+// ── Undo / Redo history ────────────────────────────────────────────────────────
+// Snapshot-based undo/redo. Captures semantic node/edge data (same format as
+// saveDiagram) so vis-network rendering props are reconstructed cleanly on
+// restore. History is scoped to the current diagram — call resetHistory() on
+// every diagram switch so stacks don't bleed across diagrams.
+
+import { st, markDirty } from './state.js';
+import { visNodeProps }   from './node-rendering.js';
+import { visEdgeProps }   from './edge-rendering.js';
+
+const MAX_HISTORY = 50;
+
+let _undoStack = [];
+let _redoStack = [];
+
+// ── State capture ──────────────────────────────────────────────────────────────
+
+function captureState() {
+  if (!st.nodes || !st.edges || !st.network) return null;
+  const positions = st.network.getPositions();
+  const nodes = st.nodes.get().map((n) => ({
+    id: n.id, label: n.label,
+    shapeType: n.shapeType || 'box', colorKey: n.colorKey || 'c-gray',
+    kind: n.kind || null, renderAs: n.renderAs || null,
+    description: n.description || null,
+    evidence: Array.isArray(n.evidence) ? n.evidence : null,
+    nodeWidth: n.nodeWidth || null, nodeHeight: n.nodeHeight || null,
+    fontSize: n.fontSize || null, textAlign: n.textAlign || null, textValign: n.textValign || null,
+    bgOpacity: n.bgOpacity ?? null,
+    rotation: n.rotation || 0, labelRotation: n.labelRotation || 0,
+    imageSrc: n.imageSrc || null, groupId: n.groupId || null,
+    nodeLink: n.nodeLink || null, locked: n.locked || false,
+    x: positions[n.id]?.x ?? n.x, y: positions[n.id]?.y ?? n.y,
+  }));
+  const edges = st.edges.get().map((e) => ({
+    id: e.id, from: e.from, to: e.to,
+    label: e.label || '', arrowDir: e.arrowDir || 'to',
+    dashes: e.dashes || false, fontSize: e.fontSize || null,
+    labelRotation: e.labelRotation || 0,
+    fromPort: e.fromPort || null, toPort: e.toPort || null,
+    edgeColor: e.edgeColor || null, edgeWidth: e.edgeWidth || null,
+    edgeLocked: e.edgeLocked || false,
+    evidence: Array.isArray(e.evidence) ? e.evidence : null,
+  }));
+  return {
+    nodes,
+    edges,
+    canonicalOrder: [...st.canonicalOrder],
+    edgesStraight: st.edgesStraight,
+  };
+}
+
+// ── Public API ─────────────────────────────────────────────────────────────────
+
+/**
+ * Call BEFORE any mutating operation to record the current state for undo.
+ * Clears the redo stack (new action invalidates any undone future).
+ */
+export function pushSnapshot() {
+  const snap = captureState();
+  if (!snap) return;
+  _undoStack.push(snap);
+  if (_undoStack.length > MAX_HISTORY) _undoStack.shift();
+  _redoStack = [];
+}
+
+/** Reset both stacks — call whenever a new diagram is opened. */
+export function resetHistory() {
+  _undoStack = [];
+  _redoStack = [];
+}
+
+/** Undo the last action. No-op if stack is empty. */
+export function undo() {
+  if (!_undoStack.length) return;
+  const before  = _undoStack.pop();
+  const current = captureState();
+  if (current) _redoStack.push(current);
+  _restoreState(before);
+}
+
+/** Redo the last undone action. No-op if stack is empty. */
+export function redo() {
+  if (!_redoStack.length) return;
+  const after   = _redoStack.pop();
+  const current = captureState();
+  if (current) _undoStack.push(current);
+  _restoreState(after);
+}
+
+// ── State restore ──────────────────────────────────────────────────────────────
+
+function _restoreState(snapshot) {
+  if (!st.network || !st.nodes || !st.edges || !snapshot) return;
+
+  const pos   = st.network.getViewPosition();
+  const scale = st.network.getScale();
+
+  // Clear edges first: the edge-remove listener detects orphaned anchors and
+  // removes them from st.nodes, which avoids cascade issues when clearing nodes.
+  st.edges.clear();
+  st.nodes.clear();
+
+  // Restore edge-straight flag + toolbar button
+  if (snapshot.edgesStraight !== undefined) {
+    st.edgesStraight = snapshot.edgesStraight;
+    document.getElementById('btnEdgeStraight').classList.toggle('tool-active', st.edgesStraight);
+  }
+  const edgeSmooth = st.edgesStraight ? { enabled: false } : { type: 'continuous' };
+
+  st.nodes.add(snapshot.nodes.map((n) => ({
+    ...n,
+    ...visNodeProps(
+      n.shapeType || 'box', n.colorKey || 'c-gray',
+      n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, n.textValign,
+    ),
+    ...(n.locked ? { fixed: { x: true, y: true }, draggable: false } : {}),
+  })));
+
+  st.edges.add(snapshot.edges.map((e) => {
+    const toNode   = snapshot.nodes.find((n) => n.id === e.to);
+    const isAnchor = toNode && toNode.shapeType === 'anchor';
+    const edgeObj  = {
+      ...e,
+      ...visEdgeProps(e.arrowDir ?? 'to', e.dashes ?? false),
+      smooth: isAnchor ? { enabled: false } : edgeSmooth,
+      ...(e.edgeColor ? { color: { color: e.edgeColor, highlight: '#f97316', hover: '#f97316' } } : {}),
+      ...(e.edgeWidth ? { width: e.edgeWidth } : {}),
+      ...(e.fontSize || e.labelRotation ? {
+        font: {
+          size: e.fontSize || 11,
+          align: 'middle',
+          color: (e.labelRotation && Math.abs(e.labelRotation) > 0.001) ? 'rgba(0,0,0,0)' : '#6b7280',
+        },
+      } : {}),
+    };
+    if (e.fromPort || e.toPort) {
+      edgeObj.color  = { color: 'rgba(0,0,0,0)', highlight: 'rgba(0,0,0,0)', hover: 'rgba(0,0,0,0)' };
+      edgeObj.arrows = { to: { enabled: false }, from: { enabled: false } };
+    }
+    return edgeObj;
+  }));
+
+  // Override the canonical order that the add-listener built in insertion order
+  st.canonicalOrder = [...snapshot.canonicalOrder];
+
+  // Force all nodes to re-render (custom shapes cache ctx closures)
+  Object.keys(st.network.body.nodes).forEach((id) => {
+    const bn = st.network.body.nodes[id];
+    if (bn) bn.refreshNeeded = true;
+  });
+
+  // Restore viewport without animation
+  st.network.moveTo({ position: pos, scale, animation: false });
+  markDirty();
+  st.network.redraw();
+}

package/dist/src/frontend/diagram/image-name-modal.js

@@ -0,0 +1,48 @@
+// ── Image filename modal ───────────────────────────────────────────────────────
+// Returns a Promise<string|null>:
+//   string (possibly empty) → user confirmed (empty = use auto name)
+//   null                    → user cancelled
+
+const IMAGE_NAME_RE = /^[a-z0-9_-]*$/i;
+
+export function promptImageName() {
+  return new Promise((resolve) => {
+    const modal   = document.getElementById('imageNameModal');
+    const input   = document.getElementById('imageNameInput');
+    const error   = document.getElementById('imageNameError');
+    const confirm = document.getElementById('imageNameConfirm');
+    const cancel  = document.getElementById('imageNameCancel');
+
+    input.value = '';
+    error.classList.add('hidden');
+    modal.style.display = 'flex';
+    setTimeout(() => input.focus(), 50);
+
+    function validate() {
+      const val = input.value.trim();
+      const ok  = val === '' || IMAGE_NAME_RE.test(val);
+      error.classList.toggle('hidden', ok);
+      return ok;
+    }
+
+    function close(name) {
+      modal.style.display = 'none';
+      confirm.removeEventListener('click',  onConfirm);
+      cancel.removeEventListener('click',   onCancel);
+      input.removeEventListener('input',    validate);
+      input.removeEventListener('keydown',  onKey);
+      resolve(name);
+    }
+    function onConfirm() { if (validate()) close(input.value.trim()); }
+    function onCancel()  { close(null); }
+    function onKey(e) {
+      if (e.key === 'Enter')  { e.preventDefault(); if (validate()) close(input.value.trim()); }
+      if (e.key === 'Escape') { e.preventDefault(); close(null); }
+    }
+
+    confirm.addEventListener('click',  onConfirm);
+    cancel.addEventListener('click',   onCancel);
+    input.addEventListener('input',    validate);
+    input.addEventListener('keydown',  onKey);
+  });
+}

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

@@ -0,0 +1,36 @@
+// ── 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, name = '') {
+  const ext    = (file.name.split('.').pop() || 'png').toLowerCase();
+  const base64 = await toBase64(file);
+  return _upload(base64, ext, name);
+}
+
+export async function uploadImageBlob(blob, ext = 'png', name = '') {
+  const base64 = await toBase64(blob);
+  return _upload(base64, ext, name);
+}
+
+async function _upload(base64, ext, name = '') {
+  const body = { data: base64, ext };
+  if (name) body.name = name;
+  const res  = await fetch('/api/images/upload', {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body:    JSON.stringify(body),
+  });
+  if (!res.ok) throw new Error('Upload failed');
+  const { filename } = await res.json();
+  return `/images/${filename}`;
+}

package/dist/src/frontend/diagram/label-editor.js

@@ -0,0 +1,115 @@
+// ── Label editor ──────────────────────────────────────────────────────────────
+// Floating textarea for in-place editing of node and edge labels.
+
+import { st, markDirty } from './state.js';
+import { pushSnapshot }  from './history.js';
+
+export function autoResizeTextarea(ta) {
+  ta.style.height = 'auto';
+  ta.style.height = ta.scrollHeight + 'px';
+}
+
+export function startLabelEdit() {
+  if (!st.selectedNodeIds.length || !st.network) return;
+  const nodeId = st.selectedNodeIds[0];
+  const n = st.nodes.get(nodeId);
+  if (!n) return;
+
+  st.editingNodeId = nodeId;
+  st.editingEdgeId = null;
+
+  const pos    = st.network.getPositions([nodeId])[nodeId] || { x: 0, y: 0 };
+  const dom    = st.network.canvasToDOM(pos);
+  const bn     = st.network.body.nodes[nodeId];
+  const scale  = st.network.getScale();
+  // Use the node's actual rendered canvas width scaled to DOM pixels.
+  // bn.shape.width is set by shape.resize() on every draw — correct for all shapes.
+  const canvasW = (bn && bn.shape && bn.shape.width) || (n.nodeWidth || 150);
+  const domW    = Math.max(120, Math.round(canvasW * scale));
+  const ta  = document.getElementById('labelInput');
+  ta.value       = n.label || '';
+  ta.style.left  = dom.x - domW / 2 + 'px';
+  ta.style.top   = dom.y - 30 + 'px';
+  ta.style.width = domW + 'px';
+  ta.classList.remove('hidden');
+  autoResizeTextarea(ta);
+  ta.focus();
+  ta.select();
+}
+
+export function startEdgeLabelEdit() {
+  if (!st.selectedEdgeIds.length || !st.network) return;
+  const edgeId = st.selectedEdgeIds[0];
+  const e = st.edges.get(edgeId);
+  if (!e) return;
+
+  st.editingEdgeId = edgeId;
+  st.editingNodeId = null;
+
+  const recorded = st.edgeLabelCanvasPos && st.edgeLabelCanvasPos[edgeId];
+  let mid;
+  if (recorded) {
+    mid = recorded;
+  } else {
+    const positions = st.network.getPositions([e.from, e.to]);
+    const fp = positions[e.from] || { x: 0, y: 0 };
+    const tp = positions[e.to]   || { x: 0, y: 0 };
+    mid = st.network.canvasToDOM({ x: (fp.x + tp.x) / 2, y: (fp.y + tp.y) / 2 });
+  }
+
+  const ta  = document.getElementById('labelInput');
+  ta.value       = e.label || '';
+  ta.style.left  = mid.x - 60 + 'px';
+  ta.style.top   = mid.y - 14 + 'px';
+  ta.style.width = '120px';
+  ta.classList.remove('hidden');
+  autoResizeTextarea(ta);
+  ta.focus();
+  ta.select();
+}
+
+export function commitLabelEdit() {
+  const ta = document.getElementById('labelInput');
+  if (st.editingNodeId) {
+    const n = st.nodes.get(st.editingNodeId);
+    if (n && ta.value !== (n.label || '')) {
+      pushSnapshot();
+      st.nodes.update({ id: st.editingNodeId, label: ta.value });
+      markDirty();
+    }
+  } else if (st.editingEdgeId) {
+    const e = st.edges.get(st.editingEdgeId);
+    if (e && ta.value !== (e.label || '')) {
+      pushSnapshot();
+      const update = { id: st.editingEdgeId, label: ta.value };
+      // Always hide vis-network's native edge label; drawEdgeLabels() in
+      // afterDrawing is the single rendering path for edge labels.
+      update.font = { size: e.fontSize || 11, align: 'middle', color: 'rgba(0,0,0,0)' };
+      st.edges.update(update);
+      markDirty();
+    }
+  }
+  st.editingNodeId = null;
+  st.editingEdgeId = null;
+}
+
+export function hideLabelInput() {
+  document.getElementById('labelInput').classList.add('hidden');
+  st.editingNodeId = null;
+  st.editingEdgeId = null;
+}
+
+// ── Wire labelInput DOM events ────────────────────────────────────────────────
+const labelInput = document.getElementById('labelInput');
+
+labelInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    commitLabelEdit();
+    hideLabelInput();
+    e.preventDefault();
+  } else if (e.key === 'Escape') {
+    hideLabelInput();
+  }
+});
+labelInput.addEventListener('input',  (e) => autoResizeTextarea(e.target));
+labelInput.addEventListener('blur',   ()  => { commitLabelEdit(); hideLabelInput(); });

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

@@ -0,0 +1,144 @@
+// ── Node link panel ───────────────────────────────────────────────────────────
+// Lets the user attach a URL or diagram link to a node.
+
+import { st, markDirty } from './state.js';
+import { pushSnapshot }  from './history.js';
+import { openDiagram }   from './persistence.js';
+import { showToast }     from './toast.js';
+import { t }             from './t.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();
+    pushSnapshot();
+    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;
+    pushSnapshot();
+    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();
+  pushSnapshot();
+  st.nodes.update({ id: _panelNodeId, nodeLink: { type: 'diagram', value: id } });
+  markDirty();
+  hideLinkPanel();
+  showToast(t('diagram.toast.diagram_linked').replace('{title}', title));
+}
+
+export function removeLinkPanel() {
+  if (_panelNodeId === null) return;
+  pushSnapshot();
+  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);