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),
}

76
showcase/src/libs/wallpaper_engine.js
View File

@@ -1,126 +1,126 @@
import * as Event from "@/components/event"
import Events from "@/components/events"
window.wallpaperPropertyListener = {
applyGeneralProperties: function (properties) {
if (properties.fps) {
document.dispatchEvent(Event.PlayerSetFPSEventFn(properties.fps))
document.dispatchEvent(Events.Player.SetFPS.handler(properties.fps))
}
},
applyUserProperties: function (properties) {
if (properties.privacydonottrack) {
document.dispatchEvent(Event.InsightRegisterEventFn(!properties.privacydonottrack.value))
document.dispatchEvent(Events.Insight.Register.handler(!properties.privacydonottrack.value))
}
if (properties.logo) {
document.dispatchEvent(Event.LogoSetHiddenEventFn(!properties.logo.value))
document.dispatchEvent(Events.Logo.SetHidden.handler(!properties.logo.value))
}
if (properties.logoratio) {
if (properties.logoratio.value) {
document.dispatchEvent(Event.LogoSetRatioEventFn(properties.logoratio.value))
document.dispatchEvent(Events.Logo.SetRatio.handler(properties.logoratio.value))
}
}
if (properties.logoopacity) {
if (properties.logoopacity.value) {
document.dispatchEvent(Event.LogoSetOpacityEventFn(properties.logoopacity.value))
document.dispatchEvent(Events.Logo.SetOpacity.handler(properties.logoopacity.value))
}
}
if (properties.logoimage) {
if (properties.logoimage.value) {
document.dispatchEvent(Event.LogoSetImageEventFn('file:///' + properties.logoimage.value))
document.dispatchEvent(Events.Logo.SetImage.handler('file:///' + properties.logoimage.value))
} else {
document.dispatchEvent(Event.LogoResetImageEvent)
document.dispatchEvent(Events.Logo.ResetImage.handler())
}
}
if (properties.logox) {
document.dispatchEvent(Event.LogoSetPositionEventFn({
document.dispatchEvent(Events.Logo.SetPosition.handler({
x: properties.logox.value
}))
}
if (properties.logoy) {
document.dispatchEvent(Event.LogoSetPositionEventFn({
document.dispatchEvent(Events.Logo.SetPosition.handler({
y: properties.logoy.value
}))
}
if (properties.defaultbackground) {
if (properties.defaultbackground.value) {
document.dispatchEvent(Event.BackgroundSetDefaultEventFn(properties.defaultbackground.value))
document.dispatchEvent(Events.Background.SetDefault.handler(properties.defaultbackground.value))
}
}
if (properties.background) {
if (properties.background.value) {
document.dispatchEvent(Event.BackgroundSetCustomEventFn(`file:///${properties.background.value}`))
document.dispatchEvent(Events.Background.SetCustom.handler(`file:///${properties.background.value}`))
} else {
document.dispatchEvent(Event.BackgroundResetImageEvent)
document.dispatchEvent(Events.Background.ResetImage.handler())
}
}
if (properties.voicetitle) {
document.dispatchEvent(Event.VoiceSetUseVoiceEventFn(properties.voicetitle.value))
document.dispatchEvent(Events.Voice.SetUseVoice.handler(properties.voicetitle.value))
}
if (properties.voicelanguage) {
document.dispatchEvent(Event.VoiceSetLanguageEventFn(properties.voicelanguage.value))
document.dispatchEvent(Events.Voice.SetLanguage.handler(properties.voicelanguage.value))
}
if (properties.voiceidle) {
document.dispatchEvent(Event.VoiceSetDurationEventFn({
document.dispatchEvent(Events.Voice.SetDuration.handler({
idle: properties.voiceidle.value
}))
}
if (properties.voicenext) {
document.dispatchEvent(Event.VoiceSetDurationEventFn({
document.dispatchEvent(Events.Voice.SetDuration.handler({
next: properties.voicenext.value
}))
}
if (properties.voicesubtitle) {
document.dispatchEvent(Event.VoiceSetUseSubtitleEventFn(properties.voicesubtitle.value))
document.dispatchEvent(Events.Voice.SetUseSubtitle.handler(properties.voicesubtitle.value))
}
if (properties.voicesubtitlelanguage) {
document.dispatchEvent(Event.VoiceSetSubtitleLanguageEventFn(properties.voicesubtitlelanguage.value))
document.dispatchEvent(Events.Voice.SetSubtitleLanguage.handler(properties.voicesubtitlelanguage.value))
}
if (properties.voicesubtitlex) {
document.dispatchEvent(Event.VoiceSetSubtitlePositionEventFn({
document.dispatchEvent(Events.Voice.SetSubtitlePosition.handler({
x: properties.voicesubtitlex.value
}))
}
if (properties.voicesubtitley) {
document.dispatchEvent(Event.VoiceSetSubtitlePositionEventFn({
document.dispatchEvent(Events.Voice.SetSubtitlePosition.handler({
y: properties.voicesubtitley.value
}))
}
if (properties.voiceactor) {
document.dispatchEvent(Event.VoiceSetUseVoiceActorEventFn(properties.voiceactor.value))
document.dispatchEvent(Events.Voice.SetUseVoiceActor.handler(properties.voiceactor.value))
}
if (properties.music_selection) {
document.dispatchEvent(Event.MusicSetMusicEventFn(properties.music_selection.value))
document.dispatchEvent(Events.Music.SetMusic.handler(properties.music_selection.value))
}
if (properties.music_title) {
document.dispatchEvent(Event.MusicSetUseMusicEventFn(properties.music_title.value))
document.dispatchEvent(Events.Music.SetUseMusic.handler(properties.music_title.value))
}
if (properties.music_volume) {
document.dispatchEvent(Event.MusicSetVolumeEventFn(properties.music_volume.value))
document.dispatchEvent(Events.Music.SetVolume.handler(properties.music_volume.value))
}
if (properties.custom_music) {
if (properties.custom_music.value) {
document.dispatchEvent(Event.MusicSetCustomEventFn(`file:///${properties.custom_music.value}`))
document.dispatchEvent(Events.Music.SetCustom.handler(`file:///${properties.custom_music.value}`))
} else {
document.dispatchEvent(Event.MusicResetEvent)
document.dispatchEvent(Events.Music.Reset.handler())
}
}
if (properties.custom_video) {
if (properties.custom_video.value) {
document.dispatchEvent(Event.BackgroundSetVideoEventFn(`file:///${properties.custom_video.value}`))
document.dispatchEvent(Events.Background.SetVideo.handler(`file:///${properties.custom_video.value}`))
} else {
document.dispatchEvent(Event.BackgroundResetVideoEvent)
document.dispatchEvent(Events.Background.ResetVideo.handler())
}
}
if (properties.video_volume) {
document.dispatchEvent(Event.BackgroundSetVolumeEventFn(properties.video_volume.value))
document.dispatchEvent(Events.Background.SetVolume.handler(properties.video_volume.value))
}
if (properties.scale) {
document.dispatchEvent(Event.PlayerSetScaleEventFn(properties.scale.value))
document.dispatchEvent(Events.Player.SetScale.handler(properties.scale.value))
}
if (properties.position) {
if (!properties.position.value) {
document.dispatchEvent(Event.PlayerResetPaddingEvent)
document.dispatchEvent(Events.Player.ResetPadding.handler())
} else {
document.dispatchEvent(Event.PlayerSetPaddingEventFn({
document.dispatchEvent(Events.Player.SetPadding.handler({
left: properties.paddingleft.value,
right: properties.paddingright.value,
top: properties.paddingtop.value,
@@ -129,27 +129,27 @@ window.wallpaperPropertyListener = {
}
}
if (properties.paddingleft) {
document.dispatchEvent(Event.PlayerSetPaddingEventFn({
document.dispatchEvent(Events.Player.SetPadding.handler({
left: properties.paddingleft.value,
}))
}
if (properties.paddingright) {
document.dispatchEvent(Event.PlayerSetPaddingEventFn({
document.dispatchEvent(Events.Player.SetPadding.handler({
right: properties.paddingright.value,
}))
}
if (properties.paddingtop) {
document.dispatchEvent(Event.PlayerSetPaddingEventFn({
document.dispatchEvent(Events.Player.SetPadding.handler({
top: properties.paddingtop.value,
}))
}
if (properties.paddingbottom) {
document.dispatchEvent(Event.PlayerSetPaddingEventFn({
document.dispatchEvent(Events.Player.SetPadding.handler({
bottom: properties.paddingbottom.value,
}))
}
if (properties.useStartAnimation) {
document.dispatchEvent(Event.PlayerSetUseStartAnimationEventFn(properties.useStartAnimation.value))
document.dispatchEvent(Events.Player.SetUseStartAnimation.handler(properties.useStartAnimation.value))
}
},
};