358 lines
9.6 KiB
JavaScript
358 lines
9.6 KiB
JavaScript
|
var util = require("./core/util");
|
|||
|
|
|||
|
var vec2 = require("./core/vector");
|
|||
|
|
|||
|
var Draggable = require("./mixin/Draggable");
|
|||
|
|
|||
|
var Eventful = require("./mixin/Eventful");
|
|||
|
|
|||
|
var eventTool = require("./core/event");
|
|||
|
|
|||
|
var GestureMgr = require("./core/GestureMgr");
|
|||
|
|
|||
|
var SILENT = 'silent';
|
|||
|
|
|||
|
function makeEventPacket(eveType, targetInfo, event) {
|
|||
|
return {
|
|||
|
type: eveType,
|
|||
|
event: event,
|
|||
|
// target can only be an element that is not silent.
|
|||
|
target: targetInfo.target,
|
|||
|
// topTarget can be a silent element.
|
|||
|
topTarget: targetInfo.topTarget,
|
|||
|
cancelBubble: false,
|
|||
|
offsetX: event.zrX,
|
|||
|
offsetY: event.zrY,
|
|||
|
gestureEvent: event.gestureEvent,
|
|||
|
pinchX: event.pinchX,
|
|||
|
pinchY: event.pinchY,
|
|||
|
pinchScale: event.pinchScale,
|
|||
|
wheelDelta: event.zrDelta,
|
|||
|
zrByTouch: event.zrByTouch,
|
|||
|
which: event.which,
|
|||
|
stop: stopEvent
|
|||
|
};
|
|||
|
}
|
|||
|
|
|||
|
function stopEvent(event) {
|
|||
|
eventTool.stop(this.event);
|
|||
|
}
|
|||
|
|
|||
|
function EmptyProxy() {}
|
|||
|
|
|||
|
EmptyProxy.prototype.dispose = function () {};
|
|||
|
|
|||
|
var handlerNames = ['click', 'dblclick', 'mousewheel', 'mouseout', 'mouseup', 'mousedown', 'mousemove', 'contextmenu'];
|
|||
|
/**
|
|||
|
* @alias module:zrender/Handler
|
|||
|
* @constructor
|
|||
|
* @extends module:zrender/mixin/Eventful
|
|||
|
* @param {module:zrender/Storage} storage Storage instance.
|
|||
|
* @param {module:zrender/Painter} painter Painter instance.
|
|||
|
* @param {module:zrender/dom/HandlerProxy} proxy HandlerProxy instance.
|
|||
|
* @param {HTMLElement} painterRoot painter.root (not painter.getViewportRoot()).
|
|||
|
*/
|
|||
|
|
|||
|
var Handler = function (storage, painter, proxy, painterRoot) {
|
|||
|
Eventful.call(this);
|
|||
|
this.storage = storage;
|
|||
|
this.painter = painter;
|
|||
|
this.painterRoot = painterRoot;
|
|||
|
proxy = proxy || new EmptyProxy();
|
|||
|
/**
|
|||
|
* Proxy of event. can be Dom, WebGLSurface, etc.
|
|||
|
*/
|
|||
|
|
|||
|
this.proxy = null;
|
|||
|
/**
|
|||
|
* {target, topTarget, x, y}
|
|||
|
* @private
|
|||
|
* @type {Object}
|
|||
|
*/
|
|||
|
|
|||
|
this._hovered = {};
|
|||
|
/**
|
|||
|
* @private
|
|||
|
* @type {Date}
|
|||
|
*/
|
|||
|
|
|||
|
this._lastTouchMoment;
|
|||
|
/**
|
|||
|
* @private
|
|||
|
* @type {number}
|
|||
|
*/
|
|||
|
|
|||
|
this._lastX;
|
|||
|
/**
|
|||
|
* @private
|
|||
|
* @type {number}
|
|||
|
*/
|
|||
|
|
|||
|
this._lastY;
|
|||
|
/**
|
|||
|
* @private
|
|||
|
* @type {module:zrender/core/GestureMgr}
|
|||
|
*/
|
|||
|
|
|||
|
this._gestureMgr;
|
|||
|
Draggable.call(this);
|
|||
|
this.setHandlerProxy(proxy);
|
|||
|
};
|
|||
|
|
|||
|
Handler.prototype = {
|
|||
|
constructor: Handler,
|
|||
|
setHandlerProxy: function (proxy) {
|
|||
|
if (this.proxy) {
|
|||
|
this.proxy.dispose();
|
|||
|
}
|
|||
|
|
|||
|
if (proxy) {
|
|||
|
util.each(handlerNames, function (name) {
|
|||
|
proxy.on && proxy.on(name, this[name], this);
|
|||
|
}, this); // Attach handler
|
|||
|
|
|||
|
proxy.handler = this;
|
|||
|
}
|
|||
|
|
|||
|
this.proxy = proxy;
|
|||
|
},
|
|||
|
mousemove: function (event) {
|
|||
|
var x = event.zrX;
|
|||
|
var y = event.zrY;
|
|||
|
var lastHovered = this._hovered;
|
|||
|
var lastHoveredTarget = lastHovered.target; // If lastHoveredTarget is removed from zr (detected by '__zr') by some API call
|
|||
|
// (like 'setOption' or 'dispatchAction') in event handlers, we should find
|
|||
|
// lastHovered again here. Otherwise 'mouseout' can not be triggered normally.
|
|||
|
// See #6198.
|
|||
|
|
|||
|
if (lastHoveredTarget && !lastHoveredTarget.__zr) {
|
|||
|
lastHovered = this.findHover(lastHovered.x, lastHovered.y);
|
|||
|
lastHoveredTarget = lastHovered.target;
|
|||
|
}
|
|||
|
|
|||
|
var hovered = this._hovered = this.findHover(x, y);
|
|||
|
var hoveredTarget = hovered.target;
|
|||
|
var proxy = this.proxy;
|
|||
|
proxy.setCursor && proxy.setCursor(hoveredTarget ? hoveredTarget.cursor : 'default'); // Mouse out on previous hovered element
|
|||
|
|
|||
|
if (lastHoveredTarget && hoveredTarget !== lastHoveredTarget) {
|
|||
|
this.dispatchToElement(lastHovered, 'mouseout', event);
|
|||
|
} // Mouse moving on one element
|
|||
|
|
|||
|
|
|||
|
this.dispatchToElement(hovered, 'mousemove', event); // Mouse over on a new element
|
|||
|
|
|||
|
if (hoveredTarget && hoveredTarget !== lastHoveredTarget) {
|
|||
|
this.dispatchToElement(hovered, 'mouseover', event);
|
|||
|
}
|
|||
|
},
|
|||
|
mouseout: function (event) {
|
|||
|
this.dispatchToElement(this._hovered, 'mouseout', event); // There might be some doms created by upper layer application
|
|||
|
// at the same level of painter.getViewportRoot() (e.g., tooltip
|
|||
|
// dom created by echarts), where 'globalout' event should not
|
|||
|
// be triggered when mouse enters these doms. (But 'mouseout'
|
|||
|
// should be triggered at the original hovered element as usual).
|
|||
|
|
|||
|
var element = event.toElement || event.relatedTarget;
|
|||
|
var innerDom;
|
|||
|
|
|||
|
do {
|
|||
|
element = element && element.parentNode;
|
|||
|
} while (element && element.nodeType !== 9 && !(innerDom = element === this.painterRoot));
|
|||
|
|
|||
|
!innerDom && this.trigger('globalout', {
|
|||
|
event: event
|
|||
|
});
|
|||
|
},
|
|||
|
|
|||
|
/**
|
|||
|
* Resize
|
|||
|
*/
|
|||
|
resize: function (event) {
|
|||
|
this._hovered = {};
|
|||
|
},
|
|||
|
|
|||
|
/**
|
|||
|
* Dispatch event
|
|||
|
* @param {string} eventName
|
|||
|
* @param {event=} eventArgs
|
|||
|
*/
|
|||
|
dispatch: function (eventName, eventArgs) {
|
|||
|
var handler = this[eventName];
|
|||
|
handler && handler.call(this, eventArgs);
|
|||
|
},
|
|||
|
|
|||
|
/**
|
|||
|
* Dispose
|
|||
|
*/
|
|||
|
dispose: function () {
|
|||
|
this.proxy.dispose();
|
|||
|
this.storage = this.proxy = this.painter = null;
|
|||
|
},
|
|||
|
|
|||
|
/**
|
|||
|
* 设置默认的cursor style
|
|||
|
* @param {string} [cursorStyle='default'] 例如 crosshair
|
|||
|
*/
|
|||
|
setCursorStyle: function (cursorStyle) {
|
|||
|
var proxy = this.proxy;
|
|||
|
proxy.setCursor && proxy.setCursor(cursorStyle);
|
|||
|
},
|
|||
|
|
|||
|
/**
|
|||
|
* 事件分发代理
|
|||
|
*
|
|||
|
* @private
|
|||
|
* @param {Object} targetInfo {target, topTarget} 目标图形元素
|
|||
|
* @param {string} eventName 事件名称
|
|||
|
* @param {Object} event 事件对象
|
|||
|
*/
|
|||
|
dispatchToElement: function (targetInfo, eventName, event) {
|
|||
|
targetInfo = targetInfo || {};
|
|||
|
var el = targetInfo.target;
|
|||
|
|
|||
|
if (el && el.silent) {
|
|||
|
return;
|
|||
|
}
|
|||
|
|
|||
|
var eventHandler = 'on' + eventName;
|
|||
|
var eventPacket = makeEventPacket(eventName, targetInfo, event);
|
|||
|
|
|||
|
while (el) {
|
|||
|
el[eventHandler] && (eventPacket.cancelBubble = el[eventHandler].call(el, eventPacket));
|
|||
|
el.trigger(eventName, eventPacket);
|
|||
|
el = el.parent;
|
|||
|
|
|||
|
if (eventPacket.cancelBubble) {
|
|||
|
break;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
if (!eventPacket.cancelBubble) {
|
|||
|
// 冒泡到顶级 zrender 对象
|
|||
|
this.trigger(eventName, eventPacket); // 分发事件到用户自定义层
|
|||
|
// 用户有可能在全局 click 事件中 dispose,所以需要判断下 painter 是否存在
|
|||
|
|
|||
|
this.painter && this.painter.eachOtherLayer(function (layer) {
|
|||
|
if (typeof layer[eventHandler] === 'function') {
|
|||
|
layer[eventHandler].call(layer, eventPacket);
|
|||
|
}
|
|||
|
|
|||
|
if (layer.trigger) {
|
|||
|
layer.trigger(eventName, eventPacket);
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
},
|
|||
|
|
|||
|
/**
|
|||
|
* @private
|
|||
|
* @param {number} x
|
|||
|
* @param {number} y
|
|||
|
* @param {module:zrender/graphic/Displayable} exclude
|
|||
|
* @return {model:zrender/Element}
|
|||
|
* @method
|
|||
|
*/
|
|||
|
findHover: function (x, y, exclude) {
|
|||
|
var list = this.storage.getDisplayList();
|
|||
|
var out = {
|
|||
|
x: x,
|
|||
|
y: y
|
|||
|
};
|
|||
|
|
|||
|
for (var i = list.length - 1; i >= 0; i--) {
|
|||
|
var hoverCheckResult;
|
|||
|
|
|||
|
if (list[i] !== exclude // getDisplayList may include ignored item in VML mode
|
|||
|
&& !list[i].ignore && (hoverCheckResult = isHover(list[i], x, y))) {
|
|||
|
!out.topTarget && (out.topTarget = list[i]);
|
|||
|
|
|||
|
if (hoverCheckResult !== SILENT) {
|
|||
|
out.target = list[i];
|
|||
|
break;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
return out;
|
|||
|
},
|
|||
|
processGesture: function (event, stage) {
|
|||
|
if (!this._gestureMgr) {
|
|||
|
this._gestureMgr = new GestureMgr();
|
|||
|
}
|
|||
|
|
|||
|
var gestureMgr = this._gestureMgr;
|
|||
|
stage === 'start' && gestureMgr.clear();
|
|||
|
var gestureInfo = gestureMgr.recognize(event, this.findHover(event.zrX, event.zrY, null).target, this.proxy.dom);
|
|||
|
stage === 'end' && gestureMgr.clear(); // Do not do any preventDefault here. Upper application do that if necessary.
|
|||
|
|
|||
|
if (gestureInfo) {
|
|||
|
var type = gestureInfo.type;
|
|||
|
event.gestureEvent = type;
|
|||
|
this.dispatchToElement({
|
|||
|
target: gestureInfo.target
|
|||
|
}, type, gestureInfo.event);
|
|||
|
}
|
|||
|
}
|
|||
|
}; // Common handlers
|
|||
|
|
|||
|
util.each(['click', 'mousedown', 'mouseup', 'mousewheel', 'dblclick', 'contextmenu'], function (name) {
|
|||
|
Handler.prototype[name] = function (event) {
|
|||
|
// Find hover again to avoid click event is dispatched manually. Or click is triggered without mouseover
|
|||
|
var hovered = this.findHover(event.zrX, event.zrY);
|
|||
|
var hoveredTarget = hovered.target;
|
|||
|
|
|||
|
if (name === 'mousedown') {
|
|||
|
this._downEl = hoveredTarget;
|
|||
|
this._downPoint = [event.zrX, event.zrY]; // In case click triggered before mouseup
|
|||
|
|
|||
|
this._upEl = hoveredTarget;
|
|||
|
} else if (name === 'mouseup') {
|
|||
|
this._upEl = hoveredTarget;
|
|||
|
} else if (name === 'click') {
|
|||
|
if (this._downEl !== this._upEl // Original click event is triggered on the whole canvas element,
|
|||
|
// including the case that `mousedown` - `mousemove` - `mouseup`,
|
|||
|
// which should be filtered, otherwise it will bring trouble to
|
|||
|
// pan and zoom.
|
|||
|
|| !this._downPoint // Arbitrary value
|
|||
|
|| vec2.dist(this._downPoint, [event.zrX, event.zrY]) > 4) {
|
|||
|
return;
|
|||
|
}
|
|||
|
|
|||
|
this._downPoint = null;
|
|||
|
}
|
|||
|
|
|||
|
this.dispatchToElement(hovered, name, event);
|
|||
|
};
|
|||
|
});
|
|||
|
|
|||
|
function isHover(displayable, x, y) {
|
|||
|
if (displayable[displayable.rectHover ? 'rectContain' : 'contain'](x, y)) {
|
|||
|
var el = displayable;
|
|||
|
var isSilent;
|
|||
|
|
|||
|
while (el) {
|
|||
|
// If clipped by ancestor.
|
|||
|
// FIXME: If clipPath has neither stroke nor fill,
|
|||
|
// el.clipPath.contain(x, y) will always return false.
|
|||
|
if (el.clipPath && !el.clipPath.contain(x, y)) {
|
|||
|
return false;
|
|||
|
}
|
|||
|
|
|||
|
if (el.silent) {
|
|||
|
isSilent = true;
|
|||
|
}
|
|||
|
|
|||
|
el = el.parent;
|
|||
|
}
|
|||
|
|
|||
|
return isSilent ? SILENT : true;
|
|||
|
}
|
|||
|
|
|||
|
return false;
|
|||
|
}
|
|||
|
|
|||
|
util.mixin(Handler, Eventful);
|
|||
|
util.mixin(Handler, Draggable);
|
|||
|
var _default = Handler;
|
|||
|
module.exports = _default;
|