@realsee/dnalogel 2.0.0-alpha.5 → 2.0.0-alpha.6

package/dist/dnalogel.es.js

@@ -317,7 +317,7 @@ const CSS3DRenderPlugin = (five) => {
     const rotateXAngle = new Vector3$1(0, 1, 0).angleTo(new Vector3$1(0, vector12.y, vector12.z));
     const rotateYAngle = new Vector3$1(1, 0, 0).angleTo(new Vector3$1(vector01.x, 0, vector01.z));
     const rotateZAngle = vector01.angleTo(new Vector3$1(vector01.x, 0, vector01.z));
-    const rotateX = (vector12.z > 0 ? 1 : -1) * rotateXAngle;
+    const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
     const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
     const rotateZ = (vector01.x > 0 && vector01.y < 0 || vector01.x < 0 && vector01.y > 0 ? -1 : 1) * rotateZAngle;
     css3DObject.rotateOnWorldAxis(new Vector3$1(1, 0, 0), rotateX);
@@ -1476,6 +1476,12 @@ class ModelRoomLabelController {
 const ModelRoomLabelPlugin = (five) => {
   return new ModelRoomLabelController(five);
 };
+var FLOOR_PLAN_ATTACHED_TO = /* @__PURE__ */ ((FLOOR_PLAN_ATTACHED_TO2) => {
+  FLOOR_PLAN_ATTACHED_TO2[FLOOR_PLAN_ATTACHED_TO2["FLOOR"] = 1] = "FLOOR";
+  FLOOR_PLAN_ATTACHED_TO2[FLOOR_PLAN_ATTACHED_TO2["CEILING"] = 2] = "CEILING";
+  FLOOR_PLAN_ATTACHED_TO2[FLOOR_PLAN_ATTACHED_TO2["BOUNDING_CENTER"] = 3] = "BOUNDING_CENTER";
+  return FLOOR_PLAN_ATTACHED_TO2;
+})(FLOOR_PLAN_ATTACHED_TO || {});
 const pluginStyle = {
   position: "absolute",
   left: "50%",
@@ -1634,16 +1640,27 @@ function omit(object, props) {
     }
   });
 }
