perfect-gui 4.11.2 → 4.11.4

package/dist/perfect-gui.mjs

@@ -438,20 +438,15 @@ const k = (
         position: relative;
         background: #434343;
         overflow: auto;
-        margin-bottom: 3px;
+        margin-bottom: 2px;
         display: flex;
         flex-wrap: wrap;
         border: 1px solid grey;
-        padding: 0 3px 3px 3px;
+        padding: 0 3px 0 3px;
         border-radius: var(--main-border-radius);
         box-sizing: border-box;
     }
     
-    .p-gui__folder:last-of-type {
-        margin-bottom: 0;
-        border-bottom: none;
-    }
-    
     .p-gui__folder--first {
         margin-top: 0;
     }
@@ -705,7 +700,7 @@ class A {
     this.imageContainer = null;
     const s = document.createElement("div");
     s.className = "p-gui__button", s.textContent = i, a && s.setAttribute("title", a), s.addEventListener("click", () => {
-      this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate(), t && t();
+      t && t(), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
     }), this.wrapper.append(s), typeof e.color == "string" && (s.style.setProperty("--color-accent", e.color), s.style.setProperty("--color-accent-hover", e.hoverColor || e.color));
   }
   image(e = {}, t) {
@@ -835,7 +830,7 @@ class A {
     }), h.addEventListener("pointerup", () => {
       x = !1;
     }), h.addEventListener("pointermove", (b) => {
-      x && (r[p] = parseFloat(this._mapLinear(b.offsetX, 0, h.clientWidth, a, s).toFixed(2)), d[c] = parseFloat(this._mapLinear(b.offsetY, 0, h.clientHeight, n, o).toFixed(2)), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate(), t && t(r[p], r[c]));
+      x && (r[p] = parseFloat(this._mapLinear(b.offsetX, 0, h.clientWidth, a, s).toFixed(2)), d[c] = parseFloat(this._mapLinear(b.offsetY, 0, h.clientHeight, n, o).toFixed(2)), t && t(r[p], r[c]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate());
     });
     const v = document.createElement("div");
     v.className = "p-gui__vector2-line p-gui__vector2-line-x", h.append(v);

package/dist/perfect-gui.umd.js

@@ -333,20 +333,15 @@
         position: relative;
         background: #434343;
         overflow: auto;
-        margin-bottom: 3px;
+        margin-bottom: 2px;
         display: flex;
         flex-wrap: wrap;
         border: 1px solid grey;
-        padding: 0 3px 3px 3px;
+        padding: 0 3px 0 3px;
         border-radius: var(--main-border-radius);
         box-sizing: border-box;
     }
     
-    .p-gui__folder:last-of-type {
-        margin-bottom: 0;
-        border-bottom: none;
-    }
-    
     .p-gui__folder--first {
         margin-top: 0;
     }
@@ -534,4 +529,4 @@
             ${this.screenCorner.y=="top"?"":"top: auto; bottom: 0;"}
             ${this.backgroundColor?"background: "+this.backgroundColor+";":""}
             opacity: ${this.opacity};
