You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							358 lines
						
					
					
						
							9.6 KiB
						
					
					
				
			
		
		
	
	
							358 lines
						
					
					
						
							9.6 KiB
						
					
					
				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; |