提交 5cce1e77 编写于 作者: S sushuang

Fix inside zoom.

上级 ac0ba7d0
......@@ -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);
......
......@@ -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
}
};
}
......@@ -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
......@@ -46,6 +46,8 @@ under the License.
}
</style>
<div class="chart" id="mainA"></div>
<h1>[ Test minInterval ]&nbsp;&nbsp;&nbsp; yAxis: {minInterval: 1, min: 0}, series.data: [1]</h1>
<div class="chart" id="main0"></div>
<h1>[ Test category axis interval ]&nbsp;&nbsp;&nbsp; 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([
......
......@@ -101,25 +101,23 @@ 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
});
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册