perfect-gui 4.8.1 → 4.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/perfect-gui.mjs +61 -65
  2. package/dist/perfect-gui.umd.js +2 -1
  3. package/package.json +1 -1
  4. package/src/index.js +1 -8
  5. package/src/styles.js +1 -0
package/dist/perfect-gui.mjs CHANGED
@@ -31,6 +31,7 @@ function A(y) {
31
31
  cursor: auto;
32
32
  border-radius: var(--main-border-radius);
33
33
  border: 1px solid var(--color-border);
34
+ line-height: normal;
34
35
  }
35
36
 
36
37
  .p-gui * {
@@ -426,8 +427,8 @@ class x {
426
427
  let e = this._getScrollbarWidth(this.container);
427
428
  if (this.screenCorner.x == "left" ? this.xOffset = 0 : this.xOffset = this.container.clientWidth - this.wrapperWidth - e, this.instanceId > 0) {
428
429
  let t = this.container.querySelectorAll(".p-gui");
429
- for (let n = 0; n < t.length; n++)
430
- this.screenCorner.y == t[n].dataset.cornerY && (this.screenCorner.x == "left" && t[n].dataset.cornerX == "left" ? this.xOffset += t[n].offsetWidth : this.screenCorner.x == "right" && t[n].dataset.cornerX == "right" && (this.xOffset -= t[n].offsetWidth));
430
+ for (let o = 0; o < t.length; o++)
431
+ this.screenCorner.y == t[o].dataset.cornerY && (this.screenCorner.x == "left" && t[o].dataset.cornerX == "left" ? this.xOffset += t[o].offsetWidth : this.screenCorner.x == "right" && t[o].dataset.cornerX == "right" && (this.xOffset -= t[o].offsetWidth));
431
432
  }
432
433
  this.yOffset = 0, this.position = {
433
434
  prevX: this.xOffset,
@@ -458,8 +459,8 @@ class x {
458
459
  let e = this._getScrollbarWidth(this.container);
459
460
  if (this.xOffset = this.screenCorner.x == "left" ? 0 : this.container.clientWidth - this.wrapperWidth - e, this.instanceId > 0) {
460
461
  let t = this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);
461
- for (let n = 0; n < t.length && !(parseInt(t[n].id.replace("p-gui-", "")) > this.instanceId); n++)
462
- this.screenCorner.y == t[n].dataset.cornerY && (this.screenCorner.x == "left" && t[n].dataset.cornerX == "left" ? this.xOffset += t[n].offsetWidth : this.screenCorner.x == "right" && t[n].dataset.cornerX == "right" && (this.xOffset -= t[n].offsetWidth));
462
+ for (let o = 0; o < t.length && !(parseInt(t[o].id.replace("p-gui-", "")) > this.instanceId); o++)
463
+ this.screenCorner.y == t[o].dataset.cornerY && (this.screenCorner.x == "left" && t[o].dataset.cornerX == "left" ? this.xOffset += t[o].offsetWidth : this.screenCorner.x == "right" && t[o].dataset.cornerX == "right" && (this.xOffset -= t[o].offsetWidth));
463
464
  }
464
465
  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)`;
465
466
  }
@@ -472,57 +473,57 @@ class x {
472
473
  e.className = "p-gui__header-close", e.addEventListener("click", this.toggleClose.bind(this)), this.header.append(e);
473
474
  }
474
475
  button(e, t) {
475
- let n = "";
476
- typeof e != "string" ? typeof e == "object" && (e != null && e.hasOwnProperty("name")) ? n = e.name == "" ? " " : e.name : n = " " : n = e == "" ? " " : e, this.imageContainer = null, typeof t != "function" && (t = () => {
476
+ let o = "";
477
+ typeof e != "string" ? typeof e == "object" && (e != null && e.hasOwnProperty("name")) ? o = e.name == "" ? " " : e.name : o = " " : o = e == "" ? " " : e, this.imageContainer = null, typeof t != "function" && (t = () => {
477
478
  });
478
479
  const a = document.createElement("div");
479
- a.className = "p-gui__button", a.textContent = n, a.addEventListener("click", t), this.wrapper.append(a), typeof e.color == "string" && (a.style.setProperty("--color-accent", e.color), a.style.setProperty("--color-accent-hover", e.hoverColor || e.color));
480
+ a.className = "p-gui__button", a.textContent = o, a.addEventListener("click", t), this.wrapper.append(a), typeof e.color == "string" && (a.style.setProperty("--color-accent", e.color), a.style.setProperty("--color-accent-hover", e.hoverColor || e.color));
480
481
  }
481
482
  image(e = {}, t) {
482
483
  if (typeof e != "object")
483
484
  throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);
484
- let n;
485
+ let o;
485
486
  if (typeof e.path == "string")
486
- n = e.path;
487
+ o = e.path;
487
488
  else
488
489
  throw typeof e.path == null ? Error("[GUI] image() path must be provided.") : Error("[GUI] image() path must be a string.");
489
- let a = n.replace(/^.*[\\\/]/, ""), p;
490
+ let a = o.replace(/^.*[\\\/]/, ""), p;
490
491
  e.name == null ? p = a : p = typeof e.name == "string" && e.name || " ";
491
492
  const r = e.selected === !0, i = e.selectionBorder !== !1;
492
- let o = "";
493
- e.width && (typeof e.width == "number" && (e.width += "px"), o += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), o += `height: ${e.height}; `), this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer));
493
+ let n = "";
494
+ e.width && (typeof e.width == "number" && (e.width += "px"), n += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), n += `height: ${e.height}; `), this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer));
494
495
  const s = document.createElement("div");
495
- s.className = "p-gui__image", s.style = "background-image: url(" + n + "); " + o, this.imageContainer.append(s), r && i && s.classList.add("p-gui__image--selected");
496
+ s.className = "p-gui__image", s.style = "background-image: url(" + o + "); " + n, this.imageContainer.append(s), r && i && s.classList.add("p-gui__image--selected");
496
497
  const l = document.createElement("div");
497
498
  return l.className = "p-gui__image-text", l.textContent = p, s.append(l), s.addEventListener("click", () => {
498
499
  let f = s.parentElement.querySelectorAll(".p-gui__image--selected");
499
500
  for (let c = 0; c < f.length; c++)
500
501
  f[c].classList.remove("p-gui__image--selected");
501
- i && s.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: n, text: p });
502
+ i && s.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: o, text: p });
502
503
  }), s;
503
504
  }
504
505
  slider(e = {}, t) {
505
506
  if (typeof e != "object")
506
507
  throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);
507
- let n = typeof e.name == "string" && e.name || " ", a = !1, p = null, r = e.obj, i = e.prop, o = typeof e.value == "number" ? e.value : null, s = e.min ?? 0, l = e.max ?? 1, f = e.step || (l - s) / 100;
508
- if (o !== null)
508
+ let o = typeof e.name == "string" && e.name || " ", a = !1, p = null, r = e.obj, i = e.prop, n = typeof e.value == "number" ? e.value : null, s = e.min ?? 0, l = e.max ?? 1, f = e.step || (l - s) / 100;
509
+ if (n !== null)
509
510
  (i != null || r != null) && console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
510
511
  else if (i != null && r != null) {
511
512
  if (typeof i != "string")
512
513
  throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof i}.`);
513
514
  if (typeof r != "object")
514
515
  throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof r}.`);
515
- n == " " && (n = i), p = this.propReferences.push(r[i]) - 1, a = !0;
516
+ o == " " && (o = i), p = this.propReferences.push(r[i]) - 1, a = !0;
516
517
  } else
517
- (i != null && r == null || i == null && r == null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), o = (l - s) / 2;
518
+ (i != null && r == null || i == null && r == null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), n = (l - s) / 2;
518
519
  this.imageContainer = null;
519
520
  const c = document.createElement("div");
520
- c.className = "p-gui__slider", c.textContent = n, this.wrapper.append(c);
521
+ c.className = "p-gui__slider", c.textContent = o, this.wrapper.append(c);
521
522
  const d = document.createElement("input");
522
- d.className = "p-gui__slider-ctrl", d.setAttribute("type", "range"), d.setAttribute("min", s), d.setAttribute("max", l), d.setAttribute("step", f), d.setAttribute("value", a ? r[i] : o), c.append(d);
523
+ d.className = "p-gui__slider-ctrl", d.setAttribute("type", "range"), d.setAttribute("min", s), d.setAttribute("max", l), d.setAttribute("step", f), d.setAttribute("value", a ? r[i] : n), c.append(d);
523
524
  const h = document.createElement("div");
524
- h.className = "p-gui__slider-value", h.textContent = String(a ? r[i] : o), c.append(h), d.addEventListener("input", () => {
525
- h.textContent = d.value, a ? r[i] = d.value : typeof t == "function" && t(parseFloat(d.value));
525
+ h.className = "p-gui__slider-value", h.textContent = String(a ? r[i] : n), c.append(h), d.addEventListener("input", () => {
526
+ h.textContent = d.value, a ? r[i] = parseFloat(d.value) : typeof t == "function" && t(parseFloat(d.value));
526
527
  }), a && Object.defineProperty(r, i, {
527
528
  set: (g) => {
528
529
  this.propReferences[p] = g, d.value = g, h.textContent = String(g), typeof t == "function" && t(parseFloat(d.value));
@@ -533,25 +534,25 @@ class x {
533
534
  toggle(e = {}, t) {
534
535
  if (typeof e != "object")
535
536
  throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);
536
- let n = typeof e.name == "string" && e.name || " ", a = !1, p = null, r = e.obj, i = e.prop, o = typeof e.value == "boolean" ? e.value : null;
537
- if (o !== null)
537
+ let o = typeof e.name == "string" && e.name || " ", a = !1, p = null, r = e.obj, i = e.prop, n = typeof e.value == "boolean" ? e.value : null;
538
+ if (n !== null)
538
539
  (i != null || r != null) && console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
539
540
  else if (i != null && r != null) {
540
541
  if (typeof i != "string")
541
542
  throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof i}.`);
