perfect-gui 5.1.2 → 5.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/perfect-gui.js +158 -156
- package/package.json +1 -1
package/dist/perfect-gui.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
class
|
|
1
|
+
class S {
|
|
2
2
|
constructor(t, e = {}) {
|
|
3
3
|
if (this.parent = t, this.callback = null, typeof e != "object")
|
|
4
4
|
throw Error(
|
|
@@ -20,63 +20,65 @@ class W {
|
|
|
20
20
|
class Y {
|
|
21
21
|
constructor(t, e, r, d) {
|
|
22
22
|
this.parent = t, this.propReferences = [];
|
|
23
|
-
let i = {},
|
|
23
|
+
let i = {}, l = null;
|
|
24
24
|
if (e && typeof e == "object" && typeof r == "string")
|
|
25
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,
|
|
27
|
+
this.isObject = !1, i = e, l = typeof i.value == "number" ? i.value : null;
|
|
28
28
|
else
|
|
29
29
|
throw Error("[GUI] slider() invalid parameters.");
|
|
30
|
-
let
|
|
31
|
-
this.isObject &&
|
|
32
|
-
let
|
|
33
|
-
this.isObject ?
|
|
34
|
-
const
|
|
35
|
-
a.className = "p-gui__slider",
|
|
30
|
+
let c = typeof i.label == "string" && i.label || " ";
|
|
31
|
+
this.isObject && c == " " && (c = 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
|
+
let n = null;
|
|
33
|
+
this.isObject ? n = this.propReferences.push(this.obj[this.prop]) - 1 : l === null && (l = (this.max - this.min) / 2);
|
|
34
|
+
const o = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? c : null, a = document.createElement("div");
|
|
35
|
+
a.className = "p-gui__slider", o && a.setAttribute("title", o), this.parent.wrapper.append(a), this.element = a;
|
|
36
36
|
const h = document.createElement("div");
|
|
37
|
-
h.className = "p-gui__slider-name", h.textContent =
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
const
|
|
37
|
+
h.className = "p-gui__slider-name", h.textContent = c, 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 p = document.createElement("div");
|
|
39
|
+
p.className = "p-gui__slider-bar", this.ctrlDiv.append(p), 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", p.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 s = this.ctrlDiv.offsetWidth, f = this.handle.offsetWidth;
|
|
41
41
|
this.handle.position = this._mapLinear(
|
|
42
42
|
this.valueInput.value,
|
|
43
43
|
this.min,
|
|
44
44
|
this.max,
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
f / 2,
|
|
46
|
+
s - f / 2
|
|
47
47
|
), this.handle.position = Math.min(
|
|
48
48
|
this.handle.position,
|
|
49
|
-
|
|
49
|
+
s - f / 2
|
|
50
50
|
), this.handle.position = Math.max(
|
|
51
51
|
this.handle.position,
|
|
52
|
-
|
|
52
|
+
f / 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", (
|
|
57
|
-
this.ctrlDiv.pointerDown = !0, this.ctrlDiv.prevPosition =
|
|
58
|
-
}), window.addEventListener("pointerup", (
|
|
56
|
+
}), this.ctrlDiv.addEventListener("pointerdown", (s) => {
|
|
57
|
+
this.ctrlDiv.pointerDown = !0, this.ctrlDiv.prevPosition = s.clientX, this._updateHandlePositionFromPointer(s, !0);
|
|
58
|
+
}), window.addEventListener("pointerup", (s) => {
|
|
59
59
|
this.ctrlDiv.pointerDown = !1;
|
|
60
|
-
}), window.addEventListener("
|
|
61
|
-
this.ctrlDiv.pointerDown
|
|
60
|
+
}), window.addEventListener("pointercancel", (s) => {
|
|
61
|
+
this.ctrlDiv.pointerDown = !1;
|
|
62
|
+
}), window.addEventListener("pointermove", (s) => {
|
|
63
|
+
this.ctrlDiv.pointerDown && (this.ctrlDiv.pointerDelta = s.clientX - this.ctrlDiv.prevPosition, this._updateHandlePositionFromPointer(s));
|
|
62
64
|
}), this.isObject && Object.defineProperty(this.obj, this.prop, {
|
|
63
|
-
set: (
|
|
64
|
-
this.propReferences[
|
|
65
|
+
set: (s) => {
|
|
66
|
+
this.propReferences[n] = s, this.valueInput.value = s, this._updateHandlePositionFromValue(), this.callback && this.callback(parseFloat(this.valueInput.value));
|
|
65
67
|
},
|
|
66
|
-
get: () => this.propReferences[
|
|
68
|
+
get: () => this.propReferences[n]
|
|
67
69
|
});
|
|
68
70
|
}
|
|
69
71
|
_updateHandlePositionFromPointer(t, e = !1) {
|
|
70
|
-
const r = this.ctrlDiv.
|
|
71
|
-
let
|
|
72
|
-
e ?
|
|
73
|
-
|
|
74
|
-
Math.min(
|
|
72
|
+
const r = this.ctrlDiv.getBoundingClientRect(), d = r.width, i = this.handle.offsetWidth, l = t.clientX - this.ctrlDiv.prevPosition, c = parseFloat(this.valueInput.value);
|
|
73
|
+
let n;
|
|
74
|
+
e ? n = t.clientX - r.left : n = this.handle.position + l, n = Math.max(
|
|
75
|
+
i / 2,
|
|
76
|
+
Math.min(n, d - i / 2)
|
|
75
77
|
);
|
|
76
|
-
let o = this.min + (this.max - this.min) * (
|
|
77
|
-
o >
|
|
78
|
-
const
|
|
79
|
-
(o >=
|
|
78
|
+
let o = this.min + (this.max - this.min) * (n - i / 2) / (d - i);
|
|
79
|
+
o > c ? o = this._quantizeFloor(o, this.step) : o = this._quantizeCeil(o, this.step), o = parseFloat(o.toFixed(9));
|
|
80
|
+
const a = parseFloat((c + this.step).toFixed(9)), h = parseFloat((c - this.step).toFixed(9));
|
|
81
|
+
(o >= a || o <= h) && (o = o.toFixed(this.decimals), this.valueInput.value = o, this.ctrlDiv.prevPosition = t.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${n}px)`, this.handle.position = n, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks());
|
|
80
82
|
}
|
|
81
83
|
_updateHandlePositionFromValue() {
|
|
82
84
|
const t = this.ctrlDiv.offsetWidth, e = this.handle.offsetWidth;
|
|
@@ -124,19 +126,19 @@ class z {
|
|
|
124
126
|
throw typeof e.path == null ? Error("[GUI] image() path must be provided.") : Error("[GUI] image() path must be a string.");
|
|
125
127
|
let d = r.replace(/^.*[\\\/]/, ""), i;
|
|
126
128
|
e.label == null ? i = d : i = typeof e.label == "string" && e.label || " ";
|
|
127
|
-
const
|
|
128
|
-
let
|
|
129
|
-
e.width && (typeof e.width == "number" && (e.width += "px"),
|
|
129
|
+
const l = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? i : null, c = e.selected === !0, n = e.selectionBorder !== !1;
|
|
130
|
+
let o = "";
|
|
131
|
+
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}; `);
|
|
130
132
|
const a = document.createElement("div");
|
|
131
|
-
a.className = "p-gui__image", a.style = "background-image: url(" + r + "); " +
|
|
133
|
+
a.className = "p-gui__image", a.style = "background-image: url(" + r + "); " + o, l && a.setAttribute("title", l), this.parent.imageContainer.append(a), this.element = a, c && n && a.classList.add("p-gui__image--selected");
|
|
132
134
|
const h = document.createElement("div");
|
|
133
135
|
h.className = "p-gui__image-text", h.textContent = i, a.append(h), a.addEventListener("click", () => {
|
|
134
|
-
let
|
|
136
|
+
let p = a.parentElement.querySelectorAll(
|
|
135
137
|
".p-gui__image--selected"
|
|
136
138
|
);
|
|
137
|
-
for (let
|
|
138
|
-
|
|
139
|
-
|
|
139
|
+
for (let s = 0; s < p.length; s++)
|
|
140
|
+
p[s].classList.remove("p-gui__image--selected");
|
|
141
|
+
n && 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
142
|
});
|
|
141
143
|
}
|
|
142
144
|
onClick(t) {
|
|
@@ -146,30 +148,30 @@ class z {
|
|
|
146
148
|
class B {
|
|
147
149
|
constructor(t, e, r, d) {
|
|
148
150
|
this.parent = t, this.callback = null;
|
|
149
|
-
let i = {},
|
|
151
|
+
let i = {}, l = null, c = !1, n, o;
|
|
150
152
|
if (e && typeof e == "object" && typeof r == "string")
|
|
151
|
-
|
|
153
|
+
n = e, o = r, c = !0, i = d || {};
|
|
152
154
|
else if (e && typeof e == "object")
|
|
153
|
-
|
|
155
|
+
c = !1, i = e, l = typeof i.value == "boolean" ? i.value : null;
|
|
154
156
|
else
|
|
155
157
|
throw Error("[GUI] toggle() invalid parameters.");
|
|
156
158
|
let a = typeof i.label == "string" && i.label || " ", h = null;
|
|
157
|
-
|
|
158
|
-
const
|
|
159
|
-
|
|
160
|
-
const u =
|
|
159
|
+
c && a == " " && (a = o), c && (h = this.parent.propReferences.push(n[o]) - 1);
|
|
160
|
+
const p = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? a : null, s = document.createElement("div");
|
|
161
|
+
s.textContent = a, s.className = "p-gui__toggle", p && s.setAttribute("title", p), this.parent.wrapper.append(s), this.element = s, s.addEventListener("click", (g) => {
|
|
162
|
+
const u = g.target.childNodes[1];
|
|
161
163
|
let m = !0;
|
|
162
|
-
u.classList.contains("p-gui__toggle-checkbox--active") && (m = !1), u.classList.toggle("p-gui__toggle-checkbox--active"),
|
|
164
|
+
u.classList.contains("p-gui__toggle-checkbox--active") && (m = !1), u.classList.toggle("p-gui__toggle-checkbox--active"), c ? n[o] = 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
165
|
});
|
|
164
|
-
let
|
|
166
|
+
let f = c ? n[o] ? " p-gui__toggle-checkbox--active" : "" : l ? " p-gui__toggle-checkbox--active" : "";
|
|
165
167
|
const b = document.createElement("div");
|
|
166
|
-
b.className = "p-gui__toggle-checkbox" +
|
|
167
|
-
set: (
|
|
168
|
-
this.parent.propReferences[h] =
|
|
168
|
+
b.className = "p-gui__toggle-checkbox" + f, s.append(b), c && Object.defineProperty(n, o, {
|
|
169
|
+
set: (g) => {
|
|
170
|
+
this.parent.propReferences[h] = g, g ? b.classList.add(
|
|
169
171
|
"p-gui__toggle-checkbox--active"
|
|
170
172
|
) : b.classList.remove(
|
|
171
173
|
"p-gui__toggle-checkbox--active"
|
|
172
|
-
), typeof this.callback == "function" && this.callback(
|
|
174
|
+
), typeof this.callback == "function" && this.callback(g);
|
|
173
175
|
},
|
|
174
176
|
get: () => this.parent.propReferences[h]
|
|
175
177
|
});
|
|
@@ -181,45 +183,45 @@ class B {
|
|
|
181
183
|
class T {
|
|
182
184
|
constructor(t, e, r, d) {
|
|
183
185
|
this.parent = t, this.callback = null;
|
|
184
|
-
let i = {},
|
|
186
|
+
let i = {}, l = null, c = !1, n, o;
|
|
185
187
|
if (e && typeof e == "object" && typeof r == "string")
|
|
186
|
-
|
|
188
|
+
n = e, o = r, c = !0, i = d || {};
|
|
187
189
|
else if (e && typeof e == "object")
|
|
188
|
-
|
|
190
|
+
c = !1, i = e;
|
|
189
191
|
else
|
|
190
192
|
throw Error("[GUI] list() invalid parameters.");
|
|
191
|
-
let a = typeof i.label == "string" ? i.label : " ", h = null,
|
|
192
|
-
const
|
|
193
|
-
|
|
194
|
-
if (!
|
|
193
|
+
let a = typeof i.label == "string" ? i.label : " ", h = null, p = Array.isArray(i.values) ? i.values : null, s = p && p.length > 0 && typeof p[0] == "object";
|
|
194
|
+
const f = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? a : null;
|
|
195
|
+
c ? (l = (() => {
|
|
196
|
+
if (!p)
|
|
195
197
|
return null;
|
|
196
|
-
if (typeof o
|
|
197
|
-
return
|
|
198
|
-
if (typeof o
|
|
199
|
-
return
|
|
200
|
-
})(), h = this.parent.propReferences.push(o
|
|
201
|
-
if (!
|
|
198
|
+
if (typeof n[o] == "string")
|
|
199
|
+
return s ? p.find((u) => u.value === n[o]).value : p.indexOf(n[o]);
|
|
200
|
+
if (typeof n[o] == "number")
|
|
201
|
+
return s ? p.find((u) => u.value === n[o]).value : n[o];
|
|
202
|
+
})(), h = this.parent.propReferences.push(n[o]) - 1) : l = (() => {
|
|
203
|
+
if (!p)
|
|
202
204
|
return null;
|
|
203
205
|
if (typeof i.value == "string")
|
|
204
|
-
return
|
|
206
|
+
return p.indexOf(i.value);
|
|
205
207
|
if (typeof i.value == "number")
|
|
206
208
|
return i.value;
|
|
207
209
|
})();
|
|
208
210
|
let b = document.createElement("div");
|
|
209
|
-
b.className = "p-gui__list", b.textContent = a,
|
|
210
|
-
let
|
|
211
|
-
b.append(
|
|
212
|
-
|
|
213
|
-
}),
|
|
214
|
-
const x =
|
|
211
|
+
b.className = "p-gui__list", b.textContent = a, f && b.setAttribute("title", f), this.parent.wrapper.append(b), this.element = b;
|
|
212
|
+
let g = document.createElement("select");
|
|
213
|
+
b.append(g), g.className = "p-gui__list-dropdown", g.addEventListener("change", (u) => {
|
|
214
|
+
c ? n[o] = 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();
|
|
215
|
+
}), p && p.forEach((u, m) => {
|
|
216
|
+
const x = s ? u.label : u, w = s ? u.value : u;
|
|
215
217
|
let y = document.createElement("option");
|
|
216
|
-
y.setAttribute("value", w), y.textContent = x,
|
|
217
|
-
}),
|
|
218
|
+
y.setAttribute("value", w), y.textContent = x, g.append(y), (!s && l == m || s && l == w) && y.setAttribute("selected", "");
|
|
219
|
+
}), c && Object.defineProperty(n, o, {
|
|
218
220
|
set: (u) => {
|
|
219
221
|
let m, x, w;
|
|
220
|
-
|
|
221
|
-
const y =
|
|
222
|
-
y && y.removeAttribute("selected"),
|
|
222
|
+
s ? (w = p.find((U) => U.value == u), x = w?.value || p[0].value, m = p.indexOf(w)) : (typeof u == "string" && (m = p.indexOf(u), x = u), typeof u == "number" && (m = u, x = p[u])), this.parent.propReferences[h] = s ? x : u;
|
|
223
|
+
const y = g.querySelector("[selected]");
|
|
224
|
+
y && y.removeAttribute("selected"), g.querySelectorAll("option")[m].setAttribute("selected", ""), typeof this.callback == "function" && (s ? this.callback(w, m) : this.callback(x, m));
|
|
223
225
|
},
|
|
224
226
|
get: () => this.parent.propReferences[h]
|
|
225
227
|
});
|
|
@@ -231,26 +233,26 @@ class T {
|
|
|
231
233
|
class V {
|
|
232
234
|
constructor(t, e, r, d) {
|
|
233
235
|
this.parent = t, this.callback = null;
|
|
234
|
-
let i = {},
|
|
236
|
+
let i = {}, l = null, c = !1, n, o;
|
|
235
237
|
if (e && typeof e == "object" && typeof r == "string")
|
|
236
|
-
|
|
238
|
+
n = e, o = r, c = !0, i = d || {};
|
|
237
239
|
else if (e && typeof e == "object")
|
|
238
|
-
|
|
240
|
+
c = !1, i = e;
|
|
239
241
|
else
|
|
240
242
|
throw Error("[GUI] color() invalid parameters.");
|
|
241
243
|
let a = typeof i.label == "string" && i.label || " ", h = null;
|
|
242
|
-
const
|
|
243
|
-
|
|
244
|
+
const p = typeof i.tooltip == "string" ? i.tooltip : i.tooltip === !0 ? a : null;
|
|
245
|
+
c ? (a == " " && (a = o), h = this.parent.propReferences.push(n[o]) - 1, l = n[o] || "#000000") : (typeof i.value == "string" && (i.value.length != 7 || i.value[0] != "#" ? console.error(
|
|
244
246
|
`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${i.value}".`
|
|
245
|
-
) :
|
|
246
|
-
const
|
|
247
|
-
|
|
248
|
-
const
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
}),
|
|
247
|
+
) : l = i.value), l || (l = "#000000"));
|
|
248
|
+
const s = document.createElement("div");
|
|
249
|
+
s.className = "p-gui__color", s.textContent = a, p && s.setAttribute("title", p), this.parent.wrapper.append(s), this.element = s;
|
|
250
|
+
const f = document.createElement("input");
|
|
251
|
+
f.className = "p-gui__color-picker", f.setAttribute("type", "color"), f.value = l, s.append(f), f.addEventListener("input", () => {
|
|
252
|
+
c ? n[o] = f.value : typeof this.callback == "function" && this.callback(f.value), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
|
|
253
|
+
}), c && Object.defineProperty(n, o, {
|
|
252
254
|
set: (b) => {
|
|
253
|
-
this.parent.propReferences[h] = b,
|
|
255
|
+
this.parent.propReferences[h] = b, f.value = b, typeof this.callback == "function" && this.callback(b);
|
|
254
256
|
},
|
|
255
257
|
get: () => this.parent.propReferences[h]
|
|
256
258
|
});
|
|
@@ -262,21 +264,21 @@ class V {
|
|
|
262
264
|
class G {
|
|
263
265
|
constructor(t, e, r, d, i) {
|
|
264
266
|
this.parent = t, this.callback = null;
|
|
265
|
-
let
|
|
267
|
+
let l = {}, c, n, o, a;
|
|
266
268
|
if (e && typeof e == "object" && typeof r == "string" && typeof d == "string")
|
|
267
|
-
|
|
269
|
+
c = e, n = e, o = r, a = d, l = i || {};
|
|
268
270
|
else if (e && typeof e == "object" && e.x && e.x.obj)
|
|
269
|
-
|
|
271
|
+
l = e, c = l.x.obj, o = l.x.prop, n = l.y.obj, a = l.y.prop;
|
|
270
272
|
else
|
|
271
273
|
throw Error(
|
|
272
274
|
"[GUI] vector2() invalid parameters. Use: gui.vector2(obj, 'propX', 'propY', params)"
|
|
273
275
|
);
|
|
274
|
-
let h = typeof
|
|
275
|
-
h === " " && (h =
|
|
276
|
-
const
|
|
277
|
-
A.className = "p-gui__vector2", A.textContent = h,
|
|
276
|
+
let h = typeof l.label == "string" && l.label || " ";
|
|
277
|
+
h === " " && (h = o + " / " + a);
|
|
278
|
+
const p = l.x || {}, s = l.y || {}, f = p.min ?? l.min ?? 0, b = p.max ?? l.max ?? 1, g = s.min ?? l.min ?? 0, u = s.max ?? l.max ?? 1, m = p.step || l.step || (b - f) / 100, x = s.step || l.step || (u - g) / 100, w = this.parent._countDecimals(m), y = this.parent._countDecimals(x), U = this.parent.propReferences.push(c[o]) - 1, L = this.parent.propReferences.push(n[a]) - 1, D = typeof l.tooltip == "string" ? l.tooltip : l.tooltip === !0 ? h : null, A = document.createElement("div");
|
|
279
|
+
A.className = "p-gui__vector2", A.textContent = h, D && A.setAttribute("title", D), this.parent.wrapper.append(A);
|
|
278
280
|
const E = document.createElement("div");
|
|
279
|
-
E.className = "p-gui__vector-value", E.textContent =
|
|
281
|
+
E.className = "p-gui__vector-value", E.textContent = c[o] + ", " + n[a], A.append(E);
|
|
280
282
|
const _ = document.createElement("div");
|
|
281
283
|
_.className = "p-gui__vector2-area", A.append(_), _.addEventListener("click", (v) => {
|
|
282
284
|
const j = parseFloat(
|
|
@@ -284,7 +286,7 @@ class G {
|
|
|
284
286
|
v.offsetX,
|
|
285
287
|
0,
|
|
286
288
|
_.clientWidth,
|
|
287
|
-
|
|
289
|
+
f,
|
|
288
290
|
b
|
|
289
291
|
)
|
|
290
292
|
), R = parseFloat(
|
|
@@ -293,26 +295,26 @@ class G {
|
|
|
293
295
|
0,
|
|
294
296
|
_.clientHeight,
|
|
295
297
|
u,
|
|
296
|
-
|
|
298
|
+
g
|
|
297
299
|
)
|
|
298
300
|
);
|
|
299
|
-
|
|
301
|
+
c[o] = j.toFixed(w), n[a] = R.toFixed(y), this.callback && this.callback(c[o], c[a]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
|
|
300
302
|
});
|
|
301
303
|
const O = (v) => {
|
|
302
304
|
const j = _.getBoundingClientRect(), R = v.clientX - j.left, H = v.clientY - j.top, M = this.parent._mapLinear(
|
|
303
305
|
R,
|
|
304
306
|
0,
|
|
305
307
|
_.clientWidth,
|
|
306
|
-
|
|
308
|
+
f,
|
|
307
309
|
b
|
|
308
310
|
), X = this.parent._mapLinear(
|
|
309
311
|
H,
|
|
310
312
|
0,
|
|
311
313
|
_.clientHeight,
|
|
312
314
|
u,
|
|
313
|
-
|
|
314
|
-
), $ = Math.max(
|
|
315
|
-
|
|
315
|
+
g
|
|
316
|
+
), $ = Math.max(f, Math.min(b, M)), W = Math.max(g, Math.min(u, X));
|
|
317
|
+
c[o] = parseFloat($.toFixed(w)), n[a] = parseFloat(W.toFixed(y)), this.callback && this.callback(c[o], n[a]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
|
|
316
318
|
};
|
|
317
319
|
_.addEventListener("pointerdown", (v) => {
|
|
318
320
|
O(v), document.addEventListener("pointermove", O), document.addEventListener(
|
|
@@ -326,22 +328,22 @@ class G {
|
|
|
326
328
|
{ once: !0 }
|
|
327
329
|
);
|
|
328
330
|
});
|
|
329
|
-
const
|
|
330
|
-
|
|
331
|
+
const N = document.createElement("div");
|
|
332
|
+
N.className = "p-gui__vector2-line p-gui__vector2-line-x", _.append(N);
|
|
331
333
|
const F = document.createElement("div");
|
|
332
334
|
F.className = "p-gui__vector2-line p-gui__vector2-line-y", _.append(F);
|
|
333
335
|
const I = document.createElement("div");
|
|
334
336
|
I.className = "p-gui__vector2-dot", _.append(I);
|
|
335
337
|
const P = () => {
|
|
336
338
|
I.style.left = this.parent._mapLinear(
|
|
337
|
-
|
|
338
|
-
|
|
339
|
+
c[o],
|
|
340
|
+
f,
|
|
339
341
|
b,
|
|
340
342
|
0,
|
|
341
343
|
_.clientWidth
|
|
342
344
|
) + "px", I.style.top = this.parent._mapLinear(
|
|
343
|
-
|
|
344
|
-
|
|
345
|
+
n[a],
|
|
346
|
+
g,
|
|
345
347
|
u,
|
|
346
348
|
_.clientHeight,
|
|
347
349
|
0
|
|
@@ -349,14 +351,14 @@ class G {
|
|
|
349
351
|
};
|
|
350
352
|
P(), new ResizeObserver(() => {
|
|
351
353
|
P();
|
|
352
|
-
}).observe(_), Object.defineProperty(
|
|
354
|
+
}).observe(_), Object.defineProperty(c, o, {
|
|
353
355
|
set: (v) => {
|
|
354
|
-
this.parent.propReferences[U] = v, P(), E.textContent = String(v) + ", " +
|
|
356
|
+
this.parent.propReferences[U] = v, P(), E.textContent = String(v) + ", " + n[a];
|
|
355
357
|
},
|
|
356
358
|
get: () => this.parent.propReferences[U]
|
|
357
|
-
}), Object.defineProperty(
|
|
359
|
+
}), Object.defineProperty(n, a, {
|
|
358
360
|
set: (v) => {
|
|
359
|
-
this.parent.propReferences[L] = v, P(), E.textContent =
|
|
361
|
+
this.parent.propReferences[L] = v, P(), E.textContent = c[o] + ", " + String(v);
|
|
360
362
|
},
|
|
361
363
|
get: () => this.parent.propReferences[L]
|
|
362
364
|
});
|
|
@@ -365,7 +367,7 @@ class G {
|
|
|
365
367
|
return this.callback = t, this;
|
|
366
368
|
}
|
|
367
369
|
}
|
|
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
|
|
370
|
+
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;touch-action:none}.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%;touch-action:none}.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;pointer-events:none}.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
371
|
function oe(k) {
|
|
370
372
|
return `
|
|
371
373
|
.p-gui {
|
|
@@ -610,7 +612,7 @@ class C {
|
|
|
610
612
|
e.className = "p-gui__content", this.domElement.append(e), this.wrapper = document.createElement("div"), this.wrapper.className = "p-gui__inner", e.append(this.wrapper);
|
|
611
613
|
}
|
|
612
614
|
button(t = {}) {
|
|
613
|
-
return this.imageContainer = null, new
|
|
615
|
+
return this.imageContainer = null, new S(this, t);
|
|
614
616
|
}
|
|
615
617
|
image(t = {}) {
|
|
616
618
|
return this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer)), new z(this, t);
|
|
@@ -633,54 +635,54 @@ class C {
|
|
|
633
635
|
folder(t = {}) {
|
|
634
636
|
let e = typeof t.closed == "boolean" ? t.closed : !1, r = t.label || "", d = t.color || null, i = t.maxHeight || null;
|
|
635
637
|
this.imageContainer = null;
|
|
636
|
-
let
|
|
637
|
-
this.folders.length == 0 && (
|
|
638
|
-
let
|
|
639
|
-
|
|
638
|
+
let l = "p-gui__folder";
|
|
639
|
+
this.folders.length == 0 && (l += " p-gui__folder--first"), e && (l += " p-gui__folder--closed");
|
|
640
|
+
let c = d ? `background-color: ${d};` : "";
|
|
641
|
+
c += i ? `max-height: ${i}px; overflow-y: auto;` : "";
|
|
642
|
+
const n = document.createElement("div");
|
|
643
|
+
n.className = l, n.style = c, this.wrapper.append(n);
|
|
640
644
|
const o = document.createElement("div");
|
|
641
|
-
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);
|
|
645
|
+
o.innerHTML = `<span class="p-gui__folder-arrow"></span>${r}`, o.className = "p-gui__folder-header", n.append(o);
|
|
644
646
|
const a = document.createElement("div");
|
|
645
|
-
a.className = "p-gui__folder-content",
|
|
647
|
+
a.className = "p-gui__folder-content", n.append(a);
|
|
646
648
|
const h = document.createElement("div");
|
|
647
|
-
h.className = "p-gui__folder-inner", a.append(h),
|
|
648
|
-
|
|
649
|
+
h.className = "p-gui__folder-inner", a.append(h), o.addEventListener("click", () => {
|
|
650
|
+
n.classList.toggle("p-gui__folder--closed");
|
|
649
651
|
});
|
|
650
|
-
let
|
|
652
|
+
let p = new C({
|
|
651
653
|
isFolder: !0,
|
|
652
654
|
folderOptions: {
|
|
653
|
-
wrapper:
|
|
655
|
+
wrapper: n,
|
|
654
656
|
inner: h,
|
|
655
657
|
parent: this,
|
|
656
658
|
firstParent: this.firstParent
|
|
657
659
|
}
|
|
658
660
|
});
|
|
659
|
-
return this.folders.push(
|
|
661
|
+
return this.folders.push(p), p;
|
|
660
662
|
}
|
|
661
663
|
tabs(t = {}) {
|
|
662
664
|
const e = Array.isArray(t.tabs) ? t.tabs : [], r = t.active || 0, d = t.color || null, i = t.maxHeight || null;
|
|
663
665
|
this.imageContainer = null;
|
|
664
|
-
let
|
|
665
|
-
this.tabsArray.length == 0 && (
|
|
666
|
-
let
|
|
667
|
-
|
|
666
|
+
let l = "p-gui__tabs";
|
|
667
|
+
this.tabsArray.length == 0 && (l += " p-gui__tabs--first");
|
|
668
|
+
let c = d ? `background-color: ${d};` : "";
|
|
669
|
+
c += i ? `max-height: ${i}px; overflow-y: auto;` : "";
|
|
670
|
+
const n = document.createElement("div");
|
|
671
|
+
n.className = l, n.style = c, this.wrapper.append(n);
|
|
668
672
|
const o = document.createElement("div");
|
|
669
|
-
o.className = p,
|
|
670
|
-
const s = document.createElement("div");
|
|
671
|
-
s.className = "p-gui__tabs-header", o.append(s);
|
|
673
|
+
o.className = "p-gui__tabs-header", n.append(o);
|
|
672
674
|
const a = document.createElement("div");
|
|
673
|
-
a.className = "p-gui__tabs-content",
|
|
675
|
+
a.className = "p-gui__tabs-content", n.append(a);
|
|
674
676
|
const h = [];
|
|
675
|
-
e.forEach((
|
|
676
|
-
const b = typeof
|
|
677
|
-
|
|
677
|
+
e.forEach((s, f) => {
|
|
678
|
+
const b = typeof s == "string" ? s : s.label || `Tab ${f + 1}`, g = document.createElement("button");
|
|
679
|
+
g.className = "p-gui__tab-button", f === r && (g.className += " p-gui__tab-button--active"), g.textContent = b, o.append(g);
|
|
678
680
|
const u = document.createElement("div");
|
|
679
|
-
u.className = "p-gui__tab-pane",
|
|
681
|
+
u.className = "p-gui__tab-pane", f === r && (u.className += " p-gui__tab-pane--active"), a.append(u);
|
|
680
682
|
const m = new C({
|
|
681
683
|
isFolder: !0,
|
|
682
684
|
folderOptions: {
|
|
683
|
-
wrapper:
|
|
685
|
+
wrapper: n,
|
|
684
686
|
inner: u,
|
|
685
687
|
parent: this,
|
|
686
688
|
firstParent: this.firstParent
|
|
@@ -688,28 +690,28 @@ class C {
|
|
|
688
690
|
});
|
|
689
691
|
h.push({
|
|
690
692
|
gui: m,
|
|
691
|
-
button:
|
|
693
|
+
button: g,
|
|
692
694
|
pane: u
|
|
693
|
-
}),
|
|
695
|
+
}), g.addEventListener("click", () => {
|
|
694
696
|
h.forEach((x) => {
|
|
695
697
|
x.button.classList.remove("p-gui__tab-button--active"), x.pane.classList.remove("p-gui__tab-pane--active");
|
|
696
|
-
}),
|
|
698
|
+
}), g.classList.add("p-gui__tab-button--active"), u.classList.add("p-gui__tab-pane--active");
|
|
697
699
|
});
|
|
698
700
|
});
|
|
699
|
-
const
|
|
701
|
+
const p = new C({
|
|
700
702
|
isFolder: !0,
|
|
701
703
|
folderOptions: {
|
|
702
|
-
wrapper:
|
|
704
|
+
wrapper: n,
|
|
703
705
|
inner: h[r]?.pane || document.createElement("div"),
|
|
704
706
|
parent: this,
|
|
705
707
|
firstParent: this.firstParent
|
|
706
708
|
}
|
|
707
709
|
});
|
|
708
|
-
return
|
|
709
|
-
|
|
710
|
-
},
|
|
711
|
-
(
|
|
712
|
-
),
|
|
710
|
+
return p.getTab = (s) => h[s]?.gui || null, p.getTabElement = (s) => h[s]?.button || null, p.setActiveTab = (s) => {
|
|
711
|
+
s >= 0 && s < h.length && h[s].button.click();
|
|
712
|
+
}, p.getActiveTab = () => h.findIndex(
|
|
713
|
+
(s) => s.button.classList.contains("p-gui__tab-button--active")
|
|
714
|
+
), p.element = n, this.tabsArray.push(p), p;
|
|
713
715
|
}
|
|
714
716
|
_makeDraggable() {
|
|
715
717
|
var t = this;
|