feat(mouse): enhance mouse events with grid coordinates

Cargo.toml

@@ -17,6 +17,7 @@ web-sys = { version = "0.3.81", features = [
     'console',
     'CanvasRenderingContext2d',
     'Document',
+    'DomRect',
     'Element',
     'HtmlCanvasElement',
     'HtmlElement',

README.md

@@ -62,7 +62,7 @@ use ratzilla::{event::KeyCode, DomBackend, WebRenderer};
 fn main() -> io::Result<()> {
     let counter = Rc::new(RefCell::new(0));
     let backend = DomBackend::new()?;
-    let terminal = Terminal::new(backend)?;
+    let mut terminal = Terminal::new(backend)?;
 
     terminal.on_key_event({
         let counter_cloned = counter.clone();
@@ -72,7 +72,7 @@ fn main() -> io::Result<()> {
                 *counter += 1;
             }
         }
-    });
+    })?;
 
     terminal.draw_web(move |f| {
         let counter = counter.borrow();

examples/canvas_stress_test/src/main.rs

@@ -20,7 +20,7 @@ use std::{cell::RefCell, rc::Rc};
 
 fn main() -> std::io::Result<()> {
     std::panic::set_hook(Box::new(console_error_panic_hook::hook));
-    let terminal = MultiBackendBuilder::with_fallback(BackendType::WebGl2)
+    let mut terminal = MultiBackendBuilder::with_fallback(BackendType::WebGl2)
         .webgl2_options(WebGl2BackendOptions::new().measure_performance(true))
         .build_terminal()?;
 
@@ -35,7 +35,7 @@ fn main() -> std::io::Result<()> {
         let current = text_style_key_event.as_ref();
         let next = current.borrow().clone() + 1;
         *current.borrow_mut() = next % WidgetCache::SCREEN_TYPES;
-    });
+    })?;
 
     // Pre-generate widgets for better performance; in particular,
     // this avoids excessive GC pressure in the JS heap.

examples/clipboard/src/main.rs

