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