fix: 优化状态条模块, 取消了loadOml2d方法的调用次数限制

packages/oh-my-live2d/src/config/config.ts

@@ -61,7 +61,16 @@ export const DEFAULT_OPTIONS: DefaultOptions = {
         icon: 'icon-rest',
         title: '休息',
         onClick(oml2d): void {
-          oml2d.switchStatus();
+          oml2d.statusBarPopup('看板娘休息中', false);
+
+          oml2d.clearTips();
+
+          oml2d.setStatusBarClickEvent(() => {
+            oml2d.statusBarPopup();
+            void oml2d.stageSlideIn();
+          });
+
+          void oml2d.stageSlideOut();
         }
       },
       {

packages/oh-my-live2d/src/modules/index.ts

@@ -1,19 +1,11 @@
-import { OhMyLive2D } from './oml2d.js';
-import { DEFAULT_OPTIONS } from '../config/index.js';
-import { OML2D } from '../types/common.js';
-import type { DefaultOptions, Options } from '../types/index.js';
-import { loadOml2dSDK, mergeOptions } from '../utils/index.js';
+import { LoadOhMyLive2D } from './load-oml2d.js';
+import type { Options } from '../types/index.js';
 
-export const bootstrap = (): ((options: Options) => Promise<OML2D>) => {
-  let oml2d: OhMyLive2D;
-  let finalOptions: DefaultOptions = DEFAULT_OPTIONS;
-  const loadOml2d = async (options: Options): Promise<OhMyLive2D> => {
-    finalOptions = mergeOptions(DEFAULT_OPTIONS, options);
-    const { PIXI, PixiLive2dDisplay } = await loadOml2dSDK(finalOptions.importType, finalOptions.libraryUrls);
+export const bootstrap = (): ((options: Options) => Promise<LoadOhMyLive2D>) => {
+  const loadOml2d = async (options: Options): Promise<LoadOhMyLive2D> => {
+    const oml2d = new LoadOhMyLive2D();
 
-    oml2d?.unMount();
-    oml2d = new OhMyLive2D(finalOptions, PIXI, PixiLive2dDisplay);
-    await oml2d.initialize();
+    await oml2d.setup(options);
 
     return oml2d;
   };

packages/oh-my-live2d/src/modules/load-oml2d.ts

@@ -0,0 +1,86 @@
+import { OhMyLive2D } from './oml2d.js';
+import { DEFAULT_OPTIONS } from '../config/index.js';
+import type { EventType } from '../types/common.js';
+import { DefaultOptions } from '../types/index.js';
+import { Options } from '../types/options.js';
+import { loadOml2dSDK, mergeOptions } from '../utils/index.js';
+
+export class LoadOhMyLive2D {
+  options: DefaultOptions = DEFAULT_OPTIONS;
+  private oml2d?: OhMyLive2D;
+
+  /**
+   * 安装组件
+   */
+  async setup(options: Options): Promise<void> {
+    this.options = mergeOptions(DEFAULT_OPTIONS, options);
+
+    const { PIXI, PixiLive2dDisplay } = await loadOml2dSDK(this.options.importType, this.options.libraryUrls);
+
+    this.oml2d = new OhMyLive2D(this, PIXI, PixiLive2dDisplay);
+
+    await this.oml2d.initialize();
+  }
+
+  /**
+   * 主动提示消息
+   * @param message 提示信息
+   * @param duration 持续时间  默认值: 3000
+   * @param priority  优先级 默认值: 3
+   */
+  tipsMessage(message: string, duration?: number, priority?: number): void {
+    this.oml2d?.tips.notification(message, duration, priority);
+  }
+
+  /**
+   * 加载下一个模型
+   */
+  async loadNextModel(): Promise<void> {
+    await this.oml2d?.loadNextModel();
+  }
+
+  /**
+   * 重新加载当前模型
+   */
+  async reloadModel(): Promise<void> {
+    await this.oml2d?.reloadModel();
+  }
+
+  /**
+   * 舞台滑入
+   */
+  async stageSlideIn(): Promise<void> {
+    await this.oml2d?.stage.slideIn();
+  }
+
+  /**
+   * 舞台滑出
+   */
+  async stageSlideOut(): Promise<void> {
+    await this.oml2d?.stage.slideOut();
+  }
+
+  clearTips(): void {
+    this.oml2d?.tips.clear();
+  }
+
+  stopTipsIdle(): void {
+    this.oml2d?.tips.idlePlayer?.stop();
+  }
+
+  startTipsIdle(): void {
+    void this.oml2d?.tips.idlePlayer?.start();
+  }
+
+  statusBarPopup(message?: string, delay?: number | false, color?: string): void {
+    this.oml2d?.statusBar.popup(message, delay, color);
+  }
+
+  setStatusBarClickEvent(fn: EventType): void {
+    this.oml2d?.statusBar.setClickEvent(fn);
+  }
+
+  setStatusBarHoverEvent(events?: { onIn?: EventType; onOut?: EventType }): void {
+    this.oml2d?.statusBar.setHoverEvent(events);
+  }
+}

packages/oh-my-live2d/src/modules/menus.ts

@@ -1,8 +1,9 @@
 import { isArray, isFunction, mergeDeep } from 'tianjie';
 
+import { LoadOhMyLive2D } from './load-oml2d.js';
 import { DEFAULT_OPTIONS, ELEMENT_ID } from '../config/index.js';
 import { WindowSizeType } from '../constants/index.js';
-import { Item, OML2D } from '../types/common.js';
+import { Item } from '../types/common.js';
 import type { CSSProperties, DefaultOptions, MenusOptions } from '../types/index.js';
 import { createElement, getWindowSizeType, handleCommonStyle, setStyleForElement } from '../utils/index.js';
 
@@ -14,7 +15,7 @@ export class Menus {
 
   constructor(
     private options: DefaultOptions,
-    private oml2d: OML2D
+    private publicOml2d: LoadOhMyLive2D
   ) {}
 
   private get menuOptions(): MenusOptions {
@@ -28,22 +29,19 @@ export class Menus {
         tagName: 'div',
         dataName: item.id,
         className: 'oml2d-menus-item',
-        innerHtml: `
-<svg class="oml2d-icon">
-  <use xlink:href="#${item.icon}"></use>
-</svg>
-`
+        innerHtml: `<svg class="oml2d-icon"><use xlink:href="#${item.icon}"></use></svg>`
       });
 
       el.title = item.title;
 
       el.onclick = (): void => {
-        item.onClick?.(this.oml2d);
+        void item.onClick?.(this.publicOml2d);
       };
 
       return el;
     });
   }
+
   createMenuItem(): void {
     if (isArray(this.menuOptions.items)) {
       this.createMenuItemElements(this.menuOptions.items);

packages/oh-my-live2d/src/modules/oml2d.ts

@@ -1,5 +1,7 @@
 import { Application } from './application.js';
-import { GlobalStyle } from './globalStyle.js';
+import { GlobalStyle } from './global-style.js';
+// import { LoadOhMyLive2D } from './load-oml2d.js';
+import { LoadOhMyLive2D } from './load-oml2d.js';
 import { Menus } from './menus.js';
 import { Models } from './models.js';
 import { Stage } from './stage.js';
@@ -11,27 +13,28 @@ import type { DefaultOptions, PixiLive2dDisplayModule, PixiModule } from '../typ
 import { checkVersion, getWindowSizeType, onChangeWindowSize, printProjectInfo } from '../utils/index.js';
 
 export class OhMyLive2D {
-  private store: Store;
-  private globalStyle: GlobalStyle;
-  private stage: Stage;
-  private statusBar: StatusBar;
-  private tips: Tips;
-  private menus: Menus;
-  private models: Models;
-  private application?: Application;
-  private currentModelIndex: number = 0;
-
+  store: Store;
+  globalStyle: GlobalStyle;
+  stage: Stage;
+  statusBar: StatusBar;
+  tips: Tips;
+  menus: Menus;
+  models: Models;
+  application?: Application;
+  currentModelIndex: number = 0;
+  options: DefaultOptions;
   constructor(
-    private options: DefaultOptions,
+    private publicOml2d: LoadOhMyLive2D,
     private PIXI: PixiModule,
     private PixiLive2dDisplay: PixiLive2dDisplayModule
   ) {
-    this.globalStyle = new GlobalStyle(options);
-    this.stage = new Stage(options); // 实例化舞台
-    this.statusBar = new StatusBar(options);
-    this.tips = new Tips(options); // 提示框
-    this.menus = new Menus(options, this); // 菜单
-    this.models = new Models(options, this.PixiLive2dDisplay);
+    this.options = this.publicOml2d.options;
+    this.globalStyle = new GlobalStyle(this.options);
+    this.stage = new Stage(this.options); // 实例化舞台
+    this.statusBar = new StatusBar(this.options);
+    this.tips = new Tips(this.options); // 提示框
+    this.menus = new Menus(this.options, this.publicOml2d); // 菜单
+    this.models = new Models(this.options, this.PixiLive2dDisplay);
     this.application = new Application(this.PIXI);
     this.store = new Store();
     this.modelIndex = this.store.getModelCurrentIndex(this.options.models);
@@ -96,31 +99,27 @@ export class OhMyLive2D {
     }
 
     if (this.mobileHidden) {
-      this.statusBar.rest();
-
       return;
     }
     if (isLoading) {
       this.statusBar.showLoading();
     }
-    await this.models.create().catch(() => {
-      this.statusBar.loadingError(() => {
-        void this.reloadModel();
-      });
-    });
-
-    this.application?.mount(this.stage.canvasElement!, this.stage.element!, this.models.model);
-    this.models.settingModel();
-    this.stage.reloadStyle(this.models.modelSize);
-
-    this.application?.resize();
-
-    this.statusBar.hideLoading();
-
-    // 注册模型事件
-    this.registerModelEvent();
 
-    await this.stage.slideIn();
+    await this.models
+      .create()
+      .catch(() => {
+        this.statusBar.loadingError(() => void this.reloadModel());
+      })
+      .then(async () => {
+        this.application?.mount(this.stage.canvasElement!, this.stage.element!, this.models.model);
+        this.models.settingModel();
+        this.stage.reloadStyle(this.models.modelSize);
+        this.application?.resize();
+        this.statusBar.hideLoading();
+        // 注册模型事件
+        this.registerModelEvent();
+        await this.stage.slideIn();
+      });
   }
 
   /**
@@ -185,17 +184,17 @@ export class OhMyLive2D {
   }
 
   /**
-   * 切换状态. 休息/活动
+   *  模型休息
    */
-  switchStatus(): void {
-    void this.stage.slideOut();
-    this.tips.clear();
+  // modelRest(): void {
+  //   void this.stage.slideOut();
+  //   this.tips.clear();
 
-    this.statusBar.rest(true, () => {
-      void this.stage.slideIn();
-      void this.tips.idlePlayer?.start();
-    });
-  }
+  //   this.statusBar.rest(true, () => {
+  //     void this.stage.slideIn();
+  //     void this.tips.idlePlayer?.start();
+  //   });
+  // }
 
   /**
    * 注册dom事件
@@ -223,14 +222,4 @@ export class OhMyLive2D {
   private registerModelEvent(): void {
     this.models.onHit();
   }
-
-  /**
-   * 主动提示消息
-   * @param message 提示信息
-   * @param duration 持续时间  默认值: 3000
-   * @param priority  优先级 默认值: 3
-   */
-  tipsMessage(message: string, duration?: number, priority?: number): void {
-    this.tips.notification(message, duration, priority);
-  }
 }

packages/oh-my-live2d/src/modules/stage.ts

@@ -9,7 +9,7 @@ import { createElement, getWindowSizeType, handleCommonStyle, setStyleForElement
 export class Stage {
   element?: HTMLElement;
   canvasElement?: HTMLCanvasElement;
-
+  status = false;
   private style: CSSProperties = {};
   private canvasStyle: CSSProperties = {};
   private slideChangeEnd?: (status: boolean) => void;
@@ -103,7 +103,8 @@ export class Stage {
 
     return new Promise<void>((resolve) => {
       setTimeout(() => {
-        this.slideChangeEnd?.(true);
+        this.status = true;
+        this.slideChangeEnd?.(this.status);
         resolve();
       }, this.transitionTime);
     });
@@ -113,18 +114,23 @@ export class Stage {
    * 滑出
    */
   slideOut(): Promise<void> {
-    this.setStyle({
-      animationName: 'oml2d-stage-slide-out',
-      animationDuration: `${this.transitionTime}ms`,
-      animationFillMode: 'forwards'
-    });
-
-    return new Promise<void>((resolve) =>
-      setTimeout(() => {
-        this.slideChangeEnd?.(false);
+    return new Promise<void>((resolve) => {
+      if (!this.status) {
         resolve();
-      }, this.transitionTime)
-    );
+      } else {
+        this.setStyle({
+          animationName: 'oml2d-stage-slide-out',
+          animationDuration: `${this.transitionTime}ms`,
+          animationFillMode: 'forwards'
+        });
+
+        setTimeout(() => {
+          this.status = false;
+          this.slideChangeEnd?.(this.status);
+          resolve();
+        }, this.transitionTime);
+      }
+    });
   }
 
   /**