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