@c4h/chuci 0.2.2 → 0.2.4

package/dist/chuci.js

@@ -21129,7 +21129,7 @@ class a_ extends os {
         ${this.modelUrl ? `
         ${this.isLoading ? '<div class="loading">Loading...</div>' : ""}
         ${!this.isLoading && this.debugMode ? `
-          <div class="debug-info" style="z-index: 1005;">
+          <div class="debug-info" style="z-index: calc(var(--cc-viewer-z-index-each, 1000) + 5);">
             Camera Position: ${this.getCameraDebugInfo()}<br>
             Camera Target: ${this.getTargetDebugInfo()}<br>
             Controls: Rotate (drag), Zoom (scroll), Pan (right-drag)
@@ -21200,7 +21200,7 @@ class a_ extends os {
         font-size: 12px;
         border-radius: 4px;
         pointer-events: none;
-        z-index: 1010;
+        z-index: calc(var(--cc-viewer-z-index-each, 1000) + 10);
       }
       
       .texture-toggle {
@@ -21214,7 +21214,7 @@ class a_ extends os {
         cursor: pointer;
         border-radius: 4px;
         transition: background 0.3s;
-        z-index: 1010;
+        z-index: calc(var(--cc-viewer-z-index-each, 1000) + 10);
         pointer-events: auto;
       }
       
@@ -21278,12 +21278,14 @@ class a_ extends os {
       const i = this.container.clientWidth || this.container.offsetWidth, n = this.container.clientHeight || this.container.offsetHeight;
       this.camera = new ri(75, i / n, 0.1, 1e3), this.renderer = new LA({ antialias: !0, alpha: !0 }), this.renderer.setSize(i, n), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.shadowMap.enabled = !0;
       const r = this.renderer.domElement;
-      r.style.position = "fixed", r.style.left = `${t.left}px`, r.style.top = `${t.top}px`, r.style.width = `${t.width}px`, r.style.height = `${t.height}px`, r.style.pointerEvents = "auto", r.style.zIndex = "calc(var(--cc-viewer-z-index-each, 1000) + 1)", document.body.appendChild(r), this.externalCanvas = r, this.controls = new ZA(this.camera, r), this.controls.enableDamping = !0, this.controls.dampingFactor = 0.05;
-      const a = new jp(4210752, 2), o = new Kp(16777215, 1);
-      o.position.set(1, 1, 1), this.scene.add(a, o), await this.loadModel(), this.resizeObserver = new ResizeObserver((c) => {
-        for (const l of c) {
-          const { width: d, height: h } = l.contentRect;
-          d > 0 && h > 0 && this.handleResize();
+      r.style.position = "fixed", r.style.left = `${t.left}px`, r.style.top = `${t.top}px`, r.style.width = `${t.width}px`, r.style.height = `${t.height}px`, r.style.pointerEvents = "auto";
+      const o = window.getComputedStyle(this).getPropertyValue("--cc-viewer-z-index-each").trim(), c = o ? parseInt(o, 10) : 1e3;
+      r.style.zIndex = `${c + 1}`, document.body.appendChild(r), this.externalCanvas = r, this.controls = new ZA(this.camera, r), this.controls.enableDamping = !0, this.controls.dampingFactor = 0.05;
+      const l = new jp(4210752, 2), d = new Kp(16777215, 1);
+      d.position.set(1, 1, 1), this.scene.add(l, d), await this.loadModel(), this.resizeObserver = new ResizeObserver((h) => {
+        for (const u of h) {
+          const { width: p, height: g } = u.contentRect;
+          p > 0 && g > 0 && this.handleResize();
         }
       }), this.resizeObserver.observe(this.container), this.animateLoop();
     } catch (i) {
@@ -21392,7 +21394,7 @@ class o_ extends os {
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.9);
-        z-index: 1000;
+        z-index: var(--cc-viewer-z-index-each, 1000);
       }
       
       .viewer {
@@ -21459,7 +21461,7 @@ class o_ extends os {
         pointer-events: none;
         white-space: pre-line;
         min-width: 200px;
-        z-index: 1003;
+        z-index: calc(var(--cc-viewer-z-index-each, 1000) + 3);
       }
       
       ${this.getNavigationStyles()}
@@ -21541,7 +21543,12 @@ ${this.getTargetDebugInfo()}
     if (!i) return;
     const n = i.getBoundingClientRect();
     let r = document.getElementById(t);
-    r || (r = document.createElement("canvas"), r.id = t, r.style.position = "fixed", r.style.top = `${n.top}px`, r.style.left = `${n.left}px`, r.style.width = `${n.width}px`, r.style.height = `${n.height}px`, r.style.zIndex = "calc(var(--cc-viewer-z-index-each, 1000) + 1)", r.style.pointerEvents = "auto", r.style.display = "block", r.style.background = "transparent", document.body.appendChild(r)), r.style.top = `${n.top}px`, r.style.left = `${n.left}px`, r.style.width = `${n.width}px`, r.style.height = `${n.height}px`, this.canvas = r;
+    if (!r) {
+      r = document.createElement("canvas"), r.id = t, r.style.position = "fixed", r.style.top = `${n.top}px`, r.style.left = `${n.left}px`, r.style.width = `${n.width}px`, r.style.height = `${n.height}px`;
+      const o = window.getComputedStyle(this).getPropertyValue("--cc-viewer-z-index-each").trim(), c = o ? parseInt(o, 10) : 1e3;
+      r.style.zIndex = `${c + 1}`, r.style.pointerEvents = "auto", r.style.display = "block", r.style.background = "transparent", document.body.appendChild(r);
+    }
+    r.style.top = `${n.top}px`, r.style.left = `${n.left}px`, r.style.width = `${n.width}px`, r.style.height = `${n.height}px`, this.canvas = r;
     try {
       const a = this.query(".gaussian-container");
       if (!a) return;