ftxui / dom

Table of Contents

• text
• vtext
• paragraph
• border
• window
• separator
• gauge
• graph
• Colors
  • Palette16
  • Palette256
  • TrueColor
• LinearGradient
• Style
• Layout
• Table
• Canvas

このモジュールは、ftxui::Elementの階層セットを定義します。要素はレイアウトを管理し、ターミナルの寸法変更に反応できます。このモジュールが多数の演算子を使用してシンプルなレイアウトを作成するために使用される以下の例に注目してください。

Example セクションには、例のコレクションが用意されています。

例:

namespace ftxui {
    ...
 
// ドキュメントを定義します
Element document = vbox({
  text("The window") | bold | color(Color::Blue),
  gauge(0.5)
  text("The footer")
});
 
// `ftxui::border`デコレータ関数を呼び出して、境界線を追加します。
document = border(document);
 
// パイプ演算子を使用して、別の境界線を追加します。
document = document | border.
 
// `|=`演算子を使用して、別の境界線を追加します。
document |= border
 
...
}

要素リスト

すべての要素は含まれており、対応するヘッダーファイルを含めることでアクセスできます。

#include <ftxui/dom/elements.hpp>

// Copyright 2020 Arthur Sonzogni. All rights reserved.
// このソースコードの使用は、LICENSEファイルにあるMITライセンスによって管理されています。
#ifndef FTXUI_DOM_ELEMENTS_HPP
#define FTXUI_DOM_ELEMENTS_HPP
 
#include <functional>
#include <memory>
 
#include "ftxui/dom/canvas.hpp"
#include "ftxui/dom/direction.hpp"
#include "ftxui/dom/flexbox_config.hpp"
#include "ftxui/dom/linear_gradient.hpp"
#include "ftxui/dom/node.hpp"
#include "ftxui/screen/box.hpp"
#include "ftxui/screen/color.hpp"
#include "ftxui/screen/terminal.hpp"
#include "ftxui/util/ref.hpp"
 
namespace ftxui {
class Node;
using Element = std::shared_ptr<Node>;
using Elements = std::vector<Element>;
using Decorator = std::function<Element(Element)>;
using GraphFunction = std::function<std::vector<int>(int, int)>;
 
/// @brief BorderStyleは、ターミナルUIの要素に適用できる様々なボーダースタイルを表す列挙型です。
///
/// BorderStyleは、ターミナルUIの要素に適用できる様々なボーダースタイルを表す列挙型です。
/// ウィンドウ、フレーム、セパレータなどの要素の周囲の境界線の視覚的な外観を定義するために使用されます。
/// @ingroup dom
enum BorderStyle {
  LIGHT,
  DASHED,
  HEAVY,
  DOUBLE,
  ROUNDED,
  EMPTY,
};
 
// 要素をデコレータにまとめてパイプします。
// 例えば、次の行は同等です。
// -> text("ftxui") | bold | underlined
// -> underlined(bold(text("FTXUI")))
Element operator|(Element, Decorator);
Element& operator|=(Element&, Decorator);
Elements operator|(Elements, Decorator);
Decorator operator|(Decorator, Decorator);
 
// --- ウィジェット ---
Element text(std::string text);
Element vtext(std::string text);
Element separator();
Element separatorLight();
Element separatorDashed();
Element separatorHeavy();
Element separatorDouble();
Element separatorEmpty();
Element separatorStyled(BorderStyle);
Element separator(Pixel);
Element separatorCharacter(std::string);
Element separatorHSelector(float left,
                           float right,
                           Color unselected_color,
                           Color selected_color);
Element separatorVSelector(float up,
                           float down,
                           Color unselected_color,
                           Color selected_color);
Element gauge(float progress);
Element gaugeLeft(float progress);
Element gaugeRight(float progress);
Element gaugeUp(float progress);
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);
Element borderEmpty(Element);
Decorator borderStyled(BorderStyle);
Decorator borderStyled(BorderStyle, Color);
Decorator borderStyled(Color);
Decorator borderWith(const Pixel&);
Element window(Element title, Element content, BorderStyle border = ROUNDED);
Element spinner(int charset_index, size_t image_index);
Element paragraph(const std::string& text);
Element paragraphAlignLeft(const std::string& text);
Element paragraphAlignRight(const std::string& text);
Element paragraphAlignCenter(const std::string& text);
Element paragraphAlignJustify(const std::string& text);
Element graph(GraphFunction);
Element emptyElement();
Element canvas(ConstRef<Canvas>);
Element canvas(int width, int height, std::function<void(Canvas&)>);
Element canvas(std::function<void(Canvas&)>);
 
