From d4c2edc72fd225017911de9d76839de428b6a5eb Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sun, 2 Jul 2023 16:31:43 +0200
Subject: [PATCH 01/21] feat: Proper event bubbling

---
 core/src/events.rs  | 51 ++++-----------------------------------------
 examples/aaa.rs     | 39 ++++++++++++++++++++++++++++++++++
 renderer/src/app.rs |  2 +-
 3 files changed, 44 insertions(+), 48 deletions(-)
 create mode 100644 examples/aaa.rs

diff --git a/core/src/events.rs b/core/src/events.rs
index 972d111da..0eb76b281 100644
--- a/core/src/events.rs
+++ b/core/src/events.rs
@@ -4,9 +4,7 @@ use dioxus_native_core::NodeId;
 use freya_dom::prelude::FreyaDOM;
 use freya_layout::Layers;
 
-use freya_node_state::{Fill, Style};
 use rustc_hash::FxHashMap;
-use skia_safe::Color;
 
 pub use crate::dom_events::DomEvent;
 pub use crate::events_processor::EventsProcessor;
@@ -123,26 +121,6 @@ fn get_derivated_events(event_name: &str) -> Vec<&str> {
     }
 }
 
-const STACKED_EVENTS: [&str; 13] = [
-    "mouseover",
-    "mouseenter",
-    "mouseleave",
-    "click",
-    "keydown",
-    "keyup",
-    "touchcancel",
-    "touchend",
-    "touchmove",
-    "touchstart",
-    "pointerover",
-    "pointerenter",
-    "pointerleave",
-];
-
-const FIRST_CAPTURED_EVENTS: [&str; 1] = ["wheel"];
-
-const LAST_CAPTURED_EVENTS: [&str; 3] = ["click", "touchstart", "touchend"];
-
 /// Measure what DOM events could be emited
 fn measure_dom_events(
     potential_events: &mut NodesEvents,
@@ -155,43 +133,22 @@ fn measure_dom_events(
     for (event_name, event_nodes) in potential_events.iter_mut() {
         let derivated_events = get_derivated_events(event_name.as_str());
 
-        let mut found_nodes: Vec<(&NodeId, FreyaEvent)> = Vec::new();
+        let mut found_node: Option<(&NodeId, FreyaEvent)> = None;
         for derivated_event_name in derivated_events {
             let listeners = rdom.get_listening_sorted(derivated_event_name);
-            'event_nodes: for (node_id, request) in event_nodes.iter() {
+            for (node_id, request) in event_nodes.iter() {
                 for listener in &listeners {
                     if listener.id() == *node_id {
-                        let Style { background, .. } = &*listener.get::<Style>().unwrap();
-
                         let mut request = request.clone();
                         request.set_name(derivated_event_name.to_string());
 
-                        // Stop searching on first match
-                        if background != &Fill::Color(Color::TRANSPARENT)
-                            && FIRST_CAPTURED_EVENTS.contains(&derivated_event_name)
-                        {
-                            break 'event_nodes;
-                        }
-
-                        // Only keep the last matched event
-                        if background != &Fill::Color(Color::TRANSPARENT)
-                            && LAST_CAPTURED_EVENTS.contains(&derivated_event_name)
-                        {
-                            found_nodes.clear();
-                        }
-
-                        // Stack the matched events
-                        if STACKED_EVENTS.contains(&derivated_event_name) {
-                            found_nodes.push((node_id, request))
-                        } else {
-                            found_nodes = vec![(node_id, request)]
-                        }
+                        found_node = Some((node_id, request));
                     }
                 }
             }
         }
 
-        for (node_id, request_event) in found_nodes {
+        if let Some((node_id, request_event)) = found_node {
             let areas = fdom.layout().get(*node_id).cloned();
             if let Some(areas) = areas {
                 let node_ref = fdom.rdom().get(*node_id).unwrap();
diff --git a/examples/aaa.rs b/examples/aaa.rs
new file mode 100644
index 000000000..232f680e4
--- /dev/null
+++ b/examples/aaa.rs
@@ -0,0 +1,39 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use freya::prelude::*;
+
+fn main() {
+    launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let onclick = |e: MouseEvent| {
+        e.stop_propagation();
+        println!("clicked C");
+    };
+
+    render!(
+        rect {
+            height: "100%",
+            width: "100%",
+            padding: "100",
+            onclick: |_| println!("clicked A"),
+            rect {
+                height: "100%",
+                width: "100%",
+                padding: "100",
+                onclick: |_| println!("clicked B"),
+                rect {
+                    height: "100%",
+                    width: "100%",
+                    background: "red",
+                    padding: "100",
+                    onclick: onclick
+                }
+            }
+        }
+    )
+}
diff --git a/renderer/src/app.rs b/renderer/src/app.rs
index d9429a77e..1bc49e1b8 100644
--- a/renderer/src/app.rs
+++ b/renderer/src/app.rs
@@ -179,7 +179,7 @@ impl<State: 'static + Clone> App<State> {
                         ev = self.event_receiver.recv() => {
                             if let Some(ev) = ev {
                                 let data = ev.data.any();
-                                self.vdom.handle_event(&ev.name, data, ev.element_id, false);
+                                self.vdom.handle_event(&ev.name, data, ev.element_id, true);
 
                                 self.vdom.process_events();
                             }

From 7db5f051cab0812729782337949bd4169d927069 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sun, 5 Nov 2023 00:13:02 +0100
Subject: [PATCH 02/21] chore: Organize torin tests

---
 crates/torin/src/lib.rs         |    2 +
 crates/torin/src/test_utils.rs  |   83 ++
 crates/torin/tests/alignment.rs |  279 +++++++
 crates/torin/tests/margin.rs    |   58 ++
 crates/torin/tests/other.rs     |  377 +++++++++
 crates/torin/tests/padding.rs   |   40 +
 crates/torin/tests/size.rs      |  534 ++++++++++++
 crates/torin/tests/test.rs      | 1366 -------------------------------
 8 files changed, 1373 insertions(+), 1366 deletions(-)
 create mode 100644 crates/torin/src/test_utils.rs
 create mode 100644 crates/torin/tests/alignment.rs
 create mode 100644 crates/torin/tests/margin.rs
 create mode 100644 crates/torin/tests/other.rs
 create mode 100644 crates/torin/tests/padding.rs
 create mode 100644 crates/torin/tests/size.rs
 delete mode 100644 crates/torin/tests/test.rs

diff --git a/crates/torin/src/lib.rs b/crates/torin/src/lib.rs
index 688e9ccc5..eea25c265 100644
--- a/crates/torin/src/lib.rs
+++ b/crates/torin/src/lib.rs
@@ -20,3 +20,5 @@ pub mod prelude {
     pub use crate::torin::*;
     pub use crate::values::prelude::*;
 }
+
+pub mod test_utils;
diff --git a/crates/torin/src/test_utils.rs b/crates/torin/src/test_utils.rs
new file mode 100644
index 000000000..c7063ae93
--- /dev/null
+++ b/crates/torin/src/test_utils.rs
@@ -0,0 +1,83 @@
+use crate::prelude::*;
+use std::collections::HashMap;
+
+pub struct TestingMeasurer;
+
+impl LayoutMeasurer<usize> for TestingMeasurer {
+    fn measure(
+        &mut self,
+        _node_id: usize,
+        _node: &Node,
+        _area: &Area,
+        _parent_size: &Area,
+        _available_parent_area: &Area,
+    ) -> Option<Area> {
+        None
+    }
+}
+
+#[derive(Default)]
+pub struct TestingDOM {
+    mapper: HashMap<usize, (Option<usize>, Vec<usize>, u16, Node)>,
+}
+
+impl TestingDOM {
+    pub fn add(&mut self, node_id: usize, parent: Option<usize>, children: Vec<usize>, node: Node) {
+        let depth = parent.map(|p| self.mapper.get(&p).unwrap().2).unwrap_or(0) + 1;
+        self.mapper.insert(node_id, (parent, children, depth, node));
+    }
+
+    pub fn set_node(&mut self, node_id: usize, node: Node) {
+        self.mapper.get_mut(&node_id).unwrap().3 = node;
+    }
+
+    pub fn remove(&mut self, node_id: usize) {
+        let node = self.mapper.get(&node_id).unwrap().clone();
+
+        if let Some((_, parent_children, _, _)) = node.0.and_then(|p| self.mapper.get_mut(&p)) {
+            parent_children.retain(|c| *c != node_id);
+        }
+
+        self.mapper.remove(&node_id);
+
+        for child in node.1 {
+            self.remove(child);
+        }
+    }
+}
+
+impl DOMAdapter<usize> for TestingDOM {
+    fn children_of(&mut self, node_id: &usize) -> Vec<usize> {
+        self.mapper
+            .get(node_id)
+            .map(|c| c.1.clone())
+            .unwrap_or_default()
+    }
+
+    fn parent_of(&self, node_id: &usize) -> Option<usize> {
+        self.mapper.get(node_id).and_then(|c| c.0)
+    }
+
+    fn height(&self, node_id: &usize) -> Option<u16> {
+        self.mapper.get(node_id).map(|c| c.2)
+    }
+
+    fn get_node(&self, node_id: &usize) -> Option<Node> {
+        self.mapper.get(node_id).map(|c| c.3.clone())
+    }
+
+    fn is_node_valid(&mut self, _node_id: &usize) -> bool {
+        true
+    }
+
+    fn closest_common_parent(&self, node_id_a: &usize, _node_id_b: &usize) -> Option<usize> {
+        Some(self.parent_of(node_id_a).unwrap_or(*node_id_a))
+    }
+}
+
+pub fn test_utils() -> (Torin<usize>, Option<TestingMeasurer>) {
+    let layout = Torin::<usize>::new();
+    let measurer = Some(TestingMeasurer);
+
+    (layout, measurer)
+}
diff --git a/crates/torin/tests/alignment.rs b/crates/torin/tests/alignment.rs
new file mode 100644
index 000000000..df3c346f9
--- /dev/null
+++ b/crates/torin/tests/alignment.rs
@@ -0,0 +1,279 @@
+use torin::{prelude::*, test_utils::*};
+
+#[test]
+pub fn display_horizontal() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1],
+        Node::from_size_and_alignments_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            Alignment::Center,
+            Alignment::Center,
+            DirectionMode::Horizontal,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(100.0)),
+            Size::Pixels(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(50.0, 50.0), Size2D::new(100.0, 100.0)),
+    );
+}
+
+#[test]
+pub fn display_vertical_with_inner_children() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1],
+        Node::from_size_and_alignments_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            Alignment::Center,
+            Alignment::Center,
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![2],
+        Node::from_size_and_padding(
+            Size::Pixels(Length::new(100.0)),
+            Size::Pixels(Length::new(100.0)),
+            Gaps::new(5.0, 5.0, 5.0, 5.0),
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(1),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.find_best_root(&mut mocked_dom);
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(50.0, 50.0), Size2D::new(100.0, 100.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(55.0, 55.0), Size2D::new(90.0, 90.0)),
+    );
+}
+
+#[test]
+pub fn double_center_alignment() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_alignments_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            Alignment::Center,
+            Alignment::Center,
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(300.0)),
+            Size::Pixels(Length::new(300.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(400.0, 250.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(350.0, 450.0), Size2D::new(300.0, 300.0)),
+    );
+}
+
+#[test]
+pub fn double_end_alignment() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_alignments_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            Alignment::End,
+            Alignment::End,
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(300.0)),
+            Size::Pixels(Length::new(300.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(800.0, 500.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(700.0, 700.0), Size2D::new(300.0, 300.0)),
+    );
+}
+
+#[test]
+pub fn unsized_alignment() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_alignments_and_direction_and_padding(
+            Size::Inner,
+            Size::Inner,
+            Alignment::Center,
+            Alignment::End,
+            DirectionMode::Horizontal,
+            Gaps::new(15.0, 15.0, 15.0, 15.0),
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(100.0)),
+            Size::Pixels(Length::new(50.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction_and_margin(
+            Size::Pixels(Length::new(150.0)),
+            Size::Pixels(Length::new(80.0)),
+            DirectionMode::Vertical,
+            Gaps::new(10.0, 50.0, 20.0, 0.0),
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(350.0, 190.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().visible_area(),
+        Rect::new(Point2D::new(15.0, 75.0), Size2D::new(100.0, 50.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().visible_area(),
+        Rect::new(Point2D::new(115.0, 25.0), Size2D::new(150.0, 80.0)),
+    );
+}
diff --git a/crates/torin/tests/margin.rs b/crates/torin/tests/margin.rs
new file mode 100644
index 000000000..dcf2e480c
--- /dev/null
+++ b/crates/torin/tests/margin.rs
@@ -0,0 +1,58 @@
+#[cfg(test)]
+use torin::{prelude::*, test_utils::*};
+
+#[test]
+pub fn margin() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_margin(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            Gaps::new(5.0, 5.0, 5.0, 5.0),
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_margin(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            Gaps::new(5.0, 5.0, 5.0, 5.0),
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    let node_areas = layout.get(1).unwrap();
+
+    assert_eq!(
+        node_areas.area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(210.0, 210.0)),
+    );
+
+    assert_eq!(
+        node_areas.visible_area(),
+        Rect::new(Point2D::new(5.0, 5.0), Size2D::new(200.0, 200.0)),
+    );
+}
diff --git a/crates/torin/tests/other.rs b/crates/torin/tests/other.rs
new file mode 100644
index 000000000..105b7fdbf
--- /dev/null
+++ b/crates/torin/tests/other.rs
@@ -0,0 +1,377 @@
+use rustc_hash::FxHashSet;
+#[cfg(test)]
+use torin::{prelude::*, test_utils::*};
+
+#[test]
+pub fn caching() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1],
+        Node::from_size_and_padding(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            Gaps::new(5.0, 0.0, 0.0, 0.0),
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 5.0), Size2D::new(200.0, 195.0)),
+    );
+
+    mocked_dom.set_node(
+        1,
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(50.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    layout.invalidate(1);
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 5.0), Size2D::new(100.0, 195.0)),
+    );
+}
+
+#[test]
+pub fn layout_dirty_nodes() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        None,
+        vec![2],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(100.0)),
+            Size::Pixels(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(1),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(50.0)),
+            Size::Pixels(Length::new(50.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    // CASE 1
+    // - Root is fixed
+    // - Child A is fixed
+    // - Child A[0] is fixed
+
+    assert_eq!(
+        layout.get(0).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(100.0, 100.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(50.0, 50.0)),
+    );
+
+    mocked_dom.set_node(
+        2,
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(10.0)),
+            Size::Pixels(Length::new(10.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    layout.invalidate(2);
+
+    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([2]));
+
+    // CASE 2
+    // Same as Case 1 but we make Child A depend on Child A[0]'s size
+
+    mocked_dom.set_node(
+        1,
+        Node::from_size_and_direction(
+            Size::Inner,
+            Size::Pixels(Length::new(10.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    layout.invalidate(1);
+
+    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([2, 1]));
+
+    // CASE 3
+    // Same as Case 2, but triggers a change in Child A[0]
+
+    mocked_dom.set_node(
+        2,
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(50.0)),
+            Size::Pixels(Length::new(50.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    layout.invalidate(2);
+
+    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([2, 1]));
+
+    // CASE 4
+    // Same as Case 3, but triggers a change in the root
+
+    mocked_dom.set_node(
+        0,
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(150.0)),
+            Size::Pixels(Length::new(150.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    layout.invalidate(0);
+
+    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([2, 1, 0]));
+}
+
+#[test]
+pub fn node_removal() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![2, 3],
+        Node::from_size_and_direction(Size::Inner, Size::Inner, DirectionMode::Vertical),
+    );
+    mocked_dom.add(
+        2,
+        Some(1),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        3,
+        Some(1),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 400.0)),
+    );
+
+    assert_eq!(
+        layout.get(3).unwrap().area,
+        Rect::new(Point2D::new(0.0, 200.0), Size2D::new(200.0, 200.0)),
+    );
+
+    layout.remove(2, &mut mocked_dom, true);
+
+    mocked_dom.remove(2);
+
+    layout.find_best_root(&mut mocked_dom);
+
+    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([1, 3]));
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(3).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+}
+
+#[test]
+pub fn deep_tree() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![2],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(100.0)),
+            Size::Pixels(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(1),
+        vec![3],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        3,
+        Some(2),
+        vec![4],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        4,
+        Some(3),
+        vec![5],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        5,
+        Some(4),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.find_best_root(&mut mocked_dom);
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    mocked_dom.set_node(
+        4,
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(200.0)),
+            Size::Percentage(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    layout.invalidate(4);
+
+    layout.find_best_root(&mut mocked_dom);
+    assert_eq!(layout.get_root_candidate(), RootNodeCandidate::Valid(4));
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(layout.get_root_candidate(), RootNodeCandidate::None);
+}
diff --git a/crates/torin/tests/padding.rs b/crates/torin/tests/padding.rs
new file mode 100644
index 000000000..70cbccf5b
--- /dev/null
+++ b/crates/torin/tests/padding.rs
@@ -0,0 +1,40 @@
+use torin::{prelude::*, test_utils::*};
+
+#[test]
+pub fn padding() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1],
+        Node::from_size_and_padding(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            Gaps::new(5.0, 10.0, 15.0, 20.0),
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(20.0, 5.0), Size2D::new(170.0, 180.0)),
+    );
+}
diff --git a/crates/torin/tests/size.rs b/crates/torin/tests/size.rs
new file mode 100644
index 000000000..6daa6b7ea
--- /dev/null
+++ b/crates/torin/tests/size.rs
@@ -0,0 +1,534 @@
+use torin::{prelude::*, test_utils::*};
+
+#[test]
+pub fn unsized_parent_with_child_with_margin() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1],
+        Node::from_size_and_direction(Size::Inner, Size::Inner, DirectionMode::Vertical),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_margin(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            Gaps::new(10.0, 20.0, 30.0, 40.0),
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().visible_area(),
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().visible_area(),
+        Rect::new(Point2D::new(40.0, 10.0), Size2D::new(940.0, 960.0)),
+    );
+}
+
+#[test]
+pub fn unsized_parent_with_padding() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1],
+        Node::from_size_and_padding(Size::Inner, Size::Inner, Gaps::new(10.0, 20.0, 30.0, 40.0)),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().visible_area().round(),
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().visible_area().round(),
+        Rect::new(Point2D::new(40.0, 10.0), Size2D::new(940.0, 960.0)),
+    );
+}
+
+#[test]
+pub fn stacked() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(50.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(50.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 100.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(200.0, 100.0)),
+    );
+
+    mocked_dom.set_node(
+        2,
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(50.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    layout.invalidate(2);
+
+    layout.find_best_root(&mut mocked_dom);
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 100.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(200.0, 100.0)),
+    );
+}
+
+#[test]
+pub fn two_cols_auto() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_direction(
+            Size::Inner,
+            Size::Pixels(Length::new(400.0)),
+            DirectionMode::Horizontal,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(50.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(50.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.find_best_root(&mut mocked_dom);
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(400.0, 400.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(400.0, 400.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(200.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+}
+
+#[test]
+pub fn sibling_increments_area() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_direction(Size::Inner, Size::Inner, DirectionMode::Vertical),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(300.0)),
+            Size::Pixels(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(50.0)),
+            Size::Pixels(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(300.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(150.0, 100.0)),
+    );
+}
+
+#[test]
+pub fn root_100per_children_50per50per() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(50.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(50.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.find_best_root(&mut mocked_dom);
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 500.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(0.0, 500.0), Size2D::new(1000.0, 500.0)),
+    );
+}
+
+#[test]
+pub fn root_200px_children_50per50per() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(50.0)),
+            DirectionMode::Horizontal,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Percentage(Length::new(100.0)),
+            Size::Percentage(Length::new(50.0)),
+            DirectionMode::Horizontal,
+        ),
+    );
+
+    layout.find_best_root(&mut mocked_dom);
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(0).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 100.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(200.0, 100.0)),
+    );
+}
+
+#[test]
+pub fn direction() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(100.0)),
+            Size::Pixels(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(100.0)),
+            Size::Pixels(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(100.0, 100.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(100.0, 100.0)),
+    );
+
+    // Change the direction from vertical to horizontal
+
+    mocked_dom.set_node(
+        0,
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            DirectionMode::Horizontal,
+        ),
+    );
+    layout.invalidate(0);
+
+    layout.find_best_root(&mut mocked_dom);
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(100.0, 100.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(100.0, 0.0), Size2D::new(100.0, 100.0)),
+    );
+}
+
+#[test]
+pub fn scroll() {
+    let (mut layout, mut measurer) = test_utils();
+
+    let mut mocked_dom = TestingDOM::default();
+    mocked_dom.add(
+        0,
+        None,
+        vec![1, 2],
+        Node::from_size_and_scroll(
+            Size::Pixels(Length::new(200.0)),
+            Size::Pixels(Length::new(200.0)),
+            Length::new(50.0),
+            Length::new(0.0),
+        ),
+    );
+    mocked_dom.add(
+        1,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(100.0)),
+            Size::Pixels(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+    mocked_dom.add(
+        2,
+        Some(0),
+        vec![],
+        Node::from_size_and_direction(
+            Size::Pixels(Length::new(100.0)),
+            Size::Pixels(Length::new(100.0)),
+            DirectionMode::Vertical,
+        ),
+    );
+
+    layout.find_best_root(&mut mocked_dom);
+    layout.measure(
+        0,
+        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
+        &mut measurer,
+        &mut mocked_dom,
+    );
+
+    assert_eq!(
+        layout.get(1).unwrap().area,
+        Rect::new(Point2D::new(50.0, 0.0), Size2D::new(100.0, 100.0)),
+    );
+
+    assert_eq!(
+        layout.get(2).unwrap().area,
+        Rect::new(Point2D::new(50.0, 100.0), Size2D::new(100.0, 100.0)),
+    );
+}
diff --git a/crates/torin/tests/test.rs b/crates/torin/tests/test.rs
deleted file mode 100644
index e8b192f2b..000000000
--- a/crates/torin/tests/test.rs
+++ /dev/null
@@ -1,1366 +0,0 @@
-use std::collections::HashMap;
-
-use rustc_hash::FxHashSet;
-use torin::prelude::*;
-
-struct TestingMeasurer;
-
-impl LayoutMeasurer<usize> for TestingMeasurer {
-    fn measure(
-        &mut self,
-        _node_id: usize,
-        _node: &Node,
-        _area: &Area,
-        _parent_size: &Area,
-        _available_parent_area: &Area,
-    ) -> Option<Area> {
-        None
-    }
-}
-
-#[derive(Default)]
-struct TestingDOM {
-    mapper: HashMap<usize, (Option<usize>, Vec<usize>, u16, Node)>,
-}
-
-impl TestingDOM {
-    fn add(&mut self, node_id: usize, parent: Option<usize>, children: Vec<usize>, node: Node) {
-        let depth = parent.map(|p| self.mapper.get(&p).unwrap().2).unwrap_or(0) + 1;
-        self.mapper.insert(node_id, (parent, children, depth, node));
-    }
-
-    fn set_node(&mut self, node_id: usize, node: Node) {
-        self.mapper.get_mut(&node_id).unwrap().3 = node;
-    }
-
-    fn remove(&mut self, node_id: usize) {
-        let node = self.mapper.get(&node_id).unwrap().clone();
-
-        if let Some((_, parent_children, _, _)) = node.0.map(|p| self.mapper.get_mut(&p)).flatten()
-        {
-            parent_children.retain(|c| *c != node_id);
-        }
-
-        self.mapper.remove(&node_id);
-
-        for child in node.1 {
-            self.remove(child);
-        }
-    }
-}
-
-impl DOMAdapter<usize> for TestingDOM {
-    fn children_of(&mut self, node_id: &usize) -> Vec<usize> {
-        self.mapper
-            .get(node_id)
-            .map(|c| c.1.clone())
-            .unwrap_or_default()
-    }
-
-    fn parent_of(&self, node_id: &usize) -> Option<usize> {
-        self.mapper.get(node_id).map(|c| c.0).flatten()
-    }
-
-    fn height(&self, node_id: &usize) -> Option<u16> {
-        self.mapper.get(node_id).map(|c| c.2)
-    }
-
-    fn get_node(&self, node_id: &usize) -> Option<Node> {
-        self.mapper.get(node_id).map(|c| c.3.clone())
-    }
-
-    fn is_node_valid(&mut self, _node_id: &usize) -> bool {
-        true
-    }
-
-    fn closest_common_parent(&self, node_id_a: &usize, _node_id_b: &usize) -> Option<usize> {
-        Some(self.parent_of(node_id_a).unwrap_or(*node_id_a))
-    }
-}
-
-fn test_utils() -> (Torin<usize>, Option<TestingMeasurer>) {
-    let layout = Torin::<usize>::new();
-    let measurer = Some(TestingMeasurer);
-
-    (layout, measurer)
-}
-
-#[test]
-pub fn root_100per_children_50per50per() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(50.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(50.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.find_best_root(&mut mocked_dom);
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 500.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(0.0, 500.0), Size2D::new(1000.0, 500.0)),
-    );
-}
-
-#[test]
-pub fn root_200px_children_50per50per() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(50.0)),
-            DirectionMode::Horizontal,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(50.0)),
-            DirectionMode::Horizontal,
-        ),
-    );
-
-    layout.find_best_root(&mut mocked_dom);
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 100.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(200.0, 100.0)),
-    );
-}
-
-#[test]
-pub fn layout_dirty_nodes() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        None,
-        vec![2],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(100.0)),
-            Size::Pixels(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(1),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(50.0)),
-            Size::Pixels(Length::new(50.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    // CASE 1
-    // - Root is fixed
-    // - Child A is fixed
-    // - Child A[0] is fixed
-
-    assert_eq!(
-        layout.get(0).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(100.0, 100.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(50.0, 50.0)),
-    );
-
-    mocked_dom.set_node(
-        2,
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(10.0)),
-            Size::Pixels(Length::new(10.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    layout.invalidate(2);
-
-    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([2]));
-
-    // CASE 2
-    // Same as Case 1 but we make Child A depend on Child A[0]'s size
-
-    mocked_dom.set_node(
-        1,
-        Node::from_size_and_direction(
-            Size::Inner,
-            Size::Pixels(Length::new(10.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    layout.invalidate(1);
-
-    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([2, 1]));
-
-    // CASE 3
-    // Same as Case 2, but triggers a change in Child A[0]
-
-    mocked_dom.set_node(
-        2,
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(50.0)),
-            Size::Pixels(Length::new(50.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    layout.invalidate(2);
-
-    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([2, 1]));
-
-    // CASE 4
-    // Same as Case 3, but triggers a change in the root
-
-    mocked_dom.set_node(
-        0,
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(150.0)),
-            Size::Pixels(Length::new(150.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    layout.invalidate(0);
-
-    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([2, 1, 0]));
-}
-
-#[test]
-pub fn direction() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(100.0)),
-            Size::Pixels(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(100.0)),
-            Size::Pixels(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(100.0, 100.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(100.0, 100.0)),
-    );
-
-    // Change the direction from vertical to horizontal
-
-    mocked_dom.set_node(
-        0,
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Horizontal,
-        ),
-    );
-    layout.invalidate(0);
-
-    layout.find_best_root(&mut mocked_dom);
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(100.0, 100.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(100.0, 0.0), Size2D::new(100.0, 100.0)),
-    );
-}
-
-#[test]
-pub fn scroll() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_scroll(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            Length::new(50.0),
-            Length::new(0.0),
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(100.0)),
-            Size::Pixels(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(100.0)),
-            Size::Pixels(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.find_best_root(&mut mocked_dom);
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(50.0, 0.0), Size2D::new(100.0, 100.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(50.0, 100.0), Size2D::new(100.0, 100.0)),
-    );
-}
-
-#[test]
-pub fn padding() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1],
-        Node::from_size_and_padding(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            Gaps::new(5.0, 10.0, 15.0, 20.0),
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(20.0, 5.0), Size2D::new(170.0, 180.0)),
-    );
-}
-
-#[test]
-pub fn caching() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1],
-        Node::from_size_and_padding(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            Gaps::new(5.0, 0.0, 0.0, 0.0),
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 5.0), Size2D::new(200.0, 195.0)),
-    );
-
-    mocked_dom.set_node(
-        1,
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(50.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    layout.invalidate(1);
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 5.0), Size2D::new(100.0, 195.0)),
-    );
-}
-
-#[test]
-pub fn sibling_increments_area() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_direction(Size::Inner, Size::Inner, DirectionMode::Vertical),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(300.0)),
-            Size::Pixels(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(50.0)),
-            Size::Pixels(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(300.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(150.0, 100.0)),
-    );
-}
-
-#[test]
-pub fn node_removal() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![2, 3],
-        Node::from_size_and_direction(Size::Inner, Size::Inner, DirectionMode::Vertical),
-    );
-    mocked_dom.add(
-        2,
-        Some(1),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        3,
-        Some(1),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 400.0)),
-    );
-
-    assert_eq!(
-        layout.get(3).unwrap().area,
-        Rect::new(Point2D::new(0.0, 200.0), Size2D::new(200.0, 200.0)),
-    );
-
-    layout.remove(2, &mut mocked_dom, true);
-
-    mocked_dom.remove(2);
-
-    layout.find_best_root(&mut mocked_dom);
-
-    assert_eq!(layout.get_dirty_nodes(), &FxHashSet::from_iter([1, 3]));
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(3).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-}
-
-#[test]
-pub fn display_horizontal() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1],
-        Node::from_size_and_alignments_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            Alignment::Center,
-            Alignment::Center,
-            DirectionMode::Horizontal,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(100.0)),
-            Size::Pixels(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(50.0, 50.0), Size2D::new(100.0, 100.0)),
-    );
-}
-
-#[test]
-pub fn display_vertical_with_inner_children() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1],
-        Node::from_size_and_alignments_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            Alignment::Center,
-            Alignment::Center,
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![2],
-        Node::from_size_and_padding(
-            Size::Pixels(Length::new(100.0)),
-            Size::Pixels(Length::new(100.0)),
-            Gaps::new(5.0, 5.0, 5.0, 5.0),
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(1),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.find_best_root(&mut mocked_dom);
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(50.0, 50.0), Size2D::new(100.0, 100.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(55.0, 55.0), Size2D::new(90.0, 90.0)),
-    );
-}
-
-#[test]
-pub fn deep_tree() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![2],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(100.0)),
-            Size::Pixels(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(1),
-        vec![3],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        3,
-        Some(2),
-        vec![4],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        4,
-        Some(3),
-        vec![5],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        5,
-        Some(4),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.find_best_root(&mut mocked_dom);
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    mocked_dom.set_node(
-        4,
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(200.0)),
-            Size::Percentage(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    layout.invalidate(4);
-
-    layout.find_best_root(&mut mocked_dom);
-    assert_eq!(layout.get_root_candidate(), RootNodeCandidate::Valid(4));
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(layout.get_root_candidate(), RootNodeCandidate::None);
-}
-
-#[test]
-pub fn stacked() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(50.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(50.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 100.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(200.0, 100.0)),
-    );
-
-    mocked_dom.set_node(
-        2,
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(50.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    layout.invalidate(2);
-
-    layout.find_best_root(&mut mocked_dom);
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 100.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(0.0, 100.0), Size2D::new(200.0, 100.0)),
-    );
-}
-
-#[test]
-pub fn two_cols_auto() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_direction(
-            Size::Inner,
-            Size::Pixels(Length::new(400.0)),
-            DirectionMode::Horizontal,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(50.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(50.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.find_best_root(&mut mocked_dom);
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(400.0, 400.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(400.0, 400.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(200.0, 0.0), Size2D::new(200.0, 200.0)),
-    );
-}
-
-#[test]
-pub fn margin() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_margin(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            Gaps::new(5.0, 5.0, 5.0, 5.0),
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_margin(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            Gaps::new(5.0, 5.0, 5.0, 5.0),
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    let node_areas = layout.get(1).unwrap();
-
-    assert_eq!(
-        node_areas.area,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(210.0, 210.0)),
-    );
-
-    assert_eq!(
-        node_areas.visible_area(),
-        Rect::new(Point2D::new(5.0, 5.0), Size2D::new(200.0, 200.0)),
-    );
-}
-
-#[test]
-pub fn double_center_alignment() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_alignments_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            Alignment::Center,
-            Alignment::Center,
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(300.0)),
-            Size::Pixels(Length::new(300.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(400.0, 250.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(350.0, 450.0), Size2D::new(300.0, 300.0)),
-    );
-}
-
-#[test]
-pub fn double_end_alignment() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_alignments_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            Alignment::End,
-            Alignment::End,
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(200.0)),
-            Size::Pixels(Length::new(200.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(300.0)),
-            Size::Pixels(Length::new(300.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().area,
-        Rect::new(Point2D::new(800.0, 500.0), Size2D::new(200.0, 200.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().area,
-        Rect::new(Point2D::new(700.0, 700.0), Size2D::new(300.0, 300.0)),
-    );
-}
-
-#[test]
-pub fn unsized_alignment() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1, 2],
-        Node::from_size_and_alignments_and_direction_and_padding(
-            Size::Inner,
-            Size::Inner,
-            Alignment::Center,
-            Alignment::End,
-            DirectionMode::Horizontal,
-            Gaps::new(15.0, 15.0, 15.0, 15.0),
-        ),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Pixels(Length::new(100.0)),
-            Size::Pixels(Length::new(50.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-    mocked_dom.add(
-        2,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction_and_margin(
-            Size::Pixels(Length::new(150.0)),
-            Size::Pixels(Length::new(80.0)),
-            DirectionMode::Vertical,
-            Gaps::new(10.0, 50.0, 20.0, 0.0),
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(350.0, 190.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().visible_area(),
-        Rect::new(Point2D::new(15.0, 75.0), Size2D::new(100.0, 50.0)),
-    );
-
-    assert_eq!(
-        layout.get(2).unwrap().visible_area(),
-        Rect::new(Point2D::new(115.0, 25.0), Size2D::new(150.0, 80.0)),
-    );
-}
-
-#[test]
-pub fn unsized_parent_with_child_with_margin() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1],
-        Node::from_size_and_direction(Size::Inner, Size::Inner, DirectionMode::Vertical),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_margin(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            Gaps::new(10.0, 20.0, 30.0, 40.0),
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().visible_area(),
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().visible_area(),
-        Rect::new(Point2D::new(40.0, 10.0), Size2D::new(940.0, 960.0)),
-    );
-}
-
-#[test]
-pub fn unsized_parent_with_padding() {
-    let (mut layout, mut measurer) = test_utils();
-
-    let mut mocked_dom = TestingDOM::default();
-    mocked_dom.add(
-        0,
-        None,
-        vec![1],
-        Node::from_size_and_padding(Size::Inner, Size::Inner, Gaps::new(10.0, 20.0, 30.0, 40.0)),
-    );
-    mocked_dom.add(
-        1,
-        Some(0),
-        vec![],
-        Node::from_size_and_direction(
-            Size::Percentage(Length::new(100.0)),
-            Size::Percentage(Length::new(100.0)),
-            DirectionMode::Vertical,
-        ),
-    );
-
-    layout.measure(
-        0,
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-        &mut measurer,
-        &mut mocked_dom,
-    );
-
-    assert_eq!(
-        layout.get(0).unwrap().visible_area().round(),
-        Rect::new(Point2D::new(0.0, 0.0), Size2D::new(1000.0, 1000.0)),
-    );
-
-    assert_eq!(
-        layout.get(1).unwrap().visible_area().round(),
-        Rect::new(Point2D::new(40.0, 10.0), Size2D::new(940.0, 960.0)),
-    );
-}

From 7f7d447e5e5f70db42013b29d599ddb3b6b93005 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sun, 5 Nov 2023 22:07:31 +0100
Subject: [PATCH 03/21] feat: Absolute positioning

---
 crates/dom/src/dom_adapter.rs       | 35 ++++++++++++------------
 crates/elements/src/elements.rs     |  1 +
 crates/state/src/layout.rs          |  9 +++++++
 crates/state/src/values/mod.rs      |  2 ++
 crates/state/src/values/position.rs | 16 +++++++++++
 crates/torin/src/measure.rs         | 17 +++++++++---
 crates/torin/src/measure_mode.rs    |  8 +++++-
 crates/torin/src/node.rs            |  5 +++-
 crates/torin/src/values/mod.rs      |  2 ++
 crates/torin/src/values/position.rs |  7 +++++
 examples/position.rs                | 41 +++++++++++++++++++++++++++++
 11 files changed, 121 insertions(+), 22 deletions(-)
 create mode 100644 crates/state/src/values/position.rs
 create mode 100644 crates/torin/src/values/position.rs
 create mode 100644 examples/position.rs

diff --git a/crates/dom/src/dom_adapter.rs b/crates/dom/src/dom_adapter.rs
index dbd95c85a..5f7430b9b 100644
--- a/crates/dom/src/dom_adapter.rs
+++ b/crates/dom/src/dom_adapter.rs
@@ -31,29 +31,30 @@ impl<'a> DioxusDOMAdapter<'a> {
 impl DOMAdapter<NodeId> for DioxusDOMAdapter<'_> {
     fn get_node(&self, node_id: &NodeId) -> Option<Node> {
         let node = self.rdom.get(*node_id)?;
-        let mut size = node.get::<LayoutState>().unwrap().clone();
+        let mut layout = node.get::<LayoutState>().unwrap().clone();
 
         // The root node expands by default
         if *node_id == self.rdom.root_id() {
-            size.width = Size::Percentage(Length::new(100.0));
-            size.height = Size::Percentage(Length::new(100.0));
+            layout.width = Size::Percentage(Length::new(100.0));
+            layout.height = Size::Percentage(Length::new(100.0));
         }
 
         Some(Node {
-            width: size.width,
-            height: size.height,
-            minimum_width: size.minimum_width,
-            minimum_height: size.minimum_height,
-            maximum_width: size.maximum_width,
-            maximum_height: size.maximum_height,
-            direction: size.direction,
-            padding: size.padding,
-            margin: size.margin,
-            main_alignment: size.main_alignment,
-            cross_alignment: size.cross_alignment,
-            offset_x: Length::new(size.offset_x),
-            offset_y: Length::new(size.offset_y),
-            has_layout_references: size.node_ref.is_some(),
+            width: layout.width,
+            height: layout.height,
+            minimum_width: layout.minimum_width,
+            minimum_height: layout.minimum_height,
+            maximum_width: layout.maximum_width,
+            maximum_height: layout.maximum_height,
+            direction: layout.direction,
+            padding: layout.padding,
+            margin: layout.margin,
+            main_alignment: layout.main_alignment,
+            cross_alignment: layout.cross_alignment,
+            offset_x: Length::new(layout.offset_x),
+            offset_y: Length::new(layout.offset_y),
+            has_layout_references: layout.node_ref.is_some(),
+            position: layout.position,
         })
     }
 
diff --git a/crates/elements/src/elements.rs b/crates/elements/src/elements.rs
index 524a71d0a..49a31c051 100644
--- a/crates/elements/src/elements.rs
+++ b/crates/elements/src/elements.rs
@@ -191,6 +191,7 @@ builder_constructors! {
         name: String,
         focusable: String,
         margin: String,
+        position: String,
     };
     label {
         color: String,
diff --git a/crates/state/src/layout.rs b/crates/state/src/layout.rs
index 0870e90cc..a94a33eb5 100644
--- a/crates/state/src/layout.rs
+++ b/crates/state/src/layout.rs
@@ -30,6 +30,7 @@ pub struct LayoutState {
     pub offset_x: f32,
     pub main_alignment: Alignment,
     pub cross_alignment: Alignment,
+    pub position: Position,
     pub node_ref: Option<UnboundedSender<NodeReferenceLayout>>,
 }
 
@@ -57,6 +58,7 @@ impl State<CustomAttributeValues> for LayoutState {
             "cross_align",
             "reference",
             "margin",
+            "position",
         ]))
         .with_tag()
         .with_text();
@@ -190,6 +192,13 @@ impl State<CustomAttributeValues> for LayoutState {
                             }
                         }
                     }
+                    "position" => {
+                        if let Some(value) = attr.value.as_text() {
+                            if let Ok(position) = Position::parse(value) {
+                                layout.position = position;
+                            }
+                        }
+                    }
                     "reference" => {
                         if let OwnedAttributeValue::Custom(CustomAttributeValues::Reference(
                             reference,
diff --git a/crates/state/src/values/mod.rs b/crates/state/src/values/mod.rs
index 3891a5e41..6d851aaaf 100644
--- a/crates/state/src/values/mod.rs
+++ b/crates/state/src/values/mod.rs
@@ -10,6 +10,7 @@ mod font;
 mod gaps;
 mod gradient;
 mod overflow;
+mod position;
 mod shadow;
 mod size;
 mod text_shadow;
@@ -26,6 +27,7 @@ pub use font::*;
 pub use gaps::*;
 pub use gradient::*;
 pub use overflow::*;
+pub use position::*;
 pub use shadow::*;
 pub use size::*;
 pub use text_shadow::*;
diff --git a/crates/state/src/values/position.rs b/crates/state/src/values/position.rs
new file mode 100644
index 000000000..6ad86ad4b
--- /dev/null
+++ b/crates/state/src/values/position.rs
@@ -0,0 +1,16 @@
+use crate::Parse;
+use torin::position::Position;
+
+#[derive(Debug, PartialEq, Eq)]
+pub struct ParsePositionError;
+
+impl Parse for Position {
+    type Err = ParsePositionError;
+
+    fn parse(value: &str) -> Result<Self, Self::Err> {
+        Ok(match value {
+            "absolute" => Position::Absolute,
+            _ => Position::Stacked,
+        })
+    }
+}
diff --git a/crates/torin/src/measure.rs b/crates/torin/src/measure.rs
index 20f87eae6..4b85cf259 100644
--- a/crates/torin/src/measure.rs
+++ b/crates/torin/src/measure.rs
@@ -6,7 +6,7 @@ use crate::{
     geometry::{Area, Size2D},
     measure_mode::MeasureMode,
     node::Node,
-    prelude::{AlignmentDirection, AreaModel, Torin},
+    prelude::{AlignmentDirection, AreaModel, Position, Torin},
     size::Size,
 };
 
@@ -29,9 +29,14 @@ pub fn measure_node<Key: NodeKey>(
 ) -> (bool, NodeAreas) {
     let must_run = layout.dirty.contains(&node_id) || layout.results.get(&node_id).is_none();
     if must_run {
+        let origin = match node.position {
+            Position::Stacked => available_parent_area.origin,
+            Position::Absolute => parent_area.origin,
+        };
+
         // 1. Create the initial Node area
         let mut area = Rect::new(
-            available_parent_area.origin,
+            origin,
             Size2D::new(node.padding.horizontal(), node.padding.vertical()),
         );
 
@@ -253,7 +258,13 @@ pub fn measure_inner_nodes<Key: NodeKey>(
             );
 
             // Stack the child into its parent
-            mode.stack_into_node(parent_node, available_area, &child_areas.area, inner_sizes);
+            mode.stack_into_node(
+                parent_node,
+                available_area,
+                &child_areas.area,
+                inner_sizes,
+                &child_data,
+            );
 
             // Cache the child layout if it was mutated and inner nodes must be cache
             if child_revalidated && must_cache_inner_nodes {
diff --git a/crates/torin/src/measure_mode.rs b/crates/torin/src/measure_mode.rs
index 78cd6c464..a9c73dc3c 100644
--- a/crates/torin/src/measure_mode.rs
+++ b/crates/torin/src/measure_mode.rs
@@ -1,5 +1,6 @@
 use crate::prelude::{
-    get_align_axis, AlignAxis, AlignmentDirection, Area, DirectionMode, Node, Size, Size2D,
+    get_align_axis, AlignAxis, AlignmentDirection, Area, DirectionMode, Node, Position, Size,
+    Size2D,
 };
 
 /// Measurement data for the inner Nodes of a Node
@@ -134,7 +135,12 @@ impl<'a> MeasureMode<'a> {
         available_area: &mut Area,
         content_area: &Area,
         inner_sizes: &mut Size2D,
+        node_data: &Node,
     ) {
+        if node_data.position == Position::Absolute {
+            return;
+        }
+
         match parent_node.direction {
             DirectionMode::Horizontal => {
                 // Move the available area
diff --git a/crates/torin/src/node.rs b/crates/torin/src/node.rs
index cd439cc7d..3ed12a587 100644
--- a/crates/torin/src/node.rs
+++ b/crates/torin/src/node.rs
@@ -1,7 +1,8 @@
 pub use euclid::Rect;
 
 use crate::{
-    alignment::Alignment, direction::DirectionMode, gaps::Gaps, geometry::Length, size::Size,
+    alignment::Alignment, direction::DirectionMode, gaps::Gaps, geometry::Length,
+    prelude::Position, size::Size,
 };
 
 /// Node layout configuration
@@ -36,6 +37,8 @@ pub struct Node {
     /// Direction in which it's inner Nodes will be stacked
     pub direction: DirectionMode,
 
+    pub position: Position,
+
     /// A Node might depend on inner sizes but have a fixed position, like scroll views.
     pub has_layout_references: bool,
 }
diff --git a/crates/torin/src/values/mod.rs b/crates/torin/src/values/mod.rs
index 24128385b..4f5c75fbc 100644
--- a/crates/torin/src/values/mod.rs
+++ b/crates/torin/src/values/mod.rs
@@ -1,11 +1,13 @@
 pub mod alignment;
 pub mod direction;
 pub mod gaps;
+pub mod position;
 pub mod size;
 
 pub mod prelude {
     pub use crate::alignment::*;
     pub use crate::direction::*;
     pub use crate::gaps::*;
+    pub use crate::position::*;
     pub use crate::size::*;
 }
diff --git a/crates/torin/src/values/position.rs b/crates/torin/src/values/position.rs
new file mode 100644
index 000000000..9b33904f7
--- /dev/null
+++ b/crates/torin/src/values/position.rs
@@ -0,0 +1,7 @@
+#[derive(Default, PartialEq, Eq, Debug, Clone)]
+pub enum Position {
+    #[default]
+    Stacked,
+
+    Absolute,
+}
diff --git a/examples/position.rs b/examples/position.rs
new file mode 100644
index 000000000..34623782e
--- /dev/null
+++ b/examples/position.rs
@@ -0,0 +1,41 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use freya::prelude::*;
+
+fn main() {
+    launch_with_props(app, "Position", (400.0, 350.0));
+}
+
+fn app(cx: Scope) -> Element {
+    render!(
+        rect {
+            height: "100%",
+            width: "100%",
+            rect {
+                height: "20%",
+                width: "100%",
+                background: "green",
+            }
+            rect {
+                height: "100",
+                width: "100",
+                background: "red",
+                position: "absolute",
+                layer: "-1"
+            }
+            rect {
+                height: "20%",
+                width: "100%",
+                background: "orange",
+            }
+            rect {
+                height: "20%",
+                width: "100%",
+                background: "yellow",
+            }
+        }
+    )
+}

From de626e530fe0b0c246f0201ae628e19228322a09 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Mon, 6 Nov 2023 22:05:50 +0100
Subject: [PATCH 04/21] feat: Popup component

---
 examples/position.rs | 72 ++++++++++++++++++++++++++++++++------------
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/examples/position.rs b/examples/position.rs
index 34623782e..360e3b5d3 100644
--- a/examples/position.rs
+++ b/examples/position.rs
@@ -9,32 +9,66 @@ fn main() {
     launch_with_props(app, "Position", (400.0, 350.0));
 }
 
-fn app(cx: Scope) -> Element {
+#[allow(non_snake_case)]
+#[inline_props]
+fn PopupBackground<'a>(cx: Scope<'a>, children: Element<'a>) -> Element {
     render!(
         rect {
             height: "100%",
             width: "100%",
+            background: "rgb(0, 0, 0, 150)",
+            position: "absolute",
+            layer: "-1",
+            main_align: "center",
+            cross_align: "center",
+            children
+        }
+    )
+}
+
+#[allow(non_snake_case)]
+#[inline_props]
+fn Popup<'a>(cx: Scope<'a>, children: Element<'a>) -> Element {
+    render!(
+        PopupBackground {
             rect {
-                height: "20%",
-                width: "100%",
-                background: "green",
-            }
-            rect {
-                height: "100",
-                width: "100",
-                background: "red",
-                position: "absolute",
-                layer: "-1"
+                padding: "10",
+                corner_radius: "8",
+                background: "white",
+                shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+                width: "300",
+                height: "200",
+                children
             }
-            rect {
-                height: "20%",
-                width: "100%",
-                background: "orange",
+        }
+    )
+}
+
+fn app(cx: Scope) -> Element {
+    let show_popup = use_state(cx, || false);
+
+    render!(
+        rect {
+            if *show_popup.get() {
+                render!(
+                    Popup {
+                        label {
+                            "whatever"
+                        }
+                        Button {
+                            onclick: |_| show_popup.set(false),
+                            label {
+                                "Close"
+                            }
+                        }
+                    }
+                )
             }
-            rect {
-                height: "20%",
-                width: "100%",
-                background: "yellow",
+            Button {
+                onclick: |_| show_popup.set(true),
+                label {
+                    "Open"
+                }
             }
         }
     )

From 43ad4ff1b09af54045d3202ec93106236a42723b Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sun, 12 Nov 2023 01:02:16 +0100
Subject: [PATCH 05/21] update

---
 Cargo.toml      | 18 +++++++++---------
 examples/aaa.rs | 40 +++++++++++++++++++++++-----------------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index e3c511678..dc434da97 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -26,15 +26,15 @@ freya-testing = { path = "crates/testing", version = "0.1" }
 freya-engine = { path = "crates/engine", version = "0.1" }
 torin = { path = "crates/torin", version = "0.1" }
 
-dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "8ea7f076e5ff2b0a4ccc06cbfb93e93428d41b4b", default-features = false }
-dioxus-native-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "8ea7f076e5ff2b0a4ccc06cbfb93e93428d41b4b" }
-dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "8ea7f076e5ff2b0a4ccc06cbfb93e93428d41b4b", features = ["hot_reload"] }
-dioxus-native-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "8ea7f076e5ff2b0a4ccc06cbfb93e93428d41b4b", features = ["dioxus"] }
-dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "8ea7f076e5ff2b0a4ccc06cbfb93e93428d41b4b" }
-dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "8ea7f076e5ff2b0a4ccc06cbfb93e93428d41b4b" }
-dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "8ea7f076e5ff2b0a4ccc06cbfb93e93428d41b4b" }
-dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "8ea7f076e5ff2b0a4ccc06cbfb93e93428d41b4b", features = ["file_watcher", "custom_file_watcher"], default-features = false }
-dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "8ea7f076e5ff2b0a4ccc06cbfb93e93428d41b4b", default-features = false }
+dioxus = { git = "https://github.com/ealmloff/dioxus", rev = "a120af33addd71031a5ccf44416d2d8b81149c7a", default-features = false }
+dioxus-native-core-macro = { git = "https://github.com/ealmloff/dioxus", rev = "a120af33addd71031a5ccf44416d2d8b81149c7a" }
+dioxus-rsx = { git = "https://github.com/ealmloff/dioxus", rev = "a120af33addd71031a5ccf44416d2d8b81149c7a", features = ["hot_reload"] }
+dioxus-native-core = { git = "https://github.com/ealmloff/dioxus", rev = "a120af33addd71031a5ccf44416d2d8b81149c7a", features = ["dioxus"] }
+dioxus-core-macro = { git = "https://github.com/ealmloff/dioxus", rev = "a120af33addd71031a5ccf44416d2d8b81149c7a" }
+dioxus-hooks = { git = "https://github.com/ealmloff/dioxus", rev = "a120af33addd71031a5ccf44416d2d8b81149c7a" }
+dioxus-core = { git = "https://github.com/ealmloff/dioxus", rev = "a120af33addd71031a5ccf44416d2d8b81149c7a" }
+dioxus-hot-reload = { git = "https://github.com/ealmloff/dioxus", rev = "a120af33addd71031a5ccf44416d2d8b81149c7a", features = ["file_watcher"], default-features = false }
+dioxus-router = { git = "https://github.com/ealmloff/dioxus", rev = "a120af33addd71031a5ccf44416d2d8b81149c7a", default-features = false }
 
 skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] }
 
diff --git a/examples/aaa.rs b/examples/aaa.rs
index 232f680e4..02e7fe405 100644
--- a/examples/aaa.rs
+++ b/examples/aaa.rs
@@ -10,30 +10,36 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let onclick = |e: MouseEvent| {
-        e.stop_propagation();
-        println!("clicked C");
-    };
-
     render!(
         rect {
-            height: "100%",
+            height: "50%",
             width: "100%",
-            padding: "100",
-            onclick: |_| println!("clicked A"),
+            onclick: |_| println!("clicked 1"),
             rect {
                 height: "100%",
                 width: "100%",
-                padding: "100",
-                onclick: |_| println!("clicked B"),
-                rect {
-                    height: "100%",
-                    width: "100%",
-                    background: "red",
-                    padding: "100",
-                    onclick: onclick
-                }
+                background: "blue",
+                onclick: |_| println!("clicked 2"),
             }
         }
+        rect {
+            height: "50%",
+            width: "100%",
+            onclick: |_| println!("clicked 3"),
+            Test { }
+        }
+    )
+}
+
+#[allow(non_snake_case)]
+fn Test(cx: Scope) -> Element {
+    render!(
+        rect {
+            height: "100%",
+            width: "100%",
+            background: "red",
+            onclick: |_| println!("clicked 4"),
+        }
     )
 }
