183 lines
4.7 KiB
JavaScript
183 lines
4.7 KiB
JavaScript
/******************************************************************
|
|
* Copyright(C) 2019 - 2020 Nx Studio
|
|
*
|
|
* 视图绑定组件--文本
|
|
*
|
|
* 2018.05.18
|
|
******************************************************************/
|
|
|
|
const VBBase = require( "nx.vb.base" );
|
|
|
|
// 格式化前缀的作用
|
|
const FormatTypes = cc.Enum( {
|
|
Format : 0, // KEY = format( 前缀, 改变值 )
|
|
Append : 1, // KEY = 前缀+改变值
|
|
P2Percent : 2, // KEY = 小数化为百分比文本
|
|
Rect : 3, // KEY = 区域
|
|
Vec2 : 4, // KEY = 二维向量
|
|
Dimension : 5, // KEY = 尺寸
|
|
RC : 6, // KEY = 行列
|
|
});
|
|
|
|
cc.Class( {
|
|
|
|
extends: VBBase,
|
|
|
|
properties: {
|
|
|
|
bindKey: {
|
|
default : "",
|
|
displayName : "参数名",
|
|
},
|
|
|
|
fmtText: {
|
|
default : "",
|
|
displayName : "格式化KEY",
|
|
},
|
|
|
|
fmtType: {
|
|
default : 0,
|
|
type : FormatTypes,
|
|
displayName : "格式化类型",
|
|
},
|
|
|
|
keyEmpty: {
|
|
default : "",
|
|
displayName : "空占位",
|
|
},
|
|
|
|
maxWidth: {
|
|
default : 10,
|
|
displayName : "宽度限制",
|
|
tooltip : "汉字占2宽度,-1不限制"
|
|
},
|
|
|
|
},
|
|
|
|
// 编辑器特性
|
|
editor: {
|
|
|
|
// 允许当前组件在编辑器模式下运行
|
|
executeInEditMode: false,
|
|
|
|
// requireComponent 参数用来指定当前组件的依赖组件
|
|
requireComponent: cc.Label,
|
|
|
|
// 当本组件添加到节点上后，禁止同类型（含子类）的组件再添加到同一个节点，防止逻辑发生冲突
|
|
disallowMultiple: true,
|
|
|
|
// menu 用来将当前组件添加到组件菜单中，方便用户查找
|
|
menu: "Nx/视图|文本属性",
|
|
},
|
|
|
|
// 设定目标
|
|
setTarget: function( _tar, _key, _fmt ) {
|
|
|
|
this._super( _tar );
|
|
|
|
this.bindKey = _key || this.bindKey;
|
|
this.fmtText = _fmt || this.fmtText;
|
|
|
|
// 目标监听
|
|
if( this.target &&
|
|
nx.dt.strNEmpty( this.bindKey ) ) {
|
|
this.target.vbind( this, [
|
|
[ this.bindKey, this._onValueChanged.bind( this ) ]
|
|
] ) ;
|
|
return;
|
|
}
|
|
|
|
// 空默认
|
|
this._setText( nx.text.getKey( this.keyEmpty ) );
|
|
|
|
},
|
|
|
|
// 改变通知
|
|
_onValueChanged:function( _now, _last ) {
|
|
|
|
let text = "";
|
|
|
|
// 根据格式指定区别处理
|
|
switch( this.fmtType ) {
|
|
|
|
// 小数转换为百分比输出
|
|
case FormatTypes.P2Percent: {
|
|
|
|
if( nx.dt.numGood( _now ) ) {
|
|
text = Math.floor( _now * 100 ) + "%";
|
|
}
|
|
|
|
} break;
|
|
|
|
// KEY = 区域
|
|
case FormatTypes.Rect: {
|
|
text = cc.js.formatStr( "%s %s %s %s",
|
|
Math.floor( _now.x ),
|
|
Math.floor( _now.y ),
|
|
Math.floor( _now.w ),
|
|
Math.floor( _now.h ) );
|
|
} break;
|
|
|
|
// KEY = 二维向量
|
|
case FormatTypes.Vec2: {
|
|
text = cc.js.formatStr( "X:%s Y:%s",
|
|
Math.floor( _now.x ),
|
|
Math.floor( _now.y ) );
|
|
} break;
|
|
|
|
// KEY = 尺寸
|
|
case FormatTypes.Dimension: {
|
|
text = cc.js.formatStr( "W:%s H:%s",
|
|
Math.floor( _now.width ),
|
|
Math.floor( _now.height ) );
|
|
} break;
|
|
|
|
// KEY = 行列
|
|
case FormatTypes.RC: {
|
|
text = cc.js.formatStr( "R:%s C:%s",
|
|
Math.floor( _now.x ),
|
|
Math.floor( _now.y ) );
|
|
} break;
|
|
|
|
default: {
|
|
text = _now + "";
|
|
} break;
|
|
|
|
}
|
|
|
|
// 空展示
|
|
if( nx.dt.strEmpty( text ) ) {
|
|
this._setText( nx.text.getKey( this.keyEmpty ) );
|
|
return;
|
|
}
|
|
|
|
// 格式化前缀解析
|
|
if( nx.dt.strNEmpty( this.fmtText ) ) {
|
|
|
|
if( this.fmtType == FormatTypes.Append ) {
|
|
var fmt = this.fmtText + _now;
|
|
text = nx.text.getKey( fmt );
|
|
}
|
|
else {
|
|
text = nx.text.format( this.fmtText, _now );
|
|
}
|
|
|
|
}
|
|
|
|
this._setText( text );
|
|
},
|
|
|
|
// 文本设置
|
|
_setText: function( _text ) {
|
|
|
|
// 宽度限制
|
|
if( this.maxWidth > 0 &&
|
|
nx.dt.strNEmpty( _text ) ) {
|
|
_text = nx.dt.strCut( _text, this.maxWidth );
|
|
}
|
|
|
|
nx.gui.setString( this.node, "", _text );
|
|
},
|
|
|
|
} );
|