You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/07 13:51:00 UTC
[incubator-echarts] branch label-enhancement updated: feat(label):
optimize label auto layout when aligned horizontally or vertically
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch label-enhancement
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/label-enhancement by this push:
new 0089d9b feat(label): optimize label auto layout when aligned horizontally or vertically
0089d9b is described below
commit 0089d9b251b7c24bd9cd1687c6ae6ef44703bef0
Author: pissang <bm...@gmail.com>
AuthorDate: Sun Jun 7 21:50:20 2020 +0800
feat(label): optimize label auto layout when aligned horizontally or vertically
---
src/label/labelLayoutHelper.ts | 59 +++++++++++++++++++++++-------------------
test/label-layout.html | 7 +++--
2 files changed, 37 insertions(+), 29 deletions(-)
diff --git a/src/label/labelLayoutHelper.ts b/src/label/labelLayoutHelper.ts
index 861012d..49e0c96 100644
--- a/src/label/labelLayoutHelper.ts
+++ b/src/label/labelLayoutHelper.ts
@@ -64,8 +64,7 @@ export function prepareLayoutList(input: LabelLayoutListPrepareInput[]): LabelLa
const localRect = label.getBoundingRect();
const isAxisAligned = !transform || (transform[1] < 1e-5 && transform[2] < 1e-5);
- // Text has a default 1px stroke. Exclude this.
- const minMargin = (layoutOption.minMargin || 0) + 2.2;
+ const minMargin = layoutOption.minMargin || 0;
const globalRect = localRect.clone();
globalRect.applyTransform(transform);
globalRect.x -= minMargin / 2;
@@ -98,14 +97,31 @@ function shiftLayout(
minBound: number,
maxBound: number
) {
- if (!list.length) {
+ const len = list.length;
+
+ if (!len) {
return;
}
list.sort(function (a, b) {
- return a.label[xyDim] - b.label[xyDim];
+ return a.rect[xyDim] - b.rect[xyDim];
});
+ let lastPos = 0;
+ let delta;
+ for (let i = 0; i < len; i++) {
+ delta = list[i].rect[xyDim] - lastPos;
+ if (delta < 0) {
+ shiftForward(i, len, -delta);
+ }
+ lastPos = list[i].rect[xyDim] + list[i].rect[sizeDim];
+ }
+ // TODO bleedMargin?
+ if (maxBound < lastPos) {
+ shiftBackward(len - 1, lastPos - maxBound);
+ }
+
+
function shiftForward(start: number, end: number, delta: number) {
for (let j = start; j < end; j++) {
list[j].label[xyDim] += delta;
@@ -113,10 +129,8 @@ function shiftLayout(
const rect = list[j].rect;
rect[xyDim] += delta;
- if (j > start && j + 1 < end
- && list[j + 1].rect[xyDim] > rect[xyDim] + rect[sizeDim]
- ) {
- // Shift up so it can be more equaly distributed.
+ if (j > start && j + 1 < end && !list[j + 1].rect.intersect(rect)) {
+ // Shift the following so it can be more equaly distributed.
shiftBackward(j, delta / 2);
return;
}
@@ -127,9 +141,8 @@ function shiftLayout(
function shiftBackward(end: number, delta: number) {
for (let j = end; j >= 0; j--) {
- list[j].label[xyDim] -= delta;
-
const rect = list[j].rect;
+ list[j].label[xyDim] -= delta;
rect[xyDim] -= delta;
// const textSize = rect[sizeDim];
@@ -139,26 +152,11 @@ function shiftLayout(
list[j].label[xyDim] -= diffToMinBound;
}
- if (j > 0
- && rect[xyDim] > list[j - 1].rect[xyDim] + list[j - 1].rect[sizeDim]
- ) {
+ if (j > 0 && !rect.intersect(list[j - 1].rect)) {
break;
}
}
}
- let lastPos = 0;
- let delta;
- const len = list.length;
- for (let i = 0; i < len; i++) {
- delta = list[i].label[xyDim] - lastPos;
- if (delta < 0) {
- shiftForward(i, len, -delta);
- }
- lastPos = list[i].label[xyDim] + list[i].rect[sizeDim];
- }
- if (maxBound - lastPos < 0) {
- shiftBackward(len - 1, lastPos - maxBound);
- }
}
/**
@@ -191,14 +189,21 @@ export function hideOverlap(labelList: LabelLayoutInfo[]) {
return b.priority - a.priority;
});
+ const globalRect = new BoundingRect(0, 0, 0, 0);
+
for (let i = 0; i < labelList.length; i++) {
const labelItem = labelList[i];
- const globalRect = labelItem.rect;
const isAxisAligned = labelItem.axisAligned;
const localRect = labelItem.localRect;
const transform = labelItem.transform;
const label = labelItem.label;
const labelLine = labelItem.labelLine;
+ globalRect.copy(labelItem.rect);
+ // Add a threshold because layout may be aligned precisely.
+ globalRect.width -= 0.1;
+ globalRect.height -= 0.1;
+ globalRect.x += 0.05;
+ globalRect.y += 0.05;
let obb = labelItem.obb;
let overlapped = false;
diff --git a/test/label-layout.html b/test/label-layout.html
index f6fe7e6..72eaf1a 100644
--- a/test/label-layout.html
+++ b/test/label-layout.html
@@ -413,11 +413,15 @@ under the License.
];
option = {
- xAxis: {},
+ xAxis: {
+ splitLine: { show: false }
+ },
yAxis: {
+ splitLine: { show: false },
scale: true
},
grid: {
+ left: 100,
width: 300
},
series: [{
@@ -430,7 +434,6 @@ under the License.
labelLayout: {
x: 500,
draggable: true,
- align: 'center',
moveOverlap: 'shift-y',
// hideOverlap: true,
minMargin: 2
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org