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

Merged

brenno merged 2 commits from fix/868-mermaid-text-normalize into main

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

brenno commented

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

Owner

Vervolg op #862. Nadat de diagramvormen weer kleurden, bleek de tekst een laag dieper alsnog verkeerd geplaatst: node-labels versprongen buiten hun knoop en overlapten, de knopen leken leeg.

Oorzaak: OciDeck tekent de mermaid-SVG met flutter_svg (vector_graphics), dat mermaids tekstlayout niet betrouwbaar volgt — text-anchor:middle, em-eenheden in y/dy, en per woord geneste <tspan>s.

Fix (de lichtere normalisatie): de gedeelde inliner (assets/web_export/svg_style_inline.js) bakt nu, in de browser die mermaid al rendert, elke tekstregel om naar de vorm die flutter_svg wél volgt: één platte <tspan> met absolute px-x/y op de al berekende plek (getStartPositionOfChar, dus inclusief mermaids eigen middle-anchoring en em-berekening) en text-anchor:start. Geen middle, geen em, geen geneste tspans. Vector blijft behouden.

Dezelfde slag repareert een separator-bug in de inliner: een bestaande style zonder afsluitende ; smolt samen met de eerste toevoeging (stroke: nonefill:…).

Verificatie: browserprobes bevestigen dat de bak-stap posities exact behoudt (getStartPositionOfChar-drift = 0) en het <style>-blok verdwijnt. En vooral: een verse make build-web lokaal geserveerd met het live-deck toont in flutter_svg de labels nu gecentreerd ín hun knopen (rechthoek "Kat ziet iets op de rand van de tafel", ruit "Kijkt de mens?") in plaats van lege vakken met losgeslagen overlappende tekst. Raakt web en desktop (beide renderpaden delen de inliner).

make check groen.

fixes #868

Vervolg op #862. Nadat de diagramvormen weer kleurden, bleek de **tekst** een laag dieper alsnog verkeerd geplaatst: node-labels versprongen buiten hun knoop en overlapten, de knopen leken leeg. **Oorzaak:** OciDeck tekent de mermaid-SVG met `flutter_svg` (vector_graphics), dat mermaids tekstlayout niet betrouwbaar volgt — `text-anchor:middle`, `em`-eenheden in `y`/`dy`, en per woord geneste `<tspan>`s. **Fix (de lichtere normalisatie):** de gedeelde inliner (`assets/web_export/svg_style_inline.js`) bakt nu, in de browser die mermaid al rendert, elke tekstregel om naar de vorm die flutter_svg wél volgt: één platte `<tspan>` met absolute px-`x`/`y` op de al berekende plek (`getStartPositionOfChar`, dus inclusief mermaids eigen middle-anchoring en em-berekening) en `text-anchor:start`. Geen `middle`, geen `em`, geen geneste tspans. Vector blijft behouden. Dezelfde slag repareert een separator-bug in de inliner: een bestaande `style` zonder afsluitende `;` smolt samen met de eerste toevoeging (`stroke: nonefill:…`). **Verificatie:** browserprobes bevestigen dat de bak-stap posities exact behoudt (`getStartPositionOfChar`-drift = 0) en het `<style>`-blok verdwijnt. En vooral: een verse `make build-web` lokaal geserveerd met het live-deck toont in flutter_svg de labels nu **gecentreerd ín hun knopen** (rechthoek "Kat ziet iets op de rand van de tafel", ruit "Kijkt de mens?") in plaats van lege vakken met losgeslagen overlappende tekst. Raakt web en desktop (beide renderpaden delen de inliner). `make check` groen. fixes #868

brenno added 1 commit

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

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

scans / scans (pull_request) Successful in 3m20s

Details

8430a9bbf1

flutter_svg plaatste mermaids labels verkeerd: het volgt text-anchor:middle,
em-eenheden en per-woord geneste tspans niet, waardoor labels buiten hun knoop
versprongen en overlapten. De gedeelde inliner bakt nu in de browser elke
tekstregel om naar één platte <tspan> met absolute px-x/y op de al berekende
plek (getStartPositionOfChar) en text-anchor:start. Repareert ook een
separator-bug (style zonder afsluitende ; smolt samen met de eerste toevoeging).

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

brenno added 1 commit

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

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

scans / scans (pull_request) Successful in 3m17s

Details

400f5b4377

Een hoge flowchart liep onder de slide uit: SvgPicture kreeg alleen een breedte
en leidde de hoogte uit de beeldverhouding af, zonder plafond. MermaidDiagram
begrenst nu beide maten (uit de viewBox-verhouding) en schaalt een te hoog
diagram met behoud van vorm omlaag tot het binnen de slide past. Horizontaal
gecentreerd zonder het kader te laten uitzetten.

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

brenno merged commit 73db55de45 into main

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

brenno referenced this pull request from a commit

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

Merge pull request 'fix(mermaid): bak tekstlayout naar flutter_svg-veilige vorm (#868)' (#871) from fix/868-mermaid-text-normalize into main