@yuebai008/cli/dist/cli-server/client/front_end/ui/legacy/Toolbar.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as Host from"../../core/host/host.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as Root from"../../core/root/root.js";import*as IconButton from"../components/icon_button/icon_button.js";import*as Utils from"./utils/utils.js";import{ActionRegistry}from"./ActionRegistry.js";import*as ARIAUtils from"./ARIAUtils.js";import{ContextMenu}from"./ContextMenu.js";import{GlassPane}from"./GlassPane.js";import{Icon}from"./Icon.js";import{bindCheckbox}from"./SettingsUI.js";import{Events as TextPromptEvents,TextPrompt}from"./TextPrompt.js";import toolbarStyles from"./toolbar.css.legacy.js";import{Tooltip}from"./Tooltip.js";import{CheckboxLabel,LongClickController}from"./UIUtils.js";const UIStrings={pressed:"pressed",notPressed:"not pressed",clearInput:"Clear input"},str_=i18n.i18n.registerUIStrings("ui/legacy/Toolbar.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class Toolbar{items;element;enabled;shadowRoot;contentElement;compactLayout=!1;constructor(t,e){this.items=[],this.element=e?e.createChild("div"):document.createElement("div"),this.element.className=t,this.element.classList.add("toolbar"),this.enabled=!0,this.shadowRoot=Utils.createShadowRootWithCoreStyles(this.element,{cssFile:toolbarStyles,delegatesFocus:void 0}),this.contentElement=this.shadowRoot.createChild("div","toolbar-shadow")}hasCompactLayout(){return this.compactLayout}registerCSSFiles(t){this.shadowRoot.adoptedStyleSheets=this.shadowRoot.adoptedStyleSheets.concat(t)}setCompactLayout(t){if(this.compactLayout!==t){this.compactLayout=t;for(const e of this.items)e.setCompactLayout(t)}}static createLongPressActionButton(t,e,o){const s=Toolbar.createActionButton(t),n=Toolbar.createActionButton(t);let l=null,i=null,r=null;return t.addEventListener("Toggled",a),a(),s;function a(){const n=t.toggled()?e||null:o||null;n&&n.length?l||(l=new LongClickController(s.element,c),r=Icon.create("triangle-bottom-right","long-click-glyph"),s.element.appendChild(r),i=n):l&&(l.dispose(),l=null,r&&r.remove(),r=null,i=null)}function c(){let t=i?i.slice():[];t.push(n);const e=s.element.ownerDocument;e.documentElement.addEventListener("mouseup",(function s(n){if(1!==n.which)return;o.hide(),e.documentElement.removeEventListener("mouseup",s,!1);for(let e=0;e<t.length;++e)if(t[e].element.classList.contains("emulate-active")){t[e].element.classList.remove("emulate-active"),t[e].clicked(n);break}}),!1);const o=new GlassPane;o.setPointerEventsBehavior("BlockedByGlassPane"),o.show(e);const l=new Toolbar("fill",o.contentElement);l.contentElement.classList.add("floating");const r=s.element.boxInWindow().relativeToElement(GlassPane.container(e)),a=r.y+26*t.length<e.documentElement.offsetHeight;a&&(t=t.reverse()),l.element.style.height=26*t.length+"px",l.element.style.top=a?r.y-5+"px":r.y-26*(t.length-1)-6+"px",l.element.style.left=r.x-5+"px";for(let e=0;e<t.length;++e)t[e].element.addEventListener("mousemove",h,!1),t[e].element.addEventListener("mouseout",d,!1),l.appendToolbarItem(t[e]);const c=a?0:t.length-1;function h(t){if(1===t.which&&t.target instanceof HTMLElement){t.target.enclosingNodeOrSelfWithClass("toolbar-item").classList.add("emulate-active")}}function d(t){if(1===t.which&&t.target instanceof HTMLElement){t.target.enclosingNodeOrSelfWithClass("toolbar-item").classList.remove("emulate-active")}}t[c].element.classList.add("emulate-active")}}static createActionButton(t,e=TOOLBAR_BUTTON_DEFAULT_OPTIONS){const o=t.toggleable()?function(){const e=new ToolbarToggle(t.title(),t.icon(),t.toggledIcon());return e.setToggleWithRedColor(t.toggleWithRedColor()),t.addEventListener("Toggled",o),o(),e;function o(){e.setToggled(t.toggled()),t.title()&&(e.setTitle(t.title()),Tooltip.installWithActionBinding(e.element,t.title(),t.id()))}}():function(){const e=new ToolbarButton(t.title(),t.icon());t.title()&&Tooltip.installWithActionBinding(e.element,t.title(),t.id());return e}();e.showLabel&&o.setText(e.label?.()||t.title());let s=e=>{t.execute()};if(e.userActionCode){const o=e.userActionCode;s=()=>{Host.userMetrics.actionTaken(o),t.execute()}}return o.addEventListener(ToolbarButton.Events.Click,s,t),t.addEventListener("Enabled",(function(t){o.setEnabled(t.data)})),o.setEnabled(t.enabled()),o}static createActionButtonForId(t,e=TOOLBAR_BUTTON_DEFAULT_OPTIONS){const o=ActionRegistry.instance().action(t);return Toolbar.createActionButton(o,e)}gripElementForResize(){return this.contentElement}makeWrappable(t){this.contentElement.classList.add("wrappable"),t&&this.contentElement.classList.add("toolbar-grow-vertical")}makeVertical(){this.contentElement.classList.add("vertical")}makeBlueOnHover(){this.contentElement.classList.add("toolbar-blue-on-hover")}makeToggledGray(){this.contentElement.classList.add("toolbar-toggled-gray")}renderAsLinks(){this.contentElement.classList.add("toolbar-render-as-links")}empty(){return!this.items.length}setEnabled(t){this.enabled=t;for(const t of this.items)t.applyEnabledState(this.enabled&&t.enabled)}appendToolbarItem(t){this.items.push(t),t.toolbar=this,t.setCompactLayout(this.hasCompactLayout()),this.enabled||t.applyEnabledState(!1),this.contentElement.appendChild(t.element),this.hideSeparatorDupes()}appendSeparator(){this.appendToolbarItem(new ToolbarSeparator)}appendSpacer(){this.appendToolbarItem(new ToolbarSeparator(!0))}appendText(t){this.appendToolbarItem(new ToolbarText(t))}removeToolbarItem(t){const e=[];for(const o of this.items)o===t?o.element.remove():e.push(o);this.items=e}removeToolbarItems(){for(const t of this.items)t.toolbar=null;this.items=[],this.contentElement.removeChildren()}setColor(t){const e=document.createElement("style");e.textContent=".toolbar-glyph { background-color: "+t+" !important }",this.shadowRoot.appendChild(e)}setToggledColor(t){const e=document.createElement("style");e.textContent=".toolbar-button.toolbar-state-on .toolbar-glyph { background-color: "+t+" !important }",this.shadowRoot.appendChild(e)}hideSeparatorDupes(){if(!this.items.length)return;let t,e=!1,o=!1;for(let s=0;s<this.items.length;++s)this.items[s]instanceof ToolbarSeparator?(this.items[s].setVisible(!e),e=!0,t=this.items[s]):this.items[s].visible()&&(e=!1,t=null,o=!0);t&&t!==this.items[this.items.length-1]&&t.setVisible(!1),this.element.classList.toggle("hidden",null!=t&&t.visible()&&!o)}async appendItemsAtLocation(t){const e=getRegisteredToolbarItems();e.sort(((t,e)=>(t.order||0)-(e.order||0)));const o=e.filter((e=>e.location===t)),s=await Promise.all(o.map((t=>{const{separator:e,actionId:o,showLabel:s,label:n,loadItem:l}=t;if(e)return new ToolbarSeparator;if(o)return Toolbar.createActionButtonForId(o,{label:n,showLabel:Boolean(s),userActionCode:void 0});if(!l)throw new Error("Could not load a toolbar item registration with no loadItem function");return l().then((t=>t.item()))})));for(const t of s)t&&this.appendToolbarItem(t)}}const TOOLBAR_BUTTON_DEFAULT_OPTIONS={showLabel:!1,userActionCode:void 0};export class ToolbarItem extends Common.ObjectWrapper.ObjectWrapper{element;visibleInternal;enabled;toolbar;title;constructor(t){super(),this.element=t,this.element.classList.add("toolbar-item"),this.visibleInternal=!0,this.enabled=!0,this.toolbar=null}setTitle(t,e=void 0){this.title!==t&&(this.title=t,ARIAUtils.setLabel(this.element,t),void 0===e?Tooltip.install(this.element,t):Tooltip.installWithActionBinding(this.element,t,e))}setEnabled(t){this.enabled!==t&&(this.enabled=t,this.applyEnabledState(this.enabled&&(!this.toolbar||this.toolbar.enabled)))}applyEnabledState(t){this.element.disabled=!t}visible(){return this.visibleInternal}setVisible(t){this.visibleInternal!==t&&(this.element.classList.toggle("hidden",!t),this.visibleInternal=t,!this.toolbar||this instanceof ToolbarSeparator||this.toolbar.hideSeparatorDupes())}setRightAligned(t){this.element.classList.toggle("toolbar-item-right-aligned",t)}setCompactLayout(t){}}export class ToolbarItemWithCompactLayout extends ToolbarItem{constructor(t){super(t)}setCompactLayout(t){this.dispatchEventToListeners("CompactLayoutUpdated",t)}}export class ToolbarText extends ToolbarItem{constructor(t){const e=document.createElement("div");e.classList.add("toolbar-text"),super(e),this.element.classList.add("toolbar-text"),this.setText(t||"")}text(){return this.element.textContent||""}setText(t){this.element.textContent=t}}export class ToolbarButton extends ToolbarItem{glyphElement;textElement;text;glyph;icon;constructor(t,e,o){const s=document.createElement("button");s.classList.add("toolbar-button"),super(s),this.element.addEventListener("click",this.clicked.bind(this),!1),this.element.addEventListener("mousedown",this.mouseDown.bind(this),!1),this.glyphElement=Icon.create("","toolbar-glyph hidden"),this.element.appendChild(this.glyphElement),this.textElement=this.element.createChild("div","toolbar-text hidden"),this.setTitle(t),e&&this.setGlyphOrIcon(e),this.setText(o||""),this.title=""}focus(){this.element.focus()}setText(t){this.text!==t&&(this.textElement.textContent=t,this.textElement.classList.toggle("hidden",!t),this.text=t)}setGlyphOrIcon(t){t instanceof HTMLElement?(t.classList.add("toolbar-icon"),this.icon?this.icon.replaceWith(t):this.element.appendChild(t),this.icon=t):t&&this.setGlyph(t)}setGlyph(t){this.glyph!==t&&(this.glyphElement.setIconType(t),this.glyphElement.classList.toggle("hidden",!t),this.element.classList.toggle("toolbar-has-glyph",Boolean(t)),this.glyph=t)}setBackgroundImage(t){this.element.style.backgroundImage="url("+t+")"}setSecondary(){this.element.classList.add("toolbar-button-secondary")}setDarkText(){this.element.classList.add("dark-text")}turnIntoSelect(t=!1){this.element.classList.add("toolbar-has-dropdown"),t&&this.element.classList.add("toolbar-has-dropdown-shrinkable");const e=Icon.create("triangle-down","toolbar-dropdown-arrow");this.element.appendChild(e)}clicked(t){this.enabled&&(this.dispatchEventToListeners(ToolbarButton.Events.Click,t),t.consume())}mouseDown(t){this.enabled&&this.dispatchEventToListeners(ToolbarButton.Events.MouseDown,t)}}!function(t){let e;!function(t){t.Click="Click",t.MouseDown="MouseDown"}(e=t.Events||(t.Events={}))}(ToolbarButton||(ToolbarButton={}));export class ToolbarInput extends ToolbarItem{prompt;proxyElement;constructor(t,e,o,s,n,l,i){const r=document.createElement("div");r.classList.add("toolbar-input"),super(r);const a=this.element.createChild("div","toolbar-input-prompt");ARIAUtils.setLabel(a,t),a.addEventListener("focus",(()=>this.element.classList.add("focused"))),a.addEventListener("blur",(()=>this.element.classList.remove("focused"))),this.prompt=new TextPrompt,this.proxyElement=this.prompt.attach(a),this.proxyElement.classList.add("toolbar-prompt-proxy"),this.proxyElement.addEventListener("keydown",(t=>this.onKeydownCallback(t))),this.prompt.initialize(l||(()=>Promise.resolve([]))," ",i),n&&this.prompt.setTitle(n),this.prompt.setPlaceholder(t,e),this.prompt.addEventListener(TextPromptEvents.TextChanged,this.onChangeCallback.bind(this)),o&&(this.element.style.flexGrow=String(o)),s&&(this.element.style.flexShrink=String(s));const c=this.element.createChild("div","toolbar-input-clear-button");c.title=UIStrings.clearInput;const h=new IconButton.Icon.Icon;h.data={color:"var(--icon-default)",width:"16px",height:"16px",iconName:"cross-circle-filled"},h.classList.add("search-cancel-button"),c.appendChild(h),c.addEventListener("click",(()=>{this.setValue("",!0),this.prompt.focus()})),this.updateEmptyStyles()}applyEnabledState(t){this.prompt.setEnabled(t)}setValue(t,e){this.prompt.setText(t),e&&this.onChangeCallback(),this.updateEmptyStyles()}value(){return this.prompt.textWithCurrentSuggestion()}valueWithoutSuggestion(){return this.prompt.text()}onKeydownCallback(t){"Enter"===t.key&&this.prompt.text()&&this.dispatchEventToListeners(ToolbarInput.Event.EnterPressed,this.prompt.text()),Platform.KeyboardUtilities.isEscKey(t)&&this.prompt.text()&&(this.setValue("",!0),t.consume(!0))}onChangeCallback(){this.updateEmptyStyles(),this.dispatchEventToListeners(ToolbarInput.Event.TextChanged,this.prompt.text())}updateEmptyStyles(){this.element.classList.toggle("toolbar-input-empty",!this.prompt.text())}}!function(t){let e;!function(t){t.TextChanged="TextChanged",t.EnterPressed="EnterPressed"}(e=t.Event||(t.Event={}))}(ToolbarInput||(ToolbarInput={}));export class ToolbarToggle extends ToolbarButton{toggledInternal;untoggledGlyphOrIcon;toggledGlyphOrIcon;constructor(t,e,o){super(t,e,""),this.toggledInternal=!1,this.untoggledGlyphOrIcon=e,this.toggledGlyphOrIcon=o,this.element.classList.add("toolbar-state-off"),ARIAUtils.setPressed(this.element,!1)}toggled(){return this.toggledInternal}setToggled(t){this.toggledInternal!==t&&(this.toggledInternal=t,this.element.classList.toggle("toolbar-state-on",t),this.element.classList.toggle("toolbar-state-off",!t),ARIAUtils.setPressed(this.element,t),this.toggledGlyphOrIcon&&this.untoggledGlyphOrIcon&&this.setGlyphOrIcon(t?this.toggledGlyphOrIcon:this.untoggledGlyphOrIcon))}setDefaultWithRedColor(t){this.element.classList.toggle("toolbar-default-with-red-color",t)}setToggleWithRedColor(t){this.element.classList.toggle("toolbar-toggle-with-red-color",t)}setToggleWithDot(t){this.element.classList.toggle("toolbar-toggle-with-dot",t)}}export class ToolbarMenuButton extends ToolbarButton{contextMenuHandler;useSoftMenu;triggerTimeout;lastTriggerTime;constructor(t,e){super("","dots-vertical"),this.contextMenuHandler=t,this.useSoftMenu=Boolean(e),ARIAUtils.markAsMenuButton(this.element)}mouseDown(t){1===t.buttons?this.triggerTimeout||(this.triggerTimeout=window.setTimeout(this.trigger.bind(this,t),200)):super.mouseDown(t)}trigger(t){if(delete this.triggerTimeout,this.lastTriggerTime&&Date.now()-this.lastTriggerTime<300)return;const e=new ContextMenu(t,{useSoftMenu:this.useSoftMenu,x:this.element.getBoundingClientRect().left,y:this.element.getBoundingClientRect().top+this.element.offsetHeight});this.contextMenuHandler(e),e.show(),this.lastTriggerTime=Date.now()}clicked(t){this.triggerTimeout&&clearTimeout(this.triggerTimeout),this.trigger(t)}}export class ToolbarSettingToggle extends ToolbarToggle{defaultTitle;setting;willAnnounceState;constructor(t,e,o,s){super(o,e,s),this.defaultTitle=o,this.setting=t,this.settingChanged(),this.setting.addChangeListener(this.settingChanged,this),this.willAnnounceState=!1}settingChanged(){const t=this.setting.get();this.setToggled(t);const e=i18nString(t?UIStrings.pressed:UIStrings.notPressed);this.willAnnounceState&&ARIAUtils.alert(e),this.willAnnounceState=!1,this.setTitle(this.defaultTitle)}clicked(t){this.willAnnounceState=!0,this.setting.set(!this.toggled()),super.clicked(t)}}export class ToolbarSeparator extends ToolbarItem{constructor(t){const e=document.createElement("div");e.classList.add(t?"toolbar-spacer":"toolbar-divider"),super(e)}}export class ToolbarComboBox extends ToolbarItem{selectElementInternal;constructor(t,e,o){const s=document.createElement("span");s.classList.add("toolbar-select-container"),super(s),this.selectElementInternal=this.element.createChild("select","toolbar-item");const n=Icon.create("triangle-down","toolbar-dropdown-arrow");this.element.appendChild(n),t&&this.selectElementInternal.addEventListener("change",t,!1),ARIAUtils.setLabel(this.selectElementInternal,e),super.setTitle(e),o&&this.selectElementInternal.classList.add(o)}selectElement(){return this.selectElementInternal}size(){return this.selectElementInternal.childElementCount}options(){return Array.prototype.slice.call(this.selectElementInternal.children,0)}addOption(t){this.selectElementInternal.appendChild(t)}createOption(t,e){const o=this.selectElementInternal.createChild("option");return o.text=t,void 0!==e&&(o.value=e),o}applyEnabledState(t){super.applyEnabledState(t),this.selectElementInternal.disabled=!t}removeOption(t){this.selectElementInternal.removeChild(t)}removeOptions(){this.selectElementInternal.removeChildren()}selectedOption(){return this.selectElementInternal.selectedIndex>=0?this.selectElementInternal[this.selectElementInternal.selectedIndex]:null}select(t){this.selectElementInternal.selectedIndex=Array.prototype.indexOf.call(this.selectElementInternal,t)}setSelectedIndex(t){this.selectElementInternal.selectedIndex=t}selectedIndex(){return this.selectElementInternal.selectedIndex}setMaxWidth(t){this.selectElementInternal.style.maxWidth=t+"px"}setMinWidth(t){this.selectElementInternal.style.minWidth=t+"px"}}export class ToolbarSettingComboBox extends ToolbarComboBox{optionsInternal;setting;muteSettingListener;constructor(t,e,o){super(null,o),this.optionsInternal=t,this.setting=e,this.selectElementInternal.addEventListener("change",this.valueChanged.bind(this),!1),this.setOptions(t),e.addChangeListener(this.settingChanged,this)}setOptions(t){this.optionsInternal=t,this.selectElementInternal.removeChildren();for(let e=0;e<t.length;++e){const o=t[e],s=this.createOption(o.label,o.value);this.selectElementInternal.appendChild(s),this.setting.get()===o.value&&this.setSelectedIndex(e)}}value(){return this.optionsInternal[this.selectedIndex()].value}settingChanged(){if(this.muteSettingListener)return;const t=this.setting.get();for(let e=0;e<this.optionsInternal.length;++e)if(t===this.optionsInternal[e].value){this.setSelectedIndex(e);break}}valueChanged(t){const e=this.optionsInternal[this.selectedIndex()];this.muteSettingListener=!0,this.setting.set(e.value),this.muteSettingListener=!1}}export class ToolbarCheckbox extends ToolbarItem{inputElement;constructor(t,e,o){super(CheckboxLabel.create(t)),this.element.classList.add("checkbox"),this.inputElement=this.element.checkboxElement,e&&(Tooltip.install(this.inputElement,e),Tooltip.install(this.element.textElement,e)),o&&this.inputElement.addEventListener("click",o,!1)}checked(){return this.inputElement.checked}setChecked(t){this.inputElement.checked=t}applyEnabledState(t){super.applyEnabledState(t),this.inputElement.disabled=!t}setIndeterminate(t){this.inputElement.indeterminate=t}}export class ToolbarSettingCheckbox extends ToolbarCheckbox{constructor(t,e,o){super(o||t.title()||"",e),bindCheckbox(this.inputElement,t)}}const registeredToolbarItems=[];export function registerToolbarItem(t){registeredToolbarItems.push(t)}function getRegisteredToolbarItems(){return registeredToolbarItems.filter((t=>Root.Runtime.Runtime.isDescriptorEnabled({experiment:t.experiment,condition:t.condition})))}export var ToolbarItemLocation;!function(t){t.FILES_NAVIGATION_TOOLBAR="files-navigator-toolbar",t.MAIN_TOOLBAR_RIGHT="main-toolbar-right",t.MAIN_TOOLBAR_LEFT="main-toolbar-left",t.STYLES_SIDEBARPANE_TOOLBAR="styles-sidebarpane-toolbar"}(ToolbarItemLocation||(ToolbarItemLocation={}));