perfect-gui 4.7.3 → 4.7.5

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 +47 -46
  2. package/dist/perfect-gui.umd.js +2 -2
  3. package/package.json +1 -1
  4. package/src/index.js +9 -6
  5. package/src/styles.js +1 -1
package/dist/perfect-gui.mjs CHANGED
@@ -307,7 +307,7 @@ function A(y) {
307
307
 
308
308
  .p-gui__slider {
309
309
  width: 100%;
310
- margin-bottom: 8px;
310
+ margin-bottom: 10px;
311
311
  padding: 7px;
312
312
  color: white;
313
313
  position: relative;
@@ -489,23 +489,23 @@ class b {
489
489
  let a = o.replace(/^.*[\\\/]/, ""), d;
490
490
  e.name == null ? d = a : d = typeof e.name == "string" && e.name || " ";
491
491
  const r = e.selected === !0, i = e.selectionBorder !== !1;
492
- let s = "";
493
- e.width && (typeof e.width == "number" && (e.width += "px"), s += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), s += `height: ${e.height}; `), this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer));
494
- const n = document.createElement("div");
495
- n.className = "p-gui__image", n.style = "background-image: url(" + o + "); " + s, this.imageContainer.append(n), r && i && n.classList.add("p-gui__image--selected");
492
+ let n = "";
493
+ 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
+ const s = document.createElement("div");
495
+ 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
496
  const l = document.createElement("div");
497
- return l.className = "p-gui__image-text", l.textContent = d, n.append(l), n.addEventListener("click", () => {
498
- let c = n.parentElement.querySelectorAll(".p-gui__image--selected");
497
+ return l.className = "p-gui__image-text", l.textContent = d, s.append(l), s.addEventListener("click", () => {
498
+ let c = s.parentElement.querySelectorAll(".p-gui__image--selected");
499
499
  for (let p = 0; p < c.length; p++)
500
500
  c[p].classList.remove("p-gui__image--selected");
501
- i && n.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: o, text: d });
502
- }), n;
501
+ i && s.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path: o, text: d });
502
+ }), s;
503
503
  }
504
504
  slider(e = {}, t) {
505
505
  if (typeof e != "object")
506
506
  throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);
507
- let o = typeof e.name == "string" && e.name || " ", a = !1, d = null, r = e.obj, i = e.prop, s = typeof e.value == "number" ? e.value : null, n = e.min ?? 0, l = e.max ?? 1, c = e.step || (l - n) / 100;
508
- if (s !== null)
507
+ let o = typeof e.name == "string" && e.name || " ", a = !1, d = null, r = e.obj, i = e.prop, n = typeof e.value == "number" ? e.value : null, s = e.min ?? 0, l = e.max ?? 1, c = e.step || (l - s) / 100;
508
+ if (n !== null)
509
509
  (i != null || r != null) && console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
