Add Blink. Refactor examples.

examples/CMakeLists.txt

@@ -1,10 +1,8 @@
-add_subdirectory(color)
+function(example name)
-add_subdirectory(frame)
+  add_executable(${name} ${name}.cpp)
-add_subdirectory(gauge)
+  target_link_libraries(${name} PUBLIC ftxui)
-add_subdirectory(input)
+endfunction(example)
-add_subdirectory(menu)
+
-add_subdirectory(menu2)
+add_subdirectory(component)
-add_subdirectory(print_key_press)
+add_subdirectory(dom)
-add_subdirectory(separator)
+example(print_key_press)
-add_subdirectory(toggle)
-add_subdirectory(vbox_hbox)

examples/color/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(color_main
-  main.cpp
-)
-target_link_libraries(color_main PRIVATE ftxui)

examples/component/CMakeLists.txt

@@ -0,0 +1,6 @@
+example(color)
+example(gauge)
+example(input)
+example(menu)
+example(menu2)
+example(toggle)

examples/component/color.cpp

@@ -54,7 +54,5 @@ int main(int argc, const char *argv[])
 
   std::cout << screen.ToString();
 
-  getchar();
-
   return 0;
 }

examples/component/input.cpp

@@ -9,6 +9,7 @@
 
 using namespace ftxui::component;
 using namespace ftxui::dom;
