This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch enhance-morph
in repository https://gitbox.apache.org/repos/asf/echarts.git


The following commit(s) were added to refs/heads/enhance-morph by this push:
     new 3e6297c  feat(ut): remove the old transition code in custom series
3e6297c is described below

commit 3e6297cf5237d75ee85b4f12a177ed0982625261
Author: pissang <bm2736...@gmail.com>
AuthorDate: Thu Jun 17 14:55:42 2021 +0800

    feat(ut): remove the old transition code in custom series
---
 src/animation/morphTransitionHelper.ts |  24 ---
 src/chart/custom/CustomSeries.ts       |   2 -
 src/chart/custom/CustomView.ts         | 284 ++++++++-------------------------
 src/chart/lines/LinesView.ts           |   2 -
 test/custom-hexbin.html                |   8 +-
 test/custom-shape-morphing.html        |  13 +-
 test/custom-shape-morphing2.html       |  66 +++-----
 7 files changed, 102 insertions(+), 297 deletions(-)

diff --git a/src/animation/morphTransitionHelper.ts 
b/src/animation/morphTransitionHelper.ts
index 1890bfd..285e41c 100644
--- a/src/animation/morphTransitionHelper.ts
+++ b/src/animation/morphTransitionHelper.ts
@@ -215,28 +215,4 @@ export function getPathList(
         }
     });
     return pathList;
