@mirage-engine/core 0.3.11 → 0.3.13
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 +12 -0
- package/dist/mirage-engine.js +446 -435
- package/dist/mirage-engine.umd.js +11 -11
- package/package.json +3 -3
- package/src/renderer/Renderer.ts +50 -38
package/dist/mirage-engine.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
var
|
|
1
|
+
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 ?
|
|
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)
|
|
9
9
|
for (var t of we(e))
|
|
10
10
|
Ne.call(e, t) && me(s, t, e[t]);
|
|
11
11
|
return s;
|
|
12
|
-
}, xe = (s, e) =>
|
|
13
|
-
var
|
|
12
|
+
}, xe = (s, e) => Be(s, Oe(e));
|
|
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
15
|
var c = (a) => {
|
|
16
16
|
try {
|
|
@@ -28,13 +28,13 @@ var Ee = (s, e, t) => new Promise((r, i) => {
|
|
|
28
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
|
+
}, $ = {
|
|
38
38
|
NAME: "data-mirage-dom",
|
|
39
39
|
KEY: "mirageDom",
|
|
40
40
|
VALUES: {
|
|
@@ -59,14 +59,14 @@ const Me = {
|
|
|
59
59
|
KEY: "mirageTravel",
|
|
60
60
|
VALUES: Ce,
|
|
61
61
|
MAX_LAYERS: Object.keys(Ce).length - 1
|
|
62
|
-
},
|
|
62
|
+
}, V = {
|
|
63
63
|
NAME: "data-mirage-filter",
|
|
64
64
|
KEY: "mirageFilter",
|
|
65
|
-
VALUES:
|
|
66
|
-
},
|
|
65
|
+
VALUES: Le
|
|
66
|
+
}, P = {
|
|
67
67
|
NAME: "data-mirage-select",
|
|
68
68
|
KEY: "mirageSelect",
|
|
69
|
-
VALUES:
|
|
69
|
+
VALUES: Le
|
|
70
70
|
}, Xe = {
|
|
71
71
|
NAME: "data-mirage-shader",
|
|
72
72
|
KEY: "mirageShader"
|
|
@@ -76,7 +76,7 @@ const Me = {
|
|
|
76
76
|
VALUES: {
|
|
77
77
|
FRONT: "front"
|
|
78
78
|
}
|
|
79
|
-
}, de = 0,
|
|
79
|
+
}, de = 0, K = 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 ? {
|
|
@@ -99,32 +99,32 @@ function Ye(s) {
|
|
|
99
99
|
}
|
|
100
100
|
class We {
|
|
101
101
|
constructor(e, t) {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |=
|
|
102
|
+
p(this, "target");
|
|
103
|
+
p(this, "observer");
|
|
104
|
+
p(this, "pendingDeletions", /* @__PURE__ */ new Set());
|
|
105
|
+
p(this, "pendingStyles", /* @__PURE__ */ new Map());
|
|
106
|
+
p(this, "isDomDirty", !1);
|
|
107
|
+
p(this, "isRunning", !1);
|
|
108
|
+
p(this, "pendingMask", de);
|
|
109
|
+
p(this, "mutationTimer", null);
|
|
110
|
+
p(this, "cssTimer", null);
|
|
111
|
+
p(this, "resizeConfig");
|
|
112
|
+
p(this, "resizeTimer", null);
|
|
113
|
+
p(this, "isResizing", !1);
|
|
114
|
+
p(this, "lastScrollX", 0);
|
|
115
|
+
p(this, "lastScrollY", 0);
|
|
116
|
+
p(this, "scrollTimer", null);
|
|
117
|
+
p(this, "onBeforeRender", /* @__PURE__ */ new Set());
|
|
118
|
+
p(this, "onLayoutChange", /* @__PURE__ */ new Set());
|
|
119
|
+
p(this, "onStyleChange", /* @__PURE__ */ new Set());
|
|
120
|
+
p(this, "onScrollChange", /* @__PURE__ */ new Set());
|
|
121
|
+
p(this, "onRender", /* @__PURE__ */ new Set());
|
|
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 |= K | le, this.cssTimer = window.setTimeout(() => {
|
|
124
124
|
this.isDomDirty = !0, this.cssTimer = null;
|
|
125
125
|
}, 50)));
|
|
126
126
|
});
|
|
127
|
-
|
|
127
|
+
p(this, "onWindowResize", () => {
|
|
128
128
|
if (!this.resizeConfig.enabled) {
|
|
129
129
|
this.isDomDirty = !0;
|
|
130
130
|
return;
|
|
@@ -133,13 +133,13 @@ class We {
|
|
|
133
133
|
this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
|
|
134
134
|
}, this.resizeConfig.delay);
|
|
135
135
|
});
|
|
136
|
-
|
|
136
|
+
p(this, "renderLoop", () => {
|
|
137
137
|
if (!this.isRunning)
|
|
138
138
|
return;
|
|
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 |= K, 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;
|
|
@@ -159,13 +159,13 @@ class We {
|
|
|
159
159
|
});
|
|
160
160
|
else if (a.type === "attributes")
|
|
161
161
|
if (a.attributeName === "style") {
|
|
162
|
-
o |=
|
|
162
|
+
o |= K | le;
|
|
163
163
|
const l = a.target, d = Ye(l.style);
|
|
164
164
|
this.pendingStyles.set(l, d);
|
|
165
165
|
} else
|
|
166
|
-
a.attributeName === "class" ? o |=
|
|
166
|
+
a.attributeName === "class" ? o |= K | le : a.attributeName && a.attributeName.startsWith("data-") && (o |= K | le, a.attributeName.startsWith("data-mirage") && (o |= ue));
|
|
167
167
|
else
|
|
168
|
-
a.type === "characterData" && (o |= ve |
|
|
168
|
+
a.type === "characterData" && (o |= ve | K);
|
|
169
169
|
if (o !== de) {
|
|
170
170
|
if (this.pendingMask |= o, o & ue) {
|
|
171
171
|
this.clearTimers(), this.isDomDirty = !0;
|
|
@@ -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 W = 1, te = 2, lt = 0, F = {
|
|
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(V.VALUES);
|
|
201
201
|
class De {
|
|
202
202
|
/**
|
|
203
203
|
* Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
|
|
@@ -219,7 +219,7 @@ class De {
|
|
|
219
219
|
return document.body.removeChild(t), c;
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
|
-
|
|
222
|
+
p(De, "cache", /* @__PURE__ */ new Map());
|
|
223
223
|
class He extends y.MeshBasicMaterial {
|
|
224
224
|
constructor(t, r, i, c, n = 2) {
|
|
225
225
|
super({
|
|
@@ -227,9 +227,9 @@ class He extends y.MeshBasicMaterial {
|
|
|
227
227
|
side: y.FrontSide,
|
|
228
228
|
color: 16777215
|
|
229
229
|
});
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
230
|
+
p(this, "canvas");
|
|
231
|
+
p(this, "ctx");
|
|
232
|
+
p(this, "qualityFactor");
|
|
233
233
|
if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
|
|
234
234
|
throw new Error("[Mirage] Failed to create canvas context");
|
|
235
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);
|
|
@@ -255,11 +255,11 @@ class He extends y.MeshBasicMaterial {
|
|
|
255
255
|
n !== void 0 && (this.qualityFactor = n);
|
|
256
256
|
const a = (window.devicePixelRatio || 1) * this.qualityFactor, l = i * a, d = c * a;
|
|
257
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),
|
|
259
|
-
h.forEach((
|
|
260
|
-
const
|
|
261
|
-
let
|
|
262
|
-
r.textAlign === "center" ?
|
|
258
|
+
const h = this.wrapText(t, i), f = r.lineHeight, v = De.getBaseline(r.font);
|
|
259
|
+
h.forEach((g, m) => {
|
|
260
|
+
const w = m * f + v;
|
|
261
|
+
let M = 0;
|
|
262
|
+
r.textAlign === "center" ? M = i / 2 : r.textAlign === "right" && (M = i), this.ctx.textAlign = r.textAlign, this.ctx.fillText(g, M, w);
|
|
263
263
|
}), this.map && (this.map.needsUpdate = !0);
|
|
264
264
|
}
|
|
265
265
|
dispose() {
|
|
@@ -319,16 +319,16 @@ function Ge(s) {
|
|
|
319
319
|
const o = [];
|
|
320
320
|
for (let a = c; a < r.length && !(o.length >= 8); a++) {
|
|
321
321
|
const l = r[a].trim(), d = l.lastIndexOf(" ");
|
|
322
|
-
let h = l,
|
|
322
|
+
let h = l, f = null;
|
|
323
323
|
if (d !== -1 && !l.endsWith(")")) {
|
|
324
|
-
const
|
|
325
|
-
(
|
|
324
|
+
const g = l.substring(d + 1);
|
|
325
|
+
(g.endsWith("%") || g.endsWith("px") || !isNaN(parseFloat(g))) && (h = l.substring(0, d).trim(), f = g);
|
|
326
326
|
}
|
|
327
|
-
const
|
|
327
|
+
const v = ce(h);
|
|
328
328
|
o.push({
|
|
329
|
-
color:
|
|
330
|
-
alpha:
|
|
331
|
-
rawStop:
|
|
329
|
+
color: v.color,
|
|
330
|
+
alpha: v.alpha,
|
|
331
|
+
rawStop: f,
|
|
332
332
|
stop: 0
|
|
333
333
|
});
|
|
334
334
|
}
|
|
@@ -341,9 +341,9 @@ function Ge(s) {
|
|
|
341
341
|
if (o[l].rawStop !== null || l === o.length - 1) {
|
|
342
342
|
const d = l - a;
|
|
343
343
|
if (d > 1) {
|
|
344
|
-
const h = o[a].stop,
|
|
345
|
-
for (let
|
|
346
|
-
o[a +
|
|
344
|
+
const h = o[a].stop, v = (o[l].stop - h) / d;
|
|
345
|
+
for (let g = 1; g < d; g++)
|
|
346
|
+
o[a + g].stop = h + v * g;
|
|
347
347
|
}
|
|
348
348
|
a = l;
|
|
349
349
|
}
|
|
@@ -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 E;
|
|
516
516
|
const c = r !== null || !!s.imageSrc;
|
|
517
517
|
let n = "";
|
|
518
518
|
const o = {};
|
|
519
519
|
if (i != null && i.uniforms)
|
|
520
|
-
for (const [
|
|
521
|
-
typeof
|
|
522
|
-
`, o[
|
|
523
|
-
`, o[
|
|
524
|
-
`, o[
|
|
525
|
-
`, o[
|
|
526
|
-
`, o[
|
|
520
|
+
for (const [S, x] of Object.entries(i.uniforms))
|
|
521
|
+
typeof x == "number" ? (n += `uniform float ${S};
|
|
522
|
+
`, o[S] = { value: x }) : Array.isArray(x) ? x.length === 2 ? (n += `uniform vec2 ${S};
|
|
523
|
+
`, o[S] = { value: new y.Vector2(...x) }) : x.length === 3 ? (n += `uniform vec3 ${S};
|
|
524
|
+
`, o[S] = { value: new y.Vector3(...x) }) : x.length === 4 && (n += `uniform vec4 ${S};
|
|
525
|
+
`, o[S] = { value: new y.Vector4(...x) }) : (n += `uniform float ${S};
|
|
526
|
+
`, o[S] = { value: x });
|
|
527
527
|
const a = i !== void 0, l = (c || a ? 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
|
-
`,
|
|
531
|
+
`, f = c || a ? d + h + ((i == null ? void 0 : i.uvModifier) || "") : "", v = c || a ? 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), w = ce(s.backgroundColor), M = ce(s.borderColor), L = {
|
|
532
532
|
uSize: { value: new y.Vector2(e, t) },
|
|
533
533
|
uBgColor: {
|
|
534
534
|
value: new y.Vector4(
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
535
|
+
w.color.r,
|
|
536
|
+
w.color.g,
|
|
537
|
+
w.color.b,
|
|
538
|
+
w.alpha
|
|
539
539
|
)
|
|
540
540
|
},
|
|
541
541
|
uBorderColor: {
|
|
542
542
|
value: new y.Vector4(
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
543
|
+
M.color.r,
|
|
544
|
+
M.color.g,
|
|
545
|
+
M.color.b,
|
|
546
|
+
M.alpha
|
|
547
547
|
)
|
|
548
548
|
},
|
|
549
549
|
uBorderRadius: { value: new y.Vector4(0, 0, 0, 0) },
|
|
550
550
|
uBorderWidth: { value: re(s.borderWidth) },
|
|
551
|
-
uOpacity: { value: (
|
|
551
|
+
uOpacity: { value: (E = s.opacity) != null ? E : 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,16 +559,16 @@ 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(L.uBorderRadius.value, s.borderRadius, Math.min(e, t)), c && (L.uTexture.value = r);
|
|
563
|
+
const T = new y.ShaderMaterial({
|
|
564
|
+
uniforms: j(j({}, L), o),
|
|
565
565
|
vertexShader: Te.vertexShader,
|
|
566
|
-
fragmentShader:
|
|
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(T, { backgroundImage: s.backgroundImage }), T;
|
|
572
572
|
}
|
|
573
573
|
function Ze(s, e, t, r, i) {
|
|
574
574
|
const c = re(e.borderWidth);
|
|
@@ -649,11 +649,11 @@ function ye(s, e) {
|
|
|
649
649
|
if (n && o && a && l) {
|
|
650
650
|
const d = n / o, h = a / l;
|
|
651
651
|
if (d > h) {
|
|
652
|
-
const
|
|
653
|
-
s.uniforms.uTextureRepeat.value.set(
|
|
652
|
+
const f = h / d;
|
|
653
|
+
s.uniforms.uTextureRepeat.value.set(f, 1), s.uniforms.uTextureOffset.value.set((1 - f) / 2, 0);
|
|
654
654
|
} else {
|
|
655
|
-
const
|
|
656
|
-
s.uniforms.uTextureRepeat.value.set(1,
|
|
655
|
+
const f = d / h;
|
|
656
|
+
s.uniforms.uTextureRepeat.value.set(1, f), s.uniforms.uTextureOffset.value.set(0, (1 - f) / 2);
|
|
657
657
|
}
|
|
658
658
|
}
|
|
659
659
|
} else
|
|
@@ -696,7 +696,7 @@ function Ae(s, e, t = 0) {
|
|
|
696
696
|
const r = e.split("/")[0].trim().split(/\s+/), i = re(r[0], t), c = re((a = r[1]) != null ? a : r[0], t), n = re((l = r[2]) != null ? l : r[0], t), o = re((h = (d = r[3]) != null ? d : r[1]) != null ? h : r[0], t);
|
|
697
697
|
s.set(i, c, n, o);
|
|
698
698
|
}
|
|
699
|
-
const
|
|
699
|
+
const Y = {
|
|
700
700
|
create(s, e, t, r, i, c = 2, n = null, o) {
|
|
701
701
|
return s === "BOX" ? Qe(
|
|
702
702
|
e,
|
|
@@ -733,11 +733,11 @@ const H = {
|
|
|
733
733
|
};
|
|
734
734
|
class et {
|
|
735
735
|
constructor(e, t = !0) {
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
736
|
+
p(this, "observer");
|
|
737
|
+
p(this, "textures", /* @__PURE__ */ new WeakMap());
|
|
738
|
+
p(this, "loadStatus", /* @__PURE__ */ new WeakMap());
|
|
739
|
+
p(this, "elementUrls", /* @__PURE__ */ new WeakMap());
|
|
740
|
+
p(this, "onUpdate");
|
|
741
741
|
this.onUpdate = e, t && (this.observer = new IntersectionObserver(
|
|
742
742
|
(r) => {
|
|
743
743
|
for (const i of r) {
|
|
@@ -801,33 +801,33 @@ class et {
|
|
|
801
801
|
}
|
|
802
802
|
class tt {
|
|
803
803
|
constructor(e, t, r, i) {
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
804
|
+
p(this, "canvas");
|
|
805
|
+
p(this, "scene");
|
|
806
|
+
p(this, "camera");
|
|
807
|
+
p(this, "renderer");
|
|
808
|
+
p(this, "renderTargets", []);
|
|
809
|
+
p(this, "renderOrder", 0);
|
|
810
|
+
p(this, "qualityFactor", 2);
|
|
811
|
+
p(this, "mode", "overlay");
|
|
812
|
+
p(this, "canvasSize", "viewport");
|
|
813
|
+
p(this, "clipArea", 1);
|
|
814
|
+
p(this, "targetLayer", "base");
|
|
815
|
+
p(this, "overscan", 200);
|
|
816
|
+
p(this, "target");
|
|
817
|
+
p(this, "mountContainer");
|
|
818
|
+
p(this, "registry");
|
|
819
|
+
p(this, "targetRect");
|
|
820
|
+
p(this, "travelersByLayer", Array.from(
|
|
821
821
|
{ length: O.MAX_LAYERS },
|
|
822
822
|
() => /* @__PURE__ */ new Set()
|
|
823
823
|
));
|
|
824
|
-
|
|
824
|
+
p(this, "textureManager");
|
|
825
825
|
// private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
|
|
826
|
-
|
|
826
|
+
p(this, "fixedMeshes", /* @__PURE__ */ new Set());
|
|
827
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 et((
|
|
829
|
-
const
|
|
830
|
-
|
|
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 et((f, v) => {
|
|
829
|
+
const g = this.registry.get(f);
|
|
830
|
+
g && g.material instanceof y.ShaderMaterial && Y.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" ? F.SELECTED : F.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 && Y.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 && Y.forceUpdateUniforms(
|
|
908
908
|
i.material,
|
|
909
909
|
t
|
|
910
910
|
);
|
|
@@ -925,12 +925,12 @@ class tt {
|
|
|
925
925
|
const h = this.registry.get(d);
|
|
926
926
|
if (h) {
|
|
927
927
|
this.scene.remove(h);
|
|
928
|
-
for (const
|
|
929
|
-
|
|
928
|
+
for (const f of this.travelersByLayer)
|
|
929
|
+
f.delete(h);
|
|
930
930
|
this.fixedMeshes.delete(h), h.geometry.dispose(), h.userData.nativeMesh && (this.scene.remove(h.userData.nativeMesh), Array.isArray(h.userData.nativeMesh.material) ? h.userData.nativeMesh.material.forEach(
|
|
931
|
-
(
|
|
932
|
-
) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((
|
|
933
|
-
|
|
931
|
+
(f) => f.dispose()
|
|
932
|
+
) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((f) => {
|
|
933
|
+
f instanceof y.Mesh && (f.geometry && f.geometry.dispose(), f.material && (Array.isArray(f.material) ? f.material.forEach((v) => v.dispose()) : f.material.dispose()));
|
|
934
934
|
}), this.registry.remove(d), this.textureManager.unregister(d);
|
|
935
935
|
}
|
|
936
936
|
});
|
|
@@ -944,7 +944,7 @@ 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), o = e.isTraveler ? (i = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : i.texture : this.textureManager.get(e.element), a =
|
|
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 = Y.create(
|
|
948
948
|
"BOX",
|
|
949
949
|
e.styles,
|
|
950
950
|
"",
|
|
@@ -979,51 +979,53 @@ class tt {
|
|
|
979
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
980
|
if (t.dirtyMask & ve || n !== o) {
|
|
981
981
|
e.children.filter(
|
|
982
|
-
(
|
|
983
|
-
).forEach((
|
|
984
|
-
var
|
|
985
|
-
const
|
|
986
|
-
(
|
|
982
|
+
(g) => g.name.startsWith("TEXT_CHILD")
|
|
983
|
+
).forEach((g) => {
|
|
984
|
+
var w;
|
|
985
|
+
const m = g;
|
|
986
|
+
(w = m.material.map) == null || w.dispose(), m.geometry.dispose(), e.remove(m);
|
|
987
987
|
});
|
|
988
|
-
const h = t.rect,
|
|
989
|
-
i.forEach((
|
|
990
|
-
const
|
|
988
|
+
const h = t.rect, f = h.x + h.width / 2, v = h.y + h.height / 2;
|
|
989
|
+
i.forEach((g, m) => {
|
|
990
|
+
const w = Y.create(
|
|
991
991
|
"TEXT",
|
|
992
992
|
c,
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
993
|
+
g.text,
|
|
994
|
+
g.rect.width,
|
|
995
|
+
g.rect.height,
|
|
996
996
|
this.qualityFactor
|
|
997
|
-
),
|
|
998
|
-
|
|
999
|
-
const
|
|
1000
|
-
|
|
1001
|
-
const
|
|
1002
|
-
|
|
1003
|
-
t.rect.width === 0 ? 0 :
|
|
997
|
+
), M = new y.PlaneGeometry(1, 1), L = new y.Mesh(M, w);
|
|
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 S = g.rect.x + g.rect.width / 2, x = g.rect.y + g.rect.height / 2, R = S - f, D = -(x - v);
|
|
1002
|
+
L.position.set(
|
|
1003
|
+
t.rect.width === 0 ? 0 : R / t.rect.width,
|
|
1004
1004
|
t.rect.height === 0 ? 0 : D / t.rect.height,
|
|
1005
1005
|
5e-3
|
|
1006
|
-
), e.add(
|
|
1006
|
+
), e.add(L);
|
|
1007
1007
|
}), e.userData.textChildStyleHash = n;
|
|
1008
1008
|
}
|
|
1009
1009
|
e.children.forEach((d) => {
|
|
1010
1010
|
if (!d.name.startsWith("TEXT_CHILD"))
|
|
1011
1011
|
return;
|
|
1012
|
-
const h = d
|
|
1013
|
-
if (
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1012
|
+
const h = d;
|
|
1013
|
+
if (r && t.nativeLayer !== void 0)
|
|
1014
|
+
h.layers.set(F.HIDDEN), t.visibility & W && h.layers.enable(F.getCaptureLayer(t.nativeLayer));
|
|
1015
|
+
else {
|
|
1016
|
+
const f = t.visibility & W ? F.BASE : F.HIDDEN;
|
|
1017
|
+
if (h.layers.set(f), t.visibility & te && h.layers.enable(F.SELECTED), t.visibility & W)
|
|
1018
|
+
if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
|
|
1019
|
+
for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
|
|
1020
|
+
v !== t.nativeLayer && h.layers.enable(F.getCaptureLayer(v));
|
|
1021
|
+
else
|
|
1022
|
+
for (let v = t.captureLayer; v <= O.MAX_LAYERS + 1; v++)
|
|
1023
|
+
h.layers.enable(F.getCaptureLayer(v));
|
|
1024
|
+
}
|
|
1023
1025
|
});
|
|
1024
1026
|
}
|
|
1025
1027
|
updateMeshProperties(e, t) {
|
|
1026
|
-
var
|
|
1028
|
+
var T, E, S;
|
|
1027
1029
|
const { rect: r, styles: i } = t, c = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / c, o = this.renderer.domElement.height / c;
|
|
1028
1030
|
e.material = e.userData.baseMaterial, e.scale.set(r.width, r.height, 1), e.userData.domRect = {
|
|
1029
1031
|
x: r.x,
|
|
@@ -1034,27 +1036,27 @@ class tt {
|
|
|
1034
1036
|
const a = 1e-3;
|
|
1035
1037
|
this.renderOrder++;
|
|
1036
1038
|
const l = this.targetRect.left + window.scrollX, d = this.targetRect.top + window.scrollY;
|
|
1037
|
-
let h,
|
|
1039
|
+
let h, f;
|
|
1038
1040
|
if (this.isViewport)
|
|
1039
|
-
h = r.x - window.innerWidth / 2 + r.width / 2,
|
|
1041
|
+
h = r.x - window.innerWidth / 2 + r.width / 2, f = -r.y + window.innerHeight / 2 - r.height / 2;
|
|
1040
1042
|
else {
|
|
1041
|
-
const
|
|
1042
|
-
h =
|
|
1043
|
+
const x = r.x - l, R = r.y - d;
|
|
1044
|
+
h = x - n / 2 + r.width / 2, f = -R + o / 2 - r.height / 2;
|
|
1043
1045
|
}
|
|
1044
1046
|
e.position.set(
|
|
1045
1047
|
h,
|
|
1046
|
-
|
|
1048
|
+
f,
|
|
1047
1049
|
i.zIndex + this.renderOrder * a
|
|
1048
1050
|
);
|
|
1049
|
-
const
|
|
1050
|
-
e.userData.basePosition = { x: h, y:
|
|
1051
|
-
const
|
|
1052
|
-
let
|
|
1053
|
-
if (
|
|
1054
|
-
const
|
|
1055
|
-
|
|
1051
|
+
const v = r.x, g = r.y;
|
|
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, w = window.getComputedStyle(m);
|
|
1054
|
+
let M = 0, L = 0;
|
|
1055
|
+
if (w.transform && w.transform !== "none") {
|
|
1056
|
+
const x = new DOMMatrix(w.transform);
|
|
1057
|
+
M = x.m41, L = x.m42;
|
|
1056
1058
|
}
|
|
1057
|
-
if (e.userData.baseTransform = { x:
|
|
1059
|
+
if (e.userData.baseTransform = { x: M, y: L }, delete e.userData.originRatioX, delete e.userData.originRatioY, Y.update(
|
|
1058
1060
|
e.userData.baseMaterial,
|
|
1059
1061
|
"BOX",
|
|
1060
1062
|
i,
|
|
@@ -1062,87 +1064,96 @@ class tt {
|
|
|
1062
1064
|
r.width,
|
|
1063
1065
|
r.height,
|
|
1064
1066
|
this.qualityFactor,
|
|
1065
|
-
t.isTraveler ? (
|
|
1067
|
+
t.isTraveler ? (T = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : T.texture : this.textureManager.get(t.element)
|
|
1066
1068
|
), t.nativeStyles && t.nativeRect) {
|
|
1067
1069
|
if (!e.userData.nativeMesh) {
|
|
1068
|
-
const
|
|
1070
|
+
const _ = Y.create(
|
|
1069
1071
|
"BOX",
|
|
1070
1072
|
t.nativeStyles,
|
|
1071
1073
|
"",
|
|
1072
1074
|
t.nativeRect.width,
|
|
1073
1075
|
t.nativeRect.height,
|
|
1074
1076
|
this.qualityFactor,
|
|
1075
|
-
t.isTraveler ? (
|
|
1077
|
+
t.isTraveler ? (E = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : E.texture : this.textureManager.get(t.element),
|
|
1076
1078
|
t.shaderHooks
|
|
1077
|
-
), N = new y.Mesh(e.geometry,
|
|
1079
|
+
), N = new y.Mesh(e.geometry, _);
|
|
1078
1080
|
t.type === "TEXT" && (N.name = "BG_MESH"), this.scene.add(N), e.userData.nativeMesh = N;
|
|
1079
1081
|
}
|
|
1080
|
-
const
|
|
1081
|
-
let
|
|
1082
|
+
const x = e.userData.nativeMesh;
|
|
1083
|
+
let R, D;
|
|
1082
1084
|
if (this.isViewport)
|
|
1083
|
-
|
|
1085
|
+
R = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, D = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
|
|
1084
1086
|
else {
|
|
1085
|
-
const
|
|
1086
|
-
|
|
1087
|
+
const _ = t.nativeRect.x - l, N = t.nativeRect.y - d;
|
|
1088
|
+
R = _ - n / 2 + t.nativeRect.width / 2, D = -N + o / 2 - t.nativeRect.height / 2;
|
|
1087
1089
|
}
|
|
1088
|
-
let
|
|
1090
|
+
let U = t.nativeRect.width, G = t.nativeRect.height, ie = R, se = D;
|
|
1089
1091
|
if (t.nativeStyles.transform) {
|
|
1090
|
-
const
|
|
1092
|
+
const _ = t.nativeStyles.transform, N = _.match(/scale\(([\d.]+%?)\)/);
|
|
1091
1093
|
if (N) {
|
|
1092
|
-
let
|
|
1093
|
-
N[1].includes("%") && (
|
|
1094
|
+
let u = parseFloat(N[1]);
|
|
1095
|
+
N[1].includes("%") && (u /= 100), U *= u, G *= u;
|
|
1094
1096
|
}
|
|
1095
|
-
const
|
|
1097
|
+
const J = _.match(/scaleX\(([\d.]+%?)\)/);
|
|
1098
|
+
if (J) {
|
|
1099
|
+
let u = parseFloat(J[1]);
|
|
1100
|
+
J[1].includes("%") && (u /= 100), U *= u;
|
|
1101
|
+
}
|
|
1102
|
+
const Q = _.match(/scaleY\(([\d.]+%?)\)/);
|
|
1103
|
+
if (Q) {
|
|
1104
|
+
let u = parseFloat(Q[1]);
|
|
1105
|
+
Q[1].includes("%") && (u /= 100), G *= u;
|
|
1106
|
+
}
|
|
1107
|
+
const Z = _.match(/translate\(([^,]+),\s*([^)]+)\)/);
|
|
1096
1108
|
if (Z) {
|
|
1097
|
-
const
|
|
1098
|
-
let
|
|
1099
|
-
|
|
1100
|
-
let
|
|
1101
|
-
|
|
1109
|
+
const u = Z[1].trim(), b = Z[2].trim();
|
|
1110
|
+
let I = parseFloat(u);
|
|
1111
|
+
u.includes("%") && (I = I / 100 * t.nativeRect.width);
|
|
1112
|
+
let B = parseFloat(b);
|
|
1113
|
+
b.includes("%") && (B = B / 100 * t.nativeRect.height), ie += I, se -= B;
|
|
1102
1114
|
}
|
|
1103
|
-
const ne =
|
|
1115
|
+
const ne = _.match(/translateX\(([^)]+)\)/);
|
|
1104
1116
|
if (ne) {
|
|
1105
|
-
const
|
|
1106
|
-
let
|
|
1107
|
-
|
|
1117
|
+
const u = ne[1].trim();
|
|
1118
|
+
let b = parseFloat(u);
|
|
1119
|
+
u.includes("%") && (b = b / 100 * t.nativeRect.width), ie += b;
|
|
1108
1120
|
}
|
|
1109
|
-
const oe =
|
|
1121
|
+
const oe = _.match(/translateY\(([^)]+)\)/);
|
|
1110
1122
|
if (oe) {
|
|
1111
|
-
const
|
|
1112
|
-
let
|
|
1113
|
-
|
|
1123
|
+
const u = oe[1].trim();
|
|
1124
|
+
let b = parseFloat(u);
|
|
1125
|
+
u.includes("%") && (b = b / 100 * t.nativeRect.height), se -= b;
|
|
1114
1126
|
}
|
|
1115
1127
|
}
|
|
1116
|
-
|
|
1128
|
+
x.scale.set(U, G, 1), x.position.set(
|
|
1117
1129
|
ie,
|
|
1118
1130
|
se,
|
|
1119
1131
|
t.nativeStyles.zIndex + this.renderOrder * a
|
|
1120
|
-
),
|
|
1121
|
-
|
|
1132
|
+
), Y.update(
|
|
1133
|
+
x.material,
|
|
1122
1134
|
"BOX",
|
|
1123
1135
|
t.nativeStyles,
|
|
1124
1136
|
"",
|
|
1125
1137
|
t.nativeRect.width,
|
|
1126
1138
|
t.nativeRect.height,
|
|
1127
1139
|
this.qualityFactor,
|
|
1128
|
-
t.isTraveler ? (
|
|
1140
|
+
t.isTraveler ? (S = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : S.texture : this.textureManager.get(t.element)
|
|
1129
1141
|
);
|
|
1130
1142
|
} else
|
|
1131
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);
|
|
1132
1144
|
}
|
|
1133
1145
|
updateMeshLayers(e, t) {
|
|
1134
|
-
const r = t.visibility &
|
|
1135
|
-
if (e.layers.set(r), t.visibility & te && e.layers.enable(
|
|
1146
|
+
const r = t.visibility & W ? F.BASE : F.HIDDEN;
|
|
1147
|
+
if (e.layers.set(r), t.visibility & te && e.layers.enable(F.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
|
|
1136
1148
|
const i = e.userData.nativeMesh;
|
|
1137
|
-
if (i.layers.set(
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
i.layers.enable(U.getCaptureLayer(c));
|
|
1149
|
+
if (i.layers.set(F.HIDDEN), t.visibility & W) {
|
|
1150
|
+
i.layers.enable(F.getCaptureLayer(t.nativeLayer));
|
|
1151
|
+
for (let c = t.captureLayer; c <= O.MAX_LAYERS + 1; c++)
|
|
1152
|
+
c !== t.nativeLayer && e.layers.enable(F.getCaptureLayer(c));
|
|
1142
1153
|
}
|
|
1143
|
-
} else if (t.visibility &
|
|
1154
|
+
} else if (t.visibility & W)
|
|
1144
1155
|
for (let i = t.captureLayer; i <= O.MAX_LAYERS + 1; i++)
|
|
1145
|
-
e.layers.enable(
|
|
1156
|
+
e.layers.enable(F.getCaptureLayer(i));
|
|
1146
1157
|
}
|
|
1147
1158
|
captureRenderTarget(e, t, r) {
|
|
1148
1159
|
if (e.size === 0 || !r)
|
|
@@ -1152,11 +1163,11 @@ class tt {
|
|
|
1152
1163
|
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();
|
|
1153
1164
|
for (const d of e) {
|
|
1154
1165
|
n.setFromMatrixPosition(d.matrixWorld), n.project(this.camera);
|
|
1155
|
-
const h = (n.x + 1) / 2 * o,
|
|
1156
|
-
let
|
|
1157
|
-
typeof this.clipArea == "number" ?
|
|
1158
|
-
const
|
|
1159
|
-
this.renderer.setScissor(
|
|
1166
|
+
const h = (n.x + 1) / 2 * o, f = (n.y + 1) / 2 * a;
|
|
1167
|
+
let v = 0, g = 1;
|
|
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, w = d.scale.y * g + 0.5, M = h - m / 2, L = f - w / 2, T = (M * this.qualityFactor - v) / l, E = (L * this.qualityFactor - v) / l, S = (m * this.qualityFactor + v * 2) / l, x = (w * this.qualityFactor + v * 2) / l;
|
|
1170
|
+
this.renderer.setScissor(T, E, S, x), this.renderer.render(this.scene, this.camera);
|
|
1160
1171
|
}
|
|
1161
1172
|
this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(i, c);
|
|
1162
1173
|
}
|
|
@@ -1165,7 +1176,7 @@ class tt {
|
|
|
1165
1176
|
const t = e + 1;
|
|
1166
1177
|
this.captureRenderTarget(
|
|
1167
1178
|
this.travelersByLayer[e],
|
|
1168
|
-
|
|
1179
|
+
F.getCaptureLayer(t),
|
|
1169
1180
|
this.renderTargets[e]
|
|
1170
1181
|
);
|
|
1171
1182
|
}
|
|
@@ -1194,47 +1205,47 @@ class tt {
|
|
|
1194
1205
|
width: l.width,
|
|
1195
1206
|
height: l.height
|
|
1196
1207
|
};
|
|
1197
|
-
let h,
|
|
1208
|
+
let h, f;
|
|
1198
1209
|
if (this.isViewport)
|
|
1199
|
-
h = l.x - window.innerWidth / 2 + l.width / 2,
|
|
1210
|
+
h = l.x - window.innerWidth / 2 + l.width / 2, f = -l.y + window.innerHeight / 2 - l.height / 2;
|
|
1200
1211
|
else {
|
|
1201
|
-
const
|
|
1202
|
-
h =
|
|
1212
|
+
const v = l.x - e, g = l.y - t;
|
|
1213
|
+
h = v - i / 2 + l.width / 2, f = -g + c / 2 - l.height / 2;
|
|
1203
1214
|
}
|
|
1204
|
-
if (o.position.setX(h), o.position.setY(
|
|
1215
|
+
if (o.position.setX(h), o.position.setY(f), o.scale.set(l.width, l.height, 1), o.updateMatrixWorld(), o.material instanceof y.ShaderMaterial && Y.forceUpdateUniforms(o.material, {
|
|
1205
1216
|
width: l.width,
|
|
1206
1217
|
height: l.height
|
|
1207
1218
|
}), o.userData.nativeMesh) {
|
|
1208
|
-
const
|
|
1209
|
-
let
|
|
1219
|
+
const v = o.userData.nativeMesh;
|
|
1220
|
+
let g = l.width, m = l.height, w = h, M = f;
|
|
1210
1221
|
if (o.userData.nativeTransform) {
|
|
1211
|
-
const
|
|
1212
|
-
if (
|
|
1213
|
-
let
|
|
1214
|
-
|
|
1222
|
+
const L = o.userData.nativeTransform, T = L.match(/scale\(([\d.]+%?)\)/);
|
|
1223
|
+
if (T) {
|
|
1224
|
+
let R = parseFloat(T[1]);
|
|
1225
|
+
T[1].includes("%") && (R /= 100), g *= R, m *= R;
|
|
1215
1226
|
}
|
|
1216
|
-
const
|
|
1217
|
-
if (
|
|
1218
|
-
const
|
|
1219
|
-
let
|
|
1220
|
-
|
|
1221
|
-
let
|
|
1222
|
-
D.includes("%") && (
|
|
1227
|
+
const E = L.match(/translate\(([^,]+),\s*([^)]+)\)/);
|
|
1228
|
+
if (E) {
|
|
1229
|
+
const R = E[1].trim(), D = E[2].trim();
|
|
1230
|
+
let U = parseFloat(R);
|
|
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;
|
|
1223
1234
|
}
|
|
1224
|
-
const
|
|
1225
|
-
if (
|
|
1226
|
-
const
|
|
1227
|
-
let D = parseFloat(
|
|
1228
|
-
|
|
1235
|
+
const S = L.match(/translateX\(([^)]+)\)/);
|
|
1236
|
+
if (S) {
|
|
1237
|
+
const R = S[1].trim();
|
|
1238
|
+
let D = parseFloat(R);
|
|
1239
|
+
R.includes("%") && (D = D / 100 * l.width), w += D;
|
|
1229
1240
|
}
|
|
1230
|
-
const
|
|
1231
|
-
if (
|
|
1232
|
-
const
|
|
1233
|
-
let D = parseFloat(
|
|
1234
|
-
|
|
1241
|
+
const x = L.match(/translateY\(([^)]+)\)/);
|
|
1242
|
+
if (x) {
|
|
1243
|
+
const R = x[1].trim();
|
|
1244
|
+
let D = parseFloat(R);
|
|
1245
|
+
R.includes("%") && (D = D / 100 * l.height), M -= D;
|
|
1235
1246
|
}
|
|
1236
1247
|
}
|
|
1237
|
-
|
|
1248
|
+
v.position.setX(w), v.position.setY(M), v.scale.set(g, m, 1), v.updateMatrixWorld();
|
|
1238
1249
|
}
|
|
1239
1250
|
}
|
|
1240
1251
|
});
|
|
@@ -1245,14 +1256,14 @@ function rt(s) {
|
|
|
1245
1256
|
let r = "", i = null, c = -1;
|
|
1246
1257
|
const n = (l, d) => {
|
|
1247
1258
|
for (let h = 0; h < l.length; h++) {
|
|
1248
|
-
const
|
|
1249
|
-
|
|
1250
|
-
const
|
|
1251
|
-
if (
|
|
1252
|
-
r +=
|
|
1259
|
+
const f = l[h], v = document.createRange();
|
|
1260
|
+
v.setStart(s, d + h), v.setEnd(s, d + h + 1);
|
|
1261
|
+
const g = v.getBoundingClientRect();
|
|
1262
|
+
if (g.width === 0 && g.height === 0) {
|
|
1263
|
+
r += f;
|
|
1253
1264
|
continue;
|
|
1254
1265
|
}
|
|
1255
|
-
c === -1 || Math.abs(
|
|
1266
|
+
c === -1 || Math.abs(g.top - c) > g.height / 2 ? (r && i && t.push({
|
|
1256
1267
|
text: r,
|
|
1257
1268
|
rect: {
|
|
1258
1269
|
left: i.left,
|
|
@@ -1260,14 +1271,14 @@ function rt(s) {
|
|
|
1260
1271
|
width: i.right - i.left,
|
|
1261
1272
|
height: i.bottom - i.top
|
|
1262
1273
|
}
|
|
1263
|
-
}), r =
|
|
1264
|
-
left:
|
|
1265
|
-
top:
|
|
1266
|
-
right:
|
|
1267
|
-
bottom:
|
|
1268
|
-
}, c =
|
|
1274
|
+
}), r = f, i = {
|
|
1275
|
+
left: g.left,
|
|
1276
|
+
top: g.top,
|
|
1277
|
+
right: g.right,
|
|
1278
|
+
bottom: g.bottom
|
|
1279
|
+
}, 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(
|
|
1269
1280
|
i.bottom,
|
|
1270
|
-
|
|
1281
|
+
g.bottom
|
|
1271
1282
|
)));
|
|
1272
1283
|
}
|
|
1273
1284
|
}, o = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
|
|
@@ -1279,12 +1290,12 @@ function rt(s) {
|
|
|
1279
1290
|
if (h.length > 1)
|
|
1280
1291
|
n(l, a);
|
|
1281
1292
|
else {
|
|
1282
|
-
const
|
|
1283
|
-
if (
|
|
1293
|
+
const f = h.length === 1 ? h[0] : d.getBoundingClientRect();
|
|
1294
|
+
if (f.width === 0 && f.height === 0) {
|
|
1284
1295
|
r += l, a += l.length;
|
|
1285
1296
|
continue;
|
|
1286
1297
|
}
|
|
1287
|
-
c === -1 || Math.abs(
|
|
1298
|
+
c === -1 || Math.abs(f.top - c) > f.height / 2 ? (r && i && t.push({
|
|
1288
1299
|
text: r,
|
|
1289
1300
|
rect: {
|
|
1290
1301
|
left: i.left,
|
|
@@ -1293,13 +1304,13 @@ function rt(s) {
|
|
|
1293
1304
|
height: i.bottom - i.top
|
|
1294
1305
|
}
|
|
1295
1306
|
}), r = l, i = {
|
|
1296
|
-
left:
|
|
1297
|
-
top:
|
|
1298
|
-
right:
|
|
1299
|
-
bottom:
|
|
1300
|
-
}, c =
|
|
1307
|
+
left: f.left,
|
|
1308
|
+
top: f.top,
|
|
1309
|
+
right: f.right,
|
|
1310
|
+
bottom: f.bottom
|
|
1311
|
+
}, 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(
|
|
1301
1312
|
i.bottom,
|
|
1302
|
-
|
|
1313
|
+
f.bottom
|
|
1303
1314
|
)));
|
|
1304
1315
|
}
|
|
1305
1316
|
a += l.length;
|
|
@@ -1316,7 +1327,7 @@ function rt(s) {
|
|
|
1316
1327
|
(l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
|
|
1317
1328
|
);
|
|
1318
1329
|
}
|
|
1319
|
-
function
|
|
1330
|
+
function Me(s) {
|
|
1320
1331
|
const e = parseFloat(s.fontSize);
|
|
1321
1332
|
let t = parseFloat(s.lineHeight);
|
|
1322
1333
|
isNaN(t) && (t = e * 1.2);
|
|
@@ -1332,73 +1343,73 @@ function Le(s) {
|
|
|
1332
1343
|
letterSpacing: r
|
|
1333
1344
|
};
|
|
1334
1345
|
}
|
|
1335
|
-
function Ie(s, e =
|
|
1336
|
-
var N,
|
|
1346
|
+
function Ie(s, e = K | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
|
|
1347
|
+
var N, J, Q, Z, ne, oe;
|
|
1337
1348
|
if (s.nodeType === Node.TEXT_NODE) {
|
|
1338
|
-
const
|
|
1339
|
-
if (!
|
|
1349
|
+
const u = s;
|
|
1350
|
+
if (!u.textContent || !u.textContent.trim())
|
|
1340
1351
|
return null;
|
|
1341
|
-
const
|
|
1342
|
-
if (
|
|
1352
|
+
const b = u.textContent.replace(/\s+/g, " ");
|
|
1353
|
+
if (b.length === 0)
|
|
1343
1354
|
return null;
|
|
1344
|
-
const
|
|
1345
|
-
if (
|
|
1355
|
+
const I = rt(u);
|
|
1356
|
+
if (I.length === 0)
|
|
1346
1357
|
return null;
|
|
1347
|
-
const
|
|
1348
|
-
if (!
|
|
1358
|
+
const B = u.parentElement, k = B ? window.getComputedStyle(B) : null;
|
|
1359
|
+
if (!k)
|
|
1349
1360
|
return null;
|
|
1350
|
-
const
|
|
1361
|
+
const H = Math.min(...I.map((C) => C.rect.left)), X = Math.min(...I.map((C) => C.rect.top)), q = Math.max(...I.map((C) => C.rect.left + C.rect.width)), A = Math.max(...I.map((C) => C.rect.top + C.rect.height));
|
|
1351
1362
|
return {
|
|
1352
1363
|
id: Math.random().toString(36).substring(2, 9),
|
|
1353
1364
|
type: "TEXT",
|
|
1354
|
-
element:
|
|
1365
|
+
element: u,
|
|
1355
1366
|
rect: {
|
|
1356
|
-
x:
|
|
1367
|
+
x: H + window.scrollX,
|
|
1357
1368
|
y: X + window.scrollY,
|
|
1358
|
-
width:
|
|
1369
|
+
width: q - H,
|
|
1359
1370
|
height: A - X
|
|
1360
1371
|
},
|
|
1361
1372
|
styles: {
|
|
1362
1373
|
backgroundColor: "transparent",
|
|
1363
1374
|
backgroundImage: "",
|
|
1364
|
-
opacity:
|
|
1365
|
-
zIndex: (isNaN(parseInt(
|
|
1375
|
+
opacity: B && B.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(k.opacity),
|
|
1376
|
+
zIndex: (isNaN(parseInt(k.zIndex)) ? 0 : parseInt(k.zIndex)) + i,
|
|
1366
1377
|
borderRadius: "0px",
|
|
1367
1378
|
borderColor: "transparent",
|
|
1368
1379
|
borderWidth: "0px",
|
|
1369
1380
|
isTraveler: !1
|
|
1370
1381
|
},
|
|
1371
|
-
textContent:
|
|
1372
|
-
textLines:
|
|
1373
|
-
text:
|
|
1382
|
+
textContent: b,
|
|
1383
|
+
textLines: I.map((C) => ({
|
|
1384
|
+
text: C.text.trim(),
|
|
1374
1385
|
rect: {
|
|
1375
|
-
x:
|
|
1376
|
-
y:
|
|
1377
|
-
width:
|
|
1378
|
-
height:
|
|
1386
|
+
x: C.rect.left + window.scrollX,
|
|
1387
|
+
y: C.rect.top + window.scrollY,
|
|
1388
|
+
width: C.rect.width,
|
|
1389
|
+
height: C.rect.height
|
|
1379
1390
|
}
|
|
1380
1391
|
})),
|
|
1381
|
-
textStyles:
|
|
1392
|
+
textStyles: Me(k),
|
|
1382
1393
|
dirtyMask: e,
|
|
1383
1394
|
visibility: t,
|
|
1384
1395
|
isTraveler: !1,
|
|
1385
1396
|
captureLayer: r,
|
|
1386
|
-
isFixed:
|
|
1397
|
+
isFixed: k.position === "fixed",
|
|
1387
1398
|
nativeLayer: n,
|
|
1388
|
-
nativeStyles: o ?
|
|
1399
|
+
nativeStyles: o ? j(j({
|
|
1389
1400
|
backgroundColor: "transparent",
|
|
1390
1401
|
backgroundImage: "",
|
|
1391
|
-
opacity:
|
|
1392
|
-
zIndex: (isNaN(parseInt(
|
|
1402
|
+
opacity: B && B.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(k.opacity),
|
|
1403
|
+
zIndex: (isNaN(parseInt(k.zIndex)) ? 0 : parseInt(k.zIndex)) + i,
|
|
1393
1404
|
borderRadius: "0px",
|
|
1394
1405
|
borderColor: "transparent",
|
|
1395
1406
|
borderWidth: "0px",
|
|
1396
1407
|
isTraveler: !1
|
|
1397
|
-
},
|
|
1408
|
+
}, Me(k)), o) : void 0,
|
|
1398
1409
|
nativeRect: o ? {
|
|
1399
|
-
x:
|
|
1410
|
+
x: H + window.scrollX,
|
|
1400
1411
|
y: X + window.scrollY,
|
|
1401
|
-
width:
|
|
1412
|
+
width: q - H,
|
|
1402
1413
|
height: A - X
|
|
1403
1414
|
} : void 0,
|
|
1404
1415
|
children: []
|
|
@@ -1406,209 +1417,209 @@ function Ie(s, e = Q | le | ze | ve | ue, t, r = 1, i = 0, c = 2, n, o) {
|
|
|
1406
1417
|
}
|
|
1407
1418
|
if (s.nodeType !== Node.ELEMENT_NODE)
|
|
1408
1419
|
return null;
|
|
1409
|
-
const a = s, l = a.dataset[
|
|
1420
|
+
const a = s, l = a.dataset[V.KEY];
|
|
1410
1421
|
let d = t, h = t;
|
|
1411
1422
|
if (l) {
|
|
1412
|
-
const
|
|
1413
|
-
for (const
|
|
1414
|
-
if (!Se.includes(
|
|
1423
|
+
const u = new Set(l.split(/\s+/));
|
|
1424
|
+
for (const b of u)
|
|
1425
|
+
if (!Se.includes(b))
|
|
1415
1426
|
throw new Error(
|
|
1416
|
-
`[MirageEngine] Invalid filter token: '${
|
|
1427
|
+
`[MirageEngine] Invalid filter token: '${b}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1417
1428
|
);
|
|
1418
|
-
if (
|
|
1429
|
+
if (u.has(V.VALUES.END))
|
|
1419
1430
|
return null;
|
|
1420
|
-
if (
|
|
1431
|
+
if (u.has(V.VALUES.INCLUDE_TREE) && u.has(V.VALUES.EXCLUDE_TREE))
|
|
1421
1432
|
throw new Error(
|
|
1422
1433
|
"[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
|
|
1423
1434
|
);
|
|
1424
|
-
if (
|
|
1435
|
+
if (u.has(V.VALUES.INCLUDE_SELF) && u.has(V.VALUES.EXCLUDE_SELF))
|
|
1425
1436
|
throw new Error(
|
|
1426
1437
|
"[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1427
1438
|
);
|
|
1428
|
-
|
|
1439
|
+
u.has(V.VALUES.INCLUDE_TREE) ? d = d | W : u.has(V.VALUES.EXCLUDE_TREE) && (d = d & ~W), h = d, u.has(V.VALUES.INCLUDE_SELF) ? h = h | W : u.has(V.VALUES.EXCLUDE_SELF) && (h = h & ~W);
|
|
1429
1440
|
}
|
|
1430
|
-
const
|
|
1431
|
-
if (
|
|
1432
|
-
const
|
|
1433
|
-
for (const
|
|
1434
|
-
if (!Se.includes(
|
|
1441
|
+
const f = a.dataset[P.KEY];
|
|
1442
|
+
if (f) {
|
|
1443
|
+
const u = new Set(f.split(/\s+/));
|
|
1444
|
+
for (const b of u)
|
|
1445
|
+
if (!Se.includes(b))
|
|
1435
1446
|
throw new Error(
|
|
1436
|
-
`[MirageEngine] Invalid select token: '${
|
|
1447
|
+
`[MirageEngine] Invalid select token: '${b}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1437
1448
|
);
|
|
1438
|
-
if (
|
|
1449
|
+
if (u.has(P.VALUES.END))
|
|
1439
1450
|
return null;
|
|
1440
|
-
if (
|
|
1451
|
+
if (u.has(P.VALUES.INCLUDE_TREE) && u.has(P.VALUES.EXCLUDE_TREE))
|
|
1441
1452
|
throw new Error(
|
|
1442
1453
|
"[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
|
|
1443
1454
|
);
|
|
1444
|
-
if (
|
|
1455
|
+
if (u.has(P.VALUES.INCLUDE_SELF) && u.has(P.VALUES.EXCLUDE_SELF))
|
|
1445
1456
|
throw new Error(
|
|
1446
1457
|
"[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1447
1458
|
);
|
|
1448
|
-
|
|
1449
|
-
}
|
|
1450
|
-
const
|
|
1451
|
-
let
|
|
1452
|
-
if (
|
|
1453
|
-
let
|
|
1454
|
-
const
|
|
1455
|
-
let
|
|
1456
|
-
if (
|
|
1457
|
-
|
|
1458
|
-
const A =
|
|
1459
|
+
u.has(P.VALUES.INCLUDE_TREE) ? d = d | te : u.has(P.VALUES.EXCLUDE_TREE) && (d = d & ~te), h = d, u.has(P.VALUES.INCLUDE_SELF) ? h = h | te : u.has(P.VALUES.EXCLUDE_SELF) && (h = h & ~te);
|
|
1460
|
+
}
|
|
1461
|
+
const v = a.dataset[O.KEY];
|
|
1462
|
+
let g = !1, m = o ? j({}, o) : {}, w = n;
|
|
1463
|
+
if (v) {
|
|
1464
|
+
let u = 1;
|
|
1465
|
+
const b = v.indexOf("{"), I = v.lastIndexOf("}");
|
|
1466
|
+
let B = v;
|
|
1467
|
+
if (b !== -1 && I !== -1 && I > b) {
|
|
1468
|
+
B = v.substring(0, b).trim();
|
|
1469
|
+
const A = v.substring(b, I + 1);
|
|
1459
1470
|
try {
|
|
1460
|
-
|
|
1461
|
-
} catch (
|
|
1471
|
+
m = new Function("return " + A)();
|
|
1472
|
+
} catch (C) {
|
|
1462
1473
|
console.warn(
|
|
1463
1474
|
`[MirageEngine] Failed to parse travel styles JSON: ${A}`
|
|
1464
1475
|
);
|
|
1465
1476
|
}
|
|
1466
1477
|
}
|
|
1467
|
-
const
|
|
1468
|
-
let
|
|
1469
|
-
const X =
|
|
1478
|
+
const k = B.split(/\s+/);
|
|
1479
|
+
let H = !1;
|
|
1480
|
+
const X = k.indexOf(O.VALUES.TRAVELER);
|
|
1470
1481
|
if (X !== -1) {
|
|
1471
|
-
|
|
1472
|
-
const A =
|
|
1482
|
+
g = !0, H = !0;
|
|
1483
|
+
const A = k[X + 1];
|
|
1473
1484
|
if (A && !isNaN(parseInt(A, 10)))
|
|
1474
|
-
|
|
1485
|
+
u = parseInt(A, 10);
|
|
1475
1486
|
else {
|
|
1476
|
-
const
|
|
1477
|
-
|
|
1487
|
+
const C = k.find((ee) => !isNaN(parseInt(ee, 10)));
|
|
1488
|
+
C && (u = parseInt(C, 10));
|
|
1478
1489
|
}
|
|
1479
1490
|
}
|
|
1480
|
-
const
|
|
1481
|
-
if (
|
|
1482
|
-
const A =
|
|
1491
|
+
const q = k.indexOf(O.VALUES.NATIVE);
|
|
1492
|
+
if (q !== -1) {
|
|
1493
|
+
const A = k[q + 1];
|
|
1483
1494
|
if (A && !isNaN(parseInt(A, 10)))
|
|
1484
|
-
|
|
1485
|
-
else if (!
|
|
1486
|
-
const
|
|
1487
|
-
|
|
1495
|
+
w = parseInt(A, 10);
|
|
1496
|
+
else if (!g) {
|
|
1497
|
+
const C = k.find((ee) => !isNaN(parseInt(ee, 10)));
|
|
1498
|
+
C && (w = parseInt(C, 10));
|
|
1488
1499
|
}
|
|
1489
1500
|
}
|
|
1490
|
-
if (
|
|
1491
|
-
const A =
|
|
1501
|
+
if (H) {
|
|
1502
|
+
const A = u + 1;
|
|
1492
1503
|
if (A < r)
|
|
1493
1504
|
throw new Error(
|
|
1494
|
-
`[MirageEngine] Traveler layer (${
|
|
1505
|
+
`[MirageEngine] Traveler layer (${u}) cannot be smaller than inherited capture layer (${r - 1}).`
|
|
1495
1506
|
);
|
|
1496
1507
|
r = Math.min(A, O.MAX_LAYERS + 1);
|
|
1497
1508
|
}
|
|
1498
1509
|
}
|
|
1499
|
-
const
|
|
1500
|
-
let
|
|
1501
|
-
|
|
1502
|
-
const
|
|
1503
|
-
if (
|
|
1510
|
+
const M = a.dataset[Xe.KEY];
|
|
1511
|
+
let L;
|
|
1512
|
+
M && (L = JSON.parse(M));
|
|
1513
|
+
const T = a.getBoundingClientRect(), E = window.getComputedStyle(a);
|
|
1514
|
+
if (T.width === 0 || T.height === 0 || E.display === "none")
|
|
1504
1515
|
return null;
|
|
1505
|
-
let
|
|
1506
|
-
|
|
1507
|
-
const
|
|
1516
|
+
let S = a.getAttribute("data-mid");
|
|
1517
|
+
S || (S = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", S));
|
|
1518
|
+
const x = parseInt(E.zIndex), R = (isNaN(x) ? 0 : x) + i;
|
|
1508
1519
|
let D;
|
|
1509
1520
|
if (a.tagName === "IMG")
|
|
1510
1521
|
D = a.src;
|
|
1511
1522
|
else if (a.tagName.toLowerCase() === "svg") {
|
|
1512
|
-
const
|
|
1513
|
-
const
|
|
1523
|
+
const u = a.cloneNode(!0), b = m == null ? void 0 : m.color, I = m == null ? void 0 : m.fill, B = m == null ? void 0 : m.stroke, k = m == null ? void 0 : m.opacity, H = (C, ee) => {
|
|
1524
|
+
const z = window.getComputedStyle(C), ae = ee, ke = z.fill === z.color, Ue = z.stroke === z.color, fe = I || (ke ? b : void 0) || z.fill;
|
|
1514
1525
|
fe && fe !== "none" && (ae.style.fill = fe);
|
|
1515
|
-
const ge =
|
|
1516
|
-
ge && ge !== "none" && (ae.style.stroke = ge),
|
|
1517
|
-
const be =
|
|
1526
|
+
const ge = B || (Ue ? b : void 0) || z.stroke;
|
|
1527
|
+
ge && ge !== "none" && (ae.style.stroke = ge), z.strokeWidth && z.strokeWidth !== "0px" && (ae.style.strokeWidth = z.strokeWidth);
|
|
1528
|
+
const be = b || z.color;
|
|
1518
1529
|
be && (ae.style.color = be);
|
|
1519
|
-
const pe =
|
|
1530
|
+
const pe = k || z.opacity;
|
|
1520
1531
|
pe && pe !== "1" && (ae.style.opacity = pe);
|
|
1521
|
-
for (let he = 0; he <
|
|
1522
|
-
|
|
1532
|
+
for (let he = 0; he < C.children.length; he++)
|
|
1533
|
+
H(C.children[he], ee.children[he]);
|
|
1523
1534
|
};
|
|
1524
|
-
|
|
1525
|
-
const X = a.getBoundingClientRect(),
|
|
1526
|
-
|
|
1527
|
-
let A = new XMLSerializer().serializeToString(
|
|
1535
|
+
H(a, u);
|
|
1536
|
+
const X = a.getBoundingClientRect(), q = window.devicePixelRatio * c;
|
|
1537
|
+
u.hasAttribute("viewBox") || u.setAttribute("viewBox", `0 0 ${X.width} ${X.height}`), u.setAttribute("width", (X.width * q).toString()), u.setAttribute("height", (X.height * q).toString());
|
|
1538
|
+
let A = new XMLSerializer().serializeToString(u);
|
|
1528
1539
|
A.includes("xmlns=") || (A = A.replace(
|
|
1529
1540
|
"<svg",
|
|
1530
1541
|
'<svg xmlns="http://www.w3.org/2000/svg"'
|
|
1531
1542
|
)), D = `data:image/svg+xml;utf8,${encodeURIComponent(A)}`;
|
|
1532
|
-
} else if (
|
|
1533
|
-
const
|
|
1534
|
-
|
|
1535
|
-
}
|
|
1536
|
-
const
|
|
1537
|
-
backgroundColor:
|
|
1538
|
-
backgroundImage:
|
|
1539
|
-
opacity: a.dataset[
|
|
1540
|
-
zIndex:
|
|
1541
|
-
borderRadius:
|
|
1542
|
-
borderColor:
|
|
1543
|
-
borderWidth:
|
|
1543
|
+
} else if (E.backgroundImage && E.backgroundImage !== "none") {
|
|
1544
|
+
const u = E.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
|
|
1545
|
+
u && (D = u[1]);
|
|
1546
|
+
}
|
|
1547
|
+
const U = {
|
|
1548
|
+
backgroundColor: E.backgroundColor,
|
|
1549
|
+
backgroundImage: E.backgroundImage,
|
|
1550
|
+
opacity: a.dataset[$.KEY] === $.VALUES.HIDE ? 1 : parseFloat(E.opacity),
|
|
1551
|
+
zIndex: R,
|
|
1552
|
+
borderRadius: E.borderRadius,
|
|
1553
|
+
borderColor: E.borderColor,
|
|
1554
|
+
borderWidth: E.borderWidth,
|
|
1544
1555
|
imageSrc: D,
|
|
1545
|
-
isTraveler:
|
|
1546
|
-
},
|
|
1556
|
+
isTraveler: g
|
|
1557
|
+
}, G = U;
|
|
1547
1558
|
let ie, se;
|
|
1548
|
-
const
|
|
1549
|
-
return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((
|
|
1550
|
-
const
|
|
1551
|
-
|
|
1559
|
+
const _ = [];
|
|
1560
|
+
return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((u) => {
|
|
1561
|
+
const b = u.nodeType === Node.TEXT_NODE ? h : d, I = Ie(
|
|
1562
|
+
u,
|
|
1552
1563
|
e,
|
|
1553
|
-
|
|
1564
|
+
b,
|
|
1554
1565
|
r,
|
|
1555
|
-
|
|
1566
|
+
R,
|
|
1556
1567
|
c,
|
|
1557
|
-
|
|
1558
|
-
|
|
1568
|
+
u.nodeType === Node.TEXT_NODE ? w : void 0,
|
|
1569
|
+
u.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0
|
|
1559
1570
|
);
|
|
1560
|
-
|
|
1571
|
+
I && _.push(I);
|
|
1561
1572
|
}), {
|
|
1562
|
-
id:
|
|
1573
|
+
id: S,
|
|
1563
1574
|
type: "BOX",
|
|
1564
1575
|
element: a,
|
|
1565
1576
|
rect: {
|
|
1566
|
-
x:
|
|
1567
|
-
y:
|
|
1568
|
-
width:
|
|
1569
|
-
height:
|
|
1577
|
+
x: T.left + window.scrollX,
|
|
1578
|
+
y: T.top + window.scrollY,
|
|
1579
|
+
width: T.width,
|
|
1580
|
+
height: T.height
|
|
1570
1581
|
},
|
|
1571
|
-
styles:
|
|
1582
|
+
styles: G,
|
|
1572
1583
|
textContent: ie,
|
|
1573
1584
|
textStyles: se,
|
|
1574
1585
|
dirtyMask: e,
|
|
1575
1586
|
visibility: h,
|
|
1576
|
-
isTraveler:
|
|
1587
|
+
isTraveler: g,
|
|
1577
1588
|
captureLayer: r,
|
|
1578
|
-
nativeLayer:
|
|
1579
|
-
nativeStyles:
|
|
1580
|
-
backgroundColor: (N =
|
|
1581
|
-
backgroundImage: (
|
|
1582
|
-
opacity: (
|
|
1583
|
-
zIndex:
|
|
1584
|
-
borderRadius: (
|
|
1585
|
-
borderColor: (
|
|
1586
|
-
borderWidth: (
|
|
1587
|
-
isTraveler:
|
|
1588
|
-
transform:
|
|
1589
|
+
nativeLayer: w,
|
|
1590
|
+
nativeStyles: w !== void 0 ? xe(j({}, U), {
|
|
1591
|
+
backgroundColor: (N = m.backgroundColor) != null ? N : U.backgroundColor,
|
|
1592
|
+
backgroundImage: (J = m.backgroundImage) != null ? J : U.backgroundImage,
|
|
1593
|
+
opacity: (Q = m.opacity) != null ? Q : U.opacity,
|
|
1594
|
+
zIndex: m.zIndex !== void 0 ? m.zIndex + R : U.zIndex,
|
|
1595
|
+
borderRadius: (Z = m.borderRadius) != null ? Z : U.borderRadius,
|
|
1596
|
+
borderColor: (ne = m.borderColor) != null ? ne : U.borderColor,
|
|
1597
|
+
borderWidth: (oe = m.borderWidth) != null ? oe : U.borderWidth,
|
|
1598
|
+
isTraveler: U.isTraveler,
|
|
1599
|
+
transform: m.transform
|
|
1589
1600
|
}) : void 0,
|
|
1590
|
-
nativeRect:
|
|
1591
|
-
x:
|
|
1592
|
-
y:
|
|
1593
|
-
width:
|
|
1594
|
-
height:
|
|
1601
|
+
nativeRect: w !== void 0 ? {
|
|
1602
|
+
x: m.x !== void 0 ? parseFloat(m.x) : T.left + window.scrollX,
|
|
1603
|
+
y: m.y !== void 0 ? parseFloat(m.y) : T.top + window.scrollY,
|
|
1604
|
+
width: m.width !== void 0 ? parseFloat(m.width) : T.width,
|
|
1605
|
+
height: m.height !== void 0 ? parseFloat(m.height) : T.height
|
|
1595
1606
|
} : void 0,
|
|
1596
|
-
isFixed:
|
|
1597
|
-
children:
|
|
1598
|
-
shaderHooks:
|
|
1607
|
+
isFixed: E.position === "fixed",
|
|
1608
|
+
children: _,
|
|
1609
|
+
shaderHooks: L
|
|
1599
1610
|
};
|
|
1600
1611
|
}
|
|
1601
1612
|
function it(s, e) {
|
|
1602
1613
|
e.size !== 0 && e.forEach((t, r) => {
|
|
1603
1614
|
var c, n, o, a;
|
|
1604
1615
|
const i = s.get(r);
|
|
1605
|
-
!i || !i.userData.basePosition || (
|
|
1616
|
+
!i || !i.userData.basePosition || (Y.forceUpdateUniforms(i.material, {
|
|
1606
1617
|
backgroundColor: t.backgroundColor,
|
|
1607
1618
|
backgroundImage: t.backgroundImage,
|
|
1608
1619
|
opacity: t.opacity,
|
|
1609
1620
|
borderRadius: (n = t.borderRadius) != null ? n : (c = i.userData.baseStyles) == null ? void 0 : c.borderRadius
|
|
1610
1621
|
// width and height are no longer updated here, they are updated in syncMeshesByDOM
|
|
1611
|
-
}), i.userData.nativeMesh &&
|
|
1622
|
+
}), i.userData.nativeMesh && Y.forceUpdateUniforms(i.userData.nativeMesh.material, {
|
|
1612
1623
|
backgroundColor: t.backgroundColor,
|
|
1613
1624
|
backgroundImage: t.backgroundImage,
|
|
1614
1625
|
opacity: t.opacity,
|
|
@@ -1618,11 +1629,11 @@ function it(s, e) {
|
|
|
1618
1629
|
}
|
|
1619
1630
|
class st {
|
|
1620
1631
|
constructor(e, t, r, i) {
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1632
|
+
p(this, "target");
|
|
1633
|
+
p(this, "renderer");
|
|
1634
|
+
p(this, "registry");
|
|
1635
|
+
p(this, "isTravelEnabled", !1);
|
|
1636
|
+
p(this, "tracker");
|
|
1626
1637
|
this.target = e, this.renderer = t, this.registry = r, this.tracker = new We(e, {
|
|
1627
1638
|
resizeDebounce: i.resizeDebounce
|
|
1628
1639
|
}), this.tracker.onLayoutChange.add((c, n) => {
|
|
@@ -1630,7 +1641,7 @@ class st {
|
|
|
1630
1641
|
const a = Ie(
|
|
1631
1642
|
this.target,
|
|
1632
1643
|
c,
|
|
1633
|
-
|
|
1644
|
+
W,
|
|
1634
1645
|
1,
|
|
1635
1646
|
0,
|
|
1636
1647
|
this.renderer.qualityFactor
|
|
@@ -1651,7 +1662,7 @@ class st {
|
|
|
1651
1662
|
}
|
|
1652
1663
|
class nt {
|
|
1653
1664
|
constructor() {
|
|
1654
|
-
|
|
1665
|
+
p(this, "store");
|
|
1655
1666
|
this.store = /* @__PURE__ */ new WeakMap();
|
|
1656
1667
|
}
|
|
1657
1668
|
register(e, t) {
|
|
@@ -1676,15 +1687,15 @@ class nt {
|
|
|
1676
1687
|
}
|
|
1677
1688
|
class ct {
|
|
1678
1689
|
constructor(e, t) {
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1690
|
+
p(this, "renderer");
|
|
1691
|
+
p(this, "syncer");
|
|
1692
|
+
p(this, "target");
|
|
1693
|
+
p(this, "registry");
|
|
1683
1694
|
var i, c, n;
|
|
1684
1695
|
if (this.target = e, this.registry = new nt(), !document.getElementById("mirage-engine-styles")) {
|
|
1685
1696
|
const o = document.createElement("style");
|
|
1686
1697
|
o.id = "mirage-engine-styles", o.textContent = `
|
|
1687
|
-
[${
|
|
1698
|
+
[${$.NAME}="${$.VALUES.HIDE}"] {
|
|
1688
1699
|
opacity: 0 !important;
|
|
1689
1700
|
}
|
|
1690
1701
|
`, document.head.appendChild(o);
|
|
@@ -1742,24 +1753,24 @@ class ct {
|
|
|
1742
1753
|
}
|
|
1743
1754
|
export {
|
|
1744
1755
|
Se as ALLOWED_FILTERS,
|
|
1745
|
-
|
|
1746
|
-
|
|
1756
|
+
$ as ATTR_DOM,
|
|
1757
|
+
V as ATTR_FILTER,
|
|
1747
1758
|
at as ATTR_SANDWICH,
|
|
1748
|
-
|
|
1759
|
+
P as ATTR_SELECT,
|
|
1749
1760
|
Xe as ATTR_SHADER,
|
|
1750
1761
|
O as ATTR_TRAVEL,
|
|
1751
1762
|
ve as DIRTY_CONTENT,
|
|
1752
1763
|
de as DIRTY_NONE,
|
|
1753
|
-
|
|
1764
|
+
K as DIRTY_RECT,
|
|
1754
1765
|
ue as DIRTY_STRUCTURE,
|
|
1755
1766
|
le as DIRTY_STYLE,
|
|
1756
1767
|
ze as DIRTY_ZINDEX,
|
|
1757
1768
|
lt as EXCLUDED,
|
|
1758
1769
|
ct as Engine,
|
|
1759
1770
|
te as SELECT_LAYER,
|
|
1760
|
-
|
|
1771
|
+
F as THREE_LAYERS,
|
|
1761
1772
|
Ce as TRAVEL_VALUES,
|
|
1762
1773
|
We as Tracker,
|
|
1763
|
-
|
|
1774
|
+
W as USER_LAYER,
|
|
1764
1775
|
Ye as extractFromStyle
|
|
1765
1776
|
};
|