r3bl_tui 0.7.7

TUI library to build modern apps inspired by React, Elm, with Flexbox, CSS, editor component, emoji support, and more
Documentation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
// Copyright (c) 2023-2025 R3BL LLC. Licensed under Apache License, Version 2.0.

use crate::{ChUnit, CliTextInline, CommonResult, DEVELOPMENT_MODE, FunctionComponent,
            GCStringOwned, Header, HowToChoose, InlineString, InlineVec, OutputDevice,
            State, StyleSheet, TuiStyle, ch, cli_text_inline, col,
            core::common::string_repeat_cache::get_spaces, fg_blue, get_terminal_width,
            inline_string, lock_output_device_as_mut, queue_commands, usize, width};
use crossterm::{cursor::{MoveToColumn, MoveToNextLine, MoveToPreviousLine},
                style::{Print, ResetColor},
                terminal::{Clear, ClearType}};
use miette::IntoDiagnostic;

#[allow(missing_debug_implementations)]
pub struct SelectComponent {
    pub output_device: OutputDevice,
    pub style: StyleSheet,
}

const IS_FOCUSED: &str = "";
const IS_NOT_FOCUSED: &str = "   ";
const MULTI_SELECT_IS_SELECTED: &str = "";
const MULTI_SELECT_IS_NOT_SELECTED: &str = "";
const SINGLE_SELECT_IS_SELECTED: &str = "";
const SINGLE_SELECT_IS_NOT_SELECTED: &str = "";

impl FunctionComponent<State> for SelectComponent {
    fn get_output_device(&mut self) -> OutputDevice { self.output_device.clone() }

    // Header can be either a single line or a multi line.
    fn calculate_header_viewport_height(&self, state: &mut State) -> ChUnit {
        match state.header {
            Header::SingleLine(_) => ch(1),
            Header::MultiLine(ref lines) => ch(lines.len()),
        }
    }

    /// If there are more items than the max display height, then we only use max display
    /// height. Otherwise we can shrink the display height to the number of items.
    /// This does NOT include the header.
    fn calculate_items_viewport_height(&self, state: &mut State) -> ChUnit {
        if state.items.len() > usize(state.max_display_height) {
            state.max_display_height
        } else {
            ch(state.items.len())
        }
    }

    /// Allocate space and print the lines. The bring the cursor back to the start of the
    /// lines.
    fn render(&mut self, state: &mut State) -> CommonResult<()> {
        let render_context = render_helper::RenderContext::new(self, state);

        render_helper::log_render_debug_info(state, &render_context);

        self.allocate_viewport_height_space(state)?;

        render_helper::render_header(
            &mut self.output_device,
            &state.header,
            &self.style.header_style,
            render_context.viewport_width,
            render_context.start_display_col_offset,
        )?;

        render_helper::render_items(
            &mut self.output_device,
            state,
            &self.style,
            &render_context,
        )?;

        render_helper::move_cursor_back_to_start(
            &mut self.output_device,
            render_context.items_viewport_height,
            render_context.header_viewport_height,
        )?;

        lock_output_device_as_mut!(self.output_device)
            .flush()
            .into_diagnostic()?;

        Ok(())
    }
}

mod render_helper {
    use super::{ChUnit, Clear, ClearType, CliTextInline, CommonResult, DEVELOPMENT_MODE,
                FunctionComponent, GCStringOwned, Header, HowToChoose, IS_FOCUSED,
                IS_NOT_FOCUSED, InlineString, InlineVec, MULTI_SELECT_IS_NOT_SELECTED,
                MULTI_SELECT_IS_SELECTED, MoveToColumn, MoveToNextLine,
                MoveToPreviousLine, OutputDevice, Print, ResetColor,
                SINGLE_SELECT_IS_NOT_SELECTED, SINGLE_SELECT_IS_SELECTED,
                SelectComponent, State, StyleSheet, TuiStyle, ch, cli_text_inline,
                clip_string_to_width_with_ellipsis, col, fg_blue, get_spaces,
                get_terminal_width, inline_string, queue_commands, usize, width};

    pub struct RenderContext {
        pub header_viewport_height: ChUnit,
        pub items_viewport_height: ChUnit,
        pub viewport_width: ChUnit,
        pub start_display_col_offset: usize,
        pub data_row_index_start: ChUnit,
    }

