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

package/dist/dnalogel.es.js

@@ -737,7 +737,7 @@ function flush() {
       const component = dirty_components[flushidx];
       flushidx++;
       set_current_component(component);
-      update(component.$$);
+      update$1(component.$$);
     }
     set_current_component(null);
     dirty_components.length = 0;
@@ -760,7 +760,7 @@ function flush() {
   seen_callbacks.clear();
   set_current_component(saved_component);
 }
-function update($$) {
+function update$1($$) {
   if ($$.fragment !== null) {
     $$.update();
     run_all($$.before_update);
@@ -14099,7 +14099,7 @@ function WebGLAttributes(gl, capabilities) {
       attribute = attribute.data;
     return buffers.get(attribute);
   }
-  function remove(attribute) {
+  function remove2(attribute) {
     if (attribute.isInterleavedBufferAttribute)
       attribute = attribute.data;
     var data = buffers.get(attribute);
@@ -14121,7 +14121,7 @@ function WebGLAttributes(gl, capabilities) {
   }
   return {
     get,
-    remove,
+    remove: remove2,
     update: update2
   };
 }
@@ -16606,7 +16606,7 @@ function WebGLProperties() {
     }
     return map;
   }
-  function remove(object) {
+  function remove2(object) {
     properties.delete(object);
   }
   function update2(object, key, value) {
@@ -16617,7 +16617,7 @@ function WebGLProperties() {
   }
   return {
     get,
-    remove,
+    remove: remove2,
     update: update2,
     dispose
   };
@@ -25957,7 +25957,7 @@ CompressedTextureLoader.prototype = Object.assign(Object.create(Loader.prototype
     var loader = new FileLoader(this.manager);
     loader.setPath(this.path);
     loader.setResponseType("arraybuffer");
-    function loadTexture(i2) {
+    function loadTexture2(i2) {
       loader.load(url[i2], function(buffer) {
         var texDatas = scope.parse(buffer, true);
         images[i2] = {
@@ -25980,7 +25980,7 @@ CompressedTextureLoader.prototype = Object.assign(Object.create(Loader.prototype
     if (Array.isArray(url)) {
       var loaded = 0;
       for (var i = 0, il = url.length; i < il; ++i) {
-        loadTexture(i);
+        loadTexture2(i);
       }
     } else {
       loader.load(url, function(buffer) {
@@ -26119,7 +26119,7 @@ CubeTextureLoader.prototype = Object.assign(Object.create(Loader.prototype), {
     loader.setCrossOrigin(this.crossOrigin);
     loader.setPath(this.path);
     var loaded = 0;
-    function loadTexture(i2) {
+    function loadTexture2(i2) {
       loader.load(urls[i2], function(image) {
         texture.images[i2] = image;
         loaded++;
@@ -26131,7 +26131,7 @@ CubeTextureLoader.prototype = Object.assign(Object.create(Loader.prototype), {
       }, void 0, onError);
     }
     for (var i = 0; i < urls.length; ++i) {
-      loadTexture(i);
+      loadTexture2(i);
     }
     return texture;
   }
@@ -33730,12 +33730,12 @@ var FBXLoader = function() {
         }
         fbxTree = new TextParser().parse(FBXText);
       }
-      var textureLoader = new TextureLoader(this.manager).setPath(this.resourcePath || path).setCrossOrigin(this.crossOrigin);
-      return new FBXTreeParser(textureLoader, this.manager).parse(fbxTree);
+      var textureLoader2 = new TextureLoader(this.manager).setPath(this.resourcePath || path).setCrossOrigin(this.crossOrigin);
+      return new FBXTreeParser(textureLoader2, this.manager).parse(fbxTree);
     }
   });
-  function FBXTreeParser(textureLoader, manager) {
-    this.textureLoader = textureLoader;
+  function FBXTreeParser(textureLoader2, manager) {
+    this.textureLoader = textureLoader2;
     this.manager = manager;
   }
   FBXTreeParser.prototype = {
@@ -36934,19 +36934,36 @@ var Tween = function() {
   };
   return Tween2;
 }();
+var VERSION = "18.6.4";
+var nextId = Sequence.nextId;
 var TWEEN = mainGroup;
-TWEEN.getAll.bind(TWEEN);
-TWEEN.removeAll.bind(TWEEN);
-TWEEN.add.bind(TWEEN);
-TWEEN.remove.bind(TWEEN);
-TWEEN.update.bind(TWEEN);
+var getAll = TWEEN.getAll.bind(TWEEN);
+var removeAll = TWEEN.removeAll.bind(TWEEN);
+var add = TWEEN.add.bind(TWEEN);
+var remove = TWEEN.remove.bind(TWEEN);
+var update = TWEEN.update.bind(TWEEN);
+var exports = {
+  Easing: Easing$1,
+  Group,
+  Interpolation,
+  now: now$1,
+  Sequence,
+  nextId,
+  Tween,
+  VERSION,
+  getAll,
+  removeAll,
+  add,
+  remove,
+  update
+};
 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;
@@ -36970,7 +36987,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();
@@ -36995,7 +37012,7 @@ function tween(from, to2, duration, easing = Easing.Linear.None) {
   };
   return tween2;
 }
-function tweenProgress(duration, easing) {
+function tweenProgress$1(duration, easing) {
   return tween({ progress: 0 }, { progress: 1 }, duration, easing);
 }
 var Rotation = /* @__PURE__ */ ((Rotation2) => {
@@ -37118,7 +37135,7 @@ const CameraMovementPlugin = (five) => {
         resolve(false);
       };
       const animeDuration = args.rotateSpeed ? Math.ceil(Math.abs(to2.longitude - from.longitude) / args.rotateSpeed * 1e3) : duration;
-      const tween2 = tweenProgress(animeDuration, Easing$1.Linear.None).onUpdate(onUpdate).onComplete(onComplete).onDestroy(onDestroy2);
+      const tween2 = tweenProgress$1(animeDuration, Easing$1.Linear.None).onUpdate(onUpdate).onComplete(onComplete).onDestroy(onDestroy2);
       if (args.rotation === Rotation.Loop) {
         tween2.repeat(Infinity).yoyo(true);
       }
@@ -37142,4 +37159,638 @@ const CameraMovementPlugin = (five) => {
     rotate
   };
 };
-export { CSS3DRenderPlugin, CameraMovementPlugin, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelRoomLabelPlugin, ModelViewPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, TopviewFloorplanPlugin };
+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);
+  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.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 textureLoader = new THREE.TextureLoader();
+async function loadTexture(url) {
+  return new Promise((resolve, reject) => {
+    textureLoader.load(url, resolve, void 0, reject);
+  }).then((texture) => {
+    texture.encoding = THREE.sRGBEncoding;
+    return texture;
+  });
+}
+class BetterTween extends exports.Tween {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "disposeMethods", []);
+    __publicField(this, "animationFrameDisposer");
+    __publicField(this, "onDispose", (callback) => {
+      this.disposeMethods.push(callback);
+      return this;
+    });
+    __publicField(this, "play", () => {
+      this.start(0);
+      this.animationFrameDisposer = requestAnimationFrameInterval((time) => this.update(time));
+      return this;
+    });
+    __publicField(this, "dispose", () => {
+      var _a;
+      this.stop();
+      (_a = this.animationFrameDisposer) == null ? void 0 : _a.call(this);
+      this.disposeMethods.forEach((fn) => fn());
+      this.disposeMethods = [];
+      exports.remove(this);
+    });
+  }
+}
+function tweenProgress(duration, easing = exports.Easing.Linear.None) {
+  const tween2 = new BetterTween({ progress: 0 }).to({ progress: 1 });
+  if (duration !== void 0)
+    tween2.duration(duration);
+  if (easing !== void 0)
+    tween2.easing(easing);
+  return tween2;
+}
+const PanoCompassPlugin = function(five, config) {
+  return new PanoCompassController(five, config);
+};
+class PanoCompassController {
+  constructor(five, config) {
+    __publicField(this, "five");
+    __publicField(this, "data");
+    __publicField(this, "config");
+    __publicField(this, "compassMeshTween");
+    __publicField(this, "compassMesh");
+    __publicField(this, "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, "onFivePanoWillArrive", (panoIndex) => {
+      var _a, _b;
+      if (panoIndex === this.five.panoIndex)
+        return;
+      (_a = this.compassMeshTween) == null ? void 0 : _a.dispose();
+      (_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)
+        return;
+      this.fixPosition(panoIndex);
+      (_b = this.compassMeshTween) == null ? void 0 : _b.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();
+    });
+    this.five = five;
+    this.config = config;
+    five.once("panoLoaded", this.loadCompassMesh);
+    five.once("dispose", this.dispose);
+    this.five.on("panoArrived", this.onFivePanoArrived);
+    this.five.on("panoWillArrive", this.onFivePanoWillArrive);
+  }
+  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);
+    }
+  }
+  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)
+      return;
+    this.compassMesh.rotateZ(northRad - Math.PI / 2);
+    this.five.needsRender = true;
+  }
+}
+export { CSS3DRenderPlugin, CameraMovementPlugin, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelRoomLabelPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoRulerPlugin, TopviewFloorplanPlugin };