@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 3.04 kB
JavaScript
import*as i18n from"../../core/i18n/i18n.js";import*as SDK from"../../core/sdk/sdk.js";import*as TreeOutline from"../../ui/components/tree_outline/tree_outline.js";import*as UI from"../../ui/legacy/legacy.js";import{ElementsPanel}from"./ElementsPanel.js";import layersWidgetStyles from"./layersWidget.css.js";const UIStrings={cssLayersTitle:"CSS layers",toggleCSSLayers:"Toggle CSS Layers view"},str_=i18n.i18n.registerUIStrings("panels/elements/LayersWidget.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let layersWidgetInstance,buttonProviderInstance;export class LayersWidget extends UI.Widget.Widget{cssModel;layerTreeComponent=new TreeOutline.TreeOutline.TreeOutline;constructor(){super(!0),this.contentElement.className="styles-layers-pane",UI.UIUtils.createTextChild(this.contentElement.createChild("div"),i18nString(UIStrings.cssLayersTitle)),this.contentElement.appendChild(this.layerTreeComponent),UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode,this.update,this)}updateModel(e){this.cssModel!==e&&(this.cssModel&&this.cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetChanged,this.update,this),this.cssModel=e,this.cssModel&&this.cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged,this.update,this))}async wasShown(){return super.wasShown(),this.registerCSSFiles([layersWidgetStyles]),this.update()}async update(){if(!this.isShowing())return;let e=UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),!e)return;if(this.updateModel(e.domModel().cssModel()),!this.cssModel)return;const t=e=>s=>{const n=s.subLayers,r=SDK.CSSModel.CSSModel.readableLayerName(s.name),i=s.order+": "+r,o=e?e+"."+r:r;return n?{treeNodeData:i,id:o,children:()=>Promise.resolve(n.sort(((e,t)=>e.order-t.order)).map(t(o)))}:{treeNodeData:i,id:o}},s=await this.cssModel.getRootLayer(e.id);this.layerTreeComponent.data={defaultRenderer:TreeOutline.TreeOutline.defaultRenderer,tree:[t("")(s)]},await this.layerTreeComponent.expandRecursively(5)}async revealLayer(e){return this.isShowing()||ElementsPanel.instance().showToolbarPane(this,ButtonProvider.instance().item()),await this.update(),this.layerTreeComponent.expandToAndSelectTreeNodeId("implicit outer layer."+e)}static instance(e={forceNew:null}){const{forceNew:t}=e;return layersWidgetInstance&&!t||(layersWidgetInstance=new LayersWidget),layersWidgetInstance}}export class ButtonProvider{button;constructor(){this.button=new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.toggleCSSLayers),"layers","layers-filled"),this.button.setVisible(!1),this.button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.clicked,this),this.button.element.classList.add("monospace")}static instance(e={forceNew:null}){const{forceNew:t}=e;return buttonProviderInstance&&!t||(buttonProviderInstance=new ButtonProvider),buttonProviderInstance}clicked(){const e=LayersWidget.instance();ElementsPanel.instance().showToolbarPane(e.isShowing()?null:e,this.button)}item(){return this.button}}