常に親BoxElementと同じ幅の線を描画しますか？

debugcn 投稿 Dev

マーティン・カウイ：

祝福されたBoxElementfrom を使用してチャットの履歴を表示しています。

文はを使用して追加されpushLineます。明確にするために、日は行で区切られています（別の文字列はを使用して追加されていますpushLine）。各行は親と同じ幅BoxElementです。

ただし、TUIのサイズが変更されると、線は収まりません。

2つの質問があります。

その線はどのように新しい幅に適応できますか？
（ボーナスポイント）テキストをその行の中央に配置するにはどうすればよいですか？

問題の例を以下に示します。

/**
 * Example.ts
 */
import * as blessed from 'blessed';

const screen = blessed.screen({
    smartCSR: true,
    title: 'Chatr',
    dockBorders: true
});

const chatBox = blessed.box({
    parent: screen,
    title: 'Chatbox',
    top: 'top',
    left: 'center',
    height: '100%',
    width: '100%',
    border: {
        type: 'line'
    },
});
screen.append(chatBox);
screen.render();

chatBox.pushLine("This is the first line");

 // This is the separator - and will not resize with the terminal 
chatBox.pushLine("_".repeat(chatBox.width as number - 2));

chatBox.pushLine("This is a second line");
screen.render();

コードを実行するts-node ./Example.jsと、次のようにレンダリングされます。

┌────────────────────────────────────────────────────────────────────────────────────────┐
│This is a line                                                                          │
│________________________________________________________________________________________│
│This is a second line                                                                   │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
│                                                                                        │
└────────────────────────────────────────────────────────────────────────────────────────┘

端末のサイズを変更すると、次の結果が得られます。

┌──────────────────────────────────────────────────────────┐
│This is a line                                            │
│__________________________________________________________│
│______________________________                            │
│This is a second line                                     │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
│                                                          │
└──────────────────────────────────────────────────────────┘

ダニエレ・リッチ：

blessedセパレーターのようなものを実装していないようですが、各セパレーターの行インデックスを格納し、resizeイベント時にそれらを変更する単純なクラスを使用して、それらを自分で簡単に実装できます。何かのようなもの：

import * as blessed from "blessed";

// The required Separators class
class Separators {
  private box: any;
  private separators: number[] = [];

  public constructor(box: any) {
    this.box = box;

    box.on("resize", () => {
      const sep = this.sep();

      this.separators.forEach(line => {
        box.deleteLine(line);
        box.insertLine(line, sep);
      });
    });
  }

  public add(): void {
    const { box, separators } = this;

    separators.push(box.getLines().length);
    box.pushLine(this.sep());
  }

  private sep(): string {
    return "_".repeat((this.box.width as number) - 3);
  }
}

const screen = blessed.screen({
  smartCSR: true,
  title: "Chatr",
  dockBorders: true
});

const chatBox = blessed.box({
  parent: screen,
  title: "Chatbox",
  top: "top",
  left: "center",
  height: "100%",
  width: "100%",
  border: {
    type: "line"
  }
});
const sep = new Separators(chatBox); // <- the new Separator bound to the box
screen.append(chatBox);
screen.render();

chatBox.pushLine("This is the first line");

// This is the separator - and it resize with the terminal
sep.add();

chatBox.pushLine("This is a second line");
chatBox.pushLine("While this is the third line");

// This is another separator - it resize with the terminal as well
sep.add();

chatBox.pushLine("And last this is the last line");

screen.render();

ボーナスポイントについては、簡単に達成できるはずです。難しいのは、ボックスの幅よりも長いラインを中央に配置することです。中央に配置するためにさらに多くのラインに分割すると、すべてのラインインデックス（中央に分割されたラインの隣）が変更され、追跡しにくくなります。

考えられる妥協案は、ボックスの幅より短い行のみを中央揃えにして、適切な量のスペースで左パディングすることです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-04-5

コメントを追加

サインイン

分類Dev

Related 関連記事

記事