synergycodes/ng-diagram/ng-diagram-export

import { inject, Injectable } from '@angular/core';
import { toBlob, toJpeg, toSvg } from 'html-to-image';
import { NgDiagramModelService } from 'ng-diagram';
const MARGIN = 40; // px of empty space around the content
const MAX_CANVAS_AREA = 4096 * 4096; // iOS limit; a bigger canvas stays blank
interface CaptureOptions {
  width: number;
  height: number;
  backgroundColor: string;
  pixelRatio: number;
  style: { transform: string; transformOrigin: string };
}
/** Resolves after change detection has written the latest model state to the DOM. */
export const waitForRender = () =>
  new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
/** Copies the computed stroke of every edge path to inline styles; returns a function that restores them. */
export function inlineEdgeStrokes(canvas: HTMLElement): () => void {
  const restores: (() => void)[] = [];
  canvas.querySelectorAll<SVGPathElement>('ng-diagram-base-edge path').forEach((path) => {
    const previous = path.getAttribute('style');
    const computed = getComputedStyle(path);
    for (const prop of ['stroke', 'stroke-width', 'stroke-dasharray', 'stroke-opacity']) {
      path.style.setProperty(prop, computed.getPropertyValue(prop));
    }
    restores.push(() => (previous === null ? path.removeAttribute('style') : path.setAttribute('style', previous)));
  });
  return () => restores.forEach((restore) => restore());
}
@Injectable()
export class DiagramExportService {
  private readonly modelService = inject(NgDiagramModelService);
  /** `diagramEl` is the <ng-diagram> host element. */
  async png(diagramEl: HTMLElement, fileName = 'diagram.png'): Promise<void> {
    const blob = await this.capture(diagramEl, (canvas, options) => toBlob(canvas, options));
    if (blob) this.download(URL.createObjectURL(blob), fileName, true);
  }
  async jpeg(diagramEl: HTMLElement, fileName = 'diagram.jpg'): Promise<void> {
    const url = await this.capture(diagramEl, (canvas, options) => toJpeg(canvas, { ...options, quality: 0.95 }));
    if (url) this.download(url, fileName);
  }
  // HTML inside an SVG <foreignObject>: fine for browsers, not an editable vector drawing
  async svg(diagramEl: HTMLElement, fileName = 'diagram.svg'): Promise<void> {
    const url = await this.capture(diagramEl, (canvas, options) => toSvg(canvas, options));
    if (url) this.download(url, fileName);
  }
  private async capture<T>(
    diagramEl: HTMLElement,
    render: (canvas: HTMLElement, options: CaptureOptions) => Promise<T>
  ): Promise<T | null> {
    // Nodes and edges only: the background pattern, watermark and panels are outside this element
    const canvas = diagramEl.querySelector<HTMLElement>('ng-diagram-canvas');
    const model = this.modelService.getModel();
    // Measured bounds of visible content: ports, rotation, edge points and labels included
    const bounds = this.modelService.computePartsBounds(model.getNodes(), model.getEdges());
    if (!canvas || !bounds.width || !bounds.height) return null; // nothing measured yet
    const x = bounds.x - MARGIN;
    const y = bounds.y - MARGIN;
    const width = bounds.width + 2 * MARGIN;
    const height = bounds.height + 2 * MARGIN;
    const background = getComputedStyle(diagramEl).backgroundColor;
    const restoreEdges = inlineEdgeStrokes(canvas); // edge strokes as inline styles while copying
    try {
      return await render(canvas, {
        width,
        height,
        // the canvas is transparent: paint the diagram background (fallback: white)
        backgroundColor: background === 'rgba(0, 0, 0, 0)' ? '#ffffff' : background,
        // sharp on high-DPI screens, but never above the canvas area browsers can draw
        pixelRatio: Math.min(2, Math.sqrt(MAX_CANVAS_AREA / (width * height))),
        // replaces the pan/zoom transform: flow point (x, y) lands at image pixel (0, 0)
        style: { transform: `translate(${-x}px, ${-y}px) scale(1)`, transformOrigin: 'top left' },
      });
    } finally {
      restoreEdges();
    }
  }
  private download(url: string, fileName: string, revoke = false): void {
    const anchor = document.createElement('a');
    anchor.href = url;
    anchor.download = fileName;
    anchor.click();
    if (revoke) URL.revokeObjectURL(url);
  }
}

// providers: [provideNgDiagram(), DiagramExportService]
private readonly diagramRef = viewChild.required(NgDiagramComponent, { read: ElementRef });
async exportPng(): Promise<void> {
  // Selected elements show outlines and handles in the image: clear the selection, restore it after
  const model = this.modelService.getModel();
  const nodeIds = model.getNodes().filter((n) => n.selected).map((n) => n.id);
  const edgeIds = model.getEdges().filter((e) => e.selected).map((e) => e.id);
  await this.selection.deselectAll();
  await waitForRender(); // the DOM updates with the next change detection, not on await
  try {
    await this.exporter.png(this.diagramRef().nativeElement);
  } finally {
    await this.selection.select(nodeIds, edgeIds);
  }
}
// toJSON() drops computed values (measured*, computed*, node selection); details in ng-diagram-persistence
exportJson(): void {
  const blob = new Blob([this.modelService.toJSON()], { type: 'application/json' });
  const anchor = document.createElement('a');
  anchor.href = URL.createObjectURL(blob);
  anchor.download = 'diagram.json';
  anchor.click();
  URL.revokeObjectURL(anchor.href);
}
async importJson(event: Event): Promise<void> {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (!file) return;
  const data: Partial<Model> = JSON.parse(await file.text());
  this.model.set(initializeModel(data, this.injector)); // a new model re-initializes the diagram
}

export async function exportView(viewport: NgDiagramViewportService, diagramEl: HTMLElement): Promise<string> {
  await viewport.zoomToFit({ padding: 40 });
  await waitForRender(); // the new transform reaches the DOM with the next change detection
  return toJpeg(diagramEl, {
    quality: 0.95,
    pixelRatio: 2,
    // the capture includes everything inside <ng-diagram>; leave out what should not be in the image
    filter: (node) => !(node instanceof HTMLElement && node.dataset['exportIgnore'] === 'true'),
  });
}