510
510
  else if (i != null && r != null) {
511
511
  if (typeof i != "string")
@@ -514,14 +514,14 @@ class b {
514
514
  throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof r}.`);
515
515
  o == " " && (o = i), d = this.propReferences.push(r[i]) - 1, a = !0;
516
516
  } else
517
- (i != null && r == null || i == null && r == null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), s = (l - n) / 2;
517
+ (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
518
  this.imageContainer = null;
519
519
  const p = document.createElement("div");
520
520
  p.className = "p-gui__slider", p.textContent = o, this.wrapper.append(p);
521
521
  const u = document.createElement("input");
522
- u.className = "p-gui__slider-ctrl", u.setAttribute("type", "range"), u.setAttribute("min", n), u.setAttribute("max", l), u.setAttribute("step", c), u.setAttribute("value", a ? r[i] : s), p.append(u);
522
+ u.className = "p-gui__slider-ctrl", u.setAttribute("type", "range"), u.setAttribute("min", s), u.setAttribute("max", l), u.setAttribute("step", c), u.setAttribute("value", a ? r[i] : n), p.append(u);
523
523
  const h = document.createElement("div");
524
- h.className = "p-gui__slider-value", h.textContent = String(a ? r[i] : s), p.append(h), u.addEventListener("input", () => {
524
+ h.className = "p-gui__slider-value", h.textContent = String(a ? r[i] : n), p.append(h), u.addEventListener("input", () => {
525
525
  h.textContent = u.value, a ? r[i] = u.value : typeof t == "function" && t(parseFloat(u.value));
526
526
  }), a && Object.defineProperty(r, i, {
527
527
  set: (m) => {
@@ -533,8 +533,8 @@ class b {
533
533
  toggle(e = {}, t) {
534
534
  if (typeof e != "object")
535
535
  throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);
536
- let o = typeof e.name == "string" && e.name || " ", a = !1, d = null, r = e.obj, i = e.prop, s = typeof e.value == "boolean" ? e.value : null;
537
- if (s !== null)
536
+ let o = typeof e.name == "string" && e.name || " ", a = !1, d = null, r = e.obj, i = e.prop, n = typeof e.value == "boolean" ? e.value : null;
537
+ if (n !== null)
538
538
  (i != null || r != null) && console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
539
539
  else if (i != null && r != null) {
540
540
  if (typeof i != "string")
@@ -545,15 +545,15 @@ class b {
545
545
  } else
546
546
  (i != null && r == null || i == null && r == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
547
547
  this.imageContainer = null;
548
- const n = document.createElement("div");
549
- n.textContent = o, n.className = "p-gui__switch", this.wrapper.append(n), n.addEventListener("click", (p) => {
548
+ const s = document.createElement("div");
549
+ s.textContent = o, s.className = "p-gui__switch", this.wrapper.append(s), s.addEventListener("click", (p) => {
550
550
  const u = p.target.childNodes[1];
551
551
  let h = !0;
552
552
  u.classList.contains("p-gui__switch-checkbox--active") && (h = !1), u.classList.toggle("p-gui__switch-checkbox--active"), a ? r[i] = h : typeof t == "function" && t(h);
553
553
  });
554
- let l = (() => a ? r[i] ? " p-gui__switch-checkbox--active" : "" : s ? " p-gui__switch-checkbox--active" : "")();
554
+ let l = (() => a ? r[i] ? " p-gui__switch-checkbox--active" : "" : n ? " p-gui__switch-checkbox--active" : "")();
555
555
  const c = document.createElement("div");
556
- c.className = "p-gui__switch-checkbox" + l, n.append(c), a && Object.defineProperty(r, i, {
556
+ c.className = "p-gui__switch-checkbox" + l, s.append(c), a && Object.defineProperty(r, i, {
557
557
  set: (p) => {
558
558
  this.propReferences[d] = p, p ? c.classList.add("p-gui__switch-checkbox--active") : c.classList.remove("p-gui__switch-checkbox--active"), typeof t == "function" && t(p);
559
559
  },
@@ -563,13 +563,13 @@ class b {
563
563
  list(e = {}, t) {
564
564
  if (typeof e != "object")
565
565
  throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);
566
- let o = typeof e.name == "string" ? e.name : " ", a = !1, d = null, r = e.obj, i = e.prop, s = Array.isArray(e.values) ? e.values : null, n;
566
+ let o = typeof e.name == "string" ? e.name : " ", a = !1, d = null, r = e.obj, i = e.prop, n = Array.isArray(e.values) ? e.values : null, s;
567
567
  if (t = typeof t == "function" ? t : null, e.value !== void 0 || e.value === void 0 && r === void 0 && i === void 0)
568
- (i != null || r != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), n = (() => {
569
- if (!s)
568
+ (i != null || r != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), s = (() => {
569
+ if (!n)
570
570
  return null;
571
571
  if (typeof e.value == "string")
572
- return s.indexOf(e.value);
572
+ return n.indexOf(e.value);
573
573
  if (typeof e.value == "number")
574
574
  return e.value;
575
575
  })();
@@ -578,11 +578,11 @@ class b {
578
578
  throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof i}.`);
579
579
  if (typeof r != "object")
580
580
  throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);
