perfect-gui 4.8.0 → 4.8.2
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.
- package/dist/perfect-gui.mjs +93 -95
- package/dist/perfect-gui.umd.js +4 -3
- package/package.json +1 -1
- package/src/index.js +8 -10
- package/src/styles.js +1 -0
- package/vite.config.js +2 -1
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 * {
|
|
@@ -414,20 +415,20 @@ function A(y) {
|
|
|
414
415
|
`
|
|
415
416
|
);
|
|
416
417
|
}
|
|
417
|
-
class
|
|
418
|
+
class x {
|
|
418
419
|
constructor(e = {}) {
|
|
419
420
|
if (e.container ? (this.container = typeof e.container == "string" ? document.querySelector(e.container) : e.container, this.position_type = "absolute") : (this.container = document.body, this.position_type = "fixed"), this.propReferences = [], this.folders = [], e.isFolder) {
|
|
420
421
|
this._folderConstructor(e.folderOptions);
|
|
421
422
|
return;
|
|
422
423
|
}
|
|
423
|
-
this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), this instanceof
|
|
424
|
+
this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), this instanceof x && (typeof x[x.instanceCounter] != "number" ? x[x.instanceCounter] = 0 : x[x.instanceCounter]++), this.instanceId = x[x.instanceCounter], this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${A(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
|
|
424
425
|
}
|
|
425
426
|
_styleInstance() {
|
|
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
|
|
430
|
-
this.screenCorner.y == t[
|
|
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 m {
|
|
|
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
|
|
462
|
-
this.screenCorner.y == t[
|
|
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,56 +473,56 @@ class m {
|
|
|
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
|
|
476
|
-
typeof e != "string" ? typeof e == "object" && (e != null && e.hasOwnProperty("name")) ?
|
|
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 =
|
|
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
|
|
485
|
+
let o;
|
|
485
486
|
if (typeof e.path == "string")
|
|
486
|
-
|
|
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 =
|
|
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
|
|
493
|
-
e.width && (typeof e.width == "number" && (e.width += "px"),
|
|
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(" +
|
|
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
|
-
let
|
|
499
|
-
for (let c = 0; c <
|
|
500
|
-
|
|
501
|
-
i && s.classList.add("p-gui__image--selected"), typeof t == "function" && t({ path:
|
|
499
|
+
let f = s.parentElement.querySelectorAll(".p-gui__image--selected");
|
|
500
|
+
for (let c = 0; c < f.length; c++)
|
|
501
|
+
f[c].classList.remove("p-gui__image--selected");
|
|
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
|
|
508
|
-
if (
|
|
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
|
-
|
|
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.'),
|
|
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 =
|
|
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",
|
|
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] :
|
|
525
|
+
h.className = "p-gui__slider-value", h.textContent = String(a ? r[i] : n), c.append(h), d.addEventListener("input", () => {
|
|
525
526
|
h.textContent = d.value, a ? r[i] = d.value : typeof t == "function" && t(parseFloat(d.value));
|
|
526
527
|
}), a && Object.defineProperty(r, i, {
|
|
527
528
|
set: (g) => {
|
|
@@ -533,29 +534,29 @@ class m {
|
|
|
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
|
|
537
|
-
if (
|
|
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
|
-
|
|
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 =
|
|
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" : "" :
|
|
555
|
-
const
|
|
556
|
-
|
|
555
|
+
let l = (() => a ? r[i] ? " p-gui__switch-checkbox--active" : "" : n ? " p-gui__switch-checkbox--active" : "")();
|
|
556
|
+
const f = document.createElement("div");
|
|
557
|
+
f.className = "p-gui__switch-checkbox" + l, s.append(f), a && Object.defineProperty(r, i, {
|
|
557
558
|
set: (c) => {
|
|
558
|
-
this.propReferences[p] = c, c ?
|
|
559
|
+
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);
|
|
559
560
|
},
|
|
560
561
|
get: () => this.propReferences[p]
|
|
561
562
|
});
|
|
@@ -563,13 +564,13 @@ class m {
|
|
|
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
|
|
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 (!
|
|
570
|
+
if (!n)
|
|
570
571
|
return null;
|
|
571
572
|
if (typeof e.value == "string")
|
|
572
|
-
return
|
|
573
|
+
return n.indexOf(e.value);
|
|
573
574
|
if (typeof e.value == "number")
|
|
574
575
|
return e.value;
|
|
575
576
|
})();
|
|
@@ -579,73 +580,70 @@ class m {
|
|
|
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 (!
|
|
583
|
+
if (!n)
|
|
583
584
|
return null;
|
|
584
585
|
if (typeof r[i] == "string")
|
|
585
|
-
return l ?
|
|
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 ?
|
|
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
|
-
let
|
|
593
|
-
|
|
593
|
+
let f = document.createElement("div");
|
|
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
|
-
}),
|
|
598
|
-
const g = l ? d.name : d,
|
|
599
|
-
let
|
|
600
|
-
|
|
598
|
+
}), n && n.forEach((d, h) => {
|
|
599
|
+
const g = l ? d.name : d, u = l ? d.value : d;
|
|
600
|
+
let m = document.createElement("option");
|
|
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
|
-
let h, g,
|
|
604
|
-
l ? (
|
|
604
|
+
let h, g, u;
|
|
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;
|
|
606
|
+
const m = c.querySelector("[selected]");
|
|
607
|
+
m && m.removeAttribute("selected"), c.querySelectorAll("option")[h].setAttribute("selected", ""), typeof t == "function" && t(l ? u : g, h);
|
|
605
608
|
},
|
|
606
609
|
get: () => this.propReferences[p]
|
|
607
610
|
});
|
|
608
611
|
}
|
|
609
|
-
options(e, t) {
|
|
610
|
-
if (typeof e != "object")
|
|
611
|
-
throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof e}.`);
|
|
612
|
-
this.list(e, t);
|
|
613
|
-
}
|
|
614
612
|
vector2(e = {}, t) {
|
|
615
613
|
if (typeof e != "object")
|
|
616
614
|
throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);
|
|
617
|
-
let
|
|
618
|
-
const a = e.x.min ?? 0, p = e.x.max ?? 1, r = e.y.min ?? 0, i = e.y.max ?? 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;
|
|
619
617
|
t = typeof t == "function" ? t : null, this.imageContainer = null;
|
|
620
618
|
const h = document.createElement("div");
|
|
621
|
-
h.className = "p-gui__vector2", h.textContent =
|
|
619
|
+
h.className = "p-gui__vector2", h.textContent = o, this.wrapper.append(h);
|
|
622
620
|
const g = document.createElement("div");
|
|
623
|
-
g.className = "p-gui__vector-value", g.textContent =
|
|
624
|
-
const
|
|
625
|
-
|
|
626
|
-
|
|
621
|
+
g.className = "p-gui__vector-value", g.textContent = n[s] + ", " + f[c], h.append(g);
|
|
622
|
+
const u = document.createElement("div");
|
|
623
|
+
u.className = "p-gui__vector2-area", h.append(u), u.addEventListener("click", (b) => {
|
|
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]);
|
|
627
625
|
});
|
|
628
|
-
let
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
}),
|
|
632
|
-
|
|
633
|
-
}),
|
|
634
|
-
|
|
626
|
+
let m = !1;
|
|
627
|
+
u.addEventListener("pointerdown", (b) => {
|
|
628
|
+
m = !0;
|
|
629
|
+
}), u.addEventListener("pointerup", () => {
|
|
630
|
+
m = !1;
|
|
631
|
+
}), u.addEventListener("pointermove", (b) => {
|
|
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]));
|
|
635
633
|
});
|
|
636
|
-
const w = document.createElement("div");
|
|
637
|
-
w.className = "p-gui__vector2-line p-gui__vector2-line-x", f.append(w);
|
|
638
634
|
const v = document.createElement("div");
|
|
639
|
-
v.className = "p-gui__vector2-line p-gui__vector2-line-
|
|
635
|
+
v.className = "p-gui__vector2-line p-gui__vector2-line-x", u.append(v);
|
|
636
|
+
const w = document.createElement("div");
|
|
637
|
+
w.className = "p-gui__vector2-line p-gui__vector2-line-y", u.append(w);
|
|
640
638
|
const _ = document.createElement("div");
|
|
641
|
-
_.className = "p-gui__vector2-dot",
|
|
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, {
|
|
642
640
|
set: (b) => {
|
|
643
|
-
this.propReferences[l] = b, _.style.left = this._mapLinear(b, a, p, 0,
|
|
641
|
+
this.propReferences[l] = b, _.style.left = this._mapLinear(b, a, p, 0, u.clientWidth) + "px", g.textContent = String(b) + ", " + f[c];
|
|
644
642
|
},
|
|
645
643
|
get: () => this.propReferences[l]
|
|
646
|
-
}), Object.defineProperty(
|
|
644
|
+
}), Object.defineProperty(f, c, {
|
|
647
645
|
set: (b) => {
|
|
648
|
-
this.propReferences[d] = b, _.style.top = this._mapLinear(b, r, i,
|
|
646
|
+
this.propReferences[d] = b, _.style.top = this._mapLinear(b, r, i, u.clientHeight, 0) + "px", g.textContent = n[s] + ", " + String(b);
|
|
649
647
|
},
|
|
650
648
|
get: () => this.propReferences[d]
|
|
651
649
|
});
|
|
@@ -653,45 +651,45 @@ class m {
|
|
|
653
651
|
color(e = {}, t) {
|
|
654
652
|
if (typeof e != "object")
|
|
655
653
|
throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);
|
|
656
|
-
let
|
|
657
|
-
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}".`) :
|
|
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)
|
|
658
656
|
(i != null || r != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
|
|
659
657
|
else if (i != null && r != null) {
|
|
660
658
|
if (typeof i != "string")
|
|
661
659
|
throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof i}.`);
|
|
662
660
|
if (typeof r != "object")
|
|
663
661
|
throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof r}.`);
|
|
664
|
-
|
|
662
|
+
o == " " && (o = i), p = this.propReferences.push(r[i]) - 1, a = !0;
|
|
665
663
|
} else
|
|
666
664
|
(i != null && r == null || i == null && r == null) && console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');
|
|
667
665
|
this.imageContainer = null;
|
|
668
666
|
const s = document.createElement("div");
|
|
669
|
-
s.className = "p-gui__color", s.textContent =
|
|
667
|
+
s.className = "p-gui__color", s.textContent = o, this.wrapper.append(s);
|
|
670
668
|
const l = document.createElement("input");
|
|
671
|
-
l.className = "p-gui__color-picker", l.setAttribute("type", "color"), l.value =
|
|
669
|
+
l.className = "p-gui__color-picker", l.setAttribute("type", "color"), l.value = n, s.append(l), typeof t == "function" && l.addEventListener("input", () => {
|
|
672
670
|
a ? r[i] = l.value : typeof t == "function" && t(l.value);
|
|
673
671
|
}), a && Object.defineProperty(r, i, {
|
|
674
|
-
set: (
|
|
675
|
-
this.propReferences[p] =
|
|
672
|
+
set: (f) => {
|
|
673
|
+
this.propReferences[p] = f, l.value = f, typeof t == "function" && t(f);
|
|
676
674
|
},
|
|
677
675
|
get: () => this.propReferences[p]
|
|
678
676
|
});
|
|
679
677
|
}
|
|
680
678
|
folder(e = {}) {
|
|
681
|
-
let t = typeof e.closed == "boolean" ? e.closed : !1,
|
|
679
|
+
let t = typeof e.closed == "boolean" ? e.closed : !1, o = e.name || "", a = e.color || null, p = e.maxHeight || null;
|
|
682
680
|
this.imageContainer = null;
|
|
683
681
|
let r = "p-gui__folder";
|
|
684
682
|
this.folders.length == 0 && (r += " p-gui__folder--first"), t && (r += " p-gui__folder--closed");
|
|
685
683
|
let i = a ? `background-color: ${a};` : "";
|
|
686
684
|
i += p ? `max-height: ${p}px;` : "";
|
|
687
|
-
const
|
|
688
|
-
|
|
685
|
+
const n = document.createElement("div");
|
|
686
|
+
n.className = r, n.style = i, this.wrapper.append(n);
|
|
689
687
|
const s = document.createElement("div");
|
|
690
|
-
s.innerHTML = `<span class="p-gui__folder-arrow"></span>${
|
|
691
|
-
|
|
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");
|
|
692
690
|
});
|
|
693
|
-
let l = new
|
|
694
|
-
wrapper:
|
|
691
|
+
let l = new x({ isFolder: !0, folderOptions: {
|
|
692
|
+
wrapper: n
|
|
695
693
|
} });
|
|
696
694
|
return this.folders.push(l), l;
|
|
697
695
|
}
|
|
@@ -699,13 +697,13 @@ class m {
|
|
|
699
697
|
var e = this;
|
|
700
698
|
this.header.addEventListener("pointerdown", t), this.header.addEventListener("pointerup", a);
|
|
701
699
|
function t(p) {
|
|
702
|
-
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",
|
|
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);
|
|
703
701
|
}
|
|
704
|
-
function
|
|
702
|
+
function o(p) {
|
|
705
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)";
|
|
706
704
|
}
|
|
707
705
|
function a(p) {
|
|
708
|
-
document.removeEventListener("pointermove",
|
|
706
|
+
document.removeEventListener("pointermove", o);
|
|
709
707
|
}
|
|
710
708
|
}
|
|
711
709
|
toggleClose() {
|
|
@@ -714,10 +712,10 @@ class m {
|
|
|
714
712
|
kill() {
|
|
715
713
|
this.wrapper.remove();
|
|
716
714
|
}
|
|
717
|
-
_mapLinear(e, t,
|
|
718
|
-
return a + (e - t) * (p - a) / (
|
|
715
|
+
_mapLinear(e, t, o, a, p) {
|
|
716
|
+
return a + (e - t) * (p - a) / (o - t);
|
|
719
717
|
}
|
|
720
718
|
}
|
|
721
719
|
export {
|
|
722
|
-
|
|
720
|
+
x as default
|
|
723
721
|
};
|
package/dist/perfect-gui.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(v,b){typeof exports=="object"&&typeof module<"u"?module.exports=b():typeof define=="function"&&define.amd?define(b):(v=typeof globalThis<"u"?globalThis:v||self,v["Perfect GUI"]=b())})(this,function(){"use strict";function v(A){return`
|
|
2
2
|
.p-gui {
|
|
3
3
|
--main-border-radius: 5px;
|
|
4
4
|
--color-bg: #121212;
|
|
@@ -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 * {
|
|
@@ -408,10 +409,10 @@
|
|
|
408
409
|
.p-gui__folder--closed .p-gui__folder-arrow {
|
|
409
410
|
transform: rotate(0deg);
|
|
410
411
|
}
|
|
411
|
-
`}class b{constructor(e={}){if(e.container?(this.container=typeof e.container=="string"?document.querySelector(e.container):e.container,this.position_type="absolute"):(this.container=document.body,this.position_type="fixed"),this.propReferences=[],this.folders=[],e.isFolder){this._folderConstructor(e.folderOptions);return}this.name=e!=null&&typeof e.name=="string"?e.name:"",this.backgroundColor=e.color||null,this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),e.maxHeight&&(this.initMaxHeight=e.maxHeight,this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.screenCorner=this._parseScreenCorner(e.position),this instanceof b&&(typeof b[b.instanceCounter]!="number"?b[b.instanceCounter]=0:b[b.instanceCounter]++),this.instanceId=b[b.instanceCounter],this.wrapperWidth=e.width||290,this.stylesheet=document.createElement("style"),this.stylesheet.setAttribute("type","text/css"),this.stylesheet.setAttribute("id","lm-gui-stylesheet"),document.head.append(this.stylesheet),this.instanceId==0&&this._addStyles(`${
|
|
412
|
+
`}class b{constructor(e={}){if(e.container?(this.container=typeof e.container=="string"?document.querySelector(e.container):e.container,this.position_type="absolute"):(this.container=document.body,this.position_type="fixed"),this.propReferences=[],this.folders=[],e.isFolder){this._folderConstructor(e.folderOptions);return}this.name=e!=null&&typeof e.name=="string"?e.name:"",this.backgroundColor=e.color||null,this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),e.maxHeight&&(this.initMaxHeight=e.maxHeight,this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.screenCorner=this._parseScreenCorner(e.position),this instanceof b&&(typeof b[b.instanceCounter]!="number"?b[b.instanceCounter]=0:b[b.instanceCounter]++),this.instanceId=b[b.instanceCounter],this.wrapperWidth=e.width||290,this.stylesheet=document.createElement("style"),this.stylesheet.setAttribute("type","text/css"),this.stylesheet.setAttribute("id","lm-gui-stylesheet"),document.head.append(this.stylesheet),this.instanceId==0&&this._addStyles(`${v(this.position_type)}`),this._styleInstance(),this._addWrapper(),this.wrapper.setAttribute("data-corner-x",this.screenCorner.x),this.wrapper.setAttribute("data-corner-y",this.screenCorner.y),e.autoRepositioning!=!1&&window.addEventListener("resize",this._handleResize.bind(this)),this._handleResize(),this.hasBeenDragged=!1,e.draggable==!0&&this._makeDraggable(),this.closed=!1,e.closed&&this.toggleClose()}_styleInstance(){let e=this._getScrollbarWidth(this.container);if(this.screenCorner.x=="left"?this.xOffset=0:this.xOffset=this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(".p-gui");for(let o=0;o<t.length;o++)this.screenCorner.y==t[o].dataset.cornerY&&(this.screenCorner.x=="left"&&t[o].dataset.cornerX=="left"?this.xOffset+=t[o].offsetWidth:this.screenCorner.x=="right"&&t[o].dataset.cornerX=="right"&&(this.xOffset-=t[o].offsetWidth))}this.yOffset=0,this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this._addStyles(`#p-gui-${this.instanceId} {
|
|
412
413
|
width: ${this.wrapperWidth}px;
|
|
413
414
|
max-height: ${this.maxHeight}px;
|
|
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 n=0;n<t.length&&!(parseInt(t[n].id.replace("p-gui-",""))>this.instanceId);n++)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))}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 n="";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=()=>{});const a=document.createElement("div");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))}image(e={},t){if(typeof e!="object")throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);let n;if(typeof e.path=="string")n=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=n.replace(/^.*[\\\/]/,""),p;e.name==null?p=a:p=typeof e.name=="string"&&e.name||" ";const r=e.selected===!0,i=e.selectionBorder!==!1;let o="";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));const s=document.createElement("div");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");const l=document.createElement("div");return l.className="p-gui__image-text",l.textContent=p,s.append(l),s.addEventListener("click",()=>{let u=s.parentElement.querySelectorAll(".p-gui__image--selected");for(let c=0;c<u.length;c++)u[c].classList.remove("p-gui__image--selected");i&&s.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:n,text:p})}),s}slider(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);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,u=e.step||(l-s)/100;if(o!==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}.`);n==" "&&(n=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.'),o=(l-s)/2;this.imageContainer=null;const c=document.createElement("div");c.className="p-gui__slider",c.textContent=n,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",u),d.setAttribute("value",a?r[i]:o),c.append(d);const h=document.createElement("div");h.className="p-gui__slider-value",h.textContent=String(a?r[i]:o),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 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;if(o!==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}.`);n==" "&&(n=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=n,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":"":o?" p-gui__switch-checkbox--active":"")();const u=document.createElement("div");u.className="p-gui__switch-checkbox"+l,s.append(u),a&&Object.defineProperty(r,i,{set:c=>{this.propReferences[p]=c,c?u.classList.add("p-gui__switch-checkbox--active"):u.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 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";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(!o)return null;if(typeof e.value=="string")return o.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(!o)return null;if(typeof r[i]=="string")return l?o.find(d=>d.value===r[i]).value:o.indexOf(r[i]);if(typeof r[i]=="number")return l?o.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 u=document.createElement("div");u.className="p-gui__list",u.textContent=n,this.wrapper.append(u);let c=document.createElement("select");u.append(c),c.className="p-gui__list-dropdown",c.addEventListener("change",d=>{a?r[i]=d.target.value:t&&t(d.target.value)}),o&&o.forEach((d,h)=>{const g=l?d.name:d,f=l?d.value:d;let x=document.createElement("option");x.setAttribute("value",f),x.textContent=g,c.append(x),(!l&&s==h||l&&s==f)&&x.setAttribute("selected","")}),a&&Object.defineProperty(r,i,{set:d=>{let h,g,f;l?(f=o.find(x=>x.value==d),g=f.value,h=o.indexOf(f)):(typeof d=="string"&&(h=o.indexOf(d),g=d),typeof d=="number"&&(h=d,g=o[d])),this.propReferences[p]=l?g:d,c.querySelector("[selected]").removeAttribute("selected"),c.querySelectorAll("option")[h].setAttribute("selected",""),typeof t=="function"&&t(l?f: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 n=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,o=e.x.obj,s=e.x.prop,l=this.propReferences.push(o[s])-1,u=e.y.obj,c=e.y.prop,d=this.propReferences.push(u[c])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const h=document.createElement("div");h.className="p-gui__vector2",h.textContent=n,this.wrapper.append(h);const g=document.createElement("div");g.className="p-gui__vector-value",g.textContent=o[s]+", "+u[c],h.append(g);const f=document.createElement("div");f.className="p-gui__vector2-area",h.append(f),f.addEventListener("click",m=>{o[s]=parseFloat(this._mapLinear(m.offsetX,0,f.clientWidth,a,p).toFixed(2)),u[c]=parseFloat(this._mapLinear(m.offsetY,0,f.clientHeight,i,r).toFixed(2)),t&&t(o[s],o[c])});let x=!1;f.addEventListener("pointerdown",m=>{x=!0}),f.addEventListener("pointerup",()=>{x=!1}),f.addEventListener("pointermove",m=>{x&&(o[s]=parseFloat(this._mapLinear(m.offsetX,0,f.clientWidth,a,p).toFixed(2)),u[c]=parseFloat(this._mapLinear(m.offsetY,0,f.clientHeight,i,r).toFixed(2)),t&&t(o[s],o[c]))});const v=document.createElement("div");v.className="p-gui__vector2-line p-gui__vector2-line-x",f.append(v);const y=document.createElement("div");y.className="p-gui__vector2-line p-gui__vector2-line-y",f.append(y);const _=document.createElement("div");_.className="p-gui__vector2-dot",f.append(_),_.style.left=this._mapLinear(o[s],a,p,0,f.clientWidth)+"px",_.style.top=this._mapLinear(u[c],r,i,f.clientHeight,0)+"px",Object.defineProperty(o,s,{set:m=>{this.propReferences[l]=m,_.style.left=this._mapLinear(m,a,p,0,f.clientWidth)+"px",g.textContent=String(m)+", "+u[c]},get:()=>this.propReferences[l]}),Object.defineProperty(u,c,{set:m=>{this.propReferences[d]=m,_.style.top=this._mapLinear(m,r,i,f.clientHeight,0)+"px",g.textContent=o[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 n=typeof e.name=="string"&&e.name||" ",a=!1,p=null,r=e.obj,i=e.prop,o;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)(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}.`);n==" "&&(n=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=n,this.wrapper.append(s);const l=document.createElement("input");l.className="p-gui__color-picker",l.setAttribute("type","color"),l.value=o,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:u=>{this.propReferences[p]=u,l.value=u,typeof t=="function"&&t(u)},get:()=>this.propReferences[p]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,n=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 o=document.createElement("div");o.className=r,o.style=i,this.wrapper.append(o);const s=document.createElement("div");s.innerHTML=`<span class="p-gui__folder-arrow"></span>${n}`,s.className="p-gui__folder-header",o.append(s),s.addEventListener("click",()=>{o.classList.toggle("p-gui__folder--closed")});let l=new b({isFolder:!0,folderOptions:{wrapper:o}});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",n)}function n(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",n)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,n,a,p){return a+(e-t)*(p-a)/(n-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]=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
package/src/index.js
CHANGED
|
@@ -625,8 +625,10 @@ export default class GUI {
|
|
|
625
625
|
set: val => {
|
|
626
626
|
let newIndex, newValue, newObj;
|
|
627
627
|
if (objectValues) {
|
|
628
|
-
newObj = values.find(item =>
|
|
629
|
-
|
|
628
|
+
newObj = values.find(item => {
|
|
629
|
+
return item.value == val;
|
|
630
|
+
});
|
|
631
|
+
newValue = newObj?.value || values[0].value;
|
|
630
632
|
newIndex = values.indexOf(newObj);
|
|
631
633
|
} else {
|
|
632
634
|
if (typeof val == 'string') {
|
|
@@ -641,7 +643,10 @@ export default class GUI {
|
|
|
641
643
|
|
|
642
644
|
this.propReferences[propReferenceIndex] = objectValues ? newValue : val;
|
|
643
645
|
|
|
644
|
-
select.querySelector('[selected]')
|
|
646
|
+
const previousSelection = select.querySelector('[selected]');
|
|
647
|
+
if ( previousSelection ) {
|
|
648
|
+
previousSelection.removeAttribute('selected')
|
|
649
|
+
}
|
|
645
650
|
select.querySelectorAll('option')[newIndex].setAttribute('selected', '');
|
|
646
651
|
|
|
647
652
|
if (typeof callback == 'function') {
|
|
@@ -659,13 +664,6 @@ export default class GUI {
|
|
|
659
664
|
}
|
|
660
665
|
}
|
|
661
666
|
|
|
662
|
-
options(params, callback) {
|
|
663
|
-
if (typeof params != 'object') {
|
|
664
|
-
throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof params}.`);
|
|
665
|
-
}
|
|
666
|
-
this.list(params, callback);
|
|
667
|
-
}
|
|
668
|
-
|
|
669
667
|
vector2( params = {}, callback) {
|
|
670
668
|
if (typeof params != 'object') {
|
|
671
669
|
throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof params}.`);
|
package/src/styles.js
CHANGED