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

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

@@ -0,0 +1,187 @@
+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 = {}))
+    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;
+}, 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 y());
+    /**
+     * @description: 不在 five canvas 上时为 true
+     */
+    i(this, "outOfFive", !1);
+    i(this, "five");
+    i(this, "hammer");
+    i(this, "mode");
+    i(this, "pointSelectorHelper");
+    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.updatePointSelectorHelperIntersect(e);
+      const t = this.hook.emit("wantsSelect", this.position);
+      return t || (this.pointSelectorHelper.hide(), this.hook.emit("select", this.position)), !t;
+    });
+    /**
+     * @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", (e) => {
+      const [t] = p(this.five, e);
+      t != null && t.face && this.select(t);
+    });
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    i(this, "onPan", (e) => {
+      if (!this.pressDown)
+        return;
+      const [t] = p(this.five, e);
+      t != null && t.face && this.intersectionOnModelUpdate(t);
+    });
+    /**
+     * @description: 长按屏幕后，更新长按点的位置
+     */
+    i(this, "onPress", (e) => {
+      const [t] = p(this.five, e);
+      t != null && t.face && (this.pressDown = !0, this.intersectionOnModelUpdate(t));
+    });
+    /**
+     * @description: 手指抬起后，重置pressDown状态
+     */
+    i(this, "onPanEnd", () => {
+      this.pressDown = !1, this.select();
+    });
+    i(this, "intersectionOnModelUpdate", (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.updateByNdcPosition({ x: 0.5, y: 0.5 });
+    });
+    i(this, "emitIntersectionUpdate", (e) => {
+      this.hook.emit("intersectionUpdate", e);
+    });
+    var o, h;
+    this.five = e;
+    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 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() {
+    return this.outOfFive ? null : this.pointSelectorHelper.position;
+  }
+  enable() {
+    if (this.enabled)
+      return;
+    this.enabled = !0, this.pointSelectorHelper.enable();
+    const e = this.five.getElement();
+    if (!e)
+      throw new Error("five element not found");
+    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", 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 {
+  W as PointSelector
+};

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

@@ -0,0 +1,41 @@
+import type { Five } from '@realsee/five';
+import { Subscribe } from '@realsee/five';
+import { Magnifier, PointHelper, PointDomHelper } from '.';
+import type { Intersection } from '../../typings/typings';
+interface Options {
+    magnifier: Magnifier | null;
+    magnifierParams: ConstructorParameters<typeof Magnifier>[1];
+    pointHelper: PointHelper | null;
+    pointDomHelper: PointDomHelper | null;
+}
+type EventMap = {
+    intersectionUpdate: (intersection: PointIntersection) => void;
+    /** 功能开启 */
+    enabled: () => void;
+    /** 功能关闭 */
+    disabled: () => void;
+};
+export interface PointIntersection extends Intersection {
+    isVirtual?: boolean;
+}
+export declare class PointSelectorHelper {
+    five: Five;
+    hooks: Subscribe<EventMap>;
+    position: PointIntersection | undefined;
+    magnifier: Magnifier | null;
+    private pointHelper;
+    private pointDomHelper;
+    private state;
+    private group;
+    constructor(five: Five, options?: Partial<Options>);
+    show: () => void;
+    hide: () => void;
+    enable(): void;
+    disable(): void;
+    dispose(): void;
+    updateWithIntersect: (intersect: Intersection, config?: {
+        emitEvent: boolean;
+    }) => void;
+    private abortUpdateMagnifier;
+}
+export {};

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

@@ -0,0 +1,50 @@
+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);
+    });
+    t(this, "hide", () => {
+      this.state.visible && (this.state.visible = !1, this.pointHelper.visible = !1, this.pointDomHelper.disable(), this.magnifier.hide(), 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;
+    });
+    t(this, "abortUpdateMagnifier", () => {
+    });
+    var s;
+    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 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 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;
+  }
+}
+export {
+  v as PointSelectorHelper
+};

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

@@ -4,4 +4,4 @@ export * from './getRaycaster';
 export * from './getIntersect';
 export * from './PointHelper';
 export * from './PointDomHelper';
-export * from './FivePointSelector';
+export * from './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]>;
+};