Skip to content

Commit

Permalink
修复UI组件TextArea滚动条拉不到0位置导致显示不全BUG与相关显示细节的优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@LayaCharley
LayaCharley committed Jun 24, 2022
1 parent 938ad2a commit 019cd21
Showing 3 changed files with 101 additions and 101 deletions.
57 changes: 28 additions & 29 deletions src/layaAir/laya/display/Input.ts
View file
Original file line number Diff line number Diff line change
@@ -70,11 +70,11 @@ export class Input extends Text {
static TYPE_SEARCH: string = "search";

/**@private */
protected static input: HTMLInputElement;
protected static input: HTMLInputElement;
/**@private */
protected static area: HTMLTextAreaElement;
/**@private */
protected static inputElement: HTMLInputElement|HTMLTextAreaElement;
protected static inputElement: HTMLInputElement | HTMLTextAreaElement;
/**@private */
protected static inputContainer: HTMLDivElement;
/**@private */
@@ -235,7 +235,7 @@ export class Input extends Text {
/**
* 获取对输入框的引用实例。
*/
get nativeInput(): HTMLInputElement|HTMLTextAreaElement {
get nativeInput(): HTMLInputElement | HTMLTextAreaElement {
return this._multiline ? Input.area : Input.input;
}

@@ -313,14 +313,14 @@ export class Input extends Text {
Input.input.parentElement && (Input.inputContainer.removeChild(Input.input));
Input.area.parentElement && (Input.inputContainer.removeChild(Input.area));

// 安卓的安全键盘的问题；
// 如果设置type='password' 则会弹安全键盘
// 就算以后设置type='text' 还是会弹安全键盘，所以对于安卓，干脆全部重新生成
if(ILaya.Browser.onAndroid){
  Input.input = Input.inputElement = ILaya.Browser.createElement('input');
    Input._initInput(Input.input);
}
// 安卓的安全键盘的问题；
// 如果设置type='password' 则会弹安全键盘
// 就算以后设置type='text' 还是会弹安全键盘，所以对于安卓，干脆全部重新生成
if (ILaya.Browser.onAndroid) {
Input.input = Input.inputElement = ILaya.Browser.createElement('input');
Input._initInput(Input.input);
}

Input.inputElement = (this._multiline ? Input.area : Input.input);
Input.inputContainer.appendChild(Input.inputElement);
if (Text.RightToLeft) {
@@ -330,9 +330,9 @@ export class Input extends Text {

private _focusIn(): void {
Input.isInputting = true;
var input = this.nativeInput;
Input.input && (Input.input.type = this._type); // 设置input控件的 password
var input = this.nativeInput;

Input.input && (Input.input.type = this._type); // 设置input控件的 password

this._focus = true;

@@ -403,7 +403,7 @@ export class Input extends Text {

/**@private */
private _focusOut(): void {
if(!Input.isInputting)return;
if (!Input.isInputting) return;
Input.isInputting = false;
this._focus = false;

@@ -441,20 +441,19 @@ export class Input extends Text {
* 小游戏专用(解决键盘输入框内容和游戏输入框内容不同步的bug)
* @param value
*/
miniGameTxt(value:string)
{
super.set_color(this._originColor);
value += '';
if (!this._multiline)
value = value.replace(/\r?\n/g, '');
this._content = value;
if (value)
super.set_text(value);
else {
super.set_text(this._prompt);
super.set_color(this.promptColor);
}
}
miniGameTxt(value: string) {
super.set_color(this._originColor);
value += '';
if (!this._multiline)
value = value.replace(/\r?\n/g, '');
this._content = value;
if (value)
super.set_text(value);
else {
super.set_text(this._prompt);
super.set_color(this.promptColor);
}
}

/**@inheritDoc
* @override
104 changes: 48 additions & 56 deletions src/layaAir/laya/display/Text.ts
View file
Original file line number Diff line number Diff line change
@@ -138,7 +138,7 @@ export class Text extends Sprite {
static RightToLeft: boolean = false;

/**@private */
private _clipPoint: Point|null;
private _clipPoint: Point | null;
/**@private 表示文本内容字符串。*/
protected _text: string;
/**@private 表示文本内容是否发生改变。*/
@@ -148,15 +148,15 @@ export class Text extends Sprite {
/**@private 表示文本的高度，以像素为单位。*/
protected _textHeight: number = 0;
/**@private 存储文字行数信息。*/
protected _lines: string[]|null = [];
protected _lines: string[] | null = [];
/**@private 保存每行宽度*/
protected _lineWidths: number[]|null = [];
protected _lineWidths: number[] | null = [];
/**@private 文本的内容位置 X 轴信息。*/
protected _startX: number = 0;
/**@private 文本的内容位置X轴信息。 */
protected _startY: number = 0;
/**@private */
protected _words: WordText[]|null;
protected _words: WordText[] | null;
/**@private */
protected _charSize: any = {};
/**@private */
@@ -709,17 +709,17 @@ export class Text extends Sprite {
}

//drawBg(style);
let bitmapScale=1;
let bitmapScale = 1;
if (tCurrBitmapFont && tCurrBitmapFont.autoScaleSize) {
bitmapScale = tCurrBitmapFont.fontSize / this.fontSize;
}

if (this._height > 0) {
var tempVAlign = (this._textHeight > this._height) ? "top" : this.valign;
if (tempVAlign === "middle")
startY = (this._height - visibleLineCount /bitmapScale* lineHeight) * 0.5 + padding[0] - padding[2];
startY = (this._height - visibleLineCount / bitmapScale * lineHeight) * 0.5 + padding[0] - padding[2];
else if (tempVAlign === "bottom")
startY = this._height - visibleLineCount /bitmapScale* lineHeight - padding[2];
startY = this._height - visibleLineCount / bitmapScale * lineHeight - padding[2];
}

//渲染
@@ -754,7 +754,7 @@ export class Text extends Sprite {
var word = lines[i];
var _word: any;
if (password) {
let len = word.length;
let len = word.length;
word = "";
for (var j = len; j > 0; j--) {
word += "●";
@@ -763,16 +763,16 @@ export class Text extends Sprite {

if (word == null) word = "";
x = startX - (this._clipPoint ? this._clipPoint.x : 0);
y = startY + lineHeight * i - (this._clipPoint ? this._clipPoint.y : 0);
y = startY + 2 + lineHeight * i - (this._clipPoint ? this._clipPoint.y : 0);

this.underline && this._drawUnderline(textAlgin, x, y, i);

if (tCurrBitmapFont) {
var tWidth = this.width;
if (tCurrBitmapFont.autoScaleSize) {
tWidth = this.width * bitmapScale;
x*=bitmapScale;
y*=bitmapScale;
x *= bitmapScale;
y *= bitmapScale;
}
tCurrBitmapFont._drawText(word, this, x, y, this.align, tWidth);
} else {
@@ -867,20 +867,20 @@ export class Text extends Sprite {
nw = Math.max.apply(this, this._lineWidths);

//计算textHeight
let bmpFont = (this._style as TextStyle) .currBitmapFont;
if (bmpFont){
let bmpFont = (this._style as TextStyle).currBitmapFont;
if (bmpFont) {
let h = bmpFont.getMaxHeight();
if(bmpFont.autoScaleSize){
if (bmpFont.autoScaleSize) {
h = this.fontSize;
}
nh = this._lines.length * (h + this.leading) + this.padding[0] + this.padding[2];
}
else{
nh = this._lines.length * (this._charSize.height + this.leading) + this.padding[0] + this.padding[2];
if(this._lines.length){
nh-=this.leading; // 去掉最后一行的leading，否则多算了。
}
}
else {
nh = this._lines.length * (this._charSize.height + this.leading) + this.padding[0] + this.padding[2];
if (this._lines.length) {
nh -= this.leading; // 去掉最后一行的leading，否则多算了。
}
}
if (nw != this._textWidth || nh != this._textHeight) {
this._textWidth = nw;
this._textHeight = nh;
@@ -986,26 +986,26 @@ export class Text extends Sprite {
// 考虑性能，保留这种非方式。
charsWidth = this._getTextWidth(line.charAt(j));
wordWidth += charsWidth;
// 如果j的位置已经超出范围，要从startIndex到j找到一个能拆分的地方
// 如果j的位置已经超出范围，要从startIndex到j找到一个能拆分的地方
if (wordWidth > wordWrapWidth) {
if (this.wordWrap) {
//截断换行单词
var newLine = line.substring(startIndex, j);
// 如果最后一个是中文则直接截断，否则找空格或者-来拆分
var ccode = newLine.charCodeAt(newLine.length-1)
if (ccode<0x4e00 || ccode>0x9fa5){
//if (newLine.charCodeAt(newLine.length - 1) < 255) {
// 如果最后一个是中文则直接截断，否则找空格或者-来拆分
var ccode = newLine.charCodeAt(newLine.length - 1)
if (ccode < 0x4e00 || ccode > 0x9fa5) {
//if (newLine.charCodeAt(newLine.length - 1) < 255) {
//按照英文单词字边界截取 因此将会无视中文
//var execResult = /(?:\w|-)+$/.exec(newLine);
var execResult=/(?:[^\s\!-\/])+$/.exec(newLine);// 找不是 空格和标点符号的
var execResult = /(?:[^\s\!-\/])+$/.exec(newLine);// 找不是 空格和标点符号的
if (execResult) {
j = execResult.index + startIndex;
//此行只够容纳这一个单词 强制换行
if (execResult.index == 0)
j += newLine.length;
if (execResult.index == 0)
j += newLine.length;
//此行有多个单词 按单词分行
else
newLine = line.substring(startIndex, j);
else
newLine = line.substring(startIndex, j);
}
}

@@ -1049,10 +1049,10 @@ export class Text extends Sprite {
if (ILaya.Render.isConchApp) {
return (window as any).conchTextCanvas.measureText(text).width;;
}
else{
let ret = ILaya.Browser.context.measureText(text)||{width:100};
return ret.width;
}
else {
let ret = ILaya.Browser.context.measureText(text) || { width: 100 };
return ret.width;
}
}
}

@@ -1106,11 +1106,7 @@ export class Text extends Sprite {
set scrollX(value: number) {
if (this.overflow != Text.SCROLL || (this.textWidth < this._width || !this._clipPoint)) return;

value = value < this.padding[3] ? this.padding[3] : value;
var maxScrollX: number = this._textWidth - this._width;
value = value > maxScrollX ? maxScrollX : value;

this._clipPoint.x = value;
this._clipPoint.x = value > this._textWidth ? this._textWidth : value;
this._renderText();
}

@@ -1128,11 +1124,7 @@ export class Text extends Sprite {
set scrollY(value: number) {
if (this.overflow != Text.SCROLL || (this.textHeight < this._height || !this._clipPoint)) return;

value = value < this.padding[0] ? this.padding[0] : value;
var maxScrollY: number = this._textHeight - this._height;
value = value > maxScrollY ? maxScrollY : value;

this._clipPoint.y = value;
this._clipPoint.y = value > this._textHeight ? this._textHeight : value;
this._renderText();
}

@@ -1189,18 +1181,18 @@ export class Text extends Sprite {
}
get singleCharRender(): boolean {
return this._singleCharRender;
}
/*
scale(scaleX: number, scaleY: number, speedMode: boolean = false): Sprite {
super.scale(scaleX,scaleY, speedMode);
// 注意_words是一个数组（例如有换行）
this._words && this._words.forEach(function (w: WordText): void {
w.cleanCache();
});
this.repaint();
return this;
}
*/
}
/*
scale(scaleX: number, scaleY: number, speedMode: boolean = false): Sprite {
super.scale(scaleX,scaleY, speedMode);
// 注意_words是一个数组（例如有换行）
this._words && this._words.forEach(function (w: WordText): void {
w.cleanCache();
});
this.repaint();
return this;
}
*/
}


41 changes: 25 additions & 16 deletions src/layaAir/laya/ui/TextArea.ts
View file
Original file line number Diff line number Diff line change
@@ -128,7 +128,7 @@ export class TextArea extends TextInput {
/**
* @override
*/
set width(value: number) {
set width(value: number) {
super.width = value;
this.callLater(this.changeScroll);
}
@@ -142,7 +142,7 @@ export class TextArea extends TextInput {
/**
* @override
*/
set height(value: number) {
set height(value: number) {
super.height = value;
this.callLater(this.changeScroll);
}
@@ -228,31 +228,40 @@ export class TextArea extends TextInput {
}

private changeScroll(): void {
var vShow: boolean = this._vScrollBar && this._tf.maxScrollY > 0;
var hShow: boolean = this._hScrollBar && this._tf.maxScrollX > 0;
var showWidth: number = vShow ? this._width - this._vScrollBar.width : this._width;
var showHeight: number = hShow ? this._height - this._hScrollBar.height : this._height;
var padding: any[] = this._tf.padding || Styles.labelPadding;

this._tf.width = showWidth;
this._tf.height = showHeight;
/**垂直滚动条显示状态*/
let vShow: boolean = this._vScrollBar && this._tf.maxScrollY > 0,
/**水平滚动条显示状态*/
hShow: boolean = this._hScrollBar && this._tf.maxScrollX > 0,
/**垂直滚动条的宽 */
vScrollBarWidth: number = 0,
/**水平滚动条的高 */
hScrollBarHeight: number = 0,
/**文本边距 */
padding: any[] = this._tf.padding || Styles.labelPadding;

vShow && (vScrollBarWidth = this._vScrollBar.width);
hShow && (hScrollBarHeight = this._hScrollBar.height);

this._tf.width = this._width - vScrollBarWidth;
this._tf.height = this._height - hScrollBarHeight;

if (this._vScrollBar) {
this._vScrollBar.x = this._width - this._vScrollBar.width - padding[1];
this._vScrollBar.y = padding[0];
this._vScrollBar.height = this._height - (hShow ? this._hScrollBar.height : 0) - padding[0] - padding[2];
this._vScrollBar.height = this._height - hScrollBarHeight - padding[0] - padding[2];
this._vScrollBar.scrollSize = 1;
this._vScrollBar.thumbPercent = showHeight / Math.max(this._tf.textHeight, showHeight);
this._vScrollBar.setScroll(1, this._tf.maxScrollY, this._tf.scrollY);
this._vScrollBar.thumbPercent = this._tf.height / Math.max(this._tf.textHeight, this._tf.height);
this._vScrollBar.setScroll(0, this._tf.maxScrollY + 5, this._tf.scrollY);
this._vScrollBar.visible = vShow;
}
if (this._hScrollBar) {
this._hScrollBar.x = padding[3];
this._hScrollBar.y = this._height - this._hScrollBar.height - padding[2];
this._hScrollBar.width = this._width - (vShow ? this._vScrollBar.width : 0) - padding[1] - padding[3];
this._hScrollBar.scrollSize = Math.max(showWidth * 0.033, 1);
this._hScrollBar.thumbPercent = showWidth / Math.max(this._tf.textWidth, showWidth);
this._hScrollBar.setScroll(0, this.maxScrollX, this.scrollX);
this._hScrollBar.width = this._width - vScrollBarWidth - padding[1] - padding[3];
this._hScrollBar.scrollSize = Math.max(this._tf.width * 0.033, 1);
this._hScrollBar.thumbPercent = this._tf.width / Math.max(this._tf.textWidth, this._tf.width);
this._hScrollBar.setScroll(0, this._tf.maxScrollX + padding[1] + padding[3] + 8, this._tf.scrollX);
this._hScrollBar.visible = hShow;
}
}

0 comments on commit 019cd21

Please sign in to comment.