HandlerProxy.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. import { __extends } from "tslib";
  2. import { addEventListener, removeEventListener, normalizeEvent, getNativeEvent } from '../core/event.js';
  3. import * as zrUtil from '../core/util.js';
  4. import Eventful from '../core/Eventful.js';
  5. import env from '../core/env.js';
  6. var TOUCH_CLICK_DELAY = 300;
  7. var globalEventSupported = env.domSupported;
  8. var localNativeListenerNames = (function () {
  9. var mouseHandlerNames = [
  10. 'click', 'dblclick', 'mousewheel', 'wheel', 'mouseout',
  11. 'mouseup', 'mousedown', 'mousemove', 'contextmenu'
  12. ];
  13. var touchHandlerNames = [
  14. 'touchstart', 'touchend', 'touchmove'
  15. ];
  16. var pointerEventNameMap = {
  17. pointerdown: 1, pointerup: 1, pointermove: 1, pointerout: 1
  18. };
  19. var pointerHandlerNames = zrUtil.map(mouseHandlerNames, function (name) {
  20. var nm = name.replace('mouse', 'pointer');
  21. return pointerEventNameMap.hasOwnProperty(nm) ? nm : name;
  22. });
  23. return {
  24. mouse: mouseHandlerNames,
  25. touch: touchHandlerNames,
  26. pointer: pointerHandlerNames
  27. };
  28. })();
  29. var globalNativeListenerNames = {
  30. mouse: ['mousemove', 'mouseup'],
  31. pointer: ['pointermove', 'pointerup']
  32. };
  33. var wheelEventSupported = false;
  34. function isPointerFromTouch(event) {
  35. var pointerType = event.pointerType;
  36. return pointerType === 'pen' || pointerType === 'touch';
  37. }
  38. function setTouchTimer(scope) {
  39. scope.touching = true;
  40. if (scope.touchTimer != null) {
  41. clearTimeout(scope.touchTimer);
  42. scope.touchTimer = null;
  43. }
  44. scope.touchTimer = setTimeout(function () {
  45. scope.touching = false;
  46. scope.touchTimer = null;
  47. }, 700);
  48. }
  49. function markTouch(event) {
  50. event && (event.zrByTouch = true);
  51. }
  52. function normalizeGlobalEvent(instance, event) {
  53. return normalizeEvent(instance.dom, new FakeGlobalEvent(instance, event), true);
  54. }
  55. function isLocalEl(instance, el) {
  56. var elTmp = el;
  57. var isLocal = false;
  58. while (elTmp && elTmp.nodeType !== 9
  59. && !(isLocal = elTmp.domBelongToZr
  60. || (elTmp !== el && elTmp === instance.painterRoot))) {
  61. elTmp = elTmp.parentNode;
  62. }
  63. return isLocal;
  64. }
  65. var FakeGlobalEvent = (function () {
  66. function FakeGlobalEvent(instance, event) {
  67. this.stopPropagation = zrUtil.noop;
  68. this.stopImmediatePropagation = zrUtil.noop;
  69. this.preventDefault = zrUtil.noop;
  70. this.type = event.type;
  71. this.target = this.currentTarget = instance.dom;
  72. this.pointerType = event.pointerType;
  73. this.clientX = event.clientX;
  74. this.clientY = event.clientY;
  75. }
  76. return FakeGlobalEvent;
  77. }());
  78. var localDOMHandlers = {
  79. mousedown: function (event) {
  80. event = normalizeEvent(this.dom, event);
  81. this.__mayPointerCapture = [event.zrX, event.zrY];
  82. this.trigger('mousedown', event);
  83. },
  84. mousemove: function (event) {
  85. event = normalizeEvent(this.dom, event);
  86. var downPoint = this.__mayPointerCapture;
  87. if (downPoint && (event.zrX !== downPoint[0] || event.zrY !== downPoint[1])) {
  88. this.__togglePointerCapture(true);
  89. }
  90. this.trigger('mousemove', event);
  91. },
  92. mouseup: function (event) {
  93. event = normalizeEvent(this.dom, event);
  94. this.__togglePointerCapture(false);
  95. this.trigger('mouseup', event);
  96. },
  97. mouseout: function (event) {
  98. event = normalizeEvent(this.dom, event);
  99. var element = event.toElement || event.relatedTarget;
  100. if (!isLocalEl(this, element)) {
  101. if (this.__pointerCapturing) {
  102. event.zrEventControl = 'no_globalout';
  103. }
  104. this.trigger('mouseout', event);
  105. }
  106. },
  107. wheel: function (event) {
  108. wheelEventSupported = true;
  109. event = normalizeEvent(this.dom, event);
  110. this.trigger('mousewheel', event);
  111. },
  112. mousewheel: function (event) {
  113. if (wheelEventSupported) {
  114. return;
  115. }
  116. event = normalizeEvent(this.dom, event);
  117. this.trigger('mousewheel', event);
  118. },
  119. touchstart: function (event) {
  120. event = normalizeEvent(this.dom, event);
  121. markTouch(event);
  122. this.__lastTouchMoment = new Date();
  123. this.handler.processGesture(event, 'start');
  124. localDOMHandlers.mousemove.call(this, event);
  125. localDOMHandlers.mousedown.call(this, event);
  126. },
  127. touchmove: function (event) {
  128. event = normalizeEvent(this.dom, event);
  129. markTouch(event);
  130. this.handler.processGesture(event, 'change');
  131. localDOMHandlers.mousemove.call(this, event);
  132. },
  133. touchend: function (event) {
  134. event = normalizeEvent(this.dom, event);
  135. markTouch(event);
  136. this.handler.processGesture(event, 'end');
  137. localDOMHandlers.mouseup.call(this, event);
  138. if (+new Date() - (+this.__lastTouchMoment) < TOUCH_CLICK_DELAY) {
  139. localDOMHandlers.click.call(this, event);
  140. }
  141. },
  142. pointerdown: function (event) {
  143. localDOMHandlers.mousedown.call(this, event);
  144. },
  145. pointermove: function (event) {
  146. if (!isPointerFromTouch(event)) {
  147. localDOMHandlers.mousemove.call(this, event);
  148. }
  149. },
  150. pointerup: function (event) {
  151. localDOMHandlers.mouseup.call(this, event);
  152. },
  153. pointerout: function (event) {
  154. if (!isPointerFromTouch(event)) {
  155. localDOMHandlers.mouseout.call(this, event);
  156. }
  157. }
  158. };
  159. zrUtil.each(['click', 'dblclick', 'contextmenu'], function (name) {
  160. localDOMHandlers[name] = function (event) {
  161. event = normalizeEvent(this.dom, event);
  162. this.trigger(name, event);
  163. };
  164. });
  165. var globalDOMHandlers = {
  166. pointermove: function (event) {
  167. if (!isPointerFromTouch(event)) {
  168. globalDOMHandlers.mousemove.call(this, event);
  169. }
  170. },
  171. pointerup: function (event) {
  172. globalDOMHandlers.mouseup.call(this, event);
  173. },
  174. mousemove: function (event) {
  175. this.trigger('mousemove', event);
  176. },
  177. mouseup: function (event) {
  178. var pointerCaptureReleasing = this.__pointerCapturing;
  179. this.__togglePointerCapture(false);
  180. this.trigger('mouseup', event);
  181. if (pointerCaptureReleasing) {
  182. event.zrEventControl = 'only_globalout';
  183. this.trigger('mouseout', event);
  184. }
  185. }
  186. };
  187. function mountLocalDOMEventListeners(instance, scope) {
  188. var domHandlers = scope.domHandlers;
  189. if (env.pointerEventsSupported) {
  190. zrUtil.each(localNativeListenerNames.pointer, function (nativeEventName) {
  191. mountSingleDOMEventListener(scope, nativeEventName, function (event) {
  192. domHandlers[nativeEventName].call(instance, event);
  193. });
  194. });
  195. }
  196. else {
  197. if (env.touchEventsSupported) {
  198. zrUtil.each(localNativeListenerNames.touch, function (nativeEventName) {
  199. mountSingleDOMEventListener(scope, nativeEventName, function (event) {
  200. domHandlers[nativeEventName].call(instance, event);
  201. setTouchTimer(scope);
  202. });
  203. });
  204. }
  205. zrUtil.each(localNativeListenerNames.mouse, function (nativeEventName) {
  206. mountSingleDOMEventListener(scope, nativeEventName, function (event) {
  207. event = getNativeEvent(event);
  208. if (!scope.touching) {
  209. domHandlers[nativeEventName].call(instance, event);
  210. }
  211. });
  212. });
  213. }
  214. }
  215. function mountGlobalDOMEventListeners(instance, scope) {
  216. if (env.pointerEventsSupported) {
  217. zrUtil.each(globalNativeListenerNames.pointer, mount);
  218. }
  219. else if (!env.touchEventsSupported) {
  220. zrUtil.each(globalNativeListenerNames.mouse, mount);
  221. }
  222. function mount(nativeEventName) {
  223. function nativeEventListener(event) {
  224. event = getNativeEvent(event);
  225. if (!isLocalEl(instance, event.target)) {
  226. event = normalizeGlobalEvent(instance, event);
  227. scope.domHandlers[nativeEventName].call(instance, event);
  228. }
  229. }
  230. mountSingleDOMEventListener(scope, nativeEventName, nativeEventListener, { capture: true });
  231. }
  232. }
  233. function mountSingleDOMEventListener(scope, nativeEventName, listener, opt) {
  234. scope.mounted[nativeEventName] = listener;
  235. scope.listenerOpts[nativeEventName] = opt;
  236. addEventListener(scope.domTarget, nativeEventName, listener, opt);
  237. }
  238. function unmountDOMEventListeners(scope) {
  239. var mounted = scope.mounted;
  240. for (var nativeEventName in mounted) {
  241. if (mounted.hasOwnProperty(nativeEventName)) {
  242. removeEventListener(scope.domTarget, nativeEventName, mounted[nativeEventName], scope.listenerOpts[nativeEventName]);
  243. }
  244. }
  245. scope.mounted = {};
  246. }
  247. var DOMHandlerScope = (function () {
  248. function DOMHandlerScope(domTarget, domHandlers) {
  249. this.mounted = {};
  250. this.listenerOpts = {};
  251. this.touching = false;
  252. this.domTarget = domTarget;
  253. this.domHandlers = domHandlers;
  254. }
  255. return DOMHandlerScope;
  256. }());
  257. var HandlerDomProxy = (function (_super) {
  258. __extends(HandlerDomProxy, _super);
  259. function HandlerDomProxy(dom, painterRoot) {
  260. var _this = _super.call(this) || this;
  261. _this.__pointerCapturing = false;
  262. _this.dom = dom;
  263. _this.painterRoot = painterRoot;
  264. _this._localHandlerScope = new DOMHandlerScope(dom, localDOMHandlers);
  265. if (globalEventSupported) {
  266. _this._globalHandlerScope = new DOMHandlerScope(document, globalDOMHandlers);
  267. }
  268. mountLocalDOMEventListeners(_this, _this._localHandlerScope);
  269. return _this;
  270. }
  271. HandlerDomProxy.prototype.dispose = function () {
  272. unmountDOMEventListeners(this._localHandlerScope);
  273. if (globalEventSupported) {
  274. unmountDOMEventListeners(this._globalHandlerScope);
  275. }
  276. };
  277. HandlerDomProxy.prototype.setCursor = function (cursorStyle) {
  278. this.dom.style && (this.dom.style.cursor = cursorStyle || 'default');
  279. };
  280. HandlerDomProxy.prototype.__togglePointerCapture = function (isPointerCapturing) {
  281. this.__mayPointerCapture = null;
  282. if (globalEventSupported
  283. && ((+this.__pointerCapturing) ^ (+isPointerCapturing))) {
  284. this.__pointerCapturing = isPointerCapturing;
  285. var globalHandlerScope = this._globalHandlerScope;
  286. isPointerCapturing
  287. ? mountGlobalDOMEventListeners(this, globalHandlerScope)
  288. : unmountDOMEventListeners(globalHandlerScope);
  289. }
  290. };
  291. return HandlerDomProxy;
  292. }(Eventful));
  293. export default HandlerDomProxy;