perfect-gui 4.11.6 → 4.11.7

package/dist/perfect-gui.mjs

@@ -1,4 +1,4 @@
-class k {
+class C {
   constructor(e, t = {}, i) {
     if (this.parent = e, this.propReferences = [], typeof t != "object")
       throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof t}.`);
@@ -6,8 +6,8 @@ class k {
     this.isObject = !1;
     let s = null;
     this.obj = t.obj, this.prop = t.prop;
-    let n = typeof t.value == "number" ? t.value : null;
-    if (this.min = t.min ?? 0, this.max = t.max ?? 1, this.step = t.step || (this.max - this.min) / 100, this.callback = typeof i == "function" ? i : null, n !== null)
+    let r = typeof t.value == "number" ? t.value : null;
+    if (this.min = t.min ?? 0, this.max = t.max ?? 1, this.step = t.step || (this.max - this.min) / 100, this.decimals = this.parent._countDecimals(this.step), this.callback = typeof i == "function" ? i : null, r !== null)
       (this.prop != null || this.obj != null) && console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
     else if (this.prop != null && this.obj != null) {
       if (typeof this.prop != "string")
@@ -16,15 +16,15 @@ class k {
         throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof this.obj}.`);
       a == " " && (a = this.prop), s = this.propReferences.push(this.obj[this.prop]) - 1, this.isObject = !0;
     } else
-      (this.prop != null && this.obj == null || this.prop == null && this.obj != null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), n = (this.max - this.min) / 2;
+      (this.prop != null && this.obj == null || this.prop == null && this.obj != null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), r = (this.max - this.min) / 2;
     const o = typeof t.tooltip == "string" ? t.tooltip : t.tooltip === !0 ? a : null;
     this.imageContainer = null;
-    const r = document.createElement("div");
-    r.className = "p-gui__slider", o && r.setAttribute("title", o);
-    const p = document.createElement("div");
-    p.className = "p-gui__slider-name", p.textContent = a, r.append(p), this.ctrlDiv = document.createElement("div"), this.ctrlDiv.className = "p-gui__slider-ctrl", this.ctrlDiv.setAttribute("type", "range"), this.ctrlDiv.setAttribute("min", this.min), this.ctrlDiv.setAttribute("max", this.max), r.append(this.ctrlDiv);
+    const n = document.createElement("div");
+    n.className = "p-gui__slider", o && n.setAttribute("title", o);
+    const c = document.createElement("div");
+    c.className = "p-gui__slider-name", c.textContent = a, n.append(c), this.ctrlDiv = document.createElement("div"), this.ctrlDiv.className = "p-gui__slider-ctrl", this.ctrlDiv.setAttribute("type", "range"), this.ctrlDiv.setAttribute("min", this.min), this.ctrlDiv.setAttribute("max", this.max), n.append(this.ctrlDiv);
     const l = document.createElement("div");
-    return l.className = "p-gui__slider-bar", this.ctrlDiv.append(l), this.handle = document.createElement("div"), this.handle.className = "p-gui__slider-handle", this.ctrlDiv.append(this.handle), this.filling = document.createElement("div"), this.filling.className = "p-gui__slider-filling", l.append(this.filling), this.valueInput = document.createElement("input"), this.valueInput.className = "p-gui__slider-value", this.valueInput.value = this.isObject ? this.obj[this.prop] : n, r.append(this.valueInput), setTimeout(() => {
+    return l.className = "p-gui__slider-bar", this.ctrlDiv.append(l), this.handle = document.createElement("div"), this.handle.className = "p-gui__slider-handle", this.ctrlDiv.append(this.handle), this.filling = document.createElement("div"), this.filling.className = "p-gui__slider-filling", l.append(this.filling), this.valueInput = document.createElement("input"), this.valueInput.className = "p-gui__slider-value", this.valueInput.value = this.isObject ? this.obj[this.prop] : r, n.append(this.valueInput), setTimeout(() => {
       const d = this.handle.offsetWidth;
       this.handle.position = this._mapLinear(this.valueInput.value, this.min, this.max, d / 2, 88 - d / 2), this.handle.position = Math.min(this.handle.position, 88 - d / 2), this.handle.position = Math.max(this.handle.position, d / 2), this.handle.style.transform = `translate(-50%, -50%) translateX(${this.handle.position}px)`, this.filling.style.width = `${this.handle.position}px`;
     }, 0), this.valueInput.addEventListener("change", () => {
@@ -40,23 +40,16 @@ class k {
         this.propReferences[s] = d, this.valueInput.value = d, this._updateHandlePositionFromValue(), this.callback && this.callback(parseFloat(this.valueInput.value));
       },
       get: () => this.propReferences[s]
-    }), r;
+    }), n;
   }
   _updateHandlePositionFromPointer(e, t = !1) {
-    const i = this.ctrlDiv.offsetWidth, a = this.handle.offsetWidth, s = e.clientX - this.ctrlDiv.prevPosition, n = parseFloat(this.valueInput.value);
+    const i = this.ctrlDiv.offsetWidth, a = this.handle.offsetWidth, s = e.clientX - this.ctrlDiv.prevPosition, r = parseFloat(this.valueInput.value);
     let o;
     t ? o = e.offsetX : o = this.handle.position + s, o = Math.max(a / 2, Math.min(o, i - a / 2));
-    let r = this.min + (this.max - this.min) * (o - a / 2) / (i - a);
-    r > n ? r = this._quantizeFloor(r, this.step) : r = this._quantizeCeil(r, this.step), r = parseFloat(r.toFixed(9));
-    const p = parseFloat((n + this.step).toFixed(9)), l = parseFloat((n - this.step).toFixed(9));
-    if (r >= p || r <= l) {
-      const d = this._countDecimals(this.step);
-      r = r.toFixed(d), this.valueInput.value = r, this.ctrlDiv.prevPosition = e.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${o}px)`, this.handle.position = o, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks();
-    }
-  }
-  _countDecimals(e) {
-    const t = e.toString(), i = t.indexOf(".");
-    return i === -1 ? 0 : t.length - i - 1;
+    let n = this.min + (this.max - this.min) * (o - a / 2) / (i - a);
+    n > r ? n = this._quantizeFloor(n, this.step) : n = this._quantizeCeil(n, this.step), n = parseFloat(n.toFixed(9));
+    const c = parseFloat((r + this.step).toFixed(9)), l = parseFloat((r - this.step).toFixed(9));
+    (n >= c || n <= l) && (n = n.toFixed(this.decimals), this.valueInput.value = n, this.ctrlDiv.prevPosition = e.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${o}px)`, this.handle.position = o, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks());
   }
   _updateHandlePositionFromValue() {
     const e = this.ctrlDiv.offsetWidth, t = this.handle.offsetWidth;
@@ -79,7 +72,50 @@ class k {
     return t * Math.floor(e / t);
   }
 }
