perfect-gui 4.4.1 → 4.6.5

package/dist/perfect-gui.mjs

@@ -1,4 +1,4 @@
-function w(y) {
+function w(m) {
   return (
     /* css */
     `
@@ -10,7 +10,7 @@ function w(y) {
         --color-accent: #1681ca;
         --color-accent-hover: #218fda;
     
-        position: ${y};
+        position: ${m};
         top: 0;
         left: 0;
         transform: translate3d(0,0,0);
@@ -365,8 +365,7 @@ function w(y) {
         margin-bottom: 3px;
         display: flex;
         flex-wrap: wrap;
-        border-left: 3px solid grey;
-        border-bottom: 1px solid grey;
+        border: 1px solid grey;
         padding: 0 3px;
     }
     
@@ -413,20 +412,20 @@ function w(y) {
     `
   );
 }
-class f {
+class b {
   constructor(e = {}) {
     if (e.container ? (this.container = typeof e.container == "string" ? document.querySelector(e.container) : e.container, this.position_type = "absolute") : (this.container = document.body, this.position_type = "fixed"), this.propReferences = [], this.folders = [], e.isFolder) {
       this._folderConstructor(e.folderOptions);
       return;
     }
-    this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), this instanceof f && (typeof f[f.instanceCounter] != "number" ? f[f.instanceCounter] = 0 : f[f.instanceCounter]++), this.instanceId = f[f.instanceCounter], this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${w(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
+    this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), this instanceof b && (typeof b[b.instanceCounter] != "number" ? b[b.instanceCounter] = 0 : b[b.instanceCounter]++), this.instanceId = b[b.instanceCounter], this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${w(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
   }
   _styleInstance() {
     let e = this._getScrollbarWidth(this.container);
     if (this.screenCorner.x == "left" ? this.xOffset = 0 : this.xOffset = this.container.clientWidth - this.wrapperWidth - e, this.instanceId > 0) {
       let t = this.container.querySelectorAll(".p-gui");
-      for (let 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));
+      for (let o = 0; o < t.length; o++)
+        this.screenCorner.y == t[o].dataset.cornerY && (this.screenCorner.x == "left" && t[o].dataset.cornerX == "left" ? this.xOffset += t[o].offsetWidth : this.screenCorner.x == "right" && t[o].dataset.cornerX == "right" && (this.xOffset -= t[o].offsetWidth));
     }
     this.yOffset = 0, this.position = {
       prevX: this.xOffset,
@@ -457,8 +456,8 @@ class f {
     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));
+      for (let o = 0; o < t.length && !(parseInt(t[o].id.replace("p-gui-", "")) > this.instanceId); o++)
+        this.screenCorner.y == t[o].dataset.cornerY && (this.screenCorner.x == "left" && t[o].dataset.cornerX == "left" ? this.xOffset += t[o].offsetWidth : this.screenCorner.x == "right" && t[o].dataset.cornerX == "right" && (this.xOffset -= t[o].offsetWidth));
     }
     this.position = { prevX: this.xOffset, prevY: this.yOffset, x: this.xOffset, y: this.yOffset }, this.wrapper.style.transform = `translate3d(${this.position.x}px, ${this.position.y}px, 0)`;
   }
@@ -466,8 +465,8 @@ class f {
     e.el = e.el || "div";
     var t = document.createElement(e.el);
     if (e.id && (t.id = e.id), e.class && (t.className = e.class), e.inline && (t.style = e.inline), e.href && (t.href = e.href), e.onclick && (t.onclick = e.onclick), e.onchange && (t.onchange = e.onchange), e.textContent && (t.textContent = e.textContent), e.innerHTML && (t.innerHTML = e.innerHTML), e.type && (t.type = e.type), e.value && (t.value = e.value), e.customAttributes)
-      for (var i in e.customAttributes)
-        t.setAttribute(i, e.customAttributes[i]);
+      for (var o in e.customAttributes)
+        t.setAttribute(o, e.customAttributes[o]);
     return e.parent = e.parent ? e.parent : this.wrapper, e.parent.append(t), t;
   }
   _addStyles(e) {
@@ -490,159 +489,181 @@ class f {
     });
   }
   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, this.imageContainer = null, typeof t != "function" && (t = () => {
+    let o = "";
+    typeof e != "string" ? typeof e == "object" && (e != null && e.hasOwnProperty("name")) ? o = e.name == "" ? " " : e.name : o = " " : o = e == "" ? " " : e, this.imageContainer = null, typeof t != "function" && (t = () => {
     });
-    const r = this._createElement({
+    const a = this._createElement({
       class: "p-gui__button",
-      textContent: i,
+      textContent: o,
       onclick: t
     });
-    typeof e.color == "string" && (r.style.setProperty("--color-accent", e.color), r.style.setProperty("--color-accent-hover", e.hoverColor || e.color));
+    typeof e.color == "string" && (a.style.setProperty("--color-accent", e.color), a.style.setProperty("--color-accent-hover", e.hoverColor || e.color));
   }
   image(e = {}, t) {
     if (typeof e != "object")
       throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);
-    let i;
+    let o;
     if (typeof e.path == "string")
-      i = e.path;
+      o = e.path;
     else
       throw typeof e.path == null ? Error("[GUI] image() path must be provided.") : Error("[GUI] image() path must be a string.");
-    let r = i.replace(/^.*[\\\/]/, ""), s;
-    e.name == null ? s = r : s = typeof e.name == "string" && e.name || " ";
-    const o = e.selected === !0, n = e.selectionBorder !== !1;
-    let a = "";
-    e.width && (typeof e.width == "number" && (e.width += "px"), a += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), a += `height: ${e.height}; `), this.imageContainer || (this.imageContainer = this._createElement({
+    let a = o.replace(/^.*[\\\/]/, ""), n;
+    e.name == null ? n = a : n = typeof e.name == "string" && e.name || " ";
+    const r = e.selected === !0, i = e.selectionBorder !== !1;
+    let s = "";
+    e.width && (typeof e.width == "number" && (e.width += "px"), s += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), s += `height: ${e.height}; `), this.imageContainer || (this.imageContainer = this._createElement({
       class: "p-gui__image-container"
     }));
     var l = this._createElement({
       class: "p-gui__image",
-      inline: "background-image: url(" + i + "); " + a,
+      inline: "background-image: url(" + o + "); " + s,
       parent: this.imageContainer
     });
-    o && n && l.classList.add("p-gui__image--selected"), this._createElement({
+    return r && i && l.classList.add("p-gui__image--selected"), this._createElement({
       parent: l,
       class: "p-gui__image-text",
-      textContent: s
-    }), typeof t == "function" && (l.onclick = () => {
-      let u = this.imageContainer.querySelectorAll(".p-gui__image--selected");
-      for (let p = 0; p < u.length; p++)
-        u[p].classList.remove("p-gui__image--selected");
-      n && l.classList.add("p-gui__image--selected"), t({ path: i, text: s });
-    });
+      textContent: n
+    }), l.onclick = () => {
+      let c = l.parentElement.querySelectorAll(".p-gui__image--selected");
+      for (let d = 0; d < c.length; d++)
+        c[d].classList.remove("p-gui__image--selected");
+      i && l.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: o, text: n });
+    }, l;
   }
   slider(e = {}, t) {
     if (typeof e != "object")
       throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.name == "string" && e.name || " ", r = !1, s = null, o = e.obj || e.object, n = e.prop || e.property, a = typeof e.value == "number" ? e.value : null, l = e.min ?? 0, u = e.max ?? 1, p = e.step || (u - l) / 100;
-    if (a !== null)
-      (n != null || o != null) && console.warn('[GUI] slider() "obj" and "property" parameters are ignored when a "value" parameter is used.');
-    else if (n != null && o != null) {
-      if (typeof n != "string")
-        throw Error(`[GUI] slider() "prop" (or "property") parameter must be an string. Received: ${typeof n}.`);
-      if (typeof o != "object")
-        throw Error(`[GUI] slider() "obj" (or "object") parameter must be an object. Received: ${typeof o}.`);
-      i == " " && (i = n), s = this.propReferences.push(o[n]) - 1, r = !0;
+    let o = typeof e.name == "string" && e.name || " ", a = !1, n = null, r = e.obj || e.object, i = e.prop || e.property, s = typeof e.value == "number" ? e.value : null, l = e.min ?? 0, c = e.max ?? 1, d = e.step || (c - l) / 100;
+    if (s !== null)
+      (i != null || r != null) && console.warn('[GUI] slider() "obj" and "property" parameters are ignored when a "value" parameter is used.');
+    else if (i != null && r != null) {
+      if (typeof i != "string")
+        throw Error(`[GUI] slider() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);
+      if (typeof r != "object")
+        throw Error(`[GUI] slider() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);
+      o == " " && (o = i), n = this.propReferences.push(r[i]) - 1, a = !0;
     } else
-      (n != null && o == null || n == null && o == null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), a = (u - l) / 2;
+      (i != null && r == null || i == null && r == null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), s = (c - l) / 2;
     this.imageContainer = null;
-    var c = this._createElement({
+    var p = this._createElement({
       class: "p-gui__slider",
-      textContent: i
-    }), g = this._createElement({
-      parent: c,
+      textContent: o
+    }), u = this._createElement({
+      parent: p,
       el: "input",
       class: "p-gui__slider-ctrl",
       customAttributes: {
         type: "range",
         min: l,
-        max: u,
-        step: p,
-        value: r ? o[n] : a
+        max: c,
+        step: d,
+        value: a ? r[i] : s
       }
-    }), b = this._createElement({
-      parent: c,
+    }), g = this._createElement({
+      parent: p,
       class: "p-gui__slider-value",
-      textContent: String(r ? o[n] : a)
+      textContent: String(a ? r[i] : s)
     });
-    g.addEventListener("input", () => {
-      b.textContent = g.value, r ? o[n] = g.value : typeof t == "function" && t(parseFloat(g.value));
-    }), r && Object.defineProperty(o, n, {
+    u.addEventListener("input", () => {
+      g.textContent = u.value, a ? r[i] = u.value : typeof t == "function" && t(parseFloat(u.value));
+    }), a && Object.defineProperty(r, i, {
       set: (_) => {
-        this.propReferences[s] = _, g.value = _, b.textContent = String(_), typeof t == "function" && t(parseFloat(g.value));
+        this.propReferences[n] = _, u.value = _, g.textContent = String(_), typeof t == "function" && t(parseFloat(u.value));
       },
-      get: () => this.propReferences[s]
+      get: () => this.propReferences[n]
     });
   }
   toggle(e = {}, t) {
     if (typeof e != "object")
       throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.name == "string" && e.name || " ", r = !1, s = null, o = e.obj || e.object, n = e.prop || e.property, a = typeof e.value == "boolean" ? e.value : null;
-    if (a !== null)
-      (n != null || o != null) && console.warn('[GUI] toggle() "obj" and "property" parameters are ignored when a "value" parameter is used.');
-    else if (n != null && o != null) {
-      if (typeof n != "string")
-        throw Error(`[GUI] toggle() "prop" (or "property") parameter must be an string. Received: ${typeof n}.`);
-      if (typeof o != "object")
-        throw Error(`[GUI] toggle() "obj" (or "object") parameter must be an object. Received: ${typeof o}.`);
-      i == " " && (i = n), s = this.propReferences.push(o[n]) - 1, r = !0;
+    let o = typeof e.name == "string" && e.name || " ", a = !1, n = null, r = e.obj || e.object, i = e.prop || e.property, s = typeof e.value == "boolean" ? e.value : null;
+    if (s !== null)
+      (i != null || r != null) && console.warn('[GUI] toggle() "obj" and "property" parameters are ignored when a "value" parameter is used.');
+    else if (i != null && r != null) {
+      if (typeof i != "string")
+        throw Error(`[GUI] toggle() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);
+      if (typeof r != "object")
+        throw Error(`[GUI] toggle() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);
+      o == " " && (o = i), n = this.propReferences.push(r[i]) - 1, a = !0;
     } else
-      (n != null && o == null || n == null && o == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
+      (i != null && r == null || i == null && r == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
     this.imageContainer = null;
     const l = this._createElement({
       class: "p-gui__switch",
-      onclick: (c) => {
-        const g = c.target.childNodes[1];
-        let b = !0;
-        g.classList.contains("p-gui__switch-checkbox--active") && (b = !1), g.classList.toggle("p-gui__switch-checkbox--active"), r ? o[n] = b : typeof t == "function" && t(b);
+      onclick: (p) => {
+        const u = p.target.childNodes[1];
+        let g = !0;
+        u.classList.contains("p-gui__switch-checkbox--active") && (g = !1), u.classList.toggle("p-gui__switch-checkbox--active"), a ? r[i] = g : typeof t == "function" && t(g);
       },
-      textContent: i
+      textContent: o
     });
-    let u = (() => r ? o[n] ? " p-gui__switch-checkbox--active" : "" : a ? " p-gui__switch-checkbox--active" : "")();
-    const p = this._createElement({
+    let c = (() => a ? r[i] ? " p-gui__switch-checkbox--active" : "" : s ? " p-gui__switch-checkbox--active" : "")();
+    const d = this._createElement({
       parent: l,
-      class: "p-gui__switch-checkbox" + u
+      class: "p-gui__switch-checkbox" + c
     });
-    r && Object.defineProperty(o, n, {
-      set: (c) => {
-        this.propReferences[s] = c, c ? p.classList.add("p-gui__switch-checkbox--active") : p.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(c);
+    a && Object.defineProperty(r, i, {
+      set: (p) => {
+        this.propReferences[n] = p, p ? d.classList.add("p-gui__switch-checkbox--active") : d.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(p);
       },
-      get: () => this.propReferences[s]
+      get: () => this.propReferences[n]
     });
   }
   list(e = {}, t) {
     if (typeof e != "object")
       throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.name == "string" ? e.name : " ", r = Array.isArray(e.values) ? e.values : null, s = (() => {
-      if (!r)
-        return null;
-      if (typeof e.value == "string")
-        return r.indexOf(e.value);
-      if (typeof e.value == "number")
-        return e.value;
-    })();
-    t = typeof t == "function" ? t : null, this.imageContainer = null;
-    let o = this._createElement({
+    let o = typeof e.name == "string" ? e.name : " ", a = !1, n = null, r = e.obj || e.object, i = e.prop || e.property, s = Array.isArray(e.values) ? e.values : null, l;
+    if (t = typeof t == "function" ? t : null, e.value !== void 0 || e.value === void 0 && r === void 0 && i === void 0)
+      (i != null || r != null) && console.warn('[GUI] list() "obj" and "property" parameters are ignored when a "value" parameter is used.'), l = (() => {
+        if (!s)
+          return null;
+        if (typeof e.value == "string")
+          return s.indexOf(e.value);
+        if (typeof e.value == "number")
+          return e.value;
+      })();
+    else if (i != null && r != null) {
+      if (typeof i != "string")
+        throw Error(`[GUI] list() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);
+      if (typeof r != "object")
+        throw Error(`[GUI] list() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);
+      l = (() => {
+        if (!s)
+          return null;
+        if (typeof r[i] == "string")
+          return s.indexOf(r[i]);
+        if (typeof r[i] == "number")
+          return r[i];
+      })(), n = this.propReferences.push(r[i]) - 1, a = !0;
+    } else
+      (i != null && r == null || i == null && r == null) && console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');
+    this.imageContainer = null;
+    let c = this._createElement({
       class: "p-gui__list",
-      textContent: i
-    }), n = this._createElement({
-      parent: o,
+      textContent: o
+    }), d = this._createElement({
+      parent: c,
       el: "select",
       class: "p-gui__list-dropdown",
-      onchange: (a) => {
-        t && t(a.target.value);
+      onchange: (p) => {
+        a ? r[i] = p.target.value : t && t(p.target.value);
       }
     });
-    r && r.forEach((a, l) => {
-      let u = this._createElement({
-        parent: n,
+    s && s.forEach((p, u) => {
+      let g = this._createElement({
+        parent: d,
         el: "option",
         customAttributes: {
-          value: a
+          value: p
         },
-        textContent: a
+        textContent: p
       });
-      s == l && u.setAttribute("selected", "");
+      l == u && g.setAttribute("selected", "");
+    }), a && Object.defineProperty(r, i, {
+      set: (p) => {
+        typeof p == "string" && (l = s.indexOf(p)), typeof p == "number" && (l = p), this.propReferences[n] = l, d.querySelector("[selected]").removeAttribute("selected"), d.querySelectorAll("option")[l].setAttribute("selected", ""), typeof t == "function" && t(l);
+      },
+      get: () => this.propReferences[n]
     });
   }
   options(e, t) {
@@ -653,109 +674,124 @@ class f {
   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 r = e.x.min ?? 0, s = e.x.max ?? 1, o = e.y.min ?? 0, n = e.y.max ?? 1, a = e.x.obj || e.x.object, l = e.x.prop || e.x.property, u = this.propReferences.push(a[l]) - 1, p = e.y.obj || e.y.object, c = e.y.prop || e.y.property, g = this.propReferences.push(p[c]) - 1;
+    let o = typeof e.name == "string" && e.name || " ";
+    const a = e.x.min ?? 0, n = e.x.max ?? 1, r = e.y.min ?? 0, i = e.y.max ?? 1, s = e.x.obj || e.x.object, l = e.x.prop || e.x.property, c = this.propReferences.push(s[l]) - 1, d = e.y.obj || e.y.object, p = e.y.prop || e.y.property, u = this.propReferences.push(d[p]) - 1;
     t = typeof t == "function" ? t : null, this.imageContainer = null;
-    const b = this._createElement({
+    const g = this._createElement({
       class: "p-gui__vector2",
-      textContent: i
+      textContent: o
     }), _ = this._createElement({
-      parent: b,
+      parent: g,
       class: "p-gui__vector-value",
-      textContent: a[l] + ", " + p[c]
-    }), d = this._createElement({
-      parent: b,
+      textContent: s[l] + ", " + d[p]
+    }), h = this._createElement({
+      parent: g,
       el: "div",
       class: "p-gui__vector2-area",
-      onclick: (h) => {
-        a[l] = parseFloat(this._mapLinear(h.offsetX, 0, d.clientWidth, r, s).toFixed(2)), p[c] = parseFloat(this._mapLinear(h.offsetY, 0, d.clientHeight, n, o).toFixed(2)), t && t(a[l], a[c]);
+      onclick: (f) => {
+        s[l] = parseFloat(this._mapLinear(f.offsetX, 0, h.clientWidth, a, n).toFixed(2)), d[p] = parseFloat(this._mapLinear(f.offsetY, 0, h.clientHeight, i, r).toFixed(2)), t && t(s[l], s[p]);
       }
     });
-    let m = !1;
-    d.addEventListener("pointerdown", (h) => {
-      m = !0;
-    }), d.addEventListener("pointerup", () => {
-      m = !1;
-    }), d.addEventListener("pointermove", (h) => {
-      m && (a[l] = parseFloat(this._mapLinear(h.offsetX, 0, d.clientWidth, r, s).toFixed(2)), p[c] = parseFloat(this._mapLinear(h.offsetY, 0, d.clientHeight, n, o).toFixed(2)), t && t(a[l], a[c]));
+    let y = !1;
+    h.addEventListener("pointerdown", (f) => {
+      y = !0;
+    }), h.addEventListener("pointerup", () => {
+      y = !1;
+    }), h.addEventListener("pointermove", (f) => {
+      y && (s[l] = parseFloat(this._mapLinear(f.offsetX, 0, h.clientWidth, a, n).toFixed(2)), d[p] = parseFloat(this._mapLinear(f.offsetY, 0, h.clientHeight, i, r).toFixed(2)), t && t(s[l], s[p]));
     }), this._createElement({
-      parent: d,
+      parent: h,
       class: "p-gui__vector2-line p-gui__vector2-line-x"
     }), this._createElement({
-      parent: d,
+      parent: h,
       class: "p-gui__vector2-line p-gui__vector2-line-y"
     });
     const x = this._createElement({
-      parent: d,
+      parent: h,
       class: "p-gui__vector2-dot"
     });
-    x.style.left = this._mapLinear(a[l], r, s, 0, d.clientWidth) + "px", x.style.top = this._mapLinear(p[c], o, n, d.clientHeight, 0) + "px", Object.defineProperty(a, l, {
-      set: (h) => {
-        this.propReferences[u] = h, x.style.left = this._mapLinear(h, r, s, 0, d.clientWidth) + "px", _.textContent = String(h) + ", " + p[c];
+    x.style.left = this._mapLinear(s[l], a, n, 0, h.clientWidth) + "px", x.style.top = this._mapLinear(d[p], r, i, h.clientHeight, 0) + "px", Object.defineProperty(s, l, {
+      set: (f) => {
+        this.propReferences[c] = f, x.style.left = this._mapLinear(f, a, n, 0, h.clientWidth) + "px", _.textContent = String(f) + ", " + d[p];
       },
-      get: () => this.propReferences[u]
-    }), Object.defineProperty(p, c, {
-      set: (h) => {
-        this.propReferences[g] = h, x.style.top = this._mapLinear(h, o, n, d.clientHeight, 0) + "px", _.textContent = a[l] + ", " + String(h);
+      get: () => this.propReferences[c]
+    }), Object.defineProperty(d, p, {
+      set: (f) => {
+        this.propReferences[u] = f, x.style.top = this._mapLinear(f, r, i, h.clientHeight, 0) + "px", _.textContent = s[l] + ", " + String(f);
       },
-      get: () => this.propReferences[g]
+      get: () => this.propReferences[u]
     });
   }
   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 || " ", r;
-    typeof e.value == "string" && (e.value.length != 7 || e.value[0] != "#" ? console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`) : r = e.value), r || (r = "#000000");
-    const s = this._createElement({
+    let o = typeof e.name == "string" && e.name || " ", a = !1, n = null, r = e.obj || e.object, i = e.prop || e.property, s;
+    if (typeof e.value == "string" && (e.value.length != 7 || e.value[0] != "#" ? console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`) : s = e.value), s || (s = "#000000"), e.value !== void 0)
+      (i != null || r != null) && console.warn('[GUI] color() "obj" and "property" parameters are ignored when a "value" parameter is used.');
+    else if (i != null && r != null) {
+      if (typeof i != "string")
+        throw Error(`[GUI] color() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);
+      if (typeof r != "object")
+        throw Error(`[GUI] color() "obj" (or "object") parameter must be an object. Received: ${typeof r}.`);
+      o == " " && (o = i), n = this.propReferences.push(r[i]) - 1, a = !0;
+    } else
+      (i != null && r == null || i == null && r == null) && console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');
+    this.imageContainer = null;
+    const l = this._createElement({
       el: "div",
       class: "p-gui__color",
-      textContent: i
-    }), o = this._createElement({
-      parent: s,
+      textContent: o
+    }), c = this._createElement({
+      parent: l,
       el: "input",
       class: "p-gui__color-picker",
       type: "color",
-      value: r
+      value: s
     });
-    typeof t == "function" && o.addEventListener("input", () => {
-      t(o.value);
+    typeof t == "function" && c.addEventListener("input", () => {
+      a ? r[i] = c.value : typeof t == "function" && t(c.value);
+    }), a && Object.defineProperty(r, i, {
+      set: (d) => {
+        this.propReferences[n] = d, c.value = d, typeof t == "function" && t(d);
+      },
+      get: () => this.propReferences[n]
     });
   }
   folder(e = {}) {
-    let t = typeof e.closed == "boolean" ? e.closed : !1, i = e.name || "", r = e.color || null, s = e.maxHeight || null;
+    let t = typeof e.closed == "boolean" ? e.closed : !1, o = e.name || "", a = e.color || null, n = e.maxHeight || null;
     this.imageContainer = null;
-    let o = "p-gui__folder";
-    this.folders.length == 0 && (o += " p-gui__folder--first"), t && (o += " p-gui__folder--closed");
-    let n = r ? `background-color: ${r};` : "";
-    n += s ? `max-height: ${s}px;` : "";
-    let a = this._createElement({
-      class: o,
-      inline: n
+    let r = "p-gui__folder";
+    this.folders.length == 0 && (r += " p-gui__folder--first"), t && (r += " p-gui__folder--closed");
+    let i = a ? `background-color: ${a};` : "";
+    i += n ? `max-height: ${n}px;` : "";
+    let s = this._createElement({
+      class: r,
+      inline: i
     });
     this._createElement({
-      innerHTML: `<span class="p-gui__folder-arrow"></span>${i}`,
+      innerHTML: `<span class="p-gui__folder-arrow"></span>${o}`,
       class: "p-gui__folder-header",
       onclick: function() {
         this.parentNode.classList.toggle("p-gui__folder--closed");
       },
-      parent: a
+      parent: s
     });
-    let l = new f({ isFolder: !0, folderOptions: {
-      wrapper: a
+    let l = new b({ isFolder: !0, folderOptions: {
+      wrapper: s
     } });
     return this.folders.push(l), l;
   }
   _makeDraggable() {
     var e = this;
-    this.header.addEventListener("pointerdown", t), this.header.addEventListener("pointerup", r);
-    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);
+    this.header.addEventListener("pointerdown", t), this.header.addEventListener("pointerup", a);
+    function t(n) {
+      n.preventDefault(), e.position.initX = e.position.x, e.position.initY = e.position.y, e.position.prevX = n.clientX, e.position.prevY = n.clientY, document.addEventListener("pointermove", o);
     }
-    function 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 o(n) {
+      n.preventDefault(), e.hasBeenDragged || (e.hasBeenDragged = !0, e.wrapper.setAttribute("data-dragged", "true")), e.position.x = e.position.initX + n.clientX - e.position.prevX, e.position.y = e.position.initY + n.clientY - e.position.prevY, e.wrapper.style.transform = "translate3d(" + e.position.x + "px," + e.position.y + "px,0)";
     }
-    function r(s) {
-      document.removeEventListener("pointermove", i);
+    function a(n) {
+      document.removeEventListener("pointermove", o);
     }
   }
   toggleClose() {
@@ -764,10 +800,10 @@ class f {
   kill() {
     this.wrapper.remove();
   }
-  _mapLinear(e, t, i, r, s) {
-    return r + (e - t) * (s - r) / (i - t);
+  _mapLinear(e, t, o, a, n) {
+    return a + (e - t) * (n - a) / (o - t);
   }
 }
 export {
-  f as default
+  b as default
 };

package/dist/perfect-gui.umd.js

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

package/package.json

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

package/src/index.js

@@ -330,20 +330,21 @@ export default class GUI {
             textContent: name
         });
         
-
         
-        if (typeof callback == 'function') {
-            image.onclick = () => {
-                let selected = this.imageContainer.querySelectorAll('.p-gui__image--selected');
-                for (let i = 0; i < selected.length; i++) {
-                    selected[i].classList.remove('p-gui__image--selected');
-                }
-                if (selectionBorder) {
-                    image.classList.add('p-gui__image--selected');
-                }
+        image.onclick = () => {
+            let selected_items = image.parentElement.querySelectorAll('.p-gui__image--selected');
+            for (let i = 0; i < selected_items.length; i++) {
+                selected_items[i].classList.remove('p-gui__image--selected');
+            }
+            if (selectionBorder) {
+                image.classList.add('p-gui__image--selected');
+            }
+            if (typeof callback == 'function') {
                 callback({ path, text: name });
-            };
-        }
+            }
+        };
+
+        return image;
     }
     
     slider (params = {}, callback) {
@@ -558,20 +559,64 @@ export default class GUI {
         }
 
         let name = typeof params.name == 'string' ? params.name : ' ';
+        let isObject = false;
+        let propReferenceIndex = null;
+        let obj = params.obj || params.object; 
+        let prop = params.prop || params.property;
         let values = Array.isArray(params.values) ? params.values : null;
-        let value = (() => {
-            if (!values) {
-                return null;
+        let value;
+
+        callback = typeof callback == 'function' ? callback : null;
+
+        // callback mode
+        if ( params.value !== undefined || 
+            (params.value === undefined && obj === undefined && prop === undefined)) {
+            if (prop != undefined || obj != undefined) {
+                console.warn(`[GUI] list() "obj" and "property" parameters are ignored when a "value" parameter is used.`);
             }
-            if (typeof params.value == 'string') {
-                return values.indexOf(params.value);
+
+            value = (() => {
+                if (!values) {
+                    return null;
+                }
+                if (typeof params.value == 'string') {
+                    return values.indexOf(params.value);
+                }
+                if (typeof params.value == 'number') {
+                    return params.value;
+                }
+            })();
+        }
+
+        // object-binding
+        else if (prop != undefined && obj != undefined) {
+            if (typeof prop != 'string') {
+                throw Error(`[GUI] list() "prop" (or "property") parameter must be an string. Received: ${typeof prop}.`);
             }
-            if (typeof params.value == 'number') {
-                return params.value;
+            if (typeof obj != 'object') {
+                throw Error(`[GUI] list() "obj" (or "object") parameter must be an object. Received: ${typeof obj}.`);
             }
-        })();
 
-        callback = typeof callback == 'function' ? callback : null;
+            value = (() => {
+                if (!values) {
+                    return null;
+                }
+                if (typeof obj[prop] == 'string') {
+                    return values.indexOf(obj[prop]);
+                }
+                if (typeof obj[prop] == 'number') {
+                    return obj[prop];
+                }
+            })();
+
+            propReferenceIndex = this.propReferences.push(obj[prop]) - 1;
+            isObject = true;
+        }
+        else {
+            if ((prop != undefined && obj == undefined) || (prop == undefined && obj == undefined)) {
+                console.warn(`[GUI] list() "obj" and "prop" parameters must be used together.`);
+            }
+        }
 
         this.imageContainer = null;
 
@@ -585,7 +630,11 @@ export default class GUI {
             el: 'select',
             class: 'p-gui__list-dropdown',
             onchange: (ev) => {
-                if (callback) {
+                if ( isObject ) {
+                    obj[prop] = ev.target.value;
+                }
+
+                else if (callback) {
                     callback(ev.target.value);
                 }
             }
@@ -608,6 +657,31 @@ export default class GUI {
                 }
             });
         }
+
+        if ( isObject ) {
+            Object.defineProperty( obj, prop, {
+                set: val => { 
+                    if (typeof val == 'string') {
+                        value = values.indexOf(val);
+                    }
+                    if (typeof val == 'number') {
+                        value = val;
+                    }
+                    
+                    this.propReferences[propReferenceIndex] = value;
+
+                    select.querySelector('[selected]').removeAttribute('selected')
+                    select.querySelectorAll('option')[value].setAttribute('selected', '');
+                    
+                    if (typeof callback == 'function') {
+                        callback(value);
+                    }
+                },
+                get: () => { 
+                    return this.propReferences[propReferenceIndex];
+                }
+            });
+        }
     }
 
     options(params, callback) {
@@ -730,7 +804,13 @@ export default class GUI {
         }
 
         let name = typeof params.name == 'string' ? params.name || ' ' : ' ';
+
+        let isObject = false;
+        let propReferenceIndex = null;
+        let obj = params.obj || params.object; 
+        let prop = params.prop || params.property;
         let value;
+
         if (typeof params.value == 'string') {
             if (params.value.length != 7 || params.value[0] != '#') {
                 console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${params.value}".`)
@@ -741,6 +821,37 @@ export default class GUI {
         }
         if (!value) value = '#000000';
 
+        // callback mode
+        if ( params.value !== undefined ) {
+            if (prop != undefined || obj != undefined) {
+                console.warn(`[GUI] color() "obj" and "property" parameters are ignored when a "value" parameter is used.`);
+            }
+        }
+
+        // object-binding
+        else if (prop != undefined && obj != undefined) {
+            if (typeof prop != 'string') {
+                throw Error(`[GUI] color() "prop" (or "property") parameter must be an string. Received: ${typeof prop}.`);
+            }
+            if (typeof obj != 'object') {
+                throw Error(`[GUI] color() "obj" (or "object") parameter must be an object. Received: ${typeof obj}.`);
+            }
+
+            if (name == ' ') {
+                name = prop;
+            }
+
+            propReferenceIndex = this.propReferences.push(obj[prop]) - 1;
+            isObject = true;
+        }
+        else {
+            if ((prop != undefined && obj == undefined) || (prop == undefined && obj == undefined)) {
+                console.warn(`[GUI] color() "obj" and "prop" parameters must be used together.`);
+            }
+        }
+
+        this.imageContainer = null;
+
         const container = this._createElement({
             el: 'div',
             class: 'p-gui__color',
@@ -757,7 +868,30 @@ export default class GUI {
 
         if (typeof callback == 'function') {
             colorpicker.addEventListener('input', () => {
-                callback(colorpicker.value);
+                if ( isObject ) {
+                    obj[prop] = colorpicker.value;
+                }
+
+                else if (typeof callback == 'function') {
+                    callback(colorpicker.value);
+                }
+            });
+        }
+
+        if ( isObject ) {
+            Object.defineProperty( obj, prop, {
+                set: val => { 
+                    this.propReferences[propReferenceIndex] = val;
+
+                    colorpicker.value = val;
+
+                    if (typeof callback == 'function') {
+                        callback(val);
+                    }
+                },
+                get: () => { 
+                    return this.propReferences[propReferenceIndex];
+                }
             });
         }
     }

package/src/styles.js

@@ -368,8 +368,7 @@ export default function( position_type ) {
         margin-bottom: 3px;
         display: flex;
         flex-wrap: wrap;
-        border-left: 3px solid grey;
-        border-bottom: 1px solid grey;
+        border: 1px solid grey;
         padding: 0 3px;
     }