perfect-gui 4.6.5 → 4.7.2

package/dist/perfect-gui.mjs

@@ -1,4 +1,4 @@
-function w(m) {
+function A(y) {
   return (
     /* css */
     `
@@ -10,7 +10,7 @@ function w(m) {
         --color-accent: #1681ca;
         --color-accent-hover: #218fda;
     
-        position: ${m};
+        position: ${y};
         top: 0;
         left: 0;
         transform: translate3d(0,0,0);
@@ -276,6 +276,7 @@ function w(m) {
         cursor: pointer;
         border-radius: 3px;
         border: 1px solid var(--color-border-2);
+        outline: none;
     }
     
     .p-gui__list-dropdown {
@@ -367,6 +368,7 @@ function w(m) {
         flex-wrap: wrap;
         border: 1px solid grey;
         padding: 0 3px;
+        border-radius: var(--main-border-radius);
     }
     
     .p-gui__folder:last-of-type {
@@ -418,7 +420,7 @@ class b {
       this._folderConstructor(e.folderOptions);
       return;
     }
-    this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), this instanceof b && (typeof b[b.instanceCounter] != "number" ? b[b.instanceCounter] = 0 : b[b.instanceCounter]++), this.instanceId = b[b.instanceCounter], this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${w(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
+    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(`${A(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
   }
   _styleInstance() {
     let e = this._getScrollbarWidth(this.container);
@@ -461,43 +463,20 @@ class b {
     }
     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)
-    });
+    this.wrapper = document.createElement("div"), this.wrapper.id = "p-gui-" + this.instanceId, this.wrapper.className = "p-gui", this.container.append(this.wrapper), this.header = document.createElement("div"), this.header.className = "p-gui__header", this.header.textContent = this.name, this.header.style = `${this.backgroundColor ? "border-color: " + this.backgroundColor + ";" : ""}`, this.wrapper.append(this.header);
+    const e = document.createElement("div");
+    e.className = "p-gui__header-close", e.addEventListener("click", this.toggleClose.bind(this)), this.header.append(e);
   }
   button(e, t) {
     let o = "";
     typeof e != "string" ? typeof e == "object" && (e != null && e.hasOwnProperty("name")) ? o = e.name == "" ? " " : e.name : o = " " : o = e == "" ? " " : e, this.imageContainer = null, typeof t != "function" && (t = () => {
     });
-    const a = 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));
+    const a = document.createElement("div");
+    a.className = "p-gui__button", a.textContent = o, a.addEventListener("click", t), this.wrapper.append(a), typeof e.color == "string" && (a.style.setProperty("--color-accent", e.color), a.style.setProperty("--color-accent-hover", e.hoverColor || e.color));
   }
   image(e = {}, t) {
     if (typeof e != "object")
@@ -507,114 +486,86 @@ class b {
       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 || " ";
+    let a = o.replace(/^.*[\\\/]/, ""), d;
+    e.name == null ? d = a : d = 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;
+    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 = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer));
+    const n = document.createElement("div");
+    n.className = "p-gui__image", n.style = "background-image: url(" + o + "); " + s, this.imageContainer.append(n), r && i && n.classList.add("p-gui__image--selected");
+    const l = document.createElement("div");
+    return l.className = "p-gui__image-text", l.textContent = d, n.append(l), n.addEventListener("click", () => {
+      let c = n.parentElement.querySelectorAll(".p-gui__image--selected");
+      for (let p = 0; p < c.length; p++)
+        c[p].classList.remove("p-gui__image--selected");
+      i && n.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: o, text: d });
+    }), n;
   }
   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;
+    let o = typeof e.name == "string" && e.name || " ", a = !1, d = null, r = e.obj, i = e.prop, s = typeof e.value == "number" ? e.value : null, n = e.min ?? 0, l = e.max ?? 1, c = e.step || (l - n) / 100;
     if (s !== null)
