bc-model-viewer 1.7.23 → 1.7.31

package/examples/LayerManagerDemo.html

@@ -192,6 +192,15 @@
             font-weight: 600;
             color: #495057;
             font-size: 14px;
+            flex: 1;
+        }
+
+        .tree-folder-checkbox {
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+            cursor: pointer;
+            accent-color: #667eea;
         }
 
         .tree-layer-item {
@@ -285,6 +294,7 @@
             <ul style="margin: 0; padding-left: 20px; font-size: 13px; color: #666; line-height: 1.8;">
                 <li>切换"树形视图"、"列表视图"和"DFC视图"查看图层</li>
                 <li>在树形视图中，点击文件夹图标可展开/折叠</li>
+                <li>文件夹复选框：可批量控制该文件夹下所有图层的可见性（半选状态表示部分可见）</li>
                 <li>DFC视图：输入 DFC key (如 "dfc-architecture") 查看特定类型的图层树形结构</li>
                 <li>勾选/取消勾选复选框来切换图层可见性</li>
                 <li>使用搜索框快速查找图层（支持文件夹路径搜索）</li>
@@ -315,7 +325,7 @@
 
         // 加载测试模型
         try {
-            await viewer.loadZipAsync('./dgz/ob.dgz')
+            await viewer.loadZipAsync('./dgz/2号楼.dgz')
             console.log('模型加载成功')
 
             // 模型加载完成后，初始化图层列表
@@ -368,7 +378,7 @@
                     layerList.innerHTML = '<div class="empty-state">请输入 DFC key 并点击"加载 DFC 树形结构"</div>'
                     return
                 }
-                const dfcTree = viewer.layerManager.getDfcTreeStructure(currentDfcKey)
+                const dfcTree = viewer.layerManager.getTreeStructureByPath(currentDfcKey)
                 if (dfcTree.length === 0) {
                     layerList.innerHTML = `<div class="empty-state">未找到匹配的 DFC 图层 (key: ${currentDfcKey})</div>`
                     return
@@ -403,6 +413,36 @@
             }
         }
 
+        // 获取文件夹下所有图层节点
+        function getAllLayerNodesFromFolder(folderNode) {
+            const layerNodes = []
+            if (folderNode.children) {
+                folderNode.children.forEach(child => {
+                    if (child.type === 'layer') {
+                        layerNodes.push(child)
+                    } else if (child.type === 'folder') {
+                        layerNodes.push(...getAllLayerNodesFromFolder(child))
+                    }
+                })
+            }
+            return layerNodes
+        }
+
+        // 计算文件夹的复选框状态
+        function getFolderCheckboxState(folderNode) {
+            const layerNodes = getAllLayerNodesFromFolder(folderNode)
+            if (layerNodes.length === 0) return { checked: false, indeterminate: false }
+
+            const visibleCount = layerNodes.filter(n => n.layer && n.layer.visible !== false).length
+            const allVisible = visibleCount === layerNodes.length
+            const noneVisible = visibleCount === 0
+
+            return {
+                checked: allVisible,
+                indeterminate: !allVisible && !noneVisible
+            }
+        }
+
         // 渲染树形视图
         function renderTreeView(nodes, filterText = '', parentPath = '', parentContainer = null) {
             const container = parentContainer || document.getElementById('layerList')
@@ -416,16 +456,32 @@
                     const hasMatch = filterText === '' || nodeMatchesFilter(node, filterText, true)
 
                     if (filterText === '' || hasMatch) {
+                        // 计算文件夹复选框状态
+                        const checkboxState = getFolderCheckboxState(node)
                         const folderDiv = document.createElement('div')
                         folderDiv.className = 'tree-folder'
+                        folderDiv.setAttribute('data-folder-path', currentPath)
+
+                        const checkboxId = `folder-checkbox-${currentPath.replace(/\//g, '-')}`
                         folderDiv.innerHTML = `
-                            <span class="tree-folder-icon ${isExpanded ? '' : 'collapsed'}">▶</span>
-                            <span class="tree-folder-name">📁 ${node.name}</span>
+                            <input type="checkbox" 
+                                   id="${checkboxId}"
+                                   class="tree-folder-checkbox" 
+                                   ${checkboxState.checked ? 'checked' : ''}
+                                   onchange="toggleFolderLayers('${currentPath}', this.checked)"
+                                   onclick="event.stopPropagation()">
+                            <span class="tree-folder-icon ${isExpanded ? '' : 'collapsed'}" 
+                                  onclick="event.stopPropagation(); toggleFolder('${currentPath}')">▶</span>
+                            <span class="tree-folder-name" 
+                                  onclick="event.stopPropagation(); toggleFolder('${currentPath}')">📁 ${node.name}</span>
                         `
-                        folderDiv.onclick = (e) => {
-                            e.stopPropagation()
-                            toggleFolder(currentPath)
+
+                        // 设置半选状态
+                        const checkbox = folderDiv.querySelector(`#${checkboxId}`)
+                        if (checkbox) {
+                            checkbox.indeterminate = checkboxState.indeterminate
                         }
+
                         container.appendChild(folderDiv)
 
                         // 渲染子节点
@@ -528,7 +584,7 @@
         }
 
         // 切换文件夹展开/折叠
-        function toggleFolder(path) {
+        window.toggleFolder = function (path) {
             if (expandedFolders.has(path)) {
                 expandedFolders.delete(path)
             } else {
@@ -537,6 +593,55 @@
             renderLayerList()
         }
 
+        // 切换文件夹下所有图层的可见性
+        window.toggleFolderLayers = function (folderPath, visible) {
+            // 找到对应的文件夹节点
+            const tree = currentView === 'dfc' && currentDfcKey
+                ? viewer.layerManager.getTreeStructureByPath(currentDfcKey)
+                : viewer.layerManager.getTreeStructure()
+
+            const folderNode = findFolderNodeByPath(tree, folderPath)
+            if (!folderNode) return
+
+            // 获取文件夹下所有图层节点
+            const layerNodes = getAllLayerNodesFromFolder(folderNode)
+
+            // 更新所有图层的可见性
+            layerNodes.forEach(layerNode => {
+                if (layerNode.layer && layerNode.layerIndex !== undefined) {
+                    layerNode.layer.visible = visible
+                }
+            })
+
+            // 更新模型显示
+            viewer.updateMeshVisibleByLayer()
+
+            // 更新UI
+            renderLayerList()
+            updateLayerStats()
+
+            // 更新所有文件夹复选框状态（包括父文件夹）
+            updateFolderCheckboxes()
+        }
+
+        // 根据路径查找文件夹节点
+        function findFolderNodeByPath(nodes, targetPath, parentPath = '') {
+            for (const node of nodes) {
+                if (node.type === 'folder') {
+                    const currentPath = parentPath ? `${parentPath}/${node.name}` : node.name
+                    if (currentPath === targetPath) {
+                        return node
+                    }
+                    // 递归查找子节点
+                    if (node.children) {
+                        const found = findFolderNodeByPath(node.children, targetPath, currentPath)
+                        if (found) return found
+                    }
+                }
+            }
+            return null
+        }
+
         // 切换视图模式
         window.switchView = function (view) {
             currentView = view
@@ -586,7 +691,7 @@
 
             if (currentView === 'dfc' && currentDfcKey) {
                 // DFC 视图：显示匹配的图层统计
-                const dfcTree = viewer.layerManager.getDfcTreeStructure(currentDfcKey)
+                const dfcTree = viewer.layerManager.getTreeStructureByPath(currentDfcKey)
                 const dfcLayers = getAllLayersFromTree(dfcTree)
                 const total = dfcLayers.length
                 const visible = dfcLayers.filter(l => l.visible !== false).length
@@ -645,9 +750,43 @@
                     const checkbox = item.querySelector('input[type="checkbox"]')
                     if (checkbox) checkbox.checked = visible
                 })
+
+                // 更新父文件夹的复选框状态
+                updateFolderCheckboxes()
             }
         }
 
+        // 更新所有文件夹复选框的状态
+        function updateFolderCheckboxes() {
+            const tree = currentView === 'dfc' && currentDfcKey
+                ? viewer.layerManager.getTreeStructureByPath(currentDfcKey)
+                : viewer.layerManager.getTreeStructure()
+
+            updateFolderCheckboxRecursive(tree, '')
+        }
+
+        // 递归更新文件夹复选框状态
+        function updateFolderCheckboxRecursive(nodes, parentPath) {
+            nodes.forEach(node => {
+                if (node.type === 'folder') {
+                    const currentPath = parentPath ? `${parentPath}/${node.name}` : node.name
+                    const checkboxState = getFolderCheckboxState(node)
+                    const checkboxId = `folder-checkbox-${currentPath.replace(/\//g, '-')}`
+                    const checkbox = document.getElementById(checkboxId)
+
+                    if (checkbox) {
+                        checkbox.checked = checkboxState.checked
+                        checkbox.indeterminate = checkboxState.indeterminate
+                    }
+
+                    // 递归更新子文件夹
+                    if (node.children) {
+                        updateFolderCheckboxRecursive(node.children, currentPath)
+                    }
+                }
+            })
+        }
+
         // 兼容旧版本的函数
         window.toggleLayerVisibility = function (index, visible) {
             toggleLayerVisibilityByIndex(index, visible)
@@ -705,7 +844,7 @@
             // 如果有 DFC key，也打印 DFC 树形结构
             if (currentDfcKey) {
                 console.log(`=== DFC 树形结构 (key: ${currentDfcKey}) ===`)
-                console.log(viewer.layerManager.getDfcTreeStructure(currentDfcKey))
+                console.log(viewer.layerManager.getTreeStructureByPath(currentDfcKey))
             }
 
             // 打印所有有 path 属性的图层（用于查找可用的 DFC key）

package/examples/ScenePageDemo.html

@@ -128,13 +128,11 @@
         // 加载测试模型 - 请根据实际情况修改模型路径
         try {
             // 尝试加载默认模型，如果失败会显示错误信息
-            // await viewer.loadZipAsync('../../../assets/dgz/49F酒店室内.dgz');
-            await viewer.loadZipAsync('../../../assets/dgz/地下室管综2.dgz');
-            console.log('模型加载成功');
+            await viewer.loadZipAsync('../../../assets/new.dgz');
+            // await viewer.loadZipAsync('../../../assets/dgz/地下室管综2.dgz');
 
             // 模型加载完成后，检查是否有内置场景
             console.log('模型中的场景:', viewer.scenePageManager.pages);
-            console.log('场景数量:', viewer.scenePageManager.pages.length);
 
             // 设置场景页面事件监听
             setupScenePageEvents();
@@ -155,7 +153,6 @@
 
             // 监听页面切换开始事件
             scenePageManager.addEventListener('pageChangeStart', (event) => {
-                console.log('PAGE_CHANGE_START', `开始切换到场景: ${event.page.name}`);
             });
 
             // 监听页面切换进度事件
@@ -165,20 +162,16 @@
                     'cameraPositioned': '相机位置设置完成'
                 };
                 const stageDesc = stageDescriptions[event.stage] || event.stage;
-                console.log('PAGE_CHANGE_PROGRESS', `进度: ${stageDesc}`);
             });
 
             // 监听页面切换完成事件
             scenePageManager.addEventListener('pageChangeComplete', (event) => {
-                console.log('PAGE_CHANGE_COMPLETE', `成功切换到场景: ${event.page?.name || '未知'}`);
             });
 
             // 监听页面切换错误事件
             scenePageManager.addEventListener('pageChangeError', (event) => {
-                console.log('PAGE_CHANGE_ERROR', `切换失败: ${event.error.message || '未知错误'}`);
             });
 
-            console.log('已设置场景页面管理器事件监听器');
         }
 
         // 加载并显示模型中的场景
@@ -219,8 +212,6 @@
 
             // 显示第一个场景的详细信息
             displaySceneDetails(modelScenes[0]);
-
-            console.log('已加载并显示模型中的所有场景');
         }
 
         // 显示场景详细信息
@@ -275,10 +266,6 @@
         window.getModelScenes = getModelScenes;
         window.getSceneByName = getSceneByName;
         window.loadAndDisplayModelScenes = loadAndDisplayModelScenes;
-
-        console.log('场景页面管理器演示已加载');
-        console.log('可用场景:', viewer.scenePageManager.getAllSceneNames());
-        console.log('模型中的场景详情:', viewer.scenePageManager.pages);
     </script>
 </body>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bc-model-viewer",
-  "version": "1.7.23",
+  "version": "1.7.31",
   "main": "./dist/bc-model-viewer.min.js",
   "module": "./dist/bc-model-viewer.min.js",
   "description": "A model viewer",