/** * Created by dailer on 2019/6/19. */ import { isNumber, createWidget, extend } from "../../../core"; import { Single } from "../0.single"; export class AbstractLabel extends Single { _defaultConfig(props) { const conf = super._defaultConfig(...arguments); return extend(conf, { textAlign: "center", whiteSpace: "nowrap", // normal or nowrap textWidth: null, textHeight: null, hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, bgap: 0, highLight: false, handler: null, enableHover: props.title !== null, }); } _createJson() { const { textAlign, whiteSpace, textHeight, text, value, py, keyword, highLight, handler } = this.options; return { type: "bi.text", textAlign, whiteSpace, lineHeight: textHeight, maxWidth: "100%", text, value, py, keyword, highLight, handler, }; } render() { if (this.options.textAlign === "center") { this._createCenterEl(); } else { this._createNotCenterEl(); } } _createCenterEl() { const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options; const json = this._createJson(); json.textAlign = "left"; if (isNumber(width) && width > 0) { if (isNumber(textWidth) && textWidth > 0) { json.maxWidth = textWidth; if (isNumber(height) && height > 0) { // 1.1 createWidget({ type: "bi.center_adapt", height, columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 scrollable: whiteSpace === "normal", element: this, items: [ { el: (this.text = createWidget(json)), } ], }); return; } createWidget({ // 1.2 type: "bi.center_adapt", columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 scrollable: whiteSpace === "normal", element: this, items: [ { el: (this.text = createWidget(json)), } ], }); return; } if (whiteSpace === "normal") { // 1.3 extend(json, { hgap, vgap, lgap, rgap, tgap, bgap, }); this.text = createWidget(json); createWidget({ type: "bi.center_adapt", columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 scrollable: whiteSpace === "normal", element: this, items: [this.text], }); return; } if (isNumber(height) && height > 0) { // 1.4 this.element.css({ "line-height": BI.pixFormat(height), }); json.textAlign = textAlign; delete json.maxWidth; this.text = createWidget(extend(json, { element: this, hgap, vgap, lgap, rgap, tgap, bgap, })); return; } extend(json, { // 1.5 hgap, vgap, lgap, rgap, tgap, bgap, maxWidth: "100%", }); this.text = createWidget(json); createWidget({ type: "bi.center_adapt", columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 scrollable: whiteSpace === "normal", element: this, items: [this.text], }); return; } if (isNumber(textWidth) && textWidth > 0) { // 1.6 json.maxWidth = textWidth; createWidget({ type: "bi.center_adapt", columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 scrollable: whiteSpace === "normal", element: this, items: [ { el: (this.text = createWidget(json)), } ], }); return; } if (whiteSpace === "normal") { // 1.7 extend(json, { hgap, vgap, lgap, rgap, tgap, bgap, }); this.text = createWidget(json); createWidget({ type: "bi.center_adapt", columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 scrollable: true, element: this, items: [this.text], }); return; } if (isNumber(height) && height > 0) { // 1.8 this.element.css({ "line-height": BI.pixFormat(height), }); json.textAlign = textAlign; delete json.maxWidth; this.text = createWidget(extend(json, { element: this, hgap, vgap, lgap, rgap, tgap, bgap, })); return; } this.text = createWidget(extend(json, { hgap, vgap, lgap, rgap, tgap, bgap, })); createWidget({ type: "bi.center_adapt", columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 element: this, items: [this.text], }); } _createNotCenterEl() { const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options; const adaptLayout = "bi.vertical_adapt"; const json = this._createJson(); if (isNumber(width) && width > 0) { if (isNumber(textWidth) && textWidth > 0) { json.maxWidth = textWidth; if (isNumber(height) && height > 0) { // 2.1 createWidget({ type: adaptLayout, horizontalAlign: textAlign, columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 height, scrollable: whiteSpace === "normal", element: this, items: [ { el: (this.text = createWidget(json)), } ], }); return; } createWidget({ // 2.2 type: adaptLayout, horizontalAlign: textAlign, columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 scrollable: whiteSpace === "normal", hgap, vgap, lgap, rgap, tgap, bgap, element: this, items: [ { el: (this.text = createWidget(json)), } ], }); return; } if (isNumber(height) && height > 0) { // 2.3 if (whiteSpace !== "normal") { this.element.css({ "line-height": BI.pixFormat(height - (vgap * 2)), }); } delete json.maxWidth; this.text = createWidget(extend(json, { element: this, hgap, vgap, lgap, rgap, tgap, bgap, })); return; } json.maxWidth = width - 2 * hgap - lgap - rgap; createWidget({ // 2.4 type: adaptLayout, horizontalAlign: textAlign, columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 scrollable: whiteSpace === "normal", hgap, vgap, lgap, rgap, tgap, bgap, element: this, items: [{ el: (this.text = createWidget(json)), }], }); return; } if (isNumber(textWidth) && textWidth > 0) { json.maxWidth = textWidth; createWidget({ // 2.5 type: adaptLayout, horizontalAlign: textAlign, columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 scrollable: whiteSpace === "normal", hgap, vgap, lgap, rgap, tgap, bgap, element: this, items: [ { el: (this.text = createWidget(json)), } ], }); return; } if (isNumber(height) && height > 0) { if (whiteSpace !== "normal") { this.element.css({ "line-height": BI.pixFormat(height - (vgap * 2)), }); } delete json.maxWidth; this.text = createWidget(extend(json, { // 2.6 element: this, hgap, vgap, lgap, rgap, tgap, bgap, })); return; } this.text = createWidget(extend(json, { hgap, vgap, lgap, rgap, tgap, bgap, })); createWidget({ type: adaptLayout, horizontalAlign: textAlign, columnSize: ["auto"], // important! 让文字在flex布局下shrink为1 element: this, scrollable: whiteSpace === "normal", items: [this.text], }); } doRedMark() { this.text.doRedMark.apply(this.text, arguments); } unRedMark() { this.text.unRedMark.apply(this.text, arguments); } doHighLight() { this.text.doHighLight.apply(this.text, arguments); } unHighLight() { this.text.unHighLight.apply(this.text, arguments); } setText(v) { this.options.text = v; this.text.setText(v); } getText() { return this.options.text; } setStyle(css) { this.text.setStyle(css); } setValue(v) { super.setValue(v); if (!this.isReadOnly()) { this.options.text = v; this.text.setValue(v); } } }