@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 6.68 kB
JavaScript
import*as Platform from"../../core/platform/platform.js";import*as Utils from"./utils/utils.js";import{Icon}from"./Icon.js";import{deepElementFromEvent}from"./UIUtils.js";import{Widget}from"./Widget.js";import glassPaneStyles from"./glassPane.css.legacy.js";export class GlassPane{widgetInternal;element;contentElement;arrowElement;onMouseDownBound;onClickOutsideCallback;maxSize;positionX;positionY;anchorBox;anchorBehavior;sizeBehavior;marginBehavior;#t=!1;constructor(){this.widgetInternal=new Widget(!0),this.widgetInternal.markAsRoot(),this.element=this.widgetInternal.element,this.contentElement=this.widgetInternal.contentElement,this.arrowElement=Icon.create("","arrow hidden"),this.element.shadowRoot&&this.element.shadowRoot.appendChild(this.arrowElement),this.registerRequiredCSS(glassPaneStyles),this.setPointerEventsBehavior("PierceGlassPane"),this.onMouseDownBound=this.onMouseDown.bind(this),this.onClickOutsideCallback=null,this.maxSize=null,this.positionX=null,this.positionY=null,this.anchorBox=null,this.anchorBehavior="PreferTop",this.sizeBehavior="SetExactSize",this.marginBehavior="DefaultMargin"}isShowing(){return this.widgetInternal.isShowing()}registerRequiredCSS(t){this.widgetInternal.registerRequiredCSS(t)}registerCSSFiles(t){this.widgetInternal.registerCSSFiles(t)}setDefaultFocusedElement(t){this.widgetInternal.setDefaultFocusedElement(t)}setDimmed(t){this.element.classList.toggle("dimmed-pane",t)}setPointerEventsBehavior(t){this.element.classList.toggle("no-pointer-events","BlockedByGlassPane"!==t),this.contentElement.classList.toggle("no-pointer-events","PierceContents"===t)}setOutsideClickCallback(t){this.onClickOutsideCallback=t}setMaxContentSize(t){this.maxSize=t,this.positionContent()}setSizeBehavior(t){this.sizeBehavior=t,this.positionContent()}setContentPosition(t,e){this.positionX=t,this.positionY=e,this.positionContent()}setContentAnchorBox(t){this.anchorBox=t,this.positionContent()}setAnchorBehavior(t){this.anchorBehavior=t}setMarginBehavior(t){this.marginBehavior=t,this.arrowElement.classList.toggle("hidden","Arrow"!==t)}setIgnoreLeftMargin(t){this.#t=t}show(t){this.isShowing()||(this.element.style.zIndex=""+(3e3+1e3*_panes.size),this.element.setAttribute("data-devtools-glass-pane",""),t.body.addEventListener("mousedown",this.onMouseDownBound,!0),t.body.addEventListener("pointerdown",this.onMouseDownBound,!0),this.widgetInternal.show(t.body),_panes.add(this),this.positionContent())}hide(){this.isShowing()&&(_panes.delete(this),this.element.ownerDocument.body.removeEventListener("mousedown",this.onMouseDownBound,!0),this.element.ownerDocument.body.removeEventListener("pointerdown",this.onMouseDownBound,!0),this.widgetInternal.detach())}onMouseDown(t){if(!this.onClickOutsideCallback)return;const e=deepElementFromEvent(t);e&&!this.contentElement.isSelfOrAncestor(e)&&this.onClickOutsideCallback.call(null,t)}positionContent(){if(!this.isShowing())return;const t="Arrow"===this.marginBehavior,e=t?8:"NoMargin"===this.marginBehavior?0:3,i=Utils.measuredScrollbarWidth(this.element.ownerDocument),n=10,o=_containers.get(this.element.ownerDocument);"MeasureContent"===this.sizeBehavior&&(this.contentElement.positionAt(0,0),this.contentElement.style.width="",this.contentElement.style.maxWidth="",this.contentElement.style.height="",this.contentElement.style.maxHeight="");const s=o.offsetWidth,r=o.offsetHeight;let a=s-2*e,h=r-2*e,l=e,m=e;if(this.maxSize&&(a=Math.min(a,this.maxSize.width),h=Math.min(h,this.maxSize.height)),"MeasureContent"===this.sizeBehavior){const t=this.contentElement.getBoundingClientRect(),e=h<t.height?i:0,n=a<t.width?i:0;a=Math.min(a,t.width+e),h=Math.min(h,t.height+n)}if(this.anchorBox){const i=this.anchorBox.relativeToElement(o);let c=this.anchorBehavior;if(this.arrowElement.classList.remove("arrow-none","arrow-top","arrow-bottom","arrow-left","arrow-right"),"PreferTop"===c||"PreferBottom"===c){const d=i.y-2*e,w=r-i.y-i.height-2*e;let g;"PreferTop"===c&&d<h&&w>d&&(c="PreferBottom"),"PreferBottom"===c&&w<h&&d>w&&(c="PreferTop");let u=!0;if("PreferTop"===c){m=Math.max(e,i.y-h-e);const t=i.y-m-e;"MeasureContent"===this.sizeBehavior?h>t&&(this.arrowElement.classList.add("arrow-none"),u=!1):h=Math.min(h,t),this.arrowElement.setIconType("mediumicon-arrow-bottom"),this.arrowElement.classList.add("arrow-bottom"),g=i.y-e}else{m=i.y+i.height+e;const t=r-m-e;"MeasureContent"===this.sizeBehavior?h>t&&(this.arrowElement.classList.add("arrow-none"),m=r-e-h,u=!1):h=Math.min(h,t),this.arrowElement.setIconType("mediumicon-arrow-top"),this.arrowElement.classList.add("arrow-top"),g=i.y+i.height+e}const p=Math.min(i.x,s-a-e);if(l=Math.max(e,p),this.#t&&e>p&&(l=0),u?t&&l-n>=e&&(l-=n):l=Math.min(l+n,s-a-e),a=Math.min(a,s-l-e),20>=a)this.arrowElement.classList.add("arrow-none");else{let t=i.x+Math.min(50,Math.floor(i.width/2));t=Platform.NumberUtilities.clamp(t,l+n,l+a-n),this.arrowElement.positionAt(t,g,o)}}else{const d=i.x-2*e,w=s-i.x-i.width-2*e;let g;"PreferLeft"===c&&d<a&&w>d&&(c="PreferRight"),"PreferRight"===c&&w<a&&d>w&&(c="PreferLeft");let u=!0;if("PreferLeft"===c){l=Math.max(e,i.x-a-e);const t=i.x-l-e;"MeasureContent"===this.sizeBehavior?a>t&&(this.arrowElement.classList.add("arrow-none"),u=!1):a=Math.min(a,t),this.arrowElement.setIconType("mediumicon-arrow-right"),this.arrowElement.classList.add("arrow-right"),g=i.x-e}else{l=i.x+i.width+e;const t=s-l-e;"MeasureContent"===this.sizeBehavior?a>t&&(this.arrowElement.classList.add("arrow-none"),l=s-e-a,u=!1):a=Math.min(a,t),this.arrowElement.setIconType("mediumicon-arrow-left"),this.arrowElement.classList.add("arrow-left"),g=i.x+i.width+e}if(m=Math.max(e,Math.min(i.y,r-h-e)),u?t&&m-n>=e&&(m-=n):m=Math.min(m+n,r-h-e),h=Math.min(h,r-m-e),20>=h)this.arrowElement.classList.add("arrow-none");else{let t=i.y+Math.min(50,Math.floor(i.height/2));t=Platform.NumberUtilities.clamp(t,m+n,m+h-n),this.arrowElement.positionAt(g,t,o)}}}else l=null!==this.positionX?this.positionX:(s-a)/2,m=null!==this.positionY?this.positionY:(r-h)/2,a=Math.min(a,s-l-e),h=Math.min(h,r-m-e),this.arrowElement.classList.add("arrow-none");this.contentElement.style.width=a+"px","SetExactWidthMaxHeight"===this.sizeBehavior?this.contentElement.style.maxHeight=h+"px":this.contentElement.style.height=h+"px",this.contentElement.positionAt(l,m,o),this.widgetInternal.doResize()}widget(){return this.widgetInternal}static setContainer(t){_containers.set(t.ownerDocument,t),GlassPane.containerMoved(t)}static container(t){return _containers.get(t)}static containerMoved(t){for(const e of _panes)e.isShowing()&&e.element.ownerDocument===t.ownerDocument&&e.positionContent()}}const _containers=new Map,_panes=new Set;export const GlassPanePanes=_panes;