Mermaid: node-tekst rendert op verkeerde positie in flutter_svg (labels leeg/verspringen), vervolg op #862 #868

New issue

Closed

opened 2026-07-25 21:22:29 +00:00 by brenno · 0 comments

brenno commented

2026-07-25 21:22:29 +00:00

Owner

Waargenomen op de live webdemo (ocideck.librekat.nl, bundel v0.1.0-23-g2f3df910, ná de #862-fix), slide 33 "De grote kat-beslisboom" van de proefpresentatie.

Symptoom: de vormen van een mermaid-diagram renderen sinds #862 correct in kleur (lichtgrijze nodes, ruit, dunne pijlen), maar de node-tekst staat niet in de vorm. De rechthoek- en ruit-nodes zijn leeg; labels verschijnen losgekoppeld op de verkeerde positie en overlappen elkaar (bijv. het label "Kat ziet iets op de rand van de tafel" zweeft rechts van zijn node en de laatste tekens vallen samen). Systemisch: bij elke node getoetst.

Oorzaak (analyse): OciDeck rendert de mermaid-SVG via flutter_svg (vector_graphics) naar het CanvasKit-canvas. Mermaid stelt de labelposities in met geneste transform/tspan-coordinaten die uitgaan van browser-fontmetrics; flutter_svg matcht die tekstlayout niet (geneste transforms op tekstgroepen + tspan x/dy + tekstmeting met een ander font), waardoor de labels verkeerd geplaatst worden. Dit staat los van #862: #862 ging over het <style>-blok dat flutter_svg negeert (fills), en is opgelost door de stijl-inliner. De tekst-positionering is een tweede, dieper liggende flutter_svg-beperking die pas zichtbaar werd toen de vlakken niet meer zwart waren.

Reproductie:

Open de webdemo met de proefpresentatie: ocideck.librekat.nl/?deck=https://librekat.nl/downloads/proefpresentatie.ocideck.
Ga naar de slide "De grote kat-beslisboom" (nr. 33).
Zie: gekleurde vormen, maar lege nodes en verspringende/overlappende labels.

Kandidaat-aanpakken (ontwerpkeuze):

A. Rasteren via de browser/WebView. Laat mermaid in de bestaande WebView (desktop) / JS-interop (web) renderen en leg het gerenderde diagram vast als PNG (canvas/getBoundingClientRect), en toon die PNG i.p.v. de SVG aan flutter_svg. De browser doet dan de tekstlayout perfect. Nadeel: raster i.p.v. vector (schaalbaarheid, bestandsgrootte, exportkwaliteit bij inzoomen).
B. SVG naar flutter_svg beter passend maken. De tekst-transform/tspan-structuur naar een vorm normaliseren die flutter_svg wél goed plaatst (transforms platslaan, tekst herpositioneren). Onzeker of het volledig kan; flutter_svg's tekstondersteuning is beperkt.
C. Mermaid-config aanpassen (font/thema/wrapping) zodat de posities toevalliger kloppen. Waarschijnlijk onvoldoende voor lange/gewrapte labels.

Aanbeveling: A (rasteren) geeft de betrouwbaarste weergave over alle vier de oppervlakken, maar het is een ontwerpkeuze (vector vs raster) — eerst afstemmen.

Ook meegenomen: een groot diagram loopt in presentatiemodus buiten het slidekader (onderkant valt weg). Mogelijk deels een gevolg van de verkeerde bounding box door dezelfde tekst-/transformkwestie; hoort in dezelfde slag.

**Waargenomen op de live webdemo** (ocideck.librekat.nl, bundel v0.1.0-23-g2f3df910, ná de #862-fix), slide 33 "De grote kat-beslisboom" van de proefpresentatie. **Symptoom:** de vormen van een mermaid-diagram renderen sinds #862 correct in kleur (lichtgrijze nodes, ruit, dunne pijlen), maar de **node-tekst staat niet in de vorm**. De rechthoek- en ruit-nodes zijn leeg; labels verschijnen losgekoppeld op de verkeerde positie en overlappen elkaar (bijv. het label "Kat ziet iets op de rand van de tafel" zweeft rechts van zijn node en de laatste tekens vallen samen). Systemisch: bij elke node getoetst. **Oorzaak (analyse):** OciDeck rendert de mermaid-SVG via `flutter_svg` (vector_graphics) naar het CanvasKit-canvas. Mermaid stelt de labelposities in met geneste `transform`/`tspan`-coordinaten die uitgaan van browser-fontmetrics; `flutter_svg` matcht die tekstlayout niet (geneste transforms op tekstgroepen + `tspan` x/dy + tekstmeting met een ander font), waardoor de labels verkeerd geplaatst worden. Dit staat **los van #862**: #862 ging over het `<style>`-blok dat flutter_svg negeert (fills), en is opgelost door de stijl-inliner. De tekst-positionering is een tweede, dieper liggende flutter_svg-beperking die pas zichtbaar werd toen de vlakken niet meer zwart waren. **Reproductie:** 1. Open de webdemo met de proefpresentatie: `ocideck.librekat.nl/?deck=https://librekat.nl/downloads/proefpresentatie.ocideck`. 2. Ga naar de slide "De grote kat-beslisboom" (nr. 33). 3. Zie: gekleurde vormen, maar lege nodes en verspringende/overlappende labels. **Kandidaat-aanpakken (ontwerpkeuze):** - **A. Rasteren via de browser/WebView.** Laat mermaid in de bestaande WebView (desktop) / JS-interop (web) renderen en leg het gerenderde diagram vast als PNG (canvas/`getBoundingClientRect`), en toon die PNG i.p.v. de SVG aan flutter_svg. De browser doet dan de tekstlayout perfect. Nadeel: raster i.p.v. vector (schaalbaarheid, bestandsgrootte, exportkwaliteit bij inzoomen). - **B. SVG naar flutter_svg beter passend maken.** De tekst-`transform`/`tspan`-structuur naar een vorm normaliseren die flutter_svg wél goed plaatst (transforms platslaan, tekst herpositioneren). Onzeker of het volledig kan; flutter_svg's tekstondersteuning is beperkt. - **C. Mermaid-config aanpassen** (font/thema/wrapping) zodat de posities toevalliger kloppen. Waarschijnlijk onvoldoende voor lange/gewrapte labels. Aanbeveling: A (rasteren) geeft de betrouwbaarste weergave over alle vier de oppervlakken, maar het is een ontwerpkeuze (vector vs raster) — eerst afstemmen. Ook meegenomen: een groot diagram loopt in presentatiemodus buiten het slidekader (onderkant valt weg). Mogelijk deels een gevolg van de verkeerde bounding box door dezelfde tekst-/transformkwestie; hoort in dezelfde slag.

brenno referenced this issue from a commit

2026-07-26 08:27:47 +00:00

fix(mermaid): bak tekstlayout naar flutter_svg-veilige vorm (#868)

brenno referenced this issue from a pull request that will close it,

2026-07-26 08:32:46 +00:00

fix(mermaid): bak tekstlayout naar flutter_svg-veilige vorm (#868) #871

brenno referenced this issue from a commit

2026-07-26 08:48:18 +00:00

fix(mermaid): schaal groot diagram naar het slidekader (#868)

brenno closed this issue

2026-07-26 08:57:16 +00:00

brenno referenced this issue from a commit