collabmd 0.1.34 → 0.1.36

package/src/client/application/diagram-preview-export.js

@@ -0,0 +1,304 @@
+import {
+  isMermaidFilePath,
+  isPlantUmlFilePath,
+  stripVaultFileExtension,
+} from '../../domain/file-kind.js';
+import { sanitizeSvgMarkup, serializeSvgElement } from './preview-diagram-utils.js';
+
+const LIGHT_EXPORT_MERMAID_CONFIG = Object.freeze({
+  htmlLabels: false,
+  flowchart: {
+    defaultRenderer: 'dagre-wrapper',
+    htmlLabels: false,
+    useMaxWidth: true,
+  },
+  class: {
+    defaultRenderer: 'dagre-wrapper',
+    htmlLabels: false,
+    useMaxWidth: true,
+  },
+  startOnLoad: false,
+  theme: 'default',
+});
+const MERMAID_INIT_DIRECTIVE_PATTERN = /^\s*%%\{\s*(?:init|initialize)\s*:[\s\S]*?\}%%\s*\n?/gim;
+
+let mermaidExportCounter = 0;
+
+function getPathLeaf(pathValue) {
+  return String(pathValue ?? '')
+    .replace(/\/+$/u, '')
+    .split('/')
+    .filter(Boolean)
+    .pop() || '';
+}
+
+function encodeSvgDataUrl(svgMarkup) {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
+}
+
+function createMermaidExportId() {
+  mermaidExportCounter += 1;
+  return `mermaid-export-${mermaidExportCounter.toString(36)}`;
+}
+
+function resolveSvgDimensions(svgElement) {
+  const widthAttr = Number.parseFloat(svgElement.getAttribute('width') || '');
+  const heightAttr = Number.parseFloat(svgElement.getAttribute('height') || '');
+  const viewBox = svgElement.getAttribute('viewBox') || '';
+  const viewBoxParts = viewBox.split(/\s+/u).map((value) => Number.parseFloat(value));
+
+  return {
+    height: Number.isFinite(heightAttr) && heightAttr > 0
+      ? heightAttr
+      : (Number.isFinite(viewBoxParts[3]) && viewBoxParts[3] > 0 ? viewBoxParts[3] : 800),
+    width: Number.isFinite(widthAttr) && widthAttr > 0
+      ? widthAttr
+      : (Number.isFinite(viewBoxParts[2]) && viewBoxParts[2] > 0 ? viewBoxParts[2] : 1200),
+  };
+}
+
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.decoding = 'async';
+    image.addEventListener('load', () => resolve(image), { once: true });
+    image.addEventListener('error', () => reject(new Error(`Failed to load image: ${src}`)), { once: true });
+    image.src = src;
+  });
+}
+
+async function canvasToPngBlob(canvas) {
+  if (typeof canvas.toBlob === 'function') {
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+    if (blob instanceof Blob) {
+      return blob;
+    }
+  }
+
+  const dataUrl = canvas.toDataURL('image/png');
+  return dataUrlToBlob(dataUrl);
+}
+
+function dataUrlToBlob(dataUrl) {
+  const [header = '', payload = ''] = String(dataUrl).split(',', 2);
+  const mimeMatch = header.match(/^data:([^;,]+)?/u);
+  const mimeType = mimeMatch?.[1] || 'application/octet-stream';
+
+  if (header.includes(';base64')) {
+    const binary = atob(payload);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index += 1) {
+      bytes[index] = binary.charCodeAt(index);
+    }
+    return new Blob([bytes], { type: mimeType });
+  }
+
+  return new Blob([decodeURIComponent(payload)], { type: mimeType });
+}
+
+function cleanupExportSvg(svgElement) {
+  const clonedSvg = svgElement.cloneNode(true);
+  if (!(clonedSvg instanceof SVGSVGElement)) {
+    throw new Error('Renderer returned invalid SVG');
+  }
+
+  clonedSvg.style.removeProperty('display');
+  clonedSvg.style.removeProperty('margin');
+  clonedSvg.style.removeProperty('max-width');
+  clonedSvg.style.removeProperty('height');
+  clonedSvg.style.removeProperty('width');
+  clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+  const { width, height } = resolveSvgDimensions(clonedSvg);
+  clonedSvg.setAttribute('width', String(Math.max(1, Math.ceil(width))));
+  clonedSvg.setAttribute('height', String(Math.max(1, Math.ceil(height))));
+
+  return clonedSvg;
+}
+
+function trimExportSvgElement(svgElement, { padding = 16 } = {}) {
+  const cleanedSvg = cleanupExportSvg(svgElement);
+
+  if (typeof svgElement.getBBox !== 'function') {
+    return cleanedSvg;
+  }
+
+  try {
+    const bounds = svgElement.getBBox();
+    if (!bounds || bounds.width <= 0 || bounds.height <= 0) {
+      return cleanedSvg;
+    }
+
+    const inset = Math.max(0, Number(padding) || 0);
+    const width = Math.ceil(bounds.width + (inset * 2));
+    const height = Math.ceil(bounds.height + (inset * 2));
+    const viewBox = [
+      Math.floor(bounds.x - inset),
+      Math.floor(bounds.y - inset),
+      width,
+      height,
+    ];
+
+    cleanedSvg.setAttribute('viewBox', viewBox.join(' '));
+    cleanedSvg.setAttribute('width', String(width));
+    cleanedSvg.setAttribute('height', String(height));
+    cleanedSvg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    return cleanedSvg;
+  } catch {
+    return cleanedSvg;
+  }
+}
+
+export function createDiagramExportBaseName({
+  currentFilePath = '',
+  diagramKind = 'diagram',
+  sourceLine = '',
+  targetPath = '',
+} = {}) {
+  const targetLeaf = getPathLeaf(targetPath);
+  if (targetLeaf) {
+    return stripVaultFileExtension(targetLeaf) || `${diagramKind}-diagram`;
+  }
+
+  const currentLeaf = getPathLeaf(currentFilePath);
+  const currentStem = stripVaultFileExtension(currentLeaf) || 'document';
+  const isStandaloneDiagram = (
+    (diagramKind === 'mermaid' && isMermaidFilePath(currentFilePath))
+    || (diagramKind === 'plantuml' && isPlantUmlFilePath(currentFilePath))
+  );
+
+  if (isStandaloneDiagram) {
+    return currentStem;
+  }
+
+  if (sourceLine) {
+    return `${currentStem}-${diagramKind}-L${sourceLine}`;
+  }
+
+  return `${currentStem}-${diagramKind}`;
+}
+
+export function createDiagramExportFileNames(options = {}) {
+  const baseName = createDiagramExportBaseName(options);
+  return {
+    baseName,
+    pngFileName: `${baseName}.png`,
+    svgFileName: `${baseName}.svg`,
+  };
+}
+
+export function exportSvgMarkupFromElement(svgElement) {
+  const cleanedSvg = cleanupExportSvg(svgElement);
+  return serializeSvgElement(cleanedSvg);
+}
+
+export function exportTrimmedSvgMarkupFromElement(svgElement, options = {}) {
+  return serializeSvgElement(trimExportSvgElement(svgElement, options));
+}
+
+function prepareMermaidExportSource(source) {
+  let text = String(source ?? '').replace(MERMAID_INIT_DIRECTIVE_PATTERN, '');
+
+  text = `%%{init: ${JSON.stringify(LIGHT_EXPORT_MERMAID_CONFIG)}}%%\n${text}`;
+
+  if (/^\s*gantt\b/m.test(text) && !/\btodayMarker\b/.test(text)) {
+    const lines = text.split('\n');
+    const ganttLineIndex = lines.findIndex((line) => /^\s*gantt\b/.test(line));
+    if (ganttLineIndex !== -1) {
+      lines.splice(ganttLineIndex + 1, 0, '    todayMarker off');
+      text = lines.join('\n');
+    }
+  }
+
+  return text;
+}
+
+export async function renderMermaidExportSvgMarkup(mermaid, source) {
+  if (!mermaid?.initialize || !mermaid?.run) {
+    throw new Error('Mermaid runtime is unavailable');
+  }
+
+  mermaid.initialize(LIGHT_EXPORT_MERMAID_CONFIG);
+
+  const renderHost = document.createElement('div');
+  renderHost.style.position = 'fixed';
+  renderHost.style.left = '-10000px';
+  renderHost.style.top = '0';
+  renderHost.style.width = '1200px';
+  renderHost.style.visibility = 'hidden';
+  renderHost.style.pointerEvents = 'none';
+  document.body.appendChild(renderHost);
+
+  try {
+    const diagram = document.createElement('div');
+    diagram.className = 'mermaid mermaid-export-node';
+    diagram.id = createMermaidExportId();
+    diagram.textContent = prepareMermaidExportSource(source);
+    renderHost.appendChild(diagram);
+
+    await mermaid.run({ nodes: [diagram] });
+    const svg = diagram.querySelector('svg');
+    if (!(svg instanceof SVGSVGElement)) {
+      throw new Error('Mermaid export returned no SVG');
+    }
+
+    return exportTrimmedSvgMarkupFromElement(svg, { padding: 24 });
+  } finally {
+    renderHost.remove();
+  }
+}
+
+export async function rasterizeSvgMarkupToPngBlob(svgMarkup) {
+  const safeSvgMarkup = sanitizeSvgMarkup(svgMarkup);
+  const image = await loadImage(encodeSvgDataUrl(safeSvgMarkup));
+
+  const probe = document.createElement('div');
+  probe.innerHTML = safeSvgMarkup;
+  const svgElement = probe.querySelector('svg');
+  const { width, height } = svgElement
+    ? resolveSvgDimensions(svgElement)
+    : {
+      height: image.naturalHeight || 800,
+      width: image.naturalWidth || 1200,
+    };
+
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.ceil(width));
+  canvas.height = Math.max(1, Math.ceil(height));
+
+  const context = canvas.getContext('2d');
+  if (!context) {
+    throw new Error('Canvas is unavailable');
+  }
+
+  context.fillStyle = '#ffffff';
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  return canvasToPngBlob(canvas);
+}
+
+export function downloadBlob(blob, fileName) {
+  const downloadUrl = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = downloadUrl;
+  anchor.download = fileName;
+  anchor.style.display = 'none';
+  document.body.appendChild(anchor);
+  anchor.click();
+  window.setTimeout(() => {
+    anchor.remove();
+    URL.revokeObjectURL(downloadUrl);
+  }, 30_000);
+}
+
+export async function writeBlobToClipboard(blob) {
+  if (typeof ClipboardItem !== 'function' || !navigator.clipboard?.write) {
+    throw new Error('Clipboard image copy is unavailable');
+  }
+
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      [blob.type || 'image/png']: blob,
+    }),
+  ]);
+}

