| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321 |
- var util = require("./core/util");
- var vec2 = require("./core/vector");
- var Draggable = require("./mixin/Draggable");
- var Eventful = require("./mixin/Eventful");
- /**
- * Handler
- * @module zrender/Handler
- * @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
- * errorrik (errorrik@gmail.com)
- * pissang (shenyi.914@gmail.com)
- */
- 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
- };
- }
- 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 = proxy; // Attach handler
- proxy.handler = this;
- /**
- * {target, topTarget, x, y}
- * @private
- * @type {Object}
- */
- this._hovered = {};
- /**
- * @private
- * @type {Date}
- */
- this._lastTouchMoment;
- /**
- * @private
- * @type {number}
- */
- this._lastX;
- /**
- * @private
- * @type {number}
- */
- this._lastY;
- Draggable.call(this);
- util.each(handlerNames, function (name) {
- proxy.on && proxy.on(name, this[name], this);
- }, this);
- };
- Handler.prototype = {
- constructor: Handler,
- 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;
- }
- }; // 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 === 'mosueup') {
- 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;
|