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/07/14 10:44:47 UTC
[incubator-echarts] branch datazoom-animation created (now f869a89)
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a change to branch datazoom-animation
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at f869a89 feat(animation): action in dataZoom and resize can override the option animtion.
This branch includes the following new commits:
new f869a89 feat(animation): action in dataZoom and resize can override the option animtion.
The 1 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] 01/01: feat(animation): action in dataZoom and
resize can override the option animtion.
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch datazoom-animation
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit f869a89c1c89fb94c093ed05b7b75a61693b9a74
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jul 14 18:44:12 2020 +0800
feat(animation): action in dataZoom and resize can override the option animtion.
---
src/chart/line/LineView.ts | 6 +++
src/chart/parallel/ParallelView.ts | 8 ++--
src/component/axis/ParallelAxisView.ts | 3 +-
src/component/axis/parallelAxisAction.ts | 2 -
src/component/dataZoom/SliderZoomView.ts | 4 ++
src/component/dataZoom/roams.ts | 4 ++
src/component/parallel.ts | 4 +-
src/echarts.ts | 18 +++++++-
src/model/Global.ts | 13 ++++++
src/util/graphic.ts | 76 ++++++++++++++++++++------------
src/util/types.ts | 8 ++++
11 files changed, 108 insertions(+), 38 deletions(-)
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 8fb1f80..e1e30e2 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -780,6 +780,7 @@ class LineView extends ChartView {
if (polygon) {
polygon.setShape({
+ // Reuse the points with polyline.
points: current,
stackedOnPoints: stackedOnCurrent
});
@@ -789,8 +790,13 @@ class LineView extends ChartView {
stackedOnPoints: stackedOnNext
}
}, seriesModel);
+ // If use attr directly in updateProps.
+ if (polyline.shape.points !== polygon.shape.points) {
+ polygon.shape.points = polyline.shape.points;
+ }
}
+
const updatedDataInfo: {
el: SymbolExtended,
ptIdx: number
diff --git a/src/chart/parallel/ParallelView.ts b/src/chart/parallel/ParallelView.ts
index e3d5083..b5d2f34 100644
--- a/src/chart/parallel/ParallelView.ts
+++ b/src/chart/parallel/ParallelView.ts
@@ -53,9 +53,7 @@ class ParallelView extends ChartView {
seriesModel: ParallelSeriesModel,
ecModel: GlobalModel,
api: ExtensionAPI,
- payload: Payload & {
- animation?: boolean
- }
+ payload: Payload
) {
const dataGroup = this._dataGroup;
const data = seriesModel.getData();
@@ -80,8 +78,8 @@ class ParallelView extends ChartView {
const points = createLinePoints(data, newDataIndex, dimensions, coordSys);
data.setItemGraphicEl(newDataIndex, line);
- const animationModel = (payload && payload.animation === false) ? null : seriesModel;
- graphic.updateProps(line, {shape: {points: points}}, animationModel, newDataIndex);
+
+ graphic.updateProps(line, {shape: {points: points}}, seriesModel, newDataIndex);
updateElCommon(line, data, newDataIndex, seriesScope);
}
diff --git a/src/component/axis/ParallelAxisView.ts b/src/component/axis/ParallelAxisView.ts
index d83a55c..03bf0b5 100644
--- a/src/component/axis/ParallelAxisView.ts
+++ b/src/component/axis/ParallelAxisView.ts
@@ -103,8 +103,7 @@ class ParallelAxisView extends ComponentView {
builderOpt, areaSelectStyle, axisModel, coordSysModel, areaWidth, api
);
- const animationModel = (payload && payload.animation === false) ? null : axisModel;
- graphic.groupTransition(oldAxisGroup, this._axisGroup, animationModel);
+ graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
}
// /**
diff --git a/src/component/axis/parallelAxisAction.ts b/src/component/axis/parallelAxisAction.ts
index 42027b5..38b1ced 100644
--- a/src/component/axis/parallelAxisAction.ts
+++ b/src/component/axis/parallelAxisAction.ts
@@ -46,8 +46,6 @@ echarts.registerAction(actionInfo, function (payload: ParallelAxisAreaSelectPayl
export interface ParallelAxisExpandPayload extends Payload {
axisExpandWindow?: number[];
- // Jumping uses animation, and sliding suppresses animation.
- animation?: boolean;
}
/**
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index bfd3d7f..56bc1fa 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -752,6 +752,10 @@ class SliderZoomView extends DataZoomView {
type: 'dataZoom',
from: this.uid,
dataZoomId: this.dataZoomModel.id,
+ animation: {
+ easing: 'cubicOut',
+ duration: 100
+ },
start: range[0],
end: range[1]
});
diff --git a/src/component/dataZoom/roams.ts b/src/component/dataZoom/roams.ts
index 05524c9..672a0aa 100644
--- a/src/component/dataZoom/roams.ts
+++ b/src/component/dataZoom/roams.ts
@@ -181,6 +181,10 @@ function cleanStore(store: Store) {
function dispatchAction(api: ExtensionAPI, batch: DataZoomPayloadBatchItem[]) {
api.dispatchAction({
type: 'dataZoom',
+ animation: {
+ easing: 'cubicOut',
+ duration: 100
+ },
batch: batch
});
}
diff --git a/src/component/parallel.ts b/src/component/parallel.ts
index 0c9f50e..4a4dbea 100644
--- a/src/component/parallel.ts
+++ b/src/component/parallel.ts
@@ -157,7 +157,9 @@ const handlers: Partial<Record<ElementEventName, ElementEventHandler>> = {
: {
axisExpandWindow: result.axisExpandWindow,
// Jumping uses animation, and sliding suppresses animation.
- animation: behavior === 'jump' ? null : false
+ animation: behavior === 'jump' ? null : {
+ duration: 0 // Disable animation.
+ }
}
);
}
diff --git a/src/echarts.ts b/src/echarts.ts
index e0d748a..adcd25a 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -1000,7 +1000,13 @@ class ECharts extends Eventful {
this[IN_MAIN_PROCESS] = true;
optionChanged && prepare(this);
- updateMethods.update.call(this);
+ updateMethods.update.call(this, {
+ type: 'resize',
+ animation: {
+ // Disable animation
+ duration: 0
+ }
+ });
this[IN_MAIN_PROCESS] = false;
@@ -1263,6 +1269,8 @@ class ECharts extends Eventful {
): void {
const ecModel = ecIns._model;
+ ecModel.setUpdatePayload(payload);
+
// broadcast
if (!mainType) {
// FIXME
@@ -1323,6 +1331,8 @@ class ECharts extends Eventful {
return;
}
+ ecModel.setUpdatePayload(payload);
+
scheduler.restoreData(ecModel, payload);
scheduler.performSeriesTasks(ecModel);
@@ -1388,6 +1398,8 @@ class ECharts extends Eventful {
return;
}
+ ecModel.setUpdatePayload(payload);
+
// ChartView.markUpdateMethod(payload, 'updateTransform');
const componentDirtyList = [];
@@ -1438,6 +1450,8 @@ class ECharts extends Eventful {
return;
}
+ ecModel.setUpdatePayload(payload);
+
ChartView.markUpdateMethod(payload, 'updateView');
clearColorPalette(ecModel);
@@ -1460,6 +1474,8 @@ class ECharts extends Eventful {
return;
}
+ ecModel.setUpdatePayload(payload);
+
// clear all visual
ecModel.eachSeries(function (seriesModel) {
seriesModel.getData().clearAllVisual();
diff --git a/src/model/Global.ts b/src/model/Global.ts
index 0e6da65..d0cf090 100644
--- a/src/model/Global.ts
+++ b/src/model/Global.ts
@@ -86,6 +86,11 @@ class GlobalModel extends Model<ECUnitOption> {
*/
private _seriesIndicesMap: HashMap<any>;
+ /**
+ * Model for store update payload
+ */
+ private _payload: Payload;
+
// Injectable properties:
scheduler: Scheduler;
@@ -318,6 +323,14 @@ class GlobalModel extends Model<ECUnitOption> {
return this._theme;
}
+ setUpdatePayload(payload: Payload) {
+ this._payload = payload;
+ }
+
+ getUpdatePayload(): Payload {
+ return this._payload;
+ }
+
/**
* @param idx 0 by default
*/
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index ec145a2..e9ecf23 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -66,7 +66,8 @@ import {
TextCommonOption,
SeriesOption,
ParsedValue,
- CallbackDataParams
+ CallbackDataParams,
+ AnimationPayload
} from './types';
import GlobalModel from '../model/Global';
import { makeInner } from './model';
@@ -86,6 +87,7 @@ import * as numberUtil from './number';
import SeriesModel from '../model/Series';
import {interpolateNumber} from 'zrender/src/animation/Animator';
import List from '../data/List';
+import easing, { AnimationEasing } from 'zrender/src/animation/easing';
const mathMax = Math.max;
@@ -1161,32 +1163,52 @@ function animateOrSetProps<Props>(
}
const isUpdate = animationType === 'update';
const isRemove = animationType === 'remove';
- // Do not check 'animation' property directly here. Consider this case:
- // animation model is an `itemModel`, whose does not have `isAnimationEnabled`
- // but its parent model (`seriesModel`) does.
+
+ let animationPayload: AnimationPayload;
+ // Check if there is global animation configuration from dataZoom/resize can override the config in option.
+ // If animation is enabled. Will use this animation config in payload.
+ // If animation is disabled. Just ignore it.
+ if (animatableModel && animatableModel.ecModel) {
+ const updatePayload = animatableModel.ecModel.getUpdatePayload();
+ animationPayload = (updatePayload && updatePayload.animation) as AnimationPayload;
+ }
const animationEnabled = animatableModel && animatableModel.isAnimationEnabled();
if (animationEnabled) {
- // TODO Configurable
- let duration = isRemove ? 200 : animatableModel.getShallow(
- isUpdate ? 'animationDurationUpdate' : 'animationDuration'
- );
- const animationEasing = isRemove ? 'cubicOut' : animatableModel.getShallow(
- isUpdate ? 'animationEasingUpdate' : 'animationEasing'
- );
- let animationDelay = isRemove ? 0 : animatableModel.getShallow(
- isUpdate ? 'animationDelayUpdate' : 'animationDelay'
- );
- if (typeof animationDelay === 'function') {
- animationDelay = animationDelay(
- dataIndex as number,
- animatableModel.getAnimationDelayParams
- ? animatableModel.getAnimationDelayParams(el, dataIndex as number)
- : null
- );
+ let duration: number | Function;
+ let animationEasing: AnimationEasing;
+ let animationDelay: number | Function;
+ if (animationPayload) {
+ duration = animationPayload.duration || 0;
+ animationEasing = animationPayload.easing || 'cubicOut';
+ animationDelay = animationPayload.delay || 0;
+ }
+ else if (isRemove) {
+ duration = 200;
+ animationEasing = 'cubicOut';
+ animationDelay = 0;
}
- if (typeof duration === 'function') {
- duration = duration(dataIndex as number);
+ else {
+ duration = animatableModel.getShallow(
+ isUpdate ? 'animationDurationUpdate' : 'animationDuration'
+ );
+ animationEasing = animatableModel.getShallow(
+ isUpdate ? 'animationEasingUpdate' : 'animationEasing'
+ );
+ animationDelay = animatableModel.getShallow(
+ isUpdate ? 'animationDelayUpdate' : 'animationDelay'
+ );
+ if (typeof animationDelay === 'function') {
+ animationDelay = animationDelay(
+ dataIndex as number,
+ animatableModel.getAnimationDelayParams
+ ? animatableModel.getAnimationDelayParams(el, dataIndex as number)
+ : null
+ );
+ }
+ if (typeof duration === 'function') {
+ duration = duration(dataIndex as number);
+ }
}
if (!isRemove) {
@@ -1198,8 +1220,8 @@ function animateOrSetProps<Props>(
? (
isFrom
? el.animateFrom(props, {
- duration,
- delay: animationDelay || 0,
+ duration: duration as number,
+ delay: animationDelay as number || 0,
easing: animationEasing,
done: cb,
force: !!cb || !!during,
@@ -1207,8 +1229,8 @@ function animateOrSetProps<Props>(
during: during
})
: el.animateTo(props, {
- duration,
- delay: animationDelay || 0,
+ duration: duration as number,
+ delay: animationDelay as number || 0,
easing: animationEasing,
done: cb,
force: !!cb || !!during,
diff --git a/src/util/types.ts b/src/util/types.ts
index 6effa65..e0a7ade 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -127,6 +127,7 @@ export interface DataModel extends DataHost, DataFormatMixin {}
interface PayloadItem {
excludeSeriesId?: string | string[];
+ animation?: AnimationPayload
[other: string]: any;
}
@@ -136,6 +137,13 @@ export interface Payload extends PayloadItem {
batch?: PayloadItem[];
}
+// Payload includes override anmation info
+export interface AnimationPayload {
+ duration?: number
+ easing?: AnimationEasing
+ delay?: number
+}
+
export interface ViewRootGroup extends Group {
__ecComponentInfo?: {
mainType: string,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org