diff --git a/docs/src/pages/docs/rust.mdx b/docs/src/pages/docs/rust.mdx
index 2c601afb..88b07e8b 100644
--- a/docs/src/pages/docs/rust.mdx
+++ b/docs/src/pages/docs/rust.mdx
@@ -12,21 +12,26 @@ stretch = "0.3.2"
We are ready to use Stretch! Open up `hello_stretch/src/main.rs` and replace its contents with the following. Once finished you should be able to run `cargo run` to see the results of this basic layout calculation.
{`
-use stretch::{style::*, node::{Node, Stretch}, geometry::Size};
+use stretch::{style::*, node::{Stretch}, geometry::Size};
fn main() {
- let stretch = Stretch::new();
+ let mut stretch = Stretch::new();
- let node = stretch.new_node(Style {
- size: Size {
- width: Dimension::Points(100.0),
- height: Dimension::Points(100.0),
- },
- ..Default::default()
- }, vec![]).unwrap();
+ let node = stretch
+ .new_node(
+ Style {
+ size: Size {
+ width: Dimension::Points(100.0),
+ height: Dimension::Points(100.0),
+ },
+ ..Default::default()
+ },
+ vec![],
+ )
+ .unwrap();
- stretch.compute_layout(node, Size::undefined()).unwrap();
- dbg!(stretch.layout(node).unwrap());
+ stretch.compute_layout(node, Size::undefined()).unwrap();
+ dbg!(stretch.layout(node).unwrap());
}
`}
@@ -34,60 +39,89 @@ fn main() {
`Node`s are the core building blocks of a stretch layout tree. A node needs a `Style` which describes the `flexbox` properties for the node. By adding nodes as children to a parent node we create a tree which we can perform layout on. The result of a layout computation is a tree of `Layout` nodes. This tree matches the structure of the `Node` tree but contains the computed layout of each node.
{`
-use stretch::{style::*, node::{Node, Stretch}, geometry::Size};
+use stretch::{style::*, node::{Stretch}, geometry::Size};
fn main() {
- let stretch = Stretch::new();
+ let mut stretch = Stretch::new();
- let node = stretch.new_node(Style { ..Default::default() }, vec![
- stretch.new_node(Style {
- size: Size {
- width: Dimension::Points(100.0),
- height: Dimension::Points(100.0),
- },
- ..Default::default()
- }).unwrap()
- ]).unwrap();
+ let child = stretch
+ .new_node(
+ Style {
+ size: Size {
+ width: Dimension::Points(100.0),
+ height: Dimension::Points(100.0),
+ },
+ ..Default::default()
+ },
+ vec![],
+ )
+ .unwrap();
+
+ let node = stretch
+ .new_node(
+ Style {
+ ..Default::default()
+ },
+ vec![child],
+ )
+ .unwrap();
- stretch.compute_layout(node, Size::undefined()).unwrap();
- let layout = stretch.layout(node).unwrap();
+ stretch.compute_layout(node, Size::undefined()).unwrap();
+ let layout = stretch.layout(node).unwrap();
- layout.width; // 100.0
- layout.height; // 100.0
+ layout.size;
+ dbg!(layout.size);
}
`}
Nodes can be be mutated and stretch will automatically recompute only the subtrees which have changed. This is incredibly powerful if you have a large node tree, perhaps representing the UI of an app, and only need to change the height of a single element.
{`
-use stretch::{style::*, node::{Node, Stretch}, geometry::Size};
+use stretch::{style::*, node::{Stretch}, geometry::Size};
fn main() {
- let stretch = Stretch::new();
+ let mut stretch = Stretch::new();
- let mut node = stretch.new_node(Style { ..Default::default() }, vec![
- stretch.new_node(Style {
- size: Size {
- width: Dimension::Points(100.0),
- height: Dimension::Points(100.0),
- },
- ..Default::default()
- }).unwrap()
- ]).unwrap();
+ let child = stretch
+ .new_node(
+ Style {
+ size: Size {
+ width: Dimension::Points(100.0),
+ height: Dimension::Points(100.0),
+ },
+ ..Default::default()
+ },
+ vec![],
+ )
+ .unwrap();
+
+ let node = stretch
+ .new_node(
+ Style {
+ ..Default::default()
+ },
+ vec![child],
+ )
+ .unwrap();
- stretch.compute_layout(node, Size::undefined()).unwrap();
+ stretch.compute_layout(node, Size::undefined()).unwrap();
- // Mutate node
- stretch.set_style(node, Style {
- size: Size {
- width: Dimension::Points(100.0),
- height: Dimension::Points(100.0),
- },
- ..Default::default()
- }).unwrap();
+ // Mutate node
+ stretch
+ .set_style(
+ node,
+ Style {
+ size: Size {
+ width: Dimension::Points(100.0),
+ height: Dimension::Points(100.0),
+ },
+ ..Default::default()
+ }
+ )
+ .unwrap();
- // This call will return partially cached results
- stretch.compute_layout(node, Size::undefined()).unwrap();
+ // This call will return partially cached results
+ stretch.compute_layout(node, Size::undefined()).unwrap();
}
`}