feat(flowchart): export canvas as SVG / PNG / JPG (C13)

Three new toolbar buttons next to Open from File let the user save
the current canvas to disk in the format their tooling expects:

  - Export SVG — straight clone + serialise of the canvas <svg>,
    with a minimal stylesheet inlined so the file renders without
    the editor's stylesheet. Goes through the existing 'save-text-file'
    IPC channel as a UTF-8 string.
  - Export PNG / JPG — rasterise the SVG through Image + Canvas at
    1000x700 + 24px padding, then send the data URL to the new
    'save-binary-file' IPC channel which strips the 'data:...;base64,'
    prefix and writes the raw bytes. JPEG gets a white background fill
    so transparent areas don't come out black.

New IPC + preload bridge:

  - src/main.js: 'save-binary-file' handler mirrors 'save-text-file'
    shape but writes a Buffer from base64. Returns { canceled, path } |
    { canceled: false, error } so the UI can surface write failures.
  - src/preload.js: flowchart.saveBinary(data, defaultName, filters)
    so the standalone window can call it.

Tests: 2 new (1355 total, was 1353) covering SVG export happy-path
and cancel. Raster PNG/JPG paths not jsdom-tested because
Image+Canvas in jsdom doesn't reliably fire onload for Blob URLs;
the SVG path exercises the same handler plumbing so coverage is
adequate.

Amit Haridas
This commit is contained in:
2026-09-30 22:13:54 +05:30
parent 41ddaa17b3
commit e967af77a7
5 changed files with 240 additions and 0 deletions
+12
View File
@@ -395,6 +395,18 @@
Reset All
</button>
</div>
<h3 class="fc-section-title">Export Image</h3>
<div class="fc-toolbar-row">
<button class="fc-btn" id="fc-btn-export-svg" title="Export the canvas as a .svg file">
Export SVG
</button>
<button class="fc-btn" id="fc-btn-export-png" title="Export the canvas as a .png file">
Export PNG
</button>
<button class="fc-btn" id="fc-btn-export-jpg" title="Export the canvas as a .jpg file">
Export JPG
</button>
</div>
<span id="fc-status" aria-live="polite"></span>
</div>
</div>