chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: updated events

Browse Source
This commit is contained in:
Haoyu Xu
2025-01-13 14:16:44 +08:00
parent e233f00040
commit 82335cdbde
11 changed files with 158 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
showcase/src/components/aklive2d.js
View File

@@ -5,7 +5,7 @@ import Player from "@/components/player";
import Background from "@/components/background";
import Logo from "@/components/logo";
import Insight from "@/components/insight";
import * as Event from "@/components/event";
import Events from "@/components/events";
import {
isWebGLSupported,
insertHTMLChild,
@@ -62,7 +62,7 @@ export default class AKLive2D {
insertHTMLChild(this.#appEl, this.#el)
addEventListeners([
{
event: "player-ready", handler: () => this.#success()
event: Events.Player.Ready.name, handler: () => this.#success()
}, {
id: "settings-reset", event: "click", handler: () => this.reset()
}, {
@@ -102,7 +102,7 @@ export default class AKLive2D {
}
get events() {
return Event
return Events
}
get config() {

22
showcase/src/components/background.js
View File

@@ -4,6 +4,7 @@ import {
showRelatedHTML,
syncHTMLValue,
insertHTMLChild,
createCustomEvent,
} from "@/components/helper";
import "@/components/background.css"
@@ -200,17 +201,17 @@ export default class Background {
get listeners() {
return [
{
event: "background-set-default", handler: e => this.default = e.detail
event: Events.SetDefault.name, handler: e => this.default = e.detail
}, {
event: "background-set-custom", handler: e => this.custom = e.detail
event: Events.SetCustom.name, handler: e => this.custom = e.detail
}, {
event: "background-set-video", handler: e => this.video = e.detail
event: Events.SetVideo.name, handler: e => this.video = e.detail
}, {
event: "background-set-volume", handler: e => this.volume = e.detail
event: Events.SetVolume.name, handler: e => this.volume = e.detail
}, {
event: "background-reset-image", handler: () => this.resetImage()
event: Events.ResetImage.name, handler: () => this.resetImage()
}, {
event: "background-reset-video", handler: () => this.resetVideo()
event: Events.ResetVideo.name, handler: () => this.resetVideo()
}, {
id: "default-background-select", event: "change", handler: e => {
this.default = e.currentTarget.value
@@ -246,4 +247,13 @@ export default class Background {
},
]
}
}
export const Events = {
SetDefault: createCustomEvent("background-set-default", true),
SetCustom: createCustomEvent("background-set-custom", true),
SetVideo: createCustomEvent("background-set-video", true),
SetVolume: createCustomEvent("background-set-volume", true),
ResetImage: createCustomEvent("background-reset-image"),
ResetVideo: createCustomEvent("background-reset-video"),
}

63
showcase/src/components/event.js
View File

@@ -1,63 +0,0 @@
export const PlayerReadyEvent = new Event("player-ready");
const createCustomEvent = (name) => (detail) => new CustomEvent(name, {detail})
export const InsightRegisterEventFn = createCustomEvent("insight-register")
export const PlayerSetFPSEventFn = createCustomEvent("player-set-fps")
export const PlayerSetScaleEventFn = createCustomEvent("player-set-scale")
export const PlayerSetPaddingEventFn = createCustomEvent("player-set-padding")
export const PlayerResetPaddingEvent = new Event("player-reset-padding")
export const PlayerSetUseStartAnimationEventFn = createCustomEvent("player-set-usestartanimation")
export const LogoSetHiddenEventFn = createCustomEvent("logo-set-hidden")
export const LogoSetRatioEventFn = createCustomEvent("logo-set-ratio")
export const LogoSetOpacityEventFn = createCustomEvent("logo-set-opacity")
export const LogoSetImageEventFn = createCustomEvent("logo-set-image")
export const LogoResetImageEvent = new Event("logo-reset-image")
export const LogoSetPositionEventFn = createCustomEvent("logo-set-position")
export const BackgroundSetDefaultEventFn = createCustomEvent("background-set-default")
export const BackgroundSetCustomEventFn = createCustomEvent("background-set-custom")
export const BackgroundSetVideoEventFn = createCustomEvent("background-set-video")
export const BackgroundSetVolumeEventFn = createCustomEvent("background-set-volume")
export const BackgroundResetImageEvent = new Event("background-reset-image")
export const BackgroundResetVideoEvent = new Event("background-reset-video")
export const VoiceSetUseVoiceEventFn = createCustomEvent("voice-set-usevoice")
export const VoiceSetLanguageEventFn = createCustomEvent("voice-set-language")
export const VoiceSetDurationEventFn = createCustomEvent("voice-set-duration")
export const VoiceSetUseSubtitleEventFn = createCustomEvent("voice-set-usesubtitle")
export const VoiceSetSubtitleLanguageEventFn = createCustomEvent("voice-set-subtitlelanguage")
export const VoiceSetSubtitlePositionEventFn = createCustomEvent("voice-set-subtitleposition")
export const VoiceSetUseVoiceActorEventFn = createCustomEvent("voice-set-usevoiceactor")
export const MusicSetMusicEventFn = createCustomEvent("music-set-music")
export const MusicSetUseMusicEventFn = createCustomEvent("music-set-usemusic")
export const MusicSetVolumeEventFn = createCustomEvent("music-set-volume")
export const MusicSetCustomEventFn = createCustomEvent("music-set-custom")
export const MusicResetEvent = new Event("music-reset")

15
showcase/src/components/events.js Normal file
View File

@@ -0,0 +1,15 @@
import { Events as Insight } from "@/components/insight";
import { Events as Player } from "@/components/player";
import { Events as Logo } from "@/components/logo";
import { Events as Background } from "@/components/background";
import { Events as Voice } from "@/components/voice";
import { Events as Music } from "@/components/music";
export default {
Insight,
Player,
Logo,
Background,
Voice,
Music,
}

12
showcase/src/components/helper.js
View File

@@ -76,3 +76,15 @@ export const readFile = (file, callback = () => { }) => {
if (!file) return
callback(URL.createObjectURL(file.slice()), file.type)
}
export const createCustomEvent = (name, withArg = false) => {
const ret = {
name,
}
if (withArg) {
ret.handler = (detail) => new CustomEvent(name, {detail})
} else {
ret.handler = () => new Event(name)
}
return ret
}

8
showcase/src/components/insight.js
View File

@@ -1,3 +1,5 @@
import {createCustomEvent} from "@/components/helper"
export default class Insight {
#isInsightInited = false
@@ -26,8 +28,12 @@ export default class Insight {
get listeners() {
return [
{
event: "insight-register", handler: e => this.insight(e.detail, true)
event: Events.Register.name, handler: e => this.insight(e.detail, true)
}
]
}
}
export const Events = {
Register: createCustomEvent("insight-register", true)
}

22
showcase/src/components/logo.js
View File

@@ -4,6 +4,7 @@ import {
readFile,
showRelatedHTML,
syncHTMLValue,
createCustomEvent,
} from "@/components/helper";
import "@/components/logo.css"
@@ -270,17 +271,17 @@ export default class Logo {
get listeners() {
return [
{
event: "logo-set-hidden", handler: e => this.hidden = e.detail
event: Events.SetHidden.name, handler: e => this.hidden = e.detail
}, {
event: "logo-set-ratio", handler: e => this.ratio = e.detail
event: Events.SetRatio.name, handler: e => this.ratio = e.detail
}, {
event: "logo-set-opacity", handler: e => this.opacity = e.detail
event: Events.SetOpacity.name, handler: e => this.opacity = e.detail
}, {
event: "logo-set-image", handler: e => this.image = e.detail
event: Events.SetImage.name, handler: e => this.image = e.detail
}, {
event: "logo-reset-image", handler: () => this.resetImage()
event: Events.ResetImage.name, handler: () => this.resetImage()
}, {
event: "logo-set-position", handler: e => this.position = e.detail
event: Events.SetPosition.name, handler: e => this.position = e.detail
}, {
id: "operator-logo", event: "click", handler: e => {
showRelatedHTML(e.currentTarget, "operator-logo-realted");
@@ -343,4 +344,13 @@ export default class Logo {
},
]
}
}
export const Events = {
SetHidden: createCustomEvent("logo-set-hidden", true),
SetRatio: createCustomEvent("logo-set-ratio", true),
SetOpacity: createCustomEvent("logo-set-opacity", true),
SetImage: createCustomEvent("logo-set-image", true),
ResetImage: createCustomEvent("logo-reset-image"),
SetPosition: createCustomEvent("logo-set-position", true),
}

21
showcase/src/components/music.js
View File

@@ -4,7 +4,8 @@ import {
showRelatedHTML,
syncHTMLValue,
readFile,
getCurrentHTMLOptions
getCurrentHTMLOptions,
createCustomEvent,
} from "@/components/helper";
export default class Music {
@@ -265,15 +266,15 @@ export default class Music {
get listeners() {
return [
{
event: "music-set-music", handler: e => this.music = e.detail
event: Events.SetMusic.name, handler: e => this.music = e.detail
}, {
event: "music-set-usemusic", handler: e => this.useMusic = e.detail
event: Events.SetUseMusic.name, handler: e => this.useMusic = e.detail
}, {
event: "music-set-volume", handler: e => this.volume = e.detail
event: Events.SetVolume.name, handler: e => this.volume = e.detail
}, {
event: "music-set-custom", handler: e => this.custom = e.detail
event: Events.SetCustom.name, handler: e => this.custom = e.detail
}, {
event: "music-reset", handler: () => this.reset()
event: Events.Reset.name, handler: () => this.reset()
}, {
id: "music", event: "click", handler: e => {
showRelatedHTML(e.currentTarget, "music-realted");
@@ -310,4 +311,12 @@ export default class Music {
},
]
}
}
export const Events = {
SetMusic: createCustomEvent("music-set-music", true),
SetUseMusic: createCustomEvent("music-set-usemusic", true),
SetVolume: createCustomEvent("music-set-volume", true),
SetCustom: createCustomEvent("music-set-custom", true),
Reset: createCustomEvent("music-reset"),
}

27
showcase/src/components/player.js
View File

@@ -2,11 +2,9 @@ import {
insertHTMLChild,
updateHTMLOptions,
showRelatedHTML,
syncHTMLValue
syncHTMLValue,
createCustomEvent,
} from "@/components/helper";
import {
PlayerReadyEvent
} from "@/components/event"
import '@/libs/spine-player.css'
import spine from '@/libs/spine-player'
import assets from '!/assets.json'
@@ -92,7 +90,7 @@ export default class Player {
entry.mixDuration = 0.3;
widget.animationState.addAnimation(0, "Idle", true, 0);
}
document.dispatchEvent(PlayerReadyEvent);
document.dispatchEvent(Events.Ready.handler());
},
}
if (import.meta.env.VITE_USE_JSON === "true") {
@@ -342,15 +340,15 @@ export default class Player {
get listeners() {
return [
{
event: "player-set-fps", handler: e => this.fps = e.detail
event: Events.SetFPS.name, handler: e => this.fps = e.detail
}, {
event: "player-set-scale", handler: e => this.scale = e.detail
event: Events.SetScale.name, handler: e => this.scale = e.detail
}, {
event: "player-set-padding", handler: e => this.padding = e.detail
event: Events.SetPadding.name, handler: e => this.padding = e.detail
}, {
event: "player-reset-padding", handler: () => this.resetPadding()
event: Events.ResetPadding.name, handler: () => this.resetPadding()
}, {
event: "player-set-usestartanimation", handler: e => this.useStartAnimation = e.detail
event: Events.SetUseStartAnimation.name, handler: e => this.useStartAnimation = e.detail
}, {
id: "fps-slider", event: "change", handler: e => {
syncHTMLValue(e.currentTarget, "fps-input");
@@ -461,4 +459,13 @@ export default class Player {
},
]
}
}
export const Events = {
Ready: createCustomEvent("player-ready"),
SetFPS: createCustomEvent("player-set-fps", true),
SetScale: createCustomEvent("player-set-scale", true),
SetPadding: createCustomEvent("player-set-padding", true),
ResetPadding: createCustomEvent("player-reset-padding"),
SetUseStartAnimation: createCustomEvent("player-set-usestartanimation", true),
}

27
showcase/src/components/voice.js
View File

@@ -3,7 +3,8 @@ import {
updateElementPosition,
updateHTMLOptions,
showRelatedHTML,
syncHTMLValue
syncHTMLValue,
createCustomEvent,
} from "@/components/helper";
import charword_table from '!/charword_table.json'
@@ -494,19 +495,19 @@ export default class Voice {
get listeners() {
return [
{
event: "voice-set-usevoice", handler: e => this.useVoice = e.detail
event: Events.SetUseVoice.name, handler: e => this.useVoice = e.detail
}, {
event: "voice-set-language", handler: e => this.language = e.detail
event: Events.SetLanguage.name, handler: e => this.language = e.detail
}, {
event: "voice-set-duration", handler: e => this.duration = e.detail
event: Events.SetDuration.name, handler: e => this.duration = e.detail
}, {
event: "voice-set-usesubtitle", handler: e => this.useSubtitle = e.detail
event: Events.SetUseSubtitle.name, handler: e => this.useSubtitle = e.detail
}, {
event: "voice-set-subtitlelanguage", handler: e => this.subtitleLanguage = e.detail
event: Events.SetSubtitleLanguage.name, handler: e => this.subtitleLanguage = e.detail
}, {
event: "voice-set-subtitleposition", handler: e => this.position = e.detail
event: Events.SetSubtitlePosition.name, handler: e => this.position = e.detail
}, {
event: "voice-set-usevoiceactor", handler: e => this.useVoiceActor = e.detail
event: Events.SetUseVoiceActor.name, handler: e => this.useVoiceActor = e.detail
}, {
id: "voice", event: "click", handler: e => {
showRelatedHTML(e.currentTarget, "voice-realted");
@@ -570,4 +571,14 @@ export default class Voice {
}
]
}
}
export const Events = {
SetUseVoice: createCustomEvent("voice-set-usevoice", true),
SetLanguage: createCustomEvent("voice-set-language", true),
SetDuration: createCustomEvent("voice-set-duration", true),
SetUseSubtitle: createCustomEvent("voice-set-usesubtitle", true),
SetSubtitleLanguage: createCustomEvent("voice-set-subtitlelanguage", true),
SetSubtitlePosition: createCustomEvent("voice-set-subtitleposition", true),
SetUseVoiceActor: createCustomEvent("voice-set-usevoiceactor", true),
}