118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
import TextLine from "./TextLine.js";
|
|
import TextAlignment from "./TextAlignment.js";
|
|
import UserInterfaceElement from "./UserInterfaceElement.js";
|
|
|
|
export default class TextBox extends UserInterfaceElement
|
|
{
|
|
constructor(text, width, context)
|
|
{
|
|
super();
|
|
this.text = text;
|
|
this.width = width;
|
|
this.colorText = 'red';
|
|
this.colorShadow = 'black';
|
|
this.colorBorder = 'black';
|
|
this.hasShadow = true;
|
|
this.hasBorder = true;
|
|
this.font = 'Silkscreen';
|
|
this.textSize = 48;
|
|
this.alignment = TextAlignment.CENTER;
|
|
this.verticalAlignment = TextAlignment.BOTTOM;
|
|
this.lines = [];
|
|
|
|
this.updateLines(width, context);
|
|
}
|
|
|
|
updateLines(width, context)
|
|
{
|
|
context.font = this.textSize + 'px ' + this.font;
|
|
this.lines = this.getLinesForWidth(this.text, context, width)
|
|
}
|
|
|
|
animate(msForChar = 100, timeoutMilliseconds = 0)
|
|
{
|
|
let milliseconds = 0;
|
|
|
|
setTimeout(
|
|
() => {
|
|
for (let l = 0; l < this.lines.length; l++) {
|
|
this.lines[l].chars = 0;
|
|
setTimeout(
|
|
() => {
|
|
this.lines[l].animate(msForChar);
|
|
}, milliseconds
|
|
);
|
|
|
|
milliseconds += this.lines[l].text.length * msForChar;
|
|
}
|
|
}, timeoutMilliseconds
|
|
);
|
|
}
|
|
|
|
draw(context, x = null, y = null)
|
|
{
|
|
if (x === null && y === null) {
|
|
x = this.position.x;
|
|
y = this.position.y;
|
|
}
|
|
|
|
if (this.verticalAlignment === TextAlignment.BOTTOM) {
|
|
let currentHeight = y;
|
|
|
|
for (let l = this.lines.length - 1; l >= 0; l--) {
|
|
if (this.lines[l].chars > 0) {
|
|
this.lines[l].draw(context, x, currentHeight);
|
|
currentHeight -= this.textSize;
|
|
}
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
this.lines.forEach(
|
|
(line, index) => {
|
|
line.draw(context, x, y + this.textSize * index);
|
|
}
|
|
)
|
|
}
|
|
|
|
getLinesForWidth(text, context, width)
|
|
{
|
|
let words = text.split(' ');
|
|
let lines = [];
|
|
let buffer = words[0];
|
|
|
|
for (let w = 1; w < words.length; w++) {
|
|
let bufferNew = buffer === '' ? words[w] : buffer + ' ' + words[w];
|
|
|
|
if (context.measureText(bufferNew).width > width) {
|
|
lines.push(this.getLine(buffer));
|
|
bufferNew = words[w];
|
|
}
|
|
|
|
buffer = bufferNew;
|
|
}
|
|
|
|
if (buffer !== '') {
|
|
lines.push(this.getLine(buffer));
|
|
}
|
|
|
|
return lines;
|
|
}
|
|
|
|
getLine(text)
|
|
{
|
|
let line = new TextLine(text);
|
|
|
|
line.font = this.font;
|
|
line.size = this.textSize;
|
|
line.colorText = this.colorText;
|
|
line.colorShadow = this.colorShadow;
|
|
line.alignment = this.alignment;
|
|
line.hasShadow = this.hasShadow;
|
|
line.hasBorder = this.hasBorder;
|
|
line.colorBorder = this.colorBorder;
|
|
|
|
return line;
|
|
}
|
|
} |