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

fix: web text maxLines

Browse Source
This commit is contained in:
钱泽虹 2023-09-12 14:33:36 +08:00 committed by osborn
parent 6d8e3bb9df
commit 49b9232f92
3 changed files with 78 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7267,6 +7267,8 @@ var doric_web = (function (exports, axios, sandbox) {
break; break;
case "maxLines": case "maxLines":
this.maxLines = prop; this.maxLines = prop;
this.view.style.whiteSpace = 'normal';
this.view.style.overflow = 'hidden';
break; break;
case "maxWidth": case "maxWidth":
if (prop) { if (prop) {
@ -7297,32 +7299,51 @@ var doric_web = (function (exports, axios, sandbox) {
} }
configSize() { configSize() {
if (this.maxLines > 0) { if (this.maxLines > 0) {
const currentHeight = this.view.offsetHeight;
const computedStyle = window.getComputedStyle(this.view); const computedStyle = window.getComputedStyle(this.view);
const maxHeight = this.getLineHeight(computedStyle) * this.maxLines; const currentContentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom);
if (currentHeight > maxHeight) { let maxHeight = this.maxLinesHeight(computedStyle);
this.view.style.height = toPixelString(maxHeight); if (currentContentHeight > 0) {
this.view.style.alignItems = "flex-start"; maxHeight = Math.min(maxHeight, Math.ceil(currentContentHeight));
this.view.style.overflow = 'hidden'; }
this.textElement.innerText = this.getTruncationText(computedStyle, maxHeight); if (this.computedHeight(computedStyle) > maxHeight) {
this.textElement.innerText = this.truncationText(computedStyle, maxHeight);
} }
} }
} }
getLineHeight(style) { computedHeight(style) {
const tempEle = document.createElement('div'); const tempEle = document.createElement('div');
tempEle.style.cssText = style.cssText; tempEle.style.font = style.font;
tempEle.textContent = 'Test'; tempEle.textContent = this.textElement.innerText;
tempEle.style.whiteSpace = 'normal';
tempEle.style.width = this.view.style.width;
document.body.appendChild(tempEle); document.body.appendChild(tempEle);
const lineHeight = tempEle.offsetHeight; const height = tempEle.offsetHeight;
document.body.removeChild(tempEle); document.body.removeChild(tempEle);
return lineHeight; return height;
} }
getTruncationText(style, maxHeight) { maxLinesHeight(style) {
let text = '';
for (let i = 0; i < this.maxLines; i++) {
text += 'Test测试😊\n';
}
const tempEle = document.createElement('div');
tempEle.style.font = style.font;
tempEle.textContent = text;
tempEle.style.width = this.view.style.width;
tempEle.style.whiteSpace = 'pre';
tempEle.style.overflow = 'hidden';
document.body.appendChild(tempEle);
const height = tempEle.offsetHeight;
document.body.removeChild(tempEle);
return height;
}
truncationText(style, maxHeight) {
const originalText = this.textElement.innerText; const originalText = this.textElement.innerText;
let start = 0, end = originalText.length; let start = 0, end = originalText.length;
const tempEle = document.createElement('div'); const tempEle = document.createElement('div');
tempEle.style.cssText = style.cssText; tempEle.style.font = style.font;
tempEle.style.alignItems = "flex-start"; tempEle.style.whiteSpace = 'normal';
this.view.style.overflow = 'hidden';
tempEle.style.width = this.view.style.width; tempEle.style.width = this.view.style.width;
document.body.appendChild(tempEle); document.body.appendChild(tempEle);
while (start <= end) { while (start <= end) {

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

File diff suppressed because one or more lines are too long

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

@ -1,4 +1,4 @@
import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString } from "./DoricViewNode"; import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString, pixelString2Number } from "./DoricViewNode";
import { toRGBAString } from "../utils/color"; import { toRGBAString } from "../utils/color";
export class DoricTextNode extends DoricViewNode { export class DoricTextNode extends DoricViewNode {
@ -68,6 +68,8 @@ export class DoricTextNode extends DoricViewNode {
break break
case "maxLines": case "maxLines":
this.maxLines = prop as number this.maxLines = prop as number
this.view.style.whiteSpace = 'normal'
this.view.style.overflow = 'hidden'
break break
case "maxWidth": case "maxWidth":
if (prop) { if (prop) {
@ -98,35 +100,56 @@ export class DoricTextNode extends DoricViewNode {
configSize() { configSize() {
if (this.maxLines > 0) { if (this.maxLines > 0) {
const currentHeight = this.view.offsetHeight
const computedStyle = window.getComputedStyle(this.view) const computedStyle = window.getComputedStyle(this.view)
const maxHeight = this.getLineHeight(computedStyle) * this.maxLines const currentContentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom)
if (currentHeight > maxHeight) { let maxHeight = this.maxLinesHeight(computedStyle)
this.view.style.height = toPixelString(maxHeight) if (currentContentHeight > 0) {
this.view.style.alignItems = "flex-start" maxHeight = Math.min(maxHeight, Math.ceil(currentContentHeight))
this.view.style.overflow = 'hidden' }
this.textElement.innerText = this.getTruncationText(computedStyle, maxHeight) if (this.computedHeight(computedStyle) > maxHeight) {
this.textElement.innerText = this.truncationText(computedStyle, maxHeight)
} }
} }
} }
getLineHeight(style:CSSStyleDeclaration) { computedHeight(style:CSSStyleDeclaration) {
const tempEle = document.createElement('div') const tempEle = document.createElement('div')
tempEle.style.cssText = style.cssText tempEle.style.font = style.font
tempEle.textContent = 'Test' tempEle.textContent = this.textElement.innerText
document.body.appendChild(tempEle); tempEle.style.whiteSpace = 'normal'
const lineHeight = tempEle.offsetHeight; tempEle.style.width = this.view.style.width
document.body.removeChild(tempEle); document.body.appendChild(tempEle)
return lineHeight;
const height = tempEle.offsetHeight
document.body.removeChild(tempEle)
return height
} }
getTruncationText(style:CSSStyleDeclaration, maxHeight:number) { maxLinesHeight(style:CSSStyleDeclaration) {
let text = ''
for (let i = 0; i < this.maxLines; i++) {
text += 'Test测试😊\n'
}
const tempEle = document.createElement('div')
tempEle.style.font = style.font
tempEle.textContent = text
tempEle.style.width = this.view.style.width
tempEle.style.whiteSpace = 'pre';
tempEle.style.overflow = 'hidden';
document.body.appendChild(tempEle)
const height = tempEle.offsetHeight
document.body.removeChild(tempEle)
return height
}
truncationText(style:CSSStyleDeclaration, maxHeight:number) {
const originalText = this.textElement.innerText const originalText = this.textElement.innerText
let start = 0, end = originalText.length let start = 0, end = originalText.length
const tempEle = document.createElement('div') const tempEle = document.createElement('div')
tempEle.style.cssText = style.cssText tempEle.style.font = style.font
tempEle.style.alignItems = "flex-start" tempEle.style.whiteSpace = 'normal'
this.view.style.overflow = 'hidden'
tempEle.style.width = this.view.style.width tempEle.style.width = this.view.style.width
document.body.appendChild(tempEle); document.body.appendChild(tempEle);