@aibee/crc-bmap 0.0.91 → 0.0.92

package/lib/bmap.esm.js

@@ -904,9 +904,11 @@ import { EventDispatcher as EventDispatcher2, Vector3 as Vector35 } from "three"
 
 // src/elements/overlay.ts
 import { Box3 as Box32, EventDispatcher, Vector3 as Vector34 } from "three";
+import { debounce } from "lodash";
 var defaultOptions2 = {
   autoUpdate: true,
-  appendToBody: false
+  appendToBody: false,
+  autoChangePlacement: false
 };
 var Overlay = class extends EventDispatcher {
   constructor(context, options = {}) {
@@ -918,8 +920,14 @@ var Overlay = class extends EventDispatcher {
     __publicField(this, "clientPos", { x: 0, y: 0 });
     __publicField(this, "visible", true);
     __publicField(this, "options");
+    __publicField(this, "placement", "top");
+    __publicField(this, "observer", null);
     __publicField(this, "onUpdate", () => {
-      this.updatePosition();
+      if (this.options.autoChangePlacement) {
+        this.usePlacement();
+      } else {
+        this.updatePosition();
+      }
     });
     this.options = __spreadValues(__spreadValues({}, defaultOptions2), options);
     this.registryEvent();
@@ -930,13 +938,175 @@ var Overlay = class extends EventDispatcher {
       this.context.container.appendChild(this.div);
     }
   }
+  initObserver() {
+    const observer = new MutationObserver(
+      debounce(() => {
+        this.usePlacement();
+      }, 100)
+    );
+    observer.observe(this.div, {
+      childList: true,
+      subtree: true,
+      attributes: true
+    });
+    this.observer = observer;
+  }
+  getPlacementPosition() {
+    const { max, min } = new Box32().setFromObject(this.element);
+    const centerX = (max.x + min.x) / 2;
+    const centerY = (max.y + min.y) / 2;
+    return {
+      left: new Vector34(min.x, centerY, max.z),
+      leftTop: new Vector34(min.x, max.y, max.z),
+      top: new Vector34(centerX, max.y, max.z),
+      rightTop: new Vector34(max.x, max.y, max.z),
+      right: new Vector34(max.x, centerY, max.z),
+      rightBottom: new Vector34(max.x, min.y, max.z),
+      bottom: new Vector34(centerX, min.y, max.z),
+      leftBottom: new Vector34(min.x, min.y, max.z),
+      center: new Vector34(centerX, centerY, max.z)
+    };
+  }
+  getPlacementScreenPosition() {
+    const { width, height } = this.context.clientSize;
+    const positions = this.getPlacementPosition();
+    return Object.keys(positions).reduce((obj, key) => {
+      const { x, y } = vector3ToDevice(
+        positions[key],
+        this.context.camera,
+        width,
+        height
+      );
+      obj[key] = { x, y };
+      return obj;
+    }, {});
+  }
+  // 检查是不是溢出了context.container
+  // @return true 表示没有溢出
+  checkOverflow(max, min) {
+    const { width, height } = this.context.clientSize;
+    return min.x > 0 && max.x < width && min.y < height && max.y > 0;
+  }
+  // 计算适用的placement
+  getPlacement() {
+    const { clientWidth, clientHeight } = this.div;
+    const positions = this.getPlacementScreenPosition();
+    const halfWidth = clientWidth / 2;
+    const halfHeight = clientHeight / 2;
+    const placements = [
+      {
+        type: "center",
+        getBox(x, y) {
+          return {
+            max: { x: halfWidth + x, y: y - clientHeight },
+            min: { x: x - halfWidth, y }
+          };
+        }
+      },
+      {
+        type: "left",
+        getBox(x, y) {
+          return {
+            max: { x, y: y - halfHeight },
+            min: { x: x - clientWidth, y: y + halfHeight }
+          };
+        }
+      },
+      {
+        type: "leftTop",
+        getBox(x, y) {
+          return {
+            max: { x, y: y - clientHeight },
+            min: { x: x - clientWidth, y }
+          };
+        }
+      },
+      {
+        type: "top",
+        getBox(x, y) {
+          return {
+            max: { x: x + halfWidth, y: y - clientHeight },
+            min: { x: x - halfWidth, y }
+          };
+        }
+      },
+      {
+        type: "rightTop",
+        getBox(x, y) {
+          return {
+            max: { x: x + clientWidth, y: y - clientHeight },
+            min: { x, y }
+          };
+        }
+      },
+      {
+        type: "right",
+        getBox(x, y) {
+          return {
+            max: { x: x + clientWidth, y: y - halfHeight },
+            min: { x, y: y + halfHeight }
+          };
+        }
+      },
+      {
+        type: "rightBottom",
+        getBox(x, y) {
+          return {
+            max: { x: x + clientWidth, y },
+            min: { x, y: y + clientHeight }
+          };
+        }
+      },
+      {
+        type: "bottom",
+        getBox(x, y) {
+          return {
+            max: { x: x + halfWidth, y },
+            min: { x: x - halfWidth, y: y + clientHeight }
+          };
+        }
+      },
+      {
+        type: "leftBottom",
+        getBox(x, y) {
+          return {
+            max: { x, y },
+            min: { x: x - clientWidth, y: y + halfHeight }
+          };
+        }
+      }
+    ];
+    for (let i = 0; i < placements.length; i++) {
+      const placement = placements[i];
+      const position = positions[placement.type];
+      const { max, min } = placement.getBox(position.x, position.y);
+      if (this.checkOverflow(max, min)) {
+        return {
+          type: placement.type,
+          position
+        };
+      }
+    }
+    return {
+      type: "center",
+      position: positions.center
+    };
+  }
   initDiv() {
     const div = document.createElement("div");
     div.style.position = "absolute";
     return div;
   }
+  usePlacement() {
+    const placement = this.getPlacement();
+    this.div.className = `overlay_${placement.type}`;
+    this._updatePosition(placement.position.x, placement.position.y);
+  }
   bindElement(element) {
     this.element = element;
+    if (this.options.autoChangePlacement) {
+      this.initObserver();
+    }
     this.onUpdate();
   }
   unBindElement() {
@@ -969,14 +1139,9 @@ var Overlay = class extends EventDispatcher {
     const { width, height } = this.context.clientSize;
     return x >= 0 && x <= width && y >= 0 && y <= height;
   }
-  updatePosition(force = false) {
-    const vector = this.getPosition();
-    const { width, height, x: clientX, y: clientY } = this.context.clientSize;
-    const { x, y } = vector3ToDevice(vector, this.context.camera, width, height);
-    if (this.clientPos.x === x && this.clientPos.y === y && !force) {
-      return;
-    }
+  _updatePosition(x, y) {
     this.clientPos = { x, y };
+    const { width, height, x: clientX, y: clientY } = this.context.clientSize;
     if (this.options.appendToBody) {
       this.div.style.left = `${clientX}px`;
       this.div.style.top = `${clientY + height}px`;
@@ -987,6 +1152,20 @@ var Overlay = class extends EventDispatcher {
       this.dispatchEvent({ type: "update-position", x, y, width, height });
     }
   }
+  updatePosition(force = false) {
+    const vector = this.getPosition();
+    const { width, height, x: clientX, y: clientY } = this.context.clientSize;
+    const { x, y } = vector3ToDevice(
+      vector,
+      this.context.camera,
+      width,
+      height
+    );
+    if (this.clientPos.x === x && this.clientPos.y === y && !force) {
+      return;
+    }
+    this._updatePosition(x, y);
+  }
   registryEvent() {
     this.context.addEventListener("update", this.onUpdate);
   }
@@ -994,10 +1173,11 @@ var Overlay = class extends EventDispatcher {
     this.context.removeEventListener("update", this.onUpdate);
   }
   dispose() {
-    var _a;
+    var _a, _b;
     this.unRegistryEvent();
     this.unBindElement();
-    (_a = this.div) == null ? void 0 : _a.remove();
+    (_a = this.observer) == null ? void 0 : _a.disconnect();
+    (_b = this.div) == null ? void 0 : _b.remove();
     this.div = null;
   }
 };
@@ -1353,7 +1533,7 @@ var GraphicLayer = class extends Layer {
 };
 
 // src/layer/poi-layer.ts
-import { debounce } from "lodash";
+import { debounce as debounce2 } from "lodash";
 var PoiLayer = class extends Layer {
   constructor(context) {
     super(context);
@@ -1366,7 +1546,7 @@ var PoiLayer = class extends Layer {
       });
     });
     this.registryEvent();
-    this.debounceCollisionDetection = debounce(this.collisionDetection, 10);
+    this.debounceCollisionDetection = debounce2(this.collisionDetection, 10);
   }
   clear(force = false) {
     this.pois.forEach((item) => {
@@ -3207,7 +3387,7 @@ function getConfig(config) {
 }
 
 // src/bmap.ts
-import { debounce as debounce2 } from "lodash";
+import { debounce as debounce3 } from "lodash";
 var MapTypePolar = /* @__PURE__ */ ((MapTypePolar2) => {
   MapTypePolar2[MapTypePolar2["D2"] = 0] = "D2";
   MapTypePolar2[MapTypePolar2["D3"] = 1.1] = "D3";
@@ -3579,7 +3759,7 @@ var BMap = class extends EventDispatcher7 {
     window.addEventListener("keydown", this.onKeydown);
     window.addEventListener("keyup", this.onKeyUp);
     if (this.config.resizeObserver) {
-      const observe = new ResizeObserver(debounce2(this.resize, 5));
+      const observe = new ResizeObserver(debounce3(this.resize, 5));
       observe.observe(this.container);
       this.observe = observe;
     }