@yuebai008/cli/dist/cli-server/client/front_end/panels/layer_viewer/PaintProfilerView.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as PerfUI from"../../ui/legacy/components/perf_ui/perf_ui.js";import paintProfilerStyles from"./paintProfiler.css.js";import*as UI from"../../ui/legacy/legacy.js";const UIStrings={profiling:"Profiling…",shapes:"Shapes",bitmap:"Bitmap",text:"Text",misc:"Misc",profilingResults:"Profiling results",commandLog:"Command Log"},str_=i18n.i18n.registerUIStrings("panels/layer_viewer/PaintProfilerView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let categories=null,logItemCategoriesMap=null;export class PaintProfilerView extends(Common.ObjectWrapper.eventMixin(UI.Widget.HBox)){canvasContainer;progressBanner;pieChart;showImageCallback;canvas;context;selectionWindowInternal;innerBarWidth;minBarHeight;barPaddingWidth;outerBarWidth;pendingScale;scale;samplesPerBar;log;snapshot;logCategories;profiles;updateImageTimer;constructor(t){super(!0),this.contentElement.classList.add("paint-profiler-overview"),this.canvasContainer=this.contentElement.createChild("div","paint-profiler-canvas-container"),this.progressBanner=this.contentElement.createChild("div","full-widget-dimmed-banner hidden"),this.progressBanner.textContent=i18nString(UIStrings.profiling),this.pieChart=new PerfUI.PieChart.PieChart,this.populatePieChart(0,[]),this.pieChart.classList.add("paint-profiler-pie-chart"),this.contentElement.appendChild(this.pieChart),this.showImageCallback=t,this.canvas=this.canvasContainer.createChild("canvas","fill"),this.context=this.canvas.getContext("2d"),this.selectionWindowInternal=new PerfUI.OverviewGrid.Window(this.canvasContainer),this.selectionWindowInternal.addEventListener(PerfUI.OverviewGrid.Events.WindowChanged,this.onWindowChanged,this),this.innerBarWidth=4*window.devicePixelRatio,this.minBarHeight=window.devicePixelRatio,this.barPaddingWidth=2*window.devicePixelRatio,this.outerBarWidth=this.innerBarWidth+this.barPaddingWidth,this.pendingScale=1,this.scale=this.pendingScale,this.samplesPerBar=0,this.log=[],this.reset()}static categories(){return categories||(categories={shapes:new PaintProfilerCategory("shapes",i18nString(UIStrings.shapes),"rgb(255, 161, 129)"),bitmap:new PaintProfilerCategory("bitmap",i18nString(UIStrings.bitmap),"rgb(136, 196, 255)"),text:new PaintProfilerCategory("text",i18nString(UIStrings.text),"rgb(180, 255, 137)"),misc:new PaintProfilerCategory("misc",i18nString(UIStrings.misc),"rgb(206, 160, 255)")}),categories}static initLogItemCategories(){if(!logItemCategoriesMap){const t=PaintProfilerView.categories(),e={};e.Clear=t.misc,e.DrawPaint=t.misc,e.DrawData=t.misc,e.SetMatrix=t.misc,e.PushCull=t.misc,e.PopCull=t.misc,e.Translate=t.misc,e.Scale=t.misc,e.Concat=t.misc,e.Restore=t.misc,e.SaveLayer=t.misc,e.Save=t.misc,e.BeginCommentGroup=t.misc,e.AddComment=t.misc,e.EndCommentGroup=t.misc,e.ClipRect=t.misc,e.ClipRRect=t.misc,e.ClipPath=t.misc,e.ClipRegion=t.misc,e.DrawPoints=t.shapes,e.DrawRect=t.shapes,e.DrawOval=t.shapes,e.DrawRRect=t.shapes,e.DrawPath=t.shapes,e.DrawVertices=t.shapes,e.DrawDRRect=t.shapes,e.DrawBitmap=t.bitmap,e.DrawBitmapRectToRect=t.bitmap,e.DrawBitmapMatrix=t.bitmap,e.DrawBitmapNine=t.bitmap,e.DrawSprite=t.bitmap,e.DrawPicture=t.bitmap,e.DrawText=t.text,e.DrawPosText=t.text,e.DrawPosTextH=t.text,e.DrawTextOnPath=t.text,logItemCategoriesMap=e}return logItemCategoriesMap}static categoryForLogItem(t){const e=Platform.StringUtilities.toTitleCase(t.method),i=PaintProfilerView.initLogItemCategories();let s=i[e];return s||(s=PaintProfilerView.categories().misc,i[e]=s),s}onResize(){this.update()}async setSnapshotAndLog(t,e,i){if(this.reset(),this.snapshot=t,this.snapshot&&this.snapshot.addReference(),this.log=e,this.logCategories=this.log.map(PaintProfilerView.categoryForLogItem),!t)return this.update(),this.populatePieChart(0,[]),void this.selectionWindowInternal.setEnabled(!1);this.selectionWindowInternal.setEnabled(!0),this.progressBanner.classList.remove("hidden"),this.updateImage();const s=await t.profile(i);this.progressBanner.classList.add("hidden"),this.profiles=s,this.update(),this.updatePieChart()}setScale(t){const e=t>this.scale;this.pendingScale=Math.min(1,2*t),e&&this.snapshot&&this.updateImage()}update(){if(this.canvas.width=this.canvasContainer.clientWidth*window.devicePixelRatio,this.canvas.height=this.canvasContainer.clientHeight*window.devicePixelRatio,this.samplesPerBar=0,!this.profiles||!this.profiles.length||!this.logCategories)return;const t=Math.floor((this.canvas.width-2*this.barPaddingWidth)/this.outerBarWidth),e=this.log.length;this.samplesPerBar=Math.ceil(e/t);let i=0;const s=[],n=[];let r={};for(let t=0,o=0,a=0;t<e;){let l=this.logCategories[t]&&this.logCategories[t].name||"misc";const h=this.log[t].commandIndex;for(let t=0;t<this.profiles.length;t++){const e=this.profiles[t][h];a+=e,r[l]=(r[l]||0)+e}if(++t,t-o===this.samplesPerBar||t===e){const e=this.profiles.length*(t-o);for(l in a/=e,r)r[l]/=e;s.push(a),n.push(r),a>i&&(i=a),a=0,r={},o=t}}const o=4*window.devicePixelRatio,a=(this.canvas.height-o-this.minBarHeight)/i;for(let t=0;t<s.length;++t){for(const e in n[t])n[t][e]*=(s[t]*a+this.minBarHeight)/s[t];this.renderBar(t,n[t])}}renderBar(t,e){const i=PaintProfilerView.categories();let s=0;const n=this.barPaddingWidth+t*this.outerBarWidth;for(const t in i){if(!e[t])continue;s+=e[t];const r=this.canvas.height-s;this.context.fillStyle=i[t].color,this.context.fillRect(n,r,this.innerBarWidth,e[t])}}onWindowChanged(){this.dispatchEventToListeners(Events.WindowChanged),this.updatePieChart(),this.updateImageTimer||(this.updateImageTimer=window.setTimeout(this.updateImage.bind(this),100))}updatePieChart(){const{total:t,slices:e}=this.calculatePieChart();this.populatePieChart(t,e)}calculatePieChart(){const t=this.selectionWindow();if(!this.profiles||!this.profiles.length||!t)return{total:0,slices:[]};let e=0;const i={};for(let s=t.left;s<t.right;++s){const t=this.log[s],n=PaintProfilerView.categoryForLogItem(t);i[n.color]=i[n.color]||0;for(let s=0;s<this.profiles.length;++s){const r=this.profiles[s][t.commandIndex];e+=r,i[n.color]+=r}}const s=[];for(const t in i)s.push({value:i[t]/this.profiles.length,color:t,title:""});return{total:e/this.profiles.length,slices:s}}populatePieChart(t,e){this.pieChart.data={chartName:i18nString(UIStrings.profilingResults),size:55,formatter:this.formatPieChartTime.bind(this),showLegend:!1,total:t,slices:e}}formatPieChartTime(t){return i18n.TimeUtilities.millisToString(1e3*t,!0)}selectionWindow(){if(!this.log)return null;const t=(this.selectionWindowInternal.windowLeft||0)*this.canvas.width,e=(this.selectionWindowInternal.windowRight||0)*this.canvas.width,i=Math.floor(t/this.outerBarWidth),s=Math.floor((e+this.innerBarWidth-this.barPaddingWidth/2)/this.outerBarWidth);return{left:Platform.NumberUtilities.clamp(i*this.samplesPerBar,0,this.log.length-1),right:Platform.NumberUtilities.clamp(s*this.samplesPerBar,0,this.log.length)}}updateImage(){let t,e;delete this.updateImageTimer;const i=this.selectionWindow();this.profiles&&this.profiles.length&&i&&(t=this.log[i.left].commandIndex,e=this.log[i.right-1].commandIndex);const s=this.pendingScale;this.snapshot&&this.snapshot.replay(s,t,e).then((t=>{t&&(this.scale=s,this.showImageCallback(t))}))}reset(){this.snapshot&&this.snapshot.release(),this.snapshot=null,this.profiles=null,this.selectionWindowInternal.reset(),this.selectionWindowInternal.setEnabled(!1)}wasShown(){super.wasShown(),this.registerCSSFiles([paintProfilerStyles])}}export var Events;!function(t){t.WindowChanged="WindowChanged"}(Events||(Events={}));export class PaintProfilerCommandLogView extends UI.ThrottledWidget.ThrottledWidget{treeOutline;log;treeItemCache;selectionWindow;constructor(){super(),this.setMinimumSize(100,25),this.element.classList.add("overflow-auto"),this.treeOutline=new UI.TreeOutline.TreeOutlineInShadow,UI.ARIAUtils.setLabel(this.treeOutline.contentElement,i18nString(UIStrings.commandLog)),this.element.appendChild(this.treeOutline.element),this.setDefaultFocusedElement(this.treeOutline.contentElement),this.log=[],this.treeItemCache=new Map}setCommandLog(t){this.log=t,this.updateWindow({left:0,right:this.log.length})}appendLogItem(t){let e=this.treeItemCache.get(t);if(e){if(e.parent)return}else e=new LogTreeElement(this,t),this.treeItemCache.set(t,e);this.treeOutline.appendChild(e)}updateWindow(t){this.selectionWindow=t,this.update()}doUpdate(){if(!this.selectionWindow||!this.log.length)return this.treeOutline.removeChildren(),Promise.resolve();const t=this.treeOutline.rootElement();for(;;){const e=t.firstChild();if(!e||e.logItem.commandIndex>=this.selectionWindow.left)break;t.removeChildAtIndex(0)}for(;;){const e=t.lastChild();if(!e||e.logItem.commandIndex<this.selectionWindow.right)break;t.removeChildAtIndex(t.children().length-1)}for(let t=this.selectionWindow.left,e=this.selectionWindow.right;t<e;++t)this.appendLogItem(this.log[t]);return Promise.resolve()}}export class LogTreeElement extends UI.TreeOutline.TreeElement{logItem;ownerView;filled;constructor(t,e){super("",Boolean(e.params)),this.logItem=e,this.ownerView=t,this.filled=!1}onattach(){this.update()}async onpopulate(){for(const t in this.logItem.params)LogPropertyTreeElement.appendLogPropertyItem(this,t,this.logItem.params[t])}paramToString(t,e){if("object"!=typeof t)return"string"==typeof t&&t.length>100?e:JSON.stringify(t);let i="",s=0;for(const n in t){const r=t[n];if(++s>4||"object"===r||"string"===r&&r.length>100)return e;i&&(i+=", "),i+=r}return i}paramsToString(t){let e="";for(const i in t)e&&(e+=", "),e+=this.paramToString(t[i],i);return e}update(){const t=document.createDocumentFragment();UI.UIUtils.createTextChild(t,this.logItem.method+"("+this.paramsToString(this.logItem.params)+")"),this.title=t}}export class LogPropertyTreeElement extends UI.TreeOutline.TreeElement{property;constructor(t){super(),this.property=t}static appendLogPropertyItem(t,e,i){const s=new LogPropertyTreeElement({name:e,value:i});if(t.appendChild(s),i&&"object"==typeof i)for(const t in i)LogPropertyTreeElement.appendLogPropertyItem(s,t,i[t])}onattach(){const t=document.createDocumentFragment();t.createChild("span","name").textContent=this.property.name;if(t.createChild("span","separator").textContent=": ",null===this.property.value||"object"!=typeof this.property.value){const e=t.createChild("span","value");e.textContent=JSON.stringify(this.property.value),e.classList.add("cm-js-"+(null===this.property.value?"null":typeof this.property.value))}this.title=t}}export class PaintProfilerCategory{name;title;color;constructor(t,e,i){this.name=t,this.title=e,this.color=i}}