From ca1fd2868b3bcd4f2748b90fbf5941213b385169 Mon Sep 17 00:00:00 2001 From: Hacxy Date: Tue, 12 Mar 2024 12:27:32 +0800 Subject: [PATCH] =?UTF-8?q?fix(status-bar):=20=E4=BF=AE=E5=A4=8D=E4=BA=86?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=9D=A1=E5=8A=A0=E8=BD=BD=E6=97=B6=E5=92=8C?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=AE=8C=E6=88=90=E6=97=B6=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/src/guide/index.md | 2 +- .../oh-my-live2d/src/modules/status-bar.ts | 7 ++++--- tests/vite-app/index.html | 8 ++++---- tests/vite-app/public/index.min.js | 4 ++-- tests/vite-app/src/main.ts | 18 +++++++----------- 5 files changed, 18 insertions(+), 21 deletions(-) diff --git a/docs/src/guide/index.md b/docs/src/guide/index.md index 8bff86c..820b8fe 100644 --- a/docs/src/guide/index.md +++ b/docs/src/guide/index.md @@ -27,7 +27,7 @@ Cubism 5 向后兼容了 Live2D Model 3 并支持 Live2D Model 4 ，但它无法 ## 快速开始 > [!WARNING] -> 本项目从 `0.4.0` 版本开始将不再采用自动加载组件的模式, 现在你可以通过 `loadOml2d` 方法加载组件至 body 中, 或者为其指定一个父元素. +> 本项目从 `0.4.0` 版本开始将不再采用自动加载组件的模式, 现在你可以通过 `loadOml2d` 方法加载组件至 body 中, 或者通过`parentElement`选项为其指定一个父元素. ### 安装 diff --git a/packages/oh-my-live2d/src/modules/status-bar.ts b/packages/oh-my-live2d/src/modules/status-bar.ts index ac9717c..aee06cf 100644 --- a/packages/oh-my-live2d/src/modules/status-bar.ts +++ b/packages/oh-my-live2d/src/modules/status-bar.ts @@ -97,15 +97,16 @@ export class StatusBar { } showLoading(): void { - this.setContent( + this.popup( `
加载中
- ` + `, + SystemState.info, + false ); - void this.slideIn(); } hideLoading(): void { diff --git a/tests/vite-app/index.html b/tests/vite-app/index.html index b7d0da9..1b57170 100644 --- a/tests/vite-app/index.html +++ b/tests/vite-app/index.html @@ -8,9 +8,9 @@
- - - + + diff --git a/tests/vite-app/public/index.min.js b/tests/vite-app/public/index.min.js index fe5ae71..158cc52 100644 --- a/tests/vite-app/public/index.min.js +++ b/tests/vite-app/public/index.min.js @@ -123,9 +123,9 @@ - `});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.setContent(` + `});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(`
加载中
- `),this.slideIn()}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 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"})}); diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts index 76b316d..b003285 100644 --- a/tests/vite-app/src/main.ts +++ b/tests/vite-app/src/main.ts @@ -10,19 +10,15 @@ void loadOml2d({ models: [ { - path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json', - scale: 0.12, - position: [-50, 50], - showHitAreaFrames: true, - // motionPreloadStrategy: 'NONE', - stageStyle: { - width: 320 - } + path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json' }, { - path: 'https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json', - scale: 0.3, - motionPreloadStrategy: 'ALL' + path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Pio/model.json', + scale: 0.4, + position: [0, 50], + stageStyle: { + height: 300 + } } ], tips: {