Replace responsive_style with Style.responsive_style

examples/responsive/src/main.rs

@@ -8,27 +8,26 @@ use floem::{
 
 fn app_view() -> impl View {
     stack({
-        (label(|| "Resize the window to see the magic")
-            .style(|s| {
-                s.border(1.0)
-                    .border_radius(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))
-            .responsive_style(ScreenSize::MD, |s| s.background(Color::ORANGE))
-            .responsive_style(ScreenSize::LG, |s| s.background(Color::GREEN))
-            .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(90.0.pct()).max_width(500.0)
-            })
-            .responsive_style(
-                // equivalent to: range(ScreenSize::LG..)
-                ScreenSize::LG | ScreenSize::XL | ScreenSize::XXL,
-                |s| s.width(300.0),
-            ),)
+        (label(|| "Resize the window to see the magic").style(|s| {
+            s.border(1.0)
+                .border_radius(10.0)
+                .padding(10.0)
+                .margin_horiz(10.0)
+                .responsive(ScreenSize::XS, |s| s.background(Color::CYAN))
+                .responsive(ScreenSize::SM, |s| s.background(Color::PURPLE))
+                .responsive(ScreenSize::MD, |s| s.background(Color::ORANGE))
+                .responsive(ScreenSize::LG, |s| s.background(Color::GREEN))
+                .responsive(ScreenSize::XL, |s| s.background(Color::PINK))
+                .responsive(ScreenSize::XXL, |s| s.background(Color::RED))
+                .responsive(range(ScreenSize::XS..ScreenSize::LG), |s| {
+                    s.width(90.0.pct()).max_width(500.0)
+                })
+                .responsive(
+                    // equivalent to: range(ScreenSize::LG..)
+                    ScreenSize::LG | ScreenSize::XL | ScreenSize::XXL,
+                    |s| s.width(300.0),
+                )
+        }),)
     })
     .style(|s| {
         s.size(100.pct(), 100.pct())

src/context.rs

@@ -24,7 +24,7 @@ use crate::{
     inspector::CaptureState,
     menu::Menu,
     pointer::PointerInputEvent,
-    responsive::{GridBreakpoints, ScreenSize, ScreenSizeBp},
+    responsive::{GridBreakpoints, ScreenSizeBp},
     style::{
         BuiltinStyle, CursorStyle, DisplayProp, LayoutProps, Style, StyleProp, StyleSelector,
         StyleSelectors,
@@ -59,7 +59,6 @@ pub struct ViewState {
     pub(crate) base_style: Option<Style>,
     pub(crate) style: Style,
     pub(crate) dragging_style: Option<Style>,
-    pub(crate) responsive_styles: HashMap<ScreenSizeBp, Vec<Style>>,
     pub(crate) combined_style: Style,
     pub(crate) event_listeners: HashMap<EventListener, Box<EventCallback>>,
     pub(crate) context_menu: Option<Box<MenuCallback>>,
@@ -84,7 +83,6 @@ impl ViewState {
             style: Style::new(),
             combined_style: Style::new(),
             dragging_style: None,
-            responsive_styles: HashMap::new(),
             children_nodes: Vec::new(),
             event_listeners: HashMap::new(),
             context_menu: None,
@@ -114,12 +112,6 @@ impl ViewState {
             self.style.clone()
         };
 
-        if let Some(resp_styles) = self.responsive_styles.get(&screen_size_bp) {
-            for style in resp_styles {
-                computed_style = computed_style.apply(style.clone());
-            }
-        }
-
         'anim: {
             if let Some(animation) = self.animation.as_mut() {
                 if animation.is_completed() && animation.is_auto_reverse() {
@@ -154,21 +146,10 @@ impl ViewState {
 
         self.has_style_selectors = computed_style.selectors();
 
-        computed_style.apply_interact_state(&interact_state);
+        computed_style.apply_interact_state(&interact_state, screen_size_bp);
 
         self.combined_style = computed_style;
     }
-
-    pub(crate) fn add_responsive_style(&mut self, size: ScreenSize, style: Style) {
-        let breakpoints = size.breakpoints();
-
-        for breakpoint in breakpoints {
-            self.responsive_styles
-                .entry(breakpoint)
-                .or_default()
-                .push(style.clone())
-        }
-    }
 }
 
 pub struct DragState {

src/id.rs

@@ -16,7 +16,6 @@ use crate::{
     animate::Animation,
     context::{EventCallback, MenuCallback, ResizeCallback},
     event::EventListener,
-    responsive::ScreenSize,
     style::{Style, StyleSelector},
     update::{UpdateMessage, CENTRAL_DEFERRED_UPDATE_MESSAGES, CENTRAL_UPDATE_MESSAGES},
 };
@@ -171,14 +170,6 @@ impl Id {
         self.add_update_message(UpdateMessage::Draggable { id: *self });
     }
 
-    pub fn update_responsive_style(&self, style: Style, size: ScreenSize) {
-        self.add_update_message(UpdateMessage::ResponsiveStyle {
-            id: *self,
-            style,
-            size,
-        });
-    }
-
     pub fn update_event_listener(&self, listener: EventListener, action: Box<EventCallback>) {
         self.add_update_message(UpdateMessage::EventListener {
             id: *self,

src/style.rs

@@ -47,6 +47,7 @@ use taffy::{
 
 use crate::context::InteractionState;
 use crate::context::LayoutCx;
+use crate::responsive::{ScreenSize, ScreenSizeBp};
 use crate::unit::{Px, PxPct, PxPctAuto, UnitExt};
 use crate::view::View;
 use crate::views::{empty, stack, text, Decorators};
@@ -358,6 +359,7 @@ impl<T> StyleMapValue<T> {
 pub struct Style {
     pub(crate) map: HashMap<StylePropRef, StyleMapValue<Rc<dyn Any>>>,
     pub(crate) selectors: HashMap<StyleSelector, Style>,
+    pub(crate) responsive: HashMap<ScreenSizeBp, Style>,
 }
 
 impl Style {
@@ -389,30 +391,42 @@ impl Style {
     }
 
     pub(crate) fn selectors(&self) -> StyleSelectors {
-        self.selectors
-            .iter()
-            .fold(StyleSelectors::default(), |mut s, (selector, map)| {
-                s.selectors |= map.selectors().selectors;
-                s.set(*selector, true)
-            })
-    }
+        let mut result =
+            self.selectors
+                .iter()
+                .fold(StyleSelectors::default(), |mut s, (selector, map)| {
+                    s.selectors |= map.selectors().selectors;
+                    s.set(*selector, true)
+                });
+        result.responsive |= !self.responsive.is_empty();
+        result
+    }
+
+    pub(crate) fn apply_interact_state(
+        &mut self,
+        interact_state: &InteractionState,
+        screen_size_bp: ScreenSizeBp,
+    ) {
+        if let Some(mut map) = self.responsive.remove(&screen_size_bp) {
+            map.apply_interact_state(interact_state, screen_size_bp);
+            self.apply_mut(map);
+        }
 
-    pub(crate) fn apply_interact_state(&mut self, interact_state: &InteractionState) {
         if interact_state.is_hovered && !interact_state.is_disabled {
             if let Some(mut map) = self.selectors.remove(&StyleSelector::Hover) {
-                map.apply_interact_state(interact_state);
+                map.apply_interact_state(interact_state, screen_size_bp);
                 self.apply_mut(map);
             }
         }
         if interact_state.is_focused {
             if let Some(mut map) = self.selectors.remove(&StyleSelector::Focus) {
-                map.apply_interact_state(interact_state);
+                map.apply_interact_state(interact_state, screen_size_bp);
                 self.apply_mut(map);
             }
         }
         if interact_state.is_disabled {
             if let Some(mut map) = self.selectors.remove(&StyleSelector::Disabled) {
-                map.apply_interact_state(interact_state);
+                map.apply_interact_state(interact_state, screen_size_bp);
                 self.apply_mut(map);
             }
         }
@@ -422,15 +436,15 @@ impl Style {
 
         if focused_keyboard {
             if let Some(mut map) = self.selectors.remove(&StyleSelector::FocusVisible) {
-                map.apply_interact_state(interact_state);
+                map.apply_interact_state(interact_state, screen_size_bp);
                 self.apply_mut(map);
             }
         }
 
         let active_mouse = interact_state.is_hovered && !interact_state.using_keyboard_navigation;
         if interact_state.is_clicking && (active_mouse || focused_keyboard) {
             if let Some(mut map) = self.selectors.remove(&StyleSelector::Active) {
-                map.apply_interact_state(interact_state);
+                map.apply_interact_state(interact_state, screen_size_bp);
                 self.apply_mut(map);
             }
         }
@@ -459,6 +473,15 @@ impl Style {
         }
     }
 
+    fn set_breakpoint(&mut self, breakpoint: ScreenSizeBp, map: Style) {
+        match self.responsive.entry(breakpoint) {
+            Entry::Occupied(mut e) => e.get_mut().apply_mut(map),
+            Entry::Vacant(e) => {
+                e.insert(map);
+            }
+        }
+    }
+
     pub(crate) fn builtin(&self) -> BuiltinStyle<'_> {
         BuiltinStyle { style: self }
     }
@@ -468,6 +491,9 @@ impl Style {
         for (selector, map) in over.selectors {
             self.set_selector(selector, map);
         }
+        for (breakpoint, map) in over.responsive {
+            self.set_breakpoint(breakpoint, map);
+        }
     }
 
     /// Apply another `Style` to this style, returning a new `Style` with the overrides
@@ -525,21 +551,24 @@ pub enum StyleSelector {
 #[derive(Copy, Clone, Debug, Eq, PartialEq, Hash, Default)]
 pub(crate) struct StyleSelectors {
     selectors: u8,
+    responsive: bool,
 }
 
 impl StyleSelectors {
-    pub(crate) fn set(self, selector: StyleSelector, value: bool) -> Self {
+    pub(crate) fn set(mut self, selector: StyleSelector, value: bool) -> Self {
         let v = (selector as isize).try_into().unwrap();
         let bit = 1_u8.checked_shl(v).unwrap();
-        StyleSelectors {
-            selectors: (self.selectors & !bit) | ((value as u8) << v),
-        }
+        self.selectors = (self.selectors & !bit) | ((value as u8) << v);
+        self
     }
     pub(crate) fn has(self, selector: StyleSelector) -> bool {
         let v = (selector as isize).try_into().unwrap();
         let bit = 1_u8.checked_shl(v).unwrap();
         self.selectors & bit != 0
     }
+    pub(crate) fn has_responsive(self) -> bool {
+        self.responsive
+    }
 }
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
@@ -817,6 +846,18 @@ impl Style {
         self.selector(StyleSelector::Active, style)
     }
 
+    pub fn responsive(
+        mut self,
+        size: ScreenSize,
+        style: impl Fn(Style) -> Style + 'static,
+    ) -> Self {
+        let over = style(Style::default());
+        for breakpoint in size.breakpoints() {
+            self.set_breakpoint(breakpoint, over.clone());
+        }
+        self
+    }
+
     pub fn width_full(self) -> Self {
         self.width_pct(100.0)
     }

src/update.rs

@@ -9,7 +9,6 @@ use crate::{
     event::EventListener,
     id::Id,
     menu::Menu,
-    responsive::ScreenSize,
     style::{Style, StyleSelector},
 };
 
@@ -53,11 +52,6 @@ pub(crate) enum UpdateMessage {
         id: Id,
         style: Style,
     },
-    ResponsiveStyle {
-        id: Id,
-        style: Style,
-        size: ScreenSize,
-    },
     StyleSelector {
         id: Id,
         selector: StyleSelector,

src/view.rs

@@ -583,7 +583,7 @@ pub trait View {
             }
             Event::WindowResized(_) => {
                 if let Some(view_state) = cx.app_state.view_states.get(&self.id()) {
-                    if !view_state.responsive_styles.is_empty() {
+                    if view_state.has_style_selectors.has_responsive() {
                         cx.app_state.request_layout(self.id());
                     }
                 }

src/views/decorator.rs

@@ -6,7 +6,6 @@ use crate::{
     animate::Animation,
     event::{Event, EventListener},
     menu::Menu,
-    responsive::ScreenSize,
     style::{Style, StyleSelector},
     view::View,
 };
@@ -92,15 +91,6 @@ pub trait Decorators: View + Sized {
         self
     }
 
-    fn responsive_style(self, size: ScreenSize, style: impl Fn(Style) -> Style + 'static) -> Self {
-        let id = self.id();
-        create_effect(move |_| {
-            let style = style(Style::new());
-            id.update_responsive_style(style, size);
-        });
-        self
-    }
-
     fn disabled(self, disabled_fn: impl Fn() -> bool + 'static) -> Self {
         let id = self.id();
 

src/window_handle.rs

@@ -700,11 +700,6 @@ impl WindowHandle {
                         state.style = style;
                         cx.request_layout(id);
                     }
-                    UpdateMessage::ResponsiveStyle { id, style, size } => {
-                        let state = cx.app_state.view_state(id);
-
-                        state.add_responsive_style(size, style);
-                    }
                     UpdateMessage::StyleSelector {
                         id,
                         style,