Skip to content

feat(erd): layered layout, orthogonal edges around tables and draggable cards - #1146

Merged
ZhuchkaTriplesix merged 3 commits into
devfrom
issue/1145-erd-layout-routing-drag
Oct 8, 2026
Merged

ZhuchkaTriplesix merged 3 commits into
devfrom
issue/1145-erd-layout-routing-drag

Conversation

@ZhuchkaTriplesix

Copy link
Copy Markdown
Member

Makes the ER diagram (#1063) readable on real schemas.

Layout (erd_layout.dart)

  • Layered: a referenced table sits in a layer left of the tables that reference it (longest-path layering, capped so cycles terminate; self references ignored for layering).
  • Inside a layer, cards are ordered by the average position of their neighbours (4 barycenter sweeps) to reduce crossings; layers are centred vertically.
  • Tables without relations go into a grid below the diagram.
  • Wider gaps between layers leave room for edge tracks. withPosition moves one card (drag); the canvas size follows the cards.

Edges (erd_router.dart, new)

  • Orthogonal routing with A* over a sparse grid built from the card borders (inflated by 14 px) and the column rows, with a penalty per bend: no edge passes through a table. Each end may leave / enter the left or the right side, whichever is cheaper.
  • Overlapping parallel segments of different edges are spread apart (nudging) instead of drawn on top of each other; the segments attached to column rows never move.
  • Drawn with rounded corners; crow's foot at the FK side, a bar at the referenced side.

Interaction (erd_view.dart)

  • Drag a table to move it; its edges re-route live. The canvas does not pan while a card is dragged; a 4 px slop keeps taps and the double tap that opens the table working.
  • Hover highlights the table, its related tables and their edges (accent colour, drawn on top; other edges fade).
  • Auto layout restores the computed layout.
  • Cards: tinted header with table icon and column count, key / link icons for PK / FK, monospace types, shadow (stronger while dragging). Toolbar uses QueryaActionButton.

Export

SVG uses the on-screen positions and routes (paths with a title per relation).

Tests (test/features/erd/erd_test.dart)

Parents left of children, isolated tables below, no overlap with a cycle and a self reference, withPosition; every route ends on the right card side at the right column row, is orthogonal and never crosses a card; a card placed in the way is avoided; parallel segments of different edges do not overlap; drag moves a card (not the canvas) and Auto layout puts it back. Existing ERD tests unchanged.

Not done: positions are not saved between sessions; very large schemas (hundreds of tables) are routed on every drag move and may feel slow.

Written without running locally; CI is the first run.

Closes #1145

@github-actions github-actions Bot added enhancement New feature or request frontend Theme parser epic label: frontend ui User interface components and widgets P2 Medium priority / Parity & Refactoring labels Oct 8, 2026
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 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