    impl RenderContext {
        pub fn new(component: &SelectComponent, state: &mut State) -> Self {
            let header_viewport_height =
                component.calculate_header_viewport_height(state);
            let items_viewport_height = component.calculate_items_viewport_height(state);
            let viewport_width = calculate_viewport_width(state);
            let start_display_col_offset = 1;
            let data_row_index_start = state.scroll_offset_row_index;

            Self {
                header_viewport_height,
                items_viewport_height,
                viewport_width,
                start_display_col_offset,
                data_row_index_start,
            }
        }
    }

    pub fn calculate_viewport_width(state: &State) -> ChUnit {
        // Try to get the terminal width from state first (since it should be set
        // when resize events occur). If that is not set, then get the terminal
        // width directly.
        let terminal_width = *match state.window_size {
            Some(size) => size.col_width,
            None => get_terminal_width(),
        };

        // Do not exceed the max display width (if it is set).
        if state.max_display_width == ch(0)
            || state.max_display_width > ch(terminal_width)
        {
            ch(terminal_width)
        } else {
            state.max_display_width
        }
    }

    pub fn log_render_debug_info(state: &State, render_context: &RenderContext) {
        DEVELOPMENT_MODE.then(|| {
            // % is Display, ? is Debug.
            tracing::info! {
                message = "🍎🍎🍎\n render()::state",
                details = %inline_string!(
                    "\t[raw_caret_row_index: {a}, scroll_offset_row_index: {b}], \n\theader_viewport_height: {c}, items_viewport_height:{d}, viewport_width:{e}",
                    a = fg_blue(&inline_string!("{:?}", state.raw_caret_row_index)),
                    b = fg_blue(&inline_string!("{:?}", state.scroll_offset_row_index)),
                    c = fg_blue(&inline_string!("{:?}", render_context.header_viewport_height)),
                    d = fg_blue(&inline_string!("{:?}", render_context.items_viewport_height)),
                    e = fg_blue(&inline_string!("{:?}", render_context.viewport_width)),
                )
            };
        });
    }

    pub fn render_header(
        output_device: &mut OutputDevice,
        header: &Header,
        header_style: &TuiStyle,
        viewport_width: ChUnit,
        start_display_col_offset: usize,
    ) -> CommonResult<()> {
        match header {
            Header::SingleLine(header_text) => render_single_line_header(
                output_device,
                header_text,
                header_style,
                viewport_width,
                start_display_col_offset,
            ),
            Header::MultiLine(header_lines) => {
                render_multi_line_header(output_device, header_lines, viewport_width)
            }
        }
    }

    fn render_single_line_header(
        output_device: &mut OutputDevice,
        header_text: &str,
        header_style: &TuiStyle,
        viewport_width: ChUnit,
        start_display_col_offset: usize,
    ) -> CommonResult<()> {
        let mut header_text =
            format!("{}{}", &get_spaces(start_display_col_offset), header_text);

        header_text = clip_string_to_width_with_ellipsis(header_text, viewport_width);

        // Create styled text using ASText with all styling from header_style.
        // This embeds ANSI codes in the string, replacing the individual
        // choose_apply_style! calls that were previously used.
        let styled_header = cli_text_inline(&header_text, *header_style).to_string();

        queue_commands! {
            output_device,
            // Bring the caret back to the start of line.
            MoveToColumn(0),
            // Reset the colors that may have been set by the previous command.
            ResetColor,
            // Clear the current line.
            Clear(ClearType::CurrentLine),
            // Print the styled text (ANSI codes already embedded).
            Print(styled_header),
            // Move to next line.
            MoveToNextLine(1),
            // Reset the colors.
            ResetColor,
        };

        Ok(())
    }

