tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: doric-web text support maxLines

Browse Source
This commit is contained in:
钱泽虹 2023-08-30 14:29:51 +08:00 committed by osborn
parent 704a31f80c
commit 089423126d
5 changed files with 136 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
doric-demo/src/NavigatorDemo.ts
View File

@ -20,6 +20,7 @@ class NaivgatorDemo extends Panel {
'AnimatorDemo',
'Gobang',
'NotificationDemo',
'TextDemo',
'SwitchDemo',
'SliderDemo',
'NavbarDemo',

9
doric-demo/src/TextDemo.ts
View File

@ -61,7 +61,14 @@ class TextDemo extends Panel {
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST).configHeight(LayoutSpec.JUST),
}),
text({
text: "This is normal text",
text: "This is normal text! This is normal text! This is normal text! This is normal text! This is normal text! This is normal text! ",
maxLines: 2,
backgroundColor: Color.LTGRAY,
layoutConfig:layoutConfig().configWidth(LayoutSpec.JUST).configHeight(LayoutSpec.FIT),
width:320,
border:{"width":1, "color":Color.RED},
margin:{left:15,right:17}
}),
hlayout([
text({

69
doric-web/dist/index.js vendored
View File

@ -7157,6 +7157,10 @@ var doric_web = (function (exports, axios, sandbox) {
}
class DoricTextNode extends DoricViewNode {
constructor() {
super(...arguments);
this.maxLines = 0;
}
build() {
const div = document.createElement('div');
div.style.display = "flex";
@ -7218,11 +7222,63 @@ var doric_web = (function (exports, axios, sandbox) {
break;
}
break;
case "maxLines":
this.maxLines = prop;
break;
default:
super.blendProps(v, propName, prop);
break;
}
}
layout() {
super.layout();
Promise.resolve().then(_ => {
this.configSize();
});
}
configSize() {
if (this.maxLines > 0) {
const currentHeight = this.view.offsetHeight;
const computedStyle = window.getComputedStyle(this.view);
const maxHeight = this.getLineHeight(computedStyle) * this.maxLines;
if (currentHeight > maxHeight) {
this.view.style.height = toPixelString(maxHeight);
this.view.style.alignItems = "flex-start";
this.view.style.overflow = 'hidden';
this.view.textContent = this.getTruncationText(computedStyle, maxHeight);
}
}
}
getLineHeight(style) {
const tempEle = document.createElement('div');
tempEle.style.cssText = style.cssText;
tempEle.textContent = 'Test';
document.body.appendChild(tempEle);
const lineHeight = tempEle.offsetHeight;
document.body.removeChild(tempEle);
return lineHeight;
}
getTruncationText(style, maxHeight) {
const originalText = this.view.textContent;
let start = 0, end = originalText.length;
const tempEle = document.createElement('div');
tempEle.style.cssText = style.cssText;
tempEle.style.alignItems = "flex-start";
tempEle.style.width = this.view.style.width;
document.body.appendChild(tempEle);
while (start <= end) {
const mid = Math.floor((start + end) / 2);
tempEle.textContent = originalText.slice(0, mid) + '...';
if (tempEle.offsetHeight > maxHeight) {
end = mid - 1;
}
else {
start = mid + 1;
}
}
document.body.removeChild(tempEle);
return `${originalText.slice(0, end) + '...'}`;
}
}
var ScaleType;
@ -7644,10 +7700,23 @@ var doric_web = (function (exports, axios, sandbox) {
break;
}
}
reload() {
this.reset();
const ret = this.pureCallJSResponse("renderBunchedItems", 0, this.itemCount);
ret.forEach(e => {
const viewNode = DoricViewNode.create(this.context, e.type);
viewNode.viewId = e.id;
viewNode.init(this);
viewNode.blend(e.props);
this.view.appendChild(viewNode.view);
return viewNode;
});
}
reset() {
while (this.view.lastElementChild) {
this.view.removeChild(this.view.lastElementChild);
}
this.childNodes = [];
}
onBlending() {
super.onBlending();

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

57
doric-web/src/shader/DoricTextNode.ts
View File

@ -2,6 +2,7 @@ import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelStr
import { toRGBAString } from "../utils/color";
export class DoricTextNode extends DoricViewNode {
maxLines = 0
textElement!: HTMLElement
build(): HTMLElement {
const div = document.createElement('div')
@ -61,10 +62,66 @@ export class DoricTextNode extends DoricViewNode {
break
}
break
case "maxLines":
this.maxLines = prop as number
break
default:
super.blendProps(v, propName, prop)
break
}
}
layout() {
super.layout()
Promise.resolve().then(_ => {
this.configSize()
})
}
configSize() {
if (this.maxLines > 0) {
const currentHeight = this.view.offsetHeight
const computedStyle = window.getComputedStyle(this.view)
const maxHeight = this.getLineHeight(computedStyle) * this.maxLines
if (currentHeight > maxHeight) {
this.view.style.height = toPixelString(maxHeight)
this.view.style.alignItems = "flex-start"
this.view.style.overflow = 'hidden'
this.view.textContent = this.getTruncationText(computedStyle, maxHeight)
}
}
}
getLineHeight(style:CSSStyleDeclaration) {
const tempEle = document.createElement('div')
tempEle.style.cssText = style.cssText
tempEle.textContent = 'Test'
document.body.appendChild(tempEle);
const lineHeight = tempEle.offsetHeight;
document.body.removeChild(tempEle);
return lineHeight;
}
getTruncationText(style:CSSStyleDeclaration, maxHeight:number) {
const originalText = this.view.textContent!
let start = 0, end = originalText.length
const tempEle = document.createElement('div')
tempEle.style.cssText = style.cssText
tempEle.style.alignItems = "flex-start"
tempEle.style.width = this.view.style.width
document.body.appendChild(tempEle);
while(start <= end) {
const mid = Math.floor((start + end) / 2)
tempEle.textContent = originalText.slice(0,mid) + '...'
if (tempEle.offsetHeight > maxHeight) {
end = mid - 1
} else {
start = mid + 1
}
}
document.body.removeChild(tempEle)
return `${originalText.slice(0, end) + '...'}`
}
}