mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-10-01 09:19:34 +05:30
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user