index.esm.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. import { AbstractRendererPlugin } from '@antv/g-lite';
  2. function _inheritsLoose(subClass, superClass) {
  3. subClass.prototype = Object.create(superClass.prototype);
  4. subClass.prototype.constructor = subClass;
  5. _setPrototypeOf(subClass, superClass);
  6. }
  7. function _setPrototypeOf(o, p) {
  8. _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
  9. o.__proto__ = p;
  10. return o;
  11. };
  12. return _setPrototypeOf(o, p);
  13. }
  14. // const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
  15. /**
  16. * listen to mouse/touch/pointer events on DOM wrapper, trigger pointer events
  17. */
  18. var DOMInteractionPlugin = /*#__PURE__*/function () {
  19. function DOMInteractionPlugin() {
  20. this.context = void 0;
  21. }
  22. var _proto = DOMInteractionPlugin.prototype;
  23. _proto.apply = function apply(context, runtime) {
  24. var _this = this;
  25. var renderingService = context.renderingService,
  26. renderingContext = context.renderingContext,
  27. config = context.config;
  28. this.context = context;
  29. var canvas = renderingContext.root.ownerDocument.defaultView;
  30. // const SUPPORT_ONLY_TOUCH = canvas.supportsTouchEvents && MOBILE_REGEX.test(navigator.userAgent);
  31. var onPointerMove = function onPointerMove(ev) {
  32. renderingService.hooks.pointerMove.call(ev);
  33. };
  34. var onPointerUp = function onPointerUp(ev) {
  35. renderingService.hooks.pointerUp.call(ev);
  36. };
  37. var onPointerDown = function onPointerDown(ev) {
  38. renderingService.hooks.pointerDown.call(ev);
  39. };
  40. var onPointerOver = function onPointerOver(ev) {
  41. renderingService.hooks.pointerOver.call(ev);
  42. };
  43. var onPointerOut = function onPointerOut(ev) {
  44. renderingService.hooks.pointerOut.call(ev);
  45. };
  46. var onPointerCancel = function onPointerCancel(ev) {
  47. renderingService.hooks.pointerCancel.call(ev);
  48. };
  49. var onPointerWheel = function onPointerWheel(ev) {
  50. renderingService.hooks.pointerWheel.call(ev);
  51. };
  52. var onClick = function onClick(ev) {
  53. renderingService.hooks.click.call(ev);
  54. };
  55. var addPointerEventListener = function addPointerEventListener($el) {
  56. runtime.globalThis.document.addEventListener('pointermove', onPointerMove, true);
  57. $el.addEventListener('pointerdown', onPointerDown, true);
  58. $el.addEventListener('pointerleave', onPointerOut, true);
  59. $el.addEventListener('pointerover', onPointerOver, true);
  60. runtime.globalThis.addEventListener('pointerup', onPointerUp, true);
  61. runtime.globalThis.addEventListener('pointercancel', onPointerCancel, true);
  62. };
  63. var addTouchEventListener = function addTouchEventListener($el) {
  64. $el.addEventListener('touchstart', onPointerDown, true);
  65. $el.addEventListener('touchend', onPointerUp, true);
  66. $el.addEventListener('touchmove', onPointerMove, true);
  67. $el.addEventListener('touchcancel', onPointerCancel, true);
  68. };
  69. var addMouseEventListener = function addMouseEventListener($el) {
  70. runtime.globalThis.document.addEventListener('mousemove', onPointerMove, true);
  71. $el.addEventListener('mousedown', onPointerDown, true);
  72. $el.addEventListener('mouseout', onPointerOut, true);
  73. $el.addEventListener('mouseover', onPointerOver, true);
  74. runtime.globalThis.addEventListener('mouseup', onPointerUp, true);
  75. };
  76. var removePointerEventListener = function removePointerEventListener($el) {
  77. runtime.globalThis.document.removeEventListener('pointermove', onPointerMove, true);
  78. $el.removeEventListener('pointerdown', onPointerDown, true);
  79. $el.removeEventListener('pointerleave', onPointerOut, true);
  80. $el.removeEventListener('pointerover', onPointerOver, true);
  81. runtime.globalThis.removeEventListener('pointerup', onPointerUp, true);
  82. };
  83. var removeTouchEventListener = function removeTouchEventListener($el) {
  84. $el.removeEventListener('touchstart', onPointerDown, true);
  85. $el.removeEventListener('touchend', onPointerUp, true);
  86. $el.removeEventListener('touchmove', onPointerMove, true);
  87. $el.removeEventListener('touchcancel', onPointerCancel, true);
  88. };
  89. var removeMouseEventListener = function removeMouseEventListener($el) {
  90. runtime.globalThis.document.removeEventListener('mousemove', onPointerMove, true);
  91. $el.removeEventListener('mousedown', onPointerDown, true);
  92. $el.removeEventListener('mouseout', onPointerOut, true);
  93. $el.removeEventListener('mouseover', onPointerOver, true);
  94. runtime.globalThis.removeEventListener('mouseup', onPointerUp, true);
  95. };
  96. renderingService.hooks.init.tap(DOMInteractionPlugin.tag, function () {
  97. var $el = _this.context.contextService.getDomElement();
  98. // @ts-ignore
  99. if (runtime.globalThis.navigator.msPointerEnabled) {
  100. // @ts-ignore
  101. $el.style.msContentZooming = 'none';
  102. // @ts-ignore
  103. $el.style.msTouchAction = 'none';
  104. } else if (canvas.supportsPointerEvents) {
  105. $el.style.touchAction = 'none';
  106. }
  107. if (canvas.supportsPointerEvents) {
  108. addPointerEventListener($el);
  109. } else {
  110. addMouseEventListener($el);
  111. }
  112. if (canvas.supportsTouchEvents) {
  113. addTouchEventListener($el);
  114. }
  115. if (config.useNativeClickEvent) {
  116. $el.addEventListener('click', onClick, true);
  117. }
  118. // use passive event listeners
  119. // @see https://zhuanlan.zhihu.com/p/24555031
  120. $el.addEventListener('wheel', onPointerWheel, {
  121. passive: true,
  122. capture: true
  123. });
  124. });
  125. renderingService.hooks.destroy.tap(DOMInteractionPlugin.tag, function () {
  126. var $el = _this.context.contextService.getDomElement();
  127. // @ts-ignore
  128. if (runtime.globalThis.navigator.msPointerEnabled) {
  129. // @ts-ignore
  130. $el.style.msContentZooming = '';
  131. // @ts-ignore
  132. $el.style.msTouchAction = '';
  133. } else if (canvas.supportsPointerEvents) {
  134. $el.style.touchAction = '';
  135. }
  136. if (canvas.supportsPointerEvents) {
  137. removePointerEventListener($el);
  138. } else {
  139. removeMouseEventListener($el);
  140. }
  141. if (canvas.supportsTouchEvents) {
  142. removeTouchEventListener($el);
  143. }
  144. if (config.useNativeClickEvent) {
  145. $el.removeEventListener('click', onClick, true);
  146. }
  147. $el.removeEventListener('wheel', onPointerWheel, true);
  148. });
  149. };
  150. return DOMInteractionPlugin;
  151. }();
  152. DOMInteractionPlugin.tag = 'DOMInteraction';
  153. var Plugin = /*#__PURE__*/function (_AbstractRendererPlug) {
  154. _inheritsLoose(Plugin, _AbstractRendererPlug);
  155. function Plugin() {
  156. var _this;
  157. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  158. args[_key] = arguments[_key];
  159. }
  160. _this = _AbstractRendererPlug.call.apply(_AbstractRendererPlug, [this].concat(args)) || this;
  161. _this.name = 'dom-interaction';
  162. return _this;
  163. }
  164. var _proto = Plugin.prototype;
  165. _proto.init = function init() {
  166. this.addRenderingPlugin(new DOMInteractionPlugin());
  167. };
  168. _proto.destroy = function destroy() {
  169. this.removeAllRenderingPlugins();
  170. };
  171. return Plugin;
  172. }(AbstractRendererPlugin);
  173. export { Plugin };