Merge dom and component focus (#978)

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

View File

@@ -54,10 +54,10 @@ class Border : public Node {
requirement_.min_x =
std::max(requirement_.min_x, children_[1]->requirement().min_x + 2);
}
requirement_.selected_box.x_min++;
requirement_.selected_box.x_max++;
requirement_.selected_box.y_min++;
requirement_.selected_box.y_max++;
requirement_.focused.box.x_min++;
requirement_.focused.box.x_max++;
requirement_.focused.box.y_min++;
requirement_.focused.box.y_max++;
}
void SetBox(Box box) override {
@@ -65,7 +65,8 @@ class Border : public Node {
if (children_.size() == 2) {
Box title_box;
title_box.x_min = box.x_min + 1;
title_box.x_max = std::min(box.x_max - 1, box.x_min + children_[1]->requirement().min_x);
title_box.x_max = std::min(box.x_max - 1,
box.x_min + children_[1]->requirement().min_x);
title_box.y_min = box.y_min;
title_box.y_max = box.y_min;
children_[1]->SetBox(title_box);
@@ -145,10 +146,8 @@ class BorderPixel : public Node {
requirement_.min_x =
std::max(requirement_.min_x, children_[1]->requirement().min_x + 2);
}
requirement_.selected_box.x_min++;
requirement_.selected_box.x_max++;
requirement_.selected_box.y_min++;
requirement_.selected_box.y_max++;
requirement_.focused.box.Shift(1, 1);
}
void SetBox(Box box) override {

View File

@@ -5,6 +5,7 @@
#define FTXUI_DOM_BOX_HELPER_HPP
#include <vector>
#include "ftxui/dom/requirement.hpp"
namespace ftxui::box_helper {
@@ -19,7 +20,6 @@ struct Element {
};
void Compute(std::vector<Element>* elements, int target_size);
} // namespace ftxui::box_helper
#endif /* end of include guard: FTXUI_DOM_BOX_HELPER_HPP */

View File

@@ -21,24 +21,21 @@ class DBox : public Node {
explicit DBox(Elements children) : Node(std::move(children)) {}
void ComputeRequirement() override {
requirement_.min_x = 0;
requirement_.min_y = 0;
requirement_.flex_grow_x = 0;
requirement_.flex_grow_y = 0;
requirement_.flex_shrink_x = 0;
requirement_.flex_shrink_y = 0;
requirement_.selection = Requirement::NORMAL;
requirement_ = Requirement{};
for (auto& child : children_) {
child->ComputeRequirement();
// Propagate the focused requirement.
if (requirement_.focused.Prefer(*child->requirement().focused)) {
requirement_.focused = child->requirement().focused;
}
// Extend the min_x and min_y to contain all the children
requirement_.min_x =
std::max(requirement_.min_x, child->requirement().min_x);
requirement_.min_y =
std::max(requirement_.min_y, child->requirement().min_y);
if (requirement_.selection < child->requirement().selection) {
requirement_.selection = child->requirement().selection;
requirement_.selected_box = child->requirement().selected_box;
}
}
}

View File

@@ -89,6 +89,7 @@ class Flexbox : public Node {
}
void ComputeRequirement() override {
requirement_ = Requirement{};
for (auto& child : children_) {
child->ComputeRequirement();
}
@@ -103,12 +104,6 @@ class Flexbox : public Node {
}
Layout(global, true);
// Reset:
requirement_.selection = Requirement::Selection::NORMAL;
requirement_.selected_box = Box();
requirement_.min_x = 0;
requirement_.min_y = 0;
if (global.blocks.empty()) {
return;
}
@@ -130,19 +125,14 @@ class Flexbox : public Node {
// Find the selection:
for (size_t i = 0; i < children_.size(); ++i) {
if (requirement_.selection >= children_[i]->requirement().selection) {
continue;
if (requirement_.focused.Prefer(children_[i]->requirement().focused)) {
requirement_.focused = children_[i]->requirement().focused;
// Shift |focused.box| according to its position inside this component:
auto& b = global.blocks[i];
requirement_.focused.box.Shift(b.x, b.y);
requirement_.focused.box =
Box::Intersection(requirement_.focused.box, box);
}
requirement_.selection = children_[i]->requirement().selection;
Box selected_box = children_[i]->requirement().selected_box;
// Shift |selected_box| according to its position inside this component:
auto& b = global.blocks[i];
selected_box.x_min += b.x;
selected_box.y_min += b.y;
selected_box.x_max += b.x;
selected_box.y_max += b.y;
requirement_.selected_box = Box::Intersection(selected_box, box);
}
}

View File

@@ -36,13 +36,12 @@ Decorator focusPositionRelative(float x, float y) {
void ComputeRequirement() override {
NodeDecorator::ComputeRequirement();
requirement_.selection = Requirement::Selection::NORMAL;
Box& box = requirement_.selected_box;
box.x_min = int(float(requirement_.min_x) * x_);
box.y_min = int(float(requirement_.min_y) * y_);
box.x_max = int(float(requirement_.min_x) * x_);
box.y_max = int(float(requirement_.min_y) * y_);
requirement_.focused.enabled = false;
requirement_.focused.node = this;
requirement_.focused.box.x_min = int(float(requirement_.min_x) * x_);
requirement_.focused.box.y_min = int(float(requirement_.min_y) * y_);
requirement_.focused.box.x_max = int(float(requirement_.min_x) * x_);
requirement_.focused.box.y_max = int(float(requirement_.min_y) * y_);
}
private:
@@ -75,9 +74,9 @@ Decorator focusPosition(int x, int y) {
void ComputeRequirement() override {
NodeDecorator::ComputeRequirement();
requirement_.selection = Requirement::Selection::NORMAL;
requirement_.focused.enabled = false;
Box& box = requirement_.selected_box;
Box& box = requirement_.focused.box;
box.x_min = x_;
box.y_min = y_;
box.x_max = x_;

View File

@@ -6,28 +6,28 @@
#include <utility> // for move
#include "ftxui/dom/elements.hpp" // for Element, unpack, Elements, focus, frame, select, xframe, yframe
#include "ftxui/dom/node.hpp" // for Node, Elements
#include "ftxui/dom/requirement.hpp" // for Requirement, Requirement::FOCUSED, Requirement::SELECTED
#include "ftxui/screen/box.hpp" // for Box
#include "ftxui/screen/screen.hpp" // for Screen, Screen::Cursor
#include "ftxui/util/autoreset.hpp" // for AutoReset
#include "ftxui/dom/node.hpp" // for Node, Elements
#include "ftxui/dom/requirement.hpp" // for Requirement
#include "ftxui/screen/box.hpp" // for Box
#include "ftxui/screen/screen.hpp" // for Screen, Screen::Cursor
#include "ftxui/util/autoreset.hpp" // for AutoReset
namespace ftxui {
namespace {
class Select : public Node {
class Focus : public Node {
public:
explicit Select(Elements children) : Node(std::move(children)) {}
explicit Focus(Elements children) : Node(std::move(children)) {}
void ComputeRequirement() override {
Node::ComputeRequirement();
requirement_ = children_[0]->requirement();
auto& selected_box = requirement_.selected_box;
selected_box.x_min = 0;
selected_box.y_min = 0;
selected_box.x_max = requirement_.min_x - 1;
selected_box.y_max = requirement_.min_y - 1;
requirement_.selection = Requirement::SELECTED;
requirement_.focused.enabled = true;
requirement_.focused.node = this;
requirement_.focused.box.x_min = 0;
requirement_.focused.box.y_min = 0;
requirement_.focused.box.x_max = requirement_.min_x - 1;
requirement_.focused.box.y_max = requirement_.min_y - 1;
}
void SetBox(Box box) override {
@@ -36,65 +36,21 @@ class Select : public Node {
}
};
class Focus : public Select {
public:
using Select::Select;
void ComputeRequirement() override {
Select::ComputeRequirement();
requirement_.selection = Requirement::FOCUSED;
}
void Render(Screen& screen) override {
Select::Render(screen);
// Setting the cursor to the right position allow folks using CJK (China,
// Japanese, Korean, ...) characters to see their [input method editor]
// displayed at the right location. See [issue].
//
// [input method editor]:
// https://en.wikipedia.org/wiki/Input_method
//
// [issue]:
// https://github.com/ArthurSonzogni/FTXUI/issues/2#issuecomment-505282355
//
// Unfortunately, Microsoft terminal do not handle properly hidding the
// cursor. Instead the character under the cursor is hidden, which is a big
// problem. As a result, we can't enable setting cursor to the right
// location. It will be displayed at the bottom right corner.
// See:
// https://github.com/microsoft/terminal/issues/1203
// https://github.com/microsoft/terminal/issues/3093
#if !defined(FTXUI_MICROSOFT_TERMINAL_FALLBACK)
screen.SetCursor(Screen::Cursor{
box_.x_min,
box_.y_min,
Screen::Cursor::Shape::Hidden,
});
#endif
}
};
class Frame : public Node {
public:
Frame(Elements children, bool x_frame, bool y_frame)
: Node(std::move(children)), x_frame_(x_frame), y_frame_(y_frame) {}
void ComputeRequirement() override {
Node::ComputeRequirement();
requirement_ = children_[0]->requirement();
}
void SetBox(Box box) override {
Node::SetBox(box);
auto& selected_box = requirement_.selected_box;
auto& focused_box = requirement_.focused.box;
Box children_box = box;
if (x_frame_) {
const int external_dimx = box.x_max - box.x_min;
const int internal_dimx = std::max(requirement_.min_x, external_dimx);
const int focused_dimx = selected_box.x_max - selected_box.x_min;
int dx = selected_box.x_min - external_dimx / 2 + focused_dimx / 2;
const int focused_dimx = focused_box.x_max - focused_box.x_min;
int dx = focused_box.x_min - external_dimx / 2 + focused_dimx / 2;
dx = std::max(0, std::min(internal_dimx - external_dimx - 1, dx));
children_box.x_min = box.x_min - dx;
children_box.x_max = box.x_min + internal_dimx - dx;
@@ -103,8 +59,8 @@ class Frame : public Node {
if (y_frame_) {
const int external_dimy = box.y_max - box.y_min;
const int internal_dimy = std::max(requirement_.min_y, external_dimy);
const int focused_dimy = selected_box.y_max - selected_box.y_min;
int dy = selected_box.y_min - external_dimy / 2 + focused_dimy / 2;
const int focused_dimy = focused_box.y_max - focused_box.y_min;
int dy = focused_box.y_min - external_dimy / 2 + focused_dimy / 2;
dy = std::max(0, std::min(internal_dimy - external_dimy - 1, dy));
children_box.y_min = box.y_min - dy;
children_box.y_max = box.y_min + internal_dimy - dy;
@@ -130,33 +86,29 @@ class FocusCursor : public Focus {
: Focus(std::move(children)), shape_(shape) {}
private:
void Render(Screen& screen) override {
Select::Render(screen); // NOLINT
screen.SetCursor(Screen::Cursor{
box_.x_min,
box_.y_min,
shape_,
});
void ComputeRequirement() override {
Focus::ComputeRequirement(); // NOLINT
requirement_.focused.cursor_shape = shape_;
}
Screen::Cursor::Shape shape_;
};
} // namespace
/// @brief Set the `child` to be the one selected among its siblings.
/// @param child The element to be selected.
/// @ingroup dom
Element select(Element child) {
return std::make_shared<Select>(unpack(std::move(child)));
}
/// @brief Set the `child` to be the one in focus globally.
/// @brief Set the `child` to be the one focused among its siblings.
/// @param child The element to be focused.
/// @ingroup dom
Element focus(Element child) {
return std::make_shared<Focus>(unpack(std::move(child)));
}
/// @deprecated Use `focus` instead.
/// @brief Set the `child` to be the one focused among its siblings.
/// @param child The element to be focused.
Element select(Element e) {
return focus(std::move(e));
}
/// @brief Allow an element to be displayed inside a 'virtual' area. It size can
/// be larger than its container. In this case only a smaller portion is
/// displayed. The view is scrollable to make the focused element visible.

View File

@@ -49,13 +49,7 @@ class GridBox : public Node {
}
void ComputeRequirement() override {
requirement_.min_x = 0;
requirement_.min_y = 0;
requirement_.flex_grow_x = 0;
requirement_.flex_grow_y = 0;
requirement_.flex_shrink_x = 0;
requirement_.flex_shrink_y = 0;
requirement_ = Requirement{};
for (auto& line : lines_) {
for (auto& cell : line) {
cell->ComputeRequirement();
@@ -75,19 +69,15 @@ class GridBox : public Node {
requirement_.min_x = Integrate(size_x);
requirement_.min_y = Integrate(size_y);
// Forward the selected/focused child state:
requirement_.selection = Requirement::NORMAL;
// Forward the focused/focused child state:
for (int x = 0; x < x_size; ++x) {
for (int y = 0; y < y_size; ++y) {
if (requirement_.selection >= lines_[y][x]->requirement().selection) {
if (requirement_.focused.enabled ||
!lines_[y][x]->requirement().focused.enabled) {
continue;
}
requirement_.selection = lines_[y][x]->requirement().selection;
requirement_.selected_box = lines_[y][x]->requirement().selected_box;
requirement_.selected_box.x_min += size_x[x];
requirement_.selected_box.x_max += size_x[x];
requirement_.selected_box.y_min += size_y[y];
requirement_.selected_box.y_max += size_y[y];
requirement_.focused = lines_[y][x]->requirement().focused;
requirement_.focused.box.Shift(size_x[x], size_y[y]);
}
}
}

View File

@@ -7,7 +7,7 @@
#include <string> // for allocator, basic_string, string
#include <vector> // for vector
#include "ftxui/dom/elements.hpp" // for text, operator|, Element, flex, Elements, flex_grow, flex_shrink, vtext, gridbox, vbox, focus, operator|=, border, frame
#include "ftxui/dom/elements.hpp" // for text, operator|, Element, flex, Elements, flex_grow, flex_shrink, vtext, gridbox, vbox, select, operator|=, border, frame
#include "ftxui/dom/node.hpp" // for Render
#include "ftxui/screen/screen.hpp" // for Screen

View File

@@ -20,22 +20,20 @@ class HBox : public Node {
public:
explicit HBox(Elements children) : Node(std::move(children)) {}
private:
void ComputeRequirement() override {
requirement_.min_x = 0;
requirement_.min_y = 0;
requirement_.flex_grow_x = 0;
requirement_.flex_grow_y = 0;
requirement_.flex_shrink_x = 0;
requirement_.flex_shrink_y = 0;
requirement_.selection = Requirement::NORMAL;
requirement_ = Requirement{};
for (auto& child : children_) {
child->ComputeRequirement();
if (requirement_.selection < child->requirement().selection) {
requirement_.selection = child->requirement().selection;
requirement_.selected_box = child->requirement().selected_box;
requirement_.selected_box.x_min += requirement_.min_x;
requirement_.selected_box.x_max += requirement_.min_x;
// Propagate the focused requirement.
if (requirement_.focused.Prefer(child->requirement().focused)) {
requirement_.focused = child->requirement().focused;
requirement_.focused.box.Shift(requirement_.min_x, 0);
}
// Extend the min_x and min_y to contain all the children
requirement_.min_x += child->requirement().min_x;
requirement_.min_y =
std::max(requirement_.min_y, child->requirement().min_y);

View File

@@ -1,4 +1,3 @@
#include <iostream>
// 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.
@@ -7,6 +6,7 @@
#include "ftxui/dom/node.hpp"
#include "ftxui/screen/screen.hpp" // for Screen
#include "ftxui/screen/util.hpp" // for clamp
namespace ftxui {
@@ -17,9 +17,23 @@ Node::~Node() = default;
/// @brief Compute how much space an elements needs.
/// @ingroup dom
void Node::ComputeRequirement() {
if (children_.empty()) {
return;
}
for (auto& child : children_) {
child->ComputeRequirement();
}
// By default, the requirement is the one of the first child.
requirement_ = children_[0]->requirement();
// Propagate the focused requirement.
for (size_t i = 1; i < children_.size(); ++i) {
if (!requirement_.focused.enabled &&
children_[i]->requirement().focused.enabled) {
requirement_.focused = children_[i]->requirement().focused;
}
}
}
/// @brief Assign a position and a dimension to an element for drawing.
@@ -109,6 +123,42 @@ void Render(Screen& screen, Node* node, Selection& selection) {
node->Select(selection);
}
// Setting the cursor to the right position allow folks using CJK (China,
// Japanese, Korean, ...) characters to see their [input method editor]
// displayed at the right location. See [issue].
//
// [input method editor]:
// https://en.wikipedia.org/wiki/Input_method
//
// [issue]:
// https://github.com/ArthurSonzogni/FTXUI/issues/2#issuecomment-505282355
//
// Unfortunately, Microsoft terminal do not handle properly hiding the
// cursor. Instead the character under the cursor is hidden, which is a big
// problem. As a result, we can't enable setting cursor to the right
// location. It will be displayed at the bottom right corner.
// See:
// https://github.com/microsoft/terminal/issues/1203
// https://github.com/microsoft/terminal/issues/3093
if (node->requirement().focused.enabled
#if defined(FTXUI_MICROSOFT_TERMINAL_FALLBACK)
||
node->requirement().focused.cursor_shape == Screen::Cursor::Shape::Hidden
#endif
) {
screen.SetCursor(Screen::Cursor{
node->requirement().focused.node->box_.x_max,
node->requirement().focused.node->box_.y_max,
node->requirement().focused.cursor_shape,
});
} else {
screen.SetCursor(Screen::Cursor{
screen.dimx() - 1,
screen.dimy() - 1,
Screen::Cursor::Shape::Hidden,
});
}
// Step 4: Draw the element.
screen.stencil = box;
node->Render(screen);

View File

@@ -5,7 +5,7 @@
#include <string> // for allocator, to_string, string
#include <utility> // for move
#include "ftxui/dom/elements.hpp" // for operator|, Element, operator|=, text, vbox, Elements, border, focus, frame, vscroll_indicator
#include "ftxui/dom/elements.hpp" // for operator|, Element, operator|=, text, vbox, Elements, border, select, frame, vscroll_indicator
#include "ftxui/dom/node.hpp" // for Render
#include "ftxui/screen/color.hpp" // for Color, Color::Red
#include "ftxui/screen/screen.hpp" // for Screen

View File

@@ -20,22 +20,20 @@ class VBox : public Node {
public:
explicit VBox(Elements children) : Node(std::move(children)) {}
private:
void ComputeRequirement() override {
requirement_.min_x = 0;
requirement_.min_y = 0;
requirement_.flex_grow_x = 0;
requirement_.flex_grow_y = 0;
requirement_.flex_shrink_x = 0;
requirement_.flex_shrink_y = 0;
requirement_.selection = Requirement::NORMAL;
requirement_ = Requirement{};
for (auto& child : children_) {
child->ComputeRequirement();
if (requirement_.selection < child->requirement().selection) {
requirement_.selection = child->requirement().selection;
requirement_.selected_box = child->requirement().selected_box;
requirement_.selected_box.y_min += requirement_.min_y;
requirement_.selected_box.y_max += requirement_.min_y;
// Propagate the focused requirement.
if (requirement_.focused.Prefer(child->requirement().focused)) {
requirement_.focused = child->requirement().focused;
requirement_.focused.box.Shift(0, requirement_.min_y);
}
// Extend the min_x and min_y to contain all the children
requirement_.min_y += child->requirement().min_y;
requirement_.min_x =
std::max(requirement_.min_x, child->requirement().min_x);