@realsee/dnalogel 2.21.1 → 2.22.0-dev.0

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

@@ -1,14 +1,14 @@
-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 m from "three";
+import * as v from "three";
 import { Subscribe as D } from "@realsee/five";
 function l(s, t, e) {
   const n = s[t], i = s[e];
-  !n || !i || (s[t] = i, s[e] = n);
+  n === void 0 || i === void 0 || (s[t] = i, s[e] = n);
 }
-function E(s, t, e) {
+function C(s, t, e) {
   const n = e / 2;
   for (let i = 1; i <= n; i++) {
     const h = e - (i - 1);
@@ -30,7 +30,7 @@ class H {
     a(this, "config");
     a(this, "offset", { x: 0, y: 0 });
     a(this, "context");
-    a(this, "renderCenter", new m.Vector3());
+    a(this, "renderCenter", new v.Vector3());
     a(this, "hammer");
     a(this, "state", { enabled: !1 });
     a(this, "onPan", (t) => {
@@ -55,10 +55,19 @@ class H {
       throw new Error("CANNOT CREATE CONTEXT2D");
     this.context = n, this.config.dragEnabled && (this.hammer = new w(this.canvas), this.hammer.on("pan", this.onPan), this.hammer.on("panend", this.onPanEnd)), this.initStyle();
   }
+  getCurrentState() {
+    return this.state;
+  }
   dispose() {
     var t;
     this.clear(), this.disable(), (t = this.hammer) == null || t.destroy();
   }
+  show() {
+    return this.canvas.style.visibility = "visible", this;
+  }
+  hide() {
+    return this.canvas.style.visibility = "hidden", this;
+  }
   enable() {
     var t;
     if (!this.state.enabled)
@@ -70,8 +79,7 @@ class H {
   }
   /** 把放大镜放到某一个容器中 */
   appendTo(t) {
-    var e;
-    return this.containerDom && ((e = this.containerDom) == null || e.removeChild(this.canvas)), this.containerDom = t, this.state.enabled && t.append(this.canvas), this;
+    return this.containerDom && Array.from(this.containerDom.children).includes(this.canvas) && this.containerDom.removeChild(this.canvas), this.containerDom = t, this.state.enabled && t.append(this.canvas), this;
   }
   /** 清除放大镜渲染内容 */
   clear() {
@@ -90,16 +98,16 @@ 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 m.Vector2()), o = 1, c = n / t, v = i / t, u = 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, v, u), f = Math.floor(n * o), x = Math.floor(i * o);
-    E(d, f, x);
-    const g = new ImageData(f, x);
-    g.data.set(d), e.putImageData(g, 0, 0);
+    const { scale: t, context: e, width: n, height: i } = this, h = this.renderCenter.clone().project(this.five.camera), r = this.five.renderer.getSize(new v.Vector2()), o = 1, c = n / t, g = 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, g, 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);
   }
   initStyle() {
     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 = "visible", this.config.dragEnabled && (this.canvas.style.cursor = "pointer");
   }
 }
 export {

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

@@ -0,0 +1,92 @@
+import type { Five, SubscribeEventMap } from '@realsee/five';
+import { Subscribe } from '@realsee/five';
+import { PointSelectorHelper, type PointIntersection } from './PointSelectorHelper';
+import { Vector3 } from 'three';
+interface Config {
+    /**
+     * @description: 选点的两种模式, 'fixed' 为固定选点为屏幕中心点，拖动five画布来更新点，'cursor' 为跟随鼠标移动来更新点, 'auto' 则根据设备类型自动选择
+     * @default: 'auto'
+     */
+    mode: 'fixed' | 'cursor' | 'auto';
+    pointSelectorHelperParams: ConstructorParameters<typeof PointSelectorHelper>[1];
+}
+interface EventMap extends SubscribeEventMap {
+    /**
+     * @description: 与模型交点更新时触发，移出监听范围时为null
+     * @param isAdhered 是否为吸附的点
+     */
+    intersectionUpdate: (intersection: PointIntersection | null, isAdhered?: boolean) => void;
+    /**
+     * @description: 试图打点，返回false则不打点
+     */
+    wantsSelect: (intersection: PointIntersection) => boolean | void;
+    select: (intersection: PointIntersection) => void;
+}
+/**
+ * @description: 在屏幕上选点
+ */
+export declare class PointSelector {
+    hook: Subscribe<EventMap>;
+    get position(): PointIntersection;
+    /**
+     * @description: 不在 five canvas 上时为 true
+     */
+    outOfFive: boolean;
+    private five;
+    private hammer?;
+    private mode;
+    private pointSelectorHelper;
+    private enabled;
+    /** 长按屏幕的动作触发后为true，手指抬起后为false */
+    private pressDown;
+    /** 一组吸附的点，光标靠近这些点时，会将helper以及放大镜的位置设置为这些点 */
+    private adherePoints;
+    /** 吸附点的半径 */
+    private adherePointsRadius;
+    constructor(five: Five, config?: Partial<Config>);
+    enable(): void;
+    disable(): void;
+    dispose(): void;
+    setAdherePoints(points: Vector3[] | Vector3 | null, radius?: number): void;
+    /**
+     * @description: 主动触发一次选点
+     * @return: select 是否成功
+     */
+    select: (intersection?: PointIntersection) => boolean;
+    /**
+     * @description: 鼠标进入five canvas时
+     */
+    private onEnter;
+    /**
+     * @description: 鼠标离开five canvas时
+     */
+    private onLeave;
+    private onTap;
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    private onPan;
+    /**
+     * @description: 长按屏幕后，更新长按点的位置
+     */
+    private onPress;
+    /**
+     * @description: 手指抬起后，重置pressDown状态
+     */
+    private onPanEnd;
+    private intersectionOnModelUpdate;
+    private updateByMousePosition;
+    /**
+     * @description: 根据鼠标位置更新helper位置
+     */
+    private updateByNdcPosition;
+    /**
+     * @description: 更新 pointSelectorHelper 的焦点位置
+     */
+    private updatePointSelectorHelperIntersect;
+    private onFiveWantsPanGesture;
+    private renderScreenCenter;
+    private emitIntersectionUpdate;
+}
+export {};

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 p = (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) && p(s, t, e[t]);
+  if (m)
+    for (var t of m(e))
+      w.call(e, t) && p(s, t, e[t]);
+  return s;
+}, c = (s, e) => v(s, P(e));
+var i = (s, e, t) => (p(s, typeof e != "symbol" ? e + "" : e, t), t);
+import { Subscribe as H } from "@realsee/five";
+import { PointSelectorHelper as y } from "./PointSelectorHelper.js";
+import { isTouchDevice as b } from "../isTouchDevice.js";
+import U from "hammerjs";
+import { getIntersectionFromEvent as d } from "../getIntersectionFromEvent.js";
+import { Vector3 as E, Object3D as M, Face3 as F, Vector2 as I, 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());
+    /**
+     * @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] = d(this.five, e);
+      t != null && t.face && this.select(t);
+    });
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    i(this, "onPan", (e) => {
+      if (!this.pressDown)
+        return;
+      const [t] = d(this.five, e);
+      t != null && t.face && this.intersectionOnModelUpdate(t);
+    });
+    /**
+     * @description: 长按屏幕后，更新长按点的位置
+     */
+    i(this, "onPress", (e) => {
+      const [t] = d(this.five, e);
+      t != null && t.face && (this.pressDown = !0, this.intersectionOnModelUpdate(t));
+    });
+    /**
+     * @description: 手指抬起后，重置pressDown状态
+     */
+    i(this, "onPanEnd", () => {
+      this.pressDown && (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: o, clientY: r } = e, n = {
+        x: o / t.clientWidth,
+        y: 1 - r / t.clientHeight
+      };
+      this.updateByNdcPosition(n);
+    });
+    /**
+     * @description: 根据鼠标位置更新helper位置
+     */
+    i(this, "updateByNdcPosition", (e) => {
+      const t = k(this.five, e), o = (() => t ? c(a({}, t), { isVirtual: !1 }) : c(a({}, x(this.five, e)), { isVirtual: !0 }))();
+      this.updatePointSelectorHelperIntersect(o);
+    });
+    /**
+     * @description: 更新 pointSelectorHelper 的焦点位置
+     */
+    i(this, "updatePointSelectorHelperIntersect", (e) => {
+      var r;
+      const t = a({}, e);
+      let o = !1;
+      if (((r = this.adherePoints) == null ? void 0 : r.length) > 0 && typeof this.adherePointsRadius == "number") {
+        for (const n of this.adherePoints)
+          if (n.distanceTo(e.point) < this.adherePointsRadius) {
+            t.point = n.clone(), o = !0;
+            break;
+          }
+      }
+      this.pointSelectorHelper.updateWithIntersect(t, { emitEvent: !1 }), this.hook.emit("intersectionUpdate", t, o);
+    });
+    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 n, h;
+    this.five = e;
+    const o = (n = t == null ? void 0 : t.mode) != null ? n : "auto";
+    o === "auto" ? this.mode = b ? "fixed" : "cursor" : this.mode = o;
+    const r = {
+      autoFixPCPosition: this.mode === "cursor",
+      initialPosition: this.mode === "fixed" ? { left: "35%", top: "20%" } : void 0
+    };
+    this.pointSelectorHelper = new y(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)
+    })), this.pointSelectorHelper.hide();
+  }
+  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("wantsChangeMode", 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.show()), 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("wantsChangeMode", 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 C(s, e) {
+  const { x: t, y: o } = e, r = t * 2 - 1, n = o * 2 - 1, h = new I().fromArray([r, n]), f = new O();
+  return f.setFromCamera(h, s.camera), f;
+}
+function x(s, e) {
+  const t = C(s, e), o = 3, r = new E().addVectors(t.ray.origin, t.ray.direction.clone().normalize().multiplyScalar(o)), n = t.ray.direction.clone().negate();
+  return {
+    distance: o,
+    point: r,
+    object: new M(),
+    face: new F(0, 0, 0, n)
+  };
+}
+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/centerPoint.js

@@ -1,9 +1,7 @@
 import { Vector3 as r } from "three";
 function c(...t) {
   const e = new r();
-  return t.forEach((n) => {
-    e.add(n);
-  }), e.divideScalar(t.length), e;
+  return t.forEach((n) => e.add(n)), e.divideScalar(t.length), e;
 }
 export {
   c as centerPoint

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]>;
+};