Skip to content

Commit

Permalink
Refactor LayoutTree + add examples of custom trees (#564)
Browse files Browse the repository at this point in the history
* Rename layout_mut to unrounded_layout_mut

* Make TaffyView private

* Add cache_mut to LayoutTree + make ompute methods generic again

* Move provided LayoutTree methods to private LayoutTreeExt trait

* Add inline(always) to LayoutTreeExt methods

* Rename node parameters in the LayoutTree trait to node_id

* Make compute_layout function public

* Simplify function signature of compute_leaf_layout

* Remove cumulative_x and cumulative_y parameters from round_layout function

* Split measure functions out of the measure example

* Add example of custom layout tree (Vec based)

* Add example of custom layout tree (owned children based)

* Fix clippy lints

* Split LayoutTree trait into LayoutTree and PartialLayoutTree traits

* PartialLayoutTree: rename children method to child_ids

* PartialLayoutTree: rename child method to get_child_id

* PartialLayoutTree: rename parameters of children methods

* PartialLayoutTree: rename style method to get_style

* PartialLayoutTree: rename unrounded_layout_mut method to get_unrounded_layout_mut

* PartialLayoutTree: rename final_layout_mut method to get_final_layout_mut

* PartialLayoutTree: rename cache_mut method to get_cache_mut

* LayoutTree: rename final_layout method to get_final_layout

* Remove compute_layout_with_rounding method

* Move get_final_layout_mut method from PartialLayoutTree to LayoutTree

* Make compute_layout_cached function take callback

* Make compute_cached_layout public

* Push caching into compute_child_layout

* Add inline(always)

* Make TaffyChildIter private

* Make CacheEntry private

* Add caching to examples
  • Loading branch information
nicoburns authored Oct 22, 2023
1 parent 23ff477 commit d4374b9
Show file tree
Hide file tree
Showing 22 changed files with 927 additions and 479 deletions.
2 changes: 1 addition & 1 deletion RELEASES.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ Example usage change:
### Removed

- `layout_flexbox()` has been removed from the prelude. Use `taffy::compute_flexbox_layout` instead.
- The following methods have been removed from the `LayoutTree` trait: `parent`, `is_childless`, `layout`, `measure_node`, `needs_measure`, `cache_mut` and `mark_dirty`. These no longer need to be implemented in custom implementations of `LayoutTree`.
- The following methods have been removed from the `LayoutTree` trait: `parent`, `is_childless`, `measure_node`, `needs_measure`, and `mark_dirty`. These no longer need to be implemented in custom implementations of `LayoutTree`.

### Changes

Expand Down
18 changes: 18 additions & 0 deletions examples/common/image.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
use taffy::geometry::Size;

pub struct ImageContext {
pub width: f32,
pub height: f32,
}

pub fn image_measure_function(
known_dimensions: taffy::geometry::Size<Option<f32>>,
image_context: &ImageContext,
) -> taffy::geometry::Size<f32> {
match (known_dimensions.width, known_dimensions.height) {
(Some(width), Some(height)) => Size { width, height },
(Some(width), None) => Size { width, height: (width / image_context.width) * image_context.height },
(None, Some(height)) => Size { width: (height / image_context.height) * image_context.width, height },
(None, None) => Size { width: image_context.width, height: image_context.height },
}
}
70 changes: 70 additions & 0 deletions examples/common/text.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
pub const LOREM_IPSUM : &str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

pub struct FontMetrics {
pub char_width: f32,
pub char_height: f32,
}

#[allow(dead_code)]
pub enum WritingMode {
Horizontal,
Vertical,
}

pub struct TextContext {
pub text_content: String,
pub writing_mode: WritingMode,
}

pub fn text_measure_function(
known_dimensions: taffy::geometry::Size<Option<f32>>,
available_space: taffy::geometry::Size<taffy::style::AvailableSpace>,
text_context: &TextContext,
font_metrics: &FontMetrics,
) -> taffy::geometry::Size<f32> {
use taffy::geometry::AbsoluteAxis;
use taffy::prelude::*;

let inline_axis = match text_context.writing_mode {
WritingMode::Horizontal => AbsoluteAxis::Horizontal,
WritingMode::Vertical => AbsoluteAxis::Vertical,
};
let block_axis = inline_axis.other_axis();
let words: Vec<&str> = text_context.text_content.split_whitespace().collect();

if words.is_empty() {
return Size::ZERO;
}

let min_line_length: usize = words.iter().map(|line| line.len()).max().unwrap_or(0);
let max_line_length: usize = words.iter().map(|line| line.len()).sum();
let inline_size =
known_dimensions.get_abs(inline_axis).unwrap_or_else(|| match available_space.get_abs(inline_axis) {
AvailableSpace::MinContent => min_line_length as f32 * font_metrics.char_width,
AvailableSpace::MaxContent => max_line_length as f32 * font_metrics.char_width,
AvailableSpace::Definite(inline_size) => inline_size
.min(max_line_length as f32 * font_metrics.char_width)
.max(min_line_length as f32 * font_metrics.char_width),
});
let block_size = known_dimensions.get_abs(block_axis).unwrap_or_else(|| {
let inline_line_length = (inline_size / font_metrics.char_width).floor() as usize;
let mut line_count = 1;
let mut current_line_length = 0;
for word in &words {
if current_line_length + word.len() > inline_line_length {
if current_line_length > 0 {
line_count += 1
};
current_line_length = word.len();
} else {
current_line_length += word.len();
};
}
(line_count as f32) * font_metrics.char_height
});

match text_context.writing_mode {
WritingMode::Horizontal => Size { width: inline_size, height: block_size },
WritingMode::Vertical => Size { width: block_size, height: inline_size },
}
}
200 changes: 200 additions & 0 deletions examples/custom_layout_tree_owned.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
mod common {
pub mod image;
pub mod text;
}
use common::image::{image_measure_function, ImageContext};
use common::text::{text_measure_function, FontMetrics, TextContext, WritingMode, LOREM_IPSUM};
use taffy::tree::{Cache, PartialLayoutTree};
use taffy::util::print_tree;
use taffy::{
compute_cached_layout, compute_flexbox_layout, compute_grid_layout, compute_layout, compute_leaf_layout,
prelude::*, round_layout,
};

#[derive(Debug, Copy, Clone)]
#[allow(dead_code)]
enum NodeKind {
Flexbox,
Grid,
Text,
Image,
}

struct Node {
kind: NodeKind,
style: Style,
text_data: Option<TextContext>,
image_data: Option<ImageContext>,
cache: Cache,
unrounded_layout: Layout,
final_layout: Layout,
children: Vec<Node>,
}

impl Default for Node {
fn default() -> Self {
Node {
kind: NodeKind::Flexbox,
style: Style::default(),
text_data: None,
image_data: None,
cache: Cache::new(),
unrounded_layout: Layout::with_order(0),
final_layout: Layout::with_order(0),
children: Vec::new(),
}
}
}

#[allow(dead_code)]
impl Node {
pub fn new_row(style: Style) -> Node {
Node {
kind: NodeKind::Flexbox,
style: Style { display: Display::Flex, flex_direction: FlexDirection::Row, ..style },
..Node::default()
}
}
pub fn new_column(style: Style) -> Node {
Node {
kind: NodeKind::Flexbox,
style: Style { display: Display::Flex, flex_direction: FlexDirection::Column, ..style },
..Node::default()
}
}
pub fn new_grid(style: Style) -> Node {
Node { kind: NodeKind::Grid, style: Style { display: Display::Grid, ..style }, ..Node::default() }
}
pub fn new_text(style: Style, text_data: TextContext) -> Node {
Node { kind: NodeKind::Text, style, text_data: Some(text_data), ..Node::default() }
}
pub fn new_image(style: Style, image_data: ImageContext) -> Node {
Node { kind: NodeKind::Image, style, image_data: Some(image_data), ..Node::default() }
}
pub fn append_child(&mut self, node: Node) {
self.children.push(node);
}

unsafe fn as_id(&self) -> NodeId {
NodeId::from(self as *const Node as usize)
}

pub fn compute_layout(&mut self, available_space: Size<AvailableSpace>, use_rounding: bool) {
let root_node_id = unsafe { self.as_id() };
compute_layout(&mut StatelessLayoutTree, root_node_id, available_space);
if use_rounding {
round_layout(&mut StatelessLayoutTree, root_node_id)
}
}

pub fn print_tree(&mut self) {
print_tree(&mut StatelessLayoutTree, unsafe { self.as_id() });
}
}

struct ChildIter<'a>(std::slice::Iter<'a, Node>);
impl<'a> Iterator for ChildIter<'a> {
type Item = NodeId;
fn next(&mut self) -> Option<Self::Item> {
self.0.next().map(|c| NodeId::from(c as *const Node as usize))
}
}

