feat: Add window drag area (#597)

* feat: Add window drag area

* stop propagating event in window drag area

* clean up window drag area example

crates/common/src/event_messages.rs

@@ -25,6 +25,8 @@ pub enum EventMessage {
     FocusNextAccessibilityNode,
     /// Focus the previous accessibility Node
     FocusPrevAccessibilityNode,
+    /// Trigger window dragging
+    DragWindow
 }
 
 impl From<ActionRequestEvent> for EventMessage {

crates/components/src/lib.rs

@@ -33,6 +33,7 @@ mod table;
 mod theme;
 mod tile;
 mod tooltip;
+mod window_drag_area;
 
 pub use accordion::*;
 pub use activable_route::*;
@@ -66,3 +67,4 @@ pub use table::*;
 pub use theme::*;
 pub use tile::*;
 pub use tooltip::*;
+pub use window_drag_area::*;

crates/components/src/window_drag_area.rs

@@ -0,0 +1,43 @@
+use dioxus::prelude::*;
+use freya_hooks::use_platform;
+use freya_elements::{elements as dioxus_elements, events::MouseEvent};
+
+/// Allow dragging the window when the cursor drag this component with a left mouse click.
+///
+/// # Example
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app() -> Element {
+///     rsx!(
+///         WindowDragArea {
+///             label {
+///                 height: "100%",
+///                 width: "100%",
+///                 "Drag Me"
+///             }
+///         }
+///     )
+/// }
+/// ```
+///
+#[allow(non_snake_case)]
+#[component]
+pub fn WindowDragArea(
+    /// The inner children for the WindowDragArea
+    children: Element
+) -> Element {
+    let platform = use_platform();
+
+    let onmousedown = move |e: MouseEvent| {
+        e.stop_propagation();
+        platform.drag_window();
+    };
+
+    rsx!(
+        rect {
+            onmousedown,
+            {children}
+        }
+    )
+}

crates/hooks/src/use_platform.rs

@@ -49,6 +49,10 @@ impl UsePlatform {
         self.send(EventMessage::SetCursorIcon(cursor_icon)).ok();
     }
 
+    pub fn drag_window(&self) {
+        self.send(EventMessage::DragWindow).ok();
+    }
+
     pub fn request_animation_frame(&self) {
         self.send(EventMessage::RequestRerender).ok();
     }

crates/renderer/src/event_loop.rs

@@ -68,6 +68,9 @@ pub fn run_event_loop<State: Clone>(
                 app.set_navigation_mode(NavigationMode::Keyboard);
                 app.focus_next_node(AccessibilityFocusDirection::Forward);
             }
+            Event::UserEvent(EventMessage::DragWindow) => {
+                app.window_env.window.drag_window().ok();
+            }
             Event::UserEvent(ev) => {
                 if let EventMessage::UpdateTemplate(template) = ev {
                     app.vdom_replace_template(template);

examples/window_drag_area.rs

@@ -0,0 +1,42 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use freya::prelude::*;
+
+fn main() {
+    launch(app);
+}
+
+fn app() -> Element {
+    rsx!(
+        rect {
+            width: "100%",
+            height: "100%",
+            WindowDragArea {
+                rect {
+                    width: "100%",
+                    height: "50%",
+                    background: "rgb(28, 28, 28)",
+                    color: "white",
+                    main_align: "center",
+                    label {
+                        width: "100%",
+                        text_align: "center",
+                        "Drag Me!"
+                    }
+                }
+            }
+            rect {
+                width: "100%",
+                height: "50%",
+                main_align: "center",
+                label {
+                    text_align: "center",
+                    "Use the top half to drag the window"
+                }
+            }
+        }
+    )
+}