-      (i != null || r != null) && console.warn('[GUI] slider() "obj" and "property" parameters are ignored when a "value" parameter is used.');
+      (i != null || r != null) && console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
     else if (i != null && r != null) {
       if (typeof i != "string")
-        throw Error(`[GUI] slider() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);
+        throw Error(`[GUI] slider() "prop" 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;
+        throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof r}.`);
+      o == " " && (o = i), d = 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;
+      (i != null && r == null || i == null && r == null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), s = (l - n) / 2;
     this.imageContainer = null;
-    var p = this._createElement({
-      class: "p-gui__slider",
-      textContent: o
-    }), u = 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
-      }
-    }), g = this._createElement({
-      parent: p,
-      class: "p-gui__slider-value",
-      textContent: String(a ? r[i] : s)
-    });
-    u.addEventListener("input", () => {
-      g.textContent = u.value, a ? r[i] = u.value : typeof t == "function" && t(parseFloat(u.value));
+    const p = document.createElement("div");
+    p.className = "p-gui__slider", p.textContent = o, this.wrapper.append(p);
+    const u = document.createElement("input");
+    u.className = "p-gui__slider-ctrl", u.setAttribute("type", "range"), u.setAttribute("min", n), u.setAttribute("max", l), u.setAttribute("step", c), u.setAttribute("value", a ? r[i] : s), p.append(u);
+    const h = document.createElement("div");
+    h.className = "p-gui__slider-value", h.textContent = String(a ? r[i] : s), p.append(h), u.addEventListener("input", () => {
+      h.textContent = u.value, a ? r[i] = u.value : typeof t == "function" && t(parseFloat(u.value));
     }), a && Object.defineProperty(r, i, {
-      set: (_) => {
-        this.propReferences[n] = _, u.value = _, g.textContent = String(_), typeof t == "function" && t(parseFloat(u.value));
+      set: (m) => {
+        this.propReferences[d] = m, u.value = m, h.textContent = String(m), typeof t == "function" && t(parseFloat(u.value));
       },
-      get: () => this.propReferences[n]
+      get: () => this.propReferences[d]
     });
   }
   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;
+    let o = typeof e.name == "string" && e.name || " ", a = !1, d = null, r = e.obj, i = e.prop, 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.');
+      (i != null || r != null) && console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
     else if (i != null && r != null) {
       if (typeof i != "string")
-        throw Error(`[GUI] toggle() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);
+        throw Error(`[GUI] toggle() "prop" 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;
+        throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof r}.`);
+      o == " " && (o = i), d = 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 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: 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
+    const n = document.createElement("div");
+    n.textContent = o, n.className = "p-gui__switch", this.wrapper.append(n), n.addEventListener("click", (p) => {
+      const u = p.target.childNodes[1];
+      let h = !0;
+      u.classList.contains("p-gui__switch-checkbox--active") && (h = !1), u.classList.toggle("p-gui__switch-checkbox--active"), a ? r[i] = h : typeof t == "function" && t(h);
     });
-    a && Object.defineProperty(r, i, {
+    let l = (() => a ? r[i] ? " p-gui__switch-checkbox--active" : "" : s ? " p-gui__switch-checkbox--active" : "")();
+    const c = document.createElement("div");
+    c.className = "p-gui__switch-checkbox" + l, n.append(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);
+        this.propReferences[d] = p, p ? c.classList.add("p-gui__switch-checkbox--active") : c.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(p);
       },
-      get: () => this.propReferences[n]
+      get: () => this.propReferences[d]
     });
   }
   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;
