Implement reactive-rendering for slider

widget/src/slider.rs

@@ -37,6 +37,7 @@ use crate::core::mouse;
 use crate::core::renderer;
 use crate::core::touch;
 use crate::core::widget::tree::{self, Tree};
+use crate::core::window;
 use crate::core::{
     self, Background, Clipboard, Color, Element, Layout, Length, Pixels, Point,
     Rectangle, Shell, Size, Theme, Widget,
@@ -95,6 +96,7 @@ where
     width: Length,
     height: f32,
     class: Theme::Class<'a>,
+    status: Option<Status>,
 }
 
 impl<'a, T, Message, Theme> Slider<'a, T, Message, Theme>
@@ -141,6 +143,7 @@ where
             width: Length::Fill,
             height: Self::DEFAULT_HEIGHT,
             class: Theme::default(),
+            status: None,
         }
     }
 
@@ -253,16 +256,40 @@ where
     ) -> event::Status {
         let state = tree.state.downcast_mut::<State>();
 
-        let is_dragging = state.is_dragging;
+        let mut update = || {
-        let current_value = self.value;
+            let current_value = self.value;
 
-        let locate = |cursor_position: Point| -> Option<T> {
+            let locate = |cursor_position: Point| -> Option<T> {
-            let bounds = layout.bounds();
+                let bounds = layout.bounds();
-            let new_value = if cursor_position.x <= bounds.x {
+
-                Some(*self.range.start())
+                let new_value = if cursor_position.x <= bounds.x {
-            } else if cursor_position.x >= bounds.x + bounds.width {
+                    Some(*self.range.start())
-                Some(*self.range.end())
+                } else if cursor_position.x >= bounds.x + bounds.width {
-            } else {
+                    Some(*self.range.end())
+                } else {
+                    let step = if state.keyboard_modifiers.shift() {
+                        self.shift_step.unwrap_or(self.step)
+                    } else {
+                        self.step
+                    }
+                    .into();
+
+                    let start = (*self.range.start()).into();
+                    let end = (*self.range.end()).into();
+
+                    let percent = f64::from(cursor_position.x - bounds.x)
+                        / f64::from(bounds.width);
+
+                    let steps = (percent * (end - start) / step).round();
+                    let value = steps * step + start;
+
+                    T::from_f64(value.min(end))
+                };
+
+                new_value
+            };
+
+            let increment = |value: T| -> Option<T> {
                 let step = if state.keyboard_modifiers.shift() {
                     self.shift_step.unwrap_or(self.step)
                 } else {
@@ -270,168 +297,167 @@ where
                 }
                 .into();
 
-                let start = (*self.range.start()).into();
+                let steps = (value.into() / step).round();
-                let end = (*self.range.end()).into();
+                let new_value = step * (steps + 1.0);
 
-                let percent = f64::from(cursor_position.x - bounds.x)
+                if new_value > (*self.range.end()).into() {
-                    / f64::from(bounds.width);
+                    return Some(*self.range.end());
+                }
 
-                let steps = (percent * (end - start) / step).round();
+                T::from_f64(new_value)
-                let value = steps * step + start;
-
-                T::from_f64(value.min(end))
             };
 
-            new_value
+            let decrement = |value: T| -> Option<T> {
-        };
+                let step = if state.keyboard_modifiers.shift() {
+                    self.shift_step.unwrap_or(self.step)
+                } else {
+                    self.step
+                }
+                .into();
 
-        let increment = |value: T| -> Option<T> {
+                let steps = (value.into() / step).round();
-            let step = if state.keyboard_modifiers.shift() {
+                let new_value = step * (steps - 1.0);
-                self.shift_step.unwrap_or(self.step)
-            } else {
-                self.step
-            }
-            .into();
 
-            let steps = (value.into() / step).round();
+                if new_value < (*self.range.start()).into() {
-            let new_value = step * (steps + 1.0);
+                    return Some(*self.range.start());
+                }
 
-            if new_value > (*self.range.end()).into() {
+                T::from_f64(new_value)
-                return Some(*self.range.end());
+            };
-            }
 
-            T::from_f64(new_value)
+            let change = |new_value: T| {
-        };
+                if (self.value.into() - new_value.into()).abs() > f64::EPSILON {
+                    shell.publish((self.on_change)(new_value));
 
-        let decrement = |value: T| -> Option<T> {
+                    self.value = new_value;
-            let step = if state.keyboard_modifiers.shift() {
+                }
-                self.shift_step.unwrap_or(self.step)
+            };
-            } else {
-                self.step
-            }
-            .into();
 
-            let steps = (value.into() / step).round();
+            match &event {
-            let new_value = step * (steps - 1.0);
+                Event::Mouse(mouse::Event::ButtonPressed(
+                    mouse::Button::Left,
+                ))
+                | Event::Touch(touch::Event::FingerPressed { .. }) => {
+                    if let Some(cursor_position) =
+                        cursor.position_over(layout.bounds())
+                    {
+                        if state.keyboard_modifiers.command() {
+                            let _ = self.default.map(change);
+                            state.is_dragging = false;
+                        } else {
+                            let _ = locate(cursor_position).map(change);
+                            state.is_dragging = true;
+                        }
 
-            if new_value < (*self.range.start()).into() {
+                        return event::Status::Captured;
-                return Some(*self.range.start());
+                    }
-            }
+                }
-
+                Event::Mouse(mouse::Event::ButtonReleased(
-            T::from_f64(new_value)
+                    mouse::Button::Left,
-        };
+                ))
-
+                | Event::Touch(touch::Event::FingerLifted { .. })
-        let change = |new_value: T| {
+                | Event::Touch(touch::Event::FingerLost { .. }) => {
-            if (self.value.into() - new_value.into()).abs() > f64::EPSILON {
+                    if state.is_dragging {
-                shell.publish((self.on_change)(new_value));
+                        if let Some(on_release) = self.on_release.clone() {
-
+                            shell.publish(on_release);
-                self.value = new_value;
+                        }
-            }
-        };
-
-        match event {
-            Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left))
-            | Event::Touch(touch::Event::FingerPressed { .. }) => {
-                if let Some(cursor_position) =
-                    cursor.position_over(layout.bounds())
-                {
-                    if state.keyboard_modifiers.command() {
-                        let _ = self.default.map(change);
                         state.is_dragging = false;
-                    } else {
+
-                        let _ = locate(cursor_position).map(change);
+                        return event::Status::Captured;
-                        state.is_dragging = true;
                     }
-
-                    return event::Status::Captured;
                 }
-            }
+                Event::Mouse(mouse::Event::CursorMoved { .. })
-            Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Left))
+                | Event::Touch(touch::Event::FingerMoved { .. }) => {
-            | Event::Touch(touch::Event::FingerLifted { .. })
+                    if state.is_dragging {
-            | Event::Touch(touch::Event::FingerLost { .. }) => {
+                        let _ = cursor.position().and_then(locate).map(change);
-                if is_dragging {
+
-                    if let Some(on_release) = self.on_release.clone() {
+                        return event::Status::Captured;
-                        shell.publish(on_release);
                     }
-                    state.is_dragging = false;
-
-                    return event::Status::Captured;
                 }
-            }
+                Event::Mouse(mouse::Event::WheelScrolled { delta })
-            Event::Mouse(mouse::Event::CursorMoved { .. })
+                    if state.keyboard_modifiers.control() =>
-            | Event::Touch(touch::Event::FingerMoved { .. }) => {
+                {
-                if is_dragging {
+                    if cursor.is_over(layout.bounds()) {
-                    let _ = cursor.position().and_then(locate).map(change);
+                        let delta = match delta {
+                            mouse::ScrollDelta::Lines { x: _, y } => y,
+                            mouse::ScrollDelta::Pixels { x: _, y } => y,
+                        };
 
-                    return event::Status::Captured;
+                        if *delta < 0.0 {
-                }
+                            let _ = decrement(current_value).map(change);
-            }
+                        } else {
-            Event::Mouse(mouse::Event::WheelScrolled { delta })
-                if state.keyboard_modifiers.control() =>
-            {
-                if cursor.is_over(layout.bounds()) {
-                    let delta = match delta {
-                        mouse::ScrollDelta::Lines { x: _, y } => y,
-                        mouse::ScrollDelta::Pixels { x: _, y } => y,
-                    };
-
-                    if delta < 0.0 {
-                        let _ = decrement(current_value).map(change);
-                    } else {
-                        let _ = increment(current_value).map(change);
-                    }
-
-                    return event::Status::Captured;
-                }
-            }
-            Event::Keyboard(keyboard::Event::KeyPressed { key, .. }) => {
-                if cursor.is_over(layout.bounds()) {
-                    match key {
-                        Key::Named(key::Named::ArrowUp) => {
                             let _ = increment(current_value).map(change);
                         }
-                        Key::Named(key::Named::ArrowDown) => {
-                            let _ = decrement(current_value).map(change);
-                        }
-                        _ => (),
-                    }
 
-                    return event::Status::Captured;
+                        return event::Status::Captured;
+                    }
                 }
+                Event::Keyboard(keyboard::Event::KeyPressed {
+                    key, ..
+                }) => {
+                    if cursor.is_over(layout.bounds()) {
+                        match key {
+                            Key::Named(key::Named::ArrowUp) => {
+                                let _ = increment(current_value).map(change);
+                            }
+                            Key::Named(key::Named::ArrowDown) => {
+                                let _ = decrement(current_value).map(change);
+                            }
+                            _ => (),
+                        }
+
+                        return event::Status::Captured;
+                    }
+                }
+                Event::Keyboard(keyboard::Event::ModifiersChanged(
+                    modifiers,
+                )) => {
+                    state.keyboard_modifiers = *modifiers;
+                }
+                _ => {}
             }
-            Event::Keyboard(keyboard::Event::ModifiersChanged(modifiers)) => {
+
-                state.keyboard_modifiers = modifiers;
+            event::Status::Ignored
+        };
+
+        let update_status = update();
+
+        let current_status = if state.is_dragging {
+            Status::Dragged
+        } else if cursor.is_over(layout.bounds()) {
+            Status::Hovered
+        } else {
+            Status::Active
+        };
+
+        if let Event::Window(window::Event::RedrawRequested(_now)) = event {
+            self.status = Some(current_status);
+        } else {
+            match self.status {
+                Some(status) if status != current_status => {
+                    shell.request_redraw(window::RedrawRequest::NextFrame);
+                }
+                _ => {}
             }
-            _ => {}
         }
 
-        event::Status::Ignored
+        update_status
     }
 
     fn draw(
         &self,
-        tree: &Tree,
+        _tree: &Tree,
         renderer: &mut Renderer,
         theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
-        cursor: mouse::Cursor,
+        _cursor: mouse::Cursor,
         _viewport: &Rectangle,
     ) {
-        let state = tree.state.downcast_ref::<State>();
         let bounds = layout.bounds();
-        let is_mouse_over = cursor.is_over(bounds);
 
-        let style = theme.style(
+        let style =
-            &self.class,
+            theme.style(&self.class, self.status.unwrap_or(Status::Active));
-            if state.is_dragging {
-                Status::Dragged
-            } else if is_mouse_over {
-                Status::Hovered
-            } else {
-                Status::Active
-            },
-        );
 
         let (handle_width, handle_height, handle_border_radius) =
             match style.handle.shape {

winit/src/program.rs

@@ -1161,6 +1161,8 @@ async fn run_instance<P, C>(
                         }
 
                         if !redraw_queue.is_empty() {
+                            // The queue should be fairly short, so we can
+                            // simply sort all of the time.
                             redraw_queue.sort_by(
                                 |(target_a, _), (target_b, _)| {
                                     target_a.cmp(target_b).reverse()