@realsee/dnalogel 2.0.0-alpha.3 → 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", () => {
@@ -36959,11 +36982,11 @@ var exports = {
 };
 const _requestAnimationFrame = window.requestAnimationFrame || ((fn) => setTimeout(fn, 16));
 const _cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
-function nextFrame(fn, delay = 0) {
+function nextFrame$1(fn, delay = 0) {
   if (delay <= 0)
     _requestAnimationFrame(fn);
   else
-    _requestAnimationFrame(() => nextFrame(fn, delay - 1));
+    _requestAnimationFrame(() => nextFrame$1(fn, delay - 1));
 }
 function requestAnimationFrameInterval(callback, frame = 60) {
   let index = -1;
@@ -36987,7 +37010,7 @@ function requestAnimationFrameInterval(callback, frame = 60) {
 const Easing = Easing$1;
 function tween(from, to2, duration, easing = Easing.Linear.None) {
   const tween2 = new Tween(from).to(to2, duration).easing(easing);
-  nextFrame(() => tween2.start(0));
+  nextFrame$1(() => tween2.start(0));
   const cancelAnimationFrame2 = requestAnimationFrameInterval((time) => {
     if (tween2.update(time) === false)
       cancelAnimationFrame2();
@@ -37159,6 +37182,561 @@ const CameraMovementPlugin = (five) => {
     rotate
   };
 };
+function samePointAt(point1, point2) {
+  return point1.x === point2.x && point1.y === point2.y;
+}
+function sameK(k1, k2) {
+  if (Math.abs(k1) === Infinity && Math.abs(k2) === Infinity)
+    return true;
+  return Math.abs(k1 - k2) < 1e-3;
+}
+function getK(point1, point2) {
+  return (point2.y - point1.y) / (point2.x - point1.x);
+}
+function intersectionOfLine(linePoints1, linePoints2, needIntersectionInLine) {
+  const k1 = getK(linePoints1[1], linePoints1[0]);
+  const k2 = getK(linePoints2[1], linePoints2[0]);
+  if (isNaN(k1) || isNaN(k2))
+    return false;
+  if (sameK(k1, k2))
+    return false;
+  if (pointOnLine(linePoints1[0], linePoints2))
+    return linePoints1[0];
+  if (pointOnLine(linePoints1[1], linePoints2))
+    return linePoints1[1];
+  if (pointOnLine(linePoints2[0], linePoints1))
+    return linePoints2[0];
+  if (pointOnLine(linePoints2[1], linePoints1))
+    return linePoints2[1];
+  if (needIntersectionInLine && !isIntersect(linePoints1, linePoints2))
+    return false;
+  const p1 = linePoints1[0];
+  const p2 = linePoints2[0];
+  if (Math.abs(k1) === Infinity) {
+    return { x: p1.x, y: linePoints2[1].y - (linePoints2[1].x - p1.x) * k2 };
+  }
+  if (Math.abs(k2) === Infinity) {
+    return { x: p2.x, y: linePoints1[1].y - (linePoints1[1].x - p2.x) * k1 };
+  }
+  const x = (p2.y - p1.y + k1 * p1.x - k2 * p2.x) / (k1 - k2);
+  const y2 = k1 * x - k1 * p1.x + p1.y;
+  return { x, y: y2 };
+}
+function pointOnLine(point, linePoints) {
+  if (samePointAt(point, linePoints[0]))
+    return true;
+  if (samePointAt(point, linePoints[1]))
+    return true;
+  return (linePoints[0].x - point.x) * (point.x - linePoints[1].x) >= 0 && (linePoints[0].y - point.y) * (point.y - linePoints[1].y) >= 0 && sameK(getK(linePoints[0], point), getK(point, linePoints[1]));
+}
+function multi(p1, p2, p0) {
+  return (p1.x - p0.x) * (p2.y - p0.y) - (p2.x - p0.x) * (p1.y - p0.y);
+}
+function isIntersect(linePoints1, linePoints2) {
+  if (Math.max(linePoints1[0].x, linePoints1[1].x) >= Math.min(linePoints2[0].x, linePoints2[1].x) && Math.max(linePoints2[0].x, linePoints2[1].x) >= Math.min(linePoints1[0].x, linePoints1[1].x) && Math.max(linePoints1[0].y, linePoints1[1].y) >= Math.min(linePoints2[0].y, linePoints2[1].y) && multi(linePoints2[0], linePoints1[1], linePoints1[0]) * multi(linePoints1[1], linePoints2[1], linePoints1[0]) > 0 && multi(linePoints1[0], linePoints2[1], linePoints2[0]) * multi(linePoints2[1], linePoints1[1], linePoints2[0]) > 0)
+    return 1;
+  return 0;
+}
+function nextFrame(fn, delay = 0) {
+  if (delay <= 0)
+    requestAnimationFrame(fn);
+  else
+    requestAnimationFrame(() => nextFrame(fn, delay - 1));
+}
+const PanoRulerStyle = `<style type="text/css">
+.PanoRulerPlugin-rule-line {
+  position: absolute;
+  transform-origin: left center;
+  width: 0;
+  height: 0.0625rem;
+}
+
+.PanoRulerPlugin-rule-line::after {
+  content: '';
+  position: absolute;
+  left: -0.125rem;
+  top: -0.1rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background: #FFFFFF;
+  z-index: 1;
+  animation: viewport-rule-point 0.1s 1s;
+  animation-fill-mode: both;
+}
+
+.PanoRulerPlugin-rule-line::before {
+  content: '';
+  position: absolute;
+  right: -0.125rem;
+  top: -0.1rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background: #FFFFFF;
+  animation: viewport-rule-point 0.1s 1.5s;
+  animation-fill-mode: both;
+}
+
+.PanoRulerPlugin-rule-line em {
+  background: #fff;
+  display: block;
+  height: 100%;
+  animation: viewport-rule-line 0.5s ease 1s;
+  animation-fill-mode: both;
+  box-shadow: 0 0 0.25rem rgb(0 0 0 / 40%);
+}
+
+.PanoRulerPlugin-rule-label {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0.0625rem;
+}
+
+.PanoRulerPlugin-rule-label-name {
+  position: absolute;
+  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;
+  overflow: hidden;
+  color: #FFFFFF;
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1;
+  -webkit-animation: viewport-rule-label 0.25s ease 1s;
+  animation: viewport-rule-label 0.25s ease 1s;
+  animation-fill-mode: both;
+  box-shadow: inset 0 0 0.625rem 0 rgba(255,255,255,0.30);
+}
+
+@keyframes viewport-rule-line {
+  0% { width: 0% }
+  100% { width: 100% }
+}
+
+@keyframes viewport-rule-label {
+  0% { opacity: 0; transform: scaleX(0); }
+  100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
+}
+
+@keyframes viewport-rule-point {
+  0% { transform: scaleX(0); }
+  100% { transform: scaleX(1); }
+}
+</style>
+`;
+const getDistance = (p1, p2) => {
+  return Math.sqrt(Math.pow(p1.z - p2.z, 2) + Math.pow(p1.x - p2.x, 2));
+};
+const getRoomHeightInfo = (roomInfo, five) => {
+  const roomHeightInfo = {};
+  const raycaster = new Raycaster$1();
+  const work = five.work;
+  if (!work)
+    return roomHeightInfo;
+  const observers = roomInfo.observers;
+  work.observers.forEach((observer, index) => {
+    const { standingPosition: position } = observer;
+    const point = new Vector3$1(position.x, position.y, position.z);
+    raycaster.set(point, new Vector3$1(0, 1, 0));
+    const [intersection] = five.model.intersectRaycaster(raycaster);
+    const verticalY = intersection ? intersection.point.y : 2.7;
+    const id = observers[index];
+    if (!id)
+      return roomHeightInfo;
+    const observerRoomName = roomInfo.rooms[id].name;
+    if (roomHeightInfo[observerRoomName] === void 0) {
+      roomHeightInfo[observerRoomName] = {
+        __roof: [verticalY],
+        __floor: [point.y]
+      };
+    } else {
+      roomHeightInfo[observerRoomName].__roof.push(verticalY);
+      roomHeightInfo[observerRoomName].__floor.push(point.y);
+    }
+  });
+  for (const roomName in roomHeightInfo) {
+    const room = roomHeightInfo[roomName];
+    room.__roof.sort();
+    room.__floor.sort();
+    room.floor = room.__floor[~~(room.__floor.length / 2)];
+    room.roof = room.__roof[room.__roof.length - 1];
+  }
+  return roomHeightInfo;
+};
+const PanoRulerPlugin = (five, params) => {
+  const state = {
+    enable: false,
+    loaded: false,
+    options: params.options || {
+      distanceText: (distance) => `${distance.toFixed(1)}m`
+    }
+  };
+  const tpl = (name, distance) => {
+    const domStr = `
+      <div class="PanoRulerPlugin-rule-line">
+        <em></em>
+        <div class="PanoRulerPlugin-rule-label">
+          <div class="PanoRulerPlugin-rule-label-name">${state.options.distanceText(distance)}</div>
+        </div>
+      </div>
+    `;
+    const res = document.createElement("div");
+    res.setAttribute("class", "PanoRulerPlugin-rule");
+    res.setAttribute("data-name", name);
+    res.setAttribute("style", "display: none");
+    res.innerHTML = domStr;
+    return res;
+  };
+  const $rule = document.createElement("div");
+  $rule.setAttribute("style", `position: absolute;pointer-events: none;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;`);
+  const style = document.createElement("div");
+  style.innerHTML = PanoRulerStyle;
+  $rule.appendChild(style);
+  const __rule = {};
+  const _load = (roomInfo, roomRules) => {
+    if (state.loaded) {
+      throw new Error("\u6807\u5C3A\u88AB\u91CD\u590D\u521D\u59CB\u5316\uFF01");
+    }
+    const roomHeightInfo = getRoomHeightInfo(roomInfo, five);
+    const work = five.work;
+    if (!work)
+      return false;
+    for (const obKey in roomRules) {
+      const points = roomRules[obKey];
+      const { standingPosition: defaultPosition } = work.observers[0];
+      const roomPoints = points.map(({ x, z, observers }) => {
+        const pointRoomName = observers.length > 0 ? roomInfo.rooms[roomInfo.observers[observers[0]]].name : "";
+        const medianFloorHeight = roomHeightInfo[pointRoomName] ? roomHeightInfo[pointRoomName].floor : null;
+        let minDistance = Infinity;
+        let nearestPoint = {
+          index: 0,
+          x: defaultPosition.x,
+          y: defaultPosition.y,
+          z: defaultPosition.z
+        };
+        observers.forEach((index) => {
+          if (!work.observers[index])
+            return;
+          const { standingPosition: position } = work.observers[index];
+          const observerPoint = {
+            index,
+            x: position.x,
+            y: position.y,
+            z: position.z
+          };
+          const distance = getDistance({ x, z }, observerPoint);
+          if (medianFloorHeight) {
+            if (distance < minDistance && Math.abs(observerPoint.y - medianFloorHeight) < 0.3) {
+              minDistance = distance;
+              nearestPoint = observerPoint;
+            }
+          } else {
+            if (distance < minDistance) {
+              minDistance = distance;
+              nearestPoint = observerPoint;
+            }
+          }
+        });
+        const _origin = new Vector3$1(x, nearestPoint.y, z);
+        Object.assign(_origin, { observers });
+        const verticalY = roomHeightInfo[pointRoomName] ? roomHeightInfo[pointRoomName].roof : null;
+        const _vertical = !verticalY ? null : new Vector3$1(x, verticalY, z);
+        if (_vertical)
+          Object.assign(_vertical, { observers });
+        const origin = _origin;
+        const vertical = _vertical;
+        return { origin, vertical };
+      });
+      __rule[obKey] = {
+        origins: roomPoints.map((roomPoint) => roomPoint.origin),
+        rules: []
+      };
+      for (const { origin, vertical } of roomPoints) {
+        if (!vertical)
+          continue;
+        const $element = tpl(obKey, origin.distanceTo(vertical));
+        $rule.append($element);
+        __rule[obKey].rules.push({ vertical: true, rule: [origin, vertical], $element });
+      }
+      for (let index = 0; index < roomPoints.length; index++) {
+        let nextIndex = index + 1;
+        if (nextIndex >= roomPoints.length)
+          nextIndex = 0;
+        const { origin } = roomPoints[index];
+        const { origin: next } = roomPoints[nextIndex];
+        const $element = tpl(obKey, origin.distanceTo(next));
+        $rule.append($element);
+        __rule[obKey].rules.push({ vertical: false, rule: [origin, next], $element });
+      }
+    }
+    state.loaded = true;
+    return true;
+  };
+  const load = async (_roomInfo, _roomRules, options) => {
+    const roomInfo = _roomInfo || params.roomInfo;
+    const roomRules = _roomRules || params.roomRules;
+    if (!roomInfo || !roomRules) {
+      throw new Error("\u6807\u5C3A\u6570\u636E\u4F9D\u8D56\u4E0D\u9F50\u5168\uFF01");
+    }
+    state.options = Object.assign({}, state.options, options || {});
+    if (five.model.loaded) {
+      return _load(roomInfo, roomRules);
+    } else {
+      return await new Promise((resolve) => five.once("modelLoaded", () => resolve(_load(roomInfo, roomRules))));
+    }
+  };
+  if (params.roomInfo && params.roomRules) {
+    load(params.roomInfo, params.roomRules);
+  }
+  const getRuleScreenIntr = (startPoint, endPoint, canvasWidth, canvasHeight) => {
+    const screenLines = [
+      [
+        { x: 0, y: 0 },
+        { x: canvasWidth, y: 0 }
+      ],
+      [
+        { x: 0, y: 0 },
+        { x: 0, y: canvasHeight }
+      ],
+      [
+        { x: canvasWidth, y: 0 },
+        { x: canvasWidth, y: canvasHeight }
+      ],
+      [
+        { x: 0, y: canvasHeight },
+        { x: canvasWidth, y: canvasHeight }
+      ]
+    ];
+    const intr = [];
+    for (let i = 0; i < screenLines.length; i++) {
+      const result = intersectionOfLine([startPoint, endPoint], [screenLines[i][0], screenLines[i][1]], true);
+      if (result)
+        intr.push(result);
+    }
+    if (intr.length === 0)
+      return false;
+    else {
+      return intr;
+    }
+  };
+  const freshRule = () => {
+    var _a;
+    const element2 = (_a = five.getElement()) == null ? void 0 : _a.parentElement;
+    if (!element2)
+      return;
+    if (!state.loaded)
+      return;
+    if (Object.keys(__rule).length <= 0)
+      return;
+    const { panoIndex, camera, currentMode } = five;
+    if (panoIndex === void 0)
+      return;
+    let name;
+    for (const _name in __rule) {
+      if (_name.split(",").indexOf(panoIndex.toString()) >= 0)
+        name = _name;
+    }
+    if (!name)
+      return;
+    const cameraPosition = camera.position;
+    const cameraDirection = camera.getWorldDirection(new Vector3$1());
+    const width = element2.clientWidth;
+    const height = element2.clientHeight;
+    if (currentMode !== Five.Mode.Panorama) {
+      for (const _name in __rule) {
+        for (const { $element } of __rule[_name].rules) {
+          $element.style.display = "none";
+        }
+      }
+      return;
+    }
+    for (const _name in __rule) {
+      for (const { $element } of __rule[_name].rules) {
+        $element.style.display = _name === name ? "block" : "none";
+      }
+    }
+    const [visibleOrigin] = __rule[name].origins.slice().filter((point) => point.observers.indexOf(panoIndex) >= 0).sort((pointA, pointB) => {
+      const angleA = pointA.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+      const angleB = pointB.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+      return angleA - angleB;
+    });
+    for (const { rule, vertical, $element } of __rule[name].rules) {
+      const [start, end] = rule;
+      const $line = $element.querySelector(".PanoRulerPlugin-rule-line");
+      if (!$line)
+        return;
+      if (!visibleOrigin) {
+        $element.style.display = "none";
+        continue;
+      }
+      if (start !== visibleOrigin && end !== visibleOrigin) {
+        $element.style.display = "none";
+        continue;
+      }
+      if (start.distanceTo(end) < 0.5) {
+        $element.style.display = "none";
+        continue;
+      }
+      if (start.observers.indexOf(panoIndex) === -1 || end.observers.indexOf(panoIndex) === -1) {
+        $element.style.display = "none";
+        continue;
+      }
+      const startAngle = start.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+      if (startAngle > Math.PI / 2) {
+        $element.style.display = "none";
+        continue;
+      }
+      const endAngle = end.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+      if (endAngle > Math.PI / 2) {
+        $element.style.display = "none";
+        continue;
+      }
+      const ruleLength = start.distanceTo(end);
+      const midPoint = end.clone().sub(end.clone().sub(start).divide(new Vector3$1(2, 2, 2)));
+      const disFromCameraToMid = midPoint.distanceTo(cameraPosition);
+      if (disFromCameraToMid / ruleLength > 8) {
+        $element.style.display = "none";
+        continue;
+      }
+      const mouseStart = start.clone().project(camera);
+      const startLeft = (mouseStart.x + 1) / 2 * width;
+      const startTop = (-mouseStart.y + 1) / 2 * height;
+      const mouseEnd = end.clone().project(camera);
+      const endLeft = (mouseEnd.x + 1) / 2 * width;
+      const endTop = (-mouseEnd.y + 1) / 2 * height;
+      const distance = Math.sqrt(Math.pow(endLeft - startLeft, 2) + Math.pow(endTop - startTop, 2));
+      let visibleLength = distance;
+      let labelOffset = 50;
+      const intr = getRuleScreenIntr({ x: ~~startLeft, y: ~~startTop }, {
+        x: ~~endLeft,
+        y: ~~endTop
+      }, width, height);
+      if (intr && intr.length === 1) {
+        if (visibleOrigin === start) {
+          visibleLength = Math.sqrt(Math.pow(intr[0].x - startLeft, 2) + Math.pow(intr[0].y - startTop, 2));
+          labelOffset = visibleLength / distance * 50;
+        } else if (visibleOrigin === end) {
+          visibleLength = Math.sqrt(Math.pow(intr[0].x - endLeft, 2) + Math.pow(intr[0].y - endTop, 2));
+          labelOffset = 100 - visibleLength / distance * 50;
+        }
+      }
+      if (intr && intr.length === 2) {
+        const middlePoint = {
+          x: (intr[0].x + intr[1].x) / 2,
+          y: (intr[0].y + intr[1].y) / 2
+        };
+        const distanceFromStart = Math.sqrt(Math.pow(middlePoint.x - startLeft, 2) + Math.pow(middlePoint.y - startTop, 2));
+        labelOffset = distanceFromStart / distance * 100;
+      }
+      const rad = Math.PI / 2 - Math.atan2(endLeft - startLeft, startTop - endTop);
+      const deg = rad / Math.PI * 180;
+      const $label = $line.querySelector(".PanoRulerPlugin-rule-label");
+      const labelWidth = $label.children[0].clientWidth;
+      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";
+        $line.style.transform = `rotate(${-deg}deg)`;
+        $label.style.left = `${labelOffset}%`;
+      }
+    }
+  };
+  const nextFrameFreshRule = () => nextFrame(freshRule);
+  const throttleFreshRule = throttle(freshRule, 80);
+  const enable = () => {
+    var _a, _b;
+    if (!state.loaded)
+      return false;
+    if (state.enable)
+      return true;
+    $rule.setAttribute("class", "PanoRulerPlugin" + (state.options.className ? " " + state.options.className : ""));
+    (_b = (_a = five.getElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.append($rule);
+    freshRule();
+    five.on("panoArrived", freshRule);
+    five.on("modeChange", freshRule);
+    five.on("cameraDirectionUpdate", nextFrameFreshRule);
+    five.on("movingToPano", nextFrameFreshRule);
+    five.on("mouseWheel", throttleFreshRule);
+    five.on("pinchGesture", throttleFreshRule);
+    state.enable = true;
+    return true;
+  };
+  const disable = () => {
+    if (!state.enable)
+      return true;
+    five.off("panoArrived", freshRule);
+    five.off("modeChange", freshRule);
+    five.off("cameraDirectionUpdate", nextFrameFreshRule);
+    five.off("movingToPano", nextFrameFreshRule);
+    five.off("mouseWheel", throttleFreshRule);
+    five.off("pinchGesture", throttleFreshRule);
+    if ($rule) {
+      $rule.remove();
+    }
+    state.enable = false;
+    return true;
+  };
+  return {
+    enable,
+    disable,
+    load,
+    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) => {
@@ -37208,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;
@@ -37244,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;
+      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;
-      this.fixPosition(panoIndex);
-      (_b = this.compassMeshTween) == null ? void 0 : _b.dispose();
+      (_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 as PanoCompassPluginPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, TopviewFloorplanPlugin };
+export { CSS3DRenderPlugin, CameraMovementPlugin, FLOOR_PLAN_ATTACHED_TO, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelRoomLabelPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoRulerPlugin, TopviewFloorplanPlugin };