@antv/g-plugin-mobile-interaction/dist/index.js

A G plugin listening events in mobile environment

/*!
 * @antv/g-plugin-mobile-interaction
 * @description A G plugin listening events in mobile environment
 * @version 1.0.42
 * @date 12/12/2025, 3:30:21 AM
 * @author AntVis
 * @docs https://g.antv.antgroup.com/
 */
'use strict';

var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _createClass = require('@babel/runtime/helpers/createClass');
var _callSuper = require('@babel/runtime/helpers/callSuper');
var _inherits = require('@babel/runtime/helpers/inherits');
var gLite = require('@antv/g-lite');

/**
 * listen to mouse/touch/pointer events on DOM wrapper, trigger pointer events
 */
var MobileInteractionPlugin = /*#__PURE__*/function () {
  function MobileInteractionPlugin() {
    _classCallCheck(this, MobileInteractionPlugin);
  }
  return _createClass(MobileInteractionPlugin, [{
    key: "apply",
    value: function apply(context) {
      var renderingService = context.renderingService,
        contextService = context.contextService,
        config = context.config;
      // 获取小程序上下文
      var canvasEl = contextService.getDomElement();
      var onPointerDown = function onPointerDown(ev) {
        renderingService.hooks.pointerDown.call(ev);
      };
      var onPointerUp = function onPointerUp(ev) {
        renderingService.hooks.pointerUp.call(ev);
      };
      var onPointerMove = function onPointerMove(ev) {
        // 触发 G 定义的标准 pointerMove 事件
        renderingService.hooks.pointerMove.call(ev);
      };
      var onPointerOver = function onPointerOver(ev) {
        renderingService.hooks.pointerOver.call(ev);
      };
      var onPointerOut = function onPointerOut(ev) {
        renderingService.hooks.pointerOut.call(ev);
      };
      var onClick = function onClick(ev) {
        renderingService.hooks.click.call(ev);
      };
      var onPointerCancel = function onPointerCancel(ev) {
        renderingService.hooks.pointerCancel.call(ev);
      };
      renderingService.hooks.init.tap(MobileInteractionPlugin.tag, function () {
        // 基于小程序上下文的事件监听方式，绑定事件监听，可以参考下面基于 DOM 的方式
        canvasEl.addEventListener('touchstart', onPointerDown, true);
        canvasEl.addEventListener('touchend', onPointerUp, true);
        canvasEl.addEventListener('touchmove', onPointerMove, true);
        canvasEl.addEventListener('touchcancel', onPointerCancel, true);
        // FIXME: 这里不应该只在 canvasEl 上监听 mousemove 和 mouseup，而应该在更高层级的节点上例如 document 监听。
        // 否则无法判断是否移出了 canvasEl
        // canvasEl.addEventListener('mousemove', onPointerMove, true);
        // canvasEl.addEventListener('mousedown', onPointerDown, true);
        canvasEl.addEventListener('mouseout', onPointerOut, true);
        canvasEl.addEventListener('mouseover', onPointerOver, true);
        // canvasEl.addEventListener('mouseup', onPointerUp, true);

        if (config.useNativeClickEvent) {
          canvasEl.addEventListener('click', onClick, true);
        }
      });
      renderingService.hooks.destroy.tap(MobileInteractionPlugin.tag, function () {
        // 基于小程序上下文的事件监听方式，移除事件监听
        canvasEl.removeEventListener('touchstart', onPointerDown, true);
        canvasEl.removeEventListener('touchend', onPointerUp, true);
        canvasEl.removeEventListener('touchmove', onPointerMove, true);
        canvasEl.removeEventListener('touchcancel', onPointerCancel, true);

        // canvasEl.removeEventListener('mousemove', onPointerMove, true);
        // canvasEl.removeEventListener('mousedown', onPointerDown, true);
        canvasEl.removeEventListener('mouseout', onPointerOut, true);
        canvasEl.removeEventListener('mouseover', onPointerOver, true);
        // canvasEl.removeEventListener('mouseup', onPointerUp, true);

        if (config.useNativeClickEvent) {
          canvasEl.removeEventListener('click', onClick, true);
        }
      });
    }
  }]);
}();
MobileInteractionPlugin.tag = 'MobileInteraction';

var Plugin = /*#__PURE__*/function (_AbstractRendererPlug) {
  function Plugin() {
    var _this;
    _classCallCheck(this, Plugin);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, Plugin, [].concat(args));
    _this.name = 'mobile-interaction';
    return _this;
  }
  _inherits(Plugin, _AbstractRendererPlug);
  return _createClass(Plugin, [{
    key: "init",
    value: function init() {
      this.addRenderingPlugin(new MobileInteractionPlugin());
    }
  }, {
    key: "destroy",
    value: function destroy() {
      this.removeAllRenderingPlugins();
    }
  }]);
}(gLite.AbstractRendererPlugin);

exports.Plugin = Plugin;
//# sourceMappingURL=index.js.map