@yuebai008/cli/dist/cli-server/client/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.js

Command line interface for rapid qg-minigame development

import*as Common from"../../../../core/common/common.js";import*as i18n from"../../../../core/i18n/i18n.js";import*as UI from"../../legacy.js";import{ObjectPropertiesSection}from"./ObjectPropertiesSection.js";import customPreviewComponentStyles from"./customPreviewComponent.css.js";const UIStrings={showAsJavascriptObject:"Show as JavaScript object"},str_=i18n.i18n.registerUIStrings("ui/legacy/components/object_ui/CustomPreviewComponent.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class CustomPreviewSection{sectionElement;object;expanded;cachedContent;header;expandIcon;constructor(e){this.sectionElement=document.createElement("span"),this.sectionElement.classList.add("custom-expandable-section"),this.object=e,this.expanded=!1,this.cachedContent=null;const t=e.customPreview();if(!t)return;let n;try{n=JSON.parse(t.header)}catch(e){return void Common.Console.Console.instance().error("Broken formatter: header is invalid json "+e)}this.header=this.renderJSONMLTag(n),this.header.nodeType!==Node.TEXT_NODE?(t.bodyGetterId&&(this.header instanceof Element&&this.header.classList.add("custom-expandable-section-header"),this.header.addEventListener("click",this.onClick.bind(this),!1),this.expandIcon=UI.Icon.Icon.create("triangle-right","custom-expand-icon"),this.header.insertBefore(this.expandIcon,this.header.firstChild)),this.sectionElement.appendChild(this.header)):Common.Console.Console.instance().error("Broken formatter: header should be an element node.")}element(){return this.sectionElement}renderJSONMLTag(e){if(!Array.isArray(e))return document.createTextNode(String(e));const t=e;return"object"===t[0]?this.layoutObjectTag(t):this.renderElement(t)}renderElement(e){const t=e.shift();if(!CustomPreviewSection.allowedTags.has(t))return Common.Console.Console.instance().error("Broken formatter: element "+t+" is not allowed!"),document.createElement("span");const n=document.createElement(t);if("object"==typeof e[0]&&!Array.isArray(e[0])){const t=e.shift();for(const e in t){const o=t[e];"style"===e&&"string"==typeof o&&n.setAttribute(e,o)}}return this.appendJsonMLTags(n,e),n}layoutObjectTag(e){e.shift();const t=e.shift(),n=this.object.runtimeModel().createRemoteObject(t);if(n.customPreview())return new CustomPreviewSection(n).element();const o=ObjectPropertiesSection.defaultObjectPresentation(n);return o.classList.toggle("custom-expandable-section-standard-section",n.hasChildren),o}appendJsonMLTags(e,t){for(let n=0;n<t.length;++n)e.appendChild(this.renderJSONMLTag(t[n]))}onClick(e){e.consume(!0),this.cachedContent?this.toggleExpand():this.loadBody()}toggleExpand(){this.expanded=!this.expanded,this.header instanceof Element&&this.header.classList.toggle("expanded",this.expanded),this.cachedContent instanceof Element&&this.cachedContent.classList.toggle("hidden",!this.expanded),this.expandIcon&&(this.expanded?this.expandIcon.setIconType("triangle-down"):this.expandIcon.setIconType("triangle-right"))}async loadBody(){const e=this.object.customPreview();if(e&&e.bodyGetterId){const t=await this.object.callFunctionJSON((e=>e()),[{objectId:e.bodyGetterId}]);if(!t)return;this.cachedContent=this.renderJSONMLTag(t),this.sectionElement.appendChild(this.cachedContent),this.toggleExpand()}}static allowedTags=new Set(["span","div","ol","li","table","tr","td"])}export class CustomPreviewComponent{object;customPreviewSection;element;constructor(e){this.object=e,this.customPreviewSection=new CustomPreviewSection(e),this.element=document.createElement("span"),this.element.classList.add("source-code");const t=UI.Utils.createShadowRootWithCoreStyles(this.element,{cssFile:[customPreviewComponentStyles],delegatesFocus:void 0});this.element.addEventListener("contextmenu",this.contextMenuEventFired.bind(this),!1),t.appendChild(this.customPreviewSection.element())}expandIfPossible(){const e=this.object.customPreview();e&&e.bodyGetterId&&this.customPreviewSection&&this.customPreviewSection.loadBody()}contextMenuEventFired(e){const t=new UI.ContextMenu.ContextMenu(e);this.customPreviewSection&&t.revealSection().appendItem(i18nString(UIStrings.showAsJavascriptObject),this.disassemble.bind(this)),t.appendApplicableItems(this.object),t.show()}disassemble(){this.element.shadowRoot&&(this.element.shadowRoot.textContent="",this.customPreviewSection=null,this.element.shadowRoot.appendChild(ObjectPropertiesSection.defaultObjectPresentation(this.object)))}}