@mirage-engine/core 0.3.13 → 0.3.14
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/CHANGELOG.md +6 -0
- package/dist/mirage-engine.js +437 -424
- package/dist/mirage-engine.umd.js +11 -11
- package/package.json +1 -1
- package/src/renderer/Renderer.ts +22 -0
package/dist/mirage-engine.js
CHANGED
|
@@ -2,7 +2,7 @@ var Fe = Object.defineProperty, Be = Object.defineProperties;
|
|
|
2
2
|
var Oe = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var we = Object.getOwnPropertySymbols;
|
|
4
4
|
var _e = Object.prototype.hasOwnProperty, Ne = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var me = (s, e, t) => e in s ? Fe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t,
|
|
5
|
+
var me = (s, e, t) => e in s ? Fe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, J = (s, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
7
|
_e.call(e, t) && me(s, t, e[t]);
|
|
8
8
|
if (we)
|
|
@@ -12,20 +12,20 @@ var me = (s, e, t) => e in s ? Fe(s, e, { enumerable: !0, configurable: !0, writ
|
|
|
12
12
|
}, xe = (s, e) => Be(s, Oe(e));
|
|
13
13
|
var p = (s, e, t) => (me(s, typeof e != "symbol" ? e + "" : e, t), t);
|
|
14
14
|
var Ee = (s, e, t) => new Promise((r, i) => {
|
|
15
|
-
var c = (
|
|
15
|
+
var c = (o) => {
|
|
16
16
|
try {
|
|
17
|
-
|
|
17
|
+
a(t.next(o));
|
|
18
18
|
} catch (l) {
|
|
19
19
|
i(l);
|
|
20
20
|
}
|
|
21
|
-
}, n = (
|
|
21
|
+
}, n = (o) => {
|
|
22
22
|
try {
|
|
23
|
-
|
|
23
|
+
a(t.throw(o));
|
|
24
24
|
} catch (l) {
|
|
25
25
|
i(l);
|
|
26
26
|
}
|
|
27
|
-
},
|
|
28
|
-
|
|
27
|
+
}, a = (o) => o.done ? r(o.value) : Promise.resolve(o.value).then(c, n);
|
|
28
|
+
a((t = t.apply(s, e)).next());
|
|
29
29
|
});
|
|
30
30
|
import * as y from "three";
|
|
31
31
|
const Le = {
|
|
@@ -34,7 +34,7 @@ const Le = {
|
|
|
34
34
|
INCLUDE_SELF: "include-self",
|
|
35
35
|
EXCLUDE_SELF: "exclude-self",
|
|
36
36
|
END: "end"
|
|
37
|
-
},
|
|
37
|
+
}, K = {
|
|
38
38
|
NAME: "data-mirage-dom",
|
|
39
39
|
KEY: "mirageDom",
|
|
40
40
|
VALUES: {
|
|
@@ -59,24 +59,24 @@ const Le = {
|
|
|
59
59
|
KEY: "mirageTravel",
|
|
60
60
|
VALUES: Ce,
|
|
61
61
|
MAX_LAYERS: Object.keys(Ce).length - 1
|
|
62
|
-
},
|
|
62
|
+
}, W = {
|
|
63
63
|
NAME: "data-mirage-filter",
|
|
64
64
|
KEY: "mirageFilter",
|
|
65
65
|
VALUES: Le
|
|
66
|
-
},
|
|
66
|
+
}, G = {
|
|
67
67
|
NAME: "data-mirage-select",
|
|
68
68
|
KEY: "mirageSelect",
|
|
69
69
|
VALUES: Le
|
|
70
70
|
}, Xe = {
|
|
71
71
|
NAME: "data-mirage-shader",
|
|
72
72
|
KEY: "mirageShader"
|
|
73
|
-
},
|
|
73
|
+
}, ot = {
|
|
74
74
|
NAME: "data-mirage-sandwich",
|
|
75
75
|
KEY: "mirageSandwich",
|
|
76
76
|
VALUES: {
|
|
77
77
|
FRONT: "front"
|
|
78
78
|
}
|
|
79
|
-
}, de = 0,
|
|
79
|
+
}, de = 0, Q = 1, le = 2, ze = 4, ue = 8, ve = 16;
|
|
80
80
|
function Ve(s) {
|
|
81
81
|
const e = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
|
82
82
|
return e ? {
|
|
@@ -120,7 +120,7 @@ class We {
|
|
|
120
120
|
p(this, "onScrollChange", /* @__PURE__ */ new Set());
|
|
121
121
|
p(this, "onRender", /* @__PURE__ */ new Set());
|
|
122
122
|
p(this, "onTransitionFinished", (e) => {
|
|
123
|
-
this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |=
|
|
123
|
+
this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= Q | le, this.cssTimer = window.setTimeout(() => {
|
|
124
124
|
this.isDomDirty = !0, this.cssTimer = null;
|
|
125
125
|
}, 50)));
|
|
126
126
|
});
|
|
@@ -139,7 +139,7 @@ class We {
|
|
|
139
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 = de);
|
|
140
140
|
const e = window.scrollX, t = window.scrollY;
|
|
141
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(() => {
|
|
142
|
-
this.pendingMask |=
|
|
142
|
+
this.pendingMask |= Q, this.isDomDirty = !0, this.scrollTimer = null;
|
|
143
143
|
}, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((r) => r(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((r) => r()), requestAnimationFrame(this.renderLoop);
|
|
144
144
|
});
|
|
145
145
|
var i, c;
|
|
@@ -151,23 +151,23 @@ class We {
|
|
|
151
151
|
onStart: r.onStart,
|
|
152
152
|
onEnd: r.onEnd
|
|
153
153
|
}, this.observer = new MutationObserver((n) => {
|
|
154
|
-
let
|
|
155
|
-
for (const
|
|
156
|
-
if (
|
|
157
|
-
|
|
154
|
+
let a = de;
|
|
155
|
+
for (const o of n)
|
|
156
|
+
if (o.type === "childList")
|
|
157
|
+
a |= ue, o.removedNodes.length > 0 && o.removedNodes.forEach((l) => {
|
|
158
158
|
l instanceof HTMLElement && this.pendingDeletions.add(l);
|
|
159
159
|
});
|
|
160
|
-
else if (
|
|
161
|
-
if (
|
|
162
|
-
|
|
163
|
-
const l =
|
|
160
|
+
else if (o.type === "attributes")
|
|
161
|
+
if (o.attributeName === "style") {
|
|
162
|
+
a |= Q | le;
|
|
163
|
+
const l = o.target, d = Ye(l.style);
|
|
164
164
|
this.pendingStyles.set(l, d);
|
|
165
165
|
} else
|
|
166
|
-
|
|
166
|
+
o.attributeName === "class" ? a |= Q | le : o.attributeName && o.attributeName.startsWith("data-") && (a |= Q | le, o.attributeName.startsWith("data-mirage") && (a |= ue));
|
|
167
167
|
else
|
|
168
|
-
|
|
169
|
-
if (
|
|
170
|
-
if (this.pendingMask |=
|
|
168
|
+
o.type === "characterData" && (a |= ve | Q);
|
|
169
|
+
if (a !== de) {
|
|
170
|
+
if (this.pendingMask |= a, a & ue) {
|
|
171
171
|
this.clearTimers(), this.isDomDirty = !0;
|
|
172
172
|
return;
|
|
173
173
|
}
|
|
@@ -192,12 +192,12 @@ class We {
|
|
|
192
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);
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
|
-
const
|
|
195
|
+
const H = 1, ie = 2, lt = 0, k = {
|
|
196
196
|
BASE: 0,
|
|
197
197
|
SELECTED: 1,
|
|
198
198
|
getCaptureLayer: (s) => 31 - s,
|
|
199
199
|
HIDDEN: 31
|
|
200
|
-
}, Se = Object.values(
|
|
200
|
+
}, Se = Object.values(W.VALUES);
|
|
201
201
|
class De {
|
|
202
202
|
/**
|
|
203
203
|
* Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
|
|
@@ -238,35 +238,35 @@ class He extends y.MeshBasicMaterial {
|
|
|
238
238
|
const i = t.split(`
|
|
239
239
|
`), c = [];
|
|
240
240
|
return i.forEach((n) => {
|
|
241
|
-
const
|
|
242
|
-
if (
|
|
241
|
+
const a = n.match(/[^\s\-]+\-?|\-|\s+/g) || [];
|
|
242
|
+
if (a.length === 0) {
|
|
243
243
|
c.push("");
|
|
244
244
|
return;
|
|
245
245
|
}
|
|
246
|
-
let
|
|
247
|
-
for (let l = 1; l <
|
|
248
|
-
const d =
|
|
249
|
-
this.ctx.measureText(
|
|
246
|
+
let o = a[0];
|
|
247
|
+
for (let l = 1; l < a.length; l++) {
|
|
248
|
+
const d = a[l];
|
|
249
|
+
this.ctx.measureText(o + d).width <= r + 2 ? o += d : (o && c.push(o), o = d.trimStart());
|
|
250
250
|
}
|
|
251
|
-
|
|
251
|
+
o && c.push(o);
|
|
252
252
|
}), c;
|
|
253
253
|
}
|
|
254
254
|
updateText(t, r, i, c, n) {
|
|
255
255
|
n !== void 0 && (this.qualityFactor = n);
|
|
256
|
-
const
|
|
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(
|
|
256
|
+
const o = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * o, d = c * o;
|
|
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(o, 0, 0, o, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
|
|
258
258
|
const h = this.wrapText(t, i), f = r.lineHeight, v = De.getBaseline(r.font);
|
|
259
259
|
h.forEach((g, m) => {
|
|
260
|
-
const
|
|
261
|
-
let
|
|
262
|
-
r.textAlign === "center" ?
|
|
260
|
+
const E = m * f + v;
|
|
261
|
+
let L = 0;
|
|
262
|
+
r.textAlign === "center" ? L = i / 2 : r.textAlign === "right" && (L = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, L, E);
|
|
263
263
|
}), this.map && (this.map.needsUpdate = !0);
|
|
264
264
|
}
|
|
265
265
|
dispose() {
|
|
266
266
|
this.map && this.map.dispose(), super.dispose();
|
|
267
267
|
}
|
|
268
268
|
}
|
|
269
|
-
function
|
|
269
|
+
function se(s, e = 0) {
|
|
270
270
|
if (typeof s == "number")
|
|
271
271
|
return s;
|
|
272
272
|
const t = parseFloat(s) || 0;
|
|
@@ -313,42 +313,42 @@ function Ge(s) {
|
|
|
313
313
|
if (n.startsWith("to "))
|
|
314
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;
|
|
315
315
|
else if (n.endsWith("deg") || n.endsWith("rad") || n.endsWith("turn")) {
|
|
316
|
-
const
|
|
317
|
-
n.endsWith("deg") ? i =
|
|
316
|
+
const o = parseFloat(n);
|
|
317
|
+
n.endsWith("deg") ? i = o * (Math.PI / 180) : n.endsWith("rad") ? i = o : n.endsWith("turn") && (i = o * Math.PI * 2), c = 1;
|
|
318
318
|
}
|
|
319
|
-
const
|
|
320
|
-
for (let
|
|
321
|
-
const l = r[
|
|
319
|
+
const a = [];
|
|
320
|
+
for (let o = c; o < r.length && !(a.length >= 8); o++) {
|
|
321
|
+
const l = r[o].trim(), d = l.lastIndexOf(" ");
|
|
322
322
|
let h = l, f = null;
|
|
323
323
|
if (d !== -1 && !l.endsWith(")")) {
|
|
324
324
|
const g = l.substring(d + 1);
|
|
325
325
|
(g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, d).trim(), f = g);
|
|
326
326
|
}
|
|
327
327
|
const v = ce(h);
|
|
328
|
-
|
|
328
|
+
a.push({
|
|
329
329
|
color: v.color,
|
|
330
330
|
alpha: v.alpha,
|
|
331
331
|
rawStop: f,
|
|
332
332
|
stop: 0
|
|
333
333
|
});
|
|
334
334
|
}
|
|
335
|
-
if (
|
|
336
|
-
for (let l = 0; l <
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
let
|
|
340
|
-
for (let l = 1; l <
|
|
341
|
-
if (
|
|
342
|
-
const d = l -
|
|
335
|
+
if (a.length > 0) {
|
|
336
|
+
for (let l = 0; l < a.length; l++)
|
|
337
|
+
a[l].rawStop !== null && (a[l].stop = parseFloat(a[l].rawStop) / 100);
|
|
338
|
+
a[0].rawStop === null && (a[0].stop = 0), a.length > 1 && a[a.length - 1].rawStop === null && (a[a.length - 1].stop = 1);
|
|
339
|
+
let o = 0;
|
|
340
|
+
for (let l = 1; l < a.length; l++)
|
|
341
|
+
if (a[l].rawStop !== null || l === a.length - 1) {
|
|
342
|
+
const d = l - o;
|
|
343
343
|
if (d > 1) {
|
|
344
|
-
const h = o
|
|
344
|
+
const h = a[o].stop, v = (a[l].stop - h) / d;
|
|
345
345
|
for (let g = 1; g < d; g++)
|
|
346
|
-
o
|
|
346
|
+
a[o + g].stop = h + v * g;
|
|
347
347
|
}
|
|
348
|
-
|
|
348
|
+
o = l;
|
|
349
349
|
}
|
|
350
350
|
}
|
|
351
|
-
return { angle: i, stops:
|
|
351
|
+
return { angle: i, stops: a };
|
|
352
352
|
}
|
|
353
353
|
const qe = `varying vec2 vUv;
|
|
354
354
|
varying vec4 vScreenPos;
|
|
@@ -512,43 +512,43 @@ baseColor = blendSrcOver(baseColor, texColor);`, Te = {
|
|
|
512
512
|
baseColorChunk: Je
|
|
513
513
|
};
|
|
514
514
|
function Qe(s, e, t, r = null, i) {
|
|
515
|
-
var
|
|
515
|
+
var C;
|
|
516
516
|
const c = r !== null || !!s.imageSrc;
|
|
517
517
|
let n = "";
|
|
518
|
-
const
|
|
518
|
+
const a = {};
|
|
519
519
|
if (i != null && i.uniforms)
|
|
520
|
-
for (const [S,
|
|
521
|
-
typeof
|
|
522
|
-
`,
|
|
523
|
-
`,
|
|
524
|
-
`,
|
|
525
|
-
`,
|
|
526
|
-
`,
|
|
527
|
-
const
|
|
520
|
+
for (const [S, w] of Object.entries(i.uniforms))
|
|
521
|
+
typeof w == "number" ? (n += `uniform float ${S};
|
|
522
|
+
`, a[S] = { value: w }) : Array.isArray(w) ? w.length === 2 ? (n += `uniform vec2 ${S};
|
|
523
|
+
`, a[S] = { value: new y.Vector2(...w) }) : w.length === 3 ? (n += `uniform vec3 ${S};
|
|
524
|
+
`, a[S] = { value: new y.Vector3(...w) }) : w.length === 4 && (n += `uniform vec4 ${S};
|
|
525
|
+
`, a[S] = { value: new y.Vector4(...w) }) : (n += `uniform float ${S};
|
|
526
|
+
`, a[S] = { value: w });
|
|
527
|
+
const o = i !== void 0, l = (c || o ? Re.declChunk : "") + `
|
|
528
528
|
` + n, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
|
|
529
529
|
`, h = s.isTraveler ? `vec2 resultUv = screenUv;
|
|
530
530
|
` : `vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
|
|
531
|
-
`, f = c ||
|
|
531
|
+
`, f = c || o ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", v = c || o ? Re.baseColorChunk : "", g = (i == null ? void 0 : i.colorModifier) || "", m = Te.fragmentShader.replace("#INJECT_DECLARATIONS", l).replace("#INJECT_UV_MODIFIER", f).replace("#INJECT_BASE_COLOR", v).replace("#INJECT_COLOR_MODIFIER", g), E = ce(s.backgroundColor), L = ce(s.borderColor), M = {
|
|
532
532
|
uSize: { value: new y.Vector2(e, t) },
|
|
533
533
|
uBgColor: {
|
|
534
534
|
value: new y.Vector4(
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
535
|
+
E.color.r,
|
|
536
|
+
E.color.g,
|
|
537
|
+
E.color.b,
|
|
538
|
+
E.alpha
|
|
539
539
|
)
|
|
540
540
|
},
|
|
541
541
|
uBorderColor: {
|
|
542
542
|
value: new y.Vector4(
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
543
|
+
L.color.r,
|
|
544
|
+
L.color.g,
|
|
545
|
+
L.color.b,
|
|
546
|
+
L.alpha
|
|
547
547
|
)
|
|
548
548
|
},
|
|
549
549
|
uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
|
|
550
|
-
uBorderWidth: { value:
|
|
551
|
-
uOpacity: { value: (
|
|
550
|
+
uBorderWidth: { value: se(s.borderWidth) },
|
|
551
|
+
uOpacity: { value: (C = s.opacity) != null ? C : 1 },
|
|
552
552
|
uTexture: { value: null },
|
|
553
553
|
uTextureRepeat: { value: new y.Vector2(1, 1) },
|
|
554
554
|
uTextureOffset: { value: new y.Vector2(0, 0) },
|
|
@@ -559,19 +559,19 @@ function Qe(s, e, t, r = null, i) {
|
|
|
559
559
|
},
|
|
560
560
|
uGradientStops: { value: new Float32Array(8) }
|
|
561
561
|
};
|
|
562
|
-
Ae(
|
|
563
|
-
const
|
|
564
|
-
uniforms:
|
|
562
|
+
Ae(M.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (M.uTexture.value = r);
|
|
563
|
+
const R = new y.ShaderMaterial({
|
|
564
|
+
uniforms: J(J({}, M), a),
|
|
565
565
|
vertexShader: Te.vertexShader,
|
|
566
566
|
fragmentShader: m,
|
|
567
567
|
transparent: !0,
|
|
568
568
|
side: y.FrontSide
|
|
569
569
|
// for better performance
|
|
570
570
|
});
|
|
571
|
-
return s.backgroundImage && ye(
|
|
571
|
+
return s.backgroundImage && ye(R, { backgroundImage: s.backgroundImage }), R;
|
|
572
572
|
}
|
|
573
573
|
function Ze(s, e, t, r, i) {
|
|
574
|
-
const c =
|
|
574
|
+
const c = se(e.borderWidth);
|
|
575
575
|
ye(s, {
|
|
576
576
|
width: t,
|
|
577
577
|
height: r,
|
|
@@ -645,9 +645,9 @@ function ye(s, e) {
|
|
|
645
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);
|
|
646
646
|
const t = e.texture !== void 0 ? e.texture : (r = s.uniforms.uTexture) == null ? void 0 : r.value;
|
|
647
647
|
if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
|
|
648
|
-
const n = t.image.naturalWidth || t.image.videoWidth || t.image.width,
|
|
649
|
-
if (n &&
|
|
650
|
-
const d = n /
|
|
648
|
+
const n = t.image.naturalWidth || t.image.videoWidth || t.image.width, a = t.image.naturalHeight || t.image.videoHeight || t.image.height, o = (i = e.width) != null ? i : s.uniforms.uSize.value.x, l = (c = e.height) != null ? c : s.uniforms.uSize.value.y;
|
|
649
|
+
if (n && a && o && l) {
|
|
650
|
+
const d = n / a, h = o / l;
|
|
651
651
|
if (d > h) {
|
|
652
652
|
const f = h / d;
|
|
653
653
|
s.uniforms.uTextureRepeat.value.set(f, 1), s.uniforms.uTextureOffset.value.set((1 - f) / 2, 0);
|
|
@@ -662,17 +662,17 @@ function ye(s, e) {
|
|
|
662
662
|
const n = Ge(e.backgroundImage);
|
|
663
663
|
if (n) {
|
|
664
664
|
s.uniforms.uGradientCount.value = n.stops.length, s.uniforms.uGradientAngle.value = n.angle;
|
|
665
|
-
for (let
|
|
666
|
-
if (
|
|
667
|
-
const
|
|
668
|
-
s.uniforms.uGradientColors.value[
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
), s.uniforms.uGradientStops.value[
|
|
665
|
+
for (let a = 0; a < 8; a++)
|
|
666
|
+
if (a < n.stops.length) {
|
|
667
|
+
const o = n.stops[a];
|
|
668
|
+
s.uniforms.uGradientColors.value[a].set(
|
|
669
|
+
o.color.r,
|
|
670
|
+
o.color.g,
|
|
671
|
+
o.color.b,
|
|
672
|
+
o.alpha
|
|
673
|
+
), s.uniforms.uGradientStops.value[a] = o.stop;
|
|
674
674
|
} else
|
|
675
|
-
s.uniforms.uGradientColors.value[
|
|
675
|
+
s.uniforms.uGradientColors.value[a].set(0, 0, 0, 0), s.uniforms.uGradientStops.value[a] = 1;
|
|
676
676
|
} else
|
|
677
677
|
s.uniforms.uGradientCount.value = 0;
|
|
678
678
|
}
|
|
@@ -680,7 +680,7 @@ function ye(s, e) {
|
|
|
680
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]);
|
|
681
681
|
}
|
|
682
682
|
function Ae(s, e, t = 0) {
|
|
683
|
-
var
|
|
683
|
+
var o, l, d, h;
|
|
684
684
|
if (e == null) {
|
|
685
685
|
s.set(0, 0, 0, 0);
|
|
686
686
|
return;
|
|
@@ -693,17 +693,17 @@ function Ae(s, e, t = 0) {
|
|
|
693
693
|
s.set(e[0], e[1], e[2], e[3]);
|
|
694
694
|
return;
|
|
695
695
|
}
|
|
696
|
-
const r = e.split("/")[0].trim().split(/\s+/), i =
|
|
697
|
-
s.set(i, c, n,
|
|
696
|
+
const r = e.split("/")[0].trim().split(/\s+/), i = se(r[0], t), c = se((o = r[1]) != null ? o : r[0], t), n = se((l = r[2]) != null ? l : r[0], t), a = se((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
|
|
697
|
+
s.set(i, c, n, a);
|
|
698
698
|
}
|
|
699
|
-
const
|
|
700
|
-
create(s, e, t, r, i, c = 2, n = null,
|
|
699
|
+
const V = {
|
|
700
|
+
create(s, e, t, r, i, c = 2, n = null, a) {
|
|
701
701
|
return s === "BOX" ? Qe(
|
|
702
702
|
e,
|
|
703
703
|
r,
|
|
704
704
|
i,
|
|
705
705
|
n,
|
|
706
|
-
|
|
706
|
+
a
|
|
707
707
|
) : s === "TEXT" ? new He(
|
|
708
708
|
t || "",
|
|
709
709
|
e,
|
|
@@ -712,13 +712,13 @@ const Y = {
|
|
|
712
712
|
c
|
|
713
713
|
) : new y.MeshBasicMaterial({ visible: !1 });
|
|
714
714
|
},
|
|
715
|
-
update(s, e, t, r, i, c, n = 2,
|
|
715
|
+
update(s, e, t, r, i, c, n = 2, a) {
|
|
716
716
|
e === "BOX" ? Ze(
|
|
717
717
|
s,
|
|
718
718
|
t,
|
|
719
719
|
i,
|
|
720
720
|
c,
|
|
721
|
-
|
|
721
|
+
a
|
|
722
722
|
) : e === "TEXT" && s.updateText(
|
|
723
723
|
r || "",
|
|
724
724
|
t,
|
|
@@ -767,8 +767,8 @@ class et {
|
|
|
767
767
|
let r;
|
|
768
768
|
if (t.startsWith("data:image/svg+xml"))
|
|
769
769
|
r = yield new Promise((c, n) => {
|
|
770
|
-
const
|
|
771
|
-
|
|
770
|
+
const a = new Image();
|
|
771
|
+
a.onload = () => c(a), a.onerror = n, a.src = t;
|
|
772
772
|
});
|
|
773
773
|
else {
|
|
774
774
|
const n = yield (yield fetch(t)).blob();
|
|
@@ -824,10 +824,10 @@ class tt {
|
|
|
824
824
|
p(this, "textureManager");
|
|
825
825
|
// private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
|
|
826
826
|
p(this, "fixedMeshes", /* @__PURE__ */ new Set());
|
|
827
|
-
var
|
|
828
|
-
this.target = e, this.mountContainer = r, this.registry = i, this.mode = (
|
|
827
|
+
var a, o, l, d, h;
|
|
828
|
+
this.target = e, this.mountContainer = r, this.registry = i, this.mode = (a = t.mode) != null ? a : "overlay", this.canvasSize = (o = t.canvasSize) != null ? o : "viewport", this.clipArea = (l = t.travelerClipArea) != null ? l : 1, this.targetLayer = (d = t.layer) != null ? d : "base", this.textureManager = new et((f, v) => {
|
|
829
829
|
const g = this.registry.get(f);
|
|
830
|
-
g && g.material instanceof y.ShaderMaterial &&
|
|
830
|
+
g && g.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(g.material, { texture: v });
|
|
831
831
|
}, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new y.Scene(), this.targetRect = this.target.getBoundingClientRect();
|
|
832
832
|
const c = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, n = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
|
|
833
833
|
this.camera = new y.OrthographicCamera(
|
|
@@ -849,7 +849,7 @@ class tt {
|
|
|
849
849
|
return this.mode === "overlay" && this.canvasSize === "viewport";
|
|
850
850
|
}
|
|
851
851
|
getSceneLayer() {
|
|
852
|
-
return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ?
|
|
852
|
+
return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? k.SELECTED : k.BASE;
|
|
853
853
|
}
|
|
854
854
|
createRenderTarget() {
|
|
855
855
|
for (let e = 0; e < O.MAX_LAYERS; e++) {
|
|
@@ -899,12 +899,12 @@ class tt {
|
|
|
899
899
|
updateUniforms(e, t) {
|
|
900
900
|
const r = this.registry.get(e);
|
|
901
901
|
r && (r.traverse((i) => {
|
|
902
|
-
i.isMesh && i.material &&
|
|
902
|
+
i.isMesh && i.material && V.forceUpdateUniforms(
|
|
903
903
|
i.material,
|
|
904
904
|
t
|
|
905
905
|
);
|
|
906
906
|
}), r.userData.nativeMesh && r.userData.nativeMesh.traverse((i) => {
|
|
907
|
-
i.isMesh && i.material &&
|
|
907
|
+
i.isMesh && i.material && V.forceUpdateUniforms(
|
|
908
908
|
i.material,
|
|
909
909
|
t
|
|
910
910
|
);
|
|
@@ -920,8 +920,8 @@ class tt {
|
|
|
920
920
|
this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
|
|
921
921
|
}
|
|
922
922
|
syncScene(e, t) {
|
|
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,
|
|
924
|
-
|
|
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, a = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, o = Math.abs(i - n) > 0.1 || Math.abs(c - a) > 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
|
+
o ? (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) => {
|
|
925
925
|
const h = this.registry.get(d);
|
|
926
926
|
if (h) {
|
|
927
927
|
this.scene.remove(h);
|
|
@@ -944,17 +944,17 @@ class tt {
|
|
|
944
944
|
let t = this.registry.get(e.element);
|
|
945
945
|
const r = JSON.stringify(e.shaderHooks || null);
|
|
946
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),
|
|
947
|
+
const n = new y.PlaneGeometry(1, 1), a = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), o = V.create(
|
|
948
948
|
"BOX",
|
|
949
949
|
e.styles,
|
|
950
950
|
"",
|
|
951
951
|
e.rect.width,
|
|
952
952
|
e.rect.height,
|
|
953
953
|
this.qualityFactor,
|
|
954
|
-
|
|
954
|
+
a,
|
|
955
955
|
e.shaderHooks
|
|
956
956
|
);
|
|
957
|
-
t = new y.Mesh(n,
|
|
957
|
+
t = new y.Mesh(n, o), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = o, t.userData.domElement = e.element, t.userData.shaderHash = r;
|
|
958
958
|
}
|
|
959
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
960
|
for (let n = 0; n < O.MAX_LAYERS; n++)
|
|
@@ -976,34 +976,34 @@ class tt {
|
|
|
976
976
|
var l;
|
|
977
977
|
const i = t.textLines || [
|
|
978
978
|
{ text: t.textContent || "", rect: t.rect }
|
|
979
|
-
], c = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + i.map((d) => d.text).join("|"),
|
|
980
|
-
if (t.dirtyMask & ve || n !==
|
|
979
|
+
], c = r ? t.nativeStyles : t.textStyles, n = JSON.stringify(c) + t.textContent + i.map((d) => d.text).join("|"), a = (l = e.userData) == null ? void 0 : l.textChildStyleHash;
|
|
980
|
+
if (t.dirtyMask & ve || n !== a) {
|
|
981
981
|
e.children.filter(
|
|
982
982
|
(g) => g.name.startsWith("TEXT_CHILD")
|
|
983
983
|
).forEach((g) => {
|
|
984
|
-
var
|
|
984
|
+
var E;
|
|
985
985
|
const m = g;
|
|
986
|
-
(
|
|
986
|
+
(E = m.material.map) == null || E.dispose(), m.geometry.dispose(), e.remove(m);
|
|
987
987
|
});
|
|
988
988
|
const h = t.rect, f = h.x + h.width / 2, v = h.y + h.height / 2;
|
|
989
989
|
i.forEach((g, m) => {
|
|
990
|
-
const
|
|
990
|
+
const E = V.create(
|
|
991
991
|
"TEXT",
|
|
992
992
|
c,
|
|
993
993
|
g.text,
|
|
994
994
|
g.rect.width,
|
|
995
995
|
g.rect.height,
|
|
996
996
|
this.qualityFactor
|
|
997
|
-
),
|
|
998
|
-
|
|
999
|
-
const
|
|
1000
|
-
|
|
1001
|
-
const S = g.rect.x + g.rect.width / 2,
|
|
1002
|
-
|
|
1003
|
-
t.rect.width === 0 ? 0 :
|
|
1004
|
-
t.rect.height === 0 ? 0 :
|
|
997
|
+
), L = new y.PlaneGeometry(1, 1), M = new y.Mesh(L, E);
|
|
998
|
+
M.name = `TEXT_CHILD_${m}`;
|
|
999
|
+
const R = t.rect.width === 0 ? 1 : g.rect.width / t.rect.width, C = t.rect.height === 0 ? 1 : g.rect.height / t.rect.height;
|
|
1000
|
+
M.scale.set(R, C, 1);
|
|
1001
|
+
const S = g.rect.x + g.rect.width / 2, w = g.rect.y + g.rect.height / 2, B = S - f, _ = -(w - v);
|
|
1002
|
+
M.position.set(
|
|
1003
|
+
t.rect.width === 0 ? 0 : B / t.rect.width,
|
|
1004
|
+
t.rect.height === 0 ? 0 : _ / t.rect.height,
|
|
1005
1005
|
5e-3
|
|
1006
|
-
), e.add(
|
|
1006
|
+
), e.add(M);
|
|
1007
1007
|
}), e.userData.textChildStyleHash = n;
|
|
1008
1008
|
}
|
|
1009
1009
|
e.children.forEach((d) => {
|
|
@@ -1011,52 +1011,52 @@ class tt {
|
|
|
1011
1011
|
return;
|
|
1012
1012
|
const h = d;
|
|
1013
1013
|
if (r && t.nativeLayer !== void 0)
|
|
1014
|
-
h.layers.set(
|
|
1014
|
+
h.layers.set(k.HIDDEN), t.visibility & H && h.layers.enable(k.getCaptureLayer(t.nativeLayer));
|
|
1015
1015
|
else {
|
|
1016
|
-
const f = t.visibility &
|
|
1017
|
-
if (h.layers.set(f), t.visibility &
|
|
1016
|
+
const f = t.visibility & H ? k.BASE : k.HIDDEN;
|
|
1017
|
+
if (h.layers.set(f), t.visibility & ie && h.layers.enable(k.SELECTED), t.visibility & H)
|
|
1018
1018
|
if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
|
|
1019
1019
|
for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
|
|
1020
|
-
v !== t.nativeLayer && h.layers.enable(
|
|
1020
|
+
v !== t.nativeLayer && h.layers.enable(k.getCaptureLayer(v));
|
|
1021
1021
|
else
|
|
1022
1022
|
for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
|
|
1023
|
-
h.layers.enable(
|
|
1023
|
+
h.layers.enable(k.getCaptureLayer(v));
|
|
1024
1024
|
}
|
|
1025
1025
|
});
|
|
1026
1026
|
}
|
|
1027
1027
|
updateMeshProperties(e, t) {
|
|
1028
|
-
var
|
|
1029
|
-
const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c,
|
|
1028
|
+
var R, C, S;
|
|
1029
|
+
const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, a = this.renderer.domElement.height / c;
|
|
1030
1030
|
e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
|
|
1031
1031
|
x: r.x,
|
|
1032
1032
|
y: r.y,
|
|
1033
1033
|
width: r.width,
|
|
1034
1034
|
height: r.height
|
|
1035
1035
|
};
|
|
1036
|
-
const
|
|
1036
|
+
const o = 1e-3;
|
|
1037
1037
|
this.renderOrder++;
|
|
1038
1038
|
const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
|
|
1039
1039
|
let h, f;
|
|
1040
1040
|
if (this.isViewport)
|
|
1041
1041
|
h = r.x - window.innerWidth / 2 + r.width / 2, f = -r.y + window.innerHeight / 2 - r.height / 2;
|
|
1042
1042
|
else {
|
|
1043
|
-
const
|
|
1044
|
-
h =
|
|
1043
|
+
const w = r.x - l, B = r.y - d;
|
|
1044
|
+
h = w - n / 2 + r.width / 2, f = -B + a / 2 - r.height / 2;
|
|
1045
1045
|
}
|
|
1046
1046
|
e.position.set(
|
|
1047
1047
|
h,
|
|
1048
1048
|
f,
|
|
1049
|
-
i.zIndex + this.renderOrder *
|
|
1049
|
+
i.zIndex + this.renderOrder * o
|
|
1050
1050
|
);
|
|
1051
1051
|
const v = r.x, g = r.y;
|
|
1052
1052
|
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: v, y: g }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
|
|
1053
|
-
const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element,
|
|
1054
|
-
let
|
|
1055
|
-
if (
|
|
1056
|
-
const
|
|
1057
|
-
|
|
1053
|
+
const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, E = window.getComputedStyle(m);
|
|
1054
|
+
let L = 0, M = 0;
|
|
1055
|
+
if (E.transform && E.transform !== "none") {
|
|
1056
|
+
const w = new DOMMatrix(E.transform);
|
|
1057
|
+
L = w.m41, M = w.m42;
|
|
1058
1058
|
}
|
|
1059
|
-
if (e.userData.baseTransform = { x:
|
|
1059
|
+
if (e.userData.baseTransform = { x: L, y: M }, delete e.userData.originRatioX, delete e.userData.originRatioY, V.update(
|
|
1060
1060
|
e.userData.baseMaterial,
|
|
1061
1061
|
"BOX",
|
|
1062
1062
|
i,
|
|
@@ -1064,73 +1064,73 @@ class tt {
|
|
|
1064
1064
|
r.width,
|
|
1065
1065
|
r.height,
|
|
1066
1066
|
this.qualityFactor,
|
|
1067
|
-
t.isTraveler ? (
|
|
1067
|
+
t.isTraveler ? (R = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : R.texture : this.textureManager.get(t.element)
|
|
1068
1068
|
), t.nativeStyles && t.nativeRect) {
|
|
1069
1069
|
if (!e.userData.nativeMesh) {
|
|
1070
|
-
const
|
|
1070
|
+
const N = V.create(
|
|
1071
1071
|
"BOX",
|
|
1072
1072
|
t.nativeStyles,
|
|
1073
1073
|
"",
|
|
1074
1074
|
t.nativeRect.width,
|
|
1075
1075
|
t.nativeRect.height,
|
|
1076
1076
|
this.qualityFactor,
|
|
1077
|
-
t.isTraveler ? (
|
|
1077
|
+
t.isTraveler ? (C = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : C.texture : this.textureManager.get(t.element),
|
|
1078
1078
|
t.shaderHooks
|
|
1079
|
-
),
|
|
1080
|
-
t.type === "TEXT" && (
|
|
1079
|
+
), X = new y.Mesh(e.geometry, N);
|
|
1080
|
+
t.type === "TEXT" && (X.name = "BG_MESH"), this.scene.add(X), e.userData.nativeMesh = X;
|
|
1081
1081
|
}
|
|
1082
|
-
const
|
|
1083
|
-
let
|
|
1082
|
+
const w = e.userData.nativeMesh;
|
|
1083
|
+
let B, _;
|
|
1084
1084
|
if (this.isViewport)
|
|
1085
|
-
|
|
1085
|
+
B = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, _ = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
|
|
1086
1086
|
else {
|
|
1087
|
-
const
|
|
1088
|
-
|
|
1087
|
+
const N = t.nativeRect.x - l, X = t.nativeRect.y - d;
|
|
1088
|
+
B = N - n / 2 + t.nativeRect.width / 2, _ = -X + a / 2 - t.nativeRect.height / 2;
|
|
1089
1089
|
}
|
|
1090
|
-
let
|
|
1090
|
+
let b = t.nativeRect.width, U = t.nativeRect.height, q = B, $ = _;
|
|
1091
1091
|
if (t.nativeStyles.transform) {
|
|
1092
|
-
const
|
|
1093
|
-
if (
|
|
1094
|
-
let u = parseFloat(
|
|
1095
|
-
|
|
1092
|
+
const N = t.nativeStyles.transform, X = N.match(/scale\(([\d.]+%?)\)/);
|
|
1093
|
+
if (X) {
|
|
1094
|
+
let u = parseFloat(X[1]);
|
|
1095
|
+
X[1].includes("%") && (u /= 100), b *= u, U *= u;
|
|
1096
1096
|
}
|
|
1097
|
-
const
|
|
1098
|
-
if (
|
|
1099
|
-
let u = parseFloat(
|
|
1100
|
-
|
|
1097
|
+
const Z = N.match(/scaleX\(([\d.]+%?)\)/);
|
|
1098
|
+
if (Z) {
|
|
1099
|
+
let u = parseFloat(Z[1]);
|
|
1100
|
+
Z[1].includes("%") && (u /= 100), b *= u;
|
|
1101
1101
|
}
|
|
1102
|
-
const
|
|
1103
|
-
if (
|
|
1104
|
-
let u = parseFloat(
|
|
1105
|
-
|
|
1102
|
+
const ee = N.match(/scaleY\(([\d.]+%?)\)/);
|
|
1103
|
+
if (ee) {
|
|
1104
|
+
let u = parseFloat(ee[1]);
|
|
1105
|
+
ee[1].includes("%") && (u /= 100), U *= u;
|
|
1106
1106
|
}
|
|
1107
|
-
const
|
|
1108
|
-
if (
|
|
1109
|
-
const u =
|
|
1110
|
-
let
|
|
1111
|
-
u.includes("%") && (
|
|
1112
|
-
let
|
|
1113
|
-
|
|
1107
|
+
const te = N.match(/translate\(([^,]+),\s*([^)]+)\)/);
|
|
1108
|
+
if (te) {
|
|
1109
|
+
const u = te[1].trim(), x = te[2].trim();
|
|
1110
|
+
let A = parseFloat(u);
|
|
1111
|
+
u.includes("%") && (A = A / 100 * t.nativeRect.width);
|
|
1112
|
+
let F = parseFloat(x);
|
|
1113
|
+
x.includes("%") && (F = F / 100 * t.nativeRect.height), q += A, $ -= F;
|
|
1114
1114
|
}
|
|
1115
|
-
const ne =
|
|
1115
|
+
const ne = N.match(/translateX\(([^)]+)\)/);
|
|
1116
1116
|
if (ne) {
|
|
1117
1117
|
const u = ne[1].trim();
|
|
1118
|
-
let
|
|
1119
|
-
u.includes("%") && (
|
|
1118
|
+
let x = parseFloat(u);
|
|
1119
|
+
u.includes("%") && (x = x / 100 * t.nativeRect.width), q += x;
|
|
1120
1120
|
}
|
|
1121
|
-
const
|
|
1122
|
-
if (
|
|
1123
|
-
const u =
|
|
1124
|
-
let
|
|
1125
|
-
u.includes("%") && (
|
|
1121
|
+
const ae = N.match(/translateY\(([^)]+)\)/);
|
|
1122
|
+
if (ae) {
|
|
1123
|
+
const u = ae[1].trim();
|
|
1124
|
+
let x = parseFloat(u);
|
|
1125
|
+
u.includes("%") && (x = x / 100 * t.nativeRect.height), $ -= x;
|
|
1126
1126
|
}
|
|
1127
1127
|
}
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
t.nativeStyles.zIndex + this.renderOrder *
|
|
1132
|
-
),
|
|
1133
|
-
|
|
1128
|
+
w.scale.set(b, U, 1), w.position.set(
|
|
1129
|
+
q,
|
|
1130
|
+
$,
|
|
1131
|
+
t.nativeStyles.zIndex + this.renderOrder * o
|
|
1132
|
+
), V.update(
|
|
1133
|
+
w.material,
|
|
1134
1134
|
"BOX",
|
|
1135
1135
|
t.nativeStyles,
|
|
1136
1136
|
"",
|
|
@@ -1143,31 +1143,31 @@ class tt {
|
|
|
1143
1143
|
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);
|
|
1144
1144
|
}
|
|
1145
1145
|
updateMeshLayers(e, t) {
|
|
1146
|
-
const r = t.visibility &
|
|
1147
|
-
if (e.layers.set(r), t.visibility &
|
|
1146
|
+
const r = t.visibility & H ? k.BASE : k.HIDDEN;
|
|
1147
|
+
if (e.layers.set(r), t.visibility & ie && e.layers.enable(k.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
|
|
1148
1148
|
const i = e.userData.nativeMesh;
|
|
1149
|
-
if (i.layers.set(
|
|
1150
|
-
i.layers.enable(
|
|
1149
|
+
if (i.layers.set(k.HIDDEN), t.visibility & H) {
|
|
1150
|
+
i.layers.enable(k.getCaptureLayer(t.nativeLayer));
|
|
1151
1151
|
for (let c = t.captureLayer; c <= O.MAX_LAYERS + 1; c++)
|
|
1152
|
-
c !== t.nativeLayer && e.layers.enable(
|
|
1152
|
+
c !== t.nativeLayer && e.layers.enable(k.getCaptureLayer(c));
|
|
1153
1153
|
}
|
|
1154
|
-
} else if (t.visibility &
|
|
1154
|
+
} else if (t.visibility & H)
|
|
1155
1155
|
for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
|
|
1156
|
-
e.layers.enable(
|
|
1156
|
+
e.layers.enable(k.getCaptureLayer(i));
|
|
1157
1157
|
}
|
|
1158
1158
|
captureRenderTarget(e, t, r) {
|
|
1159
1159
|
if (e.size === 0 || !r)
|
|
1160
1160
|
return;
|
|
1161
1161
|
const i = new y.Color(), c = this.renderer.getClearAlpha();
|
|
1162
1162
|
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);
|
|
1163
|
-
const n = new y.Vector3(),
|
|
1163
|
+
const n = new y.Vector3(), a = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, l = this.renderer.getPixelRatio();
|
|
1164
1164
|
for (const d of e) {
|
|
1165
1165
|
n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
|
|
1166
|
-
const h = (n.x + 1) / 2 *
|
|
1166
|
+
const h = (n.x + 1) / 2 * a, f = (n.y + 1) / 2 * o;
|
|
1167
1167
|
let v = 0, g = 1;
|
|
1168
1168
|
typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (v = parseFloat(this.clipArea));
|
|
1169
|
-
const m = d.scale.x * g + 0.5,
|
|
1170
|
-
this.renderer.setScissor(
|
|
1169
|
+
const m = d.scale.x * g + 0.5, E = d.scale.y * g + 0.5, L = h - m / 2, M = f - E / 2, R = (L * this.qualityFactor - v) / l, C = (M * this.qualityFactor - v) / l, S = (m * this.qualityFactor + v * 2) / l, w = (E * this.qualityFactor + v * 2) / l;
|
|
1170
|
+
this.renderer.setScissor(R, C, S, w), this.renderer.render(this.scene, this.camera);
|
|
1171
1171
|
}
|
|
1172
1172
|
this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, c);
|
|
1173
1173
|
}
|
|
@@ -1176,7 +1176,7 @@ class tt {
|
|
|
1176
1176
|
const t = e + 1;
|
|
1177
1177
|
this.captureRenderTarget(
|
|
1178
1178
|
this.travelersByLayer[e],
|
|
1179
|
-
|
|
1179
|
+
k.getCaptureLayer(t),
|
|
1180
1180
|
this.renderTargets[e]
|
|
1181
1181
|
);
|
|
1182
1182
|
}
|
|
@@ -1185,21 +1185,21 @@ class tt {
|
|
|
1185
1185
|
syncMeshesByDOM() {
|
|
1186
1186
|
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;
|
|
1187
1187
|
this.scene.children.forEach((n) => {
|
|
1188
|
-
const
|
|
1189
|
-
if (!
|
|
1188
|
+
const a = n;
|
|
1189
|
+
if (!a.userData || !a.userData.domElement)
|
|
1190
1190
|
return;
|
|
1191
|
-
const
|
|
1192
|
-
if (!
|
|
1191
|
+
const o = a.userData.domElement;
|
|
1192
|
+
if (!o.isConnected)
|
|
1193
1193
|
return;
|
|
1194
1194
|
let l;
|
|
1195
|
-
if (
|
|
1195
|
+
if (o.nodeType === Node.TEXT_NODE) {
|
|
1196
1196
|
const h = document.createRange();
|
|
1197
|
-
h.selectNode(
|
|
1197
|
+
h.selectNode(o), l = h.getBoundingClientRect();
|
|
1198
1198
|
} else
|
|
1199
|
-
l =
|
|
1200
|
-
const d =
|
|
1199
|
+
l = o.getBoundingClientRect();
|
|
1200
|
+
const d = a.userData.domRect;
|
|
1201
1201
|
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) {
|
|
1202
|
-
|
|
1202
|
+
a.userData.domRect = {
|
|
1203
1203
|
x: l.x,
|
|
1204
1204
|
y: l.y,
|
|
1205
1205
|
width: l.width,
|
|
@@ -1212,40 +1212,53 @@ class tt {
|
|
|
1212
1212
|
const v = l.x - e, g = l.y - t;
|
|
1213
1213
|
h = v - i / 2 + l.width / 2, f = -g + c / 2 - l.height / 2;
|
|
1214
1214
|
}
|
|
1215
|
-
if (
|
|
1215
|
+
if (a.position.setX(h), a.position.setY(f), a.scale.set(l.width, l.height, 1), a.updateMatrixWorld(), a.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(a.material, {
|
|
1216
1216
|
width: l.width,
|
|
1217
1217
|
height: l.height
|
|
1218
|
-
}),
|
|
1219
|
-
const v =
|
|
1220
|
-
let g = l.width, m = l.height,
|
|
1221
|
-
if (
|
|
1222
|
-
const
|
|
1223
|
-
if (
|
|
1224
|
-
let
|
|
1225
|
-
|
|
1218
|
+
}), a.userData.nativeMesh) {
|
|
1219
|
+
const v = a.userData.nativeMesh;
|
|
1220
|
+
let g = l.width, m = l.height, E = h, L = f;
|
|
1221
|
+
if (a.userData.nativeTransform) {
|
|
1222
|
+
const M = a.userData.nativeTransform, R = M.match(/scale\(([\d.]+%?)\)/);
|
|
1223
|
+
if (R) {
|
|
1224
|
+
let b = parseFloat(R[1]);
|
|
1225
|
+
R[1].includes("%") && (b /= 100), g *= b, m *= b;
|
|
1226
1226
|
}
|
|
1227
|
-
const
|
|
1228
|
-
if (
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
R.includes("%") && (U = U / 100 * l.width);
|
|
1232
|
-
let G = parseFloat(D);
|
|
1233
|
-
D.includes("%") && (G = G / 100 * l.height), w += U, M -= G;
|
|
1227
|
+
const C = M.match(/scaleX\(([\d.]+%?)\)/);
|
|
1228
|
+
if (C) {
|
|
1229
|
+
let b = parseFloat(C[1]);
|
|
1230
|
+
C[1].includes("%") && (b /= 100), g *= b;
|
|
1234
1231
|
}
|
|
1235
|
-
const S =
|
|
1232
|
+
const S = M.match(/scaleY\(([\d.]+%?)\)/);
|
|
1236
1233
|
if (S) {
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1234
|
+
let b = parseFloat(S[1]);
|
|
1235
|
+
S[1].includes("%") && (b /= 100), m *= b;
|
|
1236
|
+
}
|
|
1237
|
+
const w = M.match(/translate\(([^,]+),\s*([^)]+)\)/);
|
|
1238
|
+
if (w) {
|
|
1239
|
+
const b = w[1].trim(), U = w[2].trim();
|
|
1240
|
+
let q = parseFloat(b);
|
|
1241
|
+
b.includes("%") && (q = q / 100 * l.width);
|
|
1242
|
+
let $ = parseFloat(U);
|
|
1243
|
+
U.includes("%") && ($ = $ / 100 * l.height), E += q, L -= $;
|
|
1240
1244
|
}
|
|
1241
|
-
const
|
|
1242
|
-
if (
|
|
1243
|
-
const
|
|
1244
|
-
let
|
|
1245
|
-
|
|
1245
|
+
const B = M.match(/translateX\(([^)]+)\)/);
|
|
1246
|
+
if (B) {
|
|
1247
|
+
const b = B[1].trim();
|
|
1248
|
+
let U = parseFloat(b);
|
|
1249
|
+
b.includes("%") && (U = U / 100 * l.width), E += U;
|
|
1250
|
+
}
|
|
1251
|
+
const _ = M.match(/translateY\(([^)]+)\)/);
|
|
1252
|
+
if (_) {
|
|
1253
|
+
const b = _[1].trim();
|
|
1254
|
+
let U = parseFloat(b);
|
|
1255
|
+
b.includes("%") && (U = U / 100 * l.height), L -= U;
|
|
1246
1256
|
}
|
|
1247
1257
|
}
|
|
1248
|
-
v.position.setX(
|
|
1258
|
+
v.position.setX(E), v.position.setY(L), v.scale.set(g, m, 1), v.updateMatrixWorld(), v.material instanceof y.ShaderMaterial && V.forceUpdateUniforms(v.material, {
|
|
1259
|
+
width: g,
|
|
1260
|
+
height: m
|
|
1261
|
+
});
|
|
1249
1262
|
}
|
|
1250
1263
|
}
|
|
1251
1264
|
});
|
|
@@ -1281,18 +1294,18 @@ function rt(s) {
|
|
|
1281
1294
|
g.bottom
|
|
1282
1295
|
)));
|
|
1283
1296
|
}
|
|
1284
|
-
},
|
|
1285
|
-
let
|
|
1286
|
-
for (const l of
|
|
1297
|
+
}, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
|
|
1298
|
+
let o = 0;
|
|
1299
|
+
for (const l of a) {
|
|
1287
1300
|
const d = document.createRange();
|
|
1288
|
-
d.setStart(s,
|
|
1301
|
+
d.setStart(s, o), d.setEnd(s, o + l.length);
|
|
1289
1302
|
const h = d.getClientRects();
|
|
1290
1303
|
if (h.length > 1)
|
|
1291
|
-
n(l,
|
|
1304
|
+
n(l, o);
|
|
1292
1305
|
else {
|
|
1293
1306
|
const f = h.length === 1 ? h[0] : d.getBoundingClientRect();
|
|
1294
1307
|
if (f.width === 0 && f.height === 0) {
|
|
1295
|
-
r += l,
|
|
1308
|
+
r += l, o += l.length;
|
|
1296
1309
|
continue;
|
|
1297
1310
|
}
|
|
1298
1311
|
c === -1 || Math.abs(f.top - c) > f.height / 2 ? (r && i && t.push({
|
|
@@ -1313,7 +1326,7 @@ function rt(s) {
|
|
|
1313
1326
|
f.bottom
|
|
1314
1327
|
)));
|
|
1315
1328
|
}
|
|
1316
|
-
|
|
1329
|
+
o += l.length;
|
|
1317
1330
|
}
|
|
1318
1331
|
return r && i && t.push({
|
|
1319
1332
|
text: r,
|
|
@@ -1343,287 +1356,287 @@ function Me(s) {
|
|
|
1343
1356
|
letterSpacing: r
|
|
1344
1357
|
};
|
|
1345
1358
|
}
|
|
1346
|
-
function Ie(s, e =
|
|
1347
|
-
var
|
|
1359
|
+
function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, a) {
|
|
1360
|
+
var X, Z, ee, te, ne, ae;
|
|
1348
1361
|
if (s.nodeType === Node.TEXT_NODE) {
|
|
1349
1362
|
const u = s;
|
|
1350
1363
|
if (!u.textContent || !u.textContent.trim())
|
|
1351
1364
|
return null;
|
|
1352
|
-
const
|
|
1353
|
-
if (
|
|
1365
|
+
const x = u.textContent.replace(/\s+/g, " ");
|
|
1366
|
+
if (x.length === 0)
|
|
1354
1367
|
return null;
|
|
1355
|
-
const
|
|
1356
|
-
if (
|
|
1368
|
+
const A = rt(u);
|
|
1369
|
+
if (A.length === 0)
|
|
1357
1370
|
return null;
|
|
1358
|
-
const
|
|
1359
|
-
if (!
|
|
1371
|
+
const F = u.parentElement, I = F ? window.getComputedStyle(F) : null;
|
|
1372
|
+
if (!I)
|
|
1360
1373
|
return null;
|
|
1361
|
-
const
|
|
1374
|
+
const P = Math.min(...A.map((T) => T.rect.left)), z = Math.min(...A.map((T) => T.rect.top)), j = Math.max(...A.map((T) => T.rect.left + T.rect.width)), D = Math.max(...A.map((T) => T.rect.top + T.rect.height));
|
|
1362
1375
|
return {
|
|
1363
1376
|
id: Math.random().toString(36).substring(2, 9),
|
|
1364
1377
|
type: "TEXT",
|
|
1365
1378
|
element: u,
|
|
1366
1379
|
rect: {
|
|
1367
|
-
x:
|
|
1368
|
-
y:
|
|
1369
|
-
width:
|
|
1370
|
-
height:
|
|
1380
|
+
x: P + window.scrollX,
|
|
1381
|
+
y: z + window.scrollY,
|
|
1382
|
+
width: j - P,
|
|
1383
|
+
height: D - z
|
|
1371
1384
|
},
|
|
1372
1385
|
styles: {
|
|
1373
1386
|
backgroundColor: "transparent",
|
|
1374
1387
|
backgroundImage: "",
|
|
1375
|
-
opacity:
|
|
1376
|
-
zIndex: (isNaN(parseInt(
|
|
1388
|
+
opacity: F && F.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(I.opacity),
|
|
1389
|
+
zIndex: (isNaN(parseInt(I.zIndex)) ? 0 : parseInt(I.zIndex)) + i,
|
|
1377
1390
|
borderRadius: "0px",
|
|
1378
1391
|
borderColor: "transparent",
|
|
1379
1392
|
borderWidth: "0px",
|
|
1380
1393
|
isTraveler: !1
|
|
1381
1394
|
},
|
|
1382
|
-
textContent:
|
|
1383
|
-
textLines:
|
|
1384
|
-
text:
|
|
1395
|
+
textContent: x,
|
|
1396
|
+
textLines: A.map((T) => ({
|
|
1397
|
+
text: T.text.trim(),
|
|
1385
1398
|
rect: {
|
|
1386
|
-
x:
|
|
1387
|
-
y:
|
|
1388
|
-
width:
|
|
1389
|
-
height:
|
|
1399
|
+
x: T.rect.left + window.scrollX,
|
|
1400
|
+
y: T.rect.top + window.scrollY,
|
|
1401
|
+
width: T.rect.width,
|
|
1402
|
+
height: T.rect.height
|
|
1390
1403
|
}
|
|
1391
1404
|
})),
|
|
1392
|
-
textStyles: Me(
|
|
1405
|
+
textStyles: Me(I),
|
|
1393
1406
|
dirtyMask: e,
|
|
1394
1407
|
visibility: t,
|
|
1395
1408
|
isTraveler: !1,
|
|
1396
1409
|
captureLayer: r,
|
|
1397
|
-
isFixed:
|
|
1410
|
+
isFixed: I.position === "fixed",
|
|
1398
1411
|
nativeLayer: n,
|
|
1399
|
-
nativeStyles:
|
|
1412
|
+
nativeStyles: a ? J(J({
|
|
1400
1413
|
backgroundColor: "transparent",
|
|
1401
1414
|
backgroundImage: "",
|
|
1402
|
-
opacity:
|
|
1403
|
-
zIndex: (isNaN(parseInt(
|
|
1415
|
+
opacity: F && F.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(I.opacity),
|
|
1416
|
+
zIndex: (isNaN(parseInt(I.zIndex)) ? 0 : parseInt(I.zIndex)) + i,
|
|
1404
1417
|
borderRadius: "0px",
|
|
1405
1418
|
borderColor: "transparent",
|
|
1406
1419
|
borderWidth: "0px",
|
|
1407
1420
|
isTraveler: !1
|
|
1408
|
-
}, Me(
|
|
1409
|
-
nativeRect:
|
|
1410
|
-
x:
|
|
1411
|
-
y:
|
|
1412
|
-
width:
|
|
1413
|
-
height:
|
|
1421
|
+
}, Me(I)), a) : void 0,
|
|
1422
|
+
nativeRect: a ? {
|
|
1423
|
+
x: P + window.scrollX,
|
|
1424
|
+
y: z + window.scrollY,
|
|
1425
|
+
width: j - P,
|
|
1426
|
+
height: D - z
|
|
1414
1427
|
} : void 0,
|
|
1415
1428
|
children: []
|
|
1416
1429
|
};
|
|
1417
1430
|
}
|
|
1418
1431
|
if (s.nodeType !== Node.ELEMENT_NODE)
|
|
1419
1432
|
return null;
|
|
1420
|
-
const
|
|
1433
|
+
const o = s, l = o.dataset[W.KEY];
|
|
1421
1434
|
let d = t, h = t;
|
|
1422
1435
|
if (l) {
|
|
1423
1436
|
const u = new Set(l.split(/\s+/));
|
|
1424
|
-
for (const
|
|
1425
|
-
if (!Se.includes(
|
|
1437
|
+
for (const x of u)
|
|
1438
|
+
if (!Se.includes(x))
|
|
1426
1439
|
throw new Error(
|
|
1427
|
-
`[MirageEngine] Invalid filter token: '${
|
|
1440
|
+
`[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1428
1441
|
);
|
|
1429
|
-
if (u.has(
|
|
1442
|
+
if (u.has(W.VALUES.END))
|
|
1430
1443
|
return null;
|
|
1431
|
-
if (u.has(
|
|
1444
|
+
if (u.has(W.VALUES.INCLUDE_TREE) && u.has(W.VALUES.EXCLUDE_TREE))
|
|
1432
1445
|
throw new Error(
|
|
1433
1446
|
"[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
|
|
1434
1447
|
);
|
|
1435
|
-
if (u.has(
|
|
1448
|
+
if (u.has(W.VALUES.INCLUDE_SELF) && u.has(W.VALUES.EXCLUDE_SELF))
|
|
1436
1449
|
throw new Error(
|
|
1437
1450
|
"[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1438
1451
|
);
|
|
1439
|
-
u.has(
|
|
1452
|
+
u.has(W.VALUES.INCLUDE_TREE) ? d = d | H : u.has(W.VALUES.EXCLUDE_TREE) && (d = d & ~H), h = d, u.has(W.VALUES.INCLUDE_SELF) ? h = h | H : u.has(W.VALUES.EXCLUDE_SELF) && (h = h & ~H);
|
|
1440
1453
|
}
|
|
1441
|
-
const f =
|
|
1454
|
+
const f = o.dataset[G.KEY];
|
|
1442
1455
|
if (f) {
|
|
1443
1456
|
const u = new Set(f.split(/\s+/));
|
|
1444
|
-
for (const
|
|
1445
|
-
if (!Se.includes(
|
|
1457
|
+
for (const x of u)
|
|
1458
|
+
if (!Se.includes(x))
|
|
1446
1459
|
throw new Error(
|
|
1447
|
-
`[MirageEngine] Invalid select token: '${
|
|
1460
|
+
`[MirageEngine] Invalid select token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1448
1461
|
);
|
|
1449
|
-
if (u.has(
|
|
1462
|
+
if (u.has(G.VALUES.END))
|
|
1450
1463
|
return null;
|
|
1451
|
-
if (u.has(
|
|
1464
|
+
if (u.has(G.VALUES.INCLUDE_TREE) && u.has(G.VALUES.EXCLUDE_TREE))
|
|
1452
1465
|
throw new Error(
|
|
1453
1466
|
"[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
|
|
1454
1467
|
);
|
|
1455
|
-
if (u.has(
|
|
1468
|
+
if (u.has(G.VALUES.INCLUDE_SELF) && u.has(G.VALUES.EXCLUDE_SELF))
|
|
1456
1469
|
throw new Error(
|
|
1457
1470
|
"[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1458
1471
|
);
|
|
1459
|
-
u.has(
|
|
1472
|
+
u.has(G.VALUES.INCLUDE_TREE) ? d = d | ie : u.has(G.VALUES.EXCLUDE_TREE) && (d = d & ~ie), h = d, u.has(G.VALUES.INCLUDE_SELF) ? h = h | ie : u.has(G.VALUES.EXCLUDE_SELF) && (h = h & ~ie);
|
|
1460
1473
|
}
|
|
1461
|
-
const v =
|
|
1462
|
-
let g = !1, m =
|
|
1474
|
+
const v = o.dataset[O.KEY];
|
|
1475
|
+
let g = !1, m = a ? J({}, a) : {}, E = n;
|
|
1463
1476
|
if (v) {
|
|
1464
1477
|
let u = 1;
|
|
1465
|
-
const
|
|
1466
|
-
let
|
|
1467
|
-
if (
|
|
1468
|
-
|
|
1469
|
-
const
|
|
1478
|
+
const x = v.indexOf("{"), A = v.lastIndexOf("}");
|
|
1479
|
+
let F = v;
|
|
1480
|
+
if (x !== -1 && A !== -1 && A > x) {
|
|
1481
|
+
F = v.substring(0, x).trim();
|
|
1482
|
+
const D = v.substring(x, A + 1);
|
|
1470
1483
|
try {
|
|
1471
|
-
m = new Function("return " +
|
|
1472
|
-
} catch (
|
|
1484
|
+
m = new Function("return " + D)();
|
|
1485
|
+
} catch (T) {
|
|
1473
1486
|
console.warn(
|
|
1474
|
-
`[MirageEngine] Failed to parse travel styles JSON: ${
|
|
1487
|
+
`[MirageEngine] Failed to parse travel styles JSON: ${D}`
|
|
1475
1488
|
);
|
|
1476
1489
|
}
|
|
1477
1490
|
}
|
|
1478
|
-
const
|
|
1479
|
-
let
|
|
1480
|
-
const
|
|
1481
|
-
if (
|
|
1482
|
-
g = !0,
|
|
1483
|
-
const
|
|
1484
|
-
if (
|
|
1485
|
-
u = parseInt(
|
|
1491
|
+
const I = F.split(/\s+/);
|
|
1492
|
+
let P = !1;
|
|
1493
|
+
const z = I.indexOf(O.VALUES.TRAVELER);
|
|
1494
|
+
if (z !== -1) {
|
|
1495
|
+
g = !0, P = !0;
|
|
1496
|
+
const D = I[z + 1];
|
|
1497
|
+
if (D && !isNaN(parseInt(D, 10)))
|
|
1498
|
+
u = parseInt(D, 10);
|
|
1486
1499
|
else {
|
|
1487
|
-
const
|
|
1488
|
-
|
|
1500
|
+
const T = I.find((re) => !isNaN(parseInt(re, 10)));
|
|
1501
|
+
T && (u = parseInt(T, 10));
|
|
1489
1502
|
}
|
|
1490
1503
|
}
|
|
1491
|
-
const
|
|
1492
|
-
if (
|
|
1493
|
-
const
|
|
1494
|
-
if (
|
|
1495
|
-
|
|
1504
|
+
const j = I.indexOf(O.VALUES.NATIVE);
|
|
1505
|
+
if (j !== -1) {
|
|
1506
|
+
const D = I[j + 1];
|
|
1507
|
+
if (D && !isNaN(parseInt(D, 10)))
|
|
1508
|
+
E = parseInt(D, 10);
|
|
1496
1509
|
else if (!g) {
|
|
1497
|
-
const
|
|
1498
|
-
|
|
1510
|
+
const T = I.find((re) => !isNaN(parseInt(re, 10)));
|
|
1511
|
+
T && (E = parseInt(T, 10));
|
|
1499
1512
|
}
|
|
1500
1513
|
}
|
|
1501
|
-
if (
|
|
1502
|
-
const
|
|
1503
|
-
if (
|
|
1514
|
+
if (P) {
|
|
1515
|
+
const D = u + 1;
|
|
1516
|
+
if (D < r)
|
|
1504
1517
|
throw new Error(
|
|
1505
1518
|
`[MirageEngine] Traveler layer (${u}) cannot be smaller than inherited capture layer (${r - 1}).`
|
|
1506
1519
|
);
|
|
1507
|
-
r = Math.min(
|
|
1520
|
+
r = Math.min(D, O.MAX_LAYERS + 1);
|
|
1508
1521
|
}
|
|
1509
1522
|
}
|
|
1510
|
-
const
|
|
1511
|
-
let
|
|
1512
|
-
|
|
1513
|
-
const
|
|
1514
|
-
if (
|
|
1523
|
+
const L = o.dataset[Xe.KEY];
|
|
1524
|
+
let M;
|
|
1525
|
+
L && (M = JSON.parse(L));
|
|
1526
|
+
const R = o.getBoundingClientRect(), C = window.getComputedStyle(o);
|
|
1527
|
+
if (R.width === 0 || R.height === 0 || C.display === "none")
|
|
1515
1528
|
return null;
|
|
1516
|
-
let S =
|
|
1517
|
-
S || (S = Math.random().toString(36).substring(2, 11),
|
|
1518
|
-
const
|
|
1519
|
-
let
|
|
1520
|
-
if (
|
|
1521
|
-
|
|
1522
|
-
else if (
|
|
1523
|
-
const u =
|
|
1524
|
-
const
|
|
1525
|
-
fe && fe !== "none" && (
|
|
1526
|
-
const ge =
|
|
1527
|
-
ge && ge !== "none" && (
|
|
1528
|
-
const be =
|
|
1529
|
-
be && (
|
|
1530
|
-
const pe =
|
|
1531
|
-
pe && pe !== "1" && (
|
|
1532
|
-
for (let he = 0; he <
|
|
1533
|
-
|
|
1529
|
+
let S = o.getAttribute("data-mid");
|
|
1530
|
+
S || (S = Math.random().toString(36).substring(2, 11), o.setAttribute("data-mid", S));
|
|
1531
|
+
const w = parseInt(C.zIndex), B = (isNaN(w) ? 0 : w) + i;
|
|
1532
|
+
let _;
|
|
1533
|
+
if (o.tagName === "IMG")
|
|
1534
|
+
_ = o.src;
|
|
1535
|
+
else if (o.tagName.toLowerCase() === "svg") {
|
|
1536
|
+
const u = o.cloneNode(!0), x = m == null ? void 0 : m.color, A = m == null ? void 0 : m.fill, F = m == null ? void 0 : m.stroke, I = m == null ? void 0 : m.opacity, P = (T, re) => {
|
|
1537
|
+
const Y = window.getComputedStyle(T), oe = re, ke = Y.fill === Y.color, Ue = Y.stroke === Y.color, fe = A || (ke ? x : void 0) || Y.fill;
|
|
1538
|
+
fe && fe !== "none" && (oe.style.fill = fe);
|
|
1539
|
+
const ge = F || (Ue ? x : void 0) || Y.stroke;
|
|
1540
|
+
ge && ge !== "none" && (oe.style.stroke = ge), Y.strokeWidth && Y.strokeWidth !== "0px" && (oe.style.strokeWidth = Y.strokeWidth);
|
|
1541
|
+
const be = x || Y.color;
|
|
1542
|
+
be && (oe.style.color = be);
|
|
1543
|
+
const pe = I || Y.opacity;
|
|
1544
|
+
pe && pe !== "1" && (oe.style.opacity = pe);
|
|
1545
|
+
for (let he = 0; he < T.children.length; he++)
|
|
1546
|
+
P(T.children[he], re.children[he]);
|
|
1534
1547
|
};
|
|
1535
|
-
|
|
1536
|
-
const
|
|
1537
|
-
u.hasAttribute("viewBox") || u.setAttribute("viewBox", `0 0 ${
|
|
1538
|
-
let
|
|
1539
|
-
|
|
1548
|
+
P(o, u);
|
|
1549
|
+
const z = o.getBoundingClientRect(), j = window.devicePixelRatio * c;
|
|
1550
|
+
u.hasAttribute("viewBox") || u.setAttribute("viewBox", `0 0 ${z.width} ${z.height}`), u.setAttribute("width", (z.width * j).toString()), u.setAttribute("height", (z.height * j).toString());
|
|
1551
|
+
let D = new XMLSerializer().serializeToString(u);
|
|
1552
|
+
D.includes("xmlns=") || (D = D.replace(
|
|
1540
1553
|
"<svg",
|
|
1541
1554
|
'<svg xmlns="http://www.w3.org/2000/svg"'
|
|
1542
|
-
)),
|
|
1543
|
-
} else if (
|
|
1544
|
-
const u =
|
|
1545
|
-
u && (
|
|
1546
|
-
}
|
|
1547
|
-
const
|
|
1548
|
-
backgroundColor:
|
|
1549
|
-
backgroundImage:
|
|
1550
|
-
opacity:
|
|
1551
|
-
zIndex:
|
|
1552
|
-
borderRadius:
|
|
1553
|
-
borderColor:
|
|
1554
|
-
borderWidth:
|
|
1555
|
-
imageSrc:
|
|
1555
|
+
)), _ = `data:image/svg+xml;utf8,${encodeURIComponent(D)}`;
|
|
1556
|
+
} else if (C.backgroundImage && C.backgroundImage !== "none") {
|
|
1557
|
+
const u = C.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
|
|
1558
|
+
u && (_ = u[1]);
|
|
1559
|
+
}
|
|
1560
|
+
const b = {
|
|
1561
|
+
backgroundColor: C.backgroundColor,
|
|
1562
|
+
backgroundImage: C.backgroundImage,
|
|
1563
|
+
opacity: o.dataset[K.KEY] === K.VALUES.HIDE ? 1 : parseFloat(C.opacity),
|
|
1564
|
+
zIndex: B,
|
|
1565
|
+
borderRadius: C.borderRadius,
|
|
1566
|
+
borderColor: C.borderColor,
|
|
1567
|
+
borderWidth: C.borderWidth,
|
|
1568
|
+
imageSrc: _,
|
|
1556
1569
|
isTraveler: g
|
|
1557
|
-
},
|
|
1558
|
-
let
|
|
1559
|
-
const
|
|
1560
|
-
return
|
|
1561
|
-
const
|
|
1570
|
+
}, U = b;
|
|
1571
|
+
let q, $;
|
|
1572
|
+
const N = [];
|
|
1573
|
+
return o.tagName.toLowerCase() !== "svg" && Array.from(o.childNodes).forEach((u) => {
|
|
1574
|
+
const x = u.nodeType === Node.TEXT_NODE ? h : d, A = Ie(
|
|
1562
1575
|
u,
|
|
1563
1576
|
e,
|
|
1564
|
-
|
|
1577
|
+
x,
|
|
1565
1578
|
r,
|
|
1566
|
-
|
|
1579
|
+
B,
|
|
1567
1580
|
c,
|
|
1568
|
-
u.nodeType === Node.TEXT_NODE ?
|
|
1581
|
+
u.nodeType === Node.TEXT_NODE ? E : void 0,
|
|
1569
1582
|
u.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
|
|
1570
1583
|
);
|
|
1571
|
-
|
|
1584
|
+
A && N.push(A);
|
|
1572
1585
|
}), {
|
|
1573
1586
|
id: S,
|
|
1574
1587
|
type: "BOX",
|
|
1575
|
-
element:
|
|
1588
|
+
element: o,
|
|
1576
1589
|
rect: {
|
|
1577
|
-
x:
|
|
1578
|
-
y:
|
|
1579
|
-
width:
|
|
1580
|
-
height:
|
|
1590
|
+
x: R.left + window.scrollX,
|
|
1591
|
+
y: R.top + window.scrollY,
|
|
1592
|
+
width: R.width,
|
|
1593
|
+
height: R.height
|
|
1581
1594
|
},
|
|
1582
|
-
styles:
|
|
1583
|
-
textContent:
|
|
1584
|
-
textStyles:
|
|
1595
|
+
styles: U,
|
|
1596
|
+
textContent: q,
|
|
1597
|
+
textStyles: $,
|
|
1585
1598
|
dirtyMask: e,
|
|
1586
1599
|
visibility: h,
|
|
1587
1600
|
isTraveler: g,
|
|
1588
1601
|
captureLayer: r,
|
|
1589
|
-
nativeLayer:
|
|
1590
|
-
nativeStyles:
|
|
1591
|
-
backgroundColor: (
|
|
1592
|
-
backgroundImage: (
|
|
1593
|
-
opacity: (
|
|
1594
|
-
zIndex: m.zIndex !== void 0 ? m.zIndex +
|
|
1595
|
-
borderRadius: (
|
|
1596
|
-
borderColor: (ne = m.borderColor) != null ? ne :
|
|
1597
|
-
borderWidth: (
|
|
1598
|
-
isTraveler:
|
|
1602
|
+
nativeLayer: E,
|
|
1603
|
+
nativeStyles: E !== void 0 ? xe(J({}, b), {
|
|
1604
|
+
backgroundColor: (X = m.backgroundColor) != null ? X : b.backgroundColor,
|
|
1605
|
+
backgroundImage: (Z = m.backgroundImage) != null ? Z : b.backgroundImage,
|
|
1606
|
+
opacity: (ee = m.opacity) != null ? ee : b.opacity,
|
|
1607
|
+
zIndex: m.zIndex !== void 0 ? m.zIndex + B : b.zIndex,
|
|
1608
|
+
borderRadius: (te = m.borderRadius) != null ? te : b.borderRadius,
|
|
1609
|
+
borderColor: (ne = m.borderColor) != null ? ne : b.borderColor,
|
|
1610
|
+
borderWidth: (ae = m.borderWidth) != null ? ae : b.borderWidth,
|
|
1611
|
+
isTraveler: b.isTraveler,
|
|
1599
1612
|
transform: m.transform
|
|
1600
1613
|
}) : void 0,
|
|
1601
|
-
nativeRect:
|
|
1602
|
-
x: m.x !== void 0 ? parseFloat(m.x) :
|
|
1603
|
-
y: m.y !== void 0 ? parseFloat(m.y) :
|
|
1604
|
-
width: m.width !== void 0 ? parseFloat(m.width) :
|
|
1605
|
-
height: m.height !== void 0 ? parseFloat(m.height) :
|
|
1614
|
+
nativeRect: E !== void 0 ? {
|
|
1615
|
+
x: m.x !== void 0 ? parseFloat(m.x) : R.left + window.scrollX,
|
|
1616
|
+
y: m.y !== void 0 ? parseFloat(m.y) : R.top + window.scrollY,
|
|
1617
|
+
width: m.width !== void 0 ? parseFloat(m.width) : R.width,
|
|
1618
|
+
height: m.height !== void 0 ? parseFloat(m.height) : R.height
|
|
1606
1619
|
} : void 0,
|
|
1607
|
-
isFixed:
|
|
1608
|
-
children:
|
|
1609
|
-
shaderHooks:
|
|
1620
|
+
isFixed: C.position === "fixed",
|
|
1621
|
+
children: N,
|
|
1622
|
+
shaderHooks: M
|
|
1610
1623
|
};
|
|
1611
1624
|
}
|
|
1612
1625
|
function it(s, e) {
|
|
1613
1626
|
e.size !== 0 && e.forEach((t, r) => {
|
|
1614
|
-
var c, n,
|
|
1627
|
+
var c, n, a, o;
|
|
1615
1628
|
const i = s.get(r);
|
|
1616
|
-
!i || !i.userData.basePosition || (
|
|
1629
|
+
!i || !i.userData.basePosition || (V.forceUpdateUniforms(i.material, {
|
|
1617
1630
|
backgroundColor: t.backgroundColor,
|
|
1618
1631
|
backgroundImage: t.backgroundImage,
|
|
1619
1632
|
opacity: t.opacity,
|
|
1620
1633
|
borderRadius: (n = t.borderRadius) != null ? n : (c = i.userData.baseStyles) == null ? void 0 : c.borderRadius
|
|
1621
1634
|
// width and height are no longer updated here, they are updated in syncMeshesByDOM
|
|
1622
|
-
}), i.userData.nativeMesh &&
|
|
1635
|
+
}), i.userData.nativeMesh && V.forceUpdateUniforms(i.userData.nativeMesh.material, {
|
|
1623
1636
|
backgroundColor: t.backgroundColor,
|
|
1624
1637
|
backgroundImage: t.backgroundImage,
|
|
1625
1638
|
opacity: t.opacity,
|
|
1626
|
-
borderRadius: (
|
|
1639
|
+
borderRadius: (o = t.borderRadius) != null ? o : (a = i.userData.baseStyles) == null ? void 0 : a.borderRadius
|
|
1627
1640
|
}));
|
|
1628
1641
|
});
|
|
1629
1642
|
}
|
|
@@ -1638,15 +1651,15 @@ class st {
|
|
|
1638
1651
|
resizeDebounce: i.resizeDebounce
|
|
1639
1652
|
}), this.tracker.onLayoutChange.add((c, n) => {
|
|
1640
1653
|
document.querySelector(`[${O.NAME}~='${O.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
|
|
1641
|
-
const
|
|
1654
|
+
const o = Ie(
|
|
1642
1655
|
this.target,
|
|
1643
1656
|
c,
|
|
1644
|
-
|
|
1657
|
+
H,
|
|
1645
1658
|
1,
|
|
1646
1659
|
0,
|
|
1647
1660
|
this.renderer.qualityFactor
|
|
1648
1661
|
);
|
|
1649
|
-
|
|
1662
|
+
o && this.renderer.syncScene(o, n);
|
|
1650
1663
|
}), this.tracker.onStyleChange.add((c) => {
|
|
1651
1664
|
it(this.registry, c);
|
|
1652
1665
|
}), this.tracker.onRender.add(() => {
|
|
@@ -1693,12 +1706,12 @@ class ct {
|
|
|
1693
1706
|
p(this, "registry");
|
|
1694
1707
|
var i, c, n;
|
|
1695
1708
|
if (this.target = e, this.registry = new nt(), !document.getElementById("mirage-engine-styles")) {
|
|
1696
|
-
const
|
|
1697
|
-
|
|
1698
|
-
[${
|
|
1709
|
+
const a = document.createElement("style");
|
|
1710
|
+
a.id = "mirage-engine-styles", a.textContent = `
|
|
1711
|
+
[${K.NAME}="${K.VALUES.HIDE}"] {
|
|
1699
1712
|
opacity: 0 !important;
|
|
1700
1713
|
}
|
|
1701
|
-
`, document.head.appendChild(
|
|
1714
|
+
`, document.head.appendChild(a);
|
|
1702
1715
|
}
|
|
1703
1716
|
let r;
|
|
1704
1717
|
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)
|
|
@@ -1753,24 +1766,24 @@ class ct {
|
|
|
1753
1766
|
}
|
|
1754
1767
|
export {
|
|
1755
1768
|
Se as ALLOWED_FILTERS,
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1769
|
+
K as ATTR_DOM,
|
|
1770
|
+
W as ATTR_FILTER,
|
|
1771
|
+
ot as ATTR_SANDWICH,
|
|
1772
|
+
G as ATTR_SELECT,
|
|
1760
1773
|
Xe as ATTR_SHADER,
|
|
1761
1774
|
O as ATTR_TRAVEL,
|
|
1762
1775
|
ve as DIRTY_CONTENT,
|
|
1763
1776
|
de as DIRTY_NONE,
|
|
1764
|
-
|
|
1777
|
+
Q as DIRTY_RECT,
|
|
1765
1778
|
ue as DIRTY_STRUCTURE,
|
|
1766
1779
|
le as DIRTY_STYLE,
|
|
1767
1780
|
ze as DIRTY_ZINDEX,
|
|
1768
1781
|
lt as EXCLUDED,
|
|
1769
1782
|
ct as Engine,
|
|
1770
|
-
|
|
1771
|
-
|
|
1783
|
+
ie as SELECT_LAYER,
|
|
1784
|
+
k as THREE_LAYERS,
|
|
1772
1785
|
Ce as TRAVEL_VALUES,
|
|
1773
1786
|
We as Tracker,
|
|
1774
|
-
|
|
1787
|
+
H as USER_LAYER,
|
|
1775
1788
|
Ye as extractFromStyle
|
|
1776
1789
|
};
|