Skip to main content

makeover_immediate/
lib.rs

1//! The immediate-mode renderer for [`makeover_layout`].
2//!
3//! <!-- wiki: makeover-immediate -->
4//!
5//! Named for the mode, not the library, the way `makeover-tui` is named for
6//! the target and not for ratatui. Immediate mode is the constraint that
7//! actually separates this renderer from the other two, and egui is the
8//! backend it is written against.
9//!
10//! It is the harshest renderer the description has to survive: no
11//! `box-shadow`, no `inset`, no cascade, no retained tree to mutate, and
12//! `Visuals.widgets.*.bg_stroke` is a single stroke with no per-side control.
13//! A two-tone lit edge is not something egui can be configured into producing,
14//! so it gets painted by hand here, once, instead of in every consuming app.
15//!
16//! # What this crate does and does not own
17//!
18//! It owns the *expression*: two mitred polylines for a bevel and a `Frame`
19//! for a filled region. It owns no colours and no sizes, and no longer owns a
20//! substitution: it briefly supplied the page for a well, which was a stand-in
21//! for `surface-well` before makeover derived it, and every consumer reads the
22//! real token now. [`Palette`] is supplied by the caller,
23//! already resolved, and every radius, margin and stroke width arrives in
24//! [`FrameStyle`].
25//!
26//! That split is why the crate has no dependency on `makeover` itself: the app
27//! already resolves a theme, and coupling a renderer to a colour crate's
28//! version would buy nothing.
29//!
30//! # The cascade is the real difference
31//!
32//! A stylesheet can say "a pressed button inverts its bevel" once and let the
33//! cascade carry it. An immediate-mode renderer has nowhere to put that, so
34//! every call site decides. [`makeover_layout::Depth::pressed`] is what keeps
35//! the decision from being re-derived per widget.
36//!
37//! # 0.11.0: the overlay becomes reachable
38//!
39//! 0.10.0 answered what overlaying means in immediate mode with
40//! [`Palette::cast`], and nothing could ask: the description had no
41//! `Depth::Overlay` until `makeover-layout` 0.14.0, so the answer sat beside a
42//! question that could not be posed. [`frame`] now hands the cast shadow to the
43//! `egui::Frame` for any depth whose fill is [`Fill::Overlay`], keyed off the
44//! fill rather than the variant.
45//!
46//! The same release brings `makeover_layout::CellPart`, which 0.11.0 carried
47//! and did not draw. [`table`] draws it, below.
48//!
49//! # 0.12.0: the table
50//!
51//! [`table`] is the vocabulary 0.11.0 took without using. The consumer is
52//! audiofiles, whose file list is the only table in the tree exercising all four
53//! of what the description says about one at once: sortable headings with
54//! carets, fixed and remainder tracks, and buttons inside cells.
55//!
56//! Two things it forces, both named where they land:
57//!
58//! - **`egui_extras`**, this crate's first dependency past egui. egui has no
59//!   table, and `Grid` gives no per-column sizing, no sticky header and no
60//!   scroll sync, which is why audiofiles reached for `egui_extras` rather than
61//!   building on `Grid`. A third answer here would reimplement that crate worse.
62//! - **[`Palette::action`]**, on the footing [`Palette::content`] arrived on: a
63//!   link in a cell is the first thing here needing the action intent.
64//!
65//! Narrowing works differently from the terminal's and the module header says
66//! why: a content column cannot be measured before the app's closure has drawn
67//! it, so `egui_extras` sizes it and the declared floor budgets it.
68//!
69//! # Forms
70//!
71//! 0.5.0 adds the field vocabulary on top of the depth vocabulary:
72//! [`makeover_layout::Field`] rendered to egui widgets, in [`field`], and a set
73//! of them laid down a column in [`group`]. Before it, a description saying
74//! "text field, labelled, required, with this hint" had no way to become a
75//! widget here, and audiofiles' forms stayed hand-rolled.
76//!
77//! `makeover-webview` got there first and its form emitter is the precedent
78//! followed rather than re-derived, including the parts that are bug fixes: a
79//! select handed a value none of its options carries keeps that value visible
80//! instead of silently reading as the first option, which is a save-the-wrong-
81//! thing bug goingson hit for real.
82//!
83//! What differs is forced by the mode and not chosen:
84//!
85//! - **The value arrives as a `&mut`.** [`Filling`] borrows the app's own field
86//!   and the widget writes through it. There is no DOM to read back out of,
87//!   which is also why the description deliberately does not carry the value.
88//! - **A text control is drawn as a well and a select is not.** The description
89//!   holds that a well is for anything the user looks *into*, and a text field
90//!   is its own example; a select and a checkbox are pressed rather than looked
91//!   into, so they keep egui's own control painting.
92//! - **[`makeover_layout::State::Focus`] is not drawn here.** egui already
93//!   paints exactly one focus stroke, and the description's rule is one ring
94//!   rather than a ring per primitive, so adding a second would break the rule
95//!   it came from. [`makeover_layout::State::Disabled`] *is* drawn, because egui
96//!   has no opinion about it until told.
97
98#![forbid(unsafe_code)]
99
100use egui::{
101    Color32, ComboBox, CornerRadius, Margin, Painter, Rect, Response, RichText, Shape, Stroke,
102    TextEdit, Ui,
103};
104use makeover_layout::{Bevel, Choice, Depth, Edge, Field, FieldKind, Fill, State};
105
106/// Columns, narrowing, cell parts and the sort caret, over `egui_extras`.
107pub mod table;
108
109/// The resolved colours this renderer needs, as flat values.
110///
111/// Built by the app from whatever it already uses to resolve a theme, then
112/// held and reused. Deliberately not a trait and not string-keyed: a bevel is
113/// painted per widget per frame, and a map lookup per edge is a cost with
114/// nothing to show for it.
115#[derive(Debug, Clone, Copy, PartialEq, Eq)]
116pub struct Palette {
117    /// `surface-page`.
118    pub page: Color32,
119    /// `surface-raised`.
120    pub raised: Color32,
121    /// `surface-overlay`.
122    pub overlay: Color32,
123    /// `surface-well`.
124    ///
125    /// Required, not optional. makeover derives it for every theme from 2.3.0,
126    /// so a resolved palette without a well is not a thing that exists here.
127    /// It was an `Option` while that was untrue, and this renderer substituted
128    /// the page; `makeover-tui` keeps its own `Option` for a different reason,
129    /// since a terminal can have the colour and still be unable to show it.
130    pub well: Color32,
131    /// `surface-sunken`.
132    ///
133    /// A surface set back from the one it sits on, by colour and nothing else.
134    /// Not a well: a well is a hole with an edge, and this has no edge. An
135    /// immediate-mode renderer paints an arbitrary rect, so unlike
136    /// `makeover-tui` it has no excuse for declining this one.
137    ///
138    /// Required rather than optional, on the same footing as `well`: all 31
139    /// themes makeover embeds author it.
140    pub sunken: Color32,
141    /// `bevel-light`.
142    pub bevel_light: Color32,
143    /// `bevel-dark`.
144    pub bevel_dark: Color32,
145    /// `elevation`.
146    ///
147    /// What a surface that floats OVER the page is cast onto it with. The one
148    /// intent here that is about a surface's relationship to the page rather
149    /// than about the surface, which is why it is a translucent near-black on
150    /// every theme rather than something read off the palette's own ramp.
151    ///
152    /// **Only for a surface that overlays.** A menu, a tooltip, a modal. A
153    /// surface *in* the layout takes a bevel, and reaching for this on a panel
154    /// or a card is how a pre-Platinum look survives a conversion under a new
155    /// name.
156    ///
157    /// egui has a real answer for this where a terminal does not: see
158    /// [`Palette::cast`], which is the shadow to hand an
159    /// [`egui::Frame`](egui::Frame).
160    pub elevation: Color32,
161    /// `content`.
162    ///
163    /// Ordinary text. Added 0.5.0 with the field renderer, which is the first
164    /// thing here that draws any: until then this crate painted surfaces and
165    /// edges and let the caller's own egui visuals answer for text.
166    pub content: Color32,
167    /// `content-muted`.
168    ///
169    /// A field's hint, and what
170    /// [`makeover_layout::State::Disabled`](makeover_layout::State::Disabled)
171    /// resolves to. Both readings come from the description rather than from
172    /// here: `State::Disabled` names this intent by token.
173    pub content_muted: Color32,
174    /// `action-primary`.
175    ///
176    /// What a control is drawn in. Added 0.12.0 with the table renderer, for the
177    /// reason `content` was added 0.5.0 with the field renderer: a link in a
178    /// cell is the first thing here that needs the action intent, and a palette
179    /// should carry what is used.
180    ///
181    /// This is the intent [`CellPart`](makeover_layout::CellPart) exists to
182    /// separate. A cell holding a control took the cell's text colour until the
183    /// description could say otherwise, which is the drift `makeover-layout`
184    /// 0.14.0 named and `makeover-webview` 0.25.0 fixed on its own side.
185    pub action: Color32,
186    /// `danger`.
187    ///
188    /// A field's error message. The one [`makeover_layout::Tone`] this renderer
189    /// needs so far, and it is here rather than as a whole resolved tone set
190    /// because notices are not drawn here yet and a palette should carry what
191    /// is used.
192    pub danger: Color32,
193}
194
195impl Palette {
196    /// Resolve a surface intent, or `None` for one this renderer does not know.
197    ///
198    /// A plain lookup. There is still no substitution: the old one existed only
199    /// while `surface-well` was underived, and every consumer reads the real
200    /// token now.
201    ///
202    /// `Option` since 0.3.0, because [`Fill`] became `#[non_exhaustive]` in
203    /// `makeover-layout` 0.4.0 and a total function over an open enum can only
204    /// stay total by inventing a colour for a member it has never heard of.
205    /// That is the substitution this crate spent 0.2.0 removing, so the return
206    /// type moved instead. Every member the description has today is answered
207    /// with `Some`.
208    #[must_use]
209    pub const fn fill(&self, fill: Fill) -> Option<Color32> {
210        match fill {
211            Fill::Page => Some(self.page),
212            Fill::Raised => Some(self.raised),
213            Fill::Overlay => Some(self.overlay),
214            Fill::Well => Some(self.well),
215            Fill::Sunken => Some(self.sunken),
216            _ => None,
217        }
218    }
219
220    /// The cast shadow for a surface that overlays the page.
221    ///
222    /// What "overlaying" means in immediate mode, answered rather than skipped.
223    /// egui already paints shadows for its menus and windows through
224    /// [`egui::Frame::shadow`], so the honest port is to hand that machinery the
225    /// theme's tone instead of egui's own default, not to invent a painter here
226    /// the way [`paint_bevel`] had to.
227    ///
228    /// The geometry matches what `makeover-webview` composes, in points rather
229    /// than pixels: a small downward offset and a wide soft blur. A Platinum-era
230    /// menu sits just off the page rather than hovering above it.
231    ///
232    /// ```no_run
233    /// # let palette: makeover_immediate::Palette = unimplemented!();
234    /// # let ui: &mut egui::Ui = unimplemented!();
235    /// egui::Frame::popup(ui.style())
236    ///     .shadow(palette.cast())
237    ///     .show(ui, |ui| { ui.label("over the page"); });
238    /// ```
239    #[must_use]
240    pub const fn cast(&self) -> egui::Shadow {
241        egui::Shadow {
242            offset: [0, 2],
243            blur: 24,
244            spread: 0,
245            color: self.elevation,
246        }
247    }
248
249    /// Resolve a bevel edge intent.
250    #[must_use]
251    pub const fn edge(&self, edge: Edge) -> Color32 {
252        match edge {
253            Edge::Light => self.bevel_light,
254            Edge::Dark => self.bevel_dark,
255        }
256    }
257}
258
259/// The geometry a framed region is drawn with.
260///
261/// Every field is a value, which is why they all arrive from the caller:
262/// radius and border width belong to `makeover-geometry`, and margins come
263/// from its relational gaps.
264#[derive(Debug, Clone, Copy, PartialEq)]
265pub struct FrameStyle {
266    /// Corner radius. Square under the Platinum default.
267    pub radius: CornerRadius,
268    /// Inner margin between the frame and its contents.
269    pub margin: Margin,
270    /// Bevel stroke width, in points.
271    pub stroke: f32,
272}
273
274impl Default for FrameStyle {
275    /// A one-point square frame with no inner margin.
276    fn default() -> Self {
277        Self {
278            radius: CornerRadius::ZERO,
279            margin: Margin::ZERO,
280            stroke: 1.0,
281        }
282    }
283}
284
285/// Paint a two-tone edge just inside `rect`.
286///
287/// Fill first, bevel after: this adds two polylines and nothing else, so it
288/// composes over whatever is already there. That is what lets it go over an
289/// [`egui::TextEdit`] after `ui.add`, where the widget's own fill has landed.
290///
291/// Two three-point polylines meeting at opposite corners, rather than four
292/// segments, so egui mitres the corner joins instead of leaving a notch.
293///
294/// The dark polyline is drawn second, so the two corners where the runs meet
295/// take its tone. That is the right answer here rather than a concession.
296/// [`makeover_layout::Bevel`] holds those corners to belong to both edges, and
297/// a renderer with room to divide one should; at the default one-point stroke
298/// the corner is a one-point square, so the division is sub-pixel and
299/// antialiasing resolves it to the same blend the mitre already gives. Splitting
300/// it would add a seam and no information. `makeover-tui` does split, because a
301/// terminal cell is large enough that not splitting costs a visible cell of edge
302/// weight — the same rule, at a resolution where it has something to say.
303pub fn paint_bevel(painter: &Painter, rect: Rect, bevel: Bevel, palette: &Palette, stroke: f32) {
304    let (top_left, bottom_right) = bevel.edges();
305
306    // Inset by half a stroke so the line lands inside `rect` rather than
307    // straddling its edge, which on a fractional-scale display is the
308    // difference between one crisp pixel and two dim ones.
309    let r = rect.shrink(stroke / 2.0);
310
311    painter.add(Shape::line(
312        vec![r.left_bottom(), r.left_top(), r.right_top()],
313        Stroke::new(stroke, palette.edge(top_left)),
314    ));
315    painter.add(Shape::line(
316        vec![r.right_top(), r.right_bottom(), r.left_bottom()],
317        Stroke::new(stroke, palette.edge(bottom_right)),
318    ));
319}
320
321/// Draw a region at a given [`Depth`]: its fill and its edge, together.
322///
323/// [`Depth::Flat`] gets neither, and inherits whatever it sits on. That is the
324/// difference between level-with and painted-the-same-colour, and it is the
325/// reason `Depth::fill` returns an [`Option`] rather than defaulting to the
326/// page.
327pub fn frame<R>(
328    ui: &mut Ui,
329    depth: Depth,
330    palette: &Palette,
331    style: FrameStyle,
332    add_contents: impl FnOnce(&mut Ui) -> R,
333) -> R {
334    let mut f = egui::Frame::new()
335        .corner_radius(style.radius)
336        .inner_margin(style.margin);
337    // Two ways there is no fill to paint, and they collapse to the same
338    // outcome: the depth names none (Depth::Flat), or it names one this
339    // renderer cannot resolve. Either way the frame goes unfilled and the
340    // bevel below carries the depth on its own, which is the rule this
341    // module already documents for Flat.
342    if let Some(fill) = depth.fill().and_then(|f| palette.fill(f)) {
343        f = f.fill(fill);
344    }
345    // A surface that overlays the page is cast onto it. [`Palette::cast`] has
346    // answered what that means here since 0.10.0 and nothing could reach it: a
347    // description had no way to say Overlay until makeover-layout 0.14.0, so
348    // the answer sat beside the question. Keyed off the fill rather than the
349    // variant, so it stays right for whatever else the description calls an
350    // overlay later.
351    if depth.fill() == Some(Fill::Overlay) {
352        f = f.shadow(palette.cast());
353    }
354    let framed = f.show(ui, add_contents);
355    if let Some(bevel) = depth.bevel() {
356        paint_bevel(
357            ui.painter(),
358            framed.response.rect,
359            bevel,
360            palette,
361            style.stroke,
362        );
363    }
364    framed.inner
365}
366
367/// The geometry a field group is drawn with.
368///
369/// Values again, for the reason [`FrameStyle`] is: every number here belongs to
370/// `makeover-geometry` and arrives already resolved.
371#[derive(Debug, Clone, Copy, PartialEq)]
372pub struct FieldStyle {
373    /// The well a text control sits in.
374    pub frame: FrameStyle,
375    /// Between a field's own parts: its label, its control, its hint and its
376    /// error.
377    pub gap: f32,
378    /// Between one field and the next.
379    pub group_gap: f32,
380    /// What marks a required field, appended to its label.
381    ///
382    /// A knob rather than a constant, because it is the one piece of *copy* in
383    /// this crate and copy is not a renderer's call. A webview does not need it
384    /// at all — it emits the `required` attribute and the browser answers — so
385    /// this renderer is the first place where a compulsory field either shows
386    /// that it is or silently does not.
387    pub required_marker: &'static str,
388}
389
390impl Default for FieldStyle {
391    /// The default frame, no gaps, and an asterisk.
392    fn default() -> Self {
393        Self {
394            frame: FrameStyle::default(),
395            gap: 0.0,
396            group_gap: 0.0,
397            required_marker: "*",
398        }
399    }
400}
401
402/// What the field currently holds, borrowed from wherever the app keeps it.
403///
404/// The immediate-mode counterpart of `makeover_webview::form::Value`, and the
405/// place the two renderers are forced apart: there the value is read back out
406/// of the DOM after the fact, and here the widget writes through this borrow as
407/// it is edited. Same reason the description carries neither.
408///
409/// An enum rather than a bag of options, on the reasoning
410/// `makeover_webview::form::Value` records: a checkbox holding a string is
411/// unsayable here, where a struct would let it be said and then have to cope.
412#[derive(Debug, Default)]
413pub enum Filling<'a> {
414    /// Nothing to edit. The control is drawn and does not answer.
415    #[default]
416    Absent,
417    /// The buffer behind anything that takes typed text, a select included:
418    /// what a select holds is the `value` of one of its [`Choice`]s.
419    ///
420    /// [`Choice`]: makeover_layout::Choice
421    Text(&'a mut String),
422    /// A checkbox, on or off.
423    On(&'a mut bool),
424}
425
426/// The label, marked if the field is compulsory.
427fn label_text(field: &Field<'_>, style: &FieldStyle) -> String {
428    if field.required {
429        format!("{} {}", field.label, style.required_marker)
430    } else {
431        field.label.to_owned()
432    }
433}
434
435/// The four shapes a control comes in here, which is fewer than there are
436/// kinds.
437///
438/// [`FieldKind`] is `#[non_exhaustive]` and grows; this does not, because the
439/// ways egui has of asking for a value do not. Reducing the open set to this
440/// closed one in one total function is what keeps a new kind from needing a new
441/// arm at every match below.
442#[derive(Debug, Clone, Copy, PartialEq, Eq)]
443enum Control {
444    /// Typed into, so it is drawn as a well: the user looks into it.
445    Typed,
446    /// Picked from a control that shows one option at a time. Pressed rather
447    /// than looked into, so egui's own control painting stands.
448    Chosen,
449    /// Picked from options that are all on screen at once.
450    ///
451    /// Apart from [`Chosen`](Self::Chosen) because the description holds them
452    /// apart, and holding them apart is the whole content of
453    /// [`FieldKind::Radio`]: same question, and an answer the user can read
454    /// without opening anything.
455    Listed,
456    /// Held on or off.
457    Toggled,
458}
459
460/// Which shape a kind takes.
461///
462/// The wildcard falls to [`Control::Typed`] on purpose: a kind added to the
463/// description since this renderer was built degrades to a text box, which
464/// accepts any value the others would, rather than to nothing drawn at all.
465///
466/// `FieldKind::File` lands there as of makeover-layout 0.11.0, and it is left
467/// there rather than grown a shape of its own. egui's honest answer is a button
468/// that opens a native picker, which is a fifth control and a file-dialog
469/// dependency; no consumer of this crate asks for a file field yet. Same
470/// position this crate took on `Meter` at 0.10.0: the membership test is that
471/// every renderer *could* answer honestly, not that each one does on the day.
472/// A path in a text box is not nothing, and it is what an app that needs this
473/// tomorrow gets today.
474const fn control_shape(kind: FieldKind) -> Control {
475    match kind {
476        FieldKind::Select => Control::Chosen,
477        FieldKind::Radio => Control::Listed,
478        FieldKind::Checkbox => Control::Toggled,
479        _ => Control::Typed,
480    }
481}
482
483/// What a select shows for the value it currently holds.
484///
485/// A value no option carries stays on screen as itself rather than reading as
486/// whichever option happens to be first. goingson saved a backup retention of
487/// 10 against a 1/3/7/14/0 list and the browser silently showed it as 1, so the
488/// next save wrote a value nobody chose; `makeover-webview` grew the fix as a
489/// stray `<option>` and this is the same fix in the shape egui allows.
490fn shown_label<'a>(options: &'a [Choice<'a>], value: &'a str) -> &'a str {
491    options
492        .iter()
493        .find(|opt| opt.value == value)
494        .map_or(value, |opt| opt.label)
495}
496
497/// The control alone, without its label, hint or error.
498fn control(
499    ui: &mut Ui,
500    field: &Field<'_>,
501    filling: Filling<'_>,
502    palette: &Palette,
503    style: &FieldStyle,
504) -> Response {
505    // The mismatch path: described as one thing and filled as another. Nothing
506    // here can fix it, so it is drawn as the empty, inert version of what was
507    // described — visible on screen, in the way an empty select is at the
508    // webview renderer, rather than reported in a log nobody reads.
509    let mut discard = String::new();
510    let mut off = false;
511
512    match control_shape(field.kind) {
513        Control::Typed => {
514            let text = match filling {
515                Filling::Text(text) => text,
516                _ => &mut discard,
517            };
518            // An empty frame and no margin: the well is this crate's, and egui's
519            // own control background and padding would sit underneath it saying
520            // something different about both.
521            let mut edit = if matches!(field.kind, FieldKind::Textarea) {
522                TextEdit::multiline(text)
523            } else {
524                TextEdit::singleline(text)
525            }
526            .frame(egui::Frame::NONE)
527            .margin(Margin::ZERO)
528            .text_color(palette.content)
529            .password(field.kind.confidential());
530            if let Some(ghost) = field.placeholder {
531                edit = edit.hint_text(RichText::new(ghost).color(palette.content_muted));
532            }
533            frame(ui, Depth::Well, palette, style.frame, |ui| ui.add(edit))
534        }
535        Control::Toggled => {
536            let on = match filling {
537                Filling::On(on) => on,
538                _ => &mut off,
539            };
540            ui.checkbox(on, RichText::new(field.label).color(palette.content))
541        }
542        Control::Listed => {
543            let value = match filling {
544                Filling::Text(text) => text,
545                _ => &mut discard,
546            };
547            // No `shown_label` counterpart, and none is needed: a value no
548            // option carries leaves every button unfilled, which is already
549            // the honest report on screen. The select needs the fix because it
550            // has one slot and must put *something* in it.
551            let group = ui.vertical(|ui| {
552                let mut answered: Option<Response> = None;
553                for opt in field.options {
554                    let picked = ui.radio_value(
555                        value,
556                        opt.value.to_owned(),
557                        RichText::new(opt.label).color(palette.content),
558                    );
559                    answered = Some(match answered {
560                        Some(prev) => prev.union(picked),
561                        None => picked,
562                    });
563                }
564                answered
565            });
566            // A group described with no options answers as its own empty area
567            // rather than as no response at all, which keeps the caller's
568            // `.changed()` chain working on a field whose option list has not
569            // loaded yet.
570            group.inner.unwrap_or(group.response)
571        }
572        Control::Chosen => {
573            let value = match filling {
574                Filling::Text(text) => text,
575                _ => &mut discard,
576            };
577            let shown = shown_label(field.options, value);
578            ComboBox::from_id_salt(field.name)
579                .selected_text(RichText::new(shown).color(palette.content))
580                .show_ui(ui, |ui| {
581                    for opt in field.options {
582                        ui.selectable_value(
583                            value,
584                            opt.value.to_owned(),
585                            RichText::new(opt.label).color(palette.content),
586                        );
587                    }
588                })
589                .response
590        }
591    }
592}
593
594/// One field, as the column the app drops into its form.
595///
596/// The anatomy is `makeover-webview`'s, so the two renderers put a form
597/// together the same way: label, control, hint, error, top to bottom, with a
598/// checkbox labelling itself instead of taking a label above.
599///
600/// Returns [`None`] for a [`FieldKind::Hidden`] field, which is what
601/// [`FieldKind::visible`] means and is the honest answer here: a webview still
602/// emits an input for it because the form submits, and an immediate-mode
603/// renderer has no form and no submission, so a hidden field is a value the app
604/// already holds and there is nothing to draw or to respond to.
605///
606/// `state` is the description's interaction axis.
607/// [`State::Disabled`] greys the field and stops it answering, through
608/// [`State::suppresses_interaction`] rather than through a second reading of
609/// what disabled means. [`State::Focus`] is deliberately not acted on: egui
610/// paints its own focus stroke and the description asks for one ring, not one
611/// per renderer that happens to have opinions.
612pub fn field(
613    ui: &mut Ui,
614    field: &Field<'_>,
615    filling: Filling<'_>,
616    state: Option<State>,
617    palette: &Palette,
618    style: &FieldStyle,
619) -> Option<Response> {
620    if !field.kind.visible() {
621        return None;
622    }
623    let enabled = !state.is_some_and(State::suppresses_interaction);
624    let text = if enabled {
625        palette.content
626    } else {
627        palette.content_muted
628    };
629
630    let response = ui
631        .vertical(|ui| {
632            ui.spacing_mut().item_spacing.y = style.gap;
633
634            // A checkbox labels itself, on the right of the box.
635            // `FieldKind::labels_itself` is the description saying so, and both
636            // webview apps special-cased it inline before it did.
637            if !field.kind.labels_itself() {
638                ui.label(RichText::new(label_text(field, style)).color(text));
639            }
640
641            let response = ui
642                .add_enabled_ui(enabled, |ui| control(ui, field, filling, palette, style))
643                .inner;
644
645            // Standing help first, then what is wrong now. Both, in that order,
646            // for the reason the webview renderer names both in
647            // `aria-describedby`: an error appearing must not take the hint
648            // away with it.
649            if let Some(hint) = field.hint {
650                ui.label(RichText::new(hint).color(palette.content_muted));
651            }
652            if let Some(error) = field.error {
653                ui.label(RichText::new(error).color(palette.danger));
654            }
655            response
656        })
657        .inner;
658
659    Some(response)
660}
661
662/// A set of fields, laid down a column.
663///
664/// `show_extended` is the disclosure, and it is a parameter rather than state
665/// held here because the disclosure belongs to the *form* and not to any field:
666/// [`Field::extended`] marks which fields are behind one, and the app owns
667/// whether it is open. That is the same division `makeover-webview` draws when
668/// it marks the group `data-extended` and emits no control to toggle it.
669///
670/// `draw` is called once per field that should be visible, in order. Taking a
671/// callback rather than a slice of [`Filling`]s is what keeps the app's own
672/// values borrowed one at a time: a form's fields usually live in different
673/// structs, and a parallel array would have to be built each frame and kept in
674/// step with the description by hand.
675pub fn group<'a>(
676    ui: &mut Ui,
677    fields: &'a [Field<'a>],
678    show_extended: bool,
679    style: &FieldStyle,
680    mut draw: impl FnMut(&mut Ui, &'a Field<'a>),
681) {
682    ui.vertical(|ui| {
683        ui.spacing_mut().item_spacing.y = style.group_gap;
684        for f in fields {
685            if f.extended && !show_extended {
686                continue;
687            }
688            draw(ui, f);
689        }
690    });
691}
692
693#[cfg(test)]
694mod tests {
695    use super::*;
696
697    fn palette(well: Color32) -> Palette {
698        Palette {
699            page: Color32::from_rgb(1, 1, 1),
700            raised: Color32::from_rgb(2, 2, 2),
701            overlay: Color32::from_rgb(3, 3, 3),
702            well,
703            sunken: Color32::from_rgb(4, 4, 4),
704            bevel_light: Color32::WHITE,
705            bevel_dark: Color32::BLACK,
706            elevation: Color32::from_black_alpha(46),
707            content: Color32::from_rgb(5, 5, 5),
708            content_muted: Color32::from_rgb(6, 6, 6),
709            action: Color32::from_rgb(7, 7, 7),
710            danger: Color32::from_rgb(8, 8, 8),
711        }
712    }
713
714    /// The cast is egui's own shadow type carrying the theme's tone, which is
715    /// the whole of what this crate had to decide for it: unlike a bevel, egui
716    /// already knows how to paint one.
717    #[test]
718    fn the_cast_hands_egui_the_themes_tone() {
719        let p = palette(Color32::from_rgb(9, 9, 9));
720        let cast = p.cast();
721        assert_eq!(cast.color, p.elevation);
722        assert!(cast.blur > 0, "a cast shadow is soft");
723        assert_eq!(cast.offset, [0, 2], "it falls downward and only a little");
724    }
725
726    #[test]
727    fn a_well_resolves_to_its_own_token() {
728        // No substitution left. The page-filled well was a stand-in for a
729        // token that did not exist yet; it exists now.
730        let w = Color32::from_rgb(9, 9, 9);
731        let p = palette(w);
732        assert_eq!(p.fill(Fill::Well), Some(w));
733        assert_ne!(p.fill(Fill::Well), Some(p.page));
734    }
735
736    #[test]
737    fn every_intent_is_a_plain_lookup() {
738        let p = palette(Color32::from_rgb(9, 9, 9));
739        assert_eq!(p.fill(Fill::Page), Some(p.page));
740        assert_eq!(p.fill(Fill::Raised), Some(p.raised));
741        assert_eq!(p.fill(Fill::Overlay), Some(p.overlay));
742    }
743
744    /// Sunken is its own colour, not the well's and not the page's. The two
745    /// are authored in opposite directions and an earlier cut of the
746    /// description conflated them.
747    #[test]
748    fn sunken_is_neither_the_well_nor_the_page() {
749        let p = palette(Color32::from_rgb(9, 9, 9));
750        assert_eq!(p.fill(Fill::Sunken), Some(p.sunken));
751        assert_ne!(p.fill(Fill::Sunken), p.fill(Fill::Well));
752        assert_ne!(p.fill(Fill::Sunken), p.fill(Fill::Page));
753    }
754
755    #[test]
756    fn a_raised_region_never_resolves_to_the_well_fill() {
757        // The cross-app bug, asserted at the renderer boundary this time.
758        let p = palette(Color32::from_rgb(9, 9, 9));
759        let raised = Depth::Raised.fill().and_then(|f| p.fill(f));
760        let well = Depth::Well.fill().and_then(|f| p.fill(f));
761        assert_eq!(raised, Some(p.raised));
762        assert_ne!(raised, well);
763    }
764
765    #[test]
766    fn an_overlay_is_cast_onto_the_page_and_takes_no_edge() {
767        // makeover-layout 0.14.0 is what made this reachable. The answer was
768        // already here at 0.10.0 and the question could not be asked.
769        let p = palette(Color32::from_rgb(9, 9, 9));
770        assert_eq!(
771            Depth::Overlay.fill().and_then(|f| p.fill(f)),
772            Some(p.overlay)
773        );
774        assert_eq!(Depth::Overlay.bevel(), None);
775        // The shadow `frame` reaches for is the theme's tone rather than
776        // egui's default, which is the whole reason `cast` exists.
777        assert_eq!(p.cast().color, p.elevation);
778    }
779
780    #[test]
781    fn the_lit_edge_swaps_when_a_card_is_pressed() {
782        let p = palette(Color32::from_rgb(9, 9, 9));
783        let (tl, _) = Depth::Raised.bevel().unwrap().edges();
784        let (ptl, _) = Depth::Raised.pressed().bevel().unwrap().edges();
785        assert_eq!(p.edge(tl), p.bevel_light);
786        assert_eq!(p.edge(ptl), p.bevel_dark);
787    }
788
789    #[test]
790    fn flat_asks_for_neither_fill_nor_edge() {
791        assert!(Depth::Flat.fill().is_none());
792        assert!(Depth::Flat.bevel().is_none());
793    }
794
795    #[test]
796    fn a_select_keeps_a_value_none_of_its_options_carries() {
797        // The save-the-wrong-thing bug, asserted at the second renderer so it
798        // is not re-found there. goingson's own numbers.
799        let options = [
800            Choice::plain("1"),
801            Choice::plain("3"),
802            Choice::plain("7"),
803            Choice::plain("14"),
804        ];
805        assert_eq!(shown_label(&options, "10"), "10");
806        // And a value that does match reads as its label, not as itself.
807        let spelled = [Choice {
808            value: "7",
809            label: "One week",
810        }];
811        assert_eq!(shown_label(&spelled, "7"), "One week");
812    }
813
814    #[test]
815    fn only_a_required_field_is_marked() {
816        let style = FieldStyle::default();
817        let plain = Field::new(FieldKind::Text, "title", "Title");
818        assert_eq!(label_text(&plain, &style), "Title");
819
820        let required = Field {
821            required: true,
822            ..plain
823        };
824        assert_eq!(label_text(&required, &style), "Title *");
825
826        // The marker is copy and the app owns it, which is why it is a knob.
827        let house = FieldStyle {
828            required_marker: "(required)",
829            ..style
830        };
831        assert_eq!(label_text(&required, &house), "Title (required)");
832    }
833
834    #[test]
835    fn a_select_and_a_checkbox_are_pressed_and_everything_else_is_typed_into() {
836        // What decides whether the control gets a well. A well is for what the
837        // user looks into, and only one of these is.
838        assert_eq!(control_shape(FieldKind::Select), Control::Chosen);
839        assert_eq!(control_shape(FieldKind::Radio), Control::Listed);
840        assert_eq!(control_shape(FieldKind::Checkbox), Control::Toggled);
841        for k in [
842            FieldKind::Text,
843            FieldKind::Secret,
844            FieldKind::Number,
845            FieldKind::Email,
846            FieldKind::Url,
847            FieldKind::Tel,
848            FieldKind::Textarea,
849        ] {
850            assert_eq!(control_shape(k), Control::Typed, "{k:?} is typed into");
851        }
852    }
853
854    #[test]
855    fn the_two_option_taking_kinds_are_drawn_differently_on_purpose() {
856        // The description holds Select and Radio apart, and a renderer that
857        // collapsed them would silently answer a question the app did not ask:
858        // audiofiles' storage style is irreversible and its alternatives have
859        // to be readable without opening anything. Asserting the two shapes
860        // differ is asserting that distinction survives the trip.
861        assert!(FieldKind::Select.offers_options());
862        assert!(FieldKind::Radio.offers_options());
863        assert_ne!(
864            control_shape(FieldKind::Select),
865            control_shape(FieldKind::Radio)
866        );
867    }
868
869    #[test]
870    fn a_hidden_field_draws_nothing_and_answers_nothing() {
871        // Where the two renderers legitimately part: a webview still emits an
872        // input because the form submits, and there is no form here.
873        let f = Field::new(FieldKind::Hidden, "id", "Id");
874        let p = palette(Color32::from_rgb(9, 9, 9));
875        egui::__run_test_ui(|ui| {
876            let drawn = field(ui, &f, Filling::Absent, None, &p, &FieldStyle::default());
877            assert!(drawn.is_none());
878        });
879    }
880
881    #[test]
882    fn a_disabled_field_stops_answering_and_a_focused_one_does_not() {
883        let f = Field::new(FieldKind::Text, "title", "Title");
884        let p = palette(Color32::from_rgb(9, 9, 9));
885        let style = FieldStyle::default();
886        egui::__run_test_ui(|ui| {
887            let mut text = String::from("x");
888            let disabled = field(
889                ui,
890                &f,
891                Filling::Text(&mut text),
892                Some(State::Disabled),
893                &p,
894                &style,
895            )
896            .unwrap();
897            assert!(!disabled.enabled());
898
899            let mut text = String::from("x");
900            let focused = field(
901                ui,
902                &f,
903                Filling::Text(&mut text),
904                Some(State::Focus),
905                &p,
906                &style,
907            )
908            .unwrap();
909            assert!(focused.enabled(), "focus is a thing you can still click");
910        });
911    }
912
913    #[test]
914    fn a_field_described_one_way_and_filled_another_is_drawn_inert() {
915        // No panic and no write-through. A checkbox handed a string cannot be
916        // filled, so it is drawn off and left alone.
917        let f = Field::new(FieldKind::Checkbox, "done", "Done");
918        let p = palette(Color32::from_rgb(9, 9, 9));
919        let mut text = String::from("untouched");
920        egui::__run_test_ui(|ui| {
921            let drawn = field(
922                ui,
923                &f,
924                Filling::Text(&mut text),
925                None,
926                &p,
927                &FieldStyle::default(),
928            );
929            assert!(drawn.is_some());
930        });
931        assert_eq!(text, "untouched");
932    }
933
934    #[test]
935    fn the_disclosure_belongs_to_the_form_and_not_to_the_field() {
936        let fields = [
937            Field::new(FieldKind::Text, "title", "Title"),
938            Field {
939                extended: true,
940                ..Field::new(FieldKind::Text, "notes", "Notes")
941            },
942        ];
943        let style = FieldStyle::default();
944
945        let mut closed = Vec::new();
946        egui::__run_test_ui(|ui| {
947            group(ui, &fields, false, &style, |_, f| closed.push(f.name));
948        });
949        assert_eq!(closed, ["title"]);
950
951        let mut open = Vec::new();
952        egui::__run_test_ui(|ui| {
953            group(ui, &fields, true, &style, |_, f| open.push(f.name));
954        });
955        assert_eq!(open, ["title", "notes"]);
956    }
957
958    #[test]
959    fn the_default_frame_is_square_and_one_point() {
960        let d = FrameStyle::default();
961        assert_eq!(d.radius, CornerRadius::ZERO);
962        assert_eq!(d.margin, Margin::ZERO);
963        assert!((d.stroke - 1.0).abs() < f32::EPSILON);
964    }
965}