@realsee/dnalogel 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/dnalogel.es.js

@@ -36959,11 +36959,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 +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();
@@ -37159,6 +37159,514 @@ 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);
+  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) => {
@@ -37285,4 +37793,4 @@ class PanoCompassController {
     this.five.needsRender = true;
   }
 }
-export { CSS3DRenderPlugin, CameraMovementPlugin, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelRoomLabelPlugin, ModelViewPlugin, PanoCompassPlugin as PanoCompassPluginPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, TopviewFloorplanPlugin };
+export { CSS3DRenderPlugin, CameraMovementPlugin, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelRoomLabelPlugin, ModelViewPlugin, PanoCompassPlugin as PanoCompassPluginPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoRulerPlugin, TopviewFloorplanPlugin };