Skip to content

perf(erd): eliminate per-frame allocations of Path, Paint, and TextPainter in ErdRelationPainter #1518

Open

Description

@ZhuchkaTriplesix

Summary

In lib/features/erd/widgets/erd_relation_painter.dart (lines 36–98):

Inside ErdRelationPainter.paint(Canvas canvas, Size size), the rendering loop iterates over all diagram routes on every single animation frame of panning, zooming, or dragging:

for (final r in routes) {
  if (_focused(r) != pass || r.points.length < 2) continue;
  final paint = material.Paint() ... // Reallocated for each route
  canvas.drawPath(roundedPath(r.points), paint); // Full Path recalculated for each route

  // Cardinality labels '1' and '*':
  _label(canvas, r.relation.oneToOne ? '1' : '*', ...);
}

Inside _label():

final tp = material.TextPainter(
  text: material.TextSpan(text: text, style: TextStyle(...)), // 3 allocations per label
)..layout(); // Synchronous text layout pass
tp.paint(canvas, ...);
tp.dispose();

On a realistic schema with 150 tables and 300 relations:

  • 00 \text{ relations} \times 2 \text{ labels} = 600 \text{ TextPainter} + 600 \text{ TextSpan} + 600 \text{ TextStyle} + 300 \text{ Paint} + 300 \text{ Path}$
  • ~2,400 heap allocations PER FRAME
  • At 120 FPS, this generates ~290,000 allocations per second, triggering constant GC pressure and dropping frame rates to 40–50 FPS during pan/zoom.

Architectural Solution: Zero-Allocation CustomPainter

  1. Path Caching in ErdRoute:
    • Precompute and store Path? _cachedPath on ErdRoute when layout/routing completes.
    • Draw the precomputed path directly without calling roundedPath(r.points) per frame.
  2. Reused Static Paint Instances:
    • Maintain reusable _basePaint and _highlightPaint instances, modifying colors and stroke widths in place instead of creating Paint() in a loop.
  3. Pre-laid-out Cardinality Painters / Picture Caching:
    • The cardinality markers are always '1' and '*'. Pre-layout them once in static TextPainter instances or pre-record their Picture.

Acceptance Criteria

  • Panning and zooming on schemas with 300+ relations performs zero TextPainter, Paint, or Path allocations per frame.
  • ERD diagram maintains steady 120 Hz frame budget during pan/zoom.

Activity

  1. added
    frontendTheme parser epic label: frontend
    performanceTheme parser epic label: performance
    uiUser interface components and widgets
    P2Medium priority / Parity & Refactoring
    on Oct 12, 2026
  2. added this to the 0.5.0 milestone on Oct 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Medium priority / Parity & RefactoringfrontendTheme parser epic label: frontendperformanceTheme parser epic label: performanceuiUser interface components and widgets

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions