Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 dab7cd22 编写于 作者: S SHUANG SU 提交者： sushuang
浏览文件
操作

fix: remove the page event. But use another way: keep trigger mouse move and... 

fix: remove the page event. But use another way: keep trigger mouse move and mouse up event when dragging instead.
上级 6a3696e0
隐藏空白更改
内联 并排
Showing with 148 addition and 90 deletion
src/component/helper/BrushController.js
浏览文件 @ dab7cd22
......@@ -181,25 +181,8 @@ function BrushController(zr) {
*/
this._handlers = {};
/**
* @private
* @type {Object}
*/
this._localHandlers = {};
/**
* @private
* @type {Object}
*/
this._pageHandlers = {};
each(localMouseHandlers, function (handler, eventName) {
this._handlers[eventName] =
this._localHandlers[eventName] = zrUtil.bind(handler, this);
}, this);
each(pageMouseHandlers, function (handler, eventName) {
this._handlers[eventName] =
this._pageHandlers[eventName] = zrUtil.bind(handler, this);
each(pointerHandlers, function (handler, eventName) {
this._handlers[eventName] = zrUtil.bind(handler, this);
}, this);
}
......@@ -394,7 +377,7 @@ function doEnableBrush(controller, brushOption) {
interactionMutex.take(zr, MUTEX_RESOURCE_KEY, controller._uid);
}
mountHandlers(zr, controller._localHandlers);
mountHandlers(zr, controller._handlers);
controller._brushType = brushOption.brushType;
controller._brushOption = zrUtil.merge(zrUtil.clone(DEFAULT_BRUSH_OPT), brushOption, true);
......@@ -735,8 +718,14 @@ function pointsToRect(points) {
}
function resetCursor(controller, e, localCursorPoint) {
// Check active
if (!controller._brushType) {
if (
// Check active
!controller._brushType
// resetCursor should be always called when mouse is in zr area,
// but not called when mouse is out of zr area to avoid bad influence
// if `mousemove`, `mouseup` are triggered from `document` event.
|| isOutsideZrArea(controller, e)
) {
return;
}
......@@ -764,12 +753,8 @@ function resetCursor(controller, e, localCursorPoint) {
}
function preventDefault(e) {
// Just be worried about bring some side effect to the world
// out of echarts, we do not `preventDefault` for globalout.
if (e.zrIsFromLocal) {
var rawE = e.event;
rawE.preventDefault && rawE.preventDefault();
}
var rawE = e.event;
rawE.preventDefault && rawE.preventDefault();
}
function mainShapeContain(cover, x, y) {
......@@ -844,7 +829,7 @@ function determineBrushType(brushType, panel) {
return brushType;
}
var localMouseHandlers = {
var pointerHandlers = {
mousedown: function (e) {
if (this._dragging) {
......@@ -865,44 +850,38 @@ var localMouseHandlers = {
this._dragging = true;
this._track = [localCursorPoint.slice()];
}
// Mount page handlers only when needed to minimize unexpected side-effect.
mountHandlers(this._zr, this._pageHandlers);
}
},
mousemove: function (e) {
var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
// resetCursor should be always called when mouse is in zr area,
// but not called when mouse is out of zr area.
resetCursor(this, e, localCursorPoint);
}
};
var x = e.offsetX;
var y = e.offsetY;
var pageMouseHandlers = {
var localCursorPoint = this.group.transformCoordToLocal(x, y);
pagemousemove: function (e) {
if (this._dragging) {
var xy = getLocalMouseXY(e, this._zr);
var localCursorPoint = this.group.transformCoordToLocal(xy[0], xy[1]);
resetCursor(this, e, localCursorPoint);
if (this._dragging) {
preventDefault(e);
var eventParams = updateCoverByMouse(this, e, localCursorPoint, false);
eventParams && trigger(this, eventParams);
}
},
pagemouseup: function (e) {
mouseup: function (e) {
handleDragEnd(this, e);
}
};
function handleDragEnd(controller, e) {
if (controller._dragging) {
preventDefault(e);
var xy = getLocalMouseXY(e, controller._zr);
var localCursorPoint = controller.group.transformCoordToLocal(xy[0], xy[1]);
var x = e.offsetX;
var y = e.offsetY;
var localCursorPoint = controller.group.transformCoordToLocal(x, y);
var eventParams = updateCoverByMouse(controller, e, localCursorPoint, true);
controller._dragging = false;
......@@ -911,24 +890,15 @@ function handleDragEnd(controller, e) {
// trigger event shoule be at final, after procedure will be nested.
eventParams && trigger(controller, eventParams);
unmountHandlers(controller._zr, controller._pageHandlers);
}
}
function getLocalMouseXY(event, zr) {
var x = event.offsetX;
var y = event.offsetY;
// var w = zr.getWidth();
// var h = zr.getHeight();
// x < 0 && (x = 0);
// x > w && (x = w);
// y < 0 && (y = 0);
// y > h && (y = h);
return [x, y];
function isOutsideZrArea(controller, x, y) {
var zr = controller._zr;
return x < 0 || x > zr.getWidth() || y < 0 || y > zr.getHeight();
}
/**
* key: brushType
* @type {Object}
......
test/css-transform.html
浏览文件 @ dab7cd22
......@@ -238,18 +238,21 @@ under the License.
grid: {
left: '10%',
right: 2,
bottom: 80
bottom: 100
},
yAxis: {
splitArea: {
show: true
}
},
dataZoom: {
dataZoom: [{
type: 'inside',
start: 10,
end: 30
},
}, {
type: 'slider',
bottom: 40
}],
series: [{
name: 'line',
type: 'line',
......
test/drag-out.html
浏览文件 @ dab7cd22
......@@ -44,7 +44,7 @@ under the License.
position: fixed;
right: 5px;
top: 5px;
width: 120px;
width: 140px;
height: 120px;
box-shadow: 0 0 5px #fff;
border: 2px solid green;
......@@ -72,9 +72,90 @@ under the License.
<div id="live-info-content"></div>
</div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div id="parent-of-main0">
<div id="main0"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="main1"></div>
<div id="main2"></div>
......@@ -84,16 +165,20 @@ under the License.
<script>
var _liveInfoPanel = document.getElementById('live-info-panel');
var _liveInfoContent = document.getElementById('live-info-content');;
var _liveMsg = [];
function _printLiveInfo(msg) {
_liveInfoContent.innerHTML = testHelper.encodeHTML(msg).replace(/\n/g, '<br>');
_liveMsg.push(testHelper.encodeHTML(msg));
_liveMsg = _liveMsg.slice(Math.max(0, _liveMsg.length - 9));
_liveInfoContent.innerHTML = _liveMsg.join('<br>');
}
function _printEvent(event) {
_printLiveInfo([
'type: ' + event.type,
'x: ' + event.offsetX,
'y: ' + event.offsetY,
'isFromLocal: ' + !!event.zrIsFromLocal
].join('\n'));
var x = event.offsetX;
var y = event.offsetY;
x = x != null ? x.toFixed(1) : '-';
y = y != null ? y.toFixed(1) : '-';
_printLiveInfo(
event.type + ' [' + x + ',' + x + ']'
);
}
</script>
......@@ -110,6 +195,11 @@ under the License.
xAxis: {},
yAxis: {},
brush: {},
tooltip: {
enterable: true,
alwaysShowContent: true,
position: [10, 10]
},
series: {
type: 'line',
data: [[11, 22]]
......@@ -120,32 +210,18 @@ under the License.
title: [
'[ Test this case in **PC** / **Touch device** / **WeApp(no document)** ]',
'(1) Before anything clicked, **mousemove** / **click** on both inside and outside echarts.',
'**Live Info Panel** should have nothing.',
'(2) Click "mount page event listeners"',
'**mousemove** / **click** on both inside and outside echarts.',
'**Live Info Panel** should display mouse **xy** and **isFromLocal** correctly.',
'**Live Info Panel** should have mouse events.',
'(2) **mousemove** / **click** on both inside and outside echarts.',
'**Live Info Panel** should display mouse **xy** correctly.',
'drag outside and release, "globalout" event should be displayed fianly (only PC)',
'(3) Click "add stopPropagation on parent"',
'Move outside echarts, **Live Info Panel** should have nothing changed.',
'Move inside echarts, **Live Info Panel** should have page event.'
'drag outside should be as usual.',
'Move inside and outside echarts, **Live Info Panel** should have mouse event.'
],
option: option,
width: 300,
height: 200,
buttons: [{
text: 'mount page event listeners',
onclick: function () {
if (mounted) {
return;
}
mounted = true;
zr.on('pagemousemove', function (event) {
_printEvent(event)
});
zr.on('pagemouseup', function (event) {
_printEvent(event)
});
}
}, {
text: 'add stopPropagation on parent',
onclick: function () {
var parent = document.getElementById('parent-of-main0');
......@@ -160,6 +236,15 @@ under the License.
var mounted;
if (chart) {
zr = chart.getZr();
zr.on('mousemove', function (event) {
_printEvent(event)
});
zr.on('mouseup', function (event) {
_printEvent(event)
});
zr.on('globalout', function (event) {
_printEvent(event)
});
}
});
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或