@yuebai008/cli/dist/cli-server/client/front_end/core/sdk/OverlayModel.js

Command line interface for rapid qg-minigame development

import*as Common from"../common/common.js";import*as i18n from"../i18n/i18n.js";import*as Root from"../root/root.js";import{DebuggerModel,Events as DebuggerModelEvents}from"./DebuggerModel.js";import{DeferredDOMNode,DOMModel,Events as DOMModelEvents}from"./DOMModel.js";import{OverlayPersistentHighlighter}from"./OverlayPersistentHighlighter.js";import{Capability}from"./Target.js";import{SDKModel}from"./SDKModel.js";import{TargetManager}from"./TargetManager.js";const UIStrings={pausedInDebugger:"Paused in debugger"},str_=i18n.i18n.registerUIStrings("core/sdk/OverlayModel.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class OverlayModel extends SDKModel{#e;overlayAgent;#t;#o;#i;#r;#n;#h;#s;#l;#g;#a;#d;#c;#C;#m;#u;#H;#p;constructor(e){super(e),this.#e=e.model(DOMModel),e.registerOverlayDispatcher(this),this.overlayAgent=e.overlayAgent(),this.#t=e.model(DebuggerModel),this.#t&&(Common.Settings.Settings.instance().moduleSetting("disablePausedStateOverlay").addChangeListener(this.updatePausedInDebuggerMessage,this),this.#t.addEventListener(DebuggerModelEvents.DebuggerPaused,this.updatePausedInDebuggerMessage,this),this.#t.addEventListener(DebuggerModelEvents.DebuggerResumed,this.updatePausedInDebuggerMessage,this),this.#t.addEventListener(DebuggerModelEvents.GlobalObjectCleared,this.updatePausedInDebuggerMessage,this)),this.#o=!1,this.#i=null,this.#r=new DefaultHighlighter(this),this.#n=this.#r,this.#h=Common.Settings.Settings.instance().moduleSetting("showPaintRects"),this.#s=Common.Settings.Settings.instance().moduleSetting("showLayoutShiftRegions"),this.#l=Common.Settings.Settings.instance().moduleSetting("showAdHighlights"),this.#g=Common.Settings.Settings.instance().moduleSetting("showDebugBorders"),this.#a=Common.Settings.Settings.instance().moduleSetting("showFPSCounter"),this.#d=Common.Settings.Settings.instance().moduleSetting("showScrollBottleneckRects"),this.#c=Common.Settings.Settings.instance().moduleSetting("showWebVitals"),this.#C=[],this.#m=!0,e.suspended()||(this.overlayAgent.invoke_enable(),this.wireAgentToSettings()),this.#u=new OverlayPersistentHighlighter(this),this.#e.addEventListener(DOMModelEvents.NodeRemoved,(()=>{this.#u&&this.#u.refreshHighlights()})),this.#e.addEventListener(DOMModelEvents.DocumentUpdated,(()=>{this.#u&&this.#u.hideAllInOverlay()})),this.#H=new SourceOrderHighlighter(this),this.#p=!1}static highlightObjectAsDOMNode(e){const t=e.runtimeModel().target().model(DOMModel);t&&t.overlayModel().highlightInOverlay({object:e,selectorList:void 0})}static hideDOMNodeHighlight(){for(const e of TargetManager.instance().models(OverlayModel))e.delayedHideHighlight(0)}static async muteHighlight(){return Promise.all(TargetManager.instance().models(OverlayModel).map((e=>e.suspendModel())))}static async unmuteHighlight(){return Promise.all(TargetManager.instance().models(OverlayModel).map((e=>e.resumeModel())))}static highlightRect(e){for(const t of TargetManager.instance().models(OverlayModel))t.highlightRect(e)}static clearHighlight(){for(const e of TargetManager.instance().models(OverlayModel))e.clearHighlight()}getDOMModel(){return this.#e}highlightRect({x:e,y:t,width:o,height:i,color:r,outlineColor:n}){const h=r||{r:255,g:0,b:255,a:.3},s=n||{r:255,g:0,b:255,a:.5};return this.overlayAgent.invoke_highlightRect({x:e,y:t,width:o,height:i,color:h,outlineColor:s})}clearHighlight(){return this.overlayAgent.invoke_hideHighlight()}async wireAgentToSettings(){this.#C=[this.#h.addChangeListener((()=>this.overlayAgent.invoke_setShowPaintRects({result:this.#h.get()}))),this.#s.addChangeListener((()=>this.overlayAgent.invoke_setShowLayoutShiftRegions({result:this.#s.get()}))),this.#l.addChangeListener((()=>this.overlayAgent.invoke_setShowAdHighlights({show:this.#l.get()}))),this.#g.addChangeListener((()=>this.overlayAgent.invoke_setShowDebugBorders({show:this.#g.get()}))),this.#a.addChangeListener((()=>this.overlayAgent.invoke_setShowFPSCounter({show:this.#a.get()}))),this.#d.addChangeListener((()=>this.overlayAgent.invoke_setShowScrollBottleneckRects({show:this.#d.get()}))),this.#c.addChangeListener((()=>this.overlayAgent.invoke_setShowWebVitals({show:this.#c.get()})))],this.#h.get()&&this.overlayAgent.invoke_setShowPaintRects({result:!0}),this.#s.get()&&this.overlayAgent.invoke_setShowLayoutShiftRegions({result:!0}),this.#l.get()&&this.overlayAgent.invoke_setShowAdHighlights({show:!0}),this.#g.get()&&this.overlayAgent.invoke_setShowDebugBorders({show:!0}),this.#a.get()&&this.overlayAgent.invoke_setShowFPSCounter({show:!0}),this.#d.get()&&this.overlayAgent.invoke_setShowScrollBottleneckRects({show:!0}),this.#c.get()&&this.overlayAgent.invoke_setShowWebVitals({show:!0}),this.#t&&this.#t.isPaused()&&this.updatePausedInDebuggerMessage(),await this.overlayAgent.invoke_setShowViewportSizeOnResize({show:this.#m})}async suspendModel(){Common.EventTarget.removeEventListeners(this.#C),await this.overlayAgent.invoke_disable()}async resumeModel(){await Promise.all([this.overlayAgent.invoke_enable(),this.wireAgentToSettings()])}setShowViewportSizeOnResize(e){this.#m!==e&&(this.#m=e,this.target().suspended()||this.overlayAgent.invoke_setShowViewportSizeOnResize({show:e}))}updatePausedInDebuggerMessage(){if(this.target().suspended())return;const e=this.#t&&this.#t.isPaused()&&!Common.Settings.Settings.instance().moduleSetting("disablePausedStateOverlay").get()?i18nString(UIStrings.pausedInDebugger):void 0;this.overlayAgent.invoke_setPausedInDebuggerMessage({message:e})}setHighlighter(e){this.#n=e||this.#r}async setInspectMode(e,t=!0){await this.#e.requestDocument(),this.#o="none"!==e,this.dispatchEventToListeners(Events.InspectModeWillBeToggled,this),this.#n.setInspectMode(e,this.buildHighlightConfig("all",t))}inspectModeEnabled(){return this.#o}highlightInOverlay(e,t,o){if(this.#p)return;this.#i&&(clearTimeout(this.#i),this.#i=null);const i=this.buildHighlightConfig(t);void 0!==o&&(i.showInfo=o),this.#n.highlightInOverlay(e,i)}highlightInOverlayForTwoSeconds(e){this.highlightInOverlay(e),this.delayedHideHighlight(2e3)}highlightGridInPersistentOverlay(e){this.#u&&(this.#u.highlightGridInOverlay(e),this.dispatchEventToListeners(Events.PersistentGridOverlayStateChanged,{nodeId:e,enabled:!0}))}isHighlightedGridInPersistentOverlay(e){return!!this.#u&&this.#u.isGridHighlighted(e)}hideGridInPersistentOverlay(e){this.#u&&(this.#u.hideGridInOverlay(e),this.dispatchEventToListeners(Events.PersistentGridOverlayStateChanged,{nodeId:e,enabled:!1}))}highlightScrollSnapInPersistentOverlay(e){this.#u&&(this.#u.highlightScrollSnapInOverlay(e),this.dispatchEventToListeners(Events.PersistentScrollSnapOverlayStateChanged,{nodeId:e,enabled:!0}))}isHighlightedScrollSnapInPersistentOverlay(e){return!!this.#u&&this.#u.isScrollSnapHighlighted(e)}hideScrollSnapInPersistentOverlay(e){this.#u&&(this.#u.hideScrollSnapInOverlay(e),this.dispatchEventToListeners(Events.PersistentScrollSnapOverlayStateChanged,{nodeId:e,enabled:!1}))}highlightFlexContainerInPersistentOverlay(e){this.#u&&(this.#u.highlightFlexInOverlay(e),this.dispatchEventToListeners(Events.PersistentFlexContainerOverlayStateChanged,{nodeId:e,enabled:!0}))}isHighlightedFlexContainerInPersistentOverlay(e){return!!this.#u&&this.#u.isFlexHighlighted(e)}hideFlexContainerInPersistentOverlay(e){this.#u&&(this.#u.hideFlexInOverlay(e),this.dispatchEventToListeners(Events.PersistentFlexContainerOverlayStateChanged,{nodeId:e,enabled:!1}))}highlightContainerQueryInPersistentOverlay(e){this.#u&&(this.#u.highlightContainerQueryInOverlay(e),this.dispatchEventToListeners(Events.PersistentContainerQueryOverlayStateChanged,{nodeId:e,enabled:!0}))}isHighlightedContainerQueryInPersistentOverlay(e){return!!this.#u&&this.#u.isContainerQueryHighlighted(e)}hideContainerQueryInPersistentOverlay(e){this.#u&&(this.#u.hideContainerQueryInOverlay(e),this.dispatchEventToListeners(Events.PersistentContainerQueryOverlayStateChanged,{nodeId:e,enabled:!1}))}highlightSourceOrderInOverlay(e){const t={parentOutlineColor:Common.Color.SourceOrderHighlight.ParentOutline.toProtocolRGBA(),childOutlineColor:Common.Color.SourceOrderHighlight.ChildOutline.toProtocolRGBA()};this.#H.highlightSourceOrderInOverlay(e,t)}colorOfGridInPersistentOverlay(e){return this.#u?this.#u.colorOfGrid(e).asString("hex"):null}setColorOfGridInPersistentOverlay(e,t){if(!this.#u)return;const o=Common.Color.parse(t);o&&(this.#u.setColorOfGrid(e,o),this.#u.resetOverlay())}colorOfFlexInPersistentOverlay(e){return this.#u?this.#u.colorOfFlex(e).asString("hex"):null}setColorOfFlexInPersistentOverlay(e,t){if(!this.#u)return;const o=Common.Color.parse(t);o&&(this.#u.setColorOfFlex(e,o),this.#u.resetOverlay())}hideSourceOrderInOverlay(){this.#H.hideSourceOrderHighlight()}setSourceOrderActive(e){this.#p=e}sourceOrderModeActive(){return this.#p}highlightIsolatedElementInPersistentOverlay(e){this.#u&&this.#u.highlightIsolatedElementInOverlay(e)}hideIsolatedElementInPersistentOverlay(e){this.#u&&this.#u.hideIsolatedElementInOverlay(e)}isHighlightedIsolatedElementInPersistentOverlay(e){return!!this.#u&&this.#u.isIsolatedElementHighlighted(e)}delayedHideHighlight(e){null===this.#i&&(this.#i=window.setTimeout((()=>this.highlightInOverlay({clear:!0})),e))}highlightFrame(e){this.#i&&(clearTimeout(this.#i),this.#i=null),this.#n.highlightFrame(e)}showHingeForDualScreen(e){if(e){const{x:t,y:o,width:i,height:r,contentColor:n,outlineColor:h}=e;this.overlayAgent.invoke_setShowHinge({hingeConfig:{rect:{x:t,y:o,width:i,height:r},contentColor:n,outlineColor:h}})}else this.overlayAgent.invoke_setShowHinge({})}buildHighlightConfig(e="all",t=!1){const o=Common.Settings.Settings.instance().moduleSetting("showMetricsRulers").get(),i=Common.Settings.Settings.instance().moduleSetting("colorFormat").get(),r={showInfo:"all"===e||"container-outline"===e,showRulers:o,showStyles:t,showAccessibilityInfo:t,showExtensionLines:o,gridHighlightConfig:{},flexContainerHighlightConfig:{},flexItemHighlightConfig:{},contrastAlgorithm:Root.Runtime.experiments.isEnabled("APCA")?"apca":"aa"};"all"!==e&&"content"!==e||(r.contentColor=Common.Color.PageHighlight.Content.toProtocolRGBA()),"all"!==e&&"padding"!==e||(r.paddingColor=Common.Color.PageHighlight.Padding.toProtocolRGBA()),"all"!==e&&"border"!==e||(r.borderColor=Common.Color.PageHighlight.Border.toProtocolRGBA()),"all"!==e&&"margin"!==e||(r.marginColor=Common.Color.PageHighlight.Margin.toProtocolRGBA()),"all"===e&&(r.eventTargetColor=Common.Color.PageHighlight.EventTarget.toProtocolRGBA(),r.shapeColor=Common.Color.PageHighlight.Shape.toProtocolRGBA(),r.shapeMarginColor=Common.Color.PageHighlight.ShapeMargin.toProtocolRGBA(),r.gridHighlightConfig={rowGapColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA(),rowHatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),columnGapColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA(),columnHatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),rowLineColor:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),columnLineColor:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),rowLineDash:!0,columnLineDash:!0},r.flexContainerHighlightConfig={containerBorder:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dashed"},itemSeparator:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dotted"},lineSeparator:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dashed"},mainDistributedSpace:{hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),fillColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA()},crossDistributedSpace:{hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),fillColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA()},rowGapSpace:{hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),fillColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA()},columnGapSpace:{hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),fillColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA()}},r.flexItemHighlightConfig={baseSizeBox:{hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA()},baseSizeBorder:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dotted"},flexibilityArrow:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA()}}),e.endsWith("gap")&&(r.gridHighlightConfig={gridBorderColor:Common.Color.PageHighlight.GridBorder.toProtocolRGBA(),gridBorderDash:!0},"gap"!==e&&"row-gap"!==e||(r.gridHighlightConfig.rowGapColor=Common.Color.PageHighlight.GapBackground.toProtocolRGBA(),r.gridHighlightConfig.rowHatchColor=Common.Color.PageHighlight.GapHatch.toProtocolRGBA()),"gap"!==e&&"column-gap"!==e||(r.gridHighlightConfig.columnGapColor=Common.Color.PageHighlight.GapBackground.toProtocolRGBA(),r.gridHighlightConfig.columnHatchColor=Common.Color.PageHighlight.GapHatch.toProtocolRGBA())),e.endsWith("gap")&&(r.flexContainerHighlightConfig={containerBorder:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dashed"}},"gap"!==e&&"row-gap"!==e||(r.flexContainerHighlightConfig.rowGapSpace={hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),fillColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA()}),"gap"!==e&&"column-gap"!==e||(r.flexContainerHighlightConfig.columnGapSpace={hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),fillColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA()})),"grid-areas"===e&&(r.gridHighlightConfig={rowLineColor:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),columnLineColor:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),rowLineDash:!0,columnLineDash:!0,showAreaNames:!0,areaBorderColor:Common.Color.PageHighlight.GridAreaBorder.toProtocolRGBA()}),"grid-template-columns"===e&&(r.contentColor=Common.Color.PageHighlight.Content.toProtocolRGBA(),r.gridHighlightConfig={columnLineColor:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),columnLineDash:!0}),"grid-template-rows"===e&&(r.contentColor=Common.Color.PageHighlight.Content.toProtocolRGBA(),r.gridHighlightConfig={rowLineColor:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),rowLineDash:!0}),"justify-content"===e&&(r.flexContainerHighlightConfig={containerBorder:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dashed"},mainDistributedSpace:{hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),fillColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA()}}),"align-content"===e&&(r.flexContainerHighlightConfig={containerBorder:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dashed"},crossDistributedSpace:{hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA(),fillColor:Common.Color.PageHighlight.GapBackground.toProtocolRGBA()}}),"align-items"===e&&(r.flexContainerHighlightConfig={containerBorder:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dashed"},lineSeparator:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dashed"},crossAlignment:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA()}}),"flexibility"===e&&(r.flexItemHighlightConfig={baseSizeBox:{hatchColor:Common.Color.PageHighlight.GapHatch.toProtocolRGBA()},baseSizeBorder:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dotted"},flexibilityArrow:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA()}}),"container-outline"===e&&(r.containerQueryContainerHighlightConfig={containerBorder:{color:Common.Color.PageHighlight.LayoutLine.toProtocolRGBA(),pattern:"dashed"}});return new Set(["rgb","hsl","hex"]).has(i)&&(r.colorFormat=i),r}nodeHighlightRequested({nodeId:e}){const t=this.#e.nodeForId(e);t&&this.dispatchEventToListeners(Events.HighlightNodeRequested,t)}static setInspectNodeHandler(e){OverlayModel.inspectNodeHandler=e}inspectNodeRequested({backendNodeId:e}){const t=new DeferredDOMNode(this.target(),e);OverlayModel.inspectNodeHandler?t.resolvePromise().then((e=>{e&&OverlayModel.inspectNodeHandler&&OverlayModel.inspectNodeHandler(e)})):Common.Revealer.reveal(t),this.dispatchEventToListeners(Events.ExitedInspectMode)}screenshotRequested({viewport:e}){this.dispatchEventToListeners(Events.ScreenshotRequested,e),this.dispatchEventToListeners(Events.ExitedInspectMode)}inspectModeCanceled(){this.dispatchEventToListeners(Events.ExitedInspectMode)}static inspectNodeHandler=null;getOverlayAgent(){return this.overlayAgent}}export var Events;!function(e){e.InspectModeWillBeToggled="InspectModeWillBeToggled",e.ExitedInspectMode="InspectModeExited",e.HighlightNodeRequested="HighlightNodeRequested",e.ScreenshotRequested="ScreenshotRequested",e.PersistentGridOverlayStateChanged="PersistentGridOverlayStateChanged",e.PersistentFlexContainerOverlayStateChanged="PersistentFlexContainerOverlayStateChanged",e.PersistentScrollSnapOverlayStateChanged="PersistentScrollSnapOverlayStateChanged",e.PersistentContainerQueryOverlayStateChanged="PersistentContainerQueryOverlayStateChanged"}(Events||(Events={}));class DefaultHighlighter{#v;constructor(e){this.#v=e}highlightInOverlay(e,t){const{node:o,deferredNode:i,object:r,selectorList:n}={node:void 0,deferredNode:void 0,object:void 0,selectorList:void 0,...e},h=o?o.id:void 0,s=i?i.backendNodeId():void 0,l=r?r.objectId:void 0;h||s||l?this.#v.target().overlayAgent().invoke_highlightNode({highlightConfig:t,nodeId:h,backendNodeId:s,objectId:l,selector:n}):this.#v.target().overlayAgent().invoke_hideHighlight()}async setInspectMode(e,t){await this.#v.target().overlayAgent().invoke_setInspectMode({mode:e,highlightConfig:t})}highlightFrame(e){this.#v.target().overlayAgent().invoke_highlightFrame({frameId:e,contentColor:Common.Color.PageHighlight.Content.toProtocolRGBA(),contentOutlineColor:Common.Color.PageHighlight.ContentOutline.toProtocolRGBA()})}}export class SourceOrderHighlighter{#v;constructor(e){this.#v=e}highlightSourceOrderInOverlay(e,t){this.#v.setSourceOrderActive(!0),this.#v.setShowViewportSizeOnResize(!1),this.#v.getOverlayAgent().invoke_highlightSourceOrder({sourceOrderConfig:t,nodeId:e.id})}hideSourceOrderHighlight(){this.#v.setSourceOrderActive(!1),this.#v.setShowViewportSizeOnResize(!0),this.#v.clearHighlight()}}SDKModel.register(OverlayModel,{capabilities:Capability.DOM,autostart:!0});