初始化

2025-12-25 15:47:57 +08:00
parent 04a5e74284
commit 9b6959585d
28 changed files with 6464 additions and 4197 deletions
--- a/src/components/button-group/toolbar/buttons/fullscreen/index.ts
+++ b/src/components/button-group/toolbar/buttons/fullscreen/index.ts
@@ -0,0 +1,91 @@
+import type { ButtonConfig } from '../../../index.type';
+import type { BimEngine } from '../../../../../bim-engine';
+
+/**
+ * 全屏按钮配置
+ */
+export const createFullscreenButton = (_engine: BimEngine): ButtonConfig => {
+    return {
+        id: 'fullscreen',
+        groupId: 'group-2',
+        type: 'button',
+        label: 'toolbar.fullscreen',
+        align: 'vertical',
+        icon: '<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M5 5h5v2H7v3H5V5m9 0h5v5h-2V7h-3V5m3 9h2v5h-5v-2h3v-3m-7 3v2H5v-5h2v3h3z"/></svg>',
+        onClick: async () => {
+            console.log('全屏按钮被点击');
+
+            // 0. 环境检查 (帮助调试 Iframe 问题)
+            const isIframe = window.self !== window.top;
+            if (isIframe) {
+                console.warn('检测到在 Iframe 中运行，请确保父级 iframe 标签拥有 allow="fullscreen" 属性');
+            }
+
+            try {
+                // 1. 获取当前全屏状态 (使用 any 绕过 TS 检查)
+                const doc = document as any;
+                const fullscreenElement = doc.fullscreenElement ||
+                    doc.webkitFullscreenElement ||
+                    doc.mozFullScreenElement ||
+                    doc.msFullscreenElement;
+
+                const isFullscreen = !!fullscreenElement;
+                console.log('当前是否全屏:', isFullscreen);
+
+                // 2. 确定要全屏的目标元素
+                // 优先查找 BIM 容器，如果找不到则使用 document.body
+                const bimContainer = document.querySelector('.bim-engine-container') as HTMLElement;
+                const targetElem = bimContainer || document.body;
+
+                // 将 targetElem 断言为 any，解决 "Property 'webkitRequestFullscreen' does not exist" 报错
+                const el = targetElem as any;
+
+                if (!isFullscreen) {
+                    // === 进入全屏 ===
+                    console.log('准备进入全屏...');
+
+                    // 关键：防止全屏后背景变黑
+                    if (targetElem.style.backgroundColor === '' || targetElem.style.backgroundColor === 'transparent') {
+                        targetElem.style.backgroundColor = '#ffffff'; // 根据你的主题颜色调整
+                    }
+
+                    // 兼容不同浏览器的 API
+                    const requestMethod = el.requestFullscreen ||
+                        el.webkitRequestFullscreen ||
+                        el.mozRequestFullScreen ||
+                        el.msRequestFullscreen;
+
+                    if (requestMethod) {
+                        // 使用 call 绑定正确的上下文
+                        await requestMethod.call(el, { navigationUI: 'hide' });
+                        console.log('全屏请求已发送');
+                    } else {
+                        console.warn('当前浏览器不支持全屏 API');
+                        alert('当前浏览器不支持全屏功能');
+                    }
+
+                } else {
+                    // === 退出全屏 ===
+                    console.log('准备退出全屏...');
+
+                    // 兼容不同浏览器的退出 API
+                    const exitMethod = doc.exitFullscreen ||
+                        doc.webkitExitFullscreen ||
+                        doc.mozCancelFullScreen ||
+                        doc.msExitFullscreen;
+
+                    if (exitMethod) {
+                        await exitMethod.call(doc);
+                        console.log('退出全屏请求已发送');
+                    }
+                }
+            } catch (error: any) {
+                console.error('全屏操作失败:', error);
+                // 专门提示权限问题
+                if (error && error.message && error.message.includes('denied')) {
+                    console.error('全屏请求被拒绝。如果是 Iframe，请检查 allow="fullscreen"。如果是自动触发，请确保由用户点击触发。');
+                }
+            }
+        }
+    };
+};
--- a/src/components/button-group/toolbar/buttons/map/index.ts
+++ b/src/components/button-group/toolbar/buttons/map/index.ts
@@ -0,0 +1,34 @@
+import type { ButtonConfig } from '../../../index.type';
+import type { BimEngine } from '../../../../../bim-engine';
+
+/**
+ * 地图按钮配置（开关按钮）
+ */
+export const createMapButton = (engine: BimEngine): ButtonConfig => {
+    // 监听地图打开/关闭事件，同步按钮状态
+    engine.on('map:opened', () => {
+        engine.toolbar?.setBtnActive('map', true);
+    });
+
+    engine.on('map:closed', () => {
+        engine.toolbar?.setBtnActive('map', false);
+    });
+
+    return {
+        id: 'map',
+        groupId: 'group-1',
+        type: 'button',
+        label: 'toolbar.map',
+        align: 'vertical',
+        keepActive: true,
+        icon: '<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M20.5 3l-.16.03L15 5.1L9 3L3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1l5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/></svg>',
+        onClick: () => {
+            // 切换地图显示状态
+            if (engine.map?.isOpen()) {
+                engine.map?.hide();
+            } else {
+                engine.map?.show();
+            }
+        }
+    };
+};
--- a/src/components/button-group/toolbar/buttons/property/index.ts
+++ b/src/components/button-group/toolbar/buttons/property/index.ts
@@ -0,0 +1,20 @@
+import type { ButtonConfig } from '../../../index.type';
+import type { BimEngine } from '../../../../../bim-engine';
+
+/**
+ * 构件详情按钮配置
+ */
+export const createPropertyButton = (engine: BimEngine): ButtonConfig => {
+    return {
+        id: 'property',
+        groupId: 'group-1',
+        type: 'button',
+        label: 'toolbar.property',
+        align: 'vertical',
+        icon: '<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m0 18h12v-8H6v8m2-6h8v2H8v-2m0 4h5v2H8v-2z"/></svg>',
+        onClick: () => {
+            console.log('构件详情按钮被点击');
+            engine.propertyPanel?.show();
+        }
+    };
+};
--- a/src/components/button-group/toolbar/buttons/walk/walk-menu/index.ts
+++ b/src/components/button-group/toolbar/buttons/walk/walk-menu/index.ts
@@ -2,19 +2,19 @@ import type { ButtonConfig } from '../../../../index.type';
 import type { BimEngine } from '../../../../../../bim-engine';

 /**
- * 漫游菜单按钮配置
+ * 漫游按钮配置（普通按钮，不带子菜单）
 */
-export const createWalkMenuButton = (_engine: BimEngine): ButtonConfig => {
+export const createWalkMenuButton = (engine: BimEngine): ButtonConfig => {
    return {
        id: 'walk',
        groupId: 'group-1',
-        type: 'menu',
+        type: 'button',
        label: 'toolbar.walk',
        align: 'vertical',
        icon: '<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M9 22V8.775q-2.275-.6-3.637-2.512T4 2h2q0 2.075 1.338 3.538T10.75 7h2.5q.75 0 1.4.275t1.175.8L20.35 12.6l-1.4 1.4L15 10.05V22h-2v-6h-2v6zm3-16q-.825 0-1.412-.587T10 4t.588-1.412T12 2t1.413.588T14 4t-.587 1.413T12 6"/></svg>',
-        keepActive: true,
-        onClick: (button) => {
-            console.log('漫游按钮被点击:', button.id);
+        onClick: () => {
+            console.log('漫游按钮被点击');
+            engine.walkControl?.show();
        }
    };
 };