@yuebai008/cli/dist/cli-server/client/front_end/ui/legacy/components/perf_ui/OverviewGrid.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 TraceEngine from"../../../../models/trace/trace.js";import*as UI from"../../legacy.js";import*as ThemeSupport from"../../theme_support/theme_support.js";import overviewGridStyles from"./overviewGrid.css.legacy.js";import{TimelineGrid}from"./TimelineGrid.js";const UIStrings={overviewGridWindow:"Overview grid window",leftResizer:"Left Resizer",rightResizer:"Right Resizer"},str_=i18n.i18n.registerUIStrings("ui/legacy/components/perf_ui/OverviewGrid.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class OverviewGrid{element;grid;window;constructor(t,e){this.element=document.createElement("div"),this.element.id=t+"-overview-container",this.grid=new TimelineGrid,this.grid.element.id=t+"-overview-grid",this.grid.setScrollTop(0),this.element.appendChild(this.grid.element),this.window=new Window(this.element,this.grid.dividersLabelBarElement,e)}clientWidth(){return this.element.clientWidth}updateDividers(t){this.grid.updateDividers(t)}addEventDividers(t){this.grid.addEventDividers(t)}removeEventDividers(){this.grid.removeEventDividers()}reset(){this.window.reset()}windowLeft(){return this.window.windowLeft||0}windowRight(){return this.window.windowRight||0}setWindow(t,e){this.window.setWindow(t,e)}addEventListener(t,e,i){return this.window.addEventListener(t,e,i)}setClickHandler(t){this.window.setClickHandler(t)}zoom(t,e){this.window.zoom(t,e)}setResizeEnabled(t){this.window.setEnabled(t)}}export const MinSelectableSize=14;export const WindowScrollSpeedFactor=.3;export const ResizerOffset=3.5;export const OffsetFromWindowEnds=10;export class Window extends Common.ObjectWrapper.ObjectWrapper{parentElement;calculator;leftResizeElement;rightResizeElement;leftCurtainElement;rightCurtainElement;overviewWindowSelector;offsetLeft;dragStartPoint;dragStartLeft;dragStartRight;windowLeft;windowRight;enabled;clickHandler;resizerParentOffsetLeft;constructor(t,e,i){super(),this.parentElement=t,UI.ARIAUtils.markAsGroup(this.parentElement),this.calculator=i,UI.ARIAUtils.setLabel(this.parentElement,i18nString(UIStrings.overviewGridWindow)),UI.UIUtils.installDragHandle(this.parentElement,this.startWindowSelectorDragging.bind(this),this.windowSelectorDragging.bind(this),this.endWindowSelectorDragging.bind(this),"text",null),e&&UI.UIUtils.installDragHandle(e,this.startWindowDragging.bind(this),this.windowDragging.bind(this),null,"-webkit-grabbing","-webkit-grab"),this.parentElement.addEventListener("wheel",this.onMouseWheel.bind(this),!0),this.parentElement.addEventListener("dblclick",this.resizeWindowMaximum.bind(this),!0),ThemeSupport.ThemeSupport.instance().appendStyle(this.parentElement,overviewGridStyles),this.leftResizeElement=t.createChild("div","overview-grid-window-resizer"),UI.UIUtils.installDragHandle(this.leftResizeElement,this.resizerElementStartDragging.bind(this),this.leftResizeElementDragging.bind(this),null,"ew-resize"),this.rightResizeElement=t.createChild("div","overview-grid-window-resizer"),UI.UIUtils.installDragHandle(this.rightResizeElement,this.resizerElementStartDragging.bind(this),this.rightResizeElementDragging.bind(this),null,"ew-resize"),UI.ARIAUtils.setLabel(this.leftResizeElement,i18nString(UIStrings.leftResizer)),UI.ARIAUtils.markAsSlider(this.leftResizeElement);this.leftResizeElement.addEventListener("keydown",(t=>this.handleKeyboardResizing(t,!1))),UI.ARIAUtils.setLabel(this.rightResizeElement,i18nString(UIStrings.rightResizer)),UI.ARIAUtils.markAsSlider(this.rightResizeElement);this.rightResizeElement.addEventListener("keydown",(t=>this.handleKeyboardResizing(t,!0))),this.rightResizeElement.addEventListener("focus",this.onRightResizeElementFocused.bind(this)),this.leftCurtainElement=t.createChild("div","window-curtain-left"),this.rightCurtainElement=t.createChild("div","window-curtain-right"),this.reset()}onRightResizeElementFocused(){this.parentElement.scrollLeft=0}reset(){this.windowLeft=0,this.windowRight=1,this.setEnabled(!0),this.updateCurtains()}setEnabled(t){this.enabled=t,this.rightResizeElement.tabIndex=t?0:-1,this.leftResizeElement.tabIndex=t?0:-1}setClickHandler(t){this.clickHandler=t}resizerElementStartDragging(t){const e=t,i=t.target;return!!this.enabled&&(this.resizerParentOffsetLeft=e.pageX-e.offsetX-i.offsetLeft,t.stopPropagation(),!0)}leftResizeElementDragging(t){const e=t;this.resizeWindowLeft(e.pageX-(this.resizerParentOffsetLeft||0)),t.preventDefault()}rightResizeElementDragging(t){const e=t;this.resizeWindowRight(e.pageX-(this.resizerParentOffsetLeft||0)),t.preventDefault()}handleKeyboardResizing(t,e){const i=t,s=t.target;let n=!1;if("ArrowLeft"===i.key||"ArrowRight"===i.key){"ArrowRight"===i.key&&(n=!0);const r=this.getNewResizerPosition(s.offsetLeft,n,i.ctrlKey);e?this.resizeWindowRight(r):this.resizeWindowLeft(r),t.consume(!0)}}getNewResizerPosition(t,e,i){let s,n=i?10:2;n=e?n:-Math.abs(n);return s=t+3.5+n,e&&s<10?s=10:!e&&s>this.parentElement.clientWidth-10&&(s=this.parentElement.clientWidth-10),s}startWindowSelectorDragging(t){if(!this.enabled)return!1;const e=t;this.offsetLeft=this.parentElement.getBoundingClientRect().left;const i=e.x-this.offsetLeft;return this.overviewWindowSelector=new WindowSelector(this.parentElement,i),!0}windowSelectorDragging(t){if(!this.overviewWindowSelector)return;const e=t;this.overviewWindowSelector.updatePosition(e.x-this.offsetLeft),t.preventDefault()}endWindowSelectorDragging(t){if(!this.overviewWindowSelector)return;const e=t,i=this.overviewWindowSelector.close(e.x-this.offsetLeft);delete this.overviewWindowSelector;if(i.end-i.start<3){if(this.clickHandler&&this.clickHandler.call(null,t))return;const e=i.end;i.start=Math.max(0,e-7),i.end=Math.min(this.parentElement.clientWidth,e+7)}else i.end-i.start<14&&(this.parentElement.clientWidth-i.end>14?i.end=i.start+14:i.start=i.end-14);this.setWindowPosition(i.start,i.end)}startWindowDragging(t){const e=t;return this.dragStartPoint=e.pageX,this.dragStartLeft=this.windowLeft||0,this.dragStartRight=this.windowRight||0,t.stopPropagation(),!0}windowDragging(t){const e=t;e.preventDefault();let i=(e.pageX-this.dragStartPoint)/this.parentElement.clientWidth;this.dragStartLeft+i<0&&(i=-this.dragStartLeft),this.dragStartRight+i>1&&(i=1-this.dragStartRight),this.setWindow(this.dragStartLeft+i,this.dragStartRight+i)}resizeWindowLeft(t){t<10?t=0:t>this.rightResizeElement.offsetLeft-4&&(t=this.rightResizeElement.offsetLeft-4),this.setWindowPosition(t,null)}resizeWindowRight(t){t>this.parentElement.clientWidth-10?t=this.parentElement.clientWidth:t<this.leftResizeElement.offsetLeft+14&&(t=this.leftResizeElement.offsetLeft+14),this.setWindowPosition(null,t)}resizeWindowMaximum(){this.setWindowPosition(0,this.parentElement.clientWidth)}getRawSliderValue(t){if(!this.calculator)throw new Error("No calculator to calculate boundaries");const e=this.calculator.minimumBoundary(),i=this.calculator.maximumBoundary()-e;return t?e+i*(this.windowLeft||0):e+i*(this.windowRight||0)}updateResizeElementPositionValue(t,e){const i=t.toFixed(2),s=e.toFixed(2);UI.ARIAUtils.setAriaValueNow(this.leftResizeElement,i),UI.ARIAUtils.setAriaValueNow(this.rightResizeElement,s);const n=Number(s)-.5,r=Number(i)+.5;UI.ARIAUtils.setAriaValueMinMax(this.leftResizeElement,"0",n.toString()),UI.ARIAUtils.setAriaValueMinMax(this.rightResizeElement,r.toString(),"100")}updateResizeElementPositionLabels(){if(!this.calculator)return;const t=this.calculator.formatValue(TraceEngine.Types.Timing.MilliSeconds(this.getRawSliderValue(!0))),e=this.calculator.formatValue(TraceEngine.Types.Timing.MilliSeconds(this.getRawSliderValue(!1)));UI.ARIAUtils.setAriaValueText(this.leftResizeElement,String(t)),UI.ARIAUtils.setAriaValueText(this.rightResizeElement,String(e))}updateResizeElementPercentageLabels(t,e){UI.ARIAUtils.setAriaValueText(this.leftResizeElement,t),UI.ARIAUtils.setAriaValueText(this.rightResizeElement,e)}calculateWindowPosition(){return{rawStartValue:Number(this.getRawSliderValue(!0)),rawEndValue:Number(this.getRawSliderValue(!1))}}setWindow(t,e){this.windowLeft=t,this.windowRight=e,this.updateCurtains(),this.calculator&&this.dispatchEventToListeners(Events.WindowChangedWithPosition,this.calculateWindowPosition()),this.dispatchEventToListeners(Events.WindowChanged)}updateCurtains(){const t=this.windowLeft||0,e=this.windowRight||0;let i=t,s=e;const n=s-i;if(0!==this.parentElement.clientWidth){const r=n*this.parentElement.clientWidth,o=7;if(r<o){const l=o/r;i=(e+t-n*l)/2,s=(e+t+n*l)/2}}const r=100*i,o=100*s,l=100-100*s,a=r+"%",h=o+"%";this.leftResizeElement.style.left=a,this.rightResizeElement.style.left=h,this.leftCurtainElement.style.width=a,this.rightCurtainElement.style.width=l+"%",this.updateResizeElementPositionValue(r,o),this.calculator?this.updateResizeElementPositionLabels():this.updateResizeElementPercentageLabels(a,h)}setWindowPosition(t,e){const i=this.parentElement.clientWidth,s="number"==typeof t?t/i:this.windowLeft,n="number"==typeof e?e/i:this.windowRight;this.setWindow(s||0,n||0)}onMouseWheel(t){const e=t;if(this.enabled){if(e.deltaY){const t=1.1,i=1/53,s=e.offsetX/this.parentElement.clientWidth;this.zoom(Math.pow(t,e.deltaY*i),s)}if(e.deltaX){let t=Math.round(.3*e.deltaX);const i=this.leftResizeElement.offsetLeft+3.5,s=this.rightResizeElement.offsetLeft+3.5;i-t<0&&(t=i),s-t>this.parentElement.clientWidth&&(t=s-this.parentElement.clientWidth),this.setWindowPosition(i-t,s-t),e.preventDefault()}}}zoom(t,e){let i=this.windowLeft||0,s=this.windowRight||0;const n=s-i;let r=t*n;r>1&&(r=1,t=r/n),i=e+(i-e)*t,i=Platform.NumberUtilities.clamp(i,0,1-r),s=e+(s-e)*t,s=Platform.NumberUtilities.clamp(s,r,1),this.setWindow(i,s)}}export var Events;!function(t){t.WindowChanged="WindowChanged",t.WindowChangedWithPosition="WindowChangedWithPosition"}(Events||(Events={}));export class WindowSelector{startPosition;width;windowSelector;constructor(t,e){this.startPosition=e,this.width=t.offsetWidth,this.windowSelector=document.createElement("div"),this.windowSelector.className="overview-grid-window-selector",this.windowSelector.style.left=this.startPosition+"px",this.windowSelector.style.right=this.width-this.startPosition+"px",t.appendChild(this.windowSelector)}close(t){return t=Math.max(0,Math.min(t,this.width)),this.windowSelector.remove(),this.startPosition<t?{start:this.startPosition,end:t}:{start:t,end:this.startPosition}}updatePosition(t){(t=Math.max(0,Math.min(t,this.width)))<this.startPosition?(this.windowSelector.style.left=t+"px",this.windowSelector.style.right=this.width-this.startPosition+"px"):(this.windowSelector.style.left=this.startPosition+"px",this.windowSelector.style.right=this.width-t+"px")}}