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

fix: web text set default lineHeight for maxLines

Browse Source
This commit is contained in:
钱泽虹 2023-09-15 14:39:48 +08:00 committed by osborn
parent ba35172ae0
commit 067cd28bfb
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7268,7 +7268,6 @@ var doric_web = (function (exports, axios, sandbox) {
case "maxLines": case "maxLines":
this.maxLines = prop; this.maxLines = prop;
this.view.style.whiteSpace = 'normal'; this.view.style.whiteSpace = 'normal';
this.view.style.lineHeight = `${this.lineHeight()}em`;
break; break;
case "maxWidth": case "maxWidth":
if (prop) { if (prop) {
@ -7300,7 +7299,8 @@ var doric_web = (function (exports, axios, sandbox) {
configSize() { configSize() {
if (this.maxLines > 0) { if (this.maxLines > 0) {
const computedStyle = window.getComputedStyle(this.view); const computedStyle = window.getComputedStyle(this.view);
const lineHeight = this.lineHeight() * parseFloat(computedStyle.getPropertyValue('font-size')); const lineHeight = this.defaultLineHeightInPixels(computedStyle);
this.view.style.lineHeight = lineHeight + 'px';
let allowedMaxLines = this.maxLines; let allowedMaxLines = this.maxLines;
const contentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom); const contentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom);
if (contentHeight > 0) { if (contentHeight > 0) {
@ -7313,8 +7313,14 @@ var doric_web = (function (exports, axios, sandbox) {
} }
} }
} }
lineHeight() { defaultLineHeightInPixels(style) {
return 1.3; const tempEle = document.createElement('div');
tempEle.style.font = style.font;
tempEle.innerText = " ";
document.body.appendChild(tempEle);
const lineHeightInPixels = tempEle.offsetHeight;
document.body.removeChild(tempEle);
return lineHeightInPixels;
} }
originalHeight(style) { originalHeight(style) {
const tempEle = document.createElement('div'); const tempEle = document.createElement('div');

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

File diff suppressed because one or more lines are too long

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

@ -69,7 +69,6 @@ export class DoricTextNode extends DoricViewNode {
case "maxLines": case "maxLines":
this.maxLines = prop as number this.maxLines = prop as number
this.view.style.whiteSpace = 'normal' this.view.style.whiteSpace = 'normal'
this.view.style.lineHeight = `${this.lineHeight()}em`
break break
case "maxWidth": case "maxWidth":
if (prop) { if (prop) {
@ -100,8 +99,9 @@ export class DoricTextNode extends DoricViewNode {
configSize() { configSize() {
if (this.maxLines > 0) { if (this.maxLines > 0) {
const computedStyle = window.getComputedStyle(this.view) const computedStyle = window.getComputedStyle(this.view)
const lineHeight = this.lineHeight() * parseFloat(computedStyle.getPropertyValue('font-size')) const lineHeight = this.defaultLineHeightInPixels(computedStyle)
this.view.style.lineHeight = lineHeight + 'px'
let allowedMaxLines = this.maxLines let allowedMaxLines = this.maxLines
const contentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom) const contentHeight = this.view.clientHeight - pixelString2Number(computedStyle.paddingTop) - pixelString2Number(computedStyle.paddingBottom)
@ -117,8 +117,14 @@ export class DoricTextNode extends DoricViewNode {
} }
} }
lineHeight() { defaultLineHeightInPixels(style:CSSStyleDeclaration) {
return 1.3 const tempEle = document.createElement('div')
tempEle.style.font = style.font
tempEle.innerText = " "
document.body.appendChild(tempEle)
const lineHeightInPixels = tempEle.offsetHeight
document.body.removeChild(tempEle)
return lineHeightInPixels
} }
originalHeight(style:CSSStyleDeclaration) { originalHeight(style:CSSStyleDeclaration) {