    fn render_multi_line_header(
        output_device: &mut OutputDevice,
        header_lines: &InlineVec<InlineVec<CliTextInline>>,
        viewport_width: ChUnit,
    ) -> CommonResult<()> {
        // Subtract 3 from viewport width because we need to add "..." to the
        // end of the line.
        let mut available_space_col_count: ChUnit = viewport_width - 3;

        // This is the vector of vectors of AnsiStyledText we want to print to
        // the screen.
        let mut multi_line_header_clipped_vec =
            InlineVec::<InlineVec<CliTextInline>>::with_capacity(header_lines.len());

        let mut maybe_clipped_text_vec: InlineVec<InlineVec<InlineString>> =
            InlineVec::with_capacity(header_lines.len());

        for header_line in header_lines {
            let mut header_line_modified = InlineVec::new();

            'inner: for span_in_header_line in header_line {
                let span_text = &span_in_header_line.text;
                let span_text_gcs = GCStringOwned::from(span_text);
                let span_us_display_width = *span_text_gcs.display_width;

                // If this span exceeds available space, clip it and stop
                // processing the rest of the spans in this line.
                if span_us_display_width > available_space_col_count {
                    // Clip the text to available space.
                    let clipped_text_str =
                        span_text_gcs.clip(col(0), width(available_space_col_count));
                    let clipped_text = inline_string!("{clipped_text_str}...");
                    header_line_modified.push(clipped_text);
                    break 'inner;
                }

                available_space_col_count -= span_us_display_width;

                // If last item in the header, then fill the remaining
                // space with spaces.
                let maybe_header_line_last_span: Option<&CliTextInline> =
                    header_line.last();

                if let Some(header_line_last_span) = maybe_header_line_last_span {
                    if span_in_header_line == header_line_last_span {
                        // Because text is not clipped, we add back the 3
                        // we subtracted earlier for the "...".
                        let num_of_spaces: ChUnit = available_space_col_count + ch(3);

                        let mut span_with_spaces = span_text.to_owned();
                        span_with_spaces.push_str(&get_spaces(num_of_spaces.as_usize()));

                        header_line_modified.push(span_with_spaces);
                    } else {
                        header_line_modified.push(span_text.to_owned());
                    }
                }
            }

            // Reset the available space.
            available_space_col_count = viewport_width - 3;
            maybe_clipped_text_vec.push(header_line_modified);
        }

        // Replace the text inside vector of vectors of AnsiStyledText with
        // the clipped text.
        let zipped = maybe_clipped_text_vec.iter().zip(header_lines.iter());
        zipped.for_each(|(clipped_text_vec, header_span_vec)| {
            let mut ansi_styled_text_vec: InlineVec<CliTextInline> = InlineVec::new();
            let zipped = clipped_text_vec.iter().zip(header_span_vec.iter());
            zipped.for_each(|(clipped_text, header_span)| {
                // Convert the CliTextInline's fields back to a TuiStyle
                let style = TuiStyle {
                    attribs: header_span.attribs,
                    color_fg: header_span.color_fg,
                    color_bg: header_span.color_bg,
                    ..Default::default()
                };
                ansi_styled_text_vec.push(cli_text_inline(clipped_text, style));
            });
            multi_line_header_clipped_vec.push(ansi_styled_text_vec);
        });

        let multi_line_header_text = multi_line_header_clipped_vec
            .iter()
            .map(|header_line| {
                header_line
                    .iter()
                    .map(ToString::to_string)
                    .collect::<String>()
            })
            .collect::<Vec<String>>()
            .join("\r\n");

        queue_commands! {
            output_device,
            // Bring the caret back to the start of line.
            MoveToColumn(0),
            // Reset the colors that may have been set by the previous command.
            ResetColor,
            // Clear the current line.
            Clear(ClearType::CurrentLine),
            // Print each AnsiStyledText.
            Print(multi_line_header_text),
            // Move to next line.
            MoveToNextLine(1),
            // Reset the colors.
            ResetColor,
        };

