canvas/
canvas.rs

1//! # [Ratatui] Canvas example
2//!
3//! The latest version of this example is available in the [examples] folder in the repository.
4//!
5//! Please note that the examples are designed to be run against the `main` branch of the Github
6//! repository. This means that you may not be able to compile with the latest release version on
7//! crates.io, or the one that you have installed locally.
8//!
9//! See the [examples readme] for more information on finding examples that match the version of the
10//! library you are using.
11//!
12//! [Ratatui]: https://github.com/ratatui/ratatui
13//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
14//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
15
16use std::{
17    io::stdout,
18    time::{Duration, Instant},
19};
20
21use color_eyre::Result;
22use crossterm::{
23    event::{DisableMouseCapture, EnableMouseCapture, KeyEventKind},
24    ExecutableCommand,
25};
26use itertools::Itertools;
27use ratatui::{
28    crossterm::event::{self, Event, KeyCode, MouseEventKind},
29    layout::{Constraint, Layout, Position, Rect},
30    style::{Color, Stylize},
31    symbols::Marker,
32    widgets::{
33        canvas::{Canvas, Circle, Map, MapResolution, Points, Rectangle},
34        Block, Widget,
35    },
36    DefaultTerminal, Frame,
37};
38
39fn main() -> Result<()> {
40    color_eyre::install()?;
41    stdout().execute(EnableMouseCapture)?;
42    let terminal = ratatui::init();
43    let app_result = App::new().run(terminal);
44    ratatui::restore();
45    stdout().execute(DisableMouseCapture)?;
46    app_result
47}
48
49struct App {
50    exit: bool,
51    x: f64,
52    y: f64,
53    ball: Circle,
54    playground: Rect,
55    vx: f64,
56    vy: f64,
57    tick_count: u64,
58    marker: Marker,
59    points: Vec<Position>,
60    is_drawing: bool,
61}
62
63impl App {
64    const fn new() -> Self {
65        Self {
66            exit: false,
67            x: 0.0,
68            y: 0.0,
69            ball: Circle {
70                x: 20.0,
71                y: 40.0,
72                radius: 10.0,
73                color: Color::Yellow,
74            },
75            playground: Rect::new(10, 10, 200, 100),
76            vx: 1.0,
77            vy: 1.0,
78            tick_count: 0,
79            marker: Marker::Dot,
80            points: vec![],
81            is_drawing: false,
82        }
83    }
84
85    pub fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
86        let tick_rate = Duration::from_millis(16);
87        let mut last_tick = Instant::now();
88        while !self.exit {
89            terminal.draw(|frame| self.draw(frame))?;
90            let timeout = tick_rate.saturating_sub(last_tick.elapsed());
91            if event::poll(timeout)? {
92                match event::read()? {
93                    Event::Key(key) => self.handle_key_press(key),
94                    Event::Mouse(event) => self.handle_mouse_event(event),
95                    _ => (),
96                }
97            }
98
99            if last_tick.elapsed() >= tick_rate {
100                self.on_tick();
101                last_tick = Instant::now();
102            }
103        }
104        Ok(())
105    }
106
107    fn handle_key_press(&mut self, key: event::KeyEvent) {
108        if key.kind != KeyEventKind::Press {
109            return;
110        }
111        match key.code {
112            KeyCode::Char('q') => self.exit = true,
113            KeyCode::Down | KeyCode::Char('j') => self.y += 1.0,
114            KeyCode::Up | KeyCode::Char('k') => self.y -= 1.0,
115            KeyCode::Right | KeyCode::Char('l') => self.x += 1.0,
116            KeyCode::Left | KeyCode::Char('h') => self.x -= 1.0,
117            _ => {}
118        }
119    }
120
121    fn handle_mouse_event(&mut self, event: event::MouseEvent) {
122        match event.kind {
123            MouseEventKind::Down(_) => self.is_drawing = true,
124            MouseEventKind::Up(_) => self.is_drawing = false,
125            MouseEventKind::Drag(_) => {
126                self.points.push(Position::new(event.column, event.row));
127            }
128            _ => {}
129        }
130    }
131
132    fn on_tick(&mut self) {
133        self.tick_count += 1;
134        // only change marker every 180 ticks (3s) to avoid stroboscopic effect
135        if (self.tick_count % 180) == 0 {
136            self.marker = match self.marker {
137                Marker::Dot => Marker::Braille,
138                Marker::Braille => Marker::Block,
139                Marker::Block => Marker::HalfBlock,
140                Marker::HalfBlock => Marker::Bar,
141                Marker::Bar => Marker::Dot,
142            };
143        }
144        // bounce the ball by flipping the velocity vector
145        let ball = &self.ball;
146        let playground = self.playground;
147        if ball.x - ball.radius < f64::from(playground.left())
148            || ball.x + ball.radius > f64::from(playground.right())
149        {
150            self.vx = -self.vx;
151        }
152        if ball.y - ball.radius < f64::from(playground.top())
153            || ball.y + ball.radius > f64::from(playground.bottom())
154        {
155            self.vy = -self.vy;
156        }
157
158        self.ball.x += self.vx;
159        self.ball.y += self.vy;
160    }
161
162    fn draw(&self, frame: &mut Frame) {
163        let horizontal =
164            Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]);
165        let vertical = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)]);
166        let [left, right] = horizontal.areas(frame.area());
167        let [draw, map] = vertical.areas(left);
168        let [pong, boxes] = vertical.areas(right);
169
170        frame.render_widget(self.map_canvas(), map);
171        frame.render_widget(self.draw_canvas(draw), draw);
172        frame.render_widget(self.pong_canvas(), pong);
173        frame.render_widget(self.boxes_canvas(boxes), boxes);
174    }
175
176    fn map_canvas(&self) -> impl Widget + '_ {
177        Canvas::default()
178            .block(Block::bordered().title("World"))
179            .marker(self.marker)
180            .paint(|ctx| {
181                ctx.draw(&Map {
182                    color: Color::Green,
183                    resolution: MapResolution::High,
184                });
185                ctx.print(self.x, -self.y, "You are here".yellow());
186            })
187            .x_bounds([-180.0, 180.0])
188            .y_bounds([-90.0, 90.0])
189    }
190
191    fn draw_canvas(&self, area: Rect) -> impl Widget + '_ {
192        Canvas::default()
193            .block(Block::bordered().title("Draw here"))
194            .marker(self.marker)
195            .x_bounds([0.0, f64::from(area.width)])
196            .y_bounds([0.0, f64::from(area.height)])
197            .paint(move |ctx| {
198                let points = self
199                    .points
200                    .iter()
201                    .map(|p| {
202                        (
203                            f64::from(p.x) - f64::from(area.left()),
204                            f64::from(area.bottom()) - f64::from(p.y),
205                        )
206                    })
207                    .collect_vec();
208                ctx.draw(&Points {
209                    coords: &points,
210                    color: Color::White,
211                });
212            })
213    }
214
215    fn pong_canvas(&self) -> impl Widget + '_ {
216        Canvas::default()
217            .block(Block::bordered().title("Pong"))
218            .marker(self.marker)
219            .paint(|ctx| {
220                ctx.draw(&self.ball);
221            })
222            .x_bounds([10.0, 210.0])
223            .y_bounds([10.0, 110.0])
224    }
225
226    fn boxes_canvas(&self, area: Rect) -> impl Widget {
227        let left = 0.0;
228        let right = f64::from(area.width);
229        let bottom = 0.0;
230        let top = f64::from(area.height).mul_add(2.0, -4.0);
231        Canvas::default()
232            .block(Block::bordered().title("Rects"))
233            .marker(self.marker)
234            .x_bounds([left, right])
235            .y_bounds([bottom, top])
236            .paint(|ctx| {
237                for i in 0..=11 {
238                    ctx.draw(&Rectangle {
239                        x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
240                        y: 2.0,
241                        width: f64::from(i),
242                        height: f64::from(i),
243                        color: Color::Red,
244                    });
245                    ctx.draw(&Rectangle {
246                        x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
247                        y: 21.0,
248                        width: f64::from(i),
249                        height: f64::from(i),
250                        color: Color::Blue,
251                    });
252                }
253                for i in 0..100 {
254                    if i % 10 != 0 {
255                        ctx.print(f64::from(i) + 1.0, 0.0, format!("{i}", i = i % 10));
256                    }
257                    if i % 2 == 0 && i % 10 != 0 {
258                        ctx.print(0.0, f64::from(i), format!("{i}", i = i % 10));
259                    }
260                }
261            })
262    }
263}
canvas/canvas.rs

canvas/
canvas.rs
