From 1b4c4a65485b33a5ee041413d4190fd220947ee7 Mon Sep 17 00:00:00 2001 From: Shark Date: Sat, 7 Sep 2024 21:18:18 +0200 Subject: [PATCH] disable padding for inline elements, only inline-block elements get margin --- crates/gosub_styling/src/render_tree.rs | 39 +++++++++++++------ crates/gosub_taffy/src/compute/inline.rs | 34 +++++++++------- crates/gosub_taffy/src/lib.rs | 15 ++----- .../gosub_taffy/src/style/parse_properties.rs | 3 ++ 4 files changed, 52 insertions(+), 39 deletions(-) diff --git a/crates/gosub_styling/src/render_tree.rs b/crates/gosub_styling/src/render_tree.rs index 6a02d526c..3948ead85 100644 --- a/crates/gosub_styling/src/render_tree.rs +++ b/crates/gosub_styling/src/render_tree.rs @@ -18,6 +18,12 @@ use gosub_shared::types::Result; mod desc; +const INLINE_ELEMENTS: [&str; 31] = [ + "a", "abbr", "acronym", "b", "bdo", "big", "br", "button", "cite", "code", "dfn", "em", "i", + "img", "input", "kbd", "label", "map", "object", "q", "samp", "script", "select", "small", + "span", "strong", "sub", "sup", "textarea", "tt", "var", +]; + /// Map of all declared values for all nodes in the document #[derive(Debug)] pub struct RenderTree { @@ -720,23 +726,32 @@ impl RenderTreeNode { return true; } - let tag_name = self.name.to_lowercase(); + if let Some(d) = self.properties.get("display").and_then(|prop| { + let CssValue::String(val) = &prop.actual else { + return None; + }; - const INLINE_ELEMENTS: [&str; 31] = [ - "a", "abbr", "acronym", "b", "bdo", "big", "br", "button", "cite", "code", "dfn", "em", - "i", "img", "input", "kbd", "label", "map", "object", "q", "samp", "script", "select", - "small", "span", "strong", "sub", "sup", "textarea", "tt", "var", - ]; + // const NON_INLINE_DISPLAYS: [&str; 6] = ["block", "flex", "grid", "table", "list-item", "none"]; + // if NON_INLINE_DISPLAYS.contains(&val.as_str()) { + // return Some(false); + // } //TODO: somehow this causes problems with the inline elements + + if val == "inline" + || val == "inline-block" + || val == "inline-table" + || val == "inline-flex" + { + return Some(true); + } - if INLINE_ELEMENTS.contains(&tag_name.as_str()) { - return true; + None + }) { + return d; } - self.properties.get("display").map_or(false, |prop| { - let val = prop.compute_value().to_string(); + let tag_name = self.name.to_lowercase(); - val == "inline" || val == "inline-block" - }) + INLINE_ELEMENTS.contains(&tag_name.as_str()) } } diff --git a/crates/gosub_taffy/src/compute/inline.rs b/crates/gosub_taffy/src/compute/inline.rs index 91908e859..4de4171e0 100644 --- a/crates/gosub_taffy/src/compute/inline.rs +++ b/crates/gosub_taffy/src/compute/inline.rs @@ -5,7 +5,7 @@ use taffy::{ }; use crate::text::{Font, TextLayout}; -use crate::{LayoutDocument, TaffyLayouter}; +use crate::{Display, LayoutDocument, TaffyLayouter}; use gosub_render_backend::geo; use gosub_render_backend::layout::{CssProperty, HasTextLayout, LayoutTree, Node}; use gosub_typeface::font::Glyph; @@ -93,16 +93,31 @@ pub fn compute_inline_layout>( id: node_id, }); } else { - if u64::from(node_id) == 162u64 { + if u64::from(node_id) == 477u64 { println!("inline_box : {:?}", node_id); } let out = tree.compute_child_layout(node_id, layout_input); + + tree.update_style(*child); + + let size = if let Some(cache) = tree.0.get_cache(*child) { + if cache.display == Display::InlineBlock { + //TODO: handle margins here + + out.size + } else { + out.content_size + } + } else { + out.content_size + }; + inline_boxes.push(InlineBox { id: node_id.into(), index: str_buf.len(), - height: out.size.height, //TODO: handle inline-block => add margin & padding - width: out.size.width, + height: size.height, + width: size.width, }); } } @@ -214,17 +229,6 @@ pub fn compute_inline_layout>( layout.align(max_width, align); - if nod_id.into() == 989 { - for line in layout.lines() { - println!("advance: {:?}", line.metrics().advance); - - let t_range = line.text_range(); - - println!("text: {:?}", &str_buf[t_range.clone()]); - println!("full metrics: {:?}", line.metrics()); - } - } - // // for (child, out) in children.into_iter().zip(outputs.into_iter()) { diff --git a/crates/gosub_taffy/src/lib.rs b/crates/gosub_taffy/src/lib.rs index 5c546be35..453c5663c 100644 --- a/crates/gosub_taffy/src/lib.rs +++ b/crates/gosub_taffy/src/lib.rs @@ -70,7 +70,9 @@ pub struct TaffyLayouter; #[derive(Debug, Default, Clone, Copy, PartialEq, Eq)] #[allow(unused)] pub enum Display { - Text, + Inline, + InlineBlock, + Table, #[default] Taffy, } @@ -243,17 +245,6 @@ impl> LayoutPartialTree for LayoutDocument<'_, LT> } } - if let Some(cache) = tree.0.get_cache(node_id) { - match cache.display { - Display::Text => { - // We should implement a new way of layouting text. Currently, we just measure how long the text is and don't insert any linebreaks, - // which is obviously not correct. So, if we encounter Display::Text, we need to ask our text-layouter and tell him how much space we have, and it will insert linebreaks - todo!() - } - Display::Taffy => {} - } - } - let has_children = tree.0.child_count(node_id) > 0; //TODO: this isn't optimal, since we are now requesting the same node twice (up in get_cache and here) let style = tree.get_taffy_style(node_id); diff --git a/crates/gosub_taffy/src/style/parse_properties.rs b/crates/gosub_taffy/src/style/parse_properties.rs index f2371f63a..37a9aadc5 100644 --- a/crates/gosub_taffy/src/style/parse_properties.rs +++ b/crates/gosub_taffy/src/style/parse_properties.rs @@ -25,6 +25,9 @@ pub fn parse_display(node: &mut impl Node) -> (Display, crate::Display) { "block" => (Display::Block, crate::Display::Taffy), "flex" => (Display::Flex, crate::Display::Taffy), "grid" => (Display::Grid, crate::Display::Taffy), + "inline-block" => (Display::Block, crate::Display::InlineBlock), + "inline" => (Display::Block, crate::Display::Inline), + "table" => (Display::Block, crate::Display::Table), _ => (Display::Block, crate::Display::Taffy), } }