guise/input/

rangeslider.rs

//! `RangeSlider` — a two-thumb value track (gpui entity).
//!
//! Holds a `(low, high)` pair in `min..=max`, snapped to `step` and kept at
//! least `min_gap` apart. Each thumb is a real gpui drag source (`on_drag` +
//! `on_drag_move`), so dragging tracks the pointer even outside the element;
//! clicking the track jumps the nearest thumb; arrow keys nudge the last
//! active thumb. Emits [`RangeSliderEvent`] on change.
//!
//! ```ignore
//! let range = cx.new(|cx| RangeSlider::new(cx).min(0.0).max(100.0).value((20.0, 80.0)));
//! cx.subscribe(&range, |_this, _slider, event: &RangeSliderEvent, _cx| {
//!     let (low, high) = event.0;
//! })
//! .detach();
//! ```

use gpui::prelude::*;
use gpui::{
    canvas, div, px, relative, App, Bounds, Context, DragMoveEvent, Empty, Entity, EntityId,
    EventEmitter, FocusHandle, IntoElement, KeyDownEvent, MouseButton, MouseDownEvent, Pixels,
    SharedString, Window,
};

use crate::devtools::Probed;
use crate::reactive::Signal;
use crate::theme::{theme, ColorName, Size};

/// Emitted when either end of the range changes. Carries `(low, high)`.
#[derive(Debug, Clone, Copy)]
pub struct RangeSliderEvent(pub (f64, f64));

/// The drag payload for a thumb. `owner` scopes `on_drag_move` to the
/// instance that started the drag (the listener fires for every active drag
/// of this type in the window).
struct ThumbDrag {
    owner: EntityId,
    thumb: usize,
}

/// A two-thumb range slider. Create with `cx.new(|cx| RangeSlider::new(cx))`.
pub struct RangeSlider {
    value: (f64, f64),
    min: f64,
    max: f64,
    step: f64,
    min_gap: f64,
    color: ColorName,
    size: Size,
    focus: FocusHandle,
    disabled: bool,
    /// The thumb arrow keys move: the one last dragged or clicked toward.
    active: usize,
    /// Track bounds captured each frame (canvas trick) for click hit-testing.
    bounds: Bounds<Pixels>,
}

impl EventEmitter<RangeSliderEvent> for RangeSlider {}

impl RangeSlider {
    pub fn new(cx: &mut Context<Self>) -> Self {
        RangeSlider {
            value: (25.0, 75.0),
            min: 0.0,
            max: 100.0,
            step: 1.0,
            min_gap: 0.0,
            color: ColorName::Blue,
            size: Size::Md,
            focus: cx.focus_handle(),
            disabled: false,
            active: 0,
            bounds: Bounds::default(),
        }
    }

    /// The `(low, high)` pair. Set `min`/`max`/`step`/`min_gap` first — the
    /// value is normalized against them.
    pub fn value(mut self, value: (f64, f64)) -> Self {
        self.value = normalize_pair(value, self.min, self.max, self.step, self.min_gap);
        self
    }

    pub fn min(mut self, min: f64) -> Self {
        self.min = min;
        self
    }

    pub fn max(mut self, max: f64) -> Self {
        self.max = max;
        self
    }

    pub fn step(mut self, step: f64) -> Self {
        self.step = step.max(f64::EPSILON);
        self
    }

    /// Minimum distance the thumbs keep between each other (default 0).
    pub fn min_gap(mut self, min_gap: f64) -> Self {
        self.min_gap = min_gap.max(0.0);
        self
    }

    pub fn color(mut self, color: ColorName) -> Self {
        self.color = color;
        self
    }

    pub fn size(mut self, size: Size) -> Self {
        self.size = size;
        self
    }

