Line animation. clear visual and layout after restore

src/chart/bar/BarView.js

@@ -71,9 +71,15 @@ define(function (require) {
                     group.add(el);
                 })
                 .remove(function (dataItem, idx) {
-                    if (dataItem.__el) {
-                        group.remove(dataItem.__el);
-                    }
+                    var el = dataItem.__el;
+                    el.animateTo({
+                        shape: {
+                            width: 0
+                        }
+                    }, 300, 'cubicOut',
+                    function () {
+                        group.remove(el);
+                    });
                 })
                 .execute();
 

src/chart/helper/DataSymbol.js

@@ -11,6 +11,11 @@ define(function (require) {
         this.z = 0;
 
         this.zlevel = 0;
+
+        this.animation = {
+            easing: 'cubicOut',
+            duration: 300
+        }
     }
 
     DataSymbol.prototype = {
@@ -22,14 +27,15 @@ define(function (require) {
         updateData: function (data) {
 
             var group = this.group;
+            var animationConfig = this.animation;
 
             data.diff(this._data)
                 .add(function (dataItem) {
                     // 空数据
                     // TODO
-                    // if (dataItem.getValue() == null) {
-                    //     return;
-                    // }
+                    if (dataItem.getValue() == null) {
+                        return;
+                    }
 
                     var layout = dataItem.layout;
                     var color = dataItem.getVisual('color');
@@ -56,14 +62,14 @@ define(function (require) {
 
                     // 空数据
                     // TODO
-                    // if (newData.getValue() == null) {
-                    //     group.remove(oldData.__el);
-                    //     return;
-                    // }
+                    if (newData.getValue() == null) {
+                        group.remove(el);
+                        return;
+                    }
                     el.animateTo({
                         scale: [symbolSize, symbolSize],
                         position: [layout.x, layout.y]
-                    }, 500, 'cubicOut');
+                    }, animationConfig.duration, animationConfig.easing);
 
                     newData.__el = el;
 
@@ -71,8 +77,13 @@ define(function (require) {
                     group.add(el);
                 })
                 .remove(function (dataItem) {
-                    if (dataItem.__el) {
-                        group.remove(dataItem.__el);
+                    var el = dataItem.__el;
+                    if (el) {
+                        el.animateTo({
+                            scale: [0, 0]
+                        }, 200, 'cubicOut', function () {
+                            group.remove(el);
+                        });
                     }
                 })
                 .execute();
@@ -104,7 +115,7 @@ define(function (require) {
                     el.animateTo({
                         scale: [0, 0]
                     }, 200, 'cubicOut', function () {
-                        group.remove(dataItem.__el);
+                        group.remove(el);
                     });
                 });
             }

src/chart/line/LineView.js

+// TODO Area
+// TODO Null data
 define(function(require) {
 
     'use strict';
 
     var zrUtil = require('zrender/core/util');
     var DataSymbol = require('../helper/DataSymbol');
+    var lineAnimationDiff = require('./lineAnimationDiff');
+
+    function isPointsSame(points1, points2) {
+        if (points1.length !== points2.length) {
+            return;
+        }
+        for (var i = 0; i < points1.length; i++) {
+            var p1 = points1[i].point;
+            var p2 = points2[i].point;
+            if (p1[0] !== p2[0] || p1[1] !== p2[1]) {
+                return;
+            }
+        }
+        return true;
+    }
 
     return require('../../echarts').extendChartView({
 
@@ -25,6 +42,13 @@ define(function(require) {
                     return [layout.x, layout.y];
                 }
             });
+            var pointsWithName = data.map(function (dataItem, idx) {
+                return {
+                    name: dataItem.name,
+                    point: points[idx]
+                };
+            });
+
             var coordinateSystem = seriesModel.coordinateSystem;
             var isCoordinateSystemPolar = coordinateSystem.type === 'polar';
 
@@ -64,25 +88,34 @@ define(function(require) {
                 this._polyline = polyline;
             }
             else {
-                // FIXME Handle the situation of adding and removing data
-                this._polyline.animateTo({
-                    shape: {
-                        points: points
-                    }
-                }, 500, 'cubicOut');
-                // this._polyline.shape.points = points;
-                // this._polyline.dirty(true);
+                // In the case data zoom triggerred refreshing frequently
+                // Data may not change if line has a category axis. So it should animate nothing
+                if (! isPointsSame(this._pointsWithName, pointsWithName)) {
+                    var diff = lineAnimationDiff(this._pointsWithName, pointsWithName);
+                    this._polyline.shape.points = diff.current;
+                    // FIXME Handle the situation of adding and removing data
+                    this._polyline.animateTo({
+                        shape: {
+                            points: diff.next
+                        }
+                    }, 300, 'cubicOut');
+                }
 
                 // Add back
                 group.add(this._polyline);
             }
 
-            var dataSymbol = this._dataSymbol;
-            dataSymbol.z = seriesModel.get('z') + 1;
-            // Draw symbols
-            dataSymbol.updateData(data);
+            // var dataSymbol = this._dataSymbol;
+            // dataSymbol.z = seriesModel.get('z') + 1;
+            // // Draw symbols
+            // dataSymbol.updateData(data);
 
             this._data = data;
+
+            this._pointsWithName = pointsWithName;
+        },
+
+        _animateLine: function (oldData, newData) {
         },
 
         _createGridClipShape: function (cartesian, api, cb) {

src/chart/line/lineAnimationDiff.js

+define(function (require) {
+
+    var arrayDiff = require('zrender/core/arrayDiff');
+
+    function nameCompare(a, b) {
+        return a.name === b.name;
+    }
+
+    return function (oldData, newData) {
+
+        var oldPoints = [];
+        var newPoints = [];
+
+        // FIXME One data ?
+        var diff = arrayDiff(oldData, newData, nameCompare);
+
+        var prevDiffNotRemove;
+        var diffCount = diff.length;
+
+        for (var i = 0; i < diffCount; i++) {
+            var diffItem = diff[i];
+
+            switch (diffItem.cmd) {
+                case '=':
+                    oldPoints.push(oldData[diffItem.idx].point);
+                    newPoints.push(newData[diffItem.idx1].point);
+                    prevDiffNotRemove = diffItem;
+                    break;
+                case '+':
+                    // Like growing from sibling data animation
+                    // var siblingData = newData[diffItem.idx + 1] || newData[diffItem.idx - 1];
+
+                    // Keep static
+                    oldPoints.push(newData[diffItem.idx].point);
+                    newPoints.push(newData[diffItem.idx].point);
+                    prevDiffNotRemove = diffItem;
+                    break;
+                case '-':
+                    // Like merging into sibling data animation
+                    var siblingDiffNotRemove = prevDiffNotRemove;
+                    if (! siblingDiffNotRemove) {
+                        // If first element is removing, Find next diff which is not removing
+                        for (var k = i + 1; k < diffCount; k++) {
+                            if (diff[k].cmd !== '-') {
+                                siblingDiffNotRemove = diff[k];
+                                break;
+                            }
+                        }
+                    }
+                    var siblingDataNotRemove = newData[
+                        siblingDiffNotRemove.cmd === '+'
+                        ? siblingDiffNotRemove.idx : siblingDiffNotRemove.idx1
+                    ];
+
+                    oldPoints.push(oldData[diffItem.idx].point);
+                    newPoints.push(siblingDataNotRemove.point);
+            }
+        }
+
+        return {
+            current: oldPoints,
+            next: newPoints
+        };
+    }
+});
\ No newline at end of file

src/data/List.js

@@ -332,9 +332,14 @@ define(function(require) {
             // FIXME
             // All list have the same entries may have problem
             // When processor modify the data besides data index
+
             // Reset data index
             for (var i = 0; i < list.elements.length; i++) {
-                list.elements[i].setDataIndex(i);
+                var el = list.elements[i];
+                // Reset
+                el.setDataIndex(i);
+                el.clearVisual();
+                el.layout = null;
             }
             return list;
         }

src/model/Model.js

@@ -121,6 +121,10 @@ define(function (require) {
             this._visual[key] = val;
         },
 
+        clearVisual: function () {
+            this._visual = null;
+        },
+
         restoreData: function () {},
 
         // Pending

src/model/Series.js

@@ -60,7 +60,11 @@ define(function(require) {
         },
 
         mergeOption: function (newSeriesOption, ecModel) {
-            this._data = this.getInitialData(newSeriesOption, ecModel);
+            var data = this.getInitialData(newSeriesOption, ecModel);
+            // TODO Merge data?
+            if (data) {
+                this._data = data;
+            }
         },
 
         /**
@@ -73,8 +77,12 @@ define(function(require) {
             return this._data;
         },
 
-        // PENDING Clear visual and layout ?
         restoreData: function () {
+
+            // PENDING
+            // Legend may have wrong symbol if visual is cleared
+            // this.clearVisual();
+
             this._data = this._dataBeforeProcessing.cloneShallow();
         }
     });

src/visual/defaultColor.js

@@ -4,8 +4,7 @@ define(function (require) {
         ecModel.eachSeries(function (seriesModel) {
             var colorList = ecModel.get('color');
             seriesModel.setVisual(
-                'color', seriesModel.get('itemStyle.normal.color')
-                         || colorList[seriesModel.seriesIndex]
+                'color', colorList[seriesModel.seriesIndex]
             );
         });
     }