Skip to content

Commit f436626

Browse files
marc2332marc2332
committed
fixes
1 parent 6faa6cf commit f436626

File tree

5 files changed

+200
-189
lines changed

5 files changed

+200
-189
lines changed

‎Cargo.toml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ torin = { path = "torin", version = "0.1.0" }
2828

2929
dioxus = { version = "0.4" }
3030
dioxus-native-core-macro = { version = "0.4" }
31-
dioxus-rsx = { version = "0.4", features=["hot_reload"] }
32-
dioxus-native-core = { version = "0.4", features=["dioxus"] }
31+
dioxus-rsx = { version = "0.4", features = ["hot_reload"] }
32+
dioxus-native-core = { version = "0.4", features = ["dioxus"] }
3333
dioxus-core-macro = { version = "0.4" }
3434
dioxus-hooks = { version = "0.4" }
3535
dioxus-core = { version = "0.4" }
36-
dioxus-hot-reload = { version = "0.4", features=["file_watcher"] }
36+
dioxus-hot-reload = { version = "0.4", features = ["file_watcher"] }
3737
dioxus-router = { version = "0.4" }
3838

3939
gl = "0.14.0"

‎devtools/src/lib.rs

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ pub fn DevtoolsBar(cx: Scope) -> Element {
195195
render!(
196196
TabsBar {
197197
TabButton {
198-
to: Route::TreeTab { },
198+
to: Route::TreeElementsTab { },
199199
label: "Elements"
200200
}
201201
}
@@ -225,7 +225,7 @@ pub fn NodeInspectorBar(cx: Scope, node_id: NodeId) -> Element {
225225
pub enum Route {
226226
#[layout(DevtoolsBar)]
227227
#[route("/")]
228-
TreeTab {},
228+
TreeElementsTab {},
229229

230230
#[route("/elements/:node_id/style")]
231231
TreeStyleTab { node_id: String },
@@ -249,7 +249,7 @@ fn PageNotFound(cx: Scope) -> Element {
249249

250250
#[allow(non_snake_case)]
251251
#[inline_props]
252-
fn TreeTab(cx: Scope) -> Element {
252+
fn TreeElementsTab(cx: Scope) -> Element {
253253
let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
254254

255255
render!(NodesTree {
@@ -262,11 +262,15 @@ fn TreeTab(cx: Scope) -> Element {
262262
})
263263
}
264264

265+
#[derive(Props, PartialEq)]
266+
struct TreeTabProps {
267+
node_id: String,
268+
}
269+
265270
#[allow(non_snake_case)]
266-
#[inline_props]
267-
fn TreeStyleTab(cx: Scope, node_id: String) -> Element {
271+
fn TreeStyleTab(cx: Scope<TreeTabProps>) -> Element {
268272
let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
269-
let node_id = NodeId::deserialize(&node_id);
273+
let node_id = NodeId::deserialize(&cx.props.node_id);
270274

271275
render!(
272276
NodesTree {
@@ -285,10 +289,9 @@ fn TreeStyleTab(cx: Scope, node_id: String) -> Element {
285289
}
286290

287291
#[allow(non_snake_case)]
288-
#[inline_props]
289-
fn TreeLayoutTab(cx: Scope, node_id: String) -> Element {
292+
fn TreeLayoutTab(cx: Scope<TreeTabProps>) -> Element {
290293
let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
291-
let node_id = NodeId::deserialize(&node_id);
294+
let node_id = NodeId::deserialize(&cx.props.node_id);
292295

293296
render!(
294297
NodesTree {

‎devtools/src/node.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ pub fn NodeElement<'a>(
1414
) -> Element<'a> {
1515
let status = use_state(cx, ButtonStatus::default);
1616

17-
let onmousedown = move |_| onselected.call(&node);
17+
let onmousedown = move |_| onselected.call(&cx.props.node);
1818

1919
let onmouseover = move |_| {
2020
if *status.get() != ButtonStatus::Hovering {

‎devtools/src/tabs/layout.rs

Lines changed: 79 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -8,111 +8,115 @@ use crate::{hooks::use_selected_node, NodeInspectorBar};
88
#[allow(non_snake_case)]
99
#[inline_props]
1010
pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element {
11-
let node = use_selected_node(cx, &node_id).unwrap();
11+
let node = use_selected_node(cx, &cx.props.node_id);
1212

13-
let inner_area = format!(
14-
"{}x{}",
15-
node.areas.inner_area.width(),
16-
node.areas.inner_area.height()
17-
);
18-
let area = format!("{}x{}", node.areas.area.width(), node.areas.area.height());
19-
let paddings = node.state.size.padding;
13+
if let Some(node) = node {
14+
let inner_area = format!(
15+
"{}x{}",
16+
node.areas.inner_area.width(),
17+
node.areas.inner_area.height()
18+
);
19+
let area = format!("{}x{}", node.areas.area.width(), node.areas.area.height());
20+
let paddings = node.state.size.padding;
2021

21-
render!(
22-
rect {
23-
overflow: "clip",
24-
width: "100%",
25-
height: "50%",
26-
NodeInspectorBar {
27-
node_id: *node_id
28-
}
29-
ScrollView {
30-
show_scrollbar: true,
31-
height: "calc(100% - 35)",
22+
render!(
23+
rect {
24+
overflow: "clip",
3225
width: "100%",
33-
rect {
26+
height: "50%",
27+
NodeInspectorBar {
28+
node_id: *node_id
29+
}
30+
ScrollView {
31+
show_scrollbar: true,
32+
height: "calc(100% - 35)",
3433
width: "100%",
35-
height: "200",
36-
padding: "20",
37-
label {
38-
height: "25",
39-
"Area: {area}"
40-
}
4134
rect {
4235
width: "100%",
43-
height: "calc(100% - 25)",
44-
display: "center",
45-
direction: "both",
46-
background: "rgb(40, 40, 40)",
36+
height: "200",
37+
padding: "20",
38+
label {
39+
height: "25",
40+
"Area: {area}"
41+
}
4742
rect {
4843
width: "100%",
49-
height: "100%",
50-
background: "rgb(71, 180, 240)",
51-
corner_radius: "5",
52-
rect {
53-
direction: "both",
54-
display: "center",
55-
width: "100%",
56-
height: "25",
57-
label {
58-
width: "100%",
59-
align: "center",
60-
"{paddings.top()}"
61-
}
62-
}
44+
height: "calc(100% - 25)",
45+
display: "center",
46+
direction: "both",
47+
background: "rgb(40, 40, 40)",
6348
rect {
6449
width: "100%",
65-
height: "calc(100% - 50)",
66-
direction: "horizontal",
50+
height: "100%",
51+
background: "rgb(71, 180, 240)",
52+
corner_radius: "5",
6753
rect {
68-
direction: "vertical",
54+
direction: "both",
6955
display: "center",
70-
width: "25",
71-
height: "100%",
56+
width: "100%",
57+
height: "25",
7258
label {
7359
width: "100%",
7460
align: "center",
75-
"{paddings.left()}"
61+
"{paddings.top()}"
7662
}
7763
}
7864
rect {
79-
width: "calc(100% - 50)",
80-
height: "100%",
81-
display: "center",
82-
direction: "both",
83-
background: "rgb(40, 40, 40)",
84-
corner_radius: "5",
85-
label {
86-
"{inner_area}"
65+
width: "100%",
66+
height: "calc(100% - 50)",
67+
direction: "horizontal",
68+
rect {
69+
direction: "vertical",
70+
display: "center",
71+
width: "25",
72+
height: "100%",
73+
label {
74+
width: "100%",
75+
align: "center",
76+
"{paddings.left()}"
77+
}
78+
}
79+
rect {
80+
width: "calc(100% - 50)",
81+
height: "100%",
82+
display: "center",
83+
direction: "both",
84+
background: "rgb(40, 40, 40)",
85+
corner_radius: "5",
86+
label {
87+
"{inner_area}"
88+
}
89+
}
90+
rect {
91+
direction: "vertical",
92+
display: "center",
93+
width: "25",
94+
height: "100%",
95+
label {
96+
width: "100%",
97+
align: "center",
98+
"{paddings.right()}"
99+
}
87100
}
88101
}
89102
rect {
90-
direction: "vertical",
103+
direction: "both",
91104
display: "center",
92-
width: "25",
93-
height: "100%",
105+
width: "100%",
106+
height: "25",
94107
label {
95108
width: "100%",
96109
align: "center",
97-
"{paddings.right()}"
110+
"{paddings.bottom()}"
98111
}
99112
}
100113
}
101-
rect {
102-
direction: "both",
103-
display: "center",
104-
width: "100%",
105-
height: "25",
106-
label {
107-
width: "100%",
108-
align: "center",
109-
"{paddings.bottom()}"
110-
}
111-
}
112114
}
113115
}
114116
}
115117
}
116-
}
117-
)
118+
)
119+
} else {
120+
None
121+
}
118122
}

0 commit comments

Comments
 (0)