mirror of
https://github.com/ArthurSonzogni/FTXUI.git
synced 2025-09-28 16:29:34 +08:00
Implement flexbox (#277)
This implement the flexbox elements, following the HTML one. Built from them, there is also the following elements: - `paragraph` - `paragraphAlignLeft` - `paragraphAlignRight` - `paragraphAlignCenter` - `paragraphAlignJustify` This is a breaking change.
This commit is contained in:
Arthur Sonzogni
@@ -5,6 +5,7 @@ example(checkbox)
|
||||
example(checkbox_in_frame)
|
||||
example(composition)
|
||||
example(dropdown)
|
||||
example(flexbox)
|
||||
example(gallery)
|
||||
example(homescreen)
|
||||
example(input)
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
#include <memory> // for allocator, __shared_ptr_access
|
||||
#include <string> // for string, basic_string, operator+, to_string
|
||||
#include <vector> // for vector
|
||||
|
||||
#include "ftxui/component/captured_mouse.hpp" // for ftxui
|
||||
#include "ftxui/component/component.hpp" // for Input, Renderer, Vertical
|
||||
#include "ftxui/component/component_base.hpp" // for ComponentBase
|
||||
#include "ftxui/component/screen_interactive.hpp" // for Component, ScreenInteractive
|
||||
#include "ftxui/dom/elements.hpp"
|
||||
#include "ftxui/component/component.hpp"
|
||||
#include "ftxui/dom/elements.hpp" // for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN
|
||||
|
||||
int main(int argc, const char* argv[]) {
|
||||
using namespace ftxui;
|
||||
@@ -19,3 +25,7 @@ int main(int argc, const char* argv[]) {
|
||||
auto screen = ScreenInteractive::TerminalOutput();
|
||||
screen.Loop(renderer);
|
||||
}
|
||||
|
||||
// Copyright 2021 Arthur Sonzogni. All rights reserved.
|
||||
// Use of this source code is governed by the MIT license that can be found in
|
||||
// the LICENSE file.
|
||||
|
||||
192
examples/component/flexbox.cpp
Normal file
192
examples/component/flexbox.cpp
Normal file
@@ -0,0 +1,192 @@
|
||||
#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(int argc, const char* argv[]) {
|
||||
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;
|
||||
}
|
||||
|
||||
// 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.
|
||||
@@ -1,27 +1,33 @@
|
||||
#include <stddef.h> // for size_t
|
||||
#include <array> // for array
|
||||
#include <chrono> // for operator""s, chrono_literals
|
||||
#include <cmath> // for sin
|
||||
#include <functional> // for ref, reference_wrapper, function
|
||||
#include <memory> // for allocator, shared_ptr, __shared_ptr_access
|
||||
#include <string> // for string, basic_string, operator+, char_traits, to_string
|
||||
#include <string> // for string, basic_string, operator+, to_string, char_traits
|
||||
#include <thread> // for sleep_for, thread
|
||||
#include <utility> // for move
|
||||
#include <vector> // for vector
|
||||
|
||||
#include "ftxui/component/captured_mouse.hpp" // for ftxui
|
||||
#include "ftxui/component/component.hpp" // for Checkbox, Renderer, Horizontal, Vertical, Menu, Radiobox, Tab, Toggle
|
||||
#include "ftxui/component/component.hpp" // for Checkbox, Renderer, Horizontal, Vertical, Input, Menu, Radiobox, ResizableSplitLeft, Tab, Toggle
|
||||
#include "ftxui/component/component_base.hpp" // for ComponentBase
|
||||
#include "ftxui/component/component_options.hpp" // for InputOption
|
||||
#include "ftxui/component/event.hpp" // for Event, Event::Custom
|
||||
#include "ftxui/component/screen_interactive.hpp" // for Component, ScreenInteractive
|
||||
#include "ftxui/dom/elements.hpp" // for operator|, color, bgcolor, filler, Element, size, vbox, flex, hbox, graph, separator, EQUAL, WIDTH, hcenter, bold, border, window, HEIGHT, Elements, hflow, flex_grow, frame, gauge, LESS_THAN, spinner, dim, GREATER_THAN
|
||||
#include "ftxui/screen/color.hpp" // for Color, Color::BlueLight, Color::RedLight, Color::Black, Color::Blue, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default
|
||||
#include "ftxui/dom/elements.hpp" // for text, operator|, color, bgcolor, filler, Element, size, vbox, flex, hbox, separator, graph, EQUAL, paragraph, hcenter, WIDTH, bold, window, border, vscroll_indicator, Elements, HEIGHT, hflow, frame, flex_grow, flexbox, gauge, paragraphAlignCenter, paragraphAlignJustify, paragraphAlignLeft, paragraphAlignRight, dim, spinner, Decorator, LESS_THAN, center, yflex, GREATER_THAN
|
||||
#include "ftxui/screen/color.hpp" // for Color, Color::Blue, Color::BlueLight, Color::RedLight, Color::Black, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default
|
||||
#include "ftxui/screen/terminal.hpp" // for Size, Dimensions
|
||||
|
||||
using namespace ftxui;
|
||||
|
||||
int main(int argc, const char* argv[]) {
|
||||
auto screen = ScreenInteractive::Fullscreen();
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// HTOP
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
int shift = 0;
|
||||
|
||||
auto my_graph = [&shift](int width, int height) {
|
||||
@@ -92,6 +98,10 @@ int main(int argc, const char* argv[]) {
|
||||
flex | border;
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Compiler
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const std::vector<std::string> compiler_entries = {
|
||||
"gcc",
|
||||
"clang",
|
||||
@@ -248,6 +258,9 @@ int main(int argc, const char* argv[]) {
|
||||
flex_grow | border;
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Spiner
|
||||
// ---------------------------------------------------------------------------
|
||||
auto spinner_tab_renderer = Renderer([&] {
|
||||
Elements entries;
|
||||
for (int i = 0; i < 22; ++i) {
|
||||
@@ -257,6 +270,9 @@ int main(int argc, const char* argv[]) {
|
||||
return hflow(std::move(entries)) | border;
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Colors
|
||||
// ---------------------------------------------------------------------------
|
||||
auto color_tab_renderer = Renderer([] {
|
||||
return hbox({
|
||||
vbox({
|
||||
@@ -301,6 +317,9 @@ int main(int argc, const char* argv[]) {
|
||||
hcenter | border;
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Gauges
|
||||
// ---------------------------------------------------------------------------
|
||||
auto render_gauge = [&shift](int delta) {
|
||||
float progress = (shift + delta) % 1000 / 1000.f;
|
||||
return hbox({
|
||||
@@ -333,9 +352,84 @@ int main(int argc, const char* argv[]) {
|
||||
border;
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Paragraph
|
||||
// ---------------------------------------------------------------------------
|
||||
auto make_box = [](size_t dimx, size_t dimy) {
|
||||
std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
|
||||
return window(text(title) | hcenter | bold,
|
||||
text("content") | hcenter | dim) |
|
||||
size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);
|
||||
};
|
||||
|
||||
auto paragraph_renderer_left = Renderer([&] {
|
||||
auto title_style = bold | bgcolor(Color::Blue) | color(Color::Black);
|
||||
std::string str =
|
||||
"Lorem Ipsum is simply dummy text of the printing and typesetting "
|
||||
"industry. Lorem Ipsum has been the industry's standard dummy text "
|
||||
"ever since the 1500s, when an unknown printer took a galley of type "
|
||||
"and scrambled it to make a type specimen book.";
|
||||
return vbox({
|
||||
// [ Left ]
|
||||
text("Align left:") | title_style,
|
||||
paragraphAlignLeft(str),
|
||||
// [ Center ]
|
||||
text("Align center:") | title_style,
|
||||
paragraphAlignCenter(str),
|
||||
// [ Right ]
|
||||
text("Align right:") | title_style,
|
||||
paragraphAlignRight(str),
|
||||
// [ Justify]
|
||||
text("Align justify:") | title_style,
|
||||
paragraphAlignJustify(str),
|
||||
// [ Side by side ]
|
||||
text("Side by side:") | title_style,
|
||||
hbox({
|
||||
paragraph(str),
|
||||
separator() | color(Color::Blue),
|
||||
paragraph(str),
|
||||
}),
|
||||
// [ Misc ]
|
||||
text("Elements with different size:") | title_style,
|
||||
flexbox({
|
||||
make_box(10, 5),
|
||||
make_box(9, 4),
|
||||
make_box(8, 4),
|
||||
make_box(6, 3),
|
||||
make_box(10, 5),
|
||||
make_box(9, 4),
|
||||
make_box(8, 4),
|
||||
make_box(6, 3),
|
||||
make_box(10, 5),
|
||||
make_box(9, 4),
|
||||
make_box(8, 4),
|
||||
make_box(6, 3),
|
||||
}),
|
||||
}) |
|
||||
// vscroll_indicator | yflex;
|
||||
yflex | vscroll_indicator;
|
||||
});
|
||||
|
||||
auto paragraph_renderer_right = Renderer([] {
|
||||
return paragraph("<--- This vertical bar is resizable using the mouse") |
|
||||
center;
|
||||
});
|
||||
|
||||
int paragraph_renderer_split_position = Terminal::Size().dimx / 2;
|
||||
auto paragraph_renderer_group =
|
||||
ResizableSplitLeft(paragraph_renderer_left, paragraph_renderer_right,
|
||||
¶graph_renderer_split_position);
|
||||
auto paragraph_renderer_group_renderer =
|
||||
Renderer(paragraph_renderer_group,
|
||||
[&] { return paragraph_renderer_group->Render() | border; });
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tabs
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
int tab_index = 0;
|
||||
std::vector<std::string> tab_entries = {
|
||||
"htop", "color", "spinner", "gauge", "compiler",
|
||||
"htop", "color", "spinner", "gauge", "compiler", "paragraph",
|
||||
};
|
||||
auto tab_selection = Toggle(&tab_entries, &tab_index);
|
||||
auto tab_content = Container::Tab(
|
||||
@@ -345,6 +439,7 @@ int main(int argc, const char* argv[]) {
|
||||
spinner_tab_renderer,
|
||||
gauge_component,
|
||||
compiler_renderer,
|
||||
paragraph_renderer_group_renderer,
|
||||
},
|
||||
&tab_index);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user