package/src/client/application/mermaid-preview-hydrator.js

@@ -1,5 +1,12 @@
 import { clamp } from '../domain/vault-utils.js';
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
+import {
+  createDiagramExportFileNames,
+  downloadBlob,
+  rasterizeSvgMarkupToPngBlob,
+  renderMermaidExportSvgMarkup,
+  writeBlobToClipboard,
+} from './diagram-preview-export.js';
 import { DiagramPreviewHydrator } from './diagram-preview-hydrator.js';
 import {
   createMermaidPlaceholderCard,
@@ -37,6 +44,8 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     this.loader = null;
     this.runtime = null;
     this.shellRefits = new WeakMap();
+    this.shellResizeObservers = new WeakMap();
+    this.resizeObservers = new Set();
     this.activeMaximizedShell = null;
     this.maximizedRoot = null;
   }
@@ -45,6 +54,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     this.cancelHydration();
     this.preservedShells.clear();
     this.clearActiveShell();
+    this.disconnectResizeObservers();
     this.maximizedRoot?.remove();
     this.maximizedRoot = null;
   }
@@ -70,6 +80,36 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     }
   }
 
+  disconnectResizeObservers() {
+    this.resizeObservers.forEach((observer) => observer.disconnect());
+    this.resizeObservers.clear();
+    this.shellResizeObservers = new WeakMap();
+  }
+
+  disconnectShellResizeObserver(shell) {
+    const observer = this.shellResizeObservers.get(shell);
+    if (!observer) {
+      return;
+    }
+
+    observer.disconnect();
+    this.resizeObservers.delete(observer);
+    this.shellResizeObservers.delete(shell);
+  }
+
+  attachShellResizeObserver(shell, frame, onResize) {
+    this.disconnectShellResizeObserver(shell);
+    if (typeof ResizeObserver !== 'function' || !shell?.isConnected || !(frame instanceof HTMLElement)) {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => onResize());
+    observer.observe(frame);
+    observer.observe(shell);
+    this.shellResizeObservers.set(shell, observer);
+    this.resizeObservers.add(observer);
+  }
+
   syncActiveShell() {
     if (
       this.activeMaximizedShell?.isConnected
@@ -347,6 +387,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     }
 
     hydratedShells.forEach((shell) => {
+      this.disconnectShellResizeObserver(shell);
       this.shellRefits.delete(shell);
       shell.removeAttribute('data-mermaid-hydrated');
       shell.querySelector(':scope > .mermaid-toolbar')?.remove();
@@ -359,6 +400,43 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     });
   }
 
