fix: l7-utils 添加对 lodash 的依赖

.eslintrc

@@ -10,10 +10,10 @@
     "browser": true,
     "node": true
   },
- "parser": "babel-eslint",
- "parserOptions": {
-   "sourceType": "module"
- },
+   "parser": "babel-eslint",
+   "parserOptions": {
+     "sourceType": "module"
+   },
   "plugins": [
     "html"
   ],

packages/component/src/control/BaseControl.ts

@@ -11,8 +11,6 @@ import {
 import { DOM } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
-import { pick } from 'lodash';
-
 export { PositionType } from '@antv/l7-core';
 
 export default abstract class Control<
@@ -23,16 +21,12 @@ export default abstract class Control<
    * @protected
    */
   protected static controlCount = 0;
+
   /**
    * 当前控件实例配置
    */
   public controlOption: O;
 
-  /**
-   * 控件类型，需要子类手动实现
-   */
-  public type: string;
-
   /**
    * 控件的 DOM 容器
    * @protected
@@ -74,11 +68,11 @@ export default abstract class Control<
     if ('position' in newOptions && newOptions.position !== oldPosition) {
       this.setPosition(newOptions.position);
     }
-    if (
-      ('className' in newOptions && newOptions.className !== oldClassName) ||
-      ('style' in newOptions && newOptions.style !== oldStyle)
-    ) {
-      this.setContainerCSS(pick(newOptions, 'className', 'style'));
+    if ('className' in newOptions && newOptions.className !== oldClassName) {
+      this.setContainerClassName(newOptions.className);
+    }
+    if ('style' in newOptions && newOptions.style !== oldStyle) {
+      this.setContainerStyle(newOptions.style);
     }
     this.controlOption = {
       ...this.controlOption,
@@ -106,7 +100,9 @@ export default abstract class Control<
     // 初始化 container
     this.container = this.onAdd();
     DOM.addClass(this.container, 'l7-control');
-    this.setContainerCSS(this.controlOption);
+    const { className, style } = this.controlOption;
+    this.setContainerClassName(className);
+    this.setContainerStyle(style);
 
     // 将 container 插入容器中
     this.insertContainer();
@@ -124,8 +120,14 @@ export default abstract class Control<
     this.onRemove();
   }
 
+  /**
+   * Control 被添加的时候被调用，返回 Control 对应的 DOM 容器
+   */
   public abstract onAdd(): HTMLElement;
 
+  /**
+   * Control 被移除时调用
+   */
   public abstract onRemove(): void;
 
   /**
@@ -202,24 +204,32 @@ export default abstract class Control<
   }
 
   /**
-   * 设置容器 container 的样式相关位置，包含 className 和 style
-   * @param option
+   * 设置容器 container 的样式相关位置，包含 className
+   * @param className
    */
-  protected setContainerCSS(
-    option: Pick<IControlOption, 'className' | 'style'>,
-  ) {
-    const { className, style } = option;
-    if ('className' in option) {
-      const { className: oldClassName } = this.controlOption;
-      if (oldClassName) {
-        DOM.removeClass(this.container, oldClassName);
-      }
-      if (className) {
-        DOM.addClass(this.container, className);
-      }
+  protected setContainerClassName(className?: string | null) {
+    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
+   */
+  protected setContainerStyle(style?: string | null) {
+    const container = this.container;
+    const { style: oldStyle } = this.controlOption;
+    if (oldStyle) {
+      DOM.removeStyle(container, oldStyle);
     }
     if (style) {
-      DOM.addStyle(this.container, style);
+      DOM.addStyle(container, style);
     }
   }
 

packages/core/src/services/component/IControlService.ts

@@ -9,6 +9,10 @@ export enum PositionType {
   'BOTTOMCENTER' = 'bottomcenter',
   'LEFTCENTER' = 'leftcenter',
   'RIGHTCENTER' = 'rightcenter',
+  'LEFTTOP' = 'lefttop',
+  'RIGHTTOP' = 'righttop',
+  'LEFTBOTTOM' = 'leftbottom',
+  'RIGHTBOTTOM' = 'rightbottom',
 }
 
 export type PositionName =
@@ -19,7 +23,11 @@ export type PositionName =
   | 'topcenter'
   | 'bottomcenter'
   | 'leftcenter'
-  | 'rightcenter';
+  | 'rightcenter'
+  | 'lefttop'
+  | 'righttop'
+  | 'leftbottom'
+  | 'rightbottom';
 
 export interface IControlOption {
   name: string;

packages/utils/package.json

@@ -31,7 +31,8 @@
     "d3-color": "^1.4.0",
     "web-worker-helper":"^0.0.3",
     "earcut":"^2.1.0",
-    "gl-matrix": "^3.1.0"
+    "gl-matrix": "^3.1.0",
+    "lodash": "^4.17.15"
 
   },
   "devDependencies": {

packages/utils/src/dom.ts

@@ -1,4 +1,6 @@
+import { pull } from 'lodash';
 import { $window, isMini } from './mini-adapter';
+
 type ELType = HTMLElement | SVGElement;
 export function getContainer(domId: string | HTMLDivElement) {
   let $dom = domId as HTMLDivElement;
@@ -173,3 +175,17 @@ export const DPR = getViewPortScale() < 1 ? 1 : $window.devicePixelRatio;
 export function addStyle(el: ELType, style: string) {
   el.setAttribute('style', `${el.style}; ${style}`);
 }
+
+export function getStyleList(style: string): string[] {
+  return style
+    .split(';')
+    .map((item) => item.trim())
+    .filter((item) => item);
+}
+
+export function removeStyle(el: ELType, style: string) {
+  const oldStyleList = getStyleList(el.getAttribute('style') ?? '');
+  const targetStyleList = getStyleList(style);
+  const newStyleList = pull(oldStyleList, ...targetStyleList);
+  el.setAttribute('style', newStyleList.join('; '));
+}