74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
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();
|
|
}
|
|
}
|