@realsee/dnalogel 2.21.0-dev.10 → 2.21.0-dev.11

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

@@ -1,25 +1,27 @@
-var c = Object.defineProperty, u = Object.defineProperties;
-var v = Object.getOwnPropertyDescriptors;
-var d = Object.getOwnPropertySymbols;
-var P = Object.prototype.hasOwnProperty, S = 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) => {
+var u = Object.defineProperty, v = Object.defineProperties;
+var P = Object.getOwnPropertyDescriptors;
+var m = Object.getOwnPropertySymbols;
+var S = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var d = (s, e, t) => e in s ? u(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, a = (s, e) => {
   for (var t in e || (e = {}))
-    P.call(e, t) && r(s, t, e[t]);
-  if (d)
-    for (var t of d(e))
-      S.call(e, t) && r(s, t, e[t]);
+    S.call(e, t) && d(s, t, e[t]);
+  if (m)
+    for (var t of m(e))
+      w.call(e, t) && d(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 U } from "../isTouchDevice.js";
-import b from "hammerjs";
-import { getIntersectionFromEvent as h } from "../getIntersectionFromEvent.js";
-const n = () => !1;
-class k {
+}, c = (s, e) => v(s, P(e));
+var i = (s, e, t) => (d(s, typeof e != "symbol" ? e + "" : e, t), t);
+import { Subscribe as y } from "@realsee/five";
+import { PointSelectorHelper as H } from "./PointSelectorHelper.js";
+import { isTouchDevice as b } from "../isTouchDevice.js";
+import U from "hammerjs";
+import { getIntersectionFromEvent as p } from "../getIntersectionFromEvent.js";
+import { Vector3 as E, Object3D as F, Face3 as I, Vector2 as M, Raycaster as O } from "three";
+import { getIntersectFromRelativePosition as k } from "./getIntersect.js";
+const l = () => !1;
+class W {
   constructor(e, t) {
-    i(this, "hook", new H());
+    i(this, "hook", new y());
     /**
      * @description: 不在 five canvas 上时为 true
      */
@@ -31,12 +33,16 @@ class k {
     i(this, "enabled", !1);
     /** 长按屏幕的动作触发后为true，手指抬起后为false */
     i(this, "pressDown", !1);
+    /** 一组吸附的点，光标靠近这些点时，会将helper以及放大镜的位置设置为这些点 */
+    i(this, "adherePoints", null);
+    /** 吸附点的半径 */
+    i(this, "adherePointsRadius", 0.1);
     /**
      * @description: 主动触发一次选点
      * @return: select 是否成功
      */
     i(this, "select", (e) => {
-      e && this.pointSelectorHelper.updateWithIntersect(e);
+      e && this.updatePointSelectorHelperIntersect(e);
       const t = this.hook.emit("wantsSelect", this.position);
       return t || (this.pointSelectorHelper.hide(), this.hook.emit("select", this.position)), !t;
     });
@@ -53,8 +59,8 @@ class k {
       this.pointSelectorHelper.hide(), this.outOfFive = !0, this.hook.emit("intersectionUpdate", null);
     });
     i(this, "onTap", (e) => {
-      const [t] = h(this.five, e);
-      t != null && t.face && (this.pointSelectorHelper.updateWithIntersect(t), this.select(t));
+      const [t] = p(this.five, e);
+      t != null && t.face && this.select(t);
     });
     /**
      * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
@@ -63,14 +69,14 @@ class k {
     i(this, "onPan", (e) => {
       if (!this.pressDown)
         return;
-      const [t] = h(this.five, e);
+      const [t] = p(this.five, e);
       t != null && t.face && this.intersectionOnModelUpdate(t);
     });
     /**
      * @description: 长按屏幕后，更新长按点的位置
      */
     i(this, "onPress", (e) => {
-      const [t] = h(this.five, e);
+      const [t] = p(this.five, e);
       t != null && t.face && (this.pressDown = !0, this.intersectionOnModelUpdate(t));
     });
     /**
@@ -80,28 +86,61 @@ class k {
       this.pressDown = !1, this.select();
     });
     i(this, "intersectionOnModelUpdate", (e) => {
-      this.pointSelectorHelper.show(), this.pointSelectorHelper.updateWithIntersect(e);
+      this.pointSelectorHelper.show(), this.updatePointSelectorHelperIntersect(e);
+    });
+    i(this, "updateByMousePosition", (e) => {
+      const t = this.five.getElement();
+      if (!t)
+        return;
+      const { clientX: n, clientY: r } = e, o = {
+        x: n / t.clientWidth,
+        y: 1 - r / t.clientHeight
+      };
+      this.updateByNdcPosition(o);
+    });
+    /**
+     * @description: 根据鼠标位置更新helper位置
+     */
+    i(this, "updateByNdcPosition", (e) => {
+      const t = k(this.five, e), n = (() => t ? c(a({}, t), { isVirtual: !1 }) : c(a({}, G(this.five, e)), { isVirtual: !0 }))();
+      this.updatePointSelectorHelperIntersect(n);
+    });
+    /**
+     * @description: 更新 pointSelectorHelper 的焦点位置
+     */
+    i(this, "updatePointSelectorHelperIntersect", (e) => {
+      var r;
+      const t = a({}, e);
+      let n = !1;
+      if (((r = this.adherePoints) == null ? void 0 : r.length) > 0 && typeof this.adherePointsRadius == "number") {
+        for (const o of this.adherePoints)
+          if (o.distanceTo(e.point) < this.adherePointsRadius) {
+            t.point = o.clone(), n = !0;
+            break;
+          }
+      }
+      this.pointSelectorHelper.updateWithIntersect(t, { emitEvent: !1 }), this.hook.emit("intersectionUpdate", t, n);
     });
     i(this, "onFiveWantsPanGesture", () => {
       if (this.pressDown)
         return !1;
     });
     i(this, "renderScreenCenter", () => {
-      this.pointSelectorHelper.updateByNdcPosition({ x: 0.5, y: 0.5 });
+      this.updateByNdcPosition({ x: 0.5, y: 0.5 });
     });
     i(this, "emitIntersectionUpdate", (e) => {
       this.hook.emit("intersectionUpdate", e);
     });
-    var p, l;
+    var o, h;
     this.five = e;
-    const a = (p = t == null ? void 0 : t.mode) != null ? p : "auto";
-    a === "auto" ? this.mode = U ? "fixed" : "cursor" : this.mode = a;
-    const f = {
+    const n = (o = t == null ? void 0 : t.mode) != null ? o : "auto";
+    n === "auto" ? this.mode = b ? "fixed" : "cursor" : this.mode = n;
+    const r = {
       autoFixPCPosition: this.mode === "cursor",
       initialPosition: this.mode === "fixed" ? { left: "35%", top: "20%" } : void 0
     };
-    this.pointSelectorHelper = new w(e, m(o({}, t == null ? void 0 : t.pointSelectorHelperParams), {
-      magnifierParams: o(o({}, f), (l = t == null ? void 0 : t.pointSelectorHelperParams) == null ? void 0 : l.magnifierParams)
+    this.pointSelectorHelper = new H(e, c(a({}, t == null ? void 0 : t.pointSelectorHelperParams), {
+      magnifierParams: a(a({}, r), (h = t == null ? void 0 : t.pointSelectorHelperParams) == null ? void 0 : h.magnifierParams)
     }));
   }
   get position() {
@@ -114,19 +153,35 @@ class k {
     const e = this.five.getElement();
     if (!e)
       throw new Error("five element not found");
-    this.hammer || (this.hammer = new b(e)), this.mode === "cursor" ? (this.five.on("intersectionOnModelUpdate", this.intersectionOnModelUpdate), this.five.on("wantsPanGesture", this.onFiveWantsPanGesture), 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);
+    this.hammer || (this.hammer = new U(e)), this.mode === "cursor" ? (this.five.on("intersectionOnModelUpdate", this.intersectionOnModelUpdate), this.five.on("wantsPanGesture", this.onFiveWantsPanGesture), this.five.on("wantsMoveToPano", l), this.five.on("wantsTapGesture", l), e.addEventListener("mousemove", this.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.intersectionOnModelUpdate), this.five.off("wantsPanGesture", this.onFiveWantsPanGesture), 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);
+    this.five.off("intersectionOnModelUpdate", this.intersectionOnModelUpdate), this.five.off("wantsPanGesture", this.onFiveWantsPanGesture), this.five.off("wantsMoveToPano", l), this.five.off("wantsTapGesture", l), e == null || e.removeEventListener("mousemove", this.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();
   }
+  setAdherePoints(e, t) {
+    e ? this.adherePoints = Array.isArray(e) ? e : [e] : this.adherePoints = null, typeof t == "number" && (this.adherePointsRadius = t);
+  }
+}
+function x(s, e) {
+  const { x: t, y: n } = e, r = t * 2 - 1, o = n * 2 - 1, h = new M().fromArray([r, o]), f = new O();
+  return f.setFromCamera(h, s.camera), f;
+}
+function G(s, e) {
+  const t = x(s, e), n = 3, r = new E().addVectors(t.ray.origin, t.ray.direction.clone().normalize().multiplyScalar(n)), o = t.ray.direction.clone().negate();
+  return {
+    distance: n,
+    point: r,
+    object: new F(),
+    face: new I(0, 0, 0, o)
+  };
 }
 export {
-  k as PointSelector
+  W as PointSelector
 };

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

@@ -33,17 +33,8 @@ export declare class PointSelectorHelper {
     enable(): void;
     disable(): void;
     dispose(): void;
-    updateWithIntersect: (intersect: Intersection) => void;
-    updateByMousePosition: (mousePosition: {
-        clientX: number;
-        clientY: number;
-    }) => void;
-    /**
-     * @description: 根据鼠标位置更新helper位置
-     */
-    updateByNdcPosition: (ndcPosition: {
-        x: number;
-        y: number;
+    updateWithIntersect: (intersect: Intersection, config?: {
+        emitEvent: boolean;
     }) => void;
     private abortUpdateMagnifier;
 }

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

@@ -1,100 +1,50 @@
-var m = Object.defineProperty, u = Object.defineProperties;
-var b = Object.getOwnPropertyDescriptors;
-var f = Object.getOwnPropertySymbols;
-var g = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
-var l = (i, t, e) => t in i ? m(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, h = (i, t) => {
-  for (var e in t || (t = {}))
-    g.call(t, e) && l(i, e, t[e]);
-  if (f)
-    for (var e of f(t))
-      v.call(t, e) && l(i, e, t[e]);
-  return i;
-}, p = (i, t) => u(i, b(t));
-var r = (i, t, e) => (l(i, typeof t != "symbol" ? t + "" : t, e), e);
-import * as n from "three";
-import { Subscribe as H } from "@realsee/five";
-import { Magnifier as y } from "./Magnifier.js";
-import { getIntersectFromRelativePosition as D } from "./getIntersect.js";
-import { PointHelper as w } from "./PointHelper.js";
-import { PointDomHelper as P } from "./PointDomHelper.js";
-class E {
-  constructor(t, e) {
-    r(this, "five");
-    r(this, "hooks", new H());
-    r(this, "position");
-    r(this, "magnifier", null);
-    r(this, "pointHelper", null);
-    r(this, "pointDomHelper", null);
-    r(this, "state", { enabled: !1, visible: !0 });
-    r(this, "group", new n.Group());
-    r(this, "show", () => {
+var a = Object.defineProperty;
+var l = (r, i, e) => i in r ? a(r, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[i] = e;
+var t = (r, i, e) => (l(r, typeof i != "symbol" ? i + "" : i, e), e);
+import * as h from "three";
+import { Subscribe as p } from "@realsee/five";
+import { Magnifier as o } from "./Magnifier.js";
+import { PointHelper as d } from "./PointHelper.js";
+import { PointDomHelper as f } from "./PointDomHelper.js";
+class v {
+  constructor(i, e) {
+    t(this, "five");
+    t(this, "hooks", new p());
+    t(this, "position");
+    t(this, "magnifier", null);
+    t(this, "pointHelper", null);
+    t(this, "pointDomHelper", null);
+    t(this, "state", { enabled: !1, visible: !0 });
+    t(this, "group", new h.Group());
+    t(this, "show", () => {
       this.state.visible || (this.state.visible = !0, this.pointHelper.visible = !0, this.pointDomHelper.enable(), this.magnifier.show(), this.five.needsRender = !0);
     });
-    r(this, "hide", () => {
+    t(this, "hide", () => {
       this.state.visible && (this.state.visible = !1, this.pointHelper.visible = !1, this.pointDomHelper.disable(), this.magnifier.hide(), this.five.needsRender = !0);
     });
-    r(this, "updateWithIntersect", (t) => {
-      var s;
-      this.abortUpdateMagnifier(), this.position = t, this.hooks.emit("intersectionUpdate", t), this.pointHelper.updateWithIntersect(t), (s = this.pointDomHelper) == null || s.updateWithIntersect(t);
-      const e = () => this.magnifier.renderWithPoint(t.point);
-      this.abortUpdateMagnifier = () => this.five.off("renderFrame", e), this.five.once("renderFrame", e), this.five.needsRender = !0;
+    t(this, "updateWithIntersect", (i, e = { emitEvent: !0 }) => {
+      var n;
+      this.abortUpdateMagnifier(), this.position = i, e.emitEvent && this.hooks.emit("intersectionUpdate", i), this.pointHelper.updateWithIntersect(i), (n = this.pointDomHelper) == null || n.updateWithIntersect(i);
+      const s = () => this.magnifier.renderWithPoint(i.point);
+      this.abortUpdateMagnifier = () => this.five.off("renderFrame", s), this.five.once("renderFrame", s), this.five.needsRender = !0;
     });
-    r(this, "updateByMousePosition", (t) => {
-      const e = this.five.getElement();
-      if (!e)
-        return;
-      const { clientX: s, clientY: a } = t, o = {
-        x: s / e.clientWidth,
-        y: 1 - a / e.clientHeight
-      };
-      this.updateByNdcPosition(o);
-    });
-    /**
-     * @description: 根据鼠标位置更新helper位置
-     */
-    r(this, "updateByNdcPosition", (t) => {
-      const e = D(this.five, t);
-      if (e)
-        this.position = p(h({}, e), { isVirtual: !1 });
-      else {
-        const s = R(this.five, t);
-        this.position = p(h({}, s), { isVirtual: !0 });
-      }
-      this.updateWithIntersect(this.position);
-    });
-    r(this, "abortUpdateMagnifier", () => {
+    t(this, "abortUpdateMagnifier", () => {
     });
     var s;
-    this.five = t, this.magnifier = (e == null ? void 0 : e.magnifier) !== void 0 ? e.magnifier : new y(t, (s = e == null ? void 0 : e.magnifierParams) != null ? s : { dragEnabled: !0 }), this.pointHelper = (e == null ? void 0 : e.pointHelper) !== void 0 ? e.pointHelper : new w(), this.pointDomHelper = (e == null ? void 0 : e.pointDomHelper) !== void 0 ? e.pointDomHelper : new P(t), this.group.name = "five-point-selector", this.five.scene.add(this.group), this.magnifier.appendTo(document.body);
+    this.five = i, this.magnifier = (e == null ? void 0 : e.magnifier) !== void 0 ? e.magnifier : new o(i, (s = e == null ? void 0 : e.magnifierParams) != null ? s : { dragEnabled: !0 }), this.pointHelper = (e == null ? void 0 : e.pointHelper) !== void 0 ? e.pointHelper : new d(), this.pointDomHelper = (e == null ? void 0 : e.pointDomHelper) !== void 0 ? e.pointDomHelper : new f(i), this.group.name = "five-point-selector", this.five.scene.add(this.group), this.magnifier.appendTo(document.body);
   }
   enable() {
-    var t, e;
-    this.state.enabled || (this.state.enabled = !0, this.pointHelper && this.group.add(this.pointHelper), (t = this.magnifier) == null || t.enable(), (e = this.pointDomHelper) == null || e.enable(), this.five.needsRender = !0, this.hooks.emit("enabled"));
+    var i, e;
+    this.state.enabled || (this.state.enabled = !0, this.pointHelper && this.group.add(this.pointHelper), (i = this.magnifier) == null || i.enable(), (e = this.pointDomHelper) == null || e.enable(), this.five.needsRender = !0, this.hooks.emit("enabled"));
   }
   disable() {
-    var t, e;
-    this.state.enabled && (this.state.enabled = !1, this.pointHelper && this.group.remove(this.pointHelper), (t = this.magnifier) == null || t.disable(), (e = this.pointDomHelper) == null || e.disable(), this.hooks.emit("disabled"));
+    var i, e;
+    this.state.enabled && (this.state.enabled = !1, this.pointHelper && this.group.remove(this.pointHelper), (i = this.magnifier) == null || i.disable(), (e = this.pointDomHelper) == null || e.disable(), this.hooks.emit("disabled"));
   }
   dispose() {
     this.hooks.off(), this.disable(), this.magnifier = null, this.pointHelper = null, this.pointDomHelper = null;
   }
 }
-function I(i, t) {
-  const { x: e, y: s } = t, a = e * 2 - 1, o = s * 2 - 1, c = new n.Vector2().fromArray([a, o]), d = new n.Raycaster();
-  return d.setFromCamera(c, i.camera), d;
-}
-function R(i, t) {
-  const e = I(i, t), s = 3, a = new n.Vector3().addVectors(
-    e.ray.origin,
-    e.ray.direction.clone().normalize().multiplyScalar(s)
-  ), o = e.ray.direction.clone().negate();
-  return {
-    distance: s,
-    point: a,
-    object: new n.Object3D(),
-    face: new n.Face3(0, 0, 0, o)
-  };
-}
 export {
-  E as PointSelectorHelper
+  v as PointSelectorHelper
 };

package/libs/typings/typings.d.ts

@@ -1,4 +1,5 @@
 import type * as THREE from 'three';
+import type { PartialDeep } from 'type-fest';
 export interface Intersection {
     /** 焦点坐标 */
     point: THREE.Vector3;
@@ -7,3 +8,6 @@ export interface Intersection {
         normal: THREE.Vector3;
     } | null;
 }
+export type PartialObjectDeep<ObjectType extends object> = {
+    [KeyType in keyof ObjectType]?: PartialDeep<ObjectType[KeyType]>;
+};

package/package.json

@@ -7,7 +7,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.21.0-dev.10",
+  "version": "2.21.0-dev.11",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "clean": "rm -rf components dist docs libs types ./vite.config.js.timestamp*",