fix(present): teken mermaid-pijlpunten als polygon zodat de richting zichtbaar is (#941) #943

Merged

brenno merged 1 commit from fix/941-mermaid-arrowheads into main

2026-07-28 01:13:15 +00:00

brenno commented

2026-07-28 01:13:13 +00:00

Owner

Verhelpt #941.

Een Mermaid-flowchart toonde zijn lijnen zonder pijlpunten, dus de richting was niet af te lezen. Mermaid tekent elke pijl met een SVG-<marker>, en flutter_svg (vector_graphics) rendert <marker> niet — sanitize_svg.dart haalt ze er dan ook uit (de allow-list spiegelt wat de lezer aankan).

Zelfde aanpak als de stijl-inliner (svg_style_inline.js, #862): terwijl de SVG in de DOM hangt meet een nieuwe stap per edge het eindpunt en de richting (getPointAtLength) en zet er een <polygon>-driehoek neer, in de lijnkleur en in dezelfde groep (zodat een transform op die groep óók geldt). flutter_svg tekent die wél; de opschoning laat polygon/points/fill staan.

Werkt voor beide renderpaden (desktop-WebView en web), dus voor presentatie, preview, thumbnails en de PDF/PPTX-export.

Tests. test/sanitize_svg_test.dart houdt vast dat een polygon-pijlpunt door de opschoning komt en de marker eruit. De JS-geometrie draait alleen in een browser: geverifieerd (getPointAtLength → correcte driehoek, marker verwijderd) én handmatig op de macOS-app — de pijlpunten verschijnen nu correct op de beslisboom.

make check groen (86,7% dekking). CHANGELOG + svg_style_inline.js-kop bijgewerkt.

Verhelpt #941. Een Mermaid-flowchart toonde zijn lijnen zonder pijlpunten, dus de richting was niet af te lezen. Mermaid tekent elke pijl met een SVG-`<marker>`, en `flutter_svg` (vector_graphics) rendert `<marker>` niet — `sanitize_svg.dart` haalt ze er dan ook uit (de allow-list spiegelt wat de lezer aankan). Zelfde aanpak als de stijl-inliner (`svg_style_inline.js`, #862): terwijl de SVG in de DOM hangt meet een nieuwe stap per edge het eindpunt en de richting (`getPointAtLength`) en zet er een `<polygon>`-driehoek neer, in de lijnkleur en in dezelfde groep (zodat een transform op die groep óók geldt). flutter_svg tekent die wél; de opschoning laat `polygon`/`points`/`fill` staan. Werkt voor beide renderpaden (desktop-WebView en web), dus voor presentatie, preview, thumbnails en de PDF/PPTX-export. **Tests.** `test/sanitize_svg_test.dart` houdt vast dat een polygon-pijlpunt door de opschoning komt en de marker eruit. De JS-geometrie draait alleen in een browser: geverifieerd (getPointAtLength → correcte driehoek, marker verwijderd) én handmatig op de macOS-app — de pijlpunten verschijnen nu correct op de beslisboom. `make check` groen (86,7% dekking). CHANGELOG + svg_style_inline.js-kop bijgewerkt.

brenno added 1 commit

2026-07-28 01:13:14 +00:00

fix(present): teken mermaid-pijlpunten als polygon zodat de richting zichtbaar is (#941 )

scans / scans (pull_request) Successful in 3m21s

Details

135b513179

Een Mermaid-flowchart toonde zijn verbindingslijnen zonder pijlpunten, dus de
richting was formeel niet af te lezen. Mermaid tekent elke pijl met een
SVG-`<marker>`, en `flutter_svg` (vector_graphics) rendert `<marker>` niet — het
negeert ze, en `sanitize_svg.dart` haalt ze er dan ook uit (de allow-list
spiegelt precies wat de lezer aankan).

Zelfde aanpak als de stijl-inliner (`svg_style_inline.js`, #862): terwijl de SVG
in de DOM hangt meet een nieuwe stap per edge met een marker het eindpunt en de
richting (`getPointAtLength`) en zet er een expliciete `<polygon>`-driehoek neer,
in de kleur van de lijn en in dezelfde groep (zodat een transform op die groep
óók voor de pijl geldt). flutter_svg tekent die driehoek wél; de opschoning laat
`polygon`/`points`/`fill` staan en gooit de `<marker>` eruit.

Werkt voor beide renderpaden (desktop-WebView en web) omdat beide de inliner al
aanroepen, en dus voor presentatie, preview, thumbnails en de PDF/PPTX-export.

Test: `test/sanitize_svg_test.dart` houdt vast dat een polygon-pijlpunt door de
opschoning komt en de marker eruit. De JS-geometrie draait alleen in een browser
en is daar geverifieerd (getPointAtLength → correcte driehoek) plus handmatig op
de macOS-app.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

brenno merged commit fdd7c11854 into main

2026-07-28 01:13:15 +00:00

brenno deleted branch fix/941-mermaid-arrowheads

2026-07-28 01:13:15 +00:00

brenno referenced this pull request from a commit

2026-07-28 01:13:16 +00:00

Merge pull request 'fix(present): teken mermaid-pijlpunten als polygon zodat de richting zichtbaar is (#941)' (#943) from fix/941-mermaid-arrowheads into main

brenno referenced this pull request

2026-07-28 01:13:30 +00:00

Mermaid-flowchart mist pijlpunten (flutter_svg rendert geen <marker>) #941