@realsee/dnalogel 3.34.0 → 3.34.2

package/libs/ModelMakerPlugin/Controller.js

@@ -1,40 +1,40 @@
-var P = Object.defineProperty;
-var D = (l, n, e) => n in l ? P(l, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[n] = e;
-var r = (l, n, e) => (D(l, typeof n != "symbol" ? n + "" : n, e), e);
-var M = (l, n, e) => new Promise((s, t) => {
-  var m = (i) => {
+var I = Object.defineProperty;
+var P = (l, n, e) => n in l ? I(l, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[n] = e;
+var r = (l, n, e) => (P(l, typeof n != "symbol" ? n + "" : n, e), e);
+var x = (l, n, e) => new Promise((i, d) => {
+  var t = (s) => {
     try {
-      a(e.next(i));
-    } catch (p) {
-      t(p);
+      o(e.next(s));
+    } catch (a) {
+      d(a);
     }
-  }, o = (i) => {
+  }, m = (s) => {
     try {
-      a(e.throw(i));
-    } catch (p) {
-      t(p);
+      o(e.throw(s));
+    } catch (a) {
+      d(a);
     }
-  }, a = (i) => i.done ? s(i.value) : Promise.resolve(i.value).then(m, o);
-  a((e = e.apply(l, n)).next());
+  }, o = (s) => s.done ? i(s.value) : Promise.resolve(s.value).then(t, m);
+  o((e = e.apply(l, n)).next());
 });
-import { Controller as A } from "../base/BasePluginWithData.js";
+import { Controller as D } from "../base/BasePluginWithData.js";
 import * as h from "three";
-import { ModelMakerBoxItem as C } from "./item/boxItem.js";
+import { ModelMakerBoxItem as A } from "./item/boxItem.js";
 import { PrismMesh as j } from "../Sculpt/Meshes/Prism.js";
-import { anyPositionToVector3 as I } from "../shared-utils/positionToVector3.js";
-import { PolygonWithEdgeMesh as T } from "../Sculpt/Meshes/PolygonWithEdge.js";
+import { anyPositionToVector3 as T } from "../shared-utils/positionToVector3.js";
+import { PolygonWithEdgeMesh as H } from "../Sculpt/Meshes/PolygonWithEdge.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 "animejs";
-import { notNil as x } from "../shared-utils/isNil.js";
-import { tagRendererMap as H } from "./utils/tagRenderer.js";
-import { ModelMakerPrismItem as F } from "./item/prismItem.js";
-import { ModelMakerPolygonItem as L } from "./item/polygonItem.js";
+import { notNil as V } from "../shared-utils/isNil.js";
+import { tagRendererMap as F } from "./utils/tagRenderer.js";
+import { ModelMakerPrismItem as L } from "./item/prismItem.js";
+import { ModelMakerPolygonItem as O } from "./item/polygonItem.js";
 import { boxVertex as c } from "../shared-utils/Object3DHelper/utils/boundingBox.js";
-import { getFiveDomEvent as O } from "./utils/getFiveDomEvent.js";
+import { getFiveDomEvent as z } from "./utils/getFiveDomEvent.js";
 import "../base/BasePlugin.js";
 import "../shared-utils/Subscribe.js";
 import "../shared-utils/url/absoluteUrl.js";
@@ -75,8 +75,8 @@ import "../shared-utils/tag.js";
 import "../shared-utils/five/vector3ToScreen.js";
 import "../shared-utils/five/FiveDomEvents.js";
 import "../shared-utils/five/calculateThreeMouse.js";
-class Se extends A {
-  constructor(e) {
+class Se extends D {
+  constructor(e, i) {
     super(e);
     r(this, "state");
     r(this, "items", []);
@@ -85,6 +85,7 @@ class Se extends A {
     r(this, "tagRendererMap", {});
     r(this, "fiveDomEvents");
     r(this, "zFightingOffset", 0);
+    r(this, "tagContainerZIndex");
     r(this, "handleEnable", () => {
       this.items.forEach((e) => e.enable());
     });
@@ -93,73 +94,84 @@ class Se extends A {
     });
     r(this, "updateTagRenderer", () => {
       this.items.forEach((e) => {
-        var t;
-        const s = (t = this.tagRendererMap[e.type]) != null ? t : H[e.type];
-        s && e.__renderer !== s && (e.__renderer = s, typeof e.__disposeRenderer == "function" && e.__disposeRenderer(), e.tag.container.innerHTML = "", e.__disposeRenderer = s(e.tag.container, e));
+        var d;
+        const i = (d = this.tagRendererMap[e.type]) != null ? d : F[e.type];
+        i && e.__renderer !== i && (e.__renderer = i, typeof e.__disposeRenderer == "function" && e.__disposeRenderer(), e.tag.container.innerHTML = "", e.__disposeRenderer = i(e.tag.container, e));
       });
     });
-    this.group.name = "ModelMakerPluginGroup", this.state = { enabled: !0, visible: !0 }, this.fiveDomEvents = O(e), e.scene.add(this.group), this.handleEnable(), window.__MODELMAKER_DEBUG__ = this;
+    this.group.name = "ModelMakerPluginGroup", this.state = { enabled: !0, visible: !0 }, this.fiveDomEvents = z(e), this.tagContainerZIndex = 1, e.scene.add(this.group), this.handleEnable(), window.__MODELMAKER_DEBUG__ = this;
   }
   load(e) {
-    return M(this, null, function* () {
-      var s;
-      this.clear(), this.data = e, (s = e == null ? void 0 : e.list) == null || s.forEach((t) => {
+    return x(this, null, function* () {
+      var d;
+      this.clear(), this.data = e;
+      const i = this.tagContainerZIndex;
+      (d = e == null ? void 0 : e.list) == null || d.forEach((t) => {
         var m;
         if (t.type === "triangles") {
-          const o = new T();
+          const o = new H();
           o.setPoints(t.object_data.points), o.setStyle({
             color: t.object_data.color,
             opacity: t.object_data.opacity,
             lineColor: t.object_data.color,
             occlusionVisibility: !1
           }), this.fiveDomEvents.addEventListener(o, "hover", () => o.highlight()), this.fiveDomEvents.addEventListener(o, "unHover", () => o.unhighlight());
-          const a = new L({
+          const s = new O({
             five: this.five,
             model: o,
             group: this.group,
             type: t.type,
-            rawData: t
+            rawData: t,
+            tagContainerZIndex: i
           });
-          this.items.push(a);
+          this.items.push(s);
         } else if (t.type === "prism") {
           const o = new j();
           this.zFightingOffset += 1e-4, o.setPoints({
-            points: t.object_data.points.map((i) => {
-              var p;
-              return [i[0], i[1] + ((p = t.object_data.fixedY) != null ? p : 0), i[2]];
+            points: t.object_data.points.map((a) => {
+              var b;
+              return [a[0], a[1] + ((b = t.object_data.fixedY) != null ? b : 0), a[2]];
             }),
-            heightPoint: I(t.object_data.points[0]).add(new h.Vector3().setY(t.object_data.height + ((m = t.object_data.fixedHeight) != null ? m : 0))).add(new h.Vector3().setY(this.zFightingOffset))
+            heightPoint: T(t.object_data.points[0]).add(new h.Vector3().setY(t.object_data.height + ((m = t.object_data.fixedHeight) != null ? m : 0))).add(new h.Vector3().setY(this.zFightingOffset))
           }), o.setStyle({
             color: t.object_data.color,
             opacity: t.object_data.opacity,
             lineColor: t.object_data.color,
             occlusionVisibility: !1
           });
-          const a = new F({
+          const s = new L({
             five: this.five,
             model: o,
             group: this.group,
             type: t.type,
-            rawData: t
+            rawData: t,
+            tagContainerZIndex: i
           });
-          this.items.push(a);
+          this.items.push(s);
         } else if (t.type === "box") {
-          const o = new j(), { start: a, end: i, rotation: p = [0, 0, 0, 0], opacity: V, color: b } = t.object_data, f = new h.Vector3().fromArray(a), u = new h.Vector3().fromArray(i), R = new h.Euler().fromArray(p), g = new h.Quaternion().setFromEuler(R), y = g.clone().inverse(), _ = new h.Vector3().lerpVectors(f, u, 0.5), w = _.clone().negate(), v = f.clone().add(w).applyQuaternion(y), E = u.clone().add(w).applyQuaternion(y), d = new h.Box3(v.clone().max(E), v.clone().min(E));
+          const o = new j(), { start: s, end: a, rotation: b = [0, 0, 0, 0], opacity: R, color: f } = t.object_data, g = new h.Vector3().fromArray(s), u = new h.Vector3().fromArray(a), k = new h.Euler().fromArray(b), y = new h.Quaternion().setFromEuler(k), _ = y.clone().inverse(), w = new h.Vector3().lerpVectors(g, u, 0.5), v = w.clone().negate(), E = g.clone().add(v).applyQuaternion(_), M = u.clone().add(v).applyQuaternion(_), p = new h.Box3(E.clone().max(M), E.clone().min(M));
           o.setPoints({
-            points: [c(d, 2), c(d, 3), c(d, 7), c(d, 6)],
-            heightPoint: c(d, 0)
-          }), o.position.copy(_), o.quaternion.copy(g), o.setStyle({ color: b, opacity: V, lineColor: b, occlusionVisibility: !1 });
-          const k = new C({ five: this.five, model: o, group: this.group, type: t.type, rawData: t });
-          this.items.push(k);
+            points: [c(p, 2), c(p, 3), c(p, 7), c(p, 6)],
+            heightPoint: c(p, 0)
+          }), o.position.copy(w), o.quaternion.copy(y), o.setStyle({ color: f, opacity: R, lineColor: f, occlusionVisibility: !1 });
+          const C = new A({
+            five: this.five,
+            model: o,
+            group: this.group,
+            type: t.type,
+            rawData: t,
+            tagContainerZIndex: i
+          });
+          this.items.push(C);
         }
       }), this.five.needsRender = !0, this.state.enabled ? this.handleEnable() : this.handleDisable(), this.state.visible ? this.handleShow() : this.handleHide(), this.updateTagRenderer(), this.hooks.emit("dataLoaded", e);
     });
   }
   setState(e) {
-    x(e.enabled) && this.state.enabled !== e.enabled && (this.state.enabled = e.enabled, e.enabled ? this.handleEnable() : this.handleDisable(), this.hooks.emit(e.enabled ? "enable" : "disable", { userAction: "我不知道捏" }), this.hooks.emit("stateChange", { state: this.state, userAction: "我不知道捏" })), x(e.visible) && this.state.visible !== e.visible && (this.state.visible = e.visible, e.visible ? this.handleShow() : this.handleHide(), this.hooks.emit(e.visible ? "show" : "hide", { userAction: "我不知道捏" }), this.hooks.emit("stateChange", { state: this.state, userAction: "我不知道捏" }));
+    V(e.enabled) && this.state.enabled !== e.enabled && (this.state.enabled = e.enabled, e.enabled ? this.handleEnable() : this.handleDisable(), this.hooks.emit(e.enabled ? "enable" : "disable", { userAction: "我不知道捏" }), this.hooks.emit("stateChange", { state: this.state, userAction: "我不知道捏" })), V(e.visible) && this.state.visible !== e.visible && (this.state.visible = e.visible, e.visible ? this.handleShow() : this.handleHide(), this.hooks.emit(e.visible ? "show" : "hide", { userAction: "我不知道捏" }), this.hooks.emit("stateChange", { state: this.state, userAction: "我不知道捏" }));
   }
   getItemById(e) {
-    return this.items.find((s) => s.rawData.id === e);
+    return this.items.find((i) => i.rawData.id === e);
   }
   registerTagRenderer(e) {
     this.tagRendererMap = e, this.updateTagRenderer();

package/libs/ModelMakerPlugin/index.d.ts

@@ -1,6 +1,7 @@
-import type { Five } from '@realsee/five';
 import type * as ModelMakerPluginType from './typings';
 import { Controller } from './Controller';
-export declare const ModelMakerPlugin: (five: Five) => ModelMakerPluginType.ModelMakerController;
+export declare const ModelMakerPlugin: (five: import("@realsee/five").Five, config?: {
+    tagContainerZIndex?: number;
+}) => ModelMakerPluginType.ModelMakerController;
 export type { Controller as ModelMakerPluginInstance };
 export type { ModelMakerPluginType };

package/libs/ModelMakerPlugin/index.js

@@ -57,7 +57,7 @@ import "../vendor/svelte/internal/index.js";
 import "../components/AreaLabel/LabelItem.js";
 import "../components/AreaLabel/Assets/roomLabelBg.js";
 import "./item/prismItem.js";
-const lo = (o) => new r(o);
+const lo = (...o) => new r(...o);
 export {
   lo as ModelMakerPlugin
 };

package/libs/ModelMakerPlugin/item/baseItem.d.ts

@@ -32,6 +32,7 @@ export declare class ModelMakerBaseItem extends Subscribe<Event> {
         rawData?: any;
         visibleMode?: Mode[];
         position?: THREE.Vector3;
+        tagContainerZIndex?: number;
     });
     show(): void;
     hide(): void;

package/libs/ModelMakerPlugin/item/baseItem.js

@@ -1,20 +1,20 @@
-var d = Object.defineProperty;
-var l = (s, i, e) => i in s ? d(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
-var t = (s, i, e) => (l(s, typeof i != "symbol" ? i + "" : i, e), e);
-import * as m from "three";
-import { addIfNotExists as a } from "../../shared-utils/three/addIfNotExists.js";
-import { Subscribe as v } from "../../shared-utils/Subscribe.js";
-import { tag as f } from "../../shared-utils/tag.js";
-import { boundingBox as b } from "../../shared-utils/Object3DHelper/utils/boundingBox.js";
-import { getFiveDomEvent as c } from "../utils/getFiveDomEvent.js";
+var l = Object.defineProperty;
+var m = (s, i, e) => i in s ? l(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
+var t = (s, i, e) => (m(s, typeof i != "symbol" ? i + "" : i, e), e);
+import * as a from "three";
+import { addIfNotExists as v } from "../../shared-utils/three/addIfNotExists.js";
+import { Subscribe as f } from "../../shared-utils/Subscribe.js";
+import { tag as b } from "../../shared-utils/tag.js";
+import { boundingBox as c } from "../../shared-utils/Object3DHelper/utils/boundingBox.js";
+import { getFiveDomEvent as u } from "../utils/getFiveDomEvent.js";
 import "../../shared-utils/positionToVector3.js";
 import "../../shared-utils/five/vector3ToScreen.js";
 import "../../shared-utils/five/FiveDomEvents.js";
 import "../../shared-utils/three/getObjectVisible.js";
 import "../../shared-utils/five/calculateThreeMouse.js";
-class B extends v {
+class B extends f {
   constructor(e) {
-    var o, r, h;
+    var o, r, n, h;
     super();
     t(this, "type");
     t(this, "tag");
@@ -24,9 +24,9 @@ class B extends v {
     t(this, "group");
     t(this, "enabled", !1);
     t(this, "fiveDomEvents");
-    this.five = e.five, this.model = e.model, this.group = e.group, this.type = e.type, this.rawData = e.rawData, this.fiveDomEvents = c(this.five);
-    const n = (h = (r = (o = e.position) != null ? o : this.model.worldCenter) != null ? r : this.model.center) != null ? h : b(this.model).getCenter(new m.Vector3());
-    this.tag = f(this.five, n);
+    this.five = e.five, this.model = e.model, this.group = e.group, this.type = e.type, this.rawData = e.rawData, this.fiveDomEvents = u(this.five);
+    const d = (n = (r = (o = e.position) != null ? o : this.model.worldCenter) != null ? r : this.model.center) != null ? n : c(this.model).getCenter(new a.Vector3());
+    this.tag = b(this.five, d, { wrapperStyle: { zIndex: `${(h = e.tagContainerZIndex) != null ? h : ""}` } });
   }
   get container() {
     return this.tag.container;
@@ -46,7 +46,7 @@ class B extends v {
   enable() {
     if (this.enabled)
       return;
-    this.enabled = !0, a(this.group, this.model), this.five.needsRender = !0, this.tag.enable();
+    this.enabled = !0, v(this.group, this.model), this.five.needsRender = !0, this.tag.enable();
     const e = this.onClick.bind(this);
     this.fiveDomEvents.addEventListener(this.model, "click", e), this.emit("enable");
   }

package/libs/base/BasePlugin.js

@@ -15,7 +15,7 @@ let C = class {
     /**
      * @realsee/dnalogel 版本号
      */
-    i(this, "VERSION", "3.34.0");
+    i(this, "VERSION", "3.34.2");
     i(this, "five");
     /**
      * @description: 插件事件钩子

package/libs/shared-utils/logger.js

@@ -1,6 +1,6 @@
 function A() {
   console.debug(
-    "%c %c@realsee/dnalogel %cv3.34.0",
+    "%c %c@realsee/dnalogel %cv3.34.2",
     [
       "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/libs/shared-utils/tag.d.ts

@@ -8,7 +8,10 @@ export declare class LightTag {
     private position;
     private wrapper;
     private disposer;
-    constructor(five: Five, position: AnyPosition);
+    private wrapperStyle;
+    constructor(five: Five, position: AnyPosition, config?: {
+        wrapperStyle?: Partial<CSSStyleDeclaration>;
+    });
     show(): void;
     hide(params?: {
         withAnimation?: boolean;
@@ -18,4 +21,6 @@ export declare class LightTag {
     private onCameraUpdate;
     private onFiveEveryReady;
 }
-export declare function tag(five: Five, position: AnyPosition): LightTag;
+export declare function tag(five: Five, position: AnyPosition, config?: {
+    wrapperStyle?: Partial<CSSStyleDeclaration>;
+}): LightTag;

package/libs/shared-utils/tag.js

@@ -1,72 +1,76 @@
-var h = Object.defineProperty;
-var c = (o, t, e) => t in o ? h(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var n = (o, t, e) => (c(o, typeof t != "symbol" ? t + "" : t, e), e);
-import { anyPositionToVector3 as l } from "./positionToVector3.js";
+var l = Object.defineProperty;
+var c = (o, e, t) => e in o ? l(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var s = (o, e, t) => (c(o, typeof e != "symbol" ? e + "" : e, t), t);
+import { anyPositionToVector3 as p } from "./positionToVector3.js";
 import * as d from "three";
-import { vector3ToScreen as p } from "./five/vector3ToScreen.js";
-const r = "LightTagContainer_shgjakdhwakjdhsja";
+import { vector3ToScreen as y } from "./five/vector3ToScreen.js";
+const h = "LightTagContainer_shgjakdhwakjdhsja";
 class f {
-  constructor(t, e) {
-    n(this, "container");
-    n(this, "visible", !1);
-    n(this, "enabled", !1);
-    n(this, "five");
-    n(this, "position");
-    n(this, "wrapper");
-    n(this, "disposer");
-    n(this, "onCameraUpdate", () => {
+  constructor(e, t, n) {
+    s(this, "container");
+    s(this, "visible", !1);
+    s(this, "enabled", !1);
+    s(this, "five");
+    s(this, "position");
+    s(this, "wrapper");
+    s(this, "disposer");
+    s(this, "wrapperStyle", {});
+    s(this, "onCameraUpdate", () => {
       if (this.visible === !1)
         return;
-      const t = p(this.five.camera, this.position);
-      t ? (this.container.style.opacity = "1", this.container.style.pointerEvents = "auto", this.container.style.left = t.leftPercent + "%", this.container.style.top = t.topPercent + "%") : (this.container.style.opacity = "0", this.container.style.pointerEvents = "none");
+      const e = y(this.five.camera, this.position);
+      e ? (this.container.style.left = e.leftPercent + "%", this.container.style.top = e.topPercent + "%") : (this.container.style.left = "-100%", this.container.style.top = "-100%");
     });
-    n(this, "onFiveEveryReady", () => {
-      var t;
+    s(this, "onFiveEveryReady", () => {
+      var e;
       if (this.visible && this.five.state.mode !== "Panorama") {
-        const e = new d.Raycaster();
-        e.set(this.five.camera.position, this.position.clone().sub(this.five.camera.position));
-        const i = (t = this.five.model.intersectRaycaster(e)) == null ? void 0 : t[0];
-        (i == null ? void 0 : i.distance) > this.position.distanceTo(this.five.camera.position) ? (this.container.style.opacity = "1", this.container.style.pointerEvents = "auto") : (this.container.style.opacity = "0", this.container.style.pointerEvents = "none");
+        const t = new d.Raycaster();
+        t.set(this.five.camera.position, this.position.clone().sub(this.five.camera.position));
+        const n = (e = this.five.model.intersectRaycaster(t)) == null ? void 0 : e[0];
+        (n == null ? void 0 : n.distance) > this.position.distanceTo(this.five.camera.position) ? (this.container.style.opacity = "1", this.container.style.pointerEvents = "auto") : (this.container.style.opacity = "0", this.container.style.pointerEvents = "none");
       }
     });
-    this.five = t, this.position = l(e).clone(), this.container = (() => {
-      const i = document.createElement("div");
-      return i.style.width = "0", i.style.height = "0", i.style.position = "absolute", i;
-    })(), this.enable(), this.show();
+    var i;
+    this.five = e, this.position = p(t).clone(), this.container = (() => {
+      const a = document.createElement("div");
+      return a.style.width = "0", a.style.height = "0", a.style.position = "absolute", a;
+    })(), this.wrapperStyle = (i = n == null ? void 0 : n.wrapperStyle) != null ? i : {}, this.enable(), this.show();
   }
   show() {
-    this.visible = !0, this.container.style.opacity = "1", this.container.style.pointerEvents = "auto", this.container.classList.add("withAnimation"), this.onCameraUpdate();
+    this.visible = !0, this.container.style.opacity = "1", this.container.style.pointerEvents = "auto", this.container.style.transition = "opacity 0.2s linear", this.onCameraUpdate();
   }
-  hide(t) {
-    this.visible = !1, t != null && t.withAnimation ? this.container.classList.add("withAnimation") : this.container.classList.remove("withAnimation"), this.container.style.opacity = "0", this.container.style.pointerEvents = "none";
+  hide(e) {
+    this.visible = !1, e != null && e.withAnimation ? this.container.style.transition = "opacity 0.2s linear" : this.container.style.transition = "", this.container.style.opacity = "0", this.container.style.pointerEvents = "none";
   }
   enable() {
-    var i;
+    var n;
     if (this.enabled)
       return;
-    this.enabled = !0, this.wrapper = (i = document.getElementById(r)) != null ? i : (() => {
+    this.enabled = !0, this.wrapper = (n = document.getElementById(h)) != null ? n : (() => {
       var a;
-      const s = document.createElement("div");
-      return s.id = r, s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.width = "100%", s.style.height = "100%", s.style.pointerEvents = "none", (a = this.five.getElement()) == null || a.parentElement.appendChild(s), s;
+      const i = document.createElement("div");
+      return i.id = h, i.style.position = "absolute", i.style.top = "0", i.style.left = "0", i.style.width = "100%", i.style.height = "100%", i.style.pointerEvents = "none", Object.keys(this.wrapperStyle).forEach((r) => {
+        i.style[r] = this.wrapperStyle[r];
+      }), (a = this.five.getElement()) == null || a.parentElement.appendChild(i), i;
     })(), this.wrapper.appendChild(this.container);
-    let t = !1;
-    const e = () => {
-      t || (t = !0, this.five.ready().then(() => {
-        this.onFiveEveryReady(), t = !1;
+    let e = !1;
+    const t = () => {
+      e || (e = !0, this.five.ready().then(() => {
+        this.onFiveEveryReady(), e = !1;
       }));
     };
-    this.five.on("cameraUpdate", e), this.five.on("cameraUpdate", this.onCameraUpdate), this.disposer = () => {
-      this.five.off("cameraUpdate", e), this.five.off("cameraUpdate", this.onCameraUpdate);
+    this.five.on("cameraUpdate", t), this.five.on("cameraUpdate", this.onCameraUpdate), this.disposer = () => {
+      this.five.off("cameraUpdate", t), this.five.off("cameraUpdate", this.onCameraUpdate);
     };
   }
   disable() {
-    var t;
-    this.enabled && (this.enabled = !1, this.wrapper.removeChild(this.container), (t = this.disposer) == null || t.call(this));
+    var e;
+    this.enabled && (this.enabled = !1, this.wrapper.removeChild(this.container), (e = this.disposer) == null || e.call(this));
   }
 }
-function u(o, t) {
-  return new f(o, t);
+function w(o, e, t) {
+  return new f(o, e, t);
 }
 export {
-  u as tag
+  w as tag
 };

package/package.json

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