Pipeable decoration and the package_manager example.

- Pipeable decorator.
- package_manager example.

examples/component/CMakeLists.txt

@@ -3,3 +3,4 @@ example(menu)
 example(menu2)
 example(menu_style)
 example(toggle)
+example(tab)

examples/component/input.cpp

@@ -45,7 +45,7 @@ class MyComponent : ComponentVertical {
 };
 
 int main(int argc, const char* argv[]) {
-  ftxui::ScreenInteractive screen(60, 5);
+  auto screen = ftxui::ScreenInteractive::TerminalOutput();
   MyComponent component(screen.delegate());
   component.on_enter = screen.ExitLoopClosure();
   screen.Loop();

examples/component/menu.cpp

@@ -7,7 +7,7 @@
 
 int main(int argc, const char *argv[])
 {
-  ftxui::ScreenInteractive screen(30,3);
+  auto screen = ftxui::ScreenInteractive::FixedSize(30, 3);
   ftxui::component::Menu menu(screen.delegate());
   menu.entries = {
     L"entry 1",

examples/component/menu2.cpp

@@ -40,29 +40,25 @@ class MyComponent : ComponentHorizontal {
            // -------- Top panel --------------
            hbox(
              // -------- Left Menu --------------
-             flex(
-               vbox(
-                 hcenter(bold(text(L"Percentage by 10%"))),
-                 separator(),
-                 left_menu.Render()
-               )
-             ),
+             vbox(
+               hcenter(bold(text(L"Percentage by 10%"))),
+               separator(),
+               left_menu.Render()
+             ) | flex,
              // -------- Right Menu --------------
-             flex(
-               vbox(
-                 hcenter(bold(text(L"Percentage by 1%"))),
-                 separator(),
-                 right_menu.Render()
-               )
-             ),
-             flex()
+             vbox(
+               hcenter(bold(text(L"Percentage by 1%"))),
+               separator(),
+               right_menu.Render()
+             ) | flex,
+             filler()
            ),
            separator(),
            // -------- Bottom panel --------------
-           flex(vbox(
+           vbox(
              hbox(text(L" gauge : "), gauge(sum/100.0)),
              hbox(text(L"  text : "), text(to_wstring(std::to_string(sum) + " %")))
-           ))
+           ) | flex
          )
        );
    }
@@ -70,7 +66,7 @@ class MyComponent : ComponentHorizontal {
 
 int main(int argc, const char *argv[])
 {
-  ftxui::ScreenInteractive screen(60,18);
+  auto screen = ftxui::ScreenInteractive::TerminalOutput();
   MyComponent component(screen.delegate());
   component.on_enter = screen.ExitLoopClosure();
   screen.Loop();

examples/component/menu_style.cpp

@@ -33,7 +33,7 @@ class MyComponent : ComponentHorizontal {
      }
 
      menu_2.selected_style = color(Color::Blue);
-     menu_2.active_style = compose(bold, color(Color::Blue));
+     menu_2.active_style = bold | color(Color::Blue);
 
      menu_3.selected_style = color(Color::Blue);
      menu_3.active_style = bgcolor(Color::Blue);
@@ -45,9 +45,9 @@ class MyComponent : ComponentHorizontal {
      menu_5.selected_style = bgcolor(Color::Yellow);
      menu_5.active_style = bgcolor(Color::Red);
 
-     menu_6.normal_style = compose(dim, color(Color::Blue));
-     menu_6.selected_style = compose(nothing, color(Color::Blue));
-     menu_6.active_style = compose(bold, color(Color::Blue));
+     menu_6.normal_style = dim | color(Color::Blue);
+     menu_6.selected_style = color(Color::Blue);
+     menu_6.active_style = bold | color(Color::Blue);
 
      Focus(&menu_1);
    }
@@ -63,24 +63,21 @@ class MyComponent : ComponentHorizontal {
 
    Element Render() override {
      return
-      vbox(
         hbox(
-          flex(frame(center(text(L" menu_1 ")), menu_1.Render())),
-          flex(frame(center(text(L" menu_2 ")), menu_2.Render())),
-          flex(frame(center(text(L" menu_3 ")), menu_3.Render()))
-        ),
-        hbox(
-          flex(frame(center(text(L" menu_4 ")), menu_4.Render())),
-          flex(frame(center(text(L" menu_5 ")), menu_5.Render())),
-          flex(frame(center(text(L" menu_6 ")), menu_6.Render()))
-        )
-      );
+          menu_1.Render() | flex, separator(),
+          menu_2.Render() | flex, separator(),
+          menu_3.Render() | flex, separator(),
+          menu_4.Render() | flex, separator(),
+          menu_5.Render() | flex, separator(),
+          menu_6.Render() | flex
+        ) | frame;
    }
 };
 
 int main(int argc, const char *argv[])
 {
-  ftxui::ScreenInteractive screen(90,14);
+  //auto screen = ftxui::ScreenInteractive::TerminalOutput();
+  auto screen = ftxui::ScreenInteractive::Fullscreen();
   MyComponent component(screen.delegate());
   component.on_enter = screen.ExitLoopClosure();
   screen.Loop();

examples/component/tab.cpp

@@ -0,0 +1,46 @@
+#include <iostream>
+#include <thread>
+
+#include "ftxui/component/component_vertical.hpp"
+#include "ftxui/component/toggle.hpp"
+#include "ftxui/component/menu.hpp"
+#include "ftxui/screen_interactive.hpp"
+#include "ftxui/util/string.hpp"
+
+using namespace ftxui;
+using namespace ftxui::component;
+using namespace ftxui::dom;
+
+class MyComponent : ComponentVertical {
+  public:
+   MyComponent(ftxui::component::Delegate* delegate)
+       : ComponentVertical(delegate),
+         toggle(delegate->NewChild()),
+         menu(delegate->NewChild()) {
+
+     toggle.options = {L" left ", L" middle ", L" end "};
+     menu.entries = {L" top ", L" middle ", L" bottom "};
+     Focus(&toggle);
+   }
+
+   std::function<void()> on_enter = [](){};
+  private:
+   Toggle toggle;
+   Menu menu;
+
+   Element Render() override {
+     return
+       vbox(
+        hbox(frame(toggle.Render()), filler()),
+        frame(menu.Render()));
+   }
+};
+
+ 
+int main(int argc, const char *argv[])
+{
+  auto screen = ftxui::ScreenInteractive::TerminalOutput();
+  MyComponent component(screen.delegate());
+  component.on_enter = screen.ExitLoopClosure();
+  screen.Loop();
+}

examples/component/toggle.cpp

@@ -62,7 +62,7 @@ class MyComponent : ComponentVertical {
 };
 
 int main(int argc, const char* argv[]) {
-  ftxui::ScreenInteractive screen(70,7);
+  auto screen = ftxui::ScreenInteractive::TerminalOutput();
   MyComponent component(screen.delegate());
   component.on_enter = screen.ExitLoopClosure();
   screen.Loop();

examples/dom/CMakeLists.txt

@@ -2,5 +2,6 @@ example(color)
 example(dbox)
 example(frame)
 example(gauge)
+example(package_manager)
 example(separator)
 example(vbox_hbox)

examples/dom/color.cpp

@@ -46,7 +46,7 @@ int main(int argc, const char *argv[])
         bgcolor(Color::Yellow, text(L"Yellow")),
         bgcolor(Color::YellowLight, text(L"YellowLight"))
       ),
-      flex()
+      filler()
     );
 
   auto screen = ftxui::Screen::TerminalOutput(document);

examples/dom/frame.cpp

@@ -10,7 +10,7 @@ int main(int argc, const char *argv[])
   using namespace ftxui::dom;
 	auto document =
 		hbox(
-			frame(hcenter(text(L" main frame ")),
+			window(hcenter(text(L" main frame ")),
 				vbox(
 					text(L"Line 1"),
 					text(L"Line 2"),
@@ -23,14 +23,14 @@ int main(int argc, const char *argv[])
 						)
 					),
 					hbox(
-						frame(text(L"frame 2"),
+						window(text(L"frame 2"),
 							vbox(
 								text(L"Line 4"),
 								text(L"Line 5"),
 								text(L"Line 6")
 							)
 						),
-						frame(text(L"frame 3"),
+						window(text(L"frame 3"),
 							vbox(
 								text(L"Line 7"),
 								text(L"Line 8"),
@@ -41,7 +41,7 @@ int main(int argc, const char *argv[])
 					text(L"footer footer footer footer footer")
 				)
 			),
-			flex()
+			filler()
 		);
   auto screen = ftxui::Screen::TerminalOutput(document);
   Render(screen, document.get());

examples/dom/gauge.cpp

@@ -14,7 +14,7 @@ int main(int argc, const char *argv[])
     auto document =
         hbox(
           text(L"downloading:"),
-          flex(gauge(percentage)),
+          gauge(percentage) | flex,
           text(L" " + data_downloaded)
         );
     auto screen = ftxui::Screen(100, 1);

examples/dom/package_manager.cpp

@@ -0,0 +1,123 @@
+#include <chrono>
+#include <iostream>
+#include <thread>
+
+#include "ftxui/screen.hpp"
+#include "ftxui/dom/elements.hpp"
+#include "ftxui/util/string.hpp"
+#include <list>
+#include <vector>
+
+using namespace ftxui;
+using namespace ftxui::dom;
+
+int main(int argc, const char *argv[])
+{
+  struct Task {
+    std::wstring name;
+    int number_of_threads;
+    int downloaded;
+    int size;
+  };
+
+  std::list<Task> remaining_tasks = {
+    {L"contact server       "  , 10 , 0 , 6*25} ,
+    {L"download index.html  "  , 10 , 0 , 9*25} ,
+    {L"download script.js   "  , 1 , 0 , 3*25} ,
+    {L"download style.js    "  , 1 , 0 , 4*25} ,
+    {L"download image.png   "  , 1 , 0 , 5*25}  ,
+    {L"download big_1.png   "  , 1 , 0 , 30*25}  ,
+    {L"download icon_1.png  "  , 1 , 0 , 7*25}  ,
+    {L"download icon_2.png  "  , 1 , 0 , 8*25}  ,
+    {L"download big_2.png   "  , 1 , 0 , 30*25}  ,
+    {L"download small_1.png "  , 1 , 0 , 10*25}  ,
+    {L"download small_2.png "  , 1 , 0 , 11*25}  ,
+    {L"download small_3.png "  , 1 , 0 , 12*25}  ,
+  };
+
+  std::list<Task> displayed_task;
+
+  int remaining_threads = 12;
+  std::string reset_position;
+
+  int nb_queued = remaining_tasks.size();
+  int nb_active = 0;
+  int nb_done = 0;
+
+  auto to_text = [](int number) {
+    std::wstring t = to_wstring(std::to_string(number));
+    while(t.size() < 3)
+      t = L" " + t;
+    return text(t);
+  };
+  
+  for(;;) {
+    std::vector<Element> entries;
+    for(auto& task : displayed_task) {
+      auto style = (task.downloaded == task.size) ? dim : bold;
+      entries.push_back(
+        hbox(
+          text(task.name) | style,
+          separator(),
+          to_text(task.downloaded),
+          text(L"/"),
+          to_text(task.size),
+          separator(),
+          gauge(task.downloaded / float(task.size))
+        )
+      );
+    }
+
+    auto document =
+      vbox(
+        window(text(L" Task "),
+          vbox(std::move(entries))
+        ),
+        hbox(
+          window(text(L" Summary "),
+            vbox(
+              hbox(text(L"- done:   "), to_text(nb_done) | bold) | color(Color::Green),
+              hbox(text(L"- active: "), to_text(nb_active) | bold ) | color(Color::RedLight),
+              hbox(text(L"- queue:  "), to_text(nb_queued) | bold) | color(Color::Red)
+            )
+          )
+        )
+      );
+
+    // Draw.
+    //if (step != 0) screen.Clear();
+    auto screen = ftxui::Screen::TerminalOutput(document);
+    Render(screen, document.get());
+    std::cout << reset_position << screen.ToString() << std::flush;
+    reset_position = screen.ResetPosition();
+
+    // Simulate time.
+    using namespace std::chrono_literals;
+    std::this_thread::sleep_for(0.01s);
+
+    if (nb_active + nb_queued == 0)
+      break;
+
+    // Update the model.
+    for(auto& task : displayed_task) {
+      if (task.downloaded != task.size) {
+        task.downloaded++;
+      } else if (task.number_of_threads) {
+        remaining_threads += task.number_of_threads;
+        task.number_of_threads = 0;
+        nb_active--;
+        nb_done++;
+      }
+    }
+
+    if (remaining_tasks.size() &&
+        remaining_tasks.front().number_of_threads <= remaining_threads) {
+      remaining_threads -= remaining_tasks.front().number_of_threads;
+      displayed_task.push_back(remaining_tasks.front());
+      remaining_tasks.pop_front();
+      nb_queued--;
+      nb_active++;
+    }
+  }
+  std::cout << std::endl;
+}

examples/dom/separator.cpp

@@ -10,7 +10,7 @@ int main(int argc, const char *argv[])
       text(L"left-column"),
       separator(),
       flex(vbox(
-        flex(center(text(L"right-column"))),
+        center(text(L"right-column")) | flex,
         separator(),
         center(text(L"bottom-column"))
       ))

examples/dom/vbox_hbox.cpp

@@ -9,21 +9,21 @@ int main(int argc, const char *argv[])
     vbox(
       hbox(
         text(L"north-west"),
-        flex(),
+        filler(),
         text(L"north-east")
       ),
-      flex(),
+      filler(),
       hbox(
         hbox(
-          flex(),
+          filler(),
           text(L"center"),
-          flex()
+          filler()
         )
       ),
-      flex(),
+      filler(),
       hbox(
         text(L"south-west"),
-        flex(),
+        filler(),
         text(L"south-east")
       )
     );

examples/print_key_press.cpp

@@ -42,7 +42,7 @@ class DrawKey : public ftxui::component::Component {
 };
 
 int main(int argc, const char* argv[]) {
-  ftxui::ScreenInteractive screen(80,10);
+  auto screen = ftxui::ScreenInteractive::FixedSize(80,10);
   DrawKey draw_key(screen.delegate());
   screen.Loop();
 }