@antv/l7-component 2.25.7 → 2.25.9

package/es/control/baseControl/control.js

@@ -0,0 +1,256 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { PositionType } from '@antv/l7-core';
+import { DOM } from '@antv/l7-utils';
+import EventEmitter from 'eventemitter3';
+export { PositionType } from '@antv/l7-core';
+export { Control };
+export default class Control extends EventEmitter {
+  constructor(option) {
+    super();
+    /**
+     * 当前控件实例配置
+     */
+    _defineProperty(this, "controlOption", void 0);
+    /**
+     * 控件的 DOM 容器
+     * @protected
+     */
+    _defineProperty(this, "container", void 0);
+    /**
+     * 当前控件是否显示
+     * @protected
+     */
+    _defineProperty(this, "isShow", void 0);
+    _defineProperty(this, "sceneContainer", void 0);
+    _defineProperty(this, "scene", void 0);
+    _defineProperty(this, "mapsService", void 0);
+    _defineProperty(this, "renderService", void 0);
+    _defineProperty(this, "layerService", void 0);
+    _defineProperty(this, "controlService", void 0);
+    _defineProperty(this, "configService", void 0);
+    Control.controlCount++;
+    this.controlOption = _objectSpread(_objectSpread({}, this.getDefault(option)), option || {});
+  }
+  getOptions() {
+    return this.controlOption;
+  }
+
+  /**
+   * 更新配置的方法，子类如果有自己的配置，也需要重写该方法
+   * @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 = _objectSpread(_objectSpread({}, this.controlOption), newOptions);
+  }
+
+  /**
+   * 当 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;
+
+    // 初始化 container
+    this.container = this.onAdd();
+    DOM.addClass(this.container, 'l7-control');
+    const {
+      className,
+      style
+    } = this.controlOption;
+    if (className) {
+      this.setClassName(className);
+    }
+    if (style) {
+      this.setStyle(style);
+    }
+    // 将 container 插入容器中
+    this.insertContainer();
+    this.emit('add', this);
+    return this;
+  }
+
+  /**
+   * 将控件移除时触发
+   */
+  remove() {
+    if (!this.mapsService) {
+      return this;
+    }
+    DOM.remove(this.container);
+    this.onRemove();
+    this.emit('remove', this);
+  }
+
+  /**
+   * Control 被添加的时候被调用，返回 Control 对应的 DOM 容器
+   */
+  onAdd() {
+    return DOM.create('div');
+  }
+
+  /**
+   * Control 被移除时调用
+   */
+  // tslint:disable-next-line:no-empty
+  onRemove() {}
+
+  /**
+   * 显示控件时触发
+   */
+  show() {
+    const container = this.container;
+    DOM.removeClass(container, 'l7-control--hide');
+    this.isShow = true;
+    this.emit('show', this);
+  }
+
+  /**
+   * 隐藏控件时触发
+   */
+  hide() {
+    const 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
+  getDefault(option) {
+    // tslint:disable-next-line:no-object-literal-type-assertion
+    return {
+      position: PositionType.TOPRIGHT,
+      name: `${Control.controlCount}`
+    };
+  }
+
+  /**
+   * 获取当前控件对应的 DOM 容器
+   */
+  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();
+      }
+    }
+  }
+
+  /**
+   * 设置当前控件位置
+   * @param position
+   */
+  setPosition(position = PositionType.TOPLEFT) {
+    // 考虑组件的自动布局，需要销毁重建
+    const 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) {
+      DOM.removeClass(container, oldClassName);
+    }
+    if (className) {
+      DOM.addClass(container, className);
+    }
+  }
+
+  /**
+   * 设置容器 container 的样式相关位置，包含 style
+   * @param style
+   */
+  setStyle(style) {
+    const container = this.container;
+    if (style) {
+      container.setAttribute('style', style);
+    } else {
+      container.removeAttribute('style');
+    }
+  }
+
+  /**
+   * 将控件 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 {
+        corner.appendChild(container);
+      }
+    }
+  }
+
+  /**
+   * 检查当前传入 option 是否包含 keys 字段
+   * @param option
+   * @param keys
+   * @protected
+   */
+  checkUpdateOption(option, keys) {
+    return keys.some(key => key in option);
+  }
+}
+/**
+ * 当前类型控件实例个数
+ * @protected
+ */
+_defineProperty(Control, "controlCount", 0);

package/es/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/es/control/baseControl/index.js

@@ -0,0 +1,4 @@
+export { ButtonControl } from "./buttonControl";
+export { Control, PositionType } from "./control";
+export { PopperControl } from "./popperControl";
+export { SelectControl } from "./selectControl";

package/es/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;
+}

package/es/control/baseControl/popperControl.js

@@ -0,0 +1,92 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Popper } from "../../utils/popper";
+import ButtonControl from "./buttonControl";
+export { PopperControl };
+const 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'
+};
+export default class PopperControl extends ButtonControl {
+  constructor(...args) {
+    super(...args);
+    /**
+     * 气泡实例
+     * @protected
+     */
+    _defineProperty(this, "popper", void 0);
+  }
+  getPopper() {
+    return this.popper;
+  }
+  hide() {
+    this.popper.hide();
+    super.hide();
+  }
+
+  /**
+   * 获取默认配置
+   * @param option
+   */
+  getDefault(option) {
+    var _option$position;
+    const defaultOption = super.getDefault(option);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const position = (_option$position = option === null || option === void 0 ? void 0 : option.position) !== null && _option$position !== void 0 ? _option$position : defaultOption.position;
+    return _objectSpread(_objectSpread({}, super.getDefault(option)), {}, {
+      popperPlacement: position instanceof Element ? 'bottom' : PopperPlacementMap[position],
+      popperTrigger: 'click'
+    });
+  }
+  onAdd() {
+    const button = super.onAdd();
+    this.initPopper();
+    return button;
+  }
+  onRemove() {
+    this.popper.destroy();
+  }
+  initPopper() {
+    const {
+      popperClassName,
+      popperPlacement,
+      popperTrigger
+    } = this.controlOption;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const popperContainer = this.mapsService.getMapContainer();
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    this.popper = new Popper(this.button, {
+      className: popperClassName,
+      placement: popperPlacement,
+      trigger: popperTrigger,
+      container: popperContainer,
+      unique: true
+    });
+    this.popper.on('show', () => {
+      this.emit('popperShow', this);
+    }).on('hide', () => {
+      this.emit('popperHide', this);
+    });
+    return this.popper;
+  }
+  setOptions(option) {
+    super.setOptions(option);
+    if (this.checkUpdateOption(option, ['popperPlacement', 'popperTrigger', 'popperClassName'])) {
+      const content = this.popper.getContent();
+      this.popper.destroy();
+      this.initPopper();
+      this.popper.setContent(content);
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+import type { IPopperControlOption } from './popperControl';
+import { PopperControl } from './popperControl';
+type BaseOptionItem = {
+    value: string;
+    text: string;
+    [key: string]: string;
+};
+type NormalOptionItem = BaseOptionItem & {
+    icon?: HTMLElement;
+};
+type ImageOptionItem = BaseOptionItem & {
+    img: string;
+};
+export 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;
+    /**
+     * 渲染弹窗内容
+     * @param options
+     * @returns
+     */
+    protected getPopperContent(options: ControlOptionItem[]): HTMLElement;
+    protected createNormalOption: (option: NormalOptionItem) => HTMLElement;
+    protected createImageOption(option: ImageOptionItem): HTMLElement;
+    protected createCheckbox(isSelect: boolean): HTMLElement;
+    protected createRadio(isSelect: boolean): HTMLElement;
+    protected onItemClick: (item: ControlOptionItem) => void;
+    protected isImageOptions(): boolean;
+    protected transSelectValue(value: string | string[]): string[];
+}

package/es/control/baseControl/selectControl.js

@@ -0,0 +1,173 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { DOM } from '@antv/l7-utils';
+import { PopperControl } from "./popperControl";
+export { SelectControl };
+var SelectControlConstant = /*#__PURE__*/function (SelectControlConstant) {
+  SelectControlConstant["ActiveOptionClassName"] = "l7-select-control-item-active";
+  SelectControlConstant["OptionValueAttrKey"] = "data-option-value";
+  SelectControlConstant["OptionIndexAttrKey"] = "data-option-index";
+  return SelectControlConstant;
+}(SelectControlConstant || {});
+export default class SelectControl extends PopperControl {
+  constructor(...args) {
+    super(...args);
+    /**
+     * 当前选中的值
+     * @protected
+     */
+    _defineProperty(this, "selectValue", []);
+    /**
+     * 选项对应的 DOM 列表
+     * @protected
+     */
+    _defineProperty(this, "optionDOMList", void 0);
+    _defineProperty(this, "createNormalOption", option => {
+      const isSelect = this.selectValue.includes(option.value);
+      const optionDOM = DOM.create('div', `l7-select-control-item ${isSelect ? SelectControlConstant.ActiveOptionClassName : ''}`);
+      if (this.getIsMultiple()) {
+        optionDOM.appendChild(this.createCheckbox(isSelect));
+      } else {
+        optionDOM.appendChild(this.createRadio(isSelect));
+      }
+      if (option.icon) {
+        optionDOM.appendChild(option.icon);
+      }
+      const textDOM = DOM.create('span');
+      textDOM.innerText = option.text;
+      optionDOM.appendChild(textDOM);
+      return optionDOM;
+    });
+    _defineProperty(this, "onItemClick", item => {
+      if (this.getIsMultiple()) {
+        const targetIndex = this.selectValue.findIndex(value => value === item.value);
+        if (targetIndex > -1) {
+          this.selectValue.splice(targetIndex, 1);
+        } else {
+          this.selectValue = [...this.selectValue, item.value];
+        }
+      } else {
+        this.selectValue = [item.value];
+      }
+      this.setSelectValue(this.selectValue);
+    });
+  }
+  setOptions(option) {
+    super.setOptions(option);
+    const {
+      options
+    } = option;
+    if (options) {
+      this.popper.setContent(this.getPopperContent(options));
+    }
+  }
+  onAdd() {
+    const button = super.onAdd();
+    const {
+      defaultValue
+    } = this.controlOption;
+    if (defaultValue) {
+      this.selectValue = this.transSelectValue(defaultValue);
+    }
+    this.popper.setContent(this.getPopperContent(this.controlOption.options));
+    return button;
+  }
+  getSelectValue() {
+    return this.getIsMultiple() ? this.selectValue : this.selectValue[0];
+  }
+  setSelectValue(value, emitEvent = true) {
+    const finalValue = this.transSelectValue(value);
+    this.optionDOMList.forEach(optionDOM => {
+      const optionValue = optionDOM.getAttribute(SelectControlConstant.OptionValueAttrKey);
+      const checkboxDOM = optionDOM.querySelector('input[type=checkbox]');
+      const radioDOM = optionDOM.querySelector('input[type=radio]');
+      const isActive = finalValue.includes(optionValue);
+
+      // 设置类名和选中状态的函数
+      const setDOMState = (dom, active) => {
+        DOM.toggleClass(optionDOM, SelectControlConstant.ActiveOptionClassName, active);
+        if (dom) {
+          DOM.setChecked(dom, active);
+        }
+      };
+      setDOMState(checkboxDOM, isActive);
+      setDOMState(radioDOM, isActive);
+    });
+    this.selectValue = finalValue;
+    if (emitEvent) {
+      this.emit('selectChange', this.getIsMultiple() ? finalValue : finalValue[0]);
+    }
+  }
+
+  /**
+   * 是否为多选
+   * @protected
+   */
+  getIsMultiple() {
+    return false;
+  }
+
+  /**
+   * 渲染弹窗内容
+   * @param options
+   * @returns
+   */
+  getPopperContent(options) {
+    const isImageOptions = this.isImageOptions();
+    const content = DOM.create('div', isImageOptions ? 'l7-select-control--image' : 'l7-select-control--normal');
+    if (this.getIsMultiple()) {
+      DOM.addClass(content, 'l7-select-control--multiple');
+    }
+    const optionsDOMList = options.map((option, optionIndex) => {
+      const optionDOM = isImageOptions ?
+      // @ts-ignore
+      this.createImageOption(option) : this.createNormalOption(option);
+      optionDOM.setAttribute(SelectControlConstant.OptionValueAttrKey, option.value);
+      optionDOM.setAttribute(SelectControlConstant.OptionIndexAttrKey, window.String(optionIndex));
+      optionDOM.addEventListener('click', this.onItemClick.bind(this, option));
+      return optionDOM;
+    });
+    content.append(...optionsDOMList);
+    this.optionDOMList = optionsDOMList;
+    return content;
+  }
+  createImageOption(option) {
+    const isSelect = this.selectValue.includes(option.value);
+    const optionDOM = DOM.create('div', `l7-select-control-item ${isSelect ? SelectControlConstant.ActiveOptionClassName : ''}`);
+    const imgDOM = DOM.create('img');
+    imgDOM.setAttribute('src', option.img);
+    DOM.setUnDraggable(imgDOM);
+    optionDOM.appendChild(imgDOM);
+    const rowDOM = DOM.create('div', 'l7-select-control-item-row');
+    if (this.getIsMultiple()) {
+      optionDOM.appendChild(this.createCheckbox(isSelect));
+    }
+    const textDOM = DOM.create('span');
+    textDOM.innerText = option.text;
+    rowDOM.appendChild(textDOM);
+    optionDOM.appendChild(rowDOM);
+    return optionDOM;
+  }
+  createCheckbox(isSelect) {
+    const checkboxDOM = DOM.create('input');
+    checkboxDOM.setAttribute('type', 'checkbox');
+    if (isSelect) {
+      DOM.setChecked(checkboxDOM, true);
+    }
+    return checkboxDOM;
+  }
+  createRadio(isSelect) {
+    const radioDOM = DOM.create('input');
+    radioDOM.setAttribute('type', 'radio');
+    if (isSelect) {
+      DOM.setChecked(radioDOM, true);
+    }
+    return radioDOM;
+  }
+  isImageOptions() {
+    // @ts-ignore
+    return !!this.controlOption.options.find(item => item.img);
+  }
+  transSelectValue(value) {
+    return Array.isArray(value) ? value : [value];
+  }
+}

package/es/control/exportImage.d.ts

@@ -0,0 +1,19 @@
+import type { IButtonControlOption } from './baseControl/buttonControl';
+import ButtonControl from './baseControl/buttonControl';
+export interface IExportImageControlOption extends IButtonControlOption {
+    imageType: 'png' | 'jpeg';
+    onExport: (base64: string) => void;
+}
+export { ExportImage };
+export default class ExportImage extends ButtonControl<IExportImageControlOption> {
+    onAdd(): HTMLElement;
+    getDefault(option?: Partial<IExportImageControlOption>): IExportImageControlOption;
+    getImage(): Promise<string>;
+    protected onClick: () => Promise<void>;
+    /**
+     * 将多张图片合并为一张图片
+     * @protected
+     * @param base64List
+     */
+    protected mergeImage: (...base64List: string[]) => Promise<string>;
+}