@realsee/dnalogel 3.20.6 → 3.21.0

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

@@ -1,7 +1,11 @@
 import { Object3D } from 'three';
 export declare class IObject3D extends Object3D {
+    name: string;
+    needsRender: boolean;
     constructor();
+    removeChildren(): this;
     add(...objects: Object3D[]): this;
+    addIfNotExists(...objects: Object3D[]): this;
     remove(...objects: Object3D[]): this;
     removeFromParent(): this;
 }

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

@@ -1,19 +1,32 @@
-import { Object3D as r } from "three";
-class s extends r {
+var s = Object.defineProperty;
+var h = (n, t, e) => t in n ? s(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var i = (n, t, e) => (h(n, typeof t != "symbol" ? t + "" : t, e), e);
+import { Object3D as o } from "three";
+class c extends o {
   constructor() {
     super();
+    i(this, "name", "IObject3D");
+    i(this, "needsRender");
+  }
+  removeChildren() {
+    for (; this.children.length > 0; )
+      this.remove(this.children[0]);
+    return this;
   }
   add(...e) {
-    if (e.length === 0)
-      return this;
-    const t = e.filter(Boolean);
-    return super.add(...t);
+    const r = e.filter(Boolean);
+    return r.length === 0 ? this : super.add(...r);
+  }
+  addIfNotExists(...e) {
+    return e.forEach((r) => {
+      this.children.includes(r) || this.add(r);
+    }), this;
   }
   remove(...e) {
     if (e.length === 0)
       return this;
-    const t = e.filter(Boolean);
-    return super.remove(...t);
+    const r = e.filter(Boolean);
+    return super.remove(...r);
   }
   removeFromParent() {
     const e = this.parent;
@@ -21,5 +34,5 @@ class s extends r {
   }
 }
 export {
-  s as IObject3D
+  c as IObject3D
 };

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

@@ -2,23 +2,25 @@ import type { Five, SubscribeEventMap } from '@realsee/five';
 import Hammer from 'hammerjs';
 import * as THREE from 'three';
 import { Subscribe } from '@realsee/five';
+interface MagnifierConfig {
+    /** 允许拖动放大镜 */
+    dragEnabled: boolean;
+    /** renderWithPoint 时，是否应该自动更新放大镜的位置 */
+    autoFixPCPosition: boolean;
+    /** 放大镜初始位置应该设置在容器的哪个位置 */
+    initialPosition: {
+        left: string;
+        top: string;
+    };
+}
 interface MagnifierEvent extends SubscribeEventMap {
     wantsPanGesture: (event: (typeof Hammer)['Input']) => boolean;
 }
 /** 放大镜配置参数 */
-export interface MagnifierParameter {
+export interface MagnifierParameter extends Partial<MagnifierConfig> {
     width?: number;
     height?: number;
     scale?: number;
-    /** 允许拖动放大镜 */
-    dragEnabled?: boolean;
-    /** renderWithPoint 时，是否应该自动更新放大镜的位置 */
-    autoFixPCPosition?: boolean;
-    /** 放大镜初始位置应该设置在容器的哪个位置 */
-    initialPosition?: {
-        left: string;
-        top: string;
-    };
 }
 export declare class Magnifier {
     width: number;
@@ -26,33 +28,45 @@ export declare class Magnifier {
     containerDom?: Element;
     hooks: Subscribe<MagnifierEvent>;
     canvas: HTMLCanvasElement;
+    config: MagnifierConfig;
+    state: {
+        enabled: boolean;
+    };
     private five;
     private scale;
-    private config;
     private offset;
     private context;
     private renderCenter;
     private hammer?;
-    private state;
+    private offsetRange?;
+    private isPanning;
     constructor(five: Five, options: MagnifierParameter);
-    getCurrentState(): {
-        enabled: boolean;
-    };
-    dispose(): void;
-    show(): this;
-    hide(): this;
     enable(): this;
     disable(): this;
+    dispose(): void;
     /** 把放大镜放到某一个容器中 */
     appendTo(element: Element): this;
     /** 清除放大镜渲染内容 */
     clear(): this;
     /** 放大传入点位周围的内容 */
     renderWithPoint(point: THREE.Vector3): void;
+    /** 放大传入点位周围的内容 */
+    renderWithScreenPoint(point: {
+        x: number;
+        y: number;
+    }): void;
+    resetOffset(): void;
+    protected getRenderCenter(): THREE.Vector3 | {
+        x: number;
+        y: number;
+    };
+    private _appendTo;
     private autoFixPCPosition;
     private render;
     private initStyle;
+    private getPanOffset;
+    private onPanstart;
     private onPan;
-    private onPanEnd;
+    private onPanend;
 }
 export {};

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

@@ -1,85 +1,70 @@
 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 v from "three";
-import { Subscribe as D } from "@realsee/five";
-function l(s, t, e) {
-  const n = s[t], i = s[e];
-  n === void 0 || i === void 0 || (s[t] = i, s[e] = n);
-}
-function C(s, t, e) {
-  const n = e / 2;
-  for (let i = 1; i <= n; i++) {
-    const h = e - (i - 1);
-    for (let r = 1; r <= t; r++) {
-      const o = (i - 1) * t + r - 1, c = (h - 1) * t + r - 1;
-      l(s, o * 4 + 0, c * 4 + 0), l(s, o * 4 + 1, c * 4 + 1), l(s, o * 4 + 2, c * 4 + 2), l(s, o * 4 + 3, c * 4 + 3);
-    }
-  }
-}
-class H {
+var b = (r, t, e) => t in r ? p(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var n = (r, t, e) => (b(r, typeof t != "symbol" ? t + "" : t, e), e);
+import C from "hammerjs";
+import * as l from "three";
+import { Subscribe as w } from "@realsee/five";
+class Y {
   constructor(t, e) {
-    a(this, "width");
-    a(this, "height");
-    a(this, "containerDom");
-    a(this, "hooks", new D());
-    a(this, "canvas", document.createElement("canvas"));
-    a(this, "five");
-    a(this, "scale");
-    a(this, "config");
-    a(this, "offset", { x: 0, y: 0 });
-    a(this, "context");
-    a(this, "renderCenter", new v.Vector3());
-    a(this, "hammer");
-    a(this, "state", { enabled: !1 });
-    a(this, "onPan", (t) => {
-      if (!this.containerDom || this.hooks.emit("wantsPanGesture", t))
+    n(this, "width");
+    n(this, "height");
+    n(this, "containerDom");
+    n(this, "hooks", new w());
+    n(this, "canvas", document.createElement("canvas"));
+    n(this, "config");
+    n(this, "state", { enabled: !1 });
+    n(this, "five");
+    n(this, "scale");
+    n(this, "offset", { x: 0, y: 0 });
+    n(this, "context");
+    n(this, "renderCenter", new l.Vector3());
+    n(this, "hammer");
+    n(this, "offsetRange");
+    n(this, "isPanning", !1);
+    n(this, "onPanstart", () => {
+      this.isPanning = !0, this.canvas.style.boxShadow = "0 2px 30px 0 rgba(0,0,0,0.20)";
+    });
+    n(this, "onPan", (t) => {
+      if (!this.isPanning || !this.offsetRange || this.hooks.emit("wantsPanGesture", t))
         return;
-      const n = this.offset.x + t.deltaX, i = this.offset.y + t.deltaY;
-      this.canvas.style.boxShadow = "0 2px 30px 0 rgba(0,0,0,0.20)", this.canvas.style.transform = `translate3d(${n}px, ${i}px, 100px)`;
+      const { translateX: i, translateY: s } = this.getPanOffset(t, this.offsetRange);
+      this.canvas.style.transform = `translate3d(${i}px, ${s}px, 100px)`;
     });
-    a(this, "onPanEnd", (t) => {
-      this.offset = { x: this.offset.x + t.deltaX, y: this.offset.y + t.deltaY }, this.canvas.style.boxShadow = "none";
+    n(this, "onPanend", (t) => {
+      if (this.isPanning = !1, this.canvas.style.boxShadow = "none", !this.offsetRange)
+        return;
+      const { translateX: e, translateY: i } = this.getPanOffset(t, this.offsetRange);
+      this.canvas.style.transform = `translate3d(${e}px, ${i}px, 100px)`, this.offset = { x: e, y: i };
     });
-    var i, h, r;
+    var s, h, o, a;
     if (!t.renderer)
       throw new Error("Five Render 未初始化");
-    this.five = t, this.scale = (i = e == null ? void 0 : e.scale) != null ? i : 2, this.width = (h = e == null ? void 0 : e.width) != null ? h : 190, this.height = (r = e == null ? void 0 : e.height) != null ? r : 190, this.config = {
+    this.five = t, this.scale = (s = e == null ? void 0 : e.scale) != null ? s : 2, this.width = (h = e == null ? void 0 : e.width) != null ? h : 190, this.height = (a = (o = e == null ? void 0 : e.height) != null ? o : e == null ? void 0 : e.width) != null ? a : 190, this.config = {
       dragEnabled: (e == null ? void 0 : e.dragEnabled) || !1,
       autoFixPCPosition: (e == null ? void 0 : e.autoFixPCPosition) || !1,
       initialPosition: (e == null ? void 0 : e.initialPosition) || { left: "0", top: "0" }
     };
-    const n = this.canvas.getContext("2d");
-    if (!n)
+    const i = this.canvas.getContext("2d");
+    if (!i)
       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;
+    this.context = i, this.config.dragEnabled && (this.hammer = new C(this.canvas), this.hammer.on("pan", this.onPan), this.hammer.on("panstart", this.onPanstart), this.hammer.on("panend", this.onPanend)), this.initStyle();
   }
   enable() {
-    var t;
     if (!this.state.enabled)
-      return this.state.enabled = !0, (t = this.containerDom) == null || t.append(this.canvas), this;
+      return this.state.enabled = !0, this.containerDom && this._appendTo(this.containerDom), this;
   }
   disable() {
     if (this.state.enabled)
-      return this.state.enabled = !1, this.canvas.remove(), this;
+      return this.state.enabled = !1, this.canvas.style.visibility = "hidden", this.canvas.remove(), this;
+  }
+  dispose() {
+    var t;
+    this.clear(), this.disable(), (t = this.hammer) == null || t.destroy();
   }
   /** 把放大镜放到某一个容器中 */
   appendTo(t) {
-    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;
+    var e;
+    return this.containerDom && ((e = this.containerDom) == null || e.removeChild(this.canvas)), this.containerDom = t, this.state.enabled && this._appendTo(t), this;
   }
   /** 清除放大镜渲染内容 */
   clear() {
@@ -89,27 +74,84 @@ class H {
   renderWithPoint(t) {
     this.containerDom && this.state.enabled && (this.renderCenter = t, this.render(), this.config.autoFixPCPosition && this.autoFixPCPosition());
   }
+  /** 放大传入点位周围的内容 */
+  renderWithScreenPoint(t) {
+    this.containerDom && this.state.enabled && (this.renderCenter = t, this.render(), this.config.autoFixPCPosition && this.autoFixPCPosition());
+  }
+  resetOffset() {
+    this.offset = { x: 0, y: 0 }, this.canvas.style.transform = "translate3d(0px, 0px, 100px)";
+  }
+  getRenderCenter() {
+    return this.renderCenter;
+  }
+  _appendTo(t) {
+    if (this.resetOffset(), t.appendChild(this.canvas), !this.offsetRange) {
+      const e = this.canvas.getBoundingClientRect(), i = t.getBoundingClientRect(), s = i.right - e.right, h = i.bottom - e.bottom, o = i.left - e.left, a = i.top - e.top;
+      this.offsetRange = {
+        min: { x: o, y: a },
+        max: { x: s, y: h }
+      };
+    }
+  }
   autoFixPCPosition() {
     if (!this.containerDom)
       return;
-    const { width: t, height: e } = this, n = this.renderCenter.clone().project(this.five.camera), i = (n.x + 1) / 2 * this.containerDom.clientWidth, h = -(n.x - 1) / 2 * this.containerDom.clientWidth, r = -(n.y - 1) / 2 * this.containerDom.clientHeight;
-    i < 183 ? (this.canvas.style.top = -e / 2 + "px", this.canvas.style.left = "90px") : r < 183 ? (this.canvas.style.top = "90px", this.canvas.style.left = -t / 2 + "px") : h < 183 ? (this.canvas.style.top = -e / 2 + "px", this.canvas.style.left = -t - 90 + "px") : (this.canvas.style.left = -t / 2 + "px", this.canvas.style.top = -e - 90 + "px"), this.canvas.style.transform = `translate3d(${i}px, ${r}px, 10px)`, this.offset = { x: i, y: r };
+    const { width: t, height: e } = this, { clientWidth: i, clientHeight: s } = this.containerDom, [h, o, a] = (() => {
+      if (this.renderCenter instanceof l.Vector3) {
+        const f = this.renderCenter.clone().project(this.five.camera);
+        return [
+          //
+          (f.x + 1) / 2 * i,
+          -(f.x - 1) / 2 * i,
+          -(f.y - 1) / 2 * s
+        ];
+      } else
+        return [this.renderCenter.x, i - this.renderCenter.x, this.renderCenter.y];
+    })();
+    h < 183 ? (this.canvas.style.top = -e / 2 + "px", this.canvas.style.left = "90px") : a < 183 ? (this.canvas.style.top = "90px", this.canvas.style.left = -t / 2 + "px") : o < 183 ? (this.canvas.style.top = -e / 2 + "px", this.canvas.style.left = -t - 90 + "px") : (this.canvas.style.left = -t / 2 + "px", this.canvas.style.top = -e - 90 + "px"), this.canvas.style.transform = `translate3d(${h}px, ${a}px, 10px)`, this.offset = { x: h, y: a };
   }
   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 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);
+    const { scale: t, context: e, width: i, height: s } = this, h = this.five.renderer.getSize(new l.Vector2()), [o, a] = (() => {
+      if (this.renderCenter instanceof l.Vector3) {
+        const y = this.renderCenter.clone().project(this.five.camera);
+        return [(y.x + 1) / 2 * h.x, (y.y + 1) / 2 * h.y];
+      } else
+        return [this.renderCenter.x, h.y - this.renderCenter.y];
+    })(), f = 1, c = i / t, x = s / t, P = f * t, g = this.five.getPixels(o - c / 2, a - c / 2, c, x, P), m = Math.floor(i * f), u = Math.floor(s * f);
+    R(g, m, u);
+    const v = new ImageData(m, u);
+    v.data.set(g), e.putImageData(v, 0, 0), this.canvas.style.visibility = "visible";
   }
   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";
+    t.classList.add("five-plugin__magnifier"), t.style.position = "absolute", t.style.pointerEvents = this.config.dragEnabled ? "all" : "none", 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)", t.style.visibility = "visible", 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");
+  }
+  getPanOffset(t, e) {
+    const {
+      min: { x: i, y: s },
+      max: { x: h, y: o }
+    } = e, a = this.offset.x + t.deltaX, f = this.offset.y + t.deltaY, c = Math.min(Math.max(a, i), h), x = Math.min(Math.max(f, s), o);
+    return { translateX: c, translateY: x };
+  }
+}
+function d(r, t, e) {
+  const i = r[t], s = r[e];
+  i === void 0 || s === void 0 || (r[t] = s, r[e] = i);
+}
+function R(r, t, e) {
+  const i = e / 2;
+  for (let s = 1; s <= i; s++) {
+    const h = e - (s - 1);
+    for (let o = 1; o <= t; o++) {
+      const a = (s - 1) * t + o - 1, f = (h - 1) * t + o - 1;
+      d(r, a * 4 + 0, f * 4 + 0), d(r, a * 4 + 1, f * 4 + 1), d(r, a * 4 + 2, f * 4 + 2), d(r, a * 4 + 3, f * 4 + 3);
+    }
   }
 }
 export {
-  H as Magnifier
+  Y as Magnifier
 };

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

@@ -1,7 +1,7 @@
-import type { Five, SubscribeEventMap } from '@realsee/five';
-import { Subscribe } from '@realsee/five';
+import type { Five } from '@realsee/five';
 import { PointSelectorHelper, type PointIntersection } from './PointSelectorHelper';
-import { Vector3 } from 'three';
+import type { Vector3 } from 'three';
+import { Subscribe } from '../Subscribe';
 interface Config {
     /**
      * @description: 选点的两种模式, 'fixed' 为固定选点为屏幕中心点，拖动five画布来更新点，'cursor' 为跟随鼠标移动来更新点, 'auto' 则根据设备类型自动选择
@@ -10,7 +10,7 @@ interface Config {
     mode: 'fixed' | 'cursor' | 'auto';
     pointSelectorHelperParams: ConstructorParameters<typeof PointSelectorHelper>[1];
 }
-interface EventMap extends SubscribeEventMap {
+type EventMap = {
     /**
      * @description: 与模型交点更新时触发，移出监听范围时为null
      * @param isAdhered 是否为吸附的点
@@ -20,23 +20,35 @@ interface EventMap extends SubscribeEventMap {
      * @description: 试图打点，返回false则不打点
      */
     wantsSelect: (intersection: PointIntersection) => boolean | void;
+    /**
+     * @description: 打点成功
+     */
     select: (intersection: PointIntersection) => void;
-}
+    /**
+     * @description: 功能开启
+     */
+    enable: () => void;
+    /**
+     * @description: 功能关闭
+     */
+    disable: () => void;
+};
 /**
  * @description: 在屏幕上选点
  */
-export declare class PointSelector {
-    hook: Subscribe<EventMap>;
+export declare class PointSelector extends Subscribe<EventMap> {
     get position(): PointIntersection;
     /**
      * @description: 不在 five canvas 上时为 true
      */
     outOfFive: boolean;
+    enabled: boolean;
+    pointSelectorHelper: PointSelectorHelper;
+    /** @deprecated directly use `pointSelector.on/off` instead */
+    hook: this;
     private five;
     private hammer?;
     private mode;
-    private pointSelectorHelper;
-    private enabled;
     /** 长按屏幕的动作触发后为true，手指抬起后为false */
     private pressDown;
     /** 一组吸附的点，光标靠近这些点时，会将helper以及放大镜的位置设置为这些点 */
@@ -44,11 +56,13 @@ export declare class PointSelector {
     /** 吸附点的半径 */
     private adherePointsRadius;
     private lastFiveHelperVisible?;
+    private mousePosition;
+    private get mouseNdcPosition();
     constructor(five: Five, config?: Partial<Config>);
     enable(): void;
     disable(): void;
     dispose(): void;
-    setAdherePoints(points: Vector3[] | Vector3 | null, radius?: number): void;
+    setAdherePoints(points: Vector3[] | ((intersection: PointIntersection) => Vector3[]) | null, radius?: number): void;
     /**
      * @description: 主动触发一次选点
      * @return: select 是否成功
@@ -76,7 +90,6 @@ export declare class PointSelector {
      * @description: 手指抬起后，重置pressDown状态
      */
     private onPanEnd;
-    private intersectionOnModelUpdate;
     private updateByMousePosition;
     /**
      * @description: 根据鼠标位置更新helper位置
@@ -86,6 +99,7 @@ export declare class PointSelector {
      * @description: 更新 pointSelectorHelper 的焦点位置
      */
     private updatePointSelectorHelperIntersect;
+    private mousePositionToNdcPosition;
     private onFiveWantsPanGesture;
     private renderScreenCenter;
     private emitIntersectionUpdate;