@antv/l7-component 2.9.37 → 2.10.0

package/es/control/baseControl/control.js

@@ -0,0 +1,313 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import { PositionType, TYPES } from '@antv/l7-core';
+import { DOM } from '@antv/l7-utils';
+import EventEmitter from 'eventemitter3';
+export { PositionType } from '@antv/l7-core';
+export { Control };
+
+var Control = /*#__PURE__*/function (_ref) {
+  _inherits(Control, _ref);
+
+  var _super = _createSuper(Control);
+
+  /**
+   * 当前类型控件实例个数
+   * @protected
+   */
+  function Control(option) {
+    var _this;
+
+    _classCallCheck(this, Control);
+
+    _this = _super.call(this);
+    Control.controlCount++;
+    _this.controlOption = _objectSpread(_objectSpread({}, _this.getDefault(option)), option || {});
+    return _this;
+  }
+
+  _createClass(Control, [{
+    key: "getOptions",
+    value: function getOptions() {
+      return this.controlOption;
+    }
+    /**
+     * 更新配置的方法，子类如果有自己的配置，也需要重写该方法
+     * @param newOptions
+     */
+
+  }, {
+    key: "setOptions",
+    value: function setOptions(newOptions) {
+      var defaultOptions = this.getDefault(newOptions);
+      Object.entries(newOptions).forEach(function (_ref2) {
+        var _ref3 = _slicedToArray(_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 = _objectSpread(_objectSpread({}, this.controlOption), newOptions);
+    }
+    /**
+     * 当 Control 被添加至 Scene 中，被 controlService 调用的方法
+     * @param sceneContainer
+     */
+
+  }, {
+    key: "addTo",
+    value: function addTo(sceneContainer) {
+      // 初始化各个 Service 实例
+      this.mapsService = sceneContainer.get(TYPES.IMapService);
+      this.renderService = sceneContainer.get(TYPES.IRendererService);
+      this.layerService = sceneContainer.get(TYPES.ILayerService);
+      this.controlService = sceneContainer.get(TYPES.IControlService);
+      this.configService = sceneContainer.get(TYPES.IGlobalConfigService);
+      this.scene = sceneContainer.get(TYPES.ISceneService);
+      this.sceneContainer = sceneContainer;
+      this.isShow = true; // 初始化 container
+
+      this.container = this.onAdd();
+      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);
+      return this;
+    }
+    /**
+     * 将控件移除时触发
+     */
+
+  }, {
+    key: "remove",
+    value: function remove() {
+      if (!this.mapsService) {
+        return this;
+      }
+
+      DOM.remove(this.container);
+      this.onRemove();
+      this.emit('remove', this);
+    }
+    /**
+     * Control 被添加的时候被调用，返回 Control 对应的 DOM 容器
+     */
+
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      return DOM.create('div');
+    }
+    /**
+     * Control 被移除时调用
+     */
+    // tslint:disable-next-line:no-empty
+
+  }, {
+    key: "onRemove",
+    value: function onRemove() {}
+    /**
+     * 显示控件时触发
+     */
+
+  }, {
+    key: "show",
+    value: function show() {
+      var container = this.container;
+      DOM.removeClass(container, 'l7-control--hide');
+      this.isShow = true;
+      this.emit('show', this);
+    }
+    /**
+     * 隐藏控件时触发
+     */
+
+  }, {
+    key: "hide",
+    value: function hide() {
+      var container = this.container;
+      DOM.addClass(container, 'l7-control--hide');
+      this.isShow = false;
+      this.emit('hide', this);
+    }
+    /**
+     * 获取默认构造器参数
+     */
+    // 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: PositionType.TOPRIGHT,
+        name: "".concat(Control.controlCount)
+      };
+    }
+    /**
+     * 获取当前控件对应的 DOM 容器
+     */
+
+  }, {
+    key: "getContainer",
+    value: function getContainer() {
+      return this.container;
+    }
+    /**
+     * 获取当前 Control 是否展示
+     */
+
+  }, {
+    key: "getIsShow",
+    value: function getIsShow() {
+      return this.isShow;
+    }
+  }, {
+    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();
+        }
+      }
+    }
+    /**
+     * 设置当前控件位置
+     * @param position
+     */
+
+  }, {
+    key: "setPosition",
+    value: function setPosition() {
+      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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
+     */
+
+  }, {
+    key: "setClassName",
+    value: function setClassName(className) {
+      var container = this.container;
+      var oldClassName = this.controlOption.className;
+
+      if (oldClassName) {
+        DOM.removeClass(container, oldClassName);
+      }
+
+      if (className) {
+        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');
+      }
+    }
+    /**
+     * 将控件 DOM 插入到对应 position 的容器中
+     * @protected
+     */
+
+  }, {
+    key: "insertContainer",
+    value: function insertContainer() {
+      var container = this.container;
+      var position = this.controlOption.position;
+      var corner = this.controlService.controlCorners[position];
+
+      if (position.indexOf('bottom') !== -1) {
+        corner.insertBefore(container, corner.firstChild);
+      } else {
+        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);
+
+_defineProperty(Control, "controlCount", 0);
+
+export { Control as default };

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

@@ -0,0 +1,4 @@
+export * from './control';
+export * from './buttonControl';
+export * from './popperControl';
+export * from './selectControl';

package/es/control/baseControl/index.js

@@ -0,0 +1,4 @@
+export * from "./control";
+export * from "./buttonControl";
+export * from "./popperControl";
+export * from "./selectControl";

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

@@ -0,0 +1,26 @@
+import { Popper, PopperPlacement, PopperTrigger } from '../../utils/popper';
+import ButtonControl, { IButtonControlOption } 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;
+}

package/es/control/baseControl/popperControl.js

@@ -0,0 +1,131 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import { Popper } from "../../utils/popper";
+import ButtonControl from "./buttonControl";
+export { PopperControl };
+var PopperPlacementMap = {
+  topleft: 'right-start',
+  topcenter: 'bottom',
+  topright: 'left-start',
+  bottomleft: 'right-end',
+  bottomcenter: 'top',
+  bottomright: 'left-end',
+  lefttop: 'bottom-start',
+  leftcenter: 'right',
+  leftbottom: 'top-start',
+  righttop: 'bottom-end',
+  rightcenter: 'left',
+  rightbottom: 'top-end'
+};
+
+var PopperControl = /*#__PURE__*/function (_ButtonControl) {
+  _inherits(PopperControl, _ButtonControl);
+
+  var _super = _createSuper(PopperControl);
+
+  function PopperControl() {
+    _classCallCheck(this, PopperControl);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(PopperControl, [{
+    key: "getPopper",
+    value:
+    /**
+     * 气泡实例
+     * @protected
+     */
+    function getPopper() {
+      return this.popper;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.popper.hide();
+
+      _get(_getPrototypeOf(PopperControl.prototype), "hide", this).call(this);
+    }
+    /**
+     * 获取默认配置
+     * @param option
+     */
+
+  }, {
+    key: "getDefault",
+    value: function getDefault(option) {
+      var _option$position;
+
+      var defaultOption = _get(_getPrototypeOf(PopperControl.prototype), "getDefault", this).call(this, option);
+
+      var position = (_option$position = option === null || option === void 0 ? void 0 : option.position) !== null && _option$position !== void 0 ? _option$position : defaultOption.position;
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(PopperControl.prototype), "getDefault", this).call(this, option)), {}, {
+        popperPlacement: PopperPlacementMap[position],
+        popperTrigger: 'click'
+      });
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var button = _get(_getPrototypeOf(PopperControl.prototype), "onAdd", this).call(this);
+
+      this.initPopper();
+      return button;
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      this.popper.destroy();
+    }
+  }, {
+    key: "initPopper",
+    value: function initPopper() {
+      var _this = this;
+
+      var _this$controlOption = this.controlOption,
+          popperClassName = _this$controlOption.popperClassName,
+          popperPlacement = _this$controlOption.popperPlacement,
+          popperTrigger = _this$controlOption.popperTrigger;
+      var popperContainer = this.mapsService.getMapContainer();
+      this.popper = new Popper(this.button, {
+        className: popperClassName,
+        placement: popperPlacement,
+        trigger: popperTrigger,
+        container: popperContainer,
+        unique: true
+      });
+      this.popper.on('show', function () {
+        _this.emit('popperShow', _this);
+      }).on('hide', function () {
+        _this.emit('popperHide', _this);
+      });
+      return this.popper;
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(option) {
+      _get(_getPrototypeOf(PopperControl.prototype), "setOptions", this).call(this, option);
+
+      if (this.checkUpdateOption(option, ['popperPlacement', 'popperTrigger', 'popperClassName'])) {
+        var content = this.popper.getContent();
+        this.popper.destroy();
+        this.initPopper();
+        this.popper.setContent(content);
+      }
+    }
+  }]);
+
+  return PopperControl;
+}(ButtonControl);
+
+export { PopperControl as default };

package/es/control/baseControl/selectControl.d.ts

@@ -0,0 +1,46 @@
+import { IPopperControlOption, PopperControl } from './popperControl';
+declare type BaseOptionItem = {
+    value: string;
+    text: string;
+    [key: string]: string;
+};
+declare type NormalOptionItem = BaseOptionItem & {
+    icon?: HTMLElement;
+};
+declare type ImageOptionItem = BaseOptionItem & {
+    img: string;
+};
+export declare type ControlOptionItem = ImageOptionItem | NormalOptionItem;
+export interface ISelectControlOption extends IPopperControlOption {
+    options: ControlOptionItem[];
+    defaultValue?: string | string[];
+}
+export { SelectControl };
+export default class SelectControl<O extends ISelectControlOption = ISelectControlOption> extends PopperControl<O> {
+    /**
+     * 当前选中的值
+     * @protected
+     */
+    protected selectValue: string[];
+    /**
+     * 选项对应的 DOM 列表
+     * @protected
+     */
+    protected optionDOMList: HTMLElement[];
+    setOptions(option: Partial<O>): void;
+    onAdd(): HTMLElement;
+    getSelectValue(): string | string[];
+    setSelectValue(value: string | string[], emitEvent?: boolean): void;
+    /**
+     * 是否为多选
+     * @protected
+     */
+    protected getIsMultiple(): boolean;
+    protected getPopperContent(options: ControlOptionItem[]): HTMLElement;
+    protected createNormalOption: (option: NormalOptionItem) => HTMLElement;
+    protected createImageOption(option: ImageOptionItem): HTMLElement;
+    protected createCheckbox(isSelect: boolean): HTMLElement;
+    protected onItemClick: (item: ControlOptionItem) => void;
+    protected isImageOptions(): boolean;
+    protected transSelectValue(value: string | string[]): string[];
+}