Layer BIM toolbar above workspace windows

frontend/dcViewer.css

@@ -107,6 +107,15 @@
   --settings-bottom: 12px;
   --measure-left: 72px;
   --measure-bottom: 12px;
+  --z-workspace-backdrop: 30045;
+  --z-workspace-modal: 30050;
+  --z-workspace-window: 30080;
+  --z-dropdown: 50000;
+  --z-dropdown-select: 50010;
+  --z-dropdown-workspace: 50020;
+  --z-toolbar-priority: 59000;
+  --z-critical-backdrop: 60000;
+  --z-critical-modal: 60010;
 }
 
 *,
@@ -413,7 +422,7 @@ header {
   display: flex;
   flex-direction: column;
   gap: 0;
-  z-index: 11;
+  z-index: var(--z-workspace-window);
   display: none;
 }
 
@@ -564,7 +573,7 @@ header {
   border: 1px solid var(--nodedc-glass-outline);
   border-radius: var(--modal-radius, 16px);
   box-shadow: var(--nodedc-glass-panel-shadow);
-  z-index: 11;
+  z-index: var(--z-workspace-window);
   backdrop-filter: var(--nodedc-glass-filter);
   -webkit-backdrop-filter: var(--nodedc-glass-filter);
 }
@@ -760,7 +769,7 @@ header {
 
 .nodedc-dropdown-surface {
   position: fixed;
-  z-index: 50000;
+  z-index: var(--z-dropdown);
   padding: 0.65rem;
   border: 0;
   border-radius: 1.25rem;
@@ -1262,7 +1271,7 @@ header {
 }
 
 .nodedc-dropdown-surface.nodedc-select__menu {
-  z-index: 50010;
+  z-index: var(--z-dropdown-select);
   display: grid;
   gap: 2px;
   max-height: 232px;
@@ -1346,7 +1355,7 @@ header {
   max-height: 420px;
   overflow: hidden;
   box-shadow: var(--nodedc-glass-panel-shadow);
-  z-index: 20;
+  z-index: var(--z-workspace-window);
   backdrop-filter: var(--nodedc-glass-filter);
   -webkit-backdrop-filter: var(--nodedc-glass-filter);
 }
@@ -1529,7 +1538,7 @@ header {
 }
 
 #commentModalBackdrop {
-  z-index: 30045;
+  z-index: var(--z-workspace-backdrop);
   background: transparent;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
@@ -1539,7 +1548,7 @@ header {
 #saveProjectBackdrop,
 #deleteProjectBackdrop,
 #shareModalBackdrop {
-  z-index: 60000;
+  z-index: var(--z-critical-backdrop);
   background: rgba(10, 12, 16, 0.38);
   backdrop-filter: blur(18px) saturate(1.18) brightness(0.82);
   -webkit-backdrop-filter: blur(18px) saturate(1.18) brightness(0.82);
@@ -1556,7 +1565,7 @@ header {
   padding: 12px;
   gap: 10px;
   overflow: auto;
-  z-index: 40;
+  z-index: var(--z-workspace-window);
 }
 
 .measurement-modal .template-list {
@@ -1583,7 +1592,7 @@ header {
   border-radius: var(--modal-radius, 14px);
   padding: 16px;
   box-shadow: var(--nodedc-glass-panel-shadow), 0 32px 96px rgba(0, 0, 0, 0.58);
-  z-index: 60010;
+  z-index: var(--z-critical-modal);
   display: grid;
   gap: 10px;
   backdrop-filter: var(--nodedc-glass-filter);
@@ -1704,7 +1713,7 @@ header {
   border-radius: 30px;
   background: var(--nodedc-glass-panel-surface);
   box-shadow: var(--nodedc-glass-panel-shadow), 0 28px 80px rgba(0, 0, 0, 0.48);
-  z-index: 30050;
+  z-index: var(--z-workspace-modal);
   backdrop-filter: var(--nodedc-glass-filter);
   -webkit-backdrop-filter: var(--nodedc-glass-filter);
 }
@@ -1981,7 +1990,7 @@ header {
 }
 
 .bim-subitem-menu {
-  z-index: 50020;
+  z-index: var(--z-dropdown-workspace);
   display: grid;
   gap: 0.18rem;
   min-width: 17.25rem;
@@ -2411,7 +2420,7 @@ header {
   max-height: min(720px, calc(100vh - 72px));
   overflow: hidden;
   box-shadow: var(--nodedc-glass-panel-shadow);
-  z-index: 22;
+  z-index: var(--z-workspace-window);
   font-size: 12px;
   backdrop-filter: var(--nodedc-glass-filter);
   -webkit-backdrop-filter: var(--nodedc-glass-filter);
@@ -3011,7 +3020,7 @@ header {
   padding: var(--tb-pad-y, 8px) 0;
   transform: translateY(-50%);
   transform-origin: left center;
-  z-index: 15;
+  z-index: var(--z-toolbar-priority);
   opacity: 1;
   transition: transform 220ms ease, opacity 180ms ease;
   will-change: transform, opacity;
@@ -3093,7 +3102,7 @@ body[data-viewer-mode="guest"] .inspector-restore-tray {
   position: fixed;
   left: var(--section-toolbar-left);
   bottom: var(--section-toolbar-bottom);
-  z-index: 16;
+  z-index: var(--z-toolbar-priority);
   display: flex;
   align-items: center;
   gap: var(--tb-gap, 10px);
@@ -3190,7 +3199,7 @@ body[data-viewer-mode="guest"] .inspector-restore-tray {
   max-height: 420px;
   overflow: hidden;
   box-shadow: var(--nodedc-glass-panel-shadow);
-  z-index: 20;
+  z-index: var(--z-workspace-window);
   backdrop-filter: var(--nodedc-glass-filter);
   -webkit-backdrop-filter: var(--nodedc-glass-filter);
 }

frontend/dcViewer.js

@@ -315,6 +315,8 @@ let commentLongPressStart = null;
 let suppressNextCanvasClick = false;
 let floatingWindowOrder = [];
 const floatingWindowElements = new Map();
+const WORKSPACE_WINDOW_Z_BASE = 30080;
+const WORKSPACE_WINDOW_Z_STEP = 10;
 let objectContextModal = null;
 let mathUtil = null;
 let selectionState = null; // { ids, modelId, pivotCenter, baseTransforms: Map, transform }
@@ -554,10 +556,9 @@ const setCommentModalError = (message = "") => {
 const bringFloatingWindowToFront = (id) => {
   if (!id) return;
   floatingWindowOrder = [...floatingWindowOrder.filter((item) => item !== id), id];
-  const zBase = 30080;
   floatingWindowOrder.forEach((item, index) => {
     const element = floatingWindowElements.get(item);
-    if (element) element.style.zIndex = `${zBase + index * 10}`;
+    if (element) element.style.zIndex = `${WORKSPACE_WINDOW_Z_BASE + index * WORKSPACE_WINDOW_Z_STEP}`;
   });
 };
 

frontend/index.html

@@ -203,7 +203,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="./dcViewer.css?v=34">
+  <link rel="stylesheet" href="./dcViewer.css?v=35">
 </head>
 <body>
   <header>
@@ -641,6 +641,6 @@
   <input id="fileInput" class="hidden" type="file"
          accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">
 
-  <script type="module" src="./dcViewer.js?v=48"></script>
+  <script type="module" src="./dcViewer.js?v=49"></script>
 </body>
 </html>