Add extra mouse event handling (#304)

* working contextmenu and dblclick events

* working mouse enter/leave/over/out

* working onscroll and onwheel

* remove click_test

* fix redraw on wheel and use node chain for enter/leave

* fix range issues with node diffing

* fmt/clippy and remove unused enter_stack

* remove unnecessary cast

* remove extra request_redraw

Author: rhaskia

packages/blitz-dom/src/document.rs

@@ -16,7 +16,7 @@ use crate::{
     EventDriver, HtmlParserProvider, Node, NodeData, NoopEventHandler, TextNodeData,
 };
 use blitz_traits::devtools::DevtoolSettings;
-use blitz_traits::events::{DomEvent, HitResult, UiEvent};
+use blitz_traits::events::{BlitzScrollEvent, DomEvent, DomEventData, HitResult, UiEvent};
 use blitz_traits::navigation::{DummyNavigationProvider, NavigationProvider};
 use blitz_traits::net::{DummyNetProvider, NetProvider, Request};
 use blitz_traits::shell::{ColorScheme, DummyShellProvider, ShellProvider, Viewport};
@@ -34,6 +34,7 @@ use std::sync::atomic::{AtomicUsize, Ordering};
 use std::sync::mpsc::{Receiver, Sender, channel};
 use std::sync::{Arc, Mutex};
 use std::task::Context as TaskContext;
+use std::time::Instant;
 use style::Atom;
 use style::animation::DocumentAnimationSet;
 use style::attr::{AttrIdentifier, AttrValue};
@@ -156,6 +157,10 @@ pub struct BaseDocument {
     pub(crate) active_node_id: Option<usize>,
     /// The node which recieved a mousedown event (if any)
     pub(crate) mousedown_node_id: Option<usize>,
+    /// The last time a click was made
+    pub(crate) last_click_time: Option<Instant>,
+    /// How many clicks have been made in quick succession
+    pub(crate) click_count: u16,
 
     // TODO: collapse animating state into a bitflags
     /// Whether there are active CSS animations/transitions (so we should re-render every frame)
@@ -315,6 +320,8 @@ impl BaseDocument {
             navigation_provider,
             shell_provider,
             html_parser_provider,
+            last_click_time: None,
+            click_count: 0,
         };
 
         // Initialise document with root Document node
@@ -1129,14 +1136,26 @@ impl BaseDocument {
         Some(CursorIcon::Default)
     }
 
-    pub fn scroll_node_by(&mut self, node_id: usize, x: f64, y: f64) {
-        self.scroll_node_by_has_changed(node_id, x, y);
+    pub fn scroll_node_by<F: FnMut(DomEvent)>(
+        &mut self,
+        node_id: usize,
+        x: f64,
+        y: f64,
+        dispatch_event: F,
+    ) {
+        self.scroll_node_by_has_changed(node_id, x, y, dispatch_event);
     }
 
     /// Scroll a node by given x and y
     /// Will bubble scrolling up to parent node once it can no longer scroll further
     /// If we're already at the root node, bubbles scrolling up to the viewport
-    pub fn scroll_node_by_has_changed(&mut self, node_id: usize, x: f64, y: f64) -> bool {
+    pub fn scroll_node_by_has_changed<F: FnMut(DomEvent)>(
+        &mut self,
+        node_id: usize,
+        x: f64,
+        y: f64,
+        mut dispatch_event: F,
+    ) -> bool {
         let Some(node) = self.nodes.get_mut(node_id) else {
             return false;
         };
@@ -1170,7 +1189,7 @@ impl BaseDocument {
         // Handle sub document case
         if let Some(sub_doc) = node.subdoc_mut() {
             let has_changed = if let Some(hover_node_id) = sub_doc.get_hover_node_id() {
-                sub_doc.scroll_node_by_has_changed(hover_node_id, x, y)
+                sub_doc.scroll_node_by_has_changed(hover_node_id, x, y, dispatch_event)
             } else {
                 sub_doc.scroll_viewport_by_has_changed(x, y)
             };
@@ -1206,9 +1225,24 @@ impl BaseDocument {
 
         let has_changed = node.scroll_offset != initial;
 
+        if has_changed {
+            let layout = node.final_layout;
+            let event = BlitzScrollEvent {
+                scroll_top: node.scroll_offset.y,
+                scroll_left: node.scroll_offset.x,
+                scroll_width: layout.scroll_width() as i32,
+                scroll_height: layout.scroll_height() as i32,
+                client_width: layout.size.width as i32,
+                client_height: layout.size.height as i32,
+            };
+
+            dispatch_event(DomEvent::new(node_id, DomEventData::Scroll(event)));
+        }
+
         if bubble_x != 0.0 || bubble_y != 0.0 {
             if let Some(parent) = node.parent {
-                return self.scroll_node_by_has_changed(parent, bubble_x, bubble_y) | has_changed;
+                return self.scroll_node_by_has_changed(parent, bubble_x, bubble_y, dispatch_event)
+                    | has_changed;
             } else {
                 return self.scroll_viewport_by_has_changed(bubble_x, bubble_y) | has_changed;
             }

packages/blitz-dom/src/events/driver.rs

@@ -55,8 +55,69 @@ impl<'doc, Handler: EventHandler> EventDriver<'doc, Handler> {
             UiEvent::MouseMove(event) => {
                 let dom_x = event.x + viewport_scroll.x as f32 / zoom;
                 let dom_y = event.y + viewport_scroll.y as f32 / zoom;
-                self.doc_mut().set_hover_to(dom_x, dom_y);
+                let changed = self.doc_mut().set_hover_to(dom_x, dom_y);
+
+                let prev_hover_node_id = hover_node_id;
                 hover_node_id = self.doc().hover_node_id;
+
+                if changed {
+                    let mut old_chain = prev_hover_node_id
+                        .map(|id| self.doc().node_chain(id))
+                        .unwrap_or_default();
+                    let mut new_chain = hover_node_id
+                        .map(|id| self.doc().node_chain(id))
+                        .unwrap_or_default();
+                    old_chain.reverse();
+                    new_chain.reverse();
+
+                    // Find the difference in the node chain of the last hovered objected and the newest
+                    let old_len = old_chain.len();
+                    let new_len = new_chain.len();
+
+                    let first_difference_index = old_chain
+                        .iter()
+                        .zip(&new_chain)
+                        .position(|(old, new)| old != new)
+                        .unwrap_or_else(|| old_len.min(new_len));
+
+                    if let Some(target) = prev_hover_node_id {
+                        self.handle_dom_event(DomEvent::new(
+                            target,
+                            DomEventData::MouseOut(event.clone()),
+                        ));
+
+                        // Send an mouseleave event to all old elements on the chain
+                        for node_id in old_chain
+                            .get(first_difference_index..)
+                            .unwrap_or(&[])
+                            .iter()
+                        {
+                            self.handle_dom_event(DomEvent::new(
+                                *node_id,
+                                DomEventData::MouseLeave(event.clone()),
+                            ));
+                        }
+                    }
+
+                    if let Some(target) = hover_node_id {
+                        self.handle_dom_event(DomEvent::new(
+                            target,
+                            DomEventData::MouseOver(event.clone()),
+                        ));
+
+                        // Send an mouseenter event to all new elements on the chain
+                        for node_id in new_chain
+                            .get(first_difference_index..)
+                            .unwrap_or(&[])
+                            .iter()
+                        {
+                            self.handle_dom_event(DomEvent::new(
+                                *node_id,
+                                DomEventData::MouseEnter(event.clone()),
+                            ));
+                        }
+                    }
+                }
             }
             UiEvent::MouseDown(_) => {
                 self.doc_mut().active_node();
@@ -72,6 +133,7 @@ impl<'doc, Handler: EventHandler> EventDriver<'doc, Handler> {
             UiEvent::MouseMove(_) => hover_node_id,
             UiEvent::MouseUp(_) => hover_node_id,
             UiEvent::MouseDown(_) => hover_node_id,
+            UiEvent::Wheel(_) => hover_node_id,
             UiEvent::KeyUp(_) => focussed_node_id,
             UiEvent::KeyDown(_) => focussed_node_id,
             UiEvent::Ime(_) => focussed_node_id,
@@ -93,6 +155,7 @@ impl<'doc, Handler: EventHandler> EventDriver<'doc, Handler> {
                 y: data.y + viewport_scroll.y as f32 / zoom,
                 ..data
             }),
+            UiEvent::Wheel(data) => DomEventData::Wheel(data),
             UiEvent::KeyUp(data) => DomEventData::KeyUp(data),
             UiEvent::KeyDown(data) => DomEventData::KeyDown(data),
             UiEvent::Ime(data) => DomEventData::Ime(data),

packages/blitz-dom/src/events/mod.rs

@@ -10,7 +10,7 @@ pub(crate) use keyboard::handle_keypress;
 use mouse::handle_mouseup;
 pub(crate) use mouse::{handle_click, handle_mousedown, handle_mousemove};
 
-use crate::BaseDocument;
+use crate::{BaseDocument, events::mouse::handle_wheel};
 
 pub(crate) fn handle_dom_event<F: FnMut(DomEvent)>(
     doc: &mut BaseDocument,
@@ -43,15 +43,20 @@ pub(crate) fn handle_dom_event<F: FnMut(DomEvent)>(
                 set_focus = true;
                 Some(UiEvent::MouseUp(mouse_event))
             }
+            DomEventData::MouseEnter(_) => None,
+            DomEventData::MouseLeave(_) => None,
+            DomEventData::MouseOver(_) => None,
+            DomEventData::MouseOut(_) => None,
             DomEventData::KeyDown(data) => Some(UiEvent::KeyDown(data)),
             DomEventData::KeyUp(data) => Some(UiEvent::KeyUp(data)),
             DomEventData::Ime(data) => Some(UiEvent::Ime(data)),
-
-            // Derived events do not map to a UiEvent. We simply ignore them.
-            // The sub document will generate it's own versions of these events.
             DomEventData::KeyPress(_) => None,
             DomEventData::Click(_) => None,
+            DomEventData::ContextMenu(_) => None,
+            DomEventData::DoubleClick(_) => None,
             DomEventData::Input(_) => None,
+            DomEventData::Wheel(data) => Some(UiEvent::Wheel(data)),
+            DomEventData::Scroll(_) => None,
         };
 
         if let Some(ui_event) = ui_event {
@@ -74,6 +79,8 @@ pub(crate) fn handle_dom_event<F: FnMut(DomEvent)>(
                 mouse_event.x,
                 mouse_event.y,
                 mouse_event.buttons,
+                mouse_event,
+                dispatch_event,
             );
             if changed {
                 doc.shell_provider.request_redraw();
@@ -103,5 +110,29 @@ pub(crate) fn handle_dom_event<F: FnMut(DomEvent)>(
         DomEventData::Input(_) => {
             // Do nothing (no default action)
         }
+        DomEventData::ContextMenu(_) => {
+            // TODO: Open context menu
+        }
+        DomEventData::DoubleClick(_) => {
+            // Do nothing (no default action)
+        }
+        DomEventData::MouseEnter(_) => {
+            // Do nothing (no default action)
+        }
+        DomEventData::MouseLeave(_) => {
+            // Do nothing (no default action)
+        }
+        DomEventData::MouseOver(_) => {
+            // Do nothing (no default action)
+        }
+        DomEventData::MouseOut(_) => {
+            // Do nothing (no default action)
+        }
+        DomEventData::Scroll(_) => {
+            // Handled elsewhere
+        }
+        DomEventData::Wheel(event) => {
+            handle_wheel(doc, target_node_id, event.clone(), dispatch_event);
+        }
     }
 }

packages/blitz-dom/src/events/mouse.rs

@@ -1,27 +1,38 @@
+use std::time::{Duration, Instant};
+
 use blitz_traits::{
     events::{
-        BlitzInputEvent, BlitzMouseButtonEvent, DomEvent, DomEventData, MouseEventButton,
-        MouseEventButtons,
+        BlitzInputEvent, BlitzMouseButtonEvent, BlitzWheelDelta, BlitzWheelEvent, DomEvent,
+        DomEventData, MouseEventButton, MouseEventButtons,
     },
     navigation::NavigationOptions,
 };
 use markup5ever::local_name;
 
 use crate::{BaseDocument, node::SpecialElementData};
 
-pub(crate) fn handle_mousemove(
+pub(crate) fn handle_mousemove<F: FnMut(DomEvent)>(
     doc: &mut BaseDocument,
     target: usize,
     x: f32,
     y: f32,
     buttons: MouseEventButtons,
+    event: &BlitzMouseButtonEvent,
+    mut dispatch_event: F,
 ) -> bool {
     let mut changed = doc.set_hover_to(x, y);
 
     let Some(hit) = doc.hit(x, y) else {
         return changed;
     };
 
+    if changed {
+        dispatch_event(DomEvent::new(
+            hit.node_id,
+            DomEventData::MouseEnter(event.clone()),
+        ));
+    }
+
     if hit.node_id != target {
         return changed;
     }
@@ -143,6 +154,14 @@ pub(crate) fn handle_mouseup<F: FnMut(DomEvent)>(
     if do_click && event.button == MouseEventButton::Main {
         dispatch_event(DomEvent::new(target, DomEventData::Click(event.clone())));
     }
+
+    // Dispatch a context menu event
+    if do_click && event.button == MouseEventButton::Secondary {
+        dispatch_event(DomEvent::new(
+            target,
+            DomEventData::ContextMenu(event.clone()),
+        ));
+    }
 }
 
 pub(crate) fn handle_click<F: FnMut(DomEvent)>(
@@ -275,4 +294,46 @@ pub(crate) fn handle_click<F: FnMut(DomEvent)>(
 
     // If nothing is matched then clear focus
     doc.clear_focus();
+
+    // Assumed double click time to be less than 500ms, although may be system-dependant?
+    if doc
+        .last_click_time
+        .map(|t| t.elapsed() < Duration::from_millis(500))
+        .unwrap_or(false)
+    {
+        doc.last_click_time = Some(Instant::now());
+        doc.click_count += 1;
+
+        if doc.click_count == 2 {
+            dispatch_event(DomEvent::new(
+                target,
+                DomEventData::DoubleClick(event.clone()),
+            ));
+        }
+    } else {
+        doc.last_click_time = Some(Instant::now());
+        doc.click_count = 1;
+    }
+}
+
+pub(crate) fn handle_wheel<F: FnMut(DomEvent)>(
+    doc: &mut BaseDocument,
+    _: usize,
+    event: BlitzWheelEvent,
+    dispatch_event: F,
+) {
+    let (scroll_x, scroll_y) = match event.delta {
+        BlitzWheelDelta::Lines(x, y) => (x * 20.0, y * 20.0),
+        BlitzWheelDelta::Pixels(x, y) => (x, y),
+    };
+
+    let has_changed = if let Some(hover_node_id) = doc.get_hover_node_id() {
+        doc.scroll_node_by_has_changed(hover_node_id, scroll_x, scroll_y, dispatch_event)
+    } else {
+        doc.scroll_viewport_by_has_changed(scroll_x, scroll_y)
+    };
+
+    if has_changed {
+        doc.shell_provider.request_redraw();
+    }
 }