implement drag events

- dragenter/dragover/drageave/drop
- dragstart/drag/dragend
- outgoing drags
- drop effect (not fully implemented)
- internal drags (not fully implemented)
- shell set_datatransfer (I don't think that get_datatransfer is
  necessary as drop will always be an ui event so custom widgets can use
  that)

Author: Klemen2

.gitignore

@@ -10,4 +10,5 @@
 /wpt/*.json
 /apps/wpt/output
 /sites
-.blitz-cache
+.blitz-cache
+/.zed

Cargo.lock

@@ -181,7 +181,8 @@ bytes = "1.7.1"
 slotmap = "1.0.7"
 tracing = "0.1.40"
 tracing-subscriber = "0.3"
-futures-util = "0.3.30"
+futures-core = "0.3.32"
+futures-util = "0.3.32"
 futures-intrusive = "0.5.0"
 pollster = "0.4"
 smol_str = "0.3"

Cargo.toml

@@ -0,0 +1,133 @@
+use dioxus_native::prelude::*;
+
+fn main() {
+    dioxus_native::launch(app);
+}
+
+fn app() -> Element {
+    let mut drag_active = use_signal(|| false);
+    let mut files = use_store(Vec::new);
+    let mut texts = use_store(Vec::new);
+
+    rsx! {
+        div {
+            width: "200px",
+            height: "50px",
+            border: "1px solid black",
+            draggable: "true",
+            ondragstart: move |e| {
+                println!("dragstart");
+                if let Err(err) = e.data_transfer().set_data("text/plain", "Some text") {
+                    dbg!(err);
+                }
+            },
+            ondrag: move |_| {
+                //println!("drag");
+            },
+            ondragend: move |_| {
+                println!("dragend");
+            },
+            "Drag me!"
+        }
+        div {
+            width: "400px",
+            height: "400px",
+            border: if drag_active() { "2px solid black" } else {
+                "2px solid gray"
+            },
+            ondragenter: move |_| {
+                drag_active.set(true);
+                println!("enter");
+            },
+            ondragover: move |evt| {
+                evt.prevent_default();
+                //println!("over");
+            },
+            ondragleave: move |_| {
+                drag_active.set(false);
+                println!("leave");
+            },
+            ondrop: move |evt| {
+                evt.prevent_default();
+                drag_active.set(false);
+                println!("drop");
+                for file in evt.data_transfer().files() {
+                    files.push( file.name());
+                }
+                if let Some(text) = evt.data_transfer().get_as_text() {
+                    texts.push(text);
+                }
+                if let Some(text) = evt.data_transfer().get_data("text/html") {
+                    texts.push(text);
+                }
+                if let Some(text) = evt.data_transfer().get_data("text/rtf") {
+                    texts.push(text);
+                }
+            },
+            "Files"
+            ul {
+                for name in files.iter() {
+                    li {{name}}
+                }
+            }
+            "Text"
+            ul {
+                for text in texts.iter() {
+                    li {{text}}
+                }
+            }
+            DragArea{
+                width: "200px",
+                height: "200px",
+                padding: "4px",
+                color: "green",
+                DragArea{
+                    width: "100px",
+                    height: "100px",
+                    color: "blue"
+                }
+                DragArea{
+                    width: "100px",
+                    height: "100px",
+                    color: "red"
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn DragArea(
+    color: String,
+    #[props(extends=GlobalAttributes)] attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    let mut drag_active = use_signal(|| false);
+    let color = use_signal(|| color);
+
+    rsx!(div {
+        border: if drag_active() {
+            "2px solid black"
+        } else { "2px solid {color}"},
+        ondragenter: move |evt| {
+            evt.stop_propagation();
+            drag_active.set(true);
+            println!("enter {}", color);
+        },
+        ondragover: move |evt| {
+            evt.prevent_default();
+            //println!("over {}", color);
+        },
+        ondragleave: move |evt| {
+            evt.stop_propagation();
+            drag_active.set(false);
+            println!("leave {}", color);
+        },
+        ondrop: move |_| {
+            drag_active.set(false);
+            println!("drop {}", color);
+        },
+        ..attributes,
+        {children}
+    })
+}

examples/dnd.rs

@@ -2458,6 +2458,22 @@ impl BaseDocument {
         Some((inline_root.id, byte_offset))
     }
 
+    /// Checks if a point has landed on selection
+    pub fn is_text_selected_at_position(&self, x: f32, y: f32) -> bool {
+        if let Some((node, offset)) = self.find_text_position(x, y) {
+            self.is_selected_text(node, offset)
+        } else {
+            false
+        }
+    }
+
+    /// Checks if found node and offset are in selection
+    pub fn is_selected_text(&self, node: NodeId, offset: usize) -> bool {
+        let (parent, idx) = self.anonymous_block_location(node);
+        let parent = parent.unwrap_or(node);
+        self.text_selection.is_selected(parent, idx, offset)
+    }
+
     /// Set the text selection range (creates a new selection from anchor to focus)
     pub fn set_text_selection(
         &mut self,

packages/blitz-dom/src/document.rs

@@ -0,0 +1,60 @@
+use std::any::Any;
+
+use blitz_traits::events::BlitzDataTransferItemsTrait;
+
+#[derive(Debug, Clone)]
+pub struct BlitzInternalDataTransferEntry {
+    pub format: String,
+    pub data: String,
+}
+
+#[derive(Debug, Default)]
+pub struct BlitzInternalDataTransferItems {
+    entries: Vec<BlitzInternalDataTransferEntry>,
+    // todo when dragging images file is set
+    _files: Vec<String>,
+}
+
+impl BlitzDataTransferItemsTrait for BlitzInternalDataTransferItems {
+    fn is_empty(&self) -> bool {
+        self.entries.is_empty()
+    }
+
+    fn get_data(&self, format: &str) -> Option<String> {
+        self.entries
+            .iter()
+            .find(|entry| entry.format == format)
+            .map(|entry| entry.data.clone())
+    }
+
+    fn set_data(&mut self, format: &str, data: &str) -> Result<(), String> {
+        if let Some(entry) = self.entries.iter_mut().find(|e| e.format == format) {
+            entry.data = data.to_string();
+        } else {
+            self.entries.push(BlitzInternalDataTransferEntry {
+                format: format.to_string(),
+                data: data.to_string(),
+            });
+        }
+        Ok(())
+    }
+
+    fn clear_all(&mut self) {
+        self.entries.clear();
+    }
+
+    fn clear_format(&mut self, format: &str) {
+        self.entries.retain(|entry| entry.format != format);
+    }
+
+    fn types(&self) -> Vec<String> {
+        self.entries
+            .iter()
+            .map(|entry| entry.format.clone())
+            .collect()
+    }
+
+    fn as_any(&self) -> &dyn Any {
+        self as &dyn Any
+    }
+}