From eaec6bc4aec834b80e4c5e10c636a42aa9c780d6 Mon Sep 17 00:00:00 2001 From: yanxiong Date: Tue, 9 Aug 2022 19:24:48 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20l7-utils=20=E6=B7=BB=E5=8A=A0=E5=AF=B9?= =?UTF-8?q?=20lodash=20=E7=9A=84=E4=BE=9D=E8=B5=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc | 8 +-- packages/component/src/control/BaseControl.ts | 66 +++++++++++-------- .../src/services/component/IControlService.ts | 10 ++- packages/utils/package.json | 3 +- packages/utils/src/dom.ts | 16 +++++ 5 files changed, 69 insertions(+), 34 deletions(-) diff --git a/.eslintrc b/.eslintrc index 8f65802ecc..08b573f971 100755 --- a/.eslintrc +++ b/.eslintrc @@ -10,10 +10,10 @@ "browser": true, "node": true }, - "parser": "babel-eslint", - "parserOptions": { - "sourceType": "module" - }, + "parser": "babel-eslint", + "parserOptions": { + "sourceType": "module" + }, "plugins": [ "html" ], diff --git a/packages/component/src/control/BaseControl.ts b/packages/component/src/control/BaseControl.ts index 5940a9931a..634ad2c710 100644 --- a/packages/component/src/control/BaseControl.ts +++ b/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, - ) { - 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); } } diff --git a/packages/core/src/services/component/IControlService.ts b/packages/core/src/services/component/IControlService.ts index 84cb5882e6..df8a163a7c 100644 --- a/packages/core/src/services/component/IControlService.ts +++ b/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; diff --git a/packages/utils/package.json b/packages/utils/package.json index 1e0001a622..f67047bfc0 100644 --- a/packages/utils/package.json +++ b/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": { diff --git a/packages/utils/src/dom.ts b/packages/utils/src/dom.ts index c676ddd9b3..488b944333 100644 --- a/packages/utils/src/dom.ts +++ b/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('; ')); +}