freya_devtools_app/tabs/
computed_layout.rs

1use freya::prelude::*;
2use freya_core::integration::NodeId;
3
4use crate::hooks::use_node_info;
5
6#[derive(PartialEq)]
7pub struct NodeInspectorComputedLayout {
8    pub node_id: NodeId,
9    pub window_id: u64,
10}
11
12impl Render for NodeInspectorComputedLayout {
13    fn render(&self) -> impl IntoElement {
14        let Some(node) = use_node_info(self.node_id, self.window_id) else {
15            return rect().into_element();
16        };
17
18        let inner_area = format!(
19            "{}x{}",
20            node.inner_area.width().round(),
21            node.inner_area.height().round()
22        );
23        let area = format!(
24            "{}x{}",
25            node.area.width().round(),
26            node.area.height().round()
27        );
28        let paddings = node.state.layout.padding;
29        let margins = node.state.layout.margin;
30
31        ScrollView::new()
32            .show_scrollbar(true)
33            .child(
34                rect()
35                    .padding(20.)
36                    .cross_align(Alignment::center())
37                    .width(Size::fill())
38                    .child(
39                        rect()
40                            .width(Size::fill())
41                            .max_width(Size::px(300.))
42                            .child(
43                                label()
44                                    .height(Size::px(25.))
45                                    .text(format!("Area: {area}"))
46                            )
47                            .child(
48                                rect()
49                                    .width(Size::fill())
50                                    .height(Size::px(250.))
51                                    .main_align(Alignment::center())
52                                    .cross_align(Alignment::center())
53                                    .background((197, 46, 139))
54                                    .content(Content::Flex)
55                                    .corner_radius(CornerRadius::new_all(5.))
56                                    .child(
57                                        // Top margin
58                                        TooltipContainer::new(Tooltip::new("Top margin"))
59                                            .child(
60                                                label()
61                                                    .text_align(TextAlign::Center)
62                                                    .width(Size::px(25.))
63                                                    .height(Size::px(25.))
64                                                    .text(format!("{}", margins.top()))
65                                            )
66                                    )
67                                    .child(
68                                        rect()
69                                            .direction(Direction::Horizontal)
70                                            .height(Size::flex(1.))
71                                            .width(Size::fill())
72                                            .cross_align(Alignment::center())
73                                            .content(Content::Flex)
74                                            .child(
75                                                // Left margin
76                                                TooltipContainer::new(Tooltip::new("Left margin"))
77                                                    .child(
78                                                        label()
79                                                            .text_align(TextAlign::Center)
80                                                            .width(Size::px(25.))
81                                                            .height(Size::px(25.))
82                                                            .text(format!("{}", margins.left()))
83                                                    )
84                                            )
85                                            .child(
86                                                rect()
87                                                    .width(Size::flex(1.))
88                                                    .height(Size::fill())
89                                                    .content(Content::Flex)
90                                                    .cross_align(Alignment::Center)
91                                                    .background((71, 180, 240))
92                                                    .corner_radius(CornerRadius::new_all(5.))
93                                                    .child(
94                                                        // Top padding
95                                                        TooltipContainer::new(Tooltip::new("Top padding"))
96                                                            .child(
97                                                                label()
98                                                                    .text_align(TextAlign::Center)
99                                                                    .width(Size::px(25.))
100                                                                    .height(Size::px(25.))
101                                                                    .text(format!("{}", paddings.top()))
102                                                            )
103                                                    )
104                                                    .child(
105                                                        rect()
106                                                            .direction(Direction::Horizontal)
107                                                            .height(Size::flex(1.))
108                                                            .content(Content::Flex)
109                                                            .cross_align(Alignment::center())
110                                                            .child(
111                                                                // Left padding
112                                                                TooltipContainer::new(Tooltip::new("Left padding"))
113                                                                    .child(
114                                                                        label()
115                                                                            .text_align(TextAlign::Center)
116                                                                            .width(Size::px(25.))
117                                                                            .height(Size::px(25.))
118                                                                            .text(format!("{}", paddings.left()))
119                                                                    )
120                                                            )
121                                                            .child(
122                                                                rect()
123                                                                    .width(Size::flex(1.))
124                                                                    .height(Size::fill())
125                                                                    .main_align(Alignment::center())
126                                                                    .cross_align(Alignment::center())
127                                                                    .background((40, 40, 40))
128                                                                    .corner_radius(CornerRadius::new_all(5.))
129                                                                    .child(
130                                                                        TooltipContainer::new(Tooltip::new("Inner area"))
131                                                                            .child(
132                                                                                label()
133                                                                                    .text(inner_area.clone())
134                                                                            )
135                                                                    )
136                                                            )
137                                                            .child(
138                                                                // Right padding
139                                                               TooltipContainer::new(Tooltip::new("Right padding"))
140                                                                    .child(
141                                                                        label()
142                                                                            .text_align(TextAlign::Center)
143                                                                            .width(Size::px(25.))
144                                                                            .height(Size::px(25.))
145                                                                            .text(format!("{}", paddings.right()))
146                                                                    )
147                                                            )
148                                                    )
149                                                    .child(
150                                                        // Bottom padding
151                                                       TooltipContainer::new(Tooltip::new("Bottom padding"))
152                                                            .child(
153                                                                label()
154                                                                    .text_align(TextAlign::Center)
155                                                                    .width(Size::px(25.))
156                                                                    .height(Size::px(25.))
157                                                                    .text(format!("{}", paddings.bottom()))
158                                                            )
159                                                    )
160                                            )
161                                            .child(
162                                                // Right margin
163                                                TooltipContainer::new(Tooltip::new("Right margin"))
164                                                    .child(
165                                                        label()
166                                                            .text_align(TextAlign::Center)
167                                                            .width(Size::px(25.))
168                                                            .height(Size::px(25.))
169                                                            .text(format!("{}", margins.right()))
170                                                    )
171                                            )
172                                    )
173                                    .child(
174                                        // Bottom margin
175                                        TooltipContainer::new(Tooltip::new("Bottom margin"))
176                                            .child(
177                                                label()
178                                                            .text_align(TextAlign::Center)
179                                                    .width(Size::px(25.))
180                                                    .height(Size::px(25.))
181                                                    .text(format!("{}", margins.bottom())),
182                                            )
183                                    )
184                            )
185                    )
186            )
187            .into()
188    }
189}
freya_devtools_app/tabs/computed_layout.rs

freya_devtools_app/tabs/
computed_layout.rs
