Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@marc2332
marc2332 committed Aug 2, 2023
1 parent 6faa6cf commit f436626
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 189 deletions.
6 changes: 3 additions & 3 deletions Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@ torin = { path = "torin", version = "0.1.0" }

dioxus = { version = "0.4" }
dioxus-native-core-macro = { version = "0.4" }
dioxus-rsx = { version = "0.4", features=["hot_reload"] }
dioxus-native-core = { version = "0.4", features=["dioxus"] }
dioxus-rsx = { version = "0.4", features = ["hot_reload"] }
dioxus-native-core = { version = "0.4", features = ["dioxus"] }
dioxus-core-macro = { version = "0.4" }
dioxus-hooks = { version = "0.4" }
dioxus-core = { version = "0.4" }
dioxus-hot-reload = { version = "0.4", features=["file_watcher"] }
dioxus-hot-reload = { version = "0.4", features = ["file_watcher"] }
dioxus-router = { version = "0.4" }

gl = "0.14.0"
Expand Down
21 changes: 12 additions & 9 deletions devtools/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ pub fn DevtoolsBar(cx: Scope) -> Element {
render!(
TabsBar {
TabButton {
to: Route::TreeTab { },
to: Route::TreeElementsTab { },
label: "Elements"
}
}
Expand Down Expand Up @@ -225,7 +225,7 @@ pub fn NodeInspectorBar(cx: Scope, node_id: NodeId) -> Element {
pub enum Route {
#[layout(DevtoolsBar)]
#[route("/")]
TreeTab {},
TreeElementsTab {},

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

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

render!(NodesTree {
Expand All @@ -262,11 +262,15 @@ fn TreeTab(cx: Scope) -> Element {
})
}

#[derive(Props, PartialEq)]
struct TreeTabProps {
node_id: String,
}

#[allow(non_snake_case)]
#[inline_props]
fn TreeStyleTab(cx: Scope, node_id: String) -> Element {
fn TreeStyleTab(cx: Scope<TreeTabProps>) -> Element {
let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
let node_id = NodeId::deserialize(&node_id);
let node_id = NodeId::deserialize(&cx.props.node_id);

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

#[allow(non_snake_case)]
#[inline_props]
fn TreeLayoutTab(cx: Scope, node_id: String) -> Element {
fn TreeLayoutTab(cx: Scope<TreeTabProps>) -> Element {
let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
let node_id = NodeId::deserialize(&node_id);
let node_id = NodeId::deserialize(&cx.props.node_id);

render!(
NodesTree {
Expand Down
2 changes: 1 addition & 1 deletion devtools/src/node.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ pub fn NodeElement<'a>(
) -> Element<'a> {
let status = use_state(cx, ButtonStatus::default);

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

let onmouseover = move |_| {
if *status.get() != ButtonStatus::Hovering {
Expand Down
154 changes: 79 additions & 75 deletions devtools/src/tabs/layout.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,111 +8,115 @@ use crate::{hooks::use_selected_node, NodeInspectorBar};
#[allow(non_snake_case)]
#[inline_props]
pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element {
let node = use_selected_node(cx, &node_id).unwrap();
let node = use_selected_node(cx, &cx.props.node_id);

let inner_area = format!(
"{}x{}",
node.areas.inner_area.width(),
node.areas.inner_area.height()
);
let area = format!("{}x{}", node.areas.area.width(), node.areas.area.height());
let paddings = node.state.size.padding;
if let Some(node) = node {
let inner_area = format!(
"{}x{}",
node.areas.inner_area.width(),
node.areas.inner_area.height()
);
let area = format!("{}x{}", node.areas.area.width(), node.areas.area.height());
let paddings = node.state.size.padding;

render!(
rect {
overflow: "clip",
width: "100%",
height: "50%",
NodeInspectorBar {
node_id: *node_id
}
ScrollView {
show_scrollbar: true,
height: "calc(100% - 35)",
render!(
rect {
overflow: "clip",
width: "100%",
rect {
height: "50%",
NodeInspectorBar {
node_id: *node_id
}
ScrollView {
show_scrollbar: true,
height: "calc(100% - 35)",
width: "100%",
height: "200",
padding: "20",
label {
height: "25",
"Area: {area}"
}
rect {
width: "100%",
height: "calc(100% - 25)",
display: "center",
direction: "both",
background: "rgb(40, 40, 40)",
height: "200",
padding: "20",
label {
height: "25",
"Area: {area}"
}
rect {
width: "100%",
height: "100%",
background: "rgb(71, 180, 240)",
corner_radius: "5",
rect {
direction: "both",
display: "center",
width: "100%",
height: "25",
label {
width: "100%",
align: "center",
"{paddings.top()}"
}
}
height: "calc(100% - 25)",
display: "center",
direction: "both",
background: "rgb(40, 40, 40)",
rect {
width: "100%",
height: "calc(100% - 50)",
direction: "horizontal",
height: "100%",
background: "rgb(71, 180, 240)",
corner_radius: "5",
rect {
direction: "vertical",
direction: "both",
display: "center",
width: "25",
height: "100%",
width: "100%",
height: "25",
label {
width: "100%",
align: "center",
"{paddings.left()}"
"{paddings.top()}"
}
}
rect {
width: "calc(100% - 50)",
height: "100%",
display: "center",
direction: "both",
background: "rgb(40, 40, 40)",
corner_radius: "5",
label {
"{inner_area}"
width: "100%",
height: "calc(100% - 50)",
direction: "horizontal",
rect {
direction: "vertical",
display: "center",
width: "25",
height: "100%",
label {
width: "100%",
align: "center",
"{paddings.left()}"
}
}
rect {
width: "calc(100% - 50)",
height: "100%",
display: "center",
direction: "both",
background: "rgb(40, 40, 40)",
corner_radius: "5",
label {
"{inner_area}"
}
}
rect {
direction: "vertical",
display: "center",
width: "25",
height: "100%",
label {
width: "100%",
align: "center",
"{paddings.right()}"
}
}
}
rect {
direction: "vertical",
direction: "both",
display: "center",
width: "25",
height: "100%",
width: "100%",
height: "25",
label {
width: "100%",
align: "center",
"{paddings.right()}"
"{paddings.bottom()}"
}
}
}
rect {
direction: "both",
display: "center",
width: "100%",
height: "25",
label {
width: "100%",
align: "center",
"{paddings.bottom()}"
}
}
}
}
}
}
}
)
)
} else {
None
}
}
Loading

0 comments on commit f436626

Please sign in to comment.