Skip to content

fix(erd): edge label readable at any zoom, hover tolerance in screen px, Mermaid FK ends (#1156) - #1203

Merged
ZhuchkaTriplesix merged 2 commits into
devfrom
issue/1156-erd-edges
Oct 9, 2026
Merged

ZhuchkaTriplesix merged 2 commits into
devfrom
issue/1156-erd-edges

Conversation

@ZhuchkaTriplesix

@ZhuchkaTriplesix ZhuchkaTriplesix commented Oct 9, 2026 •

Copy link
Copy Markdown
Member

Closes #1156

What was wrong

Nullability loading, the card's type? marker and the circle / bar edge ends (screen and SVG) were already in place. Still broken:

  • The edge label never showed. The edge CustomPaint sat above the hover layer and is hit everywhere by default, so the hover layer never saw the pointer. The hover existed in code but did nothing in the app.
  • The edge label scaled with the canvas. It was drawn inside the zoomed canvas: at the fit zoom of a large schema (now below 20 %) the 11 px text became unreadable, and at 300 % it was three times its size.
  • The hover tolerance was in canvas units. 6 canvas px is under 1 screen px when zoomed out (an edge is nearly impossible to hit) and 18 px at 300 %.
  • Mermaid ignored nullability. Every relation was ||--o{ (zero or many), so the export did not tell a nullable FK from a NOT NULL one, while the screen and the SVG did.
  • No widget test for the edge hover, which the acceptance asks for.

Changes

  • The edge painter takes no pointer (hitTest returns false), so hovering an edge reaches the hover layer.
  • The edge label is drawn above the canvas in screen space, at the pointer's transformed position. It follows pans and zooms and is never in a PNG.
  • Hover tolerance: 6 screen px at any zoom.
  • Mermaid: ||--|{ for a NOT NULL foreign key, ||--o{ for a nullable one. This matches the circle at the FK end on screen, as the issue specifies.
  • Tests: hovering an edge shows orders.user_id → users.id, and after zooming out the label keeps its screen size. Mermaid is checked for both nullable and NOT NULL.

…px, Mermaid FK ends (#1156)

The edge label lived inside the zoomed canvas: at the fit zoom of a large
schema it shrank to an unreadable size, at 300 % it tripled. It is now drawn
above the canvas in screen space and follows pans and zooms. The 6 px hover
tolerance was in canvas units, so an edge was hard to hit when zoomed out and
too easy to hit when zoomed in; it is now 6 screen px.

Mermaid wrote every relation as zero or many; a NOT NULL foreign key is now
one or many, as the screen and the SVG draw it.
@github-actions github-actions Bot added enhancement New feature or request frontend Theme parser epic label: frontend ui User interface components and widgets P3 Low priority / Polish & Enhancements labels Oct 9, 2026
#1156)

A CustomPaint is hit everywhere unless its painter says otherwise, and a Stack
stops at the first child hit. The edge painter sat above the hover layer, so
the hover layer never saw the pointer and the edge label never showed. The new
hover test caught it.
@ZhuchkaTriplesix
ZhuchkaTriplesix merged commit 22b8a32 into dev Oct 9, 2026
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request frontend Theme parser epic label: frontend P3 Low priority / Polish & Enhancements ui User interface components and widgets

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant