v0.2.1: rework PNG export to draw directly on canvas, like netbox-topology-views

Investigated how MrBlake/mrb-netbox-topology-views does its PNG export:
it renders its topology natively onto a canvas (vis-network draws
there directly) and just calls canvas.toDataURL() - no SVG round-trip
at all. Applied the same principle here.

Previous approach loaded the standalone SVG export via <img src="blob:...">
and rasterized that onto a canvas - fragile, because the whole export
failed if that SVG document wasn't strictly valid XML (as our leaked
{# #} comment bug demonstrated) or if a single device type image
reference inside it couldn't be resolved.

New approach: a dedicated export/data/ endpoint returns the elevation's
plain pixel geometry as JSON (positions, sizes, colors, labels, image
URLs - the same numbers the SVG is built from), and export.js draws
that directly onto a <canvas> with native 2D primitives (fillRect,
strokeRect, fillText/strokeText, drawImage). Device type images are
fetched individually as same-origin blobs before drawing; one image
failing to load only drops that picture; the rest of the export still
succeeds. Added a combined front+rear PNG option.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-16 12:53:42 +02:00
co-authored by Claude Sonnet 5
parent 3420d84803
commit 67d999e234
7 changed files with 274 additions and 61 deletions
+7 -4
View File
@@ -45,10 +45,13 @@ Dazu:
Components"-Dropdown (genau wie am echten Gerät) legt neue Komponenten pro Typ an —
nötig für Platzhalter ohne Gerätetyp, die nichts zum Syncen haben.
* **Export** – Button **„Export"** über der Elevation: Front bzw. Rear jeweils als
eigenständige **SVG**- oder **PNG**-Datei, sowie das ganze Konzept (beide Seiten) als
**Draw.io**-Diagramm (`.drawio`, per Datei > Öffnen oder Extras > Diagramm bearbeiten
in diagrams.net einlesbar). PNG wird komplett im Browser aus dem SVG gerastert —
dafür ist keine zusätzliche Bildbibliothek auf dem Server nötig.
eigenständige **SVG**-Datei, als **PNG** (einzeln oder beide Seiten zusammen), sowie
das ganze Konzept als **Draw.io**-Diagramm (`.drawio`, per Datei > Öffnen oder Extras
> Diagramm bearbeiten in diagrams.net einlesbar). PNG wird direkt im Browser auf ein
`<canvas>` gezeichnet (derselbe Ansatz wie bei netbox-topology-views) statt ein SVG zu
rastern — Gerätetyp-Bilder werden dafür einzeln per `fetch()` als Blob geladen; scheitert
eines davon (z.B. Netzwerkfehler), fehlt nur dieses eine Bild im Export, der Rest bleibt
unversehrt. Für PNG ist keine zusätzliche Bildbibliothek auf dem Server nötig.
* Vollständige REST-API, Filter, CSV-Import/-Export, Bulk-Edit, Changelog, Journal,
Tags, Custom Fields und globale Suche — wie bei jedem Core-Objekt.