@c4h/chuci 0.2.0 → 0.2.2

package/dist/chuci.js

@@ -3669,7 +3669,7 @@ class os extends zr {
         justify-content: center;
         cursor: pointer;
         transition: background 0.3s;
-        z-index: 1002;
+        z-index: calc(var(--cc-viewer-z-index-each, 1000) + 2);
         pointer-events: auto;
       }
       
@@ -21278,7 +21278,7 @@ 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 = "1001", document.body.appendChild(r), this.externalCanvas = r, this.controls = new ZA(this.camera, r), this.controls.enableDamping = !0, this.controls.dampingFactor = 0.05;
+      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) {
@@ -21541,7 +21541,7 @@ ${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 = "1001", 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;
+    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;
     try {
       const a = this.query(".gaussian-container");
       if (!a) return;

package/dist/chuci.umd.js

@@ -233,7 +233,7 @@
         justify-content: center;
         cursor: pointer;
         transition: background 0.3s;
-        z-index: 1002;
+        z-index: calc(var(--cc-viewer-z-index-each, 1000) + 2);
         pointer-events: auto;
       }
       
@@ -4339,7 +4339,7 @@ void main() {
         Camera Position: ${this.getCameraDebugInfo()}<br>
         Camera Target: ${this.getTargetDebugInfo()}<br>
         Controls: Rotate (drag), Zoom (scroll), Pan (right-drag)
-      `)}async initializeViewer(){if(await new Promise(i=>setTimeout(i,50)),this.container=this.query(".model-container"),!this.container)return;const t=this.container.getBoundingClientRect();try{this.scene=new Np,this.scene.background=new Pe(3158064);const i=this.container.clientWidth||this.container.offsetWidth,n=this.container.clientHeight||this.container.offsetHeight;this.camera=new si(75,i/n,.1,1e3),this.renderer=new tA({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="1001",document.body.appendChild(r),this.externalCanvas=r,this.controls=new hA(this.camera,r),this.controls.enableDamping=!0,this.controls.dampingFactor=.05;const a=new Yp(4210752,2),o=new Xp(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()}}),this.resizeObserver.observe(this.container),this.animateLoop()}catch(i){throw i}}async loadModel(){const t=new oA;try{if(this.materialUrl){const h=new lA,u=this.materialUrl.substring(0,this.materialUrl.lastIndexOf("/")+1);h.setPath(u);const p=await new Promise((g,v)=>{const m=this.materialUrl.substring(this.materialUrl.lastIndexOf("/")+1);h.load(m,g,void 0,v)});p.preload(),t.setMaterials(p)}const i=this.modelUrl.substring(0,this.modelUrl.lastIndexOf("/")+1);t.setPath(i);const n=await new Promise((h,u)=>{const p=this.modelUrl.substring(this.modelUrl.lastIndexOf("/")+1);t.load(p,h,void 0,u)}),r=new Kn().setFromObject(n),a=new W;r.getSize(a);const o=Math.max(a.x,a.y,a.z);n.scale.multiplyScalar(3/o);const c=new W;if(r.getCenter(c),n.position.sub(c.multiplyScalar(n.scale.x)),!this.scene)return;this.scene.add(n),this.currentModel=n,this.storeOriginalMaterials(n);const l=this.cameraPosition.split(",").map(h=>parseFloat(h.trim())),d=this.cameraTarget.split(",").map(h=>parseFloat(h.trim()));l.length===3&&this.camera.position.set(l[0],l[1],l[2]),d.length===3&&(this.camera.lookAt(d[0],d[1],d[2]),this.controls.target.set(d[0],d[1],d[2])),this.controls.update(),this.renderer&&this.scene&&this.camera&&this.renderer.render(this.scene,this.camera)}catch(i){throw i}}handleResize(){if(!this.container||!this.camera||!this.renderer)return;const t=this.container.getBoundingClientRect(),i=t.width,n=t.height;if(i>0&&n>0){this.camera.aspect=i/n,this.camera.updateProjectionMatrix(),this.renderer.setSize(i,n);const r=this.renderer.domElement;r.style.left=`${t.left}px`,r.style.top=`${t.top}px`,r.style.width=`${t.width}px`,r.style.height=`${t.height}px`}}}customElements.get("cc-viewer-3dmodel")||customElements.define("cc-viewer-3dmodel",th);class ih extends sn{constructor(){super(...arguments);Se(this,"splatUrl","");Se(this,"debugMode",!1);Se(this,"cameraPosition","3,3,3");Se(this,"_cameraTarget","0,0,0");Se(this,"scene");Se(this,"camera");Se(this,"renderer");Se(this,"controls");Se(this,"animationId");Se(this,"canvas");Se(this,"swiper")}static get observedAttributes(){return["show","debug-mode","camera-position","camera-target"]}attributeChangedCallback(t,i,n){t==="show"?this.isShow=n==="true":t==="debug-mode"?this.debugMode=n==="true":t==="camera-position"?this.cameraPosition=n||"3,3,3":t==="camera-target"&&(this._cameraTarget=n||"0,0,0"),super.attributeChangedCallback(t,i,n)}async doOpen(t){this.splatUrl=t,await this.initializeViewer()}doClose(){this.cleanup()}getViewerContent(){return""}shouldUseCustomRender(){return!0}customRender(){const t=this.css`
+      `)}async initializeViewer(){if(await new Promise(i=>setTimeout(i,50)),this.container=this.query(".model-container"),!this.container)return;const t=this.container.getBoundingClientRect();try{this.scene=new Np,this.scene.background=new Pe(3158064);const i=this.container.clientWidth||this.container.offsetWidth,n=this.container.clientHeight||this.container.offsetHeight;this.camera=new si(75,i/n,.1,1e3),this.renderer=new tA({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 hA(this.camera,r),this.controls.enableDamping=!0,this.controls.dampingFactor=.05;const a=new Yp(4210752,2),o=new Xp(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()}}),this.resizeObserver.observe(this.container),this.animateLoop()}catch(i){throw i}}async loadModel(){const t=new oA;try{if(this.materialUrl){const h=new lA,u=this.materialUrl.substring(0,this.materialUrl.lastIndexOf("/")+1);h.setPath(u);const p=await new Promise((g,v)=>{const m=this.materialUrl.substring(this.materialUrl.lastIndexOf("/")+1);h.load(m,g,void 0,v)});p.preload(),t.setMaterials(p)}const i=this.modelUrl.substring(0,this.modelUrl.lastIndexOf("/")+1);t.setPath(i);const n=await new Promise((h,u)=>{const p=this.modelUrl.substring(this.modelUrl.lastIndexOf("/")+1);t.load(p,h,void 0,u)}),r=new Kn().setFromObject(n),a=new W;r.getSize(a);const o=Math.max(a.x,a.y,a.z);n.scale.multiplyScalar(3/o);const c=new W;if(r.getCenter(c),n.position.sub(c.multiplyScalar(n.scale.x)),!this.scene)return;this.scene.add(n),this.currentModel=n,this.storeOriginalMaterials(n);const l=this.cameraPosition.split(",").map(h=>parseFloat(h.trim())),d=this.cameraTarget.split(",").map(h=>parseFloat(h.trim()));l.length===3&&this.camera.position.set(l[0],l[1],l[2]),d.length===3&&(this.camera.lookAt(d[0],d[1],d[2]),this.controls.target.set(d[0],d[1],d[2])),this.controls.update(),this.renderer&&this.scene&&this.camera&&this.renderer.render(this.scene,this.camera)}catch(i){throw i}}handleResize(){if(!this.container||!this.camera||!this.renderer)return;const t=this.container.getBoundingClientRect(),i=t.width,n=t.height;if(i>0&&n>0){this.camera.aspect=i/n,this.camera.updateProjectionMatrix(),this.renderer.setSize(i,n);const r=this.renderer.domElement;r.style.left=`${t.left}px`,r.style.top=`${t.top}px`,r.style.width=`${t.width}px`,r.style.height=`${t.height}px`}}}customElements.get("cc-viewer-3dmodel")||customElements.define("cc-viewer-3dmodel",th);class ih extends sn{constructor(){super(...arguments);Se(this,"splatUrl","");Se(this,"debugMode",!1);Se(this,"cameraPosition","3,3,3");Se(this,"_cameraTarget","0,0,0");Se(this,"scene");Se(this,"camera");Se(this,"renderer");Se(this,"controls");Se(this,"animationId");Se(this,"canvas");Se(this,"swiper")}static get observedAttributes(){return["show","debug-mode","camera-position","camera-target"]}attributeChangedCallback(t,i,n){t==="show"?this.isShow=n==="true":t==="debug-mode"?this.debugMode=n==="true":t==="camera-position"?this.cameraPosition=n||"3,3,3":t==="camera-target"&&(this._cameraTarget=n||"0,0,0"),super.attributeChangedCallback(t,i,n)}async doOpen(t){this.splatUrl=t,await this.initializeViewer()}doClose(){this.cleanup()}getViewerContent(){return""}shouldUseCustomRender(){return!0}customRender(){const t=this.css`
       :host {
         --cc-viewer-z-index-each: 1000;
       }
@@ -4468,7 +4468,7 @@ ${this.getTargetDebugInfo()}
 • Pan: Right-drag or Shift+Left-drag
 
 📊 Status: ${this.scene?"Splat loaded":"Loading..."}
-      `)}async initializeViewer(){const t=`gaussian-canvas-${Date.now()}`,i=this.query(".viewer");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="1001",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;const o=await Promise.resolve().then(()=>jA);this.scene=new o.Scene,this.camera=new o.Camera,this.renderer=new o.WebGLRenderer(this.canvas),this.controls=new o.OrbitControls(this.camera,this.canvas),await o.Loader.LoadAsync(this.splatUrl,this.scene);let c=0;const l=()=>{if(!(!this.renderer||!this.scene||!this.camera)){this.animationId=requestAnimationFrame(l),this.controls&&this.controls.update();try{this.renderer.render(this.scene,this.camera)}catch{}c===0&&this.canvas&&c++,this.debugMode&&this.updateDebugInfo()}};l(),new ResizeObserver(()=>{this.handleResize()}).observe(a)}catch(a){throw a}}handleResize(){const t=this.query(".gaussian-container");if(!t||!this.renderer||!this.camera)return;const i=t.clientWidth,n=t.clientHeight;typeof this.renderer.setSize=="function"&&this.renderer.setSize(i,n),typeof this.camera.aspect<"u"&&(this.camera.aspect=i/n,typeof this.camera.updateProjectionMatrix=="function"&&this.camera.updateProjectionMatrix())}}customElements.get("cc-viewer-gaussian")||customElements.define("cc-viewer-gaussian",ih);const Gr={image:"cc-viewer-image",panorama:"cc-viewer-panorama",youtube:"cc-viewer-youtube",video:"cc-viewer-video","3dmodel":"cc-viewer-3dmodel",gaussian:"cc-viewer-gaussian"};class nh extends xi{constructor(){super(...arguments);Se(this,"swiper");Se(this,"currentSlideIndex",0);Se(this,"currentType","");Se(this,"boundHandleNavigatePrev");Se(this,"boundHandleNavigateNext")}open(t,i,n){const r=this.currentType;if(this.currentType=i,r&&r!==i){const a=Gr[r],o=this.query(a);o&&o.close&&o.close()}r!==i&&this.render(),setTimeout(()=>{const a=Gr[i],o=this.query(a);o&&n&&Object.entries(n).forEach(([c,l])=>{const d=c.replace(/([A-Z])/g,"-$1").toLowerCase();typeof l=="boolean"?l?o.setAttribute(d,""):o.removeAttribute(d):o.setAttribute(d,String(l))}),this.updateNavigationButtons(),o&&o.open(t)},0)}firstUpdated(){this.dispatch("load"),this.boundHandleNavigatePrev&&this.removeEventListener("navigate-prev",this.boundHandleNavigatePrev),this.boundHandleNavigateNext&&this.removeEventListener("navigate-next",this.boundHandleNavigateNext),this.boundHandleNavigatePrev=this.handleNavigatePrev.bind(this),this.boundHandleNavigateNext=this.handleNavigateNext.bind(this),this.addEventListener("navigate-prev",this.boundHandleNavigatePrev),this.addEventListener("navigate-next",this.boundHandleNavigateNext)}handleNavigatePrev(t){var r,a;if(!this.swiper)return;const i=this.swiper.slides.length;if(i<=1)return;const n=((a=(r=this.swiper.slider)==null?void 0:r.params)==null?void 0:a.loop)===!0;if(this.currentSlideIndex<=0)if(n)this.currentSlideIndex=i-1;else return;else this.currentSlideIndex--;this.navigateToSlide(this.currentSlideIndex)}handleNavigateNext(t){var r,a;if(!this.swiper)return;const i=this.swiper.slides.length;if(i<=1)return;const n=((a=(r=this.swiper.slider)==null?void 0:r.params)==null?void 0:a.loop)===!0;if(this.currentSlideIndex>=i-1)if(n)this.currentSlideIndex=0;else return;else this.currentSlideIndex++;this.navigateToSlide(this.currentSlideIndex)}navigateToSlide(t){if(!this.swiper||!this.swiper.slides[t])return;const i=this.swiper.slides[t],n=i.getAttribute("image-url")||"",r=i.getAttribute("image-type")||"image",a=Gr[this.currentType],o=this.query(a);o&&o.close();const c={};i.hasAttribute("fit-to-container")&&(c.fitToContainer=!0),i.hasAttribute("debug-mode")&&(c.debugMode=!0),i.hasAttribute("camera-position")&&(c.cameraPosition=i.getAttribute("camera-position")),i.hasAttribute("camera-target")&&(c.cameraTarget=i.getAttribute("camera-target")),i.hasAttribute("show-texture")&&(c.showTexture=i.getAttribute("show-texture")==="true"),i.hasAttribute("material-url")&&(c.materialUrl=i.getAttribute("material-url")),this.currentSlideIndex=t,this.open(n,r,c),this.swiper.slider&&this.swiper.slider.slideTo(t)}updateNavigationButtons(){var a,o;if(!this.swiper)return;const t=this.swiper.slides.length,i=((o=(a=this.swiper.slider)==null?void 0:a.params)==null?void 0:o.loop)===!0;if(t<=1){this.setNavigationVisibility(!1,!1);return}if(i){this.setNavigationVisibility(!0,!0);return}const n=this.currentSlideIndex>0,r=this.currentSlideIndex<t-1;this.setNavigationVisibility(n,r)}setNavigationVisibility(t,i){[this.query("cc-viewer-image"),this.query("cc-viewer-youtube"),this.query("cc-viewer-panorama"),this.query("cc-viewer-video"),this.query("cc-viewer-3dmodel"),this.query("cc-viewer-gaussian")].forEach(r=>{if(r){const a=r;a.showPrevButton=t,a.showNextButton=i}})}setSwiper(t){this.swiper=t}setCurrentSlideIndex(t){this.currentSlideIndex=t}render(){const t=this.css`
+      `)}async initializeViewer(){const t=`gaussian-canvas-${Date.now()}`,i=this.query(".viewer");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;try{const a=this.query(".gaussian-container");if(!a)return;const o=await Promise.resolve().then(()=>jA);this.scene=new o.Scene,this.camera=new o.Camera,this.renderer=new o.WebGLRenderer(this.canvas),this.controls=new o.OrbitControls(this.camera,this.canvas),await o.Loader.LoadAsync(this.splatUrl,this.scene);let c=0;const l=()=>{if(!(!this.renderer||!this.scene||!this.camera)){this.animationId=requestAnimationFrame(l),this.controls&&this.controls.update();try{this.renderer.render(this.scene,this.camera)}catch{}c===0&&this.canvas&&c++,this.debugMode&&this.updateDebugInfo()}};l(),new ResizeObserver(()=>{this.handleResize()}).observe(a)}catch(a){throw a}}handleResize(){const t=this.query(".gaussian-container");if(!t||!this.renderer||!this.camera)return;const i=t.clientWidth,n=t.clientHeight;typeof this.renderer.setSize=="function"&&this.renderer.setSize(i,n),typeof this.camera.aspect<"u"&&(this.camera.aspect=i/n,typeof this.camera.updateProjectionMatrix=="function"&&this.camera.updateProjectionMatrix())}}customElements.get("cc-viewer-gaussian")||customElements.define("cc-viewer-gaussian",ih);const Gr={image:"cc-viewer-image",panorama:"cc-viewer-panorama",youtube:"cc-viewer-youtube",video:"cc-viewer-video","3dmodel":"cc-viewer-3dmodel",gaussian:"cc-viewer-gaussian"};class nh extends xi{constructor(){super(...arguments);Se(this,"swiper");Se(this,"currentSlideIndex",0);Se(this,"currentType","");Se(this,"boundHandleNavigatePrev");Se(this,"boundHandleNavigateNext")}open(t,i,n){const r=this.currentType;if(this.currentType=i,r&&r!==i){const a=Gr[r],o=this.query(a);o&&o.close&&o.close()}r!==i&&this.render(),setTimeout(()=>{const a=Gr[i],o=this.query(a);o&&n&&Object.entries(n).forEach(([c,l])=>{const d=c.replace(/([A-Z])/g,"-$1").toLowerCase();typeof l=="boolean"?l?o.setAttribute(d,""):o.removeAttribute(d):o.setAttribute(d,String(l))}),this.updateNavigationButtons(),o&&o.open(t)},0)}firstUpdated(){this.dispatch("load"),this.boundHandleNavigatePrev&&this.removeEventListener("navigate-prev",this.boundHandleNavigatePrev),this.boundHandleNavigateNext&&this.removeEventListener("navigate-next",this.boundHandleNavigateNext),this.boundHandleNavigatePrev=this.handleNavigatePrev.bind(this),this.boundHandleNavigateNext=this.handleNavigateNext.bind(this),this.addEventListener("navigate-prev",this.boundHandleNavigatePrev),this.addEventListener("navigate-next",this.boundHandleNavigateNext)}handleNavigatePrev(t){var r,a;if(!this.swiper)return;const i=this.swiper.slides.length;if(i<=1)return;const n=((a=(r=this.swiper.slider)==null?void 0:r.params)==null?void 0:a.loop)===!0;if(this.currentSlideIndex<=0)if(n)this.currentSlideIndex=i-1;else return;else this.currentSlideIndex--;this.navigateToSlide(this.currentSlideIndex)}handleNavigateNext(t){var r,a;if(!this.swiper)return;const i=this.swiper.slides.length;if(i<=1)return;const n=((a=(r=this.swiper.slider)==null?void 0:r.params)==null?void 0:a.loop)===!0;if(this.currentSlideIndex>=i-1)if(n)this.currentSlideIndex=0;else return;else this.currentSlideIndex++;this.navigateToSlide(this.currentSlideIndex)}navigateToSlide(t){if(!this.swiper||!this.swiper.slides[t])return;const i=this.swiper.slides[t],n=i.getAttribute("image-url")||"",r=i.getAttribute("image-type")||"image",a=Gr[this.currentType],o=this.query(a);o&&o.close();const c={};i.hasAttribute("fit-to-container")&&(c.fitToContainer=!0),i.hasAttribute("debug-mode")&&(c.debugMode=!0),i.hasAttribute("camera-position")&&(c.cameraPosition=i.getAttribute("camera-position")),i.hasAttribute("camera-target")&&(c.cameraTarget=i.getAttribute("camera-target")),i.hasAttribute("show-texture")&&(c.showTexture=i.getAttribute("show-texture")==="true"),i.hasAttribute("material-url")&&(c.materialUrl=i.getAttribute("material-url")),this.currentSlideIndex=t,this.open(n,r,c),this.swiper.slider&&this.swiper.slider.slideTo(t)}updateNavigationButtons(){var a,o;if(!this.swiper)return;const t=this.swiper.slides.length,i=((o=(a=this.swiper.slider)==null?void 0:a.params)==null?void 0:o.loop)===!0;if(t<=1){this.setNavigationVisibility(!1,!1);return}if(i){this.setNavigationVisibility(!0,!0);return}const n=this.currentSlideIndex>0,r=this.currentSlideIndex<t-1;this.setNavigationVisibility(n,r)}setNavigationVisibility(t,i){[this.query("cc-viewer-image"),this.query("cc-viewer-youtube"),this.query("cc-viewer-panorama"),this.query("cc-viewer-video"),this.query("cc-viewer-3dmodel"),this.query("cc-viewer-gaussian")].forEach(r=>{if(r){const a=r;a.showPrevButton=t,a.showNextButton=i}})}setSwiper(t){this.swiper=t}setCurrentSlideIndex(t){this.currentSlideIndex=t}render(){const t=this.css`
       :host {
         --cc-viewer-z-index: 1000;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c4h/chuci",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Standalone multimedia swiper and viewer web components",
   "type": "module",
   "private": false,

package/src/components/viewer/cc-viewer-3dmodel.ts

@@ -325,7 +325,7 @@ export class CcViewer3DModel extends CcViewerBase {
       canvas.style.width = `${rect.width}px`
       canvas.style.height = `${rect.height}px`
       canvas.style.pointerEvents = 'auto'
-      canvas.style.zIndex = '1001'
+      canvas.style.zIndex = 'calc(var(--cc-viewer-z-index-each, 1000) + 1)'
       document.body.appendChild(canvas)
       
       // Store canvas reference for cleanup

package/src/components/viewer/cc-viewer-base.ts

@@ -200,7 +200,7 @@ export abstract class CcViewerBase extends ChuciElement {
         justify-content: center;
         cursor: pointer;
         transition: background 0.3s;
-        z-index: 1002;
+        z-index: calc(var(--cc-viewer-z-index-each, 1000) + 2);
         pointer-events: auto;
       }
       

package/src/components/viewer/cc-viewer-gaussian.ts

@@ -276,7 +276,7 @@ ${this.getTargetDebugInfo()}
       normalCanvas.style.left = `${rect.left}px`
       normalCanvas.style.width = `${rect.width}px`
       normalCanvas.style.height = `${rect.height}px`
-      normalCanvas.style.zIndex = '1001'  // Above backdrop but below buttons
+      normalCanvas.style.zIndex = 'calc(var(--cc-viewer-z-index-each, 1000) + 1)'  // Above backdrop but below buttons
       normalCanvas.style.pointerEvents = 'auto'  // Keep mouse events for 3D controls
       normalCanvas.style.display = 'block'
       normalCanvas.style.background = 'transparent'