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

Command line interface for rapid qg-minigame development

import*as i18n from"../../../core/i18n/i18n.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import stylePropertyEditorStyles from"./stylePropertyEditor.css.js";import{findFlexContainerIcon,findGridContainerIcon}from"./CSSPropertyIconResolver.js";const UIStrings={selectButton:"Add {propertyName}: {propertyValue}",deselectButton:"Remove {propertyName}: {propertyValue}"},str_=i18n.i18n.registerUIStrings("panels/elements/components/StylePropertyEditor.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html,Directives:Directives}=LitHtml;export class PropertySelectedEvent extends Event{static eventName="propertyselected";data;constructor(e,t){super(PropertySelectedEvent.eventName,{}),this.data={name:e,value:t}}}export class PropertyDeselectedEvent extends Event{static eventName="propertydeselected";data;constructor(e,t){super(PropertyDeselectedEvent.eventName,{}),this.data={name:e,value:t}}}export class StylePropertyEditor extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=new Map;#r=new Map;editableProperties=[];constructor(){super()}connectedCallback(){this.#e.adoptedStyleSheets=[stylePropertyEditorStyles]}getEditableProperties(){return this.editableProperties}set data(e){this.#t=e.authoredProperties,this.#r=e.computedProperties,this.#o()}#o(){render(html`
      <div class="container">
        ${this.editableProperties.map((e=>this.#n(e)))}
      </div>
    `,this.#e,{host:this})}#n(e){const t=this.#t.get(e.propertyName),r=!t,o=t||this.#r.get(e.propertyName),n=Directives.classMap({"property-value":!0,"not-authored":r});return html`<div class="row">
      <div class="property">
        <span class="property-name">${e.propertyName}</span>: <span class=${n}>${o}</span>
      </div>
      <div class="buttons">
        ${e.propertyValues.map((r=>this.#s(r,e.propertyName,r===t)))}
      </div>
    </div>`}#s(e,t,r=!1){const o=`${t}: ${e}`,n=this.findIcon(o,this.#r);if(!n)throw new Error(`Icon for ${o} is not found`);const s=`transform: rotate(${n.rotate}deg) scale(${n.scaleX}, ${n.scaleY})`,p=Directives.classMap({button:!0,selected:r}),i={propertyName:t,propertyValue:e},a=i18nString(r?UIStrings.deselectButton:UIStrings.selectButton,i);return html`<button title=${a} class=${p} @click=${()=>this.#p(t,e,r)}>
       <${IconButton.Icon.Icon.litTagName} style=${s} .data=${{iconName:n.iconName,color:"var(--icon-color)",width:"20px",height:"20px"}}></${IconButton.Icon.Icon.litTagName}>
    </button>`}#p(e,t,r){r?this.dispatchEvent(new PropertyDeselectedEvent(e,t)):this.dispatchEvent(new PropertySelectedEvent(e,t))}findIcon(e,t){throw new Error("Not implemented")}}export class FlexboxEditor extends StylePropertyEditor{editableProperties=FlexboxEditableProperties;findIcon(e,t){return findFlexContainerIcon(e,t)}}ComponentHelpers.CustomElements.defineComponent("devtools-flexbox-editor",FlexboxEditor);export class GridEditor extends StylePropertyEditor{editableProperties=GridEditableProperties;findIcon(e,t){return findGridContainerIcon(e,t)}}ComponentHelpers.CustomElements.defineComponent("devtools-grid-editor",GridEditor);export const FlexboxEditableProperties=[{propertyName:"flex-direction",propertyValues:["row","column","row-reverse","column-reverse"]},{propertyName:"flex-wrap",propertyValues:["nowrap","wrap"]},{propertyName:"align-content",propertyValues:["center","flex-start","flex-end","space-around","space-between","stretch"]},{propertyName:"justify-content",propertyValues:["center","flex-start","flex-end","space-between","space-around","space-evenly"]},{propertyName:"align-items",propertyValues:["center","flex-start","flex-end","stretch","baseline"]}];export const GridEditableProperties=[{propertyName:"align-content",propertyValues:["center","space-between","space-around","space-evenly","stretch"]},{propertyName:"justify-content",propertyValues:["center","start","end","space-between","space-around","space-evenly"]},{propertyName:"align-items",propertyValues:["center","start","end","stretch","baseline"]},{propertyName:"justify-items",propertyValues:["center","start","end","stretch"]}];