@@ -4,7 +4,7 @@ use ratatui::{
     layout::Alignment,
     style::{Color, Stylize},
     widgets::{Block, BorderType, Paragraph},
-    Frame, Terminal,
+    Frame,
 };
 
 use ratzilla::{
@@ -15,7 +15,7 @@ use examples_shared::backend::{BackendType, MultiBackendBuilder};
 
 fn main() -> io::Result<()> {
     std::panic::set_hook(Box::new(console_error_panic_hook::hook));
-    let terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
+    let mut terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
         .build_terminal()?;
 
     let state = Rc::new(App::default());
@@ -25,7 +25,7 @@ fn main() -> io::Result<()> {
         wasm_bindgen_futures::spawn_local(
             async move { event_state.handle_events(key_event).await },
         );
-    });
+    })?;
 
     let render_state = Rc::clone(&state);
     terminal.draw_web(move |frame| {

examples/demo/src/main.rs

@@ -12,7 +12,7 @@ use app::App;
 use examples_shared::backend::{BackendType, MultiBackendBuilder};
 use ratzilla::event::KeyCode;
 use ratzilla::WebRenderer;
-use ratzilla::{backend::canvas::CanvasBackendOptions, backend::webgl2::WebGl2BackendOptions};
+use ratzilla::{backend::canvas::CanvasBackendOptions, backend::webgl2::{SelectionMode, WebGl2BackendOptions}};
 
 mod app;
 
@@ -28,10 +28,10 @@ fn main() -> Result<()> {
     let webgl2_options = WebGl2BackendOptions::new()
         .measure_performance(true)
         .enable_console_debug_api()
-        .enable_mouse_selection()
+        .enable_mouse_selection_with_mode(SelectionMode::default())
         .size((1600, 900));
 
-    let terminal = MultiBackendBuilder::with_fallback(BackendType::WebGl2)
+    let mut terminal = MultiBackendBuilder::with_fallback(BackendType::WebGl2)
         .canvas_options(canvas_options)
         .webgl2_options(webgl2_options)
         .build_terminal()?;
@@ -57,7 +57,7 @@ fn main() -> Result<()> {
                 _ => {}
             }
         }
-    });
+    })?;
 
     terminal.draw_web(move |f| {
         let mut app_state = app_state.borrow_mut();

examples/demo2/src/main.rs

@@ -29,7 +29,7 @@ use std::{cell::RefCell, rc::Rc};
 
 use app::App;
 use ratzilla::{
-    backend::webgl2::WebGl2BackendOptions,
+    backend::webgl2::{SelectionMode, WebGl2BackendOptions},
     ratatui::{layout::Rect, TerminalOptions, Viewport},
     WebRenderer,
 };
@@ -47,10 +47,10 @@ fn main() -> std::io::Result<()> {
     // using vhs in a 1280x640 sized window (github social preview size)
     let viewport = Viewport::Fixed(Rect::new(0, 0, 81, 18));
 
-    let terminal = MultiBackendBuilder::with_fallback(BackendType::Canvas)
+    let mut terminal = MultiBackendBuilder::with_fallback(BackendType::Canvas)
         .webgl2_options(WebGl2BackendOptions::new()
             .measure_performance(true)
-            .enable_mouse_selection()
+            .enable_mouse_selection_with_mode(SelectionMode::default())
             .enable_console_debug_api()
         )
         .terminal_options(TerminalOptions { viewport })
@@ -62,7 +62,7 @@ fn main() -> std::io::Result<()> {
         move |key_event| {
             app.borrow_mut().handle_key_press(key_event);
         }
-    });
+    })?;
     terminal.draw_web(move |f| {
         let app = app.borrow_mut();
         app.draw(f);

examples/demo2/src/tabs/weather.rs

@@ -3,7 +3,7 @@ use palette::Okhsv;
 use ratzilla::ratatui::{
     buffer::Buffer,
     layout::{Constraint, Direction, Layout, Margin, Rect},
-    style::{Color, Style, Stylize},
+    style::{Color, Style},
     symbols,
     widgets::{
         calendar::{CalendarEventStore, Monthly},

examples/minimal/src/main.rs

@@ -6,9 +6,7 @@ use ratzilla::ratatui::{
     widgets::{Block, Paragraph},
 };
 
-use ratzilla::{
-    event::KeyCode, event::MouseButton, event::MouseEventKind, WebRenderer,
-};
+use ratzilla::{event::KeyCode, event::MouseButton, event::MouseEventKind, SelectionMode, WebRenderer};
 
 use examples_shared::backend::{BackendType, MultiBackendBuilder};
 use ratzilla::backend::webgl2::WebGl2BackendOptions;
@@ -19,10 +17,10 @@ fn main() -> io::Result<()> {
     let mouse_button = Rc::new(RefCell::new(None::<MouseButton>));
     let mouse_event_kind = Rc::new(RefCell::new(None::<MouseEventKind>));
 
-    let terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
+    let mut terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
         .webgl2_options(WebGl2BackendOptions::new()
             .enable_console_debug_api()
-            .enable_mouse_selection()
+            .enable_mouse_selection_with_mode(SelectionMode::Block)
         )
         .build_terminal()?;
 
@@ -34,21 +32,32 @@ fn main() -> io::Result<()> {
                 *counter += 1;
             }
         }
-    });
+    })?;
 
     terminal.on_mouse_event({
         let mouse_position_cloned = mouse_position.clone();
         let mouse_button_cloned = mouse_button.clone();
         let mouse_event_kind_cloned = mouse_event_kind.clone();
         move |mouse_event| {
+            let btn = match mouse_event.kind {
+                MouseEventKind::Moved => None,
+                MouseEventKind::ButtonDown(btn) => Some(btn),
+                MouseEventKind::ButtonUp(btn) => Some(btn),
+                _ => return
+            };
+
+
             let mut mouse_position = mouse_position_cloned.borrow_mut();
-            *mouse_position = (mouse_event.x, mouse_event.y);
+            *mouse_position = (mouse_event.col, mouse_event.row);
             let mut mouse_button = mouse_button_cloned.borrow_mut();
-            *mouse_button = Some(mouse_event.button);
+            *mouse_button = btn;
             let mut mouse_event_kind = mouse_event_kind_cloned.borrow_mut();
-            *mouse_event_kind = Some(mouse_event.event);
+            *mouse_event_kind = Some(mouse_event.kind);
         }
-    });
+    })?;
+
+    // Gruvbox bright orange
+    const HOVER_BG: Color = Color::Rgb(254, 128, 25);
 
     terminal.draw_web(move |f| {
         let counter = counter.borrow();
@@ -74,6 +83,13 @@ fn main() -> io::Result<()> {
             ),
             f.area(),
         );
+
+        // Highlight the hovered cell
+        let (col, row) = *mouse_position;
+        let area = f.area();
+        if col < area.width && row < area.height {
+            f.buffer_mut()[(col, row)].set_bg(HOVER_BG);
+        }
     });
 
     Ok(())

