作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 BoxElement
来自 blessed显示聊天记录。
使用 pushLine
添加句子.为清楚起见,天以行分隔(使用 pushLine
添加的另一个字符串)。每行与父行一样宽BoxElement
.
但是,如果调整 TUI 的大小,则该行不再适合。
我有两个问题:
/**
* 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();
关于加分,现在应该很容易实现;困难的部分是让一条比盒子宽度更长的线居中:如果我们将它分成更多的线来居中,所有的线索引(在分割的居中线旁边)都会改变并且可能变得更难跟踪它们。
关于javascript - 绘制一条总是与其父 BoxElement 一样宽的线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63249530/
我正在使用 BoxElement来自 blessed显示聊天记录。 使用 pushLine 添加句子.为清楚起见,天以行分隔(使用 pushLine 添加的另一个字符串)。每行与父行一样宽BoxEle
我是一名优秀的程序员,十分优秀!