Merge branch 'feat/react-to-scale-factor-changes' into feat/expose-sc…

…ale-factor

crates/common/src/event_messages.rs

@@ -23,6 +23,8 @@ pub enum EventMessage {
     FocusNextAccessibilityNode,
     /// Focus the previous accessibility Node
     FocusPrevAccessibilityNode,
+    /// Trigger window dragging
+    DragWindow
 }
 
 impl From<accesskit_winit::Event> 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/popup.rs

@@ -1,6 +1,6 @@
 use crate::{Button, CrossIcon};
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements::{elements as dioxus_elements, events::KeyboardEvent};
 use freya_hooks::{theme_with, use_applied_theme, ButtonThemeWith, PopupTheme, PopupThemeWith};
 
 /// The background of the [`Popup`] component.
@@ -69,6 +69,9 @@ pub fn Popup(
     /// Whether to show or no the cross button in the top right corner.
     #[props(default = true)]
     show_close_button: bool,
+    /// Whether to trigger close request handler when the Escape key is pressed.
+    #[props(default = true)]
+    close_on_escape_key: bool,
 ) -> Element {
     let PopupTheme {
         background,
@@ -77,6 +80,21 @@ pub fn Popup(
         width,
         height,
     } = use_applied_theme!(&theme, popup);
+
+    let request_to_close = move || {
+        if let Some(oncloserequest) = &oncloserequest {
+            oncloserequest.call(());
+        }
+    };
+
+    let onkeydown = move |event: KeyboardEvent| {
+        if close_on_escape_key && event.key == Key::Escape {
+            request_to_close()
+        }
+    };
+
+    let on_close_button_click = move |_| request_to_close();
+
     rsx!(
         PopupBackground {
             rect {
@@ -87,6 +105,7 @@ pub fn Popup(
                 shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
                 width: "{width}",
                 height: "{height}",
+                onkeydown,
                 if show_close_button {
                     rect {
                         height: "0",
@@ -101,9 +120,7 @@ pub fn Popup(
                                 corner_radius: "999".into(),
                                 shadow: "none".into()
                             }),
-                            onclick: move |_| if let Some(oncloserequest) = &oncloserequest {
-                                oncloserequest.call(());
-                            },
+                            onclick: on_close_button_click,
                             CrossIcon {
                                 fill: cross_fill
                              }
@@ -147,6 +164,7 @@ pub fn PopupContent(children: Element) -> Element {
 mod test {
     use dioxus::prelude::use_signal;
     use freya::prelude::*;
+    use freya_elements::events::keyboard::{Code, Key, Modifiers};
     use freya_testing::prelude::*;
 
     #[tokio::test]
@@ -200,5 +218,35 @@ mod test {
 
         // Check the popup is closed
         assert_eq!(utils.sdom().get().layout().size(), 4);
+
+        // Open the popup
+        utils.push_event(PlatformEvent::Mouse {
+            name: EventName::Click,
+            cursor: (5.0, 5.0).into(),
+            button: Some(MouseButton::Left),
+        });
+        utils.wait_for_update().await;
+
+        // Send a random keydown event
+        utils.push_event(PlatformEvent::Keyboard {
+            name: EventName::KeyDown,
+            key: Key::ArrowDown,
+            code: Code::ArrowDown,
+            modifiers: Modifiers::empty(),
+        });
+        utils.wait_for_update().await;
+        // Check the popup is still open
+        assert_eq!(utils.sdom().get().layout().size(), 10);
+
+        // Send a ESC keydown event
+        utils.push_event(PlatformEvent::Keyboard {
+            name: EventName::KeyDown,
+            key: Key::Escape,
+            code: Code::Escape,
+            modifiers: Modifiers::empty(),
+        });
+        utils.wait_for_update().await;
+        // Check the popup is closed
+        assert_eq!(utils.sdom().get().layout().size(), 4);
     }
 }

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/config.rs

@@ -185,7 +185,7 @@ impl<'a, T: Clone> LaunchConfig<'a, T> {
         self
     }
 
-    /// Resgiter a default font.
+    /// Regiter a default font.
     pub fn with_default_font(mut self, font_name: &str) -> Self {
         self.default_fonts.push(font_name.to_string());
         self

crates/renderer/src/renderer.rs

@@ -256,7 +256,7 @@ impl<'a, State: Clone> ApplicationHandler<EventMessage> for DesktopRenderer<'a,
             let num_samples = gl_config.num_samples() as usize;
             let stencil_size = gl_config.stencil_size() as usize;
 
-            let mut surface = create_surface(
+            let surface = create_surface(
                 &mut window,
                 fb_info,
                 &mut gr_context,
@@ -265,7 +265,6 @@ impl<'a, State: Clone> ApplicationHandler<EventMessage> for DesktopRenderer<'a,
             );
 
             let scale_factor = window.scale_factor() as f32;
-            surface.canvas().scale((scale_factor, scale_factor));
 
             let mut app = Application::new(
                 sdom,
@@ -381,7 +380,6 @@ impl<'a, State: Clone> ApplicationHandler<EventMessage> for DesktopRenderer<'a,
             WindowEvent::ScaleFactorChanged { scale_factor, .. } => {
                 let scale_factor = scale_factor as f32;
                 app.resize(window.inner_size(), scale_factor);
-                surface.canvas().scale((scale_factor, scale_factor));
             }
             WindowEvent::CloseRequested => event_loop.exit(),
             WindowEvent::Ime(Ime::Commit(text)) => {

crates/torin/src/node.rs

@@ -65,6 +65,7 @@ impl Scaled for Node {
         self.padding.scale(scale_factor);
         self.offset_x *= scale_factor;
         self.offset_y *= scale_factor;
+        self.position.scale(scale_factor);
     }
 }
 

crates/torin/src/values/position.rs

@@ -1,6 +1,9 @@
 use std::ops::Deref;
 
-use crate::prelude::{Area, Point2D, Size2D};
+use crate::{
+    prelude::{Area, Point2D, Size2D},
+    scaled::Scaled,
+};
 
 #[derive(Default, PartialEq, Clone, Debug)]
 pub struct AbsolutePosition {
@@ -121,3 +124,22 @@ impl Position {
         }
     }
 }
+
+impl Scaled for Position {
+    fn scale(&mut self, scale_factor: f32) {
+        if let Self::Absolute(absolute_postion) = self {
+            if let Some(top) = &mut absolute_postion.top {
+                *top *= scale_factor;
+            }
+            if let Some(right) = &mut absolute_postion.right {
+                *right *= scale_factor;
+            }
+            if let Some(bottom) = &mut absolute_postion.bottom {
+                *bottom *= scale_factor;
+            }
+            if let Some(left) = &mut absolute_postion.left {
+                *left *= scale_factor;
+            }
+        }
+    }
+}

examples/massive.rs

@@ -17,34 +17,23 @@ fn StatefulSwitch() -> Element {
 }
 
 fn app() -> Element {
-    let cols = 100;
-    let rows = 100;
+    let cols = 30;
+    let rows = 30;
 
     rsx!(
-        rect {
-            width: "100%",
-            height: "100%",
-            padding: "2.5",
+        for row in 0..rows {
             rect {
-                direction: "horizontal",
+                key: "{row}",
                 width: "100%",
-                height: "100%",
-                {(0..cols).map(|col| {
-                    rsx! {
-                        rect {
-                            key: "{col}",
-                            width: "calc(100% / {cols})",
-                            height: "100%",
-                            {(0..rows).map(|row| {
-                                rsx! {
-                                    StatefulSwitch {
-                                        key: "{row}{col}",
-                                    }
-                                }
-                            })}
-                        }
+                height: "{(100.0 / rows as f32)}%",
+                direction: "horizontal",
+                for col in 0..cols {
+                    rect {
+                        width: "{(100.0 / cols as f32)}%",
+                        key: "{row}{col}",
+                        StatefulSwitch { }
                     }
-                })}
+                }
             }
         }
     )

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"
+                }
+            }
+        }
+    )
+}

website/package.json

@@ -15,7 +15,7 @@
     "@astrojs/deno": "^5.0.0",
     "@astrojs/rss": "^4.0.1",
     "@astrojs/tailwind": "^5.0.2",
-    "astro": "3.5.3",
+    "astro": "4.7.1",
     "rehype-accessible-emojis": "^0.3.2",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",