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/09 14:03:30 UTC
[incubator-echarts] branch label-enhancement updated: fix(label):
fix label animation with selected states.
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 e8605d0 fix(label): fix label animation with selected states.
e8605d0 is described below
commit e8605d0d55649db58f6f237da45830608a50a315
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 9 22:02:39 2020 +0800
fix(label): fix label animation with selected states.
---
src/echarts.ts | 14 ++++----
src/label/LabelManager.ts | 84 ++++++++++++++++++++++++++++++++++++++---------
2 files changed, 76 insertions(+), 22 deletions(-)
diff --git a/src/echarts.ts b/src/echarts.ts
index 13fc68c..31a9fb8 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -1098,6 +1098,7 @@ class ECharts extends Eventful {
labelManager.updateLayoutConfig(this._api);
labelManager.layout(this._api);
labelManager.processLabelsOverall();
+ labelManager.applyAnimation();
}
appendData(params: {
@@ -1734,6 +1735,7 @@ class ECharts extends Eventful {
labelManager.updateLayoutConfig(api);
labelManager.layout(api);
labelManager.processLabelsOverall();
+ labelManager.applyAnimation();
ecModel.eachSeries(function (seriesModel) {
const chartView = ecIns._chartsMap[seriesModel.__viewId];
@@ -1742,6 +1744,7 @@ class ECharts extends Eventful {
updateStates(seriesModel, chartView);
});
+
// If use hover layer
// TODO
// updateHoverLayerStatus(ecIns, ecModel);
@@ -1826,9 +1829,6 @@ class ECharts extends Eventful {
});
};
- interface DisplayableWithStatesHistory extends Displayable {
- __prevStates: string[]
- };
// Clear states without animation.
// TODO States on component.
function clearStates(model: ComponentModel, view: ComponentView | ChartView): void {
@@ -1847,11 +1847,11 @@ class ECharts extends Eventful {
// TODO If el is incremental.
if (el.hasState()) {
- (el as DisplayableWithStatesHistory).__prevStates = el.currentStates;
+ el.prevStates = el.currentStates;
el.clearStates();
}
- else if ((el as DisplayableWithStatesHistory).__prevStates) {
- (el as DisplayableWithStatesHistory).__prevStates = null;
+ else if (el.prevStates) {
+ el.prevStates = null;
}
});
}
@@ -1862,7 +1862,7 @@ class ECharts extends Eventful {
view.group.traverse(function (el: Displayable) {
// Only updated on changed element. In case element is incremental and don't wan't to rerender.
if (el.__dirty && el.states && el.states.emphasis) {
- const prevStates = (el as DisplayableWithStatesHistory).__prevStates;
+ const prevStates = el.prevStates;
// Restore states without animation
if (prevStates) {
el.useStates(prevStates);
diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts
index 5601d2b..9f49fe7 100644
--- a/src/label/LabelManager.ts
+++ b/src/label/LabelManager.ts
@@ -34,7 +34,8 @@ import {
LabelLayoutOption,
LabelLayoutOptionCallback,
LabelLayoutOptionCallbackParams,
- LabelLineOption
+ LabelLineOption,
+ Dictionary
} from '../util/types';
import { parsePercent } from '../util/number';
import ChartView from '../view/Chart';
@@ -44,10 +45,10 @@ import Transformable from 'zrender/src/core/Transformable';
import { updateLabelLinePoints, setLabelLineStyle } from './labelGuideHelper';
import SeriesModel from '../model/Series';
import { makeInner } from '../util/model';
-import { retrieve2, each, keys, isFunction, filter } from 'zrender/src/core/util';
+import { retrieve2, each, keys, isFunction, filter, indexOf } from 'zrender/src/core/util';
import { PathStyleProps } from 'zrender/src/graphic/Path';
import Model from '../model/Model';
-import { LabelLayoutInfo, prepareLayoutList, hideOverlap, shiftLayoutOnX, shiftLayoutOnY } from './labelLayoutHelper';
+import { prepareLayoutList, hideOverlap, shiftLayoutOnX, shiftLayoutOnY } from './labelLayoutHelper';
interface LabelDesc {
label: ZRText
@@ -117,6 +118,16 @@ const labelAnimationStore = makeInner<{
x: number,
y: number,
rotation: number
+ },
+ oldLayoutSelect?: {
+ x?: number,
+ y?: number,
+ rotation?: number
+ },
+ oldLayoutEmphasis?: {
+ x?: number,
+ y?: number,
+ rotation?: number
}
}, ZRText>();
@@ -131,6 +142,17 @@ type LabelLineOptionMixin = {
emphasis: { labelLine: LabelLineOption }
};
+function extendWithKeys(target: Dictionary<any>, source: Dictionary<any>, keys: string[]) {
+ for (let i = 0; i < keys.length; i++) {
+ const key = keys[i];
+ if (source[key] != null) {
+ target[key] = source[key];
+ }
+ }
+}
+
+const LABEL_LAYOUT_PROPS = ['x', 'y', 'rotation'];
+
class LabelManager {
private _labelList: LabelDesc[] = [];
@@ -372,22 +394,33 @@ class LabelManager {
processLabelsOverall() {
each(this._chartViewList, (chartView) => {
const seriesModel = chartView.__model;
- const animationEnabled = seriesModel.isAnimationEnabled();
const ignoreLabelLineUpdate = chartView.ignoreLabelLineUpdate;
- chartView.group.traverse((child) => {
- if (child.ignore) {
- return true; // Stop traverse descendants.
- }
+ if (!ignoreLabelLineUpdate) {
+ chartView.group.traverse((child) => {
+ if (child.ignore) {
+ return true; // Stop traverse descendants.
+ }
- if (!ignoreLabelLineUpdate) {
this._updateLabelLine(child, seriesModel);
- }
+ });
+ }
+ });
+ }
- if (animationEnabled) {
+ applyAnimation() {
+ each(this._chartViewList, (chartView) => {
+ const seriesModel = chartView.__model;
+ const animationEnabled = seriesModel.isAnimationEnabled();
+
+ if (animationEnabled) {
+ chartView.group.traverse((child) => {
+ if (child.ignore) {
+ return true; // Stop traverse descendants.
+ }
this._animateLabels(child, seriesModel);
- }
- });
+ });
+ }
});
}
@@ -442,9 +475,32 @@ class LabelManager {
}
else {
textEl.attr(oldLayout);
+
+ // Make sure the animation from is in the right status.
+ const prevStates = el.prevStates;
+ if (prevStates) {
+ if (indexOf(prevStates, 'select') >= 0) {
+ textEl.attr(layoutStore.oldLayoutSelect);
+ }
+ if (indexOf(prevStates, 'emphasis') >= 0) {
+ textEl.attr(layoutStore.oldLayoutEmphasis);
+ }
+ }
updateProps(textEl, newProps, seriesModel);
}
layoutStore.oldLayout = newProps;
+
+ if (textEl.states.select) {
+ const layoutSelect = layoutStore.oldLayoutSelect = {};
+ extendWithKeys(layoutSelect, newProps, LABEL_LAYOUT_PROPS);
+ extendWithKeys(layoutSelect, textEl.states.select, LABEL_LAYOUT_PROPS);
+ }
+
+ if (textEl.states.emphasis) {
+ const layoutEmphasis = layoutStore.oldLayoutEmphasis = {};
+ extendWithKeys(layoutEmphasis, newProps, LABEL_LAYOUT_PROPS);
+ extendWithKeys(layoutEmphasis, textEl.states.emphasis, LABEL_LAYOUT_PROPS);
+ }
}
if (guideLine && !guideLine.ignore && !guideLine.invisible) {
@@ -471,6 +527,4 @@ class LabelManager {
}
-
-
export default LabelManager;
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org