v0.1.5 — export graph as PNG (closes #4)

Adds a download button to the bottom-left React Flow controls that
exports the current canvas view as a PNG with the dot grid preserved.

- New util src/client/utils/exportPng.ts: html-to-image capture +
  manual canvas composition (solid bg + dot grid + captured layer).
  Works around html-to-image's SVG <pattern> limitations and produces
  a deterministic 3x retina PNG.
- During capture, temporary CSS disables ring-shadow halos and forces
  service node bodies to a solid dark fill so the dot grid doesn't
  bleed through. State is still indicated by border colors and the
  inner state dot. Group node headers are excluded so their outlines
  stay intact.
- New component src/client/components/ExportPngButton.tsx integrated
  as a custom ControlButton inside <Controls> (bottom-left).
- App.tsx: id="dashboard-canvas" + data-no-export on project filter.
- i18n: 4 keys (EN + ES) for the button and 3 error states.
- New dependency: html-to-image@1.11.13
This commit is contained in:
RGJorge
2026-05-16 02:08:22 +00:00
parent 2a660c1828
commit 71b8f94e21
6 changed files with 228 additions and 4 deletions
+2 -1
View File
@@ -1,6 +1,6 @@
{
"name": "containerflow",
"version": "0.1.4",
"version": "0.1.5",
"license": "AGPL-3.0-or-later",
"author": "Jorge Gonzalez D. (RGJorge)",
"type": "module",
@@ -21,6 +21,7 @@
"@modelcontextprotocol/sdk": "^1.27.1",
"dockerode": "^4",
"hono": "^4",
"html-to-image": "^1.11.13",
"lucide-react": "^0.577.0",
"yaml": "^2",
"zod": "^3"