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 2018/09/05 20:41:31 UTC
[incubator-echarts] branch release updated: fix: datazoom scroll
direction.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/release by this push:
new 1c2b29b fix: datazoom scroll direction.
1c2b29b is described below
commit 1c2b29b5ac94cb80f39050153e74b34b38e5f17d
Author: sushuang <su...@gmail.com>
AuthorDate: Thu Sep 6 04:41:09 2018 +0800
fix: datazoom scroll direction.
---
src/component/dataZoom/InsideZoomView.js | 5 +-
src/component/dataZoom/roams.js | 6 +
src/component/helper/RoamController.js | 8 +-
test/dataZoom-scroll.html | 206 ++++++++++++++++++++++++++++++-
test/finished.html | 27 ++--
test/largeScatterWithEmpty.html | 24 +---
6 files changed, 242 insertions(+), 34 deletions(-)
diff --git a/src/component/dataZoom/InsideZoomView.js b/src/component/dataZoom/InsideZoomView.js
index 48b98e3..b298227 100644
--- a/src/component/dataZoom/InsideZoomView.js
+++ b/src/component/dataZoom/InsideZoomView.js
@@ -153,7 +153,10 @@ var roamHandlers = {
* @this {module:echarts/component/dataZoom/InsideZoomView}
*/
scrollMove: makeMover(function (range, axisModel, coordInfo, coordSysName, controller, e) {
- return (range[1] - range[0]) * e.scrollDelta;
+ var directionInfo = getDirectionInfo[coordSysName](
+ [0, 0], [e.scrollDelta, e.scrollDelta], axisModel, controller, coordInfo
+ );
+ return directionInfo.signal * (range[1] - range[0]) * e.scrollDelta;
})
};
diff --git a/src/component/dataZoom/roams.js b/src/component/dataZoom/roams.js
index 0d7d80a..ddcba96 100644
--- a/src/component/dataZoom/roams.js
+++ b/src/component/dataZoom/roams.js
@@ -141,6 +141,8 @@ function createController(api, newRecord) {
var batch = [];
zrUtil.each(newRecord.dataZoomInfos, function (info) {
+ // Check whether the behaviors (zoomOnMouseWheel, moveOnMouseMove,
+ // moveOnMouseWheel, ...) enabled.
if (!event.isAvailableBehavior(info.dataZoomModel.option)) {
return;
}
@@ -207,6 +209,7 @@ function mergeControllerParams(dataZoomInfos) {
if (typePriority[prefix + oneType] > typePriority[prefix + controlType]) {
controlType = oneType;
}
+
// Prevent default move event by default. If one false, do not prevent. Otherwise
// users may be confused why it does not work when multiple insideZooms exist.
preventDefaultMouseMove &= dataZoomModel.get('preventDefaultMouseMove', true);
@@ -215,6 +218,9 @@ function mergeControllerParams(dataZoomInfos) {
return {
controlType: controlType,
opt: {
+ // RoamController will enable all of these functionalities,
+ // and the final behavior is determined by its event listener
+ // provided by each inside zoom.
zoomOnMouseWheel: true,
moveOnMouseMove: true,
moveOnMouseWheel: true,
diff --git a/src/component/helper/RoamController.js b/src/component/helper/RoamController.js
index f2bcef7..7160e67 100644
--- a/src/component/helper/RoamController.js
+++ b/src/component/helper/RoamController.js
@@ -195,7 +195,11 @@ function mousewheel(e) {
if (wheelDelta === 0 || (!shouldZoom && !shouldMove)) {
return;
}
- // console.log(wheelDelta);
+
+ // If both `shouldZoom` and `shouldMove` is true, trigger
+ // their event both, and the final behavior is determined
+ // by event listener themselves.
+
if (shouldZoom) {
// Convenience:
// Mac and VM Windows on Mac: scroll up: zoom out.
@@ -212,7 +216,7 @@ function mousewheel(e) {
scale: scale, originX: originX, originY: originY
});
}
- // console.log(shouldMove);
+
if (shouldMove) {
// FIXME: Should do more test in different environment.
var absDelta = Math.abs(wheelDelta);
diff --git a/test/dataZoom-scroll.html b/test/dataZoom-scroll.html
index bb2dd3d..4f20b75 100644
--- a/test/dataZoom-scroll.html
+++ b/test/dataZoom-scroll.html
@@ -44,6 +44,8 @@ under the License.
</style>
<div class="chart" id="d3"></div>
+ <div class="chart" id="d4"></div>
+ <div class="chart" id="d5"></div>
@@ -133,7 +135,7 @@ under the License.
testHelper.create(echarts, 'd3', {
title: 'Simulate browser scroll bar on y scroll',
option: option,
- height: 600
+ height: 400
});
})
</script>
@@ -141,5 +143,207 @@ under the License.
+
+
+ <script>
+ require([
+ 'data/rainfall.json',
+ 'echarts'
+ ], function (data, echarts) {
+
+ var option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: [
+ {
+ show: true,
+ borderWidth: 0
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {show: true},
+ splitLine: {show: false},
+ data: data.category,
+ gridIndex: 0
+ }
+ ],
+ yAxis: [
+ {
+ boundaryGap: false,
+ axisLabel: {
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#666'
+ }
+ },
+ gridIndex: 0,
+ inverse: true
+ }
+ ],
+ series: [
+ {
+ name: '降水量',
+ type: 'line',
+ data: data.rainfall,
+ itemStyle: {
+ normal: {
+ areaStyle: {}
+ }
+ },
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ }
+ ],
+ dataZoom: [
+ {
+ type: 'inside',
+ zoomOnMouseWheel: false,
+ xAxisIndex: 0,
+ // zoomLock: true,
+ start: 80,
+ end: 100
+ },
+ {
+ type: 'slider',
+ start: 30,
+ end: 40
+ },
+ {
+ type: 'inside',
+ yAxisIndex: 0,
+ zoomOnMouseWheel: false,
+ moveOnMouseWheel: true,
+ // zoomLock: true,
+ start: 30,
+ end: 40
+ },
+ {
+ type: 'slider',
+ yAxisIndex: 0
+ }
+ ]
+ };
+
+ testHelper.create(echarts, 'd4', {
+ title: [
+ 'Simulate browser scroll bar on y scroll, y axis inversed',
+ 'The scroll direction should be the same as page scroll'
+ ],
+ option: option,
+ height: 400
+ });
+ })
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require([
+ 'data/rainfall.json',
+ 'echarts'
+ ], function (data, echarts) {
+
+ var option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: [
+ {
+ show: true,
+ borderWidth: 0
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {show: true},
+ splitLine: {show: false},
+ data: data.category,
+ gridIndex: 0,
+ inverse: true
+ }
+ ],
+ yAxis: [
+ {
+ boundaryGap: false,
+ axisLabel: {
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#666'
+ }
+ },
+ gridIndex: 0
+ }
+ ],
+ series: [
+ {
+ name: '降水量',
+ type: 'line',
+ data: data.rainfall,
+ itemStyle: {
+ normal: {
+ areaStyle: {}
+ }
+ },
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ }
+ ],
+ dataZoom: [
+ {
+ type: 'inside',
+ zoomOnMouseWheel: false,
+ yAxisIndex: 0,
+ // zoomLock: true,
+ start: 80,
+ end: 100
+ },
+ {
+ type: 'slider',
+ yAxisIndex: 0,
+ start: 30,
+ end: 40
+ },
+ {
+ type: 'inside',
+ xAxisIndex: 0,
+ zoomOnMouseWheel: false,
+ moveOnMouseWheel: true,
+ // zoomLock: true,
+ start: 30,
+ end: 40
+ },
+ {
+ type: 'slider',
+ xAxisIndex: 0
+ }
+ ]
+ };
+
+ testHelper.create(echarts, 'd5', {
+ title: [
+ 'Simulate browser scroll bar on x scroll, x axis inversed',
+ 'The scroll direction should be the same as page scroll'
+ ],
+ option: option,
+ height: 400
+ });
+ })
+ </script>
+
+
+
</body>
</html>
\ No newline at end of file
diff --git a/test/finished.html b/test/finished.html
index d5ed2eb..c195098 100644
--- a/test/finished.html
+++ b/test/finished.html
@@ -42,29 +42,32 @@ under the License.
position: absolute;
right: 10px;
top: 10px;
- width: 220px;
- height: 200px;
+ width: 200px;
+ height: 180px;
background: #fff;
border: 5px solid rgba(0,0,0,0.5);
+ z-index: 100;
}
.snapshot-finished {
position: absolute;
right: 10px;
- bottom: 10px;
- width: 220px;
- height: 200px;
+ bottom: 30px;
+ width: 200px;
+ height: 180px;
background: #fff;
border: 5px solid rgba(0,0,0,0.5);
+ z-index: 100;
}
.snapshot-info {
position: absolute;
right: 10px;
- width: 220px;
+ width: 200px;
text-align: center;
background: #333;
color: #fff;
padding: 2px 5px;
font-size: 12px;
+ z-index: 100;
}
.snapshot-info span {
color: yellow;
@@ -191,7 +194,10 @@ under the License.
};
var chart = testHelper.create(echarts, 'main0', {
- title: 'finished should be triggered, and not repeatly',
+ title: [
+ 'finished should be triggered, and not repeatly',
+ 'finished should not triggered before real finished'
+ ],
option: option
});
@@ -208,7 +214,8 @@ under the License.
require(['echarts'], function (echarts) {
var option = {
legend: {},
- animationDurationUpdate: 1500,
+ animationDuration: 4000,
+ animationDurationUpdate: 5500,
dataset: {
source: [
{name: 'a', value: 123},
@@ -224,8 +231,8 @@ under the License.
var chart = testHelper.create(echarts, 'main1', {
title: 'Check animation normal. \nfinished should be triggered, and not repeatly',
- option: option,
- info: option
+ option: option
+ // info: option
});
chart && enableSnapshot(chart, 'main1');
diff --git a/test/largeScatterWithEmpty.html b/test/largeScatterWithEmpty.html
index cfa6868..4d8a3d0 100644
--- a/test/largeScatterWithEmpty.html
+++ b/test/largeScatterWithEmpty.html
@@ -49,8 +49,8 @@ under the License.
right: 0;
}
.chart {
- margin: 100px;
- background: #333;
+ margin: 10px;
+ /* background: #333; */
height: 300px;
}
</style>
@@ -58,7 +58,7 @@ under the License.
<div style="padding: 100px;">
<h2>'-' exists in data. tooltip shoule be displayed normally.</h2>
- <div class="chart" id="main"></div>
+ <div class="chart" id="main0"></div>
</div>
@@ -74,25 +74,9 @@ under the License.
require([
'echarts'
- // 'echarts/chart/line',
- // 'echarts/chart/bar',
- // 'echarts/chart/pie',
- // 'echarts/chart/scatter',
- // 'echarts/chart/map',
- // 'echarts/chart/parallel',
- // 'echarts/chart/radar',
- // 'echarts/component/grid',
- // 'echarts/component/polar',
- // 'echarts/component/geo',
- // 'echarts/component/singleAxis',
- // 'echarts/component/legend',
- // 'echarts/component/tooltip',
- // 'echarts/component/toolbox',
- // 'echarts/component/visualMap',
- // 'echarts/component/dataZoom'
], function (ec) {
echarts = ec;
- chart = myChart = echarts.init(document.getElementById('main'));
+ chart = myChart = echarts.init(document.getElementById('main0'));
option = {
tooltip : {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org