@realsee/dnalogel 2.0.3 → 2.0.4-dev.1

package/libs/PanoMeasurePlugin/utils/distanceDom.js

@@ -1,121 +1,62 @@
-import { Vector2, Vector3 } from 'three';
-import isNDCPointInScreen from './isNDCPointInScreen';
-function createContentDom() {
-    const contentDom = document.createElement('div');
-    contentDom.setAttribute('style', `backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);`);
-    contentDom.style.padding = '3px 6px';
-    contentDom.style.lineHeight = '1';
-    contentDom.style.textAlign = 'center';
-    contentDom.style.transform = 'translate(-50%, -50%)';
-    contentDom.style.borderRadius = '100px';
-    contentDom.style.fontSize = '14px';
-    contentDom.style.color = '#fff';
-    contentDom.style.background = 'rgba(195,195,195,0.70)';
-    contentDom.style.border = '0.5px solid rgba(255,255,255,0.6)';
-    contentDom.style.pointerEvents = 'all';
-    contentDom.style.cursor = 'pointer';
-    return contentDom;
+import { Vector3 as A, Vector2 as E } from "three";
+import m from "./isNDCPointInScreen.js";
+function M() {
+  const t = document.createElement("div");
+  return t.setAttribute("style", "backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);"), t.style.padding = "3px 6px", t.style.lineHeight = "1", t.style.textAlign = "center", t.style.transform = "translate(-50%, -50%)", t.style.borderRadius = "100px", t.style.fontSize = "14px", t.style.color = "#fff", t.style.background = "rgba(195,195,195,0.70)", t.style.border = "0.5px solid rgba(255,255,255,0.6)", t.style.pointerEvents = "all", t.style.cursor = "pointer", t;
 }
-function createContainerDom(line) {
-    const containerDom = document.createElement('div');
-    containerDom.id = 'distance_' + line.id;
-    containerDom.classList.add('five-plugin-measure__distance');
-    containerDom.style.opacity = '0';
-    containerDom.style.position = 'absolute';
-    containerDom.style.left = '0';
-    containerDom.style.top = '0';
-    containerDom.style.transform = 'translate3d(0, 0, 0)';
-    containerDom.style.transformOrigin = 'left top';
-    return containerDom;
+function z(t) {
+  const e = document.createElement("div");
+  return e.id = "distance_" + t.id, e.classList.add("five-plugin-measure__distance"), e.style.opacity = "0", e.style.position = "absolute", e.style.left = "0", e.style.top = "0", e.style.transform = "translate3d(0, 0, 0)", e.style.transformOrigin = "left top", e;
 }
-export function createDistanceItem(props) {
-    function handleClick() {
-        var _a;
-        // 线被选中时才高亮，外部手动触发高亮
-        // highlight()
-        (_a = props.clickCallback) === null || _a === void 0 ? void 0 : _a.call(props, distanceItem);
+function J(t) {
+  function e() {
+    var s;
+    (s = t.clickCallback) == null || s.call(t, g);
+  }
+  function v() {
+    if (o)
+      return o.highlight();
+    i.style.border = "0.5px solid #95AEFF", i.style.background = "linear-gradient(90deg, #95AEFF 0%, #6386FF 100%)";
+  }
+  function k() {
+    if (o)
+      return o.unHighlight();
+    i.style.border = "0.5px solid rgba(255,255,255,0.6)", i.style.background = "rgba(195,195,195,0.70)";
+  }
+  function D(s) {
+    const a = s.getElement();
+    if (!a)
+      return;
+    const d = a.clientWidth, u = a.clientHeight;
+    if (r.points.length < 2)
+      return;
+    const [h, b] = r.points, l = h.position.clone().project(s.camera), c = b.position.clone().project(s.camera), f = l.clone().lerp(c, 0.5), y = new E(l.x * d, l.y * u), p = new E(c.x * d, c.y * u);
+    if ((() => !(Math.abs(l.z) > 1 || Math.abs(c.z) > 1 || !m(l) && !m(c) || !m(f) || y.distanceTo(p) < 20))() === !1) {
+      n.style.opacity = "0", n.style.pointerEvents = "none";
+      return;
     }
-    function highlight() {
-        if (userDistanceItem)
-            return userDistanceItem.highlight();
-        contentDom.style.border = '0.5px solid #95AEFF';
-        contentDom.style.background = 'linear-gradient(90deg, #95AEFF 0%, #6386FF 100%)';
-    }
-    function unHighlight() {
-        if (userDistanceItem)
-            return userDistanceItem.unHighlight();
-        contentDom.style.border = '0.5px solid rgba(255,255,255,0.6)';
-        contentDom.style.background = 'rgba(195,195,195,0.70)';
-    }
-    function update(five) {
-        const fiveElement = five.getElement();
-        if (!fiveElement)
-            return;
-        const screenWidth = fiveElement.clientWidth;
-        const screenHeight = fiveElement.clientHeight;
-        if (line.points.length < 2)
-            return;
-        const [startPoint, endPoint] = line.points;
-        const ndcStartPosition = startPoint.position.clone().project(five.camera);
-        const ndcEndPosition = endPoint.position.clone().project(five.camera);
-        const ndcDomPosition = ndcStartPosition.clone().lerp(ndcEndPosition, 0.5);
-        const screenStartPosition = new Vector2(ndcStartPosition.x * screenWidth, ndcStartPosition.y * screenHeight);
-        const screenEndPosition = new Vector2(ndcEndPosition.x * screenWidth, ndcEndPosition.y * screenHeight);
-        const visible = (() => {
-            // 对于超过近平面和远平面的点，计算会有问题
-            if (Math.abs(ndcStartPosition.z) > 1 || Math.abs(ndcEndPosition.z) > 1)
-                return false;
-            if (!isNDCPointInScreen(ndcStartPosition) && !isNDCPointInScreen(ndcEndPosition))
-                return false;
-            if (!isNDCPointInScreen(ndcDomPosition))
-                return false;
-            if (screenStartPosition.distanceTo(screenEndPosition) < 20)
-                return false;
-            return true;
-        })();
-        if (visible === false) {
-            containerDom.style.opacity = '0';
-            containerDom.style.pointerEvents = 'none';
-            return;
-        }
-        // 更新 UI
-        const left = ((ndcDomPosition.x + 1) / 2) * screenWidth;
-        const top = (-(ndcDomPosition.y - 1) / 2) * screenHeight;
-        const rad = Math.atan((screenStartPosition.y - screenEndPosition.y) / (screenStartPosition.x - screenEndPosition.x));
-        const deg = -(rad * 180) / Math.PI;
-        containerDom.style.transform = `translate(${left}px, ${top}px) rotate(${deg}deg)`;
-        containerDom.style.opacity = '1';
-        containerDom.style.pointerEvents = 'all';
-        if (userDistanceItem) {
-            userDistanceItem.update({ line: line.toCompletelyJson(), polyline: line.getPolyline().toCompletelyJson() });
-        }
-        const distance = startPoint.position.clone().distanceTo(endPoint.position);
-        const distanceString = props.line.model.params.getDistanceText(distance);
-        contentDom.innerText !== distanceString && (contentDom.innerText = distanceString);
-    }
-    function appendTo(container) {
-        container.appendChild(containerDom);
-        containerDom.addEventListener('click', handleClick);
-    }
-    function remove() {
-        contentDom.removeEventListener('click', handleClick);
-        containerDom.remove();
-    }
-    const { line } = props;
-    const lineID = line.id;
-    const contentDom = createContentDom();
-    const containerDom = createContainerDom(line);
-    const userDistanceItem = props.userDistanceItem;
-    const ndcPosition = new Vector3(0, 0, 0);
-    const distanceItem = {
-        lineID,
-        ndcPosition,
-        update,
-        appendTo,
-        remove,
-        highlight: highlight,
-        unHighlight: unHighlight,
-    };
-    (userDistanceItem === null || userDistanceItem === void 0 ? void 0 : userDistanceItem.element) ? containerDom.appendChild(userDistanceItem.element) : containerDom.appendChild(contentDom);
-    return distanceItem;
+    const H = (f.x + 1) / 2 * d, I = -(f.y - 1) / 2 * u, S = -(Math.atan((y.y - p.y) / (y.x - p.x)) * 180) / Math.PI;
+    n.style.transform = `translate(${H}px, ${I}px) rotate(${S}deg)`, n.style.opacity = "1", n.style.pointerEvents = "all", o && o.update({ line: r.toCompletelyJson(), polyline: r.getPolyline().toCompletelyJson() });
+    const w = h.position.clone().distanceTo(b.position), x = t.line.model.params.getDistanceText(w);
+    i.innerText !== x && (i.innerText = x);
+  }
+  function P(s) {
+    s.appendChild(n), n.addEventListener("click", e);
+  }
+  function C() {
+    i.removeEventListener("click", e), n.remove();
+  }
+  const { line: r } = t, F = r.id, i = M(), n = z(r), o = t.userDistanceItem, T = new A(0, 0, 0), g = {
+    lineID: F,
+    ndcPosition: T,
+    update: D,
+    appendTo: P,
+    remove: C,
+    highlight: v,
+    unHighlight: k
+  };
+  return o != null && o.element ? n.appendChild(o.element) : n.appendChild(i), g;
 }
+export {
+  J as createDistanceItem
+};

package/libs/PanoMeasurePlugin/utils/findAssociatedLines.js

@@ -1,21 +1,13 @@
-export function findAssociatedLines(line) {
-    // 找跟这个线段相邻的线
-    const mergeNextLine = (point, nextIndex, target) => {
-        const nextLine = point.lines.find((line) => {
-            const pointIndex = line.points.findIndex(({ id }) => id === point.id);
-            if (pointIndex === nextIndex)
-                return false;
-            return true;
-        });
-        if (!nextLine)
-            return target;
-        const nextPoint = nextLine.points[nextIndex];
-        if (!nextPoint)
-            return target;
-        return mergeNextLine(nextPoint, nextIndex, target.concat(nextLine));
-    };
-    const rightLines = mergeNextLine(line.points[0], 1, []);
-    const leftLines = mergeNextLine(line.points[0], 0, []);
-    const lines = rightLines.concat(leftLines);
-    return lines;
+function l(s) {
+  const n = (o, t, i) => {
+    const e = o.lines.find((u) => u.points.findIndex(({ id: d }) => d === o.id) !== t);
+    if (!e)
+      return i;
+    const r = e.points[t];
+    return r ? n(r, t, i.concat(e)) : i;
+  }, c = n(s.points[0], 1, []), f = n(s.points[0], 0, []);
+  return c.concat(f);
 }
+export {
+  l as findAssociatedLines
+};

package/libs/PanoMeasurePlugin/utils/findClosestPoint.d.ts

@@ -7,4 +7,4 @@ import type { Five } from '@realsee/five';
 export declare function findClosestPoint(five: Five, points: Point[], tapPoint: Vector2, maxDistance?: number): {
     distance: number;
     point: Point;
-};
+} | null | undefined;

package/libs/PanoMeasurePlugin/utils/findClosestPoint.js

@@ -1,27 +1,16 @@
-import ndc2Screen from './ndc2Screen';
-import isNDCPointInScreen from './isNDCPointInScreen';
-/**
- * @param tapPoint 注意这里的坐标是相对于 FiveElement 的
- */
-// eslint-disable-next-line max-params
-export function findClosestPoint(five, points, tapPoint, maxDistance) {
-    const container = five.getElement();
-    if (!container)
-        return null;
-    if (points.length === 0)
-        return null;
-    const containerSize = { width: container.clientWidth, height: container.clientHeight };
-    const ndcPoints = points
-        .map((point) => {
-        const ndcPosition = point.position.clone().project(five.camera);
-        if (!isNDCPointInScreen(ndcPosition))
-            return { distance: Infinity, point };
-        const screenPosition = ndc2Screen(ndcPosition, containerSize);
-        const distance = screenPosition.distanceTo(tapPoint);
-        return { distance, point };
-    })
-        .sort((a, b) => a.distance - b.distance);
-    if (typeof maxDistance === 'number' && ndcPoints[0].distance > maxDistance)
-        return null;
-    return ndcPoints[0];
+import l from "./ndc2Screen.js";
+import u from "./isNDCPointInScreen.js";
+import "three";
+function p(i, o, s, r) {
+  const e = i.getElement();
+  if (!e || o.length === 0)
+    return null;
+  const d = { width: e.clientWidth, height: e.clientHeight }, c = o.map((n) => {
+    const t = n.position.clone().project(i.camera);
+    return u(t) ? { distance: l(t, d).distanceTo(s), point: n } : { distance: 1 / 0, point: n };
+  }).sort((n, t) => n.distance - t.distance);
+  return typeof r == "number" && c[0].distance > r ? null : c[0];
 }
+export {
+  p as findClosestPoint
+};

package/libs/PanoMeasurePlugin/utils/getIntersectionFromEvent.js

@@ -1,9 +1,9 @@
-import { Raycaster } from 'three';
-import { getPointFromHammerEvent } from './getPointFromHammerEvent';
-/** 通过鼠标事件或者触摸事件，获取当前点击屏幕关联的射线与模型的交点 */
-export function getIntersectionFromEvent(five, event) {
-    const mouse = getPointFromHammerEvent(event).ndcPoint;
-    const raycaster = new Raycaster();
-    raycaster.setFromCamera(mouse, five.camera);
-    return five.model.intersectRaycaster(raycaster);
+import { Raycaster as n } from "three";
+import { getPointFromHammerEvent as m } from "./getPointFromHammerEvent.js";
+function s(t, r) {
+  const o = m(r).ndcPoint, e = new n();
+  return e.setFromCamera(o, t.camera), t.model.intersectRaycaster(e);
 }
+export {
+  s as getIntersectionFromEvent
+};

package/libs/PanoMeasurePlugin/utils/getPointFromHammerEvent.js

@@ -1,14 +1,8 @@
-import { Vector2 } from 'three';
-/**
- * 从 Hammer 事件中获取操作的点在交互 DOM 中的位置
- * @ignore TODO: make a suitable name
- */
-export function getPointFromHammerEvent(event) {
-    // clientX 与 clientY 是相对 document 的，需要转换成相对于 target 的坐标
-    const { x: clientX, y: clientY } = event.center;
-    const { clientWidth, clientHeight } = event.target;
-    const clientRect = event.target.getBoundingClientRect();
-    const position = new Vector2(clientX, clientY).sub(new Vector2(clientRect.left, clientRect.top));
-    const mouse = new Vector2((position.x / clientWidth) * 2 - 1, -(position.y / clientHeight) * 2 + 1);
-    return { point: position, ndcPoint: mouse };
+import { Vector2 as e } from "three";
+function m(t) {
+  const { x: c, y: i } = t.center, { clientWidth: r, clientHeight: s } = t.target, o = t.target.getBoundingClientRect(), n = new e(c, i).sub(new e(o.left, o.top)), l = new e(n.x / r * 2 - 1, -(n.y / s) * 2 + 1);
+  return { point: n, ndcPoint: l };
 }
+export {
+  m as getPointFromHammerEvent
+};

package/libs/PanoMeasurePlugin/utils/ironbox.js

@@ -1 +1,4 @@
-export const preventDefault = (e) => e.preventDefault();
+const t = (e) => e.preventDefault();
+export {
+  t as preventDefault
+};

package/libs/PanoMeasurePlugin/utils/isNDCPointInScreen.js

@@ -1,6 +1,7 @@
-export default function isNDCPointInScreen(ndcPoint) {
-    const { x, y, z } = ndcPoint;
-    if (Math.abs(x) > 1 || Math.abs(y) > 1 || Math.abs(z) > 1)
-        return false;
-    return true;
+function r(t) {
+  const { x: a, y: e, z: n } = t;
+  return !(Math.abs(a) > 1 || Math.abs(e) > 1 || Math.abs(n) > 1);
 }
+export {
+  r as default
+};

package/libs/PanoMeasurePlugin/utils/line.js

@@ -1,33 +1,18 @@
-import { Line as FiveLine } from '@realsee/five/line';
-import { lightLineOpts, normalLineOpts } from './constants';
-import { Color } from 'three';
-export function createLine(start, end, opts) {
-    var _a, _b, _c, _d, _e;
-    const lineWidth = (_a = opts === null || opts === void 0 ? void 0 : opts.lineWidth) !== null && _a !== void 0 ? _a : 2;
-    const lineColor = (_b = opts === null || opts === void 0 ? void 0 : opts.lineColor) !== null && _b !== void 0 ? _b : new Color(0xffffff);
-    const pointSize = (_c = opts === null || opts === void 0 ? void 0 : opts.pointSize) !== null && _c !== void 0 ? _c : 5;
-    const lineRenderOrder = (_d = opts === null || opts === void 0 ? void 0 : opts.lineRenderOrder) !== null && _d !== void 0 ? _d : 10;
-    const pointsRenderOrder = (_e = opts === null || opts === void 0 ? void 0 : opts.lineRenderOrder) !== null && _e !== void 0 ? _e : 20;
-    const line = new FiveLine(start, end);
-    // set line
-    line.setMaterial({ linewidth: lineWidth, color: lineColor });
-    line.line.material.depthTest = false;
-    line.line.material.transparent = true;
-    line.line.renderOrder = lineRenderOrder;
-    // set point
-    line.points.renderOrder = pointsRenderOrder;
-    const pointMaterial = line.points.material;
-    pointMaterial.depthTest = false;
-    pointMaterial.size = pointSize;
-    (opts === null || opts === void 0 ? void 0 : opts.pointColor) && pointMaterial.color.set(opts.pointColor).convertSRGBToLinear();
-    if (opts === null || opts === void 0 ? void 0 : opts.pointTexture)
-        pointMaterial.map = opts.pointTexture;
-    return line;
+import { Line as u } from "@realsee/five/line";
+import { lightLineOpts as C, normalLineOpts as R } from "./constants.js";
+import { Color as T } from "three";
+function w(i, t, e) {
+  var d, c, m, f, h;
+  const a = (d = e == null ? void 0 : e.lineWidth) != null ? d : 2, o = (c = e == null ? void 0 : e.lineColor) != null ? c : new T(16777215), r = (m = e == null ? void 0 : e.pointSize) != null ? m : 5, L = (f = e == null ? void 0 : e.lineRenderOrder) != null ? f : 10, O = (h = e == null ? void 0 : e.lineRenderOrder) != null ? h : 20, n = new u(i, t);
+  n.setMaterial({ linewidth: a, color: o }), n.line.material.depthTest = !1, n.line.material.transparent = !0, n.line.renderOrder = L, n.points.renderOrder = O;
+  const l = n.points.material;
+  return l.depthTest = !1, l.size = r, e != null && e.pointColor && l.color.set(e.pointColor).convertSRGBToLinear(), e != null && e.pointTexture && (l.map = e.pointTexture), n;
 }
-export function createLineMesh(line, type) {
-    const [point, anotherPoint] = line.points;
-    const opts = type === 'light' ? lightLineOpts : normalLineOpts;
-    const fiveLine = createLine(point.position, anotherPoint.position, opts);
-    fiveLine.name = 'normalLine_' + line.id;
-    return fiveLine;
+function S(i, t) {
+  const [e, a] = i.points, o = t === "light" ? C : R, r = w(e.position, a.position, o);
+  return r.name = "normalLine_" + i.id, r;
 }
+export {
+  w as createLine,
+  S as createLineMesh
+};

package/libs/PanoMeasurePlugin/utils/math.js

@@ -1,44 +1,13 @@
-import { Vector2 } from 'three';
-/**
- * 获取一点对于线段上最近的一点，
- * 如果可以是过直线垂线的垂足，不行的话取线段的两端
- * @param point
- * @param linePoints
- * @return
- */
-export function closestPointOnLine(point, linePoints) {
-    const tA = point.x - linePoints[0].x;
-    const tB = point.y - linePoints[0].y;
-    const tC = linePoints[1].x - linePoints[0].x;
-    const tD = linePoints[1].y - linePoints[0].y;
-    // 设线段为 AB 线段，线段外一点为 P
-    // tDot = AP 向量与 AB 向量乘积，tLenSq 为 |AB|平方。
-    // tParam 是 AP 向量在 AB 向量投影向量 AC 与 AB 向量的比。
-    const tDot = tA * tC + tB * tD;
-    const tLenSq = tC * tC + tD * tD;
-    const tParam = tDot / tLenSq;
-    let tXx, tYy;
-    if (tParam < 0 || samePointAt(linePoints[0], linePoints[1])) {
-        tXx = linePoints[0].x;
-        tYy = linePoints[0].y;
-    }
-    else if (tParam > 1) {
-        tXx = linePoints[1].x;
-        tYy = linePoints[1].y;
-    }
-    else {
-        tXx = linePoints[0].x + tParam * tC;
-        tYy = linePoints[0].y + tParam * tD;
-    }
-    return new Vector2(tXx, tYy);
+import { Vector2 as L } from "three";
+function q(c, t) {
+  const u = c.x - t[0].x, a = c.y - t[0].y, x = t[1].x - t[0].x, y = t[1].y - t[0].y, A = u * x + a * y, D = x * x + y * y, r = A / D;
+  let f, m;
+  return r < 0 || e(t[0], t[1]) ? (f = t[0].x, m = t[0].y) : r > 1 ? (f = t[1].x, m = t[1].y) : (f = t[0].x + r * x, m = t[0].y + r * y), new L(f, m);
 }
-/**
- * 检查两个点是否位置相同
- * point: { x: number, y: number }
- * @param  point1
- * @param  point2
- * @return
- */
-export function samePointAt(point1, point2) {
-    return point1.x === point2.x && point1.y === point2.y;
+function e(c, t) {
+  return c.x === t.x && c.y === t.y;
 }
+export {
+  q as closestPointOnLine,
+  e as samePointAt
+};