Josh McKinney 56455e0fee
fix(layout): don't leave gaps between chunks (#408)
Previously the layout used the floor of the calculated start and width
as the value to use for the split Rects. This resulted in gaps between
the split rects.

This change modifies the layout to round to the nearest column instead
of taking the floor of the start and width. This results in the start
and end of each rect being rounded the same way and being strictly
adjacent without gaps.

Because there is a required constraint that ensures that the last end is
equal to the area end, there is no longer the need to fixup the last
item width when the fill (as e.g. width = x.99 now rounds to x+1 not x).

The colors example has been updated to use Ratio(1, 8) instead of
Percentage(13), as this now renders without gaps for all possible sizes,
whereas previously it would have left odd gaps between columns.
2023-08-18 10:23:13 +00:00
..

Examples

These gifs were created using Charm VHS.

VHS has a problem rendering some background color transitions, which shows up in several examples below. See https://github.com/charmbracelet/vhs/issues/344 for more info. These problems don't occur in a terminal.

Demo (demo.rs)

This is the demo example from the main README. It is available for each of the backends.

cargo run --example=demo --features=crossterm
cargo run --example=demo --no-default-features --features=termion
cargo run --example=demo --no-default-features --features=termwiz

Demo

Barchart (barchart.rs

cargo run --example=barchart --features=crossterm

Barchart

Block (block.rs)

cargo run --example=block --features=crossterm

Block

Calendar (calendar.rs)

cargo run --example=calendar --features=crossterm widget-calendar

Calendar

Canvas (canvas.rs)

cargo run --example=canvas --features=crossterm

Canvas

Chart (chart.rs)

cargo run --example=chart --features=crossterm

Chart

Colors (colors.rs)

cargo run --example=colors --features=crossterm

Colors

Custom Widget (custom_widget.rs)

cargo run --example=custom_widget --features=crossterm

This is not a particularly exciting example visually, but it demonstrates how to implement your own widget.

Custom Widget

Gauge (gauge.rs)

Please note: the background renders poorly when we generate this example using VHS. This problem doesn't generally happen during normal rendering in a terminal. See https://github.com/charmbracelet/vhs/issues/344 for more details

cargo run --example=gauge --features=crossterm

Gauge

Hello World (hello_world.rs)

cargo run --example=hello_world --features=crossterm

This is a pretty boring example, but it contains some good comments of documentation on some of the standard approaches to writing tui apps.

Hello World

Inline (inline.rs)

cargo run --example=inline --features=crossterm

Inline

Layout (layout.rs)

cargo run --example=layout --features=crossterm

Layout

List (list.rs)

cargo run --example=list --features=crossterm

List

Modifiers (modifiers.rs)

cargo run --example=modifiers --features=crossterm

Modifiers

Panic (panic.rs)

cargo run --example=panic --features=crossterm

Panic

Paragraph (paragraph.rs)

cargo run --example=paragraph --features=crossterm

Paragraph

Popup (popup.rs)

cargo run --example=popup --features=crossterm

Please note: the background renders poorly when we generate this example using VHS. This problem doesn't generally happen during normal rendering in a terminal. See https://github.com/charmbracelet/vhs/issues/344 for more details

Popup

Scrollbar (scrollbar.rs)

cargo run --example=scrollbar --features=crossterm

Scrollbar

Sparkline (sparkline.rs)

cargo run --example=sparkline --features=crossterm

Sparkline

Table (table.rs)

cargo run --example=table --features=crossterm

Table

Tabs (tabs.rs)

cargo run --example=tabs --features=crossterm

Tabs

User Input (user_input.rs)

cargo run --example=user_input --features=crossterm

User Input