cranpose_ui/modifier/
focus_ring.rs

1//! The ring a control shows while the keyboard holds focus on it, so a person
2//! who works without a pointer sees where the next Enter lands.
3
4use std::{cell::Cell, rc::Rc};
5
6use cranpose_ui_graphics::{Brush, Color, DrawScope, Rect, Size, Stroke};
7
8use super::Modifier;
9use crate::focus_dispatch::keyboard_focus_visible;
10
11/// The outer line of the ring: a blue that stands out on white and on black.
12pub const FOCUS_RING_COLOR: Color = Color::from_rgba_u8(0, 95, 204, 255);
13/// The inner line of the ring, so the ring stands out on a blue control too.
14pub const FOCUS_RING_INNER_COLOR: Color = Color::from_rgba_u8(255, 255, 255, 255);
15const OUTER_WIDTH: f32 = 2.0;
16const INNER_WIDTH: f32 = 1.0;
17
18/// The two lines of a ring around content of the given size, outer line
19/// first, each with its stroke width. Both lines sit inside the content
20/// bounds, so the ring never leaves the control's own area.
21pub fn focus_ring_lines(size: Size) -> [(Rect, f32); 2] {
22    [
23        (inset(size, OUTER_WIDTH / 2.0), OUTER_WIDTH),
24        (inset(size, OUTER_WIDTH + INNER_WIDTH / 2.0), INNER_WIDTH),
25    ]
26}
27
28fn inset(size: Size, by: f32) -> Rect {
29    Rect {
30        x: by,
31        y: by,
32        width: (size.width - 2.0 * by).max(0.0),
33        height: (size.height - 2.0 * by).max(0.0),
34    }
35}
36
37fn draw_focus_ring(scope: &mut dyn DrawScope) {
38    let [(outer, outer_width), (inner, inner_width)] = focus_ring_lines(scope.size());
39    scope.draw_rect_at_stroked(
40        outer,
41        Brush::solid(FOCUS_RING_COLOR),
42        Stroke::new(outer_width),
43    );
44    scope.draw_rect_at_stroked(
45        inner,
46        Brush::solid(FOCUS_RING_INNER_COLOR),
47        Stroke::new(inner_width),
48    );
49}
50
51impl Modifier {
52    /// A focus target that draws a ring while the keyboard put focus on it.
53    ///
54    /// The ring shows after Tab or an arrow key moved focus here and goes
55    /// away on the next pointer press anywhere, the way a web browser's
56    /// `:focus-visible` works. A control that draws its own focus look uses
57    /// [`focus_target`](Self::focus_target) instead. Compose's
58    /// `Modifier.focusable()`.
59    pub fn focusable(self) -> Self {
60        let focused = Rc::new(Cell::new(false));
61        let seen = Rc::clone(&focused);
62        self.on_focus_changed(move |state| {
63            seen.set(state.is_focused());
64            crate::request_render_invalidation();
65        })
66        .draw_with_content(move |scope| {
67            scope.draw_content();
68            if focused.get() && keyboard_focus_visible() {
69                draw_focus_ring(scope);
70            }
71        })
72    }
73}
74
75#[cfg(test)]
76#[path = "tests/focus_ring_tests.rs"]
77mod tests;
cranpose_ui/modifier/focus_ring.rs

cranpose_ui/modifier/
focus_ring.rs
