@yuebai008/cli/dist/cli-server/client/front_end/ui/components/dialogs/Dialog.js

Command line interface for rapid qg-minigame development

import*as Platform from"../../../core/platform/platform.js";import*as WindowBoundsService from"../../../services/window_bounds/window_bounds.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 dialogStyles from"./dialog.css.js";const coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance(),IS_DIALOG_SUPPORTED="HTMLDialogElement"in globalThis;export const CONNECTOR_HEIGHT=10;const CONNECTOR_WIDTH=20,DIALOG_ANIMATION_OFFSET=20;export const DIALOG_SIDE_PADDING=5;export const DIALOG_VERTICAL_PADDING=3;export const DIALOG_PADDING_FROM_WINDOW=30;export const MODAL="MODAL";export class Dialog extends HTMLElement{static litTagName=LitHtml.literal`devtools-dialog`;#t=this.attachShadow({mode:"open"});#e=this.#o.bind(this);#i=this.#n.bind(this);#s=this.#r.bind(this);#l={origin:MODAL,position:"bottom",horizontalAlignment:"center",showConnector:!1,getConnectorCustomXPosition:null,dialogShownCallback:null,windowBoundsService:WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance(),closeOnESC:!0,closeOnScroll:!0};#a=null;#h=!1;#p=!1;#d=new DOMRect(0,0,0,0);#g=new DOMRect(0,0,0,0);#c=null;#S=null;#m=new MutationObserver(this.#i);#C=new ResizeObserver(this.#u.bind(this));#w=this.windowBoundsService.getDevToolsBoundingElement();#D=this.#v.bind(this);get showConnector(){return this.#l.showConnector}set showConnector(t){this.#l.showConnector=t,this.#P()}get origin(){return this.#l.origin}set origin(t){this.#l.origin=t,this.#P()}get position(){return this.#l.position}set position(t){this.#l.position=t,this.#P()}get horizontalAlignment(){return this.#l.horizontalAlignment}set horizontalAlignment(t){this.#l.horizontalAlignment=t,this.#P()}get windowBoundsService(){return this.#l.windowBoundsService}set windowBoundsService(t){this.#l.windowBoundsService=t,this.#w=this.windowBoundsService.getDevToolsBoundingElement(),this.#P()}get bestVerticalPosition(){return this.#c}get bestHorizontalAlignment(){return this.#S}get getConnectorCustomXPosition(){return this.#l.getConnectorCustomXPosition}set getConnectorCustomXPosition(t){this.#l.getConnectorCustomXPosition=t,this.#P()}get dialogShownCallback(){return this.#l.dialogShownCallback}set dialogShownCallback(t){this.#l.dialogShownCallback=t,this.#P()}set closeOnESC(t){this.#l.closeOnESC=t,this.#P()}set closeOnScroll(t){this.#l.closeOnScroll=t,this.#P()}#u(){this.#g=this.#b().getBoundingClientRect()}#P(){ComponentHelpers.ScheduledRender.scheduleRender(this,this.#e)}connectedCallback(){this.#t.adoptedStyleSheets=[dialogStyles],window.addEventListener("resize",this.#i),document.body.addEventListener("keydown",this.#D),this.#m.observe(this.#w,{childList:!0,subtree:!0}),this.#w.addEventListener("wheel",this.#s),ComponentHelpers.SetCSSProperty.set(this,"--dialog-padding","0"),ComponentHelpers.SetCSSProperty.set(this,"--override-content-box-shadow","none"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-display",IS_DIALOG_SUPPORTED?"block":"none"),ComponentHelpers.SetCSSProperty.set(this,"--override-dialog-content-border","10px solid transparent"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-padding","3px 5px")}disconnectedCallback(){window.removeEventListener("resize",this.#i),document.body.removeEventListener("keydown",this.#D),this.#w.removeEventListener("wheel",this.#s),this.#m.disconnect(),this.#C.disconnect()}#b(){if(!this.#a){if(this.#a=this.#t.querySelector("dialog"),!this.#a)throw new Error("Dialog not found");this.#C.observe(this.#a)}return this.#a}getHitArea(){return this.#d}async setDialogVisible(t){t?await this.#x():this.#y()}async#H(t){if(t.stopPropagation(),t instanceof PointerEvent&&""===t.pointerType)return;const e=this.#A(t),o=this.#f(t);if(!e)if("pointermove"!==t.type)this.dispatchEvent(new ClickOutsideDialogEvent);else{if(o)return;this.dispatchEvent(new PointerLeftDialogEvent)}}#A(t){const e=this.#g,o="bottom"===this.bestVerticalPosition?20:-20,i=t.pageX>=e.left&&t.pageX<=e.left+e.width,n=t.pageY>=e.top+o&&t.pageY<=e.top+e.height+o;return i&&n}#f(t){const e=this.#d,o=t.pageX>=e.left&&t.pageX<=e.left+e.width,i=t.pageY>=e.top&&t.pageY<=e.top+e.height;return o&&i}#E(t){if(!t||t===MODAL)throw new Error("Dialog origin is null");const e=t instanceof Function?t():t;return e instanceof DOMPoint?{top:e.y,bottom:e.y,left:e.x,right:e.x}:e instanceof HTMLElement?e.getBoundingClientRect():e}#O(t,e){return e.right-t.left>t.right-e.left?"left":"right"}#B(t,e,o){const{bottom:i}=t;return i+e>o?"top":"bottom"}#I(){this.#l.origin&&(this.#h=!0,coordinator.read((()=>{const t=this.#w.getBoundingClientRect(),e=t.width,o=t.height,i=t.left,n=t.top,s=t.right;if(this.#l.origin===MODAL)return void coordinator.write((()=>{ComponentHelpers.SetCSSProperty.set(this,"--dialog-top",`${n}px`),ComponentHelpers.SetCSSProperty.set(this,"--dialog-left",`${i}px`),ComponentHelpers.SetCSSProperty.set(this,"--dialog-margin","auto"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-margin-left","auto"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-margin-bottom","auto"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-max-height",o-30+"px"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-max-width",e-30+"px"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-right",document.body.clientWidth-s+"px")}));const r=this.#l.origin,l=this.#E(r),{top:a,right:h,bottom:p,left:d}=l,g=(d+h)/2,c=h-d+10,S=document.body.clientWidth,m=this.#l.getConnectorCustomXPosition?this.#l.getConnectorCustomXPosition():g;coordinator.write((()=>{ComponentHelpers.SetCSSProperty.set(this,"--dialog-top","0");const r=this.#b();r.style.visibility="hidden",this.#h&&!r.hasAttribute("open")&&(r.showModal(),this.setAttribute("open",""),this.#h=!1);const{width:C,height:u}=r.getBoundingClientRect();if(this.#S="auto"===this.#l.horizontalAlignment?this.#O(l,t):this.#l.horizontalAlignment,this.#c="auto"===this.#l.position?this.#B(l,u,o):this.#l.position,"auto"===this.#S||"auto"===this.#c)return;this.#d.height=p-a+10*(this.showConnector?2:1),this.#d.width=c;let w=0;ComponentHelpers.SetCSSProperty.set(this,"--content-min-width",m-d+20+10+"px"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-left","auto"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-right","auto"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-margin","0");const D=this.showConnector?15:0;switch(this.#S){case"left":{const t=Math.max(d-D,i),e=s-t-30;w=m-t-5,ComponentHelpers.SetCSSProperty.set(this,"--dialog-left",`${t}px`),this.#d.x=d,ComponentHelpers.SetCSSProperty.set(this,"--dialog-max-width",`${e}px`);break}case"right":{const t=S-h,e=S-s,o=Math.max(t-D,e),n=S-o,r=n-i-30,l=Math.min(r,C);w=m-(n-l),this.#d.x=S-o-c,ComponentHelpers.SetCSSProperty.set(this,"--dialog-right",`${o}px`),ComponentHelpers.SetCSSProperty.set(this,"--dialog-max-width",`${r}px`);break}case"center":{const t=Math.min(e-30,C);let o=Math.max(g-.5*t,i);o=Math.min(o,s-t),w=m-o-5,ComponentHelpers.SetCSSProperty.set(this,"--dialog-left",`${o}px`),this.#d.x=g-.5*c,ComponentHelpers.SetCSSProperty.set(this,"--dialog-max-width",e-30+"px");break}default:Platform.assertNever(this.#S,`Unknown alignment type: ${this.#S}`)}const v=this.showConnector?10:0,P=w-10,b=w+10;let[x,y,H,A,f,E,O,B,I]=["","","","","","","","","",""];switch(this.#c){case"top":{const t="calc(100% - 10px)";this.#l.showConnector&&(x="0 0",y="100% 0",H=`100% calc(${t} - 2px)`,A=`calc(100% - 2px) ${t}`,f=`${P}px ${t}`,E=`${w}px 100%`,O=`${b}px ${t}`,B=`2px ${t}`,I=`0 calc(${t} - 2px)`),ComponentHelpers.SetCSSProperty.set(this,"--content-padding-bottom",10+(this.#l.showConnector?10:0)+"px"),ComponentHelpers.SetCSSProperty.set(this,"--content-padding-top","10px"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-top","0"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-margin","auto"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-margin-bottom",innerHeight-a+"px"),this.#d.y=a-20,ComponentHelpers.SetCSSProperty.set(this,"--dialog-offset-y","20px"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-max-height",o-(innerHeight-a)-30-v+"px");break}case"bottom":this.#l.showConnector&&(x="0 12px",y="2px 10px",H=`${P}px 10px`,A=`${w}px 0`,f=`${b}px 10px`,E="calc(100% - 2px) 10px",O="100% 12px",B="100% 100%",I="0 100%"),ComponentHelpers.SetCSSProperty.set(this,"--content-padding-top",10+(this.#l.showConnector?10:0)+"px"),ComponentHelpers.SetCSSProperty.set(this,"--content-padding-bottom","10px"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-top",`${p}px`),this.#d.y=a,ComponentHelpers.SetCSSProperty.set(this,"--dialog-offset-y","-20px"),ComponentHelpers.SetCSSProperty.set(this,"--dialog-max-height",o-(p-n)-30-v+"px");break;default:Platform.assertNever(this.#c,`Unknown position type: ${this.#c}`)}const L=[x,y,H,A,f,E,O,B,I].join();ComponentHelpers.SetCSSProperty.set(this,"--content-clip-path",L),r.close(),r.style.visibility=""}))})))}async#x(){if(!IS_DIALOG_SUPPORTED)return;if(this.#h||this.hasAttribute("open"))return;this.#h=!0,this.#I(),await coordinator.done(),this.#h=!1;const t=this.#b();t.hasAttribute("open")||t.showModal(),this.#l.dialogShownCallback&&await this.#l.dialogShownCallback(),this.#u()}#r(t){!this.#A(t)&&this.#l.closeOnScroll&&this.#b().hasAttribute("open")&&(this.#y(),this.dispatchEvent(new ForcedDialogClose))}#v(t){this.#b().hasAttribute("open")&&this.#l.closeOnESC&&t.key===Platform.KeyboardUtilities.ESCAPE_KEY&&(t.stopPropagation(),t.preventDefault(),this.#y(),this.dispatchEvent(new ForcedDialogClose))}#L(t){t.stopPropagation(),t.preventDefault(),this.#b().hasAttribute("open")&&this.#l.closeOnESC&&this.dispatchEvent(new ForcedDialogClose)}#n(){this.#a?.hasAttribute("open")&&this.#w!==document.body&&(this.#y(),this.dispatchEvent(new ForcedDialogClose))}#y(){!this.#p&&this.#b().hasAttribute("open")&&(this.#p=!0,coordinator.write((()=>{this.#d.width=0,this.removeAttribute("open"),this.#b().close(),this.#p=!1})))}getDialogBounds(){return this.#g}#o(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("Dialog render was not scheduled");IS_DIALOG_SUPPORTED?LitHtml.render(LitHtml.html`
      <dialog @click=${this.#H} @pointermove=${this.#H} @cancel=${this.#L}>
        <div id="content-wrap">
          <div id="content">
            <slot></slot>
          </div>
        </div>
      </dialog>
    `,this.#t,{host:this}):LitHtml.render(LitHtml.html`
        <slot></slot>
      `,this.#t,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-dialog",Dialog);export class PointerLeftDialogEvent extends Event{static eventName="pointerleftdialog";constructor(){super(PointerLeftDialogEvent.eventName,{bubbles:!0,composed:!0})}}export class ClickOutsideDialogEvent extends Event{static eventName="clickoutsidedialog";constructor(){super(ClickOutsideDialogEvent.eventName,{bubbles:!0,composed:!0})}}export class ForcedDialogClose extends Event{static eventName="forceddialogclose";constructor(){super(ForcedDialogClose.eventName,{bubbles:!0,composed:!0})}}