Loading...
Searching...
No Matches
examples/component/flexbox_gallery.cpp
// Copyright 2020 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
#include <stddef.h> // for size_t
#include <memory> // for shared_ptr, __shared_ptr_access, allocator
#include <string> // for string, basic_string, to_string, operator+, char_traits
#include <vector> // for vector
#include "ftxui/component/captured_mouse.hpp" // for ftxui
#include "ftxui/component/component.hpp" // for Radiobox, Vertical, Checkbox, Horizontal, Renderer, ResizableSplitBottom, ResizableSplitRight
#include "ftxui/component/component_base.hpp" // for ComponentBase
#include "ftxui/component/screen_interactive.hpp" // for ScreenInteractive
#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
#include "ftxui/dom/flexbox_config.hpp" // for FlexboxConfig, FlexboxConfig::AlignContent, FlexboxConfig::JustifyContent, FlexboxConfig::AlignContent::Center, FlexboxConfig::AlignItems, FlexboxConfig::Direction, FlexboxConfig::JustifyContent::Center, FlexboxConfig::Wrap
#include "ftxui/screen/color.hpp" // for Color, Color::Black
using namespace ftxui;
int main() {
auto screen = ScreenInteractive::Fullscreen();
int direction_index = 0;
int wrap_index = 0;
int justify_content_index = 0;
int align_items_index = 0;
int align_content_index = 0;
std::vector<std::string> directions = {
"Row",
"RowInversed",
"Column",
"ColumnInversed",
};
std::vector<std::string> wraps = {
"NoWrap",
"Wrap",
"WrapInversed",
};
std::vector<std::string> justify_content = {
"FlexStart", "FlexEnd", "Center", "Stretch",
"SpaceBetween", "SpaceAround", "SpaceEvenly",
};
std::vector<std::string> align_items = {
"FlexStart",
"FlexEnd",
"Center",
"Stretch",
};
std::vector<std::string> align_content = {
"FlexStart", "FlexEnd", "Center", "Stretch",
"SpaceBetween", "SpaceAround", "SpaceEvenly",
};
auto radiobox_direction = Radiobox(&directions, &direction_index);
auto radiobox_wrap = Radiobox(&wraps, &wrap_index);
auto radiobox_justify_content =
Radiobox(&justify_content, &justify_content_index);
auto radiobox_align_items = Radiobox(&align_items, &align_items_index);
auto radiobox_align_content = Radiobox(&align_content, &align_content_index);
bool element_xflex_grow = false;
bool element_yflex_grow = false;
bool group_xflex_grow = true;
bool group_yflex_grow = true;
auto checkbox_element_xflex_grow =
Checkbox("element |= xflex_grow", &element_xflex_grow);
auto checkbox_element_yflex_grow =
Checkbox("element |= yflex_grow", &element_yflex_grow);
auto checkbox_group_xflex_grow =
Checkbox("group |= xflex_grow", &group_xflex_grow);
auto checkbox_group_yflex_grow =
Checkbox("group |= yflex_grow", &group_yflex_grow);
auto make_box = [&](size_t dimx, size_t dimy, size_t index) {
std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
auto element = window(text(title) | hcenter | bold,
text(std::to_string(index)) | hcenter | dim) |
size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy) |
bgcolor(Color::HSV(index * 25, 255, 255)) |
color(Color::Black);
if (element_xflex_grow)
element = element | xflex_grow;
if (element_yflex_grow)
element = element | yflex_grow;
return element;
};
auto content_renderer = Renderer([&] {
FlexboxConfig config;
config.direction = static_cast<FlexboxConfig::Direction>(direction_index);
config.wrap = static_cast<FlexboxConfig::Wrap>(wrap_index);
config.justify_content =
static_cast<FlexboxConfig::JustifyContent>(justify_content_index);
config.align_items =
static_cast<FlexboxConfig::AlignItems>(align_items_index);
config.align_content =
static_cast<FlexboxConfig::AlignContent>(align_content_index);
auto group = flexbox(
{
make_box(8, 4, 0),
make_box(9, 6, 1),
make_box(11, 6, 2),
make_box(10, 4, 3),
make_box(13, 7, 4),
make_box(12, 4, 5),
make_box(12, 5, 6),
make_box(10, 4, 7),
make_box(12, 4, 8),
make_box(10, 5, 9),
},
config);
group = group | bgcolor(Color::Black);
group = group | notflex;
if (!group_xflex_grow)
group = hbox(group, filler());
if (!group_yflex_grow)
group = vbox(group, filler());
group = group | flex;
return group;
});
auto center = FlexboxConfig()
.Set(FlexboxConfig::JustifyContent::Center)
.Set(FlexboxConfig::AlignContent::Center);
int space_right = 10;
int space_bottom = 1;
content_renderer = ResizableSplitRight(
Renderer([&] { return flexbox({text("resizable")}, center); }),
content_renderer, &space_right);
content_renderer = ResizableSplitBottom(
Renderer([&] { return flexbox({text("resizable")}, center); }),
content_renderer, &space_bottom);
auto main_container = Container::Vertical({
Container::Horizontal({
radiobox_direction,
radiobox_wrap,
Container::Vertical({
checkbox_element_xflex_grow,
checkbox_element_yflex_grow,
checkbox_group_xflex_grow,
checkbox_group_yflex_grow,
}),
}),
Container::Horizontal({
radiobox_justify_content,
radiobox_align_items,
radiobox_align_content,
}),
content_renderer,
});
auto main_renderer = Renderer(main_container, [&] {
return vbox({
vbox({hbox({
window(text("FlexboxConfig::Direction"),
radiobox_direction->Render()),
window(text("FlexboxConfig::Wrap"), radiobox_wrap->Render()),
window(text("Misc:"),
vbox({
checkbox_element_xflex_grow->Render(),
checkbox_element_yflex_grow->Render(),
checkbox_group_xflex_grow->Render(),
checkbox_group_yflex_grow->Render(),
})),
}),
hbox({
window(text("FlexboxConfig::JustifyContent"),
radiobox_justify_content->Render()),
window(text("FlexboxConfig::AlignItems"),
radiobox_align_items->Render()),
window(text("FlexboxConfig::AlignContent"),
radiobox_align_content->Render()),
})}),
content_renderer->Render() | flex | border,
});
});
screen.Loop(main_renderer);
return 0;
}
captured_mouse.hpp
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 color.cpp:207
ftxui::Color::Black
@ Black
Definition color.hpp:52
ftxui::ScreenInteractive::Fullscreen
static ScreenInteractive Fullscreen()
Definition screen_interactive.cpp:374
color.hpp
component.hpp
component_base.hpp
elements.hpp
flexbox_config.hpp
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::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
Definition animation.hpp:10
ftxui::bgcolor
Decorator bgcolor(Color)
Decorate using a background color.
Definition 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 border.cpp:507
ftxui::HEIGHT
@ HEIGHT
Definition elements.hpp:153
ftxui::WIDTH
@ WIDTH
Definition elements.hpp:153
ftxui::xflex_grow
Element xflex_grow(Element)
Expand if possible on the X axis.
Definition flex.cpp:147
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::size
Decorator size(WidthOrHeight, Constraint, int value)
Apply a constraint on the size of an element.
Definition 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::bold
Element bold(Element)
Use a bold font, for elements with more emphasis.
Definition bold.cpp:33
ftxui::Radiobox
Component Radiobox(RadioboxOption options)
A list of element, where only one can be selected.
Definition 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 renderer.cpp:61
ftxui::hbox
Element hbox(Elements)
A container displaying elements horizontally one by one.
Definition hbox.cpp:94
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::ResizableSplitRight
Component ResizableSplitRight(Component main, Component back, int *main_size)
An horizontal split in between two components, configurable using the mouse.
Definition resizable_split.cpp:249
ftxui::filler
Element filler()
An element that will take expand proportionally to the space left in a container.
Definition flex.cpp:98
ftxui::dim
Element dim(Element)
Use a light font, for elements with less emphasis.
Definition dim.cpp:33
ftxui::ResizableSplitBottom
Component ResizableSplitBottom(Component main, Component back, int *main_size)
An vertical split in between two components, configurable using the mouse.
Definition resizable_split.cpp:317
ftxui::EQUAL
@ EQUAL
Definition elements.hpp:154
ftxui::Checkbox
Component Checkbox(CheckboxOption options)
Draw checkable element.
Definition checkbox.cpp:108
ftxui::border
Element border(Element)
Draw a border around the element.
Definition border.cpp:227
ftxui::color
Decorator color(Color)
Decorate using a foreground color.
Definition color.cpp:110
ftxui::hcenter
Element hcenter(Element)
Center an element horizontally.
Definition composite_decorator.cpp:15
ftxui::vbox
Element vbox(Elements)
A container displaying elements vertically one by one.
Definition vbox.cpp:96
screen_interactive.hpp
ftxui::FlexboxConfig
Definition flexbox_config.hpp:15
ftxui::FlexboxConfig::align_content
AlignContent align_content
Definition flexbox_config.hpp:93
ftxui::FlexboxConfig::align_items
AlignItems align_items
Definition flexbox_config.hpp:77
ftxui::FlexboxConfig::AlignContent
AlignContent
Definition flexbox_config.hpp:82
ftxui::FlexboxConfig::AlignContent::Center
@ Center
items are centered along the cross axis.
Definition flexbox_config.hpp:85
ftxui::FlexboxConfig::Direction
Direction
Definition flexbox_config.hpp:20
ftxui::FlexboxConfig::direction
Direction direction
Definition flexbox_config.hpp:27
ftxui::FlexboxConfig::wrap
Wrap wrap
Definition flexbox_config.hpp:37
ftxui::FlexboxConfig::Wrap
Wrap
Definition flexbox_config.hpp:31
ftxui::FlexboxConfig::AlignItems
AlignItems
Definition flexbox_config.hpp:71
ftxui::FlexboxConfig::justify_content
JustifyContent justify_content
Definition flexbox_config.hpp:66
ftxui::FlexboxConfig::JustifyContent
JustifyContent
Definition flexbox_config.hpp:44
ftxui::FlexboxConfig::JustifyContent::Center
@ Center
Items are centered along the line.
Definition flexbox_config.hpp:50
ftxui::FlexboxConfig::Set
FlexboxConfig & Set(FlexboxConfig::Direction)
Set the flexbox direction.
Definition flexbox_config.cpp:10