+  async renderExportSvgMarkup(shell) {
+    const mermaid = await this.ensureMermaid();
+    try {
+      const source = shell.querySelector('.mermaid-source')?.textContent ?? '';
+      return await renderMermaidExportSvgMarkup(mermaid, source);
+    } finally {
+      this.configureMermaid(mermaid);
+    }
+  }
+
+  async copyExportImage(shell, exportFileNames) {
+    try {
+      const { pngFileName } = exportFileNames();
+      const pngBlob = await rasterizeSvgMarkupToPngBlob(await this.renderExportSvgMarkup(shell));
+      try {
+        await writeBlobToClipboard(pngBlob);
+        this.renderer.toastController?.show?.('Diagram copied');
+      } catch {
+        downloadBlob(pngBlob, pngFileName);
+        this.renderer.toastController?.show?.('Clipboard image copy is unavailable here. Downloaded PNG instead.');
+      }
+    } catch {
+      this.renderer.toastController?.show?.('Failed to copy diagram');
+    }
+  }
+
+  async downloadExportSvg(shell, exportFileNames) {
+    try {
+      const { svgFileName } = exportFileNames();
+      const svgBlob = new Blob([await this.renderExportSvgMarkup(shell)], { type: 'image/svg+xml;charset=utf-8' });
+      downloadBlob(svgBlob, svgFileName);
+      this.renderer.toastController?.show?.('Diagram download started');
+    } catch {
+      this.renderer.toastController?.show?.('Failed to download diagram');
+    }
+  }
+
   enhanceDiagram(shell, renderedDiagram) {
     const svg = renderedDiagram.querySelector('svg');
     if (!svg) {
@@ -368,18 +446,25 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
 
     const toolbar = document.createElement('div');
     toolbar.className = 'mermaid-toolbar diagram-preview-toolbar';
+    const leftGroup = document.createElement('div');
+    leftGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--zoom';
+    const rightGroup = document.createElement('div');
+    rightGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--actions';
 
     const decreaseButton = this.createZoomButton('−', 'Zoom out');
     const increaseButton = this.createZoomButton('+', 'Zoom in');
-    const resetButton = this.createZoomButton('Reset', 'Reset zoom');
-    const maximizeButton = this.createZoomButton('Max', 'Maximize diagram');
+    const resetButton = this.createZoomButton('', 'Reset zoom', { icon: 'fit' });
+    const copyButton = this.createZoomButton('', 'Copy image', { icon: 'copy' });
+    const downloadButton = this.createZoomButton('', 'Download SVG', { icon: 'download' });
+    const maximizeButton = this.createZoomButton('', 'Maximize diagram', { icon: 'maximize' });
     maximizeButton.classList.add('mermaid-maximize-btn');
-    setDiagramActionButtonIcon(maximizeButton, 'maximize');
     const zoomLabel = document.createElement('span');
     zoomLabel.className = 'mermaid-zoom-label diagram-preview-zoom-label';
     zoomLabel.setAttribute('aria-live', 'polite');
 
-    toolbar.append(decreaseButton, zoomLabel, resetButton, increaseButton, maximizeButton);
+    leftGroup.append(decreaseButton, zoomLabel, resetButton, increaseButton);
+    rightGroup.append(copyButton, downloadButton, maximizeButton);
+    toolbar.append(leftGroup, rightGroup);
 
     const frame = document.createElement('div');
     frame.className = 'mermaid-frame diagram-preview-frame';
@@ -389,6 +474,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     let defaultZoom = 1;
     let zoomAnimationFrameId = null;
     let resetZoomFrameId = null;
+    let layoutFrameId = null;
     let hasManualZoom = false;
     let lastAutoFitViewportWidth = 0;
     let isPanning = false;
@@ -402,6 +488,13 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     svg.style.margin = '0 auto';
     svg.style.maxWidth = 'none';
 
+    const exportFileNames = () => createDiagramExportFileNames({
+      currentFilePath: this.renderer.getSourceFilePath?.() ?? '',
+      diagramKind: 'mermaid',
+      sourceLine: shell.getAttribute('data-source-line') || '',
+      targetPath: shell.dataset.mermaidTarget || '',
+    });
+
     const calculateDefaultZoom = () => {
       const viewport = getFrameViewportSize(frame);
       if (!Number.isFinite(baseWidth) || baseWidth <= 0 || viewport.width <= 0) {
@@ -512,33 +605,44 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       if (resetZoomFrameId) {
         cancelAnimationFrame(resetZoomFrameId);
       }
+      if (layoutFrameId) {
+        cancelAnimationFrame(layoutFrameId);
+      }
 
       resetZoomFrameId = requestAnimationFrame(() => {
-        resetZoomFrameId = null;
-        if (!shell.isConnected) {
-          return;
-        }
-
-        const viewportWidth = getFrameViewportSize(frame).width;
-        const viewportChanged = Math.abs(viewportWidth - lastAutoFitViewportWidth) > 1;
-        if (!force && hasManualZoom) {
-          return;
-        }
-        if (!force && lastAutoFitViewportWidth > 0 && !viewportChanged) {
-          return;
-        }
-
-        resetZoomToFit();
+        layoutFrameId = requestAnimationFrame(() => {
+          layoutFrameId = requestAnimationFrame(() => {
+            layoutFrameId = null;
+            resetZoomFrameId = null;
+            if (!shell.isConnected) {
+              return;
+            }
+
+            const viewportWidth = getFrameViewportSize(frame).width;
+            const viewportChanged = Math.abs(viewportWidth - lastAutoFitViewportWidth) > 1;
+            if (!force && hasManualZoom) {
+              return;
+            }
+            if (!force && viewportWidth > 0 && lastAutoFitViewportWidth > 0 && !viewportChanged) {
+              return;
+            }
+
+            resetZoomToFit();
+          });
+        });
       });
     };
 
     this.shellRefits.set(shell, scheduleResetZoomToFit);
+    this.attachShellResizeObserver(shell, frame, () => scheduleResetZoomToFit());
 
     decreaseButton.addEventListener('click', () => zoomBy(-MERMAID_ZOOM.step));
     increaseButton.addEventListener('click', () => zoomBy(MERMAID_ZOOM.step));
     resetButton.addEventListener('click', () => {
-      resetZoomToFit({ animate: true });
+      scheduleResetZoomToFit({ force: true });
     });
+    copyButton.addEventListener('click', () => this.copyExportImage(shell, exportFileNames));
+    downloadButton.addEventListener('click', () => this.downloadExportSvg(shell, exportFileNames));
 
     const syncMaximizeButtonState = () => {
       const isMaximized = shell.classList.contains('is-maximized');
@@ -598,6 +702,12 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
 
       isPanning = false;
       frame.classList.remove('is-dragging');
+      window.removeEventListener('pointerup', stopPanning, true);
+      window.removeEventListener('pointercancel', stopPanning, true);
+      window.removeEventListener('mouseup', stopPanning, true);
+      window.removeEventListener('touchend', stopPanning, true);
+      window.removeEventListener('touchcancel', stopPanning, true);
+      window.removeEventListener('blur', stopPanning, true);
 
       if (activePointerId !== null && typeof frame.releasePointerCapture === 'function') {
         try {
@@ -628,7 +738,19 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       panStartScrollTop = frame.scrollTop;
 
       frame.classList.add('is-dragging');
-      frame.setPointerCapture?.(event.pointerId);
+      window.addEventListener('pointerup', stopPanning, true);
+      window.addEventListener('pointercancel', stopPanning, true);
+      window.addEventListener('mouseup', stopPanning, true);
+      window.addEventListener('touchend', stopPanning, true);
+      window.addEventListener('touchcancel', stopPanning, true);
+      window.addEventListener('blur', stopPanning, true);
+      if (typeof frame.setPointerCapture === 'function') {
+        try {
+          frame.setPointerCapture(event.pointerId);
+        } catch {
+          // Safari can reject pointer capture during rapid layout transitions.
+        }
+      }
       event.preventDefault();
     });
 
@@ -644,6 +766,10 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     frame.addEventListener('pointerup', stopPanning);
     frame.addEventListener('pointercancel', stopPanning);
     frame.addEventListener('lostpointercapture', stopPanning);
+    frame.addEventListener('mouseleave', stopPanning);
+    frame.addEventListener('mouseup', stopPanning);
+    frame.addEventListener('touchend', stopPanning);
+    frame.addEventListener('touchcancel', stopPanning);
 
     frame.appendChild(svg);
     const sourceNode = shell.querySelector('.mermaid-source');
@@ -675,13 +801,17 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     });
   }
 
-  createZoomButton(label, ariaLabel) {
+  createZoomButton(label, ariaLabel, { icon = '' } = {}) {
     const button = document.createElement('button');
     button.type = 'button';
     button.className = 'mermaid-zoom-btn ui-preview-action';
     button.setAttribute('aria-label', ariaLabel);
     button.title = ariaLabel;
-    button.textContent = label;
+    if (icon) {
+      setDiagramActionButtonIcon(button, icon);
+    } else {
+      button.textContent = label;
+    }
     return button;
   }
 }