+using namespace ftxui;
 
 class MyComponent : ComponentVertical {
  public:
@@ -44,7 +45,7 @@ class MyComponent : ComponentVertical {
 };
 
 int main(int argc, const char* argv[]) {
-  ftxui::ScreenInteractive screen(60, 17);
+  ftxui::ScreenInteractive screen(60, 5);
   MyComponent component(screen.delegate());
   component.on_enter = screen.ExitLoopClosure();
   screen.Loop();

examples/component/menu2.cpp

@@ -43,6 +43,7 @@ class MyComponent : ComponentHorizontal {
              flex(
                vbox(
                  hcenter(bold(text(L"Percentage by 10%"))),
+                 separator(),
                  left_menu.Render()
                )
              ),
@@ -50,6 +51,7 @@ class MyComponent : ComponentHorizontal {
              flex(
                vbox(
                  hcenter(bold(text(L"Percentage by 1%"))),
+                 separator(),
                  right_menu.Render()
                )
              ),

examples/dom/CMakeLists.txt

@@ -0,0 +1,3 @@
+example(frame)
+example(separator)
+example(vbox_hbox)

examples/dom/separator.cpp

@@ -19,7 +19,6 @@ int main(int argc, const char *argv[])
   Render(screen, document.get());
 
   std::cout << screen.ToString();
-
   getchar();
 
   return 0;

examples/dom/vbox_hbox.cpp

@@ -32,7 +32,5 @@ int main(int argc, const char *argv[])
 
   std::cout << screen.ToString();
 
-  getchar();
-
   return 0;
 }

examples/frame/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(frame_example
-  main.cpp
-)
-target_link_libraries(frame_example PRIVATE ftxui)

examples/gauge/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(gauge_example
-  main.cpp
-)
-target_link_libraries(gauge_example PRIVATE ftxui)

examples/input/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(input_main
-  main.cpp
-)
-target_link_libraries(input_main PRIVATE ftxui)

examples/menu/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(menu_main
-  main.cpp
-)
-target_link_libraries(menu_main PRIVATE ftxui)

examples/menu2/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(menu2_main
-  main.cpp
-)
-target_link_libraries(menu2_main PRIVATE ftxui)

examples/print_key_press/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(print_key_press
-  main.cpp
-)
-target_link_libraries(print_key_press PRIVATE ftxui)

examples/separator/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(separator_example
-  main.cpp
-)
-target_link_libraries(separator_example PRIVATE ftxui)

examples/toggle/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(toogle_main
-  main.cpp
-)
-target_link_libraries(toogle_main PRIVATE ftxui)

examples/vbox_hbox/CMakeLists.txt

@@ -1,4 +0,0 @@
-add_executable(vbox_hbox_example
-  main.cpp
-)
-target_link_libraries(vbox_hbox_example PRIVATE ftxui)

ftxui/include/ftxui/component/component_direction.hpp

@@ -7,6 +7,7 @@ namespace ftxui {
 namespace component {
 
 // A component where focus and events are automatically handled for you.
+// Please use ComponentVertical or ComponentHorizontal.
 class ComponentDirection : public Component {
  public:
   ComponentDirection(Delegate* delegate);

ftxui/include/ftxui/dom/elements.hpp

@@ -15,6 +15,7 @@ using Children = std::vector<Child>;
 Element vbox(Children);
 Element hbox(Children);
 Element flex();
+Element flex(Element);
 
 // --- Widget --
 Element text(std::wstring text);
@@ -23,7 +24,7 @@ Element gauge(float ratio);
 Element frame(Child);
 Element frame(Child title, Child content);
 
-// -- Decorator (Style) ---
+// -- Style ---
 Element bold(Element);
 Element dim(Element);
 Element inverted(Element);
@@ -32,11 +33,10 @@ Element blink(Element);
 Element color(Color, Element);
 Element bgcolor(Color, Element);
 
-// --- Decorator ---
+// --- Util ---
 Element hcenter(Element);
 Element vcenter(Element);
 Element center(Element);
-Element flex(Element);
 
 // --- Util ---
 Element nothing(Element element);

ftxui/include/ftxui/dom/node.hpp

@@ -17,14 +17,14 @@ class Node {
   Node(std::vector<std::unique_ptr<Node>> children);
   virtual ~Node();
 
-  // Step 1: Direction parent <= children.
+  // Step 1: Compute layout requirement. Tell parent what dimensions this
-  //         Compute layout requirement. Tell parent what dimensions this
   //         element wants to be.
+  //         Propagated from Children to Parents.
   virtual void ComputeRequirement();
   Requirement requirement() { return requirement_; }
 
-  // Step 2: Direction parent => children.
+  // Step 2: Assign this element its final dimensions.
-  //         Assign this element its final dimensions.
+  //         Propagated from Parents to Children.
   virtual void SetBox(Box box);
 
   // Step 3: Draw this element.

ftxui/src/ftxui/component/input.cpp

@@ -24,6 +24,9 @@ dom::Element Input::Render() {
   if (!is_focused)
     return flex(text(content));
 
+  std::wstring sub_content = content;
+  size_t sub_cursor_position = cursor_position;
+
   std::wstring part_before_cursor = content.substr(0,cursor_position);
   std::wstring part_at_cursor = cursor_position < (int)content.size()
                                     ? content.substr(cursor_position, 1)

ftxui/src/ftxui/dom/blink.cpp

@@ -0,0 +1,27 @@
+#include "ftxui/dom/node_decorator.hpp"
+#include "ftxui/dom/elements.hpp"
+
+namespace ftxui {
+namespace dom {
+
+class Blink : public NodeDecorator {
+ public:
+  Blink(Children children) : NodeDecorator(std::move(children)) {}
+  ~Blink() override {}
+
+  void Render(Screen& screen) override {
+    Node::Render(screen);
+    for (int y = box_.top; y <= box_.bottom; ++y) {
+      for (int x = box_.left; x <= box_.right; ++x) {
+        screen.PixelAt(x, y).blink = true;
+      }
+    }
+  }
+};
+
+std::unique_ptr<Node> blink(Child child) {
+  return std::make_unique<Blink>(unpack(std::move(child)));
+}
+
+};  // namespace dom
+};  // namespace ftxui

ftxui/src/ftxui/dom/util.cpp

@@ -0,0 +1,11 @@
+#include "ftxui/dom/elements.hpp"
+
+namespace ftxui {
+namespace dom {
+
+Element nothing(Element element) {
+  return std::move(element);
+}
+
+};  // namespace dom
+};  // namespace ftxui

ftxui/src/ftxui/screen.cpp

@@ -1,5 +1,5 @@
-#include "ftxui/dom/node.hpp"
 #include "ftxui/screen.hpp"
+#include "ftxui/dom/node.hpp"
 #include "ftxui/terminal.hpp"
 #include "ftxui/util/string.hpp"
 
@@ -10,6 +10,35 @@ namespace ftxui {
 Screen::Screen(size_t dimx, size_t dimy)
     : dimx_(dimx), dimy_(dimy), pixels_(dimy, std::vector<Pixel>(dimx)) {}
 
+void UpdatePixelStyle(std::wstringstream& ss, Pixel& previous, Pixel& next) {
+  if (next.bold != previous.bold)
+    ss << (next.bold ? L"\e[1m" : L"\e[0m");
+
+  if (next.inverted != previous.inverted)
+    ss << (next.inverted ? L"\e[7m" : L"\e[27m");
+
+  if (next.underlined != previous.underlined)
+    ss << (next.underlined ? L"\e[4m" : L"\e[24m");
+
+  if (next.dim != previous.dim)
+    ss << (next.dim ? L"\e[2m" : L"\e[22m");
+
+  if (next.blink != previous.blink)
+    ss << (next.blink ? L"\e[5m" : L"\e[25m");
+
+  if (next.foreground_color != previous.foreground_color) {
+    ss << L"\e[" + to_wstring(std::to_string((uint8_t)next.foreground_color)) +
+              L"m";
+  }
+  if (next.background_color != previous.background_color) {
+    ss << L"\e[" +
+              to_wstring(std::to_string(10 + (uint8_t)next.background_color)) +
+              L"m";
+  }
+
+  previous = next;
+}
+
 std::string Screen::ToString() {
   std::wstringstream ss;
 
@@ -17,57 +46,13 @@ std::string Screen::ToString() {
 
   for (size_t y = 0; y < dimy_; ++y) {
     for (size_t x = 0; x < dimx_; ++x) {
-      if (pixels_[y][x].bold != previous_pixel.bold) {
+      UpdatePixelStyle(ss, previous_pixel, pixels_[y][x]);
-        if (pixels_[y][x].bold) {
-          ss << L"\e[1m";
-        } else {
-          ss << L"\e[0m";
-        }
-      }
-      if (pixels_[y][x].inverted != previous_pixel.inverted) {
-        if (pixels_[y][x].inverted) {
-          ss << L"\e[7m";
-        } else {
-          ss << L"\e[27m";
-        }
-      }
-      if (pixels_[y][x].underlined != previous_pixel.underlined) {
-        if (pixels_[y][x].underlined) {
-          ss << L"\e[4m";
-        } else {
-          ss << L"\e[24m";
-        }
-      }
-      if (pixels_[y][x].dim != previous_pixel.dim) {
-        if (pixels_[y][x].dim) {
-          ss << L"\e[2m";
-        } else {
-          ss << L"\e[22m";
-        }
-      }
-      if (pixels_[y][x].blink != previous_pixel.blink) {
-        if (pixels_[y][x].blink) {
-          ss << L"\e[5m";
-        } else {
-          ss << L"\e[25m";
-        }
-      }
-      if (pixels_[y][x].foreground_color != previous_pixel.foreground_color) {
-        ss << L"\e[" + to_wstring(std::to_string(
-                           (uint8_t)pixels_[y][x].foreground_color)) +
-                  L"m";
-      }
-      if (pixels_[y][x].background_color != previous_pixel.background_color) {
-        ss << L"\e[" + to_wstring(std::to_string(
-                           10 + (uint8_t)pixels_[y][x].background_color)) +
-                  L"m";
-      }
       ss << pixels_[y][x].character;
-      previous_pixel = pixels_[y][x];
     }
     if (y + 1 < dimy_)
       ss << '\n';
   }
+
   return to_string(ss.str());
 }
 

ftxui/src/ftxui/screen_interactive.cpp

@@ -11,6 +11,7 @@ namespace ftxui {
 namespace {
   constexpr int ESC = 27;
   constexpr int WAT = 195;
+  constexpr int WAT2 = 194;
   constexpr int WATWAIT = 91;
 
   Event GetEvent() {
@@ -32,6 +33,11 @@ namespace {
       return Event{v1, v2};
     }
 
+    if (v1 == WAT2) {
+      int v2 = getchar();
+      return Event{v1, v2};
+    }
+
     return Event{v1};
   };
 };

tutorial.md

@@ -25,6 +25,7 @@ It declares the following set of elements:
 Element vbox(Children);
 Element hbox(Children);
 Element flex();
+Element flex(Element);
 
 // --- Widget --
 Element text(std::wstring text);
@@ -33,24 +34,28 @@ Element gauge(float ratio);
 Element frame(Child);
 Element frame(Child title, Child content);
 
-// -- Decorator (Style) ---
+// -- Style ---
 Element bold(Element);
 Element dim(Element);
 Element inverted(Element);
 Element underlined(Element);
-Element color(Color,Element);
+Element blink(Element);
-Element bgcolor(Element);
+Element color(Color, Element);
+Element bgcolor(Color, Element);
 
-// --- Decorator ---
+// --- Util ---
 Element hcenter(Element);
 Element vcenter(Element);
 Element center(Element);
-Element flex(Element);
+
+// --- Util ---
+Element nothing(Element element);
 ~~~
 
 ### Style
 A terminal console can usually display colored text and colored background.
-The text can also have different effects: bold, dim, underlined, inverted.
+The text can also have different effects: bold, dim, underlined, inverted,
+blink.
 
 ~~~cpp
 Element bold(Element);
@@ -164,5 +169,8 @@ frame(gauge(0.5))
 ## Components.
 
 ### Input
+  TODO(arthursonzogni): Add Video
 ### Menu
+  TODO(arthursonzogni): Add Video
 ### Toggle.
+  TODO(arthursonzogni): Add video