style(menu): remove default list style bullets from menu

This commit is contained in:
yuding
2025-12-10 09:42:05 +08:00
parent 9ae1d9d809
commit 9903a71015
15 changed files with 1668 additions and 1683 deletions

View File

@@ -274,7 +274,7 @@ const initEngine = () => {
try {
// 初始化引擎,使用默认配置
const success = engine.value.initEngine({
const success = engine.value.engine.initialize({
backgroundColor: 0x333333, // 深色背景
version: 'v1', // WebGL 版本
showStats: true, // 显示性能统计
@@ -311,7 +311,7 @@ const loadModel = () => {
try {
// 加载模型文件(从 model 目录)
const modelUrl = '/model/gujianzhu.glb';
engine.value.engine.loadModel(modelUrl, {
position: [0, 0, 0], // 初始位置
rotation: [0, 0, 0], // 初始旋转
@@ -417,4 +417,3 @@ button.primary:hover {
position: relative;
}
</style>

View File

@@ -335,7 +335,7 @@
try {
// 初始化引擎,使用默认配置
const success = engine.initEngine({
const success = engine.engine.initialize({
backgroundColor: 0x333333, // 深色背景
version: 'v1', // WebGL 版本
showStats: true, // 显示性能统计

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

19
dist/index.d.ts vendored
View File

@@ -141,12 +141,10 @@ declare class BimDialog implements IBimComponent {
export declare class BimEngine extends EventEmitter {
private container;
private wrapper;
private topLeftGroup;
toolbar: ToolbarManager | null;
buttonGroup: ButtonGroupManager | null;
dialog: DialogManager | null;
engine: EngineManager | null;
rightKey: RightKeyManager | null;
get localeManager(): LocaleManager;
get themeManager(): ThemeManager;
constructor(container: HTMLElement | string, options?: {
@@ -160,12 +158,6 @@ export declare class BimEngine extends EventEmitter {
setTheme(theme: 'dark' | 'light'): void;
setCustomTheme(theme: ThemeConfig): void;
private init;
/**
* 初始化 3D 引擎组件
* 注意:只初始化引擎,不加载模型。模型加载在使用层(如 demo.html进行
* @param options 引擎配置选项(可选)
*/
initEngine(options?: Omit<EngineOptions, 'container'>): boolean;
private updateTheme;
destroy(): void;
}
@@ -355,11 +347,11 @@ export declare function createEngine(r) {
const e = r.version || "v1";
switch (e) {
case "v2":
return new Bc(r);
return new Oc(r);
case "v1":
return new N_(r);
return new U_(r);
:
return console.warn(`Version '${e}' not found. Falling back to v2.`), new Bc(r);
return console.warn(`Version '${e}' not found. Falling back to v2.`), new Oc(r);
}
}
@@ -492,6 +484,7 @@ declare class EngineManager extends BimComponent {
private container;
/** 3D 引擎组件实例 */
private engineInstance;
rightKey: RightKeyManager | null;
/**
* 构造函数
* @param engine 引擎实例
@@ -505,7 +498,7 @@ declare class EngineManager extends BimComponent {
*/
initialize(options?: Omit<EngineOptions, 'container'>): boolean;
/**
* 检 3D 引擎是否已初始化
* 检<EFBFBD><EFBFBD><EFBFBD> 3D 引擎是否已初始化
*/
isInitialized(): boolean;
/**
@@ -713,7 +706,7 @@ declare class RightKeyManager extends BimComponent {
* @param x 屏幕 X 坐标
* @param y 屏幕 Y 坐标
* @param items 菜单项列表
* @param groupOrder 可<EFBFBD><EFBFBD>的分组顺序
* @param groupOrder 可的分组顺序
*/
showMenu(x: number, y: number, items: MenuItemConfig[], groupOrder?: string[]): void;
/**

View File

@@ -3,7 +3,6 @@ import { ToolbarManager } from './managers/toolbar-manager';
import { ButtonGroupManager } from './managers/button-group-manager';
import { DialogManager } from './managers/dialog-manager';
import { EngineManager } from './managers/engine-manager';
import { RightKeyManager } from './managers/right-key-manager';
import type { EngineOptions, ModelLoadOptions } from './components/engine';
import { localeManager } from './services/locale';
import { themeManager } from './services/theme';
@@ -17,13 +16,11 @@ export type { EngineOptions, ModelLoadOptions };
export class BimEngine extends EventEmitter {
private container: HTMLElement;
private wrapper: HTMLElement | null = null;
private topLeftGroup: any = null; // 保存左上角按钮组的引用
public toolbar: ToolbarManager | null = null; // 底部专用
public buttonGroup: ButtonGroupManager | null = null; // 通用
public dialog: DialogManager | null = null;
public engine: EngineManager | null = null; // 3D 引擎管理器
public rightKey: RightKeyManager | null = null; // 右键菜单管理器
public get localeManager() { return localeManager; }
public get themeManager() { return themeManager; }
@@ -74,45 +71,19 @@ export class BimEngine extends EventEmitter {
// 创建 3D 引擎管理器
this.engine = new EngineManager(this, this.wrapper);
// 初始化其他管理器
this.dialog = new DialogManager(this, this.wrapper);
this.toolbar = new ToolbarManager(this, this.wrapper);
this.buttonGroup = new ButtonGroupManager(this, this.wrapper);
this.rightKey = new RightKeyManager(this, this.wrapper);
// 初始主题
this.updateTheme(themeManager.getTheme());
// 在主题更新后,设置左上角按钮组的自定义颜色
if (this.topLeftGroup) {
this.topLeftGroup.setColors({
backgroundColor: '#ff00ff'
});
}
// 订阅主题变化
themeManager.subscribe((theme) => {
this.updateTheme(theme);
});
}
/**
* 初始化 3D 引擎组件
* 注意:只初始化引擎,不加载模型。模型加载在使用层(如 demo.html进行
* @param options 引擎配置选项(可选)
*/
public initEngine(options?: Omit<EngineOptions, 'container'>): boolean {
if (!this.engine) {
console.error('[BimEngine] Engine manager not available.');
return false;
}
// 调用 manager 的 initialize 方法初始化引擎
return this.engine.initialize(options);
}
private updateTheme(theme: ThemeConfig) {
if (this.wrapper) {
this.wrapper.style.backgroundColor = theme.background;
this.wrapper.style.color = theme.textPrimary;
@@ -123,9 +94,8 @@ export class BimEngine extends EventEmitter {
this.toolbar?.destroy();
this.buttonGroup?.destroy();
this.engine?.destroy();
this.rightKey?.destroy();
this.dialog = null;
this.dialog?.destroy();
this.container.innerHTML = '';
this.clear(); // Clear all events
this.clear();
}
}
}

View File

@@ -9,7 +9,7 @@ export const fourMenuButton = (engine: BimEngine): MenuItemConfig => {
onClick: () => {
console.log('dianjile')
engine.dialog?.showInfoDialog()
engine.rightKey?.hide()
engine.engine?.rightKey?.hide()
}
}
}

View File

@@ -12,7 +12,7 @@ export const homeMenuButton = (engine: BimEngine): MenuItemConfig => {
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7q.425 0 .713-.288T13 6t-.288-.712T12 5t-.712.288T11 6t.288.713T12 7m0 8q.425 0 .713-.288T13 14v-4q0-.425-.288-.712T12 9t-.712.288T11 10v4q0 .425.288.713T12 15m-6 3l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18z"/></svg>',
onClick: () => {
engine.dialog?.showInfoDialog()
engine.rightKey?.hide()
engine.engine?.rightKey?.hide()
}
}
}

View File

@@ -10,7 +10,7 @@ export const infoMenuButton = (engine: BimEngine): MenuItemConfig => {
onClick: () => {
console.log('dianjile')
engine.dialog?.showInfoDialog()
engine.rightKey?.hide()
engine.engine?.rightKey?.hide()
}
}
}

View File

@@ -9,7 +9,7 @@ export const secondMenuButton = (engine: BimEngine): MenuItemConfig => {
onClick: () => {
console.log('dianjile')
engine.dialog?.showInfoDialog()
engine.rightKey?.hide()
engine.engine?.rightKey?.hide()
}
}
}

View File

@@ -4,6 +4,8 @@
background: var(--bim-ui_bg_color, #2b2d30);
border-radius: 4px;
padding: 4px 0;
margin: 0; /* 移除默认外边距 */
list-style: none; /* 移除列表小圆点 */
min-width: 160px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

View File

@@ -1,6 +1,9 @@
import { Engine, type EngineOptions, type ModelLoadOptions } from '../components/engine';
import { BimComponent } from '../core/component';
import type { BimEngine } from '../bim-engine';
import { RightKeyManager } from './right-key-manager';
import { infoMenuButton } from '../components/menu/buttons/info';
import { homeMenuButton } from '../components/menu/buttons/home';
/**
* 3D 引擎管理器
@@ -13,6 +16,8 @@ export class EngineManager extends BimComponent {
/** 3D 引擎组件实例 */
private engineInstance: Engine | null = null;
public rightKey: RightKeyManager | null = null; // 右键菜单管理器
/**
* 构造函数
* @param engine 引擎实例
@@ -47,6 +52,17 @@ export class EngineManager extends BimComponent {
// 调用组件的 init 方法初始化引擎
this.engineInstance.init();
// 初始化右键 (移到 return 之前)
this.rightKey = new RightKeyManager(this.engine, this.container);
// 注册默认右键菜单
this.rightKey.registerHandler((_e) => {
return [
infoMenuButton(this.engine),
homeMenuButton(this.engine)
];
});
return this.engineInstance.isInitialized();
} catch (error) {
console.error('[EngineManager] Failed to initialize 3D engine:', error);
@@ -54,9 +70,8 @@ export class EngineManager extends BimComponent {
return false;
}
}
/**
* 检 3D 引擎是否已初始化
* 检<EFBFBD><EFBFBD><EFBFBD> 3D 引擎是否已初始化
*/
public isInitialized(): boolean {
return this.engineInstance !== null && this.engineInstance.isInitialized();
@@ -95,6 +110,10 @@ export class EngineManager extends BimComponent {
this.engineInstance.destroy();
this.engineInstance = null;
}
if (this.rightKey) {
this.rightKey.destroy();
this.rightKey = null;
}
}
}

View File

@@ -3,8 +3,6 @@ import { BimEngine } from '../bim-engine';
import { BimRightKey } from '../components/right-key';
import { BimMenu } from '../components/menu';
import { MenuItemConfig } from '../components/menu/item';
import { infoMenuButton } from '../components/menu/buttons/info';
import { homeMenuButton } from '../components/menu/buttons/home';
/**
* 右键菜单管理器 (RightKeyManager)
@@ -18,7 +16,7 @@ export class RightKeyManager extends BimComponent {
private rightKeyPanel: BimRightKey;
// 存储注册的上下文处理器
// 每个处理<E5A484><E79086><EFBFBD>接收鼠标事件,返回一组菜单项(如果没有对应菜单则返回 null
// 每个处理<E5A484><E79086>接收鼠标事件返回一组菜单项如果没有对应菜单则返回 null
private contextHandlers: Array<(e: MouseEvent) => MenuItemConfig[] | null> = [];
constructor(engine: BimEngine, container: HTMLElement) {
@@ -55,7 +53,7 @@ export class RightKeyManager extends BimComponent {
* @param x 屏幕 X 坐标
* @param y 屏幕 Y 坐标
* @param items 菜单项列表
* @param groupOrder 可<EFBFBD><EFBFBD>的分组顺序
* @param groupOrder 可的分组顺序
*/
public showMenu(x: number, y: number, items: MenuItemConfig[], groupOrder?: string[]): void {
if (!items || items.length === 0) return;
@@ -84,11 +82,20 @@ export class RightKeyManager extends BimComponent {
private handleContextMenu = (e: MouseEvent): void => {
// 阻止浏览器默认的右键菜单
e.preventDefault();
let items: MenuItemConfig[] = [];
items.push(infoMenuButton(this.engine))
items.push(infoMenuButton(this.engine))
items.push(infoMenuButton(this.engine))
items.push(homeMenuButton(this.engine))
// 1. 确定上下文项
// 遍历所有注册的处理器,找到第一个返回非空结果的处理器
// 这种责任链模式允许插件优先处理特定对象的右键
let items: MenuItemConfig[] | null = null;
for (const handler of this.contextHandlers) {
const result = handler(e);
if (result && result.length > 0) {
if (!items) items = [];
items = items.concat(result);
}
}
// 2. 如果有菜单项,则显示
if (items && items.length > 0) {
this.showMenu(e.clientX, e.clientY, items);
} else {
@@ -96,4 +103,4 @@ export class RightKeyManager extends BimComponent {
this.hide();
}
};
}
}