examples/pong/src/main.rs

@@ -14,7 +14,7 @@ use ratzilla::ratatui::{
 use examples_shared::backend::{BackendType, MultiBackendBuilder};
 use ratzilla::backend::canvas::CanvasBackendOptions;
 use ratzilla::backend::dom::DomBackendOptions;
-use ratzilla::backend::webgl2::WebGl2BackendOptions;
+use ratzilla::backend::webgl2::{SelectionMode, WebGl2BackendOptions};
 
 struct App {
     count: u64,
@@ -65,11 +65,11 @@ fn main() -> std::io::Result<()> {
     std::panic::set_hook(Box::new(console_error_panic_hook::hook));
     let app_state = Rc::new(RefCell::new(App::new()));
 
-    let terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
+    let mut terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
         .webgl2_options(WebGl2BackendOptions::new()
             .grid_id("container")
             .enable_hyperlinks()
-            .enable_mouse_selection()
+            .enable_mouse_selection_with_mode(SelectionMode::default())
         )
         .canvas_options(CanvasBackendOptions::new()
             .grid_id("container")
@@ -96,7 +96,7 @@ fn main() -> std::io::Result<()> {
                 _ => {}
             }
         }
-    });
+    })?;
     terminal.draw_web(move |f| {
         let mut app_state = app_state.borrow_mut();
         app_state.count += 1;

examples/shared/src/backend.rs

@@ -1,8 +1,10 @@
 use crate::{fps, utils::inject_backend_footer};
 use ratzilla::{
     backend::{canvas::CanvasBackendOptions, dom::DomBackendOptions, webgl2::WebGl2BackendOptions},
+    error::Error,
+    event::{KeyEvent, MouseEvent},
     ratatui::{backend::Backend, prelude::backend::ClearType, Terminal, TerminalOptions},
-    CanvasBackend, DomBackend, WebGl2Backend,
+    CanvasBackend, DomBackend, WebEventHandler, WebGl2Backend,
 };
 use std::{convert::TryFrom, fmt, io};
 use web_sys::{window, Url};
@@ -173,6 +175,46 @@ impl Backend for RatzillaBackend {
     }
 }
 
+impl WebEventHandler for RatzillaBackend {
+    fn on_mouse_event<F>(&mut self, callback: F) -> Result<(), Error>
+    where
+        F: FnMut(MouseEvent) + 'static,
+    {
+        match self {
+            RatzillaBackend::Dom(backend) => backend.on_mouse_event(callback),
+            RatzillaBackend::Canvas(backend) => backend.on_mouse_event(callback),
+            RatzillaBackend::WebGl2(backend) => backend.on_mouse_event(callback),
+        }
+    }
+
+    fn clear_mouse_events(&mut self) {
+        match self {
+            RatzillaBackend::Dom(backend) => backend.clear_mouse_events(),
+            RatzillaBackend::Canvas(backend) => backend.clear_mouse_events(),
+            RatzillaBackend::WebGl2(backend) => backend.clear_mouse_events(),
+        }
+    }
+
+    fn on_key_event<F>(&mut self, callback: F) -> Result<(), Error>
+    where
+        F: FnMut(KeyEvent) + 'static,
+    {
+        match self {
+            RatzillaBackend::Dom(backend) => backend.on_key_event(callback),
+            RatzillaBackend::Canvas(backend) => backend.on_key_event(callback),
+            RatzillaBackend::WebGl2(backend) => backend.on_key_event(callback),
+        }
+    }
+
+    fn clear_key_events(&mut self) {
+        match self {
+            RatzillaBackend::Dom(backend) => backend.clear_key_events(),
+            RatzillaBackend::Canvas(backend) => backend.clear_key_events(),
+            RatzillaBackend::WebGl2(backend) => backend.clear_key_events(),
+        }
+    }
+}
+
 /// Backend wrapper that automatically tracks FPS by recording frames on each flush.
 ///
 /// This wrapper delegates all Backend trait methods to the inner RatzillaBackend
@@ -264,6 +306,30 @@ impl Backend for FpsTrackingBackend {
     }
 }
 