    pub fn disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }

    /// The current `(low, high)` pair.
    pub fn value_pair(&self) -> (f64, f64) {
        self.value
    }

    /// Two-way bind this slider's range to a `Signal<(f64, f64)>`. The signal
    /// is the source of truth: the slider adopts its value now (normalized),
    /// drags write back through [`Signal::set_if_changed`], and signal writes
    /// move the thumbs without emitting [`RangeSliderEvent`]. Equality guards
    /// on both directions prevent update loops.
    pub fn bind(entity: &Entity<RangeSlider>, signal: &Signal<(f64, f64)>, cx: &mut App) {
        let initial = signal.get(cx);
        entity.update(cx, |this, cx| this.sync_value(initial, cx));
        let sink = signal.clone();
        cx.subscribe(entity, move |_slider, event: &RangeSliderEvent, cx| {
            sink.set_if_changed(cx, event.0);
        })
        .detach();
        let slider = entity.downgrade();
        cx.observe(signal.entity(), move |observed, cx| {
            let value = *observed.read(cx);
            slider
                .update(cx, |this, cx| this.sync_value(value, cx))
                .ok();
        })
        .detach();
    }

    /// Programmatic set: normalize and repaint without emitting an event.
    fn sync_value(&mut self, raw: (f64, f64), cx: &mut Context<Self>) {
        let next = normalize_pair(raw, self.min, self.max, self.step, self.min_gap);
        if next != self.value {
            self.value = next;
            cx.notify();
        }
    }

    fn fraction(&self, v: f64) -> f32 {
        if self.max <= self.min {
            0.0
        } else {
            (((v - self.min) / (self.max - self.min)) as f32).clamp(0.0, 1.0)
        }
    }

    /// Move one thumb toward `raw`, respecting step, bounds and the gap.
    fn set_thumb(&mut self, thumb: usize, raw: f64, cx: &mut Context<Self>) {
        if self.disabled {
            return;
        }
        self.active = thumb;
        let next = clamp_thumb(
            self.value,
            thumb,
            raw,
            self.min,
            self.max,
            self.step,
            self.min_gap,
        );
        if next != self.value {
            self.value = next;
            cx.emit(RangeSliderEvent(next));
        }
        cx.notify();
    }

    /// The raw value under a window-space x, from the captured track bounds.
    fn value_at(&self, x: Pixels) -> Option<f64> {
        let width = self.bounds.size.width;
        if width <= px(0.0) {
            return None;
        }
        let frac = ((x - self.bounds.left()) / width).clamp(0.0, 1.0);
        Some(self.min + frac as f64 * (self.max - self.min))
    }

    fn on_mouse_down(
        &mut self,
        event: &MouseDownEvent,
        window: &mut Window,
        cx: &mut Context<Self>,
    ) {
        if self.disabled {
            return;
        }
        window.focus(&self.focus);
        // A press on a knob starts a drag (the knobs' `on_drag` doesn't stop
        // this event from bubbling here) — jumping a thumb toward the press
        // would move it by up to half a knob, or move the *other* thumb when
        // they sit close. Only track-presses jump.
        let width = f32::from(self.bounds.size.width);
        if width > 0.0 {
            let x = f32::from(event.position.x - self.bounds.left());
            let (thumb_w, _) = self.metrics();
            let (f0, f1) = (self.fraction(self.value.0), self.fraction(self.value.1));
            if let Some(thumb) = thumb_under(x, width, f0, f1, thumb_w) {
                self.active = thumb;
                cx.notify();
                return;
            }
        }
        if let Some(raw) = self.value_at(event.position.x) {
            let thumb = nearest_thumb(self.value.0, self.value.1, raw);
            self.set_thumb(thumb, raw, cx);
        }
        cx.notify();
    }

    fn on_drag_move(
        &mut self,
        event: &DragMoveEvent<ThumbDrag>,
        _window: &mut Window,
        cx: &mut Context<Self>,
    ) {
        let (owner, thumb) = {
            let drag = event.drag(cx);
            (drag.owner, drag.thumb)
        };
        if owner != cx.entity_id() {
            return;
        }
        let width = event.bounds.size.width;
        if width <= px(0.0) {
            return;
        }
        let frac = ((event.event.position.x - event.bounds.left()) / width).clamp(0.0, 1.0);
        let raw = self.min + frac as f64 * (self.max - self.min);
        self.set_thumb(thumb, raw, cx);
    }

    fn on_key(&mut self, event: &KeyDownEvent, _window: &mut Window, cx: &mut Context<Self>) {
        let current = if self.active == 0 {
            self.value.0
        } else {
            self.value.1
        };
        match event.keystroke.key.as_str() {
            "left" | "down" => self.set_thumb(self.active, current - self.step, cx),
            "right" | "up" => self.set_thumb(self.active, current + self.step, cx),
            "home" => self.set_thumb(self.active, self.min, cx),
            "end" => self.set_thumb(self.active, self.max, cx),
            _ => return,
        }
        cx.stop_propagation();
    }

    fn metrics(&self) -> (f32, f32) {
        match self.size {
            Size::Xs => (12.0, 4.0),
            Size::Sm => (14.0, 5.0),
            Size::Md => (16.0, 6.0),
            Size::Lg => (20.0, 8.0),
            Size::Xl => (24.0, 10.0),
        }
    }
}

/// Snap `raw` to the step grid.
fn snap(raw: f64, min: f64, step: f64) -> f64 {
    min + ((raw - min) / step).round() * step
}

