Compare commits

...

10 Commits

Author SHA1 Message Date
Clément Roblot
34d154cfde
Merge 3754136dd6 into 8922e6d55e 2024-10-29 09:16:13 +01:00
Vemy
8922e6d55e
Add 2048-cpp to projects using FTXUI (#944)
Some checks failed
Build / Tests (cl, Windows MSVC, windows-latest) (push) Waiting to run
Build / Create release (push) Blocked by required conditions
Build / Build packages (build/ftxui*Darwin*, macos-latest) (push) Blocked by required conditions
Build / Build packages (build/ftxui*Linux*, ubuntu-latest) (push) Blocked by required conditions
Build / Build packages (build/ftxui*Win64*, windows-latest) (push) Blocked by required conditions
Build / Tests (gcc, gcov, Linux GCC, ubuntu-latest) (push) Failing after 2m35s
Build / Tests (llvm, llvm-cov gcov, Linux Clang, ubuntu-latest) (push) Failing after 48s
Build / documentation (push) Failing after 49s
CodeQL / Analyze (cpp) (push) Failing after 1m20s
2024-10-29 09:15:07 +01:00
Mikołaj Lubiak
99df1ac8ba
Add SliderWithCallback component (#938)
Some checks failed
Build / Tests (cl, Windows MSVC, windows-latest) (push) Waiting to run
Build / Create release (push) Blocked by required conditions
Build / Build packages (build/ftxui*Darwin*, macos-latest) (push) Blocked by required conditions
Build / Build packages (build/ftxui*Linux*, ubuntu-latest) (push) Blocked by required conditions
Build / Build packages (build/ftxui*Win64*, windows-latest) (push) Blocked by required conditions
Build / Tests (gcc, gcov, Linux GCC, ubuntu-latest) (push) Failing after 1m46s
Build / Tests (llvm, llvm-cov gcov, Linux Clang, ubuntu-latest) (push) Failing after 2m27s
Build / documentation (push) Failing after 1m30s
CodeQL / Analyze (cpp) (push) Failing after 38s
Add SliderOption::on_change.

Useful to observe a change to the value.

Signed-off-by: Mikołaj Lubiak <lubiak@proton.me>
Co-authored-by: ArthurSonzogni <sonzogniarthur@gmail.com>
2024-10-29 08:03:59 +01:00
ArthurSonzogni
3754136dd6
Reformat + fix pending selection. 2024-08-31 15:39:42 +02:00
Clement Roblot
f8dd258d65 More cleanup 2024-08-27 21:20:19 +07:00
Clement Roblot
118055d942 Cleanup 2024-08-27 21:16:04 +07:00
Clement Roblot
364993464a It somewhat works 2024-08-27 21:13:00 +07:00
Clement Roblot
e4a63318ad We can act on the screen 2024-08-27 17:40:48 +07:00
Clement Roblot
dea2d6408b We can catch mouse events 2024-08-27 17:35:21 +07:00
Clement Roblot
4e75cf9e0e We have a basic decorator 2024-08-27 15:33:25 +07:00
14 changed files with 311 additions and 49 deletions

View File

@ -39,6 +39,8 @@ current (development)
component in its parent. See #932
- Feature: Add `EntryState::index`. This allows to get the index of a menu entry.
See #932
- Feature: Add `SliderOption::on_change`. This allows to set a callback when the
slider value changes. See #938.
### Dom
- Feature: Add `hscroll_indicator`. It display an horizontal indicator

View File

@ -88,6 +88,7 @@ add_library(dom
src/ftxui/dom/paragraph.cpp
src/ftxui/dom/reflect.cpp
src/ftxui/dom/scroll_indicator.cpp
src/ftxui/dom/selectable.cpp
src/ftxui/dom/separator.cpp
src/ftxui/dom/size.cpp
src/ftxui/dom/spinner.cpp

View File

@ -336,6 +336,7 @@ Feel free to add your projects here:
- [Step-Writer](https://github.com/BrianAnakPintar/step-writer)
- [XJ music](https://github.com/xjmusic/xjmusic)
- [UDP chat](https://github.com/Sergeydigl3/udp-chat-tui)
- [2048-cpp](https://github.com/Chessom/2048-cpp)
### [cpp-best-practices/game_jam](https://github.com/cpp-best-practices/game_jam)

View File

@ -38,6 +38,7 @@ example(radiobox)
example(radiobox_in_frame)
example(renderer)
example(resizable_split)
example(selectable_input)
example(scrollbar)
example(slider)
example(slider_direction)

View File

@ -0,0 +1,72 @@
// 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 <string> // for char_traits, operator+, string, basic_string
#include "ftxui/component/component.hpp" // for Input, Renderer, Vertical
#include "ftxui/component/component_base.hpp" // for ComponentBase
#include "ftxui/component/component_options.hpp" // for InputOption
#include "ftxui/component/screen_interactive.hpp" // for Component, ScreenInteractive
#include "ftxui/dom/elements.hpp" // for text, hbox, separator, Element, operator|, vbox, border
#include "ftxui/util/ref.hpp" // for Ref
int main() {
using namespace ftxui;
// The data:
std::string first_name;
std::string last_name;
std::string password;
std::string phoneNumber;
// Region selection;
std::string textToCopy;
auto screen = ScreenInteractive::TerminalOutput();
// The basic input components:
Component input_first_name = Input(&first_name, "first name");
Component input_last_name = Input(&last_name, "last name");
// The password input component:
InputOption password_option;
password_option.password = true;
Component input_password = Input(&password, "password", password_option);
// The phone number input component:
// We are using `CatchEvent` to filter out non-digit characters.
Component input_phone_number = Input(&phoneNumber, "phone number");
input_phone_number |= CatchEvent([&](const Event& event) {
return event.is_character() && !std::isdigit(event.character()[0]);
});
input_phone_number |= CatchEvent([&](const Event& event) {
return event.is_character() && phoneNumber.size() > 10;
});
// The component tree:
auto component = Container::Vertical({
input_first_name,
input_last_name,
input_password,
input_phone_number,
});
// Tweak how the component tree is rendered:
auto renderer = Renderer(component, [&] {
return vbox({
hbox(text(" First name : "), input_first_name->Render()),
hbox(text(" Last name : ") | selectable(),
input_last_name->Render()),
hbox(text(" Password : "), input_password->Render()),
hbox(text(" Phone num : "), input_phone_number->Render()) |
selectable(),
separator(),
text("Hello " + first_name + " " + last_name),
text("Your password is " + password),
text("Your phone number is " + phoneNumber),
text("Selected test is " + screen.GetSelection()),
}) |
border;
});
screen.Loop(renderer);
}

View File

@ -228,6 +228,7 @@ struct SliderOption {
Direction direction = Direction::Right;
Color color_active = Color::White;
Color color_inactive = Color::GrayDark;
std::function<void()> on_change; ///> Called when `value` is updated.
};
// Parameter pack used by `WindowOptions::render`.

View File

@ -26,6 +26,13 @@ struct Event;
using Component = std::shared_ptr<ComponentBase>;
class ScreenInteractivePrivate;
typedef struct {
uint16_t startx = 0;
uint16_t endx = 0;
uint16_t starty = 0;
uint16_t endy = 0;
} Region;
class ScreenInteractive : public Screen {
public:
// Constructors:
@ -68,6 +75,8 @@ class ScreenInteractive : public Screen {
void ForceHandleCtrlC(bool force);
void ForceHandleCtrlZ(bool force);
std::string GetSelection();
private:
void ExitNow();
@ -82,6 +91,8 @@ class ScreenInteractive : public Screen {
void RunOnceBlocking(Component component);
void HandleTask(Component component, Task& task);
bool HandleSelection(Event event);
void RefreshSelection();
void Draw(Component component);
void ResetCursorPosition();
@ -126,6 +137,11 @@ class ScreenInteractive : public Screen {
bool force_handle_ctrl_c_ = true;
bool force_handle_ctrl_z_ = true;
bool selection_enabled = false;
CapturedMouse selection_pending;
Region selection_region;
std::string selection_text;
// The style of the cursor to restore on exit.
int cursor_reset_shape_ = 1;

View File

@ -113,6 +113,8 @@ Decorator focusPositionRelative(float x, float y);
Element automerge(Element child);
Decorator hyperlink(std::string link);
Element hyperlink(std::string link, Element child);
Element selectable(Element child);
Decorator selectable(void);
// --- Layout is
// Horizontal, Vertical or stacked set of elements.

View File

@ -52,6 +52,12 @@ class Node {
};
virtual void Check(Status* status);
// Selection.
// Propagated from Parents to Children.
virtual void Select(Box selected_area) {
// TODO: Implement this.
}
protected:
Elements children_;
Requirement requirement_;

View File

@ -21,6 +21,7 @@ struct Pixel {
underlined(false),
underlined_double(false),
strikethrough(false),
selectable(false),
automerge(false) {}
// A bit field representing the style:
@ -30,6 +31,7 @@ struct Pixel {
bool inverted : 1;
bool underlined : 1;
bool underlined_double : 1;
bool selectable : 1;
bool strikethrough : 1;
bool automerge : 1;

View File

@ -351,7 +351,8 @@ ScreenInteractive::ScreenInteractive(int dimx,
bool use_alternative_screen)
: Screen(dimx, dimy),
dimension_(dimension),
use_alternative_screen_(use_alternative_screen) {
use_alternative_screen_(use_alternative_screen),
selection_text("") {
task_receiver_ = MakeReceiver<Task>();
}
@ -781,7 +782,9 @@ void ScreenInteractive::HandleTask(Component component, Task& task) {
arg.screen_ = this;
const bool handled = component->OnEvent(arg);
bool handled = component->OnEvent(arg);
handled = handled || HandleSelection(arg);
if (arg == Event::CtrlC && (!handled || force_handle_ctrl_c_)) {
RecordSignal(SIGABRT);
@ -824,6 +827,80 @@ void ScreenInteractive::HandleTask(Component component, Task& task) {
// clang-format on
}
// private
bool ScreenInteractive::HandleSelection(Event event) {
if (!event.is_mouse()) {
return false;
}
auto& mouse = event.mouse();
if (mouse.button != Mouse::Left) {
return false;
}
if (mouse.motion == Mouse::Pressed) {
selection_pending = CaptureMouse();
if (!selection_pending) {
return false;
}
selection_enabled = true;
selection_region.startx = mouse.x;
selection_region.starty = mouse.y;
selection_region.endx = mouse.x;
selection_region.endy = mouse.y;
return true;
}
if (!selection_pending) {
return false;
}
if (mouse.motion == Mouse::Moved) {
selection_region.endx = mouse.x;
selection_region.endy = mouse.y;
return true;
}
if (mouse.motion == Mouse::Released) {
selection_region.endx = mouse.x;
selection_region.endy = mouse.y;
selection_pending = nullptr;
if (selection_region.startx == selection_region.endx &&
selection_region.starty == selection_region.endy) {
selection_enabled = false;
return true;
}
return true;
}
return false;
}
void ScreenInteractive::RefreshSelection() {
if (!selection_enabled) {
return;
}
selection_text = "";
for (int y = std::min(selection_region.starty, selection_region.endy);
y <= std::max(selection_region.starty, selection_region.endy); ++y) {
for (int x = std::min(selection_region.startx, selection_region.endx);
x <= std::max(selection_region.startx, selection_region.endx) - 1;
++x) {
if (PixelAt(x, y).selectable == true) {
PixelAt(x, y).inverted ^= true;
selection_text += PixelAt(x, y).character;
}
}
}
}
std::string ScreenInteractive::GetSelection() {
return selection_text;
}
// private
// NOLINTNEXTLINE
void ScreenInteractive::Draw(Component component) {
@ -894,6 +971,8 @@ void ScreenInteractive::Draw(Component component) {
Render(*this, document);
RefreshSelection();
// Set cursor position for user using tools to insert CJK characters.
{
const int dx = dimx_ - 1 - cursor_.x + int(dimx_ != terminal.dimx);

View File

@ -35,31 +35,26 @@ Decorator flexDirection(Direction direction) {
}
template <class T>
class SliderBase : public ComponentBase {
class SliderBase : public SliderOption<T>, public ComponentBase {
public:
explicit SliderBase(SliderOption<T> options)
: value_(options.value),
min_(options.min),
max_(options.max),
increment_(options.increment),
options_(options) {}
explicit SliderBase(SliderOption<T> options) : SliderOption<T>(options) {}
Element Render() override {
auto gauge_color = Focused() ? color(options_.color_active)
: color(options_.color_inactive);
const float percent = float(value_() - min_()) / float(max_() - min_());
return gaugeDirection(percent, options_.direction) |
flexDirection(options_.direction) | reflect(gauge_box_) |
gauge_color;
auto gauge_color =
Focused() ? color(this->color_active) : color(this->color_inactive);
const float percent =
float(this->value() - this->min()) / float(this->max() - this->min());
return gaugeDirection(percent, this->direction) |
flexDirection(this->direction) | reflect(gauge_box_) | gauge_color;
}
void OnLeft() {
switch (options_.direction) {
switch (this->direction) {
case Direction::Right:
value_() -= increment_();
this->value() -= this->increment();
break;
case Direction::Left:
value_() += increment_();
this->value() += this->increment();
break;
case Direction::Up:
case Direction::Down:
@ -68,12 +63,12 @@ class SliderBase : public ComponentBase {
}
void OnRight() {
switch (options_.direction) {
switch (this->direction) {
case Direction::Right:
value_() += increment_();
this->value() += this->increment();
break;
case Direction::Left:
value_() -= increment_();
this->value() -= this->increment();
break;
case Direction::Up:
case Direction::Down:
@ -82,12 +77,12 @@ class SliderBase : public ComponentBase {
}
void OnUp() {
switch (options_.direction) {
switch (this->direction) {
case Direction::Up:
value_() -= increment_();
this->value() -= this->increment();
break;
case Direction::Down:
value_() += increment_();
this->value() += this->increment();
break;
case Direction::Left:
case Direction::Right:
@ -96,12 +91,12 @@ class SliderBase : public ComponentBase {
}
void OnDown() {
switch (options_.direction) {
switch (this->direction) {
case Direction::Down:
value_() -= increment_();
this->value() += this->increment();
break;
case Direction::Up:
value_() += increment_();
this->value() -= this->increment();
break;
case Direction::Left:
case Direction::Right:
@ -114,7 +109,7 @@ class SliderBase : public ComponentBase {
return OnMouseEvent(event);
}
T old_value = value_();
T old_value = this->value();
if (event == Event::ArrowLeft || event == Event::Character('h')) {
OnLeft();
}
@ -128,8 +123,11 @@ class SliderBase : public ComponentBase {
OnUp();
}
value_() = util::clamp(value_(), min_(), max_());
if (old_value != value_()) {
this->value() = std::max(this->min(), std::min(this->max(), this->value()));
if (old_value != this->value()) {
if (this->on_change) {
this->on_change();
}
return true;
}
@ -143,33 +141,45 @@ class SliderBase : public ComponentBase {
return true;
}
switch (options_.direction) {
T old_value = this->value();
switch (this->direction) {
case Direction::Right: {
value_() = min_() + (event.mouse().x - gauge_box_.x_min) *
(max_() - min_()) /
(gauge_box_.x_max - gauge_box_.x_min);
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: {
value_() = max_() - (event.mouse().x - gauge_box_.x_min) *
(max_() - min_()) /
(gauge_box_.x_max - gauge_box_.x_min);
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: {
value_() = min_() + (event.mouse().y - gauge_box_.y_min) *
(max_() - min_()) /
(gauge_box_.y_max - gauge_box_.y_min);
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: {
value_() = max_() - (event.mouse().y - gauge_box_.y_min) *
(max_() - min_()) /
(gauge_box_.y_max - gauge_box_.y_min);
this->value() =
this->max() - (event.mouse().y - gauge_box_.y_min) *
(this->max() - this->min()) /
(gauge_box_.y_max - gauge_box_.y_min);
break;
}
}
value_() = std::max(min_(), std::min(max_(), value_()));
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;
}
@ -197,11 +207,6 @@ class SliderBase : public ComponentBase {
bool Focusable() const final { return true; }
private:
Ref<T> value_;
ConstRef<T> min_;
ConstRef<T> max_;
ConstRef<T> increment_;
SliderOption<T> options_;
Box gauge_box_;
CapturedMouse captured_mouse_;
};
@ -256,6 +261,7 @@ class SliderWithLabel : public ComponentBase {
Box box_;
bool mouse_hover_ = false;
};
} // namespace
/// @brief An horizontal slider.
@ -340,6 +346,7 @@ template <typename T>
Component Slider(SliderOption<T> options) {
return Make<SliderBase<T>>(options);
}
template Component Slider(SliderOption<int8_t>);
template Component Slider(SliderOption<int16_t>);
template Component Slider(SliderOption<int32_t>);

View File

@ -45,6 +45,7 @@ Event MouseReleased(int x, int y) {
} // namespace
TEST(SliderTest, Right) {
int updated = 0;
int value = 50;
auto slider = Slider<int>({
.value = &value,
@ -52,23 +53,31 @@ TEST(SliderTest, Right) {
.max = 100,
.increment = 10,
.direction = Direction::Right,
.on_change = [&]() { updated++; },
});
Screen screen(11, 1);
Render(screen, slider->Render());
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(3, 0)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(9, 0)));
EXPECT_EQ(value, 90);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(9, 2)));
EXPECT_EQ(value, 90);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(5, 2)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MouseReleased(5, 2)));
EXPECT_FALSE(slider->OnEvent(MousePressed(5, 2)));
EXPECT_EQ(value, 50);
}
TEST(SliderTest, Left) {
int updated = 0;
int value = 50;
auto slider = Slider<int>({
.value = &value,
@ -76,23 +85,31 @@ TEST(SliderTest, Left) {
.max = 100,
.increment = 10,
.direction = Direction::Left,
.on_change = [&]() { updated++; },
});
Screen screen(11, 1);
Render(screen, slider->Render());
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(3, 0)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(9, 0)));
EXPECT_EQ(value, 10);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(9, 2)));
EXPECT_EQ(value, 10);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(5, 2)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MouseReleased(5, 2)));
EXPECT_FALSE(slider->OnEvent(MousePressed(5, 2)));
EXPECT_EQ(value, 50);
}
TEST(SliderTest, Down) {
int updated = 0;
int value = 50;
auto slider = Slider<int>({
.value = &value,
@ -100,23 +117,32 @@ TEST(SliderTest, Down) {
.max = 100,
.increment = 10,
.direction = Direction::Down,
.on_change = [&]() { updated++; },
});
Screen screen(1, 11);
Render(screen, slider->Render());
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(0, 3)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(0, 9)));
EXPECT_EQ(value, 90);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(2, 9)));
EXPECT_EQ(value, 90);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(2, 5)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MouseReleased(2, 5)));
EXPECT_FALSE(slider->OnEvent(MousePressed(2, 5)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
}
TEST(SliderTest, Up) {
int updated = 0;
int value = 50;
auto slider = Slider<int>({
.value = &value,
@ -124,20 +150,27 @@ TEST(SliderTest, Up) {
.max = 100,
.increment = 10,
.direction = Direction::Up,
.on_change = [&]() { updated++; },
});
Screen screen(1, 11);
Render(screen, slider->Render());
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(0, 3)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 0);
EXPECT_TRUE(slider->OnEvent(MousePressed(0, 9)));
EXPECT_EQ(value, 10);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(2, 9)));
EXPECT_EQ(value, 10);
EXPECT_EQ(updated, 1);
EXPECT_TRUE(slider->OnEvent(MousePressed(2, 5)));
EXPECT_EQ(value, 50);
EXPECT_EQ(updated, 2);
EXPECT_TRUE(slider->OnEvent(MouseReleased(2, 5)));
EXPECT_FALSE(slider->OnEvent(MousePressed(2, 5)));
EXPECT_EQ(value, 50);
}
TEST(SliderTest, Focus) {

View File

@ -0,0 +1,39 @@
#include "ftxui/dom/elements.hpp" // for Element, Decorator
#include "ftxui/dom/node_decorator.hpp" // for NodeDecorator
#include "ftxui/component/event.hpp" // for Event
namespace ftxui {
namespace {
class Selectable : public NodeDecorator {
public:
explicit Selectable(Element child)
: NodeDecorator(std::move(child)) {}
private:
void Render(Screen& screen) override {
for (int y = box_.y_min; y <= box_.y_max; ++y) {
for (int x = box_.x_min; x <= box_.x_max; ++x) {
screen.PixelAt(x, y).selectable = true;
}
}
NodeDecorator::Render(screen);
}
};
} // namespace
Element selectable(Element child) {
return std::make_shared<Selectable>(std::move(child));
}
Decorator selectable(void) {
return
[](Element child) { return selectable(std::move(child)); };
}
} // namespace ftxui