@antv/l7-component 2.21.0 → 2.21.2

package/lib/control/baseControl/control.js

@@ -7,305 +7,261 @@ Object.defineProperty(exports, "__esModule", {
 exports.Control = void 0;
 Object.defineProperty(exports, "PositionType", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _l7Core.PositionType;
   }
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _l7Core = require("@antv/l7-core");
 var _l7Utils = require("@antv/l7-utils");
 var _eventemitter = _interopRequireDefault(require("eventemitter3"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var Control = exports.default = exports.Control = /*#__PURE__*/function (_ref) {
-  (0, _inherits2.default)(Control, _ref);
-  var _super = _createSuper(Control);
-  /**
-   * 当前控件实例配置
-   */
+class Control extends _eventemitter.default {
+  constructor(option) {
+    super();
+    /**
+     * 当前控件实例配置
+     */
+    (0, _defineProperty2.default)(this, "controlOption", void 0);
+    /**
+     * 控件的 DOM 容器
+     * @protected
+     */
+    (0, _defineProperty2.default)(this, "container", void 0);
+    /**
+     * 当前控件是否显示
+     * @protected
+     */
+    (0, _defineProperty2.default)(this, "isShow", void 0);
+    (0, _defineProperty2.default)(this, "sceneContainer", void 0);
+    (0, _defineProperty2.default)(this, "scene", void 0);
+    (0, _defineProperty2.default)(this, "mapsService", void 0);
+    (0, _defineProperty2.default)(this, "renderService", void 0);
+    (0, _defineProperty2.default)(this, "layerService", void 0);
+    (0, _defineProperty2.default)(this, "controlService", void 0);
+    (0, _defineProperty2.default)(this, "configService", void 0);
+    Control.controlCount++;
+    this.controlOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.getDefault(option)), option || {});
+  }
+  getOptions() {
+    return this.controlOption;
+  }
 
   /**
-   * 控件的 DOM 容器
-   * @protected
+   * 更新配置的方法，子类如果有自己的配置，也需要重写该方法
+   * @param newOptions
    */
+  setOptions(newOptions) {
+    const defaultOptions = this.getDefault(newOptions);
+    Object.entries(newOptions).forEach(([key, value]) => {
+      if (value === undefined) {
+        newOptions[key] = defaultOptions[key];
+      }
+    });
+    if ('position' in newOptions) {
+      this.setPosition(newOptions.position);
+    }
+    if ('className' in newOptions) {
+      this.setClassName(newOptions.className);
+    }
+    if ('style' in newOptions) {
+      this.setStyle(newOptions.style);
+    }
+    this.controlOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.controlOption), newOptions);
+  }
 
   /**
-   * 当前控件是否显示
-   * @protected
+   * 当 Control 被添加至 Scene 中，被 controlService 调用的方法
+   * @param sceneContainer
    */
+  addTo(sceneContainer) {
+    // 初始化各个 Service 实例
+    this.mapsService = sceneContainer.mapService;
+    this.renderService = sceneContainer.rendererService;
+    this.layerService = sceneContainer.layerService;
+    this.controlService = sceneContainer.controlService;
+    this.configService = sceneContainer.globalConfigService;
+    this.scene = sceneContainer.sceneService;
+    this.sceneContainer = sceneContainer;
+    this.isShow = true;
 
-  function Control(option) {
-    var _this;
-    (0, _classCallCheck2.default)(this, Control);
-    _this = _super.call(this);
-    Control.controlCount++;
-    _this.controlOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.getDefault(option)), option || {});
-    return _this;
-  }
-  (0, _createClass2.default)(Control, [{
-    key: "getOptions",
-    value: function getOptions() {
-      return this.controlOption;
+    // 初始化 container
+    this.container = this.onAdd();
+    _l7Utils.DOM.addClass(this.container, 'l7-control');
+    const {
+      className,
+      style
+    } = this.controlOption;
+    if (className) {
+      this.setClassName(className);
     }
-
-    /**
-     * 更新配置的方法，子类如果有自己的配置，也需要重写该方法
-     * @param newOptions
-     */
-  }, {
-    key: "setOptions",
-    value: function setOptions(newOptions) {
-      var defaultOptions = this.getDefault(newOptions);
-      Object.entries(newOptions).forEach(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
-        if (value === undefined) {
-          newOptions[key] = defaultOptions[key];
-        }
-      });
-      if ('position' in newOptions) {
-        this.setPosition(newOptions.position);
-      }
-      if ('className' in newOptions) {
-        this.setClassName(newOptions.className);
-      }
-      if ('style' in newOptions) {
-        this.setStyle(newOptions.style);
-      }
-      this.controlOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.controlOption), newOptions);
+    if (style) {
+      this.setStyle(style);
     }
+    // 将 container 插入容器中
+    this.insertContainer();
+    this.emit('add', this);
+    return this;
+  }
 
-    /**
-     * 当 Control 被添加至 Scene 中，被 controlService 调用的方法
-     * @param sceneContainer
-     */
-  }, {
-    key: "addTo",
-    value: function addTo(sceneContainer) {
-      // 初始化各个 Service 实例
-      this.mapsService = sceneContainer.mapService;
-      this.renderService = sceneContainer.rendererService;
-      this.layerService = sceneContainer.layerService;
-      this.controlService = sceneContainer.controlService;
-      this.configService = sceneContainer.globalConfigService;
-      this.scene = sceneContainer.sceneService;
-      this.sceneContainer = sceneContainer;
-      this.isShow = true;
-
-      // 初始化 container
-      this.container = this.onAdd();
-      _l7Utils.DOM.addClass(this.container, 'l7-control');
-      var _this$controlOption = this.controlOption,
-        className = _this$controlOption.className,
-        style = _this$controlOption.style;
-      if (className) {
-        this.setClassName(className);
-      }
-      if (style) {
-        this.setStyle(style);
-      }
-      // 将 container 插入容器中
-      this.insertContainer();
-      this.emit('add', this);
+  /**
+   * 将控件移除时触发
+   */
+  remove() {
+    if (!this.mapsService) {
       return this;
     }
+    _l7Utils.DOM.remove(this.container);
+    this.onRemove();
+    this.emit('remove', this);
+  }
 
-    /**
-     * 将控件移除时触发
-     */
-  }, {
-    key: "remove",
-    value: function remove() {
-      if (!this.mapsService) {
-        return this;
-      }
-      _l7Utils.DOM.remove(this.container);
-      this.onRemove();
-      this.emit('remove', this);
-    }
+  /**
+   * Control 被添加的时候被调用，返回 Control 对应的 DOM 容器
+   */
+  onAdd() {
+    return _l7Utils.DOM.create('div');
+  }
 
-    /**
-     * Control 被添加的时候被调用，返回 Control 对应的 DOM 容器
-     */
-  }, {
-    key: "onAdd",
-    value: function onAdd() {
-      return _l7Utils.DOM.create('div');
-    }
+  /**
+   * Control 被移除时调用
+   */
+  // tslint:disable-next-line:no-empty
+  onRemove() {}
 
-    /**
-     * Control 被移除时调用
-     */
-    // tslint:disable-next-line:no-empty
-  }, {
-    key: "onRemove",
-    value: function onRemove() {}
+  /**
+   * 显示控件时触发
+   */
+  show() {
+    const container = this.container;
+    _l7Utils.DOM.removeClass(container, 'l7-control--hide');
+    this.isShow = true;
+    this.emit('show', this);
+  }
 
-    /**
-     * 显示控件时触发
-     */
-  }, {
-    key: "show",
-    value: function show() {
-      var container = this.container;
-      _l7Utils.DOM.removeClass(container, 'l7-control--hide');
-      this.isShow = true;
-      this.emit('show', this);
-    }
+  /**
+   * 隐藏控件时触发
+   */
+  hide() {
+    const container = this.container;
+    _l7Utils.DOM.addClass(container, 'l7-control--hide');
+    this.isShow = false;
+    this.emit('hide', this);
+  }
 
-    /**
-     * 隐藏控件时触发
-     */
-  }, {
-    key: "hide",
-    value: function hide() {
-      var container = this.container;
-      _l7Utils.DOM.addClass(container, 'l7-control--hide');
-      this.isShow = false;
-      this.emit('hide', this);
-    }
+  /**
+   * 获取默认构造器参数
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getDefault(option) {
+    // tslint:disable-next-line:no-object-literal-type-assertion
+    return {
+      position: _l7Core.PositionType.TOPRIGHT,
+      name: `${Control.controlCount}`
+    };
+  }
 
-    /**
-     * 获取默认构造器参数
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "getDefault",
-    value: function getDefault(option) {
-      // tslint:disable-next-line:no-object-literal-type-assertion
-      return {
-        position: _l7Core.PositionType.TOPRIGHT,
-        name: "".concat(Control.controlCount)
-      };
-    }
+  /**
+   * 获取当前控件对应的 DOM 容器
+   */
+  getContainer() {
+    return this.container;
+  }
 
-    /**
-     * 获取当前控件对应的 DOM 容器
-     */
-  }, {
-    key: "getContainer",
-    value: function getContainer() {
-      return this.container;
+  /**
+   * 获取当前 Control 是否展示
+   */
+  getIsShow() {
+    return this.isShow;
+  }
+  _refocusOnMap(e) {
+    // if map exists and event is not a keyboard event
+    if (this.mapsService && e && e.screenX > 0 && e.screenY > 0) {
+      const container = this.mapsService.getContainer();
+      if (container !== null) {
+        container.focus();
+      }
     }
+  }
 
-    /**
-     * 获取当前 Control 是否展示
-     */
-  }, {
-    key: "getIsShow",
-    value: function getIsShow() {
-      return this.isShow;
+  /**
+   * 设置当前控件位置
+   * @param position
+   */
+  setPosition(position = _l7Core.PositionType.TOPLEFT) {
+    // 考虑组件的自动布局，需要销毁重建
+    const controlService = this.controlService;
+    if (controlService) {
+      controlService.removeControl(this);
     }
-  }, {
-    key: "_refocusOnMap",
-    value: function _refocusOnMap(e) {
-      // if map exists and event is not a keyboard event
-      if (this.mapsService && e && e.screenX > 0 && e.screenY > 0) {
-        var container = this.mapsService.getContainer();
-        if (container !== null) {
-          container.focus();
-        }
-      }
+    this.controlOption.position = position;
+    if (controlService) {
+      controlService.addControl(this, this.sceneContainer);
     }
+    return this;
+  }
 
-    /**
-     * 设置当前控件位置
-     * @param position
-     */
-  }, {
-    key: "setPosition",
-    value: function setPosition() {
-      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _l7Core.PositionType.TOPLEFT;
-      // 考虑组件的自动布局，需要销毁重建
-      var controlService = this.controlService;
-      if (controlService) {
-        controlService.removeControl(this);
-      }
-      this.controlOption.position = position;
-      if (controlService) {
-        controlService.addControl(this, this.sceneContainer);
-      }
-      return this;
+  /**
+   * 设置容器 container 的样式相关位置，包含 className
+   * @param className
+   */
+  setClassName(className) {
+    const container = this.container;
+    const {
+      className: oldClassName
+    } = this.controlOption;
+    if (oldClassName) {
+      _l7Utils.DOM.removeClass(container, oldClassName);
     }
-
-    /**
-     * 设置容器 container 的样式相关位置，包含 className
-     * @param className
-     */
-  }, {
-    key: "setClassName",
-    value: function setClassName(className) {
-      var container = this.container;
-      var oldClassName = this.controlOption.className;
-      if (oldClassName) {
-        _l7Utils.DOM.removeClass(container, oldClassName);
-      }
-      if (className) {
-        _l7Utils.DOM.addClass(container, className);
-      }
+    if (className) {
+      _l7Utils.DOM.addClass(container, className);
     }
+  }
 
-    /**
-     * 设置容器 container 的样式相关位置，包含 style
-     * @param style
-     */
-  }, {
-    key: "setStyle",
-    value: function setStyle(style) {
-      var container = this.container;
-      if (style) {
-        container.setAttribute('style', style);
-      } else {
-        container.removeAttribute('style');
-      }
+  /**
+   * 设置容器 container 的样式相关位置，包含 style
+   * @param style
+   */
+  setStyle(style) {
+    const container = this.container;
+    if (style) {
+      container.setAttribute('style', style);
+    } else {
+      container.removeAttribute('style');
     }
+  }
 
-    /**
-     * 将控件 DOM 插入到对应 position 的容器中
-     * @protected
-     */
-  }, {
-    key: "insertContainer",
-    value: function insertContainer() {
-      var position = this.controlOption.position;
-      var container = this.container;
-      if (position instanceof Element) {
-        position.appendChild(container);
+  /**
+   * 将控件 DOM 插入到对应 position 的容器中
+   * @protected
+   */
+  insertContainer() {
+    const position = this.controlOption.position;
+    const container = this.container;
+    if (position instanceof Element) {
+      position.appendChild(container);
+    } else {
+      const corner = this.controlService.controlCorners[position];
+      if (['bottomleft', 'bottomright', 'righttop', 'rightbottom'].includes(position)) {
+        corner.insertBefore(container, corner.firstChild);
       } else {
-        var corner = this.controlService.controlCorners[position];
-        if (['bottomleft', 'bottomright', 'righttop', 'rightbottom'].includes(position)) {
-          corner.insertBefore(container, corner.firstChild);
-        } else {
-          corner.appendChild(container);
-        }
+        corner.appendChild(container);
       }
     }
+  }
 
-    /**
-     * 检查当前传入 option 是否包含 keys 字段
-     * @param option
-     * @param keys
-     * @protected
-     */
-  }, {
-    key: "checkUpdateOption",
-    value: function checkUpdateOption(option, keys) {
-      return keys.some(function (key) {
-        return key in option;
-      });
-    }
-  }]);
-  return Control;
-}(_eventemitter.default);
+  /**
+   * 检查当前传入 option 是否包含 keys 字段
+   * @param option
+   * @param keys
+   * @protected
+   */
+  checkUpdateOption(option, keys) {
+    return keys.some(key => key in option);
+  }
+}
+exports.default = exports.Control = Control;
 /**
  * 当前类型控件实例个数
  * @protected

package/lib/control/baseControl/index.d.ts

@@ -0,0 +1,4 @@
+export { ButtonControl, type IButtonControlOption } from './buttonControl';
+export { Control, PositionType, type IControlOption } from './control';
+export { PopperControl, type IPopperControlOption } from './popperControl';
+export { SelectControl, type ControlOptionItem, type ISelectControlOption, } from './selectControl';

package/lib/control/baseControl/index.js

@@ -5,31 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ButtonControl", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _buttonControl.ButtonControl;
   }
 });
 Object.defineProperty(exports, "Control", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _control.Control;
   }
 });
 Object.defineProperty(exports, "PopperControl", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _popperControl.PopperControl;
   }
 });
 Object.defineProperty(exports, "PositionType", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _control.PositionType;
   }
 });
 Object.defineProperty(exports, "SelectControl", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _selectControl.SelectControl;
   }
 });

package/lib/control/baseControl/popperControl.d.ts

@@ -0,0 +1,28 @@
+import type { PopperPlacement, PopperTrigger } from '../../utils/popper';
+import { Popper } from '../../utils/popper';
+import type { IButtonControlOption } from './buttonControl';
+import ButtonControl from './buttonControl';
+export { PopperControl };
+export interface IPopperControlOption extends IButtonControlOption {
+    popperPlacement: PopperPlacement;
+    popperClassName?: string;
+    popperTrigger: PopperTrigger;
+}
+export default class PopperControl<O extends IPopperControlOption = IPopperControlOption> extends ButtonControl<O> {
+    /**
+     * 气泡实例
+     * @protected
+     */
+    protected popper: Popper;
+    getPopper(): Popper;
+    hide(): void;
+    /**
+     * 获取默认配置
+     * @param option
+     */
+    getDefault(option?: Partial<O>): O;
+    onAdd(): HTMLElement;
+    onRemove(): void;
+    initPopper(): Popper;
+    setOptions(option: Partial<O>): void;
+}