+

From 744f62c5c7fdfaa030e758173349fff5c223e698 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sun, 12 Nov 2023 09:51:58 +0100
Subject: [PATCH 06/21] ux improvements

---
 .../components/src/scroll_views/scroll_view.rs   | 16 ++++++++++++++--
 crates/components/src/slider.rs                  |  3 ++-
 examples/aaa.rs                                  | 15 ++++++---------
 examples/canvas.rs                               |  2 ++
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs
index 49787b4a9..a26e94fde 100644
--- a/crates/components/src/scroll_views/scroll_view.rs
+++ b/crates/components/src/scroll_views/scroll_view.rs
@@ -118,7 +118,13 @@ pub fn ScrollView<'a>(cx: Scope<'a, ScrollViewProps<'a>>) -> Element {
                 corrected_scrolled_y,
             );
 
-            scrolled_y.with_mut(|y| *y = scroll_position_y);
+            // Only scroll when there is still area to scroll
+            if *scrolled_y.read() != scroll_position_y {
+                e.stop_propagation();
+                scrolled_y.with_mut(|y| *y = scroll_position_y);
+            } else {
+                return;
+            }
         }
 
         let wheel_x = if *clicking_shift.read() {
@@ -134,7 +140,13 @@ pub fn ScrollView<'a>(cx: Scope<'a, ScrollViewProps<'a>>) -> Element {
             corrected_scrolled_x,
         );
 
