fix(status-bar): 状态条选项新增:switchingMessage

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

@@ -21,6 +21,7 @@ export const DEFAULT_OPTIONS: DefaultOptions = {
   statusBar: {
     disable: false,
     transitionTime: 800,
+    switchingMessage: '正在切换',
     loadingMessage: '加载中',
     loadSuccessMessage: '加载成功',
     loadFailMessage: '加载失败',

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

@@ -1,24 +1,26 @@
 import type { InternalModel, Live2DModel } from 'pixi-live2d-display';
 import type { Application as ApplicationType } from 'pixi.js';
 
+import { Stage } from './stage.js';
 import type { PixiModule } from '../types/index.js';
 
-export class Application {
-  app?: ApplicationType;
-  constructor(private PIXI: PixiModule) {}
-
-  mount(canvasElement: HTMLCanvasElement, stageElement: HTMLElement, model?: Live2DModel<InternalModel>): void {
-    if (!this.app) {
-      this.app = new this.PIXI.Application({
-        view: canvasElement,
-        resolution: 2,
-        autoStart: true,
-        autoDensity: true,
-        backgroundAlpha: 0,
-        resizeTo: stageElement
-      });
-    }
+export class PixiApp {
+  app: ApplicationType;
+  constructor(
+    private PIXI: PixiModule,
+    private stage: Stage
+  ) {
+    this.app = new this.PIXI.Application({
+      view: this.stage.canvasElement,
+      resolution: 2,
+      autoStart: true,
+      autoDensity: true,
+      backgroundAlpha: 0,
+      resizeTo: this.stage.element
+    });
+  }
 
+  mount(model?: Live2DModel<InternalModel>): void {
     if (model) {
       this.clearAppStage();
       this.app.stage.addChild(model);
@@ -36,7 +38,7 @@ export class Application {
     const childLen = this.app?.stage.children.length || 0;
 
     if (childLen > 0) {
-      this.app!.stage.removeChildren(0);
+      this.app.stage.removeChildren(0);
     }
   }
 

packages/oh-my-live2d/src/modules/global-style.ts

@@ -32,22 +32,11 @@ export class GlobalStyle {
     }
   }
 
-  /**
-   * 卸载
-   */
-  unMount(): void {
-    this.styleSheet?.remove();
-  }
-
-  /**
-   * 更新
-   * @param options
-   */
-  update(options: DefaultOptions): void {
-    this.options = options;
+  initialize(): void {
+    this.create();
+    this.mount();
     this.reloadStyleSheet();
   }
-
   initializeStyle(): void {
     this.reloadStyleSheet();
   }

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

@@ -19,6 +19,13 @@ export class Menus {
     private globalOml2d: LoadOhMyLive2D
   ) {}
 
+  reload(stageElement: HTMLElement): void {
+    this.unmount();
+    this.create();
+    this.reloadStyle();
+    this.mount(stageElement);
+  }
+
   private get menuOptions(): MenusOptions {
     return this._menuOptions;
   }
@@ -95,13 +102,6 @@ export class Menus {
     }
   }
 
-  remount(stageElement: HTMLElement): void {
-    this.unmount();
-    this.create();
-    this.reloadStyle();
-    this.mount(stageElement);
-  }
-
   /**
    * 挂载
    * @param stageElement

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

@@ -1,4 +1,4 @@
-import { Application } from './application.js';
+import { PixiApp } from './application.js';
 import { Events } from './events.js';
 import { GlobalStyle } from './global-style.js';
 // import { LoadOhMyLive2D } from './load-oml2d.js';
@@ -21,7 +21,7 @@ export class OhMyLive2D {
   tips: Tips;
   menus: Menus;
   models: Models;
-  application?: Application;
+  pixiApp?: PixiApp;
   currentModelIndex: number = 0;
   options: DefaultOptions;
 
@@ -38,7 +38,6 @@ export class OhMyLive2D {
     this.tips = new Tips(this.options, this.globalOml2d); // 提示框
     this.menus = new Menus(this.options, this.globalOml2d); // 菜单
     this.models = new Models(this.options, this.PixiLive2dDisplay, this.events);
-    this.application = new Application(this.PIXI);
     this.store = new Store();
     this.modelIndex = this.store.getModelCurrentIndex(this.options.models);
   }
@@ -65,30 +64,23 @@ export class OhMyLive2D {
    * 创建
    */
   private create(): void {
-    this.globalStyle.create();
     this.stage.create();
+    this.stage.initializeStyle();
+
+    this.pixiApp = new PixiApp(this.PIXI, this.stage);
+
     this.statusBar.create();
-    this.registerGlobalEvent();
+    this.statusBar.initializeStyle();
   }
 
   /**
    * 挂载
    */
   private mount(): void {
-    this.globalStyle.mount();
     this.stage.mount();
     this.statusBar.mount();
   }
 
-  /**
-   * 卸载
-   */
-  unmount(): void {
-    this.globalStyle.unMount();
-    this.stage.unMount();
-    this.statusBar.unMount();
-  }
-
   /**
    * 加载模型
    */
@@ -111,13 +103,13 @@ export class OhMyLive2D {
         this.statusBar.loadingError(() => void this.reloadModel());
       })
       .then(async () => {
-        this.menus.remount(this.stage.element!);
-        this.tips.remount(this.stage.element!);
+        this.pixiApp?.mount(this.models.model);
+        this.menus.reload(this.stage.element!);
+        this.tips.reload(this.stage.element!);
 
-        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.pixiApp?.resize();
         this.statusBar.hideLoading();
         await this.stage.slideIn();
       });
@@ -137,29 +129,19 @@ export class OhMyLive2D {
    * 加载下个模型
    */
   async loadNextModel(): Promise<void> {
-    // console.log('asd');
     this.modelIndex++;
     if (this.modelIndex > this.options.models.length - 1) {
       this.modelIndex = 0;
     }
 
     this.tips.clear();
-    this.statusBar.open('正在切换');
+    this.statusBar.open(this.options.statusBar.switchingMessage);
     await this.stage.slideOut();
 
     await this.loadModel();
     void this.tips.idlePlayer?.start();
   }
 
-  /**
-   * 初始化样式
-   */
-  private initializeStyle(): void {
-    this.globalStyle.initializeStyle();
-    this.statusBar.initializeStyle();
-    this.stage.initializeStyle();
-  }
-
   // 初始化
   initialize(): void {
     // 检查版本
@@ -170,13 +152,14 @@ export class OhMyLive2D {
       printProjectInfo();
     }
 
-    //  创建
-    this.create();
+    this.registerGlobalEvent();
 
-    //  初始化样式
-    this.initializeStyle();
+    this.globalStyle.initialize();
+
+    //  创建舞台和状态条
+    this.create();
 
-    //  挂载
+    //  挂载舞台和状态条
     this.mount();
 
     // 加载模型

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

@@ -137,12 +137,4 @@ export class Stage {
       }
     });
   }
-
-  // /**
-  //  * 场景的滑入滑出动画执行结束事件
-  //  * @param fn
-  //  */
-  // onChangeSlideEnd(fn: (status: boolean) => void): void {
-  //   this.slideChangeEnd = fn;
-  // }
 }

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

@@ -30,6 +30,14 @@ export class Tips {
     private globalOml2d: LoadOhMyLive2D
   ) {}
 
+  reload(stageElement: HTMLElement): void {
+    this.clear();
+    this.unmount();
+    this.create();
+    this.reloadStyle();
+    this.mount(stageElement);
+  }
+
   private get tipsOptions(): DefaultTipsOptions {
     return this._tipsOptions;
   }
@@ -68,14 +76,6 @@ export class Tips {
     this.contentElement?.remove();
   }
 
-  remount(stageElement: HTMLElement): void {
-    this.clear();
-    this.unmount();
-    this.create();
-    this.reloadStyle();
-    this.mount(stageElement);
-  }
-
   get primaryColor(): string {
     return this.options.primaryColor;
   }
@@ -127,7 +127,6 @@ export class Tips {
   }
 
   showMessage(message: string, duration = 3000, priority = 0): void {
-    console.log(this.priority);
     if (priority < this.priority) {
       return;
     }

packages/oh-my-live2d/src/types/statusBar.ts

@@ -40,6 +40,11 @@ export interface StatusBarOptions {
    */
   restMessage?: string;
 
+  /**
+   * 模型切换时提示的文本信息
+   * @default 正在切换
+   */
+  switchingMessage?: string;
   /**
    * 模型休息时提示持续时长, 单位ms
    * @default 8000

tests/vite-app/src/main.ts

@@ -37,7 +37,6 @@ const foo = async () => {
       }
     ],
     tips: (_model, index) => {
-      // console.log(index);
       if (index === 0) {
         return {
           copyTips: {
@@ -64,7 +63,6 @@ const foo = async () => {
       // console.log(currentModel);
       // console.log(index);
       if (index === 0) {
-        console.log('ssssssssssssssssssssssssssss');
         return {
           disable: false,
           style: {},
@@ -122,13 +120,12 @@ const foo = async () => {
         return;
     }
   });
-  setInterval(() => {
-    // oml2d.tipsMessage('Oh My Live2D!', 1000, 9);
-  }, 100);
   oml2d.onStageSlideIn(() => {
+    console.log('111');
     // oml2d.tipsMessage('Oh My Live2D!', 1000, 9);
     // oml2d.loadNextModel();
   });
+
   // oml2d.loadNextModel();
   // oml2d.clearTips();
   // oml2d.reloadModel();
@@ -154,7 +151,7 @@ const foo = async () => {
   //   console.log('ssssssssssssss');
   // }, 1000);
 
-  // await loadOml2d({
+  // const oml2d2 = await loadOml2d({
   //   models: [
   //     {
   //       path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json',
@@ -163,7 +160,9 @@ const foo = async () => {
   //     }
   //   ]
   // });
-
+  // oml2d2.onStageSlideIn(() => {
+  //   console.log(222);
+  // });
   // loadOml2d({
   //   models: [
   //     {