581
- n = (() => {
582
- if (!s)
581
+ s = (() => {
582
+ if (!n)
583
583
  return null;
584
584
  if (typeof r[i] == "string")
585
- return s.indexOf(r[i]);
585
+ return n.indexOf(r[i]);
586
586
  if (typeof r[i] == "number")
587
587
  return r[i];
588
588
  })(), d = this.propReferences.push(r[i]) - 1, a = !0;
@@ -594,12 +594,13 @@ class b {
594
594
  let c = document.createElement("select");
595
595
  l.append(c), c.className = "p-gui__list-dropdown", c.addEventListener("change", (p) => {
596
596
  a ? r[i] = p.target.value : t && t(p.target.value);
597
- }), s && s.forEach((p, u) => {
597
+ }), n && n.forEach((p, u) => {
598
598
  let h = document.createElement("option");
599
- h.setAttribute("value", p), h.textContent = p, c.append(h), n == u && h.setAttribute("selected", "");
599
+ h.setAttribute("value", p), h.textContent = p, c.append(h), s == u && h.setAttribute("selected", "");
600
600
  }), a && Object.defineProperty(r, i, {
601
601
  set: (p) => {
602
- typeof p == "string" && (n = s.indexOf(p)), typeof p == "number" && (n = p), this.propReferences[d] = n, c.querySelector("[selected]").removeAttribute("selected"), c.querySelectorAll("option")[n].setAttribute("selected", ""), typeof t == "function" && t(n);
602
+ let u, h;
603
+ typeof p == "string" && (u = n.indexOf(p), h = p), typeof p == "number" && (u = p, h = n[p]), this.propReferences[d] = p, c.querySelector("[selected]").removeAttribute("selected"), c.querySelectorAll("option")[u].setAttribute("selected", ""), typeof t == "function" && t(h, u);
603
604
  },
604
605
  get: () => this.propReferences[d]
605
606
  });
@@ -613,15 +614,15 @@ class b {
613
614
  if (typeof e != "object")
614
615
  throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);
615
616
  let o = typeof e.name == "string" && e.name || " ";
616
- const a = e.x.min ?? 0, d = e.x.max ?? 1, r = e.y.min ?? 0, i = e.y.max ?? 1, s = e.x.obj, n = e.x.prop, l = this.propReferences.push(s[n]) - 1, c = e.y.obj, p = e.y.prop, u = this.propReferences.push(c[p]) - 1;
617
+ const a = e.x.min ?? 0, d = 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, c = e.y.obj, p = e.y.prop, u = this.propReferences.push(c[p]) - 1;
617
618
  t = typeof t == "function" ? t : null, this.imageContainer = null;
618
619
  const h = document.createElement("div");
619
620
  h.className = "p-gui__vector2", h.textContent = o, this.wrapper.append(h);
620
621
  const m = document.createElement("div");
621
- m.className = "p-gui__vector-value", m.textContent = s[n] + ", " + c[p], h.append(m);
622
+ m.className = "p-gui__vector-value", m.textContent = n[s] + ", " + c[p], h.append(m);
622
623
  const f = document.createElement("div");
623
624
  f.className = "p-gui__vector2-area", h.append(f), f.addEventListener("click", (g) => {
624
- s[n] = parseFloat(this._mapLinear(g.offsetX, 0, f.clientWidth, a, d).toFixed(2)), c[p] = parseFloat(this._mapLinear(g.offsetY, 0, f.clientHeight, i, r).toFixed(2)), t && t(s[n], s[p]);
625
+ n[s] = parseFloat(this._mapLinear(g.offsetX, 0, f.clientWidth, a, d).toFixed(2)), c[p] = parseFloat(this._mapLinear(g.offsetY, 0, f.clientHeight, i, r).toFixed(2)), t && t(n[s], n[p]);
625
626
  });
626
627
  let _ = !1;
627
628
  f.addEventListener("pointerdown", (g) => {
@@ -629,21 +630,21 @@ class b {
629
630
  }), f.addEventListener("pointerup", () => {
630
631
  _ = !1;
631
632
  }), f.addEventListener("pointermove", (g) => {
632
- _ && (s[n] = parseFloat(this._mapLinear(g.offsetX, 0, f.clientWidth, a, d).toFixed(2)), c[p] = parseFloat(this._mapLinear(g.offsetY, 0, f.clientHeight, i, r).toFixed(2)), t && t(s[n], s[p]));
633
+ _ && (n[s] = parseFloat(this._mapLinear(g.offsetX, 0, f.clientWidth, a, d).toFixed(2)), c[p] = parseFloat(this._mapLinear(g.offsetY, 0, f.clientHeight, i, r).toFixed(2)), t && t(n[s], n[p]));
633
634
  });
634
635
  const w = document.createElement("div");
635
636
  w.className = "p-gui__vector2-line p-gui__vector2-line-x", f.append(w);
636
637
  const v = document.createElement("div");
637
638
  v.className = "p-gui__vector2-line p-gui__vector2-line-y", f.append(v);
638
639
  const x = document.createElement("div");
639
- x.className = "p-gui__vector2-dot", f.append(x), x.style.left = this._mapLinear(s[n], a, d, 0, f.clientWidth) + "px", x.style.top = this._mapLinear(c[p], r, i, f.clientHeight, 0) + "px", Object.defineProperty(s, n, {
640
+ x.className = "p-gui__vector2-dot", f.append(x), x.style.left = this._mapLinear(n[s], a, d, 0, f.clientWidth) + "px", x.style.top = this._mapLinear(c[p], r, i, f.clientHeight, 0) + "px", Object.defineProperty(n, s, {
640
641
  set: (g) => {
641
642
  this.propReferences[l] = g, x.style.left = this._mapLinear(g, a, d, 0, f.clientWidth) + "px", m.textContent = String(g) + ", " + c[p];
642
643
  },
643
644
  get: () => this.propReferences[l]
644
645
  }), Object.defineProperty(c, p, {
645
646
  set: (g) => {
646
- this.propReferences[u] = g, x.style.top = this._mapLinear(g, r, i, f.clientHeight, 0) + "px", m.textContent = s[n] + ", " + String(g);
647
+ this.propReferences[u] = g, x.style.top = this._mapLinear(g, r, i, f.clientHeight, 0) + "px", m.textContent = n[s] + ", " + String(g);
647
648
  },
648
649
  get: () => this.propReferences[u]
649
650
  });
@@ -651,8 +652,8 @@ class b {
651
652
  color(e = {}, t) {
652
653
  if (typeof e != "object")
653
654
  throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);
654
- let o = typeof e.name == "string" && e.name || " ", a = !1, d = null, r = e.obj, i = e.prop, s;
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}".`) : s = e.value), s || (s = "#000000"), e.value !== void 0)
655
+ let o = typeof e.name == "string" && e.name || " ", a = !1, d = null, r = e.obj, i = e.prop, n;
656
+ 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)
656
657
  (i != null || r != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
657
658
  else if (i != null && r != null) {
658
659
  if (typeof i != "string")
@@ -663,10 +664,10 @@ class b {
663
664
  } else
664
665
  (i != null && r == null || i == null && r == null) && console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');
665
666
  this.imageContainer = null;
666
- const n = document.createElement("div");
667
- n.className = "p-gui__color", n.textContent = o, this.wrapper.append(n);
667
+ const s = document.createElement("div");
668
+ s.className = "p-gui__color", s.textContent = o, this.wrapper.append(s);
668
669
  const l = document.createElement("input");
669
- l.className = "p-gui__color-picker", l.setAttribute("type", "color"), l.value = s, n.append(l), typeof t == "function" && l.addEventListener("input", () => {
670
+ l.className = "p-gui__color-picker", l.setAttribute("type", "color"), l.value = n, s.append(l), typeof t == "function" && l.addEventListener("input", () => {
670
671
  a ? r[i] = l.value : typeof t == "function" && t(l.value);
671
672
  }), a && Object.defineProperty(r, i, {
672
673
  set: (c) => {
@@ -682,14 +683,14 @@ class b {
682
683
  this.folders.length == 0 && (r += " p-gui__folder--first"), t && (r += " p-gui__folder--closed");
683
684
  let i = a ? `background-color: ${a};` : "";
684
685
  i += d ? `max-height: ${d}px;` : "";
685
- const s = document.createElement("div");
686
- s.className = r, s.style = i, this.wrapper.append(s);
687
686
  const n = document.createElement("div");
688
- n.innerHTML = `<span class="p-gui__folder-arrow"></span>${o}`, n.className = "p-gui__folder-header", s.append(n), n.addEventListener("click", () => {
689
- s.classList.toggle("p-gui__folder--closed");
687
+ n.className = r, n.style = i, this.wrapper.append(n);
688
+ const s = document.createElement("div");
689
+ s.innerHTML = `<span class="p-gui__folder-arrow"></span>${o}`, s.className = "p-gui__folder-header", n.append(s), s.addEventListener("click", () => {
690
+ n.classList.toggle("p-gui__folder--closed");
690
691
  });
691
692
  let l = new b({ isFolder: !0, folderOptions: {
692
- wrapper: s
693
+ wrapper: n
693
694
  } });
694
695
  return this.folders.push(l), l;
695
696
  }
package/dist/perfect-gui.umd.js CHANGED
@@ -304,7 +304,7 @@
304
304
 
305
305
  .p-gui__slider {
306
306
  width: 100%;
307
- margin-bottom: 8px;
307
+ margin-bottom: 10px;
308
308
  padding: 7px;
309
309
  color: white;
310
310
  position: relative;
@@ -414,4 +414,4 @@
414
414
  transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
415
415
  ${this.screenCorner.y=="top"?"":"top: auto; bottom: 0;"}
416
416
  ${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(/^.*[\\\/]/,""),d;e.name==null?d=a:d=typeof e.name=="string"&&e.name||" ";const r=e.selected===!0,i=e.selectionBorder!==!1;let s="";e.width&&(typeof e.width=="number"&&(e.width+="px"),s+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),s+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const n=document.createElement("div");n.className="p-gui__image",n.style="background-image: url("+o+"); "+s,this.imageContainer.append(n),r&&i&&n.classList.add("p-gui__image--selected");const l=document.createElement("div");return l.className="p-gui__image-text",l.textContent=d,n.append(l),n.addEventListener("click",()=>{let c=n.parentElement.querySelectorAll(".p-gui__image--selected");for(let p=0;p<c.length;p++)c[p].classList.remove("p-gui__image--selected");i&&n.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:o,text:d})}),n}slider(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,d=null,r=e.obj,i=e.prop,s=typeof e.value=="number"?e.value:null,n=e.min??0,l=e.max??1,c=e.step||(l-n)/100;if(s!==null)(i!=null||r!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),d=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),s=(l-n)/2;this.imageContainer=null;const p=document.createElement("div");p.className="p-gui__slider",p.textContent=o,this.wrapper.append(p);const u=document.createElement("input");u.className="p-gui__slider-ctrl",u.setAttribute("type","range"),u.setAttribute("min",n),u.setAttribute("max",l),u.setAttribute("step",c),u.setAttribute("value",a?r[i]:s),p.append(u);const f=document.createElement("div");f.className="p-gui__slider-value",f.textContent=String(a?r[i]:s),p.append(f),u.addEventListener("input",()=>{f.textContent=u.value,a?r[i]=u.value:typeof t=="function"&&t(parseFloat(u.value))}),a&&Object.defineProperty(r,i,{set:m=>{this.propReferences[d]=m,u.value=m,f.textContent=String(m),typeof t=="function"&&t(parseFloat(u.value))},get:()=>this.propReferences[d]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,d=null,r=e.obj,i=e.prop,s=typeof e.value=="boolean"?e.value:null;if(s!==null)(i!=null||r!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),d=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const n=document.createElement("div");n.textContent=o,n.className="p-gui__switch",this.wrapper.append(n),n.addEventListener("click",p=>{const u=p.target.childNodes[1];let f=!0;u.classList.contains("p-gui__switch-checkbox--active")&&(f=!1),u.classList.toggle("p-gui__switch-checkbox--active"),a?r[i]=f:typeof t=="function"&&t(f)});let l=(()=>a?r[i]?" p-gui__switch-checkbox--active":"":s?" p-gui__switch-checkbox--active":"")();const c=document.createElement("div");c.className="p-gui__switch-checkbox"+l,n.append(c),a&&Object.defineProperty(r,i,{set:p=>{this.propReferences[d]=p,p?c.classList.add("p-gui__switch-checkbox--active"):c.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(p)},get:()=>this.propReferences[d]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"?e.name:" ",a=!1,d=null,r=e.obj,i=e.prop,s=Array.isArray(e.values)?e.values:null,n;if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&r===void 0&&i===void 0)(i!=null||r!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),n=(()=>{if(!s)return null;if(typeof e.value=="string")return s.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof r}.`);n=(()=>{if(!s)return null;if(typeof r[i]=="string")return s.indexOf(r[i]);if(typeof r[i]=="number")return r[i]})(),d=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let l=document.createElement("div");l.className="p-gui__list",l.textContent=o,this.wrapper.append(l);let c=document.createElement("select");l.append(c),c.className="p-gui__list-dropdown",c.addEventListener("change",p=>{a?r[i]=p.target.value:t&&t(p.target.value)}),s&&s.forEach((p,u)=>{let f=document.createElement("option");f.setAttribute("value",p),f.textContent=p,c.append(f),n==u&&f.setAttribute("selected","")}),a&&Object.defineProperty(r,i,{set:p=>{typeof p=="string"&&(n=s.indexOf(p)),typeof p=="number"&&(n=p),this.propReferences[d]=n,c.querySelector("[selected]").removeAttribute("selected"),c.querySelectorAll("option")[n].setAttribute("selected",""),typeof t=="function"&&t(n)},get:()=>this.propReferences[d]})}options(e,t){if(typeof e!="object")throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof e}.`);this.list(e,t)}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,d=e.x.max??1,r=e.y.min??0,i=e.y.max??1,s=e.x.obj,n=e.x.prop,l=this.propReferences.push(s[n])-1,c=e.y.obj,p=e.y.prop,u=this.propReferences.push(c[p])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const f=document.createElement("div");f.className="p-gui__vector2",f.textContent=o,this.wrapper.append(f);const m=document.createElement("div");m.className="p-gui__vector-value",m.textContent=s[n]+", "+c[p],f.append(m);const h=document.createElement("div");h.className="p-gui__vector2-area",f.append(h),h.addEventListener("click",b=>{s[n]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,d).toFixed(2)),c[p]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,i,r).toFixed(2)),t&&t(s[n],s[p])});let w=!1;h.addEventListener("pointerdown",b=>{w=!0}),h.addEventListener("pointerup",()=>{w=!1}),h.addEventListener("pointermove",b=>{w&&(s[n]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,d).toFixed(2)),c[p]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,i,r).toFixed(2)),t&&t(s[n],s[p]))});const v=document.createElement("div");v.className="p-gui__vector2-line p-gui__vector2-line-x",h.append(v);const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-y",h.append(y);const x=document.createElement("div");x.className="p-gui__vector2-dot",h.append(x),x.style.left=this._mapLinear(s[n],a,d,0,h.clientWidth)+"px",x.style.top=this._mapLinear(c[p],r,i,h.clientHeight,0)+"px",Object.defineProperty(s,n,{set:b=>{this.propReferences[l]=b,x.style.left=this._mapLinear(b,a,d,0,h.clientWidth)+"px",m.textContent=String(b)+", "+c[p]},get:()=>this.propReferences[l]}),Object.defineProperty(c,p,{set:b=>{this.propReferences[u]=b,x.style.top=this._mapLinear(b,r,i,h.clientHeight,0)+"px",m.textContent=s[n]+", "+String(b)},get:()=>this.propReferences[u]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,d=null,r=e.obj,i=e.prop,s;if(typeof e.value=="string"&&(e.value.length!=7||e.value[0]!="#"?console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`):s=e.value),s||(s="#000000"),e.value!==void 0)(i!=null||r!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(i!=null&&r!=null){if(typeof i!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof i}.`);if(typeof r!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);o==" "&&(o=i),d=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const n=document.createElement("div");n.className="p-gui__color",n.textContent=o,this.wrapper.append(n);const l=document.createElement("input");l.className="p-gui__color-picker",l.setAttribute("type","color"),l.value=s,n.append(l),typeof t=="function"&&l.addEventListener("input",()=>{a?r[i]=l.value:typeof t=="function"&&t(l.value)}),a&&Object.defineProperty(r,i,{set:c=>{this.propReferences[d]=c,l.value=c,typeof t=="function"&&t(c)},get:()=>this.propReferences[d]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,o=e.name||"",a=e.color||null,d=e.maxHeight||null;this.imageContainer=null;let r="p-gui__folder";this.folders.length==0&&(r+=" p-gui__folder--first"),t&&(r+=" p-gui__folder--closed");let i=a?`background-color: ${a};`:"";i+=d?`max-height: ${d}px;`:"";const s=document.createElement("div");s.className=r,s.style=i,this.wrapper.append(s);const n=document.createElement("div");n.innerHTML=`<span class="p-gui__folder-arrow"></span>${o}`,n.className="p-gui__folder-header",s.append(n),n.addEventListener("click",()=>{s.classList.toggle("p-gui__folder--closed")});let l=new g({isFolder:!0,folderOptions:{wrapper:s}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(d){d.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=d.clientX,e.position.prevY=d.clientY,document.addEventListener("pointermove",o)}function o(d){d.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+d.clientX-e.position.prevX,e.position.y=e.position.initY+d.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(d){document.removeEventListener("pointermove",o)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,o,a,d){return a+(e-t)*(d-a)/(o-t)}}return g});
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(/^.*[\\\/]/,""),d;e.name==null?d=a:d=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=d,s.append(l),s.addEventListener("click",()=>{let c=s.parentElement.querySelectorAll(".p-gui__image--selected");for(let p=0;p<c.length;p++)c[p].classList.remove("p-gui__image--selected");i&&s.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:o,text:d})}),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,d=null,r=e.obj,i=e.prop,n=typeof e.value=="number"?e.value:null,s=e.min??0,l=e.max??1,c=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),d=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),n=(l-s)/2;this.imageContainer=null;const p=document.createElement("div");p.className="p-gui__slider",p.textContent=o,this.wrapper.append(p);const u=document.createElement("input");u.className="p-gui__slider-ctrl",u.setAttribute("type","range"),u.setAttribute("min",s),u.setAttribute("max",l),u.setAttribute("step",c),u.setAttribute("value",a?r[i]:n),p.append(u);const f=document.createElement("div");f.className="p-gui__slider-value",f.textContent=String(a?r[i]:n),p.append(f),u.addEventListener("input",()=>{f.textContent=u.value,a?r[i]=u.value:typeof t=="function"&&t(parseFloat(u.value))}),a&&Object.defineProperty(r,i,{set:m=>{this.propReferences[d]=m,u.value=m,f.textContent=String(m),typeof t=="function"&&t(parseFloat(u.value))},get:()=>this.propReferences[d]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,d=null,r=e.obj,i=e.prop,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),d=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const s=document.createElement("div");s.textContent=o,s.className="p-gui__switch",this.wrapper.append(s),s.addEventListener("click",p=>{const u=p.target.childNodes[1];let f=!0;u.classList.contains("p-gui__switch-checkbox--active")&&(f=!1),u.classList.toggle("p-gui__switch-checkbox--active"),a?r[i]=f:typeof t=="function"&&t(f)});let l=(()=>a?r[i]?" p-gui__switch-checkbox--active":"":n?" p-gui__switch-checkbox--active":"")();const c=document.createElement("div");c.className="p-gui__switch-checkbox"+l,s.append(c),a&&Object.defineProperty(r,i,{set:p=>{this.propReferences[d]=p,p?c.classList.add("p-gui__switch-checkbox--active"):c.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(p)},get:()=>this.propReferences[d]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"?e.name:" ",a=!1,d=null,r=e.obj,i=e.prop,n=Array.isArray(e.values)?e.values:null,s;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 n.indexOf(r[i]);if(typeof r[i]=="number")return r[i]})(),d=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let l=document.createElement("div");l.className="p-gui__list",l.textContent=o,this.wrapper.append(l);let c=document.createElement("select");l.append(c),c.className="p-gui__list-dropdown",c.addEventListener("change",p=>{a?r[i]=p.target.value:t&&t(p.target.value)}),n&&n.forEach((p,u)=>{let f=document.createElement("option");f.setAttribute("value",p),f.textContent=p,c.append(f),s==u&&f.setAttribute("selected","")}),a&&Object.defineProperty(r,i,{set:p=>{let u,f;typeof p=="string"&&(u=n.indexOf(p),f=p),typeof p=="number"&&(u=p,f=n[p]),this.propReferences[d]=p,c.querySelector("[selected]").removeAttribute("selected"),c.querySelectorAll("option")[u].setAttribute("selected",""),typeof t=="function"&&t(f,u)},get:()=>this.propReferences[d]})}options(e,t){if(typeof e!="object")throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof e}.`);this.list(e,t)}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,d=e.x.max??1,r=e.y.min??0,i=e.y.max??1,n=e.x.obj,s=e.x.prop,l=this.propReferences.push(n[s])-1,c=e.y.obj,p=e.y.prop,u=this.propReferences.push(c[p])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const f=document.createElement("div");f.className="p-gui__vector2",f.textContent=o,this.wrapper.append(f);const m=document.createElement("div");m.className="p-gui__vector-value",m.textContent=n[s]+", "+c[p],f.append(m);const h=document.createElement("div");h.className="p-gui__vector2-area",f.append(h),h.addEventListener("click",b=>{n[s]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,d).toFixed(2)),c[p]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,i,r).toFixed(2)),t&&t(n[s],n[p])});let w=!1;h.addEventListener("pointerdown",b=>{w=!0}),h.addEventListener("pointerup",()=>{w=!1}),h.addEventListener("pointermove",b=>{w&&(n[s]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,d).toFixed(2)),c[p]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,i,r).toFixed(2)),t&&t(n[s],n[p]))});const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-x",h.append(y);const v=document.createElement("div");v.className="p-gui__vector2-line p-gui__vector2-line-y",h.append(v);const x=document.createElement("div");x.className="p-gui__vector2-dot",h.append(x),x.style.left=this._mapLinear(n[s],a,d,0,h.clientWidth)+"px",x.style.top=this._mapLinear(c[p],r,i,h.clientHeight,0)+"px",Object.defineProperty(n,s,{set:b=>{this.propReferences[l]=b,x.style.left=this._mapLinear(b,a,d,0,h.clientWidth)+"px",m.textContent=String(b)+", "+c[p]},get:()=>this.propReferences[l]}),Object.defineProperty(c,p,{set:b=>{this.propReferences[u]=b,x.style.top=this._mapLinear(b,r,i,h.clientHeight,0)+"px",m.textContent=n[s]+", "+String(b)},get:()=>this.propReferences[u]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,d=null,r=e.obj,i=e.prop,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),d=this.propReferences.push(r[i])-1,a=!0}else(i!=null&&r==null||i==null&&r==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const 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:c=>{this.propReferences[d]=c,l.value=c,typeof t=="function"&&t(c)},get:()=>this.propReferences[d]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,o=e.name||"",a=e.color||null,d=e.maxHeight||null;this.imageContainer=null;let r="p-gui__folder";this.folders.length==0&&(r+=" p-gui__folder--first"),t&&(r+=" p-gui__folder--closed");let i=a?`background-color: ${a};`:"";i+=d?`max-height: ${d}px;`:"";const 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 g({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(d){d.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=d.clientX,e.position.prevY=d.clientY,document.addEventListener("pointermove",o)}function o(d){d.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+d.clientX-e.position.prevX,e.position.y=e.position.initY+d.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(d){document.removeEventListener("pointermove",o)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,o,a,d){return a+(e-t)*(d-a)/(o-t)}}return g});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "perfect-gui",
3
- "version": "4.7.3",
3
+ "version": "4.7.5",
4
4
  "description": "Nice and simple GUI for JavaScript",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/index.js CHANGED
@@ -608,21 +608,24 @@ export default class GUI {
608
608
 
609
609
  if ( isObject ) {
610
610
  Object.defineProperty( obj, prop, {
611
- set: val => {
611
+ set: val => {
612
+ let index, value;
612
613
  if (typeof val == 'string') {
613
- value = values.indexOf(val);
614
+ index = values.indexOf(val);
615
+ value = val;
614
616
  }
615
617
  if (typeof val == 'number') {
616
- value = val;
618
+ index = val;
619
+ value = values[val];
617
620
  }
618
621
 
619
- this.propReferences[propReferenceIndex] = value;
622
+ this.propReferences[propReferenceIndex] = val;
620
623
 
621
624
  select.querySelector('[selected]').removeAttribute('selected')
622
- select.querySelectorAll('option')[value].setAttribute('selected', '');
625
+ select.querySelectorAll('option')[index].setAttribute('selected', '');
623
626
 
624
627
  if (typeof callback == 'function') {
625
- callback(value);
628
+ callback(value, index);
626
629
  }
627
630
  },
628
631
  get: () => {
package/src/styles.js CHANGED
@@ -310,7 +310,7 @@ export default function( position_type ) {
310
310
 
311
311
  .p-gui__slider {
312
312
  width: 100%;
313
- margin-bottom: 8px;
313
+ margin-bottom: 10px;
314
314
  padding: 7px;
315
315
  color: white;
316
316
  position: relative;