perfect-gui 4.11.15 → 4.12.0

package/README.md

@@ -47,7 +47,7 @@ gui.button('Click me', callback);
 ## Options
 ```javascript
 const gui = new GUI({
-    name: 'My GUI',
+    label: 'My GUI',
     // Name of the panel. 
     // Default is null.
 

package/dist/perfect-gui.mjs

@@ -2,7 +2,7 @@ class R {
   constructor(e, t = {}, i) {
     if (this.parent = e, this.propReferences = [], typeof t != "object")
       throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof t}.`);
-    let a = typeof t.name == "string" && t.name || " ";
+    let l = typeof t.label == "string" && t.label || " ";
     this.isObject = !1;
     let s = null;
     this.obj = t.obj, this.prop = t.prop;
@@ -14,17 +14,17 @@ class R {
         throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof this.prop}.`);
       if (typeof this.obj != "object")
         throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof this.obj}.`);
-      a == " " && (a = this.prop), s = this.propReferences.push(this.obj[this.prop]) - 1, this.isObject = !0;
+      l == " " && (l = this.prop), s = this.propReferences.push(this.obj[this.prop]) - 1, this.isObject = !0;
     } else
       (this.prop != null && this.obj == null || this.prop == null && this.obj != null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), o = (this.max - this.min) / 2;
-    const r = typeof t.tooltip == "string" ? t.tooltip : t.tooltip === !0 ? a : null;
+    const r = typeof t.tooltip == "string" ? t.tooltip : t.tooltip === !0 ? l : null;
     this.imageContainer = null;
     const n = document.createElement("div");
     n.className = "p-gui__slider", r && n.setAttribute("title", r);
     const c = document.createElement("div");
-    c.className = "p-gui__slider-name", c.textContent = a, n.append(c), this.ctrlDiv = document.createElement("div"), this.ctrlDiv.className = "p-gui__slider-ctrl", this.ctrlDiv.setAttribute("type", "range"), this.ctrlDiv.setAttribute("min", this.min), this.ctrlDiv.setAttribute("max", this.max), n.append(this.ctrlDiv);
-    const l = document.createElement("div");
-    return l.className = "p-gui__slider-bar", this.ctrlDiv.append(l), this.handle = document.createElement("div"), this.handle.className = "p-gui__slider-handle", this.ctrlDiv.append(this.handle), this.filling = document.createElement("div"), this.filling.className = "p-gui__slider-filling", l.append(this.filling), this.valueInput = document.createElement("input"), this.valueInput.className = "p-gui__slider-value", this.valueInput.value = this.isObject ? this.obj[this.prop] : o, n.append(this.valueInput), setTimeout(() => {
+    c.className = "p-gui__slider-name", c.textContent = l, n.append(c), this.ctrlDiv = document.createElement("div"), this.ctrlDiv.className = "p-gui__slider-ctrl", this.ctrlDiv.setAttribute("type", "range"), this.ctrlDiv.setAttribute("min", this.min), this.ctrlDiv.setAttribute("max", this.max), n.append(this.ctrlDiv);
+    const a = document.createElement("div");
+    return a.className = "p-gui__slider-bar", this.ctrlDiv.append(a), this.handle = document.createElement("div"), this.handle.className = "p-gui__slider-handle", this.ctrlDiv.append(this.handle), this.filling = document.createElement("div"), this.filling.className = "p-gui__slider-filling", a.append(this.filling), this.valueInput = document.createElement("input"), this.valueInput.className = "p-gui__slider-value", this.valueInput.value = this.isObject ? this.obj[this.prop] : o, n.append(this.valueInput), setTimeout(() => {
       const d = this.handle.offsetWidth;
       this.handle.position = this._mapLinear(this.valueInput.value, this.min, this.max, d / 2, 88 - d / 2), this.handle.position = Math.min(this.handle.position, 88 - d / 2), this.handle.position = Math.max(this.handle.position, d / 2), this.handle.style.transform = `translate(-50%, -50%) translateX(${this.handle.position}px)`, this.filling.style.width = `${this.handle.position}px`;
     }, 0), this.valueInput.addEventListener("change", () => {
@@ -43,13 +43,13 @@ class R {
     }), n;
   }
   _updateHandlePositionFromPointer(e, t = !1) {
-    const i = this.ctrlDiv.offsetWidth, a = this.handle.offsetWidth, s = e.clientX - this.ctrlDiv.prevPosition, o = parseFloat(this.valueInput.value);
+    const i = this.ctrlDiv.offsetWidth, l = this.handle.offsetWidth, s = e.clientX - this.ctrlDiv.prevPosition, o = parseFloat(this.valueInput.value);
     let r;
-    t ? r = e.offsetX : r = this.handle.position + s, r = Math.max(a / 2, Math.min(r, i - a / 2));
-    let n = this.min + (this.max - this.min) * (r - a / 2) / (i - a);
+    t ? r = e.offsetX : r = this.handle.position + s, r = Math.max(l / 2, Math.min(r, i - l / 2));
+    let n = this.min + (this.max - this.min) * (r - l / 2) / (i - l);
     n > o ? n = this._quantizeFloor(n, this.step) : n = this._quantizeCeil(n, this.step), n = parseFloat(n.toFixed(9));
-    const c = parseFloat((o + this.step).toFixed(9)), l = parseFloat((o - this.step).toFixed(9));
-    (n >= c || n <= l) && (n = n.toFixed(this.decimals), this.valueInput.value = n, this.ctrlDiv.prevPosition = e.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${r}px)`, this.handle.position = r, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks());
+    const c = parseFloat((o + this.step).toFixed(9)), a = parseFloat((o - this.step).toFixed(9));
+    (n >= c || n <= a) && (n = n.toFixed(this.decimals), this.valueInput.value = n, this.ctrlDiv.prevPosition = e.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${r}px)`, this.handle.position = r, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks());
   }
   _updateHandlePositionFromValue() {
     const e = this.ctrlDiv.offsetWidth, t = this.handle.offsetWidth;
@@ -59,8 +59,8 @@ class R {
   _triggerCallbacks() {
     this.isObject ? this.obj[this.prop] = parseFloat(this.valueInput.value) : this.callback && this.callback(parseFloat(this.valueInput.value)), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
   }
-  _mapLinear(e, t, i, a, s) {
-    return a + (e - t) * (s - a) / (i - t);
+  _mapLinear(e, t, i, l, s) {
+    return l + (e - t) * (s - l) / (i - t);
   }
   _quantize(e, t) {
     return t * Math.round(e / t);
@@ -106,6 +106,7 @@ const P = (
     gap: 10px;
     color: var(--color-text-dark);
     transition: color var(--transition);
+    padding: 3px;
 }
 
 .p-gui__slider:hover {
@@ -214,7 +215,7 @@ const P = (
     top: 0;
     bottom: 0;
     margin: auto;
-    height: 21px;
+    height: calc(100% - 4px);
     cursor: pointer;
     border-radius: 3px;
     border: 1px solid var(--color-border-2);
@@ -286,7 +287,7 @@ const P = (
     top: 0;
     bottom: 0;
     margin: auto;
-    height: 21px;
+    height: calc(100% - 4px);
     cursor: pointer;
     border-radius: 3px;
     border: 1px solid var(--color-border-2);
@@ -449,12 +450,12 @@ const P = (
     }
     
     .p-gui__folder--closed {
-        height: 32px;
+        height: 25px;
         overflow: hidden;
     }
     
     .p-gui__folder-header {
-        padding: 10px 5px;
+        padding: 5px 3px;
         background-color: rgba(0, 0, 0, .5);
         color: white;
         cursor: pointer;
@@ -481,7 +482,7 @@ const P = (
     }
 `
 );
-function M(U) {
+function M(j) {
   return (
     /* css */
     `
@@ -496,7 +497,7 @@ function M(U) {
         --color-accent-hover: #dddddd;
         --transition: .1s linear;
     
-        position: ${U};
+        position: ${j};
         top: 0;
         left: 0;
         transform: translate3d(0,0,0);
@@ -593,7 +594,7 @@ function M(U) {
     .p-gui__vector2,
     .p-gui__color {
         width: 100%;
-        padding: 7px;
+        padding: 5px 3px;
         cursor: pointer;
         position: relative;
         box-sizing: border-box;
@@ -630,13 +631,13 @@ function M(U) {
 `
   );
 }
-class C {
+class U {
   constructor(e = {}) {
     if (this.firstParent = this, 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;
     }
-    typeof e.onUpdate == "function" && (this.onUpdate = e.onUpdate), this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.opacity = e.opacity || 1, 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), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.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(`${M(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();
+    typeof e.onUpdate == "function" && (this.onUpdate = e.onUpdate), this.label = e != null && typeof e.label == "string" ? e.label : "", this.backgroundColor = e.color || null, this.opacity = e.opacity || 1, 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), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.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(`${M(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);
@@ -684,17 +685,17 @@ class C {
     this.stylesheet.innerHTML += e;
   }
   _addWrapper() {
-    this.wrapper = document.createElement("div"), this.wrapper.id = "p-gui-" + this.instanceId, this.wrapper.className = "p-gui", this.wrapper.setAttribute("data-lenis-prevent", ""), 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);
+    this.wrapper = document.createElement("div"), this.wrapper.id = "p-gui-" + this.instanceId, this.wrapper.className = "p-gui", this.wrapper.setAttribute("data-lenis-prevent", ""), this.container.append(this.wrapper), this.header = document.createElement("div"), this.header.className = "p-gui__header", this.header.textContent = this.label, 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;
+    typeof e != "string" ? typeof e == "object" && (e != null && e.hasOwnProperty("label")) ? i = e.label == "" ? " " : e.label : i = " " : i = e == "" ? " " : e;
+    const l = 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", () => {
+    s.className = "p-gui__button", s.textContent = i, l && s.setAttribute("title", l), 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));
   }
@@ -706,20 +707,20 @@ class C {
       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 || " ";
+    let l = i.replace(/^.*[\\\/]/, ""), s;
+    e.label == null ? s = l : s = typeof e.label == "string" && e.label || " ";
     const o = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null, r = e.selected === !0, n = e.selectionBorder !== !1;
     let c = "";
     e.width && (typeof e.width == "number" && (e.width += "px"), c += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), c += `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 + "); " + c, o && l.setAttribute("title", o), this.imageContainer.append(l), r && n && l.classList.add("p-gui__image--selected");
+    const a = document.createElement("div");
+    a.className = "p-gui__image", a.style = "background-image: url(" + i + "); " + c, o && a.setAttribute("title", o), this.imageContainer.append(a), r && n && a.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 p = l.parentElement.querySelectorAll(".p-gui__image--selected");
+    return d.className = "p-gui__image-text", d.textContent = s, a.append(d), a.addEventListener("click", () => {
+      let p = a.parentElement.querySelectorAll(".p-gui__image--selected");
       for (let h = 0; h < p.length; h++)
         p[h].classList.remove("p-gui__image--selected");
-      n && 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;
+      n && a.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();
+    }), a;
   }
   slider(e = {}, t) {
     const i = new R(this, e, t);
@@ -728,7 +729,7 @@ class C {
   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, r = e.prop, n = typeof e.value == "boolean" ? e.value : null;
+    let i = typeof e.label == "string" && e.label || " ", l = !1, s = null, o = e.obj, r = e.prop, n = typeof e.value == "boolean" ? e.value : null;
     if (n !== null)
       (r != null || o != null) && console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
     else if (r != null && o != null) {
@@ -736,20 +737,20 @@ class C {
         throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof r}.`);
       if (typeof o != "object")
         throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof o}.`);
-      i == " " && (i = r), s = this.propReferences.push(o[r]) - 1, a = !0;
+      i == " " && (i = r), s = this.propReferences.push(o[r]) - 1, l = !0;
     } else
       (r != null && o == null || r == null && o == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
     const c = 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", c && l.setAttribute("title", c), this.wrapper.append(l), l.addEventListener("click", (h) => {
+    const a = document.createElement("div");
+    a.textContent = i, a.className = "p-gui__switch", c && a.setAttribute("title", c), this.wrapper.append(a), a.addEventListener("click", (h) => {
       const u = h.target.childNodes[1];
       let f = !0;
-      u.classList.contains("p-gui__switch-checkbox--active") && (f = !1), u.classList.toggle("p-gui__switch-checkbox--active"), a ? o[r] = f : typeof t == "function" && t(f), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+      u.classList.contains("p-gui__switch-checkbox--active") && (f = !1), u.classList.toggle("p-gui__switch-checkbox--active"), l ? o[r] = f : typeof t == "function" && t(f), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
     });
-    let d = (() => a ? o[r] ? " p-gui__switch-checkbox--active" : "" : n ? " p-gui__switch-checkbox--active" : "")();
+    let d = (() => l ? o[r] ? " p-gui__switch-checkbox--active" : "" : n ? " p-gui__switch-checkbox--active" : "")();
     const p = document.createElement("div");
-    p.className = "p-gui__switch-checkbox" + d, l.append(p), a && Object.defineProperty(o, r, {
+    p.className = "p-gui__switch-checkbox" + d, a.append(p), l && Object.defineProperty(o, r, {
       set: (h) => {
         this.propReferences[s] = h, h ? p.classList.add("p-gui__switch-checkbox--active") : p.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(h);
       },
@@ -759,7 +760,7 @@ class C {
   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, r = e.prop, n = Array.isArray(e.values) ? e.values : null, c, l = typeof n[0] != "string";
+    let i = typeof e.label == "string" ? e.label : " ", l = !1, s = null, o = e.obj, r = e.prop, n = Array.isArray(e.values) ? e.values : null, c, a = typeof n[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 && r === void 0)
       (r != null || o != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), c = (() => {
@@ -779,10 +780,10 @@ class C {
         if (!n)
           return null;
         if (typeof o[r] == "string")
-          return l ? n.find((u) => u.value === o[r]).value : n.indexOf(o[r]);
+          return a ? n.find((u) => u.value === o[r]).value : n.indexOf(o[r]);
         if (typeof o[r] == "number")
-          return l ? n.find((u) => u.value === o[r]).value : o[r];
-      })(), s = this.propReferences.push(o[r]) - 1, a = !0;
+          return a ? n.find((u) => u.value === o[r]).value : o[r];
+      })(), s = this.propReferences.push(o[r]) - 1, l = !0;
     } else
       (r != null && o == null || r == null && o == null) && console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');
     this.imageContainer = null;
@@ -790,17 +791,17 @@ class C {
     p.className = "p-gui__list", p.textContent = i, d && p.setAttribute("title", d), this.wrapper.append(p);
     let h = document.createElement("select");
     p.append(h), h.className = "p-gui__list-dropdown", h.addEventListener("change", (u) => {
-      a ? o[r] = u.target.value : t && t(u.target.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+      l ? o[r] = u.target.value : t && t(u.target.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
     }), n && n.forEach((u, f) => {
-      const g = l ? u.name : u, m = l ? u.value : u;
-      let x = document.createElement("option");
-      x.setAttribute("value", m), x.textContent = g, h.append(x), (!l && c == f || l && c == m) && x.setAttribute("selected", "");
-    }), a && Object.defineProperty(o, r, {
+      const g = a ? u.label : u, x = a ? u.value : u;
+      let v = document.createElement("option");
+      v.setAttribute("value", x), v.textContent = g, h.append(v), (!a && c == f || a && c == x) && v.setAttribute("selected", "");
+    }), l && Object.defineProperty(o, r, {
       set: (u) => {
-        let f, g, m;
-        l ? (m = n.find((v) => v.value == u), g = (m == null ? void 0 : m.value) || n[0].value, f = n.indexOf(m)) : (typeof u == "string" && (f = n.indexOf(u), g = u), typeof u == "number" && (f = u, g = n[u])), this.propReferences[s] = l ? g : u;
-        const x = h.querySelector("[selected]");
-        x && x.removeAttribute("selected"), h.querySelectorAll("option")[f].setAttribute("selected", ""), typeof t == "function" && t(l ? m : g, f);
+        let f, g, x;
+        a ? (x = n.find((m) => m.value == u), g = (x == null ? void 0 : x.value) || n[0].value, f = n.indexOf(x)) : (typeof u == "string" && (f = n.indexOf(u), g = u), typeof u == "number" && (f = u, g = n[u])), this.propReferences[s] = a ? g : u;
+        const v = h.querySelector("[selected]");
+        v && v.removeAttribute("selected"), h.querySelectorAll("option")[f].setAttribute("selected", ""), typeof t == "function" && t(a ? x : g, f);
       },
       get: () => this.propReferences[s]
     });
@@ -808,7 +809,7 @@ class C {
   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, r = e.prop, n;
+    let i = typeof e.label == "string" && e.label || " ", l = !1, s = null, o = e.obj, r = e.prop, n;
     const c = 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}".`) : n = e.value), n || (n = "#000000"), e.value !== void 0)
       (r != null || o != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
@@ -817,16 +818,16 @@ class C {
         throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof r}.`);
       if (typeof o != "object")
         throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof o}.`);
-      i == " " && (i = r), s = this.propReferences.push(o[r]) - 1, a = !0;
+      i == " " && (i = r), s = this.propReferences.push(o[r]) - 1, l = !0;
     } else
       (r != null && o == null || r == 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, c && l.setAttribute("title", c), this.wrapper.append(l);
+    const a = document.createElement("div");
+    a.className = "p-gui__color", a.textContent = i, c && a.setAttribute("title", c), this.wrapper.append(a);
     const d = document.createElement("input");
-    d.className = "p-gui__color-picker", d.setAttribute("type", "color"), d.value = n, l.append(d), typeof t == "function" && d.addEventListener("input", () => {
-      a ? o[r] = d.value : typeof t == "function" && t(d.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    }), a && Object.defineProperty(o, r, {
+    d.className = "p-gui__color-picker", d.setAttribute("type", "color"), d.value = n, a.append(d), typeof t == "function" && d.addEventListener("input", () => {
+      l ? o[r] = d.value : typeof t == "function" && t(d.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+    }), l && Object.defineProperty(o, r, {
       set: (p) => {
         this.propReferences[s] = p, d.value = p, typeof t == "function" && t(p);
       },
@@ -836,17 +837,17 @@ class C {
   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, r = e.y.max ?? 1, n = e.x.step || (s - a) / 100, c = e.y.step || (r - o) / 100, l = this._countDecimals(n), d = this._countDecimals(c), p = e.x.obj, h = e.x.prop, u = this.propReferences.push(p[h]) - 1, f = e.y.obj, g = e.y.prop, m = this.propReferences.push(f[g]) - 1, x = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
+    let i = typeof e.label == "string" && e.label || " ";
+    const l = e.x.min ?? 0, s = e.x.max ?? 1, o = e.y.min ?? 0, r = e.y.max ?? 1, n = e.x.step || (s - l) / 100, c = e.y.step || (r - o) / 100, a = this._countDecimals(n), d = this._countDecimals(c), p = e.x.obj, h = e.x.prop, u = this.propReferences.push(p[h]) - 1, f = e.y.obj, g = e.y.prop, x = this.propReferences.push(f[g]) - 1, v = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
     t = typeof t == "function" ? t : null, this.imageContainer = null;
-    const v = document.createElement("div");
-    v.className = "p-gui__vector2", v.textContent = i, x && v.setAttribute("title", x), this.wrapper.append(v);
+    const m = document.createElement("div");
+    m.className = "p-gui__vector2", m.textContent = i, v && m.setAttribute("title", v), this.wrapper.append(m);
     const y = document.createElement("div");
-    y.className = "p-gui__vector-value", y.textContent = p[h] + ", " + f[g], v.append(y);
+    y.className = "p-gui__vector-value", y.textContent = p[h] + ", " + f[g], m.append(y);
     const b = document.createElement("div");
-    b.className = "p-gui__vector2-area", v.append(b), b.addEventListener("click", (_) => {
-      const k = parseFloat(this._mapLinear(_.offsetX, 0, b.clientWidth, a, s)), E = parseFloat(this._mapLinear(_.offsetY, 0, b.clientHeight, r, o));
-      p[h] = k.toFixed(l), f[g] = E.toFixed(d), t && t(p[h], p[g]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+    b.className = "p-gui__vector2-area", m.append(b), b.addEventListener("click", (_) => {
+      const k = parseFloat(this._mapLinear(_.offsetX, 0, b.clientWidth, l, s)), E = parseFloat(this._mapLinear(_.offsetY, 0, b.clientHeight, r, o));
+      p[h] = k.toFixed(a), f[g] = E.toFixed(d), t && t(p[h], p[g]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
     });
     let A = !1;
     b.addEventListener("pointerdown", (_) => {
@@ -855,33 +856,33 @@ class C {
       A = !1;
     }), b.addEventListener("pointermove", (_) => {
       if (A) {
-        const k = parseFloat(this._mapLinear(_.offsetX, 0, b.clientWidth, a, s)), E = parseFloat(this._mapLinear(_.offsetY, 0, b.clientHeight, r, o));
-        p[h] = k.toFixed(l), f[g] = E.toFixed(d), t && t(p[h], p[g]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+        const k = parseFloat(this._mapLinear(_.offsetX, 0, b.clientWidth, l, s)), E = parseFloat(this._mapLinear(_.offsetY, 0, b.clientHeight, r, o));
+        p[h] = k.toFixed(a), f[g] = E.toFixed(d), t && t(p[h], p[g]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
       }
     });
-    const j = document.createElement("div");
-    j.className = "p-gui__vector2-line p-gui__vector2-line-x", b.append(j);
     const I = document.createElement("div");
-    I.className = "p-gui__vector2-line p-gui__vector2-line-y", b.append(I);
+    I.className = "p-gui__vector2-line p-gui__vector2-line-x", b.append(I);
+    const C = document.createElement("div");
+    C.className = "p-gui__vector2-line p-gui__vector2-line-y", b.append(C);
     const w = document.createElement("div");
-    w.className = "p-gui__vector2-dot", b.append(w), w.style.left = this._mapLinear(p[h], a, s, 0, b.clientWidth) + "px", w.style.top = this._mapLinear(f[g], o, r, b.clientHeight, 0) + "px", Object.defineProperty(p, h, {
+    w.className = "p-gui__vector2-dot", b.append(w), w.style.left = this._mapLinear(p[h], l, s, 0, b.clientWidth) + "px", w.style.top = this._mapLinear(f[g], o, r, b.clientHeight, 0) + "px", Object.defineProperty(p, h, {
       set: (_) => {
-        this.propReferences[u] = _, w.style.left = this._mapLinear(_, a, s, 0, b.clientWidth) + "px", y.textContent = String(_) + ", " + f[g];
+        this.propReferences[u] = _, w.style.left = this._mapLinear(_, l, s, 0, b.clientWidth) + "px", y.textContent = String(_) + ", " + f[g];
       },
       get: () => this.propReferences[u]
     }), Object.defineProperty(f, g, {
       set: (_) => {
-        this.propReferences[m] = _, w.style.top = this._mapLinear(_, o, r, b.clientHeight, 0) + "px", y.textContent = p[h] + ", " + String(_);
+        this.propReferences[x] = _, w.style.top = this._mapLinear(_, o, r, b.clientHeight, 0) + "px", y.textContent = p[h] + ", " + String(_);
       },
-      get: () => this.propReferences[m]
+      get: () => this.propReferences[x]
     });
   }
   folder(e = {}) {
-    let t = typeof e.closed == "boolean" ? e.closed : !1, i = e.name || "", a = e.color || null, s = e.maxHeight || null;
+    let t = typeof e.closed == "boolean" ? e.closed : !1, i = e.label || "", l = 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 r = a ? `background-color: ${a};` : "";
+    let r = l ? `background-color: ${l};` : "";
     r += s ? `max-height: ${s}px;` : "";
     const n = document.createElement("div");
     n.className = o, n.style = r, this.wrapper.append(n);
@@ -889,23 +890,23 @@ class C {
     c.innerHTML = `<span class="p-gui__folder-arrow"></span>${i}`, c.className = "p-gui__folder-header", n.append(c), c.addEventListener("click", () => {
       n.classList.toggle("p-gui__folder--closed");
     });
-    let l = new C({ isFolder: !0, folderOptions: {
+    let a = new U({ isFolder: !0, folderOptions: {
       wrapper: n,
       parent: this,
       firstParent: this.firstParent
     } });
-    return this.folders.push(l), l;
+    return this.folders.push(a), a;
   }
   _makeDraggable() {
     var e = this;
-    this.header.addEventListener("pointerdown", t), this.header.addEventListener("pointerup", a);
+    this.header.addEventListener("pointerdown", t), this.header.addEventListener("pointerup", l);
     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) {
+    function l(s) {
       document.removeEventListener("pointermove", i);
     }
   }
@@ -915,14 +916,18 @@ class C {
   kill() {
     this.wrapper.remove();
   }
-  _mapLinear(e, t, i, a, s) {
-    return a + (e - t) * (s - a) / (i - t);
+  _mapLinear(e, t, i, l, s) {
+    return l + (e - t) * (s - l) / (i - t);
   }
   _countDecimals(e) {
     const t = e.toString(), i = t.indexOf(".");
     return i === -1 ? 0 : t.length - i - 1;
   }
+  static registerPlugin(e) {
+    for (let t in e)
+      U.prototype[t] = e[t];
+  }
 }
 export {
-  C as default
+  U as default
 };

package/dist/perfect-gui.umd.js

@@ -1,4 +1,4 @@
-(function(y,A){typeof exports=="object"&&typeof module<"u"?module.exports=A():typeof define=="function"&&define.amd?define(A):(y=typeof globalThis<"u"?globalThis:y||self,y["Perfect GUI"]=A())})(this,function(){"use strict";class y{constructor(e,t={},i){if(this.parent=e,this.propReferences=[],typeof t!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof t}.`);let a=typeof t.name=="string"&&t.name||" ";this.isObject=!1;let s=null;this.obj=t.obj,this.prop=t.prop;let o=typeof t.value=="number"?t.value:null;if(this.min=t.min??0,this.max=t.max??1,this.step=t.step||(this.max-this.min)/100,this.decimals=this.parent._countDecimals(this.step),this.callback=typeof i=="function"?i:null,o!==null)(this.prop!=null||this.obj!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(this.prop!=null&&this.obj!=null){if(typeof this.prop!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof this.prop}.`);if(typeof this.obj!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof this.obj}.`);a==" "&&(a=this.prop),s=this.propReferences.push(this.obj[this.prop])-1,this.isObject=!0}else(this.prop!=null&&this.obj==null||this.prop==null&&this.obj!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),o=(this.max-this.min)/2;const r=typeof t.tooltip=="string"?t.tooltip:t.tooltip===!0?a:null;this.imageContainer=null;const n=document.createElement("div");n.className="p-gui__slider",r&&n.setAttribute("title",r);const c=document.createElement("div");c.className="p-gui__slider-name",c.textContent=a,n.append(c),this.ctrlDiv=document.createElement("div"),this.ctrlDiv.className="p-gui__slider-ctrl",this.ctrlDiv.setAttribute("type","range"),this.ctrlDiv.setAttribute("min",this.min),this.ctrlDiv.setAttribute("max",this.max),n.append(this.ctrlDiv);const l=document.createElement("div");return l.className="p-gui__slider-bar",this.ctrlDiv.append(l),this.handle=document.createElement("div"),this.handle.className="p-gui__slider-handle",this.ctrlDiv.append(this.handle),this.filling=document.createElement("div"),this.filling.className="p-gui__slider-filling",l.append(this.filling),this.valueInput=document.createElement("input"),this.valueInput.className="p-gui__slider-value",this.valueInput.value=this.isObject?this.obj[this.prop]:o,n.append(this.valueInput),setTimeout(()=>{const d=this.handle.offsetWidth;this.handle.position=this._mapLinear(this.valueInput.value,this.min,this.max,d/2,88-d/2),this.handle.position=Math.min(this.handle.position,88-d/2),this.handle.position=Math.max(this.handle.position,d/2),this.handle.style.transform=`translate(-50%, -50%) translateX(${this.handle.position}px)`,this.filling.style.width=`${this.handle.position}px`},0),this.valueInput.addEventListener("change",()=>{this._updateHandlePositionFromValue(),this._triggerCallbacks()}),this.ctrlDiv.addEventListener("pointerdown",d=>{this.ctrlDiv.pointerDown=!0,this.ctrlDiv.prevPosition=d.clientX,this._updateHandlePositionFromPointer(d,!0)}),window.addEventListener("pointerup",d=>{this.ctrlDiv.pointerDown=!1}),window.addEventListener("pointermove",d=>{this.ctrlDiv.pointerDown&&(this.ctrlDiv.pointerDelta=d.clientX-this.ctrlDiv.prevPosition,this._updateHandlePositionFromPointer(d))}),this.isObject&&Object.defineProperty(this.obj,this.prop,{set:d=>{this.propReferences[s]=d,this.valueInput.value=d,this._updateHandlePositionFromValue(),this.callback&&this.callback(parseFloat(this.valueInput.value))},get:()=>this.propReferences[s]}),n}_updateHandlePositionFromPointer(e,t=!1){const i=this.ctrlDiv.offsetWidth,a=this.handle.offsetWidth,s=e.clientX-this.ctrlDiv.prevPosition,o=parseFloat(this.valueInput.value);let r;t?r=e.offsetX:r=this.handle.position+s,r=Math.max(a/2,Math.min(r,i-a/2));let n=this.min+(this.max-this.min)*(r-a/2)/(i-a);n>o?n=this._quantizeFloor(n,this.step):n=this._quantizeCeil(n,this.step),n=parseFloat(n.toFixed(9));const c=parseFloat((o+this.step).toFixed(9)),l=parseFloat((o-this.step).toFixed(9));(n>=c||n<=l)&&(n=n.toFixed(this.decimals),this.valueInput.value=n,this.ctrlDiv.prevPosition=e.clientX,this.handle.style.transform=`translate(-50%, -50%) translateX(${r}px)`,this.handle.position=r,this.filling.style.width=this.handle.position+"px",this._triggerCallbacks())}_updateHandlePositionFromValue(){const e=this.ctrlDiv.offsetWidth,t=this.handle.offsetWidth;let i=this._mapLinear(this.valueInput.value,this.min,this.max,t/2,e-t/2);i=Math.max(t/2,Math.min(i,e-t/2)),this.handle.style.transform=`translate(-50%, -50%) translateX(${i}px)`,this.handle.position=i,this.filling.style.width=this.handle.position+"px"}_triggerCallbacks(){this.isObject?this.obj[this.prop]=parseFloat(this.valueInput.value):this.callback&&this.callback(parseFloat(this.valueInput.value)),this.parent.onUpdate?this.parent.onUpdate():this.parent.isFolder&&this.parent.firstParent.onUpdate&&this.parent.firstParent.onUpdate()}_mapLinear(e,t,i,a,s){return a+(e-t)*(s-a)/(i-t)}_quantize(e,t){return t*Math.round(e/t)}_quantizeCeil(e,t){return t*Math.ceil(e/t)}_quantizeFloor(e,t){return t*Math.floor(e/t)}}const A=`
+(function(y,A){typeof exports=="object"&&typeof module<"u"?module.exports=A():typeof define=="function"&&define.amd?define(A):(y=typeof globalThis<"u"?globalThis:y||self,y["Perfect GUI"]=A())})(this,function(){"use strict";class y{constructor(e,t={},i){if(this.parent=e,this.propReferences=[],typeof t!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof t}.`);let l=typeof t.label=="string"&&t.label||" ";this.isObject=!1;let s=null;this.obj=t.obj,this.prop=t.prop;let o=typeof t.value=="number"?t.value:null;if(this.min=t.min??0,this.max=t.max??1,this.step=t.step||(this.max-this.min)/100,this.decimals=this.parent._countDecimals(this.step),this.callback=typeof i=="function"?i:null,o!==null)(this.prop!=null||this.obj!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(this.prop!=null&&this.obj!=null){if(typeof this.prop!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof this.prop}.`);if(typeof this.obj!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof this.obj}.`);l==" "&&(l=this.prop),s=this.propReferences.push(this.obj[this.prop])-1,this.isObject=!0}else(this.prop!=null&&this.obj==null||this.prop==null&&this.obj!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),o=(this.max-this.min)/2;const r=typeof t.tooltip=="string"?t.tooltip:t.tooltip===!0?l:null;this.imageContainer=null;const n=document.createElement("div");n.className="p-gui__slider",r&&n.setAttribute("title",r);const c=document.createElement("div");c.className="p-gui__slider-name",c.textContent=l,n.append(c),this.ctrlDiv=document.createElement("div"),this.ctrlDiv.className="p-gui__slider-ctrl",this.ctrlDiv.setAttribute("type","range"),this.ctrlDiv.setAttribute("min",this.min),this.ctrlDiv.setAttribute("max",this.max),n.append(this.ctrlDiv);const a=document.createElement("div");return a.className="p-gui__slider-bar",this.ctrlDiv.append(a),this.handle=document.createElement("div"),this.handle.className="p-gui__slider-handle",this.ctrlDiv.append(this.handle),this.filling=document.createElement("div"),this.filling.className="p-gui__slider-filling",a.append(this.filling),this.valueInput=document.createElement("input"),this.valueInput.className="p-gui__slider-value",this.valueInput.value=this.isObject?this.obj[this.prop]:o,n.append(this.valueInput),setTimeout(()=>{const d=this.handle.offsetWidth;this.handle.position=this._mapLinear(this.valueInput.value,this.min,this.max,d/2,88-d/2),this.handle.position=Math.min(this.handle.position,88-d/2),this.handle.position=Math.max(this.handle.position,d/2),this.handle.style.transform=`translate(-50%, -50%) translateX(${this.handle.position}px)`,this.filling.style.width=`${this.handle.position}px`},0),this.valueInput.addEventListener("change",()=>{this._updateHandlePositionFromValue(),this._triggerCallbacks()}),this.ctrlDiv.addEventListener("pointerdown",d=>{this.ctrlDiv.pointerDown=!0,this.ctrlDiv.prevPosition=d.clientX,this._updateHandlePositionFromPointer(d,!0)}),window.addEventListener("pointerup",d=>{this.ctrlDiv.pointerDown=!1}),window.addEventListener("pointermove",d=>{this.ctrlDiv.pointerDown&&(this.ctrlDiv.pointerDelta=d.clientX-this.ctrlDiv.prevPosition,this._updateHandlePositionFromPointer(d))}),this.isObject&&Object.defineProperty(this.obj,this.prop,{set:d=>{this.propReferences[s]=d,this.valueInput.value=d,this._updateHandlePositionFromValue(),this.callback&&this.callback(parseFloat(this.valueInput.value))},get:()=>this.propReferences[s]}),n}_updateHandlePositionFromPointer(e,t=!1){const i=this.ctrlDiv.offsetWidth,l=this.handle.offsetWidth,s=e.clientX-this.ctrlDiv.prevPosition,o=parseFloat(this.valueInput.value);let r;t?r=e.offsetX:r=this.handle.position+s,r=Math.max(l/2,Math.min(r,i-l/2));let n=this.min+(this.max-this.min)*(r-l/2)/(i-l);n>o?n=this._quantizeFloor(n,this.step):n=this._quantizeCeil(n,this.step),n=parseFloat(n.toFixed(9));const c=parseFloat((o+this.step).toFixed(9)),a=parseFloat((o-this.step).toFixed(9));(n>=c||n<=a)&&(n=n.toFixed(this.decimals),this.valueInput.value=n,this.ctrlDiv.prevPosition=e.clientX,this.handle.style.transform=`translate(-50%, -50%) translateX(${r}px)`,this.handle.position=r,this.filling.style.width=this.handle.position+"px",this._triggerCallbacks())}_updateHandlePositionFromValue(){const e=this.ctrlDiv.offsetWidth,t=this.handle.offsetWidth;let i=this._mapLinear(this.valueInput.value,this.min,this.max,t/2,e-t/2);i=Math.max(t/2,Math.min(i,e-t/2)),this.handle.style.transform=`translate(-50%, -50%) translateX(${i}px)`,this.handle.position=i,this.filling.style.width=this.handle.position+"px"}_triggerCallbacks(){this.isObject?this.obj[this.prop]=parseFloat(this.valueInput.value):this.callback&&this.callback(parseFloat(this.valueInput.value)),this.parent.onUpdate?this.parent.onUpdate():this.parent.isFolder&&this.parent.firstParent.onUpdate&&this.parent.firstParent.onUpdate()}_mapLinear(e,t,i,l,s){return l+(e-t)*(s-l)/(i-t)}_quantize(e,t){return t*Math.round(e/t)}_quantizeCeil(e,t){return t*Math.ceil(e/t)}_quantizeFloor(e,t){return t*Math.floor(e/t)}}const A=`
 .p-gui__button {
     background: var(--color-accent);
     text-align: center;
@@ -27,6 +27,7 @@
     gap: 10px;
     color: var(--color-text-dark);
     transition: color var(--transition);
+    padding: 3px;
 }
 
 .p-gui__slider:hover {
@@ -132,7 +133,7 @@
     top: 0;
     bottom: 0;
     margin: auto;
-    height: 21px;
+    height: calc(100% - 4px);
     cursor: pointer;
     border-radius: 3px;
     border: 1px solid var(--color-border-2);
@@ -198,7 +199,7 @@
     top: 0;
     bottom: 0;
     margin: auto;
-    height: 21px;
+    height: calc(100% - 4px);
     cursor: pointer;
     border-radius: 3px;
     border: 1px solid var(--color-border-2);
@@ -352,12 +353,12 @@
     }
     
     .p-gui__folder--closed {
-        height: 32px;
+        height: 25px;
         overflow: hidden;
     }
     
     .p-gui__folder-header {
-        padding: 10px 5px;
+        padding: 5px 3px;
         background-color: rgba(0, 0, 0, .5);
         color: white;
         cursor: pointer;
@@ -491,7 +492,7 @@
     .p-gui__vector2,
     .p-gui__color {
         width: 100%;
-        padding: 7px;
+        padding: 5px 3px;
         cursor: pointer;
         position: relative;
         box-sizing: border-box;
@@ -525,11 +526,11 @@
     ${L}
     
     ${N}
-`}class E{constructor(e={}){if(this.firstParent=this,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}typeof e.onUpdate=="function"&&(this.onUpdate=e.onUpdate),this.name=e!=null&&typeof e.name=="string"?e.name:"",this.backgroundColor=e.color||null,this.opacity=e.opacity||1,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),window.perfectGUI||(window.perfectGUI={}),window.perfectGUI.instanceCounter==null?window.perfectGUI.instanceCounter=0:window.perfectGUI.instanceCounter++,this.instanceId=window.perfectGUI.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(`${M(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 i=0;i<t.length;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.yOffset=0,this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this._addStyles(`#p-gui-${this.instanceId} {
+`}class E{constructor(e={}){if(this.firstParent=this,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}typeof e.onUpdate=="function"&&(this.onUpdate=e.onUpdate),this.label=e!=null&&typeof e.label=="string"?e.label:"",this.backgroundColor=e.color||null,this.opacity=e.opacity||1,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),window.perfectGUI||(window.perfectGUI={}),window.perfectGUI.instanceCounter==null?window.perfectGUI.instanceCounter=0:window.perfectGUI.instanceCounter++,this.instanceId=window.perfectGUI.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(`${M(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 i=0;i<t.length;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.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+";":""}
             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.wrapper.setAttribute("data-lenis-prevent",""),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,r=e.selected===!0,n=e.selectionBorder!==!1;let c="";e.width&&(typeof e.width=="number"&&(e.width+="px"),c+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),c+=`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+"); "+c,o&&l.setAttribute("title",o),this.imageContainer.append(l),r&&n&&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 p=l.parentElement.querySelectorAll(".p-gui__image--selected");for(let h=0;h<p.length;h++)p[h].classList.remove("p-gui__image--selected");n&&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 y(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,r=e.prop,n=typeof e.value=="boolean"?e.value:null;if(n!==null)(r!=null||o!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(r!=null&&o!=null){if(typeof r!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof o!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof o}.`);i==" "&&(i=r),s=this.propReferences.push(o[r])-1,a=!0}else(r!=null&&o==null||r==null&&o==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');const c=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",c&&l.setAttribute("title",c),this.wrapper.append(l),l.addEventListener("click",h=>{const u=h.target.childNodes[1];let f=!0;u.classList.contains("p-gui__switch-checkbox--active")&&(f=!1),u.classList.toggle("p-gui__switch-checkbox--active"),a?o[r]=f:typeof t=="function"&&t(f),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let d=(()=>a?o[r]?" p-gui__switch-checkbox--active":"":n?" p-gui__switch-checkbox--active":"")();const p=document.createElement("div");p.className="p-gui__switch-checkbox"+d,l.append(p),a&&Object.defineProperty(o,r,{set:h=>{this.propReferences[s]=h,h?p.classList.add("p-gui__switch-checkbox--active"):p.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(h)},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,r=e.prop,n=Array.isArray(e.values)?e.values:null,c,l=typeof n[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&&r===void 0)(r!=null||o!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),c=(()=>{if(!n)return null;if(typeof e.value=="string")return n.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(r!=null&&o!=null){if(typeof r!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof o!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof o}.`);c=(()=>{if(!n)return null;if(typeof o[r]=="string")return l?n.find(u=>u.value===o[r]).value:n.indexOf(o[r]);if(typeof o[r]=="number")return l?n.find(u=>u.value===o[r]).value:o[r]})(),s=this.propReferences.push(o[r])-1,a=!0}else(r!=null&&o==null||r==null&&o==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let p=document.createElement("div");p.className="p-gui__list",p.textContent=i,d&&p.setAttribute("title",d),this.wrapper.append(p);let h=document.createElement("select");p.append(h),h.className="p-gui__list-dropdown",h.addEventListener("change",u=>{a?o[r]=u.target.value:t&&t(u.target.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),n&&n.forEach((u,f)=>{const g=l?u.name:u,m=l?u.value:u;let x=document.createElement("option");x.setAttribute("value",m),x.textContent=g,h.append(x),(!l&&c==f||l&&c==m)&&x.setAttribute("selected","")}),a&&Object.defineProperty(o,r,{set:u=>{let f,g,m;l?(m=n.find(v=>v.value==u),g=(m==null?void 0:m.value)||n[0].value,f=n.indexOf(m)):(typeof u=="string"&&(f=n.indexOf(u),g=u),typeof u=="number"&&(f=u,g=n[u])),this.propReferences[s]=l?g:u;const x=h.querySelector("[selected]");x&&x.removeAttribute("selected"),h.querySelectorAll("option")[f].setAttribute("selected",""),typeof t=="function"&&t(l?m:g,f)},get:()=>this.propReferences[s]})}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,r=e.prop,n;const c=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}".`):n=e.value),n||(n="#000000"),e.value!==void 0)(r!=null||o!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(r!=null&&o!=null){if(typeof r!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof o!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof o}.`);i==" "&&(i=r),s=this.propReferences.push(o[r])-1,a=!0}else(r!=null&&o==null||r==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,c&&l.setAttribute("title",c),this.wrapper.append(l);const d=document.createElement("input");d.className="p-gui__color-picker",d.setAttribute("type","color"),d.value=n,l.append(d),typeof t=="function"&&d.addEventListener("input",()=>{a?o[r]=d.value:typeof t=="function"&&t(d.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),a&&Object.defineProperty(o,r,{set:p=>{this.propReferences[s]=p,d.value=p,typeof t=="function"&&t(p)},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,r=e.y.max??1,n=e.x.step||(s-a)/100,c=e.y.step||(r-o)/100,l=this._countDecimals(n),d=this._countDecimals(c),p=e.x.obj,h=e.x.prop,u=this.propReferences.push(p[h])-1,f=e.y.obj,g=e.y.prop,m=this.propReferences.push(f[g])-1,x=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;t=typeof t=="function"?t:null,this.imageContainer=null;const v=document.createElement("div");v.className="p-gui__vector2",v.textContent=i,x&&v.setAttribute("title",x),this.wrapper.append(v);const k=document.createElement("div");k.className="p-gui__vector-value",k.textContent=p[h]+", "+f[g],v.append(k);const b=document.createElement("div");b.className="p-gui__vector2-area",v.append(b),b.addEventListener("click",_=>{const j=parseFloat(this._mapLinear(_.offsetX,0,b.clientWidth,a,s)),I=parseFloat(this._mapLinear(_.offsetY,0,b.clientHeight,r,o));p[h]=j.toFixed(l),f[g]=I.toFixed(d),t&&t(p[h],p[g]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let U=!1;b.addEventListener("pointerdown",_=>{U=!0}),b.addEventListener("pointerup",()=>{U=!1}),b.addEventListener("pointermove",_=>{if(U){const j=parseFloat(this._mapLinear(_.offsetX,0,b.clientWidth,a,s)),I=parseFloat(this._mapLinear(_.offsetY,0,b.clientHeight,r,o));p[h]=j.toFixed(l),f[g]=I.toFixed(d),t&&t(p[h],p[g]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}});const R=document.createElement("div");R.className="p-gui__vector2-line p-gui__vector2-line-x",b.append(R);const P=document.createElement("div");P.className="p-gui__vector2-line p-gui__vector2-line-y",b.append(P);const w=document.createElement("div");w.className="p-gui__vector2-dot",b.append(w),w.style.left=this._mapLinear(p[h],a,s,0,b.clientWidth)+"px",w.style.top=this._mapLinear(f[g],o,r,b.clientHeight,0)+"px",Object.defineProperty(p,h,{set:_=>{this.propReferences[u]=_,w.style.left=this._mapLinear(_,a,s,0,b.clientWidth)+"px",k.textContent=String(_)+", "+f[g]},get:()=>this.propReferences[u]}),Object.defineProperty(f,g,{set:_=>{this.propReferences[m]=_,w.style.top=this._mapLinear(_,o,r,b.clientHeight,0)+"px",k.textContent=p[h]+", "+String(_)},get:()=>this.propReferences[m]})}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 r=a?`background-color: ${a};`:"";r+=s?`max-height: ${s}px;`:"";const n=document.createElement("div");n.className=o,n.style=r,this.wrapper.append(n);const c=document.createElement("div");c.innerHTML=`<span class="p-gui__folder-arrow"></span>${i}`,c.className="p-gui__folder-header",n.append(c),c.addEventListener("click",()=>{n.classList.toggle("p-gui__folder--closed")});let l=new E({isFolder:!0,folderOptions:{wrapper:n,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)}_countDecimals(e){const t=e.toString(),i=t.indexOf(".");return i===-1?0:t.length-i-1}}return E});
+        }`)}_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.wrapper.setAttribute("data-lenis-prevent",""),this.container.append(this.wrapper),this.header=document.createElement("div"),this.header.className="p-gui__header",this.header.textContent=this.label,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("label"))?i=e.label==""?" ":e.label:i=" ":i=e==""?" ":e;const l=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,l&&s.setAttribute("title",l),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 l=i.replace(/^.*[\\\/]/,""),s;e.label==null?s=l:s=typeof e.label=="string"&&e.label||" ";const o=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?s:null,r=e.selected===!0,n=e.selectionBorder!==!1;let c="";e.width&&(typeof e.width=="number"&&(e.width+="px"),c+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),c+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const a=document.createElement("div");a.className="p-gui__image",a.style="background-image: url("+i+"); "+c,o&&a.setAttribute("title",o),this.imageContainer.append(a),r&&n&&a.classList.add("p-gui__image--selected");const d=document.createElement("div");return d.className="p-gui__image-text",d.textContent=s,a.append(d),a.addEventListener("click",()=>{let p=a.parentElement.querySelectorAll(".p-gui__image--selected");for(let h=0;h<p.length;h++)p[h].classList.remove("p-gui__image--selected");n&&a.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()}),a}slider(e={},t){const i=new y(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.label=="string"&&e.label||" ",l=!1,s=null,o=e.obj,r=e.prop,n=typeof e.value=="boolean"?e.value:null;if(n!==null)(r!=null||o!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(r!=null&&o!=null){if(typeof r!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof o!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof o}.`);i==" "&&(i=r),s=this.propReferences.push(o[r])-1,l=!0}else(r!=null&&o==null||r==null&&o==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');const c=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;this.imageContainer=null;const a=document.createElement("div");a.textContent=i,a.className="p-gui__switch",c&&a.setAttribute("title",c),this.wrapper.append(a),a.addEventListener("click",h=>{const u=h.target.childNodes[1];let f=!0;u.classList.contains("p-gui__switch-checkbox--active")&&(f=!1),u.classList.toggle("p-gui__switch-checkbox--active"),l?o[r]=f:typeof t=="function"&&t(f),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let d=(()=>l?o[r]?" p-gui__switch-checkbox--active":"":n?" p-gui__switch-checkbox--active":"")();const p=document.createElement("div");p.className="p-gui__switch-checkbox"+d,a.append(p),l&&Object.defineProperty(o,r,{set:h=>{this.propReferences[s]=h,h?p.classList.add("p-gui__switch-checkbox--active"):p.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(h)},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.label=="string"?e.label:" ",l=!1,s=null,o=e.obj,r=e.prop,n=Array.isArray(e.values)?e.values:null,c,a=typeof n[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&&r===void 0)(r!=null||o!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),c=(()=>{if(!n)return null;if(typeof e.value=="string")return n.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(r!=null&&o!=null){if(typeof r!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof o!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof o}.`);c=(()=>{if(!n)return null;if(typeof o[r]=="string")return a?n.find(u=>u.value===o[r]).value:n.indexOf(o[r]);if(typeof o[r]=="number")return a?n.find(u=>u.value===o[r]).value:o[r]})(),s=this.propReferences.push(o[r])-1,l=!0}else(r!=null&&o==null||r==null&&o==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let p=document.createElement("div");p.className="p-gui__list",p.textContent=i,d&&p.setAttribute("title",d),this.wrapper.append(p);let h=document.createElement("select");p.append(h),h.className="p-gui__list-dropdown",h.addEventListener("change",u=>{l?o[r]=u.target.value:t&&t(u.target.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),n&&n.forEach((u,f)=>{const g=a?u.label:u,x=a?u.value:u;let v=document.createElement("option");v.setAttribute("value",x),v.textContent=g,h.append(v),(!a&&c==f||a&&c==x)&&v.setAttribute("selected","")}),l&&Object.defineProperty(o,r,{set:u=>{let f,g,x;a?(x=n.find(m=>m.value==u),g=(x==null?void 0:x.value)||n[0].value,f=n.indexOf(x)):(typeof u=="string"&&(f=n.indexOf(u),g=u),typeof u=="number"&&(f=u,g=n[u])),this.propReferences[s]=a?g:u;const v=h.querySelector("[selected]");v&&v.removeAttribute("selected"),h.querySelectorAll("option")[f].setAttribute("selected",""),typeof t=="function"&&t(a?x:g,f)},get:()=>this.propReferences[s]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.label=="string"&&e.label||" ",l=!1,s=null,o=e.obj,r=e.prop,n;const c=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}".`):n=e.value),n||(n="#000000"),e.value!==void 0)(r!=null||o!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(r!=null&&o!=null){if(typeof r!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof o!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof o}.`);i==" "&&(i=r),s=this.propReferences.push(o[r])-1,l=!0}else(r!=null&&o==null||r==null&&o==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const a=document.createElement("div");a.className="p-gui__color",a.textContent=i,c&&a.setAttribute("title",c),this.wrapper.append(a);const d=document.createElement("input");d.className="p-gui__color-picker",d.setAttribute("type","color"),d.value=n,a.append(d),typeof t=="function"&&d.addEventListener("input",()=>{l?o[r]=d.value:typeof t=="function"&&t(d.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),l&&Object.defineProperty(o,r,{set:p=>{this.propReferences[s]=p,d.value=p,typeof t=="function"&&t(p)},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.label=="string"&&e.label||" ";const l=e.x.min??0,s=e.x.max??1,o=e.y.min??0,r=e.y.max??1,n=e.x.step||(s-l)/100,c=e.y.step||(r-o)/100,a=this._countDecimals(n),d=this._countDecimals(c),p=e.x.obj,h=e.x.prop,u=this.propReferences.push(p[h])-1,f=e.y.obj,g=e.y.prop,x=this.propReferences.push(f[g])-1,v=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;t=typeof t=="function"?t:null,this.imageContainer=null;const m=document.createElement("div");m.className="p-gui__vector2",m.textContent=i,v&&m.setAttribute("title",v),this.wrapper.append(m);const k=document.createElement("div");k.className="p-gui__vector-value",k.textContent=p[h]+", "+f[g],m.append(k);const b=document.createElement("div");b.className="p-gui__vector2-area",m.append(b),b.addEventListener("click",_=>{const j=parseFloat(this._mapLinear(_.offsetX,0,b.clientWidth,l,s)),I=parseFloat(this._mapLinear(_.offsetY,0,b.clientHeight,r,o));p[h]=j.toFixed(a),f[g]=I.toFixed(d),t&&t(p[h],p[g]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let U=!1;b.addEventListener("pointerdown",_=>{U=!0}),b.addEventListener("pointerup",()=>{U=!1}),b.addEventListener("pointermove",_=>{if(U){const j=parseFloat(this._mapLinear(_.offsetX,0,b.clientWidth,l,s)),I=parseFloat(this._mapLinear(_.offsetY,0,b.clientHeight,r,o));p[h]=j.toFixed(a),f[g]=I.toFixed(d),t&&t(p[h],p[g]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}});const R=document.createElement("div");R.className="p-gui__vector2-line p-gui__vector2-line-x",b.append(R);const P=document.createElement("div");P.className="p-gui__vector2-line p-gui__vector2-line-y",b.append(P);const w=document.createElement("div");w.className="p-gui__vector2-dot",b.append(w),w.style.left=this._mapLinear(p[h],l,s,0,b.clientWidth)+"px",w.style.top=this._mapLinear(f[g],o,r,b.clientHeight,0)+"px",Object.defineProperty(p,h,{set:_=>{this.propReferences[u]=_,w.style.left=this._mapLinear(_,l,s,0,b.clientWidth)+"px",k.textContent=String(_)+", "+f[g]},get:()=>this.propReferences[u]}),Object.defineProperty(f,g,{set:_=>{this.propReferences[x]=_,w.style.top=this._mapLinear(_,o,r,b.clientHeight,0)+"px",k.textContent=p[h]+", "+String(_)},get:()=>this.propReferences[x]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,i=e.label||"",l=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 r=l?`background-color: ${l};`:"";r+=s?`max-height: ${s}px;`:"";const n=document.createElement("div");n.className=o,n.style=r,this.wrapper.append(n);const c=document.createElement("div");c.innerHTML=`<span class="p-gui__folder-arrow"></span>${i}`,c.className="p-gui__folder-header",n.append(c),c.addEventListener("click",()=>{n.classList.toggle("p-gui__folder--closed")});let a=new E({isFolder:!0,folderOptions:{wrapper:n,parent:this,firstParent:this.firstParent}});return this.folders.push(a),a}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",l);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 l(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,l,s){return l+(e-t)*(s-l)/(i-t)}_countDecimals(e){const t=e.toString(),i=t.indexOf(".");return i===-1?0:t.length-i-1}static registerPlugin(e){for(let t in e)E.prototype[t]=e[t]}}return E});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "4.11.15",
+  "version": "4.12.0",
   "description": "GUI for JavaScript",
   "main": "src/index.js",
   "scripts": {
@@ -22,4 +22,4 @@
   "devDependencies": {
     "vite": "^4.5.0"
   }
-}
+}

package/src/components/Slider.js

@@ -7,7 +7,7 @@ export default class Slider {
             throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof params}.`);
         }
 
-        let name = typeof params.name == 'string' ? params.name || ' ' : ' ';
+        let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
         this.isObject = false;
         let propReferenceIndex = null;
         this.obj = params.obj; 
@@ -34,8 +34,8 @@ export default class Slider {
                 throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof this.obj}.`);
             }
 
-            if (name == ' ') {
-                name = this.prop;
+            if (label == ' ') {
+                label = this.prop;
             }
 
             propReferenceIndex = this.propReferences.push(this.obj[this.prop]) - 1;
@@ -48,7 +48,7 @@ export default class Slider {
 
             value = (this.max - this.min) / 2;
         }
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? name : null);
+        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
 
         this.imageContainer = null;
     
@@ -61,7 +61,7 @@ export default class Slider {
 
         const slider_name = document.createElement('div');
         slider_name.className = 'p-gui__slider-name';
-        slider_name.textContent = name;
+        slider_name.textContent = label;
         container.append(slider_name);
     
         this.ctrlDiv = document.createElement('div');

package/src/index.js

@@ -25,8 +25,7 @@ export default class GUI {
             this.onUpdate = options.onUpdate;
         }
 
-        this.name = (options != undefined && typeof options.name == "string") ? options.name : ''; 
-        
+        this.label = (options != undefined && typeof options.label == "string") ? options.label : ''; 
         this.backgroundColor = options.color || null; 
         this.opacity = options.opacity || 1;
 
@@ -197,7 +196,7 @@ export default class GUI {
     
         this.header = document.createElement('div');
         this.header.className = 'p-gui__header';
-        this.header.textContent = this.name;
+        this.header.textContent = this.label;
         this.header.style = `${ this.backgroundColor ? 'border-color: ' + this.backgroundColor + ';' : ''}`;
         this.wrapper.append(this.header);
     
@@ -208,24 +207,24 @@ export default class GUI {
     }
 
     button(options, callback) {
-        let name = '';
+        let label = '';
         if (typeof options != 'string') {
-            if (typeof options == 'object' && options?.hasOwnProperty('name')) {
-                name = options.name == '' ? ' ' : options.name;
+            if (typeof options == 'object' && options?.hasOwnProperty('label')) {
+                label = options.label == '' ? ' ' : options.label;
             } else {
-                name = ' ';
+                label = ' ';
             }
         } else {
-            name = options == '' ? ' ' : options;
+            label = options == '' ? ' ' : options;
         }
 
-        const tooltip = (typeof options.tooltip === 'string') ? options.tooltip : (options.tooltip === true ? name : null);
+        const tooltip = (typeof options.tooltip === 'string') ? options.tooltip : (options.tooltip === true ? label : null);
 
         this.imageContainer = null;
         
         const el = document.createElement('div');
         el.className = 'p-gui__button';
-        el.textContent = name;
+        el.textContent = label;
         if ( tooltip ) {
             el.setAttribute('title', tooltip);
         }
@@ -264,14 +263,14 @@ export default class GUI {
             }
         }
         let filename = path.replace(/^.*[\\\/]/, '');
-        let name;
-        if (params.name == undefined) {
-            name = filename;
+        let label;
+        if (params.label == undefined) {
+            label = filename;
         } else {
-            name = typeof params.name == 'string' ? params.name || ' ' : ' ';
+            label = typeof params.label == 'string' ? params.label || ' ' : ' ';
         }
 
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? name : null);
+        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
 
         const selected = params.selected === true;
         const selectionBorder = params.selectionBorder !== false;
@@ -314,7 +313,7 @@ export default class GUI {
         // Text inside image
         const text = document.createElement('div');
         text.className = 'p-gui__image-text';
-        text.textContent = name;
+        text.textContent = label;
         image.append(text);
         
         image.addEventListener('click', () => {
@@ -326,7 +325,7 @@ export default class GUI {
                 image.classList.add('p-gui__image--selected');
             }
             if (typeof callback == 'function') {
-                callback({ path, text: name });
+                callback({ path, text: label });
             }
             if (this.onUpdate) {
                 this.onUpdate();
@@ -348,7 +347,7 @@ export default class GUI {
             throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof params}.`);
         }
 
-        let name = typeof params.name == 'string' ? params.name || ' ' : ' ';
+        let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
         let isObject = false;
         let propReferenceIndex = null;
         let obj = params.obj; 
@@ -371,8 +370,8 @@ export default class GUI {
                 throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof obj}.`);
             }
 
-            if (name == ' ') {
-                name = prop;
+            if (label == ' ') {
+                label = prop;
             }
 
             propReferenceIndex = this.propReferences.push(obj[prop]) - 1;
@@ -384,12 +383,12 @@ export default class GUI {
             }
         }
 
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? name : null);
+        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
 
         this.imageContainer = null;
 
         const container = document.createElement('div');
-        container.textContent = name;
+        container.textContent = label;
         container.className = 'p-gui__switch';
         if ( tooltip ) {
             container.setAttribute('title', tooltip);
@@ -463,7 +462,7 @@ export default class GUI {
             throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof params}.`);
         }
 
-        let name = typeof params.name == 'string' ? params.name : ' ';
+        let label = typeof params.label == 'string' ? params.label : ' ';
         let isObject = false;
         let propReferenceIndex = null;
         let obj = params.obj; 
@@ -471,7 +470,7 @@ export default class GUI {
         let values = Array.isArray(params.values) ? params.values : null;
         let value;
         let objectValues = typeof values[0] == 'string' ? false : true;
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? name : null);
+        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
 
         callback = typeof callback == 'function' ? callback : null;
 
@@ -540,7 +539,7 @@ export default class GUI {
 
         let container = document.createElement('div');
         container.className = 'p-gui__list';
-        container.textContent = name;
+        container.textContent = label;
         if (tooltip) {
             container.setAttribute('title', tooltip);
         }
@@ -569,7 +568,7 @@ export default class GUI {
         {
             values.forEach((item, index) => 
             {
-                const optionName = objectValues ? item.name : item;
+                const optionName = objectValues ? item.label : item;
                 const optionValue = objectValues ? item.value : item;
                 let option = document.createElement('option');
                 option.setAttribute('value', optionValue);
@@ -631,14 +630,14 @@ export default class GUI {
             throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof params}.`);
         }
 
-        let name = typeof params.name == 'string' ? params.name || ' ' : ' ';
+        let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
 
         let isObject = false;
         let propReferenceIndex = null;
         let obj = params.obj; 
         let prop = params.prop;
         let value;
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? name : null);
+        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
 
         if (typeof params.value == 'string') {
             if (params.value.length != 7 || params.value[0] != '#') {
@@ -666,8 +665,8 @@ export default class GUI {
                 throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof obj}.`);
             }
 
-            if (name == ' ') {
-                name = prop;
+            if (label == ' ') {
+                label = prop;
             }
 
             propReferenceIndex = this.propReferences.push(obj[prop]) - 1;
@@ -683,7 +682,7 @@ export default class GUI {
 
         const container = document.createElement('div');
         container.className = 'p-gui__color';
-        container.textContent = name;
+        container.textContent = label;
         if ( tooltip ) {
             container.setAttribute('title', tooltip);
         }
@@ -736,7 +735,7 @@ export default class GUI {
             throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof params}.`);
         }
     
-        let name = typeof params.name == 'string' ? params.name || ' ' : ' ';
+        let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
     
         const minX = params.x.min ?? 0;
         const maxX = params.x.max ?? 1;
@@ -755,7 +754,7 @@ export default class GUI {
         const propY = params.y.prop;
         const propYReferenceIndex = this.propReferences.push(objectY[propY]) - 1;
     
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? name : null);
+        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
     
         callback = typeof callback == 'function' ? callback : null;
     
@@ -763,7 +762,7 @@ export default class GUI {
     
         const container = document.createElement('div');
         container.className = 'p-gui__vector2';
-        container.textContent = name;
+        container.textContent = label;
         if ( tooltip ) {
             container.setAttribute('title', tooltip);
         }
@@ -860,7 +859,7 @@ export default class GUI {
 
     folder(options = {}) {
         let closed = typeof options.closed == 'boolean' ? options.closed : false;
-        let name = options.name || '';
+        let label = options.label || '';
         let color = options.color || null;
         let maxHeight = options.maxHeight || null;
 
@@ -885,7 +884,7 @@ export default class GUI {
         this.wrapper.append(container);
         
         const folderHeader = document.createElement('div');
-        folderHeader.innerHTML = `<span class="p-gui__folder-arrow"></span>${name}`;
+        folderHeader.innerHTML = `<span class="p-gui__folder-arrow"></span>${label}`;
         folderHeader.className = 'p-gui__folder-header';
         container.append(folderHeader);
         folderHeader.addEventListener('click', () => {
@@ -974,4 +973,10 @@ export default class GUI {
         
         return decimalPlaces;
     }
+
+    static registerPlugin(plugin) {
+        for (let i in plugin) {
+            GUI.prototype[i] = plugin[i];
+        }
+    }
 }

package/src/plugins/three.js

@@ -0,0 +1,57 @@
+/* 
+    GUI.prototype.threeMaterial = threeMaterial;
+    gui.threeMaterial({name: 'material', obj: material})
+*/
+export function threeMaterial(params = {}) {
+    const material = params.obj;
+    const closed = params.closed ?? false;
+
+    if (material.isMeshStandardMaterial) {
+        const folder = this.folder({ name: params.name, closed });
+
+        folder.slider({ obj: material, prop: 'roughness' });
+        folder.slider({ obj: material, prop: 'metalness' });
+        folder.threeColor({ name: 'color', obj: material.color });
+        folder.slider({ obj: material, prop: 'envMapIntensity' });
+        folder.toggle({ obj: material, prop: 'transparent' }, () => material.needsUpdate = true);
+        folder.slider({ obj: material, prop: 'opacity' });
+
+        if (material.isMeshPhysicalMaterial) {
+            folder.slider({ obj: material, prop: 'transmission' });
+            folder.slider({ obj: material, prop: 'thickness' });
+            folder.slider({ obj: material, prop: 'ior' });
+        }
+
+        return folder;
+    } 
+    else if (material.isMeshBasicMaterial) {
+        const folder = this.folder({ name: params.name, closed });
+
+        folder.threeColor({ name: 'color', obj: material.color });
+        folder.toggle({ obj: material, prop: 'transparent' }, () => material.needsUpdate = true);
+        folder.slider({ obj: material, prop: 'opacity' });
+        
+        return folder;
+    } 
+    else {
+        console.error('[GUI threeMaterial]', 'threeMaterial() doesn\'t support this material:', material);
+    }
+}
+
+/* 
+    GUI.prototype.threeColor = threeColor;
+    gui.threeColor({name: 'color', obj: color})
+*/
+export function threeColor(params = {}) {
+    const label = params.name ?? 'Color';
+    const color = params.obj;
+
+    if (!color) {
+        console.error('[GUI threeColor]', 'color object not provided');
+        return;
+    }
+    
+    return this.color({ name: label, value: '#'+color.getHexString() }, val => {
+        color.set(val)
+    });
+}

package/src/styles/_color.css.js

@@ -15,7 +15,7 @@ export default /* css */ `
     top: 0;
     bottom: 0;
     margin: auto;
-    height: 21px;
+    height: calc(100% - 4px);
     cursor: pointer;
     border-radius: 3px;
     border: 1px solid var(--color-border-2);

package/src/styles/_folder.css.js

@@ -19,12 +19,12 @@ export default /* css */ `
     }
     
     .p-gui__folder--closed {
-        height: 32px;
+        height: 25px;
         overflow: hidden;
     }
     
     .p-gui__folder-header {
-        padding: 10px 5px;
+        padding: 5px 3px;
         background-color: rgba(0, 0, 0, .5);
         color: white;
         cursor: pointer;

package/src/styles/_list.css.js

@@ -22,7 +22,7 @@ export default /* css */ `
     top: 0;
     bottom: 0;
     margin: auto;
-    height: 21px;
+    height: calc(100% - 4px);
     cursor: pointer;
     border-radius: 3px;
     border: 1px solid var(--color-border-2);

package/src/styles/_slider.css.js

@@ -8,6 +8,7 @@ export default /* css */ `
     gap: 10px;
     color: var(--color-text-dark);
     transition: color var(--transition);
+    padding: 3px;
 }
 
 .p-gui__slider:hover {

package/src/styles/styles.js

@@ -122,7 +122,7 @@ export default function( position_type ) {
     .p-gui__vector2,
     .p-gui__color {
         width: 100%;
-        padding: 7px;
+        padding: 5px 3px;
         cursor: pointer;
         position: relative;
         box-sizing: border-box;

package/src/addons/three.js

@@ -1,27 +0,0 @@
-import GUI from '../index.js';
-
-/* 
-    GUI.prototype.materialFolder = materialFolder;
-    gui.materialFolder({name: 'material', obj: material})
-*/
-export function materialFolder(params = {}) {
-    const material = params.obj;
-
-    if (material.isMeshStandardMaterial) {
-        console.error('[GUI materialFolder]', 'materialFolder() only works with meshStandardMaterial');
-    }
-
-    const folder = this.folder({ name: params.name });
-
-    folder.slider({ obj: material, prop: 'roughness' });
-    folder.slider({ obj: material, prop: 'metalness' });
-    folder.color({ name: 'color', obj: material, value: '#'+material.color.getHexString() }, val => {
-        material.color.set(val)
-    });
-    folder.slider({ obj: material, prop: 'envMapIntensity' });
-    return folder;
-}
-
-export function threejsColor() {
-
-}