+    let o = typeof e.name == "string" ? e.name : " ", a = !1, d = null, r = e.obj, i = e.prop, s = Array.isArray(e.values) ? e.values : null, n;
     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 = (() => {
+      (i != null || r != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), n = (() => {
         if (!s)
           return null;
         if (typeof e.value == "string")
@@ -624,46 +575,33 @@ class b {
       })();
     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}.`);
+        throw Error(`[GUI] list() "prop" 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 = (() => {
+        throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);
+      n = (() => {
         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;
+      })(), d = 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, u) => {
-      let g = this._createElement({
-        parent: d,
-        el: "option",
-        customAttributes: {
-          value: p
-        },
-        textContent: p
-      });
-      l == u && g.setAttribute("selected", "");
+    let l = document.createElement("div");
+    l.className = "p-gui__list", l.textContent = o, this.wrapper.append(l);
+    let c = document.createElement("select");
+    l.append(c), c.className = "p-gui__list-dropdown", c.addEventListener("change", (p) => {
+      a ? r[i] = p.target.value : t && t(p.target.value);
+    }), s && s.forEach((p, u) => {
+      let h = document.createElement("option");
+      h.setAttribute("value", p), h.textContent = p, c.append(h), n == u && h.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);
+        typeof p == "string" && (n = s.indexOf(p)), typeof p == "number" && (n = p), this.propReferences[d] = n, c.querySelector("[selected]").removeAttribute("selected"), c.querySelectorAll("option")[n].setAttribute("selected", ""), typeof t == "function" && t(n);
       },
-      get: () => this.propReferences[n]
+      get: () => this.propReferences[d]
     });
   }
   options(e, t) {
@@ -675,49 +613,37 @@ class b {
     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, u = this.propReferences.push(d[p]) - 1;
+    const a = e.x.min ?? 0, d = e.x.max ?? 1, r = e.y.min ?? 0, i = e.y.max ?? 1, s = e.x.obj, n = e.x.prop, l = this.propReferences.push(s[n]) - 1, c = e.y.obj, p = e.y.prop, u = this.propReferences.push(c[p]) - 1;
     t = typeof t == "function" ? t : null, this.imageContainer = null;
-    const g = this._createElement({
-      class: "p-gui__vector2",
-      textContent: o
-    }), _ = this._createElement({
-      parent: g,
-      class: "p-gui__vector-value",
-      textContent: s[l] + ", " + d[p]
-    }), h = this._createElement({
-      parent: g,
-      el: "div",
-      class: "p-gui__vector2-area",
-      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 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: 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 h = document.createElement("div");
+    h.className = "p-gui__vector2", h.textContent = o, this.wrapper.append(h);
+    const m = document.createElement("div");
+    m.className = "p-gui__vector-value", m.textContent = s[n] + ", " + c[p], h.append(m);
+    const f = document.createElement("div");
+    f.className = "p-gui__vector2-area", h.append(f), f.addEventListener("click", (g) => {
+      s[n] = parseFloat(this._mapLinear(g.offsetX, 0, f.clientWidth, a, d).toFixed(2)), c[p] = parseFloat(this._mapLinear(g.offsetY, 0, f.clientHeight, i, r).toFixed(2)), t && t(s[n], s[p]);
     });
-    const x = this._createElement({
-      parent: h,
-      class: "p-gui__vector2-dot"
+    let _ = !1;
+    f.addEventListener("pointerdown", (g) => {
+      _ = !0;
+    }), f.addEventListener("pointerup", () => {
+      _ = !1;
+    }), f.addEventListener("pointermove", (g) => {
+      _ && (s[n] = parseFloat(this._mapLinear(g.offsetX, 0, f.clientWidth, a, d).toFixed(2)), c[p] = parseFloat(this._mapLinear(g.offsetY, 0, f.clientHeight, i, r).toFixed(2)), t && t(s[n], s[p]));
     });
-    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];
+    const w = document.createElement("div");
+    w.className = "p-gui__vector2-line p-gui__vector2-line-x", f.append(w);
+    const v = document.createElement("div");
+    v.className = "p-gui__vector2-line p-gui__vector2-line-y", f.append(v);
+    const x = document.createElement("div");
+    x.className = "p-gui__vector2-dot", f.append(x), x.style.left = this._mapLinear(s[n], a, d, 0, f.clientWidth) + "px", x.style.top = this._mapLinear(c[p], r, i, f.clientHeight, 0) + "px", Object.defineProperty(s, n, {
+      set: (g) => {
+        this.propReferences[l] = g, x.style.left = this._mapLinear(g, a, d, 0, f.clientWidth) + "px", m.textContent = String(g) + ", " + c[p];
       },
-      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[l]
+    }), Object.defineProperty(c, p, {
+      set: (g) => {
+        this.propReferences[u] = g, x.style.top = this._mapLinear(g, r, i, f.clientHeight, 0) + "px", m.textContent = s[n] + ", " + String(g);
       },
       get: () => this.propReferences[u]
     });
@@ -725,56 +651,42 @@ class b {
   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;
+    let o = typeof e.name == "string" && e.name || " ", a = !1, d = null, r = e.obj, i = e.prop, 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.');
+      (i != null || r != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
     else if (i != null && r != null) {
       if (typeof i != "string")
-        throw Error(`[GUI] color() "prop" (or "property") parameter must be an string. Received: ${typeof i}.`);
+        throw Error(`[GUI] color() "prop" 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;
+        throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);
+      o == " " && (o = i), d = 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);
+    const n = document.createElement("div");
+    n.className = "p-gui__color", n.textContent = o, this.wrapper.append(n);
+    const l = document.createElement("input");
+    l.className = "p-gui__color-picker", l.setAttribute("type", "color"), l.value = s, n.append(l), typeof t == "function" && l.addEventListener("input", () => {
+      a ? r[i] = l.value : typeof t == "function" && t(l.value);
     }), a && Object.defineProperty(r, i, {
-      set: (d) => {
-        this.propReferences[n] = d, c.value = d, typeof t == "function" && t(d);
+      set: (c) => {
+        this.propReferences[d] = c, l.value = c, typeof t == "function" && t(c);
       },
-      get: () => this.propReferences[n]
+      get: () => this.propReferences[d]
     });
   }
   folder(e = {}) {
-    let t = typeof e.closed == "boolean" ? e.closed : !1, o = e.name || "", a = e.color || null, n = e.maxHeight || null;
+    let t = typeof e.closed == "boolean" ? e.closed : !1, o = e.name || "", a = e.color || null, d = 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
+    i += d ? `max-height: ${d}px;` : "";
+    const s = document.createElement("div");
+    s.className = r, s.style = i, this.wrapper.append(s);
+    const n = document.createElement("div");
+    n.innerHTML = `<span class="p-gui__folder-arrow"></span>${o}`, n.className = "p-gui__folder-header", s.append(n), n.addEventListener("click", () => {
+      s.classList.toggle("p-gui__folder--closed");
     });
     let l = new b({ isFolder: !0, folderOptions: {
       wrapper: s
@@ -784,13 +696,13 @@ class b {
   _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 t(d) {
+      d.preventDefault(), e.position.initX = e.position.x, e.position.initY = e.position.y, e.position.prevX = d.clientX, e.position.prevY = d.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 o(d) {
+      d.preventDefault(), e.hasBeenDragged || (e.hasBeenDragged = !0, e.wrapper.setAttribute("data-dragged", "true")), e.position.x = e.position.initX + d.clientX - e.position.prevX, e.position.y = e.position.initY + d.clientY - e.position.prevY, e.wrapper.style.transform = "translate3d(" + e.position.x + "px," + e.position.y + "px,0)";
     }
-    function a(n) {
+    function a(d) {
       document.removeEventListener("pointermove", o);
     }
   }
@@ -800,8 +712,8 @@ class b {
   kill() {
     this.wrapper.remove();
   }
-  _mapLinear(e, t, o, a, n) {
-    return a + (e - t) * (n - a) / (o - t);
+  _mapLinear(e, t, o, a, d) {
+    return a + (e - t) * (d - a) / (o - t);
   }
 }
 export {

package/dist/perfect-gui.umd.js

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

package/package.json

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

package/src/index.js

@@ -172,53 +172,27 @@ export default class GUI {
         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(element) {
-        element.el = element.el || 'div';
-        var domElement = document.createElement(element.el);
-        if (element.id) domElement.id = element.id;
-        if (element.class) domElement.className = element.class;
-        if (element.inline) domElement.style = element.inline;
-        if (element.href) domElement.href = element.href;
-        if (element.onclick) domElement.onclick = element.onclick;
-        if (element.onchange) domElement.onchange = element.onchange;
-        if (element.textContent) domElement.textContent = element.textContent;
-        if (element.innerHTML) domElement.innerHTML = element.innerHTML;
-        if (element.type) domElement.type = element.type;
-        if (element.value) domElement.value = element.value;
-        if (element.customAttributes) {
-            for (var i in element.customAttributes) {
-                domElement.setAttribute(i, element.customAttributes[i]);
-            }
-        }
-        element.parent = element.parent ? element.parent : this.wrapper;
-        element.parent.append(domElement);
-        return domElement;
-    }
     
     _addStyles(styles) {
         this.stylesheet.innerHTML += styles;
     }
     
     _addWrapper() {
-        this.wrapper = this._createElement({
-            parent: this.container,
-            id: 'p-gui-'+this.instanceId,
-            class: 'p-gui'
-        });        
+        this.wrapper = document.createElement('div');
+        this.wrapper.id = 'p-gui-'+this.instanceId;
+        this.wrapper.className = 'p-gui';
+        this.container.append(this.wrapper);      
     
-        this.header = this._createElement({
-            parent: this.wrapper,
-            class: 'p-gui__header',
-            textContent: this.name,
-            inline: `${ this.backgroundColor ? 'border-color: ' + this.backgroundColor + ';' : ''}`
-        });
+        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._createElement({
-            parent: this.header,
-            class: 'p-gui__header-close',
-            onclick: this.toggleClose.bind(this)
-        });
+        const close_btn = document.createElement('div');
+        close_btn.className = 'p-gui__header-close';
+        close_btn.addEventListener('click', this.toggleClose.bind(this));
+        this.header.append(close_btn);
     }
 
     button(options, callback) {
@@ -238,25 +212,12 @@ export default class GUI {
         if (typeof callback != 'function') {
             callback = () => {};
         }
-
-        /* let create_options = {
-            class: 'p-gui__button',
-            textContent: name,
-            onclick: callback
-        };
-
-        if (typeof options.color == 'string') {
-            create_options.inline = 'background-color: ' + options.color;
-        }
-        
-        this._createElement(create_options); */
         
-        
-        const el = this._createElement({
-            class: 'p-gui__button',
-            textContent: name,
-            onclick: callback
-        });
+        const el = document.createElement('div');
+        el.className = 'p-gui__button';
+        el.textContent = name;
+        el.addEventListener('click', callback);
+        this.wrapper.append(el);
 
         if (typeof options.color == 'string') {
             el.style.setProperty('--color-accent', options.color);
@@ -307,31 +268,28 @@ export default class GUI {
         }
                 
         if (!this.imageContainer) {
-            this.imageContainer = this._createElement({
-                class: 'p-gui__image-container'
-            });
+            this.imageContainer = document.createElement('div');
+            this.imageContainer.className = 'p-gui__image-container';
+            this.wrapper.append(this.imageContainer);
         }
 
-        // Image
-        var image = this._createElement({
-            class: 'p-gui__image',
-            inline: 'background-image: url(' + path + '); ' + inline_styles,
-            parent: this.imageContainer
-        });
+        // Image button
+        const image = document.createElement('div');
+        image.className = 'p-gui__image';
+        image.style = 'background-image: url(' + path + '); ' + inline_styles;
+        this.imageContainer.append(image);
 
         if (selected && selectionBorder) {
             image.classList.add('p-gui__image--selected');
         }
         
         // Text inside image
-        this._createElement({
-            parent: image,
-            class: 'p-gui__image-text',
-            textContent: name
-        });
+        const text = document.createElement('div');
+        text.className = 'p-gui__image-text';
+        text.textContent = name;
+        image.append(text);
         
-        
-        image.onclick = () => {
+        image.addEventListener('click', () => {
             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');
@@ -342,7 +300,7 @@ export default class GUI {
             if (typeof callback == 'function') {
                 callback({ path, text: name });
             }
-        };
+        });
 
         return image;
     }
@@ -355,8 +313,8 @@ 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 obj = params.obj; 
+        let prop = params.prop;
         let value = typeof params.value == 'number' ? params.value : null;
         let min = params.min ?? 0;
         let max = params.max ?? 1;
@@ -365,16 +323,16 @@ export default class GUI {
         // callback mode
         if ( value !== null ) {
             if (prop != undefined || obj != undefined) {
-                console.warn(`[GUI] slider() "obj" and "property" parameters are ignored when a "value" parameter is used.`);
+                console.warn(`[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.`);
             }
         }
         // object-binding
         else if (prop != undefined && obj != undefined) {
             if (typeof prop != 'string') {
-                throw Error(`[GUI] slider() "prop" (or "property") parameter must be an string. Received: ${typeof prop}.`);
+                throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof prop}.`);
             }
             if (typeof obj != 'object') {
-                throw Error(`[GUI] slider() "obj" (or "object") parameter must be an object. Received: ${typeof obj}.`);
+                throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof obj}.`);
             }
 
             if (name == ' ') {
@@ -394,29 +352,24 @@ export default class GUI {
 
         this.imageContainer = null;
     
-        var container = this._createElement({
-            class: 'p-gui__slider',
-            textContent: name
-        });
-    
-        var slider_ctrl = this._createElement({
-            parent: container,
-            el: 'input',
-            class: 'p-gui__slider-ctrl',
-            customAttributes: {
-                type: 'range',
-                min,
-                max,
-                step,
-                value: isObject ? obj[prop] : value
-            }
-        });
+        const container = document.createElement('div');
+        container.className = 'p-gui__slider';
+        container.textContent = name;
+        this.wrapper.append(container);
     
-        var slider_value = this._createElement({
-            parent: container,
-            class: 'p-gui__slider-value',
-            textContent: isObject ? String(obj[prop]) : String(value)
-        });
+        const slider_ctrl = document.createElement('input');
+        slider_ctrl.className = 'p-gui__slider-ctrl';
+        slider_ctrl.setAttribute('type', 'range');
+        slider_ctrl.setAttribute('min', min);
+        slider_ctrl.setAttribute('max', max);
+        slider_ctrl.setAttribute('step', step);
+        slider_ctrl.setAttribute('value', isObject ? obj[prop] : value);
+        container.append(slider_ctrl);
+
+        const slider_value = document.createElement('div');
+        slider_value.className = 'p-gui__slider-value';
+        slider_value.textContent = isObject ? String(obj[prop]) : String(value);
+        container.append(slider_value);
     
         slider_ctrl.addEventListener('input', () => {
             slider_value.textContent = slider_ctrl.value;
@@ -457,24 +410,24 @@ 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 obj = params.obj; 
+        let prop = params.prop;
         let value = typeof params.value === 'boolean' ? params.value : null;
 
         // callback mode
         if ( value !== null ) {
             if (prop != undefined || obj != undefined) {
-                console.warn(`[GUI] toggle() "obj" and "property" parameters are ignored when a "value" parameter is used.`);
+                console.warn(`[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.`);
             }
         }
 
         // object-binding
         else if (prop != undefined && obj != undefined) {
             if (typeof prop != 'string') {
-                throw Error(`[GUI] toggle() "prop" (or "property") parameter must be an string. Received: ${typeof prop}.`);
+                throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof prop}.`);
             }
             if (typeof obj != 'object') {
-                throw Error(`[GUI] toggle() "obj" (or "object") parameter must be an object. Received: ${typeof obj}.`);
+                throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof obj}.`);
             }
 
             if (name == ' ') {
@@ -492,30 +445,31 @@ export default class GUI {
 
         this.imageContainer = null;
 
-        const container = this._createElement({
-            class: 'p-gui__switch',
-            onclick: (ev) => {
-                const checkbox = ev.target.childNodes[1];
-                
-                let value = true;
-                
-                if (checkbox.classList.contains('p-gui__switch-checkbox--active')) {
-                    value = false;
-                }
-                
-                checkbox.classList.toggle('p-gui__switch-checkbox--active');
+        const container = document.createElement('div');
+        container.textContent = name;
+        container.className = 'p-gui__switch';
+        this.wrapper.append(container);
 
-                if ( isObject ) {
-                    obj[prop] = value;
-                }
-                
-                else {
-                    if (typeof callback == 'function') {
-                        callback(value);
-                    }
+        container.addEventListener('click', (ev) => {
+            const checkbox = ev.target.childNodes[1];
+            
+            let value = true;
+            
+            if (checkbox.classList.contains('p-gui__switch-checkbox--active')) {
+                value = false;
+            }
+            
+            checkbox.classList.toggle('p-gui__switch-checkbox--active');
+
+            if ( isObject ) {
+                obj[prop] = value;
+            }
+            
+            else {
+                if (typeof callback == 'function') {
+                    callback(value);
                 }
-            },
-            textContent: name
+            }
         });
 
         let activeClass = (() => {
@@ -526,10 +480,9 @@ export default class GUI {
             }
         })();
 
-        const checkbox = this._createElement({
-            parent: container,
-            class: 'p-gui__switch-checkbox' + activeClass
-        });
+        const checkbox = document.createElement('div');
+        checkbox.className = 'p-gui__switch-checkbox' + activeClass;
+        container.append(checkbox);
 
         if ( isObject ) {
             Object.defineProperty( obj, prop, {
@@ -561,8 +514,8 @@ 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 obj = params.obj; 
+        let prop = params.prop;
         let values = Array.isArray(params.values) ? params.values : null;
         let value;
 
@@ -572,7 +525,7 @@ export default class GUI {
         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.`);
+                console.warn(`[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.`);
             }
 
             value = (() => {
@@ -588,16 +541,16 @@ export default class GUI {
             })();
         }
 
-        // object-binding
+        // object-binding mode
         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}.`);
+                throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof prop}.`);
             }
             if (typeof obj != 'object') {
-                throw Error(`[GUI] list() "obj" (or "object") parameter must be an object. Received: ${typeof obj}.`);
+                throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof obj}.`);
             }
 
-            value = (() => {
+            value = (() => {                
                 if (!values) {
                     return null;
                 }
@@ -620,23 +573,21 @@ export default class GUI {
 
         this.imageContainer = null;
 
-        let container = this._createElement({
-            class: 'p-gui__list',
-            textContent: name
-        });
+        let container = document.createElement('div');
+        container.className = 'p-gui__list';
+        container.textContent = name;
+        this.wrapper.append(container);
 
-        let select = this._createElement({
-            parent: container,
-            el: 'select',
-            class: 'p-gui__list-dropdown',
-            onchange: (ev) => {
-                if ( isObject ) {
-                    obj[prop] = ev.target.value;
-                }
+        let select = document.createElement('select');
+        container.append(select);
+        select.className = 'p-gui__list-dropdown';
+        select.addEventListener('change', (ev) => {
+            if ( isObject ) {
+                obj[prop] = ev.target.value;
+            }
 
-                else if (callback) {
-                    callback(ev.target.value);
-                }
+            else if (callback) {
+                callback(ev.target.value);
             }
         });
 
@@ -644,14 +595,11 @@ export default class GUI {
         {
             values.forEach((item, index) => 
             {
-                let option = this._createElement({
-                    parent: select,
-                    el: 'option',
-                    customAttributes: {
-                        value: item,
-                    },
-                    textContent: item
-                });
+                let option = document.createElement('option');
+                option.setAttribute('value', item);
+                option.textContent = item;
+                select.append(option);
+
                 if (value == index) {
                     option.setAttribute('selected', '');
                 }
@@ -703,42 +651,40 @@ export default class GUI {
         const minY = params.y.min ?? 0;
         const maxY = params.y.max ?? 1;
 
-        const objectX = params.x.obj || params.x.object;
-        const propX = params.x.prop || params.x.property;
+        const objectX = params.x.obj;
+        const propX = params.x.prop;
         const propXReferenceIndex = this.propReferences.push(objectX[propX]) - 1;
         
-        const objectY = params.y.obj || params.y.object;
-        const propY = params.y.prop || params.y.property;
+        const objectY = params.y.obj;
+        const propY = params.y.prop;
         const propYReferenceIndex = this.propReferences.push(objectY[propY]) - 1;
 
         callback = typeof callback == 'function' ? callback : null;
 
         this.imageContainer = null;
 
-        const container = this._createElement({
-            class: 'p-gui__vector2',
-            textContent: name
-        });
+        const container = document.createElement('div');
+        container.className = 'p-gui__vector2';
+        container.textContent = name;
+        this.wrapper.append(container);
 
-        const vector_value = this._createElement({
-            parent: container,
-            class: 'p-gui__vector-value',
-            textContent: objectX[propX] + ', ' + objectY[propY]
-        });
+        const vector_value = document.createElement('div');
+        vector_value.className = 'p-gui__vector-value';
+        vector_value.textContent = objectX[propX] + ', ' + objectY[propY];
+        container.append(vector_value);
 
-        const area = this._createElement({
-            parent: container,
-            el: 'div',
-            class: 'p-gui__vector2-area',
-            onclick: (evt) => {
-                objectX[propX] = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX).toFixed(2));
-                objectY[propY] = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY).toFixed(2));
+        const area = document.createElement('div');
+        area.className = 'p-gui__vector2-area';
+        container.append(area);
+        area.addEventListener('click', evt => {
+            objectX[propX] = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX).toFixed(2));
+            objectY[propY] = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY).toFixed(2));
 
-                if (callback) {
-                    callback(objectX[propX], objectX[propY]);
-                }
-            },
+            if (callback) {
+                callback(objectX[propX], objectX[propY]);
+            }
         });
+        
         let pointer_is_down = false;
         area.addEventListener('pointerdown', (evt) => {
             pointer_is_down = true;
@@ -757,20 +703,17 @@ export default class GUI {
             }
         });
 
-        this._createElement({
-            parent: area,
-            class: 'p-gui__vector2-line p-gui__vector2-line-x'
-        });
-        
-        this._createElement({
-            parent: area,
-            class: 'p-gui__vector2-line p-gui__vector2-line-y'
-        });
+        const line_x = document.createElement('div');
+        line_x.className = 'p-gui__vector2-line p-gui__vector2-line-x';
+        area.append(line_x);
 
-        const dot = this._createElement({
-            parent: area,
-            class: 'p-gui__vector2-dot'
-        });
+        const line_y = document.createElement('div');
+        line_y.className = 'p-gui__vector2-line p-gui__vector2-line-y';
+        area.append(line_y);
+
+        const dot = document.createElement('div');
+        dot.className = 'p-gui__vector2-dot';
+        area.append(dot);
 
         dot.style.left = this._mapLinear(objectX[propX], minX, maxX, 0, area.clientWidth) + 'px';
         dot.style.top = this._mapLinear(objectY[propY], minY, maxY, area.clientHeight, 0) + 'px';
@@ -807,8 +750,8 @@ export default class GUI {
 
         let isObject = false;
         let propReferenceIndex = null;
-        let obj = params.obj || params.object; 
-        let prop = params.prop || params.property;
+        let obj = params.obj; 
+        let prop = params.prop;
         let value;
 
         if (typeof params.value == 'string') {
@@ -824,17 +767,17 @@ export default class GUI {
         // 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.`);
+                console.warn(`[GUI] color() "obj" and "prop" 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}.`);
+                throw Error(`[GUI] color() "prop" 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}.`);
+                throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof obj}.`);
             }
 
             if (name == ' ') {
@@ -852,19 +795,16 @@ export default class GUI {
 
         this.imageContainer = null;
 
-        const container = this._createElement({
-            el: 'div',
-            class: 'p-gui__color',
-            textContent: name,
-        });
+        const container = document.createElement('div');
+        container.className = 'p-gui__color';
+        container.textContent = name;
+        this.wrapper.append(container);
 
-        const colorpicker = this._createElement({
-            parent: container,
-            el: 'input',
-            class: 'p-gui__color-picker',
-            type: 'color',
-            value
-        });
+        const colorpicker = document.createElement('input');
+        colorpicker.className = 'p-gui__color-picker';
+        colorpicker.setAttribute('type', 'color');
+        colorpicker.value = value;
+        container.append(colorpicker);
 
         if (typeof callback == 'function') {
             colorpicker.addEventListener('input', () => {
@@ -916,19 +856,18 @@ export default class GUI {
 
         let container_style = color ? `background-color: ${color};` : '';
         container_style += maxHeight ? `max-height: ${maxHeight}px;` : '';
+
+        const container = document.createElement('div');
+        container.className = className;
+        container.style = container_style;
+        this.wrapper.append(container);
         
-        let container = this._createElement({
-            class: className,
-            inline: container_style,
-        });
-        
-        let folderHeader = this._createElement({
-            innerHTML: `<span class="p-gui__folder-arrow"></span>${name}`,
-            class: 'p-gui__folder-header',
-            onclick: function() {
-                this.parentNode.classList.toggle('p-gui__folder--closed');
-            },
-            parent: container
+        const folderHeader = document.createElement('div');
+        folderHeader.innerHTML = `<span class="p-gui__folder-arrow"></span>${name}`;
+        folderHeader.className = 'p-gui__folder-header';
+        container.append(folderHeader);
+        folderHeader.addEventListener('click', () => {
+            container.classList.toggle('p-gui__folder--closed');
         });
 
         let folder = new GUI({isFolder: true, folderOptions: {

package/src/styles.js

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