Handler.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. import { __extends } from "tslib";
  2. import * as util from './core/util.js';
  3. import * as vec2 from './core/vector.js';
  4. import Draggable from './mixin/Draggable.js';
  5. import Eventful from './core/Eventful.js';
  6. import * as eventTool from './core/event.js';
  7. import { GestureMgr } from './core/GestureMgr.js';
  8. var SILENT = 'silent';
  9. function makeEventPacket(eveType, targetInfo, event) {
  10. return {
  11. type: eveType,
  12. event: event,
  13. target: targetInfo.target,
  14. topTarget: targetInfo.topTarget,
  15. cancelBubble: false,
  16. offsetX: event.zrX,
  17. offsetY: event.zrY,
  18. gestureEvent: event.gestureEvent,
  19. pinchX: event.pinchX,
  20. pinchY: event.pinchY,
  21. pinchScale: event.pinchScale,
  22. wheelDelta: event.zrDelta,
  23. zrByTouch: event.zrByTouch,
  24. which: event.which,
  25. stop: stopEvent
  26. };
  27. }
  28. function stopEvent() {
  29. eventTool.stop(this.event);
  30. }
  31. var EmptyProxy = (function (_super) {
  32. __extends(EmptyProxy, _super);
  33. function EmptyProxy() {
  34. var _this = _super !== null && _super.apply(this, arguments) || this;
  35. _this.handler = null;
  36. return _this;
  37. }
  38. EmptyProxy.prototype.dispose = function () { };
  39. EmptyProxy.prototype.setCursor = function () { };
  40. return EmptyProxy;
  41. }(Eventful));
  42. var HoveredResult = (function () {
  43. function HoveredResult(x, y) {
  44. this.x = x;
  45. this.y = y;
  46. }
  47. return HoveredResult;
  48. }());
  49. var handlerNames = [
  50. 'click', 'dblclick', 'mousewheel', 'mouseout',
  51. 'mouseup', 'mousedown', 'mousemove', 'contextmenu'
  52. ];
  53. var Handler = (function (_super) {
  54. __extends(Handler, _super);
  55. function Handler(storage, painter, proxy, painterRoot) {
  56. var _this = _super.call(this) || this;
  57. _this._hovered = new HoveredResult(0, 0);
  58. _this.storage = storage;
  59. _this.painter = painter;
  60. _this.painterRoot = painterRoot;
  61. proxy = proxy || new EmptyProxy();
  62. _this.proxy = null;
  63. _this.setHandlerProxy(proxy);
  64. _this._draggingMgr = new Draggable(_this);
  65. return _this;
  66. }
  67. Handler.prototype.setHandlerProxy = function (proxy) {
  68. if (this.proxy) {
  69. this.proxy.dispose();
  70. }
  71. if (proxy) {
  72. util.each(handlerNames, function (name) {
  73. proxy.on && proxy.on(name, this[name], this);
  74. }, this);
  75. proxy.handler = this;
  76. }
  77. this.proxy = proxy;
  78. };
  79. Handler.prototype.mousemove = function (event) {
  80. var x = event.zrX;
  81. var y = event.zrY;
  82. var isOutside = isOutsideBoundary(this, x, y);
  83. var lastHovered = this._hovered;
  84. var lastHoveredTarget = lastHovered.target;
  85. if (lastHoveredTarget && !lastHoveredTarget.__zr) {
  86. lastHovered = this.findHover(lastHovered.x, lastHovered.y);
  87. lastHoveredTarget = lastHovered.target;
  88. }
  89. var hovered = this._hovered = isOutside ? new HoveredResult(x, y) : this.findHover(x, y);
  90. var hoveredTarget = hovered.target;
  91. var proxy = this.proxy;
  92. proxy.setCursor && proxy.setCursor(hoveredTarget ? hoveredTarget.cursor : 'default');
  93. if (lastHoveredTarget && hoveredTarget !== lastHoveredTarget) {
  94. this.dispatchToElement(lastHovered, 'mouseout', event);
  95. }
  96. this.dispatchToElement(hovered, 'mousemove', event);
  97. if (hoveredTarget && hoveredTarget !== lastHoveredTarget) {
  98. this.dispatchToElement(hovered, 'mouseover', event);
  99. }
  100. };
  101. Handler.prototype.mouseout = function (event) {
  102. var eventControl = event.zrEventControl;
  103. if (eventControl !== 'only_globalout') {
  104. this.dispatchToElement(this._hovered, 'mouseout', event);
  105. }
  106. if (eventControl !== 'no_globalout') {
  107. this.trigger('globalout', { type: 'globalout', event: event });
  108. }
  109. };
  110. Handler.prototype.resize = function () {
  111. this._hovered = new HoveredResult(0, 0);
  112. };
  113. Handler.prototype.dispatch = function (eventName, eventArgs) {
  114. var handler = this[eventName];
  115. handler && handler.call(this, eventArgs);
  116. };
  117. Handler.prototype.dispose = function () {
  118. this.proxy.dispose();
  119. this.storage = null;
  120. this.proxy = null;
  121. this.painter = null;
  122. };
  123. Handler.prototype.setCursorStyle = function (cursorStyle) {
  124. var proxy = this.proxy;
  125. proxy.setCursor && proxy.setCursor(cursorStyle);
  126. };
  127. Handler.prototype.dispatchToElement = function (targetInfo, eventName, event) {
  128. targetInfo = targetInfo || {};
  129. var el = targetInfo.target;
  130. if (el && el.silent) {
  131. return;
  132. }
  133. var eventKey = ('on' + eventName);
  134. var eventPacket = makeEventPacket(eventName, targetInfo, event);
  135. while (el) {
  136. el[eventKey]
  137. && (eventPacket.cancelBubble = !!el[eventKey].call(el, eventPacket));
  138. el.trigger(eventName, eventPacket);
  139. el = el.__hostTarget ? el.__hostTarget : el.parent;
  140. if (eventPacket.cancelBubble) {
  141. break;
  142. }
  143. }
  144. if (!eventPacket.cancelBubble) {
  145. this.trigger(eventName, eventPacket);
  146. if (this.painter && this.painter.eachOtherLayer) {
  147. this.painter.eachOtherLayer(function (layer) {
  148. if (typeof (layer[eventKey]) === 'function') {
  149. layer[eventKey].call(layer, eventPacket);
  150. }
  151. if (layer.trigger) {
  152. layer.trigger(eventName, eventPacket);
  153. }
  154. });
  155. }
  156. }
  157. };
  158. Handler.prototype.findHover = function (x, y, exclude) {
  159. var list = this.storage.getDisplayList();
  160. var out = new HoveredResult(x, y);
  161. for (var i = list.length - 1; i >= 0; i--) {
  162. var hoverCheckResult = void 0;
  163. if (list[i] !== exclude
  164. && !list[i].ignore
  165. && (hoverCheckResult = isHover(list[i], x, y))) {
  166. !out.topTarget && (out.topTarget = list[i]);
  167. if (hoverCheckResult !== SILENT) {
  168. out.target = list[i];
  169. break;
  170. }
  171. }
  172. }
  173. return out;
  174. };
  175. Handler.prototype.processGesture = function (event, stage) {
  176. if (!this._gestureMgr) {
  177. this._gestureMgr = new GestureMgr();
  178. }
  179. var gestureMgr = this._gestureMgr;
  180. stage === 'start' && gestureMgr.clear();
  181. var gestureInfo = gestureMgr.recognize(event, this.findHover(event.zrX, event.zrY, null).target, this.proxy.dom);
  182. stage === 'end' && gestureMgr.clear();
  183. if (gestureInfo) {
  184. var type = gestureInfo.type;
  185. event.gestureEvent = type;
  186. var res = new HoveredResult();
  187. res.target = gestureInfo.target;
  188. this.dispatchToElement(res, type, gestureInfo.event);
  189. }
  190. };
  191. return Handler;
  192. }(Eventful));
  193. util.each(['click', 'mousedown', 'mouseup', 'mousewheel', 'dblclick', 'contextmenu'], function (name) {
  194. Handler.prototype[name] = function (event) {
  195. var x = event.zrX;
  196. var y = event.zrY;
  197. var isOutside = isOutsideBoundary(this, x, y);
  198. var hovered;
  199. var hoveredTarget;
  200. if (name !== 'mouseup' || !isOutside) {
  201. hovered = this.findHover(x, y);
  202. hoveredTarget = hovered.target;
  203. }
  204. if (name === 'mousedown') {
  205. this._downEl = hoveredTarget;
  206. this._downPoint = [event.zrX, event.zrY];
  207. this._upEl = hoveredTarget;
  208. }
  209. else if (name === 'mouseup') {
  210. this._upEl = hoveredTarget;
  211. }
  212. else if (name === 'click') {
  213. if (this._downEl !== this._upEl
  214. || !this._downPoint
  215. || vec2.dist(this._downPoint, [event.zrX, event.zrY]) > 4) {
  216. return;
  217. }
  218. this._downPoint = null;
  219. }
  220. this.dispatchToElement(hovered, name, event);
  221. };
  222. });
  223. function isHover(displayable, x, y) {
  224. if (displayable[displayable.rectHover ? 'rectContain' : 'contain'](x, y)) {
  225. var el = displayable;
  226. var isSilent = void 0;
  227. var ignoreClip = false;
  228. while (el) {
  229. if (el.ignoreClip) {
  230. ignoreClip = true;
  231. }
  232. if (!ignoreClip) {
  233. var clipPath = el.getClipPath();
  234. if (clipPath && !clipPath.contain(x, y)) {
  235. return false;
  236. }
  237. if (el.silent) {
  238. isSilent = true;
  239. }
  240. }
  241. var hostEl = el.__hostTarget;
  242. el = hostEl ? hostEl : el.parent;
  243. }
  244. return isSilent ? SILENT : true;
  245. }
  246. return false;
  247. }
  248. function isOutsideBoundary(handlerInstance, x, y) {
  249. var painter = handlerInstance.painter;
  250. return x < 0 || x > painter.getWidth() || y < 0 || y > painter.getHeight();
  251. }
  252. export default Handler;