@realsee/dnalogel 2.21.0-dev.6 → 2.21.0-dev.8

package/libs/shared-utils/index.js

@@ -3,40 +3,41 @@ import { Rectangle as r } from "./math/Rectangle.js";
 import { isModelLike as e, isPanoramaLike as t } from "./five/mode.js";
 import { Magnifier as m } from "./three/Magnifier.js";
 import { getCoordsFromClient as i, getCoordsFromElement as n } from "./three/getCoords.js";
-import { getRaycasterFromFivePointer as p } from "./three/getRaycaster.js";
-import { getIntersectFromRelativePosition as l } from "./three/getIntersect.js";
+import { getRaycasterFromFivePointer as l } from "./three/getRaycaster.js";
+import { getIntersectFromRelativePosition as p } from "./three/getIntersect.js";
 import { PointHelper as f } from "./three/PointHelper.js";
 import { PointDomHelper as a } from "./three/PointDomHelper.js";
 import { PointSelectorHelper as s } from "./three/PointSelectorHelper.js";
-import { isNil as g, notNil as F } from "./isNil.js";
-import { uuid as P } from "./uuid.js";
-import { isAbsoluteURL as c } from "./isAbsoluteURL.js";
-import { getFrameTime as d, nextFrame as u, requestAnimationFrameInterval as v } from "./animationFrame/index.js";
-import { BetterTween as b, tweenProgress as R } from "./animationFrame/BetterTween.js";
-const O = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+import { isNil as g, notNil as u } from "./isNil.js";
+import { uuid as F } from "./uuid.js";
+import { absoluteUrl as P, isAbsoluteURL as c } from "./absoluteUrl.js";
+import { getFrameTime as d, nextFrame as b, requestAnimationFrameInterval as v } from "./animationFrame/index.js";
+import { BetterTween as R, tweenProgress as _ } from "./animationFrame/BetterTween.js";
+const U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  BetterTween: b,
+  BetterTween: R,
   Interval: o,
   Magnifier: m,
   PointDomHelper: a,
   PointHelper: f,
   PointSelectorHelper: s,
   Rectangle: r,
+  absoluteUrl: P,
   getCoordsFromClient: i,
   getCoordsFromElement: n,
   getFrameTime: d,
-  getIntersectFromRelativePosition: l,
-  getRaycasterFromFivePointer: p,
+  getIntersectFromRelativePosition: p,
+  getRaycasterFromFivePointer: l,
   isAbsoluteURL: c,
   isModelLike: e,
   isNil: g,
   isPanoramaLike: t,
-  nextFrame: u,
-  notNil: F,
+  nextFrame: b,
+  notNil: u,
   requestAnimationFrameInterval: v,
-  tweenProgress: R,
-  uuid: P
+  tweenProgress: _,
+  uuid: F
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  O as index
+  U as index
 };

package/libs/shared-utils/logger.js

