@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
22 lines • 2.55 kB
JavaScript
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 NodeText from"../../../ui/components/node_text/node_text.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import queryContainerStyles from"./queryContainer.css.js";const{render:render,html:html}=LitHtml,{PhysicalAxis:PhysicalAxis,QueryAxis:QueryAxis}=SDK.CSSContainerQuery;export class QueriedSizeRequestedEvent extends Event{static eventName="queriedsizerequested";constructor(){super(QueriedSizeRequestedEvent.eventName,{})}}export class QueryContainer extends HTMLElement{static litTagName=LitHtml.literal`devtools-query-container`;#e=this.attachShadow({mode:"open"});#t;#i;#n;#s=!1;#o;set data(e){this.#t=e.queryName,this.#i=e.container,this.#n=e.onContainerLinkClick,this.#r()}connectedCallback(){this.#e.adoptedStyleSheets=[queryContainerStyles]}updateContainerQueriedSizeDetails(e){this.#o=e,this.#r()}async#a(){this.#i?.highlightNode("container-outline"),this.#s=!0,this.dispatchEvent(new QueriedSizeRequestedEvent)}#l(){this.#i?.clearHighlight(),this.#s=!1,this.#r()}#r(){if(!this.#i)return;let e,t;this.#t||(e=this.#i.getAttribute("id"),t=this.#i.getAttribute("class")?.split(/\s+/).filter(Boolean));const i=this.#t||this.#i.nodeNameNicelyCased;render(html`
→
<a href="#"
draggable=false
class="container-link"
=${this.#n}
=${this.#a}
=${this.#l}
><${NodeText.NodeText.NodeText.litTagName}
data-node-title=${i}
.data=${{nodeTitle:i,nodeId:e,nodeClasses:t}}></${NodeText.NodeText.NodeText.litTagName}></a>
${this.#s?this.#d():LitHtml.nothing}
`,this.#e,{host:this})}#d(){if(!this.#o||""===this.#o.queryAxis)return LitHtml.nothing;const e="size"===this.#o.queryAxis,t=LitHtml.Directives.classMap({"axis-icon":!0,hidden:e,vertical:"Vertical"===this.#o.physicalAxis});return html`
<span class="queried-size-details">
(${this.#o.queryAxis}<${IconButton.Icon.Icon.litTagName}
class=${t} .data=${{iconName:"width",color:"var(--icon-default)"}}></${IconButton.Icon.Icon.litTagName}>)
${e&&this.#o.width?"width:":LitHtml.nothing}
${this.#o.width||LitHtml.nothing}
${e&&this.#o.height?"height:":LitHtml.nothing}
${this.#o.height||LitHtml.nothing}
</span>
`}}ComponentHelpers.CustomElements.defineComponent("devtools-query-container",QueryContainer);