@yuebai008/cli/dist/cli-server/client/front_end/panels/elements/components/LayoutPane.js

Command line interface for rapid qg-minigame development

import*as Common from"../../../core/common/common.js";import*as SDK from"../../../core/sdk/sdk.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as LegacyWrapper from"../../../ui/components/legacy_wrapper/legacy_wrapper.js";import*as Coordinator from"../../../ui/components/render_coordinator/render_coordinator.js";import*as UI from"../../../ui/legacy/legacy.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import layoutPaneStyles from"../layoutPane.css.js";import*as Input from"../../../ui/components/input/input.js";import*as NodeText from"../../../ui/components/node_text/node_text.js";import inspectorCommonStyles from"../../../ui/legacy/inspectorCommon.css.js";import*as i18n from"../../../core/i18n/i18n.js";const UIStrings={chooseElementOverlayColor:"Choose the overlay color for this element",showElementInTheElementsPanel:"Show element in the Elements panel",grid:"Grid",overlayDisplaySettings:"Overlay display settings",gridOverlays:"Grid overlays",noGridLayoutsFoundOnThisPage:"No grid layouts found on this page",flexbox:"Flexbox",flexboxOverlays:"Flexbox overlays",noFlexboxLayoutsFoundOnThisPage:"No flexbox layouts found on this page",colorPickerOpened:"Color picker opened."},str_=i18n.i18n.registerUIStrings("panels/elements/components/LayoutPane.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html}=LitHtml,nodeToLayoutElement=e=>{const t=e.getAttribute("class");return{id:e.id,color:"#000",name:e.localName(),domId:e.getAttribute("id"),domClasses:t?t.split(/\s+/).filter((e=>Boolean(e))):void 0,enabled:!1,reveal:()=>{Common.Revealer.reveal(e),e.scrollIntoView()},highlight:()=>{e.highlight()},hideHighlight:()=>{SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()},toggle:e=>{throw new Error("Not implemented")},setColor(e){throw new Error("Not implemented")}}},gridNodesToElements=e=>e.map((e=>{const t=nodeToLayoutElement(e),n=e.id;return{...t,color:e.domModel().overlayModel().colorOfGridInPersistentOverlay(n)||"#000",enabled:e.domModel().overlayModel().isHighlightedGridInPersistentOverlay(n),toggle:t=>{t?e.domModel().overlayModel().highlightGridInPersistentOverlay(n):e.domModel().overlayModel().hideGridInPersistentOverlay(n)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfGridInPersistentOverlay(n,t)}}})),flexContainerNodesToElements=e=>e.map((e=>{const t=nodeToLayoutElement(e),n=e.id;return{...t,color:e.domModel().overlayModel().colorOfFlexInPersistentOverlay(n)||"#000",enabled:e.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(n),toggle:t=>{t?e.domModel().overlayModel().highlightFlexContainerInPersistentOverlay(n):e.domModel().overlayModel().hideFlexContainerInPersistentOverlay(n)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfFlexInPersistentOverlay(n,t)}}}));function isEnumSetting(e){return e.type===Common.Settings.SettingType.ENUM}function isBooleanSetting(e){return e.type===Common.Settings.SettingType.BOOLEAN}const coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance();let layoutPaneWrapperInstance;export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent{static litTagName=LitHtml.literal`devtools-layout-pane`;#e=this.attachShadow({mode:"open"});#t=[];#n;#o;constructor(){super(),this.#t=this.#s(),this.#n=Common.Settings.Settings.instance().moduleSetting("showUAShadowDOM"),this.#o=[],this.#e.adoptedStyleSheets=[Input.checkboxStyles,layoutPaneStyles,inspectorCommonStyles]}static instance(){return layoutPaneWrapperInstance||(layoutPaneWrapperInstance=LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.Widget,new LayoutPane)),layoutPaneWrapperInstance.getComponent()}modelAdded(e){const t=e.overlayModel();t.addEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged,this.render,this),t.addEventListener(SDK.OverlayModel.Events.PersistentFlexContainerOverlayStateChanged,this.render,this),this.#o.push(e)}modelRemoved(e){const t=e.overlayModel();t.removeEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged,this.render,this),t.removeEventListener(SDK.OverlayModel.Events.PersistentFlexContainerOverlayStateChanged,this.render,this),this.#o=this.#o.filter((t=>t!==e))}async#i(e){const t=this.#n.get(),n=[];for(const o of this.#o)try{const s=await o.getNodesByStyle(e,!0);for(const e of s){const s=o.nodeForId(e);null===s||!t&&s.ancestorUserAgentShadowRoot()||n.push(s)}}catch(e){console.warn(e)}return n}async#r(){return await this.#i([{name:"display",value:"grid"},{name:"display",value:"inline-grid"}])}async#a(){return await this.#i([{name:"display",value:"flex"},{name:"display",value:"inline-flex"}])}#s(){const e=[];for(const t of["showGridLineLabels","showGridTrackSizes","showGridAreas","extendGridLines"]){const n=Common.Settings.Settings.instance().moduleSetting(t),o=n.get(),s=n.type();if(!s)throw new Error("A setting provided to LayoutSidebarPane does not have a setting type");if(s!==Common.Settings.SettingType.BOOLEAN&&s!==Common.Settings.SettingType.ENUM)throw new Error("A setting provided to LayoutSidebarPane does not have a supported setting type");const i={type:s,name:n.name,title:n.title()};("boolean"==typeof o||"string"==typeof o)&&e.push({...i,value:o,options:n.options().map((e=>({...e,value:e.value})))})}return e}onSettingChanged(e,t){Common.Settings.Settings.instance().moduleSetting(e).set(t)}wasShown(){for(const e of this.#t)Common.Settings.Settings.instance().moduleSetting(e.name).addChangeListener(this.render,this);for(const e of this.#o)this.modelRemoved(e);this.#o=[],SDK.TargetManager.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel,this,{scoped:!0}),UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode,this.render,this),this.#n.addChangeListener(this.render,this),this.render()}willHide(){for(const e of this.#t)Common.Settings.Settings.instance().moduleSetting(e.name).removeChangeListener(this.render,this);SDK.TargetManager.TargetManager.instance().unobserveModels(SDK.DOMModel.DOMModel,this),UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode,this.render,this),this.#n.removeChangeListener(this.render,this)}#l(e){if(!e.target)return;const t=e.target.parentElement;if(!t)throw new Error("<details> element is not found for a <summary> element");switch(e.key){case"ArrowLeft":t.open=!1;break;case"ArrowRight":t.open=!0}}async render(){const e=gridNodesToElements(await this.#r()),t=flexContainerNodesToElements(await this.#a());await coordinator.write("LayoutPane render",(()=>{render(html`
        <details open>
          <summary class="header" @keydown=${this.#l}>
            ${i18nString(UIStrings.grid)}
          </summary>
          <div class="content-section">
            <h3 class="content-section-title">${i18nString(UIStrings.overlayDisplaySettings)}</h3>
            <div class="select-settings">
              ${this.#d().map((e=>this.#h(e)))}
            </div>
            <div class="checkbox-settings">
              ${this.#m().map((e=>this.#g(e)))}
            </div>
          </div>
          ${e?html`<div class="content-section">
              <h3 class="content-section-title">
                ${e.length?i18nString(UIStrings.gridOverlays):i18nString(UIStrings.noGridLayoutsFoundOnThisPage)}
              </h3>
              ${e.length?html`<div class="elements">
                  ${e.map((e=>this.#c(e)))}
                </div>`:""}
            </div>`:""}
        </details>
        ${void 0!==t?html`
          <details open>
            <summary class="header" @keydown=${this.#l}>
              ${i18nString(UIStrings.flexbox)}
            </summary>
            ${t?html`<div class="content-section">
                <h3 class="content-section-title">
                  ${t.length?i18nString(UIStrings.flexboxOverlays):i18nString(UIStrings.noFlexboxLayoutsFoundOnThisPage)}
                </h3>
                ${t.length?html`<div class="elements">
                    ${t.map((e=>this.#c(e)))}
                  </div>`:""}
              </div>`:""}
          </details>
          `:""}
      `,this.#e,{host:this})}))}#d(){return this.#t.filter(isEnumSetting)}#m(){return this.#t.filter(isBooleanSetting)}#u(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.checked)}#p(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.value)}#y(e,t){t.preventDefault(),e.toggle(t.target.checked)}#v(e,t){t.preventDefault(),e.reveal()}#S(e,t){t.preventDefault(),e.setColor(t.target.value),this.render()}#f(e,t){t.preventDefault(),e.highlight()}#C(e,t){t.preventDefault(),e.hideHighlight()}#c(e){const t=this.#y.bind(this,e),n=this.#v.bind(this,e),o=this.#S.bind(this,e),s=this.#f.bind(this,e),i=this.#C.bind(this,e);return html`<div class="element">
      <label data-element="true" class="checkbox-label">
        <input data-input="true" type="checkbox" .checked=${e.enabled} @change=${t} />
        <span class="node-text-container" data-label="true" @mouseenter=${s} @mouseleave=${i}>
          <${NodeText.NodeText.NodeText.litTagName} .data=${{nodeId:e.domId,nodeTitle:e.name,nodeClasses:e.domClasses}}></${NodeText.NodeText.NodeText.litTagName}>
        </span>
      </label>
      <label @keyup=${e=>{if("Enter"!==e.key&&" "!==e.key)return;e.target.querySelector("input").click(),UI.ARIAUtils.alert(i18nString(UIStrings.colorPickerOpened)),e.preventDefault()}} @keydown=${e=>{" "===e.key&&e.preventDefault()}} class="color-picker-label" style="background: ${e.color};">
        <input @change=${o} @input=${o} title=${i18nString(UIStrings.chooseElementOverlayColor)} tabindex="0" class="color-picker" type="color" value=${e.color} />
      </label>
      <${IconButton.Icon.Icon.litTagName} .data=${{iconName:"select-element",color:"var(--icon-show-element)",width:"16px"}} tabindex="0", @click=${n} title=${i18nString(UIStrings.showElementInTheElementsPanel)} class="show-element">
      </${IconButton.Icon.Icon.litTagName}>
    </div>`}#g(e){const t=this.#u.bind(this,e);return html`<label data-boolean-setting="true" class="checkbox-label" title=${e.title}>
      <input data-input="true" type="checkbox" .checked=${e.value} @change=${t} />
      <span data-label="true">${e.title}</span>
    </label>`}#h(e){const t=this.#p.bind(this,e);return html`<label data-enum-setting="true" class="select-label" title=${e.title}>
      <select class="chrome-select" data-input="true" @change=${t}>
        ${e.options.map((t=>html`<option value=${t.value} .selected=${e.value===t.value}>${t.title}</option>`))}
      </select>
    </label>`}}ComponentHelpers.CustomElements.defineComponent("devtools-layout-pane",LayoutPane);