@realsee/dnalogel 2.25.0 → 2.26.1

package/libs/PipelinePlugin/utils/Objects/FlowPipe.js

@@ -0,0 +1,106 @@
+var v = Object.defineProperty;
+var u = (o, e, t) => e in o ? v(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var r = (o, e, t) => (u(o, typeof e != "symbol" ? e + "" : e, t), t);
+import "hammerjs";
+import "three";
+import "@realsee/five";
+import "../../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
+import "../../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import { requestAnimationFrameInterval as c } from "../../../shared-utils/animationFrame/index.js";
+import { ObjectPipe as h } from "./Pipe.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../../../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../../../CSS3DRenderPlugin/utils/even.js";
+import "../../../shared-utils/Subscribe.js";
+import "../../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../../../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../../../shared-utils/three/centerPoint.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../../../shared-utils/animationFrame/BetterTween.js";
+import "../../../shared-utils/three/Extras/Curves/BezierCurve3.js";
+import "../../../shared-utils/three/Extras/Core/Interpolations.js";
+import "../../../shared-utils/three/Extras/Core/Interpolations2.js";
+const d = (
+  /* glsl */
+  `
+  varying vec2 vUv;
+  uniform float uOffset;
+  uniform float vOffset;
+  uniform float opacity;
+  uniform mediump sampler2D envMap;
+
+  void main(){
+    // u > 0 时，不显示。即贴图不向前移动时，全部使用 u = 0 的值进行平铺
+    float u = min(vUv.x + uOffset, 0.0);
+    float v = vUv.y + vOffset;
+    vec2 uv = vec2(u, v);
+    gl_FragColor = texture2D(envMap, uv);
+    gl_FragColor.a = gl_FragColor.a * opacity;
+  }
+`
+);
+class z extends h {
+  constructor(t) {
+    super(t, d);
+    /** 初始状态下，当前水管内的水流在整体管道上的位移
+     * @description 因为水管是不连续的，而要达到水流的连续效果，需要用过贴图的 uOffset 控制每根水管的初始状态
+     */
+    r(this, "initialDisplacement", 0);
+    r(this, "oldTime", (/* @__PURE__ */ new Date()).getTime());
+    /** 横向流动速度：m / s */
+    r(this, "flowSpeed", 0.6);
+    /** 纵向旋转速度：deg / s */
+    r(this, "rotateSpeed", 0);
+    r(this, "flowAnimationDisposer", () => {
+    });
+  }
+  setInitialDisplacement(t, i = "backward") {
+    this.initialDisplacement = Math.abs(t) * (i === "forward" ? -1 : 1), this.moveFromOrigin(this.initialDisplacement);
+  }
+  /** 水流移动「基于初始位置」
+   * @description 因为贴图的运动与 u 的 uOffset 相反，比较反直觉，所以封装方法易于理解
+   * @param displacement 位移：米 * 方向(向前 -> 正, 向后 -> 负)
+   */
+  moveFromOrigin(t) {
+    const i = t * this.uPreMeter;
+    return this.material.uniforms.uOffset.value = i, this.material.needsUpdate = !0, this.needsRender = !0, !0;
+  }
+  /** 水流移动「基于调整管道差值之后的位置」
+   *
+   * @param distance 位移：米 * 方向
+   */
+  moveForwardFromInitialOffset(t) {
+    const i = t * -1, m = this.initialDisplacement + i;
+    this.moveFromOrigin(m);
+  }
+  flow() {
+    this.flowAnimationDisposer(), this.oldTime = (/* @__PURE__ */ new Date()).getTime();
+    let t = 0, i = 0;
+    const m = c(() => {
+      const n = (/* @__PURE__ */ new Date()).getTime(), s = n - this.oldTime, a = this.flowSpeed * (s / 1e3), l = this.rotateSpeed * (s / 1e3);
+      t = t + a, i = i + l;
+      const p = 1 / 360, f = i * p;
+      this.material.uniforms.vOffset.value = f, this.moveForwardFromInitialOffset(t), this.oldTime = n;
+    });
+    this.flowAnimationDisposer = function() {
+      m(), this.moveForwardFromInitialOffset(0);
+    };
+  }
+  stopFlow() {
+    this.flowAnimationDisposer();
+  }
+  setSpeed(t) {
+    typeof (t == null ? void 0 : t.flowSpeed) == "number" && (this.flowSpeed = t.flowSpeed), typeof (t == null ? void 0 : t.rotateSpeed) == "number" && (this.rotateSpeed = t.rotateSpeed);
+  }
+  disposeAnime() {
+    super.disposeAnime(), this.flowAnimationDisposer();
+  }
+}
+export {
+  z as ObjectFlowPipe
+};

package/libs/PipelinePlugin/utils/Objects/HighlightPipe.d.ts

@@ -0,0 +1,11 @@
+import type { PipeParams as BasePipeParams, AnimeOptions } from './Pipe';
+import { ObjectPipe } from './Pipe';
+export type PipeParams = BasePipeParams;
+export declare class ObjectHighlightPipe extends ObjectPipe {
+    imageCount: number;
+    private highlightAnime?;
+    constructor(params: PipeParams);
+    highlight(options?: AnimeOptions): void;
+    highlight1(options?: AnimeOptions): void;
+    disposeAnime(): void;
+}

package/libs/PipelinePlugin/utils/Objects/HighlightPipe.js

@@ -0,0 +1,52 @@
+var p = Object.defineProperty;
+var n = (e, t, i) => t in e ? p(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var h = (e, t, i) => (n(e, typeof t != "symbol" ? t + "" : t, i), i);
+import "hammerjs";
+import "three";
+import "@realsee/five";
+import "../../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
+import "../../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import { tweenProgress as s } from "../../../shared-utils/animationFrame/BetterTween.js";
+import { ObjectPipe as a } from "./Pipe.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../../../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../../../CSS3DRenderPlugin/utils/even.js";
+import "../../../shared-utils/Subscribe.js";
+import "../../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../../../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../../../shared-utils/three/centerPoint.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../../../shared-utils/animationFrame/index.js";
+import "../../../shared-utils/three/Extras/Curves/BezierCurve3.js";
+import "../../../shared-utils/three/Extras/Core/Interpolations.js";
+import "../../../shared-utils/three/Extras/Core/Interpolations2.js";
+class E extends a {
+  constructor(i) {
+    super(i);
+    h(this, "imageCount", 64);
+    h(this, "highlightAnime");
+  }
+  highlight(i) {
+    const r = (i == null ? void 0 : i.duration) || 500;
+    this.disposeAnime(), this.highlightAnime = s(r).onUpdate(({ progress: m }) => this.setOpacity(m)).yoyo(!0).repeat(1 / 0).play();
+  }
+  highlight1(i) {
+    const r = (i == null ? void 0 : i.duration) || 2500;
+    this.disposeAnime(), this.highlightAnime = s(r).onUpdate(({ progress: m }) => {
+      const o = -(Math.ceil(m * this.imageCount) - 1) / this.imageCount;
+      this.material.uniforms.vOffset.value !== o && (this.material.uniforms.vOffset.value = o, this.material.needsUpdate = !0, this.needsRender = !0);
+    }).repeat(1 / 0).play();
+  }
+  disposeAnime() {
+    var i;
+    super.disposeAnime(), (i = this.highlightAnime) == null || i.dispose(), this.highlightAnime = void 0;
+  }
+}
+export {
+  E as ObjectHighlightPipe
+};

package/libs/PipelinePlugin/utils/Objects/Pipe.d.ts

@@ -0,0 +1,49 @@
+import * as THREE from 'three';
+import { BetterTween } from '../../../shared-utils';
+import { CustomBezierCurve3 } from '../../../shared-utils/three/Extras/Curves/BezierCurve3';
+export interface PipeParams {
+    id?: string;
+    path: number[][];
+    texture: THREE.Texture;
+    geometryConfig?: {
+        radius?: number;
+        radialSegments?: number;
+        tubularSegments?: number;
+    };
+}
+export interface AnimeOptions {
+    duration?: number;
+}
+export declare class ObjectPipe extends THREE.Mesh<THREE.TubeBufferGeometry, THREE.ShaderMaterial> {
+    /** 根据控制点数量计算管道路径
+     *
+     * @description 两个控制点使用直线路径，多个控制点使用贝塞尔路径
+     */
+    static calculatePath(points: THREE.Vector3[]): THREE.LineCurve3 | CustomBezierCurve3;
+    static formatGeometryUV<T extends THREE.BufferGeometry>(geometry: T, pathLength: number, uPreMeter: number): T;
+    /**
+     * 管道的 Texture 需要满足一定的要求，需要使用 formatTexture 先 format
+     */
+    static formatTexture(texture: THREE.Texture): THREE.Texture;
+    geometryConfig: {
+        radius: number;
+        tubularSegments: number;
+        radialSegments: number;
+    };
+    customID: string;
+    path: THREE.LineCurve3 | CustomBezierCurve3;
+    pathLength: number;
+    pathPoints: number[][];
+    texture: THREE.Texture;
+    protected opacityAnime?: BetterTween<{
+        progress: number;
+    }>;
+    /** u / m: 每米水管对应到贴图上，应该对应的 u 的长度 */
+    protected uPreMeter: number;
+    constructor(params: PipeParams, fragmentShader?: string);
+    hide(options?: AnimeOptions): Promise<boolean>;
+    show(options?: AnimeOptions): Promise<boolean>;
+    setOpacity(value: number): boolean;
+    disposeAnime(): void;
+    dispose(): void;
+}

package/libs/PipelinePlugin/utils/Objects/Pipe.js

@@ -0,0 +1,179 @@
+var d = Object.defineProperty;
+var v = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var f = (a, e, t) => e in a ? d(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t, y = (a, e) => {
+  for (var t in e || (e = {}))
+    A.call(e, t) && f(a, t, e[t]);
+  if (v)
+    for (var t of v(e))
+      w.call(e, t) && f(a, t, e[t]);
+  return a;
+};
+var m = (a, e, t) => (f(a, typeof e != "symbol" ? e + "" : e, t), t);
+var l = (a, e, t) => new Promise((i, s) => {
+  var o = (p) => {
+    try {
+      n(t.next(p));
+    } catch (c) {
+      s(c);
+    }
+  }, r = (p) => {
+    try {
+      n(t.throw(p));
+    } catch (c) {
+      s(c);
+    }
+  }, n = (p) => p.done ? i(p.value) : Promise.resolve(p.value).then(o, r);
+  n((t = t.apply(a, e)).next());
+});
+import * as u from "three";
+import "hammerjs";
+import "@realsee/five";
+import "../../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
+import "../../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import { BetterTween as g } from "../../../shared-utils/animationFrame/BetterTween.js";
+import { CustomBezierCurve3 as x } from "../../../shared-utils/three/Extras/Curves/BezierCurve3.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../../../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../../../CSS3DRenderPlugin/utils/even.js";
+import "../../../shared-utils/Subscribe.js";
+import "../../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../../../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../../../shared-utils/three/centerPoint.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../../../shared-utils/animationFrame/index.js";
+import "../../../shared-utils/three/Extras/Core/Interpolations.js";
+import "../../../shared-utils/three/Extras/Core/Interpolations2.js";
+const C = (
+  /* glsl */
+  `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv; 
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`
+), O = (
+  /* glsl */
+  `
+  varying vec2 vUv;
+  uniform float uOffset;
+  uniform float vOffset;
+  uniform float opacity;
+  uniform mediump sampler2D envMap;
+
+  void main(){
+    float u = vUv.x + uOffset;
+    float v = vUv.y + vOffset;
+    vec2 uv = vec2(u, v);
+    gl_FragColor = texture2D(envMap, uv);
+    gl_FragColor.a = gl_FragColor.a * opacity;
+  }
+`
+);
+class h extends u.Mesh {
+  constructor(t, i = O) {
+    super();
+    m(this, "geometryConfig", {
+      radius: 1.5 / 100,
+      tubularSegments: 20,
+      radialSegments: 8
+    });
+    m(this, "customID");
+    m(this, "path");
+    m(this, "pathLength", 0);
+    m(this, "pathPoints");
+    m(this, "texture");
+    m(this, "opacityAnime");
+    /** u / m: 每米水管对应到贴图上，应该对应的 u 的长度 */
+    m(this, "uPreMeter", 1);
+    t.geometryConfig && (this.geometryConfig = y(y({}, this.geometryConfig), t.geometryConfig)), this.customID = t.id || this.uuid, this.pathPoints = t.path, this.path = h.calculatePath(t.path.map((p) => new u.Vector3().fromArray(p))), this.pathLength = this.path.getLength(), this.texture = h.formatTexture(t.texture);
+    const { radius: s, tubularSegments: o, radialSegments: r } = this.geometryConfig, n = h.formatTexture(t.texture);
+    this.geometry = h.formatGeometryUV(
+      new u.TubeBufferGeometry(this.path, o, s, r),
+      this.pathLength,
+      this.uPreMeter
+    ), this.material = new u.ShaderMaterial({
+      uniforms: {
+        opacity: { value: 1 },
+        uOffset: { value: 0 },
+        vOffset: { value: 0 },
+        envMap: {
+          value: n
+        }
+      },
+      transparent: !0,
+      vertexShader: C,
+      fragmentShader: i
+    });
+  }
+  /** 根据控制点数量计算管道路径
+   *
+   * @description 两个控制点使用直线路径，多个控制点使用贝塞尔路径
+   */
+  static calculatePath(t) {
+    return t.length === 2 ? new u.LineCurve3(t[0], t[1]) : new x(t);
+  }
+  static formatGeometryUV(t, i, s) {
+    const o = t.getAttribute("uv");
+    for (let r = 0; r < o.count; r++) {
+      const n = o.getX(r) * i * s;
+      o.setX(r, n);
+    }
+    return t;
+  }
+  /**
+   * 管道的 Texture 需要满足一定的要求，需要使用 formatTexture 先 format
+   */
+  static formatTexture(t) {
+    return t.wrapS = u.RepeatWrapping, t.wrapT = u.RepeatWrapping, t;
+  }
+  hide(t) {
+    return l(this, null, function* () {
+      var o;
+      (o = this.opacityAnime) == null || o.dispose();
+      const i = 0;
+      if (typeof (t == null ? void 0 : t.duration) != "number")
+        return this.setOpacity(i);
+      const s = this.material.uniforms.opacity.value;
+      return s === i ? !0 : new Promise((r) => {
+        this.opacityAnime = new g({ progress: s }).to({ progress: i }).onUpdate(({ progress: n }) => this.setOpacity(n)).onComplete(() => r(!0)).onDispose(() => {
+          this.setOpacity(i), r(!1);
+        }).play();
+      });
+    });
+  }
+  show(t) {
+    return l(this, null, function* () {
+      var o;
+      (o = this.opacityAnime) == null || o.dispose();
+      const i = 1;
+      if (typeof (t == null ? void 0 : t.duration) != "number")
+        return this.setOpacity(i);
+      const s = this.material.uniforms.opacity.value;
+      return new Promise((r) => {
+        this.opacityAnime = new g({ progress: s }).to({ progress: i }).onUpdate(({ progress: n }) => this.setOpacity(n)).onComplete(() => r(!0)).onDispose(() => {
+          this.setOpacity(i), r(!1);
+        }).play();
+      });
+    });
+  }
+  setOpacity(t) {
+    return this.material.uniforms.opacity.value = t, this.material.needsUpdate = !0, this.needsRender = !0, !0;
+  }
+  disposeAnime() {
+    var t;
+    (t = this.opacityAnime) == null || t.dispose(), this.opacityAnime = void 0;
+  }
+  dispose() {
+    this.disposeAnime(), this.geometry.dispose(), this.material.dispose();
+  }
+}
+export {
+  h as ObjectPipe
+};

package/libs/PipelinePlugin/utils/formatData.d.ts

@@ -0,0 +1,12 @@
+import type { PluginData, ServerData, LoadOptions } from '../typing';
+/** 从 PluginData 中找到符合「从 ID 为 startLibraryID 的设备到 ID 为 endLibraryID 的设备」的 pipe data */
+export declare function getPipesFromLibrary(params: {
+    data: PluginData.RootObject;
+    target: {
+        startLibraryID: number;
+        endLibraryID: number;
+    }[];
+}): PluginData.Pipe[];
+/** 获取默认的管道贴图 */
+export declare function getDefaultPipeUrl<T extends PluginData.Water>(water: T): string | undefined;
+export declare function format(origin: ServerData.RootObject, options?: Partial<LoadOptions>): PluginData.RootObject;

package/libs/PipelinePlugin/utils/formatData.js

@@ -0,0 +1,46 @@
+import { notNil as c } from "../../shared-utils/isNil.js";
+function l(e) {
+  const t = /* @__PURE__ */ new Map();
+  return e.forEach((a) => a.pipes.forEach((s) => t.set(s.id, s))), Array.from(t.values());
+}
+function v(e) {
+  const t = e.target.map(({ startLibraryID: a, endLibraryID: s }) => {
+    const r = e.data.pipelines.find(
+      (n) => n.startLibraryID === a && n.endLibraryID === s
+    );
+    return r || console.warn(`Cannot find pipeline with startLibraryID ${a} and endLibraryID ${s}`), r;
+  }).filter(c);
+  return l(t);
+}
+function g(e) {
+  if (e.quality === 0)
+    return "//vrlab-static.ljcdn.com/release/web/aqueous-system-demo/19/1.png";
+  if (e.quality === 1)
+    return "//vrlab-static.ljcdn.com/release/web/aqueous-system-demo/19/2.png";
+  if (e.quality === 2)
+    return "//vrlab-static.ljcdn.com/release/web/aqueous-system-demo/19/3.png";
+  if (e.quality === 3)
+    return "//vrlab-static.ljcdn.com/release/web/aqueous-system-demo/19/4.png";
+  if (e.quality === 4)
+    return "//vrlab-static.ljcdn.com/release/web/aqueous-system-demo/19/5.png";
+  if (e.isHot)
+    return "//vrlab-static.ljcdn.com/release/web/aqueous-system-demo/19/6.png";
+}
+function w(e, t) {
+  const a = e.ConnectsDataset.map((r) => {
+    const n = r.data, d = r.start, o = r.end, u = { isHot: r.waterType === 5, quality: r.waterType }, m = n.map((f) => {
+      const i = e.LinesDataset.find((q) => q.id === f);
+      if (!i)
+        return null;
+      const p = i.data, y = t != null && t.getPipeRadius ? t.getPipeRadius(i) : 1.6 / 100, b = t != null && t.getPipeUrl ? t.getPipeUrl(u) : g(u);
+      return { id: i.id, radius: y, water: u, path: p, texture: b };
+    }).filter(c);
+    return { startLibraryID: d, endLibraryID: o, pipes: m };
+  });
+  return { pipes: l(a), pipelines: a };
+}
+export {
+  w as format,
+  g as getDefaultPipeUrl,
+  v as getPipesFromLibrary
+};

package/libs/base/BasePlugin.js

@@ -14,7 +14,7 @@ let b = class {
     /**
      * @realsee/dnalogel 版本号
      */
-    i(this, "VERSION", "2.25.0");
+    i(this, "VERSION", "2.26.1");
     i(this, "five");
     /**
      * 插件事件钩子

package/libs/base/BasePluginWithData.d.ts

@@ -7,20 +7,7 @@ interface EventMap<PluginState, PluginData> extends BasePlugin.EventMap<PluginSt
     /** 数据加载完成 */
     dataLoaded: (data: PluginData) => void;
 }
-/**
- * 插件的基础数据
- */
-interface ServerData {
-    /**
-     * 数据版本
-     */
-    version: number;
-    /**
-     * 数据
-     */
-    data?: unknown;
-}
-declare abstract class Controller<PluginState extends State, PluginEventMap extends EventMap<PluginState, PluginData>, PluginServerData extends ServerData, PluginData> extends BasePlugin.Controller<PluginState, PluginEventMap> {
+declare abstract class Controller<PluginState extends State, PluginEventMap extends EventMap<PluginState, PluginData>, PluginServerData, PluginData> extends BasePlugin.Controller<PluginState, PluginEventMap> {
     protected abstract data?: PluginData;
     /**
      * 加载插件依赖数据
@@ -31,5 +18,6 @@ declare abstract class Controller<PluginState extends State, PluginEventMap exte
     /** 把原始数据转化为插件数据 */
     protected abstract formatData?(serverData: PluginServerData): Promise<PluginData>;
 }
-export type { State, EventMap, ServerData, Config };
+export type { State, EventMap, Config };
+export type { BaseOptions } from './BasePlugin';
 export { Controller };