        Ok(())
    }

    pub fn render_items(
        output_device: &mut OutputDevice,
        state: &State,
        style: &StyleSheet,
        render_context: &RenderContext,
    ) -> CommonResult<()> {
        // Print each line in viewport.
        for viewport_row_index in 0..*render_context.items_viewport_height {
            let row_context = ItemRowContext::new(
                ch(viewport_row_index),
                render_context.data_row_index_start,
                state,
            );

            let selection_state = determine_selection_state(&row_context, state);
            let data_style = get_style_for_selection_state(selection_state, style);

            let row_prefix = create_row_prefix(
                &row_context,
                state.selection_mode,
                render_context.start_display_col_offset,
            );

            render_single_item(
                output_device,
                &row_context,
                &row_prefix,
                &data_style,
                render_context.viewport_width,
            )?;
        }

        Ok(())
    }

    #[derive(Debug, Clone, Copy)]
    enum SelectionStateStyle {
        FocusedAndSelected,
        Focused,
        Selected,
        Unselected,
    }

    #[derive(Debug, Clone, Copy)]
    enum Select {
        Yes,
        No,
    }

    #[derive(Debug, Clone, Copy)]
    enum Focus {
        Yes,
        No,
    }

    struct ItemRowContext {
        data_item: String,
        selected: Select,
        focused: Focus,
    }

    impl ItemRowContext {
        fn new(
            viewport_row_index: ChUnit,
            data_row_index_start: ChUnit,
            state: &State,
        ) -> Self {
            let data_row_index: usize =
                (data_row_index_start + viewport_row_index).into();
            let caret_row_scroll_adj = viewport_row_index + state.scroll_offset_row_index;
            let data_item = state.items[data_row_index].to_string();

            let selected = if state.selected_items.iter().any(|item| item == &data_item) {
                Select::Yes
            } else {
                Select::No
            };

            let focused = if caret_row_scroll_adj == state.get_focused_index() {
                Focus::Yes
            } else {
                Focus::No
            };

            Self {
                data_item,
                selected,
                focused,
            }
        }
    }

    fn determine_selection_state(
        row_context: &ItemRowContext,
        _state: &State,
    ) -> SelectionStateStyle {
        match (row_context.focused, row_context.selected) {
            (Focus::Yes, Select::Yes) => SelectionStateStyle::FocusedAndSelected,
            (Focus::Yes, Select::No) => SelectionStateStyle::Focused,
            (Focus::No, Select::Yes) => SelectionStateStyle::Selected,
            (Focus::No, Select::No) => SelectionStateStyle::Unselected,
        }
    }

    fn get_style_for_selection_state(
        selection_state: SelectionStateStyle,
        style: &StyleSheet,
    ) -> TuiStyle {
        match selection_state {
            SelectionStateStyle::FocusedAndSelected => style.focused_and_selected_style,
            SelectionStateStyle::Focused => style.focused_style,
            SelectionStateStyle::Selected => style.selected_style,
            SelectionStateStyle::Unselected => style.unselected_style,
        }
    }

    fn create_row_prefix(
        row_context: &ItemRowContext,
        selection_mode: HowToChoose,
        start_display_col_offset: usize,
    ) -> String {
        let padding_left = get_spaces(start_display_col_offset);

        match selection_mode {
            HowToChoose::Single => {
                if let Focus::Yes = row_context.focused {
                    format!("{} {SINGLE_SELECT_IS_SELECTED} ", &padding_left)
                } else {
                    format!("{} {SINGLE_SELECT_IS_NOT_SELECTED} ", &padding_left)
                }
            }
            HowToChoose::Multiple => match (row_context.focused, row_context.selected) {
                (Focus::Yes, Select::Yes) => {
                    format!("{} {IS_FOCUSED} {MULTI_SELECT_IS_SELECTED} ", &padding_left)
                }
                (Focus::Yes, Select::No) => {
                    format!(
                        "{} {IS_FOCUSED} {MULTI_SELECT_IS_NOT_SELECTED} ",
                        &padding_left
                    )
                }
                (Focus::No, Select::Yes) => {
                    format!(
                        "{} {IS_NOT_FOCUSED} {MULTI_SELECT_IS_SELECTED} ",
                        &padding_left
                    )
                }
                (Focus::No, Select::No) => {
                    format!(
                        "{} {IS_NOT_FOCUSED} {MULTI_SELECT_IS_NOT_SELECTED} ",
                        &padding_left
                    )
                }
            },
        }
    }

    fn render_single_item(
        output_device: &mut OutputDevice,
        row_context: &ItemRowContext,
        row_prefix: &str,
        data_style: &TuiStyle,
        viewport_width: ChUnit,
    ) -> CommonResult<()> {
        let data_item = format!("{row_prefix}{}", row_context.data_item);
        let data_item: String =
            clip_string_to_width_with_ellipsis(data_item, viewport_width);
        let data_item_gcs = GCStringOwned::from(&data_item);
        let data_item_display_width: ChUnit = *data_item_gcs.display_width;
        let padding_right = if data_item_display_width < viewport_width {
            get_spaces(usize(viewport_width - data_item_display_width))
        } else {
            get_spaces(0)
        };

        // Create styled text using ASText with all styling from data_style.
        // This embeds ANSI codes in the string, replacing the individual
        // choose_apply_style! calls that were previously used.
        let styled_item = cli_text_inline(&data_item, *data_style).to_string();
        // Apply the same style to padding to ensure background color extends.
        let styled_padding = cli_text_inline(&padding_right, *data_style).to_string();

        queue_commands! {
            output_device,
            // Bring the caret back to the start of line.
            MoveToColumn(0),
            // Reset the colors that may have been set by the previous command.
            ResetColor,
            // Clear the current line.
            Clear(ClearType::CurrentLine),
            // Print the styled text (ANSI codes already embedded).
            Print(styled_item),
            // Print the styled padding (ensures bg color extends).
            Print(styled_padding),
            // Move to next line.
            MoveToNextLine(1),
            // Reset the colors.
            ResetColor,
        };

        Ok(())
    }

    pub fn move_cursor_back_to_start(
        output_device: &mut OutputDevice,
        items_viewport_height: ChUnit,
        header_viewport_height: ChUnit,
    ) -> CommonResult<()> {
        queue_commands! {
            output_device,
            MoveToPreviousLine(*items_viewport_height + *header_viewport_height),
        };
        Ok(())
    }
}

