feat: 新增 popperControl 控件基类

dev-demos/layer/control/fullscreen.tsx

@@ -18,7 +18,7 @@ const Demo: FunctionComponent = () => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
-        style: 'dark',
+        style: 'normal',
         center: [120, 30],
         pitch: 0,
         zoom: 6.45,

packages/component/src/control/baseControl/buttonControl.ts

@@ -1,9 +1,14 @@
 import { DOM } from '@antv/l7-utils';
-import { IButtonControlOption } from '../../interface';
-import Control from './control';
+import Control, { IControlOption } from './control';
 
 export { ButtonControl };
 
+export interface IButtonControlOption extends IControlOption {
+  btnIcon?: HTMLElement;
+  btnText?: string;
+  title?: string;
+}
+
 export default abstract class ButtonControl extends Control<
   IButtonControlOption
 > {
@@ -69,15 +74,15 @@ export default abstract class ButtonControl extends Control<
       this.button?.setAttribute('title', title ?? '');
     }
     if ('btnIcon' in newOptions) {
-      this.updateButtonIcon(btnIcon);
+      this.setBtnIcon(btnIcon);
     }
     if ('btnText' in newOptions) {
-      this.updateButtonText(btnText);
+      this.setBtnText(btnText);
     }
     super.setOptions(newOptions);
   }
 
-  protected updateButtonIcon(newIcon: IButtonControlOption['btnIcon']) {
+  public setBtnIcon(newIcon: IButtonControlOption['btnIcon']) {
     if (this.buttonIcon) {
       DOM.remove(this.buttonIcon);
     }
@@ -92,7 +97,7 @@ export default abstract class ButtonControl extends Control<
     }
   }
 
-  protected updateButtonText(newText: IButtonControlOption['btnText']) {
+  public setBtnText(newText: IButtonControlOption['btnText']) {
     if (newText) {
       let btnText = this.buttonText;
       if (!btnText) {

packages/component/src/control/baseControl/control.ts

@@ -17,7 +17,7 @@ import { ControlEvent } from '../../interface';
 
 export { PositionType } from '@antv/l7-core';
 
-export { Control };
+export { Control, IControlOption };
 
 export default abstract class Control<O extends IControlOption = IControlOption>
   extends EventEmitter<ControlEvent>
@@ -76,10 +76,10 @@ export default abstract class Control<O extends IControlOption = IControlOption>
       this.setPosition(newOptions.position);
     }
     if ('className' in newOptions && newOptions.className !== oldClassName) {
-      this.setContainerClassName(newOptions.className);
+      this.setClassName(newOptions.className);
     }
     if ('style' in newOptions && newOptions.style !== oldStyle) {
-      this.setContainerStyle(newOptions.style);
+      this.setStyle(newOptions.style);
     }
     this.controlOption = {
       ...this.controlOption,
@@ -197,7 +197,7 @@ export default abstract class Control<O extends IControlOption = IControlOption>
    * 设置当前控件位置
    * @param position
    */
-  protected setPosition(
+  public setPosition(
     position: PositionType | PositionName = PositionType.TOPLEFT,
   ) {
     // 考虑组件的自动布局，需要销毁重建
@@ -216,7 +216,7 @@ export default abstract class Control<O extends IControlOption = IControlOption>
    * 设置容器 container 的样式相关位置，包含 className
    * @param className
    */
-  protected setContainerClassName(className?: string | null) {
+  public setClassName(className?: string | null) {
     const container = this.container;
     const { className: oldClassName } = this.controlOption;
     if (oldClassName) {
@@ -231,7 +231,7 @@ export default abstract class Control<O extends IControlOption = IControlOption>
    * 设置容器 container 的样式相关位置，包含 style
    * @param style
    */
-  protected setContainerStyle(style?: string | null) {
+  public setStyle(style?: string | null) {
     const container = this.container;
     const { style: oldStyle } = this.controlOption;
     if (oldStyle) {

packages/component/src/control/baseControl/popperControl.ts

@@ -0,0 +1,14 @@
+import { IButtonControlOption } from './buttonControl';
+import Control from './control';
+
+export { PopperControl };
+
+export interface IPopperControlOption extends IButtonControlOption {
+  popperPlacement: string;
+}
+
+export default abstract class PopperControl extends Control<
+  IPopperControlOption
+> {
+
+}

packages/component/src/control/fullscreen.ts

@@ -18,7 +18,7 @@ export default class Fullscreen extends ButtonControl {
     return {
       ...super.getDefault(),
       btnIcon: createL7Icon('l7-icon-quanping'),
-      btnText: '全屏',
+      // btnText: '全屏',
       title: '全屏',
     };
   }

packages/component/src/css/buttonControl.less

@@ -8,10 +8,12 @@
   border-radius: @l7-btn-control-border-radius;
   outline: 0;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: all 0.2s;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 0 (@l7-btn-control-size - @l7-btn-icon-size) / 2;
+  box-shadow: 0 0 6px @l7-btn-control-shadow-color;
   &:not(:disabled) {
     &:hover {
       background-color: @l7-btn-control-bg-hover-color;
@@ -35,4 +37,9 @@
   * + .l7-button-control__text {
     margin-left: 4px;
   }
+
+  .l7-iconfont {
+    width: @l7-btn-icon-size;
+    height: @l7-btn-icon-size;
+  }
 }

packages/component/src/css/variables.less

@@ -8,7 +8,9 @@
 @l7-btn-control-bg-color: @l7-control-bg-color;
 @l7-btn-control-bg-hover-color: darken(@l7-control-bg-color, 10%);
 @l7-btn-control-bg-active-color: darken(@l7-control-bg-color, 15%);
+@l7-btn-control-shadow-color: rgba(0, 0, 0, 0.3);
 @l7-btn-control-size: 30px;
+@l7-btn-icon-size: 16px;
 @l7-btn-control-border-radius: 2px;
 @l7-btn-control-disabled-bg-color: @l7-btn-control-bg-hover-color;
 @l7-btn-control-disabled-font-color: lighten(@l7-control-font-color, 10%);

packages/component/src/index.ts

@@ -13,9 +13,9 @@ import { createL7Icon } from './utils/icon';
 // TODO: 使用 Less 或者 Sass，每个组件单独引用自身样式
 import './css/index.less';
 
+export * from './control/baseControl';
+
 export {
-  Control,
-  ButtonControl,
   Logo,
   Scale,
   Zoom,

packages/component/src/interface.ts

@@ -1,7 +1,6 @@
 import { IControlOption } from '@antv/l7-core';
 
 export type ControlEvent = 'show' | 'hide' | 'add' | 'remove' | string;
-
 export interface IButtonControlOption extends IControlOption {
   btnIcon?: HTMLElement;
   btnText?: string;