plasmo 0.4.3

TUI-based renderer for Dioxus
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

use std::sync::{Arc, Mutex, MutexGuard, RwLock, RwLockReadGuard};

use dioxus_native_core::prelude::*;
use shipyard::Unique;
use taffy::{
    geometry::Point,
    prelude::{Layout, Size},
    Taffy,
};

use crate::{get_abs_layout, layout_to_screen_space};

/// Allows querying the layout of nodes after rendering. It will only provide a correct value after a node is rendered.
/// Provided as a root context for all tui applictions.
/// # Example
/// ```rust, ignore
/// use dioxus::prelude::*;
/// use dioxus_tui::query::Query;
/// use dioxus_tui::Size;
///
/// fn main() {
///     dioxus_tui::launch(app);
/// }
///
/// fn app(cx: Scope) -> Element {
///     let hue = use_state(cx, || 0.0);
///     let brightness = use_state(cx, || 0.0);
///     let tui_query: Query = cx.consume_context().unwrap();
///     cx.render(rsx! {
///         div{
///             width: "100%",
///             background_color: "hsl({hue}, 70%, {brightness}%)",
///             onmousemove: move |evt| {
///                 let node = tui_query.get(cx.root_node().mounted_id());
///                 let Size{width, height} = node.size().unwrap();
///                 hue.set((evt.data.offset_x as f32/width as f32)*255.0);
///                 brightness.set((evt.data.offset_y as f32/height as f32)*100.0);
///             },
///             "hsl({hue}, 70%, {brightness}%)",
///         }
///     })
/// }
/// ```
#[derive(Clone, Unique)]
pub struct Query {
    pub(crate) rdom: Arc<RwLock<RealDom>>,
    pub(crate) stretch: Arc<Mutex<Taffy>>,
}

impl Query {
    pub fn new(rdom: Arc<RwLock<RealDom>>, stretch: Arc<Mutex<Taffy>>) -> Self {
        Self { rdom, stretch }
    }

    pub fn get(&self, id: NodeId) -> ElementRef {
        let rdom = self.rdom.read();
        let stretch = self.stretch.lock();
        ElementRef::new(
            rdom.expect("rdom lock poisoned"),
            stretch.expect("taffy lock poisoned"),
            id,
        )
    }
}

pub struct ElementRef<'a> {
    inner: RwLockReadGuard<'a, RealDom>,
    stretch: MutexGuard<'a, Taffy>,
    id: NodeId,
}

impl<'a> ElementRef<'a> {
    pub(crate) fn new(
        inner: RwLockReadGuard<'a, RealDom>,
        stretch: MutexGuard<'a, Taffy>,
        id: NodeId,
    ) -> Self {
        Self { inner, stretch, id }
    }

    pub fn size(&self) -> Option<Size<u32>> {
        self.layout().map(|l| l.size.map(|v| v.round() as u32))
    }

    pub fn pos(&self) -> Option<Point<u32>> {
        self.layout().map(|l| Point {
            x: l.location.x.round() as u32,
            y: l.location.y.round() as u32,
        })
    }

    pub fn layout(&self) -> Option<Layout> {
        get_layout(self.inner.get(self.id).unwrap(), &self.stretch)
    }
}

pub(crate) fn get_layout(node: NodeRef, stretch: &Taffy) -> Option<Layout> {
    let layout = get_abs_layout(node, stretch);
    let pos = layout.location;

    Some(Layout {
        order: layout.order,
        size: layout.size.map(layout_to_screen_space),
        location: Point {
            x: layout_to_screen_space(pos.x).round(),
            y: layout_to_screen_space(pos.y).round(),
        },
    })
}