@animech-public/playcanvas/build/playcanvas/src/extras/mini-stats/mini-stats.js

PlayCanvas WebGL game engine

import{math as t}from"../../core/math/math.js";import{Texture as e}from"../../platform/graphics/texture.js";import{FILTER_NEAREST as s,ADDRESS_REPEAT as i}from"../../platform/graphics/constants.js";import{LAYERID_UI as h}from"../../scene/constants.js";import{CpuTimer as r}from"./cpu-timer.js";import{GpuTimer as a}from"./gpu-timer.js";import{StatsTimer as n}from"./stats-timer.js";import{Graph as o}from"./graph.js";import{WordAtlas as d}from"./word-atlas.js";import{Render2d as p}from"./render2d.js";class c{constructor(t,e){const s=t.graphicsDevice;e=e||c.getDefaultOptions(),this.initGraphs(t,s,e);const i=new Set(["","ms","0","1","2","3","4","5","6","7","8","9","."].concat(this.graphs.map((t=>t.name))).concat(e.stats?e.stats.map((t=>t.unitsName)):[]).filter((t=>!!t)));this.wordAtlas=new d(s,i),this.sizes=e.sizes,this._activeSizeIndex=e.startSizeIndex;const r=document.createElement("div");r.setAttribute("id","mini-stats"),r.style.cssText="position:fixed;bottom:0;left:0;background:transparent;",document.body.appendChild(r),r.addEventListener("mouseenter",(t=>{this.opacity=1})),r.addEventListener("mouseleave",(t=>{this.opacity=.7})),r.addEventListener("click",(t=>{t.preventDefault(),this._enabled&&(this.activeSizeIndex=(this.activeSizeIndex+1)%this.sizes.length,this.resize(this.sizes[this.activeSizeIndex].width,this.sizes[this.activeSizeIndex].height,this.sizes[this.activeSizeIndex].graphs))})),s.on("resizecanvas",this.updateDiv,this),s.on("losecontext",this.loseContext,this),t.on("postrender",this.postRender,this),this.app=t,this.drawLayer=t.scene.layers.getLayerById(h),this.device=s,this.render2d=new p(s),this.div=r,this.width=0,this.height=0,this.gspacing=2,this.clr=[1,1,1,.5],this._enabled=!0,this.activeSizeIndex=this._activeSizeIndex}destroy(){this.device.off("resizecanvas",this.updateDiv,this),this.device.off("losecontext",this.loseContext,this),this.app.off("postrender",this.postRender,this),this.graphs.forEach((t=>t.destroy())),this.wordAtlas.destroy(),this.texture.destroy()}static getDefaultOptions(){return{sizes:[{width:100,height:16,spacing:0,graphs:!1},{width:128,height:32,spacing:2,graphs:!0},{width:256,height:64,spacing:2,graphs:!0}],startSizeIndex:0,textRefreshRate:500,cpu:{enabled:!0,watermark:33},gpu:{enabled:!0,watermark:33},stats:[{name:"Frame",stats:["frame.ms"],decimalPlaces:1,unitsName:"ms",watermark:33},{name:"DrawCalls",stats:["drawCalls.total"],watermark:1e3}]}}set activeSizeIndex(t){this._activeSizeIndex=t,this.gspacing=this.sizes[t].spacing,this.resize(this.sizes[t].width,this.sizes[t].height,this.sizes[t].graphs)}get activeSizeIndex(){return this._activeSizeIndex}set opacity(t){this.clr[3]=t}get opacity(){return this.clr[3]}get overallHeight(){const t=this.graphs,e=this.gspacing;return this.height*t.length+e*(t.length-1)}set enabled(t){if(t!==this._enabled){this._enabled=t;for(let e=0;e<this.graphs.length;++e)this.graphs[e].enabled=t,this.graphs[e].timer.enabled=t}}get enabled(){return this._enabled}initGraphs(h,d,p){if(this.graphs=[],p.cpu.enabled){const t=new r(h),e=new o("CPU",h,p.cpu.watermark,p.textRefreshRate,t);this.graphs.push(e)}if(p.gpu.enabled){const t=new a(d),e=new o("GPU",h,p.gpu.watermark,p.textRefreshRate,t);this.graphs.push(e)}p.stats&&p.stats.forEach((t=>{const e=new n(h,t.stats,t.decimalPlaces,t.unitsName,t.multiplier),s=new o(t.name,h,t.watermark,p.textRefreshRate,e);this.graphs.push(s)}));const c=p.sizes.reduce(((t,e)=>e.width>t?e.width:t),0);this.texture=new e(d,{name:"mini-stats-graph-texture",width:t.nextPowerOfTwo(c),height:t.nextPowerOfTwo(this.graphs.length),mipmaps:!1,minFilter:s,magFilter:s,addressU:i,addressV:i}),this.graphs.forEach(((t,e)=>{t.texture=this.texture,t.yOffset=e}))}render(){const t=this.graphs,e=this.wordAtlas,s=this.render2d,i=this.width,h=this.height,r=this.gspacing;s.startFrame();for(let a=0;a<t.length;++a){const n=t[a];let o=a*(h+r);n.render(s,0,o,i,h);let d=1;o+=h-13,d+=e.render(s,n.name,d,o)+10;const p=n.timingText;for(let t=0;t<p.length;++t)d+=e.render(s,p[t],d,o);n.timer.unitsName&&(d+=3,e.render(s,n.timer.unitsName,d,o))}s.render(this.app,this.drawLayer,this.texture,this.wordAtlas.texture,this.clr,h)}resize(t,e,s){const i=this.graphs;for(let t=0;t<i.length;++t)i[t].enabled=s;this.width=t,this.height=e,this.updateDiv()}updateDiv(){const t=this.device.canvas.getBoundingClientRect();this.div.style.left=`${t.left}px`,this.div.style.bottom=window.innerHeight-t.bottom+"px",this.div.style.width=`${this.width}px`,this.div.style.height=`${this.overallHeight}px`}loseContext(){this.graphs.forEach((t=>t.loseContext()))}postRender(){this._enabled&&this.render()}}export{c as MiniStats};