From 8db8397621c543ff7fd385f901ccc6f6b359a423 Mon Sep 17 00:00:00 2001 From: Hacxy Date: Tue, 12 Mar 2024 13:08:21 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DwordTheDayData?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E7=BC=BA=E5=A4=B1,=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E6=A1=86=E6=A0=B7=E5=BC=8F=E5=8F=82=E6=95=B0?= =?UTF-8?q?,=20=E4=BB=8E=E4=B9=8B=E5=89=8D=E5=8F=AA=E8=83=BD=E7=AE=80?= =?UTF-8?q?=E5=8D=95=E9=85=8D=E7=BD=AE=E4=BF=AE=E6=94=B9=E4=B8=BA=E5=8F=AF?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=AE=8C=E6=95=B4=E7=9A=84CSS=E5=AF=B9?= =?UTF-8?q?=E8=B1=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/oh-my-live2d/src/config/config.ts | 7 +---- packages/oh-my-live2d/src/modules/index.ts | 7 +++-- packages/oh-my-live2d/src/modules/tips.ts | 22 +++++++-------- packages/oh-my-live2d/src/types/index.ts | 14 ++++++++- packages/oh-my-live2d/src/types/options.ts | 4 +-- packages/oh-my-live2d/src/types/tips.ts | 33 ++-------------------- packages/oh-my-live2d/src/utils/index.ts | 12 +++++--- tests/vite-app/public/index.min.js | 10 +++---- tests/vite-app/src/main.ts | 4 +++ 9 files changed, 50 insertions(+), 63 deletions(-) diff --git a/packages/oh-my-live2d/src/config/config.ts b/packages/oh-my-live2d/src/config/config.ts index ee37991..e113b31 100644 --- a/packages/oh-my-live2d/src/config/config.ts +++ b/packages/oh-my-live2d/src/config/config.ts @@ -16,12 +16,7 @@ export const DEFAULT_OPTIONS: DefaultOptions = { }, models: [], tips: { - style: { - width: 230, - height: 100, - offsetX: 0, - offsetY: 0 - }, + style: {}, idleTips: { wordTheDay: false, message: [], diff --git a/packages/oh-my-live2d/src/modules/index.ts b/packages/oh-my-live2d/src/modules/index.ts index 852550f..2c4f4e3 100644 --- a/packages/oh-my-live2d/src/modules/index.ts +++ b/packages/oh-my-live2d/src/modules/index.ts @@ -17,7 +17,7 @@ import type { Options, PixiLive2dDisplayModule } from '../types/index.js'; -import { checkVersion, handleStyleSize, printProjectInfo } from '../utils/index.js'; +import { checkVersion, handleCommonStyle, printProjectInfo } from '../utils/index.js'; export class OhMyLive2D { private stage: Stage; @@ -105,8 +105,9 @@ export class OhMyLive2D { } setStageStyle(style: Record): void { - handleStyleSize(style); - this.stage.setStyle(style); + const newStyle = handleCommonStyle(style); + + this.stage.setStyle(newStyle); this.application.resize(); } diff --git a/packages/oh-my-live2d/src/modules/tips.ts b/packages/oh-my-live2d/src/modules/tips.ts index 8c0020f..48fea68 100644 --- a/packages/oh-my-live2d/src/modules/tips.ts +++ b/packages/oh-my-live2d/src/modules/tips.ts @@ -2,8 +2,8 @@ import { getRandomArrayItem, isFunction, mergeDeep, setIntervalAsync } from 'tia import { CONFIG } from '../config/index.js'; import type { IdleTimer } from '../types/common.js'; -import type { CSSProperties, DeepRequired, TipsOptions } from '../types/index.js'; -import { createElement, getWelcomeMessage, getWordTheDay, setStyleForElement, sleep } from '../utils/index.js'; +import type { CSSProperties, DefaultTipsOptions } from '../types/index.js'; +import { createElement, getWelcomeMessage, getWordTheDay, handleCommonStyle, setStyleForElement, sleep } from '../utils/index.js'; export class Tips { private element: HTMLElement; @@ -17,7 +17,7 @@ export class Tips { constructor( stageElement: HTMLElement, - private tipsOptions: DeepRequired + private tipsOptions: DefaultTipsOptions ) { this.element = createElement({ id: CONFIG.tipsId, tagName: 'div' }); stageElement.append(this.element); @@ -49,19 +49,17 @@ export class Tips { animationDuration: `${this.transitionTime}ms,${this.transitionTime}ms`, animationFillMode: 'forwards, none', animationIterationCount: '1, infinite', - minWidth: '230px', - minHeight: '100px', + width: '60%', + height: '100px', top: 0 }); if (this.tipsOptions) { - const { width = 230, height = 100, offsetX = 0, offsetY = 0 } = this.tipsOptions.style || {}; + // const { width = 230, height = 100, offsetX = 0, offsetY = 0 } = this.tipsOptions.style || {}; + const style = handleCommonStyle(this.tipsOptions.style || {}); - this.setStyle({ - minWidth: `${width}px`, - minHeight: `${height}px`, - left: `calc(${offsetX}px + 50%)`, - top: `${offsetY}px` - }); + console.log(style); + + this.setStyle(style); } } diff --git a/packages/oh-my-live2d/src/types/index.ts b/packages/oh-my-live2d/src/types/index.ts index 5bed769..1c4ba27 100644 --- a/packages/oh-my-live2d/src/types/index.ts +++ b/packages/oh-my-live2d/src/types/index.ts @@ -6,6 +6,7 @@ import type { DEFAULT_OPTIONS } from 'src/config/config.js'; import type { ModelOptions } from './model.js'; import type { Options } from './options.js'; +import { TipsOptions } from './tips.js'; import type { DeepRequired } from './utils.js'; export * from './options.js'; @@ -23,9 +24,15 @@ export type ApplicationType = typeof Application; export type CSSProperties = CSS.Properties; -export type DefaultOptions = Omit, 'parentElement' | 'models'> & { parentElement: HTMLElement } & { +export type DefaultOptions = Omit, 'parentElement' | 'models' | 'tips'> & { + parentElement: HTMLElement; + tips: DefaultTipsOptions; +} & { models: ModelOptions[]; }; +export type DefaultTipsOptions = Omit, 'style'> & { + style?: CommonStyleType; +}; export type Live2DModelType = typeof Live2DModel; @@ -54,3 +61,8 @@ export type LoadMethod = ( PixiLive2dDisplay: PixiLive2dDisplayModule; HitAreaFrames: typeof HitAreaFrames; }>; + +export type CommonStyleType = Omit & { + width?: number | string; + height?: number | string; +}; diff --git a/packages/oh-my-live2d/src/types/options.ts b/packages/oh-my-live2d/src/types/options.ts index fa8b99e..b01c20f 100644 --- a/packages/oh-my-live2d/src/types/options.ts +++ b/packages/oh-my-live2d/src/types/options.ts @@ -10,7 +10,7 @@ import type { ImportType } from './index.js'; */ export interface Options { /** - * 导入类型, 默认使用全量导入: 'complete' + * 导入类型, 默认使用全量导入: complete * @default complete * @valueType complete | cubism2 | cubism5 */ @@ -20,7 +20,7 @@ export interface Options { * 自定义 Cubism SDK 外部资源地址 * * > [!TIP] - * > 从 v0.5.0 版本开始, 不再以模块形式通过 vite 打包构建 SDK , 因为这会造成部分模型在生产环境中展示异常, 这在 Vite5 中已得到证实, 为了更稳定的加载模型, 自 v0.5.0 版本后, 将通过 script 标签的 src 属性按需去引入对应版本的 Cubism SDK , 而这个过程是完全自动的, 您无需手动的去引入这些资源, 官方将长期维护这个服务器, 保证此 SDK 地址的安全与稳定性. 若发现 SDK 加载出现异常, 请及时联系作者 + * > 从 v0.5.0 版本开始, 不再通过模块方式使用 vite 打包 SDK , 自 v0.5.0 版本起, 将通过 script 标签的 src 属性按需去引入对应版本的 Cubism SDK , 这个过程是完全自动的, 您无需关注这个过程也无需手动的去引入这些资源, 官方将长期维护这个服务器, 保证此 SDK 地址的安全与稳定性. 若发现 SDK 加载出现异常, 请及时联系作者. * @valueType object */ libraryUrls?: { diff --git a/packages/oh-my-live2d/src/types/tips.ts b/packages/oh-my-live2d/src/types/tips.ts index 3b009e5..8381a03 100644 --- a/packages/oh-my-live2d/src/types/tips.ts +++ b/packages/oh-my-live2d/src/types/tips.ts @@ -1,4 +1,5 @@ -import type { WordTheDayData } from 'src/types/common.js'; +import type { WordTheDayData } from '../types/common.js'; +import type { CommonStyleType } from '../types/index.js'; /** * # 提示框选项 @@ -12,35 +13,7 @@ export interface TipsOptions { * 自定义提示框样式 * @valueType object */ - style?: { - /** - * 提示框宽度, 单位 px - * - * @default 230 - */ - width?: number; - - /** - * 提示框高度, 单位 px - * - * @default 100 - */ - height?: number; - - /** - * 调整提示框位于舞台中的 x 轴方向偏移量 - * - * @default 0 - */ - offsetX?: number; - - /** - * 调整提示框位于舞台中的 y 轴方向偏移量 - * - * @default 0 - */ - offsetY?: number; - }; + style?: CommonStyleType; /** * 闲置状态下的提示 diff --git a/packages/oh-my-live2d/src/utils/index.ts b/packages/oh-my-live2d/src/utils/index.ts index 71f8bc3..32037b0 100644 --- a/packages/oh-my-live2d/src/utils/index.ts +++ b/packages/oh-my-live2d/src/utils/index.ts @@ -2,7 +2,7 @@ import type { WordTheDayData } from 'src/types/common.js'; import { isNumber } from 'tianjie'; import { SDK } from '../config/index.js'; -import type { CSSProperties, ElementConfig, ImportType, LibraryUrls, PixiLive2dDisplayModule } from '../types/index.js'; +import type { CSSProperties, CommonStyleType, ElementConfig, ImportType, LibraryUrls, PixiLive2dDisplayModule } from '../types/index.js'; export * from './tips.js'; @@ -19,14 +19,18 @@ export const printProjectInfo = (): void => 'background: #add7fb; padding:5px 0;' ); -export const handleStyleSize = (value: Record): void => { +export const handleCommonStyle = (value: CommonStyleType): CSSProperties => { + const style = { ...value }; + if ('width' in value && isNumber(value.width)) { - value.width = `${value.width}px`; + style.width = `${value.width}px`; } if ('height' in value && isNumber(value.height)) { - value.height = `${value.height}px`; + style.height = `${value.height}px`; } + + return style as CSSProperties; }; /** diff --git a/tests/vite-app/public/index.min.js b/tests/vite-app/public/index.min.js index 158cc52..5fcb1ef 100644 --- a/tests/vite-app/public/index.min.js +++ b/tests/vite-app/public/index.min.js @@ -1,4 +1,4 @@ -(function(d,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(d=typeof globalThis!="undefined"?globalThis:d||self,r(d.OML2D={}))})(this,function(d){"use strict";var q=Object.defineProperty;var J=(d,r,c)=>r in d?q(d,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):d[r]=c;var o=(d,r,c)=>(J(d,typeof r!="symbol"?r+"":r,c),c);var g=(d,r,c)=>new Promise((L,T)=>{var k=w=>{try{m(c.next(w))}catch(p){T(p)}},v=w=>{try{m(c.throw(w))}catch(p){T(p)}},m=w=>w.done?L(w.value):Promise.resolve(w.value).then(k,v);m((c=c.apply(d,r)).next())});const r=i=>{const t=i.length;if(t===0)return;const e=Math.floor(Math.random()*t);return i[e]},c=(i,t)=>{let e;return{start:function(){return g(this,null,function*(){const s=()=>g(this,null,function*(){e&&(yield i(),clearTimeout(e),e=setTimeout(s,t))});e||(clearTimeout(e),e=setTimeout(s,t))})},stop:function(){clearTimeout(e),e=void 0}}},L=i=>i!==null&&typeof i=="object"&&!Array.isArray(i),T=i=>typeof i=="number"||i instanceof Number,k=i=>typeof i=="function",v=(i,t)=>{const e=Object.assign({},i);return L(i)&&L(t)&&Object.keys(t).forEach(s=>{L(t[s])?s in i?e[s]=v(i[s],t[s]):Object.assign(e,{[s]:t[s]}):Object.assign(e,{[s]:t[s]})}),e},m="https://lib.oml2d.com",w={fixed:!0,sayHello:!0,transitionTime:1e3,parentElement:document.body,importType:"complete",libraryUrls:{cubism2:`${m}/live2d.min.js`,cubism5:`${m}/live2dcubismcore.min.js`},models:[],tips:{style:{width:230,height:100,offsetX:0,offsetY:0},idleTips:{wordTheDay:!1,message:[],duration:5e3,interval:1e4,priority:2},welcomeTips:{message:{daybreak:"早上好！一日之计在于晨，美好的一天就要开始了。",morning:"上午好！工作顺利嘛，不要久坐，多起来走动走动哦！",noon:"中午了，工作了一个上午，现在是午餐时间！",afternoon:"午后很容易犯困呢，来杯咖啡吧~",dusk:"傍晚了！工作一天幸苦啦~",night:"晚上好，今天过得怎么样呢？",lateNight:"已经这么晚了呀，早点休息吧，晚安~",weeHours:"这么晚还不睡吗？当心熬夜秃头哦！"},duration:6e3,priority:3},copyTips:{duration:3e3,priority:3,message:["你复制了什么内容呢?记得注明出处哦~"]}}},p={PIXI:`${m}/pixi.min.js`,PIXI_LIVE2D_DISPLAY:`${m}/pixi-live2d-display.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM2:`${m}/pixi-live2d-display-cubism2.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM4:`${m}/pixi-live2d-display-cubism4.min.js`,PIXI_LIVE2D_DISPLAY_EXTRA:`${m}/pixi-live2d-display-extra.min.js`},E={stageId:"oml2dStage",canvasId:"oml2dCanvas",statusBarId:"oml2dStatusBar",tipsId:"oml2dTips",menusId:"oml2dMenus"},N=[{id:"Rest",name:"icon-bed",title:"休息"},{id:"SwitchModel",name:"icon-a-userswitch-fill",title:"切换模型"},{id:"About",name:"icon-info-circle-fill",title:"关于"}],C=` +(function(d,a){typeof exports=="object"&&typeof module!="undefined"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(d=typeof globalThis!="undefined"?globalThis:d||self,a(d.OML2D={}))})(this,function(d){"use strict";var tt=Object.defineProperty;var H=Object.getOwnPropertySymbols;var et=Object.prototype.hasOwnProperty,it=Object.prototype.propertyIsEnumerable;var z=(d,a,r)=>a in d?tt(d,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):d[a]=r,B=(d,a)=>{for(var r in a||(a={}))et.call(a,r)&&z(d,r,a[r]);if(H)for(var r of H(a))it.call(a,r)&&z(d,r,a[r]);return d};var o=(d,a,r)=>(z(d,typeof a!="symbol"?a+"":a,r),r);var g=(d,a,r)=>new Promise((L,T)=>{var k=w=>{try{m(r.next(w))}catch(p){T(p)}},v=w=>{try{m(r.throw(w))}catch(p){T(p)}},m=w=>w.done?L(w.value):Promise.resolve(w.value).then(k,v);m((r=r.apply(d,a)).next())});const a=i=>{const t=i.length;if(t===0)return;const e=Math.floor(Math.random()*t);return i[e]},r=(i,t)=>{let e;return{start:function(){return g(this,null,function*(){const s=()=>g(this,null,function*(){e&&(yield i(),clearTimeout(e),e=setTimeout(s,t))});e||(clearTimeout(e),e=setTimeout(s,t))})},stop:function(){clearTimeout(e),e=void 0}}},L=i=>i!==null&&typeof i=="object"&&!Array.isArray(i),T=i=>typeof i=="number"||i instanceof Number,k=i=>typeof i=="function",v=(i,t)=>{const e=Object.assign({},i);return L(i)&&L(t)&&Object.keys(t).forEach(s=>{L(t[s])?s in i?e[s]=v(i[s],t[s]):Object.assign(e,{[s]:t[s]}):Object.assign(e,{[s]:t[s]})}),e},m="https://lib.oml2d.com",w={fixed:!0,sayHello:!0,transitionTime:1e3,parentElement:document.body,importType:"complete",libraryUrls:{cubism2:`${m}/live2d.min.js`,cubism5:`${m}/live2dcubismcore.min.js`},models:[],tips:{style:{},idleTips:{wordTheDay:!1,message:[],duration:5e3,interval:1e4,priority:2},welcomeTips:{message:{daybreak:"早上好！一日之计在于晨，美好的一天就要开始了。",morning:"上午好！工作顺利嘛，不要久坐，多起来走动走动哦！",noon:"中午了，工作了一个上午，现在是午餐时间！",afternoon:"午后很容易犯困呢，来杯咖啡吧~",dusk:"傍晚了！工作一天幸苦啦~",night:"晚上好，今天过得怎么样呢？",lateNight:"已经这么晚了呀，早点休息吧，晚安~",weeHours:"这么晚还不睡吗？当心熬夜秃头哦！"},duration:6e3,priority:3},copyTips:{duration:3e3,priority:3,message:["你复制了什么内容呢?记得注明出处哦~"]}}},p={PIXI:`${m}/pixi.min.js`,PIXI_LIVE2D_DISPLAY:`${m}/pixi-live2d-display.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM2:`${m}/pixi-live2d-display-cubism2.min.js`,PIXI_LIVE2D_DISPLAY_CUBISM4:`${m}/pixi-live2d-display-cubism4.min.js`,PIXI_LIVE2D_DISPLAY_EXTRA:`${m}/pixi-live2d-display-extra.min.js`},E={stageId:"oml2dStage",canvasId:"oml2dCanvas",statusBarId:"oml2dStatusBar",tipsId:"oml2dTips",menusId:"oml2dMenus"},$=[{id:"Rest",name:"icon-bed",title:"休息"},{id:"SwitchModel",name:"icon-a-userswitch-fill",title:"切换模型"},{id:"About",name:"icon-info-circle-fill",title:"关于"}],j=` @keyframes oml2d-shake-tips{ 0% { transform: translate(-50%, 5%) scale(0.99); @@ -117,15 +117,15 @@ transform: translateX(0%); } } -`,H=function(i){const{message:t}=i;let e="";const s=new Date().getHours().toString(),n=/^[5-7]$/,a=/^(?:[8-9]|1[0-1])$/,h=/^(1[2-3])$/,y=/^1[4-7]$/,I=/^1[8-9]$/,x=/^2[0-1]$/,M=/^2[2-3]$/;return n.test(s)?e=t.daybreak:a.test(s)?e=t==null?void 0:t.morning:h.test(s)?e=t==null?void 0:t.noon:y.test(s)?e=t==null?void 0:t.afternoon:I.test(s)?e=t==null?void 0:t.dusk:x.test(s)?e=t==null?void 0:t.night:M.test(s)?e=t==null?void 0:t.lateNight:e=t==null?void 0:t.weeHours,e},$=()=>console.log(` +`,X=function(i){const{message:t}=i;let e="";const s=new Date().getHours().toString(),n=/^[5-7]$/,l=/^(?:[8-9]|1[0-1])$/,h=/^(1[2-3])$/,f=/^1[4-7]$/,I=/^1[8-9]$/,x=/^2[0-1]$/,M=/^2[2-3]$/;return n.test(s)?e=t.daybreak:l.test(s)?e=t==null?void 0:t.morning:h.test(s)?e=t==null?void 0:t.noon:f.test(s)?e=t==null?void 0:t.afternoon:I.test(s)?e=t==null?void 0:t.dusk:x.test(s)?e=t==null?void 0:t.night:M.test(s)?e=t==null?void 0:t.lateNight:e=t==null?void 0:t.weeHours,e},F=()=>console.log(` %c 🎉🎉🎉 %c %c ✨ oh-my-live2d v0.9.0 - https://oml2d.com Happy Hacking !! ✨ %c %c 🎉🎉🎉 -`,"background: #add7fb; padding:5px 0;","background: #58b0fc; padding:5px 0;","color: #fff; background: #030307; padding:5px 0;","background: #58b0fc; padding:5px 0;","background: #add7fb; padding:5px 0;"),B=i=>{"width"in i&&T(i.width)&&(i.width=`${i.width}px`),"height"in i&&T(i.height)&&(i.height=`${i.height}px`)},O=(i,t)=>{Object.assign(t.style,i)},X=i=>new Promise(t=>setTimeout(t,i)),b=i=>{const t=document.createElement(i.tagName);return t.id=i.id,i.className&&(t.className=i.className),i.dataName&&t.setAttribute("data-name",i.dataName),i.children&&i.children.forEach(e=>{t.appendChild(b(e))}),i.innerHtml&&(t.innerHTML=i.innerHtml),i.innerText&&(t.innerText=i.innerText),t},u=i=>new Promise(t=>{const e=document.createElement("script");document.head.append(e),e.src=i,e.addEventListener("load",()=>{t()})}),j=(i,t)=>g(this,null,function*(){switch(i){case"cubism2":yield u(t[i]),yield u(p.PIXI),yield u(p.PIXI_LIVE2D_DISPLAY_CUBISM2);break;case"cubism5":yield u(t[i]),yield u(p.PIXI),yield u(p.PIXI_LIVE2D_DISPLAY_CUBISM4);break;default:yield Promise.all([u(t.cubism2),u(t.cubism5)]),yield u(p.PIXI),yield u(p.PIXI_LIVE2D_DISPLAY);break}yield u(p.PIXI_LIVE2D_DISPLAY_EXTRA)}),F=()=>g(this,null,function*(){const i=yield fetch("https://unpkg.com/oh-my-live2d/package.json"),{version:t}=yield i.json();t!=="0.9.0"&&console.warn("[oml2d] 检查到 oh-my-live2d 存在最新版:",`v${t}`,"请前往: https://oml2d.com 以获得最新版详细信息, 并及时更新.")}),z=i=>g(this,null,function*(){const e=yield(yield fetch("https://v1.hitokoto.cn/")).json();return i?i(e):`${e.hitokoto} -- ${e.from}`});class R{constructor(t){o(this,"element");o(this,"style",{});o(this,"clickItem");this.stageElement=t,this.element=b({id:E.menusId,tagName:"div",className:E.menusId}),this.createMenuItem(),this.stageElement.append(this.element),this.ininStyle()}ininStyle(){this.setStyle({transition:"all 500ms",visibility:"hidden",opacity:0,position:"absolute",right:0,bottom:"10%",zIndex:"9999",fontSize:"26px"}),this.stageElement.addEventListener("mouseover",()=>this.setStyle({opacity:1,visibility:"visible"})),this.stageElement.addEventListener("mouseout",()=>this.setStyle({opacity:0,visibility:"hidden"}))}createMenuItem(){const t=N.map(e=>{const s=b({id:e.id,tagName:"div",dataName:e.id,className:"oml2d-menus-item",innerHtml:` +`,"background: #add7fb; padding:5px 0;","background: #58b0fc; padding:5px 0;","color: #fff; background: #030307; padding:5px 0;","background: #58b0fc; padding:5px 0;","background: #add7fb; padding:5px 0;"),D=i=>{const t=B({},i);return"width"in i&&T(i.width)&&(t.width=`${i.width}px`),"height"in i&&T(i.height)&&(t.height=`${i.height}px`),t},O=(i,t)=>{Object.assign(t.style,i)},R=i=>new Promise(t=>setTimeout(t,i)),b=i=>{const t=document.createElement(i.tagName);return t.id=i.id,i.className&&(t.className=i.className),i.dataName&&t.setAttribute("data-name",i.dataName),i.children&&i.children.forEach(e=>{t.appendChild(b(e))}),i.innerHtml&&(t.innerHTML=i.innerHtml),i.innerText&&(t.innerText=i.innerText),t},u=i=>new Promise(t=>{const e=document.createElement("script");document.head.append(e),e.src=i,e.addEventListener("load",()=>{t()})}),V=(i,t)=>g(this,null,function*(){switch(i){case"cubism2":yield u(t[i]),yield u(p.PIXI),yield u(p.PIXI_LIVE2D_DISPLAY_CUBISM2);break;case"cubism5":yield u(t[i]),yield u(p.PIXI),yield u(p.PIXI_LIVE2D_DISPLAY_CUBISM4);break;default:yield Promise.all([u(t.cubism2),u(t.cubism5)]),yield u(p.PIXI),yield u(p.PIXI_LIVE2D_DISPLAY);break}yield u(p.PIXI_LIVE2D_DISPLAY_EXTRA)}),Y=()=>g(this,null,function*(){const i=yield fetch("https://unpkg.com/oh-my-live2d/package.json"),{version:t}=yield i.json();t!=="0.9.0"&&console.warn("[oml2d] 检查到 oh-my-live2d 存在最新版:",`v${t}`,"请前往: https://oml2d.com 以获得最新版详细信息, 并及时更新.")}),A=i=>g(this,null,function*(){const e=yield(yield fetch("https://v1.hitokoto.cn/")).json();return i?i(e):`${e.hitokoto} -- ${e.from}`});class U{constructor(t){o(this,"element");o(this,"style",{});o(this,"clickItem");this.stageElement=t,this.element=b({id:E.menusId,tagName:"div",className:E.menusId}),this.createMenuItem(),this.stageElement.append(this.element),this.ininStyle()}ininStyle(){this.setStyle({transition:"all 500ms",visibility:"hidden",opacity:0,position:"absolute",right:0,bottom:"10%",zIndex:"9999",fontSize:"26px"}),this.stageElement.addEventListener("mouseover",()=>this.setStyle({opacity:1,visibility:"visible"})),this.stageElement.addEventListener("mouseout",()=>this.setStyle({opacity:0,visibility:"hidden"}))}createMenuItem(){const t=$.map(e=>{const s=b({id:e.id,tagName:"div",dataName:e.id,className:"oml2d-menus-item",innerHtml:` - `});return s.title=e.title,s});this.element.append(...t),this.element.addEventListener("click",e=>{var n;if(e.target===e.currentTarget)return;let s=e.target;for(;s.parentNode!==e.currentTarget;)s=s.parentNode;(n=this.clickItem)==null||n.call(this,s.getAttribute("data-name"))})}onClickItem(t){this.clickItem=t}setStyle(t){this.style=v(this.style,t),O(this.style,this.element)}}var S=(i=>(i.pc="PC",i.mobile="MOBILE",i))(S||{}),P=(i=>(i.ALL="ALL",i.IDLE="IDLE",i.NONE="NONE",i))(P||{});class Y{constructor(t,e,s,n){o(this,"model");o(this,"failEvent");this.live2dModel=t,this.modelOptions=e,this.application=s,this.HitAreaFrames=n,this.model=this.create()}create(){const t=this.live2dModel.fromSync(this.modelOptions.path||"",{motionPreload:this.modelOptions.motionPreloadStrategy||P.IDLE,onError:e=>{var s;(s=this.failEvent)==null||s.call(this,e)}});return t.once("load",()=>{if(this.modelOptions.showHitAreaFrames){const e=new this.HitAreaFrames;t.addChild(e)}this.application.stage.addChild(this.model),this.application.resize()}),t.on("hit",e=>{const s=Object.keys(t.internalModel.motionManager.motionGroups);let n=s.find(a=>e[0].includes(a.toLowerCase())||a.toLowerCase().includes(e[0]));n||(n=r(s)),this.modelOptions.motionPreloadStrategy===P.ALL?t.motion(n):t.internalModel.motionManager.loadMotion(n,0).then(()=>{t.motion(n)})}),t}onLoaded(t){this.model.once("load",()=>{t({width:this.model.width,height:this.model.height})})}onFail(t){this.failEvent=t}setScale(t=.1,e=.1){this.model.scale.set(t,e)}setPosition(t=0,e=0){this.model.x=t,this.model.y=e}changeTexture(t){if(this.model.textures.length<=1)t({status:!1});else{const e=this.model.textures.shift();this.model.textures.push(e),t({status:!0})}}}class V{constructor(t,e){o(this,"element");o(this,"canvasElement");o(this,"wrapperElement");o(this,"style",{});o(this,"canvasStyle",{});o(this,"status",0);o(this,"slideChangeEnd");this.targetElement=t,this.options=e,this.element=b({id:E.stageId,tagName:"div"}),this.canvasElement=b({id:E.canvasId,tagName:"canvas"}),this.wrapperElement=b({id:"oml2dWrapper",tagName:"div"}),this.create(),this.initStyle()}create(){const t=document.createDocumentFragment();this.element.append(this.canvasElement),t.append(this.element),this.targetElement.append(t),this.targetElement!==document.body&&document.body.append(this.targetElement),window.onbeforeunload=()=>{this.targetElement.removeChild(this.element)}}initStyle(){this.setStyle({width:"0px",height:"0px",position:this.options.fixed?"fixed":"relative",left:0,bottom:0,zIndex:"9997",transform:"translateY(130%)"});const t=b({tagName:"style",id:"oml2dStyle",innerHtml:C});document.head.append(t)}setStyle(t){this.style=v(this.style,t),O(this.style,this.element),this.setCanvasStyle({width:"100%",height:"100%",zIndex:"9999",position:"relative"})}setCanvasStyle(t){this.canvasStyle=v(this.canvasStyle,t),O(this.canvasStyle,this.canvasElement)}slideIn(t){return this.setStyle({animationName:"oml2d-stage-slide-in",animationDuration:`${t}ms`,animationFillMode:"forwards"}),this.status=1,new Promise(e=>{setTimeout(()=>{var s;(s=this.slideChangeEnd)==null||s.call(this,this.status),e()},t)})}slideOut(t){return this.setStyle({animationName:"oml2d-stage-slide-out",animationDuration:`${t}ms`,animationFillMode:"forwards"}),this.status=0,new Promise(e=>setTimeout(()=>{var s;(s=this.slideChangeEnd)==null||s.call(this,this.status),e()},t))}onSlideChangeEnd(t){this.slideChangeEnd=t}}var _=(i=>(i.info="info",i.error="error",i))(_||{});class W{constructor(t){o(this,"element");o(this,"transitionTime",800);o(this,"status",0);o(this,"stateColor",{info:"#58b0fc",error:"#F08080"});o(this,"style",{});o(this,"timer",0);this.element=b({id:E.statusBarId,tagName:"div",innerText:"hello"}),t.append(this.element),this.initStyle()}initStyle(){this.setStyle({minWidth:"20px",minHeight:"40px",position:"fixed",transform:"translateX(-110%)",left:"0",bottom:"80px",padding:"7px 5px",zIndex:"9998",backgroundColor:"#58b0fc",borderStyle:"solid",borderColor:"#fff",fontWeight:"bold",borderRadius:"0 5px 5px 0",borderWidth:"2px 2px 2px 0",boxShadow:"0 0 5px #999",color:"#fff",display:"flex",alignItems:"center",textAlign:"center",flexWrap:"wrap",fontSize:"14px",writingMode:"vertical-lr",cursor:"pointer"})}setStyle(t){this.style=v(this.style,t),O(t,this.element)}slideIn(){return new Promise(t=>{this.status=1,this.setStyle({animationName:"oml2d-status-bar-slide-in",animationDuration:`${this.transitionTime}ms`,animationFillMode:"forwards"}),setTimeout(()=>{t(this.status)},this.transitionTime)})}slideOut(){return new Promise(t=>{this.status=0,this.setStyle({animationName:"oml2d-status-bar-slide-out",animationDuration:`${this.transitionTime}ms`,animationFillMode:"forwards"}),setTimeout(()=>{t(this.status)},this.transitionTime)})}showLoading(){this.popup(` + `});return s.title=e.title,s});this.element.append(...t),this.element.addEventListener("click",e=>{var n;if(e.target===e.currentTarget)return;let s=e.target;for(;s.parentNode!==e.currentTarget;)s=s.parentNode;(n=this.clickItem)==null||n.call(this,s.getAttribute("data-name"))})}onClickItem(t){this.clickItem=t}setStyle(t){this.style=v(this.style,t),O(this.style,this.element)}}var S=(i=>(i.pc="PC",i.mobile="MOBILE",i))(S||{}),P=(i=>(i.ALL="ALL",i.IDLE="IDLE",i.NONE="NONE",i))(P||{});class W{constructor(t,e,s,n){o(this,"model");o(this,"failEvent");this.live2dModel=t,this.modelOptions=e,this.application=s,this.HitAreaFrames=n,this.model=this.create()}create(){const t=this.live2dModel.fromSync(this.modelOptions.path||"",{motionPreload:this.modelOptions.motionPreloadStrategy||P.IDLE,onError:e=>{var s;(s=this.failEvent)==null||s.call(this,e)}});return t.once("load",()=>{if(this.modelOptions.showHitAreaFrames){const e=new this.HitAreaFrames;t.addChild(e)}this.application.stage.addChild(this.model),this.application.resize()}),t.on("hit",e=>{const s=Object.keys(t.internalModel.motionManager.motionGroups);let n=s.find(l=>e[0].includes(l.toLowerCase())||l.toLowerCase().includes(e[0]));n||(n=a(s)),this.modelOptions.motionPreloadStrategy===P.ALL?t.motion(n):t.internalModel.motionManager.loadMotion(n,0).then(()=>{t.motion(n)})}),t}onLoaded(t){this.model.once("load",()=>{t({width:this.model.width,height:this.model.height})})}onFail(t){this.failEvent=t}setScale(t=.1,e=.1){this.model.scale.set(t,e)}setPosition(t=0,e=0){this.model.x=t,this.model.y=e}changeTexture(t){if(this.model.textures.length<=1)t({status:!1});else{const e=this.model.textures.shift();this.model.textures.push(e),t({status:!0})}}}class Q{constructor(t,e){o(this,"element");o(this,"canvasElement");o(this,"wrapperElement");o(this,"style",{});o(this,"canvasStyle",{});o(this,"status",0);o(this,"slideChangeEnd");this.targetElement=t,this.options=e,this.element=b({id:E.stageId,tagName:"div"}),this.canvasElement=b({id:E.canvasId,tagName:"canvas"}),this.wrapperElement=b({id:"oml2dWrapper",tagName:"div"}),this.create(),this.initStyle()}create(){const t=document.createDocumentFragment();this.element.append(this.canvasElement),t.append(this.element),this.targetElement.append(t),this.targetElement!==document.body&&document.body.append(this.targetElement),window.onbeforeunload=()=>{this.targetElement.removeChild(this.element)}}initStyle(){this.setStyle({width:"0px",height:"0px",position:this.options.fixed?"fixed":"relative",left:0,bottom:0,zIndex:"9997",transform:"translateY(130%)"});const t=b({tagName:"style",id:"oml2dStyle",innerHtml:j});document.head.append(t)}setStyle(t){this.style=v(this.style,t),O(this.style,this.element),this.setCanvasStyle({width:"100%",height:"100%",zIndex:"9999",position:"relative"})}setCanvasStyle(t){this.canvasStyle=v(this.canvasStyle,t),O(this.canvasStyle,this.canvasElement)}slideIn(t){return this.setStyle({animationName:"oml2d-stage-slide-in",animationDuration:`${t}ms`,animationFillMode:"forwards"}),this.status=1,new Promise(e=>{setTimeout(()=>{var s;(s=this.slideChangeEnd)==null||s.call(this,this.status),e()},t)})}slideOut(t){return this.setStyle({animationName:"oml2d-stage-slide-out",animationDuration:`${t}ms`,animationFillMode:"forwards"}),this.status=0,new Promise(e=>setTimeout(()=>{var s;(s=this.slideChangeEnd)==null||s.call(this,this.status),e()},t))}onSlideChangeEnd(t){this.slideChangeEnd=t}}var _=(i=>(i.info="info",i.error="error",i))(_||{});class G{constructor(t){o(this,"element");o(this,"transitionTime",800);o(this,"status",0);o(this,"stateColor",{info:"#58b0fc",error:"#F08080"});o(this,"style",{});o(this,"timer",0);this.element=b({id:E.statusBarId,tagName:"div",innerText:"hello"}),t.append(this.element),this.initStyle()}initStyle(){this.setStyle({minWidth:"20px",minHeight:"40px",position:"fixed",transform:"translateX(-110%)",left:"0",bottom:"80px",padding:"7px 5px",zIndex:"9998",backgroundColor:"#58b0fc",borderStyle:"solid",borderColor:"#fff",fontWeight:"bold",borderRadius:"0 5px 5px 0",borderWidth:"2px 2px 2px 0",boxShadow:"0 0 5px #999",color:"#fff",display:"flex",alignItems:"center",textAlign:"center",flexWrap:"wrap",fontSize:"14px",writingMode:"vertical-lr",cursor:"pointer"})}setStyle(t){this.style=v(this.style,t),O(t,this.element)}slideIn(){return new Promise(t=>{this.status=1,this.setStyle({animationName:"oml2d-status-bar-slide-in",animationDuration:`${this.transitionTime}ms`,animationFillMode:"forwards"}),setTimeout(()=>{t(this.status)},this.transitionTime)})}slideOut(){return new Promise(t=>{this.status=0,this.setStyle({animationName:"oml2d-status-bar-slide-out",animationDuration:`${this.transitionTime}ms`,animationFillMode:"forwards"}),setTimeout(()=>{t(this.status)},this.transitionTime)})}showLoading(){this.popup(`
加载中
- `,"info",!1)}hideLoading(){this.popup("加载成功")}loadingError(t){this.popup("加载失败","error",!1);const e=()=>{this.popup("重新加载","info",!1)},s=()=>{this.popup("加载失败","error",!1)},n=()=>{t(),this.element.removeEventListener("mouseout",s),this.element.removeEventListener("mouseover",e),this.element.removeEventListener("click",n)};this.element.addEventListener("click",n),this.element.addEventListener("mouseover",e),this.element.addEventListener("mouseout",s)}popup(t,e="info",s=1e3,n){clearTimeout(this.timer),this.setContent(t),this.setStyle({backgroundColor:this.stateColor[e]}),this.slideIn().then(()=>{s?this.timer=setTimeout(()=>{this.slideOut()},s):n&&(this.element.onclick=n)})}setContent(t){this.element.innerHTML=t}}class U{constructor(t,e){o(this,"element");o(this,"idlePlayer");o(this,"closeTimer",0);o(this,"transitionTime",1e3);o(this,"style",{});o(this,"priority",0);this.tipsOptions=e,this.element=b({id:E.tipsId,tagName:"div"}),t.append(this.element),this.initStyle(),this.idlePlayer=this.createIdleMessagePlayer()}initStyle(){if(this.setStyle({position:"absolute",fontSize:"18px",borderRadius:"10px",filter:"drop-shadow(0 0 5px #999)",backgroundColor:"#58b0fc",border:"2px solid #fff",color:"#fff",padding:"3px 5px",opacity:0,visibility:"hidden",transform:"translateX(-50%)",left:"50%",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",animationDuration:`${this.transitionTime}ms,${this.transitionTime}ms`,animationFillMode:"forwards, none",animationIterationCount:"1, infinite",minWidth:"230px",minHeight:"100px",top:0}),this.tipsOptions){const{width:t=230,height:e=100,offsetX:s=0,offsetY:n=0}=this.tipsOptions.style||{};this.setStyle({minWidth:`${t}px`,minHeight:`${e}px`,left:`calc(${s}px + 50%)`,top:`${n}px`})}}setStyle(t){this.style=v(this.style,t),O(this.style,this.element)}setContent(t){this.element.innerHTML=t}showMessage(t,e=3e3,s=0){s{this.setStyle({animationName:"oml2d-hidden-tips,oml2d-shake-tips"}),this.priority=0},e))}clear(){var t;this.setStyle({animationName:"oml2d-hidden-tips,oml2d-shake-tips"}),(t=this.idlePlayer)==null||t.stop(),clearTimeout(this.closeTimer),this.priority=0}notification(t,e=3e3,s=3){var n;(n=this.idlePlayer)==null||n.stop(),this.showMessage(t,e,s),setTimeout(()=>{var a;(a=this.idlePlayer)==null||a.start()},e+this.transitionTime)}welcome(){if(!this.tipsOptions)return;const t=H(this.tipsOptions.welcomeTips||{}),{duration:e,priority:s}=this.tipsOptions.welcomeTips;this.notification(t,e,s)}copy(){if(this.tipsOptions.copyTips.message.length){const t=r(this.tipsOptions.copyTips.message)||"";this.notification(t,this.tipsOptions.copyTips.duration,this.tipsOptions.copyTips.priority)}}createIdleMessagePlayer(){if(!this.tipsOptions)return;const{message:t,duration:e,priority:s}=this.tipsOptions.idleTips;let n="";const a=c(()=>g(this,null,function*(){this.tipsOptions.idleTips.wordTheDay?k(this.tipsOptions.idleTips.wordTheDay)?n=yield z(this.tipsOptions.idleTips.wordTheDay):n=yield z():k(t)?n=yield t():n=r(t||[])||"",n?(this.showMessage(n,e,s),yield X(e)):a.stop()}),this.tipsOptions.idleTips.interval);return a}}class Q{constructor(t,e,s,n){o(this,"stage");o(this,"statusBar");o(this,"tips");o(this,"menus");o(this,"application");o(this,"model");o(this,"modelIndex",0);o(this,"windowSizeType",S.pc);o(this,"mediaQuery",window.matchMedia("screen and (max-width: 768px)"));this.options=t,this.pixiLive2dDisplayModule=e,this.Application=s,this.HitAreaFrames=n,this.options.sayHello&&this.sayHello(),this.stage=new V(this.options.parentElement,t),this.statusBar=new W(this.options.parentElement),this.tips=new U(this.stage.element,this.options.tips),this.menus=new R(this.stage.element),this.application=this.createApplication(),this.initialize(),F()}initialize(){if(this.verifyWindowSizeType(),this.windowSizeType!==S.pc){this.statusBar.popup("看板娘休息中",_.info,8e3);return}this.loadModel(),this.registerEvents()}verifyWindowSizeType(){this.mediaQuery.matches?this.windowSizeType=S.mobile:this.windowSizeType=S.pc,this.mediaQuery.addEventListener("change",t=>{t.matches?this.windowSizeType=S.mobile:this.windowSizeType=S.pc})}loadModel(t=!0){var e,s,n,a,h,y,I;t&&this.statusBar.showLoading(),this.model=new Y(this.pixiLive2dDisplayModule.Live2DModel,this.currentModelOption,this.application,this.HitAreaFrames),(n=this.model)==null||n.setScale((e=this.currentModelOption)==null?void 0:e.scale,(s=this.currentModelOption)==null?void 0:s.scale),(h=this.model)==null||h.setPosition(...((a=this.currentModelOption)==null?void 0:a.position)||[]),(y=this.model)==null||y.onLoaded(({width:x,height:M})=>{var f,l,D,A;this.setStageStyle({width:((f=this.currentModelOption.stageStyle)==null?void 0:f.width)||x,height:((l=this.currentModelOption.stageStyle)==null?void 0:l.height)||M,backgroundColor:((D=this.currentModelOption.stageStyle)==null?void 0:D.backgroundColor)||"rgba(0, 0, 0, 0)"}),this.stage.slideIn((A=this.options)==null?void 0:A.transitionTime),this.statusBar.hideLoading()}),(I=this.model)==null||I.onFail(x=>{this.statusBar.loadingError(this.loadModel.bind(this)),console.error(x)})}setStageStyle(t){B(t),this.stage.setStyle(t),this.application.resize()}get currentModelOption(){return this.options.models[this.modelIndex]}loadNextModel(){return g(this,null,function*(){var t;if(this.options.models.length<=1){this.tips.notification("没找到其他模型哦...",3e3,9);return}this.tips.clear(),this.statusBar.showLoading(),yield this.stage.slideOut(this.options.transitionTime),this.application.stage.children.length>=1&&this.application.stage.removeChildAt(0),T((t=this.options.models)==null?void 0:t.length)&&(this.modelIndex{switch(t){case"Rest":this.stage.slideOut(this.options.transitionTime),this.statusBar.popup("休息中",_.info,!1,()=>{var e;this.stage.slideIn(this.options.transitionTime),this.statusBar.popup("闪亮登场"),(e=this.tips.idlePlayer)==null||e.start()}),this.tips.clear();return;case"SwitchModel":this.loadNextModel();return;case"About":window.open("https://oml2d.com");return}}),window.addEventListener("copy",()=>{this.tips.copy()}),this.stage.onSlideChangeEnd(t=>{t&&this.tips.welcome()})}createApplication(){return new this.Application({view:this.stage.canvasElement,resolution:2,autoStart:!0,autoDensity:!0,backgroundAlpha:0,resizeTo:this.stage.element})}}const G=i=>{let t;return s=>g(this,null,function*(){const{parentElement:n}=s,a=v(w,s);a.parentElement=n||document.body;const{PixiLive2dDisplay:h,PIXI:y,HitAreaFrames:I}=yield i(a.importType,a.libraryUrls);t||(t=new Q(a,h,y.Application,I))})};window._iconfont_svg_string_3847283='',function(i){var e=(e=document.getElementsByTagName("script"))[e.length-1],t=e.getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var s,n,a,h,y,I=function(f,l){l.parentNode.insertBefore(f,l)};if(t&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(f){console&&console.log(f)}}s=function(){var f,l=document.createElement("div");l.innerHTML=i._iconfont_svg_string_3847283,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(f=document.body).firstChild?I(l,f.firstChild):f.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(s,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),s()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=s,h=i.document,y=!1,M(),h.onreadystatechange=function(){h.readyState=="complete"&&(h.onreadystatechange=null,x())})}function x(){y||(y=!0,a())}function M(){try{h.documentElement.doScroll("left")}catch(f){return void setTimeout(M,50)}x()}}(window);const K=G((i,t)=>g(this,null,function*(){return yield j(i,t),window.PIXI.utils.skipHello(),{PixiLive2dDisplay:window.PIXI.live2d,PIXI:window.PIXI,HitAreaFrames:window.PIXI.live2d.HitAreaFrames}}));d.loadOml2d=K,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}); + `,"info",!1)}hideLoading(){this.popup("加载成功")}loadingError(t){this.popup("加载失败","error",!1);const e=()=>{this.popup("重新加载","info",!1)},s=()=>{this.popup("加载失败","error",!1)},n=()=>{t(),this.element.removeEventListener("mouseout",s),this.element.removeEventListener("mouseover",e),this.element.removeEventListener("click",n)};this.element.addEventListener("click",n),this.element.addEventListener("mouseover",e),this.element.addEventListener("mouseout",s)}popup(t,e="info",s=1e3,n){clearTimeout(this.timer),this.setContent(t),this.setStyle({backgroundColor:this.stateColor[e]}),this.slideIn().then(()=>{s?this.timer=setTimeout(()=>{this.slideOut()},s):n&&(this.element.onclick=n)})}setContent(t){this.element.innerHTML=t}}class K{constructor(t,e){o(this,"element");o(this,"idlePlayer");o(this,"closeTimer",0);o(this,"transitionTime",1e3);o(this,"style",{});o(this,"priority",0);this.tipsOptions=e,this.element=b({id:E.tipsId,tagName:"div"}),t.append(this.element),this.initStyle(),this.idlePlayer=this.createIdleMessagePlayer()}initStyle(){if(this.setStyle({position:"absolute",fontSize:"18px",borderRadius:"10px",filter:"drop-shadow(0 0 5px #999)",backgroundColor:"#58b0fc",border:"2px solid #fff",color:"#fff",padding:"3px 5px",opacity:0,visibility:"hidden",transform:"translateX(-50%)",left:"50%",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",animationDuration:`${this.transitionTime}ms,${this.transitionTime}ms`,animationFillMode:"forwards, none",animationIterationCount:"1, infinite",width:"60%",height:"100px",top:0}),this.tipsOptions){const t=D(this.tipsOptions.style||{});console.log(t),this.setStyle(t)}}setStyle(t){this.style=v(this.style,t),O(this.style,this.element)}setContent(t){this.element.innerHTML=t}showMessage(t,e=3e3,s=0){s{this.setStyle({animationName:"oml2d-hidden-tips,oml2d-shake-tips"}),this.priority=0},e))}clear(){var t;this.setStyle({animationName:"oml2d-hidden-tips,oml2d-shake-tips"}),(t=this.idlePlayer)==null||t.stop(),clearTimeout(this.closeTimer),this.priority=0}notification(t,e=3e3,s=3){var n;(n=this.idlePlayer)==null||n.stop(),this.showMessage(t,e,s),setTimeout(()=>{var l;(l=this.idlePlayer)==null||l.start()},e+this.transitionTime)}welcome(){if(!this.tipsOptions)return;const t=X(this.tipsOptions.welcomeTips||{}),{duration:e,priority:s}=this.tipsOptions.welcomeTips;this.notification(t,e,s)}copy(){if(this.tipsOptions.copyTips.message.length){const t=a(this.tipsOptions.copyTips.message)||"";this.notification(t,this.tipsOptions.copyTips.duration,this.tipsOptions.copyTips.priority)}}createIdleMessagePlayer(){if(!this.tipsOptions)return;const{message:t,duration:e,priority:s}=this.tipsOptions.idleTips;let n="";const l=r(()=>g(this,null,function*(){this.tipsOptions.idleTips.wordTheDay?k(this.tipsOptions.idleTips.wordTheDay)?n=yield A(this.tipsOptions.idleTips.wordTheDay):n=yield A():k(t)?n=yield t():n=a(t||[])||"",n?(this.showMessage(n,e,s),yield R(e)):l.stop()}),this.tipsOptions.idleTips.interval);return l}}class q{constructor(t,e,s,n){o(this,"stage");o(this,"statusBar");o(this,"tips");o(this,"menus");o(this,"application");o(this,"model");o(this,"modelIndex",0);o(this,"windowSizeType",S.pc);o(this,"mediaQuery",window.matchMedia("screen and (max-width: 768px)"));this.options=t,this.pixiLive2dDisplayModule=e,this.Application=s,this.HitAreaFrames=n,this.options.sayHello&&this.sayHello(),this.stage=new Q(this.options.parentElement,t),this.statusBar=new G(this.options.parentElement),this.tips=new K(this.stage.element,this.options.tips),this.menus=new U(this.stage.element),this.application=this.createApplication(),this.initialize(),Y()}initialize(){if(this.verifyWindowSizeType(),this.windowSizeType!==S.pc){this.statusBar.popup("看板娘休息中",_.info,8e3);return}this.loadModel(),this.registerEvents()}verifyWindowSizeType(){this.mediaQuery.matches?this.windowSizeType=S.mobile:this.windowSizeType=S.pc,this.mediaQuery.addEventListener("change",t=>{t.matches?this.windowSizeType=S.mobile:this.windowSizeType=S.pc})}loadModel(t=!0){var e,s,n,l,h,f,I;t&&this.statusBar.showLoading(),this.model=new W(this.pixiLive2dDisplayModule.Live2DModel,this.currentModelOption,this.application,this.HitAreaFrames),(n=this.model)==null||n.setScale((e=this.currentModelOption)==null?void 0:e.scale,(s=this.currentModelOption)==null?void 0:s.scale),(h=this.model)==null||h.setPosition(...((l=this.currentModelOption)==null?void 0:l.position)||[]),(f=this.model)==null||f.onLoaded(({width:x,height:M})=>{var y,c,N,C;this.setStageStyle({width:((y=this.currentModelOption.stageStyle)==null?void 0:y.width)||x,height:((c=this.currentModelOption.stageStyle)==null?void 0:c.height)||M,backgroundColor:((N=this.currentModelOption.stageStyle)==null?void 0:N.backgroundColor)||"rgba(0, 0, 0, 0)"}),this.stage.slideIn((C=this.options)==null?void 0:C.transitionTime),this.statusBar.hideLoading()}),(I=this.model)==null||I.onFail(x=>{this.statusBar.loadingError(this.loadModel.bind(this)),console.error(x)})}setStageStyle(t){const e=D(t);this.stage.setStyle(e),this.application.resize()}get currentModelOption(){return this.options.models[this.modelIndex]}loadNextModel(){return g(this,null,function*(){var t;if(this.options.models.length<=1){this.tips.notification("没找到其他模型哦...",3e3,9);return}this.tips.clear(),this.statusBar.showLoading(),yield this.stage.slideOut(this.options.transitionTime),this.application.stage.children.length>=1&&this.application.stage.removeChildAt(0),T((t=this.options.models)==null?void 0:t.length)&&(this.modelIndex{switch(t){case"Rest":this.stage.slideOut(this.options.transitionTime),this.statusBar.popup("休息中",_.info,!1,()=>{var e;this.stage.slideIn(this.options.transitionTime),this.statusBar.popup("闪亮登场"),(e=this.tips.idlePlayer)==null||e.start()}),this.tips.clear();return;case"SwitchModel":this.loadNextModel();return;case"About":window.open("https://oml2d.com");return}}),window.addEventListener("copy",()=>{this.tips.copy()}),this.stage.onSlideChangeEnd(t=>{t&&this.tips.welcome()})}createApplication(){return new this.Application({view:this.stage.canvasElement,resolution:2,autoStart:!0,autoDensity:!0,backgroundAlpha:0,resizeTo:this.stage.element})}}const J=i=>{let t;return s=>g(this,null,function*(){const{parentElement:n}=s,l=v(w,s);l.parentElement=n||document.body;const{PixiLive2dDisplay:h,PIXI:f,HitAreaFrames:I}=yield i(l.importType,l.libraryUrls);t||(t=new q(l,h,f.Application,I))})};window._iconfont_svg_string_3847283='',function(i){var e=(e=document.getElementsByTagName("script"))[e.length-1],t=e.getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var s,n,l,h,f,I=function(y,c){c.parentNode.insertBefore(y,c)};if(t&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(y){console&&console.log(y)}}s=function(){var y,c=document.createElement("div");c.innerHTML=i._iconfont_svg_string_3847283,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(y=document.body).firstChild?I(c,y.firstChild):y.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(s,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),s()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(l=s,h=i.document,f=!1,M(),h.onreadystatechange=function(){h.readyState=="complete"&&(h.onreadystatechange=null,x())})}function x(){f||(f=!0,l())}function M(){try{h.documentElement.doScroll("left")}catch(y){return void setTimeout(M,50)}x()}}(window);const Z=J((i,t)=>g(this,null,function*(){return yield V(i,t),window.PIXI.utils.skipHello(),{PixiLive2dDisplay:window.PIXI.live2d,PIXI:window.PIXI,HitAreaFrames:window.PIXI.live2d.HitAreaFrames}}));d.loadOml2d=Z,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}); diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts index b003285..1e122f4 100644 --- a/tests/vite-app/src/main.ts +++ b/tests/vite-app/src/main.ts @@ -22,6 +22,10 @@ void loadOml2d({ } ], tips: { + // style: { + // width: 300, + // height: '100px' + // }, idleTips: { wordTheDay(wordTheDayData) { return `${wordTheDayData.hitokoto} by.${wordTheDayData.from}`;