Feature: Add the dashed style. (#594)

CHANGELOG.md

@@ -8,6 +8,9 @@ current (development)
 - Feature: Support `ResizableSplit` with customizable separator.
 - Breaking: MenuDirection enum is renamed Direction
 
+### Dom
+- Feature: Add the dashed style for border and separator.
+
 ###
 - Breaking: Direction enum is renamed WidthOrHeight
 - Breaking: GaugeDirection enum is renamed Direction

examples/dom/border_style.cpp

@@ -11,6 +11,7 @@ int main(int argc, const char* argv[]) {
 
   auto document = vbox({
       text("borderLight") | borderLight,
+      text("borderDashed") | borderDashed,
       text("borderHeavy") | borderHeavy,
       text("borderDouble") | borderDouble,
       text("borderRounded") | borderRounded,

examples/dom/separator_style.cpp

@@ -16,6 +16,12 @@ int main(int argc, const char* argv[]) {
           hbox(text("left"), separatorLight(), text("right")),
       }) | borderLight,
 
+      vbox({
+          text("separatorDashed"),
+          separatorDashed(),
+          hbox(text("left"), separatorDashed(), text("right")),
+      }) | borderDashed,
+
       vbox({
           text("separatorHeavy"),
           separatorHeavy(),

include/ftxui/dom/elements.hpp

@@ -21,7 +21,14 @@ using Elements = std::vector<Element>;
 using Decorator = std::function<Element(Element)>;
 using GraphFunction = std::function<std::vector<int>(int, int)>;
 
-enum BorderStyle { LIGHT, HEAVY, DOUBLE, ROUNDED, EMPTY };
+enum BorderStyle {
+  LIGHT,
+  DASHED,
+  HEAVY,
+  DOUBLE,
+  ROUNDED,
+  EMPTY,
+};
 
 // Pipe elements into decorator togethers.
 // For instance the next lines are equivalents:
@@ -37,6 +44,7 @@ Element text(std::string text);
 Element vtext(std::string text);
 Element separator();
 Element separatorLight();
+Element separatorDashed();
 Element separatorHeavy();
 Element separatorDouble();
 Element separatorEmpty();
@@ -59,6 +67,7 @@ Element gaugeDown(float progress);
 Element gaugeDirection(float progress, Direction direction);
 Element border(Element);
 Element borderLight(Element);
+Element borderDashed(Element);
 Element borderHeavy(Element);
 Element borderDouble(Element);
 Element borderRounded(Element);

src/ftxui/dom/border.cpp

@@ -14,14 +14,15 @@
 namespace ftxui {
 
 using Charset = std::array<std::string, 6>;  // NOLINT
-using Charsets = std::array<Charset, 5>;     // NOLINT
+using Charsets = std::array<Charset, 6>;     // NOLINT
 // NOLINTNEXTLINE
 static Charsets simple_border_charset = {
-    Charset{"┌", "┐", "└", "┘", "─", "│"},
+    Charset{"┌", "┐", "└", "┘", "─", "│"}, // LIGHT
-    Charset{"┏", "┓", "┗", "┛", "━", "┃"},
+    Charset{"┏", "┓", "┗", "┛", "╍", "╏"}, // DASHED
-    Charset{"╔", "╗", "╚", "╝", "═", "║"},
+    Charset{"┏", "┓", "┗", "┛", "━", "┃"}, // HEAVY
-    Charset{"╭", "╮", "╰", "╯", "─", "│"},
+    Charset{"╔", "╗", "╚", "╝", "═", "║"}, // DOUBLE
-    Charset{" ", " ", " ", " ", " ", " "},
+    Charset{"╭", "╮", "╰", "╯", "─", "│"}, // ROUNDED
+    Charset{" ", " ", " ", " ", " ", " "}, // EMPTY
 };
 
 // For reference, here is the charset for normal border:
@@ -173,6 +174,7 @@ class BorderPixel : public Node {
 /// @ingroup dom
 /// @see border
 /// @see borderLight
+/// @see borderDashed
 /// @see borderDouble
 /// @see borderHeavy
 /// @see borderEmpty
@@ -223,6 +225,42 @@ Decorator borderStyled(BorderStyle style) {
 /// @ingroup dom
 /// @see border
 /// @see borderLight
+/// @see borderDashed
+/// @see borderDouble
+/// @see borderHeavy
+/// @see borderRounded
+/// @see borderEmpty
+/// @see borderStyled
+/// @see borderWith
+///
+/// Add a border around an element
+///
+/// ### Example
+///
+/// ```cpp
+/// // Use 'borderDash' as a function...
+/// Element document = borderDash(text("The element"));
+///
+/// // ...Or as a 'pipe'.
+/// Element document = text("The element") | borderDAsh;
+/// ```
+///
+/// ### Output
+///
+/// ```bash
+/// ┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓
+/// ╏The element   ╏
+/// ┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛
+/// ```
+Element borderDashed(Element child) {
+  return std::make_shared<Border>(unpack(std::move(child)), DASHED);
+}
+
+/// @brief Draw a dashed border around the element.
+/// @ingroup dom
+/// @see border
+/// @see borderLight
+/// @see borderDashed
 /// @see borderDouble
 /// @see borderHeavy
 /// @see borderRounded
@@ -257,6 +295,7 @@ Element borderLight(Element child) {
 /// @ingroup dom
 /// @see border
 /// @see borderLight
+/// @see borderDashed
 /// @see borderDouble
 /// @see borderHeavy
 /// @see borderRounded
@@ -291,6 +330,7 @@ Element borderHeavy(Element child) {
 /// @ingroup dom
 /// @see border
 /// @see borderLight
+/// @see borderDashed
 /// @see borderDouble
 /// @see borderHeavy
 /// @see borderRounded
@@ -325,6 +365,7 @@ Element borderDouble(Element child) {
 /// @ingroup dom
 /// @see border
 /// @see borderLight
+/// @see borderDashed
 /// @see borderDouble
 /// @see borderHeavy
 /// @see borderRounded
@@ -359,6 +400,7 @@ Element borderRounded(Element child) {
 /// @ingroup dom
 /// @see border
 /// @see borderLight
+/// @see borderDashed
 /// @see borderDouble
 /// @see borderHeavy
 /// @see borderRounded

src/ftxui/dom/separator.cpp

@@ -14,14 +14,15 @@ namespace ftxui {
 
 namespace {
 using Charset = std::array<std::string, 2>;  // NOLINT
-using Charsets = std::array<Charset, 5>;     // NOLINT
+using Charsets = std::array<Charset, 6>;     // NOLINT
 // NOLINTNEXTLINE
 const Charsets charsets = {
-    Charset{"│", "─"},  //
+    Charset{"│", "─"},  // LIGHT
-    Charset{"┃", "━"},  //
+    Charset{"╏", "╍"},  // DASHED
-    Charset{"║", "═"},  //
+    Charset{"┃", "━"},  // HEAVY
-    Charset{"│", "─"},  //
+    Charset{"║", "═"},  // DOUBLE
-    Charset{" ", " "},  //
+    Charset{"│", "─"},  // ROUNDED
+    Charset{" ", " "},  // EMPTY
 };
 
 }  // namespace
@@ -98,6 +99,7 @@ class SeparatorWithPixel : public SeparatorAuto {
 /// @ingroup dom
 /// @see separator
 /// @see separatorLight
+/// @see separatorDashed
 /// @see separatorDouble
 /// @see separatorHeavy
 /// @see separatorEmpty
@@ -135,6 +137,7 @@ Element separator() {
 /// @ingroup dom
 /// @see separator
 /// @see separatorLight
+/// @see separatorDashed
 /// @see separatorDouble
 /// @see separatorHeavy
 /// @see separatorEmpty
@@ -171,6 +174,7 @@ Element separatorStyled(BorderStyle style) {
 /// @ingroup dom
 /// @see separator
 /// @see separatorLight
+/// @see separatorDashed
 /// @see separatorDouble
 /// @see separatorHeavy
 /// @see separatorEmpty
@@ -202,11 +206,49 @@ Element separatorLight() {
   return std::make_shared<SeparatorAuto>(LIGHT);
 }
 
+/// @brief Draw a vertical or horizontal separation in between two other
+/// elements, using the DASHED style.
+/// @ingroup dom
+/// @see separator
+/// @see separatorLight
+/// @see separatorDashed
+/// @see separatorDouble
+/// @see separatorHeavy
+/// @see separatorEmpty
+/// @see separatorRounded
+/// @see separatorStyled
+/// @see separatorCharacter
+///
+/// Add a visual separation in between two elements.
+///
+/// ### Example
+///
+/// ```cpp
+/// // Use 'border' as a function...
+/// Element document = vbox({
+///   text("up"),
+///   separatorLight(),
+///   text("down"),
+/// });
+/// ```
+///
+/// ### Output
+///
+/// ```bash
+/// up
+/// ╍╍╍╍
+/// down
+/// ```
+Element separatorDashed() {
+  return std::make_shared<SeparatorAuto>(DASHED);
+}
+
 /// @brief Draw a vertical or horizontal separation in between two other
 /// elements, using the HEAVY style.
 /// @ingroup dom
 /// @see separator
 /// @see separatorLight
+/// @see separatorDashed
 /// @see separatorDouble
 /// @see separatorHeavy
 /// @see separatorEmpty
@@ -243,6 +285,7 @@ Element separatorHeavy() {
 /// @ingroup dom
 /// @see separator
 /// @see separatorLight
+/// @see separatorDashed
 /// @see separatorDouble
 /// @see separatorHeavy
 /// @see separatorEmpty
@@ -279,6 +322,7 @@ Element separatorDouble() {
 /// @ingroup dom
 /// @see separator
 /// @see separatorLight
+/// @see separatorDashed
 /// @see separatorDouble
 /// @see separatorHeavy
 /// @see separatorEmpty
@@ -316,6 +360,7 @@ Element separatorEmpty() {
 /// @ingroup dom
 /// @see separator
 /// @see separatorLight
+/// @see separatorDashed
 /// @see separatorDouble
 /// @see separatorHeavy
 /// @see separatorEmpty
@@ -351,6 +396,7 @@ Element separatorCharacter(std::string value) {
 /// @ingroup dom
 /// @see separator
 /// @see separatorLight
+/// @see separatorDashed
 /// @see separatorHeavy
 /// @see separatorDouble
 /// @see separatorStyled

src/ftxui/dom/separator_test.cpp

@@ -35,6 +35,20 @@ TEST(SeparatorTest, Light) {
             "down");
 }
 
+TEST(SeparatorTest, Dashed) {
+  auto element = vbox({
+      text("top"),
+      separatorDashed(),
+      text("down"),
+  });
+  Screen screen(4, 3);
+  Render(screen, element);
+  EXPECT_EQ(screen.ToString(),
+            "top \r\n"
+            "╍╍╍╍\r\n"
+            "down");
+}
+
 TEST(SeparatorTest, Double) {
   auto element = vbox({
       text("top"),

src/ftxui/dom/table.cpp

@@ -14,12 +14,13 @@ bool IsCell(int x, int y) {
 }
 
 // NOLINTNEXTLINE
-static std::string charset[5][6] = {
+static std::string charset[6][6] = {
-    {"┌", "┐", "└", "┘", "─", "│"},  //
+    {"┌", "┐", "└", "┘", "─", "│"}, // LIGHT
-    {"┏", "┓", "┗", "┛", "━", "┃"},  //
+    {"┏", "┓", "┗", "┛", "╍", "╏"}, // DASHED
-    {"╔", "╗", "╚", "╝", "═", "║"},  //
+    {"┏", "┓", "┗", "┛", "━", "┃"}, // HEAVY
-    {"╭", "╮", "╰", "╯", "─", "│"},  //
+    {"╔", "╗", "╚", "╝", "═", "║"}, // DOUBLE
-    {" ", " ", " ", " ", " ", " "},  //
+    {"╭", "╮", "╰", "╯", "─", "│"}, // ROUNDED
+    {" ", " ", " ", " ", " ", " "}, // EMPTY
 };
 
 int Wrap(int input, int modulo) {

src/ftxui/screen/screen.cpp

@@ -154,9 +154,11 @@ struct TileEncoding {
 const std::map<std::string, TileEncoding> tile_encoding = { // NOLINT
     {"─", {1, 0, 1, 0, 0}},
     {"━", {2, 0, 2, 0, 0}},
+    {"╍", {2, 0, 2, 0, 0}},
 
     {"│", {0, 1, 0, 1, 0}},
     {"┃", {0, 2, 0, 2, 0}},
+    {"╏", {0, 2, 0, 2, 0}},
 
     {"┌", {0, 0, 1, 1, 0}},
     {"┍", {0, 0, 2, 1, 0}},