-        scrolled_x.with_mut(|x| *x = scroll_position_x);
+        // Only scroll when there is still area to scroll
+        if *scrolled_x.read() != scroll_position_x {
+            e.stop_propagation();
+            scrolled_x.with_mut(|x| *x = scroll_position_x);
+        } else {
+            return;
+        }
 
         focus.focus();
     };
diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs
index 2723d3b38..d18e3d96e 100644
--- a/crates/components/src/slider.rs
+++ b/crates/components/src/slider.rs
@@ -119,7 +119,8 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
         }
     };
 
-    let onmousedown = |_: MouseEvent| {
+    let onmousedown = |e: MouseEvent| {
+        e.stop_propagation();
         clicking.set(true);
     };
 
diff --git a/examples/aaa.rs b/examples/aaa.rs
index 02e7fe405..69569082e 100644
--- a/examples/aaa.rs
+++ b/examples/aaa.rs
@@ -33,13 +33,10 @@ fn app(cx: Scope) -> Element {
 
 #[allow(non_snake_case)]
 fn Test(cx: Scope) -> Element {
-    render!(
-        rect {
-            height: "100%",
-            width: "100%",
-            background: "red",
-            onclick: |_| println!("clicked 4"),
-        }
-    )
+    render!(rect {
+        height: "100%",
+        width: "100%",
+        background: "red",
+        onclick: |_| println!("clicked 4"),
+    })
 }
-
diff --git a/examples/canvas.rs b/examples/canvas.rs
index ca0b27736..980224b0c 100644
--- a/examples/canvas.rs
+++ b/examples/canvas.rs
@@ -102,6 +102,7 @@ fn app(cx: Scope) -> Element {
                                     padding: "10",
                                     shadow: "0 0 30 0 rgb(0, 0, 0, 150)",
                                     onmousedown:  move |e: MouseEvent| {
+                                        e.stop_propagation();
                                         clicking_drag.set(Some((id, e.get_element_coordinates().to_tuple())));
                                     },
                                     onmouseleave: |_: MouseEvent| {
@@ -295,6 +296,7 @@ fn Editor(cx: Scope) -> Element {
                             let onmousedown = {
                                 to_owned![editable];
                                 move |e: MouseEvent| {
+                                    e.stop_propagation();
                                     editable.process_event(&EditableEvent::MouseDown(e.data, line_index));
                                 }
                             };

From 53d19087bdb903e509739e41d4621decf8ece251 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sun, 12 Nov 2023 10:08:39 +0100
Subject: [PATCH 07/21] improvements

---
 crates/components/src/slider.rs           | 11 ++++++++---
 crates/components/src/switch.rs           | 15 +++++++++++----
 crates/core/src/events/events_measurer.rs |  8 +++++---
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs
index d18e3d96e..6713ae1b5 100644
--- a/crates/components/src/slider.rs
+++ b/crates/components/src/slider.rs
@@ -95,18 +95,21 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
 
     let onmouseleave = {
         to_owned![platform, status];
-        move |_: MouseEvent| {
+        move |e: MouseEvent| {
+            e.stop_propagation();
             *status.write_silent() = SliderStatus::Idle;
             platform.set_cursor(CursorIcon::default());
         }
     };
 
-    let onmouseenter = move |_: MouseEvent| {
+    let onmouseenter = move |e: MouseEvent| {
+        e.stop_propagation();
         *status.write_silent() = SliderStatus::Hovering;
         platform.set_cursor(CursorIcon::Hand);
     };
 
     let onmouseover = move |e: MouseEvent| {
+        e.stop_propagation();
         if *clicking.get() {
             let coordinates = e.get_element_coordinates();
             let mut x = coordinates.x - 7.5 - size.read().area.min_x() as f64;
@@ -124,11 +127,13 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
         clicking.set(true);
     };
 
-    let onclick = |_: MouseEvent| {
+    let onclick = |e: MouseEvent| {
+        e.stop_propagation();
         clicking.set(false);
     };
 
     let onwheel = move |e: WheelEvent| {
+        e.stop_propagation();
         let wheel_y = e.get_delta_y();
         let progress_x = (value / 100.0) * cx.props.width;
 
diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs
index 854cc8ee4..c010f9f06 100644
--- a/crates/components/src/switch.rs
+++ b/crates/components/src/switch.rs
@@ -65,20 +65,27 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
         }
     });
 
+    let onmousedown = |e: MouseEvent| {
+        e.stop_propagation();
+    };
+
     let onmouseleave = {
         to_owned![platform];
-        move |_: MouseEvent| {
+        move |e: MouseEvent| {
+            e.stop_propagation();
             *status.write_silent() = SwitchStatus::Idle;
             platform.set_cursor(CursorIcon::default());
         }
     };
 
-    let onmouseenter = move |_: MouseEvent| {
+    let onmouseenter = move |e: MouseEvent| {
+        e.stop_propagation();
         *status.write_silent() = SwitchStatus::Hovering;
         platform.set_cursor(CursorIcon::Hand);
     };
 
-    let onclick = |_: MouseEvent| {
+    let onclick = |e: MouseEvent| {
+        e.stop_propagation();
         cx.props.ontoggled.call(());
     };
 
@@ -114,7 +121,7 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
             padding: "1",
             corner_radius: "50",
             background: "{border}",
-            onmousedown: |_| {},
+            onmousedown: onmousedown,
             onmouseenter: onmouseenter,
             onmouseleave: onmouseleave,
             onclick: onclick,
diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index 81414e335..66674aab2 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -1,3 +1,5 @@
+use std::collections::HashMap;
+
 use crate::layout::{Layers, Viewports};
 use dioxus_native_core::prelude::NodeImmutableDioxusExt;
 use dioxus_native_core::real_dom::NodeImmutable;
@@ -167,7 +169,7 @@ fn measure_dom_events(
     for (event_name, event_nodes) in potential_events.iter_mut() {
         let derivated_events = get_derivated_events(event_name.as_str());
 
-        let mut found_node: Option<(&NodeId, FreyaEvent)> = None;
+        let mut found_events: FxHashMap<String, (&NodeId, FreyaEvent)> = HashMap::default();
         for derivated_event_name in derivated_events {
             let listeners = rdom.get_listening_sorted(derivated_event_name);
             for (node_id, request) in event_nodes.iter() {
@@ -176,13 +178,13 @@ fn measure_dom_events(
                         let mut request = request.clone();
                         request.set_name(derivated_event_name.to_string());
 
-                        found_node = Some((node_id, request));
+                        found_events.insert(derivated_event_name.to_string(), (node_id, request));
                     }
                 }
             }
         }
 
-        if let Some((node_id, request_event)) = found_node {
+        for (node_id, request_event) in found_events.into_values() {
             let areas = fdom.layout().get(*node_id).cloned();
             if let Some(areas) = areas {
                 let node_ref = fdom.rdom().get(*node_id).unwrap();

From 53bbe5eacd0d90678eb3c80fefd22dcc68318051 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sun, 12 Nov 2023 10:19:54 +0100
Subject: [PATCH 08/21] fixes and improvements

---
 crates/core/src/events/events_measurer.rs | 30 +++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index 66674aab2..bc23556bc 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -1,5 +1,3 @@
-use std::collections::HashMap;
-
 use crate::layout::{Layers, Viewports};
 use dioxus_native_core::prelude::NodeImmutableDioxusExt;
 use dioxus_native_core::real_dom::NodeImmutable;
@@ -26,18 +24,18 @@ pub fn process_events(
     let global_events = measure_global_events(events);
 
     // 2. Get potential events that could be emitted based on the elements layout and viewports
-    let mut potential_events = measure_potential_event_listeners(layers, events, viewports, dom);
+    let potential_events = measure_potential_event_listeners(layers, events, viewports, dom);
 
     // 3. Get what events can be actually emitted based on what elements are listening
-    let emitted_events = measure_dom_events(&mut potential_events, dom, scale_factor);
+    let emitted_events = measure_dom_events(potential_events, dom, scale_factor);
 
     // 4. Emit the events and get potential derived events caused by the emitted ones, e.g mouseover -> mouseenter
-    let mut potential_colateral_events =
+    let potential_colateral_events =
         elements_state.process_events(emitted_events, events, event_emitter);
 
     // 5. Get what derived events can actually be emitted
     let emitted_colateral_events =
-        measure_dom_events(&mut potential_colateral_events, dom, scale_factor);
+        measure_dom_events(potential_colateral_events, dom, scale_factor);
 
     // 6. Emit the colateral events
     for event in emitted_colateral_events {
@@ -159,38 +157,40 @@ fn get_derivated_events(event_name: &str) -> Vec<&str> {
 
 /// Measure what DOM events could be emited
 fn measure_dom_events(
-    potential_events: &mut NodesEvents,
+    potential_events: NodesEvents,
     fdom: &FreyaDOM,
     scale_factor: f64,
 ) -> Vec<DomEvent> {
     let mut new_events = Vec::new();
     let rdom = fdom.rdom();
 
-    for (event_name, event_nodes) in potential_events.iter_mut() {
+    for (event_name, event_nodes) in potential_events {
         let derivated_events = get_derivated_events(event_name.as_str());
 
-        let mut found_events: FxHashMap<String, (&NodeId, FreyaEvent)> = HashMap::default();
-        for derivated_event_name in derivated_events {
+        let mut found_events: Vec<(NodeId, FreyaEvent)> = Vec::new();
+
+        'events: for derivated_event_name in derivated_events {
             let listeners = rdom.get_listening_sorted(derivated_event_name);
             for (node_id, request) in event_nodes.iter() {
                 for listener in &listeners {
                     if listener.id() == *node_id {
                         let mut request = request.clone();
                         request.set_name(derivated_event_name.to_string());
+                        found_events.push((*node_id, request));
 
-                        found_events.insert(derivated_event_name.to_string(), (node_id, request));
+                        break 'events;
                     }
                 }
             }
         }
 
-        for (node_id, request_event) in found_events.into_values() {
-            let areas = fdom.layout().get(*node_id).cloned();
+        for (node_id, request_event) in found_events {
+            let areas = fdom.layout().get(node_id).cloned();
             if let Some(areas) = areas {
-                let node_ref = fdom.rdom().get(*node_id).unwrap();
+                let node_ref = fdom.rdom().get(node_id).unwrap();
                 let element_id = node_ref.mounted_id().unwrap();
                 let event = DomEvent::new(
-                    *node_id,
+                    node_id,
                     element_id,
                     &request_event,
                     Some(areas.visible_area()),

From e4cea320456d596352f82f722c0281c2d9f7cd1c Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sun, 12 Nov 2023 10:31:15 +0100
Subject: [PATCH 09/21] fix

---
 crates/core/src/events/events_measurer.rs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index bc23556bc..4e5644616 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -169,16 +169,16 @@ fn measure_dom_events(
 
         let mut found_events: Vec<(NodeId, FreyaEvent)> = Vec::new();
 
-        'events: for derivated_event_name in derivated_events {
+        for derivated_event_name in derivated_events {
             let listeners = rdom.get_listening_sorted(derivated_event_name);
-            for (node_id, request) in event_nodes.iter() {
+            'event_nodes: for (node_id, request) in event_nodes.iter() {
                 for listener in &listeners {
                     if listener.id() == *node_id {
                         let mut request = request.clone();
                         request.set_name(derivated_event_name.to_string());
                         found_events.push((*node_id, request));
 
-                        break 'events;
+                        break 'event_nodes;
                     }
                 }
             }

From 7f81afc798d3a72aee8987dd8f588bd506cfb9ef Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Wed, 24 Jan 2024 11:07:43 +0100
Subject: [PATCH 10/21] clean up

---
 examples/canvas.rs | 370 ---------------------------------------------
 1 file changed, 370 deletions(-)
 delete mode 100644 examples/canvas.rs

diff --git a/examples/canvas.rs b/examples/canvas.rs
deleted file mode 100644
index 34b5af72e..000000000
--- a/examples/canvas.rs
+++ /dev/null
@@ -1,370 +0,0 @@
-#![cfg_attr(
-    all(not(debug_assertions), target_os = "windows"),
-    windows_subsystem = "windows"
-)]
-
-use freya::events::MouseEvent;
-use freya::prelude::*;
-
-fn main() {
-    launch_with_props(app, "Freya canvas experiment", (700.0, 570.0));
-}
-
-fn app(cx: Scope) -> Element {
-    use_init_theme(cx, DARK_THEME);
-    let hovering = use_state(cx, || false);
-    let canvas_pos = use_state(cx, || (0.0f64, 0.0f64));
-    let nodes = use_state(cx, || vec![(0.0f64, 0.0f64)]);
-    let clicking = use_state::<Option<(f64, f64)>>(cx, || None);
-    let clicking_drag = use_state::<Option<(usize, (f64, f64))>>(cx, || None);
-
-    let onmouseleave = |_: MouseEvent| {
-        if clicking.is_none() {
-            hovering.set(false);
-        }
-    };
-
-    let onmouseover = |e: MouseEvent| {
-        hovering.set(true);
-        if let Some(clicking_cords) = clicking.get() {
-            let coordinates = e.get_screen_coordinates();
-            canvas_pos.set((
-                coordinates.x + clicking_cords.0,
-                coordinates.y + clicking_cords.1,
-            ));
-        }
-        if let Some((node_id, clicking_cords)) = clicking_drag.get() {
-            let coordinates = e.get_screen_coordinates();
-
-            nodes.with_mut(|nodes| {
-                let node = nodes.get_mut(*node_id).unwrap();
-                node.0 = coordinates.x - clicking_cords.0 - canvas_pos.0;
-                node.1 = coordinates.y - clicking_cords.1 - canvas_pos.1 - 25.0;
-                // The 25 is because of label from below.
-            });
-        }
-    };
-
-    let onmousedown = |e: MouseEvent| {
-        let coordinates = e.get_screen_coordinates();
-        clicking.set(Some((
-            canvas_pos.0 - coordinates.x,
-            canvas_pos.1 - coordinates.y,
-        )));
-    };
-
-    let onclick = |_: MouseEvent| {
-        clicking.set(None);
-        clicking_drag.set(None);
-    };
-
-    let create_node = |_: MouseEvent| {
-        nodes.with_mut(|nodes| {
-            nodes.push((0.0f64, 0.0f64));
-        });
-    };
-
-    render!(
-        rect {
-            width: "100%",
-            height: "100%",
-            color: "white",
-            rect {
-                background: "rgb(35, 35, 35)",
-                width: "100%",
-                height: "calc(100% - 100)",
-                offset_x: "{canvas_pos.0}",
-                offset_y: "{canvas_pos.1}",
-                onmousedown: onmousedown,
-                onclick: onclick,
-                onmouseover: onmouseover,
-                onmouseleave: onmouseleave,
-                label {
-                    font_size: "25",
-                    "What is this even about? I have no idea, but it's cool"
-                }
-                nodes.get().iter().enumerate().map(|(id, node)| {
-                    rsx! {
-                        rect {
-                            key: "{id}",
-                            direction: "horizontal",
-                            rect {
-                                offset_x: "{node.0}",
-                                offset_y: "{node.1}",
-                                width: "0",
-                                height: "0",
-                                rect {
-                                    overflow: "clip",
-                                    background: "rgb(20, 20, 20)",
-                                    width: "600",
-                                    height: "400",
-                                    corner_radius: "15",
-                                    padding: "10",
-                                    shadow: "0 0 30 0 rgb(0, 0, 0, 150)",
-                                    onmousedown:  move |e: MouseEvent| {
-                                        e.stop_propagation();
-                                        clicking_drag.set(Some((id, e.get_element_coordinates().to_tuple())));
-                                    },
-                                    onmouseleave: |_: MouseEvent| {
-                                        if clicking.is_none() {
-                                            hovering.set(false);
-                                        }
-                                    },
-                                    Editor {
-
-                                    }
-                                }
-                            }
-                        }
-                    }
-                })
-            }
-            rect {
-                background: "rgb(25, 25, 25)",
-                height: "100",
-                width: "100%",
-                main_align: "center",
-                cross_align: "center",
-                padding: "15",
-                layer: "-100",
-                shadow: "0 -2 5 0 rgb(0, 0, 0, 0.1)",
-                direction: "horizontal",
-                label {
-                    "Create as many editors you want!"
-                }
-                Button {
-                    theme: theme_with!(ButtonTheme {
-                        margin: "0 20".into(),
-                    }),
-                    onclick: create_node,
-                    label {
-                        "New Editor"
-                    }
-                }
-            }
-        }
-    )
-}
-
-#[allow(non_snake_case)]
-fn Editor(cx: Scope) -> Element {
-    let focus_manager = use_focus(cx);
-    let editable = use_editable(
-        cx,
-        || {
-            EditableConfig::new("Lorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet\nLorem ipsum dolor sit amet".to_string())
-        },
-        EditableMode::SingleLineMultipleEditors,
-    );
-    let cursor_attr = editable.cursor_attr(cx);
-    let editor = editable.editor().clone();
-    let cursor = editor.cursor().clone();
-
-    let font_size_percentage = use_state(cx, || 15.0);
-    let line_height_percentage = use_state(cx, || 0.0);
-    let is_bold = use_state(cx, || false);
-    let is_italic = use_state(cx, || false);
-
-    // minimum font size is 5
-    let font_size = font_size_percentage + 5.0;
-    let line_height = (line_height_percentage / 25.0) + 1.2;
-    let mut line_index = 0;
-    let font_style = if *is_italic.get() { "italic" } else { "normal" };
-    let font_weight = if *is_bold.get() { "bold" } else { "normal" };
-
-    use_on_create(cx, move || {
-        focus_manager.focus();
-        async move {}
-    });
-
-    let onclick = {
-        to_owned![focus_manager];
-        move |_: MouseEvent| {
-            if !focus_manager.is_focused() {
-                focus_manager.focus();
-            }
-        }
-    };
-
-    let onkeydown = {
-        to_owned![editable];
-        move |e: KeyboardEvent| {
-            if focus_manager.is_focused() {
-                editable.process_event(&EditableEvent::KeyDown(e.data));
-            }
-        }
-    };
-
-    render!(
-        rect {
-            onclick: onclick,
-            width: "100%",
-            height: "100%",
-            rect {
-                width: "100%",
-                height: "70",
-                padding: "5",
-                direction: "horizontal",
-                cross_align: "center",
-                rect {
-                    width: "130",
-                    cross_align: "center",
-                    Slider {
-                        width: 100.0,
-                        value: *font_size_percentage.get(),
-                        onmoved: |p| {
-                            font_size_percentage.set(p);
-                        }
-                    }
-                    label {
-                        "Font size"
-                    }
-                }
-                rect {
-                    width: "130",
-                    cross_align: "center",
-                    Slider {
-                        width: 100.0,
-                        value: *line_height_percentage.get(),
-                        onmoved: |p| {
-                            line_height_percentage.set(p);
-                        }
-                    }
-                    label {
-                        "Line height"
-                    }
-                }
-                rect {
-                    width: "80",
-                    cross_align: "center",
-                    Switch {
-                        enabled: *is_bold.get(),
-                        ontoggled: |_| {
-                            is_bold.set(!is_bold.get());
-                        }
-                    }
-                    label {
-                        "Bold"
-                    }
-                }
-                rect {
-                    width: "80",
-                    cross_align: "center",
-                    Switch {
-                        enabled: *is_italic.get(),
-                        ontoggled: |_| {
-                            is_italic.set(!is_italic.get());
-                        }
-                    }
-                    label {
-                        "Italic"
-                    }
-                }
-            }
-            rect {
-                width: "100%",
-                height: "calc(100% - 80)",
-                padding: "5",
-                onkeydown: onkeydown,
-                cursor_reference: cursor_attr,
-                direction: "horizontal",
-                rect {
-                    width: "100%",
-                    height: "100%",
-                    padding: "5",
-                    ScrollView {
-                        scroll_with_arrows: false,
-                        editor.lines().map(move |l| {
-                            let editable = editable.clone();
-
-                            let is_line_selected = cursor.row() == line_index;
-
-                            // Only show the cursor in the active line
-                            let character_index = if is_line_selected {
-                                cursor.col().to_string()
-                            } else {
-                                "none".to_string()
-                            };
-
-                            // Only highlight the active line
-                            let line_background = if is_line_selected {
-                                "rgb(37, 37, 37)"
-                            } else {
-                                ""
-                            };
-
-                            let onmousedown = {
-                                to_owned![editable];
-                                move |e: MouseEvent| {
-                                    e.stop_propagation();
-                                    editable.process_event(&EditableEvent::MouseDown(e.data, line_index));
-                                }
-                            };
-
-                            let onmouseover = {
-                                to_owned![editable];
-                                move |e: MouseEvent| {
-                                    editable.process_event(&EditableEvent::MouseOver(e.data, line_index));
-                                }
-                            };
-
-                            let onclick = {
-                                to_owned![editable];
-                                move |_: MouseEvent| {
-                                    editable.process_event(&EditableEvent::Click);
-                                }
-                            };
-
-                            let manual_line_height = font_size * line_height;
-
-                            let cursor_id = line_index;
-                            let highlights = editable.highlights_attr(cx, cursor_id);
-
-                            line_index += 1;
-                            rsx! {
-                                rect {
-                                    key: "{line_index}",
-                                    width: "100%",
-                                    height: "{manual_line_height}",
-                                    direction: "horizontal",
-                                    background: "{line_background}",
-                                    corner_radius: "7",
-                                    rect {
-                                        width: "{font_size * 2.0}",
-                                        height: "100%",
-                                        main_align: "center",
-                                        direction: "horizontal",
-                                        label {
-                                            font_size: "{font_size}",
-                                            color: "rgb(200, 200, 200)",
-                                            "{line_index} "
-                                        }
-                                    }
-                                    paragraph {
-                                        width: "100%",
-                                        cursor_index: "{character_index}",
-                                        cursor_color: "white",
-                                        max_lines: "1",
-                                        cursor_mode: "editable",
-                                        cursor_id: "{cursor_id}",
-                                        onmousedown: onmousedown,
-                                        onmouseover: onmouseover,
-                                        onclick: onclick,
-                                        highlights: highlights,
-                                        text {
-                                            color: "rgb(240, 240, 240)",
-                                            font_size: "{font_size}",
-                                            font_style: "{font_style}",
-                                            font_weight: "{font_weight}",
-                                            "{l}"
-                                        }
-                                    }
-                                }
-                            }
-                        })
-                    }
-                }
-            }
-        }
-    )
-}

From 4a1b0244da0292e0c964b5c21a81ba0e3c61dd46 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Wed, 24 Jan 2024 11:26:43 +0100
Subject: [PATCH 11/21] fixes

---
 crates/core/src/events/events_measurer.rs | 76 ++++++++++++++++++-----
 1 file changed, 62 insertions(+), 14 deletions(-)

diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index 35fe72787..cc45b6f86 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -1,9 +1,11 @@
 use crate::layout::{Layers, Viewports};
-use dioxus_native_core::prelude::NodeImmutableDioxusExt;
 use dioxus_native_core::real_dom::NodeImmutable;
 use dioxus_native_core::NodeId;
-use freya_dom::prelude::FreyaDOM;
+use dioxus_native_core::{prelude::NodeImmutableDioxusExt, tree::TreeRef};
+use freya_dom::{dom::DioxusDOM, prelude::FreyaDOM};
 
+use freya_engine::prelude::*;
+use freya_node_state::{Fill, Style};
 use rustc_hash::FxHashMap;
 
 pub use crate::events::{DomEvent, ElementsState, FreyaEvent};
@@ -29,7 +31,7 @@ pub fn process_events(
     // 3. Get what events can be actually emitted based on what elements are listening
     let dom_events = measure_dom_events(potential_events, dom, scale_factor);
 
-    // 4. Emit the events and get potential derived events caused by the emitted ones, e.g mouseover -> mouseenter
+    // 4. Filter the dom events and get potential derived events, e.g mouseover -> mouseenter
     let (potential_colateral_events, mut to_emit_dom_events) =
         elements_state.process_events(&dom_events, events);
 
@@ -159,6 +161,25 @@ fn get_derivated_events(event_name: &str) -> Vec<&str> {
     }
 }
 
+fn is_node_parent_of(rdom: &DioxusDOM, node: NodeId, parent_node: NodeId) -> bool {
+    let mut stack = vec![parent_node];
+    while let Some(id) = stack.pop() {
+        let tree = rdom.tree_ref();
+        let mut children = tree.children_ids(id);
+        drop(tree);
+        if children.contains(&node) {
+            return true;
+        }
+
+        if rdom.contains(id) {
+            children.reverse();
+            stack.extend(children.iter());
+        }
+    }
+
+    false
+}
+
 /// Measure what DOM events could be emited
 fn measure_dom_events(
     potential_events: NodesEvents,
@@ -168,33 +189,60 @@ fn measure_dom_events(
     let mut new_events = Vec::new();
     let rdom = fdom.rdom();
 
+    // Iterate over all the events
     for (event_name, event_nodes) in potential_events {
         let derivated_events = get_derivated_events(event_name.as_str());
 
-        let mut found_events: Vec<(NodeId, FreyaEvent)> = Vec::new();
+        let mut found_nodes: Vec<(&NodeId, FreyaEvent)> = Vec::new();
+
+        // Iterate over the derivated event (including the source)
+        'event: for derivated_event_name in derivated_events.iter() {
+            let mut child_node: Option<NodeId> = None;
 
-        for derivated_event_name in derivated_events {
             let listeners = rdom.get_listening_sorted(derivated_event_name);
-            'event_nodes: for (node_id, request) in event_nodes.iter().rev() {
+
+            // Iterate over the event nodes
+            for (node_id, request) in event_nodes.iter().rev() {
+                let Some(node) = rdom.get(*node_id) else {
+                    continue;
+                };
+
+                // Iterate over the event listeners
                 for listener in &listeners {
                     if listener.id() == *node_id {
-                        let mut request = request.clone();
-                        request.set_name(derivated_event_name.to_string());
-                        found_events.push((*node_id, request));
+                        let valid_node = if let Some(child_node) = child_node {
+                            is_node_parent_of(&rdom, child_node, *node_id)
+                        } else {
+                            true
+                        };
 
-                        break 'event_nodes;
+                        if valid_node {
+                            let mut request = request.clone();
+                            request.set_name(derivated_event_name.to_string());
+                            found_nodes.push((node_id, request));
+                            continue 'event;
+                        }
                     }
                 }
+
+                let Style { background, .. } = &*node.get::<Style>().unwrap();
+
+                if background != &Fill::Color(Color::TRANSPARENT) {
+                    // If the background isn't transparent,
+                    // we must make sure that next nodes are parent of it
+                    child_node = Some(*node_id);
+                }
             }
         }
 
-        for (node_id, request_event) in found_events {
-            let areas = fdom.layout().get(node_id).cloned();
+        for (node_id, request_event) in found_nodes {
+            let layout = fdom.layout();
+            let areas = layout.get(*node_id);
             if let Some(areas) = areas {
-                let node_ref = fdom.rdom().get(node_id).unwrap();
+                let node_ref = fdom.rdom().get(*node_id).unwrap();
                 let element_id = node_ref.mounted_id().unwrap();
                 let event = DomEvent::new(
-                    node_id,
+                    *node_id,
                     element_id,
                     &request_event,
                     Some(areas.visible_area()),

From 28b927eaa6936cc9f756a0140b1815d3c8f070a7 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Wed, 24 Jan 2024 17:03:31 +0100
Subject: [PATCH 12/21] improvements

---
 crates/components/src/lib.rs   |  2 +
 crates/components/src/popup.rs | 92 ++++++++++++++++++++++++++++++++++
 examples/popup.rs              | 42 ++++++++++++++++
 examples/position.rs           | 84 ++++++++++++-------------------
 4 files changed, 168 insertions(+), 52 deletions(-)
 create mode 100644 crates/components/src/popup.rs
 create mode 100644 examples/popup.rs

diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs
index 075aa4b7e..17df076af 100644
--- a/crates/components/src/lib.rs
+++ b/crates/components/src/lib.rs
@@ -22,6 +22,7 @@ mod switch;
 mod table;
 mod theme;
 // mod tooltip;
+mod popup;
 
 pub use accordion::*;
 pub use body::*;
@@ -44,3 +45,4 @@ pub use switch::*;
 pub use table::*;
 pub use theme::*;
 // pub use tooltip::*;
+pub use popup::*;
diff --git a/crates/components/src/popup.rs b/crates/components/src/popup.rs
new file mode 100644
index 000000000..71030d47b
--- /dev/null
+++ b/crates/components/src/popup.rs
@@ -0,0 +1,92 @@
+use crate::Button;
+use dioxus::prelude::*;
+use freya_elements::elements as dioxus_elements;
+use freya_hooks::{theme_with, ButtonThemeWith};
+
+#[allow(non_snake_case)]
+#[component]
+pub fn PopupBackground(children: Element) -> Element {
+    rsx!(rect {
+        height: "100v",
+        width: "100v",
+        background: "rgb(0, 0, 0, 150)",
+        position: "absolute",
+        position_top: "0",
+        position_left: "0",
+        layer: "-1",
+        main_align: "center",
+        cross_align: "center",
+        {children}
+    })
+}
+
+#[allow(non_snake_case)]
+#[component]
+pub fn Popup(
+    children: Element,
+    #[props(default = "325".into(), into)] width: String,
+    #[props(default = "225".into(), into)] height: String,
+
+    on_close_request: Option<EventHandler>,
+) -> Element {
+    rsx!(
+        PopupBackground {
+            rect {
+                padding: "14",
+                corner_radius: "8",
+                background: "white",
+                shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+                width: "{width}",
+                height: "{height}",
+                rect {
+                    position: "absolute",
+                    position_right: "0",
+                    width: "30",
+                    Button {
+                        theme: theme_with!(ButtonTheme {
+                            padding: "6".into(),
+                            margin: "0".into(),
+                            width: "30".into(),
+                            height: "30".into(),
+                            corner_radius: "999".into(),
+                        }),
+                        onclick: move |_| if let Some(on_close_request) = &on_close_request {
+                            on_close_request.call(());
+                        },
+                        label {
+                            font_size: "14",
+                            "X"
+                        }
+                    }
+                }
+                {children}
+            }
+        }
+    )
+}
+
+#[allow(non_snake_case)]
+#[component]
+pub fn PopupTitle(children: Element) -> Element {
+    rsx!(
+        rect {
+            font_size: "18",
+            margin: "4 2 8 2",
+            font_weight: "bold",
+            {children}
+        }
+    )
+}
+
+#[allow(non_snake_case)]
+#[component]
+pub fn PopupContent(children: Element) -> Element {
+    rsx!(
+        rect {
+            font_size: "15",
+            margin: "6 2",
+            color: "rgb(20, 20, 20)",
+            {children}
+        }
+    )
+}
diff --git a/examples/popup.rs b/examples/popup.rs
new file mode 100644
index 000000000..b177d4d74
--- /dev/null
+++ b/examples/popup.rs
@@ -0,0 +1,42 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use freya::prelude::*;
+
+fn main() {
+    launch_with_props(app, "Position", (500.0, 450.0));
+}
+
+fn app() -> Element {
+    let mut show_popup = use_signal(|| false);
+
+    rsx!(
+        rect {
+            if *show_popup.read() {
+                Popup {
+                    on_close_request: move |_| {
+                        show_popup.set(false)
+                    },
+                    PopupTitle {
+                        label {
+                            "Awesome Popup"
+                        }
+                    }
+                    PopupContent {
+                        label {
+                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                        }
+                    }
+                }
+            }
+            Button {
+                onclick: move |_| show_popup.set(true),
+                label {
+                    "Open"
+                }
+            }
+        }
+    )
+}
diff --git a/examples/position.rs b/examples/position.rs
index 8c3c934ba..ebba69810 100644
--- a/examples/position.rs
+++ b/examples/position.rs
@@ -9,62 +9,42 @@ fn main() {
     launch_with_props(app, "Position", (400.0, 350.0));
 }
 
-#[allow(non_snake_case)]
-#[inline_props]
-fn PopupBackground(children: Element) -> Element {
-    rsx!(rect {
-        height: "100%",
-        width: "100%",
-        background: "rgb(0, 0, 0, 150)",
-        position: "absolute",
-        layer: "-1",
-        main_align: "center",
-        cross_align: "center",
-        {children}
-    })
-}
-
-#[allow(non_snake_case)]
-#[component]
-fn Popup(children: Element) -> Element {
-    rsx!(
-        PopupBackground {
-            rect {
-                padding: "10",
-                corner_radius: "8",
-                background: "white",
-                shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
-                width: "300",
-                height: "200",
-                {children}
-            }
-        }
-    )
-}
-
 fn app() -> Element {
-    let mut show_popup = use_signal(|| false);
-
     rsx!(
         rect {
-            if *show_popup.read() {
-                Popup {
-                    label {
-                        "whatever"
-                    }
-                    Button {
-                        onclick: move |_| show_popup.set(false),
-                        label {
-                            "Close"
-                        }
-                    }
-                }
+            height: "100%",
+            width: "100%",
+            rect {
+                height: "20%",
+                width: "20%",
+                background: "black",
+                position: "absolute",
+                position_top: "10",
+                position_left: "10",
+            }
+            rect {
+                height: "20%",
+                width: "20%",
+                background: "black",
+                position: "absolute",
+                position_top: "10",
+                position_right: "10",
+            }
+            rect {
+                height: "20%",
+                width: "20%",
+                background: "black",
+                position: "absolute",
+                position_bottom: "10",
+                position_right: "10",
             }
-            Button {
-                onclick: move |_| show_popup.set(true),
-                label {
-                    "Open"
-                }
+            rect {
+                height: "20%",
+                width: "20%",
+                background: "black",
+                position: "absolute",
+                position_bottom: "10",
+                position_left: "10",
             }
         }
     )

From f14e9c0a722989d49a75b28cdf1838e63424e076 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Thu, 25 Jan 2024 22:08:12 +0100
Subject: [PATCH 13/21] cleanup

---
 examples/aaa.rs | 42 ------------------------------------------
 1 file changed, 42 deletions(-)
 delete mode 100644 examples/aaa.rs

diff --git a/examples/aaa.rs b/examples/aaa.rs
deleted file mode 100644
index 69569082e..000000000
--- a/examples/aaa.rs
+++ /dev/null
@@ -1,42 +0,0 @@
-#![cfg_attr(
-    all(not(debug_assertions), target_os = "windows"),
-    windows_subsystem = "windows"
-)]
-
-use freya::prelude::*;
-
-fn main() {
-    launch(app);
-}
-
-fn app(cx: Scope) -> Element {
-    render!(
-        rect {
-            height: "50%",
-            width: "100%",
-            onclick: |_| println!("clicked 1"),
-            rect {
-                height: "100%",
-                width: "100%",
-                background: "blue",
-                onclick: |_| println!("clicked 2"),
-            }
-        }
-        rect {
-            height: "50%",
-            width: "100%",
-            onclick: |_| println!("clicked 3"),
-            Test { }
-        }
-    )
-}
-
-#[allow(non_snake_case)]
-fn Test(cx: Scope) -> Element {
-    render!(rect {
-        height: "100%",
-        width: "100%",
-        background: "red",
-        onclick: |_| println!("clicked 4"),
-    })
-}

From b248414dc35cebbed87ae5c0670e67cacd3f57e7 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Fri, 26 Jan 2024 21:36:56 +0100
Subject: [PATCH 14/21] fixes and improvements

---
 crates/core/src/events/events_measurer.rs |   2 +-
 crates/core/tests/event_bubbling.rs       | 189 ++++++++++++++++++++++
 crates/testing/src/test_handler.rs        |   2 +-
 3 files changed, 191 insertions(+), 2 deletions(-)
 create mode 100644 crates/core/tests/event_bubbling.rs

diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index cc45b6f86..37d64fab0 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -211,7 +211,7 @@ fn measure_dom_events(
                 for listener in &listeners {
                     if listener.id() == *node_id {
                         let valid_node = if let Some(child_node) = child_node {
-                            is_node_parent_of(&rdom, child_node, *node_id)
+                            is_node_parent_of(rdom, child_node, *node_id)
                         } else {
                             true
                         };
diff --git a/crates/core/tests/event_bubbling.rs b/crates/core/tests/event_bubbling.rs
new file mode 100644
index 000000000..274435636
--- /dev/null
+++ b/crates/core/tests/event_bubbling.rs
@@ -0,0 +1,189 @@
+use dioxus::prelude::*;
+use freya_core::prelude::*;
+use freya_elements::elements as dioxus_elements;
+use freya_testing::{events::pointer::MouseButton, events::MouseEvent, launch_test};
+use torin::prelude::CursorPoint;
+
+#[tokio::test]
+pub async fn captured_event() {
+    fn app() -> Element {
+        let mut state = use_signal(String::new);
+
+        rsx!(
+            rect {
+                height: "100%",
+                width: "100%",
+                onclick: move |_: MouseEvent| {
+                    state.set("1".to_string());
+                },
+                rect {
+                    height: "100",
+                    width: "100",
+                    background: "red",
+                    onclick: move |e: MouseEvent| {
+                        state.set("2".to_string());
+                        e.stop_propagation();
+                    }
+                }
+                label {
+                    "{state}"
+                }
+            }
+        )
+    }
+
+    let mut utils = launch_test(app);
+
+    let root = utils.root().get(0);
+    let label = root.get(1);
+
+    assert_eq!(label.get(0).text(), Some(""));
+
+    utils.push_event(FreyaEvent::Mouse {
+        name: "click".to_string(),
+        cursor: CursorPoint::new(50.0, 50.0),
+        button: Some(MouseButton::Left),
+    });
+
+    utils.wait_for_update().await;
+
+    assert_eq!(label.get(0).text(), Some("2"));
+}
+
+#[tokio::test]
+pub async fn not_captured_event() {
+    fn app() -> Element {
+        let mut state = use_signal(String::new);
+
+        rsx!(
+            rect {
+                height: "100%",
+                width: "100%",
+                onclick: move |_: MouseEvent| {
+                    state.set("1".to_string());
+                },
+                rect {
+                    height: "100",
+                    width: "100",
+                    background: "red",
+                    onclick: move |_: MouseEvent| {
+                        state.set("2".to_string());
+                    }
+                }
+                label {
+                    "{state}"
+                }
+            }
+        )
+    }
+
+    let mut utils = launch_test(app);
+
+    let root = utils.root().get(0);
+    let label = root.get(1);
+
+    assert_eq!(label.get(0).text(), Some(""));
+
+    utils.push_event(FreyaEvent::Mouse {
+        name: "click".to_string(),
+        cursor: CursorPoint::new(50.0, 50.0),
+        button: Some(MouseButton::Left),
+    });
+
+    utils.wait_for_update().await;
+
+    assert_eq!(label.get(0).text(), Some("1"));
+}
+
+#[tokio::test]
+pub async fn event_gets_captured_at_wall() {
+    fn app() -> Element {
+        let mut state = use_signal(String::new);
+
+        rsx!(
+            rect {
+                height: "200",
+                width: "200",
+                background: "blue",
+                onclick: move |_: MouseEvent| {
+                    state.set("1".to_string());
+                },
+                label {
+                    "{state}"
+                }
+            }
+            rect {
+                position: "absolute",
+                height: "100",
+                width: "100",
+                background: "red",
+                layer: "-99",
+                onclick: move |_: MouseEvent| {
+                    state.set("2".to_string());
+                }
+            }
+        )
+    }
+
+    let mut utils = launch_test(app);
+
+    let root = utils.root().get(0);
+    let label = root.get(0);
+
+    assert_eq!(label.get(0).text(), Some(""));
+
+    utils.push_event(FreyaEvent::Mouse {
+        name: "click".to_string(),
+        cursor: CursorPoint::new(50.0, 50.0),
+        button: Some(MouseButton::Left),
+    });
+
+    utils.wait_for_update().await;
+
+    assert_eq!(label.get(0).text(), Some("2"));
+}
+
+#[tokio::test]
+pub async fn event_cant_pass_through_wall() {
+    fn app() -> Element {
+        let mut state = use_signal(String::new);
+
+        rsx!(
+            rect {
+                height: "200",
+                width: "200",
+                background: "blue",
+                onclick: move |_: MouseEvent| {
+                    state.set("1".to_string());
+                },
+                label {
+                    "{state}"
+                }
+            }
+            rect {
+                position: "absolute",
+                height: "100",
+                width: "100",
+                background: "red",
+                layer: "-99",
+            }
+        )
+    }
+
+    let mut utils = launch_test(app);
+
+    let root = utils.root().get(0);
+    let label = root.get(0);
+
+    assert_eq!(label.get(0).text(), Some(""));
+
+    utils.push_event(FreyaEvent::Mouse {
+        name: "click".to_string(),
+        cursor: CursorPoint::new(50.0, 50.0),
+        button: Some(MouseButton::Left),
+    });
+
+    utils.wait_for_update().await;
+
+    assert_eq!(label.get(0).text(), Some(""));
+}
diff --git a/crates/testing/src/test_handler.rs b/crates/testing/src/test_handler.rs
index f6d661097..9e8a539b9 100644
--- a/crates/testing/src/test_handler.rs
+++ b/crates/testing/src/test_handler.rs
@@ -107,7 +107,7 @@ impl TestingHandler {
 
             if let Ok(ev) = vdom_ev {
                 self.vdom
-                    .handle_event(&ev.name, ev.data.any(), ev.element_id, false);
+                    .handle_event(&ev.name, ev.data.any(), ev.element_id, true);
                 self.vdom.process_events();
             }
         }

From dd1161e63fa92b82a78bdab5c560ccecfcbb88d0 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sat, 27 Jan 2024 10:55:23 +0100
Subject: [PATCH 15/21] fixes

---
 crates/core/src/events/events_measurer.rs | 14 +++++++++-----
 crates/core/src/events/freya_events.rs    |  4 ++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index 37d64fab0..7fd6f2437 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -202,7 +202,7 @@ fn measure_dom_events(
             let listeners = rdom.get_listening_sorted(derivated_event_name);
 
             // Iterate over the event nodes
-            for (node_id, request) in event_nodes.iter().rev() {
+            for (node_id, event) in event_nodes.iter().rev() {
                 let Some(node) = rdom.get(*node_id) else {
                     continue;
                 };
@@ -217,10 +217,14 @@ fn measure_dom_events(
                         };
 
                         if valid_node {
-                            let mut request = request.clone();
-                            request.set_name(derivated_event_name.to_string());
-                            found_nodes.push((node_id, request));
-                            continue 'event;
+                            let mut valid_event = event.clone();
+                            valid_event.set_name(derivated_event_name.to_string());
+                            found_nodes.push((node_id, valid_event));
+
+                            // Only stop looking for valid nodes when the event isn't of type keyboard
+                            if !event.is_keyboard_event() {
+                                continue 'event;
+                            }
                         }
                     }
                 }
diff --git a/crates/core/src/events/freya_events.rs b/crates/core/src/events/freya_events.rs
index b99863ad6..e1c1fdd2e 100644
--- a/crates/core/src/events/freya_events.rs
+++ b/crates/core/src/events/freya_events.rs
@@ -56,4 +56,8 @@ impl FreyaEvent {
     pub fn is_pointer_event(&self) -> bool {
         self.get_name().starts_with("point")
     }
+
+    pub fn is_keyboard_event(&self) -> bool {
+        matches!(self, Self::Keyboard { .. })
+    }
 }

From fd9c7438a1672f0b24f3bb39b2826aa2d1c009cf Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Mon, 29 Jan 2024 19:26:03 +0100
Subject: [PATCH 16/21] typo

---
 examples/popup.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/popup.rs b/examples/popup.rs
index b177d4d74..ab1a66b8c 100644
--- a/examples/popup.rs
+++ b/examples/popup.rs
@@ -6,7 +6,7 @@
 use freya::prelude::*;
 
 fn main() {
-    launch_with_props(app, "Position", (500.0, 450.0));
+    launch_with_props(app, "Popup", (500.0, 450.0));
 }
 
 fn app() -> Element {

From d8a954acef20bae4fca94d344a3d3d7fc9fe95dc Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sat, 24 Feb 2024 15:58:27 +0100
Subject: [PATCH 17/21] fmt

---
 crates/components/src/lib.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs
index 7121cb937..3f0ac4026 100644
--- a/crates/components/src/lib.rs
+++ b/crates/components/src/lib.rs
@@ -15,6 +15,7 @@ mod input;
 mod link;
 mod loader;
 mod network_image;
+mod popup;
 mod progress_bar;
 mod scroll_views;
 mod sidebar;
@@ -23,7 +24,6 @@ mod switch;
 mod table;
 mod theme;
 mod tooltip;
-mod popup;
 
 pub use accordion::*;
 pub use body::*;
@@ -39,6 +39,7 @@ pub use input::*;
 pub use link::*;
 pub use loader::*;
 pub use network_image::*;
+pub use popup::*;
 pub use progress_bar::*;
 pub use scroll_views::*;
 pub use sidebar::*;
@@ -47,4 +48,3 @@ pub use switch::*;
 pub use table::*;
 pub use theme::*;
 pub use tooltip::*;
-pub use popup::*;

From 9fe112d667bae30604937872253c3dde5d1fd2d4 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sat, 24 Feb 2024 17:25:37 +0100
Subject: [PATCH 18/21] improvements and fixes

---
 crates/components/src/button.rs           |  3 +-
 crates/components/src/dropdown.rs         |  6 +-
 crates/components/src/icons/arrow.rs      |  8 +--
 crates/components/src/icons/cross.rs      | 33 +++++++++++
 crates/components/src/icons/mod.rs        |  2 +
 crates/components/src/popup.rs            | 67 ++++++++++++++---------
 crates/core/src/events/event_name.rs      |  5 ++
 crates/core/src/events/events_measurer.rs |  3 +-
 crates/hooks/src/theming/dark.rs          | 18 ++++--
 crates/hooks/src/theming/light.rs         | 10 +++-
 crates/hooks/src/theming/mod.rs           | 18 +++++-
 examples/popup.rs                         |  5 +-
 12 files changed, 132 insertions(+), 46 deletions(-)
 create mode 100644 crates/components/src/icons/cross.rs

diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs
index 2fea81fe2..e55712786 100644
--- a/crates/components/src/button.rs
+++ b/crates/components/src/button.rs
@@ -70,6 +70,7 @@ pub fn Button(props: ButtonProps) -> Element {
         width,
         height,
         font_theme,
+        shadow,
     } = use_applied_theme!(&props.theme, button);
 
     let onclick = {
@@ -131,7 +132,7 @@ pub fn Button(props: ButtonProps) -> Element {
             overflow: "clip",
             role: "button",
             color: "{font_theme.color}",
-            shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
+            shadow: "{shadow}",
             border: "{border}",
             corner_radius: "{corner_radius}",
             background: "{background}",
diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs
index ac823cd2d..d727d1ef0 100644
--- a/crates/components/src/dropdown.rs
+++ b/crates/components/src/dropdown.rs
@@ -7,8 +7,8 @@ use freya_elements::events::keyboard::Key;
 use freya_elements::events::{KeyboardEvent, MouseEvent};
 
 use freya_hooks::{
-    theme_with, use_applied_theme, use_focus, use_platform, ArrowIconThemeWith,
-    DropdownItemThemeWith, DropdownTheme, DropdownThemeWith,
+    theme_with, use_applied_theme, use_focus, use_platform, DropdownItemThemeWith, DropdownTheme,
+    DropdownThemeWith, IconThemeWith,
 };
 use winit::window::CursorIcon;
 
@@ -278,7 +278,7 @@ where
             ArrowIcon {
                 rotate: "0",
                 fill: "{arrow_fill}",
-                theme: theme_with!(ArrowIconTheme {
+                theme: theme_with!(IconTheme {
                     margin : "0 0 0 8".into(),
                 })
             }
diff --git a/crates/components/src/icons/arrow.rs b/crates/components/src/icons/arrow.rs
index 11c586263..06b3f3dcf 100644
--- a/crates/components/src/icons/arrow.rs
+++ b/crates/components/src/icons/arrow.rs
@@ -1,12 +1,12 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 
-use freya_hooks::{use_applied_theme, ArrowIconTheme, ArrowIconThemeWith};
+use freya_hooks::{use_applied_theme, IconTheme, IconThemeWith};
 
 #[derive(Props, Clone, PartialEq)]
 pub struct ArrowIconProps {
     /// Theme override.
-    pub theme: Option<ArrowIconThemeWith>,
+    pub theme: Option<IconThemeWith>,
     #[props(into)]
     pub rotate: String,
     #[props(into)]
@@ -21,11 +21,11 @@ pub fn ArrowIcon(
         fill,
     }: ArrowIconProps,
 ) -> Element {
-    let ArrowIconTheme {
+    let IconTheme {
         height,
         width,
         margin,
-    } = use_applied_theme!(&theme, arrow_icon);
+    } = use_applied_theme!(&theme, icon);
 
     rsx!(svg {
         height: "{height}",
diff --git a/crates/components/src/icons/cross.rs b/crates/components/src/icons/cross.rs
new file mode 100644
index 000000000..fad70422e
--- /dev/null
+++ b/crates/components/src/icons/cross.rs
@@ -0,0 +1,33 @@
+use dioxus::prelude::*;
+use freya_elements::elements as dioxus_elements;
+
+use freya_hooks::{use_applied_theme, IconTheme, IconThemeWith};
+
+#[derive(Props, Clone, PartialEq)]
+pub struct CrossIconProps {
+    /// Theme override.
+    pub theme: Option<IconThemeWith>,
+    #[props(into)]
+    pub fill: String,
+}
+
+#[allow(non_snake_case)]
+pub fn CrossIcon(CrossIconProps { theme, fill }: CrossIconProps) -> Element {
+    let IconTheme {
+        height,
+        width,
+        margin,
+    } = use_applied_theme!(&theme, icon);
+
+    rsx!(svg {
+        height: "{height}",
+        width: "{width}",
+        margin: "{margin}",
+        svg_content: r#"
+            <svg viewBox="0 0 292 292" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0.0366211 268.737L268.737 0.0366211L291.365 22.664L22.664 291.365L0.0366211 268.737Z" fill="{fill}"/>
+                <path d="M268.737 291.365L0.0366211 22.664L22.664 0.0366211L291.365 268.737L268.737 291.365Z" fill="{fill}"/>
+            </svg>
+        "#
+    })
+}
diff --git a/crates/components/src/icons/mod.rs b/crates/components/src/icons/mod.rs
index 7666bc5ec..3aa2cf14d 100644
--- a/crates/components/src/icons/mod.rs
+++ b/crates/components/src/icons/mod.rs
@@ -1,3 +1,5 @@
 mod arrow;
+mod cross;
 
 pub use arrow::*;
+pub use cross::*;
diff --git a/crates/components/src/popup.rs b/crates/components/src/popup.rs
index 71030d47b..e268869cc 100644
--- a/crates/components/src/popup.rs
+++ b/crates/components/src/popup.rs
@@ -1,7 +1,7 @@
-use crate::Button;
+use crate::{Button, CrossIcon};
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::{theme_with, ButtonThemeWith};
+use freya_hooks::{theme_with, use_applied_theme, ButtonThemeWith, PopupTheme, PopupThemeWith};
 
 #[allow(non_snake_case)]
 #[component]
@@ -13,7 +13,7 @@ pub fn PopupBackground(children: Element) -> Element {
         position: "absolute",
         position_top: "0",
         position_left: "0",
-        layer: "-1",
+        layer: "-99",
         main_align: "center",
         cross_align: "center",
         {children}
@@ -23,39 +23,53 @@ pub fn PopupBackground(children: Element) -> Element {
 #[allow(non_snake_case)]
 #[component]
 pub fn Popup(
+    /// Theme override.
+    theme: Option<PopupThemeWith>,
+    /// Popup inner content.
     children: Element,
-    #[props(default = "325".into(), into)] width: String,
-    #[props(default = "225".into(), into)] height: String,
-
-    on_close_request: Option<EventHandler>,
+    /// Optional close request handler.
+    oncloserequest: Option<EventHandler>,
+    /// Whether to show or no the cross button in the top right corner.
+    #[props(default = true)]
+    show_close_button: bool,
 ) -> Element {
+    let PopupTheme {
+        background,
+        color,
+        cross_fill,
+        width,
+        height,
+    } = use_applied_theme!(&theme, popup);
     rsx!(
         PopupBackground {
             rect {
                 padding: "14",
                 corner_radius: "8",
-                background: "white",
+                background: "{background}",
+                color: "{color}",
                 shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
                 width: "{width}",
                 height: "{height}",
-                rect {
-                    position: "absolute",
-                    position_right: "0",
-                    width: "30",
-                    Button {
-                        theme: theme_with!(ButtonTheme {
-                            padding: "6".into(),
-                            margin: "0".into(),
-                            width: "30".into(),
-                            height: "30".into(),
-                            corner_radius: "999".into(),
-                        }),
-                        onclick: move |_| if let Some(on_close_request) = &on_close_request {
-                            on_close_request.call(());
-                        },
-                        label {
-                            font_size: "14",
-                            "X"
+                if show_close_button {
+                    rect {
+                        height: "0",
+                        width: "fill",
+                        cross_align: "end",
+                        Button {
+                            theme: theme_with!(ButtonTheme {
+                                padding: "6".into(),
+                                margin: "0".into(),
+                                width: "30".into(),
+                                height: "30".into(),
+                                corner_radius: "999".into(),
+                                shadow: "none".into()
+                            }),
+                            onclick: move |_| if let Some(oncloserequest) = &oncloserequest {
+                                oncloserequest.call(());
+                            },
+                            CrossIcon {
+                                fill: cross_fill
+                             }
                         }
                     }
                 }
@@ -85,7 +99,6 @@ pub fn PopupContent(children: Element) -> Element {
         rect {
             font_size: "15",
             margin: "6 2",
-            color: "rgb(20, 20, 20)",
             {children}
         }
     )
diff --git a/crates/core/src/events/event_name.rs b/crates/core/src/events/event_name.rs
index 1517fd13a..dc9d20189 100644
--- a/crates/core/src/events/event_name.rs
+++ b/crates/core/src/events/event_name.rs
@@ -155,6 +155,11 @@ impl EventName {
         )
     }
 
+    // Only let events that do not move the mouse, go through solid nodes
+    pub fn does_go_through_solid(&self) -> bool {
+        !self.was_cursor_moved()
+    }
+
     // Check if this event can change the hover state of a Node.
     pub fn can_change_hover_state(&self) -> bool {
         matches!(
diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index 896ebd76e..909f24da6 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -220,7 +220,8 @@ fn measure_dom_events(
 
                 let Style { background, .. } = &*node.get::<Style>().unwrap();
 
-                if background != &Fill::Color(Color::TRANSPARENT) && event.get_name().does_bubble()
+                if background != &Fill::Color(Color::TRANSPARENT)
+                    && !event.get_name().does_go_through_solid()
                 {
                     // If the background isn't transparent,
                     // we must make sure that next nodes are parent of it
diff --git a/crates/hooks/src/theming/dark.rs b/crates/hooks/src/theming/dark.rs
index 0c4b24b6a..4dbcdb32b 100644
--- a/crates/hooks/src/theming/dark.rs
+++ b/crates/hooks/src/theming/dark.rs
@@ -22,6 +22,7 @@ pub const DARK_THEME: Theme = Theme {
         },
         border_fill: cow_borrowed!("rgb(80, 80, 80)"),
         focus_border_fill: cow_borrowed!("rgb(110, 110, 110)"),
+        shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
         padding: LIGHT_THEME.button.padding,
         margin: LIGHT_THEME.button.margin,
         corner_radius: LIGHT_THEME.button.corner_radius,
@@ -71,7 +72,7 @@ pub const DARK_THEME: Theme = Theme {
             color: cow_borrowed!("white"),
         },
         border_fill: cow_borrowed!("rgb(80, 80, 80)"),
-        arrow_fill: cow_borrowed!("rgb(40, 40, 40)"),
+        arrow_fill: cow_borrowed!("rgb(150, 150, 150)"),
     },
     dropdown_item: DropdownItemTheme {
         background: cow_borrowed!("rgb(35, 35, 35)"),
@@ -126,10 +127,10 @@ pub const DARK_THEME: Theme = Theme {
         width: LIGHT_THEME.network_image.width,
         height: LIGHT_THEME.network_image.height,
     },
-    arrow_icon: ArrowIconTheme {
-        width: LIGHT_THEME.arrow_icon.width,
-        height: LIGHT_THEME.arrow_icon.height,
-        margin: LIGHT_THEME.arrow_icon.margin,
+    icon: IconTheme {
+        width: LIGHT_THEME.icon.width,
+        height: LIGHT_THEME.icon.height,
+        margin: LIGHT_THEME.icon.margin,
     },
     sidebar: SidebarTheme {
         background: cow_borrowed!("rgb(20, 20, 20)"),
@@ -145,4 +146,11 @@ pub const DARK_THEME: Theme = Theme {
             color: cow_borrowed!("white"),
         },
     },
+    popup: PopupTheme {
+        background: cow_borrowed!("rgb(25, 25, 25)"),
+        color: cow_borrowed!("white"),
+        cross_fill: cow_borrowed!("rgb(150, 150, 150)"),
+        width: LIGHT_THEME.popup.width,
+        height: LIGHT_THEME.popup.height,
+    },
 };
diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs
index 71c4ed0ae..9fdb2cacf 100644
--- a/crates/hooks/src/theming/light.rs
+++ b/crates/hooks/src/theming/light.rs
@@ -22,6 +22,7 @@ pub const LIGHT_THEME: Theme = Theme {
         },
         border_fill: cow_borrowed!("rgb(210, 210, 210)"),
         focus_border_fill: cow_borrowed!("rgb(180, 180, 180)"),
+        shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
         padding: cow_borrowed!("8 16"),
         margin: cow_borrowed!("4"),
         corner_radius: cow_borrowed!("8"),
@@ -126,7 +127,7 @@ pub const LIGHT_THEME: Theme = Theme {
         width: cow_borrowed!("100%"),
         height: cow_borrowed!("100%"),
     },
-    arrow_icon: ArrowIconTheme {
+    icon: IconTheme {
         width: cow_borrowed!("10"),
         height: cow_borrowed!("10"),
         margin: cow_borrowed!("none"),
@@ -145,4 +146,11 @@ pub const LIGHT_THEME: Theme = Theme {
         },
         border_fill: cow_borrowed!("rgb(210, 210, 210)"),
     },
+    popup: PopupTheme {
+        background: cow_borrowed!("white"),
+        color: cow_borrowed!("black"),
+        cross_fill: cow_borrowed!("rgb(40, 40, 40)"),
+        width: cow_borrowed!("350"),
+        height: cow_borrowed!("200"),
+    },
 };
diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs
index c3fcfe745..a2bcba987 100644
--- a/crates/hooks/src/theming/mod.rs
+++ b/crates/hooks/src/theming/mod.rs
@@ -255,6 +255,7 @@ define_theme! {
         hover_background: str,
         border_fill: str,
         focus_border_fill: str,
+        shadow: str,
         margin: str,
         corner_radius: str,
         width: str,
@@ -440,7 +441,7 @@ define_theme! {
 
 define_theme! {
     %[component]
-    pub ArrowIcon {
+    pub Icon {
         %[cows]
         margin: str,
         width: str,
@@ -470,6 +471,18 @@ define_theme! {
     }
 }
 
+define_theme! {
+    %[component]
+    pub Popup {
+        %[cows]
+        background: str,
+        color: str,
+        cross_fill: str,
+        width: str,
+        height: str,
+    }
+}
+
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub struct Theme {
     pub name: &'static str,
@@ -491,9 +504,10 @@ pub struct Theme {
     pub canvas: CanvasTheme,
     pub graph: GraphTheme,
     pub network_image: NetworkImageTheme,
-    pub arrow_icon: ArrowIconTheme,
+    pub icon: IconTheme,
     pub sidebar: SidebarTheme,
     pub sidebar_item: SidebarItemTheme,
+    pub popup: PopupTheme,
 }
 
 impl Default for Theme {
diff --git a/examples/popup.rs b/examples/popup.rs
index ab1a66b8c..cef779c6b 100644
--- a/examples/popup.rs
+++ b/examples/popup.rs
@@ -10,13 +10,14 @@ fn main() {
 }
 
 fn app() -> Element {
+    use_init_theme(DARK_THEME);
     let mut show_popup = use_signal(|| false);
 
     rsx!(
-        rect {
+        Body {
             if *show_popup.read() {
                 Popup {
-                    on_close_request: move |_| {
+                    oncloserequest: move |_| {
                         show_popup.set(false)
                     },
                     PopupTitle {

From cdfa46ef579ceef136905dd557cc573a270498f7 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sat, 24 Feb 2024 17:33:07 +0100
Subject: [PATCH 19/21] unit test

---
 crates/components/src/popup.rs | 60 ++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/crates/components/src/popup.rs b/crates/components/src/popup.rs
index e268869cc..819681159 100644
--- a/crates/components/src/popup.rs
+++ b/crates/components/src/popup.rs
@@ -103,3 +103,63 @@ pub fn PopupContent(children: Element) -> Element {
         }
     )
 }
+
+#[cfg(test)]
+mod test {
+    use dioxus::prelude::use_signal;
+    use freya::prelude::*;
+    use freya_testing::*;
+
+    #[tokio::test]
+    pub async fn popup() {
+        fn popup_app() -> Element {
+            let mut show_popup = use_signal(|| false);
+
+            rsx!(
+                if *show_popup.read() {
+                    Popup {
+                        oncloserequest: move |_| {
+                            show_popup.set(false)
+                        },
+                        label {
+                            "Hello, World!"
+                        }
+                    }
+                }
+                Button {
+                    onclick: move |_| show_popup.set(true),
+                    label {
+                        "Open"
+                    }
+                }
+            )
+        }
+
+        let mut utils = launch_test(popup_app);
+        utils.wait_for_update().await;
+
+        // Check the popup is closed
+        assert_eq!(utils.sdom().get().layout().size(), 3);
+
+        // 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;
+
+        // Check the popup is opened
+        assert_eq!(utils.sdom().get().layout().size(), 9);
+
+        utils.push_event(PlatformEvent::Mouse {
+            name: EventName::Click,
+            cursor: (395.0, 180.0).into(),
+            button: Some(MouseButton::Left),
+        });
+        utils.wait_for_update().await;
+
+        // Check the popup is closed
+        assert_eq!(utils.sdom().get().layout().size(), 3);
+    }
+}

From 65b62e2ada1fa2fef55fb92ceb6757e21c49fb93 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sat, 24 Feb 2024 17:44:14 +0100
Subject: [PATCH 20/21] fix

---
 crates/core/src/events/event_name.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/core/src/events/event_name.rs b/crates/core/src/events/event_name.rs
index dc9d20189..5393793af 100644
--- a/crates/core/src/events/event_name.rs
+++ b/crates/core/src/events/event_name.rs
@@ -157,7 +157,7 @@ impl EventName {
 
     // Only let events that do not move the mouse, go through solid nodes
     pub fn does_go_through_solid(&self) -> bool {
-        !self.was_cursor_moved()
+        matches!(self, Self::KeyDown)
     }
 
     // Check if this event can change the hover state of a Node.

From f0e073305b90da685cb8cd0c3b381d29592fe1ac Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sun, 3 Mar 2024 11:08:59 +0100
Subject: [PATCH 21/21] docs

---
 crates/components/src/popup.rs | 35 ++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/crates/components/src/popup.rs b/crates/components/src/popup.rs
index 819681159..8461f0e7d 100644
--- a/crates/components/src/popup.rs
+++ b/crates/components/src/popup.rs
@@ -20,6 +20,41 @@ pub fn PopupBackground(children: Element) -> Element {
     })
 }
 
+/// `Popup` component.
+///
+/// # Styling
+/// Inherits the [`PopupTheme`](freya_hooks::PopupTheme) theme.
+/// ```rust, no_run
+/// # use freya::prelude::*;
+/// fn app() -> Element {
+///     let mut show_popup = use_signal(|| false);
+///
+///     rsx!(
+///         if *show_popup.read() {
+///              Popup {
+///                  oncloserequest: move |_| {
+///                      show_popup.set(false)
+///                  },
+///                  PopupTitle {
+///                      label {
+///                          "Awesome Popup"
+///                      }
+///                  }
+///                  PopupContent {
+///                      label {
+///                          "Some content"
+///                      }
+///                  }
+///              }
+///          }
+///          Button {
+///              onclick: move |_| show_popup.set(true),
+///              label {
+///                  "Open"
+///              }
+///          }
+///     )
+/// }
 #[allow(non_snake_case)]
 #[component]
 pub fn Popup(