Add hover effects to scroll bars (#122)

src/app_handle.rs

@@ -129,7 +129,9 @@ impl ApplicationHandle {
                 window_handle.pointer_move(point);
             }
             WindowEvent::CursorEntered { .. } => {}
-            WindowEvent::CursorLeft { .. } => {}
+            WindowEvent::CursorLeft { .. } => {
+                window_handle.pointer_leave();
+            }
             WindowEvent::MouseWheel { delta, .. } => {
                 window_handle.mouse_wheel(delta);
             }

src/context.rs

@@ -667,6 +667,9 @@ pub struct LayoutCx<'a> {
     pub(crate) viewport: Option<Rect>,
     pub(crate) color: Option<Color>,
     pub(crate) scroll_bar_color: Option<Color>,
+    pub(crate) scroll_bar_hover_color: Option<Color>,
+    pub(crate) scroll_bar_drag_color: Option<Color>,
+    pub(crate) scroll_bar_bg_active_color: Option<Color>,
     pub(crate) scroll_bar_rounded: Option<bool>,
     pub(crate) scroll_bar_thickness: Option<f32>,
     pub(crate) scroll_bar_edge_width: Option<f32>,
@@ -679,6 +682,9 @@ pub struct LayoutCx<'a> {
     pub(crate) saved_viewports: Vec<Option<Rect>>,
     pub(crate) saved_colors: Vec<Option<Color>>,
     pub(crate) saved_scroll_bar_colors: Vec<Option<Color>>,
+    pub(crate) saved_scroll_bar_hover_colors: Vec<Option<Color>>,
+    pub(crate) saved_scroll_bar_drag_colors: Vec<Option<Color>>,
+    pub(crate) saved_scroll_bar_bg_active_colors: Vec<Option<Color>>,
     pub(crate) saved_scroll_bar_roundeds: Vec<Option<bool>>,
     pub(crate) saved_scroll_bar_thicknesses: Vec<Option<f32>>,
     pub(crate) saved_scroll_bar_edge_widths: Vec<Option<f32>>,
@@ -711,10 +717,16 @@ impl<'a> LayoutCx<'a> {
             saved_line_heights: Vec::new(),
             saved_window_origins: Vec::new(),
             scroll_bar_color: None,
+            scroll_bar_hover_color: None,
+            scroll_bar_drag_color: None,
+            scroll_bar_bg_active_color: None,
             scroll_bar_rounded: None,
             scroll_bar_thickness: None,
             scroll_bar_edge_width: None,
             saved_scroll_bar_colors: Vec::new(),
+            saved_scroll_bar_hover_colors: Vec::new(),
+            saved_scroll_bar_drag_colors: Vec::new(),
+            saved_scroll_bar_bg_active_colors: Vec::new(),
             saved_scroll_bar_roundeds: Vec::new(),
             saved_scroll_bar_thicknesses: Vec::new(),
             saved_scroll_bar_edge_widths: Vec::new(),
@@ -724,6 +736,9 @@ impl<'a> LayoutCx<'a> {
     pub(crate) fn clear(&mut self) {
         self.viewport = None;
         self.scroll_bar_color = None;
+        self.scroll_bar_hover_color = None;
+        self.scroll_bar_drag_color = None;
+        self.scroll_bar_bg_active_color = None;
         self.scroll_bar_rounded = None;
         self.scroll_bar_thickness = None;
         self.scroll_bar_edge_width = None;
@@ -732,6 +747,9 @@ impl<'a> LayoutCx<'a> {
         self.saved_colors.clear();
         self.saved_viewports.clear();
         self.saved_scroll_bar_colors.clear();
+        self.saved_scroll_bar_hover_colors.clear();
+        self.saved_scroll_bar_drag_colors.clear();
+        self.saved_scroll_bar_bg_active_colors.clear();
         self.saved_scroll_bar_roundeds.clear();
         self.saved_scroll_bar_thicknesses.clear();
         self.saved_scroll_bar_edge_widths.clear();
@@ -747,6 +765,12 @@ impl<'a> LayoutCx<'a> {
         self.saved_viewports.push(self.viewport);
         self.saved_colors.push(self.color);
         self.saved_scroll_bar_colors.push(self.scroll_bar_color);
+        self.saved_scroll_bar_hover_colors
+            .push(self.scroll_bar_hover_color);
+        self.saved_scroll_bar_drag_colors
+            .push(self.scroll_bar_drag_color);
+        self.saved_scroll_bar_bg_active_colors
+            .push(self.scroll_bar_bg_active_color);
         self.saved_scroll_bar_roundeds.push(self.scroll_bar_rounded);
         self.saved_scroll_bar_thicknesses
             .push(self.scroll_bar_thickness);
@@ -764,6 +788,12 @@ impl<'a> LayoutCx<'a> {
         self.viewport = self.saved_viewports.pop().unwrap_or_default();
         self.color = self.saved_colors.pop().unwrap_or_default();
         self.scroll_bar_color = self.saved_scroll_bar_colors.pop().unwrap_or_default();
+        self.scroll_bar_hover_color = self.saved_scroll_bar_hover_colors.pop().unwrap_or_default();
+        self.scroll_bar_drag_color = self.saved_scroll_bar_drag_colors.pop().unwrap_or_default();
+        self.scroll_bar_bg_active_color = self
+            .saved_scroll_bar_bg_active_colors
+            .pop()
+            .unwrap_or_default();
         self.scroll_bar_rounded = self.saved_scroll_bar_roundeds.pop().unwrap_or_default();
         self.scroll_bar_thickness = self.saved_scroll_bar_thicknesses.pop().unwrap_or_default();
         self.scroll_bar_edge_width = self.saved_scroll_bar_edge_widths.pop().unwrap_or_default();
@@ -787,6 +817,18 @@ impl<'a> LayoutCx<'a> {
         self.scroll_bar_color
     }
 
+    pub fn current_scroll_bar_hover_color(&self) -> Option<Color> {
+        self.scroll_bar_hover_color
+    }
+
+    pub fn current_scroll_bar_drag_color(&self) -> Option<Color> {
+        self.scroll_bar_drag_color
+    }
+
+    pub fn current_scroll_bar_bg_active_color(&self) -> Option<Color> {
+        self.scroll_bar_bg_active_color
+    }
+
     pub fn current_scroll_bar_rounded(&self) -> Option<bool> {
         self.scroll_bar_rounded
     }

src/event.rs

@@ -49,6 +49,7 @@ pub enum Event {
     PointerUp(PointerInputEvent),
     PointerMove(PointerMoveEvent),
     PointerWheel(PointerWheelEvent),
+    PointerLeave,
     KeyDown(KeyEvent),
     KeyUp(KeyEvent),
     ImeEnabled,
@@ -76,6 +77,7 @@ impl Event {
             | Event::PointerUp(_)
             | Event::PointerMove(_)
             | Event::PointerWheel(_)
+            | Event::PointerLeave
             | Event::FocusGained
             | Event::FocusLost
             | Event::ImeEnabled
@@ -98,7 +100,8 @@ impl Event {
             Event::PointerDown(_)
             | Event::PointerUp(_)
             | Event::PointerMove(_)
-            | Event::PointerWheel(_) => true,
+            | Event::PointerWheel(_)
+            | Event::PointerLeave => true,
             Event::KeyDown(_)
             | Event::KeyUp(_)
             | Event::FocusGained
@@ -145,7 +148,8 @@ impl Event {
             | Event::ImeCommit(_)
             | Event::KeyDown(_)
             | Event::KeyUp(_) => false,
-            Event::PointerMove(_)
+            Event::PointerLeave
+            | Event::PointerMove(_)
             | Event::ThemeChanged(_)
             | Event::WindowClosed
             | Event::WindowResized(_)
@@ -163,7 +167,8 @@ impl Event {
             }
             Event::PointerMove(pointer_event) => Some(pointer_event.pos),
             Event::PointerWheel(pointer_event) => Some(pointer_event.pos),
-            Event::KeyDown(_)
+            Event::PointerLeave
+            | Event::KeyDown(_)
             | Event::KeyUp(_)
             | Event::FocusGained
             | Event::FocusLost
@@ -195,7 +200,8 @@ impl Event {
                 pointer_event.pos.x /= scale;
                 pointer_event.pos.y /= scale;
             }
-            Event::KeyDown(_)
+            Event::PointerLeave
+            | Event::KeyDown(_)
             | Event::KeyUp(_)
             | Event::FocusGained
             | Event::FocusLost
@@ -225,7 +231,8 @@ impl Event {
             Event::PointerWheel(pointer_event) => {
                 pointer_event.pos -= offset;
             }
-            Event::KeyDown(_)
+            Event::PointerLeave
+            | Event::KeyDown(_)
             | Event::KeyUp(_)
             | Event::FocusGained
             | Event::FocusLost
@@ -250,6 +257,7 @@ impl Event {
             Event::PointerUp(_) => Some(EventListener::PointerUp),
             Event::PointerMove(_) => Some(EventListener::PointerMove),
             Event::PointerWheel(_) => Some(EventListener::PointerWheel),
+            Event::PointerLeave => Some(EventListener::PointerLeave),
             Event::KeyDown(_) => Some(EventListener::KeyDown),
             Event::KeyUp(_) => Some(EventListener::KeyUp),
             Event::ImeEnabled => Some(EventListener::ImeEnabled),

src/id.rs

@@ -29,7 +29,7 @@ thread_local! {
 /// A stable identifier for an element.
 pub struct Id(u64);
 
-#[derive(Clone, Default)]
+#[derive(Clone, Default, Debug)]
 pub struct IdPath(pub(crate) Vec<Id>);
 
 impl Id {

src/style.rs

@@ -310,6 +310,9 @@ define_styles!(
     background background_sv nocb: Option<Color> = None,
     box_shadow box_shadow_sv nocb: Option<BoxShadow> = None,
     scroll_bar_color scroll_bar_color_sv nocb: Option<Color> = None,
+    scroll_bar_hover_color scroll_bar_hover_color_sv nocb: Option<Color> = None,
+    scroll_bar_drag_color scroll_bar_drag_color_sv nocb: Option<Color> = None,
+    scroll_bar_bg_active_color scroll_bar_bg_active_color_sv nocb: Option<Color> = None,
     scroll_bar_rounded scroll_bar_rounded_sv nocb: Option<bool> = None,
     scroll_bar_thickness scroll_bar_thickness_sv nocb: Option<Px> = None,
     scroll_bar_edge_width scroll_bar_edge_width_sv nocb: Option<Px> = None,
@@ -678,6 +681,21 @@ impl Style {
         self
     }
 
+    pub fn scroll_bar_hover_color(mut self, color: impl Into<StyleValue<Color>>) -> Self {
+        self.scroll_bar_hover_color = color.into().map(Some);
+        self
+    }
+
+    pub fn scroll_bar_drag_color(mut self, color: impl Into<StyleValue<Color>>) -> Self {
+        self.scroll_bar_drag_color = color.into().map(Some);
+        self
+    }
+
+    pub fn scroll_bar_bg_active_color(mut self, color: impl Into<StyleValue<Color>>) -> Self {
+        self.scroll_bar_bg_active_color = color.into().map(Some);
+        self
+    }
+
     pub fn scroll_bar_rounded(mut self, rounded: impl Into<StyleValue<bool>>) -> Self {
         self.scroll_bar_rounded = rounded.into().map(Some);
         self

src/view.rs

@@ -202,6 +202,18 @@ pub trait View {
         if style.scroll_bar_color.is_some() {
             cx.scroll_bar_color = style.scroll_bar_color;
         }
+        if style.scroll_bar_hover_color.is_some() {
+            cx.scroll_bar_hover_color = style.scroll_bar_hover_color;
+        }
+        if style.scroll_bar_drag_color.is_some() {
+            cx.scroll_bar_drag_color = style.scroll_bar_drag_color;
+        }
+        if style.scroll_bar_hover_color.is_some() {
+            cx.scroll_bar_hover_color = style.scroll_bar_hover_color;
+        }
+        if style.scroll_bar_bg_active_color.is_some() {
+            cx.scroll_bar_bg_active_color = style.scroll_bar_bg_active_color;
+        }
         if style.scroll_bar_rounded.is_some() {
             cx.scroll_bar_rounded = style.scroll_bar_rounded;
         }
@@ -389,9 +401,7 @@ pub trait View {
             // we're the parent of the event destination, so pass it on to the child
             if !id_path.is_empty() {
                 if let Some(child) = self.child_mut(id_path[0]) {
-                    if child.event_main(cx, Some(id_path), event.clone()) {
-                        return true;
-                    }
+                    return child.event_main(cx, Some(id_path), event.clone());
                 } else {
                     // we don't have the child, stop the event propagation
                     return false;