INotFail/Glint-Runtime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo: layout fixes, sticky removal, style overrides, css-like rendering improvements

Browse Source
This commit is contained in:
Glint Dev
2026-07-24 16:46:00 +03:00
parent 415de4d6e6
commit 32beb81ac4
8 changed files with 289 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/renderer.rs
View File

@@ -1,6 +1,6 @@
use crate::Message;
use crate::interpreter::Element;
use crate::interpreter::style::{ComputedStyle, ContentAlign, Display, LayoutDirection, Position, Overflow, StructuralContext, StyleSheet, TextAlign};
use crate::interpreter::style::{ComputedStyle, ContentAlign, Display, LayoutDirection, Position, Overflow, StructuralContext, StyleSheet, TextAlign, resolve_size};
use iced::widget::container::Style as ContainerStyle;
use iced::widget::{
button, checkbox, column, container, image, progress_bar, row, scrollable, slider, svg, text,
@@ -116,8 +116,8 @@ fn make_hoverable<'a>(
background: style_cs.background.map(Background::Color),
border: Border {
color: style_cs.border_color.unwrap_or(iced::Color::TRANSPARENT),
width: style_cs.border_width.unwrap_or(0.0),
radius: style_cs.border_radius.unwrap_or(0.0).into(),
width: resolve_size(style_cs.border_width, None).unwrap_or(0.0),
radius: resolve_size(style_cs.border_radius, None).unwrap_or(0.0).into(),
},
text_color: style_cs.color.unwrap_or(iced::Color::WHITE),
..Default::default()
@@ -134,6 +134,8 @@ fn render_children<'a>(
fixed_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
abs_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
sticky_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
scroll_positions: &HashMap<u64, f32>,
container_id: u64,
stylesheet: &StyleSheet,
) -> Vec<iced::Element<'a, Message, Theme, iced::Renderer>> {
children
@@ -147,6 +149,8 @@ fn render_children<'a>(
fixed_layers,
abs_layers,
sticky_layers,
scroll_positions,
container_id,
stylesheet,
)
})
@@ -154,13 +158,13 @@ fn render_children<'a>(
}
fn get_padding(cs: &ComputedStyle, default_pad: f32) -> iced::Padding {
let base = cs.padding.unwrap_or(default_pad);
let mut top = cs.padding_top.unwrap_or(base);
let mut right = cs.padding_right.unwrap_or(base);
let mut bottom = cs.padding_bottom.unwrap_or(base);
let mut left = cs.padding_left.unwrap_or(base);
let base = resolve_size(cs.padding, None).unwrap_or(default_pad);
let mut top = resolve_size(cs.padding_top, None).unwrap_or(base);
let mut right = resolve_size(cs.padding_right, None).unwrap_or(base);
let mut bottom = resolve_size(cs.padding_bottom, None).unwrap_or(base);
let mut left = resolve_size(cs.padding_left, None).unwrap_or(base);
let bwidth = cs.border_width.unwrap_or(0.0);
let bwidth = resolve_size(cs.border_width, None).unwrap_or(0.0);
if let Some(iced::Length::Fixed(w)) = cs.width {
let total_h = left + right + bwidth * 2.0;
@@ -189,12 +193,12 @@ fn get_padding(cs: &ComputedStyle, default_pad: f32) -> iced::Padding {
}
fn get_margin(cs: &ComputedStyle) -> iced::Padding {
let base = cs.margin.unwrap_or(0.0);
let base = resolve_size(cs.margin, None).unwrap_or(0.0);
iced::Padding {
top: cs.margin_top.unwrap_or(base),
right: cs.margin_right.unwrap_or(base),
bottom: cs.margin_bottom.unwrap_or(base),
left: cs.margin_left.unwrap_or(base),
top: resolve_size(cs.margin_top, None).unwrap_or(base),
right: resolve_size(cs.margin_right, None).unwrap_or(base),
bottom: resolve_size(cs.margin_bottom, None).unwrap_or(base),
left: resolve_size(cs.margin_left, None).unwrap_or(base),
}
}
@@ -223,8 +227,8 @@ fn get_button_style(cs: &ComputedStyle, status: button::Status) -> button::Style
background: Some(Background::Color(bg_color)),
border: Border {
color: cs.border_color.unwrap_or(iced::Color::TRANSPARENT),
width: cs.border_width.unwrap_or(0.0),
radius: cs.border_radius.unwrap_or(0.0).into(),
width: resolve_size(cs.border_width, None).unwrap_or(0.0),
radius: resolve_size(cs.border_radius, None).unwrap_or(0.0).into(),
},
text_color: cs.color.unwrap_or(iced::Color::WHITE),
..Default::default()
@@ -241,8 +245,8 @@ fn get_text_input_style(cs: &ComputedStyle) -> text_input::Style {
color: cs
.border_color
.unwrap_or(iced::Color::from_rgb(0.25, 0.25, 0.3)),
width: cs.border_width.unwrap_or(1.0),
radius: cs.border_radius.unwrap_or(0.0).into(),
width: resolve_size(cs.border_width, None).unwrap_or(1.0),
radius: resolve_size(cs.border_radius, None).unwrap_or(0.0).into(),
},
icon: iced::Color::from_rgb(0.5, 0.5, 0.5),
placeholder: iced::Color::from_rgb(0.4, 0.4, 0.45),
@@ -251,16 +255,39 @@ fn get_text_input_style(cs: &ComputedStyle) -> text_input::Style {
}
}
fn estimate_element_height(cs: &ComputedStyle) -> f32 {
let pad_top = resolve_size(cs.padding_top.or(cs.padding), None).unwrap_or(0.0);
let pad_bottom = resolve_size(cs.padding_bottom.or(cs.padding), None).unwrap_or(0.0);
let bwidth = resolve_size(cs.border_width, None).unwrap_or(0.0);
let font_size = resolve_size(cs.font_size, None).unwrap_or(16.0);
let line_height = resolve_size(cs.line_height, None).unwrap_or(1.2);
pad_top + pad_bottom + bwidth * 2.0 + font_size * line_height
}
fn wrap_sticky_position<'a>(
widget: iced::Element<'a, Message, Theme, iced::Renderer>,
cs: &ComputedStyle,
) -> iced::Element<'a, Message, Theme, iced::Renderer> {
let top = resolve_size(cs.top, None).unwrap_or(0.0);
container(widget)
.width(Length::Fill)
.padding(iced::Padding {
top,
..Default::default()
})
.into()
}
fn wrap_fixed_position<'a>(
widget: iced::Element<'a, Message, Theme, iced::Renderer>,
cs: &ComputedStyle,
) -> iced::Element<'a, Message, Theme, iced::Renderer> {
use iced::alignment::{Horizontal, Vertical};
let top = cs.top.unwrap_or(0.0);
let left = cs.left.unwrap_or(0.0);
let right = cs.right.unwrap_or(0.0);
let bottom = cs.bottom.unwrap_or(0.0);
let top = resolve_size(cs.top, None).unwrap_or(0.0);
let left = resolve_size(cs.left, None).unwrap_or(0.0);
let right = resolve_size(cs.right, None).unwrap_or(0.0);
let bottom = resolve_size(cs.bottom, None).unwrap_or(0.0);
let has_top = cs.top.is_some();
let has_bottom = cs.bottom.is_some();
@@ -300,10 +327,11 @@ fn apply_universal_box_model<'a>(
cs: &ComputedStyle,
is_window: bool,
default_padding: f32,
scrollable_id: Option<u64>,
) -> iced::Element<'a, Message, Theme, iced::Renderer> {
let bg = cs.background;
let radius = cs.border_radius.unwrap_or(0.0);
let bwidth = cs.border_width.unwrap_or(0.0);
let radius = resolve_size(cs.border_radius, None).unwrap_or(0.0);
let bwidth = resolve_size(cs.border_width, None).unwrap_or(0.0);
let bcolor = cs.border_color.unwrap_or_else(|| {
if bwidth > 0.0 {
@@ -349,6 +377,10 @@ fn apply_universal_box_model<'a>(
s = s.height(Length::Fill);
}
if let Some(sid) = scrollable_id {
s = s.on_scroll(move |viewport| Message::ScrollableScrolled(sid, viewport.absolute_offset().y));
}
s.into()
} else {
padded_content.into()
@@ -386,10 +418,10 @@ fn apply_universal_box_model<'a>(
if let Some(h) = cs.height {
inner = inner.height(h);
}
if let Some(max_w) = cs.max_width {
if let Some(max_w) = resolve_size(cs.max_width, None) {
inner = inner.max_width(max_w);
}
if let Some(max_h) = cs.max_height {
if let Some(max_h) = resolve_size(cs.max_height, None) {
inner = inner.max_height(max_h);
}
@@ -439,6 +471,8 @@ pub fn render_element<'a>(
fixed_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
abs_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
sticky_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
scroll_positions: &HashMap<u64, f32>,
container_id: u64,
stylesheet: &StyleSheet,
) -> Option<iced::Element<'a, Message, Theme, iced::Renderer>> {
let mut cs = el.computed_style;
@@ -472,13 +506,13 @@ pub fn render_element<'a>(
}
let current_color = cs.color.or(parent_color);
let current_font_size = cs.font_size.or(parent_font_size);
let current_font_size = resolve_size(cs.font_size, parent_font_size).or(parent_font_size);
if el.type_name == "Window" {
let spacing = cs.spacing.unwrap_or(12.0);
let spacing = resolve_size(cs.spacing, None).unwrap_or(12.0);
let mut col = column![].spacing(spacing).width(Length::Fill);
if let Some(h) = cs.height { col = col.height(h); }
let window_id = el.element_id.0 as u64;
let mut window_fixed_layers = Vec::new();
let mut window_abs_layers = Vec::new();
let mut window_sticky_layers = Vec::new();
@@ -491,20 +525,14 @@ pub fn render_element<'a>(
&mut window_fixed_layers,
&mut window_abs_layers,
&mut window_sticky_layers,
scroll_positions,
window_id,
stylesheet,
) {
col = col.push(child);
}
let main_flow = apply_universal_box_model(col, &cs, true, 0.0);
let has_abs = !window_abs_layers.is_empty();
let has_fixed = !window_fixed_layers.is_empty();
let has_sticky = !window_sticky_layers.is_empty();
if !has_abs && !has_fixed && !has_sticky {
return Some(main_flow);
}
let main_flow = apply_universal_box_model(col, &cs, true, 0.0, Some(window_id));
let mut stack_widget = iced::widget::stack![main_flow];
for layer in window_abs_layers {
@@ -532,6 +560,8 @@ pub fn render_element<'a>(
fixed_layers,
&mut panel_abs,
&mut panel_sticky,
scroll_positions,
container_id,
stylesheet,
);
if panel_abs.is_empty() {
@@ -554,6 +584,8 @@ pub fn render_element<'a>(
fixed_layers,
&mut btn_abs,
&mut btn_sticky,
scroll_positions,
container_id,
stylesheet,
);
if btn_abs.is_empty() && btn_sticky.is_empty() {
@@ -592,7 +624,7 @@ let element_opt: Option<iced::Element<'a, Message, Theme, iced::Renderer>> =
widget = widget.align_x(iced::alignment::Horizontal::from(ta));
widget = widget.width(Length::Fill);
}
if let Some(lh) = cs.line_height {
if let Some(lh) = resolve_size(cs.line_height, current_font_size) {
widget = widget.line_height(lh);
widget = widget.width(Length::Fill);
widget = widget.wrapping(Wrapping::Word);
@@ -617,7 +649,7 @@ let element_opt: Option<iced::Element<'a, Message, Theme, iced::Renderer>> =
widget = widget.align_x(iced::alignment::Horizontal::from(ta));
widget = widget.width(Length::Fill);
}
if let Some(lh) = cs.line_height {
if let Some(lh) = resolve_size(cs.line_height, current_font_size) {
widget = widget.line_height(lh);
widget = widget.width(Length::Fill);
widget = widget.wrapping(Wrapping::Word);
@@ -628,9 +660,9 @@ let element_opt: Option<iced::Element<'a, Message, Theme, iced::Renderer>> =
"Image" => {
let src = el.get_prop("src").unwrap_or("");
let path = src.strip_prefix("fs:").unwrap_or(src);
let radius = cs.border_radius.unwrap_or(0.0);
let radius = resolve_size(cs.border_radius, None).unwrap_or(0.0);
let padding = get_padding(&cs, 0.0);
let bwidth = cs.border_width.unwrap_or(0.0);
let bwidth = resolve_size(cs.border_width, None).unwrap_or(0.0);
let content_w = cs.width.map(|len| {
if let iced::Length::Fixed(w) = len {
@@ -713,7 +745,7 @@ let element_opt: Option<iced::Element<'a, Message, Theme, iced::Renderer>> =
if el.children.is_empty() {
None
} else {
let spacing = cs.spacing.unwrap_or(10.0);
let spacing = resolve_size(cs.spacing, None).unwrap_or(10.0);
let mut col = column![].spacing(spacing);
let mut default_abs = Vec::new();
let mut default_sticky = Vec::new();
@@ -725,6 +757,8 @@ let element_opt: Option<iced::Element<'a, Message, Theme, iced::Renderer>> =
fixed_layers,
&mut default_abs,
&mut default_sticky,
scroll_positions,
container_id,
stylesheet,
) {
col = col.push(child);
@@ -740,24 +774,23 @@ let element_opt: Option<iced::Element<'a, Message, Theme, iced::Renderer>> =
}
stack.into()
};
let boxed = apply_universal_box_model(content_widget, &cs, false, 0.0);
// Sticky outside (after box model = outside scrollable)
if default_sticky.is_empty() {
final_widget_opt = Some(boxed);
} else {
let mut stack = iced::widget::stack![boxed];
for layer in default_sticky {
stack = stack.push(layer);
}
final_widget_opt = Some(stack.into());
let is_scrollable = cs.overflow_y.map(|o| o == Overflow::Scroll || o == Overflow::Auto).unwrap_or(false);
let sc_id: Option<u64> = if is_scrollable { Some(el.element_id.0 as u64) } else { None };
let boxed = apply_universal_box_model(content_widget, &cs, false, 0.0, sc_id);
let mut stack = iced::widget::stack![boxed];
for layer in default_sticky {
stack = stack.push(layer);
}
final_widget_opt = Some(stack.into());
None
}
}
};
if let Some(element) = element_opt {
final_widget_opt = Some(apply_universal_box_model(element, &cs, false, 0.0));
let is_scrollable = cs.overflow_y.map(|o| o == Overflow::Scroll || o == Overflow::Auto).unwrap_or(false);
let sc_id: Option<u64> = if is_scrollable { Some(el.element_id.0 as u64) } else { None };
final_widget_opt = Some(apply_universal_box_model(element, &cs, false, 0.0, sc_id));
}
}
@@ -778,9 +811,21 @@ let element_opt: Option<iced::Element<'a, Message, Theme, iced::Renderer>> =
abs_layers.push(wrapped);
None
} else if is_sticky {
let wrapped = wrap_fixed_position(final_widget, &cs);
sticky_layers.push(wrapped);
None
let threshold = resolve_size(cs.top, None).unwrap_or(0.0);
let scroll_y = scroll_positions.get(&container_id).copied().unwrap_or(0.0);
if scroll_y > threshold {
let wrapped = wrap_sticky_position(final_widget, &cs);
sticky_layers.push(wrapped);
let spacer_h = estimate_element_height(&cs);
let spacer: iced::Element<'a, Message, Theme, iced::Renderer> =
container(iced::widget::text(""))
.width(Length::Fill)
.height(Length::Fixed(spacer_h))
.into();
Some(spacer)
} else {
Some(final_widget)
}
} else {
Some(final_widget)
}
@@ -797,9 +842,11 @@ fn render_panel<'a>(
fixed_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
abs_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
sticky_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
scroll_positions: &HashMap<u64, f32>,
container_id: u64,
stylesheet: &StyleSheet,
) -> iced::Element<'a, Message, Theme, iced::Renderer> {
let spacing = cs.spacing.unwrap_or(10.0);
let spacing = resolve_size(cs.spacing, None).unwrap_or(10.0);
let is_horizontal = el.children.iter().all(|c| {
matches!(
@@ -814,6 +861,10 @@ let is_horizontal = el.children.iter().all(|c| {
LayoutDirection::Column
});
let is_scrollable = cs.overflow_y.map(|o| o == Overflow::Scroll || o == Overflow::Auto).unwrap_or(false);
let child_container: u64 = if is_scrollable { el.element_id.0 as u64 } else { container_id };
let sc_id: Option<u64> = if is_scrollable { Some(el.element_id.0 as u64) } else { None };
let content: iced::Element<'a, Message, Theme, iced::Renderer> = match direction {
LayoutDirection::Row => {
let mut r = row![].spacing(spacing);
@@ -830,6 +881,8 @@ let is_horizontal = el.children.iter().all(|c| {
fixed_layers,
abs_layers,
sticky_layers,
scroll_positions,
child_container,
stylesheet,
) {
r = r.push(child);
@@ -858,6 +911,8 @@ let is_horizontal = el.children.iter().all(|c| {
fixed_layers,
abs_layers,
sticky_layers,
scroll_positions,
child_container,
stylesheet,
) {
c = c.push(child);
@@ -897,6 +952,8 @@ let is_horizontal = el.children.iter().all(|c| {
fixed_layers,
&mut chunk_abs,
&mut chunk_sticky,
scroll_positions,
child_container,
stylesheet,
) {
r = r.push(child);
@@ -918,18 +975,14 @@ let is_horizontal = el.children.iter().all(|c| {
}
};
let boxed = apply_universal_box_model(content, &cs, false, 5.0);
let boxed = apply_universal_box_model(content, &cs, false, 5.0, sc_id);
if sticky_layers.is_empty() {
boxed
} else {
let layers = std::mem::take(sticky_layers);
let mut stack = iced::widget::stack![boxed];
for layer in layers {
stack = stack.push(layer);
}
stack.into()
let layers = std::mem::take(sticky_layers);
let mut stack = iced::widget::stack![boxed];
for layer in layers {
stack = stack.push(layer);
}
stack.into()
}
fn render_button<'a>(
@@ -940,6 +993,8 @@ fn render_button<'a>(
fixed_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
abs_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
sticky_layers: &mut Vec<iced::Element<'a, Message, Theme, iced::Renderer>>,
scroll_positions: &HashMap<u64, f32>,
container_id: u64,
stylesheet: &StyleSheet,
) -> iced::Element<'a, Message, Theme, iced::Renderer> {
let final_color = cs.color.or(parent_color);
@@ -961,6 +1016,8 @@ fn render_button<'a>(
fixed_layers,
abs_layers,
sticky_layers,
scroll_positions,
container_id,
stylesheet,
) {
r = r.push(child);
@@ -979,20 +1036,15 @@ fn render_button<'a>(
}
};
let base_px = resolve_size(cs.padding, None).unwrap_or(8.0);
let mut padding = iced::Padding {
top: cs.padding_top.or(cs.padding).unwrap_or(8.0),
bottom: cs.padding_bottom.or(cs.padding).unwrap_or(8.0),
left: cs
.padding_left
.or_else(|| cs.padding.map(|p| p * 2.0))
.unwrap_or(16.0),
right: cs
.padding_right
.or_else(|| cs.padding.map(|p| p * 2.0))
.unwrap_or(16.0),
top: resolve_size(cs.padding_top, None).unwrap_or(base_px),
bottom: resolve_size(cs.padding_bottom, None).unwrap_or(base_px),
left: resolve_size(cs.padding_left, None).unwrap_or(base_px * 2.0),
right: resolve_size(cs.padding_right, None).unwrap_or(base_px * 2.0),
};
let bwidth = cs.border_width.unwrap_or(0.0);
let bwidth = resolve_size(cs.border_width, None).unwrap_or(0.0);
if let Some(iced::Length::Fixed(w)) = cs.width {
let total_h = padding.left + padding.right + bwidth * 2.0;
if total_h > w && w > 0.0 {