This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 5cce1e77ee8096e32ca30654385c45d22335affd Author: sushuang <[email protected]> AuthorDate: Thu May 31 00:13:20 2018 +0800 Fix inside zoom. --- src/component/dataZoom/InsideZoomView.js | 13 +----- src/component/dataZoom/roams.js | 62 ++++++++++++++++------------ src/component/helper/RoamController.js | 63 +++++++++++++++++----------- test/axis-interval.html | 71 ++++++++++++++++++++++++++++++++ test/dataZoom-scroll.html | 20 ++++----- 5 files changed, 157 insertions(+), 72 deletions(-) diff --git a/src/component/dataZoom/InsideZoomView.js b/src/component/dataZoom/InsideZoomView.js index 36877a2..48b98e3 100644 --- a/src/component/dataZoom/InsideZoomView.js +++ b/src/component/dataZoom/InsideZoomView.js @@ -61,7 +61,6 @@ var InsideZoomView = DataZoomView.extend({ zrUtil.each(coordInfoList, function (coordInfo) { var coordModel = coordInfo.model; - var dataZoomOption = dataZoomModel.option; var getRange = {}; zrUtil.each(['pan', 'zoom', 'scrollMove'], function (eventName) { @@ -77,16 +76,8 @@ var InsideZoomView = DataZoomView.extend({ return coordModel.coordinateSystem.containPoint([x, y]); }, dataZoomId: dataZoomModel.id, - throttleRate: dataZoomModel.get('throttle', true), - getRange: getRange, - zoomLock: dataZoomOption.zoomLock, - disabled: dataZoomOption.disabled, - roamControllerOpt: { - zoomOnMouseWheel: dataZoomOption.zoomOnMouseWheel, - moveOnMouseMove: dataZoomOption.moveOnMouseMove, - moveOnMouseWheel: dataZoomOption.moveOnMouseWheel, - preventDefaultMouseMove: dataZoomOption.preventDefaultMouseMove - } + dataZoomModel: dataZoomModel, + getRange: getRange } ); }, this); diff --git a/src/component/dataZoom/roams.js b/src/component/dataZoom/roams.js index 25f205a..0d7d80a 100644 --- a/src/component/dataZoom/roams.js +++ b/src/component/dataZoom/roams.js @@ -27,7 +27,6 @@ import * as zrUtil from 'zrender/src/core/util'; import RoamController from '../../component/helper/RoamController'; import * as throttleUtil from '../../util/throttle'; -var curry = zrUtil.curry; var ATTR = '\0_ec_dataZoom_roams'; @@ -40,13 +39,11 @@ var ATTR = '\0_ec_dataZoom_roams'; * @param {Function} dataZoomInfo.containsPoint * @param {Array.<string>} dataZoomInfo.allCoordIds * @param {string} dataZoomInfo.dataZoomId - * @param {number} dataZoomInfo.throttleRate * @param {Object} dataZoomInfo.getRange * @param {Function} dataZoomInfo.getRange.pan * @param {Function} dataZoomInfo.getRange.zoom * @param {Function} dataZoomInfo.getRange.scrollMove - * @param {boolean} [dataZoomInfo.zoomLock] - * @param {boolean} [dataZoomInfo.disabled] + * @param {boolean} dataZoomInfo.dataZoomModel */ export function register(api, dataZoomInfo) { var store = giveStore(api); @@ -93,7 +90,7 @@ export function register(api, dataZoomInfo) { throttleUtil.createOrUpdate( record, 'dispatchAction', - dataZoomInfo.throttleRate, + dataZoomInfo.dataZoomModel.get('throttle', true), 'fixRate' ); } @@ -141,10 +138,24 @@ function createController(api, newRecord) { zrUtil.each(['pan', 'zoom', 'scrollMove'], function (eventName) { controller.on(eventName, function (event) { - wrapAndDispatch(newRecord, function (info) { + var batch = []; + + zrUtil.each(newRecord.dataZoomInfos, function (info) { + if (!event.isAvailableBehavior(info.dataZoomModel.option)) { + return; + } + var method = (info.getRange || {})[eventName]; - return method && method(newRecord.controller, event); + var range = method && method(newRecord.controller, event); + + !info.dataZoomModel.get('disabled', true) && range && batch.push({ + dataZoomId: info.dataZoomId, + start: range[0], + end: range[1] + }); }); + + batch.length && newRecord.dispatchAction(batch); }); }); @@ -160,21 +171,6 @@ function cleanStore(store) { }); } -function wrapAndDispatch(record, getRange) { - var batch = []; - - zrUtil.each(record.dataZoomInfos, function (info) { - var range = getRange(info); - !info.disabled && range && batch.push({ - dataZoomId: info.dataZoomId, - start: range[0], - end: range[1] - }); - }); - - batch.length && record.dispatchAction(batch); -} - /** * This action will be throttled. */ @@ -190,7 +186,6 @@ function dispatchAction(api, batch) { */ function mergeControllerParams(dataZoomInfos) { var controlType; - var opt = {}; // DO NOT use reserved word (true, false, undefined) as key literally. Even if encapsulated // as string, it is probably revert to reserved word by compress tool. See #7411. var prefix = 'type_'; @@ -200,17 +195,30 @@ function mergeControllerParams(dataZoomInfos) { 'type_false': 0, 'type_undefined': -1 }; + var preventDefaultMouseMove = true; + zrUtil.each(dataZoomInfos, function (dataZoomInfo) { - var oneType = dataZoomInfo.disabled ? false : dataZoomInfo.zoomLock ? 'move' : true; + var dataZoomModel = dataZoomInfo.dataZoomModel; + var oneType = dataZoomModel.get('disabled', true) + ? false + : dataZoomModel.get('zoomLock', true) + ? 'move' + : true; if (typePriority[prefix + oneType] > typePriority[prefix + controlType]) { controlType = oneType; } - // Do not support that different 'shift'/'ctrl'/'alt' setting used in one coord sys. - zrUtil.extend(opt, dataZoomInfo.roamControllerOpt); + // 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); }); return { controlType: controlType, - opt: opt + opt: { + zoomOnMouseWheel: true, + moveOnMouseMove: true, + moveOnMouseWheel: true, + preventDefaultMouseMove: !!preventDefaultMouseMove + } }; } diff --git a/src/component/helper/RoamController.js b/src/component/helper/RoamController.js index fcee269..f2bcef7 100644 --- a/src/component/helper/RoamController.js +++ b/src/component/helper/RoamController.js @@ -74,9 +74,9 @@ function RoamController(zr) { * which can be null/undefined or true/false * or 'pan/move' or 'zoom'/'scale' * @param {Object} [opt] - * @param {Object} [opt.zoomOnMouseWheel=true] - * @param {Object} [opt.moveOnMouseMove=true] - * @param {Object} [opt.moveOnMouseWheel=false] + * @param {Object} [opt.zoomOnMouseWheel=true] The value can be: true / false / 'shift' / 'ctrl' / 'alt'. + * @param {Object} [opt.moveOnMouseMove=true] The value can be: true / false / 'shift' / 'ctrl' / 'alt'. + * @param {Object} [opt.moveOnMouseWheel=false] The value can be: true / false / 'shift' / 'ctrl' / 'alt'. * @param {Object} [opt.preventDefaultMouseMove=true] When pan. */ this.enable = function (controlType, opt) { @@ -87,6 +87,7 @@ function RoamController(zr) { this._opt = zrUtil.defaults(zrUtil.clone(opt) || {}, { zoomOnMouseWheel: true, moveOnMouseMove: true, + // By default, wheel do not trigger move. moveOnMouseWheel: false, preventDefaultMouseMove: true }); @@ -149,7 +150,7 @@ function mousedown(e) { function mousemove(e) { if (eventTool.notLeftMouse(e) - || !checkKeyBinding(this, 'moveOnMouseMove', e) + || !isAvailableBehavior('moveOnMouseMove', e, this._opt) || !this._dragging || e.gestureEvent === 'pinch' || interactionMutex.isTaken(this._zr, 'globalPan') @@ -171,7 +172,9 @@ function mousemove(e) { this._opt.preventDefaultMouseMove && eventTool.stop(e.event); - this.trigger('pan', {dx: dx, dy: dy, oldX: oldX, oldY: oldY, newX: x, newY: y}); + trigger(this, 'pan', 'moveOnMouseMove', e, { + dx: dx, dy: dy, oldX: oldX, oldY: oldY, newX: x, newY: y + }); } function mouseup(e) { @@ -181,8 +184,8 @@ function mouseup(e) { } function mousewheel(e) { - var shouldZoom = checkKeyBinding(this, 'zoomOnMouseWheel', e); - var shouldMove = checkKeyBinding(this, 'moveOnMouseWheel', e); + var shouldZoom = isAvailableBehavior('zoomOnMouseWheel', e, this._opt); + var shouldMove = isAvailableBehavior('moveOnMouseWheel', e, this._opt); var wheelDelta = e.wheelDelta; var absWheelDeltaDelta = Math.abs(wheelDelta); var originX = e.offsetX; @@ -205,19 +208,19 @@ function mousewheel(e) { // wheelDelta of mouse wheel is bigger than touch pad. var factor = absWheelDeltaDelta > 3 ? 1.4 : absWheelDeltaDelta > 1 ? 1.2 : 1.1; var scale = wheelDelta > 0 ? factor : 1 / factor; - checkPointerAndTrigger( - 'zoom', this, e, {scale: scale, originX: originX, originY: originY} - ); + checkPointerAndTrigger(this, 'zoom', 'zoomOnMouseWheel', 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); // wheelDelta of mouse wheel is bigger than touch pad. var scrollDelta = (wheelDelta > 0 ? 1 : -1) * (absDelta > 3 ? 0.4 : absDelta > 1 ? 0.15 : 0.05); - checkPointerAndTrigger( - 'scrollMove', this, e, {scrollDelta: scrollDelta, originX: originX, originY: originY} - ); + checkPointerAndTrigger(this, 'scrollMove', 'moveOnMouseWheel', e, { + scrollDelta: scrollDelta, originX: originX, originY: originY + }); } } @@ -226,12 +229,12 @@ function pinch(e) { return; } var scale = e.pinchScale > 1 ? 1.1 : 1 / 1.1; - checkPointerAndTrigger( - 'zoom', this, e, {scale: scale, originX: e.pinchX, originY: e.pinchY} - ); + checkPointerAndTrigger(this, 'zoom', null, e, { + scale: scale, originX: e.pinchX, originY: e.pinchY + }); } -function checkPointerAndTrigger(eventName, controller, e, contollerEvent) { +function checkPointerAndTrigger(controller, eventName, behaviorToCheck, e, contollerEvent) { if (controller.pointerChecker && controller.pointerChecker(e, contollerEvent.originX, contollerEvent.originY) ) { @@ -240,14 +243,28 @@ function checkPointerAndTrigger(eventName, controller, e, contollerEvent) { // page sliding is disabled, contrary to expectation. eventTool.stop(e.event); - controller.trigger(eventName, contollerEvent); + trigger(controller, eventName, behaviorToCheck, e, contollerEvent); } } -function checkKeyBinding(roamController, prop, e) { - var setting = roamController._opt[prop]; - return setting - && (!zrUtil.isString(setting) || e.event[setting + 'Key']); +function trigger(controller, eventName, behaviorToCheck, e, contollerEvent) { + // Also provide behavior checker for event listener, for some case that + // multiple components share one listener. + contollerEvent.isAvailableBehavior = zrUtil.bind(isAvailableBehavior, null, behaviorToCheck, e); + controller.trigger(eventName, contollerEvent); +} + +// settings: { +// zoomOnMouseWheel +// moveOnMouseMove +// moveOnMouseWheel +// } +// The value can be: true / false / 'shift' / 'ctrl' / 'alt'. +function isAvailableBehavior(behaviorToCheck, e, settings) { + var setting = settings[behaviorToCheck]; + return !behaviorToCheck || ( + setting && (!zrUtil.isString(setting) || e.event[setting + 'Key']) + ); } export default RoamController; \ No newline at end of file diff --git a/test/axis-interval.html b/test/axis-interval.html index d67d3ad..70ae3ab 100644 --- a/test/axis-interval.html +++ b/test/axis-interval.html @@ -46,6 +46,8 @@ under the License. } </style> + <div class="chart" id="mainA"></div> + <h1>[ Test minInterval ] yAxis: {minInterval: 1, min: 0}, series.data: [1]</h1> <div class="chart" id="main0"></div> <h1>[ Test category axis interval ] interval of xAxis should be approperiate after rotated.</h1> @@ -54,6 +56,75 @@ under the License. <div class="chart" id="main2"></div> + + + + + + + <script> + + require([ + 'echarts' + ], function (echarts) { + + var dataCount = 200; + var data = []; + var d = +new Date(2015, 3, 13); + var oneDay = 3600 * 1000; + for (var i = 0; i < dataCount; i++) { + data.push([d, Math.random()]); + d += 2.5 * oneDay; + } + + var startValue = '2015-04-24T04:21'; + var endValue = '2015-04-24T10:12'; + + var option = { + tooltip: { + trigger: 'axis' + }, + dataZoom: [{ + startValue: startValue, + endValue: endValue + }, { + type: 'inside', + startValue: startValue, + endValue: endValue + }], + grid: { + left: '3%', + right: '4%', + bottom: 60, + containLabel: true + }, + xAxis: { + type: 'time', + splitNumber: 7 + }, + yAxis: {}, + series: [ + { + type:'line', + data: data + } + ] + }; + + testHelper.create(echarts, 'mainA', { + title: 'xAxis (type: time) should be 1 hour interval', + option: option + }); + }); + + </script> + + + + + + + <script> require([ diff --git a/test/dataZoom-scroll.html b/test/dataZoom-scroll.html index f5a8cf0..bb2dd3d 100644 --- a/test/dataZoom-scroll.html +++ b/test/dataZoom-scroll.html @@ -103,23 +103,21 @@ under the License. dataZoom: [ { type: 'inside', + zoomOnMouseWheel: false, + xAxisIndex: 0, + // zoomLock: true, + start: 30, + end: 40 + }, + { + type: 'inside', yAxisIndex: 0, zoomOnMouseWheel: false, - // moveOnMouseMove: 'alt', moveOnMouseWheel: true, // zoomLock: true, start: 30, end: 40 }, - // { - // type: 'inside', - // // zoomOnMouseWheel: false, - // // moveOnMouseMove: 'alt', - // yAxisIndex: 0, - // zoomLock: true, - // start: 30, - // end: 40 - // }, { type: 'slider', start: 30, @@ -133,7 +131,7 @@ under the License. }; testHelper.create(echarts, 'd3', { - title: 'Simulate browser scroll bar', + title: 'Simulate browser scroll bar on y scroll', option: option, height: 600 }); -- To stop receiving notification emails like this one, please contact [email protected]. --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
