Skip to content

fix(erd): clean PNG capture, SVG export in the theme's colours like the screen (#1153) - #1200

Merged
ZhuchkaTriplesix merged 1 commit into
devfrom
issue/1153-erd-export
Oct 9, 2026
Merged

ZhuchkaTriplesix merged 1 commit into
devfrom
issue/1153-erd-export

Conversation

@ZhuchkaTriplesix

Copy link
Copy Markdown
Member

Closes #1153

What was wrong

  • PNG captured the interaction state. The RepaintBoundary holds the whole canvas, so a picked table (other cards at 35 % opacity), the hover highlight and the edge tooltip ended up in the image.
  • PNG failures were silent. _exportPng() was not awaited and had no error handling; a canvas too big for the GPU failed without a message.
  • SVG did not look like the screen. Fixed light colours (in a dark theme the PNG was dark and the SVG light), card radius 6 instead of 8, sans-serif types instead of monospace, column names shifted by the PK / FK pills instead of lining up, no column count in the header.
  • The acceptance test was weak. It checked one relation's <title>, not markers for every relation, and only long types were checked for fitting, not table or column names.

Changes

  • PNG: the picked table, hover highlight and edge label are cleared for one frame before the capture; the pick is restored afterwards. Errors show a toast that points to SVG.
  • SVG: ErdSvgColors (light defaults); the diagram view passes the current theme's colours. Card radius 8, header tint and column count, one key slot per card, monospace types.
  • Edges and end markers carry erd-edge / erd-ends classes.
  • Tests: an edge and end markers for every relation; long table and column names shortened; names of a card line up; caller colours are used; PNG export works while a table is picked.

…he screen (#1153)

The PNG captured the current interaction: a picked table faded the other
cards, and the hover highlight and edge label were in the picture. The capture
now clears them for one frame and restores the pick. A failed render (too big
for the GPU) shows an error that points to SVG instead of failing silently.

The SVG used fixed light colours, so in a dark theme it no longer matched the
PNG or the screen. It now takes the theme's colours, a card radius of 8 px as on
screen, monospace types, the column count in the header, and one key slot per
card so the column names line up. Edges and their end markers carry classes, so
a test checks that every relation is drawn with its markers.
@github-actions github-actions Bot added bug Something isn't working frontend Theme parser epic label: frontend ui User interface components and widgets P2 Medium priority / Parity & Refactoring labels Oct 9, 2026
@ZhuchkaTriplesix
ZhuchkaTriplesix merged commit 762e1fc into dev Oct 9, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working frontend Theme parser epic label: frontend P2 Medium priority / Parity & Refactoring ui User interface components and widgets

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant