Merge 3754136dd6 into 8922e6d55e

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>

CHANGELOG.md

@@ -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

CMakeLists.txt

@@ -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

README.md

@@ -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)
 

examples/component/CMakeLists.txt

@@ -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)

examples/component/selectable_input.cpp

@@ -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);
+}

include/ftxui/component/component_options.hpp

@@ -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`.

include/ftxui/component/screen_interactive.hpp

@@ -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;
 

include/ftxui/dom/elements.hpp

@@ -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.

include/ftxui/dom/node.hpp

@@ -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_;

include/ftxui/screen/pixel.hpp

@@ -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;
 

src/ftxui/component/screen_interactive.cpp

@@ -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);

src/ftxui/component/slider.cpp

@@ -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)
+  explicit SliderBase(SliderOption<T> options) : SliderOption<T>(options) {}
-      : value_(options.value),
-        min_(options.min),
-        max_(options.max),
-        increment_(options.increment),
-        options_(options) {}
 
   Element Render() override {
-    auto gauge_color = Focused() ? color(options_.color_active)
+    auto gauge_color =
-                                 : color(options_.color_inactive);
+        Focused() ? color(this->color_active) : color(this->color_inactive);
-    const float percent = float(value_() - min_()) / float(max_() - min_());
+    const float percent =
-    return gaugeDirection(percent, options_.direction) |
+        float(this->value() - this->min()) / float(this->max() - this->min());
-           flexDirection(options_.direction) | reflect(gauge_box_) |
+    return gaugeDirection(percent, this->direction) |
-           gauge_color;
+           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_());
+    this->value() = std::max(this->min(), std::min(this->max(), this->value()));
-    if (old_value != 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) *
+          this->value() =
-                                  (max_() - min_()) /
+              this->min() + (event.mouse().x - gauge_box_.x_min) *
-                                  (gauge_box_.x_max - 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) *
+          this->value() =
-                                  (max_() - min_()) /
+              this->max() - (event.mouse().x - gauge_box_.x_min) *
-                                  (gauge_box_.x_max - 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) *
+          this->value() =
-                                  (max_() - min_()) /
+              this->min() + (event.mouse().y - gauge_box_.y_min) *
-                                  (gauge_box_.y_max - 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) *
+          this->value() =
-                                  (max_() - min_()) /
+              this->max() - (event.mouse().y - gauge_box_.y_min) *
-                                  (gauge_box_.y_max - 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>);

src/ftxui/component/slider_test.cpp

@@ -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) {

src/ftxui/dom/selectable.cpp

@@ -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