| Current File : /home/tradevaly/www/node_modules/zrender/src/Handler.js |
import * as util from './core/util';
import * as vec2 from './core/vector';
import Draggable from './mixin/Draggable';
import Eventful from './mixin/Eventful';
import * as eventTool from './core/event';
import GestureMgr from './core/GestureMgr';
/**
* [The interface between `Handler` and `HandlerProxy`]:
*
* The default `HandlerProxy` only support the common standard web environment
* (e.g., standalone browser, headless browser, embed browser in mobild APP, ...).
* But `HandlerProxy` can be replaced to support more non-standard environment
* (e.g., mini app), or to support more feature that the default `HandlerProxy`
* not provided (like echarts-gl did).
* So the interface between `Handler` and `HandlerProxy` should be stable. Do not
* make break changes util inevitable. The interface include the public methods
* of `Handler` and the events listed in `handlerNames` below, by which `HandlerProxy`
* drives `Handler`.
*/
/**
* [Drag outside]:
*
* That is, triggering `mousemove` and `mouseup` event when the pointer is out of the
* zrender area when dragging. That is important for the improvement of the user experience
* when dragging something near the boundary without being terminated unexpectedly.
*
* We originally consider to introduce new events like `pagemovemove` and `pagemouseup`
* to resolve this issue. But some drawbacks of it is described in
* https://github.com/ecomfe/zrender/pull/536#issuecomment-560286899
*
* Instead, we referenced the specifications:
* https://www.w3.org/TR/touch-events/#the-touchmove-event
* https://www.w3.org/TR/2014/WD-DOM-Level-3-Events-20140925/#event-type-mousemove
* where the the mousemove/touchmove can be continue to fire if the user began a drag
* operation and the pointer has left the boundary. (for the mouse event, browsers
* only do it on `document` and when the pointer has left the boundary of the browser.)
*
* So the default `HandlerProxy` supports this feature similarly: if it is in the dragging
* state (see `pointerCapture` in `HandlerProxy`), the `mousemove` and `mouseup` continue
* to fire until release the pointer. That is implemented by listen to those event on
* `document`.
* If we implement some other `HandlerProxy` only for touch device, that would be easier.
* The touch event support this feature by default.
*
* Note:
* There might be some cases that the mouse event can not be
* received on `document`. For example,
* (A) `useCapture` is not supported and some user defined event listeners on the ancestor
* of zr dom throw Error .
* (B) `useCapture` is not supported Some user defined event listeners on the ancestor of
* zr dom call `stopPropagation`.
* In these cases, the `mousemove` event might be keep triggered event
* if the mouse is released. We try to reduce the side-effect in those cases.
* That is, do nothing (especially, `findHover`) in those cases. See `isOutsideBoundary`.
*
* Note:
* If `HandlerProxy` listens to `document` with `useCapture`, `HandlerProxy` needs to
* make sure `stopPropagation` and `preventDefault` doing nothing if and only if the event
* target is not zrender dom. Becuase it is dangerous to enable users to call them in
* `document` capture phase to prevent the propagation to any listener of the webpage.
* But they are needed to work when the pointer inside the zrender dom.
*/
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() {
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 isOutside = isOutsideBoundary(this, x, y);
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 = isOutside ? {x: x, y: y} : 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) {
var eventControl = event.zrEventControl;
var zrIsToLocalDOM = event.zrIsToLocalDOM;
if (eventControl !== 'only_globalout') {
this.dispatchToElement(this._hovered, 'mouseout', event);
}
if (eventControl !== 'no_globalout') {
// FIXME: if the pointer moving from the extra doms to realy "outside",
// the `globalout` should have been triggered. But currently not.
!zrIsToLocalDOM && this.trigger('globalout', {type: '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) {
var x = event.zrX;
var y = event.zrY;
var isOutside = isOutsideBoundary(this, x, y);
var hovered;
var hoveredTarget;
if (name !== 'mouseup' || !isOutside) {
// Find hover again to avoid click event is dispatched manually. Or click is triggered without mouseover
hovered = this.findHover(x, y);
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;
}
/**
* See [Drag outside].
*/
function isOutsideBoundary(handlerInstance, x, y) {
var painter = handlerInstance.painter;
return x < 0 || x > painter.getWidth() || y < 0 || y > painter.getHeight();
}
util.mixin(Handler, Eventful);
util.mixin(Handler, Draggable);
export default Handler;