fn clip_string_to_width_with_ellipsis(
    header_text: String,
    viewport_width: ChUnit,
) -> String {
    let header_text_gcs = GCStringOwned::from(&header_text);
    let header_text_display_width = header_text_gcs.display_width;
    let available_space_col_count: ChUnit = viewport_width;
    if *header_text_display_width > available_space_col_count {
        // Clip the text to available space.
        let clipped_text =
            header_text_gcs.clip(col(0), width(available_space_col_count - 3));
        let clipped_text = format!("{clipped_text}...");
        return clipped_text;
    }
    header_text
}

#[cfg(test)]
mod tests {
    use super::*;
    use crate::{ColorSupport, ItemsOwned, OutputDeviceExt,
                global_color_support::{clear_override, set_override}};
    use pretty_assertions::assert_eq;
    use serial_test::serial;

    #[test]
    fn test_clip_string_to_width_with_ellipsis() {
        let line = "This is a long line that needs to be clipped".to_string();
        let clipped_line =
            clip_string_to_width_with_ellipsis(line.clone(), ChUnit::new(20));
        assert_eq!(clipped_line, "This is a long li...");

        let short_line = "This is a short line".to_string();
        let clipped_short_line =
            clip_string_to_width_with_ellipsis(short_line.clone(), ChUnit::new(20));
        assert_eq!(clipped_short_line, "This is a short line");
    }

    #[serial]
    #[test]
    fn test_select_component() {
        let mut state = State {
            header: Header::SingleLine("Header".into()),
            items: ItemsOwned::from(&["Item 1", "Item 2", "Item 3"]),
            max_display_height: ch(5),
            max_display_width: ch(40),
            raw_caret_row_index: ch(0),
            scroll_offset_row_index: ch(0),
            selected_items: ItemsOwned::new(),
            selection_mode: HowToChoose::Single,
            ..Default::default()
        };

        state.scroll_offset_row_index = ch(0);

        let (output_device, stdout_mock) = OutputDevice::new_mock();

        let mut component = SelectComponent {
            output_device,
            style: StyleSheet::default(),
        };

        set_override(ColorSupport::Ansi256);
        component.render(&mut state).unwrap();

        let generated_output = stdout_mock.get_copy_of_buffer_as_string();

        println!("generated_output = writer.get_buffer(): \n\n{generated_output:#?}\n\n");

        // Updated expected output: now uses ASText for styling, which only emits ANSI
        // codes for attributes that are set (more efficient than the old
        // choose_apply_style! macro which emitted explicit reset codes for every
        // attribute). Extended colors use colon format (ITU-T Rec. T.416).
        let expected_output = "\u{1b}[4F\u{1b}[1G\u{1b}[0m\u{1b}[2K\u{1b}[38:5:153m\u{1b}[48:5:235m Header\u{1b}[0m\u{1b}[1E\u{1b}[0m\u{1b}[1G\u{1b}[0m\u{1b}[2K\u{1b}[38:5:46m  ◉ Item 1\u{1b}[0m\u{1b}[38:5:46m                              \u{1b}[0m\u{1b}[1E\u{1b}[0m\u{1b}[1G\u{1b}[0m\u{1b}[2K  ◌ Item 2\u{1b}[0m                              \u{1b}[0m\u{1b}[1E\u{1b}[0m\u{1b}[1G\u{1b}[0m\u{1b}[2K  ◌ Item 3\u{1b}[0m                              \u{1b}[0m\u{1b}[1E\u{1b}[0m\u{1b}[4F";
        assert_eq!(generated_output, expected_output);

        clear_override();
    }
}