@c4h/chuci 0.2.2 → 0.2.4

package/package.json

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

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

@@ -74,7 +74,7 @@ export class CcViewer3DModel extends CcViewerBase {
       `
         ${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)
@@ -150,7 +150,7 @@ export class CcViewer3DModel extends CcViewerBase {
         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 {
@@ -164,7 +164,7 @@ export class CcViewer3DModel extends CcViewerBase {
         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;
       }
       
@@ -325,7 +325,11 @@ export class CcViewer3DModel extends CcViewerBase {
       canvas.style.width = `${rect.width}px`
       canvas.style.height = `${rect.height}px`
       canvas.style.pointerEvents = 'auto'
-      canvas.style.zIndex = 'calc(var(--cc-viewer-z-index-each, 1000) + 1)'
+      // Get z-index from host style
+      const hostStyle = window.getComputedStyle(this)
+      const zIndexVar = hostStyle.getPropertyValue('--cc-viewer-z-index-each').trim()
+      const baseZIndex = zIndexVar ? parseInt(zIndexVar, 10) : 1000
+      canvas.style.zIndex = `${baseZIndex + 1}`
       document.body.appendChild(canvas)
       
       // Store canvas reference for cleanup

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

@@ -75,7 +75,7 @@ export class CcViewerGaussian extends CcViewerBase {
         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 {
@@ -142,7 +142,7 @@ export class CcViewerGaussian extends CcViewerBase {
         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()}
@@ -276,7 +276,11 @@ ${this.getTargetDebugInfo()}
       normalCanvas.style.left = `${rect.left}px`
       normalCanvas.style.width = `${rect.width}px`
       normalCanvas.style.height = `${rect.height}px`
-      normalCanvas.style.zIndex = 'calc(var(--cc-viewer-z-index-each, 1000) + 1)'  // Above backdrop but below buttons
+      // Get z-index from host style
+      const hostStyle = window.getComputedStyle(this)
+      const zIndexVar = hostStyle.getPropertyValue('--cc-viewer-z-index-each').trim()
+      const baseZIndex = zIndexVar ? parseInt(zIndexVar, 10) : 1000
+      normalCanvas.style.zIndex = `${baseZIndex + 1}`  // Above backdrop but below buttons
       normalCanvas.style.pointerEvents = 'auto'  // Keep mouse events for 3D controls
       normalCanvas.style.display = 'block'
       normalCanvas.style.background = 'transparent'