169 lines
4.2 KiB
TypeScript
169 lines
4.2 KiB
TypeScript
/**
|
|
* 工具栏管理器
|
|
* 负责管理底部工具栏的创建、按钮配置和显示控制
|
|
*/
|
|
import type { ButtonGroupColors, ButtonConfig } from '../components/button-group/index.type';
|
|
import { Toolbar } from '../components/button-group/toolbar';
|
|
import type { ThemeConfig } from '../themes/types';
|
|
import { BaseManager } from '../core/base-manager';
|
|
|
|
/**
|
|
* 工具栏管理器
|
|
* 提供工具栏按钮的添加、显示/隐藏、主题更新等功能
|
|
*/
|
|
export class ToolbarManager extends BaseManager {
|
|
/** 工具栏实例 */
|
|
private toolbar: Toolbar | null = null;
|
|
/** 工具栏容器元素 */
|
|
private toolbarContainer: HTMLElement | null = null;
|
|
/** 主容器元素 */
|
|
private container: HTMLElement;
|
|
|
|
constructor(container: HTMLElement) {
|
|
super();
|
|
this.container = container;
|
|
this.init();
|
|
}
|
|
|
|
/** 初始化工具栏 */
|
|
private init() {
|
|
this.toolbarContainer = document.createElement('div');
|
|
this.toolbarContainer.id = 'opt-btn-groups';
|
|
this.toolbarContainer.className = 'bim-engine-opt-btn-container is-bottom-toolbar';
|
|
this.container.appendChild(this.toolbarContainer);
|
|
|
|
this.toolbar = new Toolbar({
|
|
container: this.toolbarContainer,
|
|
type: 'glass-pill',
|
|
showLabel: true,
|
|
direction: 'row',
|
|
position: 'bottom-right',
|
|
align: 'vertical',
|
|
expand: 'up'
|
|
});
|
|
|
|
this.toolbar.init();
|
|
}
|
|
|
|
/**
|
|
* 更新工具栏主题
|
|
* @param theme 主题配置
|
|
*/
|
|
public updateTheme(theme: ThemeConfig) {
|
|
this.toolbar?.setTheme(theme);
|
|
}
|
|
|
|
/** 刷新工具栏渲染 */
|
|
public refresh() {
|
|
this.toolbar?.render();
|
|
}
|
|
|
|
/** 销毁工具栏 */
|
|
public destroy() {
|
|
this.toolbar?.destroy();
|
|
this.toolbar = null;
|
|
super.destroy();
|
|
}
|
|
|
|
/**
|
|
* 添加按钮组
|
|
* @param groupId 组 ID
|
|
* @param beforeGroupId 插入到指定组之前
|
|
*/
|
|
public addGroup(groupId: string, beforeGroupId?: string) {
|
|
this.toolbar?.addGroup(groupId, beforeGroupId);
|
|
this.toolbar?.render();
|
|
}
|
|
|
|
/**
|
|
* 添加按钮
|
|
* @param config 按钮配置
|
|
*/
|
|
public addButton(config: ButtonConfig) {
|
|
this.toolbar?.addButton(config);
|
|
this.toolbar?.render();
|
|
}
|
|
|
|
/**
|
|
* 设置按钮可见性
|
|
* @param id 按钮 ID
|
|
* @param v 是否可见
|
|
*/
|
|
public setButtonVisibility(id: string, v: boolean) {
|
|
this.toolbar?.updateButtonVisibility(id, v);
|
|
}
|
|
|
|
/**
|
|
* 设置是否显示标签
|
|
* @param show 是否显示
|
|
*/
|
|
public setShowLabel(show: boolean) {
|
|
this.toolbar?.setShowLabel(show);
|
|
}
|
|
|
|
/**
|
|
* 设置按钮激活状态
|
|
* @param id 按钮 ID
|
|
* @param active 是否激活
|
|
*/
|
|
public setBtnActive(id: string, active?: boolean) {
|
|
this.toolbar?.setBtnActive(id, active);
|
|
}
|
|
|
|
/**
|
|
* 设置工具栏可见性
|
|
* @param visible 是否可见
|
|
*/
|
|
public setVisible(visible: boolean) {
|
|
if (this.toolbarContainer) {
|
|
this.toolbarContainer.style.visibility = visible ? 'visible' : 'hidden';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 设置背景颜色
|
|
* @param color 颜色值
|
|
*/
|
|
public setBackgroundColor(color: string) {
|
|
this.toolbar?.setBackgroundColor(color);
|
|
}
|
|
|
|
/**
|
|
* 设置按钮组颜色
|
|
* @param colors 颜色配置
|
|
*/
|
|
public setColors(colors: ButtonGroupColors) {
|
|
this.toolbar?.setColors(colors);
|
|
}
|
|
|
|
/** 隐藏工具栏 */
|
|
public hide(): void {
|
|
if (this.toolbarContainer) {
|
|
this.toolbarContainer.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
/** 显示工具栏 */
|
|
public show(): void {
|
|
if (this.toolbarContainer) {
|
|
this.toolbarContainer.style.display = '';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取工具栏容器
|
|
* @returns 容器元素
|
|
*/
|
|
public getContainer(): HTMLElement | null {
|
|
return this.toolbarContainer;
|
|
}
|
|
|
|
public setType(type: 'default' | 'glass-pill'): void {
|
|
this.toolbar?.setType(type);
|
|
}
|
|
|
|
public getType(): 'default' | 'glass-pill' {
|
|
return this.toolbar?.getType() || 'default';
|
|
}
|
|
}
|