#[inline(always)]
unsafe fn node_from_id<'a>(node_id: NodeId) -> &'a Node {
&*(usize::from(node_id) as *const Node)
}

#[inline(always)]
unsafe fn node_from_id_mut<'a>(node_id: NodeId) -> &'a mut Node {
&mut *(usize::from(node_id) as *mut Node)
}

struct StatelessLayoutTree;
impl PartialLayoutTree for StatelessLayoutTree {
type ChildIter<'a> = ChildIter<'a>;

fn child_ids(&self, node_id: NodeId) -> Self::ChildIter<'_> {
unsafe { ChildIter(node_from_id(node_id).children.iter()) }
}

fn child_count(&self, node_id: NodeId) -> usize {
unsafe { node_from_id(node_id).children.len() }
}

fn get_child_id(&self, node_id: NodeId, index: usize) -> NodeId {
unsafe { node_from_id(node_id).children[index].as_id() }
}

fn get_style(&self, node_id: NodeId) -> &Style {
unsafe { &node_from_id(node_id).style }
}

fn get_unrounded_layout_mut(&mut self, node_id: NodeId) -> &mut Layout {
unsafe { &mut node_from_id_mut(node_id).unrounded_layout }
}

fn get_cache_mut(&mut self, node_id: NodeId) -> &mut Cache {
unsafe { &mut node_from_id_mut(node_id).cache }
}

