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

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

@@ -0,0 +1,132 @@
+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) => {
+  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]);
+  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 {
+  constructor(e, t) {
+    i(this, "hook", new H());
+    /**
+     * @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);
+    /**
+     * @description: 主动触发一次选点
+     * @return: select 是否成功
+     */
+    i(this, "select", (e) => {
+      e && this.pointSelectorHelper.updateWithIntersect(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] = h(this.five, e);
+      t != null && t.face && (this.pointSelectorHelper.updateWithIntersect(t), this.select(t));
+    });
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    i(this, "onPan", (e) => {
+      if (!this.pressDown)
+        return;
+      const [t] = h(this.five, e);
+      t != null && t.face && this.intersectionOnModelUpdate(t);
+    });
+    /**
+     * @description: 长按屏幕后，更新长按点的位置
+     */
+    i(this, "onPress", (e) => {
+      const [t] = h(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.pointSelectorHelper.updateWithIntersect(e);
+    });
+    i(this, "onFiveWantsPanGesture", () => {
+      if (this.pressDown)
+        return !1;
+    });
+    i(this, "renderScreenCenter", () => {
+      this.pointSelectorHelper.updateByNdcPosition({ x: 0.5, y: 0.5 });
+    });
+    i(this, "emitIntersectionUpdate", (e) => {
+      this.hook.emit("intersectionUpdate", e);
+    });
+    var p, l;
+    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 = {
+      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)
+    }));
+  }
+  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 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);
+  }
+  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);
+  }
+  dispose() {
+    this.disable(), this.pointSelectorHelper.dispose();
+  }
+}
+export {
+  k as PointSelector
+};

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

@@ -0,0 +1,50 @@
+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) => void;
+    updateByMousePosition: (mousePosition: {
+        clientX: number;
+        clientY: number;
+    }) => void;
+    /**
+     * @description: 根据鼠标位置更新helper位置
+     */
+    updateByNdcPosition: (ndcPosition: {
+        x: number;
+        y: number;
+    }) => void;
+    private abortUpdateMagnifier;
+}
+export {};

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

@@ -0,0 +1,100 @@
+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", () => {
+      this.state.visible || (this.state.visible = !0, this.pointHelper.visible = !0, this.pointDomHelper.enable(), this.magnifier.show(), this.five.needsRender = !0);
+    });
+    r(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;
+    });
+    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", () => {
+    });
+    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);
+  }
+  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"));
+  }
+  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"));
+  }
+  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
+};

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';