Skip to content

Commit

Permalink
fix: boundingRect.x of text is incorrect when overflow: 'truncate'. C…
Browse files Browse the repository at this point in the history
…lose apache/echarts#18306 . And #1091 located the problematic code successfully but the fix was not entirely correct.
  • Loading branch information
100pah committed Nov 16, 2024
1 parent e4766d8 commit f7cf14f
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 64 deletions.
2 changes: 1 addition & 1 deletion src/graphic/Text.ts
Original file line number Diff line number Diff line change
Expand Up @@ -602,7 +602,7 @@ class ZRText extends Displayable<TextProps> implements GroupLike {

if (fixedBoundingRect) {
el.setBoundingRect(new BoundingRect(
adjustTextX(subElStyle.x, style.width, subElStyle.textAlign as TextAlign),
adjustTextX(subElStyle.x, contentWidth, subElStyle.textAlign as TextAlign),
adjustTextY(subElStyle.y, calculatedLineHeight, subElStyle.textBaseline as TextVerticalAlign),
/**
* Text boundary should be the real text width.
Expand Down
128 changes: 65 additions & 63 deletions test/text-overflow.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,79 +24,90 @@
var zr = zrender.init(document.getElementById('main'), {
renderer: window.__ZRENDER__DEFAULT__RENDERER__
});

const config = {
search: '',
width: 400,
width: 200,
height: 400,
fontSize: 13,
fixedLineHeight: false,
lineHeight: 14,
rich: true,
breakAll: false
overflow: 'break',
lineOverflow: 'truncate',
align: null
}


var enText = new zrender.Text({
style: {
text: LARGE_TEXT_EN,
fontSize: config.fontSize,
width: config.width,
padding: 10,
borderColor: '#000',
borderWidth: 1,

overflow: 'break',
lineOverflow: 'truncate',
ellipsis: '…'
}
});
zr.add(enText);

var cnText = new zrender.Text({
style: {
text: LARGE_TEXT_ZH,
fontSize: config.fontSize,
width: config.width,
padding: 10,
borderColor: '#000',
borderWidth: 1,

overflow: 'break',
lineOverflow: 'truncate',
ellipsis: '…',

x: config.width + 100
}
const gui = new dat.GUI();
gui.add(config, 'search').onChange(update);
gui.add(config, 'width', 10, 300).onChange(update);
gui.add(config, 'height', 10, 1600).onChange(update);
gui.add(config, 'fontSize', 1, 30).onChange(update);
gui.add(config, 'fixedLineHeight').onChange(update);
gui.add(config, 'lineHeight', 12, 50).onChange(update);
gui.add(config, 'rich').onChange(update);
gui.add(config, 'overflow', ['break', 'breakAll', 'truncate', 'none']).onChange(update);
gui.add(config, 'lineOverflow', ['truncate', null]).onChange(update);
gui.add(config, 'align', [null, 'left', 'center', 'right']).onChange(update);

const texts = [
LARGE_TEXT_EN,
LARGE_TEXT_ZH,
'abcde',
'红黄蓝'
];
const textElementList = [];
texts.forEach(text => {
var el = new zrender.Text({
style: {
text: text,
}
});
zr.add(el);
textElementList.push(el);
});
zr.add(cnText);

const TEXTS = [LARGE_TEXT_EN, LARGE_TEXT_ZH];
function update() {
enText.style.width = cnText.style.width = config.width;
enText.style.height = cnText.style.height = config.height;

enText.style.overflow = config.breakAll ? 'breakAll' : 'break';

cnText.style.x = config.width + 100;

enText.style.rich = cnText.style.rich = config.rich ? {
highlight: {
// padding: 4,
backgroundColor: 'yellow',
fontSize: 20
let lastTextElement = null;

textElementList.forEach((text, idx) => {

text.style.padding = 10;
text.style.borderColor = '#000';
text.style.borderWidth = 1;
text.style.ellipsis = '…';

text.style.fontSize = config.fontSize;
text.style.width = config.width;
text.style.height = config.height;
text.style.overflow = config.overflow;
text.style.lineOverflow = config.lineOverflow;
text.style.align = config.align;

text.style.rich = config.rich ? {
highlight: {
// padding: 4,
backgroundColor: 'yellow',
fontSize: 20
}
} : null;

text.style.x = lastTextElement
? lastTextElement.style.x + lastTextElement.style.width + 50
: 0;
lastTextElement = text;

if (text.style.__originalText == null) {
text.style.__originalText = text.style.text;
}
} : null;

[enText, cnText].forEach((text, idx) => {
text.style.fontSize = cnText.style.fontSize = config.fontSize;

if (config.search) {
text.style.text = TEXTS[idx].replace(
text.style.text = text.style.__originalText.replace(
new RegExp(config.search, 'g'), `{highlight|${config.search}}`
);
}
else {
text.style.text = TEXTS[idx];
text.style.text = text.style.__originalText;
}

if (!config.fixedLineHeight) {
Expand All @@ -113,15 +124,6 @@
zr.refreshImmediately();
console.timeEnd('render');
}
const gui = new dat.GUI();
gui.add(config, 'search').onChange(update);
gui.add(config, 'width', 100, 700).onChange(update);
gui.add(config, 'height', 10, 1600).onChange(update);
gui.add(config, 'fontSize', 1, 30).onChange(update);
gui.add(config, 'fixedLineHeight').onChange(update);
gui.add(config, 'lineHeight', 12, 50).onChange(update);
gui.add(config, 'rich').onChange(update);
gui.add(config, 'breakAll').onChange(update);

update();
</script>
Expand Down

0 comments on commit f7cf14f

Please sign in to comment.