@@ -1,6 +1,6 @@
 function A() {
   console.debug(
-    "%c %c@realsee/dnalogel %cv2.21.0-dev.6",
+    "%c %c@realsee/dnalogel %cv2.21.0-dev.8",
     [
       "background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAMAAACHgmeRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABLFBMVEUAAAAapPoap/oaqvkbrfkbr/gZnfwZoPsaqfnD4v/E4/8Ylv0clPm93/+/4P/B4f8Yj/683/8Wif+33P8Uhv+x2f8ShP+s1v8Pgf+n0/8Nf/+h0f8Lff8Lff8Nf/9dl/+czv8KfP8KfP+Lxf+Uyv+Xy/+Hwv+Jw/+Mxf+Oxv+RyP8aovsapfoap/oZmfwZm/wZnvsYnPsYkf4YlP0NePsDYfgYcfi43f+63v8Xiv8Xjf4EWfwCV/sWZ/qz2v+02/8Vh/8WiP8EUf8CTf4WXv2u1/+v2P8Thf8Thv8ETf8CR/8VV/+o1f+q1f8Qgv8Rg/8DSv8BRf8UVP+j0v+k0v8OgP8Pgf8DR/8DQv9Nhf+dzv+fz/+Kv/+Vyv+Xy/+azf+Oxv+Qx/+SyP////8MUhLdAAAAK3RSTlMACEWQ2bd98uQECPXxqO7c+Pb49vj2+Pb49vj23Oul8fMHA+TwerXXjEIG2P+bHgAAAAFiS0dEY1y+LaoAAAB+SURBVAjXY2BgZGJmYWVgYGBgY9fW0eVg4ORi4NbTNzDk4eXjZxAwMjYxNTO3EGQQsrSytrG1sxdmEHFwdHJ2cXUTZRBz9/D08vbxFWeQ8PMPCAwKDpFkkAoNC4+IjIqWZpCRlZOPiY2LV2BQVGJQTkhMUlEFWaOmrqGpxQAAyg0S9Dq+VPYAAAAASUVORK5CYII=')",
       "background-repeat: no-repeat",

package/libs/shared-utils/three/Magnifier.js

@@ -1,6 +1,6 @@
-var P = Object.defineProperty;
-var b = (s, t, e) => t in s ? P(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var a = (s, t, e) => (b(s, typeof t != "symbol" ? t + "" : t, e), e);
+var p = Object.defineProperty;
+var P = (s, t, e) => t in s ? p(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var a = (s, t, e) => (P(s, typeof t != "symbol" ? t + "" : t, e), e);
 import w from "hammerjs";
 import * as g from "three";
 import { Subscribe as D } from "@realsee/five";
@@ -92,7 +92,8 @@ class H {
   render() {
     if (!this.five.renderer || !this.containerDom)
       return;
-    const { scale: t, context: e, width: n, height: i } = this, h = this.renderCenter.clone().project(this.five.camera), r = this.five.renderer.getSize(new g.Vector2()), o = 1, c = n / t, u = i / t, v = o * t, y = (h.x + 1) / 2 * r.x, p = (h.y + 1) / 2 * r.y, d = this.five.getPixels(y - c / 2, p - c / 2, c, u, v), f = Math.floor(n * o), x = Math.floor(i * o);
+    this.canvas.style.visibility = "visible";
+    const { scale: t, context: e, width: n, height: i } = this, h = this.renderCenter.clone().project(this.five.camera), r = this.five.renderer.getSize(new g.Vector2()), o = 1, c = n / t, v = i / t, u = o * t, y = (h.x + 1) / 2 * r.x, b = (h.y + 1) / 2 * r.y, d = this.five.getPixels(y - c / 2, b - c / 2, c, v, u), f = Math.floor(n * o), x = Math.floor(i * o);
     C(d, f, x);
     const m = new ImageData(f, x);
     m.data.set(d), e.putImageData(m, 0, 0);
@@ -101,7 +102,7 @@ class H {
     const t = this.canvas;
     t.classList.add("five-plugin__magnifier"), t.style.position = "absolute", t.style.pointerEvents = "all", t.style.borderRadius = "50%", t.style.zIndex = "99";
     const e = 1;
-    t.setAttribute("width", (this.width * e).toString()), t.setAttribute("height", (this.height * e).toString()), t.style.border = "2px solid rgba(255,255,255,0.20)", t.style.width = this.width + "px", t.style.height = this.height + "px", t.style.top = this.config.initialPosition.top, t.style.left = this.config.initialPosition.left, t.style.transform = "translate(0,0,100px)", this.config.dragEnabled && (this.canvas.style.cursor = "pointer");
+    t.setAttribute("width", (this.width * e).toString()), t.setAttribute("height", (this.height * e).toString()), t.style.border = "2px solid rgba(255,255,255,0.20)", t.style.width = this.width + "px", t.style.height = this.height + "px", t.style.top = this.config.initialPosition.top, t.style.left = this.config.initialPosition.left, t.style.transform = "translate(0,0,100px)", t.style.visibility = "hidden", this.config.dragEnabled && (this.canvas.style.cursor = "pointer");
   }
 }
 export {

package/libs/shared-utils/three/PointSelector.d.ts

@@ -3,14 +3,18 @@ import { Subscribe } from '@realsee/five';
 import { PointSelectorHelper, type PointIntersection } from './PointSelectorHelper';
 interface Config {
     /**
-     * @description: 选点的两种模式, 'fixed' 为固定选点为屏幕中心点，拖动five画布来选点，'cursor' 为跟随鼠标移动, 'auto' 则根据设备类型自动选择
+     * @description: 选点的两种模式, 'fixed' 为固定选点为屏幕中心点，拖动five画布来更新点，'cursor' 为跟随鼠标移动来更新点, 'auto' 则根据设备类型自动选择
      * @default: 'auto'
      */
     mode: 'fixed' | 'cursor' | 'auto';
     pointSelectorHelperParams: ConstructorParameters<typeof PointSelectorHelper>[1];
 }
 interface EventMap extends SubscribeEventMap {
-    intersectionUpdate: (intersection: PointIntersection) => void;
+    /**
+     * @description: 与模型交点更新时触发，移出监听范围时为null
+     */
+    intersectionUpdate: (intersection: PointIntersection | null) => void;
+    select: (intersection: PointIntersection) => void;
 }
 /**
  * @description: 在屏幕上选点
@@ -19,14 +23,44 @@ export declare class PointSelector {
     hook: Subscribe<EventMap>;
     get position(): PointIntersection;
     private five;
+    private outOfFive;
+    private hammer?;
     private mode;
     private pointSelectorHelper;
     private enabled;
+    /** 长按屏幕的动作触发后为true，手指抬起后为false */
+    private pressDown;
     constructor(five: Five, config?: Partial<Config>);
     enable(): void;
     disable(): void;
     dispose(): void;
-    private onFivePanGesture;
+    /**
+     * @description: 主动触发一次选点
+     */
+    select: (intersection?: PointIntersection) => void;
+    /**
+     * @description: 鼠标进入five canvas时
+     */
+    private onEnter;
+    /**
+     * @description: 鼠标离开five canvas时
+     */
+    private onLeave;
+    private onTap;
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    private onPan;
+    /**
+     * @description: 长按屏幕后，更新长按点的位置
+     */
+    private onPress;
+    /**
+     * @description: 手指抬起后，重置pressDown状态
+     */
+    private onPanEnd;
+    private renderScreenCenter;
     private emitIntersectionUpdate;
 }
 export {};

package/libs/shared-utils/three/PointSelector.js

@@ -1,68 +1,116 @@
-var c = Object.defineProperty, v = Object.defineProperties;
-var P = Object.getOwnPropertyDescriptors;
-var u = Object.getOwnPropertySymbols;
-var S = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
-var n = (i, e, t) => e in i ? c(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, s = (i, e) => {
+var c = Object.defineProperty, u = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var S = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable;
+var r = (s, e, t) => e in s ? c(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, o = (s, e) => {
   for (var t in e || (e = {}))
-    S.call(e, t) && n(i, t, e[t]);
-  if (u)
-    for (var t of u(e))
-      H.call(e, t) && n(i, t, e[t]);
-  return i;
-}, m = (i, e) => v(i, P(e));
-var o = (i, e, t) => (n(i, typeof e != "symbol" ? e + "" : e, t), t);
-import { Subscribe as f } from "@realsee/five";
-import { PointSelectorHelper as b } from "./PointSelectorHelper.js";
-import { isTouchDevice as G } from "../isTouchDevice.js";
-class x {
+    S.call(e, t) && r(s, t, e[t]);
+  if (l)
+    for (var t of l(e))
+      P.call(e, t) && r(s, t, e[t]);
+  return s;
+}, m = (s, e) => u(s, v(e));
+var i = (s, e, t) => (r(s, typeof e != "symbol" ? e + "" : e, t), t);
+import { Subscribe as H } from "@realsee/five";
+import { PointSelectorHelper as w } from "./PointSelectorHelper.js";
+import { isTouchDevice as b } from "../isTouchDevice.js";
+import E from "hammerjs";
+import { getIntersectionFromEvent as d } from "../getIntersectionFromEvent.js";
+const n = () => !1;
+class I {
   constructor(e, t) {
-    o(this, "hook", new f());
-    o(this, "five");
-    o(this, "mode");
-    o(this, "pointSelectorHelper");
-    o(this, "enabled", !1);
-    o(this, "onFivePanGesture", () => {
+    i(this, "hook", new H());
+    i(this, "five");
+    i(this, "outOfFive", !1);
+    i(this, "hammer");
+    i(this, "mode");
+    i(this, "pointSelectorHelper");
+    i(this, "enabled", !1);
+    /** 长按屏幕的动作触发后为true，手指抬起后为false */
+    i(this, "pressDown", !1);
+    /**
+     * @description: 主动触发一次选点
+     */
+    i(this, "select", (e) => {
+      e && this.pointSelectorHelper.updateWithIntersect(e), this.hook.emit("select", this.position);
+    });
+    /**
+     * @description: 鼠标进入five canvas时
+     */
+    i(this, "onEnter", () => {
+      this.pointSelectorHelper.show(), this.outOfFive = !1, this.hook.emit("intersectionUpdate", this.position);
+    });
+    /**
+     * @description: 鼠标离开five canvas时
+     */
+    i(this, "onLeave", () => {
+      this.pointSelectorHelper.hide(), this.outOfFive = !0, this.hook.emit("intersectionUpdate", null);
+    });
+    i(this, "onTap", () => this.select());
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    i(this, "onPan", (e) => {
+      if (!this.pressDown)
+        return;
+      const [t] = d(this.five, e);
+      t != null && t.face && this.select(t);
+    });
+    /**
+     * @description: 长按屏幕后，更新长按点的位置
+     */
+    i(this, "onPress", (e) => {
+      const [t] = d(this.five, e);
+      t != null && t.face && (this.pressDown = !0, this.select());
+    });
+    /**
+     * @description: 手指抬起后，重置pressDown状态
+     */
+    i(this, "onPanEnd", () => {
+      this.pressDown = !1;
+    });
+    i(this, "renderScreenCenter", () => {
       this.pointSelectorHelper.updateByNdcPosition({ x: 0.5, y: 0.5 });
     });
-    o(this, "emitIntersectionUpdate", (e) => {
+    i(this, "emitIntersectionUpdate", (e) => {
       this.hook.emit("intersectionUpdate", e);
     });
-    var l, h, d;
+    var a, p;
     this.five = e;
-    const a = (l = t == null ? void 0 : t.mode) != null ? l : "auto";
-    a === "auto" ? this.mode = G ? "fixed" : "cursor" : this.mode = a;
-    const p = {
+    const h = (a = t == null ? void 0 : t.mode) != null ? a : "auto";
+    h === "auto" ? this.mode = b ? "fixed" : "cursor" : this.mode = h;
+    const f = {
       autoFixPCPosition: this.mode === "cursor",
       initialPosition: this.mode === "fixed" ? { left: "35%", top: "20%" } : void 0
     };
-    console.log(s(s({}, p), (h = t == null ? void 0 : t.pointSelectorHelperParams) == null ? void 0 : h.magnifierParams)), this.pointSelectorHelper = new b(e, m(s({}, t == null ? void 0 : t.pointSelectorHelperParams), {
-      magnifierParams: s(s({}, p), (d = t == null ? void 0 : t.pointSelectorHelperParams) == null ? void 0 : d.magnifierParams)
+    this.pointSelectorHelper = new w(e, m(o({}, t == null ? void 0 : t.pointSelectorHelperParams), {
+      magnifierParams: o(o({}, f), (p = t == null ? void 0 : t.pointSelectorHelperParams) == null ? void 0 : p.magnifierParams)
     }));
   }
   get position() {
-    return this.pointSelectorHelper.position;
+    return this.outOfFive ? null : this.pointSelectorHelper.position;
   }
   enable() {
     if (this.enabled)
       return;
     this.enabled = !0, this.pointSelectorHelper.enable();
     const e = this.five.getElement();
-    this.mode === "cursor" ? (console.log("cursor"), this.five.on("intersectionOnModelUpdate", this.pointSelectorHelper.updateWithIntersect), this.five.on("wantsMoveToPano", r), this.five.on("wantsTapGesture", r), e == null || e.addEventListener("mousemove", this.pointSelectorHelper.updateByMousePosition), e == null || e.addEventListener("mouseenter", this.pointSelectorHelper.show), e == null || e.addEventListener("mouseout", this.pointSelectorHelper.hide)) : this.mode === "fixed" && (this.five.on("panGesture", this.onFivePanGesture), this.five.on("interiaPan", this.onFivePanGesture)), this.pointSelectorHelper.hooks.on("intersectionUpdate", this.emitIntersectionUpdate);
+    if (!e)
+      throw new Error("five element not found");
+    this.hammer || (this.hammer = new E(e)), this.mode === "cursor" ? (this.five.on("intersectionOnModelUpdate", this.pointSelectorHelper.updateWithIntersect), this.five.on("wantsMoveToPano", n), this.five.on("wantsTapGesture", n), e.addEventListener("mousemove", this.pointSelectorHelper.updateByMousePosition), e.addEventListener("mouseenter", this.onEnter), e.addEventListener("mouseout", this.onLeave), this.hammer.on("tap", this.onTap), this.hammer.on("pan", this.onPan), this.hammer.on("press", this.onPress), this.hammer.on("panend", this.onPanEnd)) : this.mode === "fixed" && (this.five.on("panGesture", this.renderScreenCenter), this.five.on("interiaPan", this.renderScreenCenter), this.renderScreenCenter()), this.pointSelectorHelper.hooks.on("intersectionUpdate", this.emitIntersectionUpdate);
   }
   disable() {
     if (!this.enabled)
       return;
     this.enabled = !1, this.pointSelectorHelper.disable();
     const e = this.five.getElement();
-    this.five.off("intersectionOnModelUpdate", this.pointSelectorHelper.updateWithIntersect), this.five.off("wantsMoveToPano", r), this.five.off("wantsTapGesture", r), e == null || e.removeEventListener("mousemove", this.pointSelectorHelper.updateByMousePosition), e == null || e.removeEventListener("mouseenter", this.pointSelectorHelper.show), e == null || e.removeEventListener("mouseout", this.pointSelectorHelper.hide), this.five.off("panGesture", this.onFivePanGesture), this.five.off("interiaPan", this.onFivePanGesture), this.pointSelectorHelper.hooks.off("intersectionUpdate", this.emitIntersectionUpdate);
+    this.five.off("intersectionOnModelUpdate", this.pointSelectorHelper.updateWithIntersect), this.five.off("wantsMoveToPano", n), this.five.off("wantsTapGesture", n), e == null || e.removeEventListener("mousemove", this.pointSelectorHelper.updateByMousePosition), e == null || e.removeEventListener("mouseenter", this.onEnter), e == null || e.removeEventListener("mouseout", this.onLeave), this.hammer.off("tap", this.onTap), this.hammer.off("pan", this.onPan), this.hammer.off("press", this.onPress), this.hammer.off("panend", this.onPanEnd), this.five.off("panGesture", this.renderScreenCenter), this.five.off("interiaPan", this.renderScreenCenter), this.pointSelectorHelper.hooks.off("intersectionUpdate", this.emitIntersectionUpdate);
   }
   dispose() {
     this.disable(), this.pointSelectorHelper.dispose();
   }
 }
-function r() {
-  return !1;
-}
 export {
-  x as PointSelector
+  I as PointSelector
 };

package/libs/shared-utils/three/PointSelectorHelper.js

@@ -1,12 +1,12 @@
-var f = Object.defineProperty, u = Object.defineProperties;
+var m = Object.defineProperty, u = Object.defineProperties;
 var g = Object.getOwnPropertyDescriptors;
-var m = Object.getOwnPropertySymbols;
+var f = Object.getOwnPropertySymbols;
 var b = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
-var l = (t, i, e) => i in t ? f(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e, h = (t, i) => {
+var l = (t, i, e) => i in t ? m(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e, h = (t, i) => {
   for (var e in i || (i = {}))
     b.call(i, e) && l(t, e, i[e]);
-  if (m)
-    for (var e of m(i))
+  if (f)
+    for (var e of f(i))
       v.call(i, e) && l(t, e, i[e]);
   return t;
 }, c = (t, i) => u(t, g(i));
@@ -28,10 +28,10 @@ class E {
     r(this, "state", { enabled: !1 });
     r(this, "group", new s.Group());
     r(this, "show", () => {
-      this.pointHelper.visible = !0, this.pointDomHelper.enable(), this.magnifier.canvas && (this.magnifier.canvas.style.visibility = "visible");
+      this.pointHelper.visible = !0, this.pointDomHelper.enable(), this.magnifier.canvas && (this.magnifier.canvas.style.visibility = "visible"), this.five.needsRender = !0;
     });
     r(this, "hide", () => {
-      this.pointHelper.visible = !1, this.pointDomHelper.disable(), this.magnifier.canvas && (this.magnifier.canvas.style.visibility = "hidden");
+      this.pointHelper.visible = !1, this.pointDomHelper.disable(), this.magnifier.canvas && (this.magnifier.canvas.style.visibility = "hidden"), this.five.needsRender = !0;
     });
     r(this, "updateWithIntersect", (i) => {
       var n;