@realsee/dnalogel 3.13.0 → 3.14.1

package/libs/GuideLinePlugin/GuideLineModeItem/index.js

@@ -1,32 +1,32 @@
 var P = Object.defineProperty, V = Object.defineProperties;
 var T = Object.getOwnPropertyDescriptors;
 var k = Object.getOwnPropertySymbols;
-var F = Object.prototype.hasOwnProperty, U = Object.prototype.propertyIsEnumerable;
+var U = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
 var v = (h, e, t) => e in h ? P(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t, d = (h, e) => {
   for (var t in e || (e = {}))
-    F.call(e, t) && v(h, t, e[t]);
+    U.call(e, t) && v(h, t, e[t]);
   if (k)
     for (var t of k(e))
-      U.call(e, t) && v(h, t, e[t]);
+      x.call(e, t) && v(h, t, e[t]);
   return h;
 }, p = (h, e) => V(h, T(e));
 var i = (h, e, t) => (v(h, typeof e != "symbol" ? e + "" : e, t), t);
 import * as n from "three";
-import { logWarning as L, logError as x } from "../../shared-utils/log.js";
+import { logWarning as F, logError as L } from "../../shared-utils/log.js";
 import { createLineGeometry as S } from "../utils/createLineGeometry.js";
-import { isPanoramaLike as M, isModelLike as O } from "../../shared-utils/five/mode.js";
+import { isPanoramaLike as O, isModelLike as _ } from "../../shared-utils/five/mode.js";
 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 _, tweenProgress as A } from "../../shared-utils/animationFrame/BetterTween.js";
-import { loadTexture as E } from "../../shared-utils/three/loadTexture.js";
+import { BetterTween as M, tweenProgress as E } from "../../shared-utils/animationFrame/BetterTween.js";
+import { loadTexture as A } from "../../shared-utils/three/loadTexture.js";
 import w from "../../PanoTagPlugin/controller/index.js";
 import G from "../Components/Tag.js";
 import { filterAdjacentDistinct as B } from "../utils/index.js";
