@aibee/crc-bmap 0.0.29 → 0.0.30

package/lib/bmap.esm.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,6 +17,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -646,10 +649,13 @@ var Overlay = class extends EventDispatcher {
     __publicField(this, "div");
     __publicField(this, "element");
     __publicField(this, "position", new Vector33());
+    __publicField(this, "clientPos", { x: 0, y: 0 });
+    __publicField(this, "visible", true);
     __publicField(this, "onUpdate", () => {
       const vector = this.getPosition();
-      const { clientWidth, clientHeight } = this.context.container;
-      const { x, y } = vector3ToDevice(vector, this.context.camera, clientWidth, clientHeight);
+      const { width, height } = this.context.clientSize;
+      const { x, y } = vector3ToDevice(vector, this.context.camera, width, height);
+      this.clientPos = { x, y };
       this.div.style.left = `${x}px`;
       this.div.style.top = `${y}px`;
     });
@@ -664,12 +670,17 @@ var Overlay = class extends EventDispatcher {
   }
   bindElement(element) {
     this.element = element;
+    this.onUpdate();
   }
   unBindElement() {
     this.element = void 0;
   }
   setVisible(visible, display = "block") {
+    if (visible === this.visible) {
+      return;
+    }
     this.div.style.display = visible ? display : "none";
+    this.visible = visible;
   }
   setOpacity(opacity) {
     this.div.style.opacity = `${opacity}`;
@@ -706,23 +717,26 @@ var defaultOptions2 = {
   level: 1,
   collision_enable: true,
   opacity: 1,
-  id: ""
+  id: "",
+  position: { x: 0, y: 0, z: 0 }
 };
 var Poi = class extends Object3D4 {
   constructor(context, options) {
+    var _a, _b, _c;
     super();
     this.context = context;
     __publicField(this, "textDiv");
     __publicField(this, "img");
     __publicField(this, "overlay");
     __publicField(this, "options");
+    __publicField(this, "size", { width: 0, height: 0 });
     __publicField(this, "_changePosition", () => {
       this.overlay.div.style.transform = `translate3d(-50%, ${this.options.icon ? "-100%" : "-50%"}, 0)`;
     });
     this.options = proxyOptions(merge2({}, defaultOptions2, options), this);
+    this.position.set(((_a = options.position) == null ? void 0 : _a.x) || 0, ((_b = options.position) == null ? void 0 : _b.y) || 0, ((_c = options.position) == null ? void 0 : _c.z) || 0);
     this.overlay = new Overlay(this.context);
     this.overlay.bindElement(this);
-    this._changePosition();
     this.registryEvent();
     this.initDiv();
     this.addEventListener("change-icon", ({ value }) => {
@@ -735,15 +749,35 @@ var Poi = class extends Object3D4 {
       } else {
         this.img && this.overlay.div.removeChild(this.img);
         this.img = void 0;
+        this.resetSize();
       }
     });
     this.addEventListener("change-text", ({ value }) => {
       this.overlay.div.removeChild(this.textDiv);
       this.overlay.div.appendChild(this.initText());
+      this.resetSize();
     });
     this.addEventListener("change-opacity", ({ value }) => {
       this.overlay.setOpacity(value);
     });
+    this.addEventListener("change-icon_size", ({ value }) => {
+      if (this.img) {
+        this.img.style.width = `${(value == null ? void 0 : value[0]) || 32}px`;
+        this.img.style.height = `${(value == null ? void 0 : value[1]) || 32}px`;
+        this.resetSize();
+      }
+    });
+  }
+  resetSize() {
+    const { width, height } = this.overlay.div.getBoundingClientRect();
+    this.size = {
+      width,
+      height
+    };
+    this._changePosition();
+  }
+  get clientPos() {
+    return this.overlay.clientPos;
   }
   initDiv() {
     const div = this.overlay.div;
@@ -758,6 +792,7 @@ var Poi = class extends Object3D4 {
     div.style.alignItems = `center`;
     div.style.pointerEvents = `none`;
     this.overlay.setOpacity(this.options.opacity);
+    this.resetSize();
     return div;
   }
   getPosition() {
@@ -788,22 +823,33 @@ var Poi = class extends Object3D4 {
     img.setAttribute("src", this.options.icon);
     img.style.width = `${((_a = this.options.icon_size) == null ? void 0 : _a[0]) || 32}px`;
     img.style.height = `${((_b = this.options.icon_size) == null ? void 0 : _b[1]) || 32}px`;
+    img.onload = () => {
+      this.resetSize();
+    };
     this.img = img;
     return img;
   }
   registryEvent() {
-    this.context.addEventListener("update", this._changePosition);
   }
   unRegistryEvent() {
-    this.context.removeEventListener("update", this._changePosition);
   }
   setVisible(visible) {
     this.overlay.setVisible(visible, "flex");
   }
   getBox() {
-    return this.overlay.div.getBoundingClientRect();
+    const { width, height } = this.size;
+    const { x, y } = this.overlay.clientPos;
+    return {
+      left: x - width / 2,
+      right: x + width / 2,
+      top: this.options.icon ? y - height : y - height / 2,
+      bottom: this.options.icon ? y : y + height / 2
+    };
   }
   isContain(x, y) {
+    if (!this.overlay.visible) {
+      return false;
+    }
     const box = this.getBox();
     return x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
   }
@@ -882,14 +928,19 @@ var GraphicLayer = class extends Layer {
 };
 
 // src/layer/poi-layer.ts
+import { debounce } from "lodash";
 var PoiLayer = class extends Layer {
   constructor(context) {
     super(context);
     __publicField(this, "pois", []);
+    __publicField(this, "debounceCollisionDetection");
     __publicField(this, "onUpdate", () => {
-      this.collisionDetection();
+      Promise.resolve().then(() => {
+        this.collisionDetection();
+      });
     });
     this.registryEvent();
+    this.debounceCollisionDetection = debounce(this.collisionDetection, 10);
   }
   clear() {
     super.clear();
@@ -902,6 +953,9 @@ var PoiLayer = class extends Layer {
     this.pushPoi(poi);
     poi.addEventListener("change-level", () => this.changePoiLevelOrCollisionEnable(poi));
     poi.addEventListener("change-collision_enable", () => this.changePoiLevelOrCollisionEnable(poi));
+    Promise.resolve().then(() => {
+      this.debounceCollisionDetection();
+    });
     return poi;
   }
   changePoiLevelOrCollisionEnable(poi) {
@@ -966,20 +1020,28 @@ var PoiLayer = class extends Layer {
    * 碰撞检测
    */
   collisionDetection() {
+    const { clientSize: { width, height } } = this.context;
     const range = [];
-    this.pois.forEach((item, index) => {
-      item.setVisible(true);
+    const pois = this.pois.filter((item) => {
+      const { x, y } = item.clientPos;
+      return !(x < 0 || x > width || y < 0 || y > height);
+    });
+    pois.forEach((item, index) => {
       const { left, right, top, bottom } = item.getBox();
       if (index === 0) {
         range.push({ left, right, top, bottom });
         return;
       }
       const valid = range.some((box) => {
-        const xIntersect = right < box.left || left > box.right;
-        const yIntersect = top > box.bottom || bottom < box.top;
-        return xIntersect || yIntersect;
+        const xIntersect = right < box.right && right > box.left || left > box.left && left < box.right || left === box.left && right === box.right;
+        if (xIntersect) {
+          const yIntersect = bottom <= box.bottom && bottom > box.top || top >= box.top && top < box.bottom;
+          return yIntersect;
+        }
+        return false;
       });
-      item.setVisible(valid);
+      item.setVisible(!valid);
+      range.push({ left, right, top, bottom });
     });
   }
   registryEvent() {
@@ -991,6 +1053,8 @@ var PoiLayer = class extends Layer {
   dispose() {
     this.pois.forEach((item) => item.dispose());
     this.pois.length = 0;
+    this.debounceCollisionDetection = () => {
+    };
     super.dispose();
     this.unRegistryEvent();
   }
@@ -1694,10 +1758,22 @@ var Selection = class extends EventDispatcher3 {
     __publicField(this, "boxSelection");
     __publicField(this, "prevPanStatus");
     __publicField(this, "prevRotateStatus");
+    __publicField(this, "downPoint", null);
     __publicField(this, "onPointerDown", (e) => {
-      const { graphics } = this.context.getGraphicsByDeviceXy(e.offsetX, e.offsetY);
+      this.downPoint = { x: e.offsetX, y: e.offsetY };
+    });
+    __publicField(this, "onPointerUp", (e) => {
+      if (!this.downPoint) {
+        return;
+      }
+      const { offsetX, offsetY } = e;
+      const { x, y } = this.downPoint;
+      if (Math.sqrt(__pow(x - offsetX, 2) + __pow(y - offsetY, 2)) > 3) {
+        return;
+      }
+      const { graphics } = this.context.getGraphicsByDeviceXy(offsetX, offsetY);
       const graphicIdSet = new Set(graphics.map((item) => item.options.id));
-      const pois = this.context.getPoisByDeviceXy(e.clientX, e.clientY);
+      const pois = this.context.getPoisByDeviceXy(offsetX, offsetY);
       pois.forEach((item) => {
         var _a;
         if (!graphicIdSet.has(item.options.id)) {
@@ -1713,6 +1789,7 @@ var Selection = class extends EventDispatcher3 {
       }
       graphics.forEach((item) => this._list.add(item));
       this.selectEnd();
+      this.downPoint = null;
     });
     __publicField(this, "onKeyDown", (e) => {
       if (e.key === "Control") {
@@ -1749,12 +1826,14 @@ var Selection = class extends EventDispatcher3 {
   }
   registryEvent() {
     this.context.container.addEventListener("pointerdown", this.onPointerDown);
+    this.context.container.addEventListener("pointerup", this.onPointerUp);
     window.addEventListener("keydown", this.onKeyDown);
     window.addEventListener("keyup", this.onKeyUp);
     this.boxSelection.addEventListener("selected", this.onBoxSelected);
   }
   unRegistryEvent() {
     this.context.container.removeEventListener("pointerdown", this.onPointerDown);
+    this.context.container.removeEventListener("pointerup", this.onPointerUp);
     window.removeEventListener("keydown", this.onKeyDown);
     window.removeEventListener("keyup", this.onKeyUp);
     this.boxSelection.removeEventListener("selected", this.onBoxSelected);
@@ -1836,7 +1915,6 @@ var HoverHelper = class extends EventDispatcher4 {
 
 // src/context.ts
 var Context = class extends EventDispatcher5 {
-  // zoom=1的时候，100M对应的像素个数
   constructor(container, config) {
     super();
     this.container = container;
@@ -1853,6 +1931,11 @@ var Context = class extends EventDispatcher5 {
     __publicField(this, "selection");
     __publicField(this, "hoverHelper");
     __publicField(this, "basicRatio");
+    // zoom=1的时候，100M对应的像素个数
+    __publicField(this, "clientSize", {
+      width: 0,
+      height: 0
+    });
     __publicField(this, "onWindowResize", () => {
       const { container, camera, renderer } = this;
       const { clientWidth: w, clientHeight: h } = container;
@@ -1862,6 +1945,7 @@ var Context = class extends EventDispatcher5 {
       camera.bottom = -h / 2;
       camera.updateProjectionMatrix();
       renderer.setSize(w, h);
+      this.resizeClientSize(w, h);
     });
     __publicField(this, "onClick", (e) => {
       const { graphics, position } = this.getGraphicsByDeviceXy(e.offsetX, e.offsetY);
@@ -1872,19 +1956,20 @@ var Context = class extends EventDispatcher5 {
           position
         });
       }
-      const pois = this.getPoisByDeviceXy(e.clientX, e.clientY);
+      console.log("onClick", e.offsetX, e.offsetY);
+      const pois = this.getPoisByDeviceXy(e.offsetX, e.offsetY);
       if (pois.length) {
         this.dispatchEvent({ type: "poi-click", pois });
       }
     });
     __publicField(this, "onPointerover", (e) => {
       const { graphics, position } = this.getGraphicsByDeviceXy(e.offsetX, e.offsetY);
-      const pois = this.getPoisByDeviceXy(e.clientX, e.clientY);
+      const pois = this.getPoisByDeviceXy(e.offsetX, e.offsetY);
       this.dispatchEvent({ type: "pointer-over", graphics, pois, position });
     });
     __publicField(this, "onPointermove", (e) => {
       const { graphics, position } = this.getGraphicsByDeviceXy(e.offsetX, e.offsetY);
-      const pois = this.getPoisByDeviceXy(e.clientX, e.clientY);
+      const pois = this.getPoisByDeviceXy(e.offsetX, e.offsetY);
       this.dispatchEvent({ type: "pointer-move", graphics, pois, position });
     });
     __publicField(this, "onPointerleave", () => {
@@ -1901,8 +1986,15 @@ var Context = class extends EventDispatcher5 {
     this.init();
     this.selection = new Selection(this);
     this.hoverHelper = new HoverHelper(this);
+    this.resizeClientSize();
     this.registryEvent();
   }
+  resizeClientSize(width, height) {
+    this.clientSize = {
+      width: width || this.container.clientWidth,
+      height: height || this.container.clientHeight
+    };
+  }
   init() {
     const { clientWidth: w, clientHeight: h } = this.container;
     this.camera = initCamera(w, h);
@@ -1916,6 +2008,7 @@ var Context = class extends EventDispatcher5 {
       const polarAngle = this.control.getPolarAngle();
       (_a = this.currentFloor) == null ? void 0 : _a.setShadowOpacity(polarAngle / this.config.control.maxPolar);
       this.dispatchEvent({ type: "change-ratio", px: (this.basicRatio || 0) * this.camera.zoom });
+      this.dispatchEvent({ type: "control-change" });
     });
   }
   /**
@@ -2359,11 +2452,10 @@ var BMap = class extends EventDispatcher6 {
       if (options.id === void 0) {
         options.id = graphic.options.id;
       }
-      const poi = this.context.currentFloor.addPoi(options);
       const position = graphic.getCenter();
-      position.z += graphic.options.height / 2;
-      poi.position.copy(position);
-      poi.position.z = poi.position.z + graphic.options.height / 2;
+      const poi = this.context.currentFloor.addPoi(__spreadProps(__spreadValues({}, options), {
+        position: __spreadProps(__spreadValues({}, position), { z: position.z + graphic.options.height / 2 })
+      }));
       return poi;
     }
     return null;