feat: todo.rs example and some fixes (#1108)

* feat: `todo.rs` example and some fixes * feat: Close popup by clicking on its background * dark theme for the todo example
marc2332 · Feb 13, 2025 · be6428b · be6428b
1 parent 8d0dd30
commit be6428b
Show file tree

Hide file tree

Showing 7 changed files with 440 additions and 62 deletions.
diff --git a/crates/components/src/drag_drop.rs b/crates/components/src/drag_drop.rs
@@ -2,6 +2,7 @@ use dioxus::prelude::*;
 use freya_elements::{
     self as dioxus_elements,
     events::MouseEvent,
+    MouseButton,
 };
 use freya_hooks::use_node_signal;
 use torin::prelude::CursorPoint;
@@ -64,6 +65,9 @@ pub fn DragZone<T: 'static + Clone + PartialEq>(
     };
 
     let onmousedown = move |e: MouseEvent| {
+        if e.data.trigger_button != Some(MouseButton::Left) {
+            return;
+        }
         let size = size.read();
         let coord = e.get_screen_coordinates();
         pos.set(

diff --git a/crates/components/src/popup.rs b/crates/components/src/popup.rs
@@ -5,6 +5,7 @@ use freya_elements::{
         Key,
         KeyboardEvent,
     },
+    MouseEvent,
 };
 use freya_hooks::{
     theme_with,
@@ -26,18 +27,28 @@ use crate::{
 /// The background of the [`Popup`] component.
 #[allow(non_snake_case)]
 #[component]
-pub fn PopupBackground(children: Element) -> Element {
+pub fn PopupBackground(children: Element, onclick: EventHandler<MouseEvent>) -> Element {
     rsx!(rect {
-        height: "100v",
-        width: "100v",
-        background: "rgb(0, 0, 0, 150)",
-        position: "absolute",
-        position_top: "0",
-        position_left: "0",
         layer: "-2000",
-        main_align: "center",
-        cross_align: "center",
-        {children}
+        rect {
+            onclick,
+            height: "100v",
+            width: "100v",
+            background: "rgb(0, 0, 0, 150)",
+            position: "global",
+            position_top: "0",
+            position_left: "0",
+        }
+        rect {
+            height: "100v",
+            width: "100v",
+            position: "global",
+            position_top: "0",
+            position_left: "0",
+            main_align: "center",
+            cross_align: "center",
+            {children}
+        }
     })
 }
 
@@ -133,10 +144,9 @@ pub fn Popup(
         }
     };
 
-    let onpress = move |_| request_to_close();
-
     rsx!(
         PopupBackground {
+            onclick: move |_| request_to_close(),
             rect {
                 scale: "{scale.read()} {scale.read()}",
                 margin: "{margin.read()} 0 0 0",
@@ -163,10 +173,10 @@ pub fn Popup(
                                 corner_radius: "999".into(),
                                 shadow: "none".into()
                             }),
-                            onpress,
+                            onpress: move |_| request_to_close(),
                             CrossIcon {
                                 fill: cross_fill
-                             }
+                            }
                         }
                     }
                 }
@@ -254,7 +264,7 @@ mod test {
         utils.wait_for_update().await;
 
         // Check the popup is opened
-        assert_eq!(utils.sdom().get().layout().size(), 10);
+        assert_eq!(utils.sdom().get().layout().size(), 12);
 
         utils.click_cursor((395., 180.)).await;
 
@@ -273,7 +283,7 @@ mod test {
         });
         utils.wait_for_update().await;
         // Check the popup is still open
-        assert_eq!(utils.sdom().get().layout().size(), 10);
+        assert_eq!(utils.sdom().get().layout().size(), 12);
 
         // Send a ESC globalkeydown event
         utils.push_event(TestEvent::Keyboard {

diff --git a/crates/core/src/elements/utils.rs b/crates/core/src/elements/utils.rs
@@ -129,6 +129,7 @@ pub trait ElementUtils {
             drawing_area = drawing_area.translate(-center.to_vector());
             drawing_area = drawing_area.scale(*scale_x, *scale_y);
             drawing_area = drawing_area.translate(center.to_vector());
+            drawing_area = drawing_area.inflate(1.0, 1.0);
         }
 
         if !transform_state.rotations.is_empty() {

diff --git a/crates/core/src/states/layout.rs b/crates/core/src/states/layout.rs
@@ -144,9 +144,7 @@ impl ParseAttribute for LayoutState {
             }
             AttributeName::Position => {
                 if let Some(value) = attr.value.as_text() {
-                    if self.position.is_empty() {
-                        self.position = Position::parse(value)?;
-                    }
+                    self.position.swap_for(Position::parse(value)?);
                 }
             }
             AttributeName::PositionTop => {

diff --git a/crates/torin/src/measure.rs b/crates/torin/src/measure.rs
@@ -318,7 +318,7 @@ where
                     let Some(child_data) = self.dom_adapter.get_node(child_id) else {
                         return false;
                     };
-                    let is_stacked = !child_data.position.is_absolute();
+                    let is_stacked = child_data.position.is_stacked();
                     if is_stacked {
                         last_child = Some(**child_id);
 
@@ -358,7 +358,7 @@ where
 
                 // No need to consider this Node for a two-phasing
                 // measurements as it will float on its own.
-                if child_data.position.is_absolute() {
+                if !child_data.position.is_stacked() {
                     continue;
                 }
 
@@ -516,7 +516,7 @@ where
             }
 
             // Only the stacked children will be aligned
-            if parent_node.main_alignment.is_spaced() && !child_data.position.is_absolute() {
+            if parent_node.main_alignment.is_spaced() && child_data.position.is_stacked() {
                 // Align the Main axis if necessary
                 Self::align_position(
                     AlignmentDirection::Main,
@@ -561,7 +561,7 @@ where
             child_areas.area.adjust_size(&child_data);
 
             // Stack this child into the parent
-            if !child_data.position.is_absolute() {
+            if child_data.position.is_stacked() {
                 Self::stack_child(
                     available_area,
                     parent_node,

diff --git a/crates/torin/src/values/position.rs b/crates/torin/src/values/position.rs
@@ -25,27 +25,26 @@ pub enum Position {
 }
 
 impl Position {
-    pub const fn is_empty(&self) -> bool {
-        match self {
-            Self::Absolute(absolute_position) => {
-                let PositionSides {
-                    top,
-                    right,
-                    bottom,
-                    left,
-                } = &**absolute_position;
-                top.is_some() && right.is_some() && bottom.is_some() && left.is_some()
+    pub fn swap_for(&mut self, mut other: Self) {
+        let old_positions = match self {
+            Self::Global(positions) | Self::Absolute(positions) => Some(positions.clone()),
+            Self::Stacked => None,
+        };
+
+        let new_positions = match &mut other {
+            Self::Absolute(new_positions) => {
+                *self = Self::new_absolute();
+                Some(new_positions)
             }
-            Self::Global(global_position) => {
-                let PositionSides {
-                    top,
-                    right,
-                    bottom,
-                    left,
-                } = &**global_position;
-                top.is_some() && right.is_some() && bottom.is_some() && left.is_some()
+            Self::Global(new_positions) => {
+                *self = Self::new_global();
+                Some(new_positions)
             }
-            Self::Stacked => true,
+            Self::Stacked => None,
+        };
+
+        if let Some((new_positions, old_positions)) = new_positions.zip(old_positions) {
+            *new_positions = old_positions;
         }
     }
 
@@ -67,6 +66,10 @@ impl Position {
         }))
     }
 
+    pub fn is_stacked(&self) -> bool {
+        matches!(self, Self::Stacked { .. })
+    }
+
     pub fn is_absolute(&self) -> bool {
         matches!(self, Self::Absolute { .. })
     }
@@ -76,38 +79,38 @@ impl Position {
     }
 
     pub fn set_top(&mut self, value: f32) {
-        if !self.is_absolute() {
-            *self = Self::new_absolute();
-        }
-        if let Self::Absolute(absolute_position) = self {
-            absolute_position.top = Some(value);
+        match self {
+            Self::Absolute(position) | Self::Global(position) => {
+                position.top = Some(value);
+            }
+            Self::Stacked => {}
         }
     }
 
     pub fn set_right(&mut self, value: f32) {
-        if !self.is_absolute() {
-            *self = Self::new_absolute();
-        }
-        if let Self::Absolute(absolute_position) = self {
-            absolute_position.right = Some(value);
+        match self {
+            Self::Absolute(position) | Self::Global(position) => {
+                position.right = Some(value);
+            }
+            Self::Stacked => {}
         }
     }
 
     pub fn set_bottom(&mut self, value: f32) {
-        if !self.is_absolute() {
-            *self = Self::new_absolute();
-        }
-        if let Self::Absolute(absolute_position) = self {
-            absolute_position.bottom = Some(value);
+        match self {
+            Self::Absolute(position) | Self::Global(position) => {
+                position.bottom = Some(value);
+            }
+            Self::Stacked => {}
         }
     }
 
     pub fn set_left(&mut self, value: f32) {
-        if !self.is_absolute() {
-            *self = Self::new_absolute();
-        }
-        if let Self::Absolute(absolute_position) = self {
-            absolute_position.left = Some(value);
+        match self {
+            Self::Absolute(position) | Self::Global(position) => {
+                position.left = Some(value);
+            }
+            Self::Stacked => {}
         }
     }