/// Move one end of `current` toward `raw`, snapped and kept `min_gap` away
/// from the other end, inside `min..=max`.
fn clamp_thumb(
    current: (f64, f64),
    thumb: usize,
    raw: f64,
    min: f64,
    max: f64,
    step: f64,
    min_gap: f64,
) -> (f64, f64) {
    let snapped = snap(raw, min, step);
    if thumb == 0 {
        let upper = (current.1 - min_gap).max(min);
        (snapped.max(min).min(upper), current.1)
    } else {
        let lower = (current.0 + min_gap).min(max);
        (current.0, snapped.min(max).max(lower))
    }
}

/// Order, snap and clamp a raw pair, enforcing the gap where the range allows.
fn normalize_pair(raw: (f64, f64), min: f64, max: f64, step: f64, min_gap: f64) -> (f64, f64) {
    let (a, b) = if raw.0 <= raw.1 { raw } else { (raw.1, raw.0) };
    let lo = snap(a, min, step).max(min).min((max - min_gap).max(min));
    let hi = snap(b, min, step).min(max).max((lo + min_gap).min(max));
    (lo, hi)
}

/// The knob whose painted extent contains local `x`, if any. Knob 1 paints
/// last (topmost) and wins the subsequent drag when the knobs overlap, so it
/// is checked first to stay consistent.
fn thumb_under(x: f32, width: f32, f0: f32, f1: f32, thumb_w: f32) -> Option<usize> {
    let hit = |frac: f32| (x - frac * width).abs() <= thumb_w / 2.0;
    if hit(f1) {
        Some(1)
    } else if hit(f0) {
        Some(0)
    } else {
        None
    }
}

/// Which thumb a click at `raw` should move.
fn nearest_thumb(lo: f64, hi: f64, raw: f64) -> usize {
    if raw <= lo {
        0
    } else if raw >= hi {
        1
    } else if raw - lo < hi - raw {
        0
    } else {
        1
    }
}

impl Render for RangeSlider {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let t = theme(cx);
        let accent = t.color(self.color, t.primary_shade()).hsla();
        let track_color = if t.scheme.is_dark() {
            t.color(ColorName::Dark, 4)
        } else {
            t.color(ColorName::Gray, 2)
        }
        .hsla();
        let knob_bg = t.surface().hsla();
        let label_color = t.dimmed().hsla();
        let font_xs = t.font_size(Size::Xs);

        let (thumb, track_h) = self.metrics();
        let container_h = thumb + 4.0;
        let track_top = (container_h - track_h) / 2.0;
        let (f0, f1) = (self.fraction(self.value.0), self.fraction(self.value.1));
        let owner = cx.entity_id();

        let track = div()
            .absolute()
            .left(px(0.0))
            .right(px(0.0))
            .top(px(track_top))
            .h(px(track_h))
            .rounded(px(track_h / 2.0))
            .bg(track_color);

        let fill = div()
            .absolute()
            .left(relative(f0))
            .w(relative((f1 - f0).max(0.0)))
            .top(px(track_top))
            .h(px(track_h))
            .rounded(px(track_h / 2.0))
            .bg(accent);

        let knob = |i: usize, frac: f32| {
            div()
                .id(("guise-rangeslider-thumb", i))
                .absolute()
                .left(relative(frac))
                .ml(px(-thumb / 2.0))
                .top(px(2.0))
                .w(px(thumb))
                .h(px(thumb))
                .rounded(px(thumb / 2.0))
                .bg(knob_bg)
                .border_2()
                .border_color(accent)
                .cursor_grab()
                .on_drag(
                    ThumbDrag { owner, thumb: i },
                    |_drag, _offset, _window, cx| cx.new(|_| Empty),
                )
        };

        // Invisible canvas capturing the container's bounds for click math.
        let this = cx.entity();
        let bounds_probe = canvas(
            move |bounds, _window, cx| {
                this.update(cx, |this, _| this.bounds = bounds);
            },
            |_, _, _, _| {},
        )
        .absolute()
        .size_full();

        let slider = div()
            .id("guise-rangeslider")
            .track_focus(&self.focus)
            .on_key_down(cx.listener(Self::on_key))
            .on_mouse_down(MouseButton::Left, cx.listener(Self::on_mouse_down))
            .on_drag_move::<ThumbDrag>(cx.listener(Self::on_drag_move))
            .relative()
            .w_full()
            .h(px(container_h))
            .child(bounds_probe)
            .child(track)
            .child(fill)
            .child(knob(0, f0))
            .child(knob(1, f1));

