Skip to content

feat: add gradient primitives, GraphNode, and ProgressBarNode#298

Open
st0o0 wants to merge 7 commits into
Aaronontheweb:devfrom
st0o0:feature/gradient-primitives
Open

feat: add gradient primitives, GraphNode, and ProgressBarNode#298
st0o0 wants to merge 7 commits into
Aaronontheweb:devfrom
st0o0:feature/gradient-primitives

Conversation

@st0o0

@st0o0 st0o0 commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Add Color.Lerp for RGB interpolation and a Gradient record with color stop interpolation, forming the foundation
    for gradient-colored rendering.
  • Add GraphNode — a reactive layout node that renders live scrolling graphs in four styles (Blocks, Outline,
    Braille, ASCII) with gradient coloring, configurable data range, and data-driven invalidation.
  • Add ProgressBarNode — a single-row progress bar with gradient fill, customizable fill/empty characters, and an
    optional label.
  • Add an interactive Graphs & Progress gallery page demonstrating live graph style switching and an animated
    gradient progress bar.
  • Add full component documentation for GraphNode and ProgressBarNode. Update color docs with Color.Lerp and
    Gradient sections.

Changes

Color.cs — Add Lerp(Color a, Color b, float t) for linear RGB interpolation.

Gradient.cs — Immutable color gradient with evenly spaced or custom-positioned stops. Sample(float t) returns the
interpolated color.

GraphNode.cs — Reactive layout node with four render styles, gradient support, SetData for immediate invalidation,
and testable TimeProvider-based timer.

GraphStyle.cs — Enum: Blocks, Outline, Braille, Ascii.

ProgressBarNode.cs — Single-row bar with gradient fill, custom chars, label format, and invalidation on value
change. Guarded against double-dispose.

GraphGalleryPage.cs / GraphGalleryViewModel.cs — Interactive demo with live data, style switcher, and animated
progress bar.

docs/components/graph-node.md — Full component documentation with API reference.

docs/components/progress-bar-node.md — Full component documentation with API reference.

docs/styling/colors.md — New Color.Lerp and Gradient sections, updated component table.

docs/components/index.md — Added GraphNode and ProgressBarNode to display components.

Test coverage

  • ColorTests — Lerp at boundaries, midpoint, clamp, and non-RGB fallback
  • GradientTests — Even distribution, custom stops, boundary sampling
  • GraphNodeTests — All four render styles, gradient colors, data-driven invalidation, timer lifecycle
  • ProgressBarNodeTests — Half-full rendering, gradient, empty bounds, label, double-dispose safety

Test plan

  • dotnet test — all new and existing tests pass
  • Run the gallery demo, navigate to Graphs & Progress, switch between all four styles
  • Verify gradient colors render correctly on the graph and progress bar
  • Verify existing gallery pages are unaffected

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant