Feat/layer popup (#1520)

* fix: 1.修复 Popup 换行和事件穿透问题

* chore: 重新触发 Github CI

Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>

dev-demos/component/popup/popup.tsx

@@ -30,15 +30,17 @@ const Demo: FunctionComponent = () => {
 
     newScene.on('loaded', () => {
       const newPopup = new Popup({
-        closeOnClick: true,
+        // closeOnClick: true,
         closeOnEsc: true,
         lngLat: {
           lng: 120.104697,
           lat: 30.260704,
         },
         anchor: 'bottom-right',
-        title: 'Popup Title',
+        // followCursor: true,
-        html: 'Popup Content',
+        title:
+          '算啦就是老地方上的分萨迪克浪费撒东方巨龙凯撒付款流水阿帆十多分数据福克斯阿道夫阿斯蒂芬',
+        html: '算啦就是老地方上的分萨迪克浪费撒东方巨龙凯撒付款流水阿帆十多分数据福克斯阿道夫阿斯蒂芬',
       });
       newScene.addPopup(newPopup);
 
@@ -199,9 +201,16 @@ const Demo: FunctionComponent = () => {
         <button
           onClick={() => {
             popup?.setOptions({
-              html: 'html',
+              html: 'html byOptions',
             });
           }}
+        >
+          htmlByOptions
+        </button>
+        <button
+          onClick={() => {
+            popup?.setHTML('html');
+          }}
         >
           html
         </button>
@@ -224,7 +233,7 @@ const Demo: FunctionComponent = () => {
             });
           }}
         >
-          title
+          toggleTitle
         </button>
         <button
           onClick={() => {

packages/component/src/css/index.css

@@ -423,6 +423,7 @@
   display: -webkit-flex;
   display: flex;
   will-change: transform;
+  pointer-events: none;
 }
 .l7-popup.l7-popup-hide {
   display: none;
@@ -439,9 +440,12 @@
   margin-bottom: 8px;
   font-weight: bold;
 }
+.l7-popup .l7-popup-content .l7-popup-close-button,
 .l7-popup .l7-popup-content .l7-popup-content__title,
 .l7-popup .l7-popup-content .l7-popup-content__panel {
-  white-space: break-spaces;
+  white-space: normal;
+  user-select: text;
+  pointer-events: initial;
 }
 .l7-popup .l7-popup-content .l7-popup-close-button {
   position: absolute;

packages/component/src/css/popup.less

@@ -8,6 +8,7 @@
   display: -webkit-flex;
   display: flex;
   will-change: transform;
+  pointer-events: none;
   &.l7-popup-hide {
     display: none;
   }
@@ -25,9 +26,12 @@
       font-weight: bold;
     }
 
+    .l7-popup-close-button,
     .l7-popup-content__title,
     .l7-popup-content__panel {
-      white-space: break-spaces;
+      white-space: normal;
+      user-select: text;
+      pointer-events: initial;
     }
 
     .l7-popup-close-button {

packages/component/src/popup/popup.ts

@@ -176,6 +176,9 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     };
     if (
       this.checkUpdateOption(option, [
+        'html',
+        'text',
+        'title',
         'closeButton',
         'closeButtonOffsets',
         'maxWidth',
@@ -215,9 +218,6 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     } else if (this.checkUpdateOption(option, ['text']) && option.text) {
       this.setText(option.text);
     }
-    if (this.checkUpdateOption(option, ['title'])) {
-      this.setTitle(option.title);
-    }
     if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
       this.setLnglat(option.lngLat);
     }
@@ -278,6 +278,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
 
   public setTitle(title?: ElementType) {
     this.show();
+    this.popupOption.title = title;
     if (title) {
       if (!this.contentTitle) {
         this.contentTitle = DOM.create('div', 'l7-popup-content__title');
@@ -461,6 +462,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     }
     this.contentTitle = undefined;
     this.content = DOM.create('div', 'l7-popup-content', this.container);
+    this.setTitle(this.popupOption.title);
 
     if (this.popupOption.closeButton) {
       const closeButton = createL7Icon('l7-icon-guanbi');
@@ -535,14 +537,18 @@ export default class Popup<O extends IPopupOption = IPopupOption>
       this.container.style.whiteSpace = 'nowrap';
     }
 
-    // 设置 Popup 的最大宽度
-    if (maxWidth && this.container.style.maxWidth !== maxWidth) {
-      this.container.style.maxWidth = maxWidth;
-    }
-
     this.updateLngLatPosition();
     DOM.setTransform(this.container, `${anchorTranslate[anchor]}`);
     applyAnchorClass(this.container, anchor, 'popup');
+
+    if (maxWidth) {
+      const { width } = this.container.getBoundingClientRect();
+      if (width > parseFloat(maxWidth)) {
+        this.container.style.width = maxWidth;
+      }
+    } else {
+      this.container.style.removeProperty('width');
+    }
   };
 
   /**