You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/11/01 17:27:26 UTC
[incubator-echarts] branch fix/treemap-click created (now f6e0dec)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a change to branch fix/treemap-click
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at f6e0dec fix: Make `util/graphic` `updateProps` and `initProps` param `cb` listen "aborted". Because, at present, all of the cb usage are about "remove el", which are needed in both "done" and "aborted". Currently the usage of `cb`: initProps ParallelView SankeyView ThemeRiverView updateProps TreeView custom
This branch includes the following new commits:
new b4667c8 ts: remove @ts-nocheck for some of the treemap files.
new f62945c fix: fix done/aborted in treemap. The bug case is: when click treemap to "drill down", and hover another rect to start state-changeing-animation before the drill down animation finished, some of the done/abort callback may not be called and then all of the "click" disabled (by the implementation of `src/util/animation.ts`.
new f6e0dec fix: Make `util/graphic` `updateProps` and `initProps` param `cb` listen "aborted". Because, at present, all of the cb usage are about "remove el", which are needed in both "done" and "aborted". Currently the usage of `cb`: initProps ParallelView SankeyView ThemeRiverView updateProps TreeView custom
The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 02/03: fix: fix done/aborted in treemap. The
bug case is: when click treemap to "drill down",
and hover another rect to start state-changeing-animation before the drill
down animation finished,
some of the done/abort callback may not be called and then all of the
"click" disabled (by the implementation of `src/util/animation.ts`.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/treemap-click
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit f62945c67ed8abf2a3818ed8e5f03d431739c2ea
Author: 100pah <su...@gmail.com>
AuthorDate: Mon Nov 2 01:24:40 2020 +0800
fix: fix done/aborted in treemap.
The bug case is: when click treemap to "drill down", and hover another rect to start state-changeing-animation before the drill down animation finished, some of the done/abort callback may not be called and then all of the "click" disabled (by the implementation of `src/util/animation.ts`.
---
src/chart/treemap/TreemapView.ts | 2 +-
src/util/animation.ts | 18 +++++++++---------
2 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts
index 42ba1e1..9a3b4d5 100644
--- a/src/chart/treemap/TreemapView.ts
+++ b/src/chart/treemap/TreemapView.ts
@@ -462,7 +462,7 @@ class TreemapView extends ChartView {
this._state = 'animating';
animationWrap
- .done(bind(function () {
+ .finished(bind(function () {
this._state = 'ready';
renderResult.renderFinally();
}, this))
diff --git a/src/util/animation.ts b/src/util/animation.ts
index d48b527..246d9f0 100644
--- a/src/util/animation.ts
+++ b/src/util/animation.ts
@@ -46,7 +46,7 @@ class AnimationWrap {
private _storage = [] as AnimationWrapStorage[];
private _elExistsMap: { [elId: string]: boolean } = {};
- private _doneCallback: AnimationWrapDoneCallback;
+ private _finishedCallback: AnimationWrapDoneCallback;
/**
* Caution: a el can only be added once, otherwise 'done'
@@ -79,11 +79,10 @@ class AnimationWrap {
}
/**
- * Only execute when animation finished. Will not execute when any
- * of 'stop' or 'stopAnimation' called.
+ * Only execute when animation done/aborted.
*/
- done(callback: AnimationWrapDoneCallback): AnimationWrap {
- this._doneCallback = callback;
+ finished(callback: AnimationWrapDoneCallback): AnimationWrap {
+ this._finishedCallback = callback;
return this;
}
@@ -93,12 +92,12 @@ class AnimationWrap {
start(): AnimationWrap {
let count = this._storage.length;
- const done = () => {
+ const checkTerminate = () => {
count--;
- if (!count) {
+ if (count <= 0) { // Guard.
this._storage.length = 0;
this._elExistsMap = {};
- this._doneCallback && this._doneCallback();
+ this._finishedCallback && this._finishedCallback();
}
};
@@ -109,7 +108,8 @@ class AnimationWrap {
delay: item.delay,
easing: item.easing,
setToFinal: true,
- done
+ done: checkTerminate,
+ aborted: checkTerminate
});
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 03/03: fix: Make `util/graphic` `updateProps`
and `initProps` param `cb` listen "aborted". Because, at present,
all of the cb usage are about "remove el",
which are needed in both "done" and "aborted". Currently the usage of `cb`:
initProps ParallelView SankeyView ThemeRiverView updateProps TreeView
custom
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/treemap-click
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit f6e0dec10c1383867aaf11382787f238ad7ba3fb
Author: 100pah <su...@gmail.com>
AuthorDate: Mon Nov 2 01:24:51 2020 +0800
fix: Make `util/graphic` `updateProps` and `initProps` param `cb` listen "aborted".
Because, at present, all of the cb usage are about "remove el", which are needed in both "done" and "aborted".
Currently the usage of `cb`:
initProps
ParallelView
SankeyView
ThemeRiverView
updateProps
TreeView
custom
---
src/util/graphic.ts | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index 81ec014..2a911ae 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -290,6 +290,9 @@ export const subPixelOptimize = subPixelOptimizeUtil.subPixelOptimize;
type AnimateOrSetPropsOption = {
dataIndex?: number;
+ // `cb` will be called when "done" or "aborted".
+ // Note: if there is requirment to ditinguish "done" and "aborted",
+ // in the future, we can add them to the params.
cb?: () => void;
during?: (percent: number) => void;
isFrom?: boolean;
@@ -381,6 +384,7 @@ function animateOrSetProps<Props>(
delay: animationDelay as number || 0,
easing: animationEasing,
done: cb,
+ aborted: cb,
force: !!cb || !!during,
scope: animationType,
during: during
@@ -390,6 +394,7 @@ function animateOrSetProps<Props>(
delay: animationDelay as number || 0,
easing: animationEasing,
done: cb,
+ aborted: cb,
force: !!cb || !!during,
setToFinal: true,
scope: animationType,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/03: ts: remove @ts-nocheck for some of the
treemap files.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/treemap-click
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit b4667c8cc38216417a2d63e8e58562cb3aa16dec
Author: 100pah <su...@gmail.com>
AuthorDate: Sun Nov 1 23:44:23 2020 +0800
ts: remove @ts-nocheck for some of the treemap files.
---
src/chart/treemap/TreemapView.ts | 17 +++--
src/util/animation.ts | 157 ++++++++++++++++++++-------------------
2 files changed, 90 insertions(+), 84 deletions(-)
diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts
index 4779b5b..42ba1e1 100644
--- a/src/chart/treemap/TreemapView.ts
+++ b/src/chart/treemap/TreemapView.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import {bind, each, indexOf, curry, extend, retrieve, normalizeCssArray} from 'zrender/src/core/util';
+import {bind, each, indexOf, curry, extend, retrieve, normalizeCssArray, isFunction} from 'zrender/src/core/util';
import * as graphic from '../../util/graphic';
import {getECData} from '../../util/innerStore';
import {
@@ -358,8 +358,11 @@ class TreemapView extends ChartView {
return;
}
- const duration = seriesModel.get('animationDurationUpdate');
- const easing = seriesModel.get('animationEasing');
+ const durationOption = seriesModel.get('animationDurationUpdate');
+ const easingOption = seriesModel.get('animationEasing');
+ // TODO: do not support function until necessary.
+ const duration = (isFunction(durationOption) ? 0 : durationOption) || 0;
+ const easing = (isFunction(easingOption) ? null : easingOption) || 'cubicOut';
const animationWrap = animationUtil.createWrap();
// Make delete animations.
@@ -411,8 +414,9 @@ class TreemapView extends ChartView {
style: {opacity: 0}
};
}
- // @ts-ignore
- target && animationWrap.add(el, target, duration, easing);
+
+ // TODO: do not support delay until necessary.
+ target && animationWrap.add(el, target, duration, 0, easing);
});
});
@@ -451,8 +455,7 @@ class TreemapView extends ChartView {
}
}
- // @ts-ignore
- animationWrap.add(el, target, duration, easing);
+ animationWrap.add(el, target, duration, 0, easing);
});
}, this);
diff --git a/src/util/animation.ts b/src/util/animation.ts
index fedf418..d48b527 100644
--- a/src/util/animation.ts
+++ b/src/util/animation.ts
@@ -17,103 +17,106 @@
* under the License.
*/
-// @ts-nocheck
-import * as zrUtil from 'zrender/src/core/util';
import Element, { ElementProps } from 'zrender/src/Element';
import { ZREasing } from './types';
+import { AnimationEasing } from 'zrender/src/animation/easing';
+
+interface AnimationWrapStorage {
+ el: Element;
+ target: ElementProps;
+ duration: number;
+ delay: number;
+ easing: AnimationEasing
+}
+type AnimationWrapDoneCallback = () => void;
/**
+ * Animate multiple elements with a single done-callback.
+ *
* @example
- * // Animate position
* animation
* .createWrap()
- * .add(el1, {position: [10, 10]})
+ * .add(el1, {x: 10, y: 10})
* .add(el2, {shape: {width: 500}, style: {fill: 'red'}}, 400)
* .done(function () { // done })
* .start('cubicOut');
*/
-export function createWrap() {
-
- const storage = [];
- let elExistsMap = {};
- let doneCallback;
+class AnimationWrap {
- return {
+ private _storage = [] as AnimationWrapStorage[];
+ private _elExistsMap: { [elId: string]: boolean } = {};
+ private _doneCallback: AnimationWrapDoneCallback;
- /**
- * Caution: a el can only be added once, otherwise 'done'
- * might not be called. This method checks this (by el.id),
- * suppresses adding and returns false when existing el found.
- *
- * @return Whether adding succeeded.
- *
- * @example
- * add(el, target, time, delay, easing);
- * add(el, target, time, easing);
- * add(el, target, time);
- * add(el, target);
- */
- add: function (
- el: Element,
- target: ElementProps,
- time?: number,
- delay?: number | ZREasing,
- easing?: ZREasing
- ) {
- if (zrUtil.isString(delay)) {
- easing = delay;
- delay = 0;
- }
-
- if (elExistsMap[el.id]) {
- return false;
- }
- elExistsMap[el.id] = 1;
+ /**
+ * Caution: a el can only be added once, otherwise 'done'
+ * might not be called. This method checks this (by el.id),
+ * suppresses adding and returns false when existing el found.
+ *
+ * @return Whether adding succeeded.
+ */
+ add(
+ el: Element,
+ target: ElementProps,
+ duration?: number,
+ delay?: number,
+ easing?: ZREasing
+ ): boolean {
+ if (this._elExistsMap[el.id]) {
+ return false;
+ }
+ this._elExistsMap[el.id] = true;
- storage.push(
- {el: el, target: target, time: time, delay: delay, easing: easing}
- );
+ this._storage.push({
+ el: el,
+ target: target,
+ duration: duration,
+ delay: delay,
+ easing: easing
+ });
- return true;
- },
+ return true;
+ }
- /**
- * Only execute when animation finished. Will not execute when any
- * of 'stop' or 'stopAnimation' called.
- */
- done: function (callback: () => void) {
- doneCallback = callback;
- return this;
- },
+ /**
+ * Only execute when animation finished. Will not execute when any
+ * of 'stop' or 'stopAnimation' called.
+ */
+ done(callback: AnimationWrapDoneCallback): AnimationWrap {
+ this._doneCallback = callback;
+ return this;
+ }
- /**
- * Will stop exist animation firstly.
- */
- start: function () {
- let count = storage.length;
+ /**
+ * Will stop exist animation firstly.
+ */
+ start(): AnimationWrap {
+ let count = this._storage.length;
- for (let i = 0, len = storage.length; i < len; i++) {
- const item = storage[i];
- item.el.animateTo(item.target, {
- duration: item.time,
- delay: item.delay,
- easing: item.easing,
- setToFinal: true,
- done
- });
+ const done = () => {
+ count--;
+ if (!count) {
+ this._storage.length = 0;
+ this._elExistsMap = {};
+ this._doneCallback && this._doneCallback();
}
+ };
- return this;
-
- function done() {
- count--;
- if (!count) {
- storage.length = 0;
- elExistsMap = {};
- doneCallback && doneCallback();
- }
- }
+ for (let i = 0, len = this._storage.length; i < len; i++) {
+ const item = this._storage[i];
+ item.el.animateTo(item.target, {
+ duration: item.duration,
+ delay: item.delay,
+ easing: item.easing,
+ setToFinal: true,
+ done
+ });
}
- };
+
+ return this;
+ }
+}
+
+export function createWrap(): AnimationWrap {
+ return new AnimationWrap();
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org