diff --git a/showcase/src/components/aklive2d.js b/showcase/src/components/aklive2d.js index d9653ed..00e4290 100644 --- a/showcase/src/components/aklive2d.js +++ b/showcase/src/components/aklive2d.js @@ -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() { diff --git a/showcase/src/components/background.js b/showcase/src/components/background.js index a84bfa3..6c17249 100644 --- a/showcase/src/components/background.js +++ b/showcase/src/components/background.js @@ -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"), } \ No newline at end of file diff --git a/showcase/src/components/event.js b/showcase/src/components/event.js deleted file mode 100644 index fa8dc01..0000000 --- a/showcase/src/components/event.js +++ /dev/null @@ -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") diff --git a/showcase/src/components/events.js b/showcase/src/components/events.js new file mode 100644 index 0000000..2a8a291 --- /dev/null +++ b/showcase/src/components/events.js @@ -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, +} diff --git a/showcase/src/components/helper.js b/showcase/src/components/helper.js index ab3a3da..db9bfb6 100644 --- a/showcase/src/components/helper.js +++ b/showcase/src/components/helper.js @@ -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 +} \ No newline at end of file diff --git a/showcase/src/components/insight.js b/showcase/src/components/insight.js index 72bdc1f..b1f0982 100644 --- a/showcase/src/components/insight.js +++ b/showcase/src/components/insight.js @@ -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) } \ No newline at end of file diff --git a/showcase/src/components/logo.js b/showcase/src/components/logo.js index 6d7c86b..2cb8664 100644 --- a/showcase/src/components/logo.js +++ b/showcase/src/components/logo.js @@ -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), } \ No newline at end of file diff --git a/showcase/src/components/music.js b/showcase/src/components/music.js index 9513408..dc10e49 100644 --- a/showcase/src/components/music.js +++ b/showcase/src/components/music.js @@ -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"), } \ No newline at end of file diff --git a/showcase/src/components/player.js b/showcase/src/components/player.js index 7b3d8a7..e8e1231 100644 --- a/showcase/src/components/player.js +++ b/showcase/src/components/player.js @@ -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), } \ No newline at end of file diff --git a/showcase/src/components/voice.js b/showcase/src/components/voice.js index c4b5cf8..18eddf0 100644 --- a/showcase/src/components/voice.js +++ b/showcase/src/components/voice.js @@ -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), } \ No newline at end of file diff --git a/showcase/src/libs/wallpaper_engine.js b/showcase/src/libs/wallpaper_engine.js index ef0d228..a7e47e0 100644 --- a/showcase/src/libs/wallpaper_engine.js +++ b/showcase/src/libs/wallpaper_engine.js @@ -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)) } }, }; \ No newline at end of file