-}
-
-
-export function isPath(el: Element): el is Path {
-    return el instanceof Path;
-}
-export function isDisplayable(el: Element) : el is Displayable {
-    return el instanceof Displayable;
-}
-
-export function copyElement(sourceEl: Element, targetEl: Element) {
-    targetEl.copyTransform(sourceEl);
-    if (isDisplayable(targetEl) && isDisplayable(sourceEl)) {
-        targetEl.setStyle(sourceEl.style);
-        targetEl.z = sourceEl.z;
-        targetEl.z2 = sourceEl.z2;
-        targetEl.zlevel = sourceEl.zlevel;
-        targetEl.invisible = sourceEl.invisible;
-        targetEl.ignore = sourceEl.ignore;
-
-        if (isPath(targetEl) && isPath(sourceEl)) {
-            targetEl.setShape(sourceEl.shape);
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/chart/custom/CustomSeries.ts b/src/chart/custom/CustomSeries.ts
index 9cfd263..5c87a59 100644
--- a/src/chart/custom/CustomSeries.ts
+++ b/src/chart/custom/CustomSeries.ts
@@ -299,8 +299,6 @@ export const customInnerStore = makeInner<{
     // customText: string;
     txConZ2Set: number;
     leaveToProps: ElementProps;
-    // Can morph: "morph" specified in option and el is Path.
-    morph: boolean;
     option: CustomElementOption;
     userDuring: CustomBaseElementOption['during'];
 }, Element>();
diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts
index f0caaf1..ed88d72 100644
--- a/src/chart/custom/CustomView.ts
+++ b/src/chart/custom/CustomView.ts
@@ -19,14 +19,14 @@
 
 import {
     hasOwn, assert, isString, retrieve2, retrieve3, defaults, each,
-    keys, bind, eqNaN, indexOf, curry, filter, map
+    keys, bind, eqNaN, indexOf
 } from 'zrender/src/core/util';
 import * as graphicUtil from '../../util/graphic';
 import { setDefaultStateProxy, enableHoverEmphasis } from '../../util/states';
 import * as labelStyleHelper from '../../label/labelStyle';
 import {getDefaultLabel} from '../helper/labelHelper';
 import {getLayoutOnAxis} from '../../layout/barGrid';
-import DataDiffer, { DataDiffMode } from '../../data/DataDiffer';
+import DataDiffer from '../../data/DataDiffer';
 import Model from '../../model/Model';
 import ChartView from '../../view/Chart';
 import {createClipPath} from '../helper/createClipPathFromCoordSys';
@@ -94,13 +94,6 @@ import CustomSeriesModel, {
     PrepareCustomInfo
 } from './CustomSeries';
 import {
-    getPathList,
-    applyMorphAnimation,
-    isPath,
-    isDisplayable,
-    copyElement
-} from '../../animation/morphTransitionHelper';
-import {
     prepareShapeOrExtraAllPropsFinal,
     prepareShapeOrExtraTransitionFrom,
     prepareStyleTransitionFrom,
@@ -178,6 +171,27 @@ const prepareCustoms: Dictionary<PrepareCustomInfo> = {
 };
 
 
+function isPath(el: Element): el is graphicUtil.Path {
+    return el instanceof graphicUtil.Path;
+}
+function isDisplayable(el: Element) : el is Displayable {
+    return el instanceof Displayable;
+}
+function copyElement(sourceEl: Element, targetEl: Element) {
+    targetEl.copyTransform(sourceEl);
+    if (isDisplayable(targetEl) && isDisplayable(sourceEl)) {
+        targetEl.setStyle(sourceEl.style);
+        targetEl.z = sourceEl.z;
+        targetEl.z2 = sourceEl.z2;
+        targetEl.zlevel = sourceEl.zlevel;
+        targetEl.invisible = sourceEl.invisible;
+        targetEl.ignore = sourceEl.ignore;
+
+        if (isPath(targetEl) && isPath(sourceEl)) {
+            targetEl.setShape(sourceEl.shape);
+        }
+    }
+}
 export default class CustomChartView extends ChartView {
 
     static type = 'custom';
@@ -202,134 +216,39 @@ export default class CustomChartView extends ChartView {
             group.removeAll();
         }
 
-        // By default, merge mode is applied. In most cases, custom series is
-        // used in the scenario that data amount is not large but graphic 
elements
-        // is complicated, where merge mode is probably necessary for 
optimization.
-        // For example, reuse graphic elements and only update the transform 
when
-        // roam or data zoom according to `actionType`.
-
-        const transOpt = customSeries.uniTransitionMap;
-
-        function updateMorphingPathProps(
-            dataIndex: number,
-            from: graphicUtil.Path, to: graphicUtil.Path,
-            rawFrom: graphicUtil.Path, rawTo: graphicUtil.Path
-        ) {
-            // element has been updated if rawTo is same with to.
-            const elOption = customInnerStore(rawTo).option;
-            if (elOption) {
-                const transFromProps = {} as ElementProps;
-                const propsToSet = {} as ElementProps;
-                const styleOpt = elOption.style;
-                prepareShapeOrExtraTransitionFrom('extra', from, elOption, 
transFromProps, false);
-                prepareShapeOrExtraAllPropsFinal('extra', elOption, 
propsToSet);
-                prepareStyleTransitionFrom(from, elOption, styleOpt, 
transFromProps, false);
-                (propsToSet as DisplayableProps).style = styleOpt;
-
-                applyPropsDirectly(to, propsToSet);
-                applyPropsTransition(to, dataIndex, customSeries, 
transFromProps, false);
-                applyMiscProps(to, elOption, false);
-            }
-        }
-
-        // Enable user to disable transition animation by both set
-        // `from` and `to` dimension as `null`/`undefined`.
-        if (transOpt && (transOpt.from == null || transOpt.to == null)) {
+        if (customSeries.get(['universalTransition', 'enabled'])) {
+            // Always create new if universalTransition is enabled.
+            // So the old will not be replaced and can be transition later.
+            // TODO check if UniversalTransition feature is installed.
             oldData && oldData.each(function (oldIdx) {
                 doRemoveEl(oldData.getItemGraphicEl(oldIdx), customSeries, 
group);
             });
             data.each(function (newIdx) {
                 createOrUpdateItem(
-                    api, null, false, newIdx, renderItem(newIdx, payload), 
customSeries, group, data
+                    api, null, newIdx, renderItem(newIdx, payload), 
customSeries, group, data
                 );
             });
         }
         else {
-
-            const diffMode: DataDiffMode = transOpt ? 'multiple' : 'oneToOne';
-
-            (new DataDiffer(
-                oldData ? oldData.getIndices() : [],
-                data.getIndices(),
-                createGetKey(oldData, diffMode, transOpt && transOpt.from),
-                createGetKey(data, diffMode, transOpt && transOpt.to),
-                null,
-                diffMode
-            ))
-            .add(function (newIdx) {
-                createOrUpdateItem(
-                    api, null, false, newIdx, renderItem(newIdx, payload), 
customSeries, group,
-                    data
-                );
-            })
-            .remove(function (oldIdx) {
-                doRemoveEl(oldData.getItemGraphicEl(oldIdx), customSeries, 
group);
-            })
-            .update(function (newIdx, oldIdx) {
-                const oldEl = oldData.getItemGraphicEl(oldIdx);
-
-                const oldPathList = getPathList(oldEl);
-
-                const newEl = createOrUpdateItem(
-                    api, oldEl, oldPathList.length > 0, newIdx, 
renderItem(newIdx, payload), customSeries, group,
-                    data
-                );
-
-                const newPathList = filter(getPathList(newEl), el => 
customInnerStore(el).morph);
-                applyMorphAnimation(
-                    oldPathList, newPathList, customSeries, newIdx, 
curry(updateMorphingPathProps, newIdx)
-                );
-            })
-            .updateManyToOne(function (newIdx, oldIndices) {
-                const oldElList = [];
-                for (let i = 0; i < oldIndices.length; i++) {
-                    const oldEl = oldData.getItemGraphicEl(oldIndices[i]);
-                    group.remove(oldEl);
-                    oldElList.push(oldEl);
-                }
-
-                const oldPathList = getPathList(oldElList);
-
-                const updateMorphingPathPropsWithIdx = 
curry(updateMorphingPathProps, newIdx);
-
-                const newEl = createOrUpdateItem(
-                    api, null, oldElList.length > 0, newIdx, 
renderItem(newIdx, payload), customSeries, group,
-                    data
-                );
-
-                const newPathList = filter(getPathList(newEl), el => 
customInnerStore(el).morph);
-                applyMorphAnimation(
-                    oldPathList, newPathList, customSeries, newIdx, 
updateMorphingPathPropsWithIdx
-                );
-            })
-            .updateOneToMany(function (newIndices, oldIdx) {
-                const newLen = newIndices.length;
-                const oldEl = oldData.getItemGraphicEl(oldIdx);
-                group.remove(oldEl);
-
-                const oldPathList = getPathList(oldEl);
-
-                const newElList = [];
-                for (let i = 0; i < newLen; i++) {
-                    newElList.push(createOrUpdateItem(
-                        api, null, oldPathList.length > 0,
-                        newIndices[i], renderItem(newIndices[i], payload), 
customSeries, group,
+            data.diff(oldData)
+                .add(function (newIdx) {
+                    createOrUpdateItem(
+                        api, null, newIdx, renderItem(newIdx, payload), 
customSeries, group,
                         data
-                    ));
-                }
-
-                const newPathList = map(
-                    getPathList(newElList),
-                    els => filter(els, el => customInnerStore(el).morph)
-                );
-
-                // TODO Different animation config in different indices?
-                const updateMorphingPathPropsWithIdx = 
curry(updateMorphingPathProps, newIndices[0]);
-                applyMorphAnimation(
-                    oldPathList, newPathList, customSeries, newIndices[0], 
updateMorphingPathPropsWithIdx
-                );
-            })
-            .execute();
+                    );
+                })
+                .remove(function (oldIdx) {
+                    doRemoveEl(oldData.getItemGraphicEl(oldIdx), customSeries, 
group);
+                })
+                .update(function (newIdx, oldIdx) {
+                    const oldEl = oldData.getItemGraphicEl(oldIdx);
+
+                    createOrUpdateItem(
+                        api, oldEl, newIdx, renderItem(newIdx, payload), 
customSeries, group,
+                        data
+                    );
+                })
+                .execute();
         }
 
         // Do clipping
@@ -372,7 +291,7 @@ export default class CustomChartView extends ChartView {
         }
         for (let idx = params.start; idx < params.end; idx++) {
             const el = createOrUpdateItem(
-                null, null, false, idx, renderItem(idx, payload), 
customSeries, this.group, data
+                null, null, idx, renderItem(idx, payload), customSeries, 
this.group, data
             );
             el && el.traverse(setIncrementalAndHoverLayer);
         }
@@ -399,44 +318,6 @@ export default class CustomChartView extends ChartView {
 }
 
 
-function createGetKey(
-    data: List,
-    diffMode: DataDiffMode,
-    dimension: DimensionLoose
-) {
-    if (!data) {
-        return;
-    }
-
-    if (diffMode === 'oneToOne') {
-        return function (rawIdx: number, dataIndex: number) {
-            return data.getId(dataIndex);
-        };
-    }
-
-    const diffByDimName = data.getDimension(dimension);
-    const dimInfo = data.getDimensionInfo(diffByDimName);
-
-    if (!dimInfo) {
-        let errMsg = '';
-        if (__DEV__) {
-            errMsg = `${dimension} is not a valid dimension.`;
-        }
-        throwError(errMsg);
-    }
-    const ordinalMeta = dimInfo.ordinalMeta;
-    return function (rawIdx: number, dataIndex: number) {
-        let key = data.get(diffByDimName, dataIndex);
-        if (ordinalMeta) {
-            key = ordinalMeta.categories[key as number];
-        }
-        return (key == null || eqNaN(key))
-            ? rawIdx + ''
-            : '_ec_' + key;
-    };
-}
-
-
 function createEl(elOption: CustomElementOption): Element {
     const graphicType = elOption.type;
     let el;
@@ -597,40 +478,20 @@ function updateElNormal(
     const store = customInnerStore(el);
     store.userDuring = elOption.during;
 
-    // TODO el may can't be morphed
-    const willMorph = customInnerStore(el).morph;
     const transFromProps = {} as ElementProps;
     const propsToSet = {} as ElementProps;
 
-    if (!willMorph) {
-        prepareShapeOrExtraTransitionFrom('shape', el, elOption, 
transFromProps, isInit);
-        prepareShapeOrExtraAllPropsFinal('shape', elOption, propsToSet);
-        prepareTransformTransitionFrom(el, elOption, transFromProps, isInit);
-        prepareTransformAllPropsFinal(el, elOption, propsToSet);
-        prepareShapeOrExtraTransitionFrom('extra', el, elOption, 
transFromProps, isInit);
-        prepareShapeOrExtraAllPropsFinal('extra', elOption, propsToSet);
-        prepareStyleTransitionFrom(el, elOption, styleOpt, transFromProps, 
isInit);
-        (propsToSet as DisplayableProps).style = styleOpt;
-        applyPropsDirectly(el, propsToSet);
-        applyPropsTransition(el, dataIndex, seriesModel, transFromProps, 
isInit);
-        applyMiscProps(el, elOption, isTextContent);
-    }
-    else {
-        // Needs shape and transform info in morphing.
-        // Will set all properties in prepare
-        prepareTransformAllPropsFinal(el, elOption, propsToSet);
-        prepareShapeOrExtraAllPropsFinal('shape', elOption, propsToSet);
-
-        // Other properties also needs to be set.
-        prepareShapeOrExtraAllPropsFinal('extra', elOption, propsToSet);
-        prepareStyleTransitionFrom(el, elOption, styleOpt, transFromProps, 
isInit);
-        (propsToSet as DisplayableProps).style = styleOpt;
-
-        applyPropsDirectly(el, propsToSet);
-        applyMiscProps(el, elOption, isTextContent);
-
-        store.option = elOption;
-    }
+    prepareShapeOrExtraTransitionFrom('shape', el, elOption, transFromProps, 
isInit);
+    prepareShapeOrExtraAllPropsFinal('shape', elOption, propsToSet);
+    prepareTransformTransitionFrom(el, elOption, transFromProps, isInit);
+    prepareTransformAllPropsFinal(el, elOption, propsToSet);
+    prepareShapeOrExtraTransitionFrom('extra', el, elOption, transFromProps, 
isInit);
+    prepareShapeOrExtraAllPropsFinal('extra', elOption, propsToSet);
+    prepareStyleTransitionFrom(el, elOption, styleOpt, transFromProps, isInit);
+    (propsToSet as DisplayableProps).style = styleOpt;
+    applyPropsDirectly(el, propsToSet);
+    applyPropsTransition(el, dataIndex, seriesModel, transFromProps, isInit);
+    applyMiscProps(el, elOption, isTextContent);
 
     styleOpt ? el.dirty() : el.markRedraw();
 }
@@ -1286,7 +1147,6 @@ function wrapEncodeDef(data: List<CustomSeriesModel>): 
WrapEncodeDefRet {
 function createOrUpdateItem(
     api: ExtensionAPI,
     existsEl: Element,
-    hasMorphFrom: boolean,
     dataIndex: number,
     elOption: CustomElementOption,
     seriesModel: CustomSeriesModel,
@@ -1305,7 +1165,7 @@ function createOrUpdateItem(
         group.remove(existsEl);
         return;
     }
-    const el = doCreateOrUpdateEl(api, existsEl, hasMorphFrom, dataIndex, 
elOption, seriesModel, group, true);
+    const el = doCreateOrUpdateEl(api, existsEl, dataIndex, elOption, 
seriesModel, group, true);
     el && data.setItemGraphicEl(dataIndex, el);
 
     el && enableHoverEmphasis(el, elOption.focus, elOption.blurScope);
@@ -1316,7 +1176,6 @@ function createOrUpdateItem(
 function doCreateOrUpdateEl(
     api: ExtensionAPI,
     existsEl: Element,
-    hasMorphFrom: boolean,
     dataIndex: number,
     elOption: CustomElementOption,
     seriesModel: CustomSeriesModel,
@@ -1346,7 +1205,7 @@ function doCreateOrUpdateEl(
         existsEl = null;
     }
 
-    const elIsNewCreated = !existsEl;
+    const isInit = !existsEl;
     let el = existsEl;
 
     if (!el) {
@@ -1361,16 +1220,14 @@ function doCreateOrUpdateEl(
         // do not clearState but update cached normal state directly.
         el.clearStates();
     }
-    const morph = customInnerStore(el).morph =
-        hasMorphFrom && isPath(el)
-        && (elOption as CustomZRPathOption).morph
-        // Don't need morph if element type are same.
-        // shaping transition is enough
-        && elIsNewCreated;
 
-    // Use update animation when morph is enabled.
-    // TODO: can't morph if from element is not valid.
-    const isInit = elIsNewCreated && !morph;
+    // Need to set morph: false explictly to disable automatically morphing.
+    if ((elOption as CustomZRPathOption).morph === false) {
+        (el as ECElement).disableMorphing = true;
+    }
+    else if ((el as ECElement).disableMorphing) {
+        (el as ECElement).disableMorphing = false;
+    }
 
     attachedTxInfoTmp.normal.cfg = attachedTxInfoTmp.normal.conOpt =
         attachedTxInfoTmp.emphasis.cfg = attachedTxInfoTmp.emphasis.conOpt =
@@ -1411,7 +1268,7 @@ function doCreateOrUpdateEl(
 
     if (elOption.type === 'group') {
         mergeChildren(
-            api, el as graphicUtil.Group, hasMorphFrom, dataIndex, elOption as 
CustomGroupOption, seriesModel
+            api, el as graphicUtil.Group, dataIndex, elOption as 
CustomGroupOption, seriesModel
         );
     }
 
@@ -1646,7 +1503,6 @@ function retrieveStyleOptionOnState(
 function mergeChildren(
     api: ExtensionAPI,
     el: graphicUtil.Group,
-    hasMorphFrom: boolean,
     dataIndex: number,
     elOption: CustomGroupOption,
     seriesModel: CustomSeriesModel
@@ -1671,7 +1527,6 @@ function mergeChildren(
             newChildren: newChildren || [],
             dataIndex: dataIndex,
             seriesModel: seriesModel,
-            hasMorphFrom,
             group: el
         });
         return;
@@ -1686,7 +1541,6 @@ function mergeChildren(
         newChildren[index] && doCreateOrUpdateEl(
             api,
             el.childAt(index),
-            hasMorphFrom,
             dataIndex,
             newChildren[index],
             seriesModel,
@@ -1708,7 +1562,6 @@ type DiffGroupContext = {
     newChildren: CustomElementOption[];
     dataIndex: number;
     seriesModel: CustomSeriesModel;
-    hasMorphFrom: boolean
     group: graphicUtil.Group;
 };
 function diffGroupChildren(context: DiffGroupContext) {
@@ -1742,7 +1595,6 @@ function processAddUpdate(
     doCreateOrUpdateEl(
         context.api,
         child,
-        context.hasMorphFrom,
         context.dataIndex,
         childOption,
         context.seriesModel,
diff --git a/src/chart/lines/LinesView.ts b/src/chart/lines/LinesView.ts
index 2afd397..ad1089e 100644
--- a/src/chart/lines/LinesView.ts
+++ b/src/chart/lines/LinesView.ts
@@ -186,7 +186,6 @@ class LinesView extends ChartView {
             this._hasEffet = hasEffect;
             this._isPolyline = isPolyline;
             this._isLargeDraw = isLargeDraw;
-            this.group.removeAll();
         }
 
         this.group.add(lineDraw.group);
@@ -212,7 +211,6 @@ class LinesView extends ChartView {
         this._lineDraw = null;
         // Clear motion when lineDraw is removed
         this._clearLayer(api);
-        this.group.removeAll();
     }
 
     dispose(ecModel: GlobalModel, api: ExtensionAPI) {
diff --git a/test/custom-hexbin.html b/test/custom-hexbin.html
index 1ed29dc..91a3ee7 100644
--- a/test/custom-hexbin.html
+++ b/test/custom-hexbin.html
@@ -177,7 +177,6 @@ under the License.
                             type: 'group',
                             children: [{
                                 type,
-                                morph: true,
                                 shape: type === 'polygon' ? {
                                     points: points
                                 } : {
@@ -193,7 +192,6 @@ under the License.
                                 }
                             }, {
                                 type,
-                                morph: true,
                                 shape: type === 'polygon' ? {
                                     points: pointsBG
                                 } : {
@@ -321,6 +319,9 @@ under the License.
                             myChart.setOption({
                                 series: [{
                                     type: 'custom',
+                                    universalTransition: {
+                                        enabled: true
+                                    },
                                     renderItem: createItemRenderer('polygon')
                                 }]
                             });
@@ -331,6 +332,9 @@ under the License.
                             myChart.setOption({
                                 series: [{
                                     type: 'custom',
+                                    universalTransition: {
+                                        enabled: true
+                                    },
                                     renderItem: createItemRenderer('circle')
                                 }]
                             });
diff --git a/test/custom-shape-morphing.html b/test/custom-shape-morphing.html
index 9687439..38df70e 100644
--- a/test/custom-shape-morphing.html
+++ b/test/custom-shape-morphing.html
@@ -148,6 +148,9 @@ under the License.
                             type: 'custom',
                             data,
                             animationDurationUpdate: 2000,
+                            universalTransition: {
+                                enabled: true
+                            },
                             renderItem(params, api) {
                                 const dataItem = data[params.dataIndex];
                                 const geometries = 
regionsMap[dataItem.name].geometries.slice();
@@ -164,7 +167,6 @@ under the License.
                                 }
                                 return {
                                     type: 'polygon',
-                                    morph: true,
                                     shape: {
                                         points: newPoints
                                     },
@@ -186,7 +188,6 @@ under the License.
                     const width = 20;
                     return {
                         type: 'rect',
-                        morph: true,
                         shape: {
                             x: start[0] - width / 2,
                             y: start[1],
@@ -207,7 +208,6 @@ under the License.
                     const center = api.coord([params.dataIndex, api.value(1)]);
                     return {
                         type: 'circle',
-                        morph: true,
                         shape: {
                             cx: center[0],
                             cy: center[1],
@@ -232,6 +232,9 @@ under the License.
                             type: 'custom',
                             data,
                             animationDurationUpdate: 2000,
+                            universalTransition: {
+                                enabled: true
+                            },
                             renderItem
                         }]
                     };
@@ -256,12 +259,14 @@ under the License.
                             coordinateSystem: 'none',
                             data: pieData,
                             animationDurationUpdate: 2000,
+                            universalTransition: {
+                                enabled: true
+                            },
                             renderItem(params, api) {
                                 const width = myChart.getWidth();
                                 const height = myChart.getHeight();
                                 return {
                                     type: 'sector',
-                                    morph: true,
                                     shape: {
                                         cx: width / 2,
                                         cy: height / 2,
diff --git a/test/custom-shape-morphing2.html b/test/custom-shape-morphing2.html
index 6089fee..39976d1 100644
--- a/test/custom-shape-morphing2.html
+++ b/test/custom-shape-morphing2.html
@@ -249,6 +249,9 @@ under the License.
                                     coordinateSystem: 'cartesian2d',
                                     animationDurationUpdate: 
ANIMATION_DURATION_UPDATE,
                                     datasetId: datasetId,
+                                    universalTransition: {
+                                        enabled: true
+                                    },
                                     encode: {
                                         itemName: 'ID',
                                         x: 'STE',
@@ -276,7 +279,6 @@ under the License.
                             var symbolPath = getFromPalette(zTagVal, 
SYMBOL_PATHS);
                             return {
                                 type: 'circle',
-                                morph: true,
                                 shape: {
                                     cx: pos[0],
                                     cy: pos[1],
@@ -301,7 +303,6 @@ under the License.
                             var symbolPath = getFromPalette(zTagVal, 
SYMBOL_PATHS);
                             return {
                                 type: 'path',
-                                morph: true,
                                 x: pos[0],
                                 y: pos[1],
                                 shape: {
@@ -332,7 +333,6 @@ under the License.
                                 y: pos[1],
                                 children: [{
                                     type: 'polygon',
-                                    morph: true,
                                     shape: {
                                         points: [
                                             [-40, -2],
@@ -348,7 +348,6 @@ under the License.
                                     transition: ['shape', 'style']
                                 }, {
                                     type: 'rect',
-                                    morph: true,
                                     shape: {
                                         x: -20,
                                         y: 0,
@@ -392,9 +391,13 @@ under the License.
                                     coordinateSystem: 'cartesian2d',
                                     animationDurationUpdate: 
ANIMATION_DURATION_UPDATE,
                                     datasetId: datasetId,
+                                    universalTransition: {
+                                        enabled: true
+                                    },
                                     encode: {
                                         x: 'M_TAG',
                                         y: 'ATA',
+                                        dataGroupId: 'M_TAG',
                                         tooltip: ['M_TAG', 'ATA']
                                     },
                                     renderItem: function (params, api) {
@@ -406,7 +409,6 @@ under the License.
                                         var width = size[0] * 0.4;
                                         return {
                                             type: 'rect',
-                                            morph: true,
                                             shape: {
                                                 x: tarPos[0] - width / 2,
                                                 y: tarPos[1],
@@ -442,6 +444,9 @@ under the License.
                                         value: 'ATA',
                                         tooltip: 'ATA'
                                     },
+                                    universalTransition: {
+                                        enabled: true
+                                    },
                                     renderItem: function (params, api) {
                                         var context = params.context;
                                         if (!context.layout) {
@@ -467,7 +472,6 @@ under the License.
                                         var height = chart.getHeight();
                                         return {
                                             type: 'sector',
-                                            morph: true,
                                             shape: {
                                                 cx: width / 2,
                                                 cy: height / 2,
@@ -519,9 +523,13 @@ under the License.
                                     coordinateSystem: 'cartesian2d',
                                     animationDurationUpdate: 
ANIMATION_DURATION_UPDATE,
                                     datasetId: datasetId,
+                                    universalTransition: {
+                                        enabled: true
+                                    },
                                     encode: {
                                         x: 'CLUSTER_CENTER_STE',
                                         y: 'CLUSTER_CENTER_ATA',
+                                        itemGroupId: 'CLUSTER_IDX',
                                         tooltip: ['CLUSTER_CENTER_STE', 
'CLUSTER_CENTER_ATA']
                                     },
                                     renderItem: function (params, api) {
@@ -542,7 +550,6 @@ under the License.
                                         var radius = count / 
context.totalCount * 100 + 10;
                                         return {
                                             type: 'circle',
-                                            morph: true,
                                             shape: {
                                                 cx: pos[0],
                                                 cy: pos[1],
@@ -565,53 +572,20 @@ under the License.
 
 
 
-                var optionList = [];
+                var options = {};
                 var buttons = [];
+
                 echarts.util.each(optionCreators, function (creator, key) {
                     var optionWrap = creator();
-                    optionList.push({
-                        key: key,
-                        dataMetaKey: optionWrap.datasetId,
-                        option: optionWrap.option
-                    });
+                    options[key] = Object.assign({}, baseOption, 
optionWrap.option);
                     buttons.push({
                         text: key,
                         onclick: function () {
-                            player.go(key);
+                            chart.setOption(options[key], true);
                         }
                     });
                 });
 
-
-                var player = ecSimpleOptionPlayer.create({
-                    chart: function () {
-                        return chart;
-                    },
-                    seriesIndex: 0,
-                    replaceMerge: ['xAxis', 'yAxis'],
-                    dataMeta: {
-                        raw: {
-                            dimensions: RAW_DATA_DIMENSIONS,
-                            uniqueDimension: 'ID'
-                        },
-                        mTagSum: {
-                            dimensions: M_TAG_SUM_DIMENSIONS,
-                            uniqueDimension: 'M_TAG'
-                        },
-                        rawClusters: {
-                            dimensions: RAW_CLUSTER_DIMENSIONS,
-                            uniqueDimension: 'ID',
-                            dividingMethod: 'duplicate'
-                        },
-                        rawClusterCenters: {
-                            dimensions: RAW_CLUSTER_CENTERS_DIMENSIONS,
-                            uniqueDimension: 'CLUSTER_IDX'
-                        }
-                    },
-                    optionList: optionList
-                });
-
-
                 var chart = testHelper.create(echarts, 'main0', {
                     title: [
                         'Test: buttons, should morph animation 
combine/separate.',
@@ -619,7 +593,7 @@ under the License.
                         'Test: click buttons **twice**, should no blink.',
                         'Test: use dataZoom, the "update animation" should 
exist'
                     ],
-                    option: baseOption,
+                    option: options['Scatter_singleSVG_ATA_STE'],
                     lazyUpdate: true,
                     height: 600,
                     buttons: buttons.concat([{
@@ -641,8 +615,6 @@ under the License.
                     }])
                 });
 
-                player.go('Scatter_singleSVG_ATA_STE');
-
             });
 
         </script>

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org

Reply via email to