Feature resizable spilt with custom separator (#583)

* Feature: ResizableSplit with custom separator

This resolves:
    https://github.com/ArthurSonzogni/FTXUI/issues/580

Co-authored-by: Pin Loon Lee <pinloon_0428@hotmail.com>

include/ftxui/component/component.hpp

@@ -92,6 +92,7 @@ Component ResizableSplitLeft(Component main, Component back, int* main_size);
 Component ResizableSplitRight(Component main, Component back, int* main_size);
 Component ResizableSplitTop(Component main, Component back, int* main_size);
 Component ResizableSplitBottom(Component main, Component back, int* main_size);
+Component ResizableSplit(ResizableSplitOption options);
 
 Component Renderer(Component child, std::function<Element()>);
 Component Renderer(std::function<Element()>);

include/ftxui/component/component_options.hpp

@@ -3,12 +3,14 @@
 
 #include <chrono>                         // for milliseconds
 #include <ftxui/component/animation.hpp>  // for Duration, QuadraticInOut, Function
-#include <ftxui/dom/elements.hpp>  // for Element, GaugeDirection, GaugeDirection::Right
-#include <ftxui/util/ref.hpp>  // for Ref, ConstRef
-#include <functional>          // for function
-#include <optional>            // for optional
-#include <string>              // for string
+#include <ftxui/dom/direction.hpp>  // for Direction, Direction::Left, Direction::Right, Direction::Down
+#include <ftxui/dom/elements.hpp>  // for Element, separator
+#include <ftxui/util/ref.hpp>      // for Ref, ConstRef
+#include <functional>              // for function
+#include <optional>                // for optional
+#include <string>                  // for string
 
+#include "ftxui/component/component_base.hpp"  // for Component
 #include "ftxui/screen/color.hpp"  // for Color, Color::GrayDark, Color::White
 
 namespace ftxui {
@@ -87,8 +89,7 @@ struct MenuOption {
   // Style:
   UnderlineOption underline;
   MenuEntryOption entries;
-  enum Direction { Up, Down, Left, Right };
-  Direction direction = Down;
+  Direction direction = Direction::Down;
   std::function<Element()> elements_prefix;
   std::function<Element()> elements_infix;
   std::function<Element()> elements_postfix;
@@ -164,6 +165,16 @@ struct RadioboxOption {
   Ref<int> focused_entry = 0;
 };
 
+struct ResizableSplitOption {
+  Component main;
+  Component back;
+  Ref<Direction> direction = Direction::Left;
+  Ref<int> main_size =
+      (direction() == Direction::Left || direction() == Direction::Right) ? 20
+                                                                          : 10;
+  std::function<Element()> separator_func = [] { return ::ftxui::separator(); };
+};
+
 // @brief Option for the `Slider` component.
 // @ingroup component
 template <typename T>
@@ -172,7 +183,7 @@ struct SliderOption {
   ConstRef<T> min = T(0);
   ConstRef<T> max = T(100);
   ConstRef<T> increment = (max() - min()) / 20;
-  GaugeDirection direction = GaugeDirection::Right;
+  Direction direction = Direction::Right;
   Color color_active = Color::White;
   Color color_inactive = Color::GrayDark;
 };

include/ftxui/dom/direction.hpp

@@ -0,0 +1,17 @@
+#ifndef FTXUI_DOM_DIRECTION_HPP
+#define FTXUI_DOM_DIRECTION_HPP
+
+namespace ftxui {
+enum class Direction {
+  Up = 0,
+  Down = 1,
+  Left = 2,
+  Right = 3,
+};
+
+}  // namespace ftxui
+
+#endif  // FTXUI_DOM_DIRECTION_HPP
+// Copyright 2023 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/ftxui/dom/elements.hpp

@@ -5,6 +5,7 @@
 #include <memory>
 
 #include "ftxui/dom/canvas.hpp"
+#include "ftxui/dom/direction.hpp"
 #include "ftxui/dom/flexbox_config.hpp"
 #include "ftxui/dom/node.hpp"
 #include "ftxui/screen/box.hpp"
@@ -21,7 +22,6 @@ using Decorator = std::function<Element(Element)>;
 using GraphFunction = std::function<std::vector<int>(int, int)>;
 
 enum BorderStyle { LIGHT, HEAVY, DOUBLE, ROUNDED, EMPTY };
-enum class GaugeDirection { Left, Up, Right, Down };
 
 // Pipe elements into decorator togethers.
 // For instance the next lines are equivalents:
@@ -56,7 +56,7 @@ Element gaugeLeft(float progress);
 Element gaugeRight(float progress);
 Element gaugeUp(float progress);
 Element gaugeDown(float progress);
-Element gaugeDirection(float progress, GaugeDirection);
+Element gaugeDirection(float progress, Direction direction);
 Element border(Element);
 Element borderLight(Element);
 Element borderHeavy(Element);
@@ -124,9 +124,9 @@ Element notflex(Element);  // Reset the flex attribute.
 Element filler();          // A blank expandable element.
 
 // -- Size override;
-enum Direction { WIDTH, HEIGHT };
+enum WidthOrHeight { WIDTH, HEIGHT };
 enum Constraint { LESS_THAN, EQUAL, GREATER_THAN };
-Decorator size(Direction, Constraint, int value);
+Decorator size(WidthOrHeight, Constraint, int value);
 
 // --- Frame ---
 // A frame is a scrollable area. The internal area is potentially larger than