mirage-engine 0.3.7 → 0.3.9
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/mirage-engine.js +633 -579
- package/dist/mirage-engine.umd.js +27 -14
- package/package.json +4 -4
package/dist/mirage-engine.js
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
var _e = Object.defineProperty, Fe = Object.defineProperties;
|
|
2
2
|
var Ne = Object.getOwnPropertyDescriptors;
|
|
3
|
-
var
|
|
3
|
+
var ye = Object.getOwnPropertySymbols;
|
|
4
4
|
var ze = Object.prototype.hasOwnProperty, Xe = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var
|
|
5
|
+
var ae = (s, e, t) => e in s ? _e(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, $ = (s, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
ze.call(e, t) &&
|
|
8
|
-
if (
|
|
9
|
-
for (var t of
|
|
10
|
-
Xe.call(e, t) &&
|
|
7
|
+
ze.call(e, t) && ae(s, t, e[t]);
|
|
8
|
+
if (ye)
|
|
9
|
+
for (var t of ye(e))
|
|
10
|
+
Xe.call(e, t) && ae(s, t, e[t]);
|
|
11
11
|
return s;
|
|
12
|
-
},
|
|
13
|
-
var u = (s, e, t) => (
|
|
14
|
-
var
|
|
15
|
-
var
|
|
12
|
+
}, be = (s, e) => Fe(s, Ne(e));
|
|
13
|
+
var u = (s, e, t) => (ae(s, typeof e != "symbol" ? e + "" : e, t), t);
|
|
14
|
+
var we = (s, e, t) => new Promise((r, i) => {
|
|
15
|
+
var c = (a) => {
|
|
16
16
|
try {
|
|
17
|
-
|
|
17
|
+
o(t.next(a));
|
|
18
18
|
} catch (l) {
|
|
19
|
-
|
|
19
|
+
i(l);
|
|
20
20
|
}
|
|
21
|
-
}, n = (
|
|
21
|
+
}, n = (a) => {
|
|
22
22
|
try {
|
|
23
|
-
|
|
23
|
+
o(t.throw(a));
|
|
24
24
|
} catch (l) {
|
|
25
|
-
|
|
25
|
+
i(l);
|
|
26
26
|
}
|
|
27
|
-
},
|
|
28
|
-
|
|
27
|
+
}, o = (a) => a.done ? r(a.value) : Promise.resolve(a.value).then(c, n);
|
|
28
|
+
o((t = t.apply(s, e)).next());
|
|
29
29
|
});
|
|
30
30
|
import * as y from "three";
|
|
31
|
-
const
|
|
31
|
+
const Le = {
|
|
32
32
|
INCLUDE_TREE: "include-tree",
|
|
33
33
|
EXCLUDE_TREE: "exclude-tree",
|
|
34
34
|
INCLUDE_SELF: "include-self",
|
|
35
35
|
EXCLUDE_SELF: "exclude-self",
|
|
36
36
|
END: "end"
|
|
37
|
-
},
|
|
37
|
+
}, P = {
|
|
38
38
|
NAME: "data-mirage-dom",
|
|
39
39
|
KEY: "mirageDom",
|
|
40
40
|
VALUES: {
|
|
@@ -48,30 +48,35 @@ const Re = {
|
|
|
48
48
|
CAPTURE_2: "2",
|
|
49
49
|
CAPTURE_3: "3",
|
|
50
50
|
CAPTURE_4: "4",
|
|
51
|
-
CAPTURE_5: "5"
|
|
52
|
-
|
|
51
|
+
CAPTURE_5: "5",
|
|
52
|
+
CAPTURE_6: "6",
|
|
53
|
+
CAPTURE_7: "7",
|
|
54
|
+
CAPTURE_8: "8",
|
|
55
|
+
CAPTURE_9: "9",
|
|
56
|
+
CAPTURE_10: "10"
|
|
57
|
+
}, O = {
|
|
53
58
|
NAME: "data-mirage-travel",
|
|
54
59
|
KEY: "mirageTravel",
|
|
55
60
|
VALUES: xe,
|
|
56
61
|
MAX_LAYERS: Object.keys(xe).length - 1
|
|
57
|
-
},
|
|
62
|
+
}, z = {
|
|
58
63
|
NAME: "data-mirage-filter",
|
|
59
64
|
KEY: "mirageFilter",
|
|
60
|
-
VALUES:
|
|
65
|
+
VALUES: Le
|
|
61
66
|
}, Y = {
|
|
62
67
|
NAME: "data-mirage-select",
|
|
63
68
|
KEY: "mirageSelect",
|
|
64
|
-
VALUES:
|
|
69
|
+
VALUES: Le
|
|
65
70
|
}, Ve = {
|
|
66
71
|
NAME: "data-mirage-shader",
|
|
67
72
|
KEY: "mirageShader"
|
|
68
|
-
},
|
|
73
|
+
}, Ee = {
|
|
69
74
|
NAME: "data-mirage-sandwich",
|
|
70
75
|
KEY: "mirageSandwich",
|
|
71
76
|
VALUES: {
|
|
72
77
|
FRONT: "front"
|
|
73
78
|
}
|
|
74
|
-
},
|
|
79
|
+
}, re = 0, q = 1, Z = 2, Ye = 4, ie = 8, ce = 16;
|
|
75
80
|
function We(s) {
|
|
76
81
|
const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
|
77
82
|
return e ? {
|
|
@@ -100,7 +105,7 @@ class Me {
|
|
|
100
105
|
u(this, "pendingStyles", /* @__PURE__ */ new Map());
|
|
101
106
|
u(this, "isDomDirty", !1);
|
|
102
107
|
u(this, "isRunning", !1);
|
|
103
|
-
u(this, "pendingMask",
|
|
108
|
+
u(this, "pendingMask", re);
|
|
104
109
|
u(this, "mutationTimer", null);
|
|
105
110
|
u(this, "cssTimer", null);
|
|
106
111
|
u(this, "resizeConfig");
|
|
@@ -115,7 +120,7 @@ class Me {
|
|
|
115
120
|
u(this, "onScrollChange", /* @__PURE__ */ new Set());
|
|
116
121
|
u(this, "onRender", /* @__PURE__ */ new Set());
|
|
117
122
|
u(this, "onTransitionFinished", (e) => {
|
|
118
|
-
this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= q |
|
|
123
|
+
this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= q | Z, this.cssTimer = window.setTimeout(() => {
|
|
119
124
|
this.isDomDirty = !0, this.cssTimer = null;
|
|
120
125
|
}, 50)));
|
|
121
126
|
});
|
|
@@ -131,38 +136,38 @@ class Me {
|
|
|
131
136
|
u(this, "renderLoop", () => {
|
|
132
137
|
if (!this.isRunning)
|
|
133
138
|
return;
|
|
134
|
-
this.onBeforeRender.forEach((
|
|
139
|
+
this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = re);
|
|
135
140
|
const e = window.scrollX, t = window.scrollY;
|
|
136
|
-
(e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((
|
|
141
|
+
(e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((r) => r(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
|
|
137
142
|
this.pendingMask |= q, this.isDomDirty = !0, this.scrollTimer = null;
|
|
138
|
-
}, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((
|
|
143
|
+
}, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((r) => r(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((r) => r()), requestAnimationFrame(this.renderLoop);
|
|
139
144
|
});
|
|
140
|
-
var
|
|
145
|
+
var i, c;
|
|
141
146
|
this.target = e;
|
|
142
|
-
const
|
|
143
|
-
|
|
147
|
+
const r = (i = t.resizeDebounce) != null ? i : !0;
|
|
148
|
+
r === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : r === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
|
|
144
149
|
enabled: !0,
|
|
145
|
-
delay: (
|
|
146
|
-
onStart:
|
|
147
|
-
onEnd:
|
|
150
|
+
delay: (c = r.delay) != null ? c : 150,
|
|
151
|
+
onStart: r.onStart,
|
|
152
|
+
onEnd: r.onEnd
|
|
148
153
|
}, this.observer = new MutationObserver((n) => {
|
|
149
|
-
let
|
|
150
|
-
for (const
|
|
151
|
-
if (
|
|
152
|
-
|
|
154
|
+
let o = re;
|
|
155
|
+
for (const a of n)
|
|
156
|
+
if (a.type === "childList")
|
|
157
|
+
o |= ie, a.removedNodes.length > 0 && a.removedNodes.forEach((l) => {
|
|
153
158
|
l instanceof HTMLElement && this.pendingDeletions.add(l);
|
|
154
159
|
});
|
|
155
|
-
else if (
|
|
156
|
-
if (
|
|
157
|
-
|
|
158
|
-
const l =
|
|
160
|
+
else if (a.type === "attributes")
|
|
161
|
+
if (a.attributeName === "style") {
|
|
162
|
+
o |= q | Z;
|
|
163
|
+
const l = a.target, d = He(l.style);
|
|
159
164
|
this.pendingStyles.set(l, d);
|
|
160
165
|
} else
|
|
161
|
-
|
|
166
|
+
a.attributeName === "class" ? o |= q | Z : a.attributeName && a.attributeName.startsWith("data-") && (o |= q | Z, a.attributeName.startsWith("data-mirage") && (o |= ie));
|
|
162
167
|
else
|
|
163
|
-
|
|
164
|
-
if (
|
|
165
|
-
if (this.pendingMask |=
|
|
168
|
+
a.type === "characterData" && (o |= ce | q);
|
|
169
|
+
if (o !== re) {
|
|
170
|
+
if (this.pendingMask |= o, o & ie) {
|
|
166
171
|
this.clearTimers(), this.isDomDirty = !0;
|
|
167
172
|
return;
|
|
168
173
|
}
|
|
@@ -187,12 +192,12 @@ class Me {
|
|
|
187
192
|
this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
|
|
188
193
|
}
|
|
189
194
|
}
|
|
190
|
-
const W = 1,
|
|
195
|
+
const W = 1, K = 2, D = {
|
|
191
196
|
BASE: 0,
|
|
192
197
|
SELECTED: 1,
|
|
193
198
|
getCaptureLayer: (s) => 31 - s,
|
|
194
199
|
HIDDEN: 31
|
|
195
|
-
},
|
|
200
|
+
}, Ce = Object.values(z.VALUES);
|
|
196
201
|
class Ae {
|
|
197
202
|
/**
|
|
198
203
|
* Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
|
|
@@ -208,15 +213,15 @@ class Ae {
|
|
|
208
213
|
static calculateBaselineFromDOM(e) {
|
|
209
214
|
if (typeof document == "undefined")
|
|
210
215
|
return 0;
|
|
211
|
-
const t = document.createElement("div"),
|
|
212
|
-
t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none",
|
|
213
|
-
const
|
|
214
|
-
return document.body.removeChild(t),
|
|
216
|
+
const t = document.createElement("div"), r = document.createElement("span"), i = document.createElement("img");
|
|
217
|
+
t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", r.style.margin = "0", r.style.padding = "0", r.style.border = "none", r.style.lineHeight = "normal", i.width = 1, i.height = 1, i.style.verticalAlign = "baseline", r.appendChild(document.createTextNode("Hidden Text")), t.appendChild(r), t.appendChild(i), document.body.appendChild(t);
|
|
218
|
+
const c = i.offsetTop - r.offsetTop;
|
|
219
|
+
return document.body.removeChild(t), c;
|
|
215
220
|
}
|
|
216
221
|
}
|
|
217
222
|
u(Ae, "cache", /* @__PURE__ */ new Map());
|
|
218
223
|
class Pe extends y.MeshBasicMaterial {
|
|
219
|
-
constructor(t,
|
|
224
|
+
constructor(t, r, i, c, n = 2) {
|
|
220
225
|
super({
|
|
221
226
|
transparent: !0,
|
|
222
227
|
side: y.FrontSide,
|
|
@@ -227,69 +232,72 @@ class Pe extends y.MeshBasicMaterial {
|
|
|
227
232
|
u(this, "qualityFactor");
|
|
228
233
|
if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
|
|
229
234
|
throw new Error("[Mirage] Failed to create canvas context");
|
|
230
|
-
this.qualityFactor = n, this.map = new y.CanvasTexture(this.canvas), this.map.colorSpace = y.LinearSRGBColorSpace, this.map.minFilter = y.LinearFilter, this.map.magFilter = y.LinearFilter, this.updateText(t,
|
|
231
|
-
}
|
|
232
|
-
wrapText(t,
|
|
233
|
-
const
|
|
234
|
-
`),
|
|
235
|
-
return
|
|
236
|
-
const
|
|
237
|
-
if (
|
|
238
|
-
|
|
235
|
+
this.qualityFactor = n, this.map = new y.CanvasTexture(this.canvas), this.map.colorSpace = y.LinearSRGBColorSpace, this.map.minFilter = y.LinearFilter, this.map.magFilter = y.LinearFilter, this.updateText(t, r, i, c);
|
|
236
|
+
}
|
|
237
|
+
wrapText(t, r) {
|
|
238
|
+
const i = t.split(`
|
|
239
|
+
`), c = [];
|
|
240
|
+
return i.forEach((n) => {
|
|
241
|
+
const o = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
|
|
242
|
+
if (o.length === 0) {
|
|
243
|
+
c.push("");
|
|
239
244
|
return;
|
|
240
245
|
}
|
|
241
|
-
let
|
|
242
|
-
for (let l = 1; l <
|
|
243
|
-
const d =
|
|
244
|
-
this.ctx.measureText(
|
|
246
|
+
let a = o[0];
|
|
247
|
+
for (let l = 1; l < o.length; l++) {
|
|
248
|
+
const d = o[l];
|
|
249
|
+
this.ctx.measureText(a + d).width <= r + 2 ? a += d : (a && c.push(a), a = d.trimStart());
|
|
245
250
|
}
|
|
246
|
-
|
|
247
|
-
}),
|
|
251
|
+
a && c.push(a);
|
|
252
|
+
}), c;
|
|
248
253
|
}
|
|
249
|
-
updateText(t,
|
|
254
|
+
updateText(t, r, i, c, n) {
|
|
250
255
|
n !== void 0 && (this.qualityFactor = n);
|
|
251
|
-
const
|
|
252
|
-
this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(
|
|
253
|
-
const h = this.wrapText(t,
|
|
256
|
+
const a = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * a, d = c * a;
|
|
257
|
+
this.canvas.width !== l || this.canvas.height !== d ? (this.canvas.width = l, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(a, 0, 0, a, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
|
|
258
|
+
const h = this.wrapText(t, i), f = r.lineHeight, p = Ae.getBaseline(r.font);
|
|
254
259
|
h.forEach((g, m) => {
|
|
255
|
-
const
|
|
256
|
-
let
|
|
257
|
-
|
|
260
|
+
const x = m * f + p;
|
|
261
|
+
let S = 0;
|
|
262
|
+
r.textAlign === "center" ? S = i / 2 : r.textAlign === "right" && (S = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, S, x);
|
|
258
263
|
}), this.map && (this.map.needsUpdate = !0);
|
|
259
264
|
}
|
|
260
265
|
dispose() {
|
|
261
266
|
this.map && this.map.dispose(), super.dispose();
|
|
262
267
|
}
|
|
263
268
|
}
|
|
264
|
-
function
|
|
265
|
-
|
|
269
|
+
function J(s, e = 0) {
|
|
270
|
+
if (typeof s == "number")
|
|
271
|
+
return s;
|
|
272
|
+
const t = parseFloat(s) || 0;
|
|
273
|
+
return typeof s == "string" && s.includes("%") ? t / 100 * e : t;
|
|
266
274
|
}
|
|
267
|
-
function
|
|
275
|
+
function ee(s) {
|
|
268
276
|
if (!s || s === "transparent")
|
|
269
277
|
return { color: new y.Color(16777215), alpha: 0 };
|
|
270
278
|
const e = s.match(
|
|
271
279
|
/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
|
|
272
280
|
);
|
|
273
281
|
if (e) {
|
|
274
|
-
const t = parseInt(e[1], 10),
|
|
275
|
-
return { color: new y.Color(`rgb(${t}, ${
|
|
282
|
+
const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), c = e[4] !== void 0 ? parseFloat(e[4]) : 1;
|
|
283
|
+
return { color: new y.Color(`rgb(${t}, ${r}, ${i})`), alpha: c };
|
|
276
284
|
}
|
|
277
285
|
return { color: new y.Color(s), alpha: 1 };
|
|
278
286
|
}
|
|
279
287
|
function Ge(s) {
|
|
280
288
|
const e = [];
|
|
281
|
-
let t = "",
|
|
282
|
-
for (let
|
|
283
|
-
const
|
|
284
|
-
if (
|
|
285
|
-
|
|
286
|
-
else if (
|
|
287
|
-
|
|
288
|
-
else if (
|
|
289
|
+
let t = "", r = 0;
|
|
290
|
+
for (let i = 0; i < s.length; i++) {
|
|
291
|
+
const c = s[i];
|
|
292
|
+
if (c === "(")
|
|
293
|
+
r++;
|
|
294
|
+
else if (c === ")")
|
|
295
|
+
r--;
|
|
296
|
+
else if (c === "," && r === 0) {
|
|
289
297
|
e.push(t.trim()), t = "";
|
|
290
298
|
continue;
|
|
291
299
|
}
|
|
292
|
-
t +=
|
|
300
|
+
t += c;
|
|
293
301
|
}
|
|
294
302
|
return t && e.push(t.trim()), e;
|
|
295
303
|
}
|
|
@@ -299,48 +307,48 @@ function $e(s) {
|
|
|
299
307
|
const e = s.match(/linear-gradient\((.*)\)/);
|
|
300
308
|
if (!e)
|
|
301
309
|
return null;
|
|
302
|
-
const t = e[1],
|
|
303
|
-
let
|
|
304
|
-
const n =
|
|
310
|
+
const t = e[1], r = Ge(t);
|
|
311
|
+
let i = Math.PI, c = 0;
|
|
312
|
+
const n = r[0].trim();
|
|
305
313
|
if (n.startsWith("to "))
|
|
306
|
-
n === "to top" ?
|
|
314
|
+
n === "to top" ? i = 0 : n === "to right" ? i = Math.PI / 2 : n === "to bottom" ? i = Math.PI : n === "to left" ? i = Math.PI * 1.5 : n === "to top right" || n === "to right top" ? i = Math.PI / 4 : n === "to bottom right" || n === "to right bottom" ? i = Math.PI * 0.75 : n === "to bottom left" || n === "to left bottom" ? i = Math.PI * 1.25 : (n === "to top left" || n === "to left top") && (i = Math.PI * 1.75), c = 1;
|
|
307
315
|
else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
|
|
308
|
-
const
|
|
309
|
-
n.endsWith("deg") ?
|
|
316
|
+
const a = parseFloat(n);
|
|
317
|
+
n.endsWith("deg") ? i = a * (Math.PI / 180) : n.endsWith("rad") ? i = a : n.endsWith("turn") && (i = a * Math.PI * 2), c = 1;
|
|
310
318
|
}
|
|
311
|
-
const
|
|
312
|
-
for (let
|
|
313
|
-
const l =
|
|
319
|
+
const o = [];
|
|
320
|
+
for (let a = c; a < r.length && !(o.length >= 8); a++) {
|
|
321
|
+
const l = r[a].trim(), d = l.lastIndexOf(" ");
|
|
314
322
|
let h = l, f = null;
|
|
315
323
|
if (d !== -1 && !l.endsWith(")")) {
|
|
316
324
|
const g = l.substring(d + 1);
|
|
317
325
|
(g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, d).trim(), f = g);
|
|
318
326
|
}
|
|
319
|
-
const p =
|
|
320
|
-
|
|
327
|
+
const p = ee(h);
|
|
328
|
+
o.push({
|
|
321
329
|
color: p.color,
|
|
322
330
|
alpha: p.alpha,
|
|
323
331
|
rawStop: f,
|
|
324
332
|
stop: 0
|
|
325
333
|
});
|
|
326
334
|
}
|
|
327
|
-
if (
|
|
328
|
-
for (let l = 0; l <
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
let
|
|
332
|
-
for (let l = 1; l <
|
|
333
|
-
if (
|
|
334
|
-
const d = l -
|
|
335
|
+
if (o.length > 0) {
|
|
336
|
+
for (let l = 0; l < o.length; l++)
|
|
337
|
+
o[l].rawStop !== null && (o[l].stop = parseFloat(o[l].rawStop) / 100);
|
|
338
|
+
o[0].rawStop === null && (o[0].stop = 0), o.length > 1 && o[o.length - 1].rawStop === null && (o[o.length - 1].stop = 1);
|
|
339
|
+
let a = 0;
|
|
340
|
+
for (let l = 1; l < o.length; l++)
|
|
341
|
+
if (o[l].rawStop !== null || l === o.length - 1) {
|
|
342
|
+
const d = l - a;
|
|
335
343
|
if (d > 1) {
|
|
336
|
-
const h = a
|
|
344
|
+
const h = o[a].stop, p = (o[l].stop - h) / d;
|
|
337
345
|
for (let g = 1; g < d; g++)
|
|
338
|
-
a
|
|
346
|
+
o[a + g].stop = h + p * g;
|
|
339
347
|
}
|
|
340
|
-
|
|
348
|
+
a = l;
|
|
341
349
|
}
|
|
342
350
|
}
|
|
343
|
-
return { angle:
|
|
351
|
+
return { angle: i, stops: o };
|
|
344
352
|
}
|
|
345
353
|
const qe = `varying vec2 vUv;
|
|
346
354
|
varying vec4 vScreenPos;
|
|
@@ -431,6 +439,18 @@ void main() {
|
|
|
431
439
|
vec2 p = (vUv - 0.5) * uSize;
|
|
432
440
|
vec2 halfSize = uSize * 0.5;
|
|
433
441
|
|
|
442
|
+
// CSS Proportional Border-Radius Clamping
|
|
443
|
+
float tl = uBorderRadius.x;
|
|
444
|
+
float tr = uBorderRadius.y;
|
|
445
|
+
float br = uBorderRadius.z;
|
|
446
|
+
float bl = uBorderRadius.w;
|
|
447
|
+
float fTop = uSize.x / max(tl + tr, 0.0001);
|
|
448
|
+
float fBottom = uSize.x / max(bl + br, 0.0001);
|
|
449
|
+
float fLeft = uSize.y / max(tl + bl, 0.0001);
|
|
450
|
+
float fRight = uSize.y / max(tr + br, 0.0001);
|
|
451
|
+
float f = min(1.0, min(min(fTop, fBottom), min(fLeft, fRight)));
|
|
452
|
+
vec4 clampedRadius = uBorderRadius * f;
|
|
453
|
+
|
|
434
454
|
#INJECT_UV_MODIFIER
|
|
435
455
|
|
|
436
456
|
// color decision pipeline
|
|
@@ -444,9 +464,8 @@ void main() {
|
|
|
444
464
|
#INJECT_BASE_COLOR
|
|
445
465
|
|
|
446
466
|
// Hybrid SDF
|
|
447
|
-
vec2 xRadii = mix(
|
|
467
|
+
vec2 xRadii = mix(clampedRadius.xw, clampedRadius.yz, step(0.0, p.x));
|
|
448
468
|
float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
|
|
449
|
-
r = min(r, min(halfSize.x, halfSize.y));
|
|
450
469
|
|
|
451
470
|
float d = sdRoundedBox(p, halfSize, r);
|
|
452
471
|
|
|
@@ -484,50 +503,52 @@ uniform vec2 uTextureOffset;`, Je = `vec2 screenUv = (vScreenPos.xy / vScreenPos
|
|
|
484
503
|
vec2 resultUv = screenUv;
|
|
485
504
|
|
|
486
505
|
`, Qe = `vec4 texColor = texture2D(uTexture, resultUv);
|
|
487
|
-
baseColor = blendSrcOver(baseColor, texColor);`,
|
|
506
|
+
baseColor = blendSrcOver(baseColor, texColor);`, Te = {
|
|
488
507
|
vertexShader: qe,
|
|
489
508
|
fragmentShader: je
|
|
490
|
-
},
|
|
509
|
+
}, Se = {
|
|
491
510
|
declChunk: Ke,
|
|
492
511
|
uvChunk: Je,
|
|
493
512
|
baseColorChunk: Qe
|
|
494
513
|
};
|
|
495
|
-
function Ze(s, e, t,
|
|
496
|
-
var
|
|
497
|
-
const
|
|
514
|
+
function Ze(s, e, t, r = null, i) {
|
|
515
|
+
var E;
|
|
516
|
+
const c = r !== null || !!s.imageSrc;
|
|
498
517
|
let n = "";
|
|
499
|
-
const
|
|
500
|
-
if (
|
|
501
|
-
for (const [
|
|
502
|
-
typeof
|
|
503
|
-
`,
|
|
504
|
-
`,
|
|
505
|
-
`,
|
|
506
|
-
`,
|
|
507
|
-
`,
|
|
508
|
-
const
|
|
509
|
-
` + n,
|
|
510
|
-
`,
|
|
518
|
+
const o = {};
|
|
519
|
+
if (i != null && i.uniforms)
|
|
520
|
+
for (const [b, w] of Object.entries(i.uniforms))
|
|
521
|
+
typeof w == "number" ? (n += `uniform float ${b};
|
|
522
|
+
`, o[b] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${b};
|
|
523
|
+
`, o[b] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${b};
|
|
524
|
+
`, o[b] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${b};
|
|
525
|
+
`, o[b] = { value: new y.Vector4(...w) }) : (n += `uniform float ${b};
|
|
526
|
+
`, o[b] = { value: w });
|
|
527
|
+
const a = i !== void 0, l = (c || a ? Se.declChunk : "") + `
|
|
528
|
+
` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
|
|
529
|
+
`, h = s.isTraveler ? `vec2 resultUv = screenUv;
|
|
530
|
+
` : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
|
|
531
|
+
`, f = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", p = c || a ? Se.baseColorChunk : "", g = (i == null ? void 0 : i.colorModifier) || "", m = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", g), x = ee(s.backgroundColor), S = ee(s.borderColor), L = {
|
|
511
532
|
uSize: { value: new y.Vector2(e, t) },
|
|
512
533
|
uBgColor: {
|
|
513
534
|
value: new y.Vector4(
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
535
|
+
x.color.r,
|
|
536
|
+
x.color.g,
|
|
537
|
+
x.color.b,
|
|
538
|
+
x.alpha
|
|
518
539
|
)
|
|
519
540
|
},
|
|
520
541
|
uBorderColor: {
|
|
521
542
|
value: new y.Vector4(
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
543
|
+
S.color.r,
|
|
544
|
+
S.color.g,
|
|
545
|
+
S.color.b,
|
|
546
|
+
S.alpha
|
|
526
547
|
)
|
|
527
548
|
},
|
|
528
549
|
uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
|
|
529
|
-
uBorderWidth: { value:
|
|
530
|
-
uOpacity: { value: (
|
|
550
|
+
uBorderWidth: { value: J(s.borderWidth) },
|
|
551
|
+
uOpacity: { value: (E = s.opacity) != null ? E : 1 },
|
|
531
552
|
uTexture: { value: null },
|
|
532
553
|
uTextureRepeat: { value: new y.Vector2(1, 1) },
|
|
533
554
|
uTextureOffset: { value: new y.Vector2(0, 0) },
|
|
@@ -538,34 +559,38 @@ function Ze(s, e, t, i = null, r) {
|
|
|
538
559
|
},
|
|
539
560
|
uGradientStops: { value: new Float32Array(8) }
|
|
540
561
|
};
|
|
541
|
-
De(
|
|
542
|
-
const
|
|
543
|
-
uniforms: $($({},
|
|
544
|
-
vertexShader:
|
|
545
|
-
fragmentShader:
|
|
562
|
+
De(L.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (L.uTexture.value = r);
|
|
563
|
+
const T = new y.ShaderMaterial({
|
|
564
|
+
uniforms: $($({}, L), o),
|
|
565
|
+
vertexShader: Te.vertexShader,
|
|
566
|
+
fragmentShader: m,
|
|
546
567
|
transparent: !0,
|
|
547
568
|
side: y.FrontSide
|
|
548
569
|
// for better performance
|
|
549
570
|
});
|
|
550
|
-
return s.backgroundImage && le(
|
|
571
|
+
return s.backgroundImage && le(T, { backgroundImage: s.backgroundImage }), T;
|
|
551
572
|
}
|
|
552
|
-
function et(s, e, t,
|
|
553
|
-
const
|
|
573
|
+
function et(s, e, t, r, i) {
|
|
574
|
+
const c = J(e.borderWidth);
|
|
554
575
|
le(s, {
|
|
555
576
|
width: t,
|
|
556
|
-
height:
|
|
577
|
+
height: r,
|
|
557
578
|
borderRadius: e.borderRadius,
|
|
558
|
-
borderWidth:
|
|
579
|
+
borderWidth: c,
|
|
559
580
|
backgroundColor: e.backgroundColor,
|
|
560
581
|
borderColor: e.borderColor,
|
|
561
582
|
opacity: e.opacity,
|
|
562
|
-
texture:
|
|
583
|
+
texture: i,
|
|
563
584
|
backgroundImage: e.backgroundImage
|
|
564
585
|
});
|
|
565
586
|
}
|
|
566
587
|
function le(s, e) {
|
|
567
|
-
var
|
|
568
|
-
if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0
|
|
588
|
+
var r, i, c;
|
|
589
|
+
if (e.width !== void 0 && e.height !== void 0 && s.uniforms.uSize.value.set(e.width, e.height), e.borderRadius !== void 0) {
|
|
590
|
+
const n = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(s.uniforms.uSize.value.x, s.uniforms.uSize.value.y);
|
|
591
|
+
De(s.uniforms.uBorderRadius.value, e.borderRadius, n);
|
|
592
|
+
}
|
|
593
|
+
if (e.borderWidth !== void 0 && (s.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
|
|
569
594
|
if (Array.isArray(e.backgroundColor)) {
|
|
570
595
|
const n = s.uniforms.uBgColor.value.w;
|
|
571
596
|
s.uniforms.uBgColor.value.set(
|
|
@@ -575,7 +600,7 @@ function le(s, e) {
|
|
|
575
600
|
n
|
|
576
601
|
);
|
|
577
602
|
} else if (typeof e.backgroundColor == "string") {
|
|
578
|
-
const n =
|
|
603
|
+
const n = ee(e.backgroundColor);
|
|
579
604
|
s.uniforms.uBgColor.value.set(
|
|
580
605
|
n.color.r,
|
|
581
606
|
n.color.g,
|
|
@@ -601,7 +626,7 @@ function le(s, e) {
|
|
|
601
626
|
n
|
|
602
627
|
);
|
|
603
628
|
} else if (typeof e.borderColor == "string") {
|
|
604
|
-
const n =
|
|
629
|
+
const n = ee(e.borderColor);
|
|
605
630
|
s.uniforms.uBorderColor.value.set(
|
|
606
631
|
n.color.r,
|
|
607
632
|
n.color.g,
|
|
@@ -618,11 +643,11 @@ function le(s, e) {
|
|
|
618
643
|
);
|
|
619
644
|
}
|
|
620
645
|
e.opacity !== void 0 && (s.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (s.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (s.uniforms.uBorderColor.value.w = e.borderOpacity), s.uniforms.uTexture && e.texture !== void 0 && (s.uniforms.uTexture.value = e.texture);
|
|
621
|
-
const t = e.texture !== void 0 ? e.texture : (
|
|
646
|
+
const t = e.texture !== void 0 ? e.texture : (r = s.uniforms.uTexture) == null ? void 0 : r.value;
|
|
622
647
|
if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
|
|
623
|
-
const n = t.image.naturalWidth || t.image.videoWidth || t.image.width,
|
|
624
|
-
if (n &&
|
|
625
|
-
const d = n /
|
|
648
|
+
const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, o = t.image.naturalHeight || t.image.videoHeight || t.image.height, a = (i = e.width) != null ? i : s.uniforms.uSize.value.x, l = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
|
|
649
|
+
if (n && o && a && l) {
|
|
650
|
+
const d = n / o, h = a / l;
|
|
626
651
|
if (d > h) {
|
|
627
652
|
const f = h / d;
|
|
628
653
|
s.uniforms.uTextureRepeat.value.set(f, 1), s.uniforms.uTextureOffset.value.set((1 - f) / 2, 0);
|
|
@@ -637,25 +662,25 @@ function le(s, e) {
|
|
|
637
662
|
const n = $e(e.backgroundImage);
|
|
638
663
|
if (n) {
|
|
639
664
|
s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
|
|
640
|
-
for (let
|
|
641
|
-
if (
|
|
642
|
-
const
|
|
643
|
-
s.uniforms.uGradientColors.value[
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
), s.uniforms.uGradientStops.value[
|
|
665
|
+
for (let o = 0; o < 8; o++)
|
|
666
|
+
if (o < n.stops.length) {
|
|
667
|
+
const a = n.stops[o];
|
|
668
|
+
s.uniforms.uGradientColors.value[o].set(
|
|
669
|
+
a.color.r,
|
|
670
|
+
a.color.g,
|
|
671
|
+
a.color.b,
|
|
672
|
+
a.alpha
|
|
673
|
+
), s.uniforms.uGradientStops.value[o] = a.stop;
|
|
649
674
|
} else
|
|
650
|
-
s.uniforms.uGradientColors.value[
|
|
675
|
+
s.uniforms.uGradientColors.value[o].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[o] = 1;
|
|
651
676
|
} else
|
|
652
677
|
s.uniforms.uGradientCount.value = 0;
|
|
653
678
|
}
|
|
654
679
|
for (const n of Object.keys(e))
|
|
655
680
|
n !== "width" && n !== "height" && n !== "borderRadius" && n !== "borderWidth" && n !== "backgroundColor" && n !== "borderColor" && n !== "opacity" && n !== "bgOpacity" && n !== "borderOpacity" && n !== "texture" && n !== "backgroundImage" && s.uniforms[n] !== void 0 && (s.uniforms[n].value !== void 0 && s.uniforms[n].value !== null && typeof s.uniforms[n].value.set == "function" ? Array.isArray(e[n]) ? s.uniforms[n].value.set(...e[n]) : e[n] !== void 0 && (e[n].copy ? s.uniforms[n].value.copy(e[n]) : s.uniforms[n].value = e[n]) : s.uniforms[n].value = e[n]);
|
|
656
681
|
}
|
|
657
|
-
function De(s, e) {
|
|
658
|
-
var a,
|
|
682
|
+
function De(s, e, t = 0) {
|
|
683
|
+
var a, l, d, h;
|
|
659
684
|
if (e == null) {
|
|
660
685
|
s.set(0, 0, 0, 0);
|
|
661
686
|
return;
|
|
@@ -668,37 +693,37 @@ function De(s, e) {
|
|
|
668
693
|
s.set(e[0], e[1], e[2], e[3]);
|
|
669
694
|
return;
|
|
670
695
|
}
|
|
671
|
-
const
|
|
672
|
-
s.set(i,
|
|
696
|
+
const r = e.split("/")[0].trim().split(/\s+/), i = J(r[0], t), c = J((a = r[1]) != null ? a : r[0], t), n = J((l = r[2]) != null ? l : r[0], t), o = J((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
|
|
697
|
+
s.set(i, c, n, o);
|
|
673
698
|
}
|
|
674
|
-
const
|
|
675
|
-
create(s, e, t,
|
|
699
|
+
const X = {
|
|
700
|
+
create(s, e, t, r, i, c = 2, n = null, o) {
|
|
676
701
|
return s === "BOX" ? Ze(
|
|
677
702
|
e,
|
|
678
|
-
i,
|
|
679
703
|
r,
|
|
704
|
+
i,
|
|
680
705
|
n,
|
|
681
|
-
|
|
706
|
+
o
|
|
682
707
|
) : s === "TEXT" ? new Pe(
|
|
683
708
|
t || "",
|
|
684
709
|
e,
|
|
685
|
-
i,
|
|
686
710
|
r,
|
|
687
|
-
|
|
711
|
+
i,
|
|
712
|
+
c
|
|
688
713
|
) : new y.MeshBasicMaterial({ visible: !1 });
|
|
689
714
|
},
|
|
690
|
-
update(s, e, t,
|
|
715
|
+
update(s, e, t, r, i, c, n = 2, o) {
|
|
691
716
|
e === "BOX" ? et(
|
|
692
717
|
s,
|
|
693
718
|
t,
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
719
|
+
i,
|
|
720
|
+
c,
|
|
721
|
+
o
|
|
697
722
|
) : e === "TEXT" && s.updateText(
|
|
698
|
-
|
|
723
|
+
r || "",
|
|
699
724
|
t,
|
|
700
|
-
|
|
701
|
-
|
|
725
|
+
i,
|
|
726
|
+
c,
|
|
702
727
|
n
|
|
703
728
|
);
|
|
704
729
|
},
|
|
@@ -714,10 +739,10 @@ class tt {
|
|
|
714
739
|
u(this, "elementUrls", /* @__PURE__ */ new WeakMap());
|
|
715
740
|
u(this, "onUpdate");
|
|
716
741
|
this.onUpdate = e, t && (this.observer = new IntersectionObserver(
|
|
717
|
-
(
|
|
718
|
-
for (const
|
|
719
|
-
const
|
|
720
|
-
|
|
742
|
+
(r) => {
|
|
743
|
+
for (const i of r) {
|
|
744
|
+
const c = i.target;
|
|
745
|
+
i.isIntersecting ? this.loadTexture(c) : this.disposeTexture(c);
|
|
721
746
|
}
|
|
722
747
|
},
|
|
723
748
|
{ rootMargin: "300px" }
|
|
@@ -732,31 +757,31 @@ class tt {
|
|
|
732
757
|
e.nodeType === Node.ELEMENT_NODE && this.observer && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
|
|
733
758
|
}
|
|
734
759
|
loadTexture(e) {
|
|
735
|
-
return
|
|
760
|
+
return we(this, null, function* () {
|
|
736
761
|
if (this.loadStatus.get(e) || this.textures.has(e))
|
|
737
762
|
return;
|
|
738
763
|
const t = this.elementUrls.get(e);
|
|
739
764
|
if (t) {
|
|
740
765
|
this.loadStatus.set(e, !0);
|
|
741
766
|
try {
|
|
742
|
-
let
|
|
767
|
+
let r;
|
|
743
768
|
if (t.startsWith("data:image/svg+xml"))
|
|
744
|
-
|
|
745
|
-
const
|
|
746
|
-
|
|
769
|
+
r = yield new Promise((c, n) => {
|
|
770
|
+
const o = new Image();
|
|
771
|
+
o.onload = () => c(o), o.onerror = n, o.src = t;
|
|
747
772
|
});
|
|
748
773
|
else {
|
|
749
774
|
const n = yield (yield fetch(t)).blob();
|
|
750
|
-
|
|
775
|
+
r = yield createImageBitmap(n, { imageOrientation: "flipY" });
|
|
751
776
|
}
|
|
752
777
|
if (this.elementUrls.get(e) !== t) {
|
|
753
|
-
"close" in
|
|
778
|
+
"close" in r && r.close();
|
|
754
779
|
return;
|
|
755
780
|
}
|
|
756
|
-
const
|
|
757
|
-
|
|
758
|
-
} catch (
|
|
759
|
-
console.warn("[MirageEngine] Failed to load texture:", t,
|
|
781
|
+
const i = new y.Texture(r);
|
|
782
|
+
r instanceof HTMLImageElement || (i.flipY = !1), i.colorSpace = y.LinearSRGBColorSpace, i.needsUpdate = !0, this.textures.set(e, i), this.onUpdate(e, i);
|
|
783
|
+
} catch (r) {
|
|
784
|
+
console.warn("[MirageEngine] Failed to load texture:", t, r);
|
|
760
785
|
} finally {
|
|
761
786
|
this.elementUrls.has(e) && this.loadStatus.set(e, !1);
|
|
762
787
|
}
|
|
@@ -775,7 +800,7 @@ class tt {
|
|
|
775
800
|
}
|
|
776
801
|
}
|
|
777
802
|
class rt {
|
|
778
|
-
constructor(e, t,
|
|
803
|
+
constructor(e, t, r, i) {
|
|
779
804
|
u(this, "canvas");
|
|
780
805
|
u(this, "scene");
|
|
781
806
|
u(this, "camera");
|
|
@@ -793,21 +818,21 @@ class rt {
|
|
|
793
818
|
u(this, "registry");
|
|
794
819
|
u(this, "targetRect");
|
|
795
820
|
u(this, "travelersByLayer", Array.from(
|
|
796
|
-
{ length:
|
|
821
|
+
{ length: O.MAX_LAYERS },
|
|
797
822
|
() => /* @__PURE__ */ new Set()
|
|
798
823
|
));
|
|
799
824
|
u(this, "textureManager");
|
|
800
825
|
// private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
|
|
801
826
|
u(this, "fixedMeshes", /* @__PURE__ */ new Set());
|
|
802
|
-
var
|
|
803
|
-
this.target = e, this.mountContainer =
|
|
827
|
+
var o, a, l, d, h;
|
|
828
|
+
this.target = e, this.mountContainer = r, this.registry = i, this.mode = (o = t.mode) != null ? o : "overlay", this.canvasSize = (a = t.canvasSize) != null ? a : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new tt((f, p) => {
|
|
804
829
|
const g = this.registry.get(f);
|
|
805
|
-
g && g.material instanceof y.ShaderMaterial &&
|
|
830
|
+
g && g.material instanceof y.ShaderMaterial && X.forceUpdateUniforms(g.material, { texture: p });
|
|
806
831
|
}, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
|
|
807
|
-
const
|
|
832
|
+
const c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
|
|
808
833
|
this.camera = new y.OrthographicCamera(
|
|
809
|
-
|
|
810
|
-
|
|
834
|
+
c / -2,
|
|
835
|
+
c / 2,
|
|
811
836
|
n / 2,
|
|
812
837
|
n / -2,
|
|
813
838
|
1,
|
|
@@ -818,21 +843,21 @@ class rt {
|
|
|
818
843
|
antialias: !0
|
|
819
844
|
// [new]
|
|
820
845
|
// premultipliedAlpha: true
|
|
821
|
-
}), y.ColorManagement.enabled = !1, this.renderer.outputColorSpace = y.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(
|
|
846
|
+
}), y.ColorManagement.enabled = !1, this.renderer.outputColorSpace = y.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(c, n), this.applyTextQuality((h = t.quality) != null ? h : "medium");
|
|
822
847
|
}
|
|
823
848
|
get isViewport() {
|
|
824
849
|
return this.mode === "overlay" && this.canvasSize === "viewport";
|
|
825
850
|
}
|
|
826
851
|
getSceneLayer() {
|
|
827
|
-
return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ?
|
|
852
|
+
return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? D.SELECTED : D.BASE;
|
|
828
853
|
}
|
|
829
854
|
createRenderTarget() {
|
|
830
|
-
for (let e = 0; e <
|
|
831
|
-
const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width,
|
|
855
|
+
for (let e = 0; e < O.MAX_LAYERS; e++) {
|
|
856
|
+
const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, r = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
|
|
832
857
|
this.renderTargets.push(
|
|
833
858
|
new y.WebGLRenderTarget(
|
|
834
859
|
t * this.qualityFactor,
|
|
835
|
-
|
|
860
|
+
r * this.qualityFactor,
|
|
836
861
|
{
|
|
837
862
|
minFilter: y.LinearFilter,
|
|
838
863
|
magFilter: y.LinearFilter,
|
|
@@ -872,15 +897,15 @@ class rt {
|
|
|
872
897
|
this.canvas.style.width = `${e}px`, this.canvas.style.height = `${t}px`, this.mode === "duplicate" ? (this.canvas.style.position = "", this.canvas.style.top = "", this.canvas.style.left = "", this.canvas.style.display = "block") : (this.canvas.style.position = this.isViewport ? "fixed" : "absolute", this.canvas.style.top = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetTop}px`, this.canvas.style.left = this.isViewport ? `-${this.overscan}px` : `${this.target.offsetLeft}px`, this.canvas.style.display = "block");
|
|
873
898
|
}
|
|
874
899
|
updateUniforms(e, t) {
|
|
875
|
-
const
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
900
|
+
const r = this.registry.get(e);
|
|
901
|
+
r && (r.traverse((i) => {
|
|
902
|
+
i.isMesh && i.material && X.forceUpdateUniforms(
|
|
903
|
+
i.material,
|
|
879
904
|
t
|
|
880
905
|
);
|
|
881
|
-
}),
|
|
882
|
-
|
|
883
|
-
|
|
906
|
+
}), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
|
|
907
|
+
i.isMesh && i.material && X.forceUpdateUniforms(
|
|
908
|
+
i.material,
|
|
884
909
|
t
|
|
885
910
|
);
|
|
886
911
|
}));
|
|
@@ -890,13 +915,13 @@ class rt {
|
|
|
890
915
|
}
|
|
891
916
|
setSize(e, t) {
|
|
892
917
|
this.renderer.setSize(e, t);
|
|
893
|
-
for (const
|
|
894
|
-
|
|
918
|
+
for (const r of this.renderTargets)
|
|
919
|
+
r.setSize(e * this.qualityFactor, t * this.qualityFactor);
|
|
895
920
|
this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
|
|
896
921
|
}
|
|
897
922
|
syncScene(e, t) {
|
|
898
|
-
const
|
|
899
|
-
|
|
923
|
+
const r = this.target.getBoundingClientRect(), i = this.isViewport ? window.innerWidth + this.overscan * 2 : r.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, n = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, o = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, a = Math.abs(i - n) > 0.1 || Math.abs(c - o) > 0.1, l = this.mode === "overlay" && (Math.abs(r.top - this.targetRect.top) > 0.1 || Math.abs(r.left - this.targetRect.left) > 0.1);
|
|
924
|
+
a ? (this.targetRect = r, this.setSize(i, c), this.updateCanvasLayout()) : l ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((d) => {
|
|
900
925
|
const h = this.registry.get(d);
|
|
901
926
|
if (h) {
|
|
902
927
|
this.scene.remove(h);
|
|
@@ -915,31 +940,31 @@ class rt {
|
|
|
915
940
|
// => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
|
|
916
941
|
// private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
|
|
917
942
|
reconcileNode(e) {
|
|
918
|
-
var
|
|
943
|
+
var i, c;
|
|
919
944
|
let t = this.registry.get(e.element);
|
|
920
|
-
const
|
|
921
|
-
if (t && t.userData.shaderHash !==
|
|
922
|
-
const
|
|
945
|
+
const r = JSON.stringify(e.shaderHooks || null);
|
|
946
|
+
if (t && t.userData.shaderHash !== r && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof y.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
|
|
947
|
+
const n = new y.PlaneGeometry(1, 1), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a = X.create(
|
|
923
948
|
"BOX",
|
|
924
949
|
e.styles,
|
|
925
950
|
"",
|
|
926
951
|
e.rect.width,
|
|
927
952
|
e.rect.height,
|
|
928
953
|
this.qualityFactor,
|
|
929
|
-
|
|
954
|
+
o,
|
|
930
955
|
e.shaderHooks
|
|
931
956
|
);
|
|
932
|
-
t = new y.Mesh(
|
|
957
|
+
t = new y.Mesh(n, a), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = a, t.userData.domElement = e.element, t.userData.shaderHash = r;
|
|
933
958
|
}
|
|
934
|
-
if (this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
|
|
935
|
-
for (let
|
|
936
|
-
|
|
959
|
+
if ((c = e.nativeStyles) != null && c.transform ? t.userData.nativeTransform = e.nativeStyles.transform : t.userData.nativeTransform = void 0, this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
|
|
960
|
+
for (let n = 0; n < O.MAX_LAYERS; n++)
|
|
961
|
+
n === e.captureLayer - 2 ? this.travelersByLayer[n].add(t) : this.travelersByLayer[n].delete(t);
|
|
937
962
|
else
|
|
938
|
-
for (const
|
|
939
|
-
|
|
963
|
+
for (const n of this.travelersByLayer)
|
|
964
|
+
n.delete(t);
|
|
940
965
|
if (e.isFixed ? this.fixedMeshes.add(t) : this.fixedMeshes.delete(t), e.styles.imageSrc ? this.textureManager.register(e.element, e.styles.imageSrc) : this.textureManager.unregister(e.element), e.type === "BOX")
|
|
941
|
-
for (const
|
|
942
|
-
this.reconcileNode(
|
|
966
|
+
for (const n of e.children)
|
|
967
|
+
this.reconcileNode(n);
|
|
943
968
|
else
|
|
944
969
|
e.type === "TEXT" && (this.reconcileTextChild(t, e, !1), t.userData.nativeMesh && e.nativeStyles && this.reconcileTextChild(
|
|
945
970
|
t.userData.nativeMesh,
|
|
@@ -947,195 +972,195 @@ class rt {
|
|
|
947
972
|
!0
|
|
948
973
|
));
|
|
949
974
|
}
|
|
950
|
-
reconcileTextChild(e, t,
|
|
975
|
+
reconcileTextChild(e, t, r) {
|
|
951
976
|
var l;
|
|
952
|
-
const
|
|
977
|
+
const i = t.textLines || [
|
|
953
978
|
{ text: t.textContent || "", rect: t.rect }
|
|
954
|
-
],
|
|
955
|
-
if (t.dirtyMask & ce || n !==
|
|
979
|
+
], c = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + i.map((d) => d.text).join("|"), o = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
|
|
980
|
+
if (t.dirtyMask & ce || n !== o) {
|
|
956
981
|
e.children.filter(
|
|
957
982
|
(g) => g.name.startsWith("TEXT_CHILD")
|
|
958
983
|
).forEach((g) => {
|
|
959
|
-
var
|
|
984
|
+
var x;
|
|
960
985
|
const m = g;
|
|
961
|
-
(
|
|
986
|
+
(x = m.material.map) == null || x.dispose(), m.geometry.dispose(), e.remove(m);
|
|
962
987
|
});
|
|
963
988
|
const h = t.rect, f = h.x + h.width / 2, p = h.y + h.height / 2;
|
|
964
|
-
|
|
965
|
-
const
|
|
989
|
+
i.forEach((g, m) => {
|
|
990
|
+
const x = X.create(
|
|
966
991
|
"TEXT",
|
|
967
|
-
|
|
992
|
+
c,
|
|
968
993
|
g.text,
|
|
969
994
|
g.rect.width,
|
|
970
995
|
g.rect.height,
|
|
971
996
|
this.qualityFactor
|
|
972
|
-
),
|
|
973
|
-
|
|
974
|
-
const
|
|
975
|
-
|
|
976
|
-
const
|
|
977
|
-
|
|
978
|
-
t.rect.width === 0 ? 0 :
|
|
979
|
-
t.rect.height === 0 ? 0 :
|
|
997
|
+
), S = new y.PlaneGeometry(1, 1), L = new y.Mesh(S, x);
|
|
998
|
+
L.name = `TEXT_CHILD_${m}`;
|
|
999
|
+
const T = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, E = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
|
|
1000
|
+
L.scale.set(T, E, 1);
|
|
1001
|
+
const b = g.rect.x + g.rect.width / 2, w = g.rect.y + g.rect.height / 2, k = b - f, U = -(w - p);
|
|
1002
|
+
L.position.set(
|
|
1003
|
+
t.rect.width === 0 ? 0 : k / t.rect.width,
|
|
1004
|
+
t.rect.height === 0 ? 0 : U / t.rect.height,
|
|
980
1005
|
5e-3
|
|
981
|
-
), e.add(
|
|
1006
|
+
), e.add(L);
|
|
982
1007
|
}), e.userData.textChildStyleHash = n;
|
|
983
1008
|
}
|
|
984
1009
|
e.children.forEach((d) => {
|
|
985
1010
|
if (!d.name.startsWith("TEXT_CHILD"))
|
|
986
1011
|
return;
|
|
987
|
-
const h = d, f = t.visibility & W ?
|
|
988
|
-
if (h.layers.set(f), t.visibility &
|
|
989
|
-
if (!
|
|
1012
|
+
const h = d, f = t.visibility & W ? D.BASE : D.HIDDEN;
|
|
1013
|
+
if (h.layers.set(f), t.visibility & K && h.layers.enable(D.SELECTED), t.visibility & W)
|
|
1014
|
+
if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
|
|
990
1015
|
for (let p = t.captureLayer; p < t.nativeLayer; p++)
|
|
991
|
-
h.layers.enable(
|
|
992
|
-
else if (
|
|
993
|
-
for (let p = Math.max(t.captureLayer, t.nativeLayer); p <=
|
|
994
|
-
h.layers.enable(
|
|
1016
|
+
h.layers.enable(D.getCaptureLayer(p));
|
|
1017
|
+
else if (r && t.nativeLayer !== void 0)
|
|
1018
|
+
for (let p = Math.max(t.captureLayer, t.nativeLayer); p <= O.MAX_LAYERS + 1; p++)
|
|
1019
|
+
h.layers.enable(D.getCaptureLayer(p));
|
|
995
1020
|
else
|
|
996
|
-
for (let p = t.captureLayer; p <=
|
|
997
|
-
h.layers.enable(
|
|
1021
|
+
for (let p = t.captureLayer; p <= O.MAX_LAYERS + 1; p++)
|
|
1022
|
+
h.layers.enable(D.getCaptureLayer(p));
|
|
998
1023
|
});
|
|
999
1024
|
}
|
|
1000
1025
|
updateMeshProperties(e, t) {
|
|
1001
|
-
var
|
|
1002
|
-
const { rect:
|
|
1003
|
-
e.material = e.userData.baseMaterial, e.scale.set(
|
|
1004
|
-
x:
|
|
1005
|
-
y:
|
|
1006
|
-
width:
|
|
1007
|
-
height:
|
|
1026
|
+
var T, E, b;
|
|
1027
|
+
const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, o = this.renderer.domElement.height / c;
|
|
1028
|
+
e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
|
|
1029
|
+
x: r.x,
|
|
1030
|
+
y: r.y,
|
|
1031
|
+
width: r.width,
|
|
1032
|
+
height: r.height
|
|
1008
1033
|
};
|
|
1009
|
-
const
|
|
1034
|
+
const a = 1e-3;
|
|
1010
1035
|
this.renderOrder++;
|
|
1011
1036
|
const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
|
|
1012
1037
|
let h, f;
|
|
1013
1038
|
if (this.isViewport)
|
|
1014
|
-
h =
|
|
1039
|
+
h = r.x - window.innerWidth / 2 + r.width / 2, f = -r.y + window.innerHeight / 2 - r.height / 2;
|
|
1015
1040
|
else {
|
|
1016
|
-
const
|
|
1017
|
-
h =
|
|
1041
|
+
const w = r.x - l, k = r.y - d;
|
|
1042
|
+
h = w - n / 2 + r.width / 2, f = -k + o / 2 - r.height / 2;
|
|
1018
1043
|
}
|
|
1019
1044
|
e.position.set(
|
|
1020
1045
|
h,
|
|
1021
1046
|
f,
|
|
1022
|
-
|
|
1047
|
+
i.zIndex + this.renderOrder * a
|
|
1023
1048
|
);
|
|
1024
|
-
const p =
|
|
1025
|
-
e.userData.basePosition = { x: h, y: f }, e.userData.originalBasePosition = { x: h, y: f }, e.userData.baseSize = { width:
|
|
1026
|
-
const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element,
|
|
1027
|
-
let
|
|
1028
|
-
if (
|
|
1029
|
-
const
|
|
1030
|
-
|
|
1049
|
+
const p = r.x, g = r.y;
|
|
1050
|
+
e.userData.basePosition = { x: h, y: f }, e.userData.originalBasePosition = { x: h, y: f }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: p, y: g }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
|
|
1051
|
+
const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, x = window.getComputedStyle(m);
|
|
1052
|
+
let S = 0, L = 0;
|
|
1053
|
+
if (x.transform && x.transform !== "none") {
|
|
1054
|
+
const w = new DOMMatrix(x.transform);
|
|
1055
|
+
S = w.m41, L = w.m42;
|
|
1031
1056
|
}
|
|
1032
|
-
if (e.userData.baseTransform = { x:
|
|
1057
|
+
if (e.userData.baseTransform = { x: S, y: L }, delete e.userData.originRatioX, delete e.userData.originRatioY, X.update(
|
|
1033
1058
|
e.userData.baseMaterial,
|
|
1034
1059
|
"BOX",
|
|
1035
|
-
|
|
1060
|
+
i,
|
|
1036
1061
|
"",
|
|
1037
|
-
|
|
1038
|
-
|
|
1062
|
+
r.width,
|
|
1063
|
+
r.height,
|
|
1039
1064
|
this.qualityFactor,
|
|
1040
|
-
t.isTraveler ? (
|
|
1065
|
+
t.isTraveler ? (T = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : T.texture : this.textureManager.get(t.element)
|
|
1041
1066
|
), t.nativeStyles && t.nativeRect) {
|
|
1042
1067
|
if (!e.userData.nativeMesh) {
|
|
1043
|
-
const
|
|
1068
|
+
const B = X.create(
|
|
1044
1069
|
"BOX",
|
|
1045
1070
|
t.nativeStyles,
|
|
1046
1071
|
"",
|
|
1047
1072
|
t.nativeRect.width,
|
|
1048
1073
|
t.nativeRect.height,
|
|
1049
1074
|
this.qualityFactor,
|
|
1050
|
-
t.isTraveler ? (
|
|
1075
|
+
t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.texture : this.textureManager.get(t.element),
|
|
1051
1076
|
t.shaderHooks
|
|
1052
|
-
),
|
|
1053
|
-
t.type === "TEXT" && (
|
|
1077
|
+
), G = new y.Mesh(e.geometry, B);
|
|
1078
|
+
t.type === "TEXT" && (G.name = "BG_MESH"), this.scene.add(G), e.userData.nativeMesh = G;
|
|
1054
1079
|
}
|
|
1055
|
-
const
|
|
1056
|
-
let
|
|
1080
|
+
const w = e.userData.nativeMesh;
|
|
1081
|
+
let k, U;
|
|
1057
1082
|
if (this.isViewport)
|
|
1058
|
-
|
|
1083
|
+
k = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, U = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
|
|
1059
1084
|
else {
|
|
1060
|
-
const
|
|
1061
|
-
|
|
1085
|
+
const B = t.nativeRect.x - l, G = t.nativeRect.y - d;
|
|
1086
|
+
k = B - n / 2 + t.nativeRect.width / 2, U = -G + o / 2 - t.nativeRect.height / 2;
|
|
1062
1087
|
}
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
t.nativeStyles.zIndex + this.renderOrder *
|
|
1067
|
-
),
|
|
1068
|
-
|
|
1088
|
+
w.scale.set(t.nativeRect.width, t.nativeRect.height, 1), w.position.set(
|
|
1089
|
+
k,
|
|
1090
|
+
U,
|
|
1091
|
+
t.nativeStyles.zIndex + this.renderOrder * a
|
|
1092
|
+
), X.update(
|
|
1093
|
+
w.material,
|
|
1069
1094
|
"BOX",
|
|
1070
1095
|
t.nativeStyles,
|
|
1071
1096
|
"",
|
|
1072
1097
|
t.nativeRect.width,
|
|
1073
1098
|
t.nativeRect.height,
|
|
1074
1099
|
this.qualityFactor,
|
|
1075
|
-
t.isTraveler ? (
|
|
1100
|
+
t.isTraveler ? (b = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : b.texture : this.textureManager.get(t.element)
|
|
1076
1101
|
);
|
|
1077
1102
|
} else
|
|
1078
1103
|
e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof y.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
|
|
1079
1104
|
}
|
|
1080
1105
|
updateMeshLayers(e, t) {
|
|
1081
|
-
const
|
|
1082
|
-
if (e.layers.set(
|
|
1083
|
-
const
|
|
1084
|
-
if (
|
|
1085
|
-
for (let
|
|
1086
|
-
e.layers.enable(
|
|
1087
|
-
for (let
|
|
1088
|
-
|
|
1106
|
+
const r = t.visibility & W ? D.BASE : D.HIDDEN;
|
|
1107
|
+
if (e.layers.set(r), t.visibility & K && e.layers.enable(D.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
|
|
1108
|
+
const i = e.userData.nativeMesh;
|
|
1109
|
+
if (i.layers.set(D.HIDDEN), t.visibility & W) {
|
|
1110
|
+
for (let c = t.captureLayer; c < t.nativeLayer; c++)
|
|
1111
|
+
e.layers.enable(D.getCaptureLayer(c));
|
|
1112
|
+
for (let c = Math.max(t.captureLayer, t.nativeLayer); c <= O.MAX_LAYERS + 1; c++)
|
|
1113
|
+
i.layers.enable(D.getCaptureLayer(c));
|
|
1089
1114
|
}
|
|
1090
1115
|
} else if (t.visibility & W)
|
|
1091
|
-
for (let
|
|
1092
|
-
e.layers.enable(
|
|
1116
|
+
for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
|
|
1117
|
+
e.layers.enable(D.getCaptureLayer(i));
|
|
1093
1118
|
}
|
|
1094
|
-
captureRenderTarget(e, t,
|
|
1095
|
-
if (e.size === 0 || !
|
|
1119
|
+
captureRenderTarget(e, t, r) {
|
|
1120
|
+
if (e.size === 0 || !r)
|
|
1096
1121
|
return;
|
|
1097
|
-
const
|
|
1098
|
-
this.renderer.getClearColor(
|
|
1099
|
-
const n = new y.Vector3(),
|
|
1122
|
+
const i = new y.Color(), c = this.renderer.getClearAlpha();
|
|
1123
|
+
this.renderer.getClearColor(i), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(r), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
|
|
1124
|
+
const n = new y.Vector3(), o = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, a = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
|
|
1100
1125
|
for (const d of e) {
|
|
1101
1126
|
n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
|
|
1102
|
-
const h = (n.x + 1) / 2 *
|
|
1127
|
+
const h = (n.x + 1) / 2 * o, f = (n.y + 1) / 2 * a;
|
|
1103
1128
|
let p = 0, g = 1;
|
|
1104
1129
|
typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
|
|
1105
|
-
const m = d.scale.x * g + 0.5,
|
|
1106
|
-
this.renderer.setScissor(
|
|
1130
|
+
const m = d.scale.x * g + 0.5, x = d.scale.y * g + 0.5, S = h - m / 2, L = f - x / 2, T = (S * this.qualityFactor - p) / l, E = (L * this.qualityFactor - p) / l, b = (m * this.qualityFactor + p * 2) / l, w = (x * this.qualityFactor + p * 2) / l;
|
|
1131
|
+
this.renderer.setScissor(T, E, b, w), this.renderer.render(this.scene, this.camera);
|
|
1107
1132
|
}
|
|
1108
|
-
this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(
|
|
1133
|
+
this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, c);
|
|
1109
1134
|
}
|
|
1110
1135
|
render() {
|
|
1111
|
-
for (let e = 0; e <
|
|
1136
|
+
for (let e = 0; e < O.MAX_LAYERS; e++) {
|
|
1112
1137
|
const t = e + 1;
|
|
1113
1138
|
this.captureRenderTarget(
|
|
1114
1139
|
this.travelersByLayer[e],
|
|
1115
|
-
|
|
1140
|
+
D.getCaptureLayer(t),
|
|
1116
1141
|
this.renderTargets[e]
|
|
1117
1142
|
);
|
|
1118
1143
|
}
|
|
1119
1144
|
this.renderer.render(this.scene, this.camera);
|
|
1120
1145
|
}
|
|
1121
1146
|
syncMeshesByDOM() {
|
|
1122
|
-
const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY,
|
|
1147
|
+
const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), i = this.renderer.domElement.width / r, c = this.renderer.domElement.height / r;
|
|
1123
1148
|
this.scene.children.forEach((n) => {
|
|
1124
|
-
const
|
|
1125
|
-
if (!
|
|
1149
|
+
const o = n;
|
|
1150
|
+
if (!o.userData || !o.userData.domElement)
|
|
1126
1151
|
return;
|
|
1127
|
-
const
|
|
1128
|
-
if (!
|
|
1152
|
+
const a = o.userData.domElement;
|
|
1153
|
+
if (!a.isConnected)
|
|
1129
1154
|
return;
|
|
1130
1155
|
let l;
|
|
1131
|
-
if (
|
|
1156
|
+
if (a.nodeType === Node.TEXT_NODE) {
|
|
1132
1157
|
const h = document.createRange();
|
|
1133
|
-
h.selectNode(
|
|
1158
|
+
h.selectNode(a), l = h.getBoundingClientRect();
|
|
1134
1159
|
} else
|
|
1135
|
-
l =
|
|
1136
|
-
const d =
|
|
1160
|
+
l = a.getBoundingClientRect();
|
|
1161
|
+
const d = o.userData.domRect;
|
|
1137
1162
|
if (!d || Math.abs(l.x - d.x) > 0.5 || Math.abs(l.y - d.y) > 0.5 || Math.abs(l.width - d.width) > 0.5 || Math.abs(l.height - d.height) > 0.5) {
|
|
1138
|
-
|
|
1163
|
+
o.userData.domRect = {
|
|
1139
1164
|
x: l.x,
|
|
1140
1165
|
y: l.y,
|
|
1141
1166
|
width: l.width,
|
|
@@ -1146,14 +1171,30 @@ class rt {
|
|
|
1146
1171
|
h = l.x - window.innerWidth / 2 + l.width / 2, f = -l.y + window.innerHeight / 2 - l.height / 2;
|
|
1147
1172
|
else {
|
|
1148
1173
|
const p = l.x - e, g = l.y - t;
|
|
1149
|
-
h = p -
|
|
1174
|
+
h = p - i / 2 + l.width / 2, f = -g + c / 2 - l.height / 2;
|
|
1150
1175
|
}
|
|
1151
|
-
if (
|
|
1176
|
+
if (o.position.setX(h), o.position.setY(f), o.scale.set(l.width, l.height, 1), o.updateMatrixWorld(), o.material instanceof y.ShaderMaterial && X.forceUpdateUniforms(o.material, {
|
|
1152
1177
|
width: l.width,
|
|
1153
1178
|
height: l.height
|
|
1154
|
-
}),
|
|
1155
|
-
const p =
|
|
1156
|
-
|
|
1179
|
+
}), o.userData.nativeMesh) {
|
|
1180
|
+
const p = o.userData.nativeMesh;
|
|
1181
|
+
let g = l.width, m = l.height, x = h, S = f;
|
|
1182
|
+
if (o.userData.nativeTransform) {
|
|
1183
|
+
const L = o.userData.nativeTransform, T = L.match(/scale\(([\d.]+%?)\)/);
|
|
1184
|
+
if (T) {
|
|
1185
|
+
let b = parseFloat(T[1]);
|
|
1186
|
+
T[1].includes("%") && (b /= 100), g *= b, m *= b;
|
|
1187
|
+
}
|
|
1188
|
+
const E = L.match(/translate\(([^,]+),\s*([^)]+)\)/);
|
|
1189
|
+
if (E) {
|
|
1190
|
+
const b = E[1].trim(), w = E[2].trim();
|
|
1191
|
+
let k = parseFloat(b);
|
|
1192
|
+
b.includes("%") && (k = k / 100 * l.width);
|
|
1193
|
+
let U = parseFloat(w);
|
|
1194
|
+
w.includes("%") && (U = U / 100 * l.height), x += k, S -= U;
|
|
1195
|
+
}
|
|
1196
|
+
}
|
|
1197
|
+
p.position.setX(x), p.position.setY(S), p.scale.set(g, m, 1), p.updateMatrixWorld();
|
|
1157
1198
|
}
|
|
1158
1199
|
}
|
|
1159
1200
|
});
|
|
@@ -1161,86 +1202,86 @@ class rt {
|
|
|
1161
1202
|
}
|
|
1162
1203
|
function it(s) {
|
|
1163
1204
|
const e = s.textContent || "", t = [];
|
|
1164
|
-
let
|
|
1205
|
+
let r = "", i = null, c = -1;
|
|
1165
1206
|
const n = (l, d) => {
|
|
1166
1207
|
for (let h = 0; h < l.length; h++) {
|
|
1167
1208
|
const f = l[h], p = document.createRange();
|
|
1168
1209
|
p.setStart(s, d + h), p.setEnd(s, d + h + 1);
|
|
1169
1210
|
const g = p.getBoundingClientRect();
|
|
1170
1211
|
if (g.width === 0 && g.height === 0) {
|
|
1171
|
-
|
|
1212
|
+
r += f;
|
|
1172
1213
|
continue;
|
|
1173
1214
|
}
|
|
1174
|
-
|
|
1175
|
-
text:
|
|
1215
|
+
c === -1 || Math.abs(g.top - c) > g.height / 2 ? (r && i && t.push({
|
|
1216
|
+
text: r,
|
|
1176
1217
|
rect: {
|
|
1177
|
-
left:
|
|
1178
|
-
top:
|
|
1179
|
-
width:
|
|
1180
|
-
height:
|
|
1218
|
+
left: i.left,
|
|
1219
|
+
top: i.top,
|
|
1220
|
+
width: i.right - i.left,
|
|
1221
|
+
height: i.bottom - i.top
|
|
1181
1222
|
}
|
|
1182
|
-
}),
|
|
1223
|
+
}), r = f, i = {
|
|
1183
1224
|
left: g.left,
|
|
1184
1225
|
top: g.top,
|
|
1185
1226
|
right: g.right,
|
|
1186
1227
|
bottom: g.bottom
|
|
1187
|
-
},
|
|
1188
|
-
|
|
1228
|
+
}, c = g.top) : (r += f, i && (i.left = Math.min(i.left, g.left), i.top = Math.min(i.top, g.top), i.right = Math.max(i.right, g.right), i.bottom = Math.max(
|
|
1229
|
+
i.bottom,
|
|
1189
1230
|
g.bottom
|
|
1190
1231
|
)));
|
|
1191
1232
|
}
|
|
1192
|
-
},
|
|
1193
|
-
let
|
|
1194
|
-
for (const l of
|
|
1233
|
+
}, o = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
|
|
1234
|
+
let a = 0;
|
|
1235
|
+
for (const l of o) {
|
|
1195
1236
|
const d = document.createRange();
|
|
1196
|
-
d.setStart(s,
|
|
1237
|
+
d.setStart(s, a), d.setEnd(s, a + l.length);
|
|
1197
1238
|
const h = d.getClientRects();
|
|
1198
1239
|
if (h.length > 1)
|
|
1199
|
-
n(l,
|
|
1240
|
+
n(l, a);
|
|
1200
1241
|
else {
|
|
1201
1242
|
const f = h.length === 1 ? h[0] : d.getBoundingClientRect();
|
|
1202
1243
|
if (f.width === 0 && f.height === 0) {
|
|
1203
|
-
|
|
1244
|
+
r += l, a += l.length;
|
|
1204
1245
|
continue;
|
|
1205
1246
|
}
|
|
1206
|
-
|
|
1207
|
-
text:
|
|
1247
|
+
c === -1 || Math.abs(f.top - c) > f.height / 2 ? (r && i && t.push({
|
|
1248
|
+
text: r,
|
|
1208
1249
|
rect: {
|
|
1209
|
-
left:
|
|
1210
|
-
top:
|
|
1211
|
-
width:
|
|
1212
|
-
height:
|
|
1250
|
+
left: i.left,
|
|
1251
|
+
top: i.top,
|
|
1252
|
+
width: i.right - i.left,
|
|
1253
|
+
height: i.bottom - i.top
|
|
1213
1254
|
}
|
|
1214
|
-
}),
|
|
1255
|
+
}), r = l, i = {
|
|
1215
1256
|
left: f.left,
|
|
1216
1257
|
top: f.top,
|
|
1217
1258
|
right: f.right,
|
|
1218
1259
|
bottom: f.bottom
|
|
1219
|
-
},
|
|
1220
|
-
|
|
1260
|
+
}, c = f.top) : (r += l, i && (i.left = Math.min(i.left, f.left), i.top = Math.min(i.top, f.top), i.right = Math.max(i.right, f.right), i.bottom = Math.max(
|
|
1261
|
+
i.bottom,
|
|
1221
1262
|
f.bottom
|
|
1222
1263
|
)));
|
|
1223
1264
|
}
|
|
1224
|
-
|
|
1265
|
+
a += l.length;
|
|
1225
1266
|
}
|
|
1226
|
-
return
|
|
1227
|
-
text:
|
|
1267
|
+
return r && i && t.push({
|
|
1268
|
+
text: r,
|
|
1228
1269
|
rect: {
|
|
1229
|
-
left:
|
|
1230
|
-
top:
|
|
1231
|
-
width:
|
|
1232
|
-
height:
|
|
1270
|
+
left: i.left,
|
|
1271
|
+
top: i.top,
|
|
1272
|
+
width: i.right - i.left,
|
|
1273
|
+
height: i.bottom - i.top
|
|
1233
1274
|
}
|
|
1234
1275
|
}), t.filter(
|
|
1235
1276
|
(l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
|
|
1236
1277
|
);
|
|
1237
1278
|
}
|
|
1238
|
-
function
|
|
1279
|
+
function Re(s) {
|
|
1239
1280
|
const e = parseFloat(s.fontSize);
|
|
1240
1281
|
let t = parseFloat(s.lineHeight);
|
|
1241
1282
|
isNaN(t) && (t = e * 1.2);
|
|
1242
|
-
let
|
|
1243
|
-
return isNaN(
|
|
1283
|
+
let r = parseFloat(s.letterSpacing);
|
|
1284
|
+
return isNaN(r) && (r = 0), {
|
|
1244
1285
|
font: `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,
|
|
1245
1286
|
fontSize: s.fontSize,
|
|
1246
1287
|
color: s.color,
|
|
@@ -1248,111 +1289,111 @@ function Le(s) {
|
|
|
1248
1289
|
textBaseline: "alphabetic",
|
|
1249
1290
|
direction: s.direction || "inherit",
|
|
1250
1291
|
lineHeight: t,
|
|
1251
|
-
letterSpacing:
|
|
1292
|
+
letterSpacing: r
|
|
1252
1293
|
};
|
|
1253
1294
|
}
|
|
1254
|
-
function ke(s, e = q |
|
|
1295
|
+
function ke(s, e = q | Z | Ye | ce | ie, t, r = 1, i = 0, c = 2, n, o) {
|
|
1255
1296
|
var de, ue, fe, ge, pe, me;
|
|
1256
1297
|
if (s.nodeType === Node.TEXT_NODE) {
|
|
1257
1298
|
const v = s;
|
|
1258
1299
|
if (!v.textContent || !v.textContent.trim())
|
|
1259
1300
|
return null;
|
|
1260
|
-
const
|
|
1261
|
-
if (
|
|
1301
|
+
const M = v.textContent.replace(/\s+/g, " ");
|
|
1302
|
+
if (M.length === 0)
|
|
1262
1303
|
return null;
|
|
1263
|
-
const
|
|
1264
|
-
if (
|
|
1304
|
+
const I = it(v);
|
|
1305
|
+
if (I.length === 0)
|
|
1265
1306
|
return null;
|
|
1266
|
-
const
|
|
1267
|
-
if (!
|
|
1307
|
+
const F = v.parentElement, A = F ? window.getComputedStyle(F) : null;
|
|
1308
|
+
if (!A)
|
|
1268
1309
|
return null;
|
|
1269
|
-
const
|
|
1310
|
+
const V = Math.min(...I.map((C) => C.rect.left)), _ = Math.min(...I.map((C) => C.rect.top)), H = Math.max(...I.map((C) => C.rect.left + C.rect.width)), R = Math.max(...I.map((C) => C.rect.top + C.rect.height));
|
|
1270
1311
|
return {
|
|
1271
1312
|
id: Math.random().toString(36).substring(2, 9),
|
|
1272
1313
|
type: "TEXT",
|
|
1273
1314
|
element: v,
|
|
1274
1315
|
rect: {
|
|
1275
|
-
x:
|
|
1276
|
-
y:
|
|
1277
|
-
width:
|
|
1278
|
-
height:
|
|
1316
|
+
x: V + window.scrollX,
|
|
1317
|
+
y: _ + window.scrollY,
|
|
1318
|
+
width: H - V,
|
|
1319
|
+
height: R - _
|
|
1279
1320
|
},
|
|
1280
1321
|
styles: {
|
|
1281
1322
|
backgroundColor: "transparent",
|
|
1282
1323
|
backgroundImage: "",
|
|
1283
|
-
opacity:
|
|
1284
|
-
zIndex: (isNaN(parseInt(
|
|
1324
|
+
opacity: F && F.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(A.opacity),
|
|
1325
|
+
zIndex: (isNaN(parseInt(A.zIndex)) ? 0 : parseInt(A.zIndex)) + i,
|
|
1285
1326
|
borderRadius: "0px",
|
|
1286
1327
|
borderColor: "transparent",
|
|
1287
1328
|
borderWidth: "0px",
|
|
1288
1329
|
isTraveler: !1
|
|
1289
1330
|
},
|
|
1290
|
-
textContent:
|
|
1291
|
-
textLines:
|
|
1292
|
-
text:
|
|
1331
|
+
textContent: M,
|
|
1332
|
+
textLines: I.map((C) => ({
|
|
1333
|
+
text: C.text.trim(),
|
|
1293
1334
|
rect: {
|
|
1294
|
-
x:
|
|
1295
|
-
y:
|
|
1296
|
-
width:
|
|
1297
|
-
height:
|
|
1335
|
+
x: C.rect.left + window.scrollX,
|
|
1336
|
+
y: C.rect.top + window.scrollY,
|
|
1337
|
+
width: C.rect.width,
|
|
1338
|
+
height: C.rect.height
|
|
1298
1339
|
}
|
|
1299
1340
|
})),
|
|
1300
|
-
textStyles:
|
|
1341
|
+
textStyles: Re(A),
|
|
1301
1342
|
dirtyMask: e,
|
|
1302
1343
|
visibility: t,
|
|
1303
1344
|
isTraveler: !1,
|
|
1304
|
-
captureLayer:
|
|
1305
|
-
isFixed:
|
|
1345
|
+
captureLayer: r,
|
|
1346
|
+
isFixed: A.position === "fixed",
|
|
1306
1347
|
nativeLayer: n,
|
|
1307
|
-
nativeStyles:
|
|
1348
|
+
nativeStyles: o ? $($({
|
|
1308
1349
|
backgroundColor: "transparent",
|
|
1309
1350
|
backgroundImage: "",
|
|
1310
|
-
opacity:
|
|
1311
|
-
zIndex: (isNaN(parseInt(
|
|
1351
|
+
opacity: F && F.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(A.opacity),
|
|
1352
|
+
zIndex: (isNaN(parseInt(A.zIndex)) ? 0 : parseInt(A.zIndex)) + i,
|
|
1312
1353
|
borderRadius: "0px",
|
|
1313
1354
|
borderColor: "transparent",
|
|
1314
1355
|
borderWidth: "0px",
|
|
1315
1356
|
isTraveler: !1
|
|
1316
|
-
},
|
|
1317
|
-
nativeRect:
|
|
1318
|
-
x:
|
|
1319
|
-
y:
|
|
1320
|
-
width:
|
|
1321
|
-
height:
|
|
1357
|
+
}, Re(A)), o) : void 0,
|
|
1358
|
+
nativeRect: o ? {
|
|
1359
|
+
x: V + window.scrollX,
|
|
1360
|
+
y: _ + window.scrollY,
|
|
1361
|
+
width: H - V,
|
|
1362
|
+
height: R - _
|
|
1322
1363
|
} : void 0,
|
|
1323
1364
|
children: []
|
|
1324
1365
|
};
|
|
1325
1366
|
}
|
|
1326
1367
|
if (s.nodeType !== Node.ELEMENT_NODE)
|
|
1327
1368
|
return null;
|
|
1328
|
-
const
|
|
1369
|
+
const a = s, l = a.dataset[z.KEY];
|
|
1329
1370
|
let d = t, h = t;
|
|
1330
1371
|
if (l) {
|
|
1331
1372
|
const v = new Set(l.split(/\s+/));
|
|
1332
|
-
for (const
|
|
1333
|
-
if (!
|
|
1373
|
+
for (const M of v)
|
|
1374
|
+
if (!Ce.includes(M))
|
|
1334
1375
|
throw new Error(
|
|
1335
|
-
`[MirageEngine] Invalid filter token: '${
|
|
1376
|
+
`[MirageEngine] Invalid filter token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1336
1377
|
);
|
|
1337
|
-
if (v.has(
|
|
1378
|
+
if (v.has(z.VALUES.END))
|
|
1338
1379
|
return null;
|
|
1339
|
-
if (v.has(
|
|
1380
|
+
if (v.has(z.VALUES.INCLUDE_TREE) && v.has(z.VALUES.EXCLUDE_TREE))
|
|
1340
1381
|
throw new Error(
|
|
1341
1382
|
"[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
|
|
1342
1383
|
);
|
|
1343
|
-
if (v.has(
|
|
1384
|
+
if (v.has(z.VALUES.INCLUDE_SELF) && v.has(z.VALUES.EXCLUDE_SELF))
|
|
1344
1385
|
throw new Error(
|
|
1345
1386
|
"[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1346
1387
|
);
|
|
1347
|
-
v.has(
|
|
1388
|
+
v.has(z.VALUES.INCLUDE_TREE) ? d = d | W : v.has(z.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, v.has(z.VALUES.INCLUDE_SELF) ? h = h | W : v.has(z.VALUES.EXCLUDE_SELF) && (h = h & ~W);
|
|
1348
1389
|
}
|
|
1349
|
-
const f =
|
|
1390
|
+
const f = a.dataset[Y.KEY];
|
|
1350
1391
|
if (f) {
|
|
1351
1392
|
const v = new Set(f.split(/\s+/));
|
|
1352
|
-
for (const
|
|
1353
|
-
if (!
|
|
1393
|
+
for (const M of v)
|
|
1394
|
+
if (!Ce.includes(M))
|
|
1354
1395
|
throw new Error(
|
|
1355
|
-
`[MirageEngine] Invalid select token: '${
|
|
1396
|
+
`[MirageEngine] Invalid select token: '${M}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1356
1397
|
);
|
|
1357
1398
|
if (v.has(Y.VALUES.END))
|
|
1358
1399
|
return null;
|
|
@@ -1364,186 +1405,199 @@ function ke(s, e = q | Q | Ye | ce | re, t, i = 1, r = 0, o = 2, n, a) {
|
|
|
1364
1405
|
throw new Error(
|
|
1365
1406
|
"[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1366
1407
|
);
|
|
1367
|
-
v.has(Y.VALUES.INCLUDE_TREE) ? d = d |
|
|
1408
|
+
v.has(Y.VALUES.INCLUDE_TREE) ? d = d | K : v.has(Y.VALUES.EXCLUDE_TREE) && (d = d & ~K), h = d, v.has(Y.VALUES.INCLUDE_SELF) ? h = h | K : v.has(Y.VALUES.EXCLUDE_SELF) && (h = h & ~K);
|
|
1368
1409
|
}
|
|
1369
|
-
const p =
|
|
1370
|
-
let g = !1, m =
|
|
1410
|
+
const p = a.dataset[O.KEY];
|
|
1411
|
+
let g = !1, m = o ? $({}, o) : {}, x = n;
|
|
1371
1412
|
if (p) {
|
|
1372
1413
|
let v = 1;
|
|
1373
|
-
const
|
|
1374
|
-
let
|
|
1375
|
-
if (
|
|
1376
|
-
|
|
1377
|
-
const
|
|
1414
|
+
const M = p.indexOf("{"), I = p.lastIndexOf("}");
|
|
1415
|
+
let F = p;
|
|
1416
|
+
if (M !== -1 && I !== -1 && I > M) {
|
|
1417
|
+
F = p.substring(0, M).trim();
|
|
1418
|
+
const R = p.substring(M, I + 1);
|
|
1378
1419
|
try {
|
|
1379
|
-
m = new Function("return " +
|
|
1380
|
-
} catch (
|
|
1420
|
+
m = new Function("return " + R)();
|
|
1421
|
+
} catch (C) {
|
|
1381
1422
|
console.warn(
|
|
1382
|
-
`[MirageEngine] Failed to parse travel styles JSON: ${
|
|
1423
|
+
`[MirageEngine] Failed to parse travel styles JSON: ${R}`
|
|
1383
1424
|
);
|
|
1384
1425
|
}
|
|
1385
1426
|
}
|
|
1386
|
-
const
|
|
1387
|
-
let
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1427
|
+
const A = F.split(/\s+/);
|
|
1428
|
+
let V = !1;
|
|
1429
|
+
const _ = A.indexOf(O.VALUES.TRAVELER);
|
|
1430
|
+
if (_ !== -1) {
|
|
1431
|
+
g = !0, V = !0;
|
|
1432
|
+
const R = A[_ + 1];
|
|
1433
|
+
if (R && !isNaN(parseInt(R, 10)))
|
|
1434
|
+
v = parseInt(R, 10);
|
|
1435
|
+
else {
|
|
1436
|
+
const C = A.find((j) => !isNaN(parseInt(j, 10)));
|
|
1437
|
+
C && (v = parseInt(C, 10));
|
|
1438
|
+
}
|
|
1396
1439
|
}
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1440
|
+
const H = A.indexOf(O.VALUES.NATIVE);
|
|
1441
|
+
if (H !== -1) {
|
|
1442
|
+
const R = A[H + 1];
|
|
1443
|
+
if (R && !isNaN(parseInt(R, 10)))
|
|
1444
|
+
x = parseInt(R, 10);
|
|
1445
|
+
else if (!g) {
|
|
1446
|
+
const C = A.find((j) => !isNaN(parseInt(j, 10)));
|
|
1447
|
+
C && (x = parseInt(C, 10));
|
|
1448
|
+
}
|
|
1449
|
+
}
|
|
1450
|
+
if (V) {
|
|
1451
|
+
const R = v + 1;
|
|
1452
|
+
if (R < r)
|
|
1400
1453
|
throw new Error(
|
|
1401
|
-
`[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${
|
|
1454
|
+
`[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${r - 1}).`
|
|
1402
1455
|
);
|
|
1403
|
-
|
|
1456
|
+
r = Math.min(R, O.MAX_LAYERS + 1);
|
|
1404
1457
|
}
|
|
1405
1458
|
}
|
|
1406
|
-
const
|
|
1407
|
-
let
|
|
1408
|
-
|
|
1409
|
-
const
|
|
1410
|
-
if (
|
|
1459
|
+
const S = a.dataset[Ve.KEY];
|
|
1460
|
+
let L;
|
|
1461
|
+
S && (L = JSON.parse(S));
|
|
1462
|
+
const T = a.getBoundingClientRect(), E = window.getComputedStyle(a);
|
|
1463
|
+
if (T.width === 0 || T.height === 0 || E.display === "none")
|
|
1411
1464
|
return null;
|
|
1412
|
-
let
|
|
1413
|
-
|
|
1414
|
-
const
|
|
1415
|
-
let
|
|
1416
|
-
if (
|
|
1417
|
-
|
|
1418
|
-
else if (
|
|
1419
|
-
const v =
|
|
1420
|
-
const
|
|
1421
|
-
|
|
1422
|
-
const
|
|
1423
|
-
|
|
1424
|
-
const
|
|
1425
|
-
|
|
1426
|
-
const
|
|
1427
|
-
|
|
1428
|
-
for (let
|
|
1429
|
-
|
|
1465
|
+
let b = a.getAttribute("data-mid");
|
|
1466
|
+
b || (b = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", b));
|
|
1467
|
+
const w = parseInt(E.zIndex), k = (isNaN(w) ? 0 : w) + i;
|
|
1468
|
+
let U;
|
|
1469
|
+
if (a.tagName === "IMG")
|
|
1470
|
+
U = a.src;
|
|
1471
|
+
else if (a.tagName.toLowerCase() === "svg") {
|
|
1472
|
+
const v = a.cloneNode(!0), M = m == null ? void 0 : m.color, I = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, A = m == null ? void 0 : m.opacity, V = (C, j) => {
|
|
1473
|
+
const N = window.getComputedStyle(C), Q = j, Be = N.fill === N.color, Oe = N.stroke === N.color, se = I || (Be ? M : void 0) || N.fill;
|
|
1474
|
+
se && se !== "none" && (Q.style.fill = se);
|
|
1475
|
+
const ne = F || (Oe ? M : void 0) || N.stroke;
|
|
1476
|
+
ne && ne !== "none" && (Q.style.stroke = ne), N.strokeWidth && N.strokeWidth !== "0px" && (Q.style.strokeWidth = N.strokeWidth);
|
|
1477
|
+
const ve = M || N.color;
|
|
1478
|
+
ve && (Q.style.color = ve);
|
|
1479
|
+
const oe = A || N.opacity;
|
|
1480
|
+
oe && oe !== "1" && (Q.style.opacity = oe);
|
|
1481
|
+
for (let te = 0; te < C.children.length; te++)
|
|
1482
|
+
V(C.children[te], j.children[te]);
|
|
1430
1483
|
};
|
|
1431
|
-
|
|
1432
|
-
const
|
|
1433
|
-
v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${
|
|
1434
|
-
let
|
|
1435
|
-
|
|
1484
|
+
V(a, v);
|
|
1485
|
+
const _ = a.getBoundingClientRect(), H = window.devicePixelRatio * c;
|
|
1486
|
+
v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${_.width} ${_.height}`), v.setAttribute("width", (_.width * H).toString()), v.setAttribute("height", (_.height * H).toString());
|
|
1487
|
+
let R = new XMLSerializer().serializeToString(v);
|
|
1488
|
+
R.includes("xmlns=") || (R = R.replace(
|
|
1436
1489
|
"<svg",
|
|
1437
1490
|
'<svg xmlns="http://www.w3.org/2000/svg"'
|
|
1438
|
-
)),
|
|
1439
|
-
} else if (
|
|
1440
|
-
const v =
|
|
1441
|
-
v && (
|
|
1442
|
-
}
|
|
1443
|
-
const
|
|
1444
|
-
backgroundColor:
|
|
1445
|
-
backgroundImage:
|
|
1446
|
-
opacity:
|
|
1447
|
-
zIndex:
|
|
1448
|
-
borderRadius:
|
|
1449
|
-
borderColor:
|
|
1450
|
-
borderWidth:
|
|
1451
|
-
imageSrc:
|
|
1491
|
+
)), U = `data:image/svg+xml;utf8,${encodeURIComponent(R)}`;
|
|
1492
|
+
} else if (E.backgroundImage && E.backgroundImage !== "none") {
|
|
1493
|
+
const v = E.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
|
|
1494
|
+
v && (U = v[1]);
|
|
1495
|
+
}
|
|
1496
|
+
const B = {
|
|
1497
|
+
backgroundColor: E.backgroundColor,
|
|
1498
|
+
backgroundImage: E.backgroundImage,
|
|
1499
|
+
opacity: a.dataset[P.KEY] === P.VALUES.HIDE ? 1 : parseFloat(E.opacity),
|
|
1500
|
+
zIndex: k,
|
|
1501
|
+
borderRadius: E.borderRadius,
|
|
1502
|
+
borderColor: E.borderColor,
|
|
1503
|
+
borderWidth: E.borderWidth,
|
|
1504
|
+
imageSrc: U,
|
|
1452
1505
|
isTraveler: g
|
|
1453
|
-
},
|
|
1506
|
+
}, G = B;
|
|
1454
1507
|
let Ie, Ue;
|
|
1455
1508
|
const he = [];
|
|
1456
|
-
return
|
|
1457
|
-
const
|
|
1509
|
+
return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((v) => {
|
|
1510
|
+
const M = v.nodeType === Node.TEXT_NODE ? h : d, I = ke(
|
|
1458
1511
|
v,
|
|
1459
1512
|
e,
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1513
|
+
M,
|
|
1514
|
+
r,
|
|
1515
|
+
k,
|
|
1516
|
+
c,
|
|
1517
|
+
v.nodeType === Node.TEXT_NODE ? x : void 0,
|
|
1465
1518
|
v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
|
|
1466
1519
|
);
|
|
1467
|
-
|
|
1520
|
+
I && he.push(I);
|
|
1468
1521
|
}), {
|
|
1469
|
-
id:
|
|
1522
|
+
id: b,
|
|
1470
1523
|
type: "BOX",
|
|
1471
|
-
element:
|
|
1524
|
+
element: a,
|
|
1472
1525
|
rect: {
|
|
1473
|
-
x:
|
|
1474
|
-
y:
|
|
1475
|
-
width:
|
|
1476
|
-
height:
|
|
1526
|
+
x: T.left + window.scrollX,
|
|
1527
|
+
y: T.top + window.scrollY,
|
|
1528
|
+
width: T.width,
|
|
1529
|
+
height: T.height
|
|
1477
1530
|
},
|
|
1478
|
-
styles:
|
|
1531
|
+
styles: G,
|
|
1479
1532
|
textContent: Ie,
|
|
1480
1533
|
textStyles: Ue,
|
|
1481
1534
|
dirtyMask: e,
|
|
1482
1535
|
visibility: h,
|
|
1483
1536
|
isTraveler: g,
|
|
1484
|
-
captureLayer:
|
|
1485
|
-
nativeLayer:
|
|
1486
|
-
nativeStyles:
|
|
1487
|
-
backgroundColor: (de = m.backgroundColor) != null ? de :
|
|
1488
|
-
backgroundImage: (ue = m.backgroundImage) != null ? ue :
|
|
1489
|
-
opacity: (fe = m.opacity) != null ? fe :
|
|
1490
|
-
zIndex: m.zIndex !== void 0 ? m.zIndex +
|
|
1491
|
-
borderRadius: (ge = m.borderRadius) != null ? ge :
|
|
1492
|
-
borderColor: (pe = m.borderColor) != null ? pe :
|
|
1493
|
-
borderWidth: (me = m.borderWidth) != null ? me :
|
|
1494
|
-
isTraveler:
|
|
1537
|
+
captureLayer: r,
|
|
1538
|
+
nativeLayer: x,
|
|
1539
|
+
nativeStyles: x !== void 0 ? be($({}, B), {
|
|
1540
|
+
backgroundColor: (de = m.backgroundColor) != null ? de : B.backgroundColor,
|
|
1541
|
+
backgroundImage: (ue = m.backgroundImage) != null ? ue : B.backgroundImage,
|
|
1542
|
+
opacity: (fe = m.opacity) != null ? fe : B.opacity,
|
|
1543
|
+
zIndex: m.zIndex !== void 0 ? m.zIndex + k : B.zIndex,
|
|
1544
|
+
borderRadius: (ge = m.borderRadius) != null ? ge : B.borderRadius,
|
|
1545
|
+
borderColor: (pe = m.borderColor) != null ? pe : B.borderColor,
|
|
1546
|
+
borderWidth: (me = m.borderWidth) != null ? me : B.borderWidth,
|
|
1547
|
+
isTraveler: B.isTraveler,
|
|
1548
|
+
transform: m.transform
|
|
1495
1549
|
}) : void 0,
|
|
1496
|
-
nativeRect:
|
|
1497
|
-
x: m.x !== void 0 ? parseFloat(m.x) :
|
|
1498
|
-
y: m.y !== void 0 ? parseFloat(m.y) :
|
|
1499
|
-
width: m.width !== void 0 ? parseFloat(m.width) :
|
|
1500
|
-
height: m.height !== void 0 ? parseFloat(m.height) :
|
|
1550
|
+
nativeRect: x !== void 0 ? {
|
|
1551
|
+
x: m.x !== void 0 ? parseFloat(m.x) : T.left + window.scrollX,
|
|
1552
|
+
y: m.y !== void 0 ? parseFloat(m.y) : T.top + window.scrollY,
|
|
1553
|
+
width: m.width !== void 0 ? parseFloat(m.width) : T.width,
|
|
1554
|
+
height: m.height !== void 0 ? parseFloat(m.height) : T.height
|
|
1501
1555
|
} : void 0,
|
|
1502
|
-
isFixed:
|
|
1556
|
+
isFixed: E.position === "fixed",
|
|
1503
1557
|
children: he,
|
|
1504
|
-
shaderHooks:
|
|
1558
|
+
shaderHooks: L
|
|
1505
1559
|
};
|
|
1506
1560
|
}
|
|
1507
1561
|
function st(s, e) {
|
|
1508
|
-
e.size !== 0 && e.forEach((t,
|
|
1509
|
-
var
|
|
1510
|
-
const
|
|
1511
|
-
!
|
|
1562
|
+
e.size !== 0 && e.forEach((t, r) => {
|
|
1563
|
+
var c, n, o, a;
|
|
1564
|
+
const i = s.get(r);
|
|
1565
|
+
!i || !i.userData.basePosition || (X.forceUpdateUniforms(i.material, {
|
|
1512
1566
|
backgroundColor: t.backgroundColor,
|
|
1513
1567
|
backgroundImage: t.backgroundImage,
|
|
1514
1568
|
opacity: t.opacity,
|
|
1515
|
-
borderRadius: (n = t.borderRadius) != null ? n : (
|
|
1569
|
+
borderRadius: (n = t.borderRadius) != null ? n : (c = i.userData.baseStyles) == null ? void 0 : c.borderRadius
|
|
1516
1570
|
// width and height are no longer updated here, they are updated in syncMeshesByDOM
|
|
1517
|
-
}),
|
|
1571
|
+
}), i.userData.nativeMesh && X.forceUpdateUniforms(i.userData.nativeMesh.material, {
|
|
1518
1572
|
backgroundColor: t.backgroundColor,
|
|
1519
1573
|
backgroundImage: t.backgroundImage,
|
|
1520
1574
|
opacity: t.opacity,
|
|
1521
|
-
borderRadius: (
|
|
1575
|
+
borderRadius: (a = t.borderRadius) != null ? a : (o = i.userData.baseStyles) == null ? void 0 : o.borderRadius
|
|
1522
1576
|
}));
|
|
1523
1577
|
});
|
|
1524
1578
|
}
|
|
1525
1579
|
class nt {
|
|
1526
|
-
constructor(e, t,
|
|
1580
|
+
constructor(e, t, r, i) {
|
|
1527
1581
|
u(this, "target");
|
|
1528
1582
|
u(this, "renderer");
|
|
1529
1583
|
u(this, "registry");
|
|
1530
1584
|
u(this, "isTravelEnabled", !1);
|
|
1531
1585
|
u(this, "tracker");
|
|
1532
|
-
this.target = e, this.renderer = t, this.registry =
|
|
1533
|
-
resizeDebounce:
|
|
1534
|
-
}), this.tracker.onLayoutChange.add((
|
|
1535
|
-
document.querySelector(`[${
|
|
1536
|
-
const
|
|
1586
|
+
this.target = e, this.renderer = t, this.registry = r, this.tracker = new Me(e, {
|
|
1587
|
+
resizeDebounce: i.resizeDebounce
|
|
1588
|
+
}), this.tracker.onLayoutChange.add((c, n) => {
|
|
1589
|
+
document.querySelector(`[${O.NAME}~='${O.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
|
|
1590
|
+
const a = ke(
|
|
1537
1591
|
this.target,
|
|
1538
|
-
|
|
1592
|
+
c,
|
|
1539
1593
|
W,
|
|
1540
1594
|
1,
|
|
1541
1595
|
0,
|
|
1542
1596
|
this.renderer.qualityFactor
|
|
1543
1597
|
);
|
|
1544
|
-
|
|
1545
|
-
}), this.tracker.onStyleChange.add((
|
|
1546
|
-
st(this.registry,
|
|
1598
|
+
a && this.renderer.syncScene(a, n);
|
|
1599
|
+
}), this.tracker.onStyleChange.add((c) => {
|
|
1600
|
+
st(this.registry, c);
|
|
1547
1601
|
}), this.tracker.onRender.add(() => {
|
|
1548
1602
|
this.renderer.syncMeshesByDOM(), this.renderer.render();
|
|
1549
1603
|
});
|
|
@@ -1586,22 +1640,22 @@ class at {
|
|
|
1586
1640
|
u(this, "syncer");
|
|
1587
1641
|
u(this, "target");
|
|
1588
1642
|
u(this, "registry");
|
|
1589
|
-
var
|
|
1643
|
+
var i, c, n;
|
|
1590
1644
|
if (this.target = e, this.registry = new ot(), !document.getElementById("mirage-engine-styles")) {
|
|
1591
|
-
const
|
|
1592
|
-
|
|
1593
|
-
[${
|
|
1645
|
+
const o = document.createElement("style");
|
|
1646
|
+
o.id = "mirage-engine-styles", o.textContent = `
|
|
1647
|
+
[${P.NAME}="${P.VALUES.HIDE}"] {
|
|
1594
1648
|
opacity: 0 !important;
|
|
1595
1649
|
}
|
|
1596
|
-
`, document.head.appendChild(
|
|
1650
|
+
`, document.head.appendChild(o);
|
|
1597
1651
|
}
|
|
1598
|
-
let
|
|
1599
|
-
if (t.mode === "duplicate" ?
|
|
1652
|
+
let r;
|
|
1653
|
+
if (t.mode === "duplicate" ? r = (c = (i = t.container) != null ? i : this.target.parentElement) != null ? c : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
|
|
1600
1654
|
throw new Error("[Mirage] Cannot find a container (parent or option).");
|
|
1601
1655
|
this.renderer = new rt(
|
|
1602
1656
|
this.target,
|
|
1603
1657
|
t,
|
|
1604
|
-
|
|
1658
|
+
r,
|
|
1605
1659
|
this.registry
|
|
1606
1660
|
), this.renderer.mount(), this.syncer = new nt(this.target, this.renderer, this.registry, t);
|
|
1607
1661
|
}
|
|
@@ -1635,15 +1689,15 @@ class at {
|
|
|
1635
1689
|
ArrowUp: !1,
|
|
1636
1690
|
ArrowDown: !1
|
|
1637
1691
|
};
|
|
1638
|
-
window.addEventListener("keydown", (
|
|
1639
|
-
t[
|
|
1640
|
-
}), window.addEventListener("keyup", (
|
|
1641
|
-
t[
|
|
1692
|
+
window.addEventListener("keydown", (c) => {
|
|
1693
|
+
t[c.key] !== void 0 && (t[c.key] = !0);
|
|
1694
|
+
}), window.addEventListener("keyup", (c) => {
|
|
1695
|
+
t[c.key] !== void 0 && (t[c.key] = !1);
|
|
1642
1696
|
});
|
|
1643
|
-
const
|
|
1644
|
-
requestAnimationFrame(
|
|
1697
|
+
const r = 2, i = () => {
|
|
1698
|
+
requestAnimationFrame(i), t.ArrowRight && e.position.setX(e.position.x + r), t.ArrowLeft && e.position.setX(e.position.x - r), t.ArrowUp && e.position.setY(e.position.y + r), t.ArrowDown && e.position.setY(e.position.y - r);
|
|
1645
1699
|
};
|
|
1646
|
-
|
|
1700
|
+
i();
|
|
1647
1701
|
}
|
|
1648
1702
|
}
|
|
1649
1703
|
class ct {
|
|
@@ -1685,34 +1739,34 @@ class ct {
|
|
|
1685
1739
|
const e = document.querySelectorAll(this.frontSelector);
|
|
1686
1740
|
this.frontLayer && e.forEach((t) => {
|
|
1687
1741
|
var n;
|
|
1688
|
-
const
|
|
1689
|
-
|
|
1690
|
-
display:
|
|
1691
|
-
width: `${
|
|
1692
|
-
height: `${
|
|
1742
|
+
const r = t.getBoundingClientRect(), i = window.getComputedStyle(t), c = document.createElement("div");
|
|
1743
|
+
c.className = "sand-placeholder", Object.assign(c.style, {
|
|
1744
|
+
display: i.display === "inline" ? "inline-block" : i.display,
|
|
1745
|
+
width: `${r.width}px`,
|
|
1746
|
+
height: `${r.height}px`,
|
|
1693
1747
|
boxSizing: "border-box",
|
|
1694
|
-
marginTop:
|
|
1695
|
-
marginBottom:
|
|
1696
|
-
marginLeft:
|
|
1697
|
-
marginRight:
|
|
1748
|
+
marginTop: i.marginTop,
|
|
1749
|
+
marginBottom: i.marginBottom,
|
|
1750
|
+
marginLeft: i.marginLeft,
|
|
1751
|
+
marginRight: i.marginRight,
|
|
1698
1752
|
visibility: "hidden",
|
|
1699
1753
|
pointerEvents: "none"
|
|
1700
|
-
}), (n = t.parentNode) == null || n.insertBefore(
|
|
1754
|
+
}), (n = t.parentNode) == null || n.insertBefore(c, t), this.frontLayer.appendChild(t), Object.assign(t.style, {
|
|
1701
1755
|
position: "fixed",
|
|
1702
1756
|
margin: "0",
|
|
1703
1757
|
boxSizing: "border-box",
|
|
1704
|
-
width: `${
|
|
1705
|
-
height: `${
|
|
1758
|
+
width: `${r.width}px`,
|
|
1759
|
+
height: `${r.height}px`,
|
|
1706
1760
|
pointerEvents: "auto"
|
|
1707
|
-
}), this.items.push({ placeholder:
|
|
1761
|
+
}), this.items.push({ placeholder: c, original: t });
|
|
1708
1762
|
});
|
|
1709
1763
|
}
|
|
1710
1764
|
setupHooks() {
|
|
1711
1765
|
this.tracker && this.tracker.onBeforeRender.add(() => {
|
|
1712
1766
|
const e = this.items.map(({ placeholder: t }) => t.getBoundingClientRect());
|
|
1713
|
-
this.items.forEach(({ original: t },
|
|
1714
|
-
const
|
|
1715
|
-
t.style.top = `${
|
|
1767
|
+
this.items.forEach(({ original: t }, r) => {
|
|
1768
|
+
const i = e[r];
|
|
1769
|
+
t.style.top = `${i.top}px`, t.style.left = `${i.left}px`, t.style.width = `${i.width}px`, t.style.height = `${i.height}px`;
|
|
1716
1770
|
});
|
|
1717
1771
|
});
|
|
1718
1772
|
}
|
|
@@ -1724,9 +1778,9 @@ class ht {
|
|
|
1724
1778
|
if (!e)
|
|
1725
1779
|
throw new Error("[Mirage] Target element is required.");
|
|
1726
1780
|
if (this._engine = new at(e, t), t.sandwich !== !1) {
|
|
1727
|
-
const
|
|
1781
|
+
const r = typeof t.sandwich == "object" ? t.sandwich : {};
|
|
1728
1782
|
this._sandwich = new ct({
|
|
1729
|
-
frontSelector:
|
|
1783
|
+
frontSelector: r.frontSelector || `[${Ee.NAME}='${Ee.VALUES.FRONT}']`
|
|
1730
1784
|
}), this._sandwich.useTracker(this._engine.getTracker());
|
|
1731
1785
|
}
|
|
1732
1786
|
}
|