perfect-gui 5.0.2 → 5.1.0

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.js +262 -205
  2. package/package.json +1 -1
  3. package/src/index.js +119 -1
  4. package/src/styles/_tabs.css +66 -0
  5. package/src/styles/styles.js +7 -2
package/dist/perfect-gui.js CHANGED
@@ -1,12 +1,12 @@
1
- class $ {
1
+ class W {
2
2
  constructor(t, e = {}) {
3
3
  if (this.parent = t, this.callback = null, typeof e != "object")
4
4
  throw Error(
5
5
  `[GUI] button() first parameter must be an object. Received: ${typeof e}.`
6
6
  );
7
7
  let r = e.label || " ";
8
- const c = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? r : null, i = document.createElement("div");
9
- i.className = "p-gui__button", i.textContent = r, c && i.setAttribute("title", c), i.addEventListener("click", () => {
8
+ const d = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? r : null, i = document.createElement("div");
9
+ i.className = "p-gui__button", i.textContent = r, d && i.setAttribute("title", d), i.addEventListener("click", () => {
10
10
  this.callback && this.callback(), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
11
11
  }), typeof e.color == "string" && (i.style.setProperty("--color-accent", e.color), i.style.setProperty(
12
12
  "--color-accent-hover",
@@ -18,65 +18,65 @@ class $ {
18
18
  }
19
19
  }
20
20
  class Y {
21
- constructor(t, e, r, c) {
21
+ constructor(t, e, r, d) {
22
22
  this.parent = t, this.propReferences = [];
23
- let i = {}, l = null;
23
+ let i = {}, p = null;
24
24
  if (e && typeof e == "object" && typeof r == "string")
25
- this.obj = e, this.prop = r, this.isObject = !0, i = c || {}, this.callback = null;
25
+ this.obj = e, this.prop = r, this.isObject = !0, i = d || {}, this.callback = null;
26
26
  else if (e && typeof e == "object")
27
- this.isObject = !1, i = e, l = typeof i.value == "number" ? i.value : null;
27
+ this.isObject = !1, i = e, p = typeof i.value == "number" ? i.value : null;
28
28
  else
29
29
  throw Error("[GUI] slider() invalid parameters.");
30
- let s = typeof i.label == "string" && i.label || " ";
31
- this.isObject && s == " " && (s = this.prop), this.min = i.min ?? 0, this.max = i.max ?? 1, this.step = i.step || (this.max - this.min) / 100, this.decimals = this.parent._countDecimals(this.step);
30
+ let l = typeof i.label == "string" && i.label || " ";
31
+ this.isObject && l == " " && (l = this.prop), this.min = i.min ?? 0, this.max = i.max ?? 1, this.step = i.step || (this.max - this.min) / 100, this.decimals = this.parent._countDecimals(this.step);
32
32
  let o = null;
33
- this.isObject ? o = this.propReferences.push(this.obj[this.prop]) - 1 : l === null && (l = (this.max - this.min) / 2);
34
- const n = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? s : null, a = document.createElement("div");
35
- a.className = "p-gui__slider", n && a.setAttribute("title", n), this.parent.wrapper.append(a), this.element = a;
36
- const u = document.createElement("div");
37
- u.className = "p-gui__slider-name", u.textContent = s, a.append(u), this.ctrlDiv = document.createElement("div"), this.ctrlDiv.className = "p-gui__slider-ctrl", this.ctrlDiv.setAttribute("type", "range"), this.ctrlDiv.setAttribute("min", this.min), this.ctrlDiv.setAttribute("max", this.max), a.append(this.ctrlDiv);
38
- const d = document.createElement("div");
39
- d.className = "p-gui__slider-bar", this.ctrlDiv.append(d), this.handle = document.createElement("div"), this.handle.className = "p-gui__slider-handle", this.ctrlDiv.append(this.handle), this.filling = document.createElement("div"), this.filling.className = "p-gui__slider-filling", d.append(this.filling), this.valueInput = document.createElement("input"), this.valueInput.className = "p-gui__slider-value", this.valueInput.value = this.isObject ? this.obj[this.prop] : l, a.append(this.valueInput), setTimeout(() => {
40
- const p = this.handle.offsetWidth;
33
+ this.isObject ? o = this.propReferences.push(this.obj[this.prop]) - 1 : p === null && (p = (this.max - this.min) / 2);
34
+ const s = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? l : null, a = document.createElement("div");
35
+ a.className = "p-gui__slider", s && a.setAttribute("title", s), this.parent.wrapper.append(a), this.element = a;
36
+ const h = document.createElement("div");
37
+ h.className = "p-gui__slider-name", h.textContent = l, a.append(h), this.ctrlDiv = document.createElement("div"), this.ctrlDiv.className = "p-gui__slider-ctrl", this.ctrlDiv.setAttribute("type", "range"), this.ctrlDiv.setAttribute("min", this.min), this.ctrlDiv.setAttribute("max", this.max), a.append(this.ctrlDiv);
38
+ const c = document.createElement("div");
39
+ c.className = "p-gui__slider-bar", this.ctrlDiv.append(c), this.handle = document.createElement("div"), this.handle.className = "p-gui__slider-handle", this.ctrlDiv.append(this.handle), this.filling = document.createElement("div"), this.filling.className = "p-gui__slider-filling", c.append(this.filling), this.valueInput = document.createElement("input"), this.valueInput.className = "p-gui__slider-value", this.valueInput.value = this.isObject ? this.obj[this.prop] : p, a.append(this.valueInput), setTimeout(() => {
40
+ const n = this.handle.offsetWidth;
41
41
  this.handle.position = this._mapLinear(
42
42
  this.valueInput.value,
43
43
  this.min,
44
44
  this.max,
45
- p / 2,
46
- 88 - p / 2
45
+ n / 2,
46
+ 88 - n / 2
47
47
  ), this.handle.position = Math.min(
48
48
  this.handle.position,
49
- 88 - p / 2
49
+ 88 - n / 2
50
50
  ), this.handle.position = Math.max(
51
51
  this.handle.position,
52
- p / 2
52
+ n / 2
53
53
  ), this.handle.style.transform = `translate(-50%, -50%) translateX(${this.handle.position}px)`, this.filling.style.width = `${this.handle.position}px`;
54
54
  }, 0), this.valueInput.addEventListener("change", () => {
55
55
  this._updateHandlePositionFromValue(), this._triggerCallbacks();
56
- }), this.ctrlDiv.addEventListener("pointerdown", (p) => {
57
- this.ctrlDiv.pointerDown = !0, this.ctrlDiv.prevPosition = p.clientX, this._updateHandlePositionFromPointer(p, !0);
58
- }), window.addEventListener("pointerup", (p) => {
56
+ }), this.ctrlDiv.addEventListener("pointerdown", (n) => {
57
+ this.ctrlDiv.pointerDown = !0, this.ctrlDiv.prevPosition = n.clientX, this._updateHandlePositionFromPointer(n, !0);
58
+ }), window.addEventListener("pointerup", (n) => {
59
59
  this.ctrlDiv.pointerDown = !1;
60
- }), window.addEventListener("pointermove", (p) => {
61
- this.ctrlDiv.pointerDown && (this.ctrlDiv.pointerDelta = p.clientX - this.ctrlDiv.prevPosition, this._updateHandlePositionFromPointer(p));
60
+ }), window.addEventListener("pointermove", (n) => {
61
+ this.ctrlDiv.pointerDown && (this.ctrlDiv.pointerDelta = n.clientX - this.ctrlDiv.prevPosition, this._updateHandlePositionFromPointer(n));
62
62
  }), this.isObject && Object.defineProperty(this.obj, this.prop, {
63
- set: (p) => {
64
- this.propReferences[o] = p, this.valueInput.value = p, this._updateHandlePositionFromValue(), this.callback && this.callback(parseFloat(this.valueInput.value));
63
+ set: (n) => {
64
+ this.propReferences[o] = n, this.valueInput.value = n, this._updateHandlePositionFromValue(), this.callback && this.callback(parseFloat(this.valueInput.value));
65
65
  },
66
66
  get: () => this.propReferences[o]
67
67
  });
68
68
  }
69
69
  _updateHandlePositionFromPointer(t, e = !1) {
70
- const r = this.ctrlDiv.offsetWidth, c = this.handle.offsetWidth, i = t.clientX - this.ctrlDiv.prevPosition, l = parseFloat(this.valueInput.value);
71
- let s;
72
- e ? s = t.offsetX : s = this.handle.position + i, s = Math.max(
73
- c / 2,
74
- Math.min(s, r - c / 2)
70
+ const r = this.ctrlDiv.offsetWidth, d = this.handle.offsetWidth, i = t.clientX - this.ctrlDiv.prevPosition, p = parseFloat(this.valueInput.value);
71
+ let l;
72
+ e ? l = t.offsetX : l = this.handle.position + i, l = Math.max(
73
+ d / 2,
74
+ Math.min(l, r - d / 2)
75
75
  );
76
- let o = this.min + (this.max - this.min) * (s - c / 2) / (r - c);
77
- o > l ? o = this._quantizeFloor(o, this.step) : o = this._quantizeCeil(o, this.step), o = parseFloat(o.toFixed(9));
78
- const n = parseFloat((l + this.step).toFixed(9)), a = parseFloat((l - this.step).toFixed(9));
79
- (o >= n || o <= a) && (o = o.toFixed(this.decimals), this.valueInput.value = o, this.ctrlDiv.prevPosition = t.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${s}px)`, this.handle.position = s, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks());
76
+ let o = this.min + (this.max - this.min) * (l - d / 2) / (r - d);
77
+ o > p ? o = this._quantizeFloor(o, this.step) : o = this._quantizeCeil(o, this.step), o = parseFloat(o.toFixed(9));
78
+ const s = parseFloat((p + this.step).toFixed(9)), a = parseFloat((p - this.step).toFixed(9));
79
+ (o >= s || o <= a) && (o = o.toFixed(this.decimals), this.valueInput.value = o, this.ctrlDiv.prevPosition = t.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${l}px)`, this.handle.position = l, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks());
80
80
  }
81
81
  _updateHandlePositionFromValue() {
82
82
  const t = this.ctrlDiv.offsetWidth, e = this.handle.offsetWidth;
@@ -95,8 +95,8 @@ class Y {
95
95
  _triggerCallbacks() {
96
96
  this.isObject ? this.obj[this.prop] = parseFloat(this.valueInput.value) : this.callback && this.callback(parseFloat(this.valueInput.value)), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
97
97
  }
98
- _mapLinear(t, e, r, c, i) {
99
- return c + (t - e) * (i - c) / (r - e);
98
+ _mapLinear(t, e, r, d, i) {
99
+ return d + (t - e) * (i - d) / (r - e);
100
100
  }
101
101
  _quantize(t, e) {
102
102
  return e * Math.round(t / e);
@@ -122,20 +122,20 @@ class z {
122
122
  r = e.path;
123
123
  else
124
124
  throw typeof e.path == null ? Error("[GUI] image() path must be provided.") : Error("[GUI] image() path must be a string.");
125
- let c = r.replace(/^.*[\\\/]/, ""), i;
126
- e.label == null ? i = c : i = typeof e.label == "string" && e.label || " ";
127
- const l = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null, s = e.selected === !0, o = e.selectionBorder !== !1;
128
- let n = "";
129
- 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}; `);
125
+ let d = r.replace(/^.*[\\\/]/, ""), i;
126
+ e.label == null ? i = d : i = typeof e.label == "string" && e.label || " ";
127
+ const p = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null, l = e.selected === !0, o = e.selectionBorder !== !1;
128
+ let s = "";
129
+ 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}; `);
130
130
  const a = document.createElement("div");
131
- a.className = "p-gui__image", a.style = "background-image: url(" + r + "); " + n, l && a.setAttribute("title", l), this.parent.imageContainer.append(a), this.element = a, s && o && a.classList.add("p-gui__image--selected");
132
- const u = document.createElement("div");
133
- u.className = "p-gui__image-text", u.textContent = i, a.append(u), a.addEventListener("click", () => {
134
- let d = a.parentElement.querySelectorAll(
131
+ a.className = "p-gui__image", a.style = "background-image: url(" + r + "); " + s, p && a.setAttribute("title", p), this.parent.imageContainer.append(a), this.element = a, l && o && a.classList.add("p-gui__image--selected");
132
+ const h = document.createElement("div");
133
+ h.className = "p-gui__image-text", h.textContent = i, a.append(h), a.addEventListener("click", () => {
134
+ let c = a.parentElement.querySelectorAll(
135
135
  ".p-gui__image--selected"
136
136
  );
137
- for (let p = 0; p < d.length; p++)
138
- d[p].classList.remove("p-gui__image--selected");
137
+ for (let n = 0; n < c.length; n++)
138
+ c[n].classList.remove("p-gui__image--selected");
139
139
  o && a.classList.add("p-gui__image--selected"), typeof this.callback == "function" && this.callback({ path: r, text: i }), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
140
140
  });
141
141
  }
@@ -144,229 +144,229 @@ class z {
144
144
  }
145
145
  }
146
146
  class B {
147
- constructor(t, e, r, c) {
147
+ constructor(t, e, r, d) {
148
148
  this.parent = t, this.callback = null;
149
- let i = {}, l = null, s = !1, o, n;
149
+ let i = {}, p = null, l = !1, o, s;
150
150
  if (e && typeof e == "object" && typeof r == "string")
151
- o = e, n = r, s = !0, i = c || {};
151
+ o = e, s = r, l = !0, i = d || {};
152
152
  else if (e && typeof e == "object")
153
- s = !1, i = e, l = typeof i.value == "boolean" ? i.value : null;
153
+ l = !1, i = e, p = typeof i.value == "boolean" ? i.value : null;
154
154
  else
155
155
  throw Error("[GUI] toggle() invalid parameters.");
156
- let a = typeof i.label == "string" && i.label || " ", u = null;
157
- s && a == " " && (a = n), s && (u = this.parent.propReferences.push(o[n]) - 1);
158
- const d = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? a : null, p = document.createElement("div");
159
- p.textContent = a, p.className = "p-gui__toggle", d && p.setAttribute("title", d), this.parent.wrapper.append(p), this.element = p, p.addEventListener("click", (b) => {
160
- const h = b.target.childNodes[1];
161
- let _ = !0;
162
- h.classList.contains("p-gui__toggle-checkbox--active") && (_ = !1), h.classList.toggle("p-gui__toggle-checkbox--active"), s ? o[n] = _ : typeof this.callback == "function" && this.callback(_), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
156
+ let a = typeof i.label == "string" && i.label || " ", h = null;
157
+ l && a == " " && (a = s), l && (h = this.parent.propReferences.push(o[s]) - 1);
158
+ const c = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? a : null, n = document.createElement("div");
159
+ n.textContent = a, n.className = "p-gui__toggle", c && n.setAttribute("title", c), this.parent.wrapper.append(n), this.element = n, n.addEventListener("click", (f) => {
160
+ const u = f.target.childNodes[1];
161
+ let m = !0;
162
+ u.classList.contains("p-gui__toggle-checkbox--active") && (m = !1), u.classList.toggle("p-gui__toggle-checkbox--active"), l ? o[s] = m : typeof this.callback == "function" && this.callback(m), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
163
163
  });
164
- let g = s ? o[n] ? " p-gui__toggle-checkbox--active" : "" : l ? " p-gui__toggle-checkbox--active" : "";
165
- const f = document.createElement("div");
166
- f.className = "p-gui__toggle-checkbox" + g, p.append(f), s && Object.defineProperty(o, n, {
167
- set: (b) => {
168
- this.parent.propReferences[u] = b, b ? f.classList.add(
164
+ let g = l ? o[s] ? " p-gui__toggle-checkbox--active" : "" : p ? " p-gui__toggle-checkbox--active" : "";
165
+ const b = document.createElement("div");
166
+ b.className = "p-gui__toggle-checkbox" + g, n.append(b), l && Object.defineProperty(o, s, {
167
+ set: (f) => {
168
+ this.parent.propReferences[h] = f, f ? b.classList.add(
169
169
  "p-gui__toggle-checkbox--active"
170
- ) : f.classList.remove(
170
+ ) : b.classList.remove(
171
171
  "p-gui__toggle-checkbox--active"
172
- ), typeof this.callback == "function" && this.callback(b);
172
+ ), typeof this.callback == "function" && this.callback(f);
173
173
  },
174
- get: () => this.parent.propReferences[u]
174
+ get: () => this.parent.propReferences[h]
175
175
  });
176
176
  }
177
177
  onChange(t) {
178
178
  return this.callback = t, this;
179
179
  }
180
180
  }
181
- class V {
182
- constructor(t, e, r, c) {
181
+ class T {
182
+ constructor(t, e, r, d) {
183
183
  this.parent = t, this.callback = null;
184
- let i = {}, l = null, s = !1, o, n;
184
+ let i = {}, p = null, l = !1, o, s;
185
185
  if (e && typeof e == "object" && typeof r == "string")
186
- o = e, n = r, s = !0, i = c || {};
186
+ o = e, s = r, l = !0, i = d || {};
187
187
  else if (e && typeof e == "object")
188
- s = !1, i = e;
188
+ l = !1, i = e;
189
189
  else
190
190
  throw Error("[GUI] list() invalid parameters.");
191
- let a = typeof i.label == "string" ? i.label : " ", u = null, d = Array.isArray(i.values) ? i.values : null, p = d && d.length > 0 && typeof d[0] == "object";
191
+ let a = typeof i.label == "string" ? i.label : " ", h = null, c = Array.isArray(i.values) ? i.values : null, n = c && c.length > 0 && typeof c[0] == "object";
192
192
  const g = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? a : null;
193
- s ? (l = (() => {
194
- if (!d)
193
+ l ? (p = (() => {
194
+ if (!c)
195
195
  return null;
196
- if (typeof o[n] == "string")
197
- return p ? d.find((h) => h.value === o[n]).value : d.indexOf(o[n]);
198
- if (typeof o[n] == "number")
199
- return p ? d.find((h) => h.value === o[n]).value : o[n];
200
- })(), u = this.parent.propReferences.push(o[n]) - 1) : l = (() => {
201
- if (!d)
196
+ if (typeof o[s] == "string")
197
+ return n ? c.find((u) => u.value === o[s]).value : c.indexOf(o[s]);
198
+ if (typeof o[s] == "number")
199
+ return n ? c.find((u) => u.value === o[s]).value : o[s];
200
+ })(), h = this.parent.propReferences.push(o[s]) - 1) : p = (() => {
201
+ if (!c)
202
202
  return null;
203
203
  if (typeof i.value == "string")
204
- return d.indexOf(i.value);
204
+ return c.indexOf(i.value);
205
205
  if (typeof i.value == "number")
206
206
  return i.value;
207
207
  })();
208
- let f = document.createElement("div");
209
- f.className = "p-gui__list", f.textContent = a, g && f.setAttribute("title", g), this.parent.wrapper.append(f), this.element = f;
210
- let b = document.createElement("select");
211
- f.append(b), b.className = "p-gui__list-dropdown", b.addEventListener("change", (h) => {
212
- s ? o[n] = h.target.value : this.callback && this.callback(h.target.value), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
213
- }), d && d.forEach((h, _) => {
214
- const y = p ? h.label : h, v = p ? h.value : h;
215
- let w = document.createElement("option");
216
- w.setAttribute("value", v), w.textContent = y, b.append(w), (!p && l == _ || p && l == v) && w.setAttribute("selected", "");
217
- }), s && Object.defineProperty(o, n, {
218
- set: (h) => {
219
- let _, y, v;
220
- p ? (v = d.find((C) => C.value == h), y = v?.value || d[0].value, _ = d.indexOf(v)) : (typeof h == "string" && (_ = d.indexOf(h), y = h), typeof h == "number" && (_ = h, y = d[h])), this.parent.propReferences[u] = p ? y : h;
221
- const w = b.querySelector("[selected]");
222
- w && w.removeAttribute("selected"), b.querySelectorAll("option")[_].setAttribute("selected", ""), typeof this.callback == "function" && (p ? this.callback(v, _) : this.callback(y, _));
208
+ let b = document.createElement("div");
209
+ b.className = "p-gui__list", b.textContent = a, g && b.setAttribute("title", g), this.parent.wrapper.append(b), this.element = b;
210
+ let f = document.createElement("select");
211
+ b.append(f), f.className = "p-gui__list-dropdown", f.addEventListener("change", (u) => {
212
+ l ? o[s] = u.target.value : this.callback && this.callback(u.target.value), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
213
+ }), c && c.forEach((u, m) => {
214
+ const x = n ? u.label : u, w = n ? u.value : u;
215
+ let y = document.createElement("option");
216
+ y.setAttribute("value", w), y.textContent = x, f.append(y), (!n && p == m || n && p == w) && y.setAttribute("selected", "");
217
+ }), l && Object.defineProperty(o, s, {
218
+ set: (u) => {
219
+ let m, x, w;
220
+ n ? (w = c.find((U) => U.value == u), x = w?.value || c[0].value, m = c.indexOf(w)) : (typeof u == "string" && (m = c.indexOf(u), x = u), typeof u == "number" && (m = u, x = c[u])), this.parent.propReferences[h] = n ? x : u;
221
+ const y = f.querySelector("[selected]");
222
+ y && y.removeAttribute("selected"), f.querySelectorAll("option")[m].setAttribute("selected", ""), typeof this.callback == "function" && (n ? this.callback(w, m) : this.callback(x, m));
223
223
  },
224
- get: () => this.parent.propReferences[u]
224
+ get: () => this.parent.propReferences[h]
225
225
  });
226
226
  }
227
227
  onChange(t) {
228
228
  return this.callback = t, this;
229
229
  }
230
230
  }
231
- class G {
232
- constructor(t, e, r, c) {
231
+ class V {
232
+ constructor(t, e, r, d) {
233
233
  this.parent = t, this.callback = null;
234
- let i = {}, l = null, s = !1, o, n;
234
+ let i = {}, p = null, l = !1, o, s;
235
235
  if (e && typeof e == "object" && typeof r == "string")
236
- o = e, n = r, s = !0, i = c || {};
236
+ o = e, s = r, l = !0, i = d || {};
237
237
  else if (e && typeof e == "object")
238
- s = !1, i = e;
238
+ l = !1, i = e;
239
239
  else
240
240
  throw Error("[GUI] color() invalid parameters.");
241
- let a = typeof i.label == "string" && i.label || " ", u = null;
242
- const d = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? a : null;
243
- s ? (a == " " && (a = n), u = this.parent.propReferences.push(o[n]) - 1, l = o[n] || "#000000") : (typeof i.value == "string" && (i.value.length != 7 || i.value[0] != "#" ? console.error(
241
+ let a = typeof i.label == "string" && i.label || " ", h = null;
242
+ const c = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? a : null;
243
+ l ? (a == " " && (a = s), h = this.parent.propReferences.push(o[s]) - 1, p = o[s] || "#000000") : (typeof i.value == "string" && (i.value.length != 7 || i.value[0] != "#" ? console.error(
244
244
  `[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${i.value}".`
245
- ) : l = i.value), l || (l = "#000000"));
246
- const p = document.createElement("div");
247
- p.className = "p-gui__color", p.textContent = a, d && p.setAttribute("title", d), this.parent.wrapper.append(p), this.element = p;
245
+ ) : p = i.value), p || (p = "#000000"));
246
+ const n = document.createElement("div");
247
+ n.className = "p-gui__color", n.textContent = a, c && n.setAttribute("title", c), this.parent.wrapper.append(n), this.element = n;
248
248
  const g = document.createElement("input");
249
- g.className = "p-gui__color-picker", g.setAttribute("type", "color"), g.value = l, p.append(g), g.addEventListener("input", () => {
250
- s ? o[n] = g.value : typeof this.callback == "function" && this.callback(g.value), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
251
- }), s && Object.defineProperty(o, n, {
252
- set: (f) => {
253
- this.parent.propReferences[u] = f, g.value = f, typeof this.callback == "function" && this.callback(f);
249
+ g.className = "p-gui__color-picker", g.setAttribute("type", "color"), g.value = p, n.append(g), g.addEventListener("input", () => {
250
+ l ? o[s] = g.value : typeof this.callback == "function" && this.callback(g.value), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
251
+ }), l && Object.defineProperty(o, s, {
252
+ set: (b) => {
253
+ this.parent.propReferences[h] = b, g.value = b, typeof this.callback == "function" && this.callback(b);
254
254
  },
255
- get: () => this.parent.propReferences[u]
255
+ get: () => this.parent.propReferences[h]
256
256
  });
257
257
  }
258
258
  onChange(t) {
259
259
  return this.callback = t, this;
260
260
  }
261
261
  }
262
- class T {
263
- constructor(t, e, r, c, i) {
262
+ class G {
263
+ constructor(t, e, r, d, i) {
264
264
  this.parent = t, this.callback = null;
265
- let l = {}, s, o, n, a;
266
- if (e && typeof e == "object" && typeof r == "string" && typeof c == "string")
267
- s = e, o = e, n = r, a = c, l = i || {};
265
+ let p = {}, l, o, s, a;
266
+ if (e && typeof e == "object" && typeof r == "string" && typeof d == "string")
267
+ l = e, o = e, s = r, a = d, p = i || {};
268
268
  else if (e && typeof e == "object" && e.x && e.x.obj)
269
- l = e, s = l.x.obj, n = l.x.prop, o = l.y.obj, a = l.y.prop;
269
+ p = e, l = p.x.obj, s = p.x.prop, o = p.y.obj, a = p.y.prop;
270
270
  else
271
271
  throw Error(
272
272
  "[GUI] vector2() invalid parameters. Use: gui.vector2(obj, 'propX', 'propY', params)"
273
273
  );
274
- let u = typeof l.label == "string" && l.label || " ";
275
- u === " " && (u = n + " / " + a);
276
- const d = l.x || {}, p = l.y || {}, g = d.min ?? l.min ?? 0, f = d.max ?? l.max ?? 1, b = p.min ?? l.min ?? 0, h = p.max ?? l.max ?? 1, _ = d.step || l.step || (f - g) / 100, y = p.step || l.step || (h - b) / 100, v = this.parent._countDecimals(_), w = this.parent._countDecimals(y), C = this.parent.propReferences.push(s[n]) - 1, D = this.parent.propReferences.push(o[a]) - 1, L = typeof l.tooltip == "string" ? l.tooltip : l.tooltip === !0 ? u : null, A = document.createElement("div");
277
- A.className = "p-gui__vector2", A.textContent = u, L && A.setAttribute("title", L), this.parent.wrapper.append(A);
274
+ let h = typeof p.label == "string" && p.label || " ";
275
+ h === " " && (h = s + " / " + a);
276
+ const c = p.x || {}, n = p.y || {}, g = c.min ?? p.min ?? 0, b = c.max ?? p.max ?? 1, f = n.min ?? p.min ?? 0, u = n.max ?? p.max ?? 1, m = c.step || p.step || (b - g) / 100, x = n.step || p.step || (u - f) / 100, w = this.parent._countDecimals(m), y = this.parent._countDecimals(x), U = this.parent.propReferences.push(l[s]) - 1, L = this.parent.propReferences.push(o[a]) - 1, N = typeof p.tooltip == "string" ? p.tooltip : p.tooltip === !0 ? h : null, A = document.createElement("div");
277
+ A.className = "p-gui__vector2", A.textContent = h, N && A.setAttribute("title", N), this.parent.wrapper.append(A);
278
278
  const E = document.createElement("div");
279
- E.className = "p-gui__vector-value", E.textContent = s[n] + ", " + o[a], A.append(E);
280
- const m = document.createElement("div");
281
- m.className = "p-gui__vector2-area", A.append(m), m.addEventListener("click", (x) => {
279
+ E.className = "p-gui__vector-value", E.textContent = l[s] + ", " + o[a], A.append(E);
280
+ const _ = document.createElement("div");
281
+ _.className = "p-gui__vector2-area", A.append(_), _.addEventListener("click", (v) => {
282
282
  const j = parseFloat(
283
283
  this.parent._mapLinear(
284
- x.offsetX,
284
+ v.offsetX,
285
285
  0,
286
- m.clientWidth,
286
+ _.clientWidth,
287
287
  g,
288
- f
288
+ b
289
289
  )
290
290
  ), R = parseFloat(
291
291
  this.parent._mapLinear(
292
- x.offsetY,
292
+ v.offsetY,
293
293
  0,
294
- m.clientHeight,
295
- h,
296
- b
294
+ _.clientHeight,
295
+ u,
296
+ f
297
297
  )
298
298
  );
299
- s[n] = j.toFixed(v), o[a] = R.toFixed(w), this.callback && this.callback(s[n], s[a]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
299
+ l[s] = j.toFixed(w), o[a] = R.toFixed(y), this.callback && this.callback(l[s], l[a]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
300
300
  });
301
- const P = (x) => {
302
- const j = m.getBoundingClientRect(), R = x.clientX - j.left, N = x.clientY - j.top, H = this.parent._mapLinear(
301
+ const O = (v) => {
302
+ const j = _.getBoundingClientRect(), R = v.clientX - j.left, H = v.clientY - j.top, M = this.parent._mapLinear(
303
303
  R,
304
304
  0,
305
- m.clientWidth,
305
+ _.clientWidth,
306
306
  g,
307
- f
307
+ b
308
308
  ), X = this.parent._mapLinear(
309
- N,
309
+ H,
310
310
  0,
311
- m.clientHeight,
312
- h,
313
- b
314
- ), S = Math.max(g, Math.min(f, H)), W = Math.max(b, Math.min(h, X));
315
- s[n] = parseFloat(S.toFixed(v)), o[a] = parseFloat(W.toFixed(w)), this.callback && this.callback(s[n], o[a]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
311
+ _.clientHeight,
312
+ u,
313
+ f
314
+ ), $ = Math.max(g, Math.min(b, M)), S = Math.max(f, Math.min(u, X));
315
+ l[s] = parseFloat($.toFixed(w)), o[a] = parseFloat(S.toFixed(y)), this.callback && this.callback(l[s], o[a]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
316
316
  };
317
- m.addEventListener("pointerdown", (x) => {
318
- P(x), document.addEventListener("pointermove", P), document.addEventListener(
317
+ _.addEventListener("pointerdown", (v) => {
318
+ O(v), document.addEventListener("pointermove", O), document.addEventListener(
319
319
  "pointerup",
320
320
  () => {
321
321
  document.removeEventListener(
322
322
  "pointermove",
323
- P
323
+ O
324
324
  );
325
325
  },
326
326
  { once: !0 }
327
327
  );
328
328
  });
329
+ const D = document.createElement("div");
330
+ D.className = "p-gui__vector2-line p-gui__vector2-line-x", _.append(D);
329
331
  const F = document.createElement("div");
330
- F.className = "p-gui__vector2-line p-gui__vector2-line-x", m.append(F);
331
- const M = document.createElement("div");
332
- M.className = "p-gui__vector2-line p-gui__vector2-line-y", m.append(M);
333
- const U = document.createElement("div");
334
- U.className = "p-gui__vector2-dot", m.append(U);
335
- const I = () => {
336
- U.style.left = this.parent._mapLinear(
337
- s[n],
332
+ F.className = "p-gui__vector2-line p-gui__vector2-line-y", _.append(F);
333
+ const I = document.createElement("div");
334
+ I.className = "p-gui__vector2-dot", _.append(I);
335
+ const P = () => {
336
+ I.style.left = this.parent._mapLinear(
337
+ l[s],
338
338
  g,
339
- f,
339
+ b,
340
340
  0,
341
- m.clientWidth
342
- ) + "px", U.style.top = this.parent._mapLinear(
341
+ _.clientWidth
342
+ ) + "px", I.style.top = this.parent._mapLinear(
343
343
  o[a],
344
- b,
345
- h,
346
- m.clientHeight,
344
+ f,
345
+ u,
346
+ _.clientHeight,
347
347
  0
348
348
  ) + "px";
349
349
  };
350
- I(), new ResizeObserver(() => {
351
- I();
352
- }).observe(m), Object.defineProperty(s, n, {
353
- set: (x) => {
354
- this.parent.propReferences[C] = x, I(), E.textContent = String(x) + ", " + o[a];
350
+ P(), new ResizeObserver(() => {
351
+ P();
352
+ }).observe(_), Object.defineProperty(l, s, {
353
+ set: (v) => {
354
+ this.parent.propReferences[U] = v, P(), E.textContent = String(v) + ", " + o[a];
355
355
  },
356
- get: () => this.parent.propReferences[C]
356
+ get: () => this.parent.propReferences[U]
357
357
  }), Object.defineProperty(o, a, {
358
- set: (x) => {
359
- this.parent.propReferences[D] = x, I(), E.textContent = s[n] + ", " + String(x);
358
+ set: (v) => {
359
+ this.parent.propReferences[L] = v, P(), E.textContent = l[s] + ", " + String(v);
360
360
  },
361
- get: () => this.parent.propReferences[D]
361
+ get: () => this.parent.propReferences[L]
362
362
  });
363
363
  }
364
364
  onChange(t) {
365
365
  return this.callback = t, this;
366
366
  }
367
367
  }
368
- const Q = ".p-gui__button{background:var(--color-accent);text-align:center;color:var(--color-bg);border:1px solid transparent;box-sizing:border-box;transition:var(--transition) background,var(--transition) border-color}.p-gui__button:hover{background:var(--color-accent-hover);border-color:#fff3}.p-gui__folder .p-gui__button{margin-inline:0}", q = ".p-gui__slider{position:relative;min-height:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--color-text-dark);transition:color var(--transition);padding:3px}.p-gui__slider:hover{color:var(--color-text-light)}.p-gui__slider-name{width:50%;text-overflow:ellipsis;overflow:hidden}.p-gui__slider-ctrl{-webkit-appearance:none;padding:0;font:inherit;outline:none;box-sizing:border-box;cursor:pointer;position:relative;right:0;height:14px;margin:0 0 0 auto;width:37%}.p-gui__slider-bar{position:absolute;top:50%;left:0;height:2px;background:#fff3;width:100%;transform:translateY(-50%)}.p-gui__slider-filling{position:absolute;top:-25%;left:0;height:100%;background:var(--color-accent);width:0}.p-gui__slider:hover .p-gui__slider-filling{background:var(--color-accent-hover)}.p-gui__slider-handle{width:9px;height:9px;position:absolute;top:50%;left:0;border-radius:2px;transform:translate(-50%,-50%);pointer-events:none;background:var(--color-text-dark);box-shadow:0 0 2px #00000080}.p-gui__slider:hover .p-gui__slider-handle{background:var(--color-text-light)}.p-gui__slider-value{display:inline-block;right:7px;width:13%;border:none;color:#fff;border-radius:2px;background:#ffffff1a;padding:2px 4px;color:inherit}.p-gui__slider-value:focus{outline:none}", J = ".p-gui__list{cursor:default;color:var(--color-text-dark);transition:var(--transition) color}.p-gui__list:hover{color:var(--color-text-light)}.p-gui__list-dropdown{background:#ffffff0d;color:#fff;padding:0 12px 0 5px;top:0}.p-gui__list-dropdown{position:absolute;right:5px;top:0;bottom:0;margin:auto;height:calc(100% - 4px);cursor:pointer;border-radius:3px;border:1px solid var(--color-border-2);outline:none}.p-gui__list-dropdown option{background:#fff;color:#000}.p-gui__list-dropdown:hover{background:#ffffff1a}", Z = ".p-gui__toggle{color:var(--color-text-dark);transition:var(--transition) background,var(--transition) color}.p-gui__toggle:hover{background:#ffffff1a;color:var(--color-text-light)}.p-gui__folder .p-gui__toggle{margin-inline:0}.p-gui__toggle-checkbox{width:10px;height:10px;background-color:#ffffff1a;position:absolute;top:0;right:10px;bottom:0;margin:auto;border-radius:2px;pointer-events:none;transition:.5s all ease}.p-gui__toggle-checkbox--active{background-color:#ddd;box-shadow:0 0 5px #ddd}", K = ".p-gui__color{cursor:default;color:var(--color-text-dark);transition:var(--transition) color}.p-gui__color:hover{color:var(--color-text-light)}.p-gui__color-picker{position:absolute;right:5px;top:0;bottom:0;margin:auto;height:calc(100% - 4px);cursor:pointer;border-radius:3px;border:1px solid var(--color-border-2);outline:none;-webkit-appearance:none;padding:0;background-color:transparent;border:1px solid #222222;overflow:hidden}.p-gui__color-picker::-webkit-color-swatch-wrapper{padding:0}.p-gui__color-picker::-webkit-color-swatch{border:none}", ee = ".p-gui__vector2{background:transparent;aspect-ratio:1;padding-bottom:0;color:var(--color-text-dark)}.p-gui__vector2:hover{color:var(--color-text-light)}.p-gui__vector2-area{position:relative;background:#0000004d;margin-top:8px;width:100%;height:calc(100% - 28px);touch-action:none}.p-gui__vector2-line{position:absolute;background:#fff;opacity:.3;pointer-events:none}.p-gui__vector2-line-x{width:100%;height:1px;left:0;top:50%;transform:translateY(-50%)}.p-gui__vector2-line-y{width:1px;height:100%;top:0;left:50%;transform:translate(-50%)}.p-gui__vector2-dot{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;background:#d5d5d5;border:2px solid #ff9999;transform:translate(-50%,-50%);pointer-events:none}.p-gui__vector-value{display:inline-block;right:7px;position:absolute}", te = '.p-gui__image-container{width:100%;padding:3px;display:flex;justify-content:flex-start;flex-wrap:wrap;box-sizing:border-box}.p-gui__image{background-size:cover;cursor:pointer;position:relative;margin:1px 2.5px 19px;border-radius:var(--main-border-radius);flex:0 0 calc(33.333% - 5px);height:90px;background-position:center;color:var(--color-text-dark);transition:var(--transition) color}.p-gui__image:hover{color:var(--color-text-light)}.p-gui__image:after{position:absolute;top:0;left:0;width:100%;height:100%;content:"";border:1px solid transparent;box-sizing:border-box;border-radius:var(--main-border-radius);transition:var(--transition) border-color}.p-gui__image--selected:after{border-color:#06ff89}.p-gui__image-text{position:absolute;bottom:-15px;text-shadow:0 -1px 0 #111;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}', ie = ".p-gui__folder{width:100%;position:relative;background:var(--color-bg);margin-bottom:2px;display:flex;flex-wrap:wrap;border:1px solid var(--color-border-2);border-radius:var(--main-border-radius);box-sizing:border-box;border-left:1px solid #bbbbbb}.p-gui__folder--first{margin-top:0}.p-gui__folder-content{display:grid;grid-template-rows:1fr;transition:.25s grid-template-rows ease;width:100%}.p-gui__folder-inner{overflow:hidden;padding-left:3px;padding-right:2px}.p-gui__folder--closed .p-gui__folder-content{grid-template-rows:0fr}.p-gui__folder-header{padding:5px 3px;background-color:#00000080;color:#fff;cursor:pointer;width:100%;box-sizing:border-box;border-top-right-radius:var(--main-border-radius);border-bottom-right-radius:var(--main-border-radius)}.p-gui__folder-header:hover{background-color:#000000bf}.p-gui__folder-arrow{width:8px;height:8px;display:inline-block;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA9Z1fCdMo1yxEJnA0AAAAK0lEQVQI12PABlRgjKkJUMZMYRhjpgqMAZSEMICSaIzpDWiKhdENhEhgAgATSg5jyWnYewAAAABJRU5ErkJggg==);background-size:contain;margin-right:5px;transform:rotate(90deg)}.p-gui__folder--closed .p-gui__folder-arrow{transform:rotate(0)}";
369
- function re(k) {
368
+ const Q = ".p-gui__button{background:var(--color-accent);text-align:center;color:var(--color-bg);border:1px solid transparent;box-sizing:border-box;transition:var(--transition) background,var(--transition) border-color}.p-gui__button:hover{background:var(--color-accent-hover);border-color:#fff3}.p-gui__folder .p-gui__button{margin-inline:0}", q = ".p-gui__slider{position:relative;min-height:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--color-text-dark);transition:color var(--transition);padding:3px}.p-gui__slider:hover{color:var(--color-text-light)}.p-gui__slider-name{width:50%;text-overflow:ellipsis;overflow:hidden}.p-gui__slider-ctrl{-webkit-appearance:none;padding:0;font:inherit;outline:none;box-sizing:border-box;cursor:pointer;position:relative;right:0;height:14px;margin:0 0 0 auto;width:37%}.p-gui__slider-bar{position:absolute;top:50%;left:0;height:2px;background:#fff3;width:100%;transform:translateY(-50%)}.p-gui__slider-filling{position:absolute;top:-25%;left:0;height:100%;background:var(--color-accent);width:0}.p-gui__slider:hover .p-gui__slider-filling{background:var(--color-accent-hover)}.p-gui__slider-handle{width:9px;height:9px;position:absolute;top:50%;left:0;border-radius:2px;transform:translate(-50%,-50%);pointer-events:none;background:var(--color-text-dark);box-shadow:0 0 2px #00000080}.p-gui__slider:hover .p-gui__slider-handle{background:var(--color-text-light)}.p-gui__slider-value{display:inline-block;right:7px;width:13%;border:none;color:#fff;border-radius:2px;background:#ffffff1a;padding:2px 4px;color:inherit}.p-gui__slider-value:focus{outline:none}", J = ".p-gui__list{cursor:default;color:var(--color-text-dark);transition:var(--transition) color}.p-gui__list:hover{color:var(--color-text-light)}.p-gui__list-dropdown{background:#ffffff0d;color:#fff;padding:0 12px 0 5px;top:0}.p-gui__list-dropdown{position:absolute;right:5px;top:0;bottom:0;margin:auto;height:calc(100% - 4px);cursor:pointer;border-radius:3px;border:1px solid var(--color-border-2);outline:none}.p-gui__list-dropdown option{background:#fff;color:#000}.p-gui__list-dropdown:hover{background:#ffffff1a}", Z = ".p-gui__toggle{color:var(--color-text-dark);transition:var(--transition) background,var(--transition) color}.p-gui__toggle:hover{background:#ffffff1a;color:var(--color-text-light)}.p-gui__folder .p-gui__toggle{margin-inline:0}.p-gui__toggle-checkbox{width:10px;height:10px;background-color:#ffffff1a;position:absolute;top:0;right:10px;bottom:0;margin:auto;border-radius:2px;pointer-events:none;transition:.5s all ease}.p-gui__toggle-checkbox--active{background-color:#ddd;box-shadow:0 0 5px #ddd}", K = ".p-gui__color{cursor:default;color:var(--color-text-dark);transition:var(--transition) color}.p-gui__color:hover{color:var(--color-text-light)}.p-gui__color-picker{position:absolute;right:5px;top:0;bottom:0;margin:auto;height:calc(100% - 4px);cursor:pointer;border-radius:3px;border:1px solid var(--color-border-2);outline:none;-webkit-appearance:none;padding:0;background-color:transparent;border:1px solid #222222;overflow:hidden}.p-gui__color-picker::-webkit-color-swatch-wrapper{padding:0}.p-gui__color-picker::-webkit-color-swatch{border:none}", ee = ".p-gui__vector2{background:transparent;aspect-ratio:1;padding-bottom:0;color:var(--color-text-dark)}.p-gui__vector2:hover{color:var(--color-text-light)}.p-gui__vector2-area{position:relative;background:#0000004d;margin-top:8px;width:100%;height:calc(100% - 28px);touch-action:none}.p-gui__vector2-line{position:absolute;background:#fff;opacity:.3;pointer-events:none}.p-gui__vector2-line-x{width:100%;height:1px;left:0;top:50%;transform:translateY(-50%)}.p-gui__vector2-line-y{width:1px;height:100%;top:0;left:50%;transform:translate(-50%)}.p-gui__vector2-dot{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;background:#d5d5d5;border:2px solid #ff9999;transform:translate(-50%,-50%);pointer-events:none}.p-gui__vector-value{display:inline-block;right:7px;position:absolute}", te = '.p-gui__image-container{width:100%;padding:3px;display:flex;justify-content:flex-start;flex-wrap:wrap;box-sizing:border-box}.p-gui__image{background-size:cover;cursor:pointer;position:relative;margin:1px 2.5px 19px;border-radius:var(--main-border-radius);flex:0 0 calc(33.333% - 5px);height:90px;background-position:center;color:var(--color-text-dark);transition:var(--transition) color}.p-gui__image:hover{color:var(--color-text-light)}.p-gui__image:after{position:absolute;top:0;left:0;width:100%;height:100%;content:"";border:1px solid transparent;box-sizing:border-box;border-radius:var(--main-border-radius);transition:var(--transition) border-color}.p-gui__image--selected:after{border-color:#06ff89}.p-gui__image-text{position:absolute;bottom:-15px;text-shadow:0 -1px 0 #111;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}', ie = ".p-gui__folder{width:100%;position:relative;background:var(--color-bg);margin-bottom:2px;display:flex;flex-wrap:wrap;border:1px solid var(--color-border-2);border-radius:var(--main-border-radius);box-sizing:border-box;border-left:1px solid #bbbbbb}.p-gui__folder--first{margin-top:0}.p-gui__folder-content{display:grid;grid-template-rows:1fr;transition:.25s grid-template-rows ease;width:100%}.p-gui__folder-inner{overflow:hidden;padding-left:3px;padding-right:2px}.p-gui__folder--closed .p-gui__folder-content{grid-template-rows:0fr}.p-gui__folder-header{padding:5px 3px;background-color:#00000080;color:#fff;cursor:pointer;width:100%;box-sizing:border-box;border-top-right-radius:var(--main-border-radius);border-bottom-right-radius:var(--main-border-radius)}.p-gui__folder-header:hover{background-color:#000000bf}.p-gui__folder-arrow{width:8px;height:8px;display:inline-block;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA9Z1fCdMo1yxEJnA0AAAAK0lEQVQI12PABlRgjKkJUMZMYRhjpgqMAZSEMICSaIzpDWiKhdENhEhgAgATSg5jyWnYewAAAABJRU5ErkJggg==);background-size:contain;margin-right:5px;transform:rotate(90deg)}.p-gui__folder--closed .p-gui__folder-arrow{transform:rotate(0)}", re = ".p-gui__tabs{width:100%;position:relative;background:var(--color-bg);margin-bottom:2px;border:1px solid var(--color-border-2);border-radius:var(--main-border-radius);box-sizing:border-box;border-left:1px solid #bbbbbb;padding-block:0}.p-gui__tabs--first{margin-top:0}.p-gui__tabs-header{display:flex;background-color:#00000080;border-top-left-radius:var(--main-border-radius);border-top-right-radius:var(--main-border-radius)}.p-gui__tab-button{padding:7px 10px;background:transparent;color:#bbb;cursor:pointer;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-family:inherit}.p-gui__tab-button:last-child{border-right:none}.p-gui__tab-button:hover{color:#fff}.p-gui__tab-button--active{background-color:var(--color-bg);color:#fff;border-bottom:1px solid transparent}.p-gui__tabs-content{position:relative;width:100%}.p-gui__tab-pane{display:none;width:100%;padding-top:4px;box-sizing:border-box}.p-gui__tab-pane--active{display:block}";
369
+ function oe(k) {
370
370
  return `
371
371
  .p-gui {
372
372
  --main-border-radius: 6px;
@@ -492,7 +492,8 @@ function re(k) {
492
492
  .p-gui__toggle,
493
493
  .p-gui__list,
494
494
  .p-gui__vector2,
495
- .p-gui__color {
495
+ .p-gui__color,
496
+ .p-gui__tabs {
496
497
  width: 100%;
497
498
  padding: 5px 3px;
498
499
  cursor: pointer;
@@ -509,7 +510,8 @@ function re(k) {
509
510
  .p-gui__toggle:hover,
510
511
  .p-gui__list:hover,
511
512
  .p-gui__vector2:hover,
512
- .p-gui__color:hover {
513
+ .p-gui__color:hover,
514
+ .p-gui__tabs:hover {
513
515
  border-color: rgba(255,255,255,.2);
514
516
  }
515
517
 
@@ -528,18 +530,20 @@ function re(k) {
528
530
  ${ee}
529
531
 
530
532
  ${ie}
533
+
534
+ ${re}
531
535
  `;
532
536
  }
533
- class O {
537
+ class C {
534
538
  constructor(t = {}) {
535
- if (this.firstParent = this, t.container ? (this.container = typeof t.container == "string" ? document.querySelector(t.container) : t.container, this.position_type = "absolute") : (this.container = document.body, this.position_type = "fixed"), this.propReferences = [], this.folders = [], t.isFolder) {
539
+ if (this.firstParent = this, t.container ? (this.container = typeof t.container == "string" ? document.querySelector(t.container) : t.container, this.position_type = "absolute") : (this.container = document.body, this.position_type = "fixed"), this.propReferences = [], this.folders = [], this.tabsArray = [], t.isFolder) {
536
540
  this._folderConstructor(t.folderOptions);
537
541
  return;
538
542
  }
539
543
  typeof t.onUpdate == "function" && (this.onUpdate = t.onUpdate), this.label = t != null && typeof t.label == "string" ? t.label : "", this.backgroundColor = t.color || null, this.opacity = t.opacity || 1, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(
540
544
  this.container.clientHeight,
541
545
  window.innerHeight
542
- ), t.maxHeight && (this.initMaxHeight = t.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(t.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = t.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(`${re(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.domElement.setAttribute("data-corner-x", this.screenCorner.x), this.domElement.setAttribute("data-corner-y", this.screenCorner.y), t.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, t.draggable == !0 && this._makeDraggable(), this.closed = !1, t.closed && this.toggleClose();
546
+ ), t.maxHeight && (this.initMaxHeight = t.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(t.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = t.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(`${oe(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.domElement.setAttribute("data-corner-x", this.screenCorner.x), this.domElement.setAttribute("data-corner-y", this.screenCorner.y), t.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, t.draggable == !0 && this._makeDraggable(), this.closed = !1, t.closed && this.toggleClose();
543
547
  }
544
548
  _styleInstance() {
545
549
  let t = this._getScrollbarWidth(this.container);
@@ -606,7 +610,7 @@ class O {
606
610
  e.className = "p-gui__content", this.domElement.append(e), this.wrapper = document.createElement("div"), this.wrapper.className = "p-gui__inner", e.append(this.wrapper);
607
611
  }
608
612
  button(t = {}) {
609
- return this.imageContainer = null, new $(this, t);
613
+ return this.imageContainer = null, new W(this, t);
610
614
  }
611
615
  image(t = {}) {
612
616
  return this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer)), new z(this, t);
@@ -618,52 +622,105 @@ class O {
618
622
  return this.imageContainer = null, new B(this, t, e, r);
619
623
  }
620
624
  list(t, e, r) {
621
- return this.imageContainer = null, new V(this, t, e, r);
625
+ return this.imageContainer = null, new T(this, t, e, r);
622
626
  }
623
627
  color(t, e, r) {
624
- return this.imageContainer = null, new G(this, t, e, r);
628
+ return this.imageContainer = null, new V(this, t, e, r);
625
629
  }
626
- vector2(t, e, r, c) {
627
- return this.imageContainer = null, new T(this, t, e, r, c);
630
+ vector2(t, e, r, d) {
631
+ return this.imageContainer = null, new G(this, t, e, r, d);
628
632
  }
629
633
  folder(t = {}) {
630
- let e = typeof t.closed == "boolean" ? t.closed : !1, r = t.label || "", c = t.color || null, i = t.maxHeight || null;
634
+ let e = typeof t.closed == "boolean" ? t.closed : !1, r = t.label || "", d = t.color || null, i = t.maxHeight || null;
631
635
  this.imageContainer = null;
632
- let l = "p-gui__folder";
633
- this.folders.length == 0 && (l += " p-gui__folder--first"), e && (l += " p-gui__folder--closed");
634
- let s = c ? `background-color: ${c};` : "";
635
- s += i ? `max-height: ${i}px;` : "";
636
+ let p = "p-gui__folder";
637
+ this.folders.length == 0 && (p += " p-gui__folder--first"), e && (p += " p-gui__folder--closed");
638
+ let l = d ? `background-color: ${d};` : "";
639
+ l += i ? `max-height: ${i}px; overflow-y: auto;` : "";
636
640
  const o = document.createElement("div");
637
- o.className = l, o.style = s, this.wrapper.append(o);
638
- const n = document.createElement("div");
639
- n.innerHTML = `<span class="p-gui__folder-arrow"></span>${r}`, n.className = "p-gui__folder-header", o.append(n);
641
+ o.className = p, o.style = l, this.wrapper.append(o);
642
+ const s = document.createElement("div");
643
+ s.innerHTML = `<span class="p-gui__folder-arrow"></span>${r}`, s.className = "p-gui__folder-header", o.append(s);
640
644
  const a = document.createElement("div");
641
645
  a.className = "p-gui__folder-content", o.append(a);
642
- const u = document.createElement("div");
643
- u.className = "p-gui__folder-inner", a.append(u), n.addEventListener("click", () => {
646
+ const h = document.createElement("div");
647
+ h.className = "p-gui__folder-inner", a.append(h), s.addEventListener("click", () => {
644
648
  o.classList.toggle("p-gui__folder--closed");
645
649
  });
646
- let d = new O({
650
+ let c = new C({
651
+ isFolder: !0,
652
+ folderOptions: {
653
+ wrapper: o,
654
+ inner: h,
655
+ parent: this,
656
+ firstParent: this.firstParent
657
+ }
658
+ });
659
+ return this.folders.push(c), c;
660
+ }
661
+ tabs(t = {}) {
662
+ const e = Array.isArray(t.tabs) ? t.tabs : [], r = t.active || 0, d = t.color || null, i = t.maxHeight || null;
663
+ this.imageContainer = null;
664
+ let p = "p-gui__tabs";
665
+ this.tabsArray.length == 0 && (p += " p-gui__tabs--first");
666
+ let l = d ? `background-color: ${d};` : "";
667
+ l += i ? `max-height: ${i}px; overflow-y: auto;` : "";
668
+ const o = document.createElement("div");
669
+ o.className = p, o.style = l, this.wrapper.append(o);
670
+ const s = document.createElement("div");
671
+ s.className = "p-gui__tabs-header", o.append(s);
672
+ const a = document.createElement("div");
673
+ a.className = "p-gui__tabs-content", o.append(a);
674
+ const h = [];
675
+ e.forEach((n, g) => {
676
+ const b = typeof n == "string" ? n : n.label || `Tab ${g + 1}`, f = document.createElement("button");
677
+ f.className = "p-gui__tab-button", g === r && (f.className += " p-gui__tab-button--active"), f.textContent = b, s.append(f);
678
+ const u = document.createElement("div");
679
+ u.className = "p-gui__tab-pane", g === r && (u.className += " p-gui__tab-pane--active"), a.append(u);
680
+ const m = new C({
681
+ isFolder: !0,
682
+ folderOptions: {
683
+ wrapper: o,
684
+ inner: u,
685
+ parent: this,
686
+ firstParent: this.firstParent
687
+ }
688
+ });
689
+ h.push({
690
+ gui: m,
691
+ button: f,
692
+ pane: u
693
+ }), f.addEventListener("click", () => {
694
+ h.forEach((x) => {
695
+ x.button.classList.remove("p-gui__tab-button--active"), x.pane.classList.remove("p-gui__tab-pane--active");
696
+ }), f.classList.add("p-gui__tab-button--active"), u.classList.add("p-gui__tab-pane--active");
697
+ });
698
+ });
699
+ const c = new C({
647
700
  isFolder: !0,
648
701
  folderOptions: {
649
702
  wrapper: o,
650
- inner: u,
703
+ inner: h[r]?.pane || document.createElement("div"),
651
704
  parent: this,
652
705
  firstParent: this.firstParent
653
706
  }
654
707
  });
655
- return this.folders.push(d), d;
708
+ return c.getTab = (n) => h[n]?.gui || null, c.getTabElement = (n) => h[n]?.button || null, c.setActiveTab = (n) => {
709
+ n >= 0 && n < h.length && h[n].button.click();
710
+ }, c.getActiveTab = () => h.findIndex(
711
+ (n) => n.button.classList.contains("p-gui__tab-button--active")
712
+ ), c.element = o, this.tabsArray.push(c), c;
656
713
  }
657
714
  _makeDraggable() {
658
715
  var t = this;
659
- this.header.addEventListener("pointerdown", e), this.header.addEventListener("pointerup", c);
716
+ this.header.addEventListener("pointerdown", e), this.header.addEventListener("pointerup", d);
660
717
  function e(i) {
661
718
  i.preventDefault(), t.position.initX = t.position.x, t.position.initY = t.position.y, t.position.prevX = i.clientX, t.position.prevY = i.clientY, document.addEventListener("pointermove", r);
662
719
  }
663
720
  function r(i) {
664
721
  i.preventDefault(), t.hasBeenDragged || (t.hasBeenDragged = !0, t.domElement.setAttribute("data-dragged", "true")), t.position.x = t.position.initX + i.clientX - t.position.prevX, t.position.y = t.position.initY + i.clientY - t.position.prevY, t.domElement.style.transform = "translate3d(" + t.position.x + "px," + t.position.y + "px,0)";
665
722
  }
666
- function c(i) {
723
+ function d(i) {
667
724
  document.removeEventListener("pointermove", r);
668
725
  }
669
726
  }
@@ -673,8 +730,8 @@ class O {
673
730
  kill() {
674
731
  this.domElement.remove();
675
732
  }
676
- _mapLinear(t, e, r, c, i) {
677
- return c + (t - e) * (i - c) / (r - e);
733
+ _mapLinear(t, e, r, d, i) {
734
+ return d + (t - e) * (i - d) / (r - e);
678
735
  }
679
736
  _countDecimals(t) {
680
737
  const e = t.toString(), r = e.indexOf(".");
@@ -682,9 +739,9 @@ class O {
682
739
  }
683
740
  static registerPlugin(t) {
684
741
  for (let e in t)
685
- O.prototype[e] = t[e];
742
+ C.prototype[e] = t[e];
686
743
  }
687
744
  }
688
745
  export {
689
- O as default
746
+ C as default
690
747
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "perfect-gui",
3
3
  "type": "module",
4
- "version": "5.0.2",
4
+ "version": "5.1.0",
5
5
  "description": "GUI for JavaScript",
6
6
  "main": "dist/perfect-gui.js",
7
7
  "module": "dist/perfect-gui.js",
package/src/index.js CHANGED
@@ -24,6 +24,7 @@ export default class GUI {
24
24
 
25
25
  this.propReferences = [];
26
26
  this.folders = [];
27
+ this.tabsArray = [];
27
28
 
28
29
  if (options.isFolder) {
29
30
  this._folderConstructor(options.folderOptions);
@@ -334,7 +335,7 @@ export default class GUI {
334
335
  }
335
336
 
336
337
  let container_style = color ? `background-color: ${color};` : '';
337
- container_style += maxHeight ? `max-height: ${maxHeight}px;` : '';
338
+ container_style += maxHeight ? `max-height: ${maxHeight}px; overflow-y: auto;` : '';
338
339
 
339
340
  const container = document.createElement('div');
340
341
  container.className = className;
@@ -371,6 +372,123 @@ export default class GUI {
371
372
  return folder;
372
373
  }
373
374
 
375
+ tabs(options = {}) {
376
+ const tabs = Array.isArray(options.tabs) ? options.tabs : [];
377
+ const activeTab = options.active || 0;
378
+ const color = options.color || null;
379
+ const maxHeight = options.maxHeight || null;
380
+
381
+ this.imageContainer = null;
382
+
383
+ let className = 'p-gui__tabs';
384
+ if (this.tabsArray.length == 0) {
385
+ className += ' p-gui__tabs--first';
386
+ }
387
+
388
+ let container_style = color ? `background-color: ${color};` : '';
389
+ container_style += maxHeight ? `max-height: ${maxHeight}px; overflow-y: auto;` : '';
390
+
391
+ const container = document.createElement('div');
392
+ container.className = className;
393
+ container.style = container_style;
394
+ this.wrapper.append(container);
395
+
396
+ // Create tabs header
397
+ const tabsHeader = document.createElement('div');
398
+ tabsHeader.className = 'p-gui__tabs-header';
399
+ container.append(tabsHeader);
400
+
401
+ // Create tabs content
402
+ const tabsContent = document.createElement('div');
403
+ tabsContent.className = 'p-gui__tabs-content';
404
+ container.append(tabsContent);
405
+
406
+ // Store tab instances for later access
407
+ const tabInstances = [];
408
+
409
+ tabs.forEach((tabConfig, index) => {
410
+ const tabLabel = typeof tabConfig === 'string' ? tabConfig : tabConfig.label || `Tab ${index + 1}`;
411
+
412
+ // Create tab button
413
+ const tabButton = document.createElement('button');
414
+ tabButton.className = 'p-gui__tab-button';
415
+ if (index === activeTab) {
416
+ tabButton.className += ' p-gui__tab-button--active';
417
+ }
418
+ tabButton.textContent = tabLabel;
419
+ tabsHeader.append(tabButton);
420
+
421
+ // Create tab pane
422
+ const tabPane = document.createElement('div');
423
+ tabPane.className = 'p-gui__tab-pane';
424
+ if (index === activeTab) {
425
+ tabPane.className += ' p-gui__tab-pane--active';
426
+ }
427
+ tabsContent.append(tabPane);
428
+
429
+ // Create GUI instance for this tab
430
+ const tabGUI = new GUI({
431
+ isFolder: true,
432
+ folderOptions: {
433
+ wrapper: container,
434
+ inner: tabPane,
435
+ parent: this,
436
+ firstParent: this.firstParent,
437
+ },
438
+ });
439
+
440
+ tabInstances.push({
441
+ gui: tabGUI,
442
+ button: tabButton,
443
+ pane: tabPane
444
+ });
445
+
446
+ // Add click handler
447
+ tabButton.addEventListener('click', () => {
448
+ // Remove active class from all tabs
449
+ tabInstances.forEach((tab) => {
450
+ tab.button.classList.remove('p-gui__tab-button--active');
451
+ tab.pane.classList.remove('p-gui__tab-pane--active');
452
+ });
453
+
454
+ // Add active class to clicked tab
455
+ tabButton.classList.add('p-gui__tab-button--active');
456
+ tabPane.classList.add('p-gui__tab-pane--active');
457
+ });
458
+ });
459
+
460
+ // Create main tabs instance to return
461
+ const tabsInstance = new GUI({
462
+ isFolder: true,
463
+ folderOptions: {
464
+ wrapper: container,
465
+ inner: tabInstances[activeTab]?.pane || document.createElement('div'),
466
+ parent: this,
467
+ firstParent: this.firstParent,
468
+ },
469
+ });
470
+
471
+ // Add methods to access individual tabs
472
+ tabsInstance.getTab = (index) => tabInstances[index]?.gui || null;
473
+ tabsInstance.getTabElement = (index) => tabInstances[index]?.button || null;
474
+ tabsInstance.setActiveTab = (index) => {
475
+ if (index >= 0 && index < tabInstances.length) {
476
+ tabInstances[index].button.click();
477
+ }
478
+ };
479
+ tabsInstance.getActiveTab = () => {
480
+ return tabInstances.findIndex(tab =>
481
+ tab.button.classList.contains('p-gui__tab-button--active')
482
+ );
483
+ };
484
+
485
+ // Expose the main container element
486
+ tabsInstance.element = container;
487
+
488
+ this.tabsArray.push(tabsInstance);
489
+ return tabsInstance;
490
+ }
491
+
374
492
  _makeDraggable() {
375
493
  var that = this;
376
494
  this.header.addEventListener('pointerdown', dragMouseDown);
package/src/styles/_tabs.css ADDED
@@ -0,0 +1,66 @@
1
+ .p-gui__tabs {
2
+ width: 100%;
3
+ position: relative;
4
+ background: var(--color-bg);
5
+ margin-bottom: 2px;
6
+ border: 1px solid var(--color-border-2);
7
+ border-radius: var(--main-border-radius);
8
+ box-sizing: border-box;
9
+ border-left: 1px solid #bbbbbb;
10
+ padding-block: 0;
11
+ }
12
+
13
+ .p-gui__tabs--first {
14
+ margin-top: 0;
15
+ }
16
+
17
+ .p-gui__tabs-header {
18
+ display: flex;
19
+ background-color: rgba(0, 0, 0, .5);
20
+ border-top-left-radius: var(--main-border-radius);
21
+ border-top-right-radius: var(--main-border-radius);
22
+ }
23
+
24
+ .p-gui__tab-button {
25
+ padding: 7px 10px;
26
+ background: transparent;
27
+ color: #bbb;
28
+ cursor: pointer;
29
+ border: none;
30
+ white-space: nowrap;
31
+ overflow: hidden;
32
+ text-overflow: ellipsis;
33
+ flex: 1;
34
+ /*border-bottom: 1px solid var(--color-accent);*/
35
+ font-family: inherit;
36
+ }
37
+
38
+ .p-gui__tab-button:last-child {
39
+ border-right: none;
40
+ }
41
+
42
+ .p-gui__tab-button:hover {
43
+ color: white;
44
+ }
45
+
46
+ .p-gui__tab-button--active {
47
+ background-color: var(--color-bg);
48
+ color: white;
49
+ border-bottom: 1px solid transparent;
50
+ }
51
+
52
+ .p-gui__tabs-content {
53
+ position: relative;
54
+ width: 100%;
55
+ }
56
+
57
+ .p-gui__tab-pane {
58
+ display: none;
59
+ width: 100%;
60
+ padding-top: 4px;
61
+ box-sizing: border-box;
62
+ }
63
+
64
+ .p-gui__tab-pane--active {
65
+ display: block;
66
+ }
package/src/styles/styles.js CHANGED
@@ -6,6 +6,7 @@ import _color from './_color.css?inline';
6
6
  import _vector2 from './_vector2.css?inline';
7
7
  import _image from './_image.css?inline';
8
8
  import _folder from './_folder.css?inline';
9
+ import _tabs from './_tabs.css?inline';
9
10
 
10
11
  export default function (position_type) {
11
12
  return `
@@ -133,7 +134,8 @@ export default function (position_type) {
133
134
  .p-gui__toggle,
134
135
  .p-gui__list,
135
136
  .p-gui__vector2,
136
- .p-gui__color {
137
+ .p-gui__color,
138
+ .p-gui__tabs {
137
139
  width: 100%;
138
140
  padding: 5px 3px;
139
141
  cursor: pointer;
@@ -150,7 +152,8 @@ export default function (position_type) {
150
152
  .p-gui__toggle:hover,
151
153
  .p-gui__list:hover,
152
154
  .p-gui__vector2:hover,
153
- .p-gui__color:hover {
155
+ .p-gui__color:hover,
156
+ .p-gui__tabs:hover {
154
157
  border-color: rgba(255,255,255,.2);
155
158
  }
156
159
 
@@ -169,5 +172,7 @@ export default function (position_type) {
169
172
  ${_vector2}
170
173
 
171
174
  ${_folder}
175
+
176
+ ${_tabs}
172
177
  `;
173
178
  }