542
543
  if (typeof r != "object")
543
544
  throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof r}.`);
544
- n == " " && (n = i), p = this.propReferences.push(r[i]) - 1, a = !0;
545
+ o == " " && (o = i), p = this.propReferences.push(r[i]) - 1, a = !0;
545
546
  } else
546
547
  (i != null && r == null || i == null && r == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
547
548
  this.imageContainer = null;
548
549
  const s = document.createElement("div");
549
- s.textContent = n, s.className = "p-gui__switch", this.wrapper.append(s), s.addEventListener("click", (c) => {
550
+ s.textContent = o, s.className = "p-gui__switch", this.wrapper.append(s), s.addEventListener("click", (c) => {
550
551
  const d = c.target.childNodes[1];
551
552
  let h = !0;
552
553
  d.classList.contains("p-gui__switch-checkbox--active") && (h = !1), d.classList.toggle("p-gui__switch-checkbox--active"), a ? r[i] = h : typeof t == "function" && t(h);
553
554
  });
554
- let l = (() => a ? r[i] ? " p-gui__switch-checkbox--active" : "" : o ? " p-gui__switch-checkbox--active" : "")();
555
+ let l = (() => a ? r[i] ? " p-gui__switch-checkbox--active" : "" : n ? " p-gui__switch-checkbox--active" : "")();
555
556
  const f = document.createElement("div");
556
557
  f.className = "p-gui__switch-checkbox" + l, s.append(f), a && Object.defineProperty(r, i, {
557
558
  set: (c) => {
@@ -563,13 +564,13 @@ class x {
563
564
  list(e = {}, t) {
564
565
  if (typeof e != "object")
565
566
  throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);
566
- let n = typeof e.name == "string" ? e.name : " ", a = !1, p = null, r = e.obj, i = e.prop, o = Array.isArray(e.values) ? e.values : null, s, l = typeof o[0] != "string";
567
+ let o = typeof e.name == "string" ? e.name : " ", a = !1, p = null, r = e.obj, i = e.prop, n = Array.isArray(e.values) ? e.values : null, s, l = typeof n[0] != "string";
567
568
  if (t = typeof t == "function" ? t : null, e.value !== void 0 || e.value === void 0 && r === void 0 && i === void 0)
568
569
  (i != null || r != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), s = (() => {
569
- if (!o)
570
+ if (!n)
570
571
  return null;
571
572
  if (typeof e.value == "string")
572
- return o.indexOf(e.value);
573
+ return n.indexOf(e.value);
573
574
  if (typeof e.value == "number")
574
575
  return e.value;
575
576
  })();
@@ -579,53 +580,48 @@ class x {
579
580
  if (typeof r != "object")
580
581
  throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);
581
582
  s = (() => {
582
- if (!o)
583
+ if (!n)
583
584
  return null;
584
585
  if (typeof r[i] == "string")
585
- return l ? o.find((d) => d.value === r[i]).value : o.indexOf(r[i]);
586
+ return l ? n.find((d) => d.value === r[i]).value : n.indexOf(r[i]);
586
587
  if (typeof r[i] == "number")
587
- return l ? o.find((d) => d.value === r[i]).value : r[i];
588
+ return l ? n.find((d) => d.value === r[i]).value : r[i];
588
589
  })(), p = this.propReferences.push(r[i]) - 1, a = !0;
589
590
  } else
590
591
  (i != null && r == null || i == null && r == null) && console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');
591
592
  this.imageContainer = null;
592
593
  let f = document.createElement("div");
593
- f.className = "p-gui__list", f.textContent = n, this.wrapper.append(f);
594
+ f.className = "p-gui__list", f.textContent = o, this.wrapper.append(f);
594
595
  let c = document.createElement("select");
595
596
  f.append(c), c.className = "p-gui__list-dropdown", c.addEventListener("change", (d) => {
596
597
  a ? r[i] = d.target.value : t && t(d.target.value);
597
- }), o && o.forEach((d, h) => {
598
+ }), n && n.forEach((d, h) => {
598
599
  const g = l ? d.name : d, u = l ? d.value : d;
599
600
  let m = document.createElement("option");
600
601
  m.setAttribute("value", u), m.textContent = g, c.append(m), (!l && s == h || l && s == u) && m.setAttribute("selected", "");
601
602
  }), a && Object.defineProperty(r, i, {
602
603
  set: (d) => {
603
604
  let h, g, u;
604
- l ? (u = o.find((v) => v.value == d), g = (u == null ? void 0 : u.value) || o[0].value, h = o.indexOf(u)) : (typeof d == "string" && (h = o.indexOf(d), g = d), typeof d == "number" && (h = d, g = o[d])), this.propReferences[p] = l ? g : d;
605
+ l ? (u = n.find((v) => v.value == d), g = (u == null ? void 0 : u.value) || n[0].value, h = n.indexOf(u)) : (typeof d == "string" && (h = n.indexOf(d), g = d), typeof d == "number" && (h = d, g = n[d])), this.propReferences[p] = l ? g : d;
605
606
  const m = c.querySelector("[selected]");
606
607
  m && m.removeAttribute("selected"), c.querySelectorAll("option")[h].setAttribute("selected", ""), typeof t == "function" && t(l ? u : g, h);
607
608
  },
608
609
  get: () => this.propReferences[p]
609
610
  });
610
611
  }
611
- options(e, t) {
612
- if (typeof e != "object")
613
- throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof e}.`);
614
- this.list(e, t);
615
- }
616
612
  vector2(e = {}, t) {
617
613
  if (typeof e != "object")
618
614
  throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);
