Skip to main content

repose_ui/
lib.rs

1#![allow(non_snake_case)]
2//! # Views, Modifiers, and Layout
3//!
4//! Repose UI is built around three core ideas:
5//!
6//! - `View`: an immutable description of a UI node (cheap to rebuild every frame).
7//! - `Modifier`: layout, styling, and interaction hints attached to a `View`.
8//! - Incremental layout + paint via a persistent engine:
9//!   composition produces a new `View` tree each frame; `LayoutEngine`
10//!   reconciles it into a persistent `ViewTree` (`repose-tree`) and runs
11//!   incremental Taffy layout + paint (with scopes, dirty sets, and paint caches).
12//!
13//! ## Views
14//!
15//! A `View` is a lightweight value that describes *what* to show, not *how* it is
16//! rendered. It is cheap to create; you rebuild the description each frame
17//! (Compose-style). Identity and layout state live in the persistent tree, not
18//! in the `View` values themselves.
19//!
20//! ```rust,ignore
21//! use repose_core::*;
22//! use repose_ui::*;
23//!
24//! fn Counter(count: i32, on_inc: impl Fn() + 'static) -> View {
25//!     Column(Modifier::new().padding(16.0)).child((
26//!         Text(format!("Count = {count}")),
27//!         Button("Increment".into_children(), on_inc),
28//!     ))
29//! }
30//! ```
31//!
32//! Internally, a `View` has:
33//!
34//! - `id: ViewId` - assigned during composition / layout.
35//! - `kind: ViewKind` - which widget it is (Text, Button, etc.).
36//! - `modifier: Modifier` - layout/styling/interaction metadata.
37//! - `children: Vec<View>` - owned child views.
38//!
39//! Views are *pure data*: they do not hold state or platform handles.
40//! State lives in signals / `remember_*`; platform integration is in
41//! `repose-platform` / `repose-app`.
42//!
43//! ## Modifiers
44//!
45//! `Modifier` describes *how* a view participates in layout and hit-testing:
46//!
47//! - Size: `size`, `width`, `height`, `min_*`, `max_*`, `fill_max_*`
48//! - Box model: `padding`, `padding_values`, margins
49//! - Visuals: `background`, `border`, `clip_rounded`, `alpha`, `transform`, layers
50//! - Flex / grid: `flex_*`, `align_*`, `justify_*`, `grid`, `grid_span`
51//! - Positioning: `absolute()`, `offset(..)`
52//! - Scroll: `vertical_scroll` / `horizontal_scroll` / `scrollable`, `nested_scroll_connection`
53//! - Interaction: `clickable()`, pointer callbacks, `semantics`
54//! - Custom paint: `painter` (used by `repose-canvas`)
55//! - Incremental helpers: `key`, `repaint_boundary`, `scope!` (core)
56//!
57//! Modifiers are mapped to Taffy `Style` inside `LayoutEngine`. Values are in
58//! density-independent pixels (dp) and converted to physical px via `Density`.
59//!
60//! ## Layout + paint
61//!
62//! Public entry:
63//!
64//! ```rust,ignore
65//! pub fn layout_and_paint(
66//!     root: &View,
67//!     size_px: (u32, u32),
68//!     textfield_states: &HashMap<u64, Rc<RefCell<TextFieldState>>>,
69//!     interactions: &Interactions,
70//!     focused: Option<u64>,
71//! ) -> (Scene, Vec<HitRegion>, Vec<SemNode>);
72//! ```
73//!
74//! This is a thin thread-local wrapper around `LayoutEngine::layout_frame`, which:
75//!
76//! 1. Reconciles `root` into the persistent `ViewTree` (stable `NodeId`s, content +
77//!    subtree hashes, dirty set, generation GC).
78//! 2. Syncs dual Taffy trees (root + per-`scope!` `ScopeLayoutTree`s).
79//! 3. Computes layout (measure callbacks, constraint equality skip for scopes).
80//! 4. Walks the tree to emit `SceneNode`s, `HitRegion`s, and `SemNode`s, with
81//!    paint-cache hits on `repaint_boundary` / scopes, culling, nested scroll, etc.
82//!
83//! Prefer `scope!`, stable keys, and `repaint_boundary` on expensive subtrees so
84//! the incremental engine can skip work.
85
86pub mod adaptive;
87pub mod anim;
88pub mod anim_ext;
89pub mod color_picker;
90pub mod gestures;
91pub mod layout;
92pub use layout::IntrinsicSizeMode;
93pub mod lazy;
94pub mod selection;
95pub mod subcompose;
96pub use lazy::{
97    LazyColumn, LazyHorizontalGrid, LazyRow, LazyVerticalGrid, LazyVerticalStaggeredGrid,
98    SimpleList,
99};
100pub mod lazy_states;
101pub use lazy_states::{
102    ItemHeight, LazyColumnConfig, LazyColumnState, LazyGridConfig, LazyGridState, LazyRowConfig,
103    LazyRowState, LazyVerticalStaggeredGridConfig, LazyVerticalStaggeredGridState,
104};
105pub use subcompose::{
106    BoxWithConstraints, SubcomposeLayout, box_with_constraints_with_key, subcompose_hash_key,
107    subcompose_layout_with_slots, subcompose_with_key, subcompose_with_key_slots,
108};
109pub mod overlay;
110pub mod pager;
111pub mod scroll;
112pub mod windowing;
113
114use std::cell::RefCell;
115use std::collections::{HashMap, HashSet};
116use std::rc::Rc;
117use std::sync::atomic::{AtomicU64, Ordering};
118
119use repose_core::*;
120
121pub mod textfield;
122use repose_core::locals;
123pub use selection::{SelectableText, SelectableTextExt};
124pub use textfield::{
125    BasicSecureTextField, BasicTextField, KeyboardOptions, TextFieldConfig, TextFieldState,
126};
127
128thread_local! {
129    static LAYOUT_ENGINE: RefCell<layout::LayoutEngine> =
130        RefCell::new(layout::LayoutEngine::new());
131}
132
133#[derive(Default)]
134pub struct Interactions {
135    pub hover: Option<u64>,
136    pub hover_ancestors: std::collections::HashSet<u64>,
137    pub pressed: HashSet<u64>,
138}
139
140pub fn Box(modifier: Modifier) -> View {
141    View::new(0, ViewKind::Box).modifier(modifier)
142}
143
144pub fn Row(modifier: Modifier) -> View {
145    View::new(0, ViewKind::Row).modifier(modifier)
146}
147
148pub fn Column(modifier: Modifier) -> View {
149    View::new(0, ViewKind::Column).modifier(modifier)
150}
151
152/// A horizontally-oriented flow layout that wraps children to new rows when
153/// they exceed the available width. Equivalent to `Row` with `flex_wrap(Wrap)`.
154pub fn FlowRow(modifier: Modifier) -> View {
155    Row(modifier.flex_wrap(FlexWrap::Wrap))
156}
157
158/// Flipped container (identical to `Column`).
159/// Deprecated: use `Column` directly.
160#[deprecated = "Use Column instead (identical behavior)"]
161pub fn Stack(modifier: Modifier) -> View {
162    Column(modifier)
163}
164
165/// A vertically-oriented flow layout that wraps children to new columns when
166/// they exceed the available height. Equivalent to `Column` with `flex_wrap(Wrap)`.
167pub fn FlowColumn(modifier: Modifier) -> View {
168    Column(modifier.flex_wrap(FlexWrap::Wrap))
169}
170
171/// Centers children both axes inside this Box.
172/// (Compose `Box(contentAlignment = Alignment.Center)`.)
173pub fn Center(modifier: Modifier) -> View {
174    Box(modifier.content_alignment(Alignment::Center))
175}
176
177pub fn ZStack(modifier: Modifier) -> View {
178    View::new(0, ViewKind::ZStack).modifier(modifier)
179}
180
181pub fn OverlayHost(modifier: Modifier) -> View {
182    View::new(0, ViewKind::OverlayHost).modifier(modifier)
183}
184
185#[deprecated = "Use Modifier::vertical_scroll instead"]
186pub fn Scroll(modifier: Modifier) -> View {
187    View::new(0, ViewKind::Box).modifier(modifier.vertical_scroll(ScrollAxisBinding {
188        show_scrollbar: true,
189        ..Default::default()
190    }))
191}
192
193pub fn Text(text: impl Into<String>) -> View {
194    View::new(
195        0,
196        ViewKind::Text {
197            text: text.into(),
198            color: locals::content_color(),
199            font_size: locals::text_size().unwrap_or(16.0), // dp (converted to px in layout/paint)
200            soft_wrap: true,
201            max_lines: None,
202            overflow: TextOverflow::Clip,
203            font_family: Some("sans-serif"),
204            annotations: None,
205            text_align: TextAlign::Start,
206            font_weight: FontWeight::NORMAL,
207            font_style: FontStyle::Normal,
208            text_decoration: TextDecoration::default(),
209            letter_spacing: 0.0,
210            line_height: 0.0,
211            url: None,
212            font_variation_settings: None,
213        },
214    )
215}
216
217/// Create a text view with rich text spans (AnnotatedString).
218///
219/// Each span can override color and font_size for a range of text.
220pub fn AnnotatedText(annotated: AnnotatedString) -> View {
221    let annotations: Option<std::sync::Arc<[TextSpan]>> = if annotated.spans.is_empty() {
222        None
223    } else {
224        Some(annotated.spans.clone())
225    };
226    View::new(
227        0,
228        ViewKind::Text {
229            text: annotated.text,
230            color: locals::content_color(),
231            font_size: locals::text_size().unwrap_or(16.0),
232            soft_wrap: true,
233            max_lines: None,
234            overflow: TextOverflow::Clip,
235            font_family: Some("sans-serif"),
236            annotations,
237            text_align: TextAlign::Start,
238            font_weight: FontWeight::NORMAL,
239            font_style: FontStyle::Normal,
240            text_decoration: TextDecoration::default(),
241            letter_spacing: 0.0,
242            line_height: 0.0,
243            url: None,
244            font_variation_settings: None,
245        },
246    )
247}
248
249pub fn Spacer() -> View {
250    Box(Modifier::new().flex_grow(1.0))
251}
252
253pub fn Space(modifier: Modifier) -> View {
254    Box(modifier)
255}
256
257pub fn Grid(
258    columns: usize,
259    modifier: Modifier,
260    children: Vec<View>,
261    row_gap: f32,
262    column_gap: f32,
263) -> View {
264    Column(modifier.grid(columns, row_gap, column_gap)).with_children(children)
265}
266
267pub fn Expander(modifier: Modifier, expanded: bool, on_toggle: impl Fn() + 'static) -> View {
268    View::new(
269        0,
270        ViewKind::Expander {
271            expanded,
272            on_toggle: Some(Rc::new(on_toggle)),
273        },
274    )
275    .modifier(modifier)
276}
277
278/// A single row in a tree view.
279///
280/// Renders with indentation based on `depth`, an expand/collapse arrow if
281/// `has_children` is true, and a highlight background if `is_selected`.
282/// The first child is the row's label/content.
283pub fn TreeRow(
284    modifier: Modifier,
285    depth: usize,
286    has_children: bool,
287    is_expanded: bool,
288    is_selected: bool,
289    on_toggle: impl Fn() + 'static,
290    on_select: impl Fn() + 'static,
291) -> View {
292    View::new(
293        0,
294        ViewKind::TreeRow {
295            depth,
296            has_children,
297            is_expanded,
298            is_selected,
299            on_toggle: Some(Rc::new(on_toggle)),
300            on_select: Some(Rc::new(on_select)),
301        },
302    )
303    .modifier(modifier)
304}
305
306static DRAGVALUE_COUNTER: AtomicU64 = AtomicU64::new(0);
307
308/// A drag-to-change numeric value field (like egui's `DragValue`).
309///
310/// Click and drag left/right to change the value. Displays the current value
311/// as centered text in a bordered box.
312pub fn DragValue(
313    value: f32,
314    range: (f32, f32),
315    speed: f32,
316    on_change: impl Fn(f32) + 'static,
317) -> View {
318    let id = DRAGVALUE_COUNTER.fetch_add(1, Ordering::Relaxed);
319    let drag_start_x = remember_mutable_with_key(format!("dv_dsx_{}", id), || 0.0f32);
320    let drag_start_val = remember_mutable_with_key(format!("dv_dsv_{}", id), || 0.0f32);
321    let is_dragging = remember_mutable_with_key(format!("dv_drg_{}", id), || false);
322
323    let oc = Rc::new(on_change);
324    let min = range.0;
325    let max = range.1;
326    let cur = value;
327
328    let th = locals::theme();
329
330    Box(Modifier::new()
331        .min_width(48.0)
332        .height(28.0)
333        .background(th.surface_container)
334        .border(1.0, th.outline, 4.0)
335        .clip_rounded(4.0)
336        .padding_values(PaddingValues {
337            left: 4.0,
338            right: 4.0,
339            top: 0.0,
340            bottom: 0.0,
341        })
342        .on_pointer_down({
343            let dsx = drag_start_x.clone();
344            let dsv = drag_start_val.clone();
345            let drg = is_dragging.clone();
346            move |pe: PointerEvent| {
347                drg.set(true);
348                dsx.set(pe.position_in_window().x);
349                dsv.set(cur);
350            }
351        })
352        .on_pointer_move({
353            let dsx = drag_start_x.clone();
354            let dsv = drag_start_val.clone();
355            let drg = is_dragging.clone();
356            let oc = oc.clone();
357            move |pe: PointerEvent| {
358                if !drg.with(|v| *v) {
359                    return;
360                }
361                let start_x = dsx.with(|v| *v);
362                let start_val = dsv.with(|v| *v);
363                let new_val =
364                    (start_val + (pe.position_in_window().x - start_x) * speed).clamp(min, max);
365                (oc)(new_val);
366            }
367        })
368        .on_pointer_up({
369            let drg = is_dragging.clone();
370            move |_pe: PointerEvent| {
371                drg.set(false);
372            }
373        })
374        .cursor(CursorIcon::EwResize))
375    .child(
376        Text(format_value(value))
377            .size(13.0)
378            .color(th.on_surface)
379            .single_line()
380            .overflow_ellipsize(),
381    )
382}
383
384fn format_value(v: f32) -> String {
385    if (v - v.round()).abs() < 1e-6 {
386        format!("{}", v.round() as i64)
387    } else if (v * 10.0 - (v * 10.0).round()).abs() < 1e-6 {
388        format!("{:.1}", v)
389    } else {
390        format!("{:.2}", v)
391    }
392}
393
394pub fn Image(modifier: Modifier, handle: ImageHandle) -> View {
395    View::new(
396        0,
397        ViewKind::Image {
398            handle,
399            tint: Color::WHITE,
400            fit: ImageFit::Contain,
401        },
402    )
403    .modifier(modifier)
404}
405
406pub trait ImageExt {
407    fn image_tint(self, c: Color) -> View;
408    fn image_fit(self, fit: ImageFit) -> View;
409}
410impl ImageExt for View {
411    fn image_tint(mut self, c: Color) -> View {
412        if let ViewKind::Image { tint, .. } = &mut self.kind {
413            *tint = c;
414        }
415        self
416    }
417    fn image_fit(mut self, fit: ImageFit) -> View {
418        if let ViewKind::Image { fit: f, .. } = &mut self.kind {
419            *f = fit;
420        }
421        self
422    }
423}
424
425/// Extension trait for child building
426pub trait ViewExt: Sized {
427    fn child(self, children: impl IntoChildren) -> Self;
428}
429
430impl ViewExt for View {
431    fn child(mut self, children: impl IntoChildren) -> Self {
432        self.children.extend(children.into_children());
433        self
434    }
435}
436
437pub trait IntoChildren {
438    fn into_children(self) -> Vec<View>;
439}
440
441impl IntoChildren for View {
442    fn into_children(self) -> Vec<View> {
443        vec![self]
444    }
445}
446
447impl IntoChildren for Vec<View> {
448    fn into_children(self) -> Vec<View> {
449        self
450    }
451}
452
453impl<const N: usize> IntoChildren for [View; N] {
454    fn into_children(self) -> Vec<View> {
455        self.into()
456    }
457}
458
459// Tuple implementations
460macro_rules! impl_into_children_tuple {
461    ($($idx:tt $t:ident),+) => {
462        impl<$($t: IntoChildren),+> IntoChildren for ($($t,)+) {
463            fn into_children(self) -> Vec<View> {
464                let mut v = Vec::new();
465                $(v.extend(self.$idx.into_children());)+
466                v
467            }
468        }
469    };
470}
471
472impl_into_children_tuple!(0 A);
473impl_into_children_tuple!(0 A, 1 B);
474impl_into_children_tuple!(0 A, 1 B, 2 C);
475impl_into_children_tuple!(0 A, 1 B, 2 C, 3 D);
476impl_into_children_tuple!(0 A, 1 B, 2 C, 3 D, 4 E);
477impl_into_children_tuple!(0 A, 1 B, 2 C, 3 D, 4 E, 5 F);
478impl_into_children_tuple!(0 A, 1 B, 2 C, 3 D, 4 E, 5 F, 6 G);
479impl_into_children_tuple!(0 A, 1 B, 2 C, 3 D, 4 E, 5 F, 6 G, 7 H);
480
481/// Reconcile `root` into the thread-local `LayoutEngine` and run incremental
482/// layout + paint for this frame.
483pub fn layout_and_paint(
484    root: &View,
485    size_px_u32: (u32, u32),
486    textfield_states: &HashMap<u64, Rc<RefCell<TextFieldState>>>,
487    interactions: &Interactions,
488    focused: Option<u64>,
489) -> (Scene, Vec<HitRegion>, Vec<SemNode>) {
490    LAYOUT_ENGINE.with(|engine| {
491        engine
492            .borrow_mut()
493            .layout_frame(root, size_px_u32, textfield_states, interactions, focused)
494    })
495}
496
497/// Return the [`LayoutStats`] from the most recent `layout_and_paint` call on
498/// this thread. Used by the inspector / HUD to report real layout+paint timing
499/// and cache counters instead of a hardcoded estimate.
500pub fn last_layout_stats() -> layout::LayoutStats {
501    LAYOUT_ENGINE.with(|engine| engine.borrow().stats.clone())
502}
503
504pub use layout::LayoutStats;
505
506/// Method styling
507pub trait TextStyle {
508    fn color(self, c: Color) -> View;
509    fn size(self, px: f32) -> View;
510    fn max_lines(self, n: usize) -> View;
511    fn single_line(self) -> View;
512    fn overflow_ellipsize(self) -> View;
513    fn overflow_clip(self) -> View;
514    fn overflow_visible(self) -> View;
515    fn font_family(self, family: &'static str) -> View;
516    fn text_align(self, align: TextAlign) -> View;
517    fn font_weight(self, weight: FontWeight) -> View;
518    fn font_style(self, style: FontStyle) -> View;
519    fn text_decoration(self, decoration: TextDecoration) -> View;
520    fn letter_spacing(self, spacing: f32) -> View;
521    fn line_height(self, height: f32) -> View;
522    fn url(self, url: impl Into<std::sync::Arc<str>>) -> View;
523    fn font_variation_settings(self, settings: &str) -> View;
524}
525impl TextStyle for View {
526    fn color(mut self, c: Color) -> View {
527        if let ViewKind::Text {
528            color: text_color, ..
529        } = &mut self.kind
530        {
531            *text_color = c;
532        }
533        self
534    }
535    fn size(mut self, dp_font: f32) -> View {
536        if let ViewKind::Text {
537            font_size: text_size_dp,
538            ..
539        } = &mut self.kind
540        {
541            *text_size_dp = dp_font;
542        }
543        self
544    }
545    fn max_lines(mut self, n: usize) -> View {
546        if let ViewKind::Text {
547            max_lines,
548            soft_wrap,
549            ..
550        } = &mut self.kind
551        {
552            *max_lines = Some(n);
553            *soft_wrap = true;
554        }
555        self
556    }
557    fn single_line(mut self) -> View {
558        if let ViewKind::Text {
559            soft_wrap,
560            max_lines,
561            ..
562        } = &mut self.kind
563        {
564            *soft_wrap = false;
565            *max_lines = Some(1);
566        }
567        self
568    }
569    fn overflow_ellipsize(mut self) -> View {
570        if let ViewKind::Text { overflow, .. } = &mut self.kind {
571            *overflow = TextOverflow::Ellipsis;
572        }
573        self
574    }
575    fn overflow_clip(mut self) -> View {
576        if let ViewKind::Text { overflow, .. } = &mut self.kind {
577            *overflow = TextOverflow::Clip;
578        }
579        self
580    }
581    fn overflow_visible(mut self) -> View {
582        if let ViewKind::Text { overflow, .. } = &mut self.kind {
583            *overflow = TextOverflow::Visible;
584        }
585        self
586    }
587    fn font_family(mut self, family: &'static str) -> View {
588        if let ViewKind::Text {
589            font_family: ff, ..
590        } = &mut self.kind
591        {
592            *ff = Some(family);
593        }
594        self
595    }
596    fn text_align(mut self, align: TextAlign) -> View {
597        if let ViewKind::Text { text_align, .. } = &mut self.kind {
598            *text_align = align;
599        }
600        self
601    }
602    fn font_weight(mut self, weight: FontWeight) -> View {
603        if let ViewKind::Text { font_weight, .. } = &mut self.kind {
604            *font_weight = weight;
605        }
606        self
607    }
608    fn font_style(mut self, style: FontStyle) -> View {
609        if let ViewKind::Text { font_style, .. } = &mut self.kind {
610            *font_style = style;
611        }
612        self
613    }
614    fn text_decoration(mut self, decoration: TextDecoration) -> View {
615        if let ViewKind::Text {
616            text_decoration, ..
617        } = &mut self.kind
618        {
619            *text_decoration = decoration;
620        }
621        self
622    }
623    fn letter_spacing(mut self, spacing: f32) -> View {
624        if let ViewKind::Text { letter_spacing, .. } = &mut self.kind {
625            *letter_spacing = spacing;
626        }
627        self
628    }
629    fn line_height(mut self, height: f32) -> View {
630        if let ViewKind::Text { line_height, .. } = &mut self.kind {
631            *line_height = height;
632        }
633        self
634    }
635    fn url(mut self, url: impl Into<std::sync::Arc<str>>) -> View {
636        if let ViewKind::Text {
637            url: u,
638            text_decoration,
639            ..
640        } = &mut self.kind
641        {
642            *u = Some(url.into());
643            if !text_decoration.underline && !text_decoration.strikethrough {
644                *text_decoration = TextDecoration::UNDERLINE;
645            }
646        }
647        self
648    }
649    fn font_variation_settings(mut self, settings: &str) -> View {
650        if let ViewKind::Text {
651            font_variation_settings,
652            ..
653        } = &mut self.kind
654        {
655            *font_variation_settings = Some(settings.into());
656        }
657        self
658    }
659}