Fix #2710 (dataZoom location params merge error when using media query)

apache · Mar 4, 2016 · 340794c · 340794c
1 parent 605ea10
commit 340794c
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 128 deletions.
diff --git a/src/component/dataZoom/DataZoomModel.js b/src/component/dataZoom/DataZoomModel.js
@@ -8,7 +8,6 @@ define(function(require) {
     var echarts = require('../../echarts');
     var modelUtil = require('../../util/model');
     var AxisProxy = require('./AxisProxy');
-    var layout = require('../../util/layout');
     var each = zrUtil.each;
     var eachAxisDim = modelUtil.eachAxisDim;
 
@@ -350,13 +349,6 @@ define(function(require) {
             }, this);
         },
 
-        /**
-         * @public
-         */
-        setLayoutParams: function (params) {
-            layout.copyLayoutParams(this.option, params);
-        },
-
         /**
          * @public
          * @return {Array.<number>} [startPercent, endPercent]

diff --git a/src/component/dataZoom/SliderZoomModel.js b/src/component/dataZoom/SliderZoomModel.js
@@ -5,28 +5,28 @@ define(function(require) {
 
     var DataZoomModel = require('./DataZoomModel');
     var layout = require('../../util/layout');
+    var zrUtil = require('zrender/core/util');
 
     var SliderZoomModel = DataZoomModel.extend({
 
         type: 'dataZoom.slider',
 
-        /**
-         * @readOnly
-         */
-        inputPositionParams: null,
+        layoutMode: 'box',
 
         /**
          * @protected
          */
         defaultOption: {
             show: true,
 
+            // ph => placeholder. Using placehoder here because
+            // deault value can only be drived in view stage.
+            right: 'ph',  // Default align to grid rect.
+            top: 'ph',    // Default align to grid rect.
+            width: 'ph',  // Default align to grid rect.
+            height: 'ph', // Default align to grid rect.
             left: null,   // Default align to grid rect.
-            right: null,  // Default align to grid rect.
-            top: null,    // Default align to grid rect.
             bottom: null, // Default align to grid rect.
-            width: null,  // Default align to grid rect.
-            height: null, // Default align to grid rect.
 
             backgroundColor: 'rgba(47,69,84,0)',    // Background of slider zoom component.
             dataBackgroundColor: '#ddd',            // Background of data shadow.
@@ -46,18 +46,21 @@ define(function(require) {
         },
 
         /**
-         * @override
+         * @public
          */
-        init: function (option) {
-            this.inputPositionParams = layout.getLayoutParams(option);
-            SliderZoomModel.superApply(this, 'init', arguments);
+        setDefaultLayoutParams: function (params) {
+            var option = this.option;
+            zrUtil.each(['right', 'top', 'width', 'height'], function (name) {
+                if (option[name] === 'ph') {
+                    option[name] = params[name];
+                };
+            });
         },
 
         /**
          * @override
          */
         mergeOption: function (option) {
-            this.inputPositionParams = layout.getLayoutParams(option);
             SliderZoomModel.superApply(this, 'mergeOption', arguments);
         }
 

diff --git a/src/component/dataZoom/SliderZoomView.js b/src/component/dataZoom/SliderZoomView.js
@@ -166,7 +166,9 @@ define(function (require) {
             // Default align by coordinate system rect.
             var positionInfo = this._orient === HORIZONTAL
                 ? {
-                    left: coordRect.x,
+                    // Why using 'right', because right should be used in vertical,
+                    // and it is better to be consistent for dealing with position param merge.
+                    right: ecSize.width - coordRect.x - coordRect.width,
                     top: (ecSize.height - DEFAULT_FILLER_SIZE - DEFAULT_LOCATION_EDGE_GAP),
                     width: coordRect.width,
                     height: DEFAULT_FILLER_SIZE
@@ -178,14 +180,13 @@ define(function (require) {
                     height: coordRect.height
                 };
 
-            layout.mergeLayoutParam(positionInfo, dataZoomModel.inputPositionParams);
-
             // Write back to option for chart.getOption(). (and may then
             // chart.setOption() again, where current location value is needed);
-            dataZoomModel.setLayoutParams(positionInfo);
+            // dataZoomModel.setLayoutParams(positionInfo);
+            dataZoomModel.setDefaultLayoutParams(positionInfo);
 
             var layoutRect = layout.getLayoutRect(
-                positionInfo,
+                dataZoomModel.option,
                 ecSize,
                 dataZoomModel.padding
             );

diff --git a/test/dataZoom-axis-type.html b/test/dataZoom-axis-type.html
@@ -201,10 +201,23 @@
                         + '<td>endValue:</td><td>' + encodeHTML(rawOpt.endValue) + '</td>'
                         + '</tr>';
                 });
+                var axisOpt = zrUtil.map(resultOpt.xAxis, function (rawOpt) {
+                    return ''
+                        + '<tr>'
+                        + '<td>min:</td><td>' + encodeHTML(rawOpt.min) + '</td>'
+                        + '<td>max:</td><td>' + encodeHTML(rawOpt.max) + '</td>'
+                        + '<td>scale:</td><td>' + encodeHTML(rawOpt.scale) + '</td>'
+                        + '<td>rangeStart:</td><td>' + encodeHTML(rawOpt.rangeStart) + '</td>'
+                        + '<td>rangeEnd:</td><td>' + encodeHTML(rawOpt.rangeEnd) + '</td>'
+                        + '</tr>';
+                });
 
                 el.lastChild.innerHTML = ''
                     + (isInit ? 'ON_INIT: ' : 'ON_EVENT: ') + '<br>'
-                    + '<table><tbody>' + dataZoomOpt.join('') + '</tbody></table>';
+                    + '<table><tbody>'
+                    + dataZoomOpt.join('')
+                    + axisOpt.join('')
+                    + '</tbody></table>';
             }
 
             function encodeHTML(source) {

diff --git a/test/getOption.html b/test/getOption.html
@@ -9,11 +9,17 @@
     <body>
         <style>
         </style>
+        <div>
+            <input type="button" value="exchangeXY" onclick="go.exchangeXY();">
+            <input type="button" value="illegal use getModel.option" onclick="go.illegal();">
+            <input type="button" value="dataZoom restore (error if view changed)" onclick="go.dataZoomRestore();">
+        </div>
         <div id="main"></div>
         <script>
 
             var chart;
             var myChart;
+            var go;
 
             require([
                 'echarts',
@@ -34,108 +40,100 @@
                     renderer: 'canvas'
                 });
 
-// -------------------------------------------------------------------
-// -------------------------------------------------------------------
-// -------------------------------------------------------------------
 
-
-option = {
-    toolbox: {
-        feature: {
-            dataZoom: {}
-        }
-    },
-    dataZoom: [{
-        show: true
-    }, {
-        type: 'inside',
-    }],
-    legend: {
-        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
-    },
-    xAxis : [
-        {
-            type : 'category',
-            boundaryGap : false,
-            data : ['周一','周二','周三','周四','周五','周六','周日']
-        }
-    ],
-    yAxis : [
-        {
-            type : 'value'
-        }
-    ],
-    series : [
-        {
-            name:'邮件营销',
-            type:'line',
-            stack: '总量',
-            data:[120, 132, 101, 134, 90, 230, 210]
-        },
-        {
-            name:'联盟广告',
-            type:'line',
-            stack: '总量',
-            data:[220, 182, 191, 234, 290, 330, 310]
-        },
-        {
-            name:'视频广告',
-            type:'line',
-            stack: '总量',
-            data:[150, 232, 201, 154, 190, 330, 410]
-        },
-        {
-            name:'直接访问',
-            type:'line',
-            stack: '总量',
-            data:[320, 332, 301, 334, 390, 330, 320]
-        },
-        {
-            name:'搜索引擎',
-            type:'line',
-            stack: '总量',
-            data:[820, 932, 901, 934, 1290, 1330, 1320]
-        }
-    ]
-};
-
-
-setTimeout(function () {
-    resetOption();
-
-    setTimeout(function () {
-        try {
-            resetOptionIllegally();
-            alert('error');
-        }
-        catch (e) {
-            console.log('ok');
-        }
-    }, 2000);
-}, 3000);
-
-function resetOption() {
-    var option = myChart.getOption();
-    var temp;
-    temp = option.xAxis;
-    option.xAxis =  option.yAxis;
-    option.yAxis = temp;
-    myChart.setOption(option);
-}
-
-function resetOptionIllegally() {
-    var option = myChart.getModel.option;
-    var temp;
-    temp = option.xAxis;
-    option.xAxis =  option.yAxis;
-    option.yAxis = temp;
-    myChart.setOption(option);
-}
-
-
-// -------------------------------------------------------------------
-// -------------------------------------------------------------------
-// -------------------------------------------------------------------
+                option = {
+                    toolbox: {
+                        feature: {
+                            dataZoom: {}
+                        }
+                    },
+                    dataZoom: [{
+                        show: true,
+                        end: 80
+                    }, {
+                        type: 'inside',
+                        end: 80
+                    }],
+                    legend: {
+                        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
+                    },
+                    xAxis : [
+                        {
+                            type : 'category',
+                            boundaryGap : false,
+                            data : ['周一','周二','周三','周四','周五','周六','周日']
+                        }
+                    ],
+                    yAxis : [
+                        {
+                            type : 'value'
+                        }
+                    ],
+                    series : [
+                        {
+                            name:'邮件营销',
+                            type:'line',
+                            stack: '总量',
+                            data:[120, 132, 101, 134, 90, 230, 210]
+                        },
+                        {
+                            name:'联盟广告',
+                            type:'line',
+                            stack: '总量',
+                            data:[220, 182, 191, 234, 290, 330, 310]
+                        },
+                        {
+                            name:'视频广告',
+                            type:'line',
+                            stack: '总量',
+                            data:[150, 232, 201, 154, 190, 330, 410]
+                        },
+                        {
+                            name:'直接访问',
+                            type:'line',
+                            stack: '总量',
+                            data:[320, 332, 301, 334, 390, 330, 320]
+                        },
+                        {
+                            name:'搜索引擎',
+                            type:'line',
+                            stack: '总量',
+                            data:[820, 932, 901, 934, 1290, 1330, 1320]
+                        }
+                    ]
+                };
+
+
+                go = {
+                    exchangeXY: function () {
+                        var option = myChart.getOption();
+                        var temp;
+                        temp = option.xAxis;
+                        option.xAxis = option.yAxis;
+                        option.yAxis = temp;
+                        myChart.setOption(option);
+                    },
+
+                    illegal: function () {
+                        try {
+                            var option = myChart.getModel.option;
+                            var temp;
+                            temp = option.xAxis;
+                            option.xAxis = option.yAxis;
+                            option.yAxis = temp;
+                            myChart.setOption(option);
+                            alert('error');
+                        }
+                        catch (e) {
+                            alert('ok');
+                        }
+                    },
+
+                    dataZoomRestore: function () {
+                        var option = myChart.getOption();
+                        myChart.setOption(option);
+                    }
+                };