fn compute_child_layout(&mut self, node_id: NodeId, inputs: taffy::tree::LayoutInput) -> taffy::tree::LayoutOutput {
compute_cached_layout(self, node_id, inputs, |tree, node_id, inputs| {
let node = unsafe { node_from_id_mut(node_id) };
let font_metrics = FontMetrics { char_width: 10.0, char_height: 10.0 };

match node.kind {
NodeKind::Flexbox => compute_flexbox_layout(tree, node_id, inputs),
NodeKind::Grid => compute_grid_layout(tree, node_id, inputs),
NodeKind::Text => compute_leaf_layout(
inputs,
&node.style,
Some(|known_dimensions, available_space| {
text_measure_function(
known_dimensions,
available_space,
node.text_data.as_ref().unwrap(),
&font_metrics,
)
}),
),
NodeKind::Image => compute_leaf_layout(
inputs,
&node.style,
Some(|known_dimensions, _available_space| {
image_measure_function(known_dimensions, node.image_data.as_ref().unwrap())
}),
),
}
})
}
}

impl LayoutTree for StatelessLayoutTree {
fn get_final_layout(&self, node_id: NodeId) -> &Layout {
unsafe { &node_from_id(node_id).final_layout }
}

fn get_final_layout_mut(&mut self, node_id: NodeId) -> &mut Layout {
unsafe { &mut node_from_id_mut(node_id).final_layout }
}
}

fn main() -> Result<(), taffy::TaffyError> {
let mut root = Node::new_column(Style::DEFAULT);

let text_node = Node::new_text(
Style::default(),
TextContext { text_content: LOREM_IPSUM.into(), writing_mode: WritingMode::Horizontal },
);
root.append_child(text_node);

let image_node = Node::new_image(Style::default(), ImageContext { width: 400.0, height: 300.0 });
root.append_child(image_node);

// Compute layout and print result
root.compute_layout(Size::MAX_CONTENT, true);
root.print_tree();

Ok(())
}
Loading

0 comments on commit d4374b9

Please sign in to comment.