Mirror/FTXUI
1
0
Fork 0
mirror of https://github.com/ArthurSonzogni/FTXUI.git synced 2025-10-02 17:39:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge dom and component focus (#978)

Browse Source 
Instead of two levels of focus with `focus` and `selected`, use a recursive
level. The components set the one "active" and hbox/vbox/dbox 

Co-authored-by: ArthurSonzogni <sonzogniarthur@gmail.com>
This commit is contained in:
Ayaan
2025-03-19 20:03:05 +05:30
committed by GitHub
parent 8519e9b0f3
commit b0e087ecef
38 changed files with 431 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/ftxui/component/button.cpp
View File

@@ -37,7 +37,7 @@ class ButtonBase : public ComponentBase, public ButtonOption {
explicit ButtonBase(ButtonOption option) : ButtonOption(std::move(option)) {}
// Component implementation:
Element Render() override {
Element OnRender() override {
const bool active = Active();
const bool focused = Focused();
const bool focused_or_hover = focused || mouse_hover_;
@@ -47,14 +47,16 @@ class ButtonBase : public ComponentBase, public ButtonOption {
SetAnimationTarget(target);
}
auto focus_management = focused ? focus : active ? select : nothing;
const EntryState state{
*label, false, active, focused_or_hover, Index(),
};
auto element = (transform ? transform : DefaultTransform) //
(state);
return element | AnimatedColorStyle() | focus_management | reflect(box_);
element |= AnimatedColorStyle();
element |= focus;
element |= reflect(box_);
return element;
}
Decorator AnimatedColorStyle() {

8
src/ftxui/component/checkbox.cpp
View File

@@ -23,16 +23,17 @@ class CheckboxBase : public ComponentBase, public CheckboxOption {
private:
// Component implementation.
Element Render() override {
Element OnRender() override {
const bool is_focused = Focused();
const bool is_active = Active();
auto focus_management = is_focused ? focus : is_active ? select : nothing;
auto entry_state = EntryState{
*label, *checked, is_active, is_focused || hovered_, -1,
};
auto element = (transform ? transform : CheckboxOption::Simple().transform)(
entry_state);
return element | focus_management | reflect(box_);
element |= focus;
element |= reflect(box_);
return element;
}
bool OnEvent(Event event) override {
@@ -69,7 +70,6 @@ class CheckboxBase : public ComponentBase, public CheckboxOption {
event.mouse().motion == Mouse::Pressed) {
*checked = !*checked;
on_change();
TakeFocus();
return true;
}

41
src/ftxui/component/component.cpp
View File

@@ -15,6 +15,7 @@
#include "ftxui/component/event.hpp" // for Event
#include "ftxui/component/screen_interactive.hpp" // for Component, ScreenInteractive
#include "ftxui/dom/elements.hpp" // for text, Element
#include "ftxui/dom/node.hpp" // for Node, Elements
namespace ftxui::animation {
class Params;
@@ -103,10 +104,46 @@ void ComponentBase::DetachAllChildren() {
}
/// @brief Draw the component.
/// Build a ftxui::Element to be drawn on the ftxi::Screen representing this
/// ftxui::ComponentBase.
/// Build a ftxui::Element to be drawn on the ftxui::Screen representing this
/// ftxui::ComponentBase. Please override OnRender() to modify the rendering.
/// @ingroup component
Element ComponentBase::Render() {
// Some users might call `ComponentBase::Render()` from
// `T::OnRender()`. To avoid infinite recursion, we use a flag.
if (in_render) {
return ComponentBase::OnRender();
}
in_render = true;
Element element = OnRender();
in_render = false;
class Wrapper : public Node {
public:
bool active_ = false;
Wrapper(Element child, bool active)
: Node({std::move(child)}), active_(active) {}
void SetBox(Box box) override {
Node::SetBox(box);
children_[0]->SetBox(box);
}
void ComputeRequirement() override {
Node::ComputeRequirement();
requirement_.focused.component_active = active_;
}
};
return std::make_shared<Wrapper>(std::move(element), Active());
}
/// @brief Draw the component.
/// Build a ftxui::Element to be drawn on the ftxi::Screen representing this
/// ftxui::ComponentBase. This function is means to be overridden.
/// @ingroup component
Element ComponentBase::OnRender() {
if (children_.size() == 1) {
return children_.front()->Render();
}

12
src/ftxui/component/container.cpp
View File

@@ -98,7 +98,7 @@ class VerticalContainer : public ContainerBase {
public:
using ContainerBase::ContainerBase;
Element Render() override {
Element OnRender() override {
Elements elements;
elements.reserve(children_.size());
for (auto& it : children_) {
@@ -182,7 +182,7 @@ class HorizontalContainer : public ContainerBase {
public:
using ContainerBase::ContainerBase;
Element Render() override {
Element OnRender() override {
Elements elements;
elements.reserve(children_.size());
for (auto& it : children_) {
@@ -218,7 +218,7 @@ class TabContainer : public ContainerBase {
public:
using ContainerBase::ContainerBase;
Element Render() override {
Element OnRender() override {
const Component active_child = ActiveChild();
if (active_child) {
return active_child->Render();
@@ -244,7 +244,7 @@ class StackedContainer : public ContainerBase {
: ContainerBase(std::move(children), nullptr) {}
private:
Element Render() final {
Element OnRender() final {
Elements elements;
for (auto& child : children_) {
elements.push_back(child->Render());
@@ -334,7 +334,7 @@ Component Vertical(Components children) {
/// children_2,
/// children_3,
/// children_4,
/// });
/// }, &selected_children);
/// ```
Component Vertical(Components children, int* selector) {
return std::make_shared<VerticalContainer>(std::move(children), selector);
@@ -355,7 +355,7 @@ Component Vertical(Components children, int* selector) {
/// children_2,
/// children_3,
/// children_4,
/// }, &selected_children);
/// });
/// ```
Component Horizontal(Components children) {
return Horizontal(std::move(children), nullptr);

17
src/ftxui/component/dropdown.cpp
View File

@@ -44,12 +44,12 @@ Component Dropdown(DropdownOption option) {
}));
}
Element Render() override {
radiobox.selected =
Element OnRender() override {
selected_ =
util::clamp(radiobox.selected(), 0, int(radiobox.entries.size()) - 1);
selected_ = util::clamp(selected_(), 0, int(radiobox.entries.size()) - 1);
if (selected_() >= 0) {
if (selected_() >= 0 && selected_() < int(radiobox.entries.size())) {
title_ = radiobox.entries[selected_()];
}
@@ -70,10 +70,13 @@ Component Dropdown(DropdownOption option) {
// Auto-close the dropdown when the user selects an item, even if the item
// it the same as the previous one.
if (open_old && open_()) {
const bool should_close = (selected_() != selected_old) || //
(event == Event::Return) || //
(event == Event::Character(' ')) || //
(event == Event::Escape); //
const bool should_close =
(selected_() != selected_old) || //
(event == Event::Return) || //
(event == Event::Character(' ')) || //
(event == Event::Escape) || //
(event.is_mouse() && event.mouse().button == Mouse::Left &&
event.mouse().motion == Mouse::Pressed);
if (should_close) {
checkbox_->TakeFocus();

8
src/ftxui/component/hoverable.cpp
View File

@@ -49,8 +49,8 @@ Component Hoverable(Component component, bool* hover) {
}
private:
Element Render() override {
return ComponentBase::Render() | reflect(box_);
Element OnRender() override {
return ComponentBase::OnRender() | reflect(box_);
}
bool OnEvent(Event event) override {
@@ -98,8 +98,8 @@ Component Hoverable(Component component,
}
private:
Element Render() override {
return ComponentBase::Render() | reflect(box_);
Element OnRender() override {
return ComponentBase::OnRender() | reflect(box_);
}
bool OnEvent(Event event) override {

11
src/ftxui/component/input.cpp
View File

@@ -96,9 +96,9 @@ class InputBase : public ComponentBase, public InputOption {
private:
// Component implementation:
Element Render() override {
Element OnRender() override {
const bool is_focused = Focused();
const auto focused = (!is_focused && !hovered_) ? select
const auto focused = (!is_focused && !hovered_) ? nothing
: insert() ? focusCursorBarBlinking
: focusCursorBlockBlinking;
@@ -108,15 +108,12 @@ class InputBase : public ComponentBase, public InputOption {
// placeholder.
if (content->empty()) {
auto element = text(placeholder()) | xflex | frame;
if (is_focused) {
element |= focus;
}
return transform_func({
std::move(element), hovered_, is_focused,
true // placeholder
}) |
reflect(box_);
focus | reflect(box_);
}
Elements elements;
@@ -176,7 +173,7 @@ class InputBase : public ComponentBase, public InputOption {
elements.push_back(element);
}
auto element = vbox(std::move(elements)) | frame;
auto element = vbox(std::move(elements), cursor_line) | frame;
return transform_func({
std::move(element), hovered_, is_focused,
false // placeholder

4
src/ftxui/component/maybe.cpp
View File

@@ -24,8 +24,8 @@ Component Maybe(Component child, std::function<bool()> show) {
explicit Impl(std::function<bool()> show) : show_(std::move(show)) {}
private:
Element Render() override {
return show_() ? ComponentBase::Render() : std::make_unique<Node>();
Element OnRender() override {
return show_() ? ComponentBase::OnRender() : std::make_unique<Node>();
}
bool Focusable() const override {
return show_() && ComponentBase::Focusable();

40
src/ftxui/component/menu.cpp
View File

@@ -105,7 +105,7 @@ class MenuBase : public ComponentBase, public MenuOption {
}
}
Element Render() override {
Element OnRender() override {
Clamp();
UpdateAnimationTarget();
@@ -126,16 +126,15 @@ class MenuBase : public ComponentBase, public MenuOption {
entries[i], false, is_selected, is_focused, i,
};
auto focus_management = (selected_focus_ != i) ? nothing
: is_menu_focused ? focus
: select;
const Element element =
(entries_option.transform ? entries_option.transform
: DefaultOptionTransform) //
Element element = (entries_option.transform ? entries_option.transform
: DefaultOptionTransform) //
(state);
elements.push_back(element | AnimatedColorStyle(i) | reflect(boxes_[i]) |
focus_management);
if (selected_focus_ == i) {
element |= focus;
}
element |= AnimatedColorStyle(i);
element |= reflect(boxes_[i]);
elements.push_back(element);
}
if (elements_postfix) {
elements.push_back(elements_postfix());
@@ -145,8 +144,9 @@ class MenuBase : public ComponentBase, public MenuOption {
std::reverse(elements.begin(), elements.end());
}
const Element bar =
IsHorizontal() ? hbox(std::move(elements)) : vbox(std::move(elements));
const Element bar = IsHorizontal()
? hbox(std::move(elements), selected_focus_)
: vbox(std::move(elements), selected_focus_);
if (!underline.enabled) {
return bar | reflect(box_);
@@ -618,20 +618,22 @@ Component MenuEntry(MenuEntryOption option) {
: MenuEntryOption(std::move(option)) {}
private:
Element Render() override {
const bool focused = Focused();
Element OnRender() override {
const bool is_focused = Focused();
UpdateAnimationTarget();
const EntryState state{
label(), false, hovered_, focused, Index(),
label(), false, hovered_, is_focused, Index(),
};
const Element element =
(transform ? transform : DefaultOptionTransform) //
Element element = (transform ? transform : DefaultOptionTransform) //
(state);
auto focus_management = focused ? select : nothing;
return element | AnimatedColorStyle() | focus_management | reflect(box_);
if (is_focused) {
element |= focus;
}
return element | AnimatedColorStyle() | reflect(box_);
}
void UpdateAnimationTarget() {

2
src/ftxui/component/modal.cpp
View File

@@ -26,7 +26,7 @@ Component Modal(Component main, Component modal, const bool* show_modal) {
}
private:
Element Render() override {
Element OnRender() override {
selector_ = *show_modal_;
auto document = main_->Render();
if (*show_modal_) {

13
src/ftxui/component/radiobox.cpp
View File

@@ -28,7 +28,7 @@ class RadioboxBase : public ComponentBase, public RadioboxOption {
: RadioboxOption(option) {}
private:
Element Render() override {
Element OnRender() override {
Clamp();
Elements elements;
const bool is_menu_focused = Focused();
@@ -36,18 +36,17 @@ class RadioboxBase : public ComponentBase, public RadioboxOption {
for (int i = 0; i < size(); ++i) {
const bool is_focused = (focused_entry() == i) && is_menu_focused;
const bool is_selected = (hovered_ == i);
auto focus_management = !is_selected ? nothing
: is_menu_focused ? focus
: select;
auto state = EntryState{
entries[i], selected() == i, is_selected, is_focused, i,
};
auto element =
(transform ? transform : RadioboxOption::Simple().transform)(state);
elements.push_back(element | focus_management | reflect(boxes_[i]));
if (is_selected) {
element |= focus;
}
elements.push_back(element | reflect(boxes_[i]));
}
return vbox(std::move(elements)) | reflect(box_);
return vbox(std::move(elements), hovered_) | reflect(box_);
}
// NOLINTNEXTLINE(readability-function-cognitive-complexity)

4
src/ftxui/component/renderer.cpp
View File

@@ -31,7 +31,7 @@ Component Renderer(std::function<Element()> render) {
public:
explicit Impl(std::function<Element()> render)
: render_(std::move(render)) {}
Element Render() override { return render_(); }
Element OnRender() override { return render_(); }
std::function<Element()> render_;
};
@@ -88,7 +88,7 @@ Component Renderer(std::function<Element(bool)> render) {
: render_(std::move(render)) {}
private:
Element Render() override { return render_(Focused()) | reflect(box_); }
Element OnRender() override { return render_(Focused()) | reflect(box_); }
bool Focusable() const override { return true; }
bool OnEvent(Event event) override {
if (event.is_mouse() && box_.Contain(event.mouse().x, event.mouse().y)) {

2
src/ftxui/component/resizable_split.cpp
View File

@@ -94,7 +94,7 @@ class ResizableSplitBase : public ComponentBase {
return false;
}
Element Render() final {
Element OnRender() final {
switch (options_->direction()) {
case Direction::Left:
return RenderLeft();

117
src/ftxui/component/slider.cpp
View File

@@ -39,7 +39,7 @@ class SliderBase : public SliderOption<T>, public ComponentBase {
public:
explicit SliderBase(SliderOption<T> options) : SliderOption<T>(options) {}
Element Render() override {
Element OnRender() override {
auto gauge_color =
Focused() ? color(this->color_active) : color(this->color_inactive);
const float percent =
@@ -134,53 +134,52 @@ class SliderBase : public SliderOption<T>, public ComponentBase {
return ComponentBase::OnEvent(event);
}
bool OnCapturedMouseEvent(Event event) {
if (event.mouse().motion == Mouse::Released) {
captured_mouse_ = nullptr;
return true;
}
T old_value = this->value();
switch (this->direction) {
case Direction::Right: {
this->value() = this->min() + (event.mouse().x - gauge_box_.x_min) *
(this->max() - this->min()) /
(gauge_box_.x_max - gauge_box_.x_min);
break;
}
case Direction::Left: {
this->value() = this->max() - (event.mouse().x - gauge_box_.x_min) *
(this->max() - this->min()) /
(gauge_box_.x_max - gauge_box_.x_min);
break;
}
case Direction::Down: {
this->value() = this->min() + (event.mouse().y - gauge_box_.y_min) *
(this->max() - this->min()) /
(gauge_box_.y_max - gauge_box_.y_min);
break;
}
case Direction::Up: {
this->value() = this->max() - (event.mouse().y - gauge_box_.y_min) *
(this->max() - this->min()) /
(gauge_box_.y_max - gauge_box_.y_min);
break;
}
}
this->value() = std::max(this->min(), std::min(this->max(), this->value()));
if (old_value != this->value() && this->on_change) {
this->on_change();
}
return true;
}
bool OnMouseEvent(Event event) {
if (captured_mouse_) {
if (event.mouse().motion == Mouse::Released) {
captured_mouse_ = nullptr;
return true;
}
T old_value = this->value();
switch (this->direction) {
case Direction::Right: {
this->value() =
this->min() + (event.mouse().x - gauge_box_.x_min) *
(this->max() - this->min()) /
(gauge_box_.x_max - gauge_box_.x_min);
break;
}
case Direction::Left: {
this->value() =
this->max() - (event.mouse().x - gauge_box_.x_min) *
(this->max() - this->min()) /
(gauge_box_.x_max - gauge_box_.x_min);
break;
}
case Direction::Down: {
this->value() =
this->min() + (event.mouse().y - gauge_box_.y_min) *
(this->max() - this->min()) /
(gauge_box_.y_max - gauge_box_.y_min);
break;
}
case Direction::Up: {
this->value() =
this->max() - (event.mouse().y - gauge_box_.y_min) *
(this->max() - this->min()) /
(gauge_box_.y_max - gauge_box_.y_min);
break;
}
}
this->value() =
std::max(this->min(), std::min(this->max(), this->value()));
if (old_value != this->value() && this->on_change) {
this->on_change();
}
return true;
return OnCapturedMouseEvent(event);
}
if (event.mouse().button != Mouse::Left) {
@@ -198,7 +197,7 @@ class SliderBase : public SliderOption<T>, public ComponentBase {
if (captured_mouse_) {
TakeFocus();
return true;
return OnCapturedMouseEvent(event);
}
return false;
@@ -242,19 +241,21 @@ class SliderWithLabel : public ComponentBase {
return true;
}
Element Render() override {
auto focus_management = Focused() ? focus : Active() ? select : nothing;
Element OnRender() override {
auto gauge_color = (Focused() || mouse_hover_) ? color(Color::White)
: color(Color::GrayDark);
return hbox({
text(label_()) | dim | vcenter,
hbox({
text("["),
ComponentBase::Render() | underlined,
text("]"),
}) | xflex,
}) |
gauge_color | xflex | reflect(box_) | focus_management;
auto element = hbox({
text(label_()) | dim | vcenter,
hbox({
text("["),
ComponentBase::Render() | underlined,
text("]"),
}) | xflex,
}) |
gauge_color | xflex | reflect(box_);
element |= focus;
return element;
}
ConstStringRef label_;

42
src/ftxui/component/slider_test.cpp
View File

@@ -60,17 +60,17 @@ TEST(SliderTest, Right) {
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(3, 0)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_EQ(value, 30);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(9, 0)));
EXPECT_EQ(value, 90);
EXPECT_EQ(updated, 1);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MousePressed(9, 2)));
EXPECT_EQ(value, 90);
EXPECT_EQ(updated, 1);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MousePressed(5, 2)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
EXPECT_EQ(updated, 3);
EXPECT_TRUE(slider->OnEvent(MouseReleased(5, 2)));
EXPECT_FALSE(slider->OnEvent(MousePressed(5, 2)));
EXPECT_EQ(value, 50);
@@ -92,17 +92,17 @@ TEST(SliderTest, Left) {
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(3, 0)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_EQ(value, 70);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(9, 0)));
EXPECT_EQ(value, 10);
EXPECT_EQ(updated, 1);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MousePressed(9, 2)));
EXPECT_EQ(value, 10);
EXPECT_EQ(updated, 1);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MousePressed(5, 2)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
EXPECT_EQ(updated, 3);
EXPECT_TRUE(slider->OnEvent(MouseReleased(5, 2)));
EXPECT_FALSE(slider->OnEvent(MousePressed(5, 2)));
EXPECT_EQ(value, 50);
@@ -124,21 +124,21 @@ TEST(SliderTest, Down) {
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(0, 3)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_EQ(value, 30);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(0, 9)));
EXPECT_EQ(value, 90);
EXPECT_EQ(updated, 1);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MousePressed(2, 9)));
EXPECT_EQ(value, 90);
EXPECT_EQ(updated, 1);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MousePressed(2, 5)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
EXPECT_EQ(updated, 3);
EXPECT_TRUE(slider->OnEvent(MouseReleased(2, 5)));
EXPECT_FALSE(slider->OnEvent(MousePressed(2, 5)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
EXPECT_EQ(updated, 3);
}
TEST(SliderTest, Up) {
@@ -157,17 +157,17 @@ TEST(SliderTest, Up) {
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(0, 3)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_EQ(value, 70);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(0, 9)));
EXPECT_EQ(value, 10);
EXPECT_EQ(updated, 1);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MousePressed(2, 9)));
EXPECT_EQ(value, 10);
EXPECT_EQ(updated, 1);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MousePressed(2, 5)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
EXPECT_EQ(updated, 3);
EXPECT_TRUE(slider->OnEvent(MouseReleased(2, 5)));
EXPECT_FALSE(slider->OnEvent(MousePressed(2, 5)));
EXPECT_EQ(value, 50);

2
src/ftxui/component/window.cpp
View File

@@ -124,7 +124,7 @@ class WindowImpl : public ComponentBase, public WindowOptions {
}
private:
Element Render() final {
Element OnRender() final {
auto element = ComponentBase::Render();
const bool captureable =