From 9c36ea4d9e6243315405e250039e9ef5921e4c91 Mon Sep 17 00:00:00 2001 From: Dongdong Zhou Date: Wed, 27 Sep 2023 20:34:42 +0100 Subject: [PATCH 1/3] fix keyup event listner --- src/event.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/event.rs b/src/event.rs index a39b4326..c60b0a3e 100644 --- a/src/event.rs +++ b/src/event.rs @@ -246,7 +246,7 @@ impl Event { Event::PointerMove(_) => Some(EventListener::PointerMove), Event::PointerWheel(_) => Some(EventListener::PointerWheel), Event::KeyDown(_) => Some(EventListener::KeyDown), - Event::KeyUp(_) => Some(EventListener::KeyDown), + Event::KeyUp(_) => Some(EventListener::KeyUp), Event::ImeEnabled => Some(EventListener::ImeEnabled), Event::ImeDisabled => Some(EventListener::ImeDisabled), Event::ImePreedit { .. } => Some(EventListener::ImePreedit), From 211ad53f267e4e3fb7fb884784b5a106982c2960 Mon Sep 17 00:00:00 2001 From: Manuel Adameit <40381850+maun@users.noreply.github.com> Date: Wed, 27 Sep 2023 21:37:51 +0200 Subject: [PATCH 2/3] Use newtypes for units Px, Pct, and Auto (#112) * Use newtypes for Px, Pct, and Auto * Add import for linux * Correct margin parameter type * Correct parameters --- examples/animations/src/main.rs | 10 +- examples/counter/src/main.rs | 15 +- examples/draggable/src/main.rs | 4 +- examples/responsive/src/main.rs | 11 +- examples/virtual_list/src/main.rs | 9 +- examples/widget-gallery/src/buttons.rs | 10 +- examples/widget-gallery/src/context_menu.rs | 4 +- examples/widget-gallery/src/form.rs | 17 +- examples/widget-gallery/src/inputs.rs | 6 +- examples/widget-gallery/src/labels.rs | 2 +- examples/widget-gallery/src/lists.rs | 25 +- examples/widget-gallery/src/main.rs | 29 +- examples/window-scale/src/main.rs | 35 +- src/context.rs | 4 +- src/lib.rs | 7 +- src/style.rs | 562 +++++++++----------- src/unit.rs | 134 +++++ src/view.rs | 60 +-- src/views/clip.rs | 4 +- src/views/dyn_container.rs | 2 +- src/views/label.rs | 15 +- src/views/rich_text.rs | 15 +- src/views/scroll.rs | 34 +- src/views/svg.rs | 6 +- src/views/text_input.rs | 18 +- src/window_handle.rs | 48 +- 26 files changed, 568 insertions(+), 518 deletions(-) create mode 100644 src/unit.rs diff --git a/examples/animations/src/main.rs b/examples/animations/src/main.rs index 0edd83d6..07eb64c0 100644 --- a/examples/animations/src/main.rs +++ b/examples/animations/src/main.rs @@ -31,9 +31,9 @@ fn app_view() -> impl View { s.border(1.0) .background(Color::RED) .color(Color::BLACK) - .padding_px(10.0) - .margin_px(20.0) - .size_px(120.0, 120.0) + .padding(10.0) + .margin(20.0) + .size(120.0, 120.0) }) .active_style(|s| s.color(Color::BLACK)) .animation( @@ -56,8 +56,8 @@ fn app_view() -> impl View { .style(|s| { s.border(5.0) .background(Color::BLUE) - .padding_px(10.0) - .size_px(400.0, 400.0) + .padding(10.0) + .size(400.0, 400.0) .color(Color::BLACK) }) .animation( diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs index fa9d9c02..cf1dcf9d 100644 --- a/examples/counter/src/main.rs +++ b/examples/counter/src/main.rs @@ -1,6 +1,7 @@ use floem::{ peniko::Color, reactive::create_signal, + unit::UnitExt, view::View, views::{label, stack, text, Decorators}, }; @@ -8,12 +9,12 @@ use floem::{ fn app_view() -> impl View { let (counter, set_counter) = create_signal(0); stack(( - label(move || format!("Value: {}", counter.get())).style(|s| s.padding_px(10.0)), + label(move || format!("Value: {}", counter.get())).style(|s| s.padding(10.0)), stack(( text("Increment") .style(|s| { s.border_radius(10.0) - .padding_px(10.0) + .padding(10.0) .background(Color::WHITE) .box_shadow_blur(5.0) }) @@ -38,8 +39,8 @@ fn app_view() -> impl View { s.box_shadow_blur(5.0) .background(Color::WHITE) .border_radius(10.0) - .padding_px(10.0) - .margin_left_px(10.0) + .padding(10.0) + .margin_left(10.0) }) .hover_style(|s| s.background(Color::rgb8(244, 67, 54))) .active_style(|s| s.color(Color::WHITE).background(Color::RED)) @@ -55,8 +56,8 @@ fn app_view() -> impl View { .style(|s| { s.box_shadow_blur(5.0) .border_radius(10.0) - .padding_px(10.0) - .margin_left_px(10.0) + .padding(10.0) + .margin_left(10.0) .background(Color::LIGHT_BLUE) }) .disabled_style(|s| s.background(Color::LIGHT_GRAY)) @@ -67,7 +68,7 @@ fn app_view() -> impl View { )), )) .style(|s| { - s.size_pct(100.0, 100.0) + s.size(100.pct(), 100.pct()) .flex_col() .items_center() .justify_center() diff --git a/examples/draggable/src/main.rs b/examples/draggable/src/main.rs index f4031651..edd7c9e0 100644 --- a/examples/draggable/src/main.rs +++ b/examples/draggable/src/main.rs @@ -9,8 +9,8 @@ fn app_view() -> impl View { .style(|s| { s.border(1.0) .border_radius(2.0) - .padding_px(10.0) - .margin_left_px(10.0) + .padding(10.0) + .margin_left(10.0) }) .hover_style(|s| { s.background(Color::rgb8(244, 67, 54)) diff --git a/examples/responsive/src/main.rs b/examples/responsive/src/main.rs index e0fd768d..5f549c0a 100644 --- a/examples/responsive/src/main.rs +++ b/examples/responsive/src/main.rs @@ -1,6 +1,7 @@ use floem::{ peniko::Color, responsive::{range, ScreenSize}, + unit::UnitExt, view::View, views::{label, stack, Decorators}, }; @@ -11,8 +12,8 @@ fn app_view() -> impl View { .style(|s| { s.border(1.0) .border_radius(10.0) - .padding_px(10.0) - .margin_horiz_px(10.0) + .padding(10.0) + .margin_horiz(10.0) }) .responsive_style(ScreenSize::XS, |s| s.background(Color::CYAN)) .responsive_style(ScreenSize::SM, |s| s.background(Color::PURPLE)) @@ -21,16 +22,16 @@ fn app_view() -> impl View { .responsive_style(ScreenSize::XL, |s| s.background(Color::PINK)) .responsive_style(ScreenSize::XXL, |s| s.background(Color::RED)) .responsive_style(range(ScreenSize::XS..ScreenSize::LG), |s| { - s.width_pct(90.0).max_width_px(500.0) + s.width(90.0.pct()).max_width(500.0) }) .responsive_style( // equivalent to: range(ScreenSize::LG..) ScreenSize::LG | ScreenSize::XL | ScreenSize::XXL, - |s| s.width_px(300.0), + |s| s.width(300.0), ),) }) .style(|s| { - s.size_pct(100.0, 100.0) + s.size(100.pct(), 100.pct()) .flex_col() .justify_center() .items_center() diff --git a/examples/virtual_list/src/main.rs b/examples/virtual_list/src/main.rs index f49a2ded..31d96696 100644 --- a/examples/virtual_list/src/main.rs +++ b/examples/virtual_list/src/main.rs @@ -1,5 +1,6 @@ use floem::{ reactive::create_signal, + unit::UnitExt, view::View, views::virtual_list, views::Decorators, @@ -17,15 +18,15 @@ fn app_view() -> impl View { VirtualListItemSize::Fixed(Box::new(|| 20.0)), move || long_list.get(), move |item| *item, - move |item| label(move || item.to_string()).style(|s| s.height_px(20.0)), + move |item| label(move || item.to_string()).style(|s| s.height(20.0)), ) .style(|s| s.flex_col()), ) - .style(|s| s.width_px(100.0).height_pct(100.0).border(1.0)), + .style(|s| s.width(100.0).height(100.pct()).border(1.0)), ) .style(|s| { - s.size_pct(100.0, 100.0) - .padding_vert_px(20.0) + s.size(100.pct(), 100.pct()) + .padding_vert(20.0) .flex_col() .items_center() }) diff --git a/examples/widget-gallery/src/buttons.rs b/examples/widget-gallery/src/buttons.rs index 9aaa298f..953f04fb 100644 --- a/examples/widget-gallery/src/buttons.rs +++ b/examples/widget-gallery/src/buttons.rs @@ -18,7 +18,7 @@ pub fn button_view() -> impl View { }) .keyboard_navigatable() .focus_visible_style(|s| s.border(2.).border_color(Color::BLUE)) - .style(|s| s.border(1.0).border_radius(10.0).padding_px(10.0)) + .style(|s| s.border(1.0).border_radius(10.0).padding(10.0)) }), form_item("Styled Button:".to_string(), 120.0, || { label(|| "Click me") @@ -31,8 +31,8 @@ pub fn button_view() -> impl View { .style(|s| { s.border(1.0) .border_radius(10.0) - .padding_px(10.0) - .margin_left_px(10.0) + .padding(10.0) + .margin_left(10.0) .background(Color::YELLOW_GREEN) .color(Color::DARK_GREEN) .cursor(CursorStyle::Pointer) @@ -52,7 +52,7 @@ pub fn button_view() -> impl View { .style(|s| { s.border(1.0) .border_radius(10.0) - .padding_px(10.0) + .padding(10.0) .color(Color::GRAY) }) .hover_style(|s| s.background(Color::rgb8(224, 224, 224))) @@ -65,7 +65,7 @@ pub fn button_view() -> impl View { }) .keyboard_navigatable() .focus_visible_style(|s| s.border(2.).border_color(Color::BLUE)) - .style(|s| s.border(1.0).border_radius(10.0).padding_px(10.0)) + .style(|s| s.border(1.0).border_radius(10.0).padding(10.0)) }), ) }) diff --git a/examples/widget-gallery/src/context_menu.rs b/examples/widget-gallery/src/context_menu.rs index 5d0b7f70..0fc182d2 100644 --- a/examples/widget-gallery/src/context_menu.rs +++ b/examples/widget-gallery/src/context_menu.rs @@ -8,7 +8,7 @@ pub fn menu_view() -> impl View { stack({ ( label(|| "Click me (Popout menu)") - .base_style(|s| s.padding_px(10.0).margin_bottom_px(10.0).border(1.0)) + .base_style(|s| s.padding(10.0).margin_bottom(10.0).border(1.0)) .popout_menu(|| { Menu::new("") .entry(MenuItem::new("I am a menu item!")) @@ -16,7 +16,7 @@ pub fn menu_view() -> impl View { .entry(MenuItem::new("I am another menu item")) }), label(|| "Right click me (Context menu)") - .base_style(|s| s.padding_px(10.0).border(1.0)) + .base_style(|s| s.padding(10.0).border(1.0)) .context_menu(|| { Menu::new("") .entry(MenuItem::new("Menu item")) diff --git a/examples/widget-gallery/src/form.rs b/examples/widget-gallery/src/form.rs index 96fd96ae..8be57b55 100644 --- a/examples/widget-gallery/src/form.rs +++ b/examples/widget-gallery/src/form.rs @@ -1,5 +1,6 @@ use floem::{ cosmic_text::Weight, + unit::UnitExt, view::View, view_tuple::ViewTuple, views::{container, label, stack, Decorators}, @@ -9,9 +10,9 @@ pub fn form(children: VT) -> impl View { stack(children).style(|s| { s.flex_col() .items_start() - .margin_px(10.0) - .padding_px(10.0) - .width_pct(100.0) + .margin(10.0) + .padding(10.0) + .width(100.pct()) }) } @@ -23,7 +24,7 @@ pub fn form_item( container( stack(( container(label(move || item_label.clone()).style(|s| s.font_weight(Weight::BOLD))) - .style(move |s| s.width_px(label_width).justify_end().margin_right_px(10.0)), + .style(move |s| s.width(label_width).justify_end().margin_right(10.0)), view_fn(), )) .style(|s| s.flex_row().items_start()), @@ -31,9 +32,9 @@ pub fn form_item( .style(|s| { s.flex_row() .items_center() - .margin_bottom_px(10.0) - .padding_px(10.0) - .width_pct(100.0) - .min_height_px(32.0) + .margin_bottom(10.0) + .padding(10.0) + .width(100.pct()) + .min_height(32.0) }) } diff --git a/examples/widget-gallery/src/inputs.rs b/examples/widget-gallery/src/inputs.rs index cfb4a4a8..f12beaec 100644 --- a/examples/widget-gallery/src/inputs.rs +++ b/examples/widget-gallery/src/inputs.rs @@ -15,7 +15,7 @@ pub fn text_input_view() -> impl View { ( form_item("Simple Input:".to_string(), 120.0, move || { text_input(text) - .style(|s| s.border(1.0).height_px(32.0)) + .style(|s| s.border(1.0).height(32.0)) .keyboard_navigatable() }), form_item("Styled Input:".to_string(), 120.0, move || { @@ -25,7 +25,7 @@ pub fn text_input_view() -> impl View { .background(Color::rgb8(224, 224, 224)) .border_radius(15.0) .border_color(Color::rgb8(189, 189, 189)) - .padding_px(10.0) + .padding(10.0) .cursor(CursorStyle::Text) }) .hover_style(|s| s.border_color(Color::rgb8(66, 66, 66))) @@ -39,7 +39,7 @@ pub fn text_input_view() -> impl View { .background(Color::rgb8(224, 224, 224)) .border_radius(15.0) .border_color(Color::rgb8(189, 189, 189)) - .padding_px(10.0) + .padding(10.0) .cursor(CursorStyle::Text) }) .hover_style(|s| s.border_color(Color::rgb8(66, 66, 66))) diff --git a/examples/widget-gallery/src/labels.rs b/examples/widget-gallery/src/labels.rs index ebb76062..c6809378 100644 --- a/examples/widget-gallery/src/labels.rs +++ b/examples/widget-gallery/src/labels.rs @@ -16,7 +16,7 @@ pub fn label_view() -> impl View { form_item("Styled Label:".to_string(), 120.0, || { label(move || "This is a styled label".to_owned()).style(|s| { s.background(Color::YELLOW) - .padding_px(10.0) + .padding(10.0) .color(Color::GREEN) .font_weight(Weight::BOLD) .font_style(FontStyle::Italic) diff --git a/examples/widget-gallery/src/lists.rs b/examples/widget-gallery/src/lists.rs index 689172e3..549d1d44 100644 --- a/examples/widget-gallery/src/lists.rs +++ b/examples/widget-gallery/src/lists.rs @@ -4,7 +4,8 @@ use floem::{ keyboard::Key, peniko::Color, reactive::create_signal, - style::{CursorStyle, Dimension, JustifyContent}, + style::{CursorStyle, JustifyContent}, + unit::UnitExt, view::View, views::{ checkbox, container, label, scroll, stack, virtual_list, Decorators, VirtualListDirection, @@ -32,11 +33,11 @@ fn simple_list() -> impl View { VirtualListItemSize::Fixed(Box::new(|| 20.0)), move || long_list.get(), move |item| *item, - move |item| label(move || item.to_string()).style(|s| s.height_px(24.0)), + move |item| label(move || item.to_string()).style(|s| s.height(24.0)), ) .style(|s| s.flex_col()), ) - .style(|s| s.width_px(100.0).height_px(300.0).border(1.0)) + .style(|s| s.width(100.0).height(300.0).border(1.0)) } fn enhanced_list() -> impl View { @@ -67,7 +68,7 @@ fn enhanced_list() -> impl View { true }), label(move || item.to_string()) - .style(|s| s.height_px(32.0).font_size(32.0)), + .style(|s| s.height(32.0).font_size(32.0)), container({ label(move || " X ") .on_click(move |_| { @@ -78,24 +79,24 @@ fn enhanced_list() -> impl View { true }) .style(|s| { - s.height_px(18.0) + s.height(18.0) .font_weight(Weight::BOLD) .color(Color::RED) .border(1.0) .border_color(Color::RED) .border_radius(16.0) - .margin_right_px(5.0) + .margin_right(5.0) }) .hover_style(|s| s.color(Color::WHITE).background(Color::RED)) }) .style(|s| { - s.flex_basis(Dimension::Points(0.0)) + s.flex_basis(0) .flex_grow(1.0) .justify_content(Some(JustifyContent::FlexEnd)) }), ) }) - .style(move |s| s.height_px(item_height).width_px(list_width).items_center()) + .style(move |s| s.height(item_height).width(list_width).items_center()) }) .on_click(move |_| { set_selected.update(|v: &mut usize| { @@ -129,8 +130,8 @@ fn enhanced_list() -> impl View { .focus_visible_style(|s| s.border(2.).border_color(Color::BLUE)) .style(move |s| { s.flex_row() - .width_pct(list_width) - .height_px(item_height) + .width(list_width.pct()) + .height(item_height) .apply_if(index == selected.get(), |s| s.background(Color::GRAY)) .apply_if(index != 0, |s| { s.border_top(1.0).border_color(Color::LIGHT_GRAY) @@ -139,7 +140,7 @@ fn enhanced_list() -> impl View { .hover_style(|s| s.background(Color::LIGHT_GRAY).cursor(CursorStyle::Pointer)) }, ) - .style(move |s| s.flex_col().width_px(list_width)), + .style(move |s| s.flex_col().width(list_width)), ) - .style(move |s| s.width_px(list_width).height_px(300.0).border(1.0)) + .style(move |s| s.width(list_width).height(300.0).border(1.0)) } diff --git a/examples/widget-gallery/src/main.rs b/examples/widget-gallery/src/main.rs index 80a6030c..041f9875 100644 --- a/examples/widget-gallery/src/main.rs +++ b/examples/widget-gallery/src/main.rs @@ -13,6 +13,7 @@ use floem::{ peniko::Color, reactive::create_signal, style::CursorStyle, + unit::UnitExt, view::View, views::{ container, container_box, label, scroll, stack, tab, virtual_list, Decorators, @@ -82,8 +83,8 @@ fn app_view() -> impl View { .focus_visible_style(|s| s.border(2.).border_color(Color::BLUE)) .style(move |s| { s.flex_row() - .width_pct(100.0) - .height_px(32.0) + .width(100.pct()) + .height(32.0) .border_bottom(1.0) .border_color(Color::LIGHT_GRAY) .apply_if(index == active_tab.get(), |s| { @@ -95,21 +96,21 @@ fn app_view() -> impl View { }) }, ) - .style(|s| s.flex_col().width_px(140.0)) + .style(|s| s.flex_col().width(140.0)) }) .style(|s| { s.flex_col() - .width_px(140.0) - .height_pct(100.0) + .width(140.0) + .height(100.pct()) .border(1.0) .border_color(Color::GRAY) }) }) .style(|s| { - s.height_pct(100.0) - .width_px(150.0) - .padding_vert_px(5.0) - .padding_horiz_px(5.0) + s.height(100.pct()) + .width(150.0) + .padding_vert(5.0) + .padding_horiz(5.0) .flex_col() .items_center() }), @@ -129,18 +130,18 @@ fn app_view() -> impl View { _ => container_box(label(|| "Not implemented".to_owned())), }, ) - .style(|s| s.size_pct(100.0, 100.0)) + .style(|s| s.size(100.pct(), 100.pct())) }) .style(|s| { - s.size_pct(100.0, 100.0) - .padding_vert_px(5.0) - .padding_horiz_px(5.0) + s.size(100.pct(), 100.pct()) + .padding_vert(5.0) + .padding_horiz(5.0) .flex_col() .items_center() }), ) }) - .style(|s| s.size_pct(100.0, 100.0)) + .style(|s| s.size(100.pct(), 100.pct())) } fn main() { diff --git a/examples/window-scale/src/main.rs b/examples/window-scale/src/main.rs index ee437ce8..33344154 100644 --- a/examples/window-scale/src/main.rs +++ b/examples/window-scale/src/main.rs @@ -1,6 +1,7 @@ use floem::{ peniko::Color, reactive::{create_rw_signal, create_signal}, + unit::UnitExt, view::View, views::{label, stack, Decorators}, }; @@ -9,11 +10,11 @@ fn app_view() -> impl View { let (counter, set_counter) = create_signal(0); let window_scale = create_rw_signal(1.0); stack(( - label(move || format!("Value: {}", counter.get())).style(|s| s.padding_px(10.0)), + label(move || format!("Value: {}", counter.get())).style(|s| s.padding(10.0)), stack({ ( label(|| "Increment") - .style(|s| s.border(1.0).border_radius(10.0).padding_px(10.0)) + .style(|s| s.border(1.0).border_radius(10.0).padding(10.0)) .on_click(move |_| { set_counter.update(|value| *value += 1); true @@ -30,8 +31,8 @@ fn app_view() -> impl View { .style(|s| { s.border(1.0) .border_radius(10.0) - .padding_px(10.0) - .margin_left_px(10.0) + .padding(10.0) + .margin_left(10.0) }) .hover_style(|s| s.background(Color::rgb8(244, 67, 54))) .active_style(|s| s.color(Color::WHITE).background(Color::RED)) @@ -47,8 +48,8 @@ fn app_view() -> impl View { .style(|s| { s.border(1.0) .border_radius(10.0) - .padding_px(10.0) - .margin_left_px(10.0) + .padding(10.0) + .margin_left(10.0) .background(Color::LIGHT_BLUE) }) .disabled_style(|s| s.background(Color::LIGHT_GRAY)) @@ -68,9 +69,9 @@ fn app_view() -> impl View { .style(|s| { s.border(1.0) .border_radius(10.0) - .margin_top_px(10.0) - .margin_right_px(10.0) - .padding_px(10.0) + .margin_top(10.0) + .margin_right(10.0) + .padding(10.0) }) .hover_style(|s| s.background(Color::LIGHT_GREEN)), label(|| "Zoom Out") @@ -81,9 +82,9 @@ fn app_view() -> impl View { .style(|s| { s.border(1.0) .border_radius(10.0) - .margin_top_px(10.0) - .margin_right_px(10.0) - .padding_px(10.0) + .margin_top(10.0) + .margin_right(10.0) + .padding(10.0) }) .hover_style(|s| s.background(Color::LIGHT_GREEN)), label(|| "Zoom Reset") @@ -95,9 +96,9 @@ fn app_view() -> impl View { .style(|s| { s.border(1.0) .border_radius(10.0) - .margin_top_px(10.0) - .margin_right_px(10.0) - .padding_px(10.0) + .margin_top(10.0) + .margin_right(10.0) + .padding(10.0) }) .hover_style(|s| s.background(Color::LIGHT_GREEN)) .disabled_style(|s| s.background(Color::LIGHT_GRAY)), @@ -105,14 +106,14 @@ fn app_view() -> impl View { }) .style(|s| { s.absolute() - .size_pct(100.0, 100.0) + .size(100.pct(), 100.pct()) .items_start() .justify_end() }), )) .window_scale(move || window_scale.get()) .style(|s| { - s.size_pct(100.0, 100.0) + s.size(100.pct(), 100.pct()) .flex_col() .items_center() .justify_center() diff --git a/src/context.rs b/src/context.rs index e2acf788..2d4361bc 100644 --- a/src/context.rs +++ b/src/context.rs @@ -168,10 +168,10 @@ impl ViewState { animation.animate_prop(animation.elapsed().unwrap_or(Duration::ZERO), kind); match kind { AnimPropKind::Width => { - computed_style = computed_style.width_px(val.get_f32()); + computed_style = computed_style.width(val.get_f32()); } AnimPropKind::Height => { - computed_style = computed_style.height_px(val.get_f32()); + computed_style = computed_style.height(val.get_f32()); } AnimPropKind::Background => { computed_style = computed_style.background(val.get_color()); diff --git a/src/lib.rs b/src/lib.rs index ddb55383..a7af5213 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -30,7 +30,7 @@ //! text_input(text), //! label(|| text.get()) //! ) -//! ).style(|| Style::BASE.padding_px(10.0)) +//! ).style(|| Style::BASE.padding(10.0)) //! } //! ``` //! In this example `text` is a signal, containing a `String`, @@ -59,8 +59,8 @@ //! .style(move || { //! Style::BASE //! .flex_row() -//! .width_pct(100.0) -//! .height_px(32.0) +//! .width(100.pct()) +//! .height(32.0) //! .border_bottom(1.0) //! .border_color(Color::LIGHT_GRAY) //! .apply_if(index == active_tab.get(), |s| { @@ -104,6 +104,7 @@ pub mod pointer; pub mod renderer; pub mod responsive; pub mod style; +pub mod unit; mod update; pub mod view; pub mod view_tuple; diff --git a/src/style.rs b/src/style.rs index 7cdd2658..5a5076e0 100644 --- a/src/style.rs +++ b/src/style.rs @@ -33,10 +33,11 @@ pub use taffy::style::{ use taffy::{ geometry::Size, prelude::Rect, - style::{FlexWrap, LengthPercentage, LengthPercentageAuto, Style as TaffyStyle}, - style_helpers::TaffyZero, + style::{FlexWrap, LengthPercentage, Style as TaffyStyle}, }; +use crate::unit::{Px, PxPct, PxPctAuto, UnitExt}; + pub enum StyleSelector { Hover, Focus, @@ -155,7 +156,7 @@ impl From for StyleValue { // Creates `Style` which has `StyleValue`s for the fields macro_rules! define_styles { ( - $($name:ident $($opt:ident)?: $typ:ty = $val:expr),* $(,)? + $($name:ident $name_sv:ident $($opt:ident)?: $typ:ty = $val:expr),* $(,)? ) => { /// A style with definite values for most fields. #[derive(Debug, Clone)] @@ -202,7 +203,7 @@ macro_rules! define_styles { }; $( - define_styles!(decl: $name $($opt)?: $typ = $val); + define_styles!(decl: $name $name_sv $($opt)?: $typ = $val); )* /// Convert this `Style` into a computed style, using the given `ComputedStyle` as a base @@ -248,172 +249,140 @@ macro_rules! define_styles { // internal submacro // 'nocb' doesn't add a builder function - (decl: $name:ident nocb: $typ:ty = $val:expr) => {}; - (decl: $name:ident: $typ:ty = $val:expr) => { - pub fn $name(mut self, v: impl Into>) -> Self { - self.$name = v.into(); + (decl: $name:ident $name_sv:ident nocb: $typ:ty = $val:expr) => {}; + (decl: $name:ident $name_sv:ident: $typ:ty = $val:expr) => { + pub fn $name(mut self, v: impl Into<$typ>) -> Self + { + self.$name = StyleValue::Val(v.into()); + self + } + + pub fn $name_sv(mut self, v: StyleValue<$typ>) -> Self + { + self.$name = v; self } } } define_styles!( - display: Display = Display::Flex, - position: Position = Position::Relative, - width: Dimension = Dimension::Auto, - height: Dimension = Dimension::Auto, - min_width: Dimension = Dimension::Auto, - min_height: Dimension = Dimension::Auto, - max_width: Dimension = Dimension::Auto, - max_height: Dimension = Dimension::Auto, - flex_direction: FlexDirection = FlexDirection::Row, - flex_wrap: FlexWrap = FlexWrap::NoWrap, - flex_grow: f32 = 0.0, - flex_shrink: f32 = 1.0, - flex_basis: Dimension = Dimension::Auto, - justify_content: Option = None, - justify_self: Option = None, - align_items: Option = None, - align_content: Option = None, - align_self: Option = None, - border_left: f32 = 0.0, - border_top: f32 = 0.0, - border_right: f32 = 0.0, - border_bottom: f32 = 0.0, - border_radius: f32 = 0.0, - outline_color: Color = Color::TRANSPARENT, - outline: f32 = 0.0, - border_color: Color = Color::BLACK, - padding_left: LengthPercentage = LengthPercentage::ZERO, - padding_top: LengthPercentage = LengthPercentage::ZERO, - padding_right: LengthPercentage = LengthPercentage::ZERO, - padding_bottom: LengthPercentage = LengthPercentage::ZERO, - margin_left: LengthPercentageAuto = LengthPercentageAuto::ZERO, - margin_top: LengthPercentageAuto = LengthPercentageAuto::ZERO, - margin_right: LengthPercentageAuto = LengthPercentageAuto::ZERO, - margin_bottom: LengthPercentageAuto = LengthPercentageAuto::ZERO, - inset_left: LengthPercentageAuto = LengthPercentageAuto::Auto, - inset_top: LengthPercentageAuto = LengthPercentageAuto::Auto, - inset_right: LengthPercentageAuto = LengthPercentageAuto::Auto, - inset_bottom: LengthPercentageAuto = LengthPercentageAuto::Auto, - z_index nocb: Option = None, - cursor nocb: Option = None, - color nocb: Option = None, - background nocb: Option = None, - box_shadow nocb: Option = None, - scroll_bar_color nocb: Option = None, - scroll_bar_rounded nocb: Option = None, - scroll_bar_thickness nocb: Option = None, - scroll_bar_edge_width nocb: Option = None, - font_size nocb: Option = None, - font_family nocb: Option = None, - font_weight nocb: Option = None, - font_style nocb: Option = None, - cursor_color nocb: Option = None, - text_overflow: TextOverflow = TextOverflow::Wrap, - line_height nocb: Option = None, - aspect_ratio: Option = None, - gap: Size = Size::zero(), + display display_sv: Display = Display::Flex, + position position_sv: Position = Position::Relative, + width width_sv: PxPctAuto = PxPctAuto::Auto, + height height_sv: PxPctAuto = PxPctAuto::Auto, + min_width min_width_sv: PxPctAuto = PxPctAuto::Auto, + min_height min_height_sv: PxPctAuto = PxPctAuto::Auto, + max_width max_width_sv: PxPctAuto = PxPctAuto::Auto, + max_height max_height_sv: PxPctAuto = PxPctAuto::Auto, + flex_direction flex_direction_sv: FlexDirection = FlexDirection::Row, + flex_wrap flex_wrap_sv: FlexWrap = FlexWrap::NoWrap, + flex_grow flex_grow_sv: f32 = 0.0, + flex_shrink flex_shrink_sv: f32 = 1.0, + flex_basis flex_basis_sv: PxPctAuto = PxPctAuto::Auto, + justify_content justify_content_sv: Option = None, + justify_self justify_self_sv: Option = None, + align_items align_items_sv: Option = None, + align_content align_content_sv: Option = None, + align_self align_self_sv: Option = None, + border_left border_left_sv: Px = Px(0.0), + border_top border_top_sv: Px = Px(0.0), + border_right border_right_sv: Px = Px(0.0), + border_bottom border_bottom_sv: Px = Px(0.0), + border_radius border_radius_sv: Px = Px(0.0), + outline_color outline_color_sv: Color = Color::TRANSPARENT, + outline outline_sv: Px = Px(0.0), + border_color border_color_sv: Color = Color::BLACK, + padding_left padding_left_sv: PxPct = PxPct::Px(0.0), + padding_top padding_top_sv: PxPct = PxPct::Px(0.0), + padding_right padding_right_sv: PxPct = PxPct::Px(0.0), + padding_bottom padding_bottom_sv: PxPct = PxPct::Px(0.0), + margin_left margin_left_sv: PxPctAuto = PxPctAuto::Px(0.0), + margin_top margin_top_sv: PxPctAuto = PxPctAuto::Px(0.0), + margin_right margin_right_sv: PxPctAuto = PxPctAuto::Px(0.0), + margin_bottom margin_bottom_sv: PxPctAuto = PxPctAuto::Px(0.0), + inset_left inset_left_sv: PxPctAuto = PxPctAuto::Auto, + inset_top inset_top_sv: PxPctAuto = PxPctAuto::Auto, + inset_right inset_right_sv: PxPctAuto = PxPctAuto::Auto, + inset_bottom inset_bottom_sv: PxPctAuto = PxPctAuto::Auto, + z_index z_index_sv nocb: Option = None, + cursor cursor_sv nocb: Option = None, + color color_sv nocb: Option = None, + background background_sv nocb: Option = None, + box_shadow box_shadow_sv nocb: Option = None, + scroll_bar_color scroll_bar_color_sv nocb: Option = None, + scroll_bar_rounded scroll_bar_rounded_sv nocb: Option = None, + scroll_bar_thickness scroll_bar_thickness_sv nocb: Option = None, + scroll_bar_edge_width scroll_bar_edge_width_sv nocb: Option = None, + font_size font_size_sv nocb: Option = None, + font_family font_family_sv nocb: Option = None, + font_weight font_weight_sv nocb: Option = None, + font_style font_style_sv nocb: Option = None, + cursor_color cursor_color_sv nocb: Option = None, + text_overflow text_overflow_sv: TextOverflow = TextOverflow::Wrap, + line_height line_height_sv nocb: Option = None, + aspect_ratio aspect_ratio_sv: Option = None, + gap gap_sv: Size = Size::zero(), ); impl Style { - pub fn width_px(self, width: f32) -> Self { - self.width(Dimension::Points(width)) + pub fn width_pct(self, width: f64) -> Self { + self.width(width.pct()) } - pub fn width_pct(self, width: f32) -> Self { - self.width(Dimension::Percent(width / 100.0)) + pub fn height_pct(self, height: f64) -> Self { + self.height(height.pct()) } - pub fn height_px(self, height: f32) -> Self { - self.height(Dimension::Points(height)) - } - - pub fn height_pct(self, height: f32) -> Self { - self.height(Dimension::Percent(height / 100.0)) - } - - pub fn size( - self, - width: impl Into>, - height: impl Into>, - ) -> Self { + pub fn size(self, width: impl Into, height: impl Into) -> Self { self.width(width).height(height) } - pub fn size_px(self, width: f32, height: f32) -> Self { - self.width_px(width).height_px(height) - } - - pub fn size_pct(self, width: f32, height: f32) -> Self { - self.width_pct(width).height_pct(height) - } - - pub fn min_width_px(self, min_width: f32) -> Self { - self.min_width(Dimension::Points(min_width)) - } - - pub fn min_width_pct(self, min_width: f32) -> Self { - self.min_width(Dimension::Percent(min_width / 100.0)) + pub fn size_pct(self, width: f64, height: f64) -> Self { + self.width(width.pct()).height(height.pct()) } - pub fn min_height_px(self, min_height: f32) -> Self { - self.min_height(Dimension::Points(min_height)) + pub fn min_width_pct(self, min_width: f64) -> Self { + self.min_width(min_width.pct()) } - pub fn min_height_pct(self, min_height: f32) -> Self { - self.min_height(Dimension::Percent(min_height / 100.0)) + pub fn min_height_pct(self, min_height: f64) -> Self { + self.min_height(min_height.pct()) } pub fn min_size( self, - min_width: impl Into>, - min_height: impl Into>, + min_width: impl Into, + min_height: impl Into, ) -> Self { self.min_width(min_width).min_height(min_height) } - pub fn min_size_px(self, min_width: f32, min_height: f32) -> Self { - self.min_width_px(min_width).min_height_px(min_height) - } - - pub fn min_size_pct(self, min_width: f32, min_height: f32) -> Self { - self.min_width_pct(min_width).min_height_pct(min_height) - } - - pub fn max_width_px(self, max_width: f32) -> Self { - self.max_width(Dimension::Points(max_width)) + pub fn min_size_pct(self, min_width: f64, min_height: f64) -> Self { + self.min_size(min_width.pct(), min_height.pct()) } - pub fn max_width_pct(self, max_width: f32) -> Self { - self.max_width(Dimension::Percent(max_width / 100.0)) + pub fn max_width_pct(self, max_width: f64) -> Self { + self.max_width(max_width.pct()) } - pub fn max_height_px(self, max_height: f32) -> Self { - self.max_height(Dimension::Points(max_height)) - } - - pub fn max_height_pct(self, max_height: f32) -> Self { - self.max_height(Dimension::Percent(max_height / 100.0)) + pub fn max_height_pct(self, max_height: f64) -> Self { + self.max_height(max_height.pct()) } pub fn max_size( self, - max_width: impl Into>, - max_height: impl Into>, + max_width: impl Into, + max_height: impl Into, ) -> Self { self.max_width(max_width).max_height(max_height) } - pub fn max_size_px(self, max_width: f32, max_height: f32) -> Self { - self.max_width_px(max_width).max_height_px(max_height) - } - - pub fn max_size_pct(self, max_width: f32, max_height: f32) -> Self { - self.max_width_pct(max_width).max_height_pct(max_height) + pub fn max_size_pct(self, max_width: f64, max_height: f64) -> Self { + self.max_size(max_width.pct(), max_height.pct()) } - pub fn border(self, border: f32) -> Self { + pub fn border(self, border: impl Into) -> Self { + let border = border.into(); self.border_left(border) .border_top(border) .border_right(border) @@ -421,188 +390,156 @@ impl Style { } /// Sets `border_left` and `border_right` to `border` - pub fn border_horiz(self, border: f32) -> Self { + pub fn border_horiz(self, border: impl Into) -> Self { + let border = border.into(); self.border_left(border).border_right(border) } /// Sets `border_top` and `border_bottom` to `border` - pub fn border_vert(self, border: f32) -> Self { + pub fn border_vert(self, border: impl Into) -> Self { + let border = border.into(); self.border_top(border).border_bottom(border) } - pub fn padding_left_px(self, padding: f32) -> Self { - self.padding_left(LengthPercentage::Points(padding)) - } - - pub fn padding_right_px(self, padding: f32) -> Self { - self.padding_right(LengthPercentage::Points(padding)) + pub fn padding_left_pct(self, padding: f64) -> Self { + self.padding_left(padding.pct()) } - pub fn padding_top_px(self, padding: f32) -> Self { - self.padding_top(LengthPercentage::Points(padding)) + pub fn padding_right_pct(self, padding: f64) -> Self { + self.padding_right(padding.pct()) } - pub fn padding_bottom_px(self, padding: f32) -> Self { - self.padding_bottom(LengthPercentage::Points(padding)) + pub fn padding_top_pct(self, padding: f64) -> Self { + self.padding_top(padding.pct()) } - pub fn padding_left_pct(self, padding: f32) -> Self { - self.padding_left(LengthPercentage::Percent(padding / 100.0)) - } - - pub fn padding_right_pct(self, padding: f32) -> Self { - self.padding_right(LengthPercentage::Percent(padding / 100.0)) - } - - pub fn padding_top_pct(self, padding: f32) -> Self { - self.padding_top(LengthPercentage::Percent(padding / 100.0)) - } - - pub fn padding_bottom_pct(self, padding: f32) -> Self { - self.padding_bottom(LengthPercentage::Percent(padding / 100.0)) + pub fn padding_bottom_pct(self, padding: f64) -> Self { + self.padding_bottom(padding.pct()) } /// Set padding on all directions - pub fn padding_px(self, padding: f32) -> Self { - self.padding_left_px(padding) - .padding_top_px(padding) - .padding_right_px(padding) - .padding_bottom_px(padding) + pub fn padding(self, padding: impl Into) -> Self { + let padding = padding.into(); + self.padding_left(padding) + .padding_top(padding) + .padding_right(padding) + .padding_bottom(padding) } - pub fn padding_pct(self, padding: f32) -> Self { - self.padding_left_pct(padding) - .padding_top_pct(padding) - .padding_right_pct(padding) - .padding_bottom_pct(padding) + pub fn padding_pct(self, padding: f64) -> Self { + let padding = padding.pct(); + self.padding_left(padding) + .padding_top(padding) + .padding_right(padding) + .padding_bottom(padding) } /// Sets `padding_left` and `padding_right` to `padding` - pub fn padding_horiz_px(self, padding: f32) -> Self { - self.padding_left_px(padding).padding_right_px(padding) + pub fn padding_horiz(self, padding: impl Into) -> Self { + let padding = padding.into(); + self.padding_left(padding).padding_right(padding) } - pub fn padding_horiz_pct(self, padding: f32) -> Self { - self.padding_left_pct(padding).padding_right_pct(padding) + pub fn padding_horiz_pct(self, padding: f64) -> Self { + let padding = padding.pct(); + self.padding_left(padding).padding_right(padding) } /// Sets `padding_top` and `padding_bottom` to `padding` - pub fn padding_vert_px(self, padding: f32) -> Self { - self.padding_top_px(padding).padding_bottom_px(padding) - } - - pub fn padding_vert_pct(self, padding: f32) -> Self { - self.padding_top_pct(padding).padding_bottom_pct(padding) - } - - pub fn margin_left_px(self, margin: f32) -> Self { - self.margin_left(LengthPercentageAuto::Points(margin)) - } - - pub fn margin_right_px(self, margin: f32) -> Self { - self.margin_right(LengthPercentageAuto::Points(margin)) - } - - pub fn margin_top_px(self, margin: f32) -> Self { - self.margin_top(LengthPercentageAuto::Points(margin)) + pub fn padding_vert(self, padding: impl Into) -> Self { + let padding = padding.into(); + self.padding_top(padding).padding_bottom(padding) } - pub fn margin_bottom_px(self, margin: f32) -> Self { - self.margin_bottom(LengthPercentageAuto::Points(margin)) + pub fn padding_vert_pct(self, padding: f64) -> Self { + let padding = padding.pct(); + self.padding_top(padding).padding_bottom(padding) } - pub fn margin_left_pct(self, margin: f32) -> Self { - self.margin_left(LengthPercentageAuto::Percent(margin / 100.0)) + pub fn margin_left_pct(self, margin: f64) -> Self { + self.margin_left(margin.pct()) } - pub fn margin_right_pct(self, margin: f32) -> Self { - self.margin_right(LengthPercentageAuto::Percent(margin / 100.0)) + pub fn margin_right_pct(self, margin: f64) -> Self { + self.margin_right(margin.pct()) } - pub fn margin_top_pct(self, margin: f32) -> Self { - self.margin_top(LengthPercentageAuto::Percent(margin / 100.0)) + pub fn margin_top_pct(self, margin: f64) -> Self { + self.margin_top(margin.pct()) } - pub fn margin_bottom_pct(self, margin: f32) -> Self { - self.margin_bottom(LengthPercentageAuto::Percent(margin / 100.0)) + pub fn margin_bottom_pct(self, margin: f64) -> Self { + self.margin_bottom(margin.pct()) } - pub fn margin_px(self, margin: f32) -> Self { - self.margin_left_px(margin) - .margin_top_px(margin) - .margin_right_px(margin) - .margin_bottom_px(margin) + pub fn margin(self, margin: impl Into) -> Self { + let margin = margin.into(); + self.margin_left(margin) + .margin_top(margin) + .margin_right(margin) + .margin_bottom(margin) } - pub fn margin_pct(self, margin: f32) -> Self { - self.margin_left_pct(margin) - .margin_top_pct(margin) - .margin_right_pct(margin) - .margin_bottom_pct(margin) + pub fn margin_pct(self, margin: f64) -> Self { + let margin = margin.pct(); + self.margin_left(margin) + .margin_top(margin) + .margin_right(margin) + .margin_bottom(margin) } /// Sets `margin_left` and `margin_right` to `margin` - pub fn margin_horiz_px(self, margin: f32) -> Self { - self.margin_left_px(margin).margin_right_px(margin) + pub fn margin_horiz(self, margin: impl Into) -> Self { + let margin = margin.into(); + self.margin_left(margin).margin_right(margin) } - pub fn margin_horiz_pct(self, margin: f32) -> Self { - self.margin_left_pct(margin).margin_right_pct(margin) + pub fn margin_horiz_pct(self, margin: f64) -> Self { + let margin = margin.pct(); + self.margin_left(margin).margin_right(margin) } /// Sets `margin_top` and `margin_bottom` to `margin` - pub fn margin_vert_px(self, margin: f32) -> Self { - self.margin_top_px(margin).margin_bottom_px(margin) - } - - pub fn margin_vert_pct(self, margin: f32) -> Self { - self.margin_top_pct(margin).margin_bottom_pct(margin) - } - - pub fn inset_left_px(self, inset: f32) -> Self { - self.inset_left(LengthPercentageAuto::Points(inset)) - } - - pub fn inset_right_px(self, inset: f32) -> Self { - self.inset_right(LengthPercentageAuto::Points(inset)) + pub fn margin_vert(self, margin: impl Into) -> Self { + let margin = margin.into(); + self.margin_top(margin).margin_bottom(margin) } - pub fn inset_top_px(self, inset: f32) -> Self { - self.inset_top(LengthPercentageAuto::Points(inset)) + pub fn margin_vert_pct(self, margin: f64) -> Self { + let margin = margin.pct(); + self.margin_top(margin).margin_bottom(margin) } - pub fn inset_bottom_px(self, inset: f32) -> Self { - self.inset_bottom(LengthPercentageAuto::Points(inset)) + pub fn inset_left_pct(self, inset: f64) -> Self { + self.inset_left(inset.pct()) } - pub fn inset_left_pct(self, inset: f32) -> Self { - self.inset_left(LengthPercentageAuto::Percent(inset / 100.0)) + pub fn inset_right_pct(self, inset: f64) -> Self { + self.inset_right(inset.pct()) } - pub fn inset_right_pct(self, inset: f32) -> Self { - self.inset_right(LengthPercentageAuto::Percent(inset / 100.0)) + pub fn inset_top_pct(self, inset: f64) -> Self { + self.inset_top(inset.pct()) } - pub fn inset_top_pct(self, inset: f32) -> Self { - self.inset_top(LengthPercentageAuto::Percent(inset / 100.0)) + pub fn inset_bottom_pct(self, inset: f64) -> Self { + self.inset_bottom(inset.pct()) } - pub fn inset_bottom_pct(self, inset: f32) -> Self { - self.inset_bottom(LengthPercentageAuto::Percent(inset / 100.0)) + pub fn inset(self, inset: impl Into) -> Self { + let inset = inset.into(); + self.inset_left(inset) + .inset_top(inset) + .inset_right(inset) + .inset_bottom(inset) } - pub fn inset_px(self, inset: f32) -> Self { - self.inset_left_px(inset) - .inset_top_px(inset) - .inset_right_px(inset) - .inset_bottom_px(inset) - } - - pub fn inset_pct(self, inset: f32) -> Self { - self.inset_left_pct(inset) - .inset_top_pct(inset) - .inset_right_pct(inset) - .inset_bottom_pct(inset) + pub fn inset_pct(self, inset: f64) -> Self { + let inset = inset.pct(); + self.inset_left(inset) + .inset_top(inset) + .inset_right(inset) + .inset_bottom(inset) } pub fn cursor(mut self, cursor: impl Into>) -> Self { @@ -710,13 +647,13 @@ impl Style { self } - pub fn scroll_bar_thickness(mut self, thickness: impl Into>) -> Self { - self.scroll_bar_thickness = thickness.into().map(Some); + pub fn scroll_bar_thickness(mut self, thickness: impl Into) -> Self { + self.scroll_bar_thickness = StyleValue::Val(Some(thickness.into())); self } - pub fn scroll_bar_edge_width(mut self, edge_width: impl Into>) -> Self { - self.scroll_bar_edge_width = edge_width.into().map(Some); + pub fn scroll_bar_edge_width(mut self, edge_width: impl Into) -> Self { + self.scroll_bar_edge_width = StyleValue::Val(Some(edge_width.into())); self } @@ -804,10 +741,6 @@ impl Style { self.display(Display::Flex) } - pub fn flex_basis_px(self, pt: f32) -> Self { - self.flex_basis(Dimension::Points(pt)) - } - pub fn flex_row(self) -> Self { self.flex_direction(FlexDirection::Row) } @@ -860,21 +793,21 @@ impl ComputedStyle { display: self.display, position: self.position, size: taffy::prelude::Size { - width: self.width, - height: self.height, + width: self.width.into(), + height: self.height.into(), }, min_size: taffy::prelude::Size { - width: self.min_width, - height: self.min_height, + width: self.min_width.into(), + height: self.min_height.into(), }, max_size: taffy::prelude::Size { - width: self.max_width, - height: self.max_height, + width: self.max_width.into(), + height: self.max_height.into(), }, flex_direction: self.flex_direction, flex_grow: self.flex_grow, flex_shrink: self.flex_shrink, - flex_basis: self.flex_basis, + flex_basis: self.flex_basis.into(), flex_wrap: self.flex_wrap, justify_content: self.justify_content, justify_self: self.justify_self, @@ -883,28 +816,28 @@ impl ComputedStyle { align_self: self.align_self, aspect_ratio: self.aspect_ratio, border: Rect { - left: LengthPercentage::Points(self.border_left), - top: LengthPercentage::Points(self.border_top), - right: LengthPercentage::Points(self.border_right), - bottom: LengthPercentage::Points(self.border_bottom), + left: LengthPercentage::Points(self.border_left.0 as f32), + top: LengthPercentage::Points(self.border_top.0 as f32), + right: LengthPercentage::Points(self.border_right.0 as f32), + bottom: LengthPercentage::Points(self.border_bottom.0 as f32), }, padding: Rect { - left: self.padding_left, - top: self.padding_top, - right: self.padding_right, - bottom: self.padding_bottom, + left: self.padding_left.into(), + top: self.padding_top.into(), + right: self.padding_right.into(), + bottom: self.padding_bottom.into(), }, margin: Rect { - left: self.margin_left, - top: self.margin_top, - right: self.margin_right, - bottom: self.margin_bottom, + left: self.margin_left.into(), + top: self.margin_top.into(), + right: self.margin_right.into(), + bottom: self.margin_bottom.into(), }, inset: Rect { - left: self.inset_left, - top: self.inset_top, - right: self.inset_right, - bottom: self.inset_bottom, + left: self.inset_left.into(), + top: self.inset_top.into(), + right: self.inset_right.into(), + bottom: self.inset_bottom.into(), }, gap: self.gap, ..Default::default() @@ -914,80 +847,59 @@ impl ComputedStyle { #[cfg(test)] mod tests { - use taffy::style::LengthPercentage; - use super::{Style, StyleValue}; + use crate::unit::PxPct; #[test] fn style_override() { - let style1 = Style::BASE.padding_left_px(32.0); - let style2 = Style::BASE.padding_left_px(64.0); + let style1 = Style::BASE.padding_left(32.0); + let style2 = Style::BASE.padding_left(64.0); let style = style1.apply(style2); - assert_eq!( - style.padding_left, - StyleValue::Val(LengthPercentage::Points(64.0)) - ); + assert_eq!(style.padding_left, StyleValue::Val(PxPct::Px(64.0))); - let style1 = Style::BASE.padding_left_px(32.0).padding_bottom_px(45.0); + let style1 = Style::BASE.padding_left(32.0).padding_bottom(45.0); let style2 = Style::BASE - .padding_left_px(64.0) - .padding_bottom(StyleValue::Base); + .padding_left(64.0) + .padding_bottom_sv(StyleValue::Base); let style = style1.apply(style2); - assert_eq!( - style.padding_left, - StyleValue::Val(LengthPercentage::Points(64.0)) - ); - assert_eq!( - style.padding_bottom, - StyleValue::Val(LengthPercentage::Points(45.0)) - ); + assert_eq!(style.padding_left, StyleValue::Val(PxPct::Px(64.0))); + assert_eq!(style.padding_bottom, StyleValue::Val(PxPct::Px(45.0))); - let style1 = Style::BASE.padding_left_px(32.0).padding_bottom_px(45.0); + let style1 = Style::BASE.padding_left(32.0).padding_bottom(45.0); let style2 = Style::BASE - .padding_left(LengthPercentage::Points(64.0)) - .padding_bottom(StyleValue::Unset); + .padding_left(64.0) + .padding_bottom_sv(StyleValue::Unset); let style = style1.apply(style2); - assert_eq!( - style.padding_left, - StyleValue::Val(LengthPercentage::Points(64.0)) - ); + assert_eq!(style.padding_left, StyleValue::Val(PxPct::Px(64.0))); assert_eq!(style.padding_bottom, StyleValue::Unset); - let style1 = Style::BASE.padding_left_px(32.0).padding_bottom_px(45.0); + let style1 = Style::BASE.padding_left(32.0).padding_bottom(45.0); let style2 = Style::BASE - .padding_left_px(64.0) - .padding_bottom(StyleValue::Unset); - let style3 = Style::BASE.padding_bottom(StyleValue::Base); + .padding_left(64.0) + .padding_bottom_sv(StyleValue::Unset); + + let style3 = Style::BASE.padding_bottom_sv(StyleValue::Base); let style = style1.apply_overriding_styles([style2, style3].into_iter()); - assert_eq!( - style.padding_left, - StyleValue::Val(LengthPercentage::Points(64.0)) - ); + assert_eq!(style.padding_left, StyleValue::Val(PxPct::Px(64.0))); assert_eq!(style.padding_bottom, StyleValue::Unset); - let style1 = Style::BASE.padding_left_px(32.0).padding_bottom_px(45.0); + let style1 = Style::BASE.padding_left(32.0).padding_bottom(45.0); let style2 = Style::BASE - .padding_left(LengthPercentage::Points(64.0)) - .padding_bottom(StyleValue::Unset); - let style3 = Style::BASE.padding_bottom(StyleValue::Val(LengthPercentage::Points(100.0))); + .padding_left(64.0) + .padding_bottom_sv(StyleValue::Unset); + let style3 = Style::BASE.padding_bottom(100.0); let style = style1.apply_overriding_styles([style2, style3].into_iter()); - assert_eq!( - style.padding_left, - StyleValue::Val(LengthPercentage::Points(64.0)) - ); - assert_eq!( - style.padding_bottom, - StyleValue::Val(LengthPercentage::Points(100.0)) - ); + assert_eq!(style.padding_left, StyleValue::Val(PxPct::Px(64.0))); + assert_eq!(style.padding_bottom, StyleValue::Val(PxPct::Px(100.0))); } } diff --git a/src/unit.rs b/src/unit.rs new file mode 100644 index 00000000..8c27a720 --- /dev/null +++ b/src/unit.rs @@ -0,0 +1,134 @@ +use taffy::style::{Dimension, LengthPercentage, LengthPercentageAuto}; + +/// A pixel value +#[derive(Debug, Clone, Copy, PartialEq)] +pub struct Px(pub f64); + +/// A percent value +#[derive(Debug, Clone, Copy, PartialEq)] +pub struct Pct(pub f64); + +/// Used for automatically computed values +#[derive(Debug, Clone, Copy, PartialEq, Eq)] +pub struct Auto; + +impl From for Px { + fn from(value: f64) -> Self { + Px(value) + } +} + +impl From for Px { + fn from(value: f32) -> Self { + Px(value as f64) + } +} + +impl From for Px { + fn from(value: i32) -> Self { + Px(value as f64) + } +} + +#[derive(Debug, Clone, Copy, PartialEq)] +pub enum PxPct { + Px(f64), + Pct(f64), +} + +impl From for PxPct { + fn from(value: Pct) -> Self { + PxPct::Pct(value.0) + } +} + +impl From for PxPct +where + T: Into, +{ + fn from(value: T) -> Self { + PxPct::Px(value.into().0) + } +} + +#[derive(Debug, Clone, Copy, PartialEq)] +pub enum PxPctAuto { + Px(f64), + Pct(f64), + Auto, +} + +impl From for PxPctAuto { + fn from(value: Pct) -> Self { + PxPctAuto::Pct(value.0) + } +} + +impl From for PxPctAuto { + fn from(_: Auto) -> Self { + PxPctAuto::Auto + } +} + +impl From for PxPctAuto +where + T: Into, +{ + fn from(value: T) -> Self { + PxPctAuto::Px(value.into().0) + } +} + +pub trait UnitExt { + fn pct(self) -> Pct; + fn px(self) -> Px; +} + +impl UnitExt for f64 { + fn pct(self) -> Pct { + Pct(self) + } + + fn px(self) -> Px { + Px(self) + } +} + +impl UnitExt for i32 { + fn pct(self) -> Pct { + Pct(self as f64) + } + + fn px(self) -> Px { + Px(self as f64) + } +} + +impl From for Dimension { + fn from(value: PxPctAuto) -> Self { + match value { + PxPctAuto::Px(v) => Dimension::Points(v as f32), + PxPctAuto::Pct(v) => Dimension::Percent(v as f32 / 100.0), + PxPctAuto::Auto => Dimension::Auto, + } + } +} + +impl From for LengthPercentage { + fn from(value: PxPct) -> Self { + match value { + PxPct::Px(v) => LengthPercentage::Points(v as f32), + PxPct::Pct(v) => LengthPercentage::Percent(v as f32 / 100.0), + } + } +} + +impl From for LengthPercentageAuto { + fn from(value: PxPctAuto) -> Self { + match value { + PxPctAuto::Px(v) => LengthPercentageAuto::Points(v as f32), + PxPctAuto::Pct(v) => LengthPercentageAuto::Percent(v as f32 / 100.0), + PxPctAuto::Auto => LengthPercentageAuto::Auto, + } + } +} diff --git a/src/view.rs b/src/view.rs index 02718eed..de49ade9 100644 --- a/src/view.rs +++ b/src/view.rs @@ -26,7 +26,7 @@ //! pub fn label_and_input() -> impl View { //! let text = create_rw_signal("Hello world".to_string()); //! stack(|| (text_input(text), label(|| text.get()))) -//! .style(|| Style::BASE.padding_px(10.0)) +//! .style(|| Style::BASE.padding(10.0)) //! } //! ``` //! @@ -206,10 +206,10 @@ pub trait View { cx.scroll_bar_rounded = style.scroll_bar_rounded; } if style.scroll_bar_thickness.is_some() { - cx.scroll_bar_thickness = style.scroll_bar_thickness; + cx.scroll_bar_thickness = style.scroll_bar_thickness.map(|v| v.0 as f32); } if style.scroll_bar_edge_width.is_some() { - cx.scroll_bar_edge_width = style.scroll_bar_edge_width; + cx.scroll_bar_edge_width = style.scroll_bar_edge_width.map(|v| v.0 as f32); } if style.font_size.is_some() { cx.font_size = style.font_size; @@ -687,10 +687,10 @@ pub trait View { cx.scroll_bar_rounded = style.scroll_bar_rounded; } if style.scroll_bar_thickness.is_some() { - cx.scroll_bar_thickness = style.scroll_bar_thickness; + cx.scroll_bar_thickness = style.scroll_bar_thickness.map(|v| v.0 as f32); } if style.scroll_bar_edge_width.is_some() { - cx.scroll_bar_edge_width = style.scroll_bar_edge_width; + cx.scroll_bar_edge_width = style.scroll_bar_edge_width.map(|v| v.0 as f32); } if style.font_size.is_some() { cx.font_size = style.font_size; @@ -781,12 +781,12 @@ pub trait View { } fn paint_bg(cx: &mut PaintCx, style: &ComputedStyle, size: Size) { - let radius = style.border_radius; + let radius = style.border_radius.0; if radius > 0.0 { let rect = size.to_rect(); let width = rect.width(); let height = rect.height(); - if width > 0.0 && height > 0.0 && radius as f64 > width.max(height) / 2.0 { + if width > 0.0 && height > 0.0 && radius > width.max(height) / 2.0 { let radius = width.max(height) / 2.0; let circle = Circle::new(rect.center(), radius); let bg = match style.background { @@ -795,12 +795,12 @@ fn paint_bg(cx: &mut PaintCx, style: &ComputedStyle, size: Size) { }; cx.fill(&circle, bg, 0.0); } else { - paint_box_shadow(cx, style, rect, Some(radius as f64)); + paint_box_shadow(cx, style, rect, Some(radius)); let bg = match style.background { Some(color) => color, None => return, }; - let rounded_rect = rect.to_rounded_rect(radius as f64); + let rounded_rect = rect.to_rounded_rect(radius); cx.fill(&rounded_rect, bg, 0.0); } } else { @@ -832,72 +832,68 @@ fn paint_box_shadow(cx: &mut PaintCx, style: &ComputedStyle, rect: Rect, rect_ra } fn paint_outline(cx: &mut PaintCx, style: &ComputedStyle, size: Size) { - if style.outline == 0. { + if style.outline.0 == 0. { // TODO: we should warn! when outline is < 0 return; } - let half = style.outline as f64 / 2.0; + let half = style.outline.0 / 2.0; let rect = size.to_rect().inflate(half, half); - cx.stroke(&rect, style.outline_color, style.outline as f64); + cx.stroke(&rect, style.outline_color, style.outline.0); } fn paint_border(cx: &mut PaintCx, style: &ComputedStyle, size: Size) { - let left = style.border_left; - let top = style.border_top; - let right = style.border_right; - let bottom = style.border_bottom; + let left = style.border_left.0; + let top = style.border_top.0; + let right = style.border_right.0; + let bottom = style.border_bottom.0; let border_color = style.border_color; if left == top && top == right && right == bottom && bottom == left && left > 0.0 { - let half = left as f64 / 2.0; + let half = left / 2.0; let rect = size.to_rect().inflate(-half, -half); - let radius = style.border_radius; + let radius = style.border_radius.0; if radius > 0.0 { - cx.stroke( - &rect.to_rounded_rect(radius as f64), - border_color, - left as f64, - ); + cx.stroke(&rect.to_rounded_rect(radius), border_color, left); } else { - cx.stroke(&rect, border_color, left as f64); + cx.stroke(&rect, border_color, left); } } else { if left > 0.0 { - let half = left as f64 / 2.0; + let half = left / 2.0; cx.stroke( &Line::new(Point::new(half, 0.0), Point::new(half, size.height)), border_color, - left as f64, + left, ); } if right > 0.0 { - let half = right as f64 / 2.0; + let half = right / 2.0; cx.stroke( &Line::new( Point::new(size.width - half, 0.0), Point::new(size.width - half, size.height), ), border_color, - right as f64, + right, ); } if top > 0.0 { - let half = top as f64 / 2.0; + let half = top / 2.0; cx.stroke( &Line::new(Point::new(0.0, half), Point::new(size.width, half)), border_color, - top as f64, + top, ); } if bottom > 0.0 { - let half = bottom as f64 / 2.0; + let half = bottom / 2.0; cx.stroke( &Line::new( Point::new(0.0, size.height - half), Point::new(size.width, size.height - half), ), border_color, - bottom as f64, + bottom, ); } } diff --git a/src/views/clip.rs b/src/views/clip.rs index 71f5c698..31d8d217 100644 --- a/src/views/clip.rs +++ b/src/views/clip.rs @@ -82,13 +82,13 @@ impl View for Clip { fn paint(&mut self, cx: &mut crate::context::PaintCx) { cx.save(); let style = cx.get_computed_style(self.id); - let radius = style.border_radius; + let radius = style.border_radius.0; let size = cx .get_layout(self.id) .map(|layout| Size::new(layout.size.width as f64, layout.size.height as f64)) .unwrap_or_default(); if radius > 0.0 { - let rect = size.to_rect().to_rounded_rect(radius as f64); + let rect = size.to_rect().to_rounded_rect(radius); cx.clip(&rect); } else { cx.clip(&size.to_rect()); diff --git a/src/views/dyn_container.rs b/src/views/dyn_container.rs index fbc5afb0..17c2b10d 100644 --- a/src/views/dyn_container.rs +++ b/src/views/dyn_container.rs @@ -60,7 +60,7 @@ pub struct DynamicContainer { /// )) /// .style(|| { /// Style::BASE -/// .size_pct(100., 100.) +/// .size(100.pct(), 100.pct()) /// .items_center() /// .justify_center() /// .gap(points(10.)) diff --git a/src/views/label.rs b/src/views/label.rs index 9f69c2e9..9d977ba4 100644 --- a/src/views/label.rs +++ b/src/views/label.rs @@ -3,6 +3,7 @@ use std::{any::Any, fmt::Display}; use crate::{ cosmic_text::{Attrs, AttrsList, FamilyOwned, TextLayout}, style::{ComputedStyle, TextOverflow}, + unit::PxPct, }; use floem_reactive::create_effect; use floem_renderer::{ @@ -11,7 +12,7 @@ use floem_renderer::{ }; use kurbo::{Point, Rect}; use peniko::Color; -use taffy::{prelude::Node, style::Dimension}; +use taffy::prelude::Node; use crate::{ context::{EventCx, UpdateCx}, @@ -204,8 +205,8 @@ impl View for Label { let text_node = self.text_node.unwrap(); let style = Style::BASE - .width(Dimension::Points(width)) - .height(Dimension::Points(height)) + .width(width) + .height(height) .compute(&ComputedStyle::default()) .to_taffy_style(); let _ = cx.app_state_mut().taffy.set_style(text_node, style); @@ -232,12 +233,12 @@ impl View for Label { let style = cx.app_state_mut().get_computed_style(self.id); let text_overflow = style.text_overflow; let padding_left = match style.padding_left { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.width, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; let padding_right = match style.padding_right { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.width, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; let padding = padding_left + padding_right; diff --git a/src/views/rich_text.rs b/src/views/rich_text.rs index a10c4409..aff73743 100644 --- a/src/views/rich_text.rs +++ b/src/views/rich_text.rs @@ -3,13 +3,14 @@ use std::any::Any; use floem_reactive::create_effect; use floem_renderer::{cosmic_text::TextLayout, Renderer}; use kurbo::{Point, Rect}; -use taffy::{prelude::Node, style::Dimension}; +use taffy::prelude::Node; use crate::{ context::{EventCx, UpdateCx}, event::Event, id::Id, style::{ComputedStyle, Style, TextOverflow}, + unit::PxPct, view::{ChangeFlags, View}, }; @@ -106,8 +107,8 @@ impl View for RichText { let text_node = self.text_node.unwrap(); let style = Style::BASE - .width(Dimension::Points(width)) - .height(Dimension::Points(height)) + .width(width) + .height(height) .compute(&ComputedStyle::default()) .to_taffy_style(); let _ = cx.app_state_mut().taffy.set_style(text_node, style); @@ -119,12 +120,12 @@ impl View for RichText { let layout = cx.get_layout(self.id()).unwrap(); let style = cx.app_state_mut().get_computed_style(self.id); let padding_left = match style.padding_left { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.width, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; let padding_right = match style.padding_right { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.width, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; let padding = padding_left + padding_right; let available_width = layout.size.width - padding; diff --git a/src/views/scroll.rs b/src/views/scroll.rs index c6d57d9c..29addd32 100644 --- a/src/views/scroll.rs +++ b/src/views/scroll.rs @@ -2,16 +2,14 @@ use floem_reactive::create_effect; use floem_renderer::Renderer; use kurbo::{Point, Rect, Size, Vec2}; use peniko::Color; -use taffy::{ - prelude::Node, - style::{Dimension, Position}, -}; +use taffy::{prelude::Node, style::Position}; use crate::{ context::{AppState, LayoutCx, PaintCx}, event::Event, id::Id, style::{ComputedStyle, Style, StyleValue}, + unit::PxPct, view::{ChangeFlags, View}, }; @@ -247,20 +245,20 @@ impl Scroll { let style = app_state.get_computed_style(self.id); let padding_left = match style.padding_left { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.width, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; let padding_right = match style.padding_right { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.width, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; let padding_top = match style.padding_top { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.width, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; let padding_bottom = match style.padding_bottom { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.width, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; let mut actual_rect = self.size.to_rect(); actual_rect.x0 += padding_left as f64; @@ -589,10 +587,10 @@ impl View for Scroll { let child_node = self.child.layout_main(cx); let virtual_style = Style::BASE - .width(Dimension::Points(self.child_size.width as f32)) - .height(Dimension::Points(self.child_size.height as f32)) - .min_width(Dimension::Points(0.0)) - .min_height(Dimension::Points(0.0)) + .width(self.child_size.width) + .height(self.child_size.height) + .min_width(0.0) + .min_height(0.0) .compute(&ComputedStyle::default()) .to_taffy_style(); if self.virtual_node.is_none() { @@ -758,9 +756,9 @@ impl View for Scroll { self.scroll_bar_style.edge_width = edge_width; } let style = cx.get_computed_style(self.id); - let radius = style.border_radius; + let radius = style.border_radius.0; if radius > 0.0 { - let rect = self.actual_rect.to_rounded_rect(radius as f64); + let rect = self.actual_rect.to_rounded_rect(radius); cx.clip(&rect); } else { cx.clip(&self.actual_rect); diff --git a/src/views/svg.rs b/src/views/svg.rs index 95cebcc5..4fcf2572 100644 --- a/src/views/svg.rs +++ b/src/views/svg.rs @@ -41,12 +41,12 @@ pub fn checkbox(checked: crate::reactive::ReadSignal) -> Svg { svg(svg_str) .style(|base| { - base.width_px(20.) - .height_px(20.) + base.width(20.) + .height(20.) .border_color(Color::BLACK) .border(1.) .border_radius(5.) - .margin_right_px(5.) + .margin_right(5.) }) .keyboard_navigatable() } diff --git a/src/views/text_input.rs b/src/views/text_input.rs index 912aa146..ee5a89f6 100644 --- a/src/views/text_input.rs +++ b/src/views/text_input.rs @@ -1,11 +1,9 @@ use crate::action::exec_after; use crate::keyboard::KeyEvent; use crate::reactive::{create_effect, RwSignal}; +use crate::unit::PxPct; use crate::{context::LayoutCx, style::CursorStyle}; -use taffy::{ - prelude::{Layout, Node}, - style::Dimension, -}; +use taffy::prelude::{Layout, Node}; use floem_renderer::{ cosmic_text::{Cursor, Style as FontStyle, Weight}, @@ -570,12 +568,12 @@ impl View for TextInput { let style = cx.app_state.get_computed_style(self.id); let padding_left = match style.padding_left { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.width, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; let padding_top = match style.padding_top { - taffy::style::LengthPercentage::Points(padding) => padding, - taffy::style::LengthPercentage::Percent(pct) => pct * layout.size.height, + PxPct::Px(padding) => padding as f32, + PxPct::Pct(pct) => pct as f32 * layout.size.width, }; self.cursor_glyph_idx = self .text_buf @@ -634,8 +632,8 @@ impl View for TextInput { let text_node = self.text_node.unwrap(); let style = Style::BASE - .width(Dimension::Points(self.width)) - .height(Dimension::Points(self.height)) + .width(self.width) + .height(self.height) .compute(&ComputedStyle::default()) .to_taffy_style(); let _ = cx.app_state_mut().taffy.set_style(text_node, style); diff --git a/src/window_handle.rs b/src/window_handle.rs index 46f064a8..165011e2 100644 --- a/src/window_handle.rs +++ b/src/window_handle.rs @@ -13,6 +13,8 @@ use winit::{ window::{CursorIcon, Theme}, }; +#[cfg(target_os = "linux")] +use crate::unit::UnitExt; #[cfg(target_os = "linux")] use crate::views::{container_box, stack, Decorators}; use crate::{ @@ -84,10 +86,10 @@ impl WindowHandle { let view = with_scope(scope, move || { Box::new( stack(( - container_box(view_fn(window_id)).style(|s| s.size_pct(100.0, 100.0)), + container_box(view_fn(window_id)).style(|s| s.size(100.pct(), 100.pct())), context_menu_view(scope, window_id, context_menu, size), )) - .style(|s| s.size_pct(100.0, 100.0)), + .style(|s| s.size(100.pct(), 100.pct())), ) }); @@ -808,7 +810,7 @@ impl WindowHandle { AnimPropKind::BorderRadius => { let border_radius = view_state.computed_style.border_radius; AnimatedProp::BorderRadius { - from: border_radius as f64, + from: border_radius.0, to: val.get_f64(), } } @@ -1081,10 +1083,10 @@ fn context_menu_view( stack(( text(menu.title), svg(|| submenu_svg.to_string()).style(move |s| { - s.size_px(20.0, 20.0) + s.size(20.0, 20.0) .color(Color::rgb8(201, 201, 201)) - .margin_right_px(10.0) - .margin_left_px(20.0) + .margin_right(10.0) + .margin_left(20.0) .apply_if(!has_submenu, |s| s.hide()) }), )) @@ -1130,9 +1132,9 @@ fn context_menu_view( }) .disabled(move || !menu.enabled) .style(|s| { - s.width_pct(100.0) - .min_width_pct(100.0) - .padding_horiz_px(20.0) + s.width(100.pct()) + .min_width(100.pct()) + .padding_horiz(20.0) .justify_between() .items_center() }) @@ -1190,13 +1192,13 @@ fn context_menu_view( }) .style(move |s| { s.absolute() - .min_width_px(200.0) - .margin_top_px(-5.0) - .margin_left_px(menu_width.get() as f32) + .min_width(200.0) + .margin_top(-5.0) + .margin_left(menu_width.get() as f32) .flex_col() .border_radius(10.0) .background(Color::rgb8(44, 44, 44)) - .padding_px(5.0) + .padding(5.0) .cursor(CursorStyle::Default) .box_shadow_blur(5.0) .box_shadow_color(Color::BLACK) @@ -1206,17 +1208,17 @@ fn context_menu_view( ) }), )) - .style(|s| s.min_width_pct(100.0)), + .style(|s| s.min_width(100.pct())), ) - .style(|s| s.min_width_pct(100.0)) + .style(|s| s.min_width(100.pct())) } else { container_box(empty().style(|s| { - s.width_pct(100.0) - .height_px(1.0) - .margin_vert_px(5.0) + s.width(100.pct()) + .height(1.0) + .margin_vert(5.0) .background(Color::rgb8(92, 92, 92)) })) - .style(|s| s.min_width_pct(100.0).padding_horiz_px(20.0)) + .style(|s| s.min_width(100.pct()).padding_horiz(20.0)) } } @@ -1269,16 +1271,16 @@ fn context_menu_view( pos.y = window_size.height - menu_size.height; } s.absolute() - .min_width_px(200.0) + .min_width(200.0) .flex_col() .border_radius(10.0) .background(Color::rgb8(44, 44, 44)) .color(Color::rgb8(201, 201, 201)) .z_index(999) .line_height(2.0) - .padding_px(5.0) - .margin_left_px(pos.x as f32) - .margin_top_px(pos.y as f32) + .padding(5.0) + .margin_left(pos.x as f32) + .margin_top(pos.y as f32) .cursor(CursorStyle::Default) .apply_if(!is_acitve, |s| s.hide()) .box_shadow_blur(5.0) From e8c1d33454a0a0dc0d009dd140b93513357b55a0 Mon Sep 17 00:00:00 2001 From: Dongdong Zhou Date: Wed, 27 Sep 2023 21:11:26 +0100 Subject: [PATCH 3/3] add some quick shortcuts for 100% units --- src/style.rs | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/style.rs b/src/style.rs index 5a5076e0..dc8b54c8 100644 --- a/src/style.rs +++ b/src/style.rs @@ -325,10 +325,18 @@ define_styles!( ); impl Style { + pub fn width_full(self) -> Self { + self.width_pct(100.0) + } + pub fn width_pct(self, width: f64) -> Self { self.width(width.pct()) } + pub fn height_full(self) -> Self { + self.height_pct(100.0) + } + pub fn height_pct(self, height: f64) -> Self { self.height(height.pct()) } @@ -337,18 +345,34 @@ impl Style { self.width(width).height(height) } + pub fn size_full(self) -> Self { + self.size_pct(100.0, 100.0) + } + pub fn size_pct(self, width: f64, height: f64) -> Self { self.width(width.pct()).height(height.pct()) } + pub fn min_width_full(self) -> Self { + self.min_width_pct(100.0) + } + pub fn min_width_pct(self, min_width: f64) -> Self { self.min_width(min_width.pct()) } + pub fn min_height_full(self) -> Self { + self.min_height_pct(100.0) + } + pub fn min_height_pct(self, min_height: f64) -> Self { self.min_height(min_height.pct()) } + pub fn min_size_full(self) -> Self { + self.min_size_pct(100.0, 100.0) + } + pub fn min_size( self, min_width: impl Into, @@ -361,10 +385,18 @@ impl Style { self.min_size(min_width.pct(), min_height.pct()) } + pub fn max_width_full(self) -> Self { + self.max_width_pct(100.0) + } + pub fn max_width_pct(self, max_width: f64) -> Self { self.max_width(max_width.pct()) } + pub fn max_height_full(self) -> Self { + self.max_height_pct(100.0) + } + pub fn max_height_pct(self, max_height: f64) -> Self { self.max_height(max_height.pct()) } @@ -377,6 +409,10 @@ impl Style { self.max_width(max_width).max_height(max_height) } + pub fn max_size_full(self) -> Self { + self.max_size_pct(100.0, 100.0) + } + pub fn max_size_pct(self, max_width: f64, max_height: f64) -> Self { self.max_size(max_width.pct(), max_height.pct()) }