|
@@ -46,7 +46,7 @@ module BABYLON.GUI {
|
|
|
|
|
|
this._textHorizontalAlignment = value;
|
|
|
this._markAsDirty();
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
public get textVerticalAlignment(): number {
|
|
|
return this._textVerticalAlignment;
|
|
@@ -59,7 +59,7 @@ module BABYLON.GUI {
|
|
|
|
|
|
this._textVerticalAlignment = value;
|
|
|
this._markAsDirty();
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
constructor(public name?: string, text: string = "") {
|
|
|
super(name);
|
|
@@ -69,7 +69,7 @@ module BABYLON.GUI {
|
|
|
|
|
|
protected _getTypeName(): string {
|
|
|
return "TextBlock";
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
private _drawText(text: string, textWidth: number, y: number, context: CanvasRenderingContext2D): void {
|
|
|
var width = this._currentMeasure.width;
|
|
@@ -87,14 +87,14 @@ module BABYLON.GUI {
|
|
|
}
|
|
|
|
|
|
context.fillText(text, this._currentMeasure.left + x, y);
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
|
|
|
context.save();
|
|
|
|
|
|
this._applyStates(context);
|
|
|
|
|
|
- if (this._processMeasures(parentMeasure, context)) {
|
|
|
+ if (this._processMeasures(parentMeasure, context)) {
|
|
|
// Render lines
|
|
|
this._renderLines(context);
|
|
|
}
|
|
@@ -103,38 +103,50 @@ module BABYLON.GUI {
|
|
|
|
|
|
protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
|
|
|
this._lines = [];
|
|
|
+ var _lines = this.text.split("\n");
|
|
|
|
|
|
if (this._textWrapping) {
|
|
|
- var words = this.text.split(' ');
|
|
|
- var line = '';
|
|
|
-
|
|
|
- var width = this._currentMeasure.width;
|
|
|
- var lineWidth = 0;
|
|
|
-
|
|
|
- for(var n = 0; n < words.length; n++) {
|
|
|
- var testLine = n > 0 ? line + " " + words[n] : words[0];
|
|
|
- var metrics = context.measureText(testLine);
|
|
|
- var testWidth = metrics.width;
|
|
|
- if (testWidth > width && n > 0) {
|
|
|
- this._lines.push({text: line, width: lineWidth});
|
|
|
- line = words[n];
|
|
|
- lineWidth = context.measureText(line).width;
|
|
|
- }
|
|
|
- else {
|
|
|
- lineWidth = testWidth;
|
|
|
- line = testLine;
|
|
|
- }
|
|
|
+ for(var _line of _lines) {
|
|
|
+ this._lines.push(this._parseLineWithTextWrapping(_line, context));
|
|
|
}
|
|
|
- this._lines.push({text: line, width: lineWidth});
|
|
|
} else {
|
|
|
- this._lines.push({text: this.text, width: context.measureText(this.text).width});
|
|
|
+ for(var _line of _lines) {
|
|
|
+ this._lines.push(this._parseLine(_line, context));
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ protected _parseLine(line: string='', context: CanvasRenderingContext2D): object {
|
|
|
+ return {text: line, width: context.measureText(line).width};
|
|
|
+ }
|
|
|
+
|
|
|
+ protected _parseLineWithTextWrapping(line: string='', context: CanvasRenderingContext2D): object {
|
|
|
+ var words = line.split(' ');
|
|
|
+ var width = this._currentMeasure.width;
|
|
|
+ var lineWidth = 0;
|
|
|
+
|
|
|
+ for(var n = 0; n < words.length; n++) {
|
|
|
+ var testLine = n > 0 ? line + " " + words[n] : words[0];
|
|
|
+ var metrics = context.measureText(testLine);
|
|
|
+ var testWidth = metrics.width;
|
|
|
+ if (testWidth > width && n > 0) {
|
|
|
+ this._lines.push({text: line, width: lineWidth});
|
|
|
+ line = words[n];
|
|
|
+ lineWidth = context.measureText(line).width;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ lineWidth = testWidth;
|
|
|
+ line = testLine;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {text: line, width: lineWidth};
|
|
|
+ }
|
|
|
+
|
|
|
protected _renderLines(context: CanvasRenderingContext2D): void {
|
|
|
var width = this._currentMeasure.width;
|
|
|
var height = this._currentMeasure.height;
|
|
|
-
|
|
|
+
|
|
|
if (!this._fontOffset) {
|
|
|
this._fontOffset = Control._GetFontOffset(context.font);
|
|
|
}
|
|
@@ -156,7 +168,7 @@ module BABYLON.GUI {
|
|
|
for (var line of this._lines) {
|
|
|
this._drawText(line.text, line.width, rootY, context);
|
|
|
rootY += this._fontOffset.height;
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
+ }
|
|
|
+}
|