zng_wgt_scroll/
thumb.rs

Help
1//! Thumb widget, properties and nodes..
2
3use super::*;
4use scrollbar::ORIENTATION_VAR;
5use zng_ext_input::mouse::{ClickMode, MOUSE_INPUT_EVENT, MOUSE_MOVE_EVENT};
6use zng_wgt_fill::background_color;
7use zng_wgt_input::{click_mode, is_cap_pressed, is_hovered, pointer_capture::capture_pointer};
8
9/// Scrollbar thumb widget.
10#[widget($crate::Thumb)]
11pub struct Thumb(WidgetBase);
12impl Thumb {
13    fn widget_intrinsic(&mut self) {
14        widget_set! {
15            self;
16            background_color = rgba(200, 200, 200, 50.pct());
17            capture_pointer = true;
18            click_mode = ClickMode::default(); // scrollbar sets to repeat
19
20            when *#is_hovered {
21                background_color = rgba(200, 200, 200, 70.pct());
22            }
23
24            when *#is_cap_pressed {
25                background_color = rgba(200, 200, 200, 90.pct());
26            }
27        }
28
29        self.widget_builder().push_build_action(on_build);
30    }
31}
32
33/// Viewport/content ratio.
34///
35/// This becomes the height for vertical and width for horizontal.
36#[property(LAYOUT, capture, widget_impl(Thumb))]
37pub fn viewport_ratio(ratio: impl IntoVar<Factor>) {}
38
39/// Content offset.
40#[property(LAYOUT, capture, widget_impl(Thumb))]
41pub fn offset(offset: impl IntoVar<Factor>) {}
42
43/// Width if orientation is vertical, otherwise height if orientation is horizontal.
44#[property(SIZE, capture, default(16), widget_impl(Thumb))]
45pub fn cross_length(length: impl IntoVar<Length>) {}
46
47fn on_build(wgt: &mut WidgetBuilding) {
48    let cross_length = wgt.capture_var_or_else::<Length, _>(property_id!(cross_length), || 16);
49    wgt.push_intrinsic(NestGroup::SIZE, "orientation-size", move |child| {
50        zng_wgt_size_offset::size(
51            child,
52            merge_var!(ORIENTATION_VAR, THUMB_VIEWPORT_RATIO_VAR, cross_length, |o, r, l| {
53                match o {
54                    scrollbar::Orientation::Vertical => Size::new(l.clone(), *r),
55                    scrollbar::Orientation::Horizontal => Size::new(*r, l.clone()),
56                }
57            }),
58        )
59    });
60
61    wgt.push_intrinsic(NestGroup::LAYOUT, "thumb_layout", thumb_layout);
62
63    let viewport_ratio = wgt.capture_var_or_else(property_id!(viewport_ratio), || 1.fct());
64    let offset = wgt.capture_var_or_else(property_id!(offset), || 0.fct());
65
66    wgt.push_intrinsic(NestGroup::CONTEXT, "thumb-context", move |child| {
67        let child = with_context_var(child, THUMB_VIEWPORT_RATIO_VAR, viewport_ratio);
68        with_context_var(child, THUMB_OFFSET_VAR, offset)
69    });
70}
71
72fn thumb_layout(child: impl UiNode) -> impl UiNode {
73    let mut content_length = Px(0);
74    let mut viewport_length = Px(0);
75    let mut thumb_length = Px(0);
76    let mut scale_factor = 1.fct();
77
78    let mut mouse_down = None::<(Px, Factor)>;
79
80    match_node(child, move |_, op| match op {
81        UiNodeOp::Init => {
82            WIDGET
83                .sub_event(&MOUSE_MOVE_EVENT)
84                .sub_event(&MOUSE_INPUT_EVENT)
85                .sub_var_layout(&THUMB_OFFSET_VAR);
86        }
87        UiNodeOp::Event { update } => {
88            if let Some((md, start_offset)) = mouse_down {
89                if let Some(args) = MOUSE_MOVE_EVENT.on(update) {
90                    let bounds = WIDGET.bounds().inner_bounds();
91                    let (mut offset, cancel_offset, bounds_min, bounds_max) = match ORIENTATION_VAR.get() {
92                        scrollbar::Orientation::Vertical => (
93                            args.position.y.to_px(scale_factor),
94                            args.position.x.to_px(scale_factor),
95                            bounds.min_x(),
96                            bounds.max_x(),
97                        ),
98                        scrollbar::Orientation::Horizontal => (
99                            args.position.x.to_px(scale_factor),
100                            args.position.y.to_px(scale_factor),
101                            bounds.min_y(),
102                            bounds.max_y(),
103                        ),
104                    };
105
106                    let cancel_margin = Dip::new(40).to_px(scale_factor);
107                    let offset = if cancel_offset < bounds_min - cancel_margin || cancel_offset > bounds_max + cancel_margin {
108                        // pointer moved outside of the thumb + 40, snap back to initial
109                        start_offset
110                    } else {
111                        offset -= md;
112
113                        let max_length = viewport_length - thumb_length;
114                        let start_offset = max_length * start_offset.0;
115
116                        let offset = offset + start_offset;
117                        let offset = (offset.0 as f32 / max_length.0 as f32).clamp(0.0, 1.0);
118
119                        // snap to pixel
120                        let max_length = viewport_length - content_length;
121                        let offset = max_length * offset;
122                        let offset = offset.0 as f32 / max_length.0 as f32;
123                        offset.fct()
124                    };
125
126                    THUMB_OFFSET_VAR.set(offset).expect("THUMB_OFFSET_VAR is read-only");
127                    WIDGET.layout();
128
129                    args.propagation().stop();
130                } else if let Some(args) = MOUSE_INPUT_EVENT.on(update) {
131                    if args.is_primary() && args.is_mouse_up() {
132                        mouse_down = None;
133
134                        args.propagation().stop();
135                    }
136                }
137            } else if let Some(args) = MOUSE_INPUT_EVENT.on(update) {
138                if args.is_primary() && args.is_mouse_down() {
139                    let a = match ORIENTATION_VAR.get() {
140                        scrollbar::Orientation::Vertical => args.position.y.to_px(scale_factor),
141                        scrollbar::Orientation::Horizontal => args.position.x.to_px(scale_factor),
142                    };
143                    mouse_down = Some((a, THUMB_OFFSET_VAR.get()));
144
145                    args.propagation().stop();
146                }
147            }
148        }
149        UiNodeOp::Layout { wl, .. } => {
150            let bar_size = LAYOUT.constraints().fill_size();
151            let mut final_offset = PxVector::zero();
152            let (bar_length, final_d) = match ORIENTATION_VAR.get() {
153                scrollbar::Orientation::Vertical => (bar_size.height, &mut final_offset.y),
154                scrollbar::Orientation::Horizontal => (bar_size.width, &mut final_offset.x),
155            };
156
157            let ratio = THUMB_VIEWPORT_RATIO_VAR.get();
158            let tl = bar_length * ratio;
159            *final_d = (bar_length - tl) * THUMB_OFFSET_VAR.get();
160
161            scale_factor = LAYOUT.scale_factor();
162            content_length = bar_length / ratio;
163            viewport_length = bar_length;
164            thumb_length = tl;
165
166            wl.translate(final_offset);
167        }
168        _ => {}
169    })
170}
171
172context_var! {
173    static THUMB_VIEWPORT_RATIO_VAR: Factor = 1.fct();
174    static THUMB_OFFSET_VAR: Factor = 0.fct();
175}
zng_wgt_scroll/thumb.rs

zng_wgt_scroll/
thumb.rs
