perfect-gui 4.12.8 → 4.12.10
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 +152 -127
- package/package.json +6 -2
- package/src/styles/styles.js +1 -0
package/dist/perfect-gui.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
let
|
|
1
|
+
let M = class {
|
|
2
2
|
constructor(t, e = {}, i) {
|
|
3
3
|
this.parent = t;
|
|
4
4
|
let s = "";
|
|
@@ -30,10 +30,10 @@ class N {
|
|
|
30
30
|
(this.prop != null && this.obj == null || this.prop == null && this.obj != null) && console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'), a = (this.max - this.min) / 2;
|
|
31
31
|
const o = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null, r = document.createElement("div");
|
|
32
32
|
r.className = "p-gui__slider", o && r.setAttribute("title", o), this.parent.wrapper.append(r);
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
return
|
|
33
|
+
const d = document.createElement("div");
|
|
34
|
+
d.className = "p-gui__slider-name", d.textContent = s, r.append(d), 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), r.append(this.ctrlDiv);
|
|
35
|
+
const c = document.createElement("div");
|
|
36
|
+
return 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] : a, r.append(this.valueInput), setTimeout(() => {
|
|
37
37
|
const n = this.handle.offsetWidth;
|
|
38
38
|
this.handle.position = this._mapLinear(this.valueInput.value, this.min, this.max, n / 2, 88 - n / 2), this.handle.position = Math.min(this.handle.position, 88 - n / 2), this.handle.position = Math.max(this.handle.position, n / 2), this.handle.style.transform = `translate(-50%, -50%) translateX(${this.handle.position}px)`, this.filling.style.width = `${this.handle.position}px`;
|
|
39
39
|
}, 0), this.valueInput.addEventListener("change", () => {
|
|
@@ -57,8 +57,8 @@ class N {
|
|
|
57
57
|
e ? o = t.offsetX : o = this.handle.position + l, o = Math.max(s / 2, Math.min(o, i - s / 2));
|
|
58
58
|
let r = this.min + (this.max - this.min) * (o - s / 2) / (i - s);
|
|
59
59
|
r > a ? r = this._quantizeFloor(r, this.step) : r = this._quantizeCeil(r, this.step), r = parseFloat(r.toFixed(9));
|
|
60
|
-
const
|
|
61
|
-
(r >=
|
|
60
|
+
const d = parseFloat((a + this.step).toFixed(9)), c = parseFloat((a - this.step).toFixed(9));
|
|
61
|
+
(r >= d || r <= c) && (r = r.toFixed(this.decimals), this.valueInput.value = r, this.ctrlDiv.prevPosition = t.clientX, this.handle.style.transform = `translate(-50%, -50%) translateX(${o}px)`, this.handle.position = o, this.filling.style.width = this.handle.position + "px", this._triggerCallbacks());
|
|
62
62
|
}
|
|
63
63
|
_updateHandlePositionFromValue() {
|
|
64
64
|
const t = this.ctrlDiv.offsetWidth, e = this.handle.offsetWidth;
|
|
@@ -81,7 +81,7 @@ class N {
|
|
|
81
81
|
return e * Math.floor(t / e);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
|
-
class
|
|
84
|
+
class H {
|
|
85
85
|
constructor(t, e = {}, i) {
|
|
86
86
|
if (this.parent = t, typeof e != "object")
|
|
87
87
|
throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);
|
|
@@ -92,26 +92,26 @@ class S {
|
|
|
92
92
|
throw typeof e.path == null ? Error("[GUI] image() path must be provided.") : Error("[GUI] image() path must be a string.");
|
|
93
93
|
let l = s.replace(/^.*[\\\/]/, ""), a;
|
|
94
94
|
e.label == null ? a = l : a = typeof e.label == "string" && e.label || " ";
|
|
95
|
-
const o = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? a : null, r = e.selected === !0,
|
|
96
|
-
let
|
|
97
|
-
e.width && (typeof e.width == "number" && (e.width += "px"),
|
|
95
|
+
const o = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? a : null, r = e.selected === !0, d = e.selectionBorder !== !1;
|
|
96
|
+
let c = "";
|
|
97
|
+
e.width && (typeof e.width == "number" && (e.width += "px"), c += `flex: 0 0 calc(${e.width} - 5px); `), e.height && (typeof e.height == "number" && (e.height += "px"), c += `height: ${e.height}; `);
|
|
98
98
|
const n = document.createElement("div");
|
|
99
|
-
n.className = "p-gui__image", n.style = "background-image: url(" + s + "); " +
|
|
100
|
-
const
|
|
101
|
-
return
|
|
102
|
-
let
|
|
103
|
-
for (let
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
n.className = "p-gui__image", n.style = "background-image: url(" + s + "); " + c, o && n.setAttribute("title", o), this.parent.imageContainer.append(n), r && d && n.classList.add("p-gui__image--selected");
|
|
100
|
+
const f = document.createElement("div");
|
|
101
|
+
return f.className = "p-gui__image-text", f.textContent = a, n.append(f), n.addEventListener("click", () => {
|
|
102
|
+
let p = n.parentElement.querySelectorAll(".p-gui__image--selected");
|
|
103
|
+
for (let h = 0; h < p.length; h++)
|
|
104
|
+
p[h].classList.remove("p-gui__image--selected");
|
|
105
|
+
d && n.classList.add("p-gui__image--selected"), typeof i == "function" && i({ path: s, text: a }), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
|
|
106
106
|
}), n;
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
|
-
class
|
|
109
|
+
class S {
|
|
110
110
|
constructor(t, e = {}, i) {
|
|
111
111
|
if (this.parent = t, typeof e != "object")
|
|
112
112
|
throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);
|
|
113
|
-
let s = typeof e.label == "string" && e.label || " ", l = !1, a = null, o = e.obj, r = e.prop,
|
|
114
|
-
if (
|
|
113
|
+
let s = typeof e.label == "string" && e.label || " ", l = !1, a = null, o = e.obj, r = e.prop, d = typeof e.value == "boolean" ? e.value : null;
|
|
114
|
+
if (d !== null)
|
|
115
115
|
(r != null || o != null) && console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
|
|
116
116
|
else if (r != null && o != null) {
|
|
117
117
|
if (typeof r != "string")
|
|
@@ -121,34 +121,34 @@ class X {
|
|
|
121
121
|
s == " " && (s = r), a = this.parent.propReferences.push(o[r]) - 1, l = !0;
|
|
122
122
|
} else
|
|
123
123
|
(r != null && o == null || r == null && o == null) && console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');
|
|
124
|
-
const
|
|
125
|
-
n.textContent = s, n.className = "p-gui__toggle",
|
|
126
|
-
const
|
|
127
|
-
let
|
|
128
|
-
|
|
124
|
+
const c = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null, n = document.createElement("div");
|
|
125
|
+
n.textContent = s, n.className = "p-gui__toggle", c && n.setAttribute("title", c), n.addEventListener("click", (h) => {
|
|
126
|
+
const u = h.target.childNodes[1];
|
|
127
|
+
let g = !0;
|
|
128
|
+
u.classList.contains("p-gui__toggle-checkbox--active") && (g = !1), u.classList.toggle("p-gui__toggle-checkbox--active"), l ? o[r] = g : typeof i == "function" && i(g), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
|
|
129
129
|
});
|
|
130
|
-
let
|
|
131
|
-
const
|
|
132
|
-
return
|
|
133
|
-
set: (
|
|
134
|
-
this.parent.propReferences[a] =
|
|
130
|
+
let f = l ? o[r] ? " p-gui__toggle-checkbox--active" : "" : d ? " p-gui__toggle-checkbox--active" : "";
|
|
131
|
+
const p = document.createElement("div");
|
|
132
|
+
return p.className = "p-gui__toggle-checkbox" + f, n.append(p), l && Object.defineProperty(o, r, {
|
|
133
|
+
set: (h) => {
|
|
134
|
+
this.parent.propReferences[a] = h, h ? p.classList.add("p-gui__toggle-checkbox--active") : p.classList.remove("p-gui__toggle-checkbox--active"), typeof i == "function" && i(h);
|
|
135
135
|
},
|
|
136
136
|
get: () => this.parent.propReferences[a]
|
|
137
137
|
}), n;
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
|
-
class
|
|
140
|
+
class X {
|
|
141
141
|
constructor(t, e = {}, i) {
|
|
142
142
|
if (this.parent = t, typeof e != "object")
|
|
143
143
|
throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);
|
|
144
|
-
let s = typeof e.label == "string" ? e.label : " ", l = !1, a = null, o = e.obj, r = e.prop,
|
|
145
|
-
const
|
|
144
|
+
let s = typeof e.label == "string" ? e.label : " ", l = !1, a = null, o = e.obj, r = e.prop, d = Array.isArray(e.values) ? e.values : null, c, n = typeof d[0] != "string";
|
|
145
|
+
const f = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null;
|
|
146
146
|
if (i = typeof i == "function" ? i : null, e.value !== void 0 || e.value === void 0 && o === void 0 && r === void 0)
|
|
147
|
-
(r != null || o != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),
|
|
148
|
-
if (!
|
|
147
|
+
(r != null || o != null) && console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'), c = (() => {
|
|
148
|
+
if (!d)
|
|
149
149
|
return null;
|
|
150
150
|
if (typeof e.value == "string")
|
|
151
|
-
return
|
|
151
|
+
return d.indexOf(e.value);
|
|
152
152
|
if (typeof e.value == "number")
|
|
153
153
|
return e.value;
|
|
154
154
|
})();
|
|
@@ -157,43 +157,43 @@ class W {
|
|
|
157
157
|
throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof r}.`);
|
|
158
158
|
if (typeof o != "object")
|
|
159
159
|
throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof o}.`);
|
|
160
|
-
|
|
161
|
-
if (!
|
|
160
|
+
c = (() => {
|
|
161
|
+
if (!d)
|
|
162
162
|
return null;
|
|
163
163
|
if (typeof o[r] == "string")
|
|
164
|
-
return n ?
|
|
164
|
+
return n ? d.find((u) => u.value === o[r]).value : d.indexOf(o[r]);
|
|
165
165
|
if (typeof o[r] == "number")
|
|
166
|
-
return n ?
|
|
166
|
+
return n ? d.find((u) => u.value === o[r]).value : o[r];
|
|
167
167
|
})(), a = this.parent.propReferences.push(o[r]) - 1, l = !0;
|
|
168
168
|
} else
|
|
169
169
|
(r != null && o == null || r == null && o == null) && console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');
|
|
170
|
-
let
|
|
171
|
-
|
|
172
|
-
let
|
|
173
|
-
return
|
|
174
|
-
l ? o[r] =
|
|
175
|
-
}),
|
|
176
|
-
const b = n ?
|
|
177
|
-
let
|
|
178
|
-
|
|
170
|
+
let p = document.createElement("div");
|
|
171
|
+
p.className = "p-gui__list", p.textContent = s, f && p.setAttribute("title", f), this.parent.wrapper.append(p);
|
|
172
|
+
let h = document.createElement("select");
|
|
173
|
+
return p.append(h), h.className = "p-gui__list-dropdown", h.addEventListener("change", (u) => {
|
|
174
|
+
l ? o[r] = u.target.value : i && i(u.target.value), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
|
|
175
|
+
}), d && d.forEach((u, g) => {
|
|
176
|
+
const b = n ? u.label : u, v = n ? u.value : u;
|
|
177
|
+
let x = document.createElement("option");
|
|
178
|
+
x.setAttribute("value", v), x.textContent = b, h.append(x), (!n && c == g || n && c == v) && x.setAttribute("selected", "");
|
|
179
179
|
}), l && Object.defineProperty(o, r, {
|
|
180
|
-
set: (
|
|
181
|
-
let
|
|
182
|
-
n ? (v =
|
|
183
|
-
const
|
|
184
|
-
|
|
180
|
+
set: (u) => {
|
|
181
|
+
let g, b, v;
|
|
182
|
+
n ? (v = d.find((w) => w.value == u), b = v?.value || d[0].value, g = d.indexOf(v)) : (typeof u == "string" && (g = d.indexOf(u), b = u), typeof u == "number" && (g = u, b = d[u])), this.parent.propReferences[a] = n ? b : u;
|
|
183
|
+
const x = h.querySelector("[selected]");
|
|
184
|
+
x && x.removeAttribute("selected"), h.querySelectorAll("option")[g].setAttribute("selected", ""), typeof i == "function" && i(n ? v : b, g);
|
|
185
185
|
},
|
|
186
186
|
get: () => this.parent.propReferences[a]
|
|
187
|
-
}),
|
|
187
|
+
}), p;
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
|
-
class
|
|
190
|
+
class W {
|
|
191
191
|
constructor(t, e = {}, i) {
|
|
192
192
|
if (this.parent = t, typeof e != "object")
|
|
193
193
|
throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);
|
|
194
|
-
let s = typeof e.label == "string" && e.label || " ", l = !1, a = null, o = e.obj, r = e.prop,
|
|
195
|
-
const
|
|
196
|
-
if (typeof e.value == "string" && (e.value.length != 7 || e.value[0] != "#" ? console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`) :
|
|
194
|
+
let s = typeof e.label == "string" && e.label || " ", l = !1, a = null, o = e.obj, r = e.prop, d;
|
|
195
|
+
const c = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null;
|
|
196
|
+
if (typeof e.value == "string" && (e.value.length != 7 || e.value[0] != "#" ? console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`) : d = e.value), d || (d = "#000000"), e.value !== void 0)
|
|
197
197
|
(r != null || o != null) && console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');
|
|
198
198
|
else if (r != null && o != null) {
|
|
199
199
|
if (typeof r != "string")
|
|
@@ -204,72 +204,72 @@ class G {
|
|
|
204
204
|
} else
|
|
205
205
|
(r != null && o == null || r == null && o == null) && console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');
|
|
206
206
|
const n = document.createElement("div");
|
|
207
|
-
n.className = "p-gui__color", n.textContent = s,
|
|
208
|
-
const
|
|
209
|
-
return
|
|
210
|
-
l ? o[r] =
|
|
207
|
+
n.className = "p-gui__color", n.textContent = s, c && n.setAttribute("title", c), this.parent.wrapper.append(n);
|
|
208
|
+
const f = document.createElement("input");
|
|
209
|
+
return f.className = "p-gui__color-picker", f.setAttribute("type", "color"), f.value = d, n.append(f), typeof i == "function" && f.addEventListener("input", () => {
|
|
210
|
+
l ? o[r] = f.value : typeof i == "function" && i(f.value), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
|
|
211
211
|
}), l && Object.defineProperty(o, r, {
|
|
212
|
-
set: (
|
|
213
|
-
this.parent.propReferences[a] =
|
|
212
|
+
set: (p) => {
|
|
213
|
+
this.parent.propReferences[a] = p, f.value = p, typeof i == "function" && i(p);
|
|
214
214
|
},
|
|
215
215
|
get: () => this.parent.propReferences[a]
|
|
216
216
|
}), n;
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
|
-
class
|
|
219
|
+
class G {
|
|
220
220
|
constructor(t, e = {}, i) {
|
|
221
221
|
if (this.parent = t, typeof e != "object")
|
|
222
222
|
throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);
|
|
223
223
|
let s = typeof e.label == "string" && e.label || " ";
|
|
224
|
-
const l = e.x.min ?? 0, a = e.x.max ?? 1, o = e.y.min ?? 0, r = e.y.max ?? 1,
|
|
224
|
+
const l = e.x.min ?? 0, a = e.x.max ?? 1, o = e.y.min ?? 0, r = e.y.max ?? 1, d = e.x.step || (a - l) / 100, c = e.y.step || (r - o) / 100, n = this.parent._countDecimals(d), f = this.parent._countDecimals(c), p = e.x.obj, h = e.x.prop, u = this.parent.propReferences.push(p[h]) - 1, g = e.y.obj, b = e.y.prop, v = this.parent.propReferences.push(g[b]) - 1, x = typeof e.tooltip == "string" ? e.tooltip : e.tooltip === !0 ? s : null;
|
|
225
225
|
i = typeof i == "function" ? i : null;
|
|
226
226
|
const w = document.createElement("div");
|
|
227
|
-
w.className = "p-gui__vector2", w.textContent = s,
|
|
227
|
+
w.className = "p-gui__vector2", w.textContent = s, x && w.setAttribute("title", x), this.parent.wrapper.append(w);
|
|
228
228
|
const A = document.createElement("div");
|
|
229
|
-
A.className = "p-gui__vector-value", A.textContent =
|
|
229
|
+
A.className = "p-gui__vector-value", A.textContent = p[h] + ", " + g[b], w.append(A);
|
|
230
230
|
const _ = document.createElement("div");
|
|
231
|
-
_.className = "p-gui__vector2-area", w.append(_), _.addEventListener("click", (
|
|
232
|
-
const
|
|
233
|
-
|
|
231
|
+
_.className = "p-gui__vector2-area", w.append(_), _.addEventListener("click", (m) => {
|
|
232
|
+
const U = parseFloat(this.parent._mapLinear(m.offsetX, 0, _.clientWidth, l, a)), I = parseFloat(this.parent._mapLinear(m.offsetY, 0, _.clientHeight, r, o));
|
|
233
|
+
p[h] = U.toFixed(n), g[b] = I.toFixed(f), i && i(p[h], p[b]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
|
|
234
234
|
});
|
|
235
|
-
const
|
|
236
|
-
const
|
|
237
|
-
|
|
235
|
+
const j = (m) => {
|
|
236
|
+
const U = _.getBoundingClientRect(), I = m.clientX - U.left, O = m.clientY - U.top, $ = this.parent._mapLinear(I, 0, _.clientWidth, l, a), D = this.parent._mapLinear(O, 0, _.clientHeight, r, o), L = Math.max(l, Math.min(a, $)), F = Math.max(o, Math.min(r, D));
|
|
237
|
+
p[h] = parseFloat(L.toFixed(n)), g[b] = parseFloat(F.toFixed(f)), i && i(p[h], g[b]), this.parent.onUpdate ? this.parent.onUpdate() : this.parent.isFolder && this.parent.firstParent.onUpdate && this.parent.firstParent.onUpdate();
|
|
238
238
|
};
|
|
239
|
-
_.addEventListener("pointerdown", (
|
|
240
|
-
|
|
241
|
-
document.removeEventListener("pointermove",
|
|
239
|
+
_.addEventListener("pointerdown", (m) => {
|
|
240
|
+
j(m), document.addEventListener("pointermove", j), document.addEventListener("pointerup", () => {
|
|
241
|
+
document.removeEventListener("pointermove", j);
|
|
242
242
|
}, { once: !0 });
|
|
243
243
|
});
|
|
244
244
|
const R = document.createElement("div");
|
|
245
245
|
R.className = "p-gui__vector2-line p-gui__vector2-line-x", _.append(R);
|
|
246
246
|
const P = document.createElement("div");
|
|
247
247
|
P.className = "p-gui__vector2-line p-gui__vector2-line-y", _.append(P);
|
|
248
|
-
const
|
|
249
|
-
|
|
250
|
-
const
|
|
251
|
-
|
|
248
|
+
const E = document.createElement("div");
|
|
249
|
+
E.className = "p-gui__vector2-dot", _.append(E);
|
|
250
|
+
const k = () => {
|
|
251
|
+
E.style.left = this.parent._mapLinear(p[h], l, a, 0, _.clientWidth) + "px", E.style.top = this.parent._mapLinear(g[b], o, r, _.clientHeight, 0) + "px";
|
|
252
252
|
};
|
|
253
|
-
return
|
|
254
|
-
|
|
255
|
-
}).observe(_), Object.defineProperty(
|
|
256
|
-
set: (
|
|
257
|
-
this.parent.propReferences[
|
|
253
|
+
return k(), new ResizeObserver(() => {
|
|
254
|
+
k();
|
|
255
|
+
}).observe(_), Object.defineProperty(p, h, {
|
|
256
|
+
set: (m) => {
|
|
257
|
+
this.parent.propReferences[u] = m, k(), A.textContent = String(m) + ", " + g[b];
|
|
258
258
|
},
|
|
259
|
-
get: () => this.parent.propReferences[
|
|
260
|
-
}), Object.defineProperty(
|
|
261
|
-
set: (
|
|
262
|
-
this.parent.propReferences[v] =
|
|
259
|
+
get: () => this.parent.propReferences[u]
|
|
260
|
+
}), Object.defineProperty(g, b, {
|
|
261
|
+
set: (m) => {
|
|
262
|
+
this.parent.propReferences[v] = m, k(), A.textContent = p[h] + ", " + String(m);
|
|
263
263
|
},
|
|
264
264
|
get: () => this.parent.propReferences[v]
|
|
265
265
|
}), w;
|
|
266
266
|
}
|
|
267
267
|
}
|
|
268
|
-
const
|
|
268
|
+
const Y = ".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}", z = ".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}", B = ".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}", V = ".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}", T = ".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}", Q = ".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}", q = '.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}', J = ".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)}";
|
|
269
269
|
function Z(y) {
|
|
270
|
-
return
|
|
270
|
+
return `
|
|
271
271
|
.p-gui {
|
|
272
|
-
--main-border-radius:
|
|
272
|
+
--main-border-radius: 6px;
|
|
273
273
|
--color-bg: #161616;
|
|
274
274
|
--color-border: #222222;
|
|
275
275
|
--color-border-2: transparent;
|
|
@@ -283,15 +283,11 @@ function Z(y) {
|
|
|
283
283
|
top: 0;
|
|
284
284
|
left: 0;
|
|
285
285
|
transform: translate3d(0,0,0);
|
|
286
|
-
padding-top: 21px;
|
|
287
|
-
padding-inline: 3px;
|
|
288
286
|
background: var(--color-bg);
|
|
289
|
-
display:
|
|
290
|
-
|
|
291
|
-
flex-wrap: wrap;
|
|
287
|
+
display: flex;
|
|
288
|
+
flex-direction: column;
|
|
292
289
|
font-family: "Arial Rounded MT Bold", Arial, sans-serif;
|
|
293
290
|
width: 290px;
|
|
294
|
-
overflow: auto;
|
|
295
291
|
box-shadow: 0 0 2px black;
|
|
296
292
|
box-sizing: border-box;
|
|
297
293
|
z-index: 99999;
|
|
@@ -301,8 +297,36 @@ function Z(y) {
|
|
|
301
297
|
border: 1px solid var(--color-border);
|
|
302
298
|
line-height: normal;
|
|
303
299
|
transition: var(--transition) opacity;
|
|
300
|
+
overflow: hidden;
|
|
304
301
|
}
|
|
305
302
|
|
|
303
|
+
.p-gui__content {
|
|
304
|
+
display: grid;
|
|
305
|
+
grid-template-rows: 1fr;
|
|
306
|
+
transition: 250ms grid-template-rows ease;
|
|
307
|
+
overflow: hidden;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.p-gui__inner {
|
|
311
|
+
padding-top: 1px;
|
|
312
|
+
padding-inline: 3px;
|
|
313
|
+
overflow: hidden;
|
|
314
|
+
min-height: 0;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.p-gui:not(.p-gui--collapsed) .p-gui__inner {
|
|
318
|
+
animation: p-gui-reveal-scroll 0s 250ms forwards;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
@keyframes p-gui-reveal-scroll {
|
|
322
|
+
from { overflow: hidden; }
|
|
323
|
+
to { overflow: auto; }
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.p-gui--collapsed .p-gui__content {
|
|
327
|
+
grid-template-rows: 0fr;
|
|
328
|
+
}
|
|
329
|
+
|
|
306
330
|
.p-gui:hover {
|
|
307
331
|
opacity: 1!important;
|
|
308
332
|
}
|
|
@@ -330,14 +354,8 @@ function Z(y) {
|
|
|
330
354
|
border: 1px solid #2f2f2f;
|
|
331
355
|
}
|
|
332
356
|
|
|
333
|
-
.p-gui--collapsed {
|
|
334
|
-
height: 0;
|
|
335
|
-
padding: 21px 10px 0 10px;
|
|
336
|
-
overflow: hidden;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
357
|
.p-gui__header {
|
|
340
|
-
position:
|
|
358
|
+
position: relative;
|
|
341
359
|
top: 0;
|
|
342
360
|
left: 0;
|
|
343
361
|
width: 100%;
|
|
@@ -395,7 +413,7 @@ function Z(y) {
|
|
|
395
413
|
border-color: rgba(255,255,255,.2);
|
|
396
414
|
}
|
|
397
415
|
|
|
398
|
-
${
|
|
416
|
+
${Y}
|
|
399
417
|
|
|
400
418
|
${q}
|
|
401
419
|
|
|
@@ -414,7 +432,7 @@ function Z(y) {
|
|
|
414
432
|
}
|
|
415
433
|
class C {
|
|
416
434
|
constructor(t = {}) {
|
|
417
|
-
if (
|
|
435
|
+
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) {
|
|
418
436
|
this._folderConstructor(t.folderOptions);
|
|
419
437
|
return;
|
|
420
438
|
}
|
|
@@ -445,7 +463,7 @@ class C {
|
|
|
445
463
|
}`);
|
|
446
464
|
}
|
|
447
465
|
_folderConstructor(t) {
|
|
448
|
-
this.
|
|
466
|
+
this.domElement = t.wrapper, this.isFolder = !0, this.parent = t.parent, this.firstParent = t.firstParent, this.wrapper = t.inner;
|
|
449
467
|
}
|
|
450
468
|
_parseScreenCorner(t) {
|
|
451
469
|
let e = { x: "right", y: "top" };
|
|
@@ -463,7 +481,7 @@ class C {
|
|
|
463
481
|
let t = this._getScrollbarWidth(this.container);
|
|
464
482
|
if (this.xOffset = this.screenCorner.x == "left" ? 0 : this.container.clientWidth - this.wrapperWidth - t, this.instanceId > 0) {
|
|
465
483
|
let e = this.container.querySelectorAll(
|
|
466
|
-
`.p-gui:not(#${this.
|
|
484
|
+
`.p-gui:not(#${this.domElement.id}):not([data-dragged])`
|
|
467
485
|
);
|
|
468
486
|
for (let i = 0; i < e.length && !(parseInt(
|
|
469
487
|
e[i].id.replace("p-gui-", "")
|
|
@@ -475,38 +493,40 @@ class C {
|
|
|
475
493
|
prevY: this.yOffset,
|
|
476
494
|
x: this.xOffset,
|
|
477
495
|
y: this.yOffset
|
|
478
|
-
}, this.
|
|
496
|
+
}, this.domElement.style.transform = `translate3d(${this.position.x}px, ${this.position.y}px, 0)`;
|
|
479
497
|
}
|
|
480
498
|
_addStyles(t) {
|
|
481
499
|
this.stylesheet.innerHTML += t;
|
|
482
500
|
}
|
|
483
501
|
_addWrapper() {
|
|
484
|
-
this.
|
|
502
|
+
this.domElement = document.createElement("div"), this.domElement.id = "p-gui-" + this.instanceId, this.domElement.className = "p-gui", this.domElement.setAttribute("data-lenis-prevent", ""), this.container.append(this.domElement), this.header = document.createElement("div"), this.header.className = "p-gui__header", this.header.textContent = this.label, this.header.style = `${this.backgroundColor ? "border-color: " + this.backgroundColor + ";" : ""}`, this.domElement.append(this.header);
|
|
485
503
|
const t = document.createElement("div");
|
|
486
504
|
t.className = "p-gui__header-close", t.addEventListener("click", this.toggleClose.bind(this)), this.header.append(t);
|
|
505
|
+
const e = document.createElement("div");
|
|
506
|
+
e.className = "p-gui__content", this.domElement.append(e), this.wrapper = document.createElement("div"), this.wrapper.className = "p-gui__inner", e.append(this.wrapper);
|
|
487
507
|
}
|
|
488
508
|
button(t = {}, e) {
|
|
489
|
-
return this.imageContainer = null, new
|
|
509
|
+
return this.imageContainer = null, new M(this, t, e);
|
|
490
510
|
}
|
|
491
511
|
image(t = {}, e) {
|
|
492
|
-
return this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer)), new
|
|
512
|
+
return this.imageContainer || (this.imageContainer = document.createElement("div"), this.imageContainer.className = "p-gui__image-container", this.wrapper.append(this.imageContainer)), new H(this, t, e);
|
|
493
513
|
}
|
|
494
514
|
slider(t = {}, e) {
|
|
495
515
|
return this.imageContainer = null, new N(this, t, e);
|
|
496
516
|
}
|
|
497
517
|
toggle(t = {}, e) {
|
|
498
518
|
this.imageContainer = null;
|
|
499
|
-
const i = new
|
|
519
|
+
const i = new S(this, t, e);
|
|
500
520
|
return this.wrapper.append(i), i;
|
|
501
521
|
}
|
|
502
522
|
list(t = {}, e) {
|
|
503
|
-
return this.imageContainer = null, new
|
|
523
|
+
return this.imageContainer = null, new X(this, t, e);
|
|
504
524
|
}
|
|
505
525
|
color(t = {}, e) {
|
|
506
|
-
return this.imageContainer = null, new
|
|
526
|
+
return this.imageContainer = null, new W(this, t, e);
|
|
507
527
|
}
|
|
508
528
|
vector2(t = {}, e) {
|
|
509
|
-
return this.imageContainer = null, new
|
|
529
|
+
return this.imageContainer = null, new G(this, t, e);
|
|
510
530
|
}
|
|
511
531
|
folder(t = {}) {
|
|
512
532
|
let e = typeof t.closed == "boolean" ? t.closed : !1, i = t.label || "", s = t.color || null, l = t.maxHeight || null;
|
|
@@ -517,19 +537,24 @@ class C {
|
|
|
517
537
|
o += l ? `max-height: ${l}px;` : "";
|
|
518
538
|
const r = document.createElement("div");
|
|
519
539
|
r.className = a, r.style = o, this.wrapper.append(r);
|
|
520
|
-
const
|
|
521
|
-
|
|
540
|
+
const d = document.createElement("div");
|
|
541
|
+
d.innerHTML = `<span class="p-gui__folder-arrow"></span>${i}`, d.className = "p-gui__folder-header", r.append(d);
|
|
542
|
+
const c = document.createElement("div");
|
|
543
|
+
c.className = "p-gui__folder-content", r.append(c);
|
|
544
|
+
const n = document.createElement("div");
|
|
545
|
+
n.className = "p-gui__folder-inner", c.append(n), d.addEventListener("click", () => {
|
|
522
546
|
r.classList.toggle("p-gui__folder--closed");
|
|
523
547
|
});
|
|
524
|
-
let
|
|
548
|
+
let f = new C({
|
|
525
549
|
isFolder: !0,
|
|
526
550
|
folderOptions: {
|
|
527
551
|
wrapper: r,
|
|
552
|
+
inner: n,
|
|
528
553
|
parent: this,
|
|
529
554
|
firstParent: this.firstParent
|
|
530
555
|
}
|
|
531
556
|
});
|
|
532
|
-
return this.folders.push(
|
|
557
|
+
return this.folders.push(f), f;
|
|
533
558
|
}
|
|
534
559
|
_makeDraggable() {
|
|
535
560
|
var t = this;
|
|
@@ -538,17 +563,17 @@ class C {
|
|
|
538
563
|
l.preventDefault(), t.position.initX = t.position.x, t.position.initY = t.position.y, t.position.prevX = l.clientX, t.position.prevY = l.clientY, document.addEventListener("pointermove", i);
|
|
539
564
|
}
|
|
540
565
|
function i(l) {
|
|
541
|
-
l.preventDefault(), t.hasBeenDragged || (t.hasBeenDragged = !0, t.
|
|
566
|
+
l.preventDefault(), t.hasBeenDragged || (t.hasBeenDragged = !0, t.domElement.setAttribute("data-dragged", "true")), t.position.x = t.position.initX + l.clientX - t.position.prevX, t.position.y = t.position.initY + l.clientY - t.position.prevY, t.domElement.style.transform = "translate3d(" + t.position.x + "px," + t.position.y + "px,0)";
|
|
542
567
|
}
|
|
543
568
|
function s(l) {
|
|
544
569
|
document.removeEventListener("pointermove", i);
|
|
545
570
|
}
|
|
546
571
|
}
|
|
547
572
|
toggleClose() {
|
|
548
|
-
this.closed = !this.closed, this.closed ? (this.previousInnerScroll = this.wrapper.scrollTop, this.wrapper.scrollTo(0, 0)) : this.wrapper.scrollTo(0, this.previousInnerScroll), this.
|
|
573
|
+
this.closed = !this.closed, this.closed ? (this.previousInnerScroll = this.wrapper.scrollTop, this.wrapper.scrollTo(0, 0)) : this.wrapper.scrollTo(0, this.previousInnerScroll), this.domElement.classList.toggle("p-gui--collapsed");
|
|
549
574
|
}
|
|
550
575
|
kill() {
|
|
551
|
-
this.
|
|
576
|
+
this.domElement.remove();
|
|
552
577
|
}
|
|
553
578
|
_mapLinear(t, e, i, s, l) {
|
|
554
579
|
return s + (t - e) * (l - s) / (i - e);
|
package/package.json
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "perfect-gui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "4.12.
|
|
4
|
+
"version": "4.12.10",
|
|
5
5
|
"description": "GUI for JavaScript",
|
|
6
|
-
"main": "
|
|
6
|
+
"main": "dist/perfect-gui.js",
|
|
7
|
+
"module": "dist/perfect-gui.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": "./dist/perfect-gui.js"
|
|
10
|
+
},
|
|
7
11
|
"scripts": {
|
|
8
12
|
"build": "vite build"
|
|
9
13
|
},
|