-const E = (
+function R(f = {}, e) {
+  if (typeof f != "object")
+    throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof f}.`);
+  let t = typeof f.name == "string" && f.name || " ";
+  const i = f.x.min ?? 0, a = f.x.max ?? 1, s = f.y.min ?? 0, r = f.y.max ?? 1, o = f.x.step || (a - i) / 100, n = f.y.step || (r - s) / 100, c = this._countDecimals(o), l = this._countDecimals(n), d = f.x.obj, h = f.x.prop, g = this.propReferences.push(d[h]) - 1, p = f.y.obj, u = f.y.prop, v = this.propReferences.push(p[u]) - 1, x = typeof f.tooltip == "string" ? f.tooltip : f.tooltip === !0 ? t : null;
+  e = typeof e == "function" ? e : null, this.imageContainer = null;
+  const _ = document.createElement("div");
+  _.className = "p-gui__vector2", _.textContent = t, x && _.setAttribute("title", x), this.wrapper.append(_);
+  const w = document.createElement("div");
+  w.className = "p-gui__vector-value", w.textContent = d[h] + ", " + p[u], _.append(w);
+  const b = document.createElement("div");
+  b.className = "p-gui__vector2-area", _.append(b), b.addEventListener("click", (m) => {
+    const k = parseFloat(this._mapLinear(m.offsetX, 0, b.clientWidth, i, a)), E = parseFloat(this._mapLinear(m.offsetY, 0, b.clientHeight, r, s));
+    d[h] = k.toFixed(c), p[u] = E.toFixed(l), e && e(d[h], d[u]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+  });
+  let A = !1;
+  b.addEventListener("pointerdown", (m) => {
+    A = !0;
+  }), b.addEventListener("pointerup", () => {
+    A = !1;
+  }), b.addEventListener("pointermove", (m) => {
+    if (A) {
+      const k = parseFloat(this._mapLinear(m.offsetX, 0, b.clientWidth, i, a)), E = parseFloat(this._mapLinear(m.offsetY, 0, b.clientHeight, r, s));
+      d[h] = k.toFixed(c), p[u] = E.toFixed(l), e && e(d[h], d[u]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+    }
+  });
+  const U = document.createElement("div");
+  U.className = "p-gui__vector2-line p-gui__vector2-line-x", b.append(U);
+  const j = document.createElement("div");
+  j.className = "p-gui__vector2-line p-gui__vector2-line-y", b.append(j);
+  const y = document.createElement("div");
+  y.className = "p-gui__vector2-dot", b.append(y), y.style.left = this._mapLinear(d[h], i, a, 0, b.clientWidth) + "px", y.style.top = this._mapLinear(p[u], s, r, b.clientHeight, 0) + "px", Object.defineProperty(d, h, {
+    set: (m) => {
+      this.propReferences[g] = m, y.style.left = this._mapLinear(m, i, a, 0, b.clientWidth) + "px", w.textContent = String(m) + ", " + p[u];
+    },
+    get: () => this.propReferences[g]
+  }), Object.defineProperty(p, u, {
+    set: (m) => {
+      this.propReferences[v] = m, y.style.top = this._mapLinear(m, s, r, b.clientHeight, 0) + "px", w.textContent = d[h] + ", " + String(m);
+    },
+    get: () => this.propReferences[v]
+  });
+}
+const P = (
   /* css */
   `
 .p-gui__button {
@@ -102,7 +138,7 @@ const E = (
     margin-inline: 0;
 }
 `
-), U = (
+), O = (
   /* css */
   `
 .p-gui__slider {
@@ -196,7 +232,7 @@ const E = (
     outline: none;
 }
 `
-), j = (
+), $ = (
   /* css */
   `
 .p-gui__list {
@@ -233,7 +269,7 @@ const E = (
     background: rgba(255, 255, 255, .1);
 }
 `
-), I = (
+), D = (
   /* css */
   `
 .p-gui__switch {
@@ -270,7 +306,7 @@ const E = (
     box-shadow: 0 0 7px #00ff89;
 }
 `
-), C = (
+), F = (
   /* css */
   `
 .p-gui__color {
@@ -308,7 +344,7 @@ const E = (
     border: none;
 }
 `
-), R = (
+), L = (
   /* css */
   `
     .p-gui__vector2 {
@@ -373,7 +409,7 @@ const E = (
         position: absolute;
     }
 `
-), P = (
+), H = (
   /* css */
   `
     .p-gui__image-container {
@@ -429,7 +465,7 @@ const E = (
         
     }
 `
-), O = (
+), N = (
   /* css */
   `
     .p-gui__folder {
@@ -483,7 +519,7 @@ const E = (
     }
 `
 );
-function $(w) {
+function M(f) {
   return (
     /* css */
     `
@@ -498,7 +534,7 @@ function $(w) {
         --color-accent-hover: #218fda;
         --transition: .1s linear;
     
-        position: ${w};
+        position: ${f};
         top: 0;
         left: 0;
         transform: translate3d(0,0,0);
@@ -616,31 +652,31 @@ function $(w) {
         border-color: rgba(255,255,255,.2);
     }   
     
-    ${E}
-    
     ${P}
     
-    ${j}
+    ${H}
     
-    ${I}
+    ${$}
+    
+    ${D}
 
-    ${U}
+    ${O}
     
-    ${C}
+    ${F}
     
-    ${R}
+    ${L}
     
-    ${O}
+    ${N}
 `
   );
 }
-class A {
+class I {
   constructor(e = {}) {
     if (this.firstParent = this, e.container ? (this.container = typeof e.container == "string" ? document.querySelector(e.container) : e.container, this.position_type = "absolute") : (this.container = document.body, this.position_type = "fixed"), this.propReferences = [], this.folders = [], e.isFolder) {
       this._folderConstructor(e.folderOptions);
       return;
     }
-    typeof e.onUpdate == "function" && (this.onUpdate = e.onUpdate), this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.opacity = e.opacity || 1, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${$(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
+    typeof e.onUpdate == "function" && (this.onUpdate = e.onUpdate), this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.opacity = e.opacity || 1, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${M(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose(), this.vector2 = R;
   }
   _styleInstance() {
     let e = this._getScrollbarWidth(this.container);
@@ -712,50 +748,50 @@ class A {
       throw typeof e.path == null ? Error("[GUI] image() path must be provided.") : Error("[GUI] image() path must be a string.");
     let a = i.replace(/^.*[\\\/]/, ""), s;
     e.name == null ? s = a : s = typeof e.name == "string" && e.name || " ";
-    const n = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null, o = e.selected === !0, r = e.selectionBorder !== !1;
-    let p = "";
-    e.width && (typeof e.width == "number" && (e.width += "px"), p += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), p += `height: ${e.height}; `), this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer));
+    const r = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null, o = e.selected === !0, n = e.selectionBorder !== !1;
+    let c = "";
+    e.width && (typeof e.width == "number" && (e.width += "px"), c += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), c += `height: ${e.height}; `), this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer));
     const l = document.createElement("div");
-    l.className = "p-gui__image", l.style = "background-image: url(" + i + "); " + p, n && l.setAttribute("title", n), this.imageContainer.append(l), o && r && l.classList.add("p-gui__image--selected");
+    l.className = "p-gui__image", l.style = "background-image: url(" + i + "); " + c, r && l.setAttribute("title", r), this.imageContainer.append(l), o && n && l.classList.add("p-gui__image--selected");
     const d = document.createElement("div");
     return d.className = "p-gui__image-text", d.textContent = s, l.append(d), l.addEventListener("click", () => {
-      let c = l.parentElement.querySelectorAll(".p-gui__image--selected");
-      for (let f = 0; f < c.length; f++)
-        c[f].classList.remove("p-gui__image--selected");
-      r && l.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: i, text: s }), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+      let h = l.parentElement.querySelectorAll(".p-gui__image--selected");
+      for (let g = 0; g < h.length; g++)
+        h[g].classList.remove("p-gui__image--selected");
+      n && l.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: i, text: s }), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
     }), l;
   }
   slider(e = {}, t) {
-    const i = new k(this, e, t);
+    const i = new C(this, e, t);
     this.wrapper.append(i);
   }
   toggle(e = {}, t) {
     if (typeof e != "object")
       throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.name == "string" && e.name || " ", a = !1, s = null, n = e.obj, o = e.prop, r = typeof e.value == "boolean" ? e.value : null;
-    if (r !== null)
-      (o != null || n != null) && console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
-    else if (o != null && n != null) {
+    let i = typeof e.name == "string" && e.name || " ", a = !1, s = null, r = e.obj, o = e.prop, n = typeof e.value == "boolean" ? e.value : null;
+    if (n !== null)
+      (o != null || r != null) && console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
+    else if (o != null && r != null) {
       if (typeof o != "string")
         throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof o}.`);
-      if (typeof n != "object")
-        throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof n}.`);
-      i == " " && (i = o), s = this.propReferences.push(n[o]) - 1, a = !0;
+      if (typeof r != "object")
+        throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof r}.`);
+      i == " " && (i = o), s = this.propReferences.push(r[o]) - 1, a = !0;
     } else
-      (o != null && n == null || o == null && n == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
-    const p = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
+      (o != null && r == null || o == null && r == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
+    const c = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
     this.imageContainer = null;
     const l = document.createElement("div");
-    l.textContent = i, l.className = "p-gui__switch", p && l.setAttribute("title", p), this.wrapper.append(l), l.addEventListener("click", (f) => {
-      const u = f.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 ? n[o] = g : typeof t == "function" && t(g), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+    l.textContent = i, l.className = "p-gui__switch", c && l.setAttribute("title", c), this.wrapper.append(l), l.addEventListener("click", (g) => {
+      const p = g.target.childNodes[1];
+      let u = !0;
+      p.classList.contains("p-gui__switch-checkbox--active") && (u = !1), p.classList.toggle("p-gui__switch-checkbox--active"), a ? r[o] = u : typeof t == "function" && t(u), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
     });
-    let d = (() => a ? n[o] ? " p-gui__switch-checkbox--active" : "" : r ? " p-gui__switch-checkbox--active" : "")();
-    const c = document.createElement("div");
-    c.className = "p-gui__switch-checkbox" + d, l.append(c), a && Object.defineProperty(n, o, {
-      set: (f) => {
-        this.propReferences[s] = f, f ? c.classList.add("p-gui__switch-checkbox--active") : c.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(f);
+    let d = (() => a ? r[o] ? " p-gui__switch-checkbox--active" : "" : n ? " p-gui__switch-checkbox--active" : "")();
+    const h = document.createElement("div");
+    h.className = "p-gui__switch-checkbox" + d, l.append(h), a && Object.defineProperty(r, o, {
+      set: (g) => {
+        this.propReferences[s] = g, g ? h.classList.add("p-gui__switch-checkbox--active") : h.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(g);
       },
       get: () => this.propReferences[s]
     });
@@ -763,115 +799,76 @@ class A {
   list(e = {}, t) {
     if (typeof e != "object")
       throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.name == "string" ? e.name : " ", a = !1, s = null, n = e.obj, o = e.prop, r = Array.isArray(e.values) ? e.values : null, p, l = typeof r[0] != "string";
+    let i = typeof e.name == "string" ? e.name : " ", a = !1, s = null, r = e.obj, o = e.prop, n = Array.isArray(e.values) ? e.values : null, c, l = typeof n[0] != "string";
     const d = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
-    if (t = typeof t == "function" ? t : null, e.value !== void 0 || e.value === void 0 && n === void 0 && o === void 0)
-      (o != null || n != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), p = (() => {
-        if (!r)
+    if (t = typeof t == "function" ? t : null, e.value !== void 0 || e.value === void 0 && r === void 0 && o === void 0)
+      (o != null || r != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), c = (() => {
+        if (!n)
           return null;
         if (typeof e.value == "string")
-          return r.indexOf(e.value);
+          return n.indexOf(e.value);
         if (typeof e.value == "number")
           return e.value;
       })();
-    else if (o != null && n != null) {
+    else if (o != null && r != null) {
       if (typeof o != "string")
         throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof o}.`);
-      if (typeof n != "object")
-        throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof n}.`);
-      p = (() => {
-        if (!r)
+      if (typeof r != "object")
+        throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);
+      c = (() => {
+        if (!n)
           return null;
-        if (typeof n[o] == "string")
-          return l ? r.find((u) => u.value === n[o]).value : r.indexOf(n[o]);
-        if (typeof n[o] == "number")
-          return l ? r.find((u) => u.value === n[o]).value : n[o];
-      })(), s = this.propReferences.push(n[o]) - 1, a = !0;
+        if (typeof r[o] == "string")
+          return l ? n.find((p) => p.value === r[o]).value : n.indexOf(r[o]);
+        if (typeof r[o] == "number")
+          return l ? n.find((p) => p.value === r[o]).value : r[o];
+      })(), s = this.propReferences.push(r[o]) - 1, a = !0;
     } else
-      (o != null && n == null || o == null && n == null) && console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');
+      (o != null && r == null || o == null && r == null) && console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');
     this.imageContainer = null;
-    let c = document.createElement("div");
-    c.className = "p-gui__list", c.textContent = i, d && c.setAttribute("title", d), this.wrapper.append(c);
-    let f = document.createElement("select");
-    c.append(f), f.className = "p-gui__list-dropdown", f.addEventListener("change", (u) => {
-      a ? n[o] = u.target.value : t && t(u.target.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    }), r && r.forEach((u, g) => {
-      const _ = l ? u.name : u, h = l ? u.value : u;
-      let x = document.createElement("option");
-      x.setAttribute("value", h), x.textContent = _, f.append(x), (!l && p == g || l && p == h) && x.setAttribute("selected", "");
-    }), a && Object.defineProperty(n, o, {
-      set: (u) => {
-        let g, _, h;
-        l ? (h = r.find((v) => v.value == u), _ = (h == null ? void 0 : h.value) || r[0].value, g = r.indexOf(h)) : (typeof u == "string" && (g = r.indexOf(u), _ = u), typeof u == "number" && (g = u, _ = r[u])), this.propReferences[s] = l ? _ : u;
-        const x = f.querySelector("[selected]");
-        x && x.removeAttribute("selected"), f.querySelectorAll("option")[g].setAttribute("selected", ""), typeof t == "function" && t(l ? h : _, g);
+    let h = document.createElement("div");
+    h.className = "p-gui__list", h.textContent = i, d && h.setAttribute("title", d), this.wrapper.append(h);
+    let g = document.createElement("select");
+    h.append(g), g.className = "p-gui__list-dropdown", g.addEventListener("change", (p) => {
+      a ? r[o] = p.target.value : t && t(p.target.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+    }), n && n.forEach((p, u) => {
+      const v = l ? p.name : p, x = l ? p.value : p;
+      let _ = document.createElement("option");
+      _.setAttribute("value", x), _.textContent = v, g.append(_), (!l && c == u || l && c == x) && _.setAttribute("selected", "");
+    }), a && Object.defineProperty(r, o, {
+      set: (p) => {
+        let u, v, x;
+        l ? (x = n.find((w) => w.value == p), v = (x == null ? void 0 : x.value) || n[0].value, u = n.indexOf(x)) : (typeof p == "string" && (u = n.indexOf(p), v = p), typeof p == "number" && (u = p, v = n[p])), this.propReferences[s] = l ? v : p;
+        const _ = g.querySelector("[selected]");
+        _ && _.removeAttribute("selected"), g.querySelectorAll("option")[u].setAttribute("selected", ""), typeof t == "function" && t(l ? x : v, u);
       },
       get: () => this.propReferences[s]
     });
   }
-  vector2(e = {}, t) {
-    if (typeof e != "object")
-      throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);
-    let i = typeof e.name == "string" && e.name || " ";
-    const a = e.x.min ?? 0, s = e.x.max ?? 1, n = e.y.min ?? 0, o = e.y.max ?? 1, r = e.x.obj, p = e.x.prop, l = this.propReferences.push(r[p]) - 1, d = e.y.obj, c = e.y.prop, f = this.propReferences.push(d[c]) - 1, u = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
-    t = typeof t == "function" ? t : null, this.imageContainer = null;
-    const g = document.createElement("div");
-    g.className = "p-gui__vector2", g.textContent = i, u && g.setAttribute("title", u), this.wrapper.append(g);
-    const _ = document.createElement("div");
-    _.className = "p-gui__vector-value", _.textContent = r[p] + ", " + d[c], g.append(_);
-    const h = document.createElement("div");
-    h.className = "p-gui__vector2-area", g.append(h), h.addEventListener("click", (b) => {
-      r[p] = parseFloat(this._mapLinear(b.offsetX, 0, h.clientWidth, a, s).toFixed(2)), d[c] = parseFloat(this._mapLinear(b.offsetY, 0, h.clientHeight, o, n).toFixed(2)), t && t(r[p], r[c]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    });
-    let x = !1;
-    h.addEventListener("pointerdown", (b) => {
-      x = !0;
-    }), h.addEventListener("pointerup", () => {
-      x = !1;
-    }), h.addEventListener("pointermove", (b) => {
-      x && (r[p] = parseFloat(this._mapLinear(b.offsetX, 0, h.clientWidth, a, s).toFixed(2)), d[c] = parseFloat(this._mapLinear(b.offsetY, 0, h.clientHeight, o, n).toFixed(2)), t && t(r[p], r[c]), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate());
-    });
-    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 m = document.createElement("div");
-    m.className = "p-gui__vector2-dot", h.append(m), m.style.left = this._mapLinear(r[p], a, s, 0, h.clientWidth) + "px", m.style.top = this._mapLinear(d[c], n, o, h.clientHeight, 0) + "px", Object.defineProperty(r, p, {
-      set: (b) => {
-        this.propReferences[l] = b, m.style.left = this._mapLinear(b, a, s, 0, h.clientWidth) + "px", _.textContent = String(b) + ", " + d[c];
-      },
-      get: () => this.propReferences[l]
-    }), Object.defineProperty(d, c, {
-      set: (b) => {
-        this.propReferences[f] = b, m.style.top = this._mapLinear(b, n, o, h.clientHeight, 0) + "px", _.textContent = r[p] + ", " + String(b);
-      },
-      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 || " ", a = !1, s = null, n = e.obj, o = e.prop, r;
-    const p = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
-    if (typeof e.value == "string" && (e.value.length != 7 || e.value[0] != "#" ? console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`) : r = e.value), r || (r = "#000000"), e.value !== void 0)
-      (o != null || n != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
-    else if (o != null && n != null) {
+    let i = typeof e.name == "string" && e.name || " ", a = !1, s = null, r = e.obj, o = e.prop, n;
+    const c = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null;
+    if (typeof e.value == "string" && (e.value.length != 7 || e.value[0] != "#" ? console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`) : n = e.value), n || (n = "#000000"), e.value !== void 0)
+      (o != null || r != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
+    else if (o != null && r != null) {
       if (typeof o != "string")
         throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof o}.`);
-      if (typeof n != "object")
-        throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof n}.`);
-      i == " " && (i = o), s = this.propReferences.push(n[o]) - 1, a = !0;
+      if (typeof r != "object")
+        throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);
+      i == " " && (i = o), s = this.propReferences.push(r[o]) - 1, a = !0;
     } else
-      (o != null && n == null || o == null && n == null) && console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');
+      (o != null && r == null || o == null && r == null) && console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');
     this.imageContainer = null;
     const l = document.createElement("div");
-    l.className = "p-gui__color", l.textContent = i, p && l.setAttribute("title", p), this.wrapper.append(l);
+    l.className = "p-gui__color", l.textContent = i, c && l.setAttribute("title", c), this.wrapper.append(l);
     const d = document.createElement("input");
-    d.className = "p-gui__color-picker", d.setAttribute("type", "color"), d.value = r, l.append(d), typeof t == "function" && d.addEventListener("input", () => {
-      a ? n[o] = d.value : typeof t == "function" && t(d.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
-    }), a && Object.defineProperty(n, o, {
-      set: (c) => {
-        this.propReferences[s] = c, d.value = c, typeof t == "function" && t(c);
+    d.className = "p-gui__color-picker", d.setAttribute("type", "color"), d.value = n, l.append(d), typeof t == "function" && d.addEventListener("input", () => {
+      a ? r[o] = d.value : typeof t == "function" && t(d.value), this.onUpdate ? this.onUpdate() : this.isFolder && this.firstParent.onUpdate && this.firstParent.onUpdate();
+    }), a && Object.defineProperty(r, o, {
+      set: (h) => {
+        this.propReferences[s] = h, d.value = h, typeof t == "function" && t(h);
       },
       get: () => this.propReferences[s]
     });
@@ -879,18 +876,18 @@ class A {
   folder(e = {}) {
     let t = typeof e.closed == "boolean" ? e.closed : !1, i = e.name || "", a = e.color || null, s = e.maxHeight || null;
     this.imageContainer = null;
-    let n = "p-gui__folder";
-    this.folders.length == 0 && (n += " p-gui__folder--first"), t && (n += " p-gui__folder--closed");
+    let r = "p-gui__folder";
+    this.folders.length == 0 && (r += " p-gui__folder--first"), t && (r += " p-gui__folder--closed");
     let o = a ? `background-color: ${a};` : "";
     o += s ? `max-height: ${s}px;` : "";
-    const r = document.createElement("div");
-    r.className = n, r.style = o, this.wrapper.append(r);
-    const p = document.createElement("div");
-    p.innerHTML = `<span class="p-gui__folder-arrow"></span>${i}`, p.className = "p-gui__folder-header", r.append(p), p.addEventListener("click", () => {
-      r.classList.toggle("p-gui__folder--closed");
+    const n = document.createElement("div");
+    n.className = r, n.style = o, this.wrapper.append(n);
+    const c = document.createElement("div");
+    c.innerHTML = `<span class="p-gui__folder-arrow"></span>${i}`, c.className = "p-gui__folder-header", n.append(c), c.addEventListener("click", () => {
+      n.classList.toggle("p-gui__folder--closed");
     });
-    let l = new A({ isFolder: !0, folderOptions: {
-      wrapper: r,
+    let l = new I({ isFolder: !0, folderOptions: {
+      wrapper: n,
       parent: this,
       firstParent: this.firstParent
     } });
@@ -918,7 +915,11 @@ class A {
   _mapLinear(e, t, i, a, s) {
     return a + (e - t) * (s - a) / (i - t);
   }
+  _countDecimals(e) {
+    const t = e.toString(), i = t.indexOf(".");
+    return i === -1 ? 0 : t.length - i - 1;
+  }
 }
 export {
-  A as default
+  I as default
 };

package/dist/perfect-gui.umd.js

@@ -1,4 +1,4 @@
-(function(v,w){typeof exports=="object"&&typeof module<"u"?module.exports=w():typeof define=="function"&&define.amd?define(w):(v=typeof globalThis<"u"?globalThis:v||self,v["Perfect GUI"]=w())})(this,function(){"use strict";class v{constructor(e,t={},i){if(this.parent=e,this.propReferences=[],typeof t!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof t}.`);let a=typeof t.name=="string"&&t.name||" ";this.isObject=!1;let s=null;this.obj=t.obj,this.prop=t.prop;let n=typeof t.value=="number"?t.value:null;if(this.min=t.min??0,this.max=t.max??1,this.step=t.step||(this.max-this.min)/100,this.callback=typeof i=="function"?i:null,n!==null)(this.prop!=null||this.obj!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(this.prop!=null&&this.obj!=null){if(typeof this.prop!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof this.prop}.`);if(typeof this.obj!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof this.obj}.`);a==" "&&(a=this.prop),s=this.propReferences.push(this.obj[this.prop])-1,this.isObject=!0}else(this.prop!=null&&this.obj==null||this.prop==null&&this.obj!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),n=(this.max-this.min)/2;const o=typeof t.tooltip=="string"?t.tooltip:t.tooltip===!0?a:null;this.imageContainer=null;const r=document.createElement("div");r.className="p-gui__slider",o&&r.setAttribute("title",o);const p=document.createElement("div");p.className="p-gui__slider-name",p.textContent=a,r.append(p),this.ctrlDiv=document.createElement("div"),this.ctrlDiv.className="p-gui__slider-ctrl",this.ctrlDiv.setAttribute("type","range"),this.ctrlDiv.setAttribute("min",this.min),this.ctrlDiv.setAttribute("max",this.max),r.append(this.ctrlDiv);const l=document.createElement("div");return l.className="p-gui__slider-bar",this.ctrlDiv.append(l),this.handle=document.createElement("div"),this.handle.className="p-gui__slider-handle",this.ctrlDiv.append(this.handle),this.filling=document.createElement("div"),this.filling.className="p-gui__slider-filling",l.append(this.filling),this.valueInput=document.createElement("input"),this.valueInput.className="p-gui__slider-value",this.valueInput.value=this.isObject?this.obj[this.prop]:n,r.append(this.valueInput),setTimeout(()=>{const d=this.handle.offsetWidth;this.handle.position=this._mapLinear(this.valueInput.value,this.min,this.max,d/2,88-d/2),this.handle.position=Math.min(this.handle.position,88-d/2),this.handle.position=Math.max(this.handle.position,d/2),this.handle.style.transform=`translate(-50%, -50%) translateX(${this.handle.position}px)`,this.filling.style.width=`${this.handle.position}px`},0),this.valueInput.addEventListener("change",()=>{this._updateHandlePositionFromValue(),this._triggerCallbacks()}),this.ctrlDiv.addEventListener("pointerdown",d=>{this.ctrlDiv.pointerDown=!0,this.ctrlDiv.prevPosition=d.clientX,this._updateHandlePositionFromPointer(d,!0)}),window.addEventListener("pointerup",d=>{this.ctrlDiv.pointerDown=!1}),window.addEventListener("pointermove",d=>{this.ctrlDiv.pointerDown&&(this.ctrlDiv.pointerDelta=d.clientX-this.ctrlDiv.prevPosition,this._updateHandlePositionFromPointer(d))}),this.isObject&&Object.defineProperty(this.obj,this.prop,{set:d=>{this.propReferences[s]=d,this.valueInput.value=d,this._updateHandlePositionFromValue(),this.callback&&this.callback(parseFloat(this.valueInput.value))},get:()=>this.propReferences[s]}),r}_updateHandlePositionFromPointer(e,t=!1){const i=this.ctrlDiv.offsetWidth,a=this.handle.offsetWidth,s=e.clientX-this.ctrlDiv.prevPosition,n=parseFloat(this.valueInput.value);let o;t?o=e.offsetX:o=this.handle.position+s,o=Math.max(a/2,Math.min(o,i-a/2));let r=this.min+(this.max-this.min)*(o-a/2)/(i-a);r>n?r=this._quantizeFloor(r,this.step):r=this._quantizeCeil(r,this.step),r=parseFloat(r.toFixed(9));const p=parseFloat((n+this.step).toFixed(9)),l=parseFloat((n-this.step).toFixed(9));if(r>=p||r<=l){const d=this._countDecimals(this.step);r=r.toFixed(d),this.valueInput.value=r,this.ctrlDiv.prevPosition=e.clientX,this.handle.style.transform=`translate(-50%, -50%) translateX(${o}px)`,this.handle.position=o,this.filling.style.width=this.handle.position+"px",this._triggerCallbacks()}}_countDecimals(e){const t=e.toString(),i=t.indexOf(".");return i===-1?0:t.length-i-1}_updateHandlePositionFromValue(){const e=this.ctrlDiv.offsetWidth,t=this.handle.offsetWidth;let i=this._mapLinear(this.valueInput.value,this.min,this.max,t/2,e-t/2);i=Math.max(t/2,Math.min(i,e-t/2)),this.handle.style.transform=`translate(-50%, -50%) translateX(${i}px)`,this.handle.position=i,this.filling.style.width=this.handle.position+"px"}_triggerCallbacks(){this.isObject?this.obj[this.prop]=parseFloat(this.valueInput.value):this.callback&&this.callback(parseFloat(this.valueInput.value)),this.parent.onUpdate?this.parent.onUpdate():this.parent.isFolder&&this.parent.firstParent.onUpdate&&this.parent.firstParent.onUpdate()}_mapLinear(e,t,i,a,s){return a+(e-t)*(s-a)/(i-t)}_quantize(e,t){return t*Math.round(e/t)}_quantizeCeil(e,t){return t*Math.ceil(e/t)}_quantizeFloor(e,t){return t*Math.floor(e/t)}}const w=`
+(function(A,k){typeof exports=="object"&&typeof module<"u"?module.exports=k():typeof define=="function"&&define.amd?define(k):(A=typeof globalThis<"u"?globalThis:A||self,A["Perfect GUI"]=k())})(this,function(){"use strict";class A{constructor(e,t={},i){if(this.parent=e,this.propReferences=[],typeof t!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof t}.`);let a=typeof t.name=="string"&&t.name||" ";this.isObject=!1;let s=null;this.obj=t.obj,this.prop=t.prop;let r=typeof t.value=="number"?t.value:null;if(this.min=t.min??0,this.max=t.max??1,this.step=t.step||(this.max-this.min)/100,this.decimals=this.parent._countDecimals(this.step),this.callback=typeof i=="function"?i:null,r!==null)(this.prop!=null||this.obj!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(this.prop!=null&&this.obj!=null){if(typeof this.prop!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof this.prop}.`);if(typeof this.obj!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof this.obj}.`);a==" "&&(a=this.prop),s=this.propReferences.push(this.obj[this.prop])-1,this.isObject=!0}else(this.prop!=null&&this.obj==null||this.prop==null&&this.obj!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),r=(this.max-this.min)/2;const o=typeof t.tooltip=="string"?t.tooltip:t.tooltip===!0?a:null;this.imageContainer=null;const n=document.createElement("div");n.className="p-gui__slider",o&&n.setAttribute("title",o);const c=document.createElement("div");c.className="p-gui__slider-name",c.textContent=a,n.append(c),this.ctrlDiv=document.createElement("div"),this.ctrlDiv.className="p-gui__slider-ctrl",this.ctrlDiv.setAttribute("type","range"),this.ctrlDiv.setAttribute("min",this.min),this.ctrlDiv.setAttribute("max",this.max),n.append(this.ctrlDiv);const l=document.createElement("div");return l.className="p-gui__slider-bar",this.ctrlDiv.append(l),this.handle=document.createElement("div"),this.handle.className="p-gui__slider-handle",this.ctrlDiv.append(this.handle),this.filling=document.createElement("div"),this.filling.className="p-gui__slider-filling",l.append(this.filling),this.valueInput=document.createElement("input"),this.valueInput.className="p-gui__slider-value",this.valueInput.value=this.isObject?this.obj[this.prop]:r,n.append(this.valueInput),setTimeout(()=>{const d=this.handle.offsetWidth;this.handle.position=this._mapLinear(this.valueInput.value,this.min,this.max,d/2,88-d/2),this.handle.position=Math.min(this.handle.position,88-d/2),this.handle.position=Math.max(this.handle.position,d/2),this.handle.style.transform=`translate(-50%, -50%) translateX(${this.handle.position}px)`,this.filling.style.width=`${this.handle.position}px`},0),this.valueInput.addEventListener("change",()=>{this._updateHandlePositionFromValue(),this._triggerCallbacks()}),this.ctrlDiv.addEventListener("pointerdown",d=>{this.ctrlDiv.pointerDown=!0,this.ctrlDiv.prevPosition=d.clientX,this._updateHandlePositionFromPointer(d,!0)}),window.addEventListener("pointerup",d=>{this.ctrlDiv.pointerDown=!1}),window.addEventListener("pointermove",d=>{this.ctrlDiv.pointerDown&&(this.ctrlDiv.pointerDelta=d.clientX-this.ctrlDiv.prevPosition,this._updateHandlePositionFromPointer(d))}),this.isObject&&Object.defineProperty(this.obj,this.prop,{set:d=>{this.propReferences[s]=d,this.valueInput.value=d,this._updateHandlePositionFromValue(),this.callback&&this.callback(parseFloat(this.valueInput.value))},get:()=>this.propReferences[s]}),n}_updateHandlePositionFromPointer(e,t=!1){const i=this.ctrlDiv.offsetWidth,a=this.handle.offsetWidth,s=e.clientX-this.ctrlDiv.prevPosition,r=parseFloat(this.valueInput.value);let o;t?o=e.offsetX:o=this.handle.position+s,o=Math.max(a/2,Math.min(o,i-a/2));let n=this.min+(this.max-this.min)*(o-a/2)/(i-a);n>r?n=this._quantizeFloor(n,this.step):n=this._quantizeCeil(n,this.step),n=parseFloat(n.toFixed(9));const c=parseFloat((r+this.step).toFixed(9)),l=parseFloat((r-this.step).toFixed(9));(n>=c||n<=l)&&(n=n.toFixed(this.decimals),this.valueInput.value=n,this.ctrlDiv.prevPosition=e.clientX,this.handle.style.transform=`translate(-50%, -50%) translateX(${o}px)`,this.handle.position=o,this.filling.style.width=this.handle.position+"px",this._triggerCallbacks())}_updateHandlePositionFromValue(){const e=this.ctrlDiv.offsetWidth,t=this.handle.offsetWidth;let i=this._mapLinear(this.valueInput.value,this.min,this.max,t/2,e-t/2);i=Math.max(t/2,Math.min(i,e-t/2)),this.handle.style.transform=`translate(-50%, -50%) translateX(${i}px)`,this.handle.position=i,this.filling.style.width=this.handle.position+"px"}_triggerCallbacks(){this.isObject?this.obj[this.prop]=parseFloat(this.valueInput.value):this.callback&&this.callback(parseFloat(this.valueInput.value)),this.parent.onUpdate?this.parent.onUpdate():this.parent.isFolder&&this.parent.firstParent.onUpdate&&this.parent.firstParent.onUpdate()}_mapLinear(e,t,i,a,s){return a+(e-t)*(s-a)/(i-t)}_quantize(e,t){return t*Math.round(e/t)}_quantizeCeil(e,t){return t*Math.ceil(e/t)}_quantizeFloor(e,t){return t*Math.floor(e/t)}}function k(f={},e){if(typeof f!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof f}.`);let t=typeof f.name=="string"&&f.name||" ";const i=f.x.min??0,a=f.x.max??1,s=f.y.min??0,r=f.y.max??1,o=f.x.step||(a-i)/100,n=f.y.step||(r-s)/100,c=this._countDecimals(o),l=this._countDecimals(n),d=f.x.obj,h=f.x.prop,g=this.propReferences.push(d[h])-1,p=f.y.obj,u=f.y.prop,v=this.propReferences.push(p[u])-1,x=typeof f.tooltip=="string"?f.tooltip:f.tooltip===!0?t:null;e=typeof e=="function"?e:null,this.imageContainer=null;const _=document.createElement("div");_.className="p-gui__vector2",_.textContent=t,x&&_.setAttribute("title",x),this.wrapper.append(_);const w=document.createElement("div");w.className="p-gui__vector-value",w.textContent=d[h]+", "+p[u],_.append(w);const b=document.createElement("div");b.className="p-gui__vector2-area",_.append(b),b.addEventListener("click",m=>{const j=parseFloat(this._mapLinear(m.offsetX,0,b.clientWidth,i,a)),I=parseFloat(this._mapLinear(m.offsetY,0,b.clientHeight,r,s));d[h]=j.toFixed(c),p[u]=I.toFixed(l),e&&e(d[h],d[u]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let U=!1;b.addEventListener("pointerdown",m=>{U=!0}),b.addEventListener("pointerup",()=>{U=!1}),b.addEventListener("pointermove",m=>{if(U){const j=parseFloat(this._mapLinear(m.offsetX,0,b.clientWidth,i,a)),I=parseFloat(this._mapLinear(m.offsetY,0,b.clientHeight,r,s));d[h]=j.toFixed(c),p[u]=I.toFixed(l),e&&e(d[h],d[u]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}});const C=document.createElement("div");C.className="p-gui__vector2-line p-gui__vector2-line-x",b.append(C);const R=document.createElement("div");R.className="p-gui__vector2-line p-gui__vector2-line-y",b.append(R);const y=document.createElement("div");y.className="p-gui__vector2-dot",b.append(y),y.style.left=this._mapLinear(d[h],i,a,0,b.clientWidth)+"px",y.style.top=this._mapLinear(p[u],s,r,b.clientHeight,0)+"px",Object.defineProperty(d,h,{set:m=>{this.propReferences[g]=m,y.style.left=this._mapLinear(m,i,a,0,b.clientWidth)+"px",w.textContent=String(m)+", "+p[u]},get:()=>this.propReferences[g]}),Object.defineProperty(p,u,{set:m=>{this.propReferences[v]=m,y.style.top=this._mapLinear(m,s,r,b.clientHeight,0)+"px",w.textContent=d[h]+", "+String(m)},get:()=>this.propReferences[v]})}const P=`
 .p-gui__button {
     background: var(--color-accent);
     text-align: center;
@@ -18,7 +18,7 @@
 .p-gui__folder .p-gui__button {
     margin-inline: 0;
 }
-`,U=`
+`,O=`
 .p-gui__slider {
     position: relative;
     min-height: 14px;
@@ -109,7 +109,7 @@
 .p-gui__slider-value:focus {
     outline: none;
 }
-`,j=`
+`,$=`
 .p-gui__list {
     cursor: default;
     color: var(--color-text-dark);
@@ -143,7 +143,7 @@
 .p-gui__list-dropdown:hover {
     background: rgba(255, 255, 255, .1);
 }
-`,I=`
+`,D=`
 .p-gui__switch {
     background: rgba(255, 255, 255, .05);
     color: var(--color-text-dark);
@@ -177,7 +177,7 @@
     background-color: #00ff89;
     box-shadow: 0 0 7px #00ff89;
 }
-`,C=`
+`,F=`
 .p-gui__color {
     cursor: default;
     color: var(--color-text-dark);
@@ -212,7 +212,7 @@
 .p-gui__color-picker::-webkit-color-swatch {
     border: none;
 }
-`,R=`
+`,L=`
     .p-gui__vector2 {
         background: transparent;
         aspect-ratio: 1;
@@ -274,7 +274,7 @@
         right: 7px;
         position: absolute;
     }
-`,P=`
+`,H=`
     .p-gui__image-container {
         width: 100%;
         padding: 3px;
@@ -327,7 +327,7 @@
         text-overflow: ellipsis;
         
     }
-`,O=`
+`,N=`
     .p-gui__folder {
         width: 100%;
         position: relative;
@@ -377,7 +377,7 @@
     .p-gui__folder--closed .p-gui__folder-arrow {
         transform: rotate(0deg);
     }
-`;function $(k){return`
+`;function M(f){return`
     .p-gui {
         --main-border-radius: 5px;
         --color-bg: #121212;
@@ -389,7 +389,7 @@
         --color-accent-hover: #218fda;
         --transition: .1s linear;
     
-        position: ${k};
+        position: ${f};
         top: 0;
         left: 0;
         transform: translate3d(0,0,0);
@@ -507,26 +507,26 @@
         border-color: rgba(255,255,255,.2);
     }   
     
-    ${w}
-    
     ${P}
     
-    ${j}
+    ${H}
     
-    ${I}
+    ${$}
+    
+    ${D}
 
-    ${U}
+    ${O}
     
-    ${C}
+    ${F}
     
-    ${R}
+    ${L}
     
-    ${O}
-`}class A{constructor(e={}){if(this.firstParent=this,e.container?(this.container=typeof e.container=="string"?document.querySelector(e.container):e.container,this.position_type="absolute"):(this.container=document.body,this.position_type="fixed"),this.propReferences=[],this.folders=[],e.isFolder){this._folderConstructor(e.folderOptions);return}typeof e.onUpdate=="function"&&(this.onUpdate=e.onUpdate),this.name=e!=null&&typeof e.name=="string"?e.name:"",this.backgroundColor=e.color||null,this.opacity=e.opacity||1,this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),e.maxHeight&&(this.initMaxHeight=e.maxHeight,this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.screenCorner=this._parseScreenCorner(e.position),window.perfectGUI||(window.perfectGUI={}),window.perfectGUI.instanceCounter==null?window.perfectGUI.instanceCounter=0:window.perfectGUI.instanceCounter++,this.instanceId=window.perfectGUI.instanceCounter,this.wrapperWidth=e.width||290,this.stylesheet=document.createElement("style"),this.stylesheet.setAttribute("type","text/css"),this.stylesheet.setAttribute("id","lm-gui-stylesheet"),document.head.append(this.stylesheet),this.instanceId==0&&this._addStyles(`${$(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} {
+    ${N}
+`}class E{constructor(e={}){if(this.firstParent=this,e.container?(this.container=typeof e.container=="string"?document.querySelector(e.container):e.container,this.position_type="absolute"):(this.container=document.body,this.position_type="fixed"),this.propReferences=[],this.folders=[],e.isFolder){this._folderConstructor(e.folderOptions);return}typeof e.onUpdate=="function"&&(this.onUpdate=e.onUpdate),this.name=e!=null&&typeof e.name=="string"?e.name:"",this.backgroundColor=e.color||null,this.opacity=e.opacity||1,this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),e.maxHeight&&(this.initMaxHeight=e.maxHeight,this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.screenCorner=this._parseScreenCorner(e.position),window.perfectGUI||(window.perfectGUI={}),window.perfectGUI.instanceCounter==null?window.perfectGUI.instanceCounter=0:window.perfectGUI.instanceCounter++,this.instanceId=window.perfectGUI.instanceCounter,this.wrapperWidth=e.width||290,this.stylesheet=document.createElement("style"),this.stylesheet.setAttribute("type","text/css"),this.stylesheet.setAttribute("id","lm-gui-stylesheet"),document.head.append(this.stylesheet),this.instanceId==0&&this._addStyles(`${M(this.position_type)}`),this._styleInstance(),this._addWrapper(),this.wrapper.setAttribute("data-corner-x",this.screenCorner.x),this.wrapper.setAttribute("data-corner-y",this.screenCorner.y),e.autoRepositioning!=!1&&window.addEventListener("resize",this._handleResize.bind(this)),this._handleResize(),this.hasBeenDragged=!1,e.draggable==!0&&this._makeDraggable(),this.closed=!1,e.closed&&this.toggleClose(),this.vector2=k}_styleInstance(){let e=this._getScrollbarWidth(this.container);if(this.screenCorner.x=="left"?this.xOffset=0:this.xOffset=this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(".p-gui");for(let i=0;i<t.length;i++)this.screenCorner.y==t[i].dataset.cornerY&&(this.screenCorner.x=="left"&&t[i].dataset.cornerX=="left"?this.xOffset+=t[i].offsetWidth:this.screenCorner.x=="right"&&t[i].dataset.cornerX=="right"&&(this.xOffset-=t[i].offsetWidth))}this.yOffset=0,this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this._addStyles(`#p-gui-${this.instanceId} {
             width: ${this.wrapperWidth}px;
             max-height: ${this.maxHeight}px;
             transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
             ${this.screenCorner.y=="top"?"":"top: auto; bottom: 0;"}
             ${this.backgroundColor?"background: "+this.backgroundColor+";":""}
             opacity: ${this.opacity};
-        }`)}_folderConstructor(e){this.wrapper=e.wrapper,this.isFolder=!0,this.parent=e.parent,this.firstParent=e.firstParent}_parseScreenCorner(e){let t={x:"right",y:"top"};return e==null||(typeof e!="string"&&console.error("[perfect-gui] Position must be a string."),e.includes("left")&&(t.x="left"),e.includes("bottom")&&(t.y="bottom")),t}_getScrollbarWidth(e){return e===document.body?window.innerWidth-document.documentElement.clientWidth:e.offsetWidth-e.clientWidth}_handleResize(){if(this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),this.initMaxHeight&&(this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.wrapper.style.maxHeight=this.maxHeight+"px",this.hasBeenDragged)return;let e=this._getScrollbarWidth(this.container);if(this.xOffset=this.screenCorner.x=="left"?0:this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);for(let i=0;i<t.length&&!(parseInt(t[i].id.replace("p-gui-",""))>this.instanceId);i++)this.screenCorner.y==t[i].dataset.cornerY&&(this.screenCorner.x=="left"&&t[i].dataset.cornerX=="left"?this.xOffset+=t[i].offsetWidth:this.screenCorner.x=="right"&&t[i].dataset.cornerX=="right"&&(this.xOffset-=t[i].offsetWidth))}this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this.wrapper.style.transform=`translate3d(${this.position.x}px, ${this.position.y}px, 0)`}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=document.createElement("div"),this.wrapper.id="p-gui-"+this.instanceId,this.wrapper.className="p-gui",this.container.append(this.wrapper),this.header=document.createElement("div"),this.header.className="p-gui__header",this.header.textContent=this.name,this.header.style=`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`,this.wrapper.append(this.header);const e=document.createElement("div");e.className="p-gui__header-close",e.addEventListener("click",this.toggleClose.bind(this)),this.header.append(e)}button(e,t){let i="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?i=e.name==""?" ":e.name:i=" ":i=e==""?" ":e;const a=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;this.imageContainer=null;const s=document.createElement("div");s.className="p-gui__button",s.textContent=i,a&&s.setAttribute("title",a),s.addEventListener("click",()=>{t&&t(),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),this.wrapper.append(s),typeof e.color=="string"&&(s.style.setProperty("--color-accent",e.color),s.style.setProperty("--color-accent-hover",e.hoverColor||e.color))}image(e={},t){if(typeof e!="object")throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);let i;if(typeof e.path=="string")i=e.path;else throw typeof e.path==null?Error("[GUI] image() path must be provided."):Error("[GUI] image() path must be a string.");let a=i.replace(/^.*[\\\/]/,""),s;e.name==null?s=a:s=typeof e.name=="string"&&e.name||" ";const n=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?s:null,o=e.selected===!0,r=e.selectionBorder!==!1;let p="";e.width&&(typeof e.width=="number"&&(e.width+="px"),p+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),p+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const l=document.createElement("div");l.className="p-gui__image",l.style="background-image: url("+i+"); "+p,n&&l.setAttribute("title",n),this.imageContainer.append(l),o&&r&&l.classList.add("p-gui__image--selected");const d=document.createElement("div");return d.className="p-gui__image-text",d.textContent=s,l.append(d),l.addEventListener("click",()=>{let c=l.parentElement.querySelectorAll(".p-gui__image--selected");for(let f=0;f<c.length;f++)c[f].classList.remove("p-gui__image--selected");r&&l.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:i,text:s}),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),l}slider(e={},t){const i=new v(this,e,t);this.wrapper.append(i)}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",a=!1,s=null,n=e.obj,o=e.prop,r=typeof e.value=="boolean"?e.value:null;if(r!==null)(o!=null||n!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(o!=null&&n!=null){if(typeof o!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof o}.`);if(typeof n!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof n}.`);i==" "&&(i=o),s=this.propReferences.push(n[o])-1,a=!0}else(o!=null&&n==null||o==null&&n==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');const p=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;this.imageContainer=null;const l=document.createElement("div");l.textContent=i,l.className="p-gui__switch",p&&l.setAttribute("title",p),this.wrapper.append(l),l.addEventListener("click",f=>{const u=f.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?n[o]=g:typeof t=="function"&&t(g),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let d=(()=>a?n[o]?" p-gui__switch-checkbox--active":"":r?" p-gui__switch-checkbox--active":"")();const c=document.createElement("div");c.className="p-gui__switch-checkbox"+d,l.append(c),a&&Object.defineProperty(n,o,{set:f=>{this.propReferences[s]=f,f?c.classList.add("p-gui__switch-checkbox--active"):c.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(f)},get:()=>this.propReferences[s]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"?e.name:" ",a=!1,s=null,n=e.obj,o=e.prop,r=Array.isArray(e.values)?e.values:null,p,l=typeof r[0]!="string";const d=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&n===void 0&&o===void 0)(o!=null||n!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),p=(()=>{if(!r)return null;if(typeof e.value=="string")return r.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(o!=null&&n!=null){if(typeof o!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof o}.`);if(typeof n!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof n}.`);p=(()=>{if(!r)return null;if(typeof n[o]=="string")return l?r.find(u=>u.value===n[o]).value:r.indexOf(n[o]);if(typeof n[o]=="number")return l?r.find(u=>u.value===n[o]).value:n[o]})(),s=this.propReferences.push(n[o])-1,a=!0}else(o!=null&&n==null||o==null&&n==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let c=document.createElement("div");c.className="p-gui__list",c.textContent=i,d&&c.setAttribute("title",d),this.wrapper.append(c);let f=document.createElement("select");c.append(f),f.className="p-gui__list-dropdown",f.addEventListener("change",u=>{a?n[o]=u.target.value:t&&t(u.target.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),r&&r.forEach((u,g)=>{const _=l?u.name:u,h=l?u.value:u;let m=document.createElement("option");m.setAttribute("value",h),m.textContent=_,f.append(m),(!l&&p==g||l&&p==h)&&m.setAttribute("selected","")}),a&&Object.defineProperty(n,o,{set:u=>{let g,_,h;l?(h=r.find(y=>y.value==u),_=(h==null?void 0:h.value)||r[0].value,g=r.indexOf(h)):(typeof u=="string"&&(g=r.indexOf(u),_=u),typeof u=="number"&&(g=u,_=r[u])),this.propReferences[s]=l?_:u;const m=f.querySelector("[selected]");m&&m.removeAttribute("selected"),f.querySelectorAll("option")[g].setAttribute("selected",""),typeof t=="function"&&t(l?h:_,g)},get:()=>this.propReferences[s]})}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,s=e.x.max??1,n=e.y.min??0,o=e.y.max??1,r=e.x.obj,p=e.x.prop,l=this.propReferences.push(r[p])-1,d=e.y.obj,c=e.y.prop,f=this.propReferences.push(d[c])-1,u=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;t=typeof t=="function"?t:null,this.imageContainer=null;const g=document.createElement("div");g.className="p-gui__vector2",g.textContent=i,u&&g.setAttribute("title",u),this.wrapper.append(g);const _=document.createElement("div");_.className="p-gui__vector-value",_.textContent=r[p]+", "+d[c],g.append(_);const h=document.createElement("div");h.className="p-gui__vector2-area",g.append(h),h.addEventListener("click",b=>{r[p]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,s).toFixed(2)),d[c]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,o,n).toFixed(2)),t&&t(r[p],r[c]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let m=!1;h.addEventListener("pointerdown",b=>{m=!0}),h.addEventListener("pointerup",()=>{m=!1}),h.addEventListener("pointermove",b=>{m&&(r[p]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,s).toFixed(2)),d[c]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,o,n).toFixed(2)),t&&t(r[p],r[c]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate())});const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-x",h.append(y);const E=document.createElement("div");E.className="p-gui__vector2-line p-gui__vector2-line-y",h.append(E);const x=document.createElement("div");x.className="p-gui__vector2-dot",h.append(x),x.style.left=this._mapLinear(r[p],a,s,0,h.clientWidth)+"px",x.style.top=this._mapLinear(d[c],n,o,h.clientHeight,0)+"px",Object.defineProperty(r,p,{set:b=>{this.propReferences[l]=b,x.style.left=this._mapLinear(b,a,s,0,h.clientWidth)+"px",_.textContent=String(b)+", "+d[c]},get:()=>this.propReferences[l]}),Object.defineProperty(d,c,{set:b=>{this.propReferences[f]=b,x.style.top=this._mapLinear(b,n,o,h.clientHeight,0)+"px",_.textContent=r[p]+", "+String(b)},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||" ",a=!1,s=null,n=e.obj,o=e.prop,r;const p=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;if(typeof e.value=="string"&&(e.value.length!=7||e.value[0]!="#"?console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`):r=e.value),r||(r="#000000"),e.value!==void 0)(o!=null||n!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(o!=null&&n!=null){if(typeof o!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof o}.`);if(typeof n!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof n}.`);i==" "&&(i=o),s=this.propReferences.push(n[o])-1,a=!0}else(o!=null&&n==null||o==null&&n==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const l=document.createElement("div");l.className="p-gui__color",l.textContent=i,p&&l.setAttribute("title",p),this.wrapper.append(l);const d=document.createElement("input");d.className="p-gui__color-picker",d.setAttribute("type","color"),d.value=r,l.append(d),typeof t=="function"&&d.addEventListener("input",()=>{a?n[o]=d.value:typeof t=="function"&&t(d.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),a&&Object.defineProperty(n,o,{set:c=>{this.propReferences[s]=c,d.value=c,typeof t=="function"&&t(c)},get:()=>this.propReferences[s]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,i=e.name||"",a=e.color||null,s=e.maxHeight||null;this.imageContainer=null;let n="p-gui__folder";this.folders.length==0&&(n+=" p-gui__folder--first"),t&&(n+=" p-gui__folder--closed");let o=a?`background-color: ${a};`:"";o+=s?`max-height: ${s}px;`:"";const r=document.createElement("div");r.className=n,r.style=o,this.wrapper.append(r);const p=document.createElement("div");p.innerHTML=`<span class="p-gui__folder-arrow"></span>${i}`,p.className="p-gui__folder-header",r.append(p),p.addEventListener("click",()=>{r.classList.toggle("p-gui__folder--closed")});let l=new A({isFolder:!0,folderOptions:{wrapper:r,parent:this,firstParent:this.firstParent}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(s){s.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=s.clientX,e.position.prevY=s.clientY,document.addEventListener("pointermove",i)}function i(s){s.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+s.clientX-e.position.prevX,e.position.y=e.position.initY+s.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(s){document.removeEventListener("pointermove",i)}}toggleClose(){this.closed=!this.closed,this.closed?(this.previousInnerScroll=this.wrapper.scrollTop,this.wrapper.scrollTo(0,0)):this.wrapper.scrollTo(0,this.previousInnerScroll),this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,i,a,s){return a+(e-t)*(s-a)/(i-t)}}return A});
+        }`)}_folderConstructor(e){this.wrapper=e.wrapper,this.isFolder=!0,this.parent=e.parent,this.firstParent=e.firstParent}_parseScreenCorner(e){let t={x:"right",y:"top"};return e==null||(typeof e!="string"&&console.error("[perfect-gui] Position must be a string."),e.includes("left")&&(t.x="left"),e.includes("bottom")&&(t.y="bottom")),t}_getScrollbarWidth(e){return e===document.body?window.innerWidth-document.documentElement.clientWidth:e.offsetWidth-e.clientWidth}_handleResize(){if(this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),this.initMaxHeight&&(this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.wrapper.style.maxHeight=this.maxHeight+"px",this.hasBeenDragged)return;let e=this._getScrollbarWidth(this.container);if(this.xOffset=this.screenCorner.x=="left"?0:this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);for(let i=0;i<t.length&&!(parseInt(t[i].id.replace("p-gui-",""))>this.instanceId);i++)this.screenCorner.y==t[i].dataset.cornerY&&(this.screenCorner.x=="left"&&t[i].dataset.cornerX=="left"?this.xOffset+=t[i].offsetWidth:this.screenCorner.x=="right"&&t[i].dataset.cornerX=="right"&&(this.xOffset-=t[i].offsetWidth))}this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this.wrapper.style.transform=`translate3d(${this.position.x}px, ${this.position.y}px, 0)`}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=document.createElement("div"),this.wrapper.id="p-gui-"+this.instanceId,this.wrapper.className="p-gui",this.container.append(this.wrapper),this.header=document.createElement("div"),this.header.className="p-gui__header",this.header.textContent=this.name,this.header.style=`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`,this.wrapper.append(this.header);const e=document.createElement("div");e.className="p-gui__header-close",e.addEventListener("click",this.toggleClose.bind(this)),this.header.append(e)}button(e,t){let i="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?i=e.name==""?" ":e.name:i=" ":i=e==""?" ":e;const a=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;this.imageContainer=null;const s=document.createElement("div");s.className="p-gui__button",s.textContent=i,a&&s.setAttribute("title",a),s.addEventListener("click",()=>{t&&t(),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),this.wrapper.append(s),typeof e.color=="string"&&(s.style.setProperty("--color-accent",e.color),s.style.setProperty("--color-accent-hover",e.hoverColor||e.color))}image(e={},t){if(typeof e!="object")throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);let i;if(typeof e.path=="string")i=e.path;else throw typeof e.path==null?Error("[GUI] image() path must be provided."):Error("[GUI] image() path must be a string.");let a=i.replace(/^.*[\\\/]/,""),s;e.name==null?s=a:s=typeof e.name=="string"&&e.name||" ";const r=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?s:null,o=e.selected===!0,n=e.selectionBorder!==!1;let c="";e.width&&(typeof e.width=="number"&&(e.width+="px"),c+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),c+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const l=document.createElement("div");l.className="p-gui__image",l.style="background-image: url("+i+"); "+c,r&&l.setAttribute("title",r),this.imageContainer.append(l),o&&n&&l.classList.add("p-gui__image--selected");const d=document.createElement("div");return d.className="p-gui__image-text",d.textContent=s,l.append(d),l.addEventListener("click",()=>{let h=l.parentElement.querySelectorAll(".p-gui__image--selected");for(let g=0;g<h.length;g++)h[g].classList.remove("p-gui__image--selected");n&&l.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:i,text:s}),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),l}slider(e={},t){const i=new A(this,e,t);this.wrapper.append(i)}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",a=!1,s=null,r=e.obj,o=e.prop,n=typeof e.value=="boolean"?e.value:null;if(n!==null)(o!=null||r!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(o!=null&&r!=null){if(typeof o!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof o}.`);if(typeof r!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof r}.`);i==" "&&(i=o),s=this.propReferences.push(r[o])-1,a=!0}else(o!=null&&r==null||o==null&&r==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');const c=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;this.imageContainer=null;const l=document.createElement("div");l.textContent=i,l.className="p-gui__switch",c&&l.setAttribute("title",c),this.wrapper.append(l),l.addEventListener("click",g=>{const p=g.target.childNodes[1];let u=!0;p.classList.contains("p-gui__switch-checkbox--active")&&(u=!1),p.classList.toggle("p-gui__switch-checkbox--active"),a?r[o]=u:typeof t=="function"&&t(u),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let d=(()=>a?r[o]?" p-gui__switch-checkbox--active":"":n?" p-gui__switch-checkbox--active":"")();const h=document.createElement("div");h.className="p-gui__switch-checkbox"+d,l.append(h),a&&Object.defineProperty(r,o,{set:g=>{this.propReferences[s]=g,g?h.classList.add("p-gui__switch-checkbox--active"):h.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(g)},get:()=>this.propReferences[s]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"?e.name:" ",a=!1,s=null,r=e.obj,o=e.prop,n=Array.isArray(e.values)?e.values:null,c,l=typeof n[0]!="string";const d=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&r===void 0&&o===void 0)(o!=null||r!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),c=(()=>{if(!n)return null;if(typeof e.value=="string")return n.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(o!=null&&r!=null){if(typeof o!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof o}.`);if(typeof r!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);c=(()=>{if(!n)return null;if(typeof r[o]=="string")return l?n.find(p=>p.value===r[o]).value:n.indexOf(r[o]);if(typeof r[o]=="number")return l?n.find(p=>p.value===r[o]).value:r[o]})(),s=this.propReferences.push(r[o])-1,a=!0}else(o!=null&&r==null||o==null&&r==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let h=document.createElement("div");h.className="p-gui__list",h.textContent=i,d&&h.setAttribute("title",d),this.wrapper.append(h);let g=document.createElement("select");h.append(g),g.className="p-gui__list-dropdown",g.addEventListener("change",p=>{a?r[o]=p.target.value:t&&t(p.target.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),n&&n.forEach((p,u)=>{const v=l?p.name:p,x=l?p.value:p;let _=document.createElement("option");_.setAttribute("value",x),_.textContent=v,g.append(_),(!l&&c==u||l&&c==x)&&_.setAttribute("selected","")}),a&&Object.defineProperty(r,o,{set:p=>{let u,v,x;l?(x=n.find(w=>w.value==p),v=(x==null?void 0:x.value)||n[0].value,u=n.indexOf(x)):(typeof p=="string"&&(u=n.indexOf(p),v=p),typeof p=="number"&&(u=p,v=n[p])),this.propReferences[s]=l?v:p;const _=g.querySelector("[selected]");_&&_.removeAttribute("selected"),g.querySelectorAll("option")[u].setAttribute("selected",""),typeof t=="function"&&t(l?x:v,u)},get:()=>this.propReferences[s]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",a=!1,s=null,r=e.obj,o=e.prop,n;const c=typeof e.tooltip=="string"?e.tooltip:e.tooltip===!0?i:null;if(typeof e.value=="string"&&(e.value.length!=7||e.value[0]!="#"?console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`):n=e.value),n||(n="#000000"),e.value!==void 0)(o!=null||r!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(o!=null&&r!=null){if(typeof o!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof o}.`);if(typeof r!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);i==" "&&(i=o),s=this.propReferences.push(r[o])-1,a=!0}else(o!=null&&r==null||o==null&&r==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const l=document.createElement("div");l.className="p-gui__color",l.textContent=i,c&&l.setAttribute("title",c),this.wrapper.append(l);const d=document.createElement("input");d.className="p-gui__color-picker",d.setAttribute("type","color"),d.value=n,l.append(d),typeof t=="function"&&d.addEventListener("input",()=>{a?r[o]=d.value:typeof t=="function"&&t(d.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),a&&Object.defineProperty(r,o,{set:h=>{this.propReferences[s]=h,d.value=h,typeof t=="function"&&t(h)},get:()=>this.propReferences[s]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,i=e.name||"",a=e.color||null,s=e.maxHeight||null;this.imageContainer=null;let r="p-gui__folder";this.folders.length==0&&(r+=" p-gui__folder--first"),t&&(r+=" p-gui__folder--closed");let o=a?`background-color: ${a};`:"";o+=s?`max-height: ${s}px;`:"";const n=document.createElement("div");n.className=r,n.style=o,this.wrapper.append(n);const c=document.createElement("div");c.innerHTML=`<span class="p-gui__folder-arrow"></span>${i}`,c.className="p-gui__folder-header",n.append(c),c.addEventListener("click",()=>{n.classList.toggle("p-gui__folder--closed")});let l=new E({isFolder:!0,folderOptions:{wrapper:n,parent:this,firstParent:this.firstParent}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(s){s.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=s.clientX,e.position.prevY=s.clientY,document.addEventListener("pointermove",i)}function i(s){s.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+s.clientX-e.position.prevX,e.position.y=e.position.initY+s.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(s){document.removeEventListener("pointermove",i)}}toggleClose(){this.closed=!this.closed,this.closed?(this.previousInnerScroll=this.wrapper.scrollTop,this.wrapper.scrollTo(0,0)):this.wrapper.scrollTo(0,this.previousInnerScroll),this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,i,a,s){return a+(e-t)*(s-a)/(i-t)}_countDecimals(e){const t=e.toString(),i=t.indexOf(".");return i===-1?0:t.length-i-1}}return E});

package/package.json

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

package/src/components/Slider.js

@@ -16,6 +16,7 @@ export default class Slider {
         this.min = params.min ?? 0;
         this.max = params.max ?? 1;
         this.step = params.step || (this.max - this.min) / 100;
+        this.decimals = this.parent._countDecimals(this.step);
         this.callback = typeof callback == 'function' ? callback : null;
 
         // callback mode
@@ -168,8 +169,7 @@ export default class Slider {
         const prevValue = parseFloat((currentValue - this.step).toFixed(9));
         
         if (newValue >= nextValue || newValue <= prevValue) {
-            const decimals = this._countDecimals(this.step);
-            newValue = newValue.toFixed(decimals);
+            newValue = newValue.toFixed(this.decimals);
 
             this.valueInput.value = newValue;
 
@@ -184,24 +184,6 @@ export default class Slider {
         }
     }
 
-    _countDecimals(num) {
-        // Convert the number to a string
-        const numStr = num.toString();
-        
-        // Find the position of the decimal point
-        const decimalIndex = numStr.indexOf('.');
-        
-        // If there is no decimal point, return 0
-        if (decimalIndex === -1) {
-          return 0;
-        }
-        
-        // Calculate the number of digits after the decimal point
-        const decimalPlaces = numStr.length - decimalIndex - 1;
-        
-        return decimalPlaces;
-      }
-
     _updateHandlePositionFromValue() {
         const sliderWidth = this.ctrlDiv.offsetWidth;
         const handleWidth = this.handle.offsetWidth;

package/src/components/vector2.js

@@ -0,0 +1,126 @@
+export default function vector2( params = {}, callback) {
+    if (typeof params != 'object') {
+        throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof params}.`);
+    }
+
+    let name = typeof params.name == 'string' ? params.name || ' ' : ' ';
+
+    const minX = params.x.min ?? 0;
+    const maxX = params.x.max ?? 1;
+    const minY = params.y.min ?? 0;
+    const maxY = params.y.max ?? 1;
+    const stepX = params.x.step || (maxX - minX) / 100;
+    const stepY = params.y.step || (maxY - minY) / 100;
+    const decimalsX = this._countDecimals(stepX);
+    const decimalsY = this._countDecimals(stepY);
+
+    const objectX = params.x.obj;
+    const propX = params.x.prop;
+    const propXReferenceIndex = this.propReferences.push(objectX[propX]) - 1;
+    
+    const objectY = params.y.obj;
+    const propY = params.y.prop;
+    const propYReferenceIndex = this.propReferences.push(objectY[propY]) - 1;
+
+    const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? name : null);
+
+    callback = typeof callback == 'function' ? callback : null;
+
+    this.imageContainer = null;
+
+    const container = document.createElement('div');
+    container.className = 'p-gui__vector2';
+    container.textContent = name;
+    if ( tooltip ) {
+        container.setAttribute('title', tooltip);
+    }
+    this.wrapper.append(container);
+
+    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 = document.createElement('div');
+    area.className = 'p-gui__vector2-area';
+    container.append(area);
+    area.addEventListener('click', evt => {
+        const newX = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX));
+        const newY = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY));
+        objectX[propX] = newX.toFixed(decimalsX);
+        objectY[propY] = newY.toFixed(decimalsY);
+
+        if (callback) {
+            callback(objectX[propX], objectX[propY]);
+        }
+
+        if (this.onUpdate) {
+            this.onUpdate();
+        } else if (this.isFolder && this.firstParent.onUpdate) {
+            this.firstParent.onUpdate();
+        }
+    });
+    
+    let pointer_is_down = false;
+    area.addEventListener('pointerdown', (evt) => {
+        pointer_is_down = true;
+    });
+    area.addEventListener('pointerup', () => {
+        pointer_is_down = false;
+    });
+    area.addEventListener('pointermove', (evt) => {
+        if (pointer_is_down) {
+            const newX = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX));
+            const newY = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY));
+            objectX[propX] = newX.toFixed(decimalsX);
+            objectY[propY] = newY.toFixed(decimalsY);
+
+            if (callback) {
+                callback(objectX[propX], objectX[propY]);
+            }
+
+            if (this.onUpdate) {
+                this.onUpdate();
+            } else if (this.isFolder && this.firstParent.onUpdate) {
+                this.firstParent.onUpdate();
+            }
+        }
+    });
+
+    const line_x = document.createElement('div');
+    line_x.className = 'p-gui__vector2-line p-gui__vector2-line-x';
+    area.append(line_x);
+
+    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';
+
+    Object.defineProperty( objectX, propX, {
+        set: val => { 
+            this.propReferences[propXReferenceIndex] = val;
+            dot.style.left = this._mapLinear(val, minX, maxX, 0, area.clientWidth) + 'px';
+            vector_value.textContent = String( val ) + ', ' + objectY[propY];
+        },
+        get: () => { 
+            return this.propReferences[propXReferenceIndex];
+        }
+    });
+
+    Object.defineProperty( objectY, propY, {
+        set: val => { 
+            this.propReferences[propYReferenceIndex] = val;
+            dot.style.top = this._mapLinear(val, minY, maxY, area.clientHeight, 0) + 'px';
+            vector_value.textContent = objectX[propX] + ', ' + String( val );
+        },
+        get: () => { 
+            return this.propReferences[propYReferenceIndex];
+        }
+    });
+}

package/src/index.js

@@ -1,4 +1,5 @@
 import Slider from './components/Slider';
+import vector2 from './components/vector2';
 import styles from './styles/styles';
 
 export default class GUI {
@@ -80,6 +81,8 @@ export default class GUI {
 
         this.closed = false;
         if (options.closed) this.toggleClose();
+
+        this.vector2 = vector2;
     }
 
     _styleInstance() {
@@ -625,125 +628,6 @@ export default class GUI {
         }
     }
 
-    vector2( params = {}, callback) {
-        if (typeof params != 'object') {
-            throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof params}.`);
-        }
-
-        let name = typeof params.name == 'string' ? params.name || ' ' : ' ';
-
-        const minX = params.x.min ?? 0;
-        const maxX = params.x.max ?? 1;
-        const minY = params.y.min ?? 0;
-        const maxY = params.y.max ?? 1;
-
-        const objectX = params.x.obj;
-        const propX = params.x.prop;
-        const propXReferenceIndex = this.propReferences.push(objectX[propX]) - 1;
-        
-        const objectY = params.y.obj;
-        const propY = params.y.prop;
-        const propYReferenceIndex = this.propReferences.push(objectY[propY]) - 1;
-
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? name : null);
-
-        callback = typeof callback == 'function' ? callback : null;
-
-        this.imageContainer = null;
-
-        const container = document.createElement('div');
-        container.className = 'p-gui__vector2';
-        container.textContent = name;
-        if ( tooltip ) {
-            container.setAttribute('title', tooltip);
-        }
-        this.wrapper.append(container);
-
-        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 = 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 (this.onUpdate) {
-                this.onUpdate();
-            } else if (this.isFolder && this.firstParent.onUpdate) {
-                this.firstParent.onUpdate();
-            }
-        });
-        
-        let pointer_is_down = false;
-        area.addEventListener('pointerdown', (evt) => {
-            pointer_is_down = true;
-        });
-        area.addEventListener('pointerup', () => {
-            pointer_is_down = false;
-        });
-        area.addEventListener('pointermove', (evt) => {
-            if (pointer_is_down) {
-                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 (this.onUpdate) {
-                    this.onUpdate();
-                } else if (this.isFolder && this.firstParent.onUpdate) {
-                    this.firstParent.onUpdate();
-                }
-            }
-        });
-
-        const line_x = document.createElement('div');
-        line_x.className = 'p-gui__vector2-line p-gui__vector2-line-x';
-        area.append(line_x);
-
-        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';
-
-        Object.defineProperty( objectX, propX, {
-            set: val => { 
-                this.propReferences[propXReferenceIndex] = val;
-                dot.style.left = this._mapLinear(val, minX, maxX, 0, area.clientWidth) + 'px';
-                vector_value.textContent = String( val ) + ', ' + objectY[propY];
-            },
-            get: () => { 
-                return this.propReferences[propXReferenceIndex];
-            }
-        });
-
-        Object.defineProperty( objectY, propY, {
-            set: val => { 
-                this.propReferences[propYReferenceIndex] = val;
-                dot.style.top = this._mapLinear(val, minY, maxY, area.clientHeight, 0) + 'px';
-                vector_value.textContent = objectX[propX] + ', ' + String( val );
-            },
-            get: () => { 
-                return this.propReferences[propYReferenceIndex];
-            }
-        });
-    }
-
     color(params = {}, callback) {
         if (typeof params != 'object') {
             throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof params}.`);
@@ -947,4 +831,22 @@ export default class GUI {
     _mapLinear( x, a1, a2, b1, b2 ) {
         return b1 + ( x - a1 ) * ( b2 - b1 ) / ( a2 - a1 );
     }
+
+    _countDecimals(num) {
+        // Convert the number to a string
+        const numStr = num.toString();
+        
+        // Find the position of the decimal point
+        const decimalIndex = numStr.indexOf('.');
+        
+        // If there is no decimal point, return 0
+        if (decimalIndex === -1) {
+          return 0;
+        }
+        
+        // Calculate the number of digits after the decimal point
+        const decimalPlaces = numStr.length - decimalIndex - 1;
+        
+        return decimalPlaces;
+    }
 }

package/src/styles/styles.js

@@ -1,11 +1,11 @@
-import _button from "./_button"
-import _slider from "./_slider"
-import _list from "./_list"
-import _switch from "./_switch"
-import _color from "./_color"
-import _vector2 from "./_vector2"
-import _image from "./_image"
-import _folder from "./_folder"
+import _button from "./_button.css.js"
+import _slider from "./_slider.css.js"
+import _list from "./_list.css.js"
+import _switch from "./_switch.css.js"
+import _color from "./_color.css.js"
+import _vector2 from "./_vector2.css.js"
+import _image from "./_image.css.js"
+import _folder from "./_folder.css.js"
 
 /**
  * JS instead of CSS to avoid