619
- let n = typeof e.name == "string" && e.name || " ";
620
- const a = e.x.min ?? 0, p = e.x.max ?? 1, r = e.y.min ?? 0, i = e.y.max ?? 1, o = e.x.obj, s = e.x.prop, l = this.propReferences.push(o[s]) - 1, f = e.y.obj, c = e.y.prop, d = this.propReferences.push(f[c]) - 1;
615
+ let o = typeof e.name == "string" && e.name || " ";
616
+ const a = e.x.min ?? 0, p = e.x.max ?? 1, r = e.y.min ?? 0, i = e.y.max ?? 1, n = e.x.obj, s = e.x.prop, l = this.propReferences.push(n[s]) - 1, f = e.y.obj, c = e.y.prop, d = this.propReferences.push(f[c]) - 1;
621
617
  t = typeof t == "function" ? t : null, this.imageContainer = null;
622
618
  const h = document.createElement("div");
623
- h.className = "p-gui__vector2", h.textContent = n, this.wrapper.append(h);
619
+ h.className = "p-gui__vector2", h.textContent = o, this.wrapper.append(h);
624
620
  const g = document.createElement("div");
625
- g.className = "p-gui__vector-value", g.textContent = o[s] + ", " + f[c], h.append(g);
621
+ g.className = "p-gui__vector-value", g.textContent = n[s] + ", " + f[c], h.append(g);
626
622
  const u = document.createElement("div");
627
623
  u.className = "p-gui__vector2-area", h.append(u), u.addEventListener("click", (b) => {
628
- o[s] = parseFloat(this._mapLinear(b.offsetX, 0, u.clientWidth, a, p).toFixed(2)), f[c] = parseFloat(this._mapLinear(b.offsetY, 0, u.clientHeight, i, r).toFixed(2)), t && t(o[s], o[c]);
624
+ n[s] = parseFloat(this._mapLinear(b.offsetX, 0, u.clientWidth, a, p).toFixed(2)), f[c] = parseFloat(this._mapLinear(b.offsetY, 0, u.clientHeight, i, r).toFixed(2)), t && t(n[s], n[c]);
629
625
  });
630
626
  let m = !1;