+impl WebEventHandler for FpsTrackingBackend {
+    fn on_mouse_event<F>(&mut self, callback: F) -> Result<(), Error>
+    where
+        F: FnMut(MouseEvent) + 'static,
+    {
+        self.inner.on_mouse_event(callback)
+    }
+
+    fn clear_mouse_events(&mut self) {
+        self.inner.clear_mouse_events()
+    }
+
+    fn on_key_event<F>(&mut self, callback: F) -> Result<(), Error>
+    where
+        F: FnMut(KeyEvent) + 'static,
+    {
+        self.inner.on_key_event(callback)
+    }
+
+    fn clear_key_events(&mut self) {
+        self.inner.clear_key_events()
+    }
+}
+
 /// Builder for creating terminals with different backend types and configuration options.
 ///
 /// This builder provides a fluent API for configuring terminal and backend options

examples/tauri/src/main.rs

@@ -10,7 +10,6 @@ use ratzilla::{
 use examples_shared::backend::{BackendType, MultiBackendBuilder};
 use tachyonfx::{
     fx, CenteredShrink, Duration, Effect, EffectRenderer, EffectTimer, Interpolation, Motion,
-    Shader,
 };
 
 fn main() -> io::Result<()> {

examples/text_area/src/main.rs

@@ -13,7 +13,7 @@ use ratzilla::{
 fn main() -> io::Result<()> {
     std::panic::set_hook(Box::new(console_error_panic_hook::hook));
 
-    let terminal = MultiBackendBuilder::with_fallback(BackendType::Dom).build_terminal()?;
+    let mut terminal = MultiBackendBuilder::with_fallback(BackendType::Dom).build_terminal()?;
 
     let app = Rc::new(RefCell::new(App::new()));
 
@@ -23,7 +23,7 @@ fn main() -> io::Result<()> {
             let mut state = event_state.borrow_mut();
             state.handle_events(key_event);
         }
-    });
+    })?;
 
     terminal.draw_web({
         let render_state = app.clone();

examples/user_input/src/main.rs

@@ -14,17 +14,17 @@ use ratzilla::ratatui::{
 use ratzilla::{event::KeyCode, WebRenderer};
 use examples_shared::backend::{BackendType, MultiBackendBuilder};
 use ratzilla::backend::dom::DomBackendOptions;
-use ratzilla::backend::webgl2::WebGl2BackendOptions;
+use ratzilla::backend::webgl2::{SelectionMode, WebGl2BackendOptions};
 
 fn main() -> io::Result<()> {
     let dom_options = DomBackendOptions::new(None, CursorShape::SteadyUnderScore);
 
     let webgl2_options = WebGl2BackendOptions::new()
         .cursor_shape(CursorShape::SteadyUnderScore)
         .enable_console_debug_api()
-        .enable_mouse_selection();
+        .enable_mouse_selection_with_mode(SelectionMode::default());
 
-    let terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
+    let mut terminal = MultiBackendBuilder::with_fallback(BackendType::Dom)
         .dom_options(dom_options)
         .webgl2_options(webgl2_options)
         .build_terminal()?;
@@ -37,7 +37,7 @@ fn main() -> io::Result<()> {
             let mut state = event_state.borrow_mut();
             state.handle_events(key_event);
         }
-    });
+    })?;
 
     terminal.draw_web({
         let render_state = app.clone();