        let value_label =
            div()
                .text_size(px(font_xs))
                .text_color(label_color)
                .child(SharedString::from(format!(
                    "{} \u{2013} {}",
                    self.value.0, self.value.1
                )));

        let column = div()
            .flex()
            .flex_col()
            .gap(px(4.0))
            .child(slider)
            .child(value_label);

        let element = if self.disabled {
            column.opacity(0.5)
        } else {
            column
        };

        element.probe("RangeSlider")
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn clamp_thumb_snaps_and_respects_bounds() {
        assert_eq!(
            clamp_thumb((20.0, 80.0), 0, 33.4, 0.0, 100.0, 1.0, 0.0),
            (33.0, 80.0)
        );
        assert_eq!(
            clamp_thumb((20.0, 80.0), 0, -10.0, 0.0, 100.0, 1.0, 0.0),
            (0.0, 80.0)
        );
        assert_eq!(
            clamp_thumb((20.0, 80.0), 1, 250.0, 0.0, 100.0, 1.0, 0.0),
            (20.0, 100.0)
        );
    }

    #[test]
    fn clamp_thumb_enforces_the_gap() {
        // Low thumb pushed past high stops `min_gap` short of it.
        assert_eq!(
            clamp_thumb((20.0, 50.0), 0, 60.0, 0.0, 100.0, 1.0, 10.0),
            (40.0, 50.0)
        );
        // High thumb pushed past low stops `min_gap` above it.
        assert_eq!(
            clamp_thumb((20.0, 50.0), 1, 5.0, 0.0, 100.0, 1.0, 10.0),
            (20.0, 30.0)
        );
        // The gap clamp never escapes min/max even when the gap can't fit.
        assert_eq!(
            clamp_thumb((0.0, 5.0), 0, -20.0, 0.0, 100.0, 1.0, 10.0),
            (0.0, 5.0)
        );
    }

    #[test]
    fn clamp_thumb_snaps_to_coarse_steps() {
        assert_eq!(
            clamp_thumb((0.0, 100.0), 0, 37.0, 0.0, 100.0, 25.0, 0.0),
            (25.0, 100.0)
        );
        assert_eq!(
            clamp_thumb((0.0, 100.0), 0, 38.0, 0.0, 100.0, 25.0, 0.0),
            (50.0, 100.0)
        );
    }

    #[test]
    fn normalize_orders_and_clamps_the_pair() {
        assert_eq!(
            normalize_pair((80.0, 20.0), 0.0, 100.0, 1.0, 0.0),
            (20.0, 80.0)
        );
        assert_eq!(
            normalize_pair((-5.0, 120.0), 0.0, 100.0, 1.0, 0.0),
            (0.0, 100.0)
        );
        assert_eq!(
            normalize_pair((40.0, 45.0), 0.0, 100.0, 1.0, 10.0),
            (40.0, 50.0)
        );
        // A gap wider than the range collapses to the range itself.
        assert_eq!(
            normalize_pair((0.0, 100.0), 0.0, 100.0, 1.0, 500.0),
            (0.0, 100.0)
        );
    }

    #[test]
    fn thumb_under_hits_knob_extents_only() {
        // 400px track, values 50/52 of 0..100 → knob centers at 200 and 208px,
        // a 16px knob spans ±8.
        let (f0, f1) = (0.5, 0.52);
        // Inside the high knob (and the low one) → the topmost wins.
        assert_eq!(thumb_under(202.4, 400.0, f0, f1, 16.0), Some(1));
        // Only inside the low knob.
        assert_eq!(thumb_under(196.0, 400.0, f0, f1, 16.0), Some(0));
        // On the bare track.
        assert_eq!(thumb_under(100.0, 400.0, f0, f1, 16.0), None);
        assert_eq!(thumb_under(300.0, 400.0, f0, f1, 16.0), None);
        // Coincident knobs: the topmost (high) one wins.
        assert_eq!(thumb_under(200.0, 400.0, 0.5, 0.5, 16.0), Some(1));
    }

    #[test]
    fn nearest_thumb_splits_the_track() {
        assert_eq!(nearest_thumb(20.0, 80.0, 5.0), 0);
        assert_eq!(nearest_thumb(20.0, 80.0, 30.0), 0);
        assert_eq!(nearest_thumb(20.0, 80.0, 70.0), 1);
        assert_eq!(nearest_thumb(20.0, 80.0, 95.0), 1);
        // Coincident thumbs: clicks left move the low, right the high.
        assert_eq!(nearest_thumb(50.0, 50.0, 40.0), 0);
        assert_eq!(nearest_thumb(50.0, 50.0, 60.0), 1);
    }
}