631
627
  u.addEventListener("pointerdown", (b) => {
@@ -633,21 +629,21 @@ class x {
633
629
  }), u.addEventListener("pointerup", () => {
634
630
  m = !1;
635
631
  }), u.addEventListener("pointermove", (b) => {
636
- m && (o[s] = parseFloat(this._mapLinear(b.offsetX, 0, u.clientWidth, a, p).toFixed(2)), f[c] = parseFloat(this._mapLinear(b.offsetY, 0, u.clientHeight, i, r).toFixed(2)), t && t(o[s], o[c]));
632
+ m && (n[s] = parseFloat(this._mapLinear(b.offsetX, 0, u.clientWidth, a, p).toFixed(2)), f[c] = parseFloat(this._mapLinear(b.offsetY, 0, u.clientHeight, i, r).toFixed(2)), t && t(n[s], n[c]));
637
633
  });
638
634
  const v = document.createElement("div");
639
635
  v.className = "p-gui__vector2-line p-gui__vector2-line-x", u.append(v);
640
636
  const w = document.createElement("div");
641
637
  w.className = "p-gui__vector2-line p-gui__vector2-line-y", u.append(w);
642
638
  const _ = document.createElement("div");
643
- _.className = "p-gui__vector2-dot", u.append(_), _.style.left = this._mapLinear(o[s], a, p, 0, u.clientWidth) + "px", _.style.top = this._mapLinear(f[c], r, i, u.clientHeight, 0) + "px", Object.defineProperty(o, s, {
639
+ _.className = "p-gui__vector2-dot", u.append(_), _.style.left = this._mapLinear(n[s], a, p, 0, u.clientWidth) + "px", _.style.top = this._mapLinear(f[c], r, i, u.clientHeight, 0) + "px", Object.defineProperty(n, s, {
644
640
  set: (b) => {
645
641
  this.propReferences[l] = b, _.style.left = this._mapLinear(b, a, p, 0, u.clientWidth) + "px", g.textContent = String(b) + ", " + f[c];
646
642
  },
647
643
  get: () => this.propReferences[l]
648
644
  }), Object.defineProperty(f, c, {
649
645
  set: (b) => {
650
- this.propReferences[d] = b, _.style.top = this._mapLinear(b, r, i, u.clientHeight, 0) + "px", g.textContent = o[s] + ", " + String(b);
646
+ this.propReferences[d] = b, _.style.top = this._mapLinear(b, r, i, u.clientHeight, 0) + "px", g.textContent = n[s] + ", " + String(b);
651
647
  },
652
648
  get: () => this.propReferences[d]
653
649
  });
@@ -655,22 +651,22 @@ class x {
655
651
  color(e = {}, t) {
656
652
  if (typeof e != "object")
657
653
  throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);
658
- let n = typeof e.name == "string" && e.name || " ", a = !1, p = null, r = e.obj, i = e.prop, o;
659
- if (typeof e.value == "string" && (e.value.length != 7 || e.value[0] != "#" ? console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`) : o = e.value), o || (o = "#000000"), e.value !== void 0)
654
+ let o = typeof e.name == "string" && e.name || " ", a = !1, p = null, r = e.obj, i = e.prop, n;
655
+ 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)
660
656
  (i != null || r != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
661
657
  else if (i != null && r != null) {
662
658
  if (typeof i != "string")
663
659
  throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof i}.`);
664
660
  if (typeof r != "object")
665
661
  throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);
666
- n == " " && (n = i), p = this.propReferences.push(r[i]) - 1, a = !0;
662
+ o == " " && (o = i), p = this.propReferences.push(r[i]) - 1, a = !0;
667
663
  } else
668
664
  (i != null && r == null || i == null && r == null) && console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');
669
665
  this.imageContainer = null;
670
666
  const s = document.createElement("div");
671
- s.className = "p-gui__color", s.textContent = n, this.wrapper.append(s);
667
+ s.className = "p-gui__color", s.textContent = o, this.wrapper.append(s);
672
668
  const l = document.createElement("input");
673
- l.className = "p-gui__color-picker", l.setAttribute("type", "color"), l.value = o, s.append(l), typeof t == "function" && l.addEventListener("input", () => {
669
+ l.className = "p-gui__color-picker", l.setAttribute("type", "color"), l.value = n, s.append(l), typeof t == "function" && l.addEventListener("input", () => {
674
670
  a ? r[i] = l.value : typeof t == "function" && t(l.value);
675
671
  }), a && Object.defineProperty(r, i, {
676
672
  set: (f) => {
@@ -680,20 +676,20 @@ class x {
680
676
  });
681
677
  }
682
678
  folder(e = {}) {
683
- let t = typeof e.closed == "boolean" ? e.closed : !1, n = e.name || "", a = e.color || null, p = e.maxHeight || null;
679
+ let t = typeof e.closed == "boolean" ? e.closed : !1, o = e.name || "", a = e.color || null, p = e.maxHeight || null;
684
680
  this.imageContainer = null;
685
681
  let r = "p-gui__folder";
686
682
  this.folders.length == 0 && (r += " p-gui__folder--first"), t && (r += " p-gui__folder--closed");
687
683
  let i = a ? `background-color: ${a};` : "";
688
684
  i += p ? `max-height: ${p}px;` : "";
689
- const o = document.createElement("div");
690
- o.className = r, o.style = i, this.wrapper.append(o);
685
+ const n = document.createElement("div");
686
+ n.className = r, n.style = i, this.wrapper.append(n);
691
687
  const s = document.createElement("div");
692
- s.innerHTML = `<span class="p-gui__folder-arrow"></span>${n}`, s.className = "p-gui__folder-header", o.append(s), s.addEventListener("click", () => {
693
- o.classList.toggle("p-gui__folder--closed");
688
+ s.innerHTML = `<span class="p-gui__folder-arrow"></span>${o}`, s.className = "p-gui__folder-header", n.append(s), s.addEventListener("click", () => {
689
+ n.classList.toggle("p-gui__folder--closed");
694
690
  });
695
691
  let l = new x({ isFolder: !0, folderOptions: {
696
- wrapper: o
692
+ wrapper: n
697
693
  } });
698
694
  return this.folders.push(l), l;
699
695
  }
@@ -701,13 +697,13 @@ class x {
701
697
  var e = this;
702
698
  this.header.addEventListener("pointerdown", t), this.header.addEventListener("pointerup", a);
703
699
  function t(p) {
704
- p.preventDefault(), e.position.initX = e.position.x, e.position.initY = e.position.y, e.position.prevX = p.clientX, e.position.prevY = p.clientY, document.addEventListener("pointermove", n);
700
+ p.preventDefault(), e.position.initX = e.position.x, e.position.initY = e.position.y, e.position.prevX = p.clientX, e.position.prevY = p.clientY, document.addEventListener("pointermove", o);
705
701
  }
706
- function n(p) {
702
+ function o(p) {
707
703
  p.preventDefault(), e.hasBeenDragged || (e.hasBeenDragged = !0, e.wrapper.setAttribute("data-dragged", "true")), e.position.x = e.position.initX + p.clientX - e.position.prevX, e.position.y = e.position.initY + p.clientY - e.position.prevY, e.wrapper.style.transform = "translate3d(" + e.position.x + "px," + e.position.y + "px,0)";
708
704
  }
709
705
  function a(p) {
710
- document.removeEventListener("pointermove", n);
706
+ document.removeEventListener("pointermove", o);
711
707
  }
712
708
  }
713
709
  toggleClose() {
@@ -716,8 +712,8 @@ class x {
716
712
  kill() {
717
713
  this.wrapper.remove();
718
714
  }
719
- _mapLinear(e, t, n, a, p) {
720
- return a + (e - t) * (p - a) / (n - t);
715
+ _mapLinear(e, t, o, a, p) {
716
+ return a + (e - t) * (p - a) / (o - t);
721
717
  }
722
718
  }
723
719
  export {
package/dist/perfect-gui.umd.js CHANGED
@@ -28,6 +28,7 @@
28
28
  cursor: auto;
29
29
  border-radius: var(--main-border-radius);
30
30
  border: 1px solid var(--color-border);
31
+ line-height: normal;
31
32
  }
32
33
 
33
34
  .p-gui * {
@@ -414,4 +415,4 @@
414
415
  transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
415
416
  ${this.screenCorner.y=="top"?"":"top: auto; bottom: 0;"}
416
417
  ${this.backgroundColor?"background: "+this.backgroundColor+";":""}
417
- }`)}_folderConstructor(e){this.wrapper=e.wrapper}_parseScreenCorner(e){let t={x:"right",y:"top"};return e==null||(typeof e!="string"&&console.error("[perfect-gui] Position must be a string."),e.includes("left")&&(t.x="left"),e.includes("bottom")&&(t.y="bottom")),t}_getScrollbarWidth(e){return e===document.body?window.innerWidth-document.documentElement.clientWidth:e.offsetWidth-e.clientWidth}_handleResize(){if(this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),this.initMaxHeight&&(this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.wrapper.style.maxHeight=this.maxHeight+"px",this.hasBeenDragged)return;let e=this._getScrollbarWidth(this.container);if(this.xOffset=this.screenCorner.x=="left"?0:this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);for(let o=0;o<t.length&&!(parseInt(t[o].id.replace("p-gui-",""))>this.instanceId);o++)this.screenCorner.y==t[o].dataset.cornerY&&(this.screenCorner.x=="left"&&t[o].dataset.cornerX=="left"?this.xOffset+=t[o].offsetWidth:this.screenCorner.x=="right"&&t[o].dataset.cornerX=="right"&&(this.xOffset-=t[o].offsetWidth))}this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this.wrapper.style.transform=`translate3d(${this.position.x}px, ${this.position.y}px, 0)`}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=document.createElement("div"),this.wrapper.id="p-gui-"+this.instanceId,this.wrapper.className="p-gui",this.container.append(this.wrapper),this.header=document.createElement("div"),this.header.className="p-gui__header",this.header.textContent=this.name,this.header.style=`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`,this.wrapper.append(this.header);const e=document.createElement("div");e.className="p-gui__header-close",e.addEventListener("click",this.toggleClose.bind(this)),this.header.append(e)}button(e,t){let o="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?o=e.name==""?" ":e.name:o=" ":o=e==""?" ":e,this.imageContainer=null,typeof t!="function"&&(t=()=>{});const a=document.createElement("div");a.className="p-gui__button",a.textContent=o,a.addEventListener("click",t),this.wrapper.append(a),typeof e.color=="string"&&(a.style.setProperty("--color-accent",e.color),a.style.setProperty("--color-accent-hover",e.hoverColor||e.color))}image(e={},t){if(typeof e!="object")throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);let o;if(typeof e.path=="string")o=e.path;else throw typeof e.path==null?Error("[GUI] image() path must be provided."):Error("[GUI] image() path must be a string.");let a=o.replace(/^.*[\\\/]/,""),p;e.name==null?p=a:p=typeof e.name=="string"&&e.name||" ";const r=e.selected===!0,i=e.selectionBorder!==!1;let n="";e.width&&(typeof e.width=="number"&&(e.width+="px"),n+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),n+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const s=document.createElement("div");s.className="p-gui__image",s.style="background-image: url("+o+"); "+n,this.imageContainer.append(s),r&&i&&s.classList.add("p-gui__image--selected");const l=document.createElement("div");return l.className="p-gui__image-text",l.textContent=p,s.append(l),s.addEventListener("click",()=>{let f=s.parentElement.querySelectorAll(".p-gui__image--selected");for(let c=0;c<f.length;c++)f[c].classList.remove("p-gui__image--selected");i&&s.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:o,text:p})}),s}slider(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,n=typeof e.value=="number"?e.value:null,s=e.min??0,l=e.max??1,f=e.step||(l-s)/100;if(n!==null)(i!=null||r!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),p=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),n=(l-s)/2;this.imageContainer=null;const c=document.createElement("div");c.className="p-gui__slider",c.textContent=o,this.wrapper.append(c);const d=document.createElement("input");d.className="p-gui__slider-ctrl",d.setAttribute("type","range"),d.setAttribute("min",s),d.setAttribute("max",l),d.setAttribute("step",f),d.setAttribute("value",a?r[i]:n),c.append(d);const h=document.createElement("div");h.className="p-gui__slider-value",h.textContent=String(a?r[i]:n),c.append(h),d.addEventListener("input",()=>{h.textContent=d.value,a?r[i]=d.value:typeof t=="function"&&t(parseFloat(d.value))}),a&&Object.defineProperty(r,i,{set:g=>{this.propReferences[p]=g,d.value=g,h.textContent=String(g),typeof t=="function"&&t(parseFloat(d.value))},get:()=>this.propReferences[p]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,n=typeof e.value=="boolean"?e.value:null;if(n!==null)(i!=null||r!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),p=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const s=document.createElement("div");s.textContent=o,s.className="p-gui__switch",this.wrapper.append(s),s.addEventListener("click",c=>{const d=c.target.childNodes[1];let h=!0;d.classList.contains("p-gui__switch-checkbox--active")&&(h=!1),d.classList.toggle("p-gui__switch-checkbox--active"),a?r[i]=h:typeof t=="function"&&t(h)});let l=(()=>a?r[i]?" p-gui__switch-checkbox--active":"":n?" p-gui__switch-checkbox--active":"")();const f=document.createElement("div");f.className="p-gui__switch-checkbox"+l,s.append(f),a&&Object.defineProperty(r,i,{set:c=>{this.propReferences[p]=c,c?f.classList.add("p-gui__switch-checkbox--active"):f.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(c)},get:()=>this.propReferences[p]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"?e.name:" ",a=!1,p=null,r=e.obj,i=e.prop,n=Array.isArray(e.values)?e.values:null,s,l=typeof n[0]!="string";if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&r===void 0&&i===void 0)(i!=null||r!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),s=(()=>{if(!n)return null;if(typeof e.value=="string")return n.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);s=(()=>{if(!n)return null;if(typeof r[i]=="string")return l?n.find(d=>d.value===r[i]).value:n.indexOf(r[i]);if(typeof r[i]=="number")return l?n.find(d=>d.value===r[i]).value:r[i]})(),p=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let f=document.createElement("div");f.className="p-gui__list",f.textContent=o,this.wrapper.append(f);let c=document.createElement("select");f.append(c),c.className="p-gui__list-dropdown",c.addEventListener("change",d=>{a?r[i]=d.target.value:t&&t(d.target.value)}),n&&n.forEach((d,h)=>{const g=l?d.name:d,u=l?d.value:d;let x=document.createElement("option");x.setAttribute("value",u),x.textContent=g,c.append(x),(!l&&s==h||l&&s==u)&&x.setAttribute("selected","")}),a&&Object.defineProperty(r,i,{set:d=>{let h,g,u;l?(u=n.find(w=>w.value==d),g=(u==null?void 0:u.value)||n[0].value,h=n.indexOf(u)):(typeof d=="string"&&(h=n.indexOf(d),g=d),typeof d=="number"&&(h=d,g=n[d])),this.propReferences[p]=l?g:d;const x=c.querySelector("[selected]");x&&x.removeAttribute("selected"),c.querySelectorAll("option")[h].setAttribute("selected",""),typeof t=="function"&&t(l?u:g,h)},get:()=>this.propReferences[p]})}options(e,t){if(typeof e!="object")throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof e}.`);this.list(e,t)}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,p=e.x.max??1,r=e.y.min??0,i=e.y.max??1,n=e.x.obj,s=e.x.prop,l=this.propReferences.push(n[s])-1,f=e.y.obj,c=e.y.prop,d=this.propReferences.push(f[c])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const h=document.createElement("div");h.className="p-gui__vector2",h.textContent=o,this.wrapper.append(h);const g=document.createElement("div");g.className="p-gui__vector-value",g.textContent=n[s]+", "+f[c],h.append(g);const u=document.createElement("div");u.className="p-gui__vector2-area",h.append(u),u.addEventListener("click",m=>{n[s]=parseFloat(this._mapLinear(m.offsetX,0,u.clientWidth,a,p).toFixed(2)),f[c]=parseFloat(this._mapLinear(m.offsetY,0,u.clientHeight,i,r).toFixed(2)),t&&t(n[s],n[c])});let x=!1;u.addEventListener("pointerdown",m=>{x=!0}),u.addEventListener("pointerup",()=>{x=!1}),u.addEventListener("pointermove",m=>{x&&(n[s]=parseFloat(this._mapLinear(m.offsetX,0,u.clientWidth,a,p).toFixed(2)),f[c]=parseFloat(this._mapLinear(m.offsetY,0,u.clientHeight,i,r).toFixed(2)),t&&t(n[s],n[c]))});const w=document.createElement("div");w.className="p-gui__vector2-line p-gui__vector2-line-x",u.append(w);const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-y",u.append(y);const _=document.createElement("div");_.className="p-gui__vector2-dot",u.append(_),_.style.left=this._mapLinear(n[s],a,p,0,u.clientWidth)+"px",_.style.top=this._mapLinear(f[c],r,i,u.clientHeight,0)+"px",Object.defineProperty(n,s,{set:m=>{this.propReferences[l]=m,_.style.left=this._mapLinear(m,a,p,0,u.clientWidth)+"px",g.textContent=String(m)+", "+f[c]},get:()=>this.propReferences[l]}),Object.defineProperty(f,c,{set:m=>{this.propReferences[d]=m,_.style.top=this._mapLinear(m,r,i,u.clientHeight,0)+"px",g.textContent=n[s]+", "+String(m)},get:()=>this.propReferences[d]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,n;if(typeof e.value=="string"&&(e.value.length!=7||e.value[0]!="#"?console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`):n=e.value),n||(n="#000000"),e.value!==void 0)(i!=null||r!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),p=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const s=document.createElement("div");s.className="p-gui__color",s.textContent=o,this.wrapper.append(s);const l=document.createElement("input");l.className="p-gui__color-picker",l.setAttribute("type","color"),l.value=n,s.append(l),typeof t=="function"&&l.addEventListener("input",()=>{a?r[i]=l.value:typeof t=="function"&&t(l.value)}),a&&Object.defineProperty(r,i,{set:f=>{this.propReferences[p]=f,l.value=f,typeof t=="function"&&t(f)},get:()=>this.propReferences[p]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,o=e.name||"",a=e.color||null,p=e.maxHeight||null;this.imageContainer=null;let r="p-gui__folder";this.folders.length==0&&(r+=" p-gui__folder--first"),t&&(r+=" p-gui__folder--closed");let i=a?`background-color: ${a};`:"";i+=p?`max-height: ${p}px;`:"";const n=document.createElement("div");n.className=r,n.style=i,this.wrapper.append(n);const s=document.createElement("div");s.innerHTML=`<span class="p-gui__folder-arrow"></span>${o}`,s.className="p-gui__folder-header",n.append(s),s.addEventListener("click",()=>{n.classList.toggle("p-gui__folder--closed")});let l=new b({isFolder:!0,folderOptions:{wrapper:n}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(p){p.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=p.clientX,e.position.prevY=p.clientY,document.addEventListener("pointermove",o)}function o(p){p.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+p.clientX-e.position.prevX,e.position.y=e.position.initY+p.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(p){document.removeEventListener("pointermove",o)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,o,a,p){return a+(e-t)*(p-a)/(o-t)}}return b});
418
+ }`)}_folderConstructor(e){this.wrapper=e.wrapper}_parseScreenCorner(e){let t={x:"right",y:"top"};return e==null||(typeof e!="string"&&console.error("[perfect-gui] Position must be a string."),e.includes("left")&&(t.x="left"),e.includes("bottom")&&(t.y="bottom")),t}_getScrollbarWidth(e){return e===document.body?window.innerWidth-document.documentElement.clientWidth:e.offsetWidth-e.clientWidth}_handleResize(){if(this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),this.initMaxHeight&&(this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.wrapper.style.maxHeight=this.maxHeight+"px",this.hasBeenDragged)return;let e=this._getScrollbarWidth(this.container);if(this.xOffset=this.screenCorner.x=="left"?0:this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);for(let o=0;o<t.length&&!(parseInt(t[o].id.replace("p-gui-",""))>this.instanceId);o++)this.screenCorner.y==t[o].dataset.cornerY&&(this.screenCorner.x=="left"&&t[o].dataset.cornerX=="left"?this.xOffset+=t[o].offsetWidth:this.screenCorner.x=="right"&&t[o].dataset.cornerX=="right"&&(this.xOffset-=t[o].offsetWidth))}this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this.wrapper.style.transform=`translate3d(${this.position.x}px, ${this.position.y}px, 0)`}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=document.createElement("div"),this.wrapper.id="p-gui-"+this.instanceId,this.wrapper.className="p-gui",this.container.append(this.wrapper),this.header=document.createElement("div"),this.header.className="p-gui__header",this.header.textContent=this.name,this.header.style=`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`,this.wrapper.append(this.header);const e=document.createElement("div");e.className="p-gui__header-close",e.addEventListener("click",this.toggleClose.bind(this)),this.header.append(e)}button(e,t){let o="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?o=e.name==""?" ":e.name:o=" ":o=e==""?" ":e,this.imageContainer=null,typeof t!="function"&&(t=()=>{});const a=document.createElement("div");a.className="p-gui__button",a.textContent=o,a.addEventListener("click",t),this.wrapper.append(a),typeof e.color=="string"&&(a.style.setProperty("--color-accent",e.color),a.style.setProperty("--color-accent-hover",e.hoverColor||e.color))}image(e={},t){if(typeof e!="object")throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);let o;if(typeof e.path=="string")o=e.path;else throw typeof e.path==null?Error("[GUI] image() path must be provided."):Error("[GUI] image() path must be a string.");let a=o.replace(/^.*[\\\/]/,""),p;e.name==null?p=a:p=typeof e.name=="string"&&e.name||" ";const r=e.selected===!0,i=e.selectionBorder!==!1;let n="";e.width&&(typeof e.width=="number"&&(e.width+="px"),n+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),n+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const s=document.createElement("div");s.className="p-gui__image",s.style="background-image: url("+o+"); "+n,this.imageContainer.append(s),r&&i&&s.classList.add("p-gui__image--selected");const l=document.createElement("div");return l.className="p-gui__image-text",l.textContent=p,s.append(l),s.addEventListener("click",()=>{let f=s.parentElement.querySelectorAll(".p-gui__image--selected");for(let c=0;c<f.length;c++)f[c].classList.remove("p-gui__image--selected");i&&s.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:o,text:p})}),s}slider(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,n=typeof e.value=="number"?e.value:null,s=e.min??0,l=e.max??1,f=e.step||(l-s)/100;if(n!==null)(i!=null||r!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),p=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),n=(l-s)/2;this.imageContainer=null;const c=document.createElement("div");c.className="p-gui__slider",c.textContent=o,this.wrapper.append(c);const d=document.createElement("input");d.className="p-gui__slider-ctrl",d.setAttribute("type","range"),d.setAttribute("min",s),d.setAttribute("max",l),d.setAttribute("step",f),d.setAttribute("value",a?r[i]:n),c.append(d);const h=document.createElement("div");h.className="p-gui__slider-value",h.textContent=String(a?r[i]:n),c.append(h),d.addEventListener("input",()=>{h.textContent=d.value,a?r[i]=parseFloat(d.value):typeof t=="function"&&t(parseFloat(d.value))}),a&&Object.defineProperty(r,i,{set:g=>{this.propReferences[p]=g,d.value=g,h.textContent=String(g),typeof t=="function"&&t(parseFloat(d.value))},get:()=>this.propReferences[p]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,n=typeof e.value=="boolean"?e.value:null;if(n!==null)(i!=null||r!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),p=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const s=document.createElement("div");s.textContent=o,s.className="p-gui__switch",this.wrapper.append(s),s.addEventListener("click",c=>{const d=c.target.childNodes[1];let h=!0;d.classList.contains("p-gui__switch-checkbox--active")&&(h=!1),d.classList.toggle("p-gui__switch-checkbox--active"),a?r[i]=h:typeof t=="function"&&t(h)});let l=(()=>a?r[i]?" p-gui__switch-checkbox--active":"":n?" p-gui__switch-checkbox--active":"")();const f=document.createElement("div");f.className="p-gui__switch-checkbox"+l,s.append(f),a&&Object.defineProperty(r,i,{set:c=>{this.propReferences[p]=c,c?f.classList.add("p-gui__switch-checkbox--active"):f.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(c)},get:()=>this.propReferences[p]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"?e.name:" ",a=!1,p=null,r=e.obj,i=e.prop,n=Array.isArray(e.values)?e.values:null,s,l=typeof n[0]!="string";if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&r===void 0&&i===void 0)(i!=null||r!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),s=(()=>{if(!n)return null;if(typeof e.value=="string")return n.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);s=(()=>{if(!n)return null;if(typeof r[i]=="string")return l?n.find(d=>d.value===r[i]).value:n.indexOf(r[i]);if(typeof r[i]=="number")return l?n.find(d=>d.value===r[i]).value:r[i]})(),p=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let f=document.createElement("div");f.className="p-gui__list",f.textContent=o,this.wrapper.append(f);let c=document.createElement("select");f.append(c),c.className="p-gui__list-dropdown",c.addEventListener("change",d=>{a?r[i]=d.target.value:t&&t(d.target.value)}),n&&n.forEach((d,h)=>{const g=l?d.name:d,u=l?d.value:d;let x=document.createElement("option");x.setAttribute("value",u),x.textContent=g,c.append(x),(!l&&s==h||l&&s==u)&&x.setAttribute("selected","")}),a&&Object.defineProperty(r,i,{set:d=>{let h,g,u;l?(u=n.find(w=>w.value==d),g=(u==null?void 0:u.value)||n[0].value,h=n.indexOf(u)):(typeof d=="string"&&(h=n.indexOf(d),g=d),typeof d=="number"&&(h=d,g=n[d])),this.propReferences[p]=l?g:d;const x=c.querySelector("[selected]");x&&x.removeAttribute("selected"),c.querySelectorAll("option")[h].setAttribute("selected",""),typeof t=="function"&&t(l?u:g,h)},get:()=>this.propReferences[p]})}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,p=e.x.max??1,r=e.y.min??0,i=e.y.max??1,n=e.x.obj,s=e.x.prop,l=this.propReferences.push(n[s])-1,f=e.y.obj,c=e.y.prop,d=this.propReferences.push(f[c])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const h=document.createElement("div");h.className="p-gui__vector2",h.textContent=o,this.wrapper.append(h);const g=document.createElement("div");g.className="p-gui__vector-value",g.textContent=n[s]+", "+f[c],h.append(g);const u=document.createElement("div");u.className="p-gui__vector2-area",h.append(u),u.addEventListener("click",m=>{n[s]=parseFloat(this._mapLinear(m.offsetX,0,u.clientWidth,a,p).toFixed(2)),f[c]=parseFloat(this._mapLinear(m.offsetY,0,u.clientHeight,i,r).toFixed(2)),t&&t(n[s],n[c])});let x=!1;u.addEventListener("pointerdown",m=>{x=!0}),u.addEventListener("pointerup",()=>{x=!1}),u.addEventListener("pointermove",m=>{x&&(n[s]=parseFloat(this._mapLinear(m.offsetX,0,u.clientWidth,a,p).toFixed(2)),f[c]=parseFloat(this._mapLinear(m.offsetY,0,u.clientHeight,i,r).toFixed(2)),t&&t(n[s],n[c]))});const w=document.createElement("div");w.className="p-gui__vector2-line p-gui__vector2-line-x",u.append(w);const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-y",u.append(y);const _=document.createElement("div");_.className="p-gui__vector2-dot",u.append(_),_.style.left=this._mapLinear(n[s],a,p,0,u.clientWidth)+"px",_.style.top=this._mapLinear(f[c],r,i,u.clientHeight,0)+"px",Object.defineProperty(n,s,{set:m=>{this.propReferences[l]=m,_.style.left=this._mapLinear(m,a,p,0,u.clientWidth)+"px",g.textContent=String(m)+", "+f[c]},get:()=>this.propReferences[l]}),Object.defineProperty(f,c,{set:m=>{this.propReferences[d]=m,_.style.top=this._mapLinear(m,r,i,u.clientHeight,0)+"px",g.textContent=n[s]+", "+String(m)},get:()=>this.propReferences[d]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,n;if(typeof e.value=="string"&&(e.value.length!=7||e.value[0]!="#"?console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`):n=e.value),n||(n="#000000"),e.value!==void 0)(i!=null||r!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),p=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const s=document.createElement("div");s.className="p-gui__color",s.textContent=o,this.wrapper.append(s);const l=document.createElement("input");l.className="p-gui__color-picker",l.setAttribute("type","color"),l.value=n,s.append(l),typeof t=="function"&&l.addEventListener("input",()=>{a?r[i]=l.value:typeof t=="function"&&t(l.value)}),a&&Object.defineProperty(r,i,{set:f=>{this.propReferences[p]=f,l.value=f,typeof t=="function"&&t(f)},get:()=>this.propReferences[p]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,o=e.name||"",a=e.color||null,p=e.maxHeight||null;this.imageContainer=null;let r="p-gui__folder";this.folders.length==0&&(r+=" p-gui__folder--first"),t&&(r+=" p-gui__folder--closed");let i=a?`background-color: ${a};`:"";i+=p?`max-height: ${p}px;`:"";const n=document.createElement("div");n.className=r,n.style=i,this.wrapper.append(n);const s=document.createElement("div");s.innerHTML=`<span class="p-gui__folder-arrow"></span>${o}`,s.className="p-gui__folder-header",n.append(s),s.addEventListener("click",()=>{n.classList.toggle("p-gui__folder--closed")});let l=new b({isFolder:!0,folderOptions:{wrapper:n}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(p){p.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=p.clientX,e.position.prevY=p.clientY,document.addEventListener("pointermove",o)}function o(p){p.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+p.clientX-e.position.prevX,e.position.y=e.position.initY+p.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(p){document.removeEventListener("pointermove",o)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,o,a,p){return a+(e-t)*(p-a)/(o-t)}}return b});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "perfect-gui",
3
- "version": "4.8.1",
3
+ "version": "4.8.3",
4
4
  "description": "GUI for JavaScript",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/index.js CHANGED
@@ -375,7 +375,7 @@ export default class GUI {
375
375
  slider_value.textContent = slider_ctrl.value;
376
376
 
377
377
  if ( isObject ) {
378
- obj[prop] = slider_ctrl.value;
378
+ obj[prop] = parseFloat(slider_ctrl.value);
379
379
  }
380
380
  else {
381
381
  if (typeof callback == "function") {
@@ -664,13 +664,6 @@ export default class GUI {
664
664
  }
665
665
  }
666
666
 
667
- options(params, callback) {
668
- if (typeof params != 'object') {
669
- throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof params}.`);
670
- }
671
- this.list(params, callback);
672
- }
673
-
674
667
  vector2( params = {}, callback) {
675
668
  if (typeof params != 'object') {
676
669
  throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof params}.`);
package/src/styles.js CHANGED
@@ -34,6 +34,7 @@ export default function( position_type ) {
34
34
  cursor: auto;
35
35
  border-radius: var(--main-border-radius);
36
36
  border: 1px solid var(--color-border);
37
+ line-height: normal;
37
38
  }
38
39
 
39
40
  .p-gui * {