@yuebai008/cli/dist/cli-server/client/front_end/panels/elements/components/ElementsBreadcrumbs.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 Coordinator from"../../../ui/components/render_coordinator/render_coordinator.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import elementsBreadcrumbsStyles from"./elementsBreadcrumbs.css.js";import{crumbsToRender}from"./ElementsBreadcrumbsUtils.js";import*as NodeText from"../../../ui/components/node_text/node_text.js";const UIStrings={breadcrumbs:"DOM tree breadcrumbs",scrollLeft:"Scroll left",scrollRight:"Scroll right"},str_=i18n.i18n.registerUIStrings("panels/elements/components/ElementsBreadcrumbs.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class NodeSelectedEvent extends Event{static eventName="breadcrumbsnodeselected";legacyDomNode;constructor(e){super(NodeSelectedEvent.eventName,{}),this.legacyDomNode=e.legacyDomNode}}const coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance();export class ElementsBreadcrumbs extends HTMLElement{static litTagName=LitHtml.literal`devtools-elements-breadcrumbs`;#e=this.attachShadow({mode:"open"});#t=new ResizeObserver((()=>this.#r()));#s=this.#o.bind(this);#i=[];#n=null;#l=!1;#c="start";#a=!1;#d=!1;connectedCallback(){this.#e.adoptedStyleSheets=[elementsBreadcrumbsStyles]}set data(e){this.#n=e.selectedNode,this.#i=e.crumbs,this.#d=!1,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#s)}disconnectedCallback(){this.#a=!1,this.#t.disconnect()}#h(e){return t=>{t.preventDefault(),this.dispatchEvent(new NodeSelectedEvent(e))}}async#r(){const e=this.#e.querySelector(".crumbs-scroll-container"),t=this.#e.querySelector(".crumbs-window");if(!e||!t)return;const r=await coordinator.read((()=>t.clientWidth)),s=await coordinator.read((()=>e.clientWidth));this.#l?s<r&&(this.#l=!1):s>r&&(this.#l=!0),this.#u(),this.#m(t)}#b(e){return()=>e.highlightNode()}#v(e){return()=>e.clearHighlight()}#g(e){return()=>e.highlightNode()}#w(e){return()=>e.clearHighlight()}#f(){if(!this.#t||!0===this.#a)return;const e=this.#e.querySelector(".crumbs");e&&(this.#t.observe(e),this.#a=!0)}async#S(){const e=this.#e.querySelector(".crumbs-scroll-container"),t=this.#e.querySelector(".crumbs-window");if(!e||!t)return;const r=await coordinator.read((()=>t.clientWidth)),s=await coordinator.read((()=>e.clientWidth));this.#l?s<r&&(this.#l=!1,this.#o()):s>r&&(this.#l=!0,this.#o())}#p(e){if(!e.target)return;const t=e.target;this.#m(t)}#m(e){const t=e.scrollWidth-e.clientWidth,r=e.scrollLeft;this.#c=r<10?"start":r>=t-10?"end":"middle",this.#o()}#N(e){return()=>{this.#d=!0;const t=this.#e.querySelector(".crumbs-window");if(!t)return;const r=t.clientWidth/2,s="left"===e?Math.max(Math.floor(t.scrollLeft-r),0):t.scrollLeft+r;t.scrollTo({behavior:"smooth",left:s})}}#C(e,t){const r=LitHtml.Directives.classMap({overflow:!0,[e]:!0,hidden:!this.#l}),s=i18nString("left"===e?UIStrings.scrollLeft:UIStrings.scrollRight);return LitHtml.html`
      <button
        class=${r}
        @click=${this.#N(e)}
        ?disabled=${t}
        aria-label=${s}
        title=${s}>
        <${IconButton.Icon.Icon.litTagName} .data=${{iconName:"triangle-"+e,color:"var(--color-text-primary)",width:"12px",height:"10px"}}>
        </${IconButton.Icon.Icon.litTagName}>
      </button>
      `}#o(){const e=crumbsToRender(this.#i,this.#n);LitHtml.render(LitHtml.html`
      <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)}>
        ${this.#C("left","start"===this.#c)}

        <div class="crumbs-window" @scroll=${this.#p}>
          <ul class="crumbs-scroll-container">
            ${e.map((e=>{const t={crumb:!0,selected:e.selected};return LitHtml.html`
                <li class=${LitHtml.Directives.classMap(t)}
                  data-node-id=${e.node.id}
                  data-crumb="true"
                >
                  <a href="#"
                    draggable=false
                    class="crumb-link"
                    @click=${this.#h(e.node)}
                    @mousemove=${this.#b(e.node)}
                    @mouseleave=${this.#v(e.node)}
                    @focus=${this.#g(e.node)}
                    @blur=${this.#w(e.node)}
                  ><${NodeText.NodeText.NodeText.litTagName} data-node-title=${e.title.main} .data=${{nodeTitle:e.title.main,nodeId:e.title.extras.id,nodeClasses:e.title.extras.classes}}></${NodeText.NodeText.NodeText.litTagName}></a>
                </li>`}))}
          </ul>
        </div>
        ${this.#C("right","end"===this.#c)}
      </nav>
    `,this.#e,{host:this}),this.#S(),this.#f(),this.#u()}async#u(){if(!this.#n||!this.#e||!this.#l||this.#d)return;const e=this.#n.id,t=this.#e.querySelector(`.crumb[data-node-id="${e}"]`);t&&await coordinator.scroll((()=>{t.scrollIntoView({behavior:"auto"})}))}}ComponentHelpers.CustomElements.defineComponent("devtools-elements-breadcrumbs",ElementsBreadcrumbs);