perfect-gui 4.6.3 → 4.6.6

package/dist/perfect-gui.mjs

@@ -276,6 +276,7 @@ function w(m) {
         cursor: pointer;
         border-radius: 3px;
         border: 1px solid var(--color-border-2);
+        outline: none;
     }
     
     .p-gui__list-dropdown {
@@ -365,9 +366,9 @@ function w(m) {
         margin-bottom: 3px;
         display: flex;
         flex-wrap: wrap;
-        border-left: 3px solid grey;
-        border-bottom: 1px solid grey;
+        border: 1px solid grey;
         padding: 0 3px;
+        border-radius: var(--main-border-radius);
     }
     
     .p-gui__folder:last-of-type {
@@ -529,7 +530,7 @@ class b {
       for (let d = 0; d < c.length; d++)
         c[d].classList.remove("p-gui__image--selected");
       i && l.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: o, text: n });
-    }, l.path = o, l;
+    }, l;
   }
   slider(e = {}, t) {
     if (typeof e != "object")

package/dist/perfect-gui.umd.js

@@ -273,6 +273,7 @@
         cursor: pointer;
         border-radius: 3px;
         border: 1px solid var(--color-border-2);
+        outline: none;
     }
     
     .p-gui__list-dropdown {
@@ -362,9 +363,9 @@
         margin-bottom: 3px;
         display: flex;
         flex-wrap: wrap;
-        border-left: 3px solid grey;
-        border-bottom: 1px solid grey;
+        border: 1px solid grey;
         padding: 0 3px;
+        border-radius: var(--main-border-radius);
     }
     
     .p-gui__folder:last-of-type {
@@ -413,4 +414,4 @@
             transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
             ${this.screenCorner.y=="top"?"":"top: auto; bottom: 0;"}
             ${this.backgroundColor?"background: "+this.backgroundColor+";":""}
-        }`)}_folderConstructor(e){this.wrapper=e.wrapper}_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 o=0;o<t.length&&!(parseInt(t[o].id.replace("p-gui-",""))>this.instanceId);o++)this.screenCorner.y==t[o].dataset.cornerY&&(this.screenCorner.x=="left"&&t[o].dataset.cornerX=="left"?this.xOffset+=t[o].offsetWidth:this.screenCorner.x=="right"&&t[o].dataset.cornerX=="right"&&(this.xOffset-=t[o].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)`}_createElement(e){e.el=e.el||"div";var t=document.createElement(e.el);if(e.id&&(t.id=e.id),e.class&&(t.className=e.class),e.inline&&(t.style=e.inline),e.href&&(t.href=e.href),e.onclick&&(t.onclick=e.onclick),e.onchange&&(t.onchange=e.onchange),e.textContent&&(t.textContent=e.textContent),e.innerHTML&&(t.innerHTML=e.innerHTML),e.type&&(t.type=e.type),e.value&&(t.value=e.value),e.customAttributes)for(var o in e.customAttributes)t.setAttribute(o,e.customAttributes[o]);return e.parent=e.parent?e.parent:this.wrapper,e.parent.append(t),t}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=this._createElement({parent:this.container,id:"p-gui-"+this.instanceId,class:"p-gui"}),this.header=this._createElement({parent:this.wrapper,class:"p-gui__header",textContent:this.name,inline:`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`}),this._createElement({parent:this.header,class:"p-gui__header-close",onclick:this.toggleClose.bind(this)})}button(e,t){let o="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?o=e.name==""?" ":e.name:o=" ":o=e==""?" ":e,this.imageContainer=null,typeof t!="function"&&(t=()=>{});const a=this._createElement({class:"p-gui__button",textContent:o,onclick:t});typeof e.color=="string"&&(a.style.setProperty("--color-accent",e.color),a.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 o;if(typeof e.path=="string")o=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=o.replace(/^.*[\\\/]/,""),n;e.name==null?n=a:n=typeof e.name=="string"&&e.name||" ";const r=e.selected===!0,i=e.selectionBorder!==!1;let s="";e.width&&(typeof e.width=="number"&&(e.width+="px"),s+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),s+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=this._createElement({class:"p-gui__image-container"}));var l=this._createElement({class:"p-gui__image",inline:"background-image: url("+o+"); "+s,parent:this.imageContainer});return r&&i&&l.classList.add("p-gui__image--selected"),this._createElement({parent:l,class:"p-gui__image-text",textContent:n}),l.onclick=()=>{let c=l.parentElement.querySelectorAll(".p-gui__image--selected");for(let d=0;d<c.length;d++)c[d].classList.remove("p-gui__image--selected");i&&l.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:o,text:n})},l.path=o,l}slider(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,n=null,r=e.obj||e.object,i=e.prop||e.property,s=typeof e.value=="number"?e.value:null,l=e.min??0,c=e.max??1,d=e.step||(c-l)/100;if(s!==null)(i!=null||r!=null)&&console.warn('[GUI] slider() "obj" and "property" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] slider() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] slider() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),n=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),s=(c-l)/2;this.imageContainer=null;var p=this._createElement({class:"p-gui__slider",textContent:o}),f=this._createElement({parent:p,el:"input",class:"p-gui__slider-ctrl",customAttributes:{type:"range",min:l,max:c,step:d,value:a?r[i]:s}}),b=this._createElement({parent:p,class:"p-gui__slider-value",textContent:String(a?r[i]:s)});f.addEventListener("input",()=>{b.textContent=f.value,a?r[i]=f.value:typeof t=="function"&&t(parseFloat(f.value))}),a&&Object.defineProperty(r,i,{set:_=>{this.propReferences[n]=_,f.value=_,b.textContent=String(_),typeof t=="function"&&t(parseFloat(f.value))},get:()=>this.propReferences[n]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,n=null,r=e.obj||e.object,i=e.prop||e.property,s=typeof e.value=="boolean"?e.value:null;if(s!==null)(i!=null||r!=null)&&console.warn('[GUI] toggle() "obj" and "property" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] toggle() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] toggle() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),n=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const l=this._createElement({class:"p-gui__switch",onclick:p=>{const f=p.target.childNodes[1];let b=!0;f.classList.contains("p-gui__switch-checkbox--active")&&(b=!1),f.classList.toggle("p-gui__switch-checkbox--active"),a?r[i]=b:typeof t=="function"&&t(b)},textContent:o});let c=(()=>a?r[i]?" p-gui__switch-checkbox--active":"":s?" p-gui__switch-checkbox--active":"")();const d=this._createElement({parent:l,class:"p-gui__switch-checkbox"+c});a&&Object.defineProperty(r,i,{set:p=>{this.propReferences[n]=p,p?d.classList.add("p-gui__switch-checkbox--active"):d.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(p)},get:()=>this.propReferences[n]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"?e.name:" ",a=!1,n=null,r=e.obj||e.object,i=e.prop||e.property,s=Array.isArray(e.values)?e.values:null,l;if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&r===void 0&&i===void 0)(i!=null||r!=null)&&console.warn('[GUI] list() "obj" and "property" parameters are ignored when a "value" parameter is used.'),l=(()=>{if(!s)return null;if(typeof e.value=="string")return s.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] list() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] list() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);l=(()=>{if(!s)return null;if(typeof r[i]=="string")return s.indexOf(r[i]);if(typeof r[i]=="number")return r[i]})(),n=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let c=this._createElement({class:"p-gui__list",textContent:o}),d=this._createElement({parent:c,el:"select",class:"p-gui__list-dropdown",onchange:p=>{a?r[i]=p.target.value:t&&t(p.target.value)}});s&&s.forEach((p,f)=>{let b=this._createElement({parent:d,el:"option",customAttributes:{value:p},textContent:p});l==f&&b.setAttribute("selected","")}),a&&Object.defineProperty(r,i,{set:p=>{typeof p=="string"&&(l=s.indexOf(p)),typeof p=="number"&&(l=p),this.propReferences[n]=l,d.querySelector("[selected]").removeAttribute("selected"),d.querySelectorAll("option")[l].setAttribute("selected",""),typeof t=="function"&&t(l)},get:()=>this.propReferences[n]})}options(e,t){if(typeof e!="object")throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof e}.`);this.list(e,t)}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,n=e.x.max??1,r=e.y.min??0,i=e.y.max??1,s=e.x.obj||e.x.object,l=e.x.prop||e.x.property,c=this.propReferences.push(s[l])-1,d=e.y.obj||e.y.object,p=e.y.prop||e.y.property,f=this.propReferences.push(d[p])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const b=this._createElement({class:"p-gui__vector2",textContent:o}),_=this._createElement({parent:b,class:"p-gui__vector-value",textContent:s[l]+", "+d[p]}),h=this._createElement({parent:b,el:"div",class:"p-gui__vector2-area",onclick:g=>{s[l]=parseFloat(this._mapLinear(g.offsetX,0,h.clientWidth,a,n).toFixed(2)),d[p]=parseFloat(this._mapLinear(g.offsetY,0,h.clientHeight,i,r).toFixed(2)),t&&t(s[l],s[p])}});let m=!1;h.addEventListener("pointerdown",g=>{m=!0}),h.addEventListener("pointerup",()=>{m=!1}),h.addEventListener("pointermove",g=>{m&&(s[l]=parseFloat(this._mapLinear(g.offsetX,0,h.clientWidth,a,n).toFixed(2)),d[p]=parseFloat(this._mapLinear(g.offsetY,0,h.clientHeight,i,r).toFixed(2)),t&&t(s[l],s[p]))}),this._createElement({parent:h,class:"p-gui__vector2-line p-gui__vector2-line-x"}),this._createElement({parent:h,class:"p-gui__vector2-line p-gui__vector2-line-y"});const y=this._createElement({parent:h,class:"p-gui__vector2-dot"});y.style.left=this._mapLinear(s[l],a,n,0,h.clientWidth)+"px",y.style.top=this._mapLinear(d[p],r,i,h.clientHeight,0)+"px",Object.defineProperty(s,l,{set:g=>{this.propReferences[c]=g,y.style.left=this._mapLinear(g,a,n,0,h.clientWidth)+"px",_.textContent=String(g)+", "+d[p]},get:()=>this.propReferences[c]}),Object.defineProperty(d,p,{set:g=>{this.propReferences[f]=g,y.style.top=this._mapLinear(g,r,i,h.clientHeight,0)+"px",_.textContent=s[l]+", "+String(g)},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 o=typeof e.name=="string"&&e.name||" ",a=!1,n=null,r=e.obj||e.object,i=e.prop||e.property,s;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}".`):s=e.value),s||(s="#000000"),e.value!==void 0)(i!=null||r!=null)&&console.warn('[GUI] color() "obj" and "property" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] color() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] color() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),n=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const l=this._createElement({el:"div",class:"p-gui__color",textContent:o}),c=this._createElement({parent:l,el:"input",class:"p-gui__color-picker",type:"color",value:s});typeof t=="function"&&c.addEventListener("input",()=>{a?r[i]=c.value:typeof t=="function"&&t(c.value)}),a&&Object.defineProperty(r,i,{set:d=>{this.propReferences[n]=d,c.value=d,typeof t=="function"&&t(d)},get:()=>this.propReferences[n]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,o=e.name||"",a=e.color||null,n=e.maxHeight||null;this.imageContainer=null;let r="p-gui__folder";this.folders.length==0&&(r+=" p-gui__folder--first"),t&&(r+=" p-gui__folder--closed");let i=a?`background-color: ${a};`:"";i+=n?`max-height: ${n}px;`:"";let s=this._createElement({class:r,inline:i});this._createElement({innerHTML:`<span class="p-gui__folder-arrow"></span>${o}`,class:"p-gui__folder-header",onclick:function(){this.parentNode.classList.toggle("p-gui__folder--closed")},parent:s});let l=new u({isFolder:!0,folderOptions:{wrapper:s}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(n){n.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=n.clientX,e.position.prevY=n.clientY,document.addEventListener("pointermove",o)}function o(n){n.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+n.clientX-e.position.prevX,e.position.y=e.position.initY+n.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(n){document.removeEventListener("pointermove",o)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,o,a,n){return a+(e-t)*(n-a)/(o-t)}}return u});
+        }`)}_folderConstructor(e){this.wrapper=e.wrapper}_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 o=0;o<t.length&&!(parseInt(t[o].id.replace("p-gui-",""))>this.instanceId);o++)this.screenCorner.y==t[o].dataset.cornerY&&(this.screenCorner.x=="left"&&t[o].dataset.cornerX=="left"?this.xOffset+=t[o].offsetWidth:this.screenCorner.x=="right"&&t[o].dataset.cornerX=="right"&&(this.xOffset-=t[o].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)`}_createElement(e){e.el=e.el||"div";var t=document.createElement(e.el);if(e.id&&(t.id=e.id),e.class&&(t.className=e.class),e.inline&&(t.style=e.inline),e.href&&(t.href=e.href),e.onclick&&(t.onclick=e.onclick),e.onchange&&(t.onchange=e.onchange),e.textContent&&(t.textContent=e.textContent),e.innerHTML&&(t.innerHTML=e.innerHTML),e.type&&(t.type=e.type),e.value&&(t.value=e.value),e.customAttributes)for(var o in e.customAttributes)t.setAttribute(o,e.customAttributes[o]);return e.parent=e.parent?e.parent:this.wrapper,e.parent.append(t),t}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=this._createElement({parent:this.container,id:"p-gui-"+this.instanceId,class:"p-gui"}),this.header=this._createElement({parent:this.wrapper,class:"p-gui__header",textContent:this.name,inline:`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`}),this._createElement({parent:this.header,class:"p-gui__header-close",onclick:this.toggleClose.bind(this)})}button(e,t){let o="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?o=e.name==""?" ":e.name:o=" ":o=e==""?" ":e,this.imageContainer=null,typeof t!="function"&&(t=()=>{});const a=this._createElement({class:"p-gui__button",textContent:o,onclick:t});typeof e.color=="string"&&(a.style.setProperty("--color-accent",e.color),a.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 o;if(typeof e.path=="string")o=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=o.replace(/^.*[\\\/]/,""),n;e.name==null?n=a:n=typeof e.name=="string"&&e.name||" ";const r=e.selected===!0,i=e.selectionBorder!==!1;let s="";e.width&&(typeof e.width=="number"&&(e.width+="px"),s+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),s+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=this._createElement({class:"p-gui__image-container"}));var l=this._createElement({class:"p-gui__image",inline:"background-image: url("+o+"); "+s,parent:this.imageContainer});return r&&i&&l.classList.add("p-gui__image--selected"),this._createElement({parent:l,class:"p-gui__image-text",textContent:n}),l.onclick=()=>{let c=l.parentElement.querySelectorAll(".p-gui__image--selected");for(let d=0;d<c.length;d++)c[d].classList.remove("p-gui__image--selected");i&&l.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:o,text:n})},l}slider(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,n=null,r=e.obj||e.object,i=e.prop||e.property,s=typeof e.value=="number"?e.value:null,l=e.min??0,c=e.max??1,d=e.step||(c-l)/100;if(s!==null)(i!=null||r!=null)&&console.warn('[GUI] slider() "obj" and "property" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] slider() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] slider() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),n=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),s=(c-l)/2;this.imageContainer=null;var p=this._createElement({class:"p-gui__slider",textContent:o}),f=this._createElement({parent:p,el:"input",class:"p-gui__slider-ctrl",customAttributes:{type:"range",min:l,max:c,step:d,value:a?r[i]:s}}),b=this._createElement({parent:p,class:"p-gui__slider-value",textContent:String(a?r[i]:s)});f.addEventListener("input",()=>{b.textContent=f.value,a?r[i]=f.value:typeof t=="function"&&t(parseFloat(f.value))}),a&&Object.defineProperty(r,i,{set:_=>{this.propReferences[n]=_,f.value=_,b.textContent=String(_),typeof t=="function"&&t(parseFloat(f.value))},get:()=>this.propReferences[n]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,n=null,r=e.obj||e.object,i=e.prop||e.property,s=typeof e.value=="boolean"?e.value:null;if(s!==null)(i!=null||r!=null)&&console.warn('[GUI] toggle() "obj" and "property" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] toggle() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] toggle() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),n=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const l=this._createElement({class:"p-gui__switch",onclick:p=>{const f=p.target.childNodes[1];let b=!0;f.classList.contains("p-gui__switch-checkbox--active")&&(b=!1),f.classList.toggle("p-gui__switch-checkbox--active"),a?r[i]=b:typeof t=="function"&&t(b)},textContent:o});let c=(()=>a?r[i]?" p-gui__switch-checkbox--active":"":s?" p-gui__switch-checkbox--active":"")();const d=this._createElement({parent:l,class:"p-gui__switch-checkbox"+c});a&&Object.defineProperty(r,i,{set:p=>{this.propReferences[n]=p,p?d.classList.add("p-gui__switch-checkbox--active"):d.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(p)},get:()=>this.propReferences[n]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"?e.name:" ",a=!1,n=null,r=e.obj||e.object,i=e.prop||e.property,s=Array.isArray(e.values)?e.values:null,l;if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&r===void 0&&i===void 0)(i!=null||r!=null)&&console.warn('[GUI] list() "obj" and "property" parameters are ignored when a "value" parameter is used.'),l=(()=>{if(!s)return null;if(typeof e.value=="string")return s.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] list() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] list() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);l=(()=>{if(!s)return null;if(typeof r[i]=="string")return s.indexOf(r[i]);if(typeof r[i]=="number")return r[i]})(),n=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let c=this._createElement({class:"p-gui__list",textContent:o}),d=this._createElement({parent:c,el:"select",class:"p-gui__list-dropdown",onchange:p=>{a?r[i]=p.target.value:t&&t(p.target.value)}});s&&s.forEach((p,f)=>{let b=this._createElement({parent:d,el:"option",customAttributes:{value:p},textContent:p});l==f&&b.setAttribute("selected","")}),a&&Object.defineProperty(r,i,{set:p=>{typeof p=="string"&&(l=s.indexOf(p)),typeof p=="number"&&(l=p),this.propReferences[n]=l,d.querySelector("[selected]").removeAttribute("selected"),d.querySelectorAll("option")[l].setAttribute("selected",""),typeof t=="function"&&t(l)},get:()=>this.propReferences[n]})}options(e,t){if(typeof e!="object")throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof e}.`);this.list(e,t)}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,n=e.x.max??1,r=e.y.min??0,i=e.y.max??1,s=e.x.obj||e.x.object,l=e.x.prop||e.x.property,c=this.propReferences.push(s[l])-1,d=e.y.obj||e.y.object,p=e.y.prop||e.y.property,f=this.propReferences.push(d[p])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const b=this._createElement({class:"p-gui__vector2",textContent:o}),_=this._createElement({parent:b,class:"p-gui__vector-value",textContent:s[l]+", "+d[p]}),h=this._createElement({parent:b,el:"div",class:"p-gui__vector2-area",onclick:g=>{s[l]=parseFloat(this._mapLinear(g.offsetX,0,h.clientWidth,a,n).toFixed(2)),d[p]=parseFloat(this._mapLinear(g.offsetY,0,h.clientHeight,i,r).toFixed(2)),t&&t(s[l],s[p])}});let m=!1;h.addEventListener("pointerdown",g=>{m=!0}),h.addEventListener("pointerup",()=>{m=!1}),h.addEventListener("pointermove",g=>{m&&(s[l]=parseFloat(this._mapLinear(g.offsetX,0,h.clientWidth,a,n).toFixed(2)),d[p]=parseFloat(this._mapLinear(g.offsetY,0,h.clientHeight,i,r).toFixed(2)),t&&t(s[l],s[p]))}),this._createElement({parent:h,class:"p-gui__vector2-line p-gui__vector2-line-x"}),this._createElement({parent:h,class:"p-gui__vector2-line p-gui__vector2-line-y"});const y=this._createElement({parent:h,class:"p-gui__vector2-dot"});y.style.left=this._mapLinear(s[l],a,n,0,h.clientWidth)+"px",y.style.top=this._mapLinear(d[p],r,i,h.clientHeight,0)+"px",Object.defineProperty(s,l,{set:g=>{this.propReferences[c]=g,y.style.left=this._mapLinear(g,a,n,0,h.clientWidth)+"px",_.textContent=String(g)+", "+d[p]},get:()=>this.propReferences[c]}),Object.defineProperty(d,p,{set:g=>{this.propReferences[f]=g,y.style.top=this._mapLinear(g,r,i,h.clientHeight,0)+"px",_.textContent=s[l]+", "+String(g)},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 o=typeof e.name=="string"&&e.name||" ",a=!1,n=null,r=e.obj||e.object,i=e.prop||e.property,s;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}".`):s=e.value),s||(s="#000000"),e.value!==void 0)(i!=null||r!=null)&&console.warn('[GUI] color() "obj" and "property" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] color() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] color() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),n=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const l=this._createElement({el:"div",class:"p-gui__color",textContent:o}),c=this._createElement({parent:l,el:"input",class:"p-gui__color-picker",type:"color",value:s});typeof t=="function"&&c.addEventListener("input",()=>{a?r[i]=c.value:typeof t=="function"&&t(c.value)}),a&&Object.defineProperty(r,i,{set:d=>{this.propReferences[n]=d,c.value=d,typeof t=="function"&&t(d)},get:()=>this.propReferences[n]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,o=e.name||"",a=e.color||null,n=e.maxHeight||null;this.imageContainer=null;let r="p-gui__folder";this.folders.length==0&&(r+=" p-gui__folder--first"),t&&(r+=" p-gui__folder--closed");let i=a?`background-color: ${a};`:"";i+=n?`max-height: ${n}px;`:"";let s=this._createElement({class:r,inline:i});this._createElement({innerHTML:`<span class="p-gui__folder-arrow"></span>${o}`,class:"p-gui__folder-header",onclick:function(){this.parentNode.classList.toggle("p-gui__folder--closed")},parent:s});let l=new u({isFolder:!0,folderOptions:{wrapper:s}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(n){n.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=n.clientX,e.position.prevY=n.clientY,document.addEventListener("pointermove",o)}function o(n){n.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+n.clientX-e.position.prevX,e.position.y=e.position.initY+n.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(n){document.removeEventListener("pointermove",o)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,o,a,n){return a+(e-t)*(n-a)/(o-t)}}return u});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "4.6.3",
+  "version": "4.6.6",
   "description": "Nice and simple GUI for JavaScript",
   "main": "src/index.js",
   "scripts": {

package/src/styles.js

@@ -279,6 +279,7 @@ export default function( position_type ) {
         cursor: pointer;
         border-radius: 3px;
         border: 1px solid var(--color-border-2);
+        outline: none;
     }
     
     .p-gui__list-dropdown {
@@ -368,9 +369,9 @@ export default function( position_type ) {
         margin-bottom: 3px;
         display: flex;
         flex-wrap: wrap;
-        border-left: 3px solid grey;
-        border-bottom: 1px solid grey;
+        border: 1px solid grey;
         padding: 0 3px;
+        border-radius: var(--main-border-radius);
     }
     
     .p-gui__folder:last-of-type {