-        }`)}_folderConstructor(e){this.wrapper=e.wrapper,this.isFolder=!0,this.parent=e.parent,this.firstParent=e.firstParent}_parseScreenCorner(e){let t={x:"right",y:"top"};return e==null||(typeof e!="string"&&console.error("[perfect-gui] Position must be a string."),e.includes("left")&&(t.x="left"),e.includes("bottom")&&(t.y="bottom")),t}_getScrollbarWidth(e){return e===document.body?window.innerWidth-document.documentElement.clientWidth:e.offsetWidth-e.clientWidth}_handleResize(){if(this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),this.initMaxHeight&&(this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.wrapper.style.maxHeight=this.maxHeight+"px",this.hasBeenDragged)return;let e=this._getScrollbarWidth(this.container);if(this.xOffset=this.screenCorner.x=="left"?0:this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);for(let i=0;i<t.length&&!(parseInt(t[i].id.replace("p-gui-",""))>this.instanceId);i++)this.screenCorner.y==t[i].dataset.cornerY&&(this.screenCorner.x=="left"&&t[i].dataset.cornerX=="left"?this.xOffset+=t[i].offsetWidth:this.screenCorner.x=="right"&&t[i].dataset.cornerX=="right"&&(this.xOffset-=t[i].offsetWidth))}this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this.wrapper.style.transform=`translate3d(${this.position.x}px, ${this.position.y}px, 0)`}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=document.createElement("div"),this.wrapper.id="p-gui-"+this.instanceId,this.wrapper.className="p-gui",this.container.append(this.wrapper),this.header=document.createElement("div"),this.header.className="p-gui__header",this.header.textContent=this.name,this.header.style=`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`,this.wrapper.append(this.header);const e=document.createElement("div");e.className="p-gui__header-close",e.addEventListener("click",this.toggleClose.bind(this)),this.header.append(e)}button(e,t){let i="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?i=e.name==""?" ":e.name:i=" ":i=e==""?" ":e;const a=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;this.imageContainer=null;const s=document.createElement("div");s.className="p-gui__button",s.textContent=i,a&&s.setAttribute("title",a),s.addEventListener("click",()=>{this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate(),t&&t()}),this.wrapper.append(s),typeof e.color=="string"&&(s.style.setProperty("--color-accent",e.color),s.style.setProperty("--color-accent-hover",e.hoverColor||e.color))}image(e={},t){if(typeof e!="object")throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);let i;if(typeof e.path=="string")i=e.path;else throw typeof e.path==null?Error("[GUI] image() path must be provided."):Error("[GUI] image() path must be a string.");let a=i.replace(/^.*[\\\/]/,""),s;e.name==null?s=a:s=typeof e.name=="string"&&e.name||" ";const o=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?s:null,n=e.selected===!0,r=e.selectionBorder!==!1;let p="";e.width&&(typeof e.width=="number"&&(e.width+="px"),p+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),p+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const l=document.createElement("div");l.className="p-gui__image",l.style="background-image: url("+i+"); "+p,o&&l.setAttribute("title",o),this.imageContainer.append(l),n&&r&&l.classList.add("p-gui__image--selected");const d=document.createElement("div");return d.className="p-gui__image-text",d.textContent=s,l.append(d),l.addEventListener("click",()=>{let c=l.parentElement.querySelectorAll(".p-gui__image--selected");for(let f=0;f<c.length;f++)c[f].classList.remove("p-gui__image--selected");r&&l.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:i,text:s}),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),l}slider(e={},t){const i=new v(this,e,t);this.wrapper.append(i)}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",a=!1,s=null,o=e.obj,n=e.prop,r=typeof e.value=="boolean"?e.value:null;if(r!==null)(n!=null||o!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(n!=null&&o!=null){if(typeof n!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof n}.`);if(typeof o!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof o}.`);i==" "&&(i=n),s=this.propReferences.push(o[n])-1,a=!0}else(n!=null&&o==null||n==null&&o==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');const p=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;this.imageContainer=null;const l=document.createElement("div");l.textContent=i,l.className="p-gui__switch",p&&l.setAttribute("title",p),this.wrapper.append(l),l.addEventListener("click",f=>{const u=f.target.childNodes[1];let g=!0;u.classList.contains("p-gui__switch-checkbox--active")&&(g=!1),u.classList.toggle("p-gui__switch-checkbox--active"),a?o[n]=g:typeof t=="function"&&t(g),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let d=(()=>a?o[n]?" p-gui__switch-checkbox--active":"":r?" p-gui__switch-checkbox--active":"")();const c=document.createElement("div");c.className="p-gui__switch-checkbox"+d,l.append(c),a&&Object.defineProperty(o,n,{set:f=>{this.propReferences[s]=f,f?c.classList.add("p-gui__switch-checkbox--active"):c.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(f)},get:()=>this.propReferences[s]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"?e.name:" ",a=!1,s=null,o=e.obj,n=e.prop,r=Array.isArray(e.values)?e.values:null,p,l=typeof r[0]!="string";const d=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&o===void 0&&n===void 0)(n!=null||o!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),p=(()=>{if(!r)return null;if(typeof e.value=="string")return r.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(n!=null&&o!=null){if(typeof n!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof n}.`);if(typeof o!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof o}.`);p=(()=>{if(!r)return null;if(typeof o[n]=="string")return l?r.find(u=>u.value===o[n]).value:r.indexOf(o[n]);if(typeof o[n]=="number")return l?r.find(u=>u.value===o[n]).value:o[n]})(),s=this.propReferences.push(o[n])-1,a=!0}else(n!=null&&o==null||n==null&&o==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let c=document.createElement("div");c.className="p-gui__list",c.textContent=i,d&&c.setAttribute("title",d),this.wrapper.append(c);let f=document.createElement("select");c.append(f),f.className="p-gui__list-dropdown",f.addEventListener("change",u=>{a?o[n]=u.target.value:t&&t(u.target.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),r&&r.forEach((u,g)=>{const _=l?u.name:u,h=l?u.value:u;let m=document.createElement("option");m.setAttribute("value",h),m.textContent=_,f.append(m),(!l&&p==g||l&&p==h)&&m.setAttribute("selected","")}),a&&Object.defineProperty(o,n,{set:u=>{let g,_,h;l?(h=r.find(y=>y.value==u),_=(h==null?void 0:h.value)||r[0].value,g=r.indexOf(h)):(typeof u=="string"&&(g=r.indexOf(u),_=u),typeof u=="number"&&(g=u,_=r[u])),this.propReferences[s]=l?_:u;const m=f.querySelector("[selected]");m&&m.removeAttribute("selected"),f.querySelectorAll("option")[g].setAttribute("selected",""),typeof t=="function"&&t(l?h:_,g)},get:()=>this.propReferences[s]})}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,s=e.x.max??1,o=e.y.min??0,n=e.y.max??1,r=e.x.obj,p=e.x.prop,l=this.propReferences.push(r[p])-1,d=e.y.obj,c=e.y.prop,f=this.propReferences.push(d[c])-1,u=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;t=typeof t=="function"?t:null,this.imageContainer=null;const g=document.createElement("div");g.className="p-gui__vector2",g.textContent=i,u&&g.setAttribute("title",u),this.wrapper.append(g);const _=document.createElement("div");_.className="p-gui__vector-value",_.textContent=r[p]+", "+d[c],g.append(_);const h=document.createElement("div");h.className="p-gui__vector2-area",g.append(h),h.addEventListener("click",b=>{r[p]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,s).toFixed(2)),d[c]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,n,o).toFixed(2)),t&&t(r[p],r[c]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let m=!1;h.addEventListener("pointerdown",b=>{m=!0}),h.addEventListener("pointerup",()=>{m=!1}),h.addEventListener("pointermove",b=>{m&&(r[p]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,s).toFixed(2)),d[c]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,n,o).toFixed(2)),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate(),t&&t(r[p],r[c]))});const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-x",h.append(y);const k=document.createElement("div");k.className="p-gui__vector2-line p-gui__vector2-line-y",h.append(k);const x=document.createElement("div");x.className="p-gui__vector2-dot",h.append(x),x.style.left=this._mapLinear(r[p],a,s,0,h.clientWidth)+"px",x.style.top=this._mapLinear(d[c],o,n,h.clientHeight,0)+"px",Object.defineProperty(r,p,{set:b=>{this.propReferences[l]=b,x.style.left=this._mapLinear(b,a,s,0,h.clientWidth)+"px",_.textContent=String(b)+", "+d[c]},get:()=>this.propReferences[l]}),Object.defineProperty(d,c,{set:b=>{this.propReferences[f]=b,x.style.top=this._mapLinear(b,o,n,h.clientHeight,0)+"px",_.textContent=r[p]+", "+String(b)},get:()=>this.propReferences[f]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",a=!1,s=null,o=e.obj,n=e.prop,r;const p=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;if(typeof e.value=="string"&&(e.value.length!=7||e.value[0]!="#"?console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`):r=e.value),r||(r="#000000"),e.value!==void 0)(n!=null||o!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(n!=null&&o!=null){if(typeof n!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof n}.`);if(typeof o!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof o}.`);i==" "&&(i=n),s=this.propReferences.push(o[n])-1,a=!0}else(n!=null&&o==null||n==null&&o==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const l=document.createElement("div");l.className="p-gui__color",l.textContent=i,p&&l.setAttribute("title",p),this.wrapper.append(l);const d=document.createElement("input");d.className="p-gui__color-picker",d.setAttribute("type","color"),d.value=r,l.append(d),typeof t=="function"&&d.addEventListener("input",()=>{a?o[n]=d.value:typeof t=="function"&&t(d.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),a&&Object.defineProperty(o,n,{set:c=>{this.propReferences[s]=c,d.value=c,typeof t=="function"&&t(c)},get:()=>this.propReferences[s]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,i=e.name||"",a=e.color||null,s=e.maxHeight||null;this.imageContainer=null;let o="p-gui__folder";this.folders.length==0&&(o+=" p-gui__folder--first"),t&&(o+=" p-gui__folder--closed");let n=a?`background-color: ${a};`:"";n+=s?`max-height: ${s}px;`:"";const r=document.createElement("div");r.className=o,r.style=n,this.wrapper.append(r);const p=document.createElement("div");p.innerHTML=`<span class="p-gui__folder-arrow"></span>${i}`,p.className="p-gui__folder-header",r.append(p),p.addEventListener("click",()=>{r.classList.toggle("p-gui__folder--closed")});let l=new A({isFolder:!0,folderOptions:{wrapper:r,parent:this,firstParent:this.firstParent}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(s){s.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=s.clientX,e.position.prevY=s.clientY,document.addEventListener("pointermove",i)}function i(s){s.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+s.clientX-e.position.prevX,e.position.y=e.position.initY+s.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(s){document.removeEventListener("pointermove",i)}}toggleClose(){this.closed=!this.closed,this.closed?(this.previousInnerScroll=this.wrapper.scrollTop,this.wrapper.scrollTo(0,0)):this.wrapper.scrollTo(0,this.previousInnerScroll),this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,i,a,s){return a+(e-t)*(s-a)/(i-t)}}return A});
+        }`)}_folderConstructor(e){this.wrapper=e.wrapper,this.isFolder=!0,this.parent=e.parent,this.firstParent=e.firstParent}_parseScreenCorner(e){let t={x:"right",y:"top"};return e==null||(typeof e!="string"&&console.error("[perfect-gui] Position must be a string."),e.includes("left")&&(t.x="left"),e.includes("bottom")&&(t.y="bottom")),t}_getScrollbarWidth(e){return e===document.body?window.innerWidth-document.documentElement.clientWidth:e.offsetWidth-e.clientWidth}_handleResize(){if(this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),this.initMaxHeight&&(this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.wrapper.style.maxHeight=this.maxHeight+"px",this.hasBeenDragged)return;let e=this._getScrollbarWidth(this.container);if(this.xOffset=this.screenCorner.x=="left"?0:this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);for(let i=0;i<t.length&&!(parseInt(t[i].id.replace("p-gui-",""))>this.instanceId);i++)this.screenCorner.y==t[i].dataset.cornerY&&(this.screenCorner.x=="left"&&t[i].dataset.cornerX=="left"?this.xOffset+=t[i].offsetWidth:this.screenCorner.x=="right"&&t[i].dataset.cornerX=="right"&&(this.xOffset-=t[i].offsetWidth))}this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this.wrapper.style.transform=`translate3d(${this.position.x}px, ${this.position.y}px, 0)`}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=document.createElement("div"),this.wrapper.id="p-gui-"+this.instanceId,this.wrapper.className="p-gui",this.container.append(this.wrapper),this.header=document.createElement("div"),this.header.className="p-gui__header",this.header.textContent=this.name,this.header.style=`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`,this.wrapper.append(this.header);const e=document.createElement("div");e.className="p-gui__header-close",e.addEventListener("click",this.toggleClose.bind(this)),this.header.append(e)}button(e,t){let i="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?i=e.name==""?" ":e.name:i=" ":i=e==""?" ":e;const a=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;this.imageContainer=null;const s=document.createElement("div");s.className="p-gui__button",s.textContent=i,a&&s.setAttribute("title",a),s.addEventListener("click",()=>{t&&t(),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),this.wrapper.append(s),typeof e.color=="string"&&(s.style.setProperty("--color-accent",e.color),s.style.setProperty("--color-accent-hover",e.hoverColor||e.color))}image(e={},t){if(typeof e!="object")throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);let i;if(typeof e.path=="string")i=e.path;else throw typeof e.path==null?Error("[GUI] image() path must be provided."):Error("[GUI] image() path must be a string.");let a=i.replace(/^.*[\\\/]/,""),s;e.name==null?s=a:s=typeof e.name=="string"&&e.name||" ";const o=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?s:null,n=e.selected===!0,r=e.selectionBorder!==!1;let p="";e.width&&(typeof e.width=="number"&&(e.width+="px"),p+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),p+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const l=document.createElement("div");l.className="p-gui__image",l.style="background-image: url("+i+"); "+p,o&&l.setAttribute("title",o),this.imageContainer.append(l),n&&r&&l.classList.add("p-gui__image--selected");const d=document.createElement("div");return d.className="p-gui__image-text",d.textContent=s,l.append(d),l.addEventListener("click",()=>{let c=l.parentElement.querySelectorAll(".p-gui__image--selected");for(let f=0;f<c.length;f++)c[f].classList.remove("p-gui__image--selected");r&&l.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:i,text:s}),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),l}slider(e={},t){const i=new v(this,e,t);this.wrapper.append(i)}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",a=!1,s=null,o=e.obj,n=e.prop,r=typeof e.value=="boolean"?e.value:null;if(r!==null)(n!=null||o!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(n!=null&&o!=null){if(typeof n!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof n}.`);if(typeof o!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof o}.`);i==" "&&(i=n),s=this.propReferences.push(o[n])-1,a=!0}else(n!=null&&o==null||n==null&&o==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');const p=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;this.imageContainer=null;const l=document.createElement("div");l.textContent=i,l.className="p-gui__switch",p&&l.setAttribute("title",p),this.wrapper.append(l),l.addEventListener("click",f=>{const u=f.target.childNodes[1];let g=!0;u.classList.contains("p-gui__switch-checkbox--active")&&(g=!1),u.classList.toggle("p-gui__switch-checkbox--active"),a?o[n]=g:typeof t=="function"&&t(g),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let d=(()=>a?o[n]?" p-gui__switch-checkbox--active":"":r?" p-gui__switch-checkbox--active":"")();const c=document.createElement("div");c.className="p-gui__switch-checkbox"+d,l.append(c),a&&Object.defineProperty(o,n,{set:f=>{this.propReferences[s]=f,f?c.classList.add("p-gui__switch-checkbox--active"):c.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(f)},get:()=>this.propReferences[s]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"?e.name:" ",a=!1,s=null,o=e.obj,n=e.prop,r=Array.isArray(e.values)?e.values:null,p,l=typeof r[0]!="string";const d=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&o===void 0&&n===void 0)(n!=null||o!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),p=(()=>{if(!r)return null;if(typeof e.value=="string")return r.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(n!=null&&o!=null){if(typeof n!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof n}.`);if(typeof o!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof o}.`);p=(()=>{if(!r)return null;if(typeof o[n]=="string")return l?r.find(u=>u.value===o[n]).value:r.indexOf(o[n]);if(typeof o[n]=="number")return l?r.find(u=>u.value===o[n]).value:o[n]})(),s=this.propReferences.push(o[n])-1,a=!0}else(n!=null&&o==null||n==null&&o==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let c=document.createElement("div");c.className="p-gui__list",c.textContent=i,d&&c.setAttribute("title",d),this.wrapper.append(c);let f=document.createElement("select");c.append(f),f.className="p-gui__list-dropdown",f.addEventListener("change",u=>{a?o[n]=u.target.value:t&&t(u.target.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),r&&r.forEach((u,g)=>{const _=l?u.name:u,h=l?u.value:u;let x=document.createElement("option");x.setAttribute("value",h),x.textContent=_,f.append(x),(!l&&p==g||l&&p==h)&&x.setAttribute("selected","")}),a&&Object.defineProperty(o,n,{set:u=>{let g,_,h;l?(h=r.find(y=>y.value==u),_=(h==null?void 0:h.value)||r[0].value,g=r.indexOf(h)):(typeof u=="string"&&(g=r.indexOf(u),_=u),typeof u=="number"&&(g=u,_=r[u])),this.propReferences[s]=l?_:u;const x=f.querySelector("[selected]");x&&x.removeAttribute("selected"),f.querySelectorAll("option")[g].setAttribute("selected",""),typeof t=="function"&&t(l?h:_,g)},get:()=>this.propReferences[s]})}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,s=e.x.max??1,o=e.y.min??0,n=e.y.max??1,r=e.x.obj,p=e.x.prop,l=this.propReferences.push(r[p])-1,d=e.y.obj,c=e.y.prop,f=this.propReferences.push(d[c])-1,u=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;t=typeof t=="function"?t:null,this.imageContainer=null;const g=document.createElement("div");g.className="p-gui__vector2",g.textContent=i,u&&g.setAttribute("title",u),this.wrapper.append(g);const _=document.createElement("div");_.className="p-gui__vector-value",_.textContent=r[p]+", "+d[c],g.append(_);const h=document.createElement("div");h.className="p-gui__vector2-area",g.append(h),h.addEventListener("click",b=>{r[p]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,s).toFixed(2)),d[c]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,n,o).toFixed(2)),t&&t(r[p],r[c]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let x=!1;h.addEventListener("pointerdown",b=>{x=!0}),h.addEventListener("pointerup",()=>{x=!1}),h.addEventListener("pointermove",b=>{x&&(r[p]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,s).toFixed(2)),d[c]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,n,o).toFixed(2)),t&&t(r[p],r[c]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate())});const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-x",h.append(y);const k=document.createElement("div");k.className="p-gui__vector2-line p-gui__vector2-line-y",h.append(k);const m=document.createElement("div");m.className="p-gui__vector2-dot",h.append(m),m.style.left=this._mapLinear(r[p],a,s,0,h.clientWidth)+"px",m.style.top=this._mapLinear(d[c],o,n,h.clientHeight,0)+"px",Object.defineProperty(r,p,{set:b=>{this.propReferences[l]=b,m.style.left=this._mapLinear(b,a,s,0,h.clientWidth)+"px",_.textContent=String(b)+", "+d[c]},get:()=>this.propReferences[l]}),Object.defineProperty(d,c,{set:b=>{this.propReferences[f]=b,m.style.top=this._mapLinear(b,o,n,h.clientHeight,0)+"px",_.textContent=r[p]+", "+String(b)},get:()=>this.propReferences[f]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",a=!1,s=null,o=e.obj,n=e.prop,r;const p=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;if(typeof e.value=="string"&&(e.value.length!=7||e.value[0]!="#"?console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`):r=e.value),r||(r="#000000"),e.value!==void 0)(n!=null||o!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(n!=null&&o!=null){if(typeof n!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof n}.`);if(typeof o!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof o}.`);i==" "&&(i=n),s=this.propReferences.push(o[n])-1,a=!0}else(n!=null&&o==null||n==null&&o==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const l=document.createElement("div");l.className="p-gui__color",l.textContent=i,p&&l.setAttribute("title",p),this.wrapper.append(l);const d=document.createElement("input");d.className="p-gui__color-picker",d.setAttribute("type","color"),d.value=r,l.append(d),typeof t=="function"&&d.addEventListener("input",()=>{a?o[n]=d.value:typeof t=="function"&&t(d.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),a&&Object.defineProperty(o,n,{set:c=>{this.propReferences[s]=c,d.value=c,typeof t=="function"&&t(c)},get:()=>this.propReferences[s]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,i=e.name||"",a=e.color||null,s=e.maxHeight||null;this.imageContainer=null;let o="p-gui__folder";this.folders.length==0&&(o+=" p-gui__folder--first"),t&&(o+=" p-gui__folder--closed");let n=a?`background-color: ${a};`:"";n+=s?`max-height: ${s}px;`:"";const r=document.createElement("div");r.className=o,r.style=n,this.wrapper.append(r);const p=document.createElement("div");p.innerHTML=`<span class="p-gui__folder-arrow"></span>${i}`,p.className="p-gui__folder-header",r.append(p),p.addEventListener("click",()=>{r.classList.toggle("p-gui__folder--closed")});let l=new A({isFolder:!0,folderOptions:{wrapper:r,parent:this,firstParent:this.firstParent}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(s){s.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=s.clientX,e.position.prevY=s.clientY,document.addEventListener("pointermove",i)}function i(s){s.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+s.clientX-e.position.prevX,e.position.y=e.position.initY+s.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(s){document.removeEventListener("pointermove",i)}}toggleClose(){this.closed=!this.closed,this.closed?(this.previousInnerScroll=this.wrapper.scrollTop,this.wrapper.scrollTo(0,0)):this.wrapper.scrollTo(0,this.previousInnerScroll),this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,i,a,s){return a+(e-t)*(s-a)/(i-t)}}return A});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "4.11.2",
+  "version": "4.11.4",
   "description": "GUI for JavaScript",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -229,14 +229,15 @@ export default class GUI {
             el.setAttribute('title', tooltip);
         }
         el.addEventListener('click', () => {
+            if (callback) {
+                callback();
+            }
+
             if (this.onUpdate) {
                 this.onUpdate();
             } else if (this.isFolder && this.firstParent.onUpdate) {
                 this.firstParent.onUpdate();
             }
-            if (callback) {
-                callback();
-            }
         });
         this.wrapper.append(el);
 
@@ -693,15 +694,15 @@ export default class GUI {
                 objectX[propX] = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX).toFixed(2));
                 objectY[propY] = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY).toFixed(2));
 
+                if (callback) {
+                    callback(objectX[propX], objectX[propY]);
+                }
+
                 if (this.onUpdate) {
                     this.onUpdate();
                 } else if (this.isFolder && this.firstParent.onUpdate) {
                     this.firstParent.onUpdate();
                 }
-
-                if (callback) {
-                    callback(objectX[propX], objectX[propY]);
-                }
             }
         });
 

package/src/styles/_folder.js

@@ -4,20 +4,15 @@ export default /* css */ `
         position: relative;
         background: #434343;
         overflow: auto;
-        margin-bottom: 3px;
+        margin-bottom: 2px;
         display: flex;
         flex-wrap: wrap;
         border: 1px solid grey;
-        padding: 0 3px 3px 3px;
+        padding: 0 3px 0 3px;
         border-radius: var(--main-border-radius);
         box-sizing: border-box;
     }
     
-    .p-gui__folder:last-of-type {
-        margin-bottom: 0;
-        border-bottom: none;
-    }
-    
     .p-gui__folder--first {
         margin-top: 0;
     }