From ea7291881f906fb3974d56947e7d14e88b21e7af Mon Sep 17 00:00:00 2001 From: Hacxy Date: Sun, 24 Mar 2024 15:35:45 +0800 Subject: [PATCH] =?UTF-8?q?fix(status-bar):=20=E7=8A=B6=E6=80=81=E6=9D=A1?= =?UTF-8?q?=E9=80=89=E9=A1=B9=E6=96=B0=E5=A2=9E:switchingMessage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/oh-my-live2d/src/config/config.ts | 1 + .../oh-my-live2d/src/modules/application.ts | 34 ++++++------ .../oh-my-live2d/src/modules/global-style.ts | 17 ++---- packages/oh-my-live2d/src/modules/menus.ts | 14 ++--- packages/oh-my-live2d/src/modules/oml2d.ts | 53 +++++++------------ packages/oh-my-live2d/src/modules/stage.ts | 8 --- packages/oh-my-live2d/src/modules/tips.ts | 17 +++--- packages/oh-my-live2d/src/types/statusBar.ts | 5 ++ tests/vite-app/src/main.ts | 13 +++-- 9 files changed, 66 insertions(+), 96 deletions(-) diff --git a/packages/oh-my-live2d/src/config/config.ts b/packages/oh-my-live2d/src/config/config.ts index c378f52..206424c 100644 --- a/packages/oh-my-live2d/src/config/config.ts +++ b/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: '加载失败', diff --git a/packages/oh-my-live2d/src/modules/application.ts b/packages/oh-my-live2d/src/modules/application.ts index 87c8bda..6b83073 100644 --- a/packages/oh-my-live2d/src/modules/application.ts +++ b/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): 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): 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); } } diff --git a/packages/oh-my-live2d/src/modules/global-style.ts b/packages/oh-my-live2d/src/modules/global-style.ts index d5b4270..9ee1e4a 100644 --- a/packages/oh-my-live2d/src/modules/global-style.ts +++ b/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(); } diff --git a/packages/oh-my-live2d/src/modules/menus.ts b/packages/oh-my-live2d/src/modules/menus.ts index 75f5f51..bde7977 100644 --- a/packages/oh-my-live2d/src/modules/menus.ts +++ b/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 diff --git a/packages/oh-my-live2d/src/modules/oml2d.ts b/packages/oh-my-live2d/src/modules/oml2d.ts index 6deec4c..67256cc 100644 --- a/packages/oh-my-live2d/src/modules/oml2d.ts +++ b/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 { - // 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(); // 加载模型 diff --git a/packages/oh-my-live2d/src/modules/stage.ts b/packages/oh-my-live2d/src/modules/stage.ts index 98d32e7..6394ef0 100644 --- a/packages/oh-my-live2d/src/modules/stage.ts +++ b/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; - // } } diff --git a/packages/oh-my-live2d/src/modules/tips.ts b/packages/oh-my-live2d/src/modules/tips.ts index ee71257..c38116d 100644 --- a/packages/oh-my-live2d/src/modules/tips.ts +++ b/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; } diff --git a/packages/oh-my-live2d/src/types/statusBar.ts b/packages/oh-my-live2d/src/types/statusBar.ts index 988c0e3..892f462 100644 --- a/packages/oh-my-live2d/src/types/statusBar.ts +++ b/packages/oh-my-live2d/src/types/statusBar.ts @@ -40,6 +40,11 @@ export interface StatusBarOptions { */ restMessage?: string; + /** + * 模型切换时提示的文本信息 + * @default 正在切换 + */ + switchingMessage?: string; /** * 模型休息时提示持续时长, 单位ms * @default 8000 diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts index 9a9c7b5..805f8c5 100644 --- a/tests/vite-app/src/main.ts +++ b/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: [ // {