FTXUI 6.1.9 C++ functional terminal UI.

Loading...
Searching...
No Matches
flexbox_gallery.cpp
Go to the documentation of this file.
1// Copyright 2020 Arthur Sonzogni. All rights reserved.
2// Use of this source code is governed by the MIT license that can be found in
3// the LICENSE file.
4#include <stddef.h> // for size_t
5#include <memory> // for shared_ptr, __shared_ptr_access, allocator
6#include <string> // for string, basic_string, to_string, operator+, char_traits
7#include <vector> // for vector
8
9#include "ftxui/component/captured_mouse.hpp" // for ftxui
10#include "ftxui/component/component.hpp" // for Radiobox, Vertical, Checkbox, Horizontal, Renderer, ResizableSplitBottom, ResizableSplitRight
11#include "ftxui/component/component_base.hpp" // for ComponentBase
12#include "ftxui/component/screen_interactive.hpp" // for ScreenInteractive
13#include "ftxui/dom/elements.hpp" // for text, window, operator|, vbox, hbox, Element, flexbox, bgcolor, filler, flex, size, border, hcenter, color, EQUAL, bold, dim, notflex, xflex_grow, yflex_grow, HEIGHT, WIDTH
14#include "ftxui/dom/flexbox_config.hpp" // for FlexboxConfig, FlexboxConfig::AlignContent, FlexboxConfig::JustifyContent, FlexboxConfig::AlignContent::Center, FlexboxConfig::AlignItems, FlexboxConfig::Direction, FlexboxConfig::JustifyContent::Center, FlexboxConfig::Wrap
15#include "ftxui/screen/color.hpp" // for Color, Color::Black
16
17 using namespace ftxui;
18
19 int main() {
20 auto screen = ScreenInteractive::Fullscreen();
21
22 int direction_index = 0;
23 int wrap_index = 0;
24 int justify_content_index = 0;
25 int align_items_index = 0;
26 int align_content_index = 0;
27
28 std::vector<std::string> directions = {
29 "Row",
30 "RowInversed",
31 "Column",
32 "ColumnInversed",
33 };
34
35 std::vector<std::string> wraps = {
36 "NoWrap",
37 "Wrap",
38 "WrapInversed",
39 };
40
41 std::vector<std::string> justify_content = {
42 "FlexStart", "FlexEnd", "Center", "Stretch",
43 "SpaceBetween", "SpaceAround", "SpaceEvenly",
44 };
45
46 std::vector<std::string> align_items = {
47 "FlexStart",
48 "FlexEnd",
49 "Center",
50 "Stretch",
51 };
52
53 std::vector<std::string> align_content = {
54 "FlexStart", "FlexEnd", "Center", "Stretch",
55 "SpaceBetween", "SpaceAround", "SpaceEvenly",
56 };
57
58 auto radiobox_direction = Radiobox(&directions, &direction_index);
59 auto radiobox_wrap = Radiobox(&wraps, &wrap_index);
60 auto radiobox_justify_content =
61 Radiobox(&justify_content, &justify_content_index);
62 auto radiobox_align_items = Radiobox(&align_items, &align_items_index);
63 auto radiobox_align_content = Radiobox(&align_content, &align_content_index);
64
65 bool element_xflex_grow = false;
66 bool element_yflex_grow = false;
67 bool group_xflex_grow = true;
68 bool group_yflex_grow = true;
69 auto checkbox_element_xflex_grow =
70 Checkbox("element |= xflex_grow", &element_xflex_grow);
71 auto checkbox_element_yflex_grow =
72 Checkbox("element |= yflex_grow", &element_yflex_grow);
73 auto checkbox_group_xflex_grow =
74 Checkbox("group |= xflex_grow", &group_xflex_grow);
75 auto checkbox_group_yflex_grow =
76 Checkbox("group |= yflex_grow", &group_yflex_grow);
77
78 auto make_box = [&](size_t dimx, size_t dimy, size_t index) {
79 std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
80 auto element = window(text(title) | hcenter | bold,
81 text(std::to_string(index)) | hcenter | dim) |
82 size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy) |
83 bgcolor(Color::HSV(index * 25, 255, 255)) |
84 color(Color::Black);
85 if (element_xflex_grow)
86 element = element | xflex_grow;
87 if (element_yflex_grow)
88 element = element | yflex_grow;
89 return element;
90 };
91
92 auto content_renderer = Renderer([&] {
93 FlexboxConfig config;
94 config.direction = static_cast<FlexboxConfig::Direction>(direction_index);
95 config.wrap = static_cast<FlexboxConfig::Wrap>(wrap_index);
96 config.justify_content =
97 static_cast<FlexboxConfig::JustifyContent>(justify_content_index);
98 config.align_items =
99 static_cast<FlexboxConfig::AlignItems>(align_items_index);
100 config.align_content =
101 static_cast<FlexboxConfig::AlignContent>(align_content_index);
102
103 auto group = flexbox(
104 {
105 make_box(8, 4, 0),
106 make_box(9, 6, 1),
107 make_box(11, 6, 2),
108 make_box(10, 4, 3),
109 make_box(13, 7, 4),
110 make_box(12, 4, 5),
111 make_box(12, 5, 6),
112 make_box(10, 4, 7),
113 make_box(12, 4, 8),
114 make_box(10, 5, 9),
115 },
116 config);
117
118 group = group | bgcolor(Color::Black);
119
120 group = group | notflex;
121
122 if (!group_xflex_grow)
123 group = hbox(group, filler());
124 if (!group_yflex_grow)
125 group = vbox(group, filler());
126
127 group = group | flex;
128 return group;
129 });
130
131 auto center = FlexboxConfig()
132 .Set(FlexboxConfig::JustifyContent::Center)
133 .Set(FlexboxConfig::AlignContent::Center);
134 int space_right = 10;
135 int space_bottom = 1;
136 content_renderer = ResizableSplitRight(
137 Renderer([&] { return flexbox({text("resizable")}, center); }),
138 content_renderer, &space_right);
139 content_renderer = ResizableSplitBottom(
140 Renderer([&] { return flexbox({text("resizable")}, center); }),
141 content_renderer, &space_bottom);
142
143 auto main_container = Container::Vertical({
144 Container::Horizontal({
145 radiobox_direction,
146 radiobox_wrap,
147 Container::Vertical({
148 checkbox_element_xflex_grow,
149 checkbox_element_yflex_grow,
150 checkbox_group_xflex_grow,
151 checkbox_group_yflex_grow,
152 }),
153 }),
154 Container::Horizontal({
155 radiobox_justify_content,
156 radiobox_align_items,
157 radiobox_align_content,
158 }),
159 content_renderer,
160 });
161
162 auto main_renderer = Renderer(main_container, [&] {
163 return vbox({
164 vbox({hbox({
165 window(text("FlexboxConfig::Direction"),
166 radiobox_direction->Render()),
167 window(text("FlexboxConfig::Wrap"), radiobox_wrap->Render()),
168 window(text("Misc:"),
169 vbox({
170 checkbox_element_xflex_grow->Render(),
171 checkbox_element_yflex_grow->Render(),
172 checkbox_group_xflex_grow->Render(),
173 checkbox_group_yflex_grow->Render(),
174 })),
175 }),
176 hbox({
177 window(text("FlexboxConfig::JustifyContent"),
178 radiobox_justify_content->Render()),
179 window(text("FlexboxConfig::AlignItems"),
180 radiobox_align_items->Render()),
181 window(text("FlexboxConfig::AlignContent"),
182 radiobox_align_content->Render()),
183 })}),
184 content_renderer->Render() | flex | border,
185 });
186 });
187
188 screen.Loop(main_renderer);
189
190 return 0;
191}
captured_mouse.hpp
color.hpp
component.hpp
component_base.hpp
elements.hpp
make_box
Element make_box(int x, int y)
Definition examples/component/focus.cpp:17
flexbox_config.hpp
main
int main()
Definition flexbox_gallery.cpp:19
ftxui::ScreenInteractive::Fullscreen
static ScreenInteractive Fullscreen()
Definition screen_interactive.cpp:376
ftxui::Container::Horizontal
Component Horizontal(Components children)
A list of components, drawn one by one horizontally and navigated horizontally using left/right arrow...
Definition container.cpp:360
ftxui::Radiobox
Component Radiobox(RadioboxOption options)
A list of element, where only one can be selected.
Definition src/ftxui/component/radiobox.cpp:204
ftxui::Renderer
Component Renderer(Component child, std::function< Element()>)
Return a new Component, similar to |child|, but using |render| as the Component::Render() event.
Definition src/ftxui/component/renderer.cpp:61
ftxui::Container::Vertical
Component Vertical(Components children)
A list of components, drawn one by one vertically and navigated vertically using up/down arrow key or...
Definition container.cpp:317
ftxui::ResizableSplitRight
Component ResizableSplitRight(Component main, Component back, int *main_size)
An horizontal split in between two components, configurable using the mouse.
Definition src/ftxui/component/resizable_split.cpp:249
ftxui::ResizableSplitBottom
Component ResizableSplitBottom(Component main, Component back, int *main_size)
An vertical split in between two components, configurable using the mouse.
Definition src/ftxui/component/resizable_split.cpp:317
ftxui::Checkbox
Component Checkbox(CheckboxOption options)
Draw checkable element.
Definition src/ftxui/component/checkbox.cpp:108
ftxui::FlexboxConfig::align_content
AlignContent align_content
Definition flexbox_config.hpp:105
ftxui::FlexboxConfig::align_items
AlignItems align_items
Definition flexbox_config.hpp:89
ftxui::FlexboxConfig::AlignContent
AlignContent
Definition flexbox_config.hpp:94
ftxui::FlexboxConfig::AlignContent::Center
@ Center
items are centered along the cross axis.
ftxui::FlexboxConfig::Direction
Direction
Definition flexbox_config.hpp:32
ftxui::FlexboxConfig::direction
Direction direction
Definition flexbox_config.hpp:39
ftxui::FlexboxConfig::wrap
Wrap wrap
Definition flexbox_config.hpp:49
ftxui::FlexboxConfig::Wrap
Wrap
Definition flexbox_config.hpp:43
ftxui::Node::Render
virtual void Render(Screen &screen)
Display an element on a ftxui::Screen.
Definition node.cpp:59
ftxui::FlexboxConfig::AlignItems
AlignItems
Definition flexbox_config.hpp:83
ftxui::FlexboxConfig::justify_content
JustifyContent justify_content
Definition flexbox_config.hpp:78
ftxui::FlexboxConfig::JustifyContent
JustifyContent
Definition flexbox_config.hpp:56
ftxui::FlexboxConfig::JustifyContent::Center
@ Center
Items are centered along the line.
ftxui::FlexboxConfig::Set
FlexboxConfig & Set(FlexboxConfig::Direction)
Set the flexbox direction.
Definition flexbox_config.cpp:9
ftxui::bgcolor
Decorator bgcolor(Color)
Decorate using a background color.
Definition dom/color.cpp:124
ftxui::window
Element window(Element title, Element content, BorderStyle border=ROUNDED)
Draw window with a title and a border around the element.
Definition src/ftxui/dom/border.cpp:507
ftxui::xflex_grow
Element xflex_grow(Element)
Expand if possible on the X axis.
Definition flex.cpp:147
ftxui::size
Decorator size(WidthOrHeight, Constraint, int value)
Apply a constraint on the size of an element.
Definition src/ftxui/dom/size.cpp:89
ftxui::flex
Element flex(Element)
Make a child element to expand proportionally to the space left in a container.
Definition flex.cpp:123
ftxui::center
Element center(Element)
Center an element horizontally and vertically.
Definition composite_decorator.cpp:31
ftxui::text
Element text(std::wstring text)
Display a piece of unicode text.
Definition text.cpp:160
ftxui::yflex_grow
Element yflex_grow(Element)
Expand if possible on the Y axis.
Definition flex.cpp:153
ftxui::notflex
Element notflex(Element)
Make the element not flexible.
Definition flex.cpp:177
ftxui::filler
Element filler()
An element that will take expand proportionally to the space left in a container.
Definition flex.cpp:98
ftxui::border
Element border(Element)
Draw a border around the element.
Definition src/ftxui/dom/border.cpp:227
ftxui::color
Decorator color(Color)
Decorate using a foreground color.
Definition dom/color.cpp:110
ftxui::vbox
Element vbox(Elements)
A container displaying elements vertically one by one.
Definition vbox.cpp:96
ftxui::FlexboxConfig
FlexboxConfig is a configuration structure that defines the layout properties for a flexbox container...
Definition flexbox_config.hpp:27
ftxui::Color::HSV
static Color HSV(uint8_t hue, uint8_t saturation, uint8_t value)
Build a Color from its HSV representation. https://en.wikipedia.org/wiki/HSL_and_HSV.
Definition screen/color.cpp:198
ftxui::Color::Black
@ Black
Definition color.hpp:54
ftxui
The FTXUI ftxui:: namespace.
Definition animation.hpp:10
ftxui::HEIGHT
@ HEIGHT
Definition elements.hpp:161
ftxui::WIDTH
@ WIDTH
Definition elements.hpp:161
ftxui::flexbox
Element flexbox(Elements, FlexboxConfig config=FlexboxConfig())
A container displaying elements on row/columns and capable of wrapping on the next column/row when fu...
Definition flexbox.cpp:251
ftxui::hbox
Element hbox(Elements)
A container displaying elements horizontally one by one.
Definition hbox.cpp:94
ftxui::EQUAL
@ EQUAL
Definition elements.hpp:162
screen_interactive.hpp