perfect-gui 4.8.0 → 4.8.1

package/dist/perfect-gui.mjs

@@ -414,13 +414,13 @@ function A(y) {
     `
   );
 }
-class m {
+class x {
   constructor(e = {}) {
     if (e.container ? (this.container = typeof e.container == "string" ? document.querySelector(e.container) : e.container, this.position_type = "absolute") : (this.container = document.body, this.position_type = "fixed"), this.propReferences = [], this.folders = [], e.isFolder) {
       this._folderConstructor(e.folderOptions);
       return;
     }
-    this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), this instanceof m && (typeof m[m.instanceCounter] != "number" ? m[m.instanceCounter] = 0 : m[m.instanceCounter]++), this.instanceId = m[m.instanceCounter], this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${A(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
+    this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), this instanceof x && (typeof x[x.instanceCounter] != "number" ? x[x.instanceCounter] = 0 : x[x.instanceCounter]++), this.instanceId = x[x.instanceCounter], this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${A(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
   }
   _styleInstance() {
     let e = this._getScrollbarWidth(this.container);
@@ -495,16 +495,16 @@ class m {
     s.className = "p-gui__image", s.style = "background-image: url(" + n + "); " + o, this.imageContainer.append(s), r && i && s.classList.add("p-gui__image--selected");
     const l = document.createElement("div");
     return l.className = "p-gui__image-text", l.textContent = p, s.append(l), s.addEventListener("click", () => {
-      let u = s.parentElement.querySelectorAll(".p-gui__image--selected");
-      for (let c = 0; c < u.length; c++)
-        u[c].classList.remove("p-gui__image--selected");
+      let f = s.parentElement.querySelectorAll(".p-gui__image--selected");
+      for (let c = 0; c < f.length; c++)
+        f[c].classList.remove("p-gui__image--selected");
       i && s.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: n, text: p });
     }), s;
   }
   slider(e = {}, t) {
     if (typeof e != "object")
       throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);
-    let n = typeof e.name == "string" && e.name || " ", a = !1, p = null, r = e.obj, i = e.prop, o = typeof e.value == "number" ? e.value : null, s = e.min ?? 0, l = e.max ?? 1, u = e.step || (l - s) / 100;
+    let n = typeof e.name == "string" && e.name || " ", a = !1, p = null, r = e.obj, i = e.prop, o = typeof e.value == "number" ? e.value : null, s = e.min ?? 0, l = e.max ?? 1, f = e.step || (l - s) / 100;
     if (o !== null)
       (i != null || r != null) && console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
     else if (i != null && r != null) {
@@ -519,7 +519,7 @@ class m {
     const c = document.createElement("div");
     c.className = "p-gui__slider", c.textContent = n, this.wrapper.append(c);
     const d = document.createElement("input");
-    d.className = "p-gui__slider-ctrl", d.setAttribute("type", "range"), d.setAttribute("min", s), d.setAttribute("max", l), d.setAttribute("step", u), d.setAttribute("value", a ? r[i] : o), c.append(d);
+    d.className = "p-gui__slider-ctrl", d.setAttribute("type", "range"), d.setAttribute("min", s), d.setAttribute("max", l), d.setAttribute("step", f), d.setAttribute("value", a ? r[i] : o), c.append(d);
     const h = document.createElement("div");
     h.className = "p-gui__slider-value", h.textContent = String(a ? r[i] : o), c.append(h), d.addEventListener("input", () => {
       h.textContent = d.value, a ? r[i] = d.value : typeof t == "function" && t(parseFloat(d.value));
@@ -552,10 +552,10 @@ class m {
       d.classList.contains("p-gui__switch-checkbox--active") && (h = !1), d.classList.toggle("p-gui__switch-checkbox--active"), a ? r[i] = h : typeof t == "function" && t(h);
     });
     let l = (() => a ? r[i] ? " p-gui__switch-checkbox--active" : "" : o ? " p-gui__switch-checkbox--active" : "")();
-    const u = document.createElement("div");
-    u.className = "p-gui__switch-checkbox" + l, s.append(u), a && Object.defineProperty(r, i, {
+    const f = document.createElement("div");
+    f.className = "p-gui__switch-checkbox" + l, s.append(f), a && Object.defineProperty(r, i, {
       set: (c) => {
-        this.propReferences[p] = c, c ? u.classList.add("p-gui__switch-checkbox--active") : u.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(c);
+        this.propReferences[p] = c, c ? f.classList.add("p-gui__switch-checkbox--active") : f.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(c);
       },
       get: () => this.propReferences[p]
     });
@@ -589,19 +589,21 @@ class m {
     } 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 u = document.createElement("div");
-    u.className = "p-gui__list", u.textContent = n, this.wrapper.append(u);
+    let f = document.createElement("div");
+    f.className = "p-gui__list", f.textContent = n, this.wrapper.append(f);
     let c = document.createElement("select");
-    u.append(c), c.className = "p-gui__list-dropdown", c.addEventListener("change", (d) => {
+    f.append(c), c.className = "p-gui__list-dropdown", c.addEventListener("change", (d) => {
       a ? r[i] = d.target.value : t && t(d.target.value);
     }), o && o.forEach((d, h) => {
-      const g = l ? d.name : d, f = l ? d.value : d;
-      let x = document.createElement("option");
-      x.setAttribute("value", f), x.textContent = g, c.append(x), (!l && s == h || l && s == f) && x.setAttribute("selected", "");
+      const g = l ? d.name : d, u = l ? d.value : d;
+      let m = document.createElement("option");
+      m.setAttribute("value", u), m.textContent = g, c.append(m), (!l && s == h || l && s == u) && m.setAttribute("selected", "");
     }), a && Object.defineProperty(r, i, {
       set: (d) => {
-        let h, g, f;
-        l ? (f = o.find((x) => x.value == d), g = f.value, h = o.indexOf(f)) : (typeof d == "string" && (h = o.indexOf(d), g = d), typeof d == "number" && (h = d, g = o[d])), this.propReferences[p] = l ? g : d, c.querySelector("[selected]").removeAttribute("selected"), c.querySelectorAll("option")[h].setAttribute("selected", ""), typeof t == "function" && t(l ? f : g, h);
+        let h, g, u;
+        l ? (u = o.find((v) => v.value == d), g = (u == null ? void 0 : u.value) || o[0].value, h = o.indexOf(u)) : (typeof d == "string" && (h = o.indexOf(d), g = d), typeof d == "number" && (h = d, g = o[d])), this.propReferences[p] = l ? g : d;
+        const m = c.querySelector("[selected]");
+        m && m.removeAttribute("selected"), c.querySelectorAll("option")[h].setAttribute("selected", ""), typeof t == "function" && t(l ? u : g, h);
       },
       get: () => this.propReferences[p]
     });
@@ -615,37 +617,37 @@ class m {
     if (typeof e != "object")
       throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);
     let n = typeof e.name == "string" && e.name || " ";
-    const a = e.x.min ?? 0, p = e.x.max ?? 1, r = e.y.min ?? 0, i = e.y.max ?? 1, o = e.x.obj, s = e.x.prop, l = this.propReferences.push(o[s]) - 1, u = e.y.obj, c = e.y.prop, d = this.propReferences.push(u[c]) - 1;
+    const a = e.x.min ?? 0, p = e.x.max ?? 1, r = e.y.min ?? 0, i = e.y.max ?? 1, o = e.x.obj, s = e.x.prop, l = this.propReferences.push(o[s]) - 1, f = e.y.obj, c = e.y.prop, d = this.propReferences.push(f[c]) - 1;
     t = typeof t == "function" ? t : null, this.imageContainer = null;
     const h = document.createElement("div");
     h.className = "p-gui__vector2", h.textContent = n, this.wrapper.append(h);
     const g = document.createElement("div");
-    g.className = "p-gui__vector-value", g.textContent = o[s] + ", " + u[c], h.append(g);
-    const f = document.createElement("div");
-    f.className = "p-gui__vector2-area", h.append(f), f.addEventListener("click", (b) => {
-      o[s] = parseFloat(this._mapLinear(b.offsetX, 0, f.clientWidth, a, p).toFixed(2)), u[c] = parseFloat(this._mapLinear(b.offsetY, 0, f.clientHeight, i, r).toFixed(2)), t && t(o[s], o[c]);
+    g.className = "p-gui__vector-value", g.textContent = o[s] + ", " + f[c], h.append(g);
+    const u = document.createElement("div");
+    u.className = "p-gui__vector2-area", h.append(u), u.addEventListener("click", (b) => {
+      o[s] = parseFloat(this._mapLinear(b.offsetX, 0, u.clientWidth, a, p).toFixed(2)), f[c] = parseFloat(this._mapLinear(b.offsetY, 0, u.clientHeight, i, r).toFixed(2)), t && t(o[s], o[c]);
     });
-    let x = !1;
-    f.addEventListener("pointerdown", (b) => {
-      x = !0;
-    }), f.addEventListener("pointerup", () => {
-      x = !1;
-    }), f.addEventListener("pointermove", (b) => {
-      x && (o[s] = parseFloat(this._mapLinear(b.offsetX, 0, f.clientWidth, a, p).toFixed(2)), u[c] = parseFloat(this._mapLinear(b.offsetY, 0, f.clientHeight, i, r).toFixed(2)), t && t(o[s], o[c]));
+    let m = !1;
+    u.addEventListener("pointerdown", (b) => {
+      m = !0;
+    }), u.addEventListener("pointerup", () => {
+      m = !1;
+    }), u.addEventListener("pointermove", (b) => {
+      m && (o[s] = parseFloat(this._mapLinear(b.offsetX, 0, u.clientWidth, a, p).toFixed(2)), f[c] = parseFloat(this._mapLinear(b.offsetY, 0, u.clientHeight, i, r).toFixed(2)), t && t(o[s], o[c]));
     });
-    const w = document.createElement("div");
-    w.className = "p-gui__vector2-line p-gui__vector2-line-x", f.append(w);
     const v = document.createElement("div");
-    v.className = "p-gui__vector2-line p-gui__vector2-line-y", f.append(v);
+    v.className = "p-gui__vector2-line p-gui__vector2-line-x", u.append(v);
+    const w = document.createElement("div");
+    w.className = "p-gui__vector2-line p-gui__vector2-line-y", u.append(w);
     const _ = document.createElement("div");
-    _.className = "p-gui__vector2-dot", f.append(_), _.style.left = this._mapLinear(o[s], a, p, 0, f.clientWidth) + "px", _.style.top = this._mapLinear(u[c], r, i, f.clientHeight, 0) + "px", Object.defineProperty(o, s, {
+    _.className = "p-gui__vector2-dot", u.append(_), _.style.left = this._mapLinear(o[s], a, p, 0, u.clientWidth) + "px", _.style.top = this._mapLinear(f[c], r, i, u.clientHeight, 0) + "px", Object.defineProperty(o, s, {
       set: (b) => {
-        this.propReferences[l] = b, _.style.left = this._mapLinear(b, a, p, 0, f.clientWidth) + "px", g.textContent = String(b) + ", " + u[c];
+        this.propReferences[l] = b, _.style.left = this._mapLinear(b, a, p, 0, u.clientWidth) + "px", g.textContent = String(b) + ", " + f[c];
       },
       get: () => this.propReferences[l]
-    }), Object.defineProperty(u, c, {
+    }), Object.defineProperty(f, c, {
       set: (b) => {
-        this.propReferences[d] = b, _.style.top = this._mapLinear(b, r, i, f.clientHeight, 0) + "px", g.textContent = o[s] + ", " + String(b);
+        this.propReferences[d] = b, _.style.top = this._mapLinear(b, r, i, u.clientHeight, 0) + "px", g.textContent = o[s] + ", " + String(b);
       },
       get: () => this.propReferences[d]
     });
@@ -671,8 +673,8 @@ class m {
     l.className = "p-gui__color-picker", l.setAttribute("type", "color"), l.value = o, s.append(l), typeof t == "function" && l.addEventListener("input", () => {
       a ? r[i] = l.value : typeof t == "function" && t(l.value);
     }), a && Object.defineProperty(r, i, {
-      set: (u) => {
-        this.propReferences[p] = u, l.value = u, typeof t == "function" && t(u);
+      set: (f) => {
+        this.propReferences[p] = f, l.value = f, typeof t == "function" && t(f);
       },
       get: () => this.propReferences[p]
     });
@@ -690,7 +692,7 @@ class m {
     s.innerHTML = `<span class="p-gui__folder-arrow"></span>${n}`, s.className = "p-gui__folder-header", o.append(s), s.addEventListener("click", () => {
       o.classList.toggle("p-gui__folder--closed");
     });
-    let l = new m({ isFolder: !0, folderOptions: {
+    let l = new x({ isFolder: !0, folderOptions: {
       wrapper: o
     } });
     return this.folders.push(l), l;
@@ -719,5 +721,5 @@ class m {
   }
 }
 export {
-  m as default
+  x as default
 };

package/dist/perfect-gui.umd.js

@@ -1,4 +1,4 @@
-(function(w,b){typeof exports=="object"&&typeof module<"u"?module.exports=b():typeof define=="function"&&define.amd?define(b):(w=typeof globalThis<"u"?globalThis:w||self,w["Perfect GUI"]=b())})(this,function(){"use strict";function w(A){return`
+(function(v,b){typeof exports=="object"&&typeof module<"u"?module.exports=b():typeof define=="function"&&define.amd?define(b):(v=typeof globalThis<"u"?globalThis:v||self,v["Perfect GUI"]=b())})(this,function(){"use strict";function v(A){return`
     .p-gui {
         --main-border-radius: 5px;
         --color-bg: #121212;
@@ -408,10 +408,10 @@
     .p-gui__folder--closed .p-gui__folder-arrow {
         transform: rotate(0deg);
     }
-    `}class b{constructor(e={}){if(e.container?(this.container=typeof e.container=="string"?document.querySelector(e.container):e.container,this.position_type="absolute"):(this.container=document.body,this.position_type="fixed"),this.propReferences=[],this.folders=[],e.isFolder){this._folderConstructor(e.folderOptions);return}this.name=e!=null&&typeof e.name=="string"?e.name:"",this.backgroundColor=e.color||null,this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),e.maxHeight&&(this.initMaxHeight=e.maxHeight,this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.screenCorner=this._parseScreenCorner(e.position),this instanceof b&&(typeof b[b.instanceCounter]!="number"?b[b.instanceCounter]=0:b[b.instanceCounter]++),this.instanceId=b[b.instanceCounter],this.wrapperWidth=e.width||290,this.stylesheet=document.createElement("style"),this.stylesheet.setAttribute("type","text/css"),this.stylesheet.setAttribute("id","lm-gui-stylesheet"),document.head.append(this.stylesheet),this.instanceId==0&&this._addStyles(`${w(this.position_type)}`),this._styleInstance(),this._addWrapper(),this.wrapper.setAttribute("data-corner-x",this.screenCorner.x),this.wrapper.setAttribute("data-corner-y",this.screenCorner.y),e.autoRepositioning!=!1&&window.addEventListener("resize",this._handleResize.bind(this)),this._handleResize(),this.hasBeenDragged=!1,e.draggable==!0&&this._makeDraggable(),this.closed=!1,e.closed&&this.toggleClose()}_styleInstance(){let e=this._getScrollbarWidth(this.container);if(this.screenCorner.x=="left"?this.xOffset=0:this.xOffset=this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(".p-gui");for(let n=0;n<t.length;n++)this.screenCorner.y==t[n].dataset.cornerY&&(this.screenCorner.x=="left"&&t[n].dataset.cornerX=="left"?this.xOffset+=t[n].offsetWidth:this.screenCorner.x=="right"&&t[n].dataset.cornerX=="right"&&(this.xOffset-=t[n].offsetWidth))}this.yOffset=0,this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this._addStyles(`#p-gui-${this.instanceId} {
+    `}class b{constructor(e={}){if(e.container?(this.container=typeof e.container=="string"?document.querySelector(e.container):e.container,this.position_type="absolute"):(this.container=document.body,this.position_type="fixed"),this.propReferences=[],this.folders=[],e.isFolder){this._folderConstructor(e.folderOptions);return}this.name=e!=null&&typeof e.name=="string"?e.name:"",this.backgroundColor=e.color||null,this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),e.maxHeight&&(this.initMaxHeight=e.maxHeight,this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.screenCorner=this._parseScreenCorner(e.position),this instanceof b&&(typeof b[b.instanceCounter]!="number"?b[b.instanceCounter]=0:b[b.instanceCounter]++),this.instanceId=b[b.instanceCounter],this.wrapperWidth=e.width||290,this.stylesheet=document.createElement("style"),this.stylesheet.setAttribute("type","text/css"),this.stylesheet.setAttribute("id","lm-gui-stylesheet"),document.head.append(this.stylesheet),this.instanceId==0&&this._addStyles(`${v(this.position_type)}`),this._styleInstance(),this._addWrapper(),this.wrapper.setAttribute("data-corner-x",this.screenCorner.x),this.wrapper.setAttribute("data-corner-y",this.screenCorner.y),e.autoRepositioning!=!1&&window.addEventListener("resize",this._handleResize.bind(this)),this._handleResize(),this.hasBeenDragged=!1,e.draggable==!0&&this._makeDraggable(),this.closed=!1,e.closed&&this.toggleClose()}_styleInstance(){let e=this._getScrollbarWidth(this.container);if(this.screenCorner.x=="left"?this.xOffset=0:this.xOffset=this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(".p-gui");for(let o=0;o<t.length;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.yOffset=0,this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this._addStyles(`#p-gui-${this.instanceId} {
             width: ${this.wrapperWidth}px;
             max-height: ${this.maxHeight}px;
             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 n=0;n<t.length&&!(parseInt(t[n].id.replace("p-gui-",""))>this.instanceId);n++)this.screenCorner.y==t[n].dataset.cornerY&&(this.screenCorner.x=="left"&&t[n].dataset.cornerX=="left"?this.xOffset+=t[n].offsetWidth:this.screenCorner.x=="right"&&t[n].dataset.cornerX=="right"&&(this.xOffset-=t[n].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 n="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?n=e.name==""?" ":e.name:n=" ":n=e==""?" ":e,this.imageContainer=null,typeof t!="function"&&(t=()=>{});const a=document.createElement("div");a.className="p-gui__button",a.textContent=n,a.addEventListener("click",t),this.wrapper.append(a),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 n;if(typeof e.path=="string")n=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=n.replace(/^.*[\\\/]/,""),p;e.name==null?p=a:p=typeof e.name=="string"&&e.name||" ";const r=e.selected===!0,i=e.selectionBorder!==!1;let o="";e.width&&(typeof e.width=="number"&&(e.width+="px"),o+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),o+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const s=document.createElement("div");s.className="p-gui__image",s.style="background-image: url("+n+"); "+o,this.imageContainer.append(s),r&&i&&s.classList.add("p-gui__image--selected");const l=document.createElement("div");return l.className="p-gui__image-text",l.textContent=p,s.append(l),s.addEventListener("click",()=>{let u=s.parentElement.querySelectorAll(".p-gui__image--selected");for(let c=0;c<u.length;c++)u[c].classList.remove("p-gui__image--selected");i&&s.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:n,text:p})}),s}slider(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);let n=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,o=typeof e.value=="number"?e.value:null,s=e.min??0,l=e.max??1,u=e.step||(l-s)/100;if(o!==null)(i!=null||r!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof r}.`);n==" "&&(n=i),p=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.'),o=(l-s)/2;this.imageContainer=null;const c=document.createElement("div");c.className="p-gui__slider",c.textContent=n,this.wrapper.append(c);const d=document.createElement("input");d.className="p-gui__slider-ctrl",d.setAttribute("type","range"),d.setAttribute("min",s),d.setAttribute("max",l),d.setAttribute("step",u),d.setAttribute("value",a?r[i]:o),c.append(d);const h=document.createElement("div");h.className="p-gui__slider-value",h.textContent=String(a?r[i]:o),c.append(h),d.addEventListener("input",()=>{h.textContent=d.value,a?r[i]=d.value:typeof t=="function"&&t(parseFloat(d.value))}),a&&Object.defineProperty(r,i,{set:g=>{this.propReferences[p]=g,d.value=g,h.textContent=String(g),typeof t=="function"&&t(parseFloat(d.value))},get:()=>this.propReferences[p]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let n=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,o=typeof e.value=="boolean"?e.value:null;if(o!==null)(i!=null||r!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof r}.`);n==" "&&(n=i),p=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 s=document.createElement("div");s.textContent=n,s.className="p-gui__switch",this.wrapper.append(s),s.addEventListener("click",c=>{const d=c.target.childNodes[1];let h=!0;d.classList.contains("p-gui__switch-checkbox--active")&&(h=!1),d.classList.toggle("p-gui__switch-checkbox--active"),a?r[i]=h:typeof t=="function"&&t(h)});let l=(()=>a?r[i]?" p-gui__switch-checkbox--active":"":o?" p-gui__switch-checkbox--active":"")();const u=document.createElement("div");u.className="p-gui__switch-checkbox"+l,s.append(u),a&&Object.defineProperty(r,i,{set:c=>{this.propReferences[p]=c,c?u.classList.add("p-gui__switch-checkbox--active"):u.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(c)},get:()=>this.propReferences[p]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let n=typeof e.name=="string"?e.name:" ",a=!1,p=null,r=e.obj,i=e.prop,o=Array.isArray(e.values)?e.values:null,s,l=typeof o[0]!="string";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 "prop" parameters are ignored when a "value" parameter is used.'),s=(()=>{if(!o)return null;if(typeof e.value=="string")return o.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" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);s=(()=>{if(!o)return null;if(typeof r[i]=="string")return l?o.find(d=>d.value===r[i]).value:o.indexOf(r[i]);if(typeof r[i]=="number")return l?o.find(d=>d.value===r[i]).value:r[i]})(),p=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 u=document.createElement("div");u.className="p-gui__list",u.textContent=n,this.wrapper.append(u);let c=document.createElement("select");u.append(c),c.className="p-gui__list-dropdown",c.addEventListener("change",d=>{a?r[i]=d.target.value:t&&t(d.target.value)}),o&&o.forEach((d,h)=>{const g=l?d.name:d,f=l?d.value:d;let x=document.createElement("option");x.setAttribute("value",f),x.textContent=g,c.append(x),(!l&&s==h||l&&s==f)&&x.setAttribute("selected","")}),a&&Object.defineProperty(r,i,{set:d=>{let h,g,f;l?(f=o.find(x=>x.value==d),g=f.value,h=o.indexOf(f)):(typeof d=="string"&&(h=o.indexOf(d),g=d),typeof d=="number"&&(h=d,g=o[d])),this.propReferences[p]=l?g:d,c.querySelector("[selected]").removeAttribute("selected"),c.querySelectorAll("option")[h].setAttribute("selected",""),typeof t=="function"&&t(l?f:g,h)},get:()=>this.propReferences[p]})}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 n=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,p=e.x.max??1,r=e.y.min??0,i=e.y.max??1,o=e.x.obj,s=e.x.prop,l=this.propReferences.push(o[s])-1,u=e.y.obj,c=e.y.prop,d=this.propReferences.push(u[c])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const h=document.createElement("div");h.className="p-gui__vector2",h.textContent=n,this.wrapper.append(h);const g=document.createElement("div");g.className="p-gui__vector-value",g.textContent=o[s]+", "+u[c],h.append(g);const f=document.createElement("div");f.className="p-gui__vector2-area",h.append(f),f.addEventListener("click",m=>{o[s]=parseFloat(this._mapLinear(m.offsetX,0,f.clientWidth,a,p).toFixed(2)),u[c]=parseFloat(this._mapLinear(m.offsetY,0,f.clientHeight,i,r).toFixed(2)),t&&t(o[s],o[c])});let x=!1;f.addEventListener("pointerdown",m=>{x=!0}),f.addEventListener("pointerup",()=>{x=!1}),f.addEventListener("pointermove",m=>{x&&(o[s]=parseFloat(this._mapLinear(m.offsetX,0,f.clientWidth,a,p).toFixed(2)),u[c]=parseFloat(this._mapLinear(m.offsetY,0,f.clientHeight,i,r).toFixed(2)),t&&t(o[s],o[c]))});const v=document.createElement("div");v.className="p-gui__vector2-line p-gui__vector2-line-x",f.append(v);const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-y",f.append(y);const _=document.createElement("div");_.className="p-gui__vector2-dot",f.append(_),_.style.left=this._mapLinear(o[s],a,p,0,f.clientWidth)+"px",_.style.top=this._mapLinear(u[c],r,i,f.clientHeight,0)+"px",Object.defineProperty(o,s,{set:m=>{this.propReferences[l]=m,_.style.left=this._mapLinear(m,a,p,0,f.clientWidth)+"px",g.textContent=String(m)+", "+u[c]},get:()=>this.propReferences[l]}),Object.defineProperty(u,c,{set:m=>{this.propReferences[d]=m,_.style.top=this._mapLinear(m,r,i,f.clientHeight,0)+"px",g.textContent=o[s]+", "+String(m)},get:()=>this.propReferences[d]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let n=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,o;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}".`):o=e.value),o||(o="#000000"),e.value!==void 0)(i!=null||r!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);n==" "&&(n=i),p=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 s=document.createElement("div");s.className="p-gui__color",s.textContent=n,this.wrapper.append(s);const l=document.createElement("input");l.className="p-gui__color-picker",l.setAttribute("type","color"),l.value=o,s.append(l),typeof t=="function"&&l.addEventListener("input",()=>{a?r[i]=l.value:typeof t=="function"&&t(l.value)}),a&&Object.defineProperty(r,i,{set:u=>{this.propReferences[p]=u,l.value=u,typeof t=="function"&&t(u)},get:()=>this.propReferences[p]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,n=e.name||"",a=e.color||null,p=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+=p?`max-height: ${p}px;`:"";const o=document.createElement("div");o.className=r,o.style=i,this.wrapper.append(o);const s=document.createElement("div");s.innerHTML=`<span class="p-gui__folder-arrow"></span>${n}`,s.className="p-gui__folder-header",o.append(s),s.addEventListener("click",()=>{o.classList.toggle("p-gui__folder--closed")});let l=new b({isFolder:!0,folderOptions:{wrapper:o}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(p){p.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=p.clientX,e.position.prevY=p.clientY,document.addEventListener("pointermove",n)}function n(p){p.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+p.clientX-e.position.prevX,e.position.y=e.position.initY+p.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(p){document.removeEventListener("pointermove",n)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,n,a,p){return a+(e-t)*(p-a)/(n-t)}}return b});
+        }`)}_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)`}_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 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=document.createElement("div");a.className="p-gui__button",a.textContent=o,a.addEventListener("click",t),this.wrapper.append(a),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(/^.*[\\\/]/,""),p;e.name==null?p=a:p=typeof e.name=="string"&&e.name||" ";const r=e.selected===!0,i=e.selectionBorder!==!1;let n="";e.width&&(typeof e.width=="number"&&(e.width+="px"),n+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),n+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const s=document.createElement("div");s.className="p-gui__image",s.style="background-image: url("+o+"); "+n,this.imageContainer.append(s),r&&i&&s.classList.add("p-gui__image--selected");const l=document.createElement("div");return l.className="p-gui__image-text",l.textContent=p,s.append(l),s.addEventListener("click",()=>{let f=s.parentElement.querySelectorAll(".p-gui__image--selected");for(let c=0;c<f.length;c++)f[c].classList.remove("p-gui__image--selected");i&&s.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:o,text:p})}),s}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,p=null,r=e.obj,i=e.prop,n=typeof e.value=="number"?e.value:null,s=e.min??0,l=e.max??1,f=e.step||(l-s)/100;if(n!==null)(i!=null||r!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),p=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.'),n=(l-s)/2;this.imageContainer=null;const c=document.createElement("div");c.className="p-gui__slider",c.textContent=o,this.wrapper.append(c);const d=document.createElement("input");d.className="p-gui__slider-ctrl",d.setAttribute("type","range"),d.setAttribute("min",s),d.setAttribute("max",l),d.setAttribute("step",f),d.setAttribute("value",a?r[i]:n),c.append(d);const h=document.createElement("div");h.className="p-gui__slider-value",h.textContent=String(a?r[i]:n),c.append(h),d.addEventListener("input",()=>{h.textContent=d.value,a?r[i]=d.value:typeof t=="function"&&t(parseFloat(d.value))}),a&&Object.defineProperty(r,i,{set:g=>{this.propReferences[p]=g,d.value=g,h.textContent=String(g),typeof t=="function"&&t(parseFloat(d.value))},get:()=>this.propReferences[p]})}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,p=null,r=e.obj,i=e.prop,n=typeof e.value=="boolean"?e.value:null;if(n!==null)(i!=null||r!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),p=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 s=document.createElement("div");s.textContent=o,s.className="p-gui__switch",this.wrapper.append(s),s.addEventListener("click",c=>{const d=c.target.childNodes[1];let h=!0;d.classList.contains("p-gui__switch-checkbox--active")&&(h=!1),d.classList.toggle("p-gui__switch-checkbox--active"),a?r[i]=h:typeof t=="function"&&t(h)});let l=(()=>a?r[i]?" p-gui__switch-checkbox--active":"":n?" p-gui__switch-checkbox--active":"")();const f=document.createElement("div");f.className="p-gui__switch-checkbox"+l,s.append(f),a&&Object.defineProperty(r,i,{set:c=>{this.propReferences[p]=c,c?f.classList.add("p-gui__switch-checkbox--active"):f.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(c)},get:()=>this.propReferences[p]})}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,p=null,r=e.obj,i=e.prop,n=Array.isArray(e.values)?e.values:null,s,l=typeof n[0]!="string";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 "prop" parameters are ignored when a "value" parameter is used.'),s=(()=>{if(!n)return null;if(typeof e.value=="string")return n.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" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);s=(()=>{if(!n)return null;if(typeof r[i]=="string")return l?n.find(d=>d.value===r[i]).value:n.indexOf(r[i]);if(typeof r[i]=="number")return l?n.find(d=>d.value===r[i]).value:r[i]})(),p=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 f=document.createElement("div");f.className="p-gui__list",f.textContent=o,this.wrapper.append(f);let c=document.createElement("select");f.append(c),c.className="p-gui__list-dropdown",c.addEventListener("change",d=>{a?r[i]=d.target.value:t&&t(d.target.value)}),n&&n.forEach((d,h)=>{const g=l?d.name:d,u=l?d.value:d;let x=document.createElement("option");x.setAttribute("value",u),x.textContent=g,c.append(x),(!l&&s==h||l&&s==u)&&x.setAttribute("selected","")}),a&&Object.defineProperty(r,i,{set:d=>{let h,g,u;l?(u=n.find(w=>w.value==d),g=(u==null?void 0:u.value)||n[0].value,h=n.indexOf(u)):(typeof d=="string"&&(h=n.indexOf(d),g=d),typeof d=="number"&&(h=d,g=n[d])),this.propReferences[p]=l?g:d;const x=c.querySelector("[selected]");x&&x.removeAttribute("selected"),c.querySelectorAll("option")[h].setAttribute("selected",""),typeof t=="function"&&t(l?u:g,h)},get:()=>this.propReferences[p]})}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,p=e.x.max??1,r=e.y.min??0,i=e.y.max??1,n=e.x.obj,s=e.x.prop,l=this.propReferences.push(n[s])-1,f=e.y.obj,c=e.y.prop,d=this.propReferences.push(f[c])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const h=document.createElement("div");h.className="p-gui__vector2",h.textContent=o,this.wrapper.append(h);const g=document.createElement("div");g.className="p-gui__vector-value",g.textContent=n[s]+", "+f[c],h.append(g);const u=document.createElement("div");u.className="p-gui__vector2-area",h.append(u),u.addEventListener("click",m=>{n[s]=parseFloat(this._mapLinear(m.offsetX,0,u.clientWidth,a,p).toFixed(2)),f[c]=parseFloat(this._mapLinear(m.offsetY,0,u.clientHeight,i,r).toFixed(2)),t&&t(n[s],n[c])});let x=!1;u.addEventListener("pointerdown",m=>{x=!0}),u.addEventListener("pointerup",()=>{x=!1}),u.addEventListener("pointermove",m=>{x&&(n[s]=parseFloat(this._mapLinear(m.offsetX,0,u.clientWidth,a,p).toFixed(2)),f[c]=parseFloat(this._mapLinear(m.offsetY,0,u.clientHeight,i,r).toFixed(2)),t&&t(n[s],n[c]))});const w=document.createElement("div");w.className="p-gui__vector2-line p-gui__vector2-line-x",u.append(w);const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-y",u.append(y);const _=document.createElement("div");_.className="p-gui__vector2-dot",u.append(_),_.style.left=this._mapLinear(n[s],a,p,0,u.clientWidth)+"px",_.style.top=this._mapLinear(f[c],r,i,u.clientHeight,0)+"px",Object.defineProperty(n,s,{set:m=>{this.propReferences[l]=m,_.style.left=this._mapLinear(m,a,p,0,u.clientWidth)+"px",g.textContent=String(m)+", "+f[c]},get:()=>this.propReferences[l]}),Object.defineProperty(f,c,{set:m=>{this.propReferences[d]=m,_.style.top=this._mapLinear(m,r,i,u.clientHeight,0)+"px",g.textContent=n[s]+", "+String(m)},get:()=>this.propReferences[d]})}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,p=null,r=e.obj,i=e.prop,n;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}".`):n=e.value),n||(n="#000000"),e.value!==void 0)(i!=null||r!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),p=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 s=document.createElement("div");s.className="p-gui__color",s.textContent=o,this.wrapper.append(s);const l=document.createElement("input");l.className="p-gui__color-picker",l.setAttribute("type","color"),l.value=n,s.append(l),typeof t=="function"&&l.addEventListener("input",()=>{a?r[i]=l.value:typeof t=="function"&&t(l.value)}),a&&Object.defineProperty(r,i,{set:f=>{this.propReferences[p]=f,l.value=f,typeof t=="function"&&t(f)},get:()=>this.propReferences[p]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,o=e.name||"",a=e.color||null,p=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+=p?`max-height: ${p}px;`:"";const n=document.createElement("div");n.className=r,n.style=i,this.wrapper.append(n);const s=document.createElement("div");s.innerHTML=`<span class="p-gui__folder-arrow"></span>${o}`,s.className="p-gui__folder-header",n.append(s),s.addEventListener("click",()=>{n.classList.toggle("p-gui__folder--closed")});let l=new b({isFolder:!0,folderOptions:{wrapper:n}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(p){p.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=p.clientX,e.position.prevY=p.clientY,document.addEventListener("pointermove",o)}function o(p){p.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+p.clientX-e.position.prevX,e.position.y=e.position.initY+p.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(p){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,p){return a+(e-t)*(p-a)/(o-t)}}return b});

package/package.json

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

package/src/index.js

@@ -625,8 +625,10 @@ export default class GUI {
                 set: val => {
                     let newIndex, newValue, newObj; 
                     if (objectValues) {
-                        newObj = values.find(item => item.value == val);
-                        newValue = newObj.value;
+                        newObj = values.find(item => {
+                            return item.value == val;
+                        });
+                        newValue = newObj?.value || values[0].value;
                         newIndex = values.indexOf(newObj);
                     } else {
                         if (typeof val == 'string') {
@@ -641,7 +643,10 @@ export default class GUI {
                     
                     this.propReferences[propReferenceIndex] = objectValues ? newValue : val;
 
-                    select.querySelector('[selected]').removeAttribute('selected')
+                    const previousSelection = select.querySelector('[selected]');
+                    if ( previousSelection ) {
+                        previousSelection.removeAttribute('selected')
+                    }
                     select.querySelectorAll('option')[newIndex].setAttribute('selected', '');
                     
                     if (typeof callback == 'function') {

package/vite.config.js

@@ -6,6 +6,7 @@ export default defineConfig({
         lib: {
             entry: resolve(__dirname, "src/index.js"),
             name: "Perfect GUI"
-        }
+        },
+        minify: true
     },
 });