lil-xgui/dist/lil-xgui.min.js

ultralight eXtended wrapper for lil-gui (icons, multicontrol rows, accordion, filter, lots new controls ...).

var c=`.lil-gui {
	--background-color: #e6e6f6;
	--text-color: #000000;
	--title-background-color: #9caaca;
	--title-text-color: #0b0d3d;
	--widget-color: #d1dae8;
	--hover-color: #bae1fc;
	--focus-color: #efb78c;
	--number-color: #5b1a1a;
	--string-color: #727b32;
	--font-size: 11px;
	--padding: 2px;
	--spacing: 3px;
	--widget-height: 24px;
	--name-width: 5%;
	--slider-input-width: 33%;
	--slider-input-min-width: 30px;
	--color-input-width: 80%;
	--folder-indent: 12px;
	--widget-padding: 0 0 0 5px;
	--widget-border-radius: 8px;
	--scrollbar-width: 12px;	
}

.lil-gui .remove-bar {
    &::before { content: none; }
}

.lil-gui .controller .contexmenu {
    display: flex;
    justify-content: flex-start;
}
    
.lil-gui .grow-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 18px;
    overflow: hidden;
    transition: width 0.3s ease-in-out;
}

.lil-gui .grow-wrapper:focus-within {
    width: 100%;
}

.lil-gui .grow-wrapper input {
    padding-left: 18px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lil-gui .grow-wrapper:focus-within input {
    opacity: 1;
    pointer-events: auto;
}

.lil-gui .grow-wrapper .grow-icon {
    position: absolute;
    left: var(--padding);
}
`;import{GUI as m,Controller as r}from"lil-gui";function f(){if(!document.querySelector("script[src*=iconify]")){let n=document.createElement("script");n.src="https://code.iconify.design/2/2.1.2/iconify.min.js",n.defer=!0,document.head.appendChild(n)}}function a(n){let t=document.createElement("div");return n.parentElement.replaceChild(t,n),t.style.display="flex",t.style.gap="var(	--padding, 2px)",t.appendChild(n),t}r.prototype.icon=function(n,t,i){let e=this.parent._createIcon(n,t,i);return e&&this.$name.prepend(e),this};r.prototype.name=function(n){return this._name=n,(this.$name.lastChild?this.$name.lastChild:this.$name).textContent=n,this};r.prototype.append=function(n,t,...i){this.$multi||(this.$multi=a(this.domElement));let e=this.parent.add(n,t,...i);return e._beside=this,this.$multi.appendChild(e.domElement),e};r.prototype._show=function(n){n=n??!this._hidden,this.domElement.style.display=n?"flex":"none"};r.prototype._grow=function(n){let t=document.createElement("div");t.classList.add("grow-wrapper");let i=document.createElement("div");i.classList.add("grow-icon"),i.appendChild(this.parent._createIcon(n)),t.append(i,this.$widget.lastChild),this.$widget.parentElement.replaceChild(t,this.$widget)};var d=class n extends m{constructor(t={}){t.closeFolders=t.mode==="accordion"?!0:t.closeFolders,t.autoPlace=t.mode==="contextmenu"?!1:t.autoPlace,super({...t}),this.$multi=a(this.$title),this.$multi.classList.add("title"),this.$title.classList.add("remove-bar"),t.icon&&this.icon(t.icon),this===this.root?(this.mode=t.mode||"",t.extensions&&t.extensions.includes("filter")&&(this.controlFilter=this._addControlFilter()),this.mode==="contextmenu"&&this._installContextMenu()):this.root.mode=="accordion"&&this.$title.addEventListener("click",()=>{this._hideSibling()})}_hideSibling(t=this){t.parent.children.forEach(i=>{i!==t&&!i._beside&&(t._closed?i.show():i.hide())})}_createIcon(t,i,e){if(this.root.iconSet==null){f();let o=t.lastIndexOf(":"),s=o>0?t.substring(0,o+1):"mdi:";this.root.iconSet=s.indexOf(":")<s.length-1?s.slice(0,-1):s,o>0&&(t=t.substring(o+1));let l=getComputedStyle(this.root.domElement);this.root.iconSize=l.getPropertyValue("--icon-size")||parseInt(l.getPropertyValue("--font-size"))+5+"px",this.root.iconColor=l.getPropertyValue("--icon-color")||l.getPropertyValue("--text-color")||"#323275"}if(t){let o=document.createElement("span");return o.classList.add("iconify"),o.setAttribute("data-icon",t.includes(":")?t:`${this.root.iconSet}${t}`),o.style.fontSize=i||this.root.iconSize,o.style.color=e||this.root.iconColor,o.style.marginRight="var( --padding, 2px)",o}}icon(t,i,e){let o=this._createIcon(t,i,e);return o&&this.$title.prepend(o),this}openCloseAll(t=this._closed){return this.foldersRecursive().forEach(i=>{i.open(t)}),this.open(t)}_open(t){t=t??!this._closed,this.$multi.setAttribute("aria-expanded",t),this.domElement.classList.toggle("closed",!t)}_show(t){t==null?(this.$multi.style.display="flex",this.show(!this._hidden)):this.domElement.style.display=t?"":"none"}_addControlFilter(){this.filter="";let t=this.append(this,"filter","search","mdi:search","hidden").name("").onChange(()=>{this._applyFilter()});return this.$children.addEventListener("click",i=>{if(this.root.filter==="")return;let e=i.target.closest(".lil-gui");this.foldersRecursive().forEach(o=>{if(o.domElement===e)for(t.setValue("");o.parent;)o.open(),o.show(),this.root.mode=="accordion"&&this._hideSibling(o),o=o.parent})}),t}_applyFilter(){let t=this.filter.toLowerCase();this.controllersRecursive().forEach(i=>{let e=String(i._name).toLowerCase().includes(t)||String(i.getValue()).toLowerCase().includes(t);i._show(t!=""?e:null)}),this.foldersRecursive().forEach(i=>{i._show(t!=""?!0:null),i._open(t!=""?!0:null);let e=i.$title.textContent.toLowerCase().includes(t);i.$multi.style.display=e?"flex":"none"})}add(t,i,...e){let o,s;typeof e[0]=="string"&&(o=e.shift(),Object(e[0])===e[0]&&(s=e.shift()));let l=super.add(t,i,...e);return typeof o=="string"&&(l.$widget.lastChild.setAttribute("type",o),Object(s)===s&&Object.entries(s).forEach(([h,u])=>{l.$widget.lastChild.setAttribute(h,u)}),typeof e[0]=="string"&&(e[1]==="hidden"?l._grow(e[0]):l.icon(e[0]))),t===this.folders&&i==="length"&&(this.countFolder=l),this.root.mode==="contextmenu"&&l.$name&&l.$name.classList.add("contexmenu"),l}append(t,i,...e){var o=this.add(t,i,...e);return this.$multi.appendChild(o.domElement),o._beside=this,o}addFolder(t,i={}){let e=new n({parent:this,title:t,...i});return this.root._closeFolders&&e.close(),this.countFolder&&this.countFolder.updateDisplay(),e}place(t,i){let e=this.root.domElement;document.body.appendChild(e),e.style.display="block";let o=e.getBoundingClientRect();e.style.left=`${Math.min(t,window.innerWidth-o.width-5)}px`,e.style.top=`${Math.min(i,window.innerHeight-o.height-5)}px`,e.style.position="absolute",e.style.zIndex="9999"}_installContextMenu(){this.$multi.style.display="none",document.addEventListener("contextmenu",t=>{t.preventDefault(),t.target.closest(".lil-gui")||this.place(t.clientX,t.clientY)}),this.root._hideContextMenu=t=>{this.root.domElement.contains(t.target)||this.root.hide()},window.addEventListener("click",this.root._hideContextMenu)}};function g(){if(document.querySelector("#xgui-styles"))return;let n=document.createElement("style");n.id="xgui-styles",n.innerHTML=c,document.head.appendChild(n)}g();export{d as XGUI};