-function getPxmm(five, container) {
-  const boundingCenter = new THREE.Vector3(0, 0, 0);
-  five.model.bounding.getCenter(boundingCenter);
-  const { y: boundingCenterY } = boundingCenter;
-  const { longitude } = five.getCurrentState();
-  const X2 = 1 / Math.abs(Math.cos(longitude));
-  const originPosition = new THREE.Vector3(0, boundingCenterY, 0);
-  const originPositionXUnit = new THREE.Vector3(X2, boundingCenterY, 0);
-  const mouse = originPosition.project(five.camera);
-  const xUnitMouse = originPositionXUnit.project(five.camera);
+function getPxmm(five, container, floorIndex, options) {
+  const maxFloorIndex = Math.max(...five.work.observers.map((ob) => ob.floorIndex));
+  function getFloorY(floorIndex2) {
+    return floorIndex2 > maxFloorIndex ? five.model.bounding.max.y : Math.max(...five.work.observers.filter((ob) => ob.floorIndex === floorIndex2).map((ob) => ob.standingPosition.y));
+  }
+  function getY() {
+    const currentFloorY = getFloorY(floorIndex);
+    const nextFloorY = getFloorY(floorIndex + 1);
+    const attachedTo = (options == null ? void 0 : options.attachedTo) || FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER;
+    if (attachedTo === FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER)
+      return (five.model.bounding.max.y + five.model.bounding.min.y) / 2;
+    else if (attachedTo === FLOOR_PLAN_ATTACHED_TO.CEILING)
+      return nextFloorY;
+    else
+      return currentFloorY;
+  }
+  const y2 = getY();
+  const originPosition = new THREE.Vector3(0, y2, 0);
+  const originPositionXUnit = new THREE.Vector3(1, y2, 0);
+  const mouse = originPosition.clone().project(five.camera);
+  const xUnitMouse = originPositionXUnit.clone().project(five.camera);
   const pxmm = Math.abs((xUnitMouse.x - mouse.x) / 1e3) * (container.getBoundingClientRect().width / 2);
   return pxmm;
 }
@@ -1659,12 +1676,15 @@ function create_fragment$k(ctx) {
     c() {
       div1 = element("div");
       div0 = element("div");
-      attr(div0, "class", "floorplan__camera-rotate svelte-1kosz2p");
+      attr(div0, "class", "floorplan__camera-rotate svelte-e8a2kn");
       set_style(div0, "background-image", `url(${ctx[0] || CAMERA_IMAGE})`);
       set_style(div0, "width", ctx[4], false);
       set_style(div0, "height", ctx[4], false);
+      set_style(div0, "left", "-" + ctx[4], false);
+      set_style(div0, "top", "-" + ctx[4], false);
       set_style(div0, "transform", `rotate(${ctx[3]}deg)`, false);
-      attr(div1, "class", "floorplan__camera-position svelte-1kosz2p");
+      set_style(div0, "transform-origin", `${ctx[4]} ${ctx[4]}`, false);
+      attr(div1, "class", "floorplan__camera-position svelte-e8a2kn");
       set_style(div1, "left", ctx[1], false);
       set_style(div1, "top", ctx[2], false);
     },
@@ -4384,6 +4404,7 @@ class TopviewFloorplanPluginController {
       if (shownFloor === null)
         return;
       this.floorIndex = shownFloor;
+      this.updateSize();
       this.render();
     });
     __publicField(this, "handlePanoArrived", (index) => {
@@ -4435,7 +4456,8 @@ class TopviewFloorplanPluginController {
       const { min, max } = this.floorplanData.bounding;
       const width = max.x - min.x;
       const height = max.y - min.y;
-      const pxmm = getPxmm(this.five, this.wrapper);
+      const options = this.configs.attachedTo ? { attachedTo: this.configs.attachedTo } : void 0;
+      const pxmm = getPxmm(this.five, this.wrapper, this.floorIndex, options);
       const _width = Math.ceil(width * pxmm);
       const _height = Math.ceil(height * pxmm);
       this.pxmm = pxmm;
@@ -4467,8 +4489,8 @@ class TopviewFloorplanPluginController {
   }
   show() {
     this.visible = true;
-    this.updateSize();
     this.five.model.show(this.floorIndex);
+    this.updateSize();
     const renderDuration = 500;
     const modelOpacity = this.configs.modelOpacity;
     if (typeof modelOpacity === "number") {
@@ -4502,7 +4524,6 @@ class TopviewFloorplanPluginController {
       ruleLabelsEnable
     } = this.configs;
     const handleClick = preventRoomClick ? () => false : void 0;
-    console.log("\u{1F680} ~ TopviewFloorplanPluginController ~ handleClick", handleClick);
     const props = {
       five: this.five,
       pxmm: this.pxmm,
@@ -5482,7 +5503,8 @@ class ModelFloorplanPluginController {
       const { min, max } = this.floorplanData.bounding;
       const width = max.x - min.x;
       const height = max.y - min.y;
-      const pxmm = getPxmm(this.five, this.wrapper);
+      const options = this.configs.attachedTo ? { attachedTo: this.configs.attachedTo } : void 0;
+      const pxmm = getPxmm(this.five, this.wrapper, this.floorIndex, options);
       const _width = Math.ceil(width * pxmm);
       const _height = Math.ceil(height * pxmm);
       if (this.size.width === _width && this.size.height === _height)
@@ -5574,6 +5596,7 @@ class ModelFloorplanPluginController {
       if (shownFloor === null)
         return;
       this.floorIndex = shownFloor;
+      this.updateSize();
       this.render();
     });
     __publicField(this, "handleModelLoaded", () => {
@@ -37276,6 +37299,7 @@ const PanoRulerStyle = `<style type="text/css">
   padding: 0.1875rem 0.375rem;
   background: rgba(195,195,195,0.30);
   backdrop-filter: blur(0.25rem);
+  -webkit-backdrop-filter: blur(0.25rem);
   border-radius: 6.25rem;
   border: 0.0625rem solid rgba(255,255,255,0.6);
   white-space: nowrap;
@@ -37617,6 +37641,7 @@ const PanoRulerPlugin = (five, params) => {
       if (labelWidth >= distance || labelWidth / 2 >= labelOffset / 100 * distance || labelWidth / 2 >= (1 - labelOffset / 100) * distance) {
         $line.style.display = "none";
       } else {
+        $line.style.display = "block";
         $line.style.width = distance + "px";
         $line.style.left = startLeft + "px";
         $line.style.top = startTop + "px";
@@ -37667,6 +37692,51 @@ const PanoRulerPlugin = (five, params) => {
     state
   };
 };
+const roomInfoIcon = "data:image/png;base64,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";
+function getRoomInfoInstance() {
+  const infoDom = document.createElement("div");
+  const iconDom = document.createElement("i");
+  const textDom = document.createElement("span");
+  infoDom.appendChild(iconDom);
+  infoDom.appendChild(textDom);
+  infoDom.style.position = "relative";
+  infoDom.style.width = "100%";
+  infoDom.style.display = "flex";
+  infoDom.style.flexDirection = "column";
+  infoDom.style.alignItems = "center";
+  infoDom.style.marginTop = `${150 / 16}rem`;
+  infoDom.style.opacity = "0";
+  infoDom.style.transition = "opacity 1000ms linear";
+  iconDom.style.display = "block";
+  iconDom.style.width = `${134 / 16}rem`;
+  iconDom.style.height = `${22 / 16}rem`;
+  iconDom.style.backgroundSize = "100%";
+  iconDom.style.backgroundRepeat = "no-repeat";
+  iconDom.style.backgroundImage = `url(${roomInfoIcon})`;
+  textDom.style.marginTop = `${10 / 16}rem`;
+  textDom.style.fontSize = `${16 / 16}rem`;
+  textDom.style.color = "#fff";
+  textDom.style.opacity = "0.7";
+  textDom.style.textShadow = "0 2px 16px rgb(22 34 83 / 24%)";
+  textDom.style.fontWeight = "bold";
+  return {
+    appendTo(element2) {
+      element2.appendChild(infoDom);
+    },
+    dispose() {
+      infoDom.remove();
+    },
+    setRoom(room) {
+      textDom.innerHTML = room.name + " " + Math.floor(room.size / 1e6) + "\u33A1";
+    },
+    show() {
+      infoDom.style.opacity = "1";
+    },
+    hide() {
+      infoDom.style.opacity = "0";
+    }
+  };
+}
 const textureLoader = new THREE.TextureLoader();
 async function loadTexture(url) {
   return new Promise((resolve, reject) => {
@@ -37716,33 +37786,26 @@ class PanoCompassController {
     __publicField(this, "five");
     __publicField(this, "data");
     __publicField(this, "config");
+    __publicField(this, "group", new THREE.Group());
+    __publicField(this, "modelLoaded", false);
+    __publicField(this, "roomInfoInstance");
+    __publicField(this, "roomInfoWrapperInstance");
     __publicField(this, "compassMeshTween");
     __publicField(this, "compassMesh");
+    __publicField(this, "entryDoorMesh");
     __publicField(this, "dispose", () => {
+      var _a, _b, _c, _d;
+      this.five.scene.remove(this.group);
+      this.group.remove(...this.group.children);
+      (_b = (_a = this.compassMesh) == null ? void 0 : _a.material.map) == null ? void 0 : _b.dispose();
+      (_d = (_c = this.entryDoorMesh) == null ? void 0 : _c.material.map) == null ? void 0 : _d.dispose();
       this.five.off("panoArrived", this.onFivePanoArrived);
       this.five.off("panoWillArrive", this.onFivePanoWillArrive);
-      this.five.off();
     });
-    __publicField(this, "loadCompassMesh", async () => {
-      var _a;
-      const compassImageUrl = ((_a = this.config) == null ? void 0 : _a.compassImageUrl) || "//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png";
-      const texture = await loadTexture(compassImageUrl);
-      const compassGeometry = new THREE.CircleGeometry(0.7, 32);
-      const compassMaterial = new THREE.MeshBasicMaterial({
-        map: texture,
-        transparent: true,
-        opacity: 1,
-        depthTest: false
-      });
-      const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
-      compassMesh.rotateX(-Math.PI / 2);
-      compassMesh.name = "pano-compass-mesh";
-      this.compassMesh = compassMesh;
-      this.fixPosition(this.five.panoIndex || 0);
-      if (!this.data)
-        return;
-      this.fixRotation(this.data.north_rad);
-      this.five.scene.add(compassMesh);
+    __publicField(this, "onFiveFistPanoLoaded", () => {
+      this.modelLoaded = true;
+      if (this.data)
+        this.init();
     });
     __publicField(this, "onFivePanoWillArrive", (panoIndex) => {
       var _a, _b;
@@ -37752,45 +37815,109 @@ class PanoCompassController {
       (_b = this.compassMesh) == null ? void 0 : _b.material.setValues({ opacity: 0 });
     });
     __publicField(this, "onFivePanoArrived", (panoIndex) => {
-      var _a, _b;
-      if (((_a = this.compassMesh) == null ? void 0 : _a.material.opacity) !== 0)
+      var _a, _b, _c, _d;
+      if (!this.compassMesh || !this.entryDoorMesh || !this.roomInfoInstance || !this.roomInfoWrapperInstance)
+        return;
+      if (!this.data)
         return;
-      this.fixPosition(panoIndex);
-      (_b = this.compassMeshTween) == null ? void 0 : _b.dispose();
+      const standingPosition = this.five.work.observers[panoIndex].standingPosition;
+      this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+      const entryDoorPosition = new THREE.Vector3(this.data.entrance.position.x, this.data.entrance.position.y, this.data.entrance.position.z);
+      const panoToEntryDoorVector = entryDoorPosition.clone().setY(standingPosition.y).sub(standingPosition).normalize();
+      const compassEntryDoorPosition = standingPosition.clone().add(panoToEntryDoorVector.clone().multiplyScalar(0.7)).setY(standingPosition.y + 0.01);
+      this.entryDoorMesh.rotation.z = new THREE.Vector3(0, 0, -1).angleTo(panoToEntryDoorVector);
+      this.entryDoorMesh.position.copy(compassEntryDoorPosition);
+      this.roomInfoWrapperInstance.css3DObject.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+      this.roomInfoInstance.setRoom(this.data.room_observers[panoIndex].room);
+      ((_a = this.data) == null ? void 0 : _a.room_observers[panoIndex].room.type) === 1 ? (_b = this.entryDoorMesh) == null ? void 0 : _b.material.setValues({ opacity: 1 }) : (_c = this.entryDoorMesh) == null ? void 0 : _c.material.setValues({ opacity: 0 });
+      this.five.needsRender = true;
+      if (this.compassMesh.material.opacity !== 0)
+        return;
+      (_d = this.compassMeshTween) == null ? void 0 : _d.dispose();
       this.compassMeshTween = tweenProgress(1e3).onUpdate(({ progress }) => {
         var _a2;
         (_a2 = this.compassMesh) == null ? void 0 : _a2.material.setValues({ opacity: progress });
         this.five.needsRender = true;
       }).play();
     });
+    __publicField(this, "onFiveCameraDirectionUpdate", ({ longitude, latitude }) => {
+      var _a, _b;
+      if (!this.roomInfoWrapperInstance)
+        return;
+      this.roomInfoWrapperInstance.css3DObject.rotation.z = longitude;
+      latitude > 0.66 && this.five.getCurrentState().mode === "Panorama" ? (_a = this.roomInfoInstance) == null ? void 0 : _a.show() : (_b = this.roomInfoInstance) == null ? void 0 : _b.hide();
+    });
     this.five = five;
     this.config = config;
-    five.once("panoLoaded", this.loadCompassMesh);
+    this.five.scene.add(this.group);
     five.once("dispose", this.dispose);
+    five.once("modelLoaded", this.onFiveFistPanoLoaded);
     this.five.on("panoArrived", this.onFivePanoArrived);
     this.five.on("panoWillArrive", this.onFivePanoWillArrive);
+    this.five.on("cameraDirectionUpdate", this.onFiveCameraDirectionUpdate);
   }
   load(data) {
     this.data = data;
-    if (this.compassMesh && !this.five.scene.children.includes(this.compassMesh)) {
-      this.fixRotation(data.north_rad);
-      this.fixPosition(this.five.panoIndex || 0);
-      this.five.scene.add(this.compassMesh);
-    }
+    if (this.modelLoaded)
+      this.init();
   }
-  fixPosition(panoIndex) {
-    if (!this.compassMesh)
-      return;
-    const standingPosition = this.five.work.observers[panoIndex].standingPosition;
-    const compassPosition = standingPosition.clone().add(new THREE.Vector3(0, 0.01, 0));
-    this.compassMesh.position.copy(compassPosition);
-    this.five.needsRender = true;
-  }
-  fixRotation(northRad) {
-    if (!this.compassMesh)
+  async init() {
+    if (!this.data || !this.modelLoaded)
       return;
+    this.compassMesh = await this.loadCompassMesh();
+    this.entryDoorMesh = await this.loadEntryDoorMesh();
+    this.roomInfoWrapperInstance = this.loadRoomInfo();
+    this.roomInfoInstance = getRoomInfoInstance();
+    this.compassMesh.rotateX(-Math.PI / 2);
+    this.entryDoorMesh.rotateX(-Math.PI / 2);
+    const northRad = this.data.entrance.north_rad;
     this.compassMesh.rotateZ(northRad - Math.PI / 2);
+    this.onFivePanoArrived(this.five.panoIndex || 0);
+    this.group.add(this.compassMesh);
+    this.group.add(this.entryDoorMesh);
+    if (this.roomInfoWrapperInstance)
+      this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
     this.five.needsRender = true;
   }
+  async loadCompassMesh() {
+    var _a;
+    const compassImageUrl = ((_a = this.config) == null ? void 0 : _a.compassImageUrl) || "//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png";
+    const compassTexture = await loadTexture(compassImageUrl);
+    const compassGeometry = new THREE.CircleGeometry(0.7, 32);
+    const compassMaterial = new THREE.MeshBasicMaterial({
+      map: compassTexture,
+      transparent: true,
+      opacity: 0,
+      depthTest: false
+    });
+    const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
+    compassMesh.name = "pano-compass-mesh";
+    return compassMesh;
+  }
+  async loadEntryDoorMesh() {
+    var _a;
+    const entryDoorImageUrl = ((_a = this.config) == null ? void 0 : _a.entryDoorImageUrl) || "//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png";
+    const entryDoorTexture = await loadTexture(entryDoorImageUrl);
+    const entryDoorGeometry = new THREE.PlaneGeometry(0.2, 0.16);
+    const entryDoorMaterial = new THREE.MeshBasicMaterial({
+      map: entryDoorTexture,
+      transparent: true,
+      opacity: 0.8,
+      depthTest: false
+    });
+    const entryDoorMesh = new THREE.Mesh(entryDoorGeometry, entryDoorMaterial);
+    entryDoorMesh.name = "pano-compass-entry-door";
+    return entryDoorMesh;
+  }
+  loadRoomInfo() {
+    const points = [
+      new THREE.Vector3(-0.7, 0, -0.7),
+      new THREE.Vector3(0.7, 0, -0.7),
+      new THREE.Vector3(0.7, 0, 0.7),
+      new THREE.Vector3(-0.7, 0, 0.7)
+    ];
+    const roomInfo = CSS3DRenderPlugin(this.five).create3DDomContainer(points);
+    return roomInfo;
+  }
 }
-export { CSS3DRenderPlugin, CameraMovementPlugin, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelRoomLabelPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoRulerPlugin, TopviewFloorplanPlugin };
+export { CSS3DRenderPlugin, CameraMovementPlugin, FLOOR_PLAN_ATTACHED_TO, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelRoomLabelPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoRulerPlugin, TopviewFloorplanPlugin };