@yuebai008/cli/dist/cli-server/client/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.js

Command line interface for rapid qg-minigame development

import*as Common from"../../../../core/common/common.js";import*as TraceEngine from"../../../../models/trace/trace.js";import*as UI from"../../legacy.js";import{Events as OverviewGridEvents,OverviewGrid}from"./OverviewGrid.js";import{TimelineOverviewCalculator}from"./TimelineOverviewCalculator.js";import timelineOverviewInfoStyles from"./timelineOverviewInfo.css.js";export class TimelineOverviewPane extends(Common.ObjectWrapper.eventMixin(UI.Widget.VBox)){overviewCalculator;overviewGrid;cursorArea;cursorElement;overviewControls;markers;overviewInfo;updateThrottler;cursorEnabled;cursorPosition;lastWidth;windowStartTime;windowEndTime;muteOnWindowChanged;constructor(e){super(),this.element.id=e+"-overview-pane",this.overviewCalculator=new TimelineOverviewCalculator,this.overviewGrid=new OverviewGrid(e,this.overviewCalculator),this.element.appendChild(this.overviewGrid.element),this.cursorArea=this.overviewGrid.element.createChild("div","overview-grid-cursor-area"),this.cursorElement=this.overviewGrid.element.createChild("div","overview-grid-cursor-position"),this.cursorArea.addEventListener("mousemove",this.onMouseMove.bind(this),!0),this.cursorArea.addEventListener("mouseleave",this.hideCursor.bind(this),!0),this.overviewGrid.setResizeEnabled(!1),this.overviewGrid.addEventListener(OverviewGridEvents.WindowChangedWithPosition,this.onWindowChanged,this),this.overviewGrid.setClickHandler(this.onClick.bind(this)),this.overviewControls=[],this.markers=new Map,this.overviewInfo=new OverviewInfo(this.cursorElement),this.updateThrottler=new Common.Throttler.Throttler(100),this.cursorEnabled=!1,this.cursorPosition=0,this.lastWidth=0,this.windowStartTime=0,this.windowEndTime=1/0,this.muteOnWindowChanged=!1}onMouseMove(e){if(!this.cursorEnabled)return;const t=e,i=e.target;this.cursorPosition=t.offsetX+i.offsetLeft,this.cursorElement.style.left=this.cursorPosition+"px",this.cursorElement.style.visibility="visible",this.overviewInfo.setContent(this.buildOverviewInfo())}async buildOverviewInfo(){const e=this.element.ownerDocument,t=this.cursorPosition,i=await Promise.all(this.overviewControls.map((e=>e.overviewInfoPromise(t)))),s=e.createDocumentFragment(),r=i.filter((e=>null!==e));return s.append(...r),s}hideCursor(){this.cursorElement.style.visibility="hidden",this.overviewInfo.hide()}wasShown(){this.update()}willHide(){this.overviewInfo.hide()}onResize(){const e=this.element.offsetWidth;e!==this.lastWidth&&(this.lastWidth=e,this.scheduleUpdate())}setOverviewControls(e){for(let e=0;e<this.overviewControls.length;++e)this.overviewControls[e].dispose();for(let t=0;t<e.length;++t)e[t].setCalculator(this.overviewCalculator),e[t].show(this.overviewGrid.element);this.overviewControls=e,this.update()}setBounds(e,t){this.overviewCalculator.setBounds(e,t),this.overviewGrid.setResizeEnabled(!0),this.cursorEnabled=!0}setNavStartTimes(e){this.overviewCalculator.setNavStartTimes(e)}scheduleUpdate(){this.updateThrottler.schedule((async()=>{this.update()}))}update(){if(this.isShowing()){this.overviewCalculator.setDisplayWidth(this.overviewGrid.clientWidth());for(let e=0;e<this.overviewControls.length;++e)this.overviewControls[e].update();this.overviewGrid.updateDividers(this.overviewCalculator),this.updateMarkers(),this.updateWindow()}}setMarkers(e){this.markers=e}updateMarkers(){const e=new Map;for(const t of this.markers.keys()){const i=this.markers.get(t),s=Math.round(this.overviewCalculator.computePosition(TraceEngine.Types.Timing.MilliSeconds(t)));e.has(s)||(e.set(s,i),i.style.left=s+"px")}this.overviewGrid.removeEventDividers(),this.overviewGrid.addEventDividers([...e.values()])}reset(){this.windowStartTime=0,this.windowEndTime=1/0,this.overviewCalculator.reset(),this.overviewGrid.reset(),this.overviewGrid.setResizeEnabled(!1),this.cursorEnabled=!1,this.hideCursor(),this.markers=new Map;for(const e of this.overviewControls)e.reset();this.overviewInfo.hide(),this.scheduleUpdate()}onClick(e){return this.overviewControls.some((t=>t.onClick(e)))}onWindowChanged(e){if(this.muteOnWindowChanged)return;if(!this.overviewControls.length)return;this.windowStartTime=e.data.rawStartValue===this.overviewCalculator.minimumBoundary()?0:e.data.rawStartValue,this.windowEndTime=e.data.rawEndValue===this.overviewCalculator.maximumBoundary()?1/0:e.data.rawEndValue;const t={startTime:this.windowStartTime,endTime:this.windowEndTime};this.dispatchEventToListeners(Events.WindowChanged,t)}setWindowTimes(e,t){e===this.windowStartTime&&t===this.windowEndTime||(this.windowStartTime=e,this.windowEndTime=t,this.updateWindow(),this.dispatchEventToListeners(Events.WindowChanged,{startTime:e,endTime:t}))}updateWindow(){if(!this.overviewControls.length)return;const e=this.overviewCalculator.minimumBoundary(),t=this.overviewCalculator.maximumBoundary()-e,i=e>0,s=i&&this.windowStartTime?Math.min((this.windowStartTime-e)/t,1):0,r=i&&this.windowEndTime<1/0?(this.windowEndTime-e)/t:1;this.muteOnWindowChanged=!0,this.overviewGrid.setWindow(s,r),this.muteOnWindowChanged=!1}}export var Events;!function(e){e.WindowChanged="WindowChanged"}(Events||(Events={}));export class TimelineOverviewBase extends UI.Widget.VBox{calculatorInternal;canvas;contextInternal;constructor(){super(),this.calculatorInternal=null,this.canvas=this.element.createChild("canvas","fill"),this.contextInternal=this.canvas.getContext("2d")}width(){return this.canvas.width}height(){return this.canvas.height}context(){if(!this.contextInternal)throw new Error("Unable to retrieve canvas context");return this.contextInternal}calculator(){return this.calculatorInternal}update(){this.resetCanvas()}dispose(){this.detach()}reset(){}async overviewInfoPromise(e){return null}setCalculator(e){this.calculatorInternal=e}onClick(e){return!1}resetCanvas(){this.element.clientWidth&&this.setCanvasSize(this.element.clientWidth,this.element.clientHeight)}setCanvasSize(e,t){this.canvas.width=e*window.devicePixelRatio,this.canvas.height=t*window.devicePixelRatio}}export class OverviewInfo{anchorElement;glassPane;visible;element;constructor(e){this.anchorElement=e,this.glassPane=new UI.GlassPane.GlassPane,this.glassPane.setPointerEventsBehavior("PierceContents"),this.glassPane.setMarginBehavior("Arrow"),this.glassPane.setSizeBehavior("MeasureContent"),this.visible=!1,this.element=UI.Utils.createShadowRootWithCoreStyles(this.glassPane.contentElement,{cssFile:[timelineOverviewInfoStyles],delegatesFocus:void 0}).createChild("div","overview-info")}async setContent(e){this.visible=!0;const t=await e;this.visible&&(this.element.removeChildren(),this.element.appendChild(t),this.glassPane.setContentAnchorBox(this.anchorElement.boxInWindow()),this.glassPane.isShowing()||this.glassPane.show(this.anchorElement.ownerDocument))}hide(){this.visible=!1,this.glassPane.hide()}}