@yuebai008/cli/dist/cli-server/client/front_end/ui/components/menus/Menu.js

Command line interface for rapid qg-minigame development

import*as Platform from"../../../core/platform/platform.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as Coordinator from"../../../ui/components/render_coordinator/render_coordinator.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Dialogs from"../dialogs/dialogs.js";import menuStyles from"./menu.css.js";import menuGroupStyles from"./menuGroup.css.js";import menuItemStyles from"./menuItem.css.js";const coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance(),selectedItemCheckmark=new URL("../../../Images/checkmark.svg",import.meta.url).toString();export class Menu extends HTMLElement{static litTagName=LitHtml.literal`devtools-menu`;#e=this.attachShadow({mode:"open"});#t=this.#n.bind(this);#o=null;#s=!1;#i={origin:null,open:!1,position:"auto",showConnector:!1,showDivider:!1,showSelectedItem:!0,horizontalAlignment:"auto",getConnectorCustomXPosition:null};get origin(){return this.#i.origin}set origin(e){this.#i.origin=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get open(){return this.#i.open}set open(e){e!==this.open&&(this.#i.open=e,this.toggleAttribute("has-open-dialog",this.open),this.#r().setDialogVisible(this.open),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t))}get position(){return this.#i.position}set position(e){this.#i.position=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get showConnector(){return this.#i.showConnector}set showConnector(e){this.#i.showConnector=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get showDivider(){return this.#i.showDivider}set showDivider(e){this.#i.showDivider=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get showSelectedItem(){return this.#i.showSelectedItem}set showSelectedItem(e){this.#i.showSelectedItem=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get horizontalAlignment(){return this.#i.horizontalAlignment}set horizontalAlignment(e){this.#i.horizontalAlignment=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get getConnectorCustomXPosition(){return this.#i.getConnectorCustomXPosition}set getConnectorCustomXPosition(e){this.#i.getConnectorCustomXPosition=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}connectedCallback(){this.#e.adoptedStyleSheets=[menuStyles],coordinator.write((()=>{ComponentHelpers.SetCSSProperty.set(this,"--selected-item-check",`url(${selectedItemCheckmark})`),ComponentHelpers.SetCSSProperty.set(this,"--menu-checkmark-width",this.#i.showSelectedItem?"26px":"0px"),ComponentHelpers.SetCSSProperty.set(this,"--menu-checkmark-height",this.#i.showSelectedItem?"12px":"0px");const e=this.showDivider?"1px var(--divider-line) solid":"none";ComponentHelpers.SetCSSProperty.set(this,"--override-divider-line",e)}))}#r(){if(!this.#o)throw new Error("Dialog not found");return this.#o}async#l(){await coordinator.write((()=>{this.setAttribute("has-open-dialog","has-open-dialog");const e=this.#e.querySelector("#container");e instanceof HTMLElement&&e.focus()}))}#d(){this.#a().focus()}#a(){const e=this.#e.querySelector("slot"),t=e?.assignedElements();let n=t[0];if(n instanceof HTMLSlotElement&&(n=n?.assignedElements()[0]),n instanceof MenuGroup){const e=n.shadowRoot?.querySelector("slot");n=e?.assignedElements()[0]}if(n instanceof HTMLElement)return n;throw new Error("First item not found")}#h(e){const t=e.composedPath();if(e.stopPropagation(),t.find((e=>e instanceof HTMLInputElement)))return;const n=e.composedPath().find((e=>e instanceof MenuItem));n instanceof MenuItem&&this.#u(n)}#p(e){const t=e.key;e.stopImmediatePropagation();let n=e.target;const o=e.composedPath(),s="ArrowDown"===t||"ArrowRight"===t;return!this.#s&&s?(this.#d(),void(this.#s=!0)):this.#s||"ArrowUp"!==t?void((n instanceof MenuItem||(n=o.find((e=>e instanceof MenuItem)),n instanceof MenuItem))&&(Platform.KeyboardUtilities.keyIsArrowKey(t)?this.#m(t,n):"Home"===t?this.#c(n):"End"===t?this.#g():"Enter"===t||"Space"===e.code?this.#u(n):"Escape"===t&&(e.preventDefault(),this.#f()))):(this.#g(),void(this.#s=!0))}#u(e){""!==e.value&&(this.dispatchEvent(new MenuItemSelectedEvent(e.value)),e.preventMenuCloseOnSelection||this.#f())}#m(e,t){let n=t;"ArrowDown"===e?(n=t.nextElementSibling,null===n&&t.parentElement instanceof MenuGroup&&(n=this.#C(t))):"ArrowUp"===e&&(n=t.previousElementSibling,null===n&&t.parentElement instanceof MenuGroup&&(n=this.#S(t))),n instanceof MenuItem&&n.focus()}#C(e){const t=e.parentElement;if(!(t instanceof MenuGroup))return null;const n=t.nextElementSibling;if(n instanceof MenuItem)return n;if(!(n instanceof MenuGroup))return null;for(const e of n.children)if(e instanceof MenuItem)return e;return null}#S(e){const t=e.parentElement;if(!(t instanceof MenuGroup))return null;const n=t.previousElementSibling;return n instanceof MenuItem?n:n instanceof MenuGroup&&n.lastElementChild instanceof MenuItem?n.lastElementChild:null}#c(e){let t=e;for(e.parentElement instanceof MenuGroup&&(t=e.parentElement);t?.previousElementSibling;)t=t?.previousElementSibling;if(t instanceof MenuItem)t.focus();else for(const e of t.children)if(e instanceof MenuItem)return void e.focus()}#g(){const e=this.#a();let t=e;for(e.parentElement instanceof MenuGroup&&(t=e.parentElement);t?.nextElementSibling;)t=t?.nextElementSibling;t instanceof MenuItem?t.focus():t instanceof MenuGroup&&t.lastElementChild instanceof MenuItem&&t.lastElementChild.focus()}#f(e){e&&e.stopImmediatePropagation(),this.dispatchEvent(new MenuCloseRequest),this.#r().setDialogVisible(!1),this.#s=!1}async#n(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("Menu render was not scheduled");LitHtml.render(LitHtml.html`
      <${Dialogs.Dialog.Dialog.litTagName}
        @clickoutsidedialog=${this.#f}
        @forceddialogclose=${this.#f}
        .position=${this.position}
        .showConnector=${this.showConnector}
        .origin=${this.origin}
        .dialogShownCallback=${this.#l.bind(this)}
        .horizontalAlignment=${this.horizontalAlignment}
        .getConnectorCustomXPosition=${this.getConnectorCustomXPosition}
        on-render=${ComponentHelpers.Directives.nodeRenderedCallback((e=>{this.#o=e}))}
        >
        <span id="container" role="menu" tabIndex="0" @keydown=${this.#p}>
          <slot @click=${this.#h}>
          </slot>
        </span>
      </${Dialogs.Dialog.Dialog.litTagName}>
    `,this.#e,{host:this})}}export class MenuItem extends HTMLElement{static litTagName=LitHtml.literal`devtools-menu-item`;#e=this.attachShadow({mode:"open"});#t=this.#n.bind(this);connectedCallback(){this.#e.adoptedStyleSheets=[menuItemStyles],this.tabIndex=0,this.setAttribute("role","menuitem")}#i={value:"",preventMenuCloseOnSelection:!1,selected:!1};get preventMenuCloseOnSelection(){return this.#i.preventMenuCloseOnSelection}set preventMenuCloseOnSelection(e){this.#i.preventMenuCloseOnSelection=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get value(){return this.#i.value}set value(e){this.#i.value=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get selected(){return this.#i.selected}set selected(e){this.#i.selected=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}async#n(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("MenuItem render was not scheduled");LitHtml.render(LitHtml.html`
      <span class=${LitHtml.Directives.classMap({"menu-item":!0,"is-selected-item":this.selected,"prevents-close":this.preventMenuCloseOnSelection})}
      >
        <slot></slot>
      </span>
    `,this.#e,{host:this})}}export class MenuGroup extends HTMLElement{static litTagName=LitHtml.literal`devtools-menu-group`;#e=this.attachShadow({mode:"open"});#t=this.#n.bind(this);connectedCallback(){this.#e.adoptedStyleSheets=[menuGroupStyles]}#i={name:null};get name(){return this.#i.name}set name(e){this.#i.name=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}async#n(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("MenuGroup render was not scheduled");LitHtml.render(LitHtml.html`
      <span class="menu-group">
        <span class="menu-group-label">${this.name}</span>
        <slot></slot>
      </span>
    `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-menu",Menu),ComponentHelpers.CustomElements.defineComponent("devtools-menu-item",MenuItem),ComponentHelpers.CustomElements.defineComponent("devtools-menu-group",MenuGroup);export class MenuItemSelectedEvent extends Event{itemValue;static eventName="menuitemselected";constructor(e){super(MenuItemSelectedEvent.eventName,{bubbles:!0,composed:!0}),this.itemValue=e}}export class MenuCloseRequest extends Event{static eventName="menucloserequest";constructor(){super(MenuCloseRequest.eventName,{bubbles:!0,composed:!0})}}