Skip to content

Commit

Permalink
feat(events): 新增舞台滑入滑出事件监听
Browse files Browse the repository at this point in the history
  • Loading branch information
@hacxy
hacxy committed Mar 24, 2024
1 parent 611e714 commit 863a179
Show file tree
Hide file tree
Showing 9 changed files with 54 additions and 163 deletions.
3 changes: 2 additions & 1 deletion packages/oh-my-live2d/src/modules/events.ts
View file
@@ -1,5 +1,6 @@
import { EventFn, EventType } from '../types/common.js';
import { EventFn, EventType } from '../types/events.js';

// 事件中心
export class Events {
private eventMap = new Map<EventType, EventFn[]>();

Expand Down
23 changes: 17 additions & 6 deletions packages/oh-my-live2d/src/modules/load-oml2d.ts
View file
@@ -1,7 +1,7 @@
import { Events } from './events.js';
import { OhMyLive2D } from './oml2d.js';
import { DEFAULT_OPTIONS } from '../config/index.js';
import type { EventFn } from '../types/common.js';
import type { EventFn, LoadEventFn } from '../types/events.js';
import { DefaultOptions } from '../types/index.js';
import { Options } from '../types/options.js';
import { loadOml2dSDK, mergeOptions } from '../utils/index.js';
Expand All @@ -26,6 +26,9 @@ export class LoadOhMyLive2D {
this.oml2d.initialize();
}

/**
* 当前模型索引值
*/
get modelIndex(): number | undefined {
return this.oml2d?.modelIndex;
}
Expand Down Expand Up @@ -106,11 +109,19 @@ export class LoadOhMyLive2D {

// ------------- event

// onModelHit(fn?: (areaName: string[]) => void): void {
// this.add('hit', fn);
// }

onLoad(fn: (status: 'loading' | 'success' | 'fail') => void): void {
/**
* 监听模型加载状态的变化
* @param fn
*/
onLoad(fn: LoadEventFn): void {
this.events.add('load', fn);
}

onStageSlideIn(fn: EventFn): void {
this.events.add('stageSlideIn', fn);
}

onStageSlideOut(fn: EventFn): void {
this.events.add('stageSlideOut', fn);
}
}
35 changes: 2 additions & 33 deletions packages/oh-my-live2d/src/modules/models.ts
View file
Expand Up @@ -11,7 +11,7 @@ export class Models {
model?: Live2DModel<InternalModel>; // 当前模型实例
private currentModelIndex = 0;
private hitAreaFrames: HitAreaFrames;
// private eventMap = new Map<ModelEvent, EventFn[]>();

constructor(
private options: DefaultOptions,
private PixiLive2dDisplay: PixiLive2dDisplayModule,
Expand Down Expand Up @@ -85,9 +85,7 @@ export class Models {
* 添加点击区域
*/
addHitAreaFrames(): void {
if (this.hitAreaFrames) {
this.model?.addChild(this.hitAreaFrames);
}
this.model?.addChild(this.hitAreaFrames);
}

/**
Expand Down Expand Up @@ -147,33 +145,4 @@ export class Models {

this.playMotion(motion || '');
}

// --------------- event
// emit(name: EventType, ...arg: unknown[]): void {
// console.log('----------');
// const eventQueue = this.eventMap.get(name);

// // console.log(eventQueue);
// eventQueue?.forEach((fn) => void fn(...arg));
// // this.eventMap.set(name, []);
// }

// private addEvents(name: EventType, fn?: EventFn): void {
// console.log(fn);
// if (!fn) {
// return;
// }
// const events = this.eventMap.get(name) || [];

// events.push(fn);
// this.eventMap.set(name, events);
// }

// onHit(fn?: (areaName: string[]) => void): void {
// this.addEvents('hit', fn);
// }

// onLoad(fn: (status: 'loading' | 'success' | 'fail') => void): void {
// this.addEvents('load', fn);
// }
}
14 changes: 4 additions & 10 deletions packages/oh-my-live2d/src/modules/oml2d.ts
View file
Expand Up @@ -33,7 +33,7 @@ export class OhMyLive2D {
) {
this.options = this.globalOml2d.options;
this.globalStyle = new GlobalStyle(this.options);
this.stage = new Stage(this.options); // 实例化舞台
this.stage = new Stage(this.options, this.events); // 实例化舞台
this.statusBar = new StatusBar(this.options);
this.tips = new Tips(this.options, this.globalOml2d); // 提示框
this.menus = new Menus(this.options, this.globalOml2d); // 菜单
Expand Down Expand Up @@ -147,9 +147,6 @@ export class OhMyLive2D {
this.statusBar.open('正在切换');
await this.stage.slideOut();

// this.statusBar.showLoading();
// this.events.emit('load', 'loading');

await this.loadModel();
void this.tips.idlePlayer?.start();
}
Expand Down Expand Up @@ -187,18 +184,15 @@ export class OhMyLive2D {
}

/**
* 注册dom事件
* 注册全局事件
*/
private registerGlobalEvent(): void {
onChangeWindowSize(() => {
void this.reloadModel();
});

// 出场入场动画执行结束之后的事件回调
this.stage.onChangeSlideEnd((status) => {
if (status) {
this.tips.welcome();
}
this.globalOml2d.onStageSlideIn(() => {
this.tips.welcome();
});

window.document.oncopy = (): void => {
Expand Down
27 changes: 16 additions & 11 deletions packages/oh-my-live2d/src/modules/stage.ts
View file
@@ -1,5 +1,6 @@
import { mergeDeep } from 'tianjie';

import type { Events } from './events.js';
import { ELEMENT_ID } from '../config/index.js';
import { WindowSizeType } from '../constants/index.js';
import { CommonStyleType } from '../types/common.js';
Expand All @@ -12,9 +13,11 @@ export class Stage {
status = false;
private style: CSSProperties = {};
private canvasStyle: CSSProperties = {};
private slideChangeEnd?: (status: boolean) => void;
private currentModelIndex = 0;
constructor(private options: DefaultOptions) {}
constructor(
private options: DefaultOptions,
private events: Events
) {}

create(): void {
this.element = createElement({ id: ELEMENT_ID.stage, tagName: 'div' });
Expand Down Expand Up @@ -104,7 +107,8 @@ export class Stage {
return new Promise<void>((resolve) => {
setTimeout(() => {
this.status = true;
this.slideChangeEnd?.(this.status);
// this.slideChangeEnd?.(this.status);
this.events.emit('stageSlideIn');
resolve();
}, this.transitionTime);
});
Expand All @@ -126,18 +130,19 @@ export class Stage {

setTimeout(() => {
this.status = false;
this.slideChangeEnd?.(this.status);
this.events.emit('stageSlideOut');

resolve();
}, this.transitionTime);
}
});
}

/**
* 场景的滑入滑出动画执行结束事件
* @param fn
*/
onChangeSlideEnd(fn: (status: boolean) => void): void {
this.slideChangeEnd = fn;
}
// /**
// * 场景的滑入滑出动画执行结束事件
// * @param fn
// */
// onChangeSlideEnd(fn: (status: boolean) => void): void {
// this.slideChangeEnd = fn;
// }
}
2 changes: 2 additions & 0 deletions packages/oh-my-live2d/src/modules/tips.ts
View file
Expand Up @@ -127,9 +127,11 @@ export class Tips {
}

showMessage(message: string, duration = 3000, priority = 0): void {
console.log(this.priority);
if (priority < this.priority) {
return;
}
this.priority = priority;
if (this.closeTimer) {
clearTimeout(this.closeTimer);
}
Expand Down
3 changes: 0 additions & 3 deletions packages/oh-my-live2d/src/types/common.ts
View file
Expand Up @@ -53,6 +53,3 @@ export type Item = {
title: string;
onClick?: ((oml2d: LoadOhMyLive2D) => void) | ((oml2d: LoadOhMyLive2D) => Promise<void>);
};

export type EventFn = ((...arg) => void) | ((...arg) => Promise<void>);
export type EventType = 'load' | 'hit';
4 changes: 4 additions & 0 deletions packages/oh-my-live2d/src/types/events.ts
View file
@@ -0,0 +1,4 @@
export type EventFn = ((...arg) => void) | ((...arg) => Promise<void>);
export type EventType = 'load' | 'hit' | 'stageSlideIn' | 'stageSlideOut';

export type LoadEventFn = ((status: 'loading' | 'success' | 'fail') => void) | ((status: 'loading' | 'success' | 'fail') => Promise<void>);
106 changes: 7 additions & 99 deletions tests/vite-app/src/main.ts
View file
Expand Up @@ -116,111 +116,19 @@ const foo = async () => {
// // ]
// }
});

// const oml2d2 = await loadOml2d({
// // parentElement: el,
// // importType: 'complete',
// mobileDisplay: false,
// primaryColor: 'pink',
// models: [
// {
// path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Pio/model.json',
// scale: 0.4,
// position: [0, 0],
// mobileScale: 0.35,
// stageStyle: {
// // height: 300
// }
// }
// ],
// tips: (_model, index) => {
// // console.log(index);
// if (index === 0) {
// return {
// copyTips: {
// message: ['sssssssssssssssss']
// },
// idleTips: {
// wordTheDay: true
// }
// };
// }
// return {
// copyTips: {
// message: ['aaaaaaaaaaaaaaaaaaa']
// }
// };
// },
// statusBar: {
// loadingMessage: '正在加载',
// restMessage: '睡着了',
// disable: false,
// style: {}
// },
// menus: (_currentModel, index) => {
// // console.log(currentModel);
// // console.log(index);
// if (index === 0) {
// console.log('ssssssssssssssssssssssssssss');
// return {
// disable: false,
// style: {},
// items: (defaultItems) => {
// return defaultItems;
// }
// };
// } else {
// return {
// style: {
// left: 0
// },
// items: (defaultItem) => {
// return [defaultItem[1]];
// }
// };
// }
// }
// // menus: {
// // items: (defaultItems) => {
// // return defaultItems;
// // // console.log(oml2d.modelIndex);
// // // if (oml2d.modelIndex === 0) {
// // // return [
// // // defaultItems[1],
// // // {
// // // id: 'github',
// // // icon: 'github-fill',
// // // title: '我的github',
// // // onClick() {
// // // window.open('https://github.com/hacxy');
// // // }
// // // }
// // // ];
// // // } else {
// // // return defaultItems;
// // // }
// // }
// // // disable: true
// // // items: [
// // // {
// // // id: 'github',
// // // icon: 'github-fill',
// // // title: '我的github',
// // // onClick() {
// // // window.open('https://github.com/hacxy');
// // // }
// // // }
// // // ]
// // }
// });

oml2d.onLoad((status) => {
switch (status) {
case 'success':
return;
}
});

setInterval(() => {
// oml2d.tipsMessage('Oh My Live2D!', 1000, 9);
}, 100);
oml2d.onStageSlideIn(() => {
// oml2d.tipsMessage('Oh My Live2D!', 1000, 9);
// oml2d.loadNextModel();
});
// oml2d.loadNextModel();
// oml2d.clearTips();
// oml2d.reloadModel();
Expand Down

0 comments on commit 863a179

Please sign in to comment.