bc-model-viewer 1.7.23 → 1.7.45

package/examples/AnnotationTool.html

@@ -24,7 +24,12 @@
       <button onclick="tool.clear()" class="danger">清除所有</button>
     </div>
     <div class="control-group">
-      <button onclick="console.log(tool.getAnnotations())">打印数据</button>
+      <button onclick="tool.updateAnnotationsVisibility(20)">显示所有批注</button>
+      <button onclick="hideAllAnnotations()">隐藏所有批注</button>
+    </div>
+    <div class="control-group">
+      <button onclick="loadTestAnnotations()">加载测试批注</button>
+      <button onclick="console.log(tool.getAnnotations())">打印批注数据</button>
     </div>
     <div class="control-group">
       <p style="font-size: 12px; color: #888; margin-top: 10px;">
@@ -57,8 +62,8 @@
     })
 
     // 加载测试模型
-    await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
-    // await viewer.loadZipAsync('../../assets/new.dgz')
+    // await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
+    await viewer.loadZipAsync('../../assets/new.dgz')
 
     // AnnotationTool 已在 Viewer 构造函数中自动初始化
     // 可以通过 viewer.annotationTool 访问
@@ -68,6 +73,63 @@
 
     window.tool = tool
     window.viewer = viewer
+
+    // 辅助函数：隐藏所有批注
+    window.hideAllAnnotations = function() {
+      if (!tool || !tool.annotations) return;
+      
+      tool.annotations.forEach((annotation) => {
+        annotation.line.visible = false;
+        annotation.label.visible = false;
+      });
+    };
+
+    // 辅助函数：加载测试批注数据
+    window.loadTestAnnotations = function() {
+      if (!tool) return;
+      
+      // 测试批注数据（使用简单的坐标）
+      const testAnnotations = [
+        {
+          point: [0, 0, 0],
+          label: "测试批注 1",
+          viewport: {
+            x: 100,
+            y: 100,
+            width: 800,
+            height: 600
+          }
+        },
+        {
+          point: [1, 1, 1],
+          label: "测试批注 2",
+          viewport: {
+            x: 100,
+            y: 100,
+            width: 800,
+            height: 600
+          }
+        },
+        {
+          point: [-1, -1, 0],
+          label: "测试批注 3",
+          viewport: {
+            x: 100,
+            y: 100,
+            width: 800,
+            height: 600
+          }
+        }
+      ];
+      
+      try {
+        tool.loadAnnotationsFromData(testAnnotations);
+        console.log('测试批注加载成功');
+      } catch (error) {
+        console.error('加载测试批注失败:', error);
+      }
+    };
+
   </script>
 
 </body>

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('../../../assets/new.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/PropertyViewerDemo.html

@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>属性查看工具演示 - Bc-model-viewer</title>
+  <link rel="stylesheet" href="common-styles.css">
+  <style>
+    .demo {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      z-index: 1000;
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(10px);
+      border-radius: 12px;
+      padding: 20px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      max-width: 350px;
+    }
+
+    .control-group {
+      margin-bottom: 15px;
+    }
+
+    .control-group h3 {
+      margin: 0 0 10px 0;
+      color: #333;
+      font-size: 16px;
+    }
+
+    .btn {
+      background: #377ee8;
+      color: white;
+      border: none;
+      padding: 8px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: background 0.2s;
+      margin-right: 8px;
+      margin-bottom: 8px;
+    }
+
+    .btn:hover {
+      background: #2a6bd1;
+    }
+
+    .btn.active {
+      background: #1e4f9e;
+    }
+
+    .btn:disabled {
+      background: #aaa;
+      cursor: not-allowed;
+    }
+
+    .instructions {
+      background: rgba(55, 126, 232, 0.1);
+      border: 1px solid rgba(55, 126, 232, 0.3);
+      border-radius: 4px;
+      padding: 15px;
+      margin-bottom: 15px;
+    }
+
+    .instructions h4 {
+      margin: 0 0 10px 0;
+      color: #377ee8;
+    }
+
+    .instructions ul {
+      margin: 0;
+      padding-left: 20px;
+    }
+
+    .instructions li {
+      margin-bottom: 5px;
+      color: #666;
+      font-size: 13px;
+    }
+
+    .model-info {
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 4px;
+      padding: 15px;
+      margin-bottom: 15px;
+    }
+
+    .model-info h4 {
+      margin: 0 0 10px 0;
+      color: #377ee8;
+    }
+
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 5px;
+      font-size: 13px;
+    }
+
+    .info-label {
+      color: #666;
+    }
+
+    .info-value {
+      color: #333;
+      font-weight: 500;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="container"></div>
+  <a href="index.html" class="back-button">返回示例列表</a>
+
+  <div class="demo">
+    <h2>🔍 属性查看工具演示</h2>
+    <p>点击模型上的对象查看其属性信息，包括基本属性和用户自定义数据。</p>
+
+    <div class="instructions">
+      <h4>使用说明</h4>
+      <ul>
+        <li>点击"激活工具"按钮启用属性查看功能</li>
+        <li>点击模型上的任意对象查看其属性</li>
+        <li>属性信息将显示在右侧面板中</li>
+        <li>点击空白区域可关闭属性面板</li>
+        <li>支持查看基本属性和用户自定义属性</li>
+      </ul>
+    </div>
+
+    <div class="control-group">
+      <h3>工具控制</h3>
+      <button id="activateBtn" class="btn">激活工具</button>
+      <button id="deactivateBtn" class="btn" disabled>停用工具</button>
+    </div>
+
+    <div class="control-group">
+      <h3>加载模型</h3>
+      <button id="loadModel1" class="btn">加载测试模型1</button>
+      <button id="loadModel2" class="btn">加载测试模型2</button>
+    </div>
+
+    <div class="model-info">
+      <h4>当前状态</h4>
+      <div class="info-item">
+        <span class="info-label">工具状态:</span>
+        <span id="toolStatus" class="info-value">未激活</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">已选择对象:</span>
+        <span id="selectedObject" class="info-value">无</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">模型加载:</span>
+        <span id="modelStatus" class="info-value">未加载</span>
+      </div>
+    </div>
+
+    <div class="control-group">
+      <p style="font-size: 12px; color: #888; margin-top: 10px;">
+        💡 使用提示：<br>
+        • 激活工具后，鼠标悬停在对象上会显示对象名称<br>
+        • 点击对象后，属性面板会显示在右上角<br>
+        • 支持查看位置、旋转、缩放等基本属性<br>
+        • 自动提取并显示对象的用户自定义数据<br>
+        • 点击空白区域或关闭按钮可隐藏属性面板
+      </p>
+    </div>
+  </div>
+
+  <script type="module">
+    import { Viewer, PropertyViewerTool } from '../../index.ts'
+
+    const container = document.getElementById('container')
+
+    // 实例化 Viewer 对象
+    const viewer = new Viewer(container, {
+      load: {
+        cache: {
+          enabled: false
+        }
+      }
+    })
+
+    let propertyViewerTool = null
+
+    // 更新状态显示
+    function updateStatus() {
+      document.getElementById('toolStatus').textContent =
+        propertyViewerTool && propertyViewerTool.isActive ? '已激活' : '未激活'
+
+      document.getElementById('selectedObject').textContent =
+        propertyViewerTool && propertyViewerTool.selectedObject ?
+          (propertyViewerTool.selectedObject.name || propertyViewerTool.selectedObject.type) : '无'
+    }
+
+    // 激活属性查看工具
+    document.getElementById('activateBtn').addEventListener('click', () => {
+      if (!propertyViewerTool) {
+        propertyViewerTool = new PropertyViewerTool(viewer)
+      }
+
+      // 停用其他工具
+    //   viewer.deactivateAllTools()
+
+      // 激活属性查看工具
+      propertyViewerTool.activate()
+
+      // 更新按钮状态
+      document.getElementById('activateBtn').disabled = true
+      document.getElementById('deactivateBtn').disabled = false
+
+      updateStatus()
+    })
+
+    // 停用属性查看工具
+    document.getElementById('deactivateBtn').addEventListener('click', () => {
+      if (propertyViewerTool) {
+        propertyViewerTool.deactivate()
+
+        // 更新按钮状态
+        document.getElementById('activateBtn').disabled = false
+        document.getElementById('deactivateBtn').disabled = true
+
+        updateStatus()
+      }
+    })
+
+    // 加载测试模型1
+    document.getElementById('loadModel1').addEventListener('click', async () => {
+      try {
+        // 加载测试模型
+        await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
+        document.getElementById('modelStatus').textContent = '模型1已加载'
+
+        // 为模型对象添加一些自定义属性用于测试
+        setTimeout(() => {
+          if (viewer.scene && viewer.scene.children.length > 0) {
+            viewer.scene.children.forEach((child, index) => {
+              // 添加一些测试用的用户数据
+              child.userData = {
+                material: 'Steel',
+                weight: '15kg',
+                manufacturer: 'Test Corp',
+                partNumber: `PN-${index + 1000}`,
+                description: '这是一个测试对象的描述信息'
+              }
+            })
+          }
+        }, 100)
+
+      } catch (error) {
+        console.error('加载模型失败:', error)
+        document.getElementById('modelStatus').textContent = '加载失败'
+      }
+    })
+
+    // 加载测试模型2
+    document.getElementById('loadModel2').addEventListener('click', async () => {
+      try {
+        // 加载另一个测试模型
+        await viewer.loadZipAsync('../../assets/dgz/样板间.dgz')
+        document.getElementById('modelStatus').textContent = '模型2已加载'
+
+        // 为模型对象添加不同的自定义属性
+        setTimeout(() => {
+          if (viewer.scene && viewer.scene.children.length > 0) {
+            viewer.scene.children.forEach((child, index) => {
+              child.userData = {
+                material: 'Aluminum',
+                weight: '8kg',
+                manufacturer: 'Demo Inc',
+                partNumber: `PN-${index + 2000}`,
+                color: 'Blue',
+                productionDate: '2024-01-15'
+              }
+            })
+          }
+        }, 100)
+
+      } catch (error) {
+        console.error('加载模型失败:', error)
+        document.getElementById('modelStatus').textContent = '加载失败'
+      }
+    })
+
+    // 初始状态更新
+    updateStatus()
+
+    // 暴露到全局对象方便调试
+    window.viewer = viewer
+    window.propertyViewerTool = propertyViewerTool
+
+    console.log('属性查看工具演示已初始化')
+  </script>
+</body>
+
+</html>