Implement double-click, triple-click and shift-click for inputs

Signed-off-by: Nico Burns <[email protected]>

Author: nicoburns

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

@@ -15,7 +15,7 @@ use crate::{BaseDocument, events::mouse::handle_wheel};
 pub(crate) fn handle_dom_event<F: FnMut(DomEvent)>(
     doc: &mut BaseDocument,
     event: &mut DomEvent,
-    dispatch_event: F,
+    mut dispatch_event: F,
 ) {
     let target_node_id = event.target;
 
@@ -87,13 +87,13 @@ pub(crate) fn handle_dom_event<F: FnMut(DomEvent)>(
             }
         }
         DomEventData::MouseDown(event) => {
-            handle_mousedown(doc, target_node_id, event.x, event.y);
+            handle_mousedown(doc, target_node_id, event.x, event.y, event.mods);
         }
         DomEventData::MouseUp(event) => {
             handle_mouseup(doc, target_node_id, event, dispatch_event);
         }
         DomEventData::Click(event) => {
-            handle_click(doc, target_node_id, event, dispatch_event);
+            handle_click(doc, target_node_id, event, &mut dispatch_event);
         }
         DomEventData::KeyDown(event) => {
             handle_keypress(doc, target_node_id, event.clone(), dispatch_event);

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

@@ -7,6 +7,7 @@ use blitz_traits::{
     },
     navigation::NavigationOptions,
 };
+use keyboard_types::Modifiers;
 use markup5ever::local_name;
 
 use crate::{BaseDocument, node::SpecialElementData};
@@ -79,7 +80,13 @@ pub(crate) fn handle_mousemove<F: FnMut(DomEvent)>(
     changed
 }
 
-pub(crate) fn handle_mousedown(doc: &mut BaseDocument, target: usize, x: f32, y: f32) {
+pub(crate) fn handle_mousedown(
+    doc: &mut BaseDocument,
+    target: usize,
+    x: f32,
+    y: f32,
+    mods: Modifiers,
+) {
     let Some(hit) = doc.hit(x, y) else {
         return;
     };
@@ -114,11 +121,36 @@ pub(crate) fn handle_mousedown(doc: &mut BaseDocument, target: usize, x: f32, y:
         let x = (hit.x - content_box_offset.x) as f64 * doc.viewport.scale_f64();
         let y = (hit.y - content_box_offset.y) as f64 * doc.viewport.scale_f64();
 
-        text_input_data
+        // TODO: Only increment click count if click maps to the same/similar caret position as the previous click
+        let click_count = if doc
+            .last_click_time
+            .map(|t| t.elapsed() < Duration::from_millis(500))
+            .unwrap_or(false)
+        {
+            // Add 1 to doc.click_count because the click count hasn't yet been updated in the mousedown event
+            doc.click_count + 1
+        } else {
+            1
+        };
+
+        let mut font_ctx = doc.font_ctx.lock().unwrap();
+        let mut driver = text_input_data
             .editor
-            .driver(&mut doc.font_ctx.lock().unwrap(), &mut doc.layout_ctx)
-            .move_to_point(x as f32, y as f32);
+            .driver(&mut font_ctx, &mut doc.layout_ctx);
 
+        match click_count {
+            1 => {
+                if mods.shift() {
+                    driver.shift_click_extension(x as f32, y as f32);
+                } else {
+                    driver.move_to_point(x as f32, y as f32);
+                }
+            }
+            2 => driver.select_word_at_point(x as f32, y as f32),
+            _ => driver.select_hard_line_at_point(x as f32, y as f32),
+        }
+
+        drop(font_ctx);
         doc.set_focus_to(hit.node_id);
     }
 }
@@ -164,136 +196,147 @@ pub(crate) fn handle_mouseup<F: FnMut(DomEvent)>(
     }
 }
 
-pub(crate) fn handle_click<F: FnMut(DomEvent)>(
+pub(crate) fn handle_click(
     doc: &mut BaseDocument,
     target: usize,
     event: &BlitzMouseButtonEvent,
-    mut dispatch_event: F,
+    dispatch_event: &mut dyn FnMut(DomEvent),
 ) {
-    let mut maybe_node_id = Some(target);
-    while let Some(node_id) = maybe_node_id {
-        let maybe_element = {
-            let node = &mut doc.nodes[node_id];
-            node.data.downcast_element_mut()
-        };
+    let double_click_event = event.clone();
 
-        let Some(el) = maybe_element else {
-            maybe_node_id = doc.nodes[node_id].parent;
-            continue;
-        };
-
-        let disabled = el.attr(local_name!("disabled")).is_some();
-        if disabled {
-            return;
-        }
-
-        if let SpecialElementData::TextInput(_) = el.special_data {
-            return;
-        }
+    let mut maybe_node_id = Some(target);
+    let matched = 'matched: {
+        while let Some(node_id) = maybe_node_id {
+            let maybe_element = {
+                let node = &mut doc.nodes[node_id];
+                node.data.downcast_element_mut()
+            };
+
+            let Some(el) = maybe_element else {
+                maybe_node_id = doc.nodes[node_id].parent;
+                continue;
+            };
+
+            let disabled = el.attr(local_name!("disabled")).is_some();
+            if disabled {
+                break 'matched true;
+            }
 
-        match el.name.local {
-            local_name!("input") if el.attr(local_name!("type")) == Some("checkbox") => {
-                let is_checked = BaseDocument::toggle_checkbox(el);
-                let value = is_checked.to_string();
-                dispatch_event(DomEvent::new(
-                    node_id,
-                    DomEventData::Input(BlitzInputEvent { value }),
-                ));
-                doc.set_focus_to(node_id);
-                return;
+            if let SpecialElementData::TextInput(_) = el.special_data {
+                break 'matched true;
             }
-            local_name!("input") if el.attr(local_name!("type")) == Some("radio") => {
-                let radio_set = el.attr(local_name!("name")).unwrap().to_string();
-                BaseDocument::toggle_radio(doc, radio_set, node_id);
 
-                // TODO: make input event conditional on value actually changing
-                let value = String::from("true");
-                dispatch_event(DomEvent::new(
-                    node_id,
-                    DomEventData::Input(BlitzInputEvent { value }),
-                ));
+            match el.name.local {
+                local_name!("input") if el.attr(local_name!("type")) == Some("checkbox") => {
+                    let is_checked = BaseDocument::toggle_checkbox(el);
+                    let value = is_checked.to_string();
+                    dispatch_event(DomEvent::new(
+                        node_id,
+                        DomEventData::Input(BlitzInputEvent { value }),
+                    ));
+                    doc.set_focus_to(node_id);
+                    break 'matched true;
+                }
+                local_name!("input") if el.attr(local_name!("type")) == Some("radio") => {
+                    let radio_set = el.attr(local_name!("name")).unwrap().to_string();
+                    BaseDocument::toggle_radio(doc, radio_set, node_id);
+
+                    // TODO: make input event conditional on value actually changing
+                    let value = String::from("true");
+                    dispatch_event(DomEvent::new(
+                        node_id,
+                        DomEventData::Input(BlitzInputEvent { value }),
+                    ));
 
-                BaseDocument::set_focus_to(doc, node_id);
+                    BaseDocument::set_focus_to(doc, node_id);
 
-                return;
-            }
-            // Clicking labels triggers click, and possibly input event, of associated input
-            local_name!("label") => {
-                if let Some(target_node_id) = doc.label_bound_input_element(node_id).map(|n| n.id) {
-                    // Apply default click event action for target node
-                    let target_node = doc.get_node_mut(target_node_id).unwrap();
-                    let syn_event = target_node.synthetic_click_event_data(event.mods);
-                    handle_click(doc, target_node_id, &syn_event, dispatch_event);
-                    return;
+                    break 'matched true;
                 }
-            }
-            local_name!("a") => {
-                if let Some(href) = el.attr(local_name!("href")) {
-                    if let Some(url) = doc.url.resolve_relative(href) {
-                        doc.navigation_provider.navigate_to(NavigationOptions::new(
-                            url,
-                            String::from("text/plain"),
-                            doc.id(),
-                        ));
-                    } else {
-                        println!("{href} is not parseable as a url. : {:?}", *doc.url)
+                // Clicking labels triggers click, and possibly input event, of associated input
+                local_name!("label") => {
+                    if let Some(target_node_id) =
+                        doc.label_bound_input_element(node_id).map(|n| n.id)
+                    {
+                        // Apply default click event action for target node
+                        let target_node = doc.get_node_mut(target_node_id).unwrap();
+                        let syn_event = target_node.synthetic_click_event_data(event.mods);
+                        handle_click(doc, target_node_id, &syn_event, dispatch_event);
+                        break 'matched true;
                     }
-                    return;
-                } else {
-                    println!("Clicked link without href: {:?}", el.attrs());
                 }
-            }
-            local_name!("input")
-                if el.is_submit_button() || el.attr(local_name!("type")) == Some("submit") =>
-            {
-                if let Some(form_owner) = doc.controls_to_form.get(&node_id) {
-                    doc.submit_form(*form_owner, node_id);
+                local_name!("a") => {
+                    if let Some(href) = el.attr(local_name!("href")) {
+                        if let Some(url) = doc.url.resolve_relative(href) {
+                            doc.navigation_provider.navigate_to(NavigationOptions::new(
+                                url,
+                                String::from("text/plain"),
+                                doc.id(),
+                            ));
+                        } else {
+                            println!("{href} is not parseable as a url. : {:?}", *doc.url)
+                        }
+                        break 'matched true;
+                    } else {
+                        println!("Clicked link without href: {:?}", el.attrs());
+                    }
                 }
-            }
-            #[cfg(feature = "file_input")]
-            local_name!("input") if el.attr(local_name!("type")) == Some("file") => {
-                use crate::qual_name;
-                //TODO: Handle accept attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept by passing an appropriate filter
-                let multiple = el.attr(local_name!("multiple")).is_some();
-                let files = doc.shell_provider.open_file_dialog(multiple, None);
-
-                if let Some(file) = files.first() {
-                    el.attrs
-                        .set(qual_name!("value", html), &file.to_string_lossy());
+                local_name!("input")
+                    if el.is_submit_button() || el.attr(local_name!("type")) == Some("submit") =>
+                {
+                    if let Some(form_owner) = doc.controls_to_form.get(&node_id) {
+                        doc.submit_form(*form_owner, node_id);
+                    }
                 }
-                let text_content = match files.len() {
-                    0 => "No Files Selected".to_string(),
-                    1 => files
-                        .first()
-                        .unwrap()
-                        .file_name()
-                        .unwrap_or_default()
-                        .to_string_lossy()
-                        .to_string(),
-                    x => format!("{x} Files Selected"),
-                };
-
-                if files.is_empty() {
-                    el.special_data = SpecialElementData::None;
-                } else {
-                    el.special_data = SpecialElementData::FileInput(files.into())
+                #[cfg(feature = "file_input")]
+                local_name!("input") if el.attr(local_name!("type")) == Some("file") => {
+                    use crate::qual_name;
+                    //TODO: Handle accept attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept by passing an appropriate filter
+                    let multiple = el.attr(local_name!("multiple")).is_some();
+                    let files = doc.shell_provider.open_file_dialog(multiple, None);
+
+                    if let Some(file) = files.first() {
+                        el.attrs
+                            .set(qual_name!("value", html), &file.to_string_lossy());
+                    }
+                    let text_content = match files.len() {
+                        0 => "No Files Selected".to_string(),
+                        1 => files
+                            .first()
+                            .unwrap()
+                            .file_name()
+                            .unwrap_or_default()
+                            .to_string_lossy()
+                            .to_string(),
+                        x => format!("{x} Files Selected"),
+                    };
+
+                    if files.is_empty() {
+                        el.special_data = SpecialElementData::None;
+                    } else {
+                        el.special_data = SpecialElementData::FileInput(files.into())
+                    }
+                    let child_label_id = doc.nodes[node_id].children[1];
+                    let child_text_id = doc.nodes[child_label_id].children[0];
+                    let text_data = doc.nodes[child_text_id]
+                        .text_data_mut()
+                        .expect("Text data not found");
+                    text_data.content = text_content;
                 }
-                let child_label_id = doc.nodes[node_id].children[1];
-                let child_text_id = doc.nodes[child_label_id].children[0];
-                let text_data = doc.nodes[child_text_id]
-                    .text_data_mut()
-                    .expect("Text data not found");
-                text_data.content = text_content;
+                _ => {}
             }
-            _ => {}
+
+            // No match. Recurse up to parent.
+            maybe_node_id = doc.nodes[node_id].parent;
         }
 
-        // No match. Recurse up to parent.
-        maybe_node_id = doc.nodes[node_id].parent;
-    }
+        // Didn't match anything
+        false
+    };
 
     // If nothing is matched then clear focus
-    doc.clear_focus();
+    if !matched {
+        doc.clear_focus();
+    }
 
     // Assumed double click time to be less than 500ms, although may be system-dependant?
     if doc
@@ -307,7 +350,7 @@ pub(crate) fn handle_click<F: FnMut(DomEvent)>(
         if doc.click_count == 2 {
             dispatch_event(DomEvent::new(
                 target,
-                DomEventData::DoubleClick(event.clone()),
+                DomEventData::DoubleClick(double_click_event),
             ));
         }
     } else {