Skip to content

Commit 0cf3de7

Browse files
fschuttfschutt
committed
Add shim DOM for scroll bar wrapper
1 parent 76f1d30 commit 0cf3de7

File tree

2 files changed

+162
-2
lines changed

2 files changed

+162
-2
lines changed

‎azul-core/src/styled_dom.rs

+88
Original file line numberDiff line numberDiff line change
@@ -1536,8 +1536,12 @@ impl StyledDom {
15361536
}
15371537

15381538
/// Inject scroll bar DIVs with relevant event handlers into the DOM
1539+
///
1540+
/// This function essentially takes
15391541
pub fn inject_scroll_bars(&mut self) {
15401542

1543+
use azul_css_parser::CssApiWrapper;
1544+
15411545
// allocate 14 nodes for every node
15421546
//
15431547
// 0: root component
@@ -1557,6 +1561,90 @@ impl StyledDom {
15571561
// 14: |- self.root
15581562
// |- ... self.children
15591563

1564+
let dom_to_inject = Dom::div()
1565+
// .with_class("__azul-native-scroll-root-component".into())
1566+
.with_inline_style("display:flex; flex-grow:1; flex-direction:column;".into())
1567+
.with_children(vec![
1568+
1569+
Dom::div()
1570+
// .with_class("__azul-native-scroll-vertical-container".into())
1571+
.with_inline_style("display:flex; flex-grow:1; flex-direction:column-reverse;".into())
1572+
.with_children(vec![
1573+
1574+
Dom::div()
1575+
// .with_class("__azul-native-scroll-horizontal-scrollbar".into())
1576+
.with_inline_style("display:flex; flex-grow:1; flex-direction:row; height:15px; background:grey;".into())
1577+
.with_children(vec![
1578+
Dom::div(),
1579+
// .with_class("__azul-native-scroll-horizontal-scrollbar-track-left".into()),
1580+
Dom::div()
1581+
// .with_class("__azul-native-scroll-horizontal-scrollbar-track-middle".into())
1582+
.with_children(vec![
1583+
Dom::div()
1584+
// .with_class("__azul-native-scroll-horizontal-scrollbar-track-thumb".into())
1585+
].into()),
1586+
Dom::div()
1587+
// .with_class("__azul-native-scroll-horizontal-scrollbar-track-right".into()),
1588+
].into()),
1589+
1590+
Dom::div()
1591+
// .with_class("__azul-native-scroll-content-container-1".into())
1592+
.with_inline_style("display:flex; flex-grow:1; flex-direction:row-reverse;".into())
1593+
.with_children(vec![
1594+
1595+
Dom::div()
1596+
// .with_class("__azul-native-scroll-vertical-scrollbar".into())
1597+
.with_inline_style("display:flex; flex-grow:1; flex-direction:column; width:15px; background:grey;".into())
1598+
.with_children(vec![
1599+
Dom::div(),
1600+
// .with_class("__azul-native-scroll-vertical-scrollbar-track-top".into()),
1601+
Dom::div()
1602+
// .with_class("__azul-native-scroll-vertical-scrollbar-track-middle".into())
1603+
.with_children(vec![
1604+
Dom::div()
1605+
// .with_class("__azul-native-scroll-vertical-scrollbar-track-thumb".into())
1606+
].into()),
1607+
Dom::div()
1608+
// .with_class("__azul-native-scroll-vertical-scrollbar-track-bottom".into()),
1609+
].into()),
1610+
1611+
Dom::div()
1612+
// .with_class("__azul-native-scroll-content-container-1".into())
1613+
.with_inline_style("display:flex; flex-grow:1; flex-direction:column;".into())
1614+
.with_children(vec![
1615+
Dom::div() // <- this div is where the new children will be injected into
1616+
].into())
1617+
].into())
1618+
].into())
1619+
].into())
1620+
.style(CssApiWrapper::empty());
1621+
1622+
// allocate new nodes
1623+
let nodes_to_allocate = self.node_data.len()
1624+
+ (self.non_leaf_nodes.len() * dom_to_inject.node_data.len());
1625+
1626+
// pre-allocate a new DOM tree with self.nodes.len() * dom_to_inject.nodes.len() nodes
1627+
1628+
let mut new_styled_dom = StyledDom {
1629+
root: self.root,
1630+
node_hierarchy: vec![NodeHierarchyItem::zeroed();nodes_to_allocate].into(),
1631+
node_data: vec![NodeData::const_div();nodes_to_allocate].into(),
1632+
styled_nodes: vec![StyledNode::default();nodes_to_allocate].into(),
1633+
cascade_info: vec![CascadeInfo::default();nodes_to_allocate],
1634+
nodes_with_window_callbacks: self.nodes_with_window_callbacks.clone(),
1635+
nodes_with_not_callbacks: self.nodes_with_not_callbacks.clone(),
1636+
nodes_with_datasets: self.nodes_with_datasets.clone(),
1637+
tag_ids_to_node_ids: self.tag_ids_to_node_ids.clone(),
1638+
non_leaf_nodes: self.non_leaf_nodes.clone(),
1639+
css_property_cache: self.css_property_cache.clone(),
1640+
};
1641+
1642+
// inject self.root as the nth node
1643+
let inject_as_id = 0;
1644+
1645+
println!("inject scroll bars:\r\n{}", dom_to_inject.get_html_string("", "", true));
1646+
1647+
// *self = new_styled_dom;
15601648
}
15611649

15621650
/// Inject a menu bar into the root component

‎examples/rust/fontdebug.rs

+74-2
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,87 @@ struct DataModel {
88

99
extern "C"
1010
fn myLayoutFunc(data: &mut RefAny, _: &mut LayoutCallbackInfo) -> StyledDom {
11-
Dom::body().with_child(
11+
12+
get_dom()
13+
14+
/*Dom::body().with_child(
1215
Dom::text("Test".into())
1316
.with_inline_style("font-size: 50px;".into())
14-
).style(Css::empty())
17+
).style(Css::empty())*/
18+
}
19+
20+
fn get_dom() -> StyledDom {
21+
22+
Dom::body()
23+
.with_inline_style("display:flex; flex-grow:1; flex-direction:column;".into())
24+
.with_children(vec![
25+
Dom::div()
26+
// .with_class("__azul-native-scroll-root-component".into())
27+
.with_inline_style("display:flex; flex-grow:1; flex-direction:column;".into())
28+
.with_children(vec![
29+
30+
Dom::div()
31+
// .with_class("__azul-native-scroll-vertical-container".into())
32+
.with_inline_style("display:flex; flex-grow:1; flex-direction:column-reverse;".into())
33+
.with_children(vec![
34+
35+
Dom::div()
36+
// .with_class("__azul-native-scroll-horizontal-scrollbar".into())
37+
.with_inline_style("display:flex; flex-grow:1; flex-direction:row; height:15px; max-height:15px; background:grey;".into())
38+
.with_children(vec![
39+
Dom::div(),
40+
// .with_class("__azul-native-scroll-horizontal-scrollbar-track-left".into()),
41+
Dom::div()
42+
// .with_class("__azul-native-scroll-horizontal-scrollbar-track-middle".into())
43+
.with_children(vec![
44+
Dom::div()
45+
// .with_class("__azul-native-scroll-horizontal-scrollbar-track-thumb".into())
46+
].into()),
47+
Dom::div()
48+
// .with_class("__azul-native-scroll-horizontal-scrollbar-track-right".into()),
49+
].into()),
50+
51+
Dom::div()
52+
// .with_class("__azul-native-scroll-content-container-1".into())
53+
.with_inline_style("display:flex; flex-grow:1; flex-direction:row-reverse;".into())
54+
.with_children(vec![
55+
56+
Dom::div()
57+
// .with_class("__azul-native-scroll-vertical-scrollbar".into())
58+
.with_inline_style("display:flex; flex-grow:1; flex-direction:column; width:15px; max-width:15px; background:grey;".into())
59+
.with_children(vec![
60+
Dom::div(),
61+
// .with_class("__azul-native-scroll-vertical-scrollbar-track-top".into()),
62+
Dom::div()
63+
// .with_class("__azul-native-scroll-vertical-scrollbar-track-middle".into())
64+
.with_children(vec![
65+
Dom::div()
66+
// .with_class("__azul-native-scroll-vertical-scrollbar-track-thumb".into())
67+
].into()),
68+
Dom::div()
69+
// .with_class("__azul-native-scroll-vertical-scrollbar-track-bottom".into()),
70+
].into()),
71+
72+
Dom::div()
73+
// .with_class("__azul-native-scroll-content-container-1".into())
74+
.with_inline_style("display:flex; flex-grow:1; flex-direction:column;".into())
75+
.with_children(vec![
76+
Dom::div() // <- this div is where the new children will be injected into
77+
.with_inline_style("display:block;width:50px;height:50px;background:red;".into())
78+
].into())
79+
].into())
80+
].into())
81+
].into())
82+
].into())
83+
84+
.style(Css::empty())
1585
}
1686

1787
fn main() {
1888
let data = DataModel { counter: 0 };
1989
let app = App::new(RefAny::new(data), AppConfig::new(LayoutSolver::Default));
2090
let mut window = WindowCreateOptions::new(myLayoutFunc);
2191
app.run(window);
92+
93+
println!("inject scroll bars:\r\n{}", get_dom().get_html_string());
2294
}

0 commit comments

Comments
 (0)