Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update rust.mdx #75

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update rust.mdx #75

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 82 additions & 48 deletions docs/src/pages/docs/rust.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,82 +12,116 @@ 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.

<Code lang="rust" file="main.rs">{`
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());
}
`}</Code>

# Basics
`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.

<Code lang="rust" file="main.rs">{`
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);
}
`}</Code>

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.

<Code lang="rust" file="main.rs">{`
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();
}
`}</Code>

Expand Down