@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 3.28 kB
JavaScript
import*as IconButton from"../../ui/components/icon_button/icon_button.js";import*as UI from"../../ui/legacy/legacy.js";import{StylePropertyTreeElement}from"./StylePropertyTreeElement.js";let instance=null;export class StyleEditorWidget extends UI.Widget.VBox{editor;pane;section;editorContainer;#e;constructor(){super(!0),this.contentElement.tabIndex=0,this.setDefaultFocusedElement(this.contentElement),this.editorContainer=document.createElement("div"),this.contentElement.appendChild(this.editorContainer),this.onPropertySelected=this.onPropertySelected.bind(this),this.onPropertyDeselected=this.onPropertyDeselected.bind(this)}getSection(){return this.section}async onPropertySelected(e){if(!this.section)return;const t=ensureTreeElementForProperty(this.section,e.data.name);t.property.value=e.data.value,t.updateTitle(),await t.applyStyleText(t.renderedPropertyText(),!1),await this.render()}async onPropertyDeselected(e){if(!this.section)return;const t=ensureTreeElementForProperty(this.section,e.data.name);await t.applyStyleText("",!1),await this.render()}bindContext(e,t){this.pane=e,this.section=t,this.editor?.addEventListener("propertyselected",this.onPropertySelected),this.editor?.addEventListener("propertydeselected",this.onPropertyDeselected)}setTriggerKey(e){this.#e=e}getTriggerKey(){return this.#e}unbindContext(){this.pane=void 0,this.section=void 0,this.editor?.removeEventListener("propertyselected",this.onPropertySelected),this.editor?.removeEventListener("propertydeselected",this.onPropertyDeselected)}async render(){this.editor&&(this.editor.data={authoredProperties:this.section?getAuthoredStyles(this.section,this.editor.getEditableProperties()):new Map,computedProperties:this.pane?await fetchComputedStyles(this.pane):new Map})}static instance(){return instance||(instance=new StyleEditorWidget),instance}setEditor(e){this.editor instanceof e||(this.contentElement.removeChildren(),this.editor=new e,this.contentElement.appendChild(this.editor))}static createTriggerButton(e,t,n,r,o){const i=createButton(r);return i.onclick=async r=>{r.stopPropagation();const s=e.swatchPopoverHelper(),a=StyleEditorWidget.instance();a.setEditor(n),a.bindContext(e,t),a.setTriggerKey(o),await a.render();const d=i.enclosingNodeOrSelfWithClass("style-panes-wrapper"),c=()=>{s.hide(!0)};s.show(a,i,(()=>{a.unbindContext(),d&&d.removeEventListener("scroll",c)})),d&&d.addEventListener("scroll",c)},i}}function createButton(e){const t=document.createElement("button");t.classList.add("styles-pane-button"),t.tabIndex=0,t.title=e,t.onmouseup=e=>{e.stopPropagation()};const n=new IconButton.Icon.Icon;return n.data={iconName:"flex-wrap",color:"var(--color-text-secondary)",width:"16px",height:"16px"},t.appendChild(n),t}function ensureTreeElementForProperty(e,t){const n=e.propertiesTreeOutline.rootElement().children().find((e=>e instanceof StylePropertyTreeElement&&e.property.name===t));if(n)return n;const r=e.addNewBlankProperty();return r.property.name=t,r}async function fetchComputedStyles(e){const t=e.computedStyleModel(),n=await t.fetchComputedStyle();return n?n.computedStyle:new Map}function getAuthoredStyles(e,t){const n=new Map,r=new Set(t.map((e=>e.propertyName)));for(const t of e.style().leadingProperties())r.has(t.name)&&n.set(t.name,t.value);return n}