/*
|
* Licensed to the Apache Software Foundation (ASF) under one
|
* or more contributor license agreements. See the NOTICE file
|
* distributed with this work for additional information
|
* regarding copyright ownership. The ASF licenses this file
|
* to you under the Apache License, Version 2.0 (the
|
* "License"); you may not use this file except in compliance
|
* with the License. You may obtain a copy of the License at
|
*
|
* http://www.apache.org/licenses/LICENSE-2.0
|
*
|
* Unless required by applicable law or agreed to in writing,
|
* software distributed under the License is distributed on an
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
* KIND, either express or implied. See the License for the
|
* specific language governing permissions and limitations
|
* under the License.
|
*/
|
|
import ZRText from 'zrender/src/graphic/Text';
|
import { LabelLayoutOption } from '../util/types';
|
import { BoundingRect, OrientedBoundingRect, Polyline } from '../util/graphic';
|
import type Element from 'zrender/src/Element';
|
|
interface LabelLayoutListPrepareInput {
|
label: ZRText
|
labelLine: Polyline
|
computedLayoutOption: LabelLayoutOption
|
priority: number
|
defaultAttr: {
|
ignore: boolean
|
labelGuideIgnore: boolean
|
}
|
}
|
|
export interface LabelLayoutInfo {
|
label: ZRText
|
labelLine: Polyline
|
priority: number
|
rect: BoundingRect // Global rect
|
localRect: BoundingRect
|
obb?: OrientedBoundingRect // Only available when axisAligned is true
|
axisAligned: boolean
|
layoutOption: LabelLayoutOption
|
defaultAttr: {
|
ignore: boolean
|
labelGuideIgnore: boolean
|
}
|
transform: number[]
|
}
|
|
export function prepareLayoutList(input: LabelLayoutListPrepareInput[]): LabelLayoutInfo[] {
|
const list: LabelLayoutInfo[] = [];
|
|
for (let i = 0; i < input.length; i++) {
|
const rawItem = input[i];
|
if (rawItem.defaultAttr.ignore) {
|
continue;
|
}
|
|
const label = rawItem.label;
|
const transform = label.getComputedTransform();
|
// NOTE: Get bounding rect after getComputedTransform, or label may not been updated by the host el.
|
const localRect = label.getBoundingRect();
|
const isAxisAligned = !transform || (transform[1] < 1e-5 && transform[2] < 1e-5);
|
|
const minMargin = label.style.margin || 0;
|
const globalRect = localRect.clone();
|
globalRect.applyTransform(transform);
|
globalRect.x -= minMargin / 2;
|
globalRect.y -= minMargin / 2;
|
globalRect.width += minMargin;
|
globalRect.height += minMargin;
|
|
const obb = isAxisAligned ? new OrientedBoundingRect(localRect, transform) : null;
|
|
list.push({
|
label,
|
labelLine: rawItem.labelLine,
|
rect: globalRect,
|
localRect,
|
obb,
|
priority: rawItem.priority,
|
defaultAttr: rawItem.defaultAttr,
|
layoutOption: rawItem.computedLayoutOption,
|
axisAligned: isAxisAligned,
|
transform
|
});
|
}
|
return list;
|
}
|
|
function shiftLayout(
|
list: Pick<LabelLayoutInfo, 'rect' | 'label'>[],
|
xyDim: 'x' | 'y',
|
sizeDim: 'width' | 'height',
|
minBound: number,
|
maxBound: number,
|
balanceShift: boolean
|
) {
|
const len = list.length;
|
|
if (len < 2) {
|
return;
|
}
|
|
list.sort(function (a, b) {
|
return a.rect[xyDim] - b.rect[xyDim];
|
});
|
|
let lastPos = 0;
|
let delta;
|
let adjusted = false;
|
|
const shifts = [];
|
let totalShifts = 0;
|
for (let i = 0; i < len; i++) {
|
const item = list[i];
|
const rect = item.rect;
|
delta = rect[xyDim] - lastPos;
|
if (delta < 0) {
|
// shiftForward(i, len, -delta);
|
rect[xyDim] -= delta;
|
item.label[xyDim] -= delta;
|
adjusted = true;
|
}
|
const shift = Math.max(-delta, 0);
|
shifts.push(shift);
|
totalShifts += shift;
|
|
lastPos = rect[xyDim] + rect[sizeDim];
|
}
|
if (totalShifts > 0 && balanceShift) {
|
// Shift back to make the distribution more equally.
|
shiftList(-totalShifts / len, 0, len);
|
}
|
|
// TODO bleedMargin?
|
const first = list[0];
|
const last = list[len - 1];
|
let minGap: number;
|
let maxGap: number;
|
updateMinMaxGap();
|
|
// If ends exceed two bounds, squeeze at most 80%, then take the gap of two bounds.
|
minGap < 0 && squeezeGaps(-minGap, 0.8);
|
maxGap < 0 && squeezeGaps(maxGap, 0.8);
|
updateMinMaxGap();
|
takeBoundsGap(minGap, maxGap, 1);
|
takeBoundsGap(maxGap, minGap, -1);
|
|
// Handle bailout when there is not enough space.
|
updateMinMaxGap();
|
|
if (minGap < 0) {
|
squeezeWhenBailout(-minGap);
|
}
|
if (maxGap < 0) {
|
squeezeWhenBailout(maxGap);
|
}
|
|
function updateMinMaxGap() {
|
minGap = first.rect[xyDim] - minBound;
|
maxGap = maxBound - last.rect[xyDim] - last.rect[sizeDim];
|
}
|
|
function takeBoundsGap(gapThisBound: number, gapOtherBound: number, moveDir: 1 | -1) {
|
if (gapThisBound < 0) {
|
// Move from other gap if can.
|
const moveFromMaxGap = Math.min(gapOtherBound, -gapThisBound);
|
if (moveFromMaxGap > 0) {
|
shiftList(moveFromMaxGap * moveDir, 0, len);
|
const remained = moveFromMaxGap + gapThisBound;
|
if (remained < 0) {
|
squeezeGaps(-remained * moveDir, 1);
|
}
|
}
|
else {
|
squeezeGaps(-gapThisBound * moveDir, 1);
|
}
|
}
|
}
|
|
function shiftList(delta: number, start: number, end: number) {
|
if (delta !== 0) {
|
adjusted = true;
|
}
|
for (let i = start; i < end; i++) {
|
const item = list[i];
|
const rect = item.rect;
|
rect[xyDim] += delta;
|
item.label[xyDim] += delta;
|
}
|
}
|
|
// Squeeze gaps if the labels exceed margin.
|
function squeezeGaps(delta: number, maxSqeezePercent: number) {
|
const gaps: number[] = [];
|
let totalGaps = 0;
|
for (let i = 1; i < len; i++) {
|
const prevItemRect = list[i - 1].rect;
|
const gap = Math.max(list[i].rect[xyDim] - prevItemRect[xyDim] - prevItemRect[sizeDim], 0);
|
gaps.push(gap);
|
totalGaps += gap;
|
}
|
if (!totalGaps) {
|
return;
|
}
|
|
const squeezePercent = Math.min(Math.abs(delta) / totalGaps, maxSqeezePercent);
|
|
if (delta > 0) {
|
for (let i = 0; i < len - 1; i++) {
|
// Distribute the shift delta to all gaps.
|
const movement = gaps[i] * squeezePercent;
|
// Forward
|
shiftList(movement, 0, i + 1);
|
}
|
}
|
else {
|
// Backward
|
for (let i = len - 1; i > 0; i--) {
|
// Distribute the shift delta to all gaps.
|
const movement = gaps[i - 1] * squeezePercent;
|
shiftList(-movement, i, len);
|
}
|
}
|
}
|
|
/**
|
* Squeeze to allow overlap if there is no more space available.
|
* Let other overlapping strategy like hideOverlap do the job instead of keep exceeding the bounds.
|
*/
|
function squeezeWhenBailout(delta: number) {
|
const dir = delta < 0 ? -1 : 1;
|
delta = Math.abs(delta);
|
const moveForEachLabel = Math.ceil(delta / (len - 1));
|
|
for (let i = 0; i < len - 1; i++) {
|
if (dir > 0) {
|
// Forward
|
shiftList(moveForEachLabel, 0, i + 1);
|
}
|
else {
|
// Backward
|
shiftList(-moveForEachLabel, len - i - 1, len);
|
}
|
|
delta -= moveForEachLabel;
|
|
if (delta <= 0) {
|
return;
|
}
|
}
|
}
|
|
return adjusted;
|
}
|
|
/**
|
* Adjust labels on x direction to avoid overlap.
|
*/
|
export function shiftLayoutOnX(
|
list: Pick<LabelLayoutInfo, 'rect' | 'label'>[],
|
leftBound: number,
|
rightBound: number,
|
// If average the shifts on all labels and add them to 0
|
// TODO: Not sure if should enable it.
|
// Pros: The angle of lines will distribute more equally
|
// Cons: In some layout. It may not what user wanted. like in pie. the label of last sector is usually changed unexpectedly.
|
balanceShift?: boolean
|
): boolean {
|
return shiftLayout(list, 'x', 'width', leftBound, rightBound, balanceShift);
|
}
|
|
/**
|
* Adjust labels on y direction to avoid overlap.
|
*/
|
export function shiftLayoutOnY(
|
list: Pick<LabelLayoutInfo, 'rect' | 'label'>[],
|
topBound: number,
|
bottomBound: number,
|
// If average the shifts on all labels and add them to 0
|
balanceShift?: boolean
|
): boolean {
|
return shiftLayout(list, 'y', 'height', topBound, bottomBound, balanceShift);
|
}
|
|
export function hideOverlap(labelList: LabelLayoutInfo[]) {
|
const displayedLabels: LabelLayoutInfo[] = [];
|
|
// TODO, render overflow visible first, put in the displayedLabels.
|
labelList.sort(function (a, b) {
|
return b.priority - a.priority;
|
});
|
|
const globalRect = new BoundingRect(0, 0, 0, 0);
|
|
function hideEl(el: Element) {
|
if (!el.ignore) {
|
// Show on emphasis.
|
const emphasisState = el.ensureState('emphasis');
|
if (emphasisState.ignore == null) {
|
emphasisState.ignore = false;
|
}
|
}
|
|
el.ignore = true;
|
}
|
|
for (let i = 0; i < labelList.length; i++) {
|
const labelItem = labelList[i];
|
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;
|
for (let j = 0; j < displayedLabels.length; j++) {
|
const existsTextCfg = displayedLabels[j];
|
// Fast rejection.
|
if (!globalRect.intersect(existsTextCfg.rect)) {
|
continue;
|
}
|
|
if (isAxisAligned && existsTextCfg.axisAligned) { // Is overlapped
|
overlapped = true;
|
break;
|
}
|
|
if (!existsTextCfg.obb) { // If self is not axis aligned. But other is.
|
existsTextCfg.obb = new OrientedBoundingRect(existsTextCfg.localRect, existsTextCfg.transform);
|
}
|
|
if (!obb) { // If self is axis aligned. But other is not.
|
obb = new OrientedBoundingRect(localRect, transform);
|
}
|
|
if (obb.intersect(existsTextCfg.obb)) {
|
overlapped = true;
|
break;
|
}
|
}
|
|
// TODO Callback to determine if this overlap should be handled?
|
if (overlapped) {
|
hideEl(label);
|
labelLine && hideEl(labelLine);
|
}
|
else {
|
label.attr('ignore', labelItem.defaultAttr.ignore);
|
labelLine && labelLine.attr('ignore', labelItem.defaultAttr.labelGuideIgnore);
|
|
displayedLabels.push(labelItem);
|
}
|
}
|
}
|
