feat: 新增底部Dock测量面板与回调联动

2026-03-30 10:53:39 +08:00
parent c11140f967
commit 2574a11284
42 changed files with 18388 additions and 11404 deletions
--- a/src/managers/radial-toolbar-manager.ts
+++ b/src/managers/radial-toolbar-manager.ts
@@ -0,0 +1,73 @@
+import { BaseManager } from '../core/base-manager';
+import { ManagerRegistry } from '../core/manager-registry';
+import { RadialToolbar } from '../components/radial-toolbar';
+import type { RadialMenuItem } from '../components/radial-toolbar/types';
+import { themeManager } from '../services/theme';
+import { getIcon } from '../utils/icon-manager';
+import type { BottomDockStateChange } from './bottom-dock-manager';
+import { createMeasureRadialButton } from '../components/radial-toolbar/buttons/measure';
+import { createSectionRadialButton } from '../components/radial-toolbar/buttons/section';
+import { createSettingRadialButton } from '../components/radial-toolbar/buttons/setting';
+import { createWalkRadialButton } from '../components/radial-toolbar/buttons/walk';
+
+export interface RadialToolbarManagerOptions {
+    items?: RadialMenuItem[];
+    itemsPerRing?: number;
+}
+
+export class RadialToolbarManager extends BaseManager {
+    private toolbar: RadialToolbar | null = null;
+    private unsubscribeDockState: (() => void) | null = null;
+
+    constructor(container: HTMLElement, registry: ManagerRegistry, options?: RadialToolbarManagerOptions) {
+        super(registry);
+        this.toolbar = new RadialToolbar({
+            container,
+            items: options?.items ?? this.createDefaultItems(),
+            itemsPerRing: options?.itemsPerRing ?? 4,
+            mainButtonIcon: getIcon('主视角'),
+            mainButtonLabel: 'toolbar.home',
+            onMainButtonClick: () => {
+                console.log('[RadialToolbar] main: home');
+                this.registry.engine3d?.getEngineComponent()?.CameraGoHome();
+            }
+        });
+        this.toolbar.setTheme(themeManager.getTheme());
+
+        this.unsubscribeDockState = this.registry.bottomDock?.onStateChange(({ id, open }: BottomDockStateChange) => {
+            this.toolbar?.setItemActive(id, open);
+        }) ?? null;
+
+        this.syncInitialToggleStates();
+    }
+
+    private createDefaultItems(): RadialMenuItem[] {
+        return [
+            createSettingRadialButton(this.registry),
+            createMeasureRadialButton(this.registry),
+            createSectionRadialButton(this.registry),
+            createWalkRadialButton(this.registry),
+        ];
+    }
+
+    private syncInitialToggleStates(): void {
+        const dock = this.registry.bottomDock;
+        if (!dock || !this.toolbar) {
+            return;
+        }
+
+        this.toolbar.setItemActive('measure', dock.isOpen('measure'));
+        this.toolbar.setItemActive('section', dock.isOpen('section'));
+        this.toolbar.setItemActive('walk', dock.isOpen('walk'));
+    }
+
+    public destroy(): void {
+        if (this.unsubscribeDockState) {
+            this.unsubscribeDockState();
+            this.unsubscribeDockState = null;
+        }
+        this.toolbar?.destroy();
+        this.toolbar = null;
+        super.destroy();
+    }
+}