祝福されたBoxElement
from を使用してチャット履歴を表示しています。
文はを使用して追加され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]
コメントを追加