// -- デコレーター ---
Element bold(Element);
Element dim(Element);
Element italic(Element);
Element inverted(Element);
Element underlined(Element);
Element underlinedDouble(Element);
Element blink(Element);
Element strikethrough(Element);
Decorator color(Color);
Decorator bgcolor(Color);
Decorator color(const LinearGradient&);
Decorator bgcolor(const LinearGradient&);
Element color(Color, Element);
Element bgcolor(Color, Element);
Element color(const LinearGradient&, Element);
Element bgcolor(const LinearGradient&, Element);
Decorator focusPosition(int x, int y);
Decorator focusPositionRelative(float x, float y);
Element automerge(Element child);
Decorator hyperlink(std::string link);
Element hyperlink(std::string link, Element child);
Element selectionStyleReset(Element);
Decorator selectionColor(Color foreground);
Decorator selectionBackgroundColor(Color foreground);
Decorator selectionForegroundColor(Color foreground);
Decorator selectionStyle(std::function<void(Pixel&)> style);
 
// --- レイアウト
// 水平、垂直、または積み重ねられた要素のセット。
Element hbox(Elements);
Element vbox(Elements);
Element dbox(Elements);
Element flexbox(Elements, FlexboxConfig config = FlexboxConfig());
Element gridbox(std::vector<Elements> lines);
 
Element hflow(Elements);  // Helper: default flexbox with row direction.
Element vflow(Elements);  // Helper: default flexbox with column direction.
 
// -- 柔軟性 ---
// コンテナ内で全てのスペースが使用されない場合に、残りのスペースをどのように共有するかを定義します。
Element flex(Element);         // 可能/必要に応じて拡大/縮小します。
Element flex_grow(Element);    // 可能であれば要素を拡大します。
Element flex_shrink(Element);  // 必要であれば要素を最小化します。
 
Element xflex(Element);         // X軸上で可能/必要に応じて拡大/縮小します。
Element xflex_grow(Element);    // X軸上で可能であれば要素を拡大します。
Element xflex_shrink(Element);  // X軸上で必要であれば要素を最小化します。
 
Element yflex(Element);         // Y軸上で可能/必要に応じて拡大/縮小します。
Element yflex_grow(Element);    // Y軸上で可能であれば要素を拡大します。
Element yflex_shrink(Element);  // Y軸上で必要であれば要素を最小化します。
 
Element notflex(Element);  // flex属性をリセットします。
Element filler();          // 空白の拡張可能な要素。
 
// -- サイズのオーバーライド
enum WidthOrHeight { WIDTH, HEIGHT };
enum Constraint { LESS_THAN, EQUAL, GREATER_THAN };
Decorator size(WidthOrHeight, Constraint, int value);
 
// --- フレーム ---
// フレームはスクロール可能な領域です。内部領域は外部領域よりも大きくなる可能性があります。
// フォーカスされた要素を見えるようにするために、内部領域がスクロールされます。
Element frame(Element);
Element xframe(Element);
Element yframe(Element);
Element focus(Element);
Element select(Element e);  // 非推奨 - focusのエイリアス。
 
// --- カーソル ---
// これらは`focus`に似ていますが、カーソルの形状も変更します。
Element focusCursorBlock(Element);
Element focusCursorBlockBlinking(Element);
Element focusCursorBar(Element);
Element focusCursorBarBlinking(Element);
Element focusCursorUnderline(Element);
Element focusCursorUnderlineBlinking(Element);
 
// --- その他 ---
Element vscroll_indicator(Element);
Element hscroll_indicator(Element);
Decorator reflect(Box& box);
// |element|を描画する前に、下のピクセルをクリアします。これはdboxとの組み合わせで役立ちます。
Element clear_under(Element element);
 
// --- ユーティリティ --------------------------------------------------------------------
Element hcenter(Element);
Element vcenter(Element);
Element center(Element);
Element align_right(Element);
Element nothing(Element element);
 
namespace Dimension {
Dimensions Fit(Element&, bool extend_beyond_screen = false);
}  // namespace Dimension
 
}  // namespace ftxui
 
// Make container able to take any number of children as input.
#include "ftxui/dom/take_any_args.hpp"
 
// Include old definitions using wstring.
#include "ftxui/dom/deprecated.hpp"
#endif  // FTXUI_DOM_ELEMENTS_HPP

text

最もシンプルなウィジェット。テキストを表示します。

text("I am a piece of text");

I am a piece of text.

vtext

ftxui::textと同じですが、垂直に表示されます。

コード:

vtext("HELLO");

ターミナル出力:

H
E
L
L
O

paragraph

ftxui::textに似ていますが、個々の単語はコンテナの幅に応じて複数行に折り返されます。

サンプルコード:

paragraph("A very long text")

より詳細な例については、詳細な例を参照してください。Paragraphには、以下に示す他のバリアントも含まれています。

namespace ftxui {
    Element paragraph(std::string text);
    Element paragraphAlignLeft(std::string text);
    Element paragraphAlignRight(std::string text);
    Element paragraphAlignCenter(std::string text);
    Element paragraphAlignJustify(std::string text);
}

border

要素の周囲に境界線を追加します。

コード:

border(text("The element"))

ターミナル出力:

┌───────────┐
│The element│
└───────────┘

Note

パイプ演算子を使用しても同じ動作を実現できます。

コード:

text("The element") | border

Borderには、以下に示すさまざまなスタイルもあります。

namespace ftxui {
    Element border(Element);
    Element borderLight(Element);
    Element borderHeavy(Element);
    Element borderDouble(Element);
    Element borderRounded(Element);
    Element borderEmpty(Element);
    Decorator borderStyled(BorderStyle);
    Decorator borderWith(Pixel);
}

window

ftxui::windowはftxui::borderですが、追加のヘッダーがあります。要素の周囲にウィンドウを追加するには、それをラップし、ヘッダーとして文字列を指定します。 コード:

window("The window", text("The element"))

ターミナル出力:

┌The window─┐
│The element│
└───────────┘

separator

コンテナの内容を視覚的に2つに分割する垂直/水平線を表示します。

コード:

border(
  hbox({
    text("Left"),
    separator(),
    text("Right")
  })
)

ターミナル出力:

┌────┬─────┐
│left│right│
└────┴─────┘

Separatorsには、以下に示すさまざまなフレーバーがあります。

namespace ftxui {
    Element separator(void);
    Element separatorLight();
    Element separatorHeavy();
    Element separatorDouble();
    Element separatorEmpty();
    Element separatorStyled(BorderStyle);
    Element separator(Pixel);
    Element separatorCharacter(std::string);
    Element separatorHSelector(float left,
                               float right,
                               Color background,
                               Color foreground);
    Element separatorVSelector(float up,
                               float down,
                               Color background,
                               Color foreground);
}

gauge

これは、進行状況の比率を表す視覚要素です。

コード:

border(gauge(0.5))

ターミナル出力:

┌────────────────────────────────────────────────────────────────────────────┐
│██████████████████████████████████████                                      │
└────────────────────────────────────────────────────────────────────────────┘

ゲージは、以下に示すように多くの向きで表示できます。

namespace {
    Element gauge(float ratio);
    Element gaugeLeft(float ratio);
    Element gaugeRight(float ratio);
    Element gaugeUp(float ratio);
    Element gaugeDown(float ratio);
    Element gaugeDirection(float ratio, GaugeDirection);
}

graph

参照:

Element graph(GraphFunction);

Colors

ほとんどのターミナルコンソールは、色付きのテキストと色付きの背景を表示できます。FTXUIはすべてのカラーパレットをサポートしています。

Decorator color(Color);
Decorator bgcolor(Color);

カラーギャラリー:

Palette16

ほとんどのターミナルでは、以下の色がサポートされています。

• Default
• Black
• GrayDark
• GrayLight
• White
• Blue
• BlueLight
• Cyan
• CyanLight
• Green
• GreenLight
• Magenta
• MagentaLight
• Red
• RedLight
• Yellow
• YellowLight

パイプ演算子を使用した上記の色の使用例:

text("Blue foreground") | color(Color::Blue);
text("Blue background") | bgcolor(Color::Blue);
text("Black on white") | color(Color::Black) | bgcolor(Color::White);

Palette256

256色をサポートするターミナルで。

text("HotPink") | color(Color::HotPink);

TrueColor

TrueColorをサポートするターミナルでは、24ビットRGB色空間を直接使用できます。

以下のコンストラクタを使用して、色の**RGB**または**HSV**値を指定します。

2つのコンストラクタがあります。

ftxui::Color::RGB(uint8_t red, uint8_t green, uint8_t blue);
ftxui::Color::HSV(uint8_t hue, uint8_t saturation, uint8_t value);

LinearGradient

FTXUIは線形グラデーションをサポートしています。前景または背景のいずれかです。

Decorator color(const LinearGradient&);
Decorator bgcolor(const LinearGradient&);

ftxui::LinearGradientは、角度（度数）と色の停止点のリストによって定義されます。

auto gradient = LinearGradient()
  .Angle(45)
  .AddStop(0.0, Color::Red)
  .AddStop(0.5, Color::Green)
  .AddStop(1.0, Color::Blue);

簡略化されたコンストラクタも使用できます。

LinearGradient(Color::Red, Color::Blue);

LinearGradient(45, Color::Red, Color::Blue);

デモを参照してください。

Style

色付きのテキストと色付きの背景に加えて、多くのターミナルはbold、italic、dim、underlined、inverted、blinkなどのテキスト効果をサポートしています。

Element bold(Element);
Element italic(Element);
Element dim(Element);
Element inverted(Element);
Element underlined(Element);
Element underlinedDouble(Element);
Element strikethrough(Element);
Element blink(Element);
Decorator color(Color);
Decorator bgcolor(Color);
Decorator colorgrad(LinearGradient);
Decorator bgcolorgrad(LinearGradient);

例

これらの効果を使用するには、要素を目的の効果でラップするだけです。

underlined(bold(text("This text is bold and underlined")))

または、パイプ演算子を使用して要素にチェーンすることもできます。

text("This text is bold") | bold | underlined

Layout

要素を次の方法で配置できます。

• ftxui::hboxで**水平に**
• ftxui::vboxで**垂直に**
• ftxui::gridboxで**グリッド内に**
• ftxui::flexboxを使用して**一方向に折り返し**

ftxui::hbox、ftxui::vbox、ftxui::fillerを使用した例。

ftxui::gridboxを使用した例。

flexboxを使用した例。

この例と関連するデモを確認してください。

要素はftxui::flexデコレータを使用して柔軟にすることもできます。

コード:

hbox({
  text("left") | border ,
  text("middle") | border | flex,
  text("right") | border,
});

ターミナル出力:

┌────┐┌─────────────────────────────────────────────────────┐┌─────┐
│left││middle                                               ││right│
└────┘└─────────────────────────────────────────────────────┘└─────┘

コード:

hbox({
  text("left") | border ,
  text("middle") | border | flex,
  text("right") | border | flex,
});

ターミナル出力:

┌────┐┌───────────────────────────────┐┌───────────────────────────────┐
│left││middle                         ││right                          │
└────┘└───────────────────────────────┘└───────────────────────────────┘

Table

データをきれいにテーブルのような視覚形式に簡単にフォーマットできます。

コード例:

Canvas

API <ftxui/dom/canvas.hpp>を参照してください。

auto c = Canvas(100, 100);
c.DrawPointLine(10, 10, 80, 10, Color::Red);
auto element = canvas(c);

描画はftxui::Canvasで、点字、ブロック、または単純な文字を使用して実行できます。

単純な例:

複雑な例: