npm - bc-model-viewer - Versions diffs - 1.7.21 → 1.7.23 - Mend

bc-model-viewer 1.7.21 → 1.7.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/bc-model-viewer.min.js +1 -1
package/examples/LayerManagerDemo.html +737 -0
package/examples/index.html +17 -0
package/package.json +1 -1

package/examples/LayerManagerDemo.html ADDED Viewed

@@ -0,0 +1,737 @@
+<!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>
+        /* 图层管理特殊样式 */
+        .layer-list {
+            max-height: 400px;
+            overflow-y: auto;
+            margin: 15px 0;
+            padding: 10px;
+            background-color: #f9f9f9;
+            border-radius: 8px;
+            border: 1px solid #e0e0e0;
+        }
+        .layer-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin-bottom: 8px;
+            background: white;
+            border-radius: 6px;
+            border: 1px solid #e0e0e0;
+            transition: all 0.2s ease;
+        }
+        .layer-item:hover {
+            background-color: #f5f5f5;
+            border-color: #667eea;
+        }
+        .layer-item.hidden {
+            opacity: 0.5;
+            background-color: #f0f0f0;
+        }
+        .layer-checkbox {
+            width: 18px;
+            height: 18px;
+            margin-right: 12px;
+            cursor: pointer;
+            accent-color: #667eea;
+        }
+        .layer-info {
+            flex: 1;
+            min-width: 0;
+        }
+        .layer-name {
+            font-weight: 500;
+            color: #2c3e50;
+            font-size: 14px;
+            margin-bottom: 4px;
+            word-break: break-word;
+        }
+        .layer-details {
+            font-size: 12px;
+            color: #666;
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+        .layer-detail-item {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .layer-index {
+            display: inline-block;
+            padding: 2px 6px;
+            background-color: #667eea;
+            color: white;
+            border-radius: 4px;
+            font-size: 11px;
+            font-weight: 600;
+        }
+        .layer-folder {
+            color: #999;
+        }
+        .layer-color {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 3px;
+            border: 1px solid #ddd;
+            vertical-align: middle;
+        }
+        .action-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin: 15px 0;
+        }
+        .action-buttons button {
+            flex: 1;
+            min-width: 120px;
+        }
+        .layer-stats {
+            margin-top: 15px;
+            padding: 10px;
+            background-color: #e8f4f8;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #2c3e50;
+        }
+        .layer-stats strong {
+            color: #667eea;
+        }
+        .search-box {
+            width: 100%;
+            padding: 8px 12px;
+            margin-bottom: 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+        }
+        .search-box:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        .empty-state {
+            text-align: center;
+            padding: 40px 20px;
+            color: #999;
+            font-size: 14px;
+        }
+        .empty-state::before {
+            content: '📦';
+            display: block;
+            font-size: 48px;
+            margin-bottom: 10px;
+        }
+        /* 树形结构样式 */
+        .tree-node {
+            margin-left: 0;
+        }
+        .tree-node-children {
+            margin-left: 24px;
+            border-left: 2px solid #e0e0e0;
+            padding-left: 8px;
+        }
+        .tree-folder {
+            display: flex;
+            align-items: center;
+            padding: 8px 10px;
+            margin: 4px 0;
+            background: #f8f9fa;
+            border-radius: 6px;
+            cursor: pointer;
+            user-select: none;
+            transition: all 0.2s ease;
+        }
+        .tree-folder:hover {
+            background: #e9ecef;
+        }
+        .tree-folder-icon {
+            margin-right: 8px;
+            font-size: 14px;
+            transition: transform 0.2s ease;
+        }
+        .tree-folder-icon.collapsed {
+            transform: rotate(-90deg);
+        }
+        .tree-folder-name {
+            font-weight: 600;
+            color: #495057;
+            font-size: 14px;
+        }
+        .tree-layer-item {
+            display: flex;
+            align-items: center;
+            padding: 8px 10px;
+            margin: 4px 0;
+            background: white;
+            border-radius: 6px;
+            border: 1px solid #e0e0e0;
+            transition: all 0.2s ease;
+        }
+        .tree-layer-item:hover {
+            background-color: #f5f5f5;
+            border-color: #667eea;
+        }
+        .tree-layer-item.hidden {
+            opacity: 0.5;
+            background-color: #f0f0f0;
+        }
+        .tree-indent {
+            display: inline-block;
+            width: 20px;
+        }
+        .view-toggle {
+            margin-bottom: 10px;
+            display: flex;
+            gap: 8px;
+        }
+        .view-toggle button {
+            padding: 6px 12px;
+            font-size: 12px;
+            min-width: auto;
+        }
+        .view-toggle button.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div id="container"></div>
+    <a href="index.html" class="back-button">返回示例列表</a>
+    <div class="control-panel">
+        <h2>📚 图层管理演示</h2>
+        <p>此示例演示如何使用 <code>viewer.layerManager</code> API 来管理模型的图层可见性。</p>
+        <div class="action-buttons">
+            <button onclick="showAllLayers()">显示所有</button>
+            <button onclick="hideAllLayers()" class="secondary">隐藏所有</button>
+            <button onclick="toggleAllLayers()">切换所有</button>
+            <button onclick="logLayerInfo()" class="secondary">打印图层信息</button>
+        </div>
+        <div class="layer-stats" id="layerStats">
+            <strong>图层统计:</strong> 加载中...
+        </div>
+        <div class="view-toggle">
+            <button id="treeViewBtn" class="active" onclick="switchView('tree')">树形视图</button>
+            <button id="listViewBtn" onclick="switchView('list')">列表视图</button>
+            <button id="dfcViewBtn" onclick="switchView('dfc')">DFC视图</button>
+        </div>
+        <div id="dfcInputGroup" style="display: none; margin-bottom: 10px;">
+            <input type="text" class="search-box" id="dfcKeyInput" placeholder="输入 DFC key (如: dfc-architecture)"
+                style="margin-bottom: 8px;" onkeypress="if(event.key==='Enter') loadDfcTree()">
+            <button onclick="loadDfcTree()" style="width: 100%;">加载 DFC 树形结构</button>
+            <div style="margin-top: 8px; font-size: 12px; color: #666;">
+                提示：DFC key 格式为 "key1-key2"，例如 "dfc-architecture"
+            </div>
+        </div>
+        <input type="text" class="search-box" id="layerSearch" placeholder="搜索图层名称..." oninput="filterLayers()"
+            style="display: block;">
+        <div class="layer-list" id="layerList">
+            <div class="empty-state">加载模型中...</div>
+        </div>
+        <div class="control-group">
+            <h3>操作说明</h3>
+            <ul style="margin: 0; padding-left: 20px; font-size: 13px; color: #666; line-height: 1.8;">
+                <li>切换"树形视图"、"列表视图"和"DFC视图"查看图层</li>
+                <li>在树形视图中，点击文件夹图标可展开/折叠</li>
+                <li>DFC视图：输入 DFC key (如 "dfc-architecture") 查看特定类型的图层树形结构</li>
+                <li>勾选/取消勾选复选框来切换图层可见性</li>
+                <li>使用搜索框快速查找图层（支持文件夹路径搜索）</li>
+                <li>点击"显示所有"或"隐藏所有"批量操作</li>
+                <li>使用"打印图层信息"查看图层数据和树形结构</li>
+            </ul>
+        </div>
+    </div>
+    <script type="module">
+        import { Viewer } from '../../index.ts'
+        const container = document.getElementById('container')
+        // 实例化 Viewer 对象
+        const viewer = new Viewer(container, {
+            load: {
+                cache: {
+                    enabled: false
+                }
+            },
+        })
+        // 当前视图模式
+        let currentView = 'tree' // 'tree'、'list' 或 'dfc'
+        let expandedFolders = new Set() // 存储展开的文件夹路径
+        let currentDfcKey = '' // 当前 DFC key
+        // 加载测试模型
+        try {
+            await viewer.loadZipAsync('./dgz/ob.dgz')
+            console.log('模型加载成功')
+            // 模型加载完成后，初始化图层列表
+            initializeLayerList()
+        } catch (error) {
+            console.error('模型加载失败:', error)
+            document.getElementById('layerList').innerHTML =
+                '<div class="empty-state">模型加载失败，请检查模型文件路径</div>'
+        }
+        // 初始化图层列表
+        function initializeLayerList() {
+            const layerList = document.getElementById('layerList')
+            const layers = viewer.layerManager.layers
+            if (!layers || layers.length === 0) {
+                layerList.innerHTML = '<div class="empty-state">模型中未发现图层</div>'
+                updateLayerStats()
+                return
+            }
+            // 默认展开所有文件夹
+            const tree = viewer.layerManager.getTreeStructure()
+            expandAllFolders(tree)
+            renderLayerList()
+            updateLayerStats()
+        }
+        // 展开所有文件夹
+        function expandAllFolders(nodes, parentPath = '') {
+            nodes.forEach(node => {
+                if (node.type === 'folder' && node.children) {
+                    const currentPath = parentPath ? `${parentPath}/${node.name}` : node.name
+                    expandedFolders.add(currentPath)
+                    expandAllFolders(node.children, currentPath)
+                }
+            })
+        }
+        // 渲染图层列表
+        function renderLayerList() {
+            const layerList = document.getElementById('layerList')
+            const filterText = document.getElementById('layerSearch').value.toLowerCase()
+            layerList.innerHTML = ''
+            if (currentView === 'dfc') {
+                // DFC 视图：显示 DFC 树形结构
+                if (!currentDfcKey) {
+                    layerList.innerHTML = '<div class="empty-state">请输入 DFC key 并点击"加载 DFC 树形结构"</div>'
+                    return
+                }
+                const dfcTree = viewer.layerManager.getDfcTreeStructure(currentDfcKey)
+                if (dfcTree.length === 0) {
+                    layerList.innerHTML = `<div class="empty-state">未找到匹配的 DFC 图层 (key: ${currentDfcKey})</div>`
+                    return
+                }
+                renderTreeView(dfcTree, filterText, '')
+            } else if (currentView === 'tree') {
+                const tree = viewer.layerManager.getTreeStructure()
+                if (tree.length === 0) {
+                    layerList.innerHTML = '<div class="empty-state">模型中未发现图层</div>'
+                    return
+                }
+                renderTreeView(tree, filterText, '')
+            } else {
+                const layers = viewer.layerManager.layers
+                const filteredLayers = filterText
+                    ? layers.filter(layer => {
+                        const folderStr = Array.isArray(layer.folder)
+                            ? layer.folder.join('/')
+                            : (layer.folder || '')
+                        return layer.name?.toLowerCase().includes(filterText) ||
+                            layer.display_name?.toLowerCase().includes(filterText) ||
+                            folderStr.toLowerCase().includes(filterText)
+                    })
+                    : layers
+                if (filteredLayers.length === 0) {
+                    layerList.innerHTML = '<div class="empty-state">未找到匹配的图层</div>'
+                    return
+                }
+                renderListView(filteredLayers)
+            }
+        }
+        // 渲染树形视图
+        function renderTreeView(nodes, filterText = '', parentPath = '', parentContainer = null) {
+            const container = parentContainer || document.getElementById('layerList')
+            nodes.forEach(node => {
+                const currentPath = parentPath ? `${parentPath}/${node.name}` : node.name
+                const isExpanded = expandedFolders.has(currentPath)
+                if (node.type === 'folder') {
+                    // 检查文件夹或其子节点是否匹配搜索条件
+                    const hasMatch = filterText === '' || nodeMatchesFilter(node, filterText, true)
+                    if (filterText === '' || hasMatch) {
+                        const folderDiv = document.createElement('div')
+                        folderDiv.className = 'tree-folder'
+                        folderDiv.innerHTML = `
+                            <span class="tree-folder-icon ${isExpanded ? '' : 'collapsed'}">▶</span>
+                            <span class="tree-folder-name">📁 ${node.name}</span>
+                        `
+                        folderDiv.onclick = (e) => {
+                            e.stopPropagation()
+                            toggleFolder(currentPath)
+                        }
+                        container.appendChild(folderDiv)
+                        // 渲染子节点
+                        if (node.children && node.children.length > 0) {
+                            const childrenDiv = document.createElement('div')
+                            childrenDiv.className = 'tree-node-children'
+                            childrenDiv.style.display = isExpanded ? 'block' : 'none'
+                            childrenDiv.setAttribute('data-path', currentPath)
+                            container.appendChild(childrenDiv)
+                            // 递归渲染子节点
+                            renderTreeView(node.children, filterText, currentPath, childrenDiv)
+                        }
+                    }
+                } else if (node.type === 'layer') {
+                    // 图层节点
+                    if (filterText === '' || nodeMatchesFilter(node, filterText, false)) {
+                        const layer = node.layer
+                        const layerIndex = node.layerIndex
+                        const colorStyle = layer.color
+                            ? `background-color: rgba(${layer.color[0]}, ${layer.color[1]}, ${layer.color[2]}, ${layer.color[3] || 1})`
+                            : 'background-color: #ccc'
+                        const layerItem = document.createElement('div')
+                        layerItem.className = `tree-layer-item ${!layer.visible ? 'hidden' : ''}`
+                        layerItem.setAttribute('data-layer-index', layerIndex)
+                        layerItem.innerHTML = `
+                            <input type="checkbox"
+                                   class="layer-checkbox"
+                                   ${layer.visible ? 'checked' : ''}
+                                   onchange="toggleLayerVisibilityByIndex(${layerIndex}, this.checked)">
+                            <div class="layer-info">
+                                <div class="layer-name">${layer.display_name || layer.name || '未命名图层'}</div>
+                                <div class="layer-details">
+                                    <span class="layer-detail-item">
+                                        <span class="layer-index">#${layerIndex}</span>
+                                    </span>
+                                    ${layer.color ? `<span class="layer-color" style="${colorStyle}"></span>` : ''}
+                                    ${layer.id ? `<span class="layer-detail-item" style="color: #999; font-size: 11px;">ID: ${layer.id}</span>` : ''}
+                                </div>
+                            </div>
+                        `
+                        container.appendChild(layerItem)
+                    }
+                }
+            })
+        }
+        // 检查节点是否匹配搜索条件
+        function nodeMatchesFilter(node, filterText, isFolder) {
+            if (isFolder && node.children) {
+                // 文件夹：检查名称或子节点是否匹配
+                if (node.name.toLowerCase().includes(filterText)) return true
+                return node.children.some(child => nodeMatchesFilter(child, filterText, child.type === 'folder'))
+            } else if (node.layer) {
+                // 图层：检查名称
+                const layer = node.layer
+                return layer.name?.toLowerCase().includes(filterText) ||
+                    layer.display_name?.toLowerCase().includes(filterText)
+            }
+            return false
+        }
+        // 渲染列表视图
+        function renderListView(layers) {
+            const layerList = document.getElementById('layerList')
+            layers.forEach((layer, index) => {
+                const originalIndex = viewer.layerManager.layers.indexOf(layer)
+                const layerItem = document.createElement('div')
+                layerItem.className = `layer-item ${!layer.visible ? 'hidden' : ''}`
+                const folderStr = Array.isArray(layer.folder)
+                    ? layer.folder.join(' / ')
+                    : (layer.folder || '')
+                const colorStyle = layer.color
+                    ? `background-color: rgba(${layer.color[0]}, ${layer.color[1]}, ${layer.color[2]}, ${layer.color[3] || 1})`
+                    : 'background-color: #ccc'
+                layerItem.innerHTML = `
+                    <input type="checkbox"
+                           class="layer-checkbox"
+                           ${layer.visible ? 'checked' : ''}
+                           onchange="toggleLayerVisibilityByIndex(${originalIndex}, this.checked)">
+                    <div class="layer-info">
+                        <div class="layer-name">${layer.display_name || layer.name || '未命名图层'}</div>
+                        <div class="layer-details">
+                            <span class="layer-detail-item">
+                                <span class="layer-index">#${originalIndex}</span>
+                            </span>
+                            ${folderStr ? `<span class="layer-detail-item layer-folder">📁 ${folderStr}</span>` : ''}
+                            ${layer.color ? `<span class="layer-color" style="${colorStyle}"></span>` : ''}
+                            ${layer.id ? `<span class="layer-detail-item" style="color: #999; font-size: 11px;">ID: ${layer.id}</span>` : ''}
+                        </div>
+                    </div>
+                `
+                layerList.appendChild(layerItem)
+            })
+        }
+        // 切换文件夹展开/折叠
+        function toggleFolder(path) {
+            if (expandedFolders.has(path)) {
+                expandedFolders.delete(path)
+            } else {
+                expandedFolders.add(path)
+            }
+            renderLayerList()
+        }
+        // 切换视图模式
+        window.switchView = function (view) {
+            currentView = view
+            document.getElementById('treeViewBtn').classList.toggle('active', view === 'tree')
+            document.getElementById('listViewBtn').classList.toggle('active', view === 'list')
+            document.getElementById('dfcViewBtn').classList.toggle('active', view === 'dfc')
+            // 显示/隐藏 DFC 输入框
+            const dfcInputGroup = document.getElementById('dfcInputGroup')
+            const layerSearch = document.getElementById('layerSearch')
+            if (view === 'dfc') {
+                dfcInputGroup.style.display = 'block'
+                layerSearch.style.display = 'none'
+            } else {
+                dfcInputGroup.style.display = 'none'
+                layerSearch.style.display = 'block'
+            }
+            renderLayerList()
+        }
+        // 加载 DFC 树形结构
+        window.loadDfcTree = function () {
+            const dfcKeyInput = document.getElementById('dfcKeyInput')
+            const key = dfcKeyInput.value.trim()
+            if (!key) {
+                alert('请输入 DFC key')
+                return
+            }
+            currentDfcKey = key
+            renderLayerList()
+            updateLayerStats()
+        }
+        // 更新图层统计信息
+        function updateLayerStats() {
+            const layers = viewer.layerManager.layers
+            if (!layers || layers.length === 0) {
+                document.getElementById('layerStats').innerHTML =
+                    '<strong>图层统计:</strong> 无图层数据'
+                return
+            }
+            let statsHtml = ''
+            if (currentView === 'dfc' && currentDfcKey) {
+                // DFC 视图：显示匹配的图层统计
+                const dfcTree = viewer.layerManager.getDfcTreeStructure(currentDfcKey)
+                const dfcLayers = getAllLayersFromTree(dfcTree)
+                const total = dfcLayers.length
+                const visible = dfcLayers.filter(l => l.visible !== false).length
+                const hidden = total - visible
+                statsHtml = `
+                    <strong>DFC 图层统计 (key: ${currentDfcKey}):</strong>
+                    匹配 ${total} 个图层 |
+                    可见 ${visible} 个 |
+                    隐藏 ${hidden} 个
+                `
+            } else {
+                // 普通视图：显示所有图层统计
+                const total = layers.length
+                const visible = layers.filter(l => l.visible !== false).length
+                const hidden = total - visible
+                const hiddenIndices = viewer.layerManager.getHiddenIndices()
+                statsHtml = `
+                    <strong>图层统计:</strong>
+                    总计 ${total} 个图层 |
+                    可见 ${visible} 个 |
+                    隐藏 ${hidden} 个
+                    ${hiddenIndices.length > 0 ? `| 隐藏索引: [${hiddenIndices.join(', ')}]` : ''}
+                `
+            }
+            document.getElementById('layerStats').innerHTML = statsHtml
+        }
+        // 从树形结构中获取所有图层
+        function getAllLayersFromTree(nodes) {
+            const layers = []
+            nodes.forEach(node => {
+                if (node.type === 'layer' && node.layer) {
+                    layers.push(node.layer)
+                } else if (node.type === 'folder' && node.children) {
+                    layers.push(...getAllLayersFromTree(node.children))
+                }
+            })
+            return layers
+        }
+        // 切换图层可见性（通过索引）
+        window.toggleLayerVisibilityByIndex = function (index, visible) {
+            const layers = viewer.layerManager.layers
+            if (index >= 0 && index < layers.length) {
+                layers[index].visible = visible
+                viewer.updateMeshVisibleByLayer()
+                updateLayerStats()
+                // 更新UI状态
+                const layerItems = document.querySelectorAll(`[data-layer-index="${index}"]`)
+                layerItems.forEach(item => {
+                    item.classList.toggle('hidden', !visible)
+                    const checkbox = item.querySelector('input[type="checkbox"]')
+                    if (checkbox) checkbox.checked = visible
+                })
+            }
+        }
+        // 兼容旧版本的函数
+        window.toggleLayerVisibility = function (index, visible) {
+            toggleLayerVisibilityByIndex(index, visible)
+        }
+        // 显示所有图层
+        window.showAllLayers = function () {
+            const layers = viewer.layerManager.layers
+            layers.forEach(layer => {
+                layer.visible = true
+            })
+            viewer.updateMeshVisibleByLayer()
+            renderLayerList()
+            updateLayerStats()
+        }
+        // 隐藏所有图层
+        window.hideAllLayers = function () {
+            const layers = viewer.layerManager.layers
+            layers.forEach(layer => {
+                layer.visible = false
+            })
+            viewer.updateMeshVisibleByLayer()
+            renderLayerList()
+            updateLayerStats()
+        }
+        // 切换所有图层
+        window.toggleAllLayers = function () {
+            const layers = viewer.layerManager.layers
+            const allVisible = layers.every(layer => layer.visible !== false)
+            layers.forEach(layer => {
+                layer.visible = !allVisible
+            })
+            viewer.updateMeshVisibleByLayer()
+            renderLayerList()
+            updateLayerStats()
+        }
+        // 过滤图层
+        window.filterLayers = function () {
+            renderLayerList()
+        }
+        // 打印图层信息
+        window.logLayerInfo = function () {
+            console.log('=== 图层信息 ===')
+            console.log('图层总数:', viewer.layerManager.layers.length)
+            console.log('所有图层:', viewer.layerManager.layers)
+            console.log('隐藏的图层索引:', viewer.layerManager.getHiddenIndices())
+            console.log('可见图层:', viewer.layerManager.layers.filter(l => l.visible !== false))
+            console.log('隐藏图层:', viewer.layerManager.layers.filter(l => l.visible === false))
+            console.log('树形结构:', viewer.layerManager.getTreeStructure())
+            // 如果有 DFC key，也打印 DFC 树形结构
+            if (currentDfcKey) {
+                console.log(`=== DFC 树形结构 (key: ${currentDfcKey}) ===`)
+                console.log(viewer.layerManager.getDfcTreeStructure(currentDfcKey))
+            }
+            // 打印所有有 path 属性的图层（用于查找可用的 DFC key）
+            const layersWithPath = viewer.layerManager.layers.filter(l =>
+                l.path && Array.isArray(l.path) && l.path.length >= 2
+            )
+            if (layersWithPath.length > 0) {
+                console.log('=== 有 path 属性的图层（可用于 DFC） ===')
+                const pathKeys = new Set()
+                layersWithPath.forEach(layer => {
+                    const path = Array.isArray(layer.path) ? layer.path : []
+                    if (path.length >= 2) {
+                        const key = path.slice(0, 2).join('-')
+                        pathKeys.add(key)
+                    }
+                })
+                console.log('可用的 DFC keys:', Array.from(pathKeys))
+            }
+        }
+        // 暴露 viewer 实例到 window 对象，方便调试
+        window.viewer = viewer
+        console.log('图层管理演示已加载')
+    </script>
+</body>
+</html>