-import { objectAssignDeepExports as I } from "../../vendor/object-assign-deep/objectAssignDeep.js";
-const R = (
+import { objectAssignDeepExports as W } from "../../vendor/object-assign-deep/objectAssignDeep.js";
+const I = (
   /* glsl */
   `
   varying vec2 vUv;
@@ -36,7 +36,7 @@ const R = (
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
 `
-), W = (
+), R = (
   /* glsl */
   `
   // 是否使用颜色
@@ -57,6 +57,8 @@ const R = (
   uniform float borderWidth;
   // 背景透明度
   uniform float backgroundOpacity;
+  // @link https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
+  uniform int backgroundClip;
   // 整体透明度
   uniform float opacity;
   // 最大 U 值
@@ -106,7 +108,17 @@ const R = (
   }
 
   vec4 getBackground() {
-    return vec4(backgroundColor, backgroundOpacity);
+    // border-box
+    if (backgroundClip == 0) {
+      return vec4(backgroundColor, backgroundOpacity);
+    } else {
+    // padding-box
+      float u = vUv.x;
+      if (u > borderWidth && u < 1.0 - borderWidth) {
+        return vec4(backgroundColor, backgroundOpacity);
+      }
+      return vec4(0.0, 0.0, 0.0, 0.0);
+    }
   }
 
   void main() {
@@ -116,7 +128,7 @@ const R = (
     // 设置背景颜色
     gl_FragColor = background;
     // 混合颜色和背景
-    gl_FragColor = mix(gl_FragColor, image, image.a);
+    gl_FragColor = mix(background, vec4(image.rgb, image.a * 0.4 + 0.6), image.a); //  image.a * 0.4 + 0.6 先这么写，但是不是最优解
     // 混合边框
     gl_FragColor = mix(gl_FragColor, border, border.a);
     // 设置整体透明度
@@ -161,8 +173,8 @@ class N {
     i(this, "plugin");
     i(this, "textureHasLoaded", !1);
     i(this, "disposed", !1);
-    i(this, "flowAnime", new _({ progress: 0 }).to({ progress: 1 }).duration(1500).repeat(1 / 0));
-    i(this, "flickerAnime", A(300).yoyo(!0).repeat(5));
+    i(this, "flowAnime", new M({ progress: 0 }).to({ progress: 1 }).duration(1500).repeat(1 / 0));
+    i(this, "flickerAnime", E(300).yoyo(!0).repeat(5));
     /** 缓存 panoGroup 中每个点距离起点的长度 */
     i(this, "cacheLengths", []);
     /** 为了让多条路线在高度上错开，每个路线都需要有个额外的 offset */
@@ -181,7 +193,7 @@ class N {
     });
     /** 模型状态变更 */
     i(this, "onFiveModeChange", (e) => {
-      this.modeVisible = this.mode === "panorama" ? M(e) : O(e), this.updateVisible();
+      this.modeVisible = this.mode === "panorama" ? O(e) : _(e), this.updateVisible();
     });
     i(this, "onFiveModelShownFloorChange", (e) => {
       this.floorVisible = e === null || this.visibleFloorIndexes === null || this.visibleFloorIndexes.includes(e), this.updateVisible();
@@ -196,21 +208,21 @@ class N {
       this.mesh.material.uniforms.vOffset.value = t, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
     });
     i(this, "onFlickerAnimeUpdate", (e) => {
-      var r, o, a, l;
+      var r, a, o, l;
       const { progress: t } = e, s = 1 - t;
-      this.mesh.material.uniforms.flicker.value = s, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0, this.startTagContainer.tag && b(this.startTagContainer.tag) && ((a = this.startTagContainer.app) == null || a.$set(p(d({}, this.startTagContainer.tag.data), {
+      this.mesh.material.uniforms.flicker.value = s, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0, this.startTagContainer.tag && b(this.startTagContainer.tag) && ((o = this.startTagContainer.app) == null || o.$set(p(d({}, this.startTagContainer.tag.data), {
         opacity: s,
         name: this.name,
-        distance: Math.round((o = (r = this.curvePath) == null ? void 0 : r.getLength()) != null ? o : 0)
+        distance: Math.round((a = (r = this.curvePath) == null ? void 0 : r.getLength()) != null ? a : 0)
       }))), this.endTagContainer.tag && b(this.endTagContainer.tag) && ((l = this.endTagContainer.app) == null || l.$set(p(d({}, this.endTagContainer.tag.data), { opacity: s })));
     });
-    i(this, "logWarning", (e) => L("GuideLineModeItem: ", e));
-    i(this, "logError", (e) => x("GuideLineModeItem: ", e));
-    var o, a;
+    i(this, "logWarning", (e) => F("GuideLineModeItem: ", e));
+    i(this, "logError", (e) => L("GuideLineModeItem: ", e));
+    var a, o;
     this.five = e, this.mode = t.mode, this.plugin = t.plugin, this.parent = t.parent, this.startTagContainer = { tag: null, plugin: new w(this.five) }, this.endTagContainer = { tag: null, plugin: new w(this.five) };
     const s = new n.BufferGeometry(), r = new n.ShaderMaterial({
-      vertexShader: R,
-      fragmentShader: W,
+      vertexShader: I,
+      fragmentShader: R,
       transparent: !0,
       uniforms: {
         map: { value: null },
@@ -221,6 +233,7 @@ class N {
         backgroundOpacity: { value: 0 },
         borderColor: { value: new n.Color() },
         borderOpacity: { value: 0 },
+        backgroundClip: { value: 0 },
         borderWidth: { value: 0.05 },
         opacity: { value: 1 },
         flicker: { value: 1 },
@@ -228,7 +241,7 @@ class N {
         vOffset: { value: 0 }
       }
     });
-    this.mesh = new n.Mesh(s, r), this.mesh.name = "GuideLineModeItem", this.mode === "panorama" && (this.parent.hooks.on("walkStart", this.onWalkAnimationStart), this.parent.hooks.on("walkEnded", this.onWalkAnimationEnd)), this.updateVisible(), this.onFiveModeChange(this.five.getCurrentState().mode), this.onFiveModelShownFloorChange((a = (o = this.five.model) == null ? void 0 : o.shownFloor) != null ? a : null), this.flowAnime.onUpdate(this.onFlowAnimeUpdate), this.flickerAnime.onUpdate(this.onFlickerAnimeUpdate), this.parent.hooks.on("show", this.updateVisible), this.parent.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("show", this.updateVisible), this.plugin.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("enable", this.updateVisible), this.plugin.hooks.on("disable", this.updateVisible), this.plugin.hooks.on("dispose", this.dispose), this.five.on("modeChange", this.onFiveModeChange), this.five.on("modelShownFloorChange", this.onFiveModelShownFloorChange);
+    this.mesh = new n.Mesh(s, r), this.mesh.name = "GuideLineModeItem", this.mode === "panorama" && (this.parent.hooks.on("walkStart", this.onWalkAnimationStart), this.parent.hooks.on("walkEnded", this.onWalkAnimationEnd)), this.updateVisible(), this.onFiveModeChange(this.five.getCurrentState().mode), this.onFiveModelShownFloorChange((o = (a = this.five.model) == null ? void 0 : a.shownFloor) != null ? o : null), this.flowAnime.onUpdate(this.onFlowAnimeUpdate), this.flickerAnime.onUpdate(this.onFlickerAnimeUpdate), this.parent.hooks.on("show", this.updateVisible), this.parent.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("show", this.updateVisible), this.plugin.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("enable", this.updateVisible), this.plugin.hooks.on("disable", this.updateVisible), this.plugin.hooks.on("dispose", this.dispose), this.five.on("modeChange", this.onFiveModeChange), this.five.on("modelShownFloorChange", this.onFiveModelShownFloorChange);
   }
   get panoGroup() {
     return this._panoGroup;
@@ -277,8 +290,8 @@ class N {
       return this.logError("setPathByPanoGroup: work is not ready");
     const s = B(e);
     if (this._panoGroup = s, (t == null ? void 0 : t.skipPanoGroup) !== void 0) {
-      const o = t.skipPanoGroup ? s.map((a) => this.plugin.workUtils.getObserverStandingPosition(a)) : null;
-      this.skippedPositions = o;
+      const a = t.skipPanoGroup ? s.map((o) => this.plugin.workUtils.getObserverStandingPosition(o)) : null;
+      this.skippedPositions = a;
     }
     const r = this.getPathFromPanoGroup(s, this.five.work, t);
     this.path = r, this.setGeometryByPath(r, t);
@@ -288,15 +301,15 @@ class N {
     var c, y, C;
     if (this.disposed)
       return this.logError("disposed");
-    const s = (c = t == null ? void 0 : t.scale) != null ? c : this.scale, r = (y = t == null ? void 0 : t.width) != null ? y : this.width, o = (C = t == null ? void 0 : t.unit_length) != null ? C : this.unitLength;
-    this.scale = s, this.width = r, this.unitLength = o;
-    const { geometry: a, maxU: l, curvePath: u, curvePoints: g } = S({
+    const s = (c = t == null ? void 0 : t.scale) != null ? c : this.scale, r = (y = t == null ? void 0 : t.width) != null ? y : this.width, a = (C = t == null ? void 0 : t.unit_length) != null ? C : this.unitLength;
+    this.scale = s, this.width = r, this.unitLength = a;
+    const { geometry: o, maxU: l, curvePath: u, curvePoints: g } = S({
       path: e,
       width: r * s,
-      unitLength: o * s,
+      unitLength: a * s,
       skipPositions: this.skippedPositions
     });
-    this._curvePath = u, this._curvePoints = g, this.mesh.geometry = a, this.mesh.material.needsUpdate = !0, this.mesh.material.uniforms.maxU.value = l, this.five.needsRender = !0;
+    this._curvePath = u, this._curvePoints = g, this.mesh.geometry = o, this.mesh.material.needsUpdate = !0, this.mesh.material.uniforms.maxU.value = l, this.five.needsRender = !0;
     const m = e, f = d(d({}, this.geometryStyle), t);
     this.path = m, this.geometryStyle = f;
   }
@@ -305,24 +318,24 @@ class N {
     var s;
     if (this.disposed)
       return this.logError("disposed");
-    (e == null ? void 0 : e.visible) !== void 0 && this.setDefaultVisible(e.visible), (e == null ? void 0 : e.color) !== void 0 && this.setColor(e.color), (e == null ? void 0 : e.opacity) !== void 0 && this.setOpacity(e.opacity), ((s = e == null ? void 0 : e.texture) == null ? void 0 : s.url) !== void 0 && this.setTextureUrl(e.texture.url), (e == null ? void 0 : e.background_color) !== void 0 && this.setBackgroundColor(e.background_color), (e == null ? void 0 : e.background_opacity) !== void 0 && this.setBackgroundOpacity(e.background_opacity), (e == null ? void 0 : e.border_color) !== void 0 && this.setBorderColor(e.border_color), (e == null ? void 0 : e.border_opacity) !== void 0 && this.setBorderOpacity(e.border_opacity), (e == null ? void 0 : e.border_width) !== void 0 && this.setBorderWidth(e.border_width);
+    (e == null ? void 0 : e.visible) !== void 0 && this.setDefaultVisible(e.visible), (e == null ? void 0 : e.color) !== void 0 && this.setColor(e.color), (e == null ? void 0 : e.opacity) !== void 0 && this.setOpacity(e.opacity), ((s = e == null ? void 0 : e.texture) == null ? void 0 : s.url) !== void 0 && this.setTextureUrl(e.texture.url), (e == null ? void 0 : e.background_color) !== void 0 && this.setBackgroundColor(e.background_color), (e == null ? void 0 : e.background_opacity) !== void 0 && this.setBackgroundOpacity(e.background_opacity), (e == null ? void 0 : e.border_color) !== void 0 && this.setBorderColor(e.border_color), (e == null ? void 0 : e.border_opacity) !== void 0 && this.setBorderOpacity(e.border_opacity), (e == null ? void 0 : e.border_width) !== void 0 && this.setBorderWidth(e.border_width), (e == null ? void 0 : e.background_clip) !== void 0 && this.setBackgroundClip(e.background_clip);
     const t = d(d({}, this.materialStyle), e);
     this.materialStyle = t;
   }
   /** 设置模型状态 */
   setMeshStyle(e) {
     if (e != null && e.translate) {
-      const r = new n.Vector3(), o = new n.Vector3().fromArray(e.translate);
-      o.y += this.heightOffset, r.add(o), this.mesh.position.copy(r), s(this.startTagContainer, o), s(this.endTagContainer, o);
+      const r = new n.Vector3(), a = new n.Vector3().fromArray(e.translate);
+      a.y += this.heightOffset, r.add(a), this.mesh.position.copy(r), s(this.startTagContainer, a), s(this.endTagContainer, a);
     }
     const t = d(d({}, this.meshStyle), e);
     this.meshStyle = t;
-    function s(r, o) {
+    function s(r, a) {
       if (!r.tag)
         return;
-      const a = new n.Vector3().fromArray(r.tag.position);
-      a.add(o);
-      const l = a.toArray();
+      const o = new n.Vector3().fromArray(r.tag.position);
+      o.add(a);
+      const l = o.toArray();
       r.plugin.changeTagById(r.tag.id, { position: l });
     }
   }
@@ -349,6 +362,11 @@ class N {
       return this.logError("disposed");
     this.mesh.material.uniforms.borderOpacity.value = e, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
+  setBackgroundClip(e) {
+    if (this.disposed)
+      return this.logError("disposed");
+    this.mesh.material.uniforms.backgroundClip.value = e === "border-box" ? 0 : 1, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+  }
   /**
    * @description: 设置边框宽度
    */
@@ -385,7 +403,7 @@ class N {
   setTextureUrl(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.textureUrl = e, E(e).then((t) => {
+    this.textureUrl = e, A(e).then((t) => {
       this.disposed || this.textureUrl === e && (t.wrapT = n.RepeatWrapping, this.textureHasLoaded = !0, this.mesh.material.uniforms.map.value = t, this.mesh.material.uniformsNeedUpdate = !0, this.mesh.material.needsUpdate = !0, this.five.needsRender = !0, this.updateVisible());
     });
   }
@@ -420,36 +438,36 @@ class N {
     var u;
     if (!this.curvePoints || !this.curvePath)
       return [];
-    const e = this.curvePoints.length, t = this.curvePath.getLength(), s = e - 1, r = t / s, o = (u = this.curvePath.getLengths(s)) != null ? u : [], a = [];
+    const e = this.curvePoints.length, t = this.curvePath.getLength(), s = e - 1, r = t / s, a = (u = this.curvePath.getLengths(s)) != null ? u : [], o = [];
     let l = 0;
     for (let g = 0; g < e; g++) {
       const m = this.curvePoints[g], f = this.plugin.workUtils.getObserverStandingPosition(l);
       if (!f)
         break;
-      f.clone().setY(0).distanceTo(m.clone().setY(0)) < r && (a.push(o[g]), l += 1);
+      f.clone().setY(0).distanceTo(m.clone().setY(0)) < r && (o.push(a[g]), l += 1);
     }
-    return a;
+    return o;
   }
   setTag(e, t) {
     const s = this.curvePath, r = e === "start" ? this.startTagContainer : this.endTagContainer;
     if (!(t != null && t.data))
       return r.plugin.clearTags();
-    const a = I({}, {
+    const o = W({}, {
       contentType: "Custom",
       stickType: "2DPoint",
       config: { visibleConfig: { visibleFiveMode: ["Floorplan", "Mapview"], followModelVisibility: !1 } },
       style: { point: { enabled: !1 } },
       data: {}
     }, t);
-    r.tag = a, b(a) && (r.tag.element = (u) => {
+    r.tag = o, b(o) && (r.tag.element = (u) => {
       var f, c;
       (f = r.app) == null || f.$destroy();
-      const g = e === "start" ? p(d({}, a.data), { name: this.name, distance: Math.round((c = s.getLength()) != null ? c : 0), i18n: this.plugin.config.i18n }) : a.data, m = new G({ target: u, intro: !0, props: g });
+      const g = e === "start" ? p(d({}, o.data), { name: this.name, distance: Math.round((c = s.getLength()) != null ? c : 0), i18n: this.plugin.config.i18n }) : o.data, m = new G({ target: u, intro: !0, props: g });
       return r.app = m, () => m.$destroy();
     }), r.plugin.load({ tagList: [r.tag] });
     const l = this.meshStyle.translate;
-    if (l && a.position) {
-      const u = new n.Vector3().fromArray(a.position), g = new n.Vector3().fromArray(l);
+    if (l && o.position) {
+      const u = new n.Vector3().fromArray(o.position), g = new n.Vector3().fromArray(l);
       u.add(g), u.y += this.heightOffset;
       const m = u.toArray();
       r.plugin.changeTagById(r.tag.id, { position: m });
@@ -465,7 +483,7 @@ class N {
   getPathFromPanoGroup(e, t, s) {
     if (e.length < 2)
       return [];
-    const r = e.map((o) => this.plugin.workUtils.getObserverStandingPosition(o).toArray());
+    const r = e.map((a) => this.plugin.workUtils.getObserverStandingPosition(a).toArray());
     return [d({ type: "CatmullRomCurve3", points: r }, s)];
   }
 }

package/libs/GuideLinePlugin/GuideLineModeItem.d.ts

@@ -93,6 +93,7 @@ declare class GuideLineModeItem {
     setBorderColor(color: string): void;
     /** 设置边框透明度 */
     setBorderOpacity(opacity: number): void;
+    setBackgroundClip(backgroundClip: PluginType.GuideLineMaterialStyle['background_clip']): void;
     /**
      * @description: 设置边框宽度
      */

package/libs/GuideLinePlugin/typing.d.ts

@@ -124,6 +124,14 @@ export interface GuideLineMaterialStyle {
     border_color?: string;
     /** 边框透明度 */
     border_opacity?: number;
+    /**
+     * @description: 背景裁剪
+     * @param border-box 背景在边框下方
+     * @param padding-box 背景不在边框下方
+     * @default border-box
+     * @link https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
+     */
+    background_clip?: 'border-box' | 'padding-box';
     /**
      * @description 边框宽度
      * @default 0.05

package/libs/base/BasePlugin.js

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

package/libs/shared-utils/logger.js

@@ -1,6 +1,6 @@
 function A() {
   console.debug(
-    "%c %c@realsee/dnalogel %cv3.13.0",
+    "%c %c@realsee/dnalogel %cv3.14.1",
     [
       "background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAMAAACHgmeRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABLFBMVEUAAAAapPoap/oaqvkbrfkbr/gZnfwZoPsaqfnD4v/E4/8Ylv0clPm93/+/4P/B4f8Yj/683/8Wif+33P8Uhv+x2f8ShP+s1v8Pgf+n0/8Nf/+h0f8Lff8Lff8Nf/9dl/+czv8KfP8KfP+Lxf+Uyv+Xy/+Hwv+Jw/+Mxf+Oxv+RyP8aovsapfoap/oZmfwZm/wZnvsYnPsYkf4YlP0NePsDYfgYcfi43f+63v8Xiv8Xjf4EWfwCV/sWZ/qz2v+02/8Vh/8WiP8EUf8CTf4WXv2u1/+v2P8Thf8Thv8ETf8CR/8VV/+o1f+q1f8Qgv8Rg/8DSv8BRf8UVP+j0v+k0v8OgP8Pgf8DR/8DQv9Nhf+dzv+fz/+Kv/+Vyv+Xy/+azf+Oxv+Qx/+SyP////8MUhLdAAAAK3RSTlMACEWQ2bd98uQECPXxqO7c+Pb49vj2+Pb49vj23Oul8fMHA+TwerXXjEIG2P+bHgAAAAFiS0dEY1y+LaoAAAB+SURBVAjXY2BgZGJmYWVgYGBgY9fW0eVg4ORi4NbTNzDk4eXjZxAwMjYxNTO3EGQQsrSytrG1sxdmEHFwdHJ2cXUTZRBz9/D08vbxFWeQ8PMPCAwKDpFkkAoNC4+IjIqWZpCRlZOPiY2LV2BQVGJQTkhMUlEFWaOmrqGpxQAAyg0S9Dq+VPYAAAAASUVORK5CYII=')",
       "background-repeat: no-repeat",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/dnalogel",
-  "version": "3.13.0",
+  "version": "3.14.1",
   "main": "./dist/index.js",
   "module": "./libs/index.js",
   "types": "./libs/index.d.ts",