@aibee/crc-bmap 0.0.91 → 0.0.93

package/lib/bmap.esm.js

@@ -44,7 +44,7 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // src/bmap.ts
-import { EventDispatcher as EventDispatcher7 } from "three";
+import { EventDispatcher as EventDispatcher7, Vector3 as Vector314 } from "three";
 
 // src/utils/timer.ts
 var Timer = class {
@@ -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,177 @@ var Overlay = class extends EventDispatcher {
       this.context.container.appendChild(this.div);
     }
   }
+  initObserver() {
+    const observer = new MutationObserver(
+      debounce(() => {
+        if (this.div) {
+          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 +1141,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 +1154,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 +1175,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 +1535,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 +1548,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) => {
@@ -3036,10 +3218,10 @@ var Context = class extends EventDispatcher6 {
     const boundingBox = new Box38().setFromObject(object);
     this.setPolarAngle(polar, 0);
     const { max, min } = boundingBox;
-    const leftTop = new Vector313(min.x, max.y, min.z);
-    const rightTop = new Vector313(max.x, max.y, min.z);
-    const rightBottom = new Vector313(max.x, min.y, max.z);
-    const leftBottom = new Vector313(min.x, min.y, max.z);
+    const leftTop = new Vector313(min.x, max.y, max.z);
+    const rightTop = new Vector313(max.x, max.y, max.z);
+    const rightBottom = new Vector313(max.x, min.y, min.z);
+    const leftBottom = new Vector313(min.x, min.y, min.z);
     const leftTop2d = vector3ToDevice(leftTop, this.camera, width, height);
     const rightTop2d = vector3ToDevice(rightTop, this.camera, width, height);
     const leftBottom2d = vector3ToDevice(leftBottom, this.camera, width, height);
@@ -3054,7 +3236,7 @@ var Context = class extends EventDispatcher6 {
     const xScale = (width - right - left) / size.x;
     const yScale = (height - top - bottom) / size.y;
     const scale = Math.min(xScale, yScale);
-    const center2 = new Vector313((max.x + min.x) / 2, (max.y + min.y) / 2, 0);
+    const center2 = new Vector313((max.x + min.x) / 2, (max.y + min.y) / 2, (max.z + min.z) / 2);
     return { zoom: scale * this.camera.zoom, center: center2 };
   }
   /**
@@ -3207,7 +3389,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";
@@ -3230,8 +3412,11 @@ var BMap = class extends EventDispatcher7 {
     __publicField(this, "buildingGroundMap", /* @__PURE__ */ new Map());
     __publicField(this, "currentBuildGround", null);
     __publicField(this, "observe", null);
+    __publicField(this, "timer", new Timer());
     __publicField(this, "onControlChange", () => {
-      const { camera: { zoom } } = this.context;
+      const {
+        camera: { zoom }
+      } = this.context;
       if (zoom !== this.prevCameraZoom) {
         this.dispatchEvent({
           type: "zoom-change",
@@ -3287,8 +3472,20 @@ var BMap = class extends EventDispatcher7 {
     this.context.render();
   }
   loadGraphics(_0) {
-    return __async(this, arguments, function* ({ brand, project, phase, building, floor, ts, resource_type_list }) {
-      const { apiDomain, apiPath: { floorGraphic }, apiInfo } = this.config;
+    return __async(this, arguments, function* ({
+      brand,
+      project,
+      phase,
+      building,
+      floor,
+      ts,
+      resource_type_list
+    }) {
+      const {
+        apiDomain,
+        apiPath: { floorGraphic },
+        apiInfo
+      } = this.config;
       const url = `${apiDomain}${floorGraphic}?brand=${brand}&project=${project}&phase=${phase}&building=${building}&floor=${floor}&ts=${ts}&resource_type_list=${resource_type_list}`;
       const data = yield fetch(url, apiInfo).then((res) => res.json()).then((res) => res.data).then((res) => {
         (res || []).map((item) => item.info = JSON.parse(item.info));
@@ -3297,17 +3494,31 @@ var BMap = class extends EventDispatcher7 {
       return data;
     });
   }
-  getBuildingKey({ brand, project, phase, building }) {
+  getBuildingKey({
+    brand,
+    project,
+    phase,
+    building
+  }) {
     const key = `${brand}-${project}-${phase}-${building}`;
     return key;
   }
   loadBuildingGround(_0) {
-    return __async(this, arguments, function* ({ brand, project, phase, building }) {
+    return __async(this, arguments, function* ({
+      brand,
+      project,
+      phase,
+      building
+    }) {
       const key = this.getBuildingKey({ brand, project, phase, building });
       if (this.buildingGroundMap.get(key)) {
         return this.buildingGroundMap.get(key) || null;
       }
-      const { apiDomain, apiPath: { floorRange }, apiInfo } = this.config;
+      const {
+        apiDomain,
+        apiPath: { floorRange },
+        apiInfo
+      } = this.config;
       const url = `${apiDomain}${floorRange}?brand=${brand}&project=${project}&phase=${phase}&building=${building}`;
       const data = yield fetch(url, apiInfo).then((res) => res.json()).then((res) => res.data).then((res) => {
         const data2 = (res || [])[0];
@@ -3320,24 +3531,60 @@ var BMap = class extends EventDispatcher7 {
       return data;
     });
   }
-  getFloorKey({ brand, project, phase, building, floor, ts, resource_type_list }) {
+  getFloorKey({
+    brand,
+    project,
+    phase,
+    building,
+    floor,
+    ts,
+    resource_type_list
+  }) {
     const floorKey = `${brand}-${project}-${phase}-${building}-${floor}-${ts}-${resource_type_list}`;
     return floorKey;
   }
   load(_0) {
-    return __async(this, arguments, function* ({ brand, project, phase, building, floor, ts, resource_type_list }) {
-      const floorKey = this.getFloorKey({ brand, project, phase, building, floor, ts, resource_type_list });
+    return __async(this, arguments, function* ({
+      brand,
+      project,
+      phase,
+      building,
+      floor,
+      ts,
+      resource_type_list
+    }) {
+      const floorKey = this.getFloorKey({
+        brand,
+        project,
+        phase,
+        building,
+        floor,
+        ts,
+        resource_type_list
+      });
       if (this.floorDataMap.get(floorKey)) {
         return;
       }
       const [data, buildGround] = yield Promise.all([
-        this.loadGraphics({ brand, project, phase, building, floor, ts, resource_type_list }),
+        this.loadGraphics({
+          brand,
+          project,
+          phase,
+          building,
+          floor,
+          ts,
+          resource_type_list
+        }),
         this.loadBuildingGround({ brand, project, phase, building })
       ]);
       if (buildGround) {
-        const center2 = getCenter(buildGround.info.geometry.cds[0]);
+        const center2 = getCenter(
+          buildGround.info.geometry.cds[0]
+        );
         data.forEach((item) => {
-          item.info.geometry.coords = JSON.parse(JSON.stringify(item.info.geometry.cds));
+          item.info.geometry.coords = JSON.parse(
+            JSON.stringify(item.info.geometry.cds)
+          );
           if (item.info.geometry.type === "polygon") {
             item.info.geometry.coords.map((cds) => {
               if (Array.isArray(cds)) {
@@ -3410,12 +3657,33 @@ var BMap = class extends EventDispatcher7 {
     curFloor.userData.legacyToGraphicMap = legacyToGraphicMap;
     return { curFloor, graphics };
   }
-  switchFloor({ brand, project, phase, building, floor, ts, resource_type_list }) {
-    const floorKey = this.getFloorKey({ brand, project, phase, building, floor, ts, resource_type_list });
+  switchFloor({
+    brand,
+    project,
+    phase,
+    building,
+    floor,
+    ts,
+    resource_type_list
+  }) {
+    const floorKey = this.getFloorKey({
+      brand,
+      project,
+      phase,
+      building,
+      floor,
+      ts,
+      resource_type_list
+    });
     const curFloorData = this.floorDataMap.get(floorKey);
     this.context.control.removeEventListener("change", this.onControlChange);
     if (curFloorData) {
-      const buildingKey = this.getBuildingKey({ brand, project, phase, building });
+      const buildingKey = this.getBuildingKey({
+        brand,
+        project,
+        phase,
+        building
+      });
       this.currentBuildGround = this.buildingGroundMap.get(buildingKey) || null;
       const createdFloor = this.createFloor(curFloorData);
       if (createdFloor) {
@@ -3439,7 +3707,9 @@ var BMap = class extends EventDispatcher7 {
         console.warn("[switchFloor error] [" + floor + "] \u697C\u5C42\u6CA1\u6709\u6570\u636E");
       }
     } else {
-      console.warn("[switchFloor error] \u6CA1\u6709\u8FD9\u4E2A\u697C\u5C42\uFF0C\u8BF7\u5148\u8C03\u7528load\u65B9\u6CD5\u52A0\u8F7D\u697C\u5C42");
+      console.warn(
+        "[switchFloor error] \u6CA1\u6709\u8FD9\u4E2A\u697C\u5C42\uFF0C\u8BF7\u5148\u8C03\u7528load\u65B9\u6CD5\u52A0\u8F7D\u697C\u5C42"
+      );
     }
   }
   // 扶梯
@@ -3451,7 +3721,11 @@ var BMap = class extends EventDispatcher7 {
         id: graphic.options.id
       }));
       if (model) {
-        const { facilityAngle = 0, facilityXScale = 1, facilityYScale = 1 } = graphic.options.userData;
+        const {
+          facilityAngle = 0,
+          facilityXScale = 1,
+          facilityYScale = 1
+        } = graphic.options.userData;
         model.rotateZ((180 - facilityAngle) / 180 * Math.PI);
         model.scale.set(facilityXScale, facilityYScale, 1);
       }
@@ -3467,11 +3741,13 @@ var BMap = class extends EventDispatcher7 {
   }
   /**
    * 获取当前楼层全部的graphic
-   * @returns 
+   * @returns
    */
   getFloorAllGraphics() {
     var _a;
-    return ((_a = this.context.currentFloor) == null ? void 0 : _a.graphicLayer.children.filter((item) => item instanceof Graphic)) || [];
+    return ((_a = this.context.currentFloor) == null ? void 0 : _a.graphicLayer.children.filter(
+      (item) => item instanceof Graphic
+    )) || [];
   }
   createGraphicPoi(graphic, options) {
     if (this.context.currentFloor) {
@@ -3506,11 +3782,25 @@ var BMap = class extends EventDispatcher7 {
    */
   translateElementToCenterX(ele, duration = 500) {
     return __async(this, null, function* () {
-      const { y, z } = this.context.control.target;
-      const position = ele.getPosition();
-      position.setY(y);
-      position.setZ(z);
-      yield this.context.setCameraPosition(position, duration);
+      return timeoutPromise(new Promise((resolve) => {
+        const target = this.context.control.target.clone();
+        const position = ele.getPosition();
+        this.timer.requestAnimationFrame(() => {
+          const {
+            clientSize: { width, height },
+            camera
+          } = this.context;
+          console.log("width", width, height);
+          const device = vector3ToDevice(position, camera, width, height);
+          const offsetX = device.x - width / 2;
+          const v3 = new Vector314();
+          v3.setFromMatrixColumn(this.context.camera.matrix, 0);
+          v3.normalize();
+          v3.multiplyScalar(offsetX / this.context.camera.zoom);
+          target.add(v3);
+          this.context.setCameraPosition(target, duration).then(resolve);
+        });
+      }), duration + 500);
     });
   }
   /**
@@ -3542,9 +3832,16 @@ var BMap = class extends EventDispatcher7 {
   resetView(duration = 300) {
     return __async(this, null, function* () {
       const time = duration / 3;
-      yield this.context.setAzimuthalAngle(this.config.control.defaultAzimuthal, time);
+      yield this.context.setAzimuthalAngle(
+        this.config.control.defaultAzimuthal,
+        time
+      );
       yield this.changeMapType(this.type, time);
-      yield this.context.fitCameraToGround(this.config.defaultPadding, time, false);
+      yield this.context.fitCameraToGround(
+        this.config.defaultPadding,
+        time,
+        false
+      );
     });
   }
   /**
@@ -3579,7 +3876,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;
     }
@@ -3609,7 +3906,7 @@ var BMap = class extends EventDispatcher7 {
   }
   /**
    * 测量距离
-   * @returns 
+   * @returns
    */
   measureDistance() {
     return __async(this, null, function* () {
@@ -3683,9 +3980,13 @@ var BMap = class extends EventDispatcher7 {
     var _a;
     if (!options.transformToBuildingGround) {
       if (this.currentBuildGround) {
-        const center2 = getCenter(this.currentBuildGround.info.geometry.cds[0]);
+        const center2 = getCenter(
+          this.currentBuildGround.info.geometry.cds[0]
+        );
         if (options.geometry.type === "polygon") {
-          options.geometry.coords = JSON.parse(JSON.stringify(options.geometry.cds));
+          options.geometry.coords = JSON.parse(
+            JSON.stringify(options.geometry.cds)
+          );
           options.geometry.coords.map((cds) => {
             if (Array.isArray(cds)) {
               cds.forEach((coord) => {
@@ -3712,7 +4013,9 @@ var BMap = class extends EventDispatcher7 {
   }
   getPois() {
     var _a;
-    return (((_a = this.context.currentFloor) == null ? void 0 : _a.poiLayer.pois) || []).filter((item) => !item.options.built_in);
+    return (((_a = this.context.currentFloor) == null ? void 0 : _a.poiLayer.pois) || []).filter(
+      (item) => !item.options.built_in
+    );
   }
   clearPoi() {
     if (this.context.currentFloor) {
@@ -3723,6 +4026,7 @@ var BMap = class extends EventDispatcher7 {
     this.context.selection.remove(graphic);
   }
   dispose() {
+    this.timer.dispose();
     this.context.dispose();
     this.floorDataMap.clear();
     this.buildingGroundMap.clear();