| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- import { AbstractRendererPlugin } from '@antv/g-lite';
- function _inheritsLoose(subClass, superClass) {
- subClass.prototype = Object.create(superClass.prototype);
- subClass.prototype.constructor = subClass;
- _setPrototypeOf(subClass, superClass);
- }
- function _setPrototypeOf(o, p) {
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
- o.__proto__ = p;
- return o;
- };
- return _setPrototypeOf(o, p);
- }
- // const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
- /**
- * listen to mouse/touch/pointer events on DOM wrapper, trigger pointer events
- */
- var DOMInteractionPlugin = /*#__PURE__*/function () {
- function DOMInteractionPlugin() {
- this.context = void 0;
- }
- var _proto = DOMInteractionPlugin.prototype;
- _proto.apply = function apply(context, runtime) {
- var _this = this;
- var renderingService = context.renderingService,
- renderingContext = context.renderingContext,
- config = context.config;
- this.context = context;
- var canvas = renderingContext.root.ownerDocument.defaultView;
- // const SUPPORT_ONLY_TOUCH = canvas.supportsTouchEvents && MOBILE_REGEX.test(navigator.userAgent);
- var onPointerMove = function onPointerMove(ev) {
- renderingService.hooks.pointerMove.call(ev);
- };
- var onPointerUp = function onPointerUp(ev) {
- renderingService.hooks.pointerUp.call(ev);
- };
- var onPointerDown = function onPointerDown(ev) {
- renderingService.hooks.pointerDown.call(ev);
- };
- var onPointerOver = function onPointerOver(ev) {
- renderingService.hooks.pointerOver.call(ev);
- };
- var onPointerOut = function onPointerOut(ev) {
- renderingService.hooks.pointerOut.call(ev);
- };
- var onPointerCancel = function onPointerCancel(ev) {
- renderingService.hooks.pointerCancel.call(ev);
- };
- var onPointerWheel = function onPointerWheel(ev) {
- renderingService.hooks.pointerWheel.call(ev);
- };
- var onClick = function onClick(ev) {
- renderingService.hooks.click.call(ev);
- };
- var addPointerEventListener = function addPointerEventListener($el) {
- runtime.globalThis.document.addEventListener('pointermove', onPointerMove, true);
- $el.addEventListener('pointerdown', onPointerDown, true);
- $el.addEventListener('pointerleave', onPointerOut, true);
- $el.addEventListener('pointerover', onPointerOver, true);
- runtime.globalThis.addEventListener('pointerup', onPointerUp, true);
- runtime.globalThis.addEventListener('pointercancel', onPointerCancel, true);
- };
- var addTouchEventListener = function addTouchEventListener($el) {
- $el.addEventListener('touchstart', onPointerDown, true);
- $el.addEventListener('touchend', onPointerUp, true);
- $el.addEventListener('touchmove', onPointerMove, true);
- $el.addEventListener('touchcancel', onPointerCancel, true);
- };
- var addMouseEventListener = function addMouseEventListener($el) {
- runtime.globalThis.document.addEventListener('mousemove', onPointerMove, true);
- $el.addEventListener('mousedown', onPointerDown, true);
- $el.addEventListener('mouseout', onPointerOut, true);
- $el.addEventListener('mouseover', onPointerOver, true);
- runtime.globalThis.addEventListener('mouseup', onPointerUp, true);
- };
- var removePointerEventListener = function removePointerEventListener($el) {
- runtime.globalThis.document.removeEventListener('pointermove', onPointerMove, true);
- $el.removeEventListener('pointerdown', onPointerDown, true);
- $el.removeEventListener('pointerleave', onPointerOut, true);
- $el.removeEventListener('pointerover', onPointerOver, true);
- runtime.globalThis.removeEventListener('pointerup', onPointerUp, true);
- };
- var removeTouchEventListener = function removeTouchEventListener($el) {
- $el.removeEventListener('touchstart', onPointerDown, true);
- $el.removeEventListener('touchend', onPointerUp, true);
- $el.removeEventListener('touchmove', onPointerMove, true);
- $el.removeEventListener('touchcancel', onPointerCancel, true);
- };
- var removeMouseEventListener = function removeMouseEventListener($el) {
- runtime.globalThis.document.removeEventListener('mousemove', onPointerMove, true);
- $el.removeEventListener('mousedown', onPointerDown, true);
- $el.removeEventListener('mouseout', onPointerOut, true);
- $el.removeEventListener('mouseover', onPointerOver, true);
- runtime.globalThis.removeEventListener('mouseup', onPointerUp, true);
- };
- renderingService.hooks.init.tap(DOMInteractionPlugin.tag, function () {
- var $el = _this.context.contextService.getDomElement();
- // @ts-ignore
- if (runtime.globalThis.navigator.msPointerEnabled) {
- // @ts-ignore
- $el.style.msContentZooming = 'none';
- // @ts-ignore
- $el.style.msTouchAction = 'none';
- } else if (canvas.supportsPointerEvents) {
- $el.style.touchAction = 'none';
- }
- if (canvas.supportsPointerEvents) {
- addPointerEventListener($el);
- } else {
- addMouseEventListener($el);
- }
- if (canvas.supportsTouchEvents) {
- addTouchEventListener($el);
- }
- if (config.useNativeClickEvent) {
- $el.addEventListener('click', onClick, true);
- }
- // use passive event listeners
- // @see https://zhuanlan.zhihu.com/p/24555031
- $el.addEventListener('wheel', onPointerWheel, {
- passive: true,
- capture: true
- });
- });
- renderingService.hooks.destroy.tap(DOMInteractionPlugin.tag, function () {
- var $el = _this.context.contextService.getDomElement();
- // @ts-ignore
- if (runtime.globalThis.navigator.msPointerEnabled) {
- // @ts-ignore
- $el.style.msContentZooming = '';
- // @ts-ignore
- $el.style.msTouchAction = '';
- } else if (canvas.supportsPointerEvents) {
- $el.style.touchAction = '';
- }
- if (canvas.supportsPointerEvents) {
- removePointerEventListener($el);
- } else {
- removeMouseEventListener($el);
- }
- if (canvas.supportsTouchEvents) {
- removeTouchEventListener($el);
- }
- if (config.useNativeClickEvent) {
- $el.removeEventListener('click', onClick, true);
- }
- $el.removeEventListener('wheel', onPointerWheel, true);
- });
- };
- return DOMInteractionPlugin;
- }();
- DOMInteractionPlugin.tag = 'DOMInteraction';
- var Plugin = /*#__PURE__*/function (_AbstractRendererPlug) {
- _inheritsLoose(Plugin, _AbstractRendererPlug);
- function Plugin() {
- var _this;
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
- _this = _AbstractRendererPlug.call.apply(_AbstractRendererPlug, [this].concat(args)) || this;
- _this.name = 'dom-interaction';
- return _this;
- }
- var _proto = Plugin.prototype;
- _proto.init = function init() {
- this.addRenderingPlugin(new DOMInteractionPlugin());
- };
- _proto.destroy = function destroy() {
- this.removeAllRenderingPlugins();
- };
- return Plugin;
- }(AbstractRendererPlugin);
- export { Plugin };
|