From bd21cac2b6212945c1d682f6c3001696e9976e98 Mon Sep 17 00:00:00 2001 From: Shreyas Atre <61797109+SAtacker@users.noreply.github.com> Date: Sun, 27 Jun 2021 21:23:17 +0530 Subject: [PATCH] Menu of components (#131) Allow Container::Vertical and Container::Horizontal to have an external selector, similar to Container::Tab. This is useful for implementing a menu of menu. Co-authored-by: ArthurSonzogni --- doc/example_list.md | 1 + examples/component/CMakeLists.txt | 1 + examples/component/homescreen.cpp | 2 +- examples/component/menu_multiple.cpp | 79 +++++++++++++++++++++ include/ftxui/component/component.hpp | 2 + include/ftxui/component/container.hpp | 3 + src/ftxui/component/component_test.cpp | 2 +- src/ftxui/component/container.cpp | 98 ++++++++++++++++++++------ src/ftxui/dom/separator.cpp | 1 + src/ftxui/dom/text_test.cpp | 4 +- 10 files changed, 168 insertions(+), 25 deletions(-) create mode 100644 examples/component/menu_multiple.cpp diff --git a/doc/example_list.md b/doc/example_list.md index 89dee95..200ccad 100644 --- a/doc/example_list.md +++ b/doc/example_list.md @@ -35,6 +35,7 @@ @example ./examples/component/input.cpp @example ./examples/component/homescreen.cpp @example ./examples/component/radiobox.cpp +@example ./examples/component/menu_multiple.cpp @example ./examples/component/slider_rgb.cpp @example ./examples/component/menu.cpp @example ./examples/component/menu_style.cpp diff --git a/examples/component/CMakeLists.txt b/examples/component/CMakeLists.txt index 66d9711..9d95fe2 100644 --- a/examples/component/CMakeLists.txt +++ b/examples/component/CMakeLists.txt @@ -12,6 +12,7 @@ example(homescreen) example(input) example(menu) example(menu2) +example(menu_multiple) example(menu_style) example(modal_dialog) example(radiobox) diff --git a/examples/component/homescreen.cpp b/examples/component/homescreen.cpp index abeff69..e25a1c2 100644 --- a/examples/component/homescreen.cpp +++ b/examples/component/homescreen.cpp @@ -362,7 +362,7 @@ int main(int argc, const char* argv[]) { bool refresh_ui_continue = true; std::thread refresh_ui([&] { - while(refresh_ui_continue) { + while (refresh_ui_continue) { using namespace std::chrono_literals; std::this_thread::sleep_for(0.05s); shift++; diff --git a/examples/component/menu_multiple.cpp b/examples/component/menu_multiple.cpp new file mode 100644 index 0000000..d1cc66f --- /dev/null +++ b/examples/component/menu_multiple.cpp @@ -0,0 +1,79 @@ +#include // for EXIT_SUCCESS +#include // for __shared_ptr_access +#include // for wstring, allocator, operator+, basic_string, char_traits +#include // for vector, __alloc_traits<>::value_type + +#include "ftxui/component/captured_mouse.hpp" // for ftxui +#include "ftxui/component/component.hpp" // for Menu, Renderer, Horizontal, Vertical +#include "ftxui/component/component_base.hpp" // for ComponentBase +#include "ftxui/component/screen_interactive.hpp" // for Component, ScreenInteractive +#include "ftxui/dom/elements.hpp" // for text, Element, operator|, window, flex, vbox +#include "ftxui/screen/string.hpp" // for to_wstring + +using namespace ftxui; + +Component Window(std::wstring title, Component component) { + return Renderer(component, [component, title] { // + return window(text(title), component->Render()) | flex; + }); +} + +int main(int argc, const char* argv[]) { + int menu_selected[] = {0, 0, 0}; + std::vector> menu_entries = { + { + L"Ananas", + L"Raspberry", + L"Citrus", + }, + { + L"Potatoes", + L"Weat", + L"Rise", + }, + { + L"Carrot", + L"Lettuce", + L"Tomato", + }, + }; + + int menu_selected_global = 0; + auto menu_global = Container::Vertical( + { + Window(L"Menu 1", Menu(&menu_entries[0], &menu_selected[0])), + Window(L"Menu 2", Menu(&menu_entries[1], &menu_selected[1])), + Window(L"Menu 3", Menu(&menu_entries[2], &menu_selected[2])), + }, + &menu_selected_global); + + auto info = Renderer([&] { + int g = menu_selected_global; + std::wstring value = menu_entries[g][menu_selected[g]]; + return window(text(L"Content"), // + vbox({ + text(L"menu_selected_global = " + to_wstring(g)), + text(L"menu_selected[0] = " + + to_wstring(menu_selected[0])), + text(L"menu_selected[1] = " + + to_wstring(menu_selected[1])), + text(L"menu_selected[2] = " + + to_wstring(menu_selected[2])), + text(L"Value = " + value), + })) | + flex; + }); + + auto global = Container::Horizontal({ + menu_global, + info, + }); + + auto screen = ScreenInteractive::TerminalOutput(); + screen.Loop(global); + return EXIT_SUCCESS; +} + +// 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. diff --git a/include/ftxui/component/component.hpp b/include/ftxui/component/component.hpp index ff7085a..c524fde 100644 --- a/include/ftxui/component/component.hpp +++ b/include/ftxui/component/component.hpp @@ -39,7 +39,9 @@ Component CatchEvent(Component child, std::function); namespace Container { Component Vertical(Components children); +Component Vertical(Components children, int* selector); Component Horizontal(Components children); +Component Horizontal(Components children, int* selector); Component Tab(Components children, int* selector); } // namespace Container diff --git a/include/ftxui/component/container.hpp b/include/ftxui/component/container.hpp index 8209281..30f77f8 100644 --- a/include/ftxui/component/container.hpp +++ b/include/ftxui/component/container.hpp @@ -13,9 +13,11 @@ class ContainerBase : public ComponentBase { public: static Component Vertical(); static Component Vertical(Components children); + static Component Vertical(Components children, int* selector); static Component Horizontal(); static Component Horizontal(Components children); + static Component Horizontal(Components children, int* selector); static Component Tab(int* selector); static Component Tab(Components children, int* selector); @@ -44,6 +46,7 @@ class ContainerBase : public ComponentBase { int selected_ = 0; int* selector_ = nullptr; + bool is_tab_ = false; private: bool OnMouseEvent(Event event); diff --git a/src/ftxui/component/component_test.cpp b/src/ftxui/component/component_test.cpp index 5e1813c..cfa46d7 100644 --- a/src/ftxui/component/component_test.cpp +++ b/src/ftxui/component/component_test.cpp @@ -1,8 +1,8 @@ +#include // for Test, SuiteApiResolver, TestInfo (ptr only), TEST, TestFactoryImpl #include // for shared_ptr, allocator, make_shared, __shared_ptr_access #include "ftxui/component/captured_mouse.hpp" // for ftxui #include "ftxui/component/component_base.hpp" // for ComponentBase, Component -#include "gtest/gtest_pred_impl.h" // for Test, SuiteApiResolver, TEST, TestFactoryImpl using namespace ftxui; diff --git a/src/ftxui/component/container.cpp b/src/ftxui/component/container.cpp index 5df5033..e82fd36 100644 --- a/src/ftxui/component/container.cpp +++ b/src/ftxui/component/container.cpp @@ -1,4 +1,5 @@ -#include // for size_t +#include // for size_t + #include // for max, min #include // for __shared_ptr_access, shared_ptr, make_shared, allocator, __shared_ptr_access<>::element_type, allocator_traits<>::value_type #include // for move @@ -30,6 +31,28 @@ Component Vertical(Components children) { return ContainerBase::Vertical(std::move(children)); } +/// @brief A list of components, drawn one by one vertically and navigated +/// vertically using up/down arrow key or 'j'/'k' keys. +/// This is useful for implementing a Menu for instance. +/// @param children the list of components. +/// @param selector An integer storing the selected children. +/// @ingroup component +/// @see ContainerBase +/// +/// ### Example +/// +/// ```cpp +/// auto container = Container::Vertical({ +/// children_1, +/// children_2, +/// children_3, +/// children_4, +/// }); +/// ``` +Component Vertical(Components children, int* selector) { + return ContainerBase::Vertical(std::move(children), selector); +} + /// @brief A list of components, drawn one by one horizontally and navigated /// horizontally using left/right arrow key or 'h'/'l' keys. /// @param children the list of components. @@ -39,17 +62,39 @@ Component Vertical(Components children) { /// ### Example /// /// ```cpp +/// int selected_children = 2; /// auto container = Container::Horizontal({ /// children_1, /// children_2, /// children_3, /// children_4, -/// }); +/// }, &selected_children); /// ``` Component Horizontal(Components children) { return ContainerBase::Horizontal(std::move(children)); } +/// @brief A list of components, drawn one by one horizontally and navigated +/// horizontally using left/right arrow key or 'h'/'l' keys. +/// @param children the list of components. +/// @ingroup component +/// @see ContainerBase +/// +/// ### Example +/// +/// ```cpp +/// int selected_children = 2; +/// auto container = Container::Horizontal({ +/// children_1, +/// children_2, +/// children_3, +/// children_4, +/// }, selected_children); +/// ``` +Component Horizontal(Components children, int* selector) { + return ContainerBase::Horizontal(std::move(children), selector); +} + /// @brief A list of components, where only one is drawn and interacted with at /// a time. The |selector| gives the index of the selected component. This is /// useful to implement tabs. @@ -82,9 +127,15 @@ Component ContainerBase::Vertical() { // static Component ContainerBase::Vertical(Components children) { + return Vertical(std::move(children), /*selector=*/nullptr); +} + +// static +Component ContainerBase::Vertical(Components children, int* selector) { auto container = std::make_shared(); container->event_handler_ = &ContainerBase::VerticalEvent; container->render_handler_ = &ContainerBase::VerticalRender; + container->selector_ = selector ? selector : &container->selected_; for (Component& child : children) container->Add(std::move(child)); return container; @@ -97,9 +148,14 @@ Component ContainerBase::Horizontal() { // static Component ContainerBase::Horizontal(Components children) { + return Horizontal(std::move(children), /*selector=*/nullptr); +} + +Component ContainerBase::Horizontal(Components children, int* selector) { auto container = std::make_shared(); container->event_handler_ = &ContainerBase::HorizontalEvent; container->render_handler_ = &ContainerBase::HorizontalRender; + container->selector_ = selector ? selector : &container->selected_; for (Component& child : children) container->Add(std::move(child)); return container; @@ -113,9 +169,10 @@ Component ContainerBase::Tab(int* selector) { // static Component ContainerBase::Tab(Components children, int* selector) { auto container = std::make_shared(); - container->selector_ = selector; + container->selector_ = selector ? selector : &container->selected_; container->event_handler_ = &ContainerBase::TabEvent; container->render_handler_ = &ContainerBase::TabRender; + container->is_tab_ = true; for (Component& child : children) container->Add(std::move(child)); return container; @@ -138,47 +195,46 @@ Component ContainerBase::ActiveChild() { if (children_.size() == 0) return nullptr; - int selected = selector_ ? *selector_ : selected_; - return children_[selected % children_.size()]; + return children_[*selector_ % children_.size()]; } void ContainerBase::SetActiveChild(ComponentBase* child) { for (size_t i = 0; i < children_.size(); ++i) { if (children_[i].get() == child) { - (selector_ ? *selector_ : selected_) = i; + *selector_ = i; return; } } } bool ContainerBase::VerticalEvent(Event event) { - int old_selected = selected_; + int old_selected = *selector_; if (event == Event::ArrowUp || event == Event::Character('k')) - selected_--; + (*selector_)--; if (event == Event::ArrowDown || event == Event::Character('j')) - selected_++; + (*selector_)++; if (event == Event::Tab && children_.size()) - selected_ = (selected_ + 1) % children_.size(); + *selector_ = (*selector_ + 1) % children_.size(); if (event == Event::TabReverse && children_.size()) - selected_ = (selected_ + children_.size() - 1) % children_.size(); + *selector_ = (*selector_ + children_.size() - 1) % children_.size(); - selected_ = std::max(0, std::min(int(children_.size()) - 1, selected_)); - return old_selected != selected_; + *selector_ = std::max(0, std::min(int(children_.size()) - 1, *selector_)); + return old_selected != *selector_; } bool ContainerBase::HorizontalEvent(Event event) { - int old_selected = selected_; + int old_selected = *selector_; if (event == Event::ArrowLeft || event == Event::Character('h')) - selected_--; + (*selector_)--; if (event == Event::ArrowRight || event == Event::Character('l')) - selected_++; + (*selector_)++; if (event == Event::Tab && children_.size()) - selected_ = (selected_ + 1) % children_.size(); + *selector_ = (*selector_ + 1) % children_.size(); if (event == Event::TabReverse && children_.size()) - selected_ = (selected_ + children_.size() - 1) % children_.size(); + *selector_ = (*selector_ + children_.size() - 1) % children_.size(); - selected_ = std::max(0, std::min(int(children_.size()) - 1, selected_)); - return old_selected != selected_; + *selector_ = std::max(0, std::min(int(children_.size()) - 1, *selector_)); + return old_selected != *selector_; } Element ContainerBase::Render() { @@ -211,7 +267,7 @@ Element ContainerBase::TabRender() { } bool ContainerBase::OnMouseEvent(Event event) { - if (selector_) + if (is_tab_) return ActiveChild()->OnEvent(event); for (Component& child : children_) { diff --git a/src/ftxui/dom/separator.cpp b/src/ftxui/dom/separator.cpp index dda48ad..fa255a8 100644 --- a/src/ftxui/dom/separator.cpp +++ b/src/ftxui/dom/separator.cpp @@ -1,4 +1,5 @@ #include // for make_shared +#include // for wstring #include "ftxui/dom/elements.hpp" // for Element, separator #include "ftxui/dom/node.hpp" // for Node diff --git a/src/ftxui/dom/text_test.cpp b/src/ftxui/dom/text_test.cpp index 8c397ff..dc43393 100644 --- a/src/ftxui/dom/text_test.cpp +++ b/src/ftxui/dom/text_test.cpp @@ -1,8 +1,8 @@ #include // for Message #include // for SuiteApiResolver, TestFactoryImpl, TestPartResult -#include // for allocator +#include // for allocator, wstring -#include "ftxui/dom/elements.hpp" // for text, Element, operator|, border +#include "ftxui/dom/elements.hpp" // for text, operator|, border, Element #include "ftxui/dom/node.hpp" // for Render #include "ftxui/screen/box.hpp" // for ftxui #include "ftxui/screen/screen.hpp" // for Screen