@mirage-engine/core 0.3.16 → 0.3.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/mirage-engine.js +913 -876
- package/dist/mirage-engine.umd.js +16 -16
- package/dist/src/dom/Extractor.d.ts +1 -1
- package/dist/src/types/common.d.ts +1 -0
- package/package.json +3 -3
- package/src/dom/Extractor.ts +9 -0
- package/src/renderer/Renderer.ts +72 -0
- package/src/types/common.ts +1 -0
package/dist/mirage-engine.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
1
|
+
var Xe = Object.defineProperty, Ne = Object.defineProperties;
|
|
2
|
+
var ze = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var Ee = Object.getOwnPropertySymbols;
|
|
4
|
+
var Ve = Object.prototype.hasOwnProperty, Ye = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var be = (i, e, t) => e in i ? Xe(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, te = (i, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
|
|
8
|
-
if (
|
|
9
|
-
for (var t of
|
|
10
|
-
|
|
11
|
-
return
|
|
12
|
-
},
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
7
|
+
Ve.call(e, t) && be(i, t, e[t]);
|
|
8
|
+
if (Ee)
|
|
9
|
+
for (var t of Ee(e))
|
|
10
|
+
Ye.call(e, t) && be(i, t, e[t]);
|
|
11
|
+
return i;
|
|
12
|
+
}, Ce = (i, e) => Ne(i, ze(e));
|
|
13
|
+
var g = (i, e, t) => (be(i, typeof e != "symbol" ? e + "" : e, t), t);
|
|
14
|
+
var Te = (i, e, t) => new Promise((r, s) => {
|
|
15
|
+
var l = (c) => {
|
|
16
16
|
try {
|
|
17
|
-
|
|
18
|
-
} catch (
|
|
19
|
-
s(
|
|
17
|
+
n(t.next(c));
|
|
18
|
+
} catch (a) {
|
|
19
|
+
s(a);
|
|
20
20
|
}
|
|
21
|
-
}, o = (
|
|
21
|
+
}, o = (c) => {
|
|
22
22
|
try {
|
|
23
|
-
|
|
24
|
-
} catch (
|
|
25
|
-
s(
|
|
23
|
+
n(t.throw(c));
|
|
24
|
+
} catch (a) {
|
|
25
|
+
s(a);
|
|
26
26
|
}
|
|
27
|
-
},
|
|
28
|
-
|
|
27
|
+
}, n = (c) => c.done ? r(c.value) : Promise.resolve(c.value).then(l, o);
|
|
28
|
+
n((t = t.apply(i, e)).next());
|
|
29
29
|
});
|
|
30
30
|
import * as w from "three";
|
|
31
|
-
const
|
|
31
|
+
const Ie = {
|
|
32
32
|
INCLUDE_TREE: "include-tree",
|
|
33
33
|
EXCLUDE_TREE: "exclude-tree",
|
|
34
34
|
INCLUDE_SELF: "include-self",
|
|
@@ -41,7 +41,7 @@ const De = {
|
|
|
41
41
|
HIDE: "hide",
|
|
42
42
|
SHOW: "show"
|
|
43
43
|
}
|
|
44
|
-
},
|
|
44
|
+
}, Re = {
|
|
45
45
|
TRAVELER: "traveler",
|
|
46
46
|
NATIVE: "native",
|
|
47
47
|
CAPTURE_1: "1",
|
|
@@ -54,77 +54,78 @@ const De = {
|
|
|
54
54
|
CAPTURE_8: "8",
|
|
55
55
|
CAPTURE_9: "9",
|
|
56
56
|
CAPTURE_10: "10"
|
|
57
|
-
},
|
|
57
|
+
}, N = {
|
|
58
58
|
NAME: "data-mirage-travel",
|
|
59
59
|
KEY: "mirageTravel",
|
|
60
|
-
VALUES:
|
|
61
|
-
MAX_LAYERS: Object.keys(
|
|
62
|
-
},
|
|
60
|
+
VALUES: Re,
|
|
61
|
+
MAX_LAYERS: Object.keys(Re).length - 1
|
|
62
|
+
}, H = {
|
|
63
63
|
NAME: "data-mirage-filter",
|
|
64
64
|
KEY: "mirageFilter",
|
|
65
|
-
VALUES:
|
|
66
|
-
},
|
|
65
|
+
VALUES: Ie
|
|
66
|
+
}, $ = {
|
|
67
67
|
NAME: "data-mirage-select",
|
|
68
68
|
KEY: "mirageSelect",
|
|
69
|
-
VALUES:
|
|
70
|
-
},
|
|
69
|
+
VALUES: Ie
|
|
70
|
+
}, Pe = {
|
|
71
71
|
NAME: "data-mirage-shader",
|
|
72
72
|
KEY: "mirageShader"
|
|
73
|
-
},
|
|
73
|
+
}, dt = {
|
|
74
74
|
NAME: "data-mirage-sandwich",
|
|
75
75
|
KEY: "mirageSandwich",
|
|
76
76
|
VALUES: {
|
|
77
77
|
FRONT: "front"
|
|
78
78
|
}
|
|
79
|
-
},
|
|
80
|
-
function
|
|
81
|
-
const e =
|
|
79
|
+
}, ge = 0, re = 1, ue = 2, We = 4, pe = 8, ye = 16;
|
|
80
|
+
function He(i) {
|
|
81
|
+
const e = i.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
|
|
82
82
|
return e ? {
|
|
83
83
|
r: parseInt(e[1]) / 255,
|
|
84
84
|
g: parseInt(e[2]) / 255,
|
|
85
|
-
b: parseInt(e[3]) / 255
|
|
86
|
-
|
|
85
|
+
b: parseInt(e[3]) / 255,
|
|
86
|
+
a: e[4] !== void 0 ? parseFloat(e[4]) : 1
|
|
87
|
+
} : { r: 1, g: 1, b: 1, a: 1 };
|
|
87
88
|
}
|
|
88
|
-
function
|
|
89
|
+
function Ge(i) {
|
|
89
90
|
const e = {};
|
|
90
|
-
if (
|
|
91
|
-
const t =
|
|
92
|
-
e.backgroundColor = [t.r, t.g, t.b];
|
|
91
|
+
if (i.opacity && (e.opacity = parseFloat(i.opacity)), i.backgroundColor) {
|
|
92
|
+
const t = He(i.backgroundColor);
|
|
93
|
+
e.backgroundColor = [t.r, t.g, t.b, t.a];
|
|
93
94
|
}
|
|
94
|
-
if (
|
|
95
|
-
const t = new DOMMatrix(
|
|
95
|
+
if (i.backgroundImage ? e.backgroundImage = i.backgroundImage : i.background && (e.backgroundImage = i.background), i.boxShadow && (e.boxShadow = i.boxShadow), i.borderRadius && (e.borderRadius = parseFloat(i.borderRadius)), i.width && (e.width = parseFloat(i.width)), i.height && (e.height = parseFloat(i.height)), i.transform && i.transform !== "none") {
|
|
96
|
+
const t = new DOMMatrix(i.transform);
|
|
96
97
|
e.x = t.m41, e.y = t.m42, e.z = t.m43;
|
|
97
98
|
}
|
|
98
99
|
return e;
|
|
99
100
|
}
|
|
100
|
-
class
|
|
101
|
+
class qe {
|
|
101
102
|
constructor(e, t) {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= re |
|
|
103
|
+
g(this, "target");
|
|
104
|
+
g(this, "observer");
|
|
105
|
+
g(this, "pendingDeletions", /* @__PURE__ */ new Set());
|
|
106
|
+
g(this, "pendingStyles", /* @__PURE__ */ new Map());
|
|
107
|
+
g(this, "isDomDirty", !1);
|
|
108
|
+
g(this, "isRunning", !1);
|
|
109
|
+
g(this, "pendingMask", ge);
|
|
110
|
+
g(this, "mutationTimer", null);
|
|
111
|
+
g(this, "cssTimer", null);
|
|
112
|
+
g(this, "resizeConfig");
|
|
113
|
+
g(this, "resizeTimer", null);
|
|
114
|
+
g(this, "isResizing", !1);
|
|
115
|
+
g(this, "lastScrollX", 0);
|
|
116
|
+
g(this, "lastScrollY", 0);
|
|
117
|
+
g(this, "scrollTimer", null);
|
|
118
|
+
g(this, "onBeforeRender", /* @__PURE__ */ new Set());
|
|
119
|
+
g(this, "onLayoutChange", /* @__PURE__ */ new Set());
|
|
120
|
+
g(this, "onStyleChange", /* @__PURE__ */ new Set());
|
|
121
|
+
g(this, "onScrollChange", /* @__PURE__ */ new Set());
|
|
122
|
+
g(this, "onRender", /* @__PURE__ */ new Set());
|
|
123
|
+
g(this, "onTransitionFinished", (e) => {
|
|
124
|
+
this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingStyles.size == 0 && (this.pendingMask |= re | ue, this.cssTimer = window.setTimeout(() => {
|
|
124
125
|
this.isDomDirty = !0, this.cssTimer = null;
|
|
125
126
|
}, 50)));
|
|
126
127
|
});
|
|
127
|
-
|
|
128
|
+
g(this, "onWindowResize", () => {
|
|
128
129
|
if (!this.resizeConfig.enabled) {
|
|
129
130
|
this.isDomDirty = !0;
|
|
130
131
|
return;
|
|
@@ -133,41 +134,41 @@ class He {
|
|
|
133
134
|
this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
|
|
134
135
|
}, this.resizeConfig.delay);
|
|
135
136
|
});
|
|
136
|
-
|
|
137
|
+
g(this, "renderLoop", () => {
|
|
137
138
|
if (!this.isRunning)
|
|
138
139
|
return;
|
|
139
|
-
this.onBeforeRender.forEach((
|
|
140
|
+
this.onBeforeRender.forEach((r) => r()), this.isDomDirty && (this.isDomDirty = !1, this.onLayoutChange.forEach((r) => r(this.pendingMask, this.pendingDeletions)), this.pendingDeletions.clear(), this.pendingMask = ge);
|
|
140
141
|
const e = window.scrollX, t = window.scrollY;
|
|
141
|
-
(e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((
|
|
142
|
+
(e !== this.lastScrollX || t !== this.lastScrollY) && (this.onScrollChange.forEach((r) => r(e, t)), this.lastScrollX = e, this.lastScrollY = t, this.scrollTimer && clearTimeout(this.scrollTimer), this.scrollTimer = window.setTimeout(() => {
|
|
142
143
|
this.pendingMask |= re, this.isDomDirty = !0, this.scrollTimer = null;
|
|
143
|
-
}, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((
|
|
144
|
+
}, 150)), this.pendingStyles.size > 0 && (this.onStyleChange.forEach((r) => r(this.pendingStyles)), this.pendingStyles.clear()), this.onRender.forEach((r) => r()), requestAnimationFrame(this.renderLoop);
|
|
144
145
|
});
|
|
145
|
-
var s,
|
|
146
|
+
var s, l;
|
|
146
147
|
this.target = e;
|
|
147
|
-
const
|
|
148
|
-
|
|
148
|
+
const r = (s = t.resizeDebounce) != null ? s : !0;
|
|
149
|
+
r === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : r === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
|
|
149
150
|
enabled: !0,
|
|
150
|
-
delay: (
|
|
151
|
-
onStart:
|
|
152
|
-
onEnd:
|
|
151
|
+
delay: (l = r.delay) != null ? l : 150,
|
|
152
|
+
onStart: r.onStart,
|
|
153
|
+
onEnd: r.onEnd
|
|
153
154
|
}, this.observer = new MutationObserver((o) => {
|
|
154
|
-
let
|
|
155
|
-
for (const
|
|
156
|
-
if (
|
|
157
|
-
|
|
158
|
-
|
|
155
|
+
let n = ge;
|
|
156
|
+
for (const c of o)
|
|
157
|
+
if (c.type === "childList")
|
|
158
|
+
n |= pe, c.removedNodes.length > 0 && c.removedNodes.forEach((a) => {
|
|
159
|
+
a instanceof HTMLElement && this.pendingDeletions.add(a);
|
|
159
160
|
});
|
|
160
|
-
else if (
|
|
161
|
-
if (
|
|
162
|
-
|
|
163
|
-
const
|
|
164
|
-
this.pendingStyles.set(
|
|
161
|
+
else if (c.type === "attributes")
|
|
162
|
+
if (c.attributeName === "style") {
|
|
163
|
+
n |= re | ue;
|
|
164
|
+
const a = c.target, u = Ge(a.style);
|
|
165
|
+
this.pendingStyles.set(a, u);
|
|
165
166
|
} else
|
|
166
|
-
|
|
167
|
+
c.attributeName === "class" ? n |= re | ue : c.attributeName && c.attributeName.startsWith("data-") && (n |= re | ue, c.attributeName.startsWith("data-mirage") && (n |= pe));
|
|
167
168
|
else
|
|
168
|
-
|
|
169
|
-
if (
|
|
170
|
-
if (this.pendingMask |=
|
|
169
|
+
c.type === "characterData" && (n |= ye | re);
|
|
170
|
+
if (n !== ge) {
|
|
171
|
+
if (this.pendingMask |= n, n & pe) {
|
|
171
172
|
this.clearTimers(), this.isDomDirty = !0;
|
|
172
173
|
return;
|
|
173
174
|
}
|
|
@@ -192,13 +193,13 @@ class He {
|
|
|
192
193
|
this.mutationTimer && (clearTimeout(this.mutationTimer), this.mutationTimer = null), this.cssTimer && (clearTimeout(this.cssTimer), this.cssTimer = null), this.scrollTimer && (clearTimeout(this.scrollTimer), this.scrollTimer = null);
|
|
193
194
|
}
|
|
194
195
|
}
|
|
195
|
-
const
|
|
196
|
+
const G = 1, ae = 2, ut = 0, F = {
|
|
196
197
|
BASE: 0,
|
|
197
198
|
SELECTED: 1,
|
|
198
|
-
getCaptureLayer: (
|
|
199
|
+
getCaptureLayer: (i) => 31 - i,
|
|
199
200
|
HIDDEN: 31
|
|
200
|
-
},
|
|
201
|
-
class
|
|
201
|
+
}, Me = Object.values(H.VALUES);
|
|
202
|
+
class ke {
|
|
202
203
|
/**
|
|
203
204
|
* Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
|
|
204
205
|
* @param font CSS font shorthand string (e.g., "400 16px Inter")
|
|
@@ -213,166 +214,166 @@ class Ae {
|
|
|
213
214
|
static calculateBaselineFromDOM(e) {
|
|
214
215
|
if (typeof document == "undefined")
|
|
215
216
|
return 0;
|
|
216
|
-
const t = document.createElement("div"),
|
|
217
|
-
t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none",
|
|
218
|
-
const
|
|
219
|
-
return document.body.removeChild(t),
|
|
217
|
+
const t = document.createElement("div"), r = document.createElement("span"), s = document.createElement("img");
|
|
218
|
+
t.style.visibility = "hidden", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.font = e, t.style.margin = "0", t.style.padding = "0", t.style.border = "none", r.style.margin = "0", r.style.padding = "0", r.style.border = "none", r.style.lineHeight = "normal", s.width = 1, s.height = 1, s.style.verticalAlign = "baseline", r.appendChild(document.createTextNode("Hidden Text")), t.appendChild(r), t.appendChild(s), document.body.appendChild(t);
|
|
219
|
+
const l = s.offsetTop - r.offsetTop;
|
|
220
|
+
return document.body.removeChild(t), l;
|
|
220
221
|
}
|
|
221
222
|
}
|
|
222
|
-
|
|
223
|
-
class
|
|
224
|
-
constructor(t,
|
|
223
|
+
g(ke, "cache", /* @__PURE__ */ new Map());
|
|
224
|
+
class $e extends w.MeshBasicMaterial {
|
|
225
|
+
constructor(t, r, s, l, o = 2) {
|
|
225
226
|
super({
|
|
226
227
|
transparent: !0,
|
|
227
228
|
side: w.FrontSide,
|
|
228
229
|
color: 16777215
|
|
229
230
|
});
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
231
|
+
g(this, "canvas");
|
|
232
|
+
g(this, "ctx");
|
|
233
|
+
g(this, "qualityFactor");
|
|
233
234
|
if (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), !this.ctx)
|
|
234
235
|
throw new Error("[Mirage] Failed to create canvas context");
|
|
235
|
-
this.qualityFactor = o, this.map = new w.CanvasTexture(this.canvas), this.map.colorSpace = w.LinearSRGBColorSpace, this.map.minFilter = w.LinearFilter, this.map.magFilter = w.LinearFilter, this.updateText(t,
|
|
236
|
+
this.qualityFactor = o, this.map = new w.CanvasTexture(this.canvas), this.map.colorSpace = w.LinearSRGBColorSpace, this.map.minFilter = w.LinearFilter, this.map.magFilter = w.LinearFilter, this.updateText(t, r, s, l);
|
|
236
237
|
}
|
|
237
|
-
wrapText(t,
|
|
238
|
+
wrapText(t, r) {
|
|
238
239
|
const s = t.split(`
|
|
239
|
-
`),
|
|
240
|
+
`), l = [];
|
|
240
241
|
return s.forEach((o) => {
|
|
241
|
-
const
|
|
242
|
-
if (
|
|
243
|
-
|
|
242
|
+
const n = o.match(/[^\s\-]+\-?|\-|\s+/g) || [];
|
|
243
|
+
if (n.length === 0) {
|
|
244
|
+
l.push("");
|
|
244
245
|
return;
|
|
245
246
|
}
|
|
246
|
-
let
|
|
247
|
-
for (let
|
|
248
|
-
const
|
|
249
|
-
this.ctx.measureText(
|
|
247
|
+
let c = n[0];
|
|
248
|
+
for (let a = 1; a < n.length; a++) {
|
|
249
|
+
const u = n[a];
|
|
250
|
+
this.ctx.measureText(c + u).width <= r + 2 ? c += u : (c && l.push(c), c = u.trimStart());
|
|
250
251
|
}
|
|
251
|
-
|
|
252
|
-
}),
|
|
252
|
+
c && l.push(c);
|
|
253
|
+
}), l;
|
|
253
254
|
}
|
|
254
|
-
updateText(t,
|
|
255
|
+
updateText(t, r, s, l, o) {
|
|
255
256
|
o !== void 0 && (this.qualityFactor = o);
|
|
256
|
-
const
|
|
257
|
-
this.canvas.width !==
|
|
258
|
-
const h = this.wrapText(t, s),
|
|
259
|
-
h.forEach((
|
|
260
|
-
const
|
|
261
|
-
let
|
|
262
|
-
|
|
257
|
+
const c = (window.devicePixelRatio || 1) * this.qualityFactor, a = s * c, u = l * c;
|
|
258
|
+
this.canvas.width !== a || this.canvas.height !== u ? (this.canvas.width = a, this.canvas.height = u) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(c, 0, 0, c, 0, 0), this.ctx.font = r.font, this.ctx.fillStyle = r.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
|
|
259
|
+
const h = this.wrapText(t, s), d = r.lineHeight, p = ke.getBaseline(r.font);
|
|
260
|
+
h.forEach((f, L) => {
|
|
261
|
+
const m = L * d + p;
|
|
262
|
+
let b = 0;
|
|
263
|
+
r.textAlign === "center" ? b = s / 2 : r.textAlign === "right" && (b = s), this.ctx.textAlign = r.textAlign, this.ctx.fillText(f, b, m);
|
|
263
264
|
}), this.map && (this.map.needsUpdate = !0);
|
|
264
265
|
}
|
|
265
266
|
dispose() {
|
|
266
267
|
this.map && this.map.dispose(), super.dispose();
|
|
267
268
|
}
|
|
268
269
|
}
|
|
269
|
-
function
|
|
270
|
-
if (typeof
|
|
271
|
-
return
|
|
272
|
-
const t = parseFloat(
|
|
273
|
-
return typeof
|
|
270
|
+
function ce(i, e = 0) {
|
|
271
|
+
if (typeof i == "number")
|
|
272
|
+
return i;
|
|
273
|
+
const t = parseFloat(i) || 0;
|
|
274
|
+
return typeof i == "string" && i.includes("%") ? t / 100 * e : t;
|
|
274
275
|
}
|
|
275
|
-
function le(
|
|
276
|
-
if (!
|
|
276
|
+
function le(i) {
|
|
277
|
+
if (!i || i === "transparent")
|
|
277
278
|
return { color: new w.Color(16777215), alpha: 0 };
|
|
278
|
-
const e =
|
|
279
|
+
const e = i.match(
|
|
279
280
|
/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
|
|
280
281
|
);
|
|
281
282
|
if (e) {
|
|
282
|
-
const t = parseInt(e[1], 10),
|
|
283
|
-
return { color: new w.Color(`rgb(${t}, ${
|
|
283
|
+
const t = parseInt(e[1], 10), r = parseInt(e[2], 10), s = parseInt(e[3], 10), l = e[4] !== void 0 ? parseFloat(e[4]) : 1;
|
|
284
|
+
return { color: new w.Color(`rgb(${t}, ${r}, ${s})`), alpha: l };
|
|
284
285
|
}
|
|
285
|
-
return { color: new w.Color(
|
|
286
|
+
return { color: new w.Color(i), alpha: 1 };
|
|
286
287
|
}
|
|
287
|
-
function
|
|
288
|
+
function Ue(i) {
|
|
288
289
|
const e = [];
|
|
289
|
-
let t = "",
|
|
290
|
-
for (let s = 0; s <
|
|
291
|
-
const
|
|
292
|
-
if (
|
|
293
|
-
|
|
294
|
-
else if (
|
|
295
|
-
|
|
296
|
-
else if (
|
|
290
|
+
let t = "", r = 0;
|
|
291
|
+
for (let s = 0; s < i.length; s++) {
|
|
292
|
+
const l = i[s];
|
|
293
|
+
if (l === "(")
|
|
294
|
+
r++;
|
|
295
|
+
else if (l === ")")
|
|
296
|
+
r--;
|
|
297
|
+
else if (l === "," && r === 0) {
|
|
297
298
|
e.push(t.trim()), t = "";
|
|
298
299
|
continue;
|
|
299
300
|
}
|
|
300
|
-
t +=
|
|
301
|
+
t += l;
|
|
301
302
|
}
|
|
302
303
|
return t && e.push(t.trim()), e;
|
|
303
304
|
}
|
|
304
|
-
function
|
|
305
|
-
if (!
|
|
305
|
+
function je(i) {
|
|
306
|
+
if (!i || typeof i != "string" || !i.includes("linear-gradient"))
|
|
306
307
|
return null;
|
|
307
|
-
const e =
|
|
308
|
+
const e = i.match(/linear-gradient\((.*)\)/);
|
|
308
309
|
if (!e)
|
|
309
310
|
return null;
|
|
310
|
-
const t = e[1],
|
|
311
|
-
let s = Math.PI,
|
|
312
|
-
const o =
|
|
311
|
+
const t = e[1], r = Ue(t);
|
|
312
|
+
let s = Math.PI, l = 0;
|
|
313
|
+
const o = r[0].trim();
|
|
313
314
|
if (o.startsWith("to "))
|
|
314
|
-
o === "to top" ? s = 0 : o === "to right" ? s = Math.PI / 2 : o === "to bottom" ? s = Math.PI : o === "to left" ? s = Math.PI * 1.5 : o === "to top right" || o === "to right top" ? s = Math.PI / 4 : o === "to bottom right" || o === "to right bottom" ? s = Math.PI * 0.75 : o === "to bottom left" || o === "to left bottom" ? s = Math.PI * 1.25 : (o === "to top left" || o === "to left top") && (s = Math.PI * 1.75),
|
|
315
|
+
o === "to top" ? s = 0 : o === "to right" ? s = Math.PI / 2 : o === "to bottom" ? s = Math.PI : o === "to left" ? s = Math.PI * 1.5 : o === "to top right" || o === "to right top" ? s = Math.PI / 4 : o === "to bottom right" || o === "to right bottom" ? s = Math.PI * 0.75 : o === "to bottom left" || o === "to left bottom" ? s = Math.PI * 1.25 : (o === "to top left" || o === "to left top") && (s = Math.PI * 1.75), l = 1;
|
|
315
316
|
else if (o.endsWith("deg") || o.endsWith("rad") || o.endsWith("turn")) {
|
|
316
|
-
const
|
|
317
|
-
o.endsWith("deg") ? s =
|
|
318
|
-
}
|
|
319
|
-
const
|
|
320
|
-
for (let
|
|
321
|
-
const
|
|
322
|
-
let h =
|
|
323
|
-
if (
|
|
324
|
-
const
|
|
325
|
-
(
|
|
317
|
+
const c = parseFloat(o);
|
|
318
|
+
o.endsWith("deg") ? s = c * (Math.PI / 180) : o.endsWith("rad") ? s = c : o.endsWith("turn") && (s = c * Math.PI * 2), l = 1;
|
|
319
|
+
}
|
|
320
|
+
const n = [];
|
|
321
|
+
for (let c = l; c < r.length && !(n.length >= 8); c++) {
|
|
322
|
+
const a = r[c].trim(), u = a.lastIndexOf(" ");
|
|
323
|
+
let h = a, d = null;
|
|
324
|
+
if (u !== -1 && !a.endsWith(")")) {
|
|
325
|
+
const f = a.substring(u + 1);
|
|
326
|
+
(f.endsWith("%") || f.endsWith("px") || !isNaN(parseFloat(f))) && (h = a.substring(0, u).trim(), d = f);
|
|
326
327
|
}
|
|
327
|
-
const
|
|
328
|
-
|
|
329
|
-
color:
|
|
330
|
-
alpha:
|
|
331
|
-
rawStop:
|
|
328
|
+
const p = le(h);
|
|
329
|
+
n.push({
|
|
330
|
+
color: p.color,
|
|
331
|
+
alpha: p.alpha,
|
|
332
|
+
rawStop: d,
|
|
332
333
|
stop: 0
|
|
333
334
|
});
|
|
334
335
|
}
|
|
335
|
-
if (
|
|
336
|
-
for (let
|
|
337
|
-
a
|
|
338
|
-
|
|
339
|
-
let
|
|
340
|
-
for (let
|
|
341
|
-
if (a
|
|
342
|
-
const
|
|
343
|
-
if (
|
|
344
|
-
const h =
|
|
345
|
-
for (let
|
|
346
|
-
|
|
336
|
+
if (n.length > 0) {
|
|
337
|
+
for (let a = 0; a < n.length; a++)
|
|
338
|
+
n[a].rawStop !== null && (n[a].stop = parseFloat(n[a].rawStop) / 100);
|
|
339
|
+
n[0].rawStop === null && (n[0].stop = 0), n.length > 1 && n[n.length - 1].rawStop === null && (n[n.length - 1].stop = 1);
|
|
340
|
+
let c = 0;
|
|
341
|
+
for (let a = 1; a < n.length; a++)
|
|
342
|
+
if (n[a].rawStop !== null || a === n.length - 1) {
|
|
343
|
+
const u = a - c;
|
|
344
|
+
if (u > 1) {
|
|
345
|
+
const h = n[c].stop, p = (n[a].stop - h) / u;
|
|
346
|
+
for (let f = 1; f < u; f++)
|
|
347
|
+
n[c + f].stop = h + p * f;
|
|
347
348
|
}
|
|
348
|
-
|
|
349
|
+
c = a;
|
|
349
350
|
}
|
|
350
351
|
}
|
|
351
|
-
return { angle: s, stops:
|
|
352
|
+
return { angle: s, stops: n };
|
|
352
353
|
}
|
|
353
|
-
function
|
|
354
|
-
if (!
|
|
354
|
+
function Ke(i) {
|
|
355
|
+
if (!i || i === "none")
|
|
355
356
|
return null;
|
|
356
|
-
const e =
|
|
357
|
+
const e = Ue(i);
|
|
357
358
|
if (e.length === 0)
|
|
358
359
|
return null;
|
|
359
|
-
const t = e[0].trim(),
|
|
360
|
-
let
|
|
360
|
+
const t = e[0].trim(), r = /(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/, s = t.match(r);
|
|
361
|
+
let l = "transparent", o = t;
|
|
361
362
|
if (s && s[1] !== "inset") {
|
|
362
|
-
const
|
|
363
|
-
(
|
|
363
|
+
const p = s[1];
|
|
364
|
+
(p.startsWith("rgb") || p.startsWith("#") || p === "black" || p === "white" || p === "transparent") && (l = p, o = t.replace(p, "").trim());
|
|
364
365
|
}
|
|
365
366
|
o = o.replace("inset", "").trim();
|
|
366
|
-
const
|
|
367
|
-
return { offsetX:
|
|
367
|
+
const n = o.split(/\s+/).map((p) => parseFloat(p) || 0), c = n[0] || 0, a = n[1] || 0, u = n[2] || 0, h = n[3] || 0, d = le(l);
|
|
368
|
+
return { offsetX: c, offsetY: a, blurRadius: u, spreadRadius: h, color: d.color, alpha: d.alpha };
|
|
368
369
|
}
|
|
369
|
-
const
|
|
370
|
+
const Je = `varying vec2 vUv;
|
|
370
371
|
varying vec4 vScreenPos;
|
|
371
372
|
void main() {
|
|
372
373
|
vUv = uv;
|
|
373
374
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
374
375
|
vScreenPos = gl_Position;
|
|
375
|
-
}`,
|
|
376
|
+
}`, Ze = `varying vec2 vUv;
|
|
376
377
|
uniform vec2 uSize;
|
|
377
378
|
uniform vec2 uMeshSize;
|
|
378
379
|
uniform vec4 uShadowColor;
|
|
@@ -531,40 +532,40 @@ void main() {
|
|
|
531
532
|
|
|
532
533
|
// #include <colorspace_fragment>
|
|
533
534
|
}
|
|
534
|
-
`,
|
|
535
|
+
`, Qe = `uniform sampler2D uTexture;
|
|
535
536
|
varying vec4 vScreenPos;
|
|
536
537
|
uniform vec2 uTextureRepeat;
|
|
537
|
-
uniform vec2 uTextureOffset;`,
|
|
538
|
+
uniform vec2 uTextureOffset;`, et = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
|
|
538
539
|
vec2 resultUv = screenUv;
|
|
539
540
|
|
|
540
|
-
`,
|
|
541
|
-
baseColor = blendSrcOver(baseColor, texColor);`,
|
|
542
|
-
vertexShader:
|
|
543
|
-
fragmentShader:
|
|
544
|
-
},
|
|
545
|
-
declChunk:
|
|
546
|
-
uvChunk:
|
|
547
|
-
baseColorChunk:
|
|
541
|
+
`, tt = `vec4 texColor = texture2D(uTexture, resultUv);
|
|
542
|
+
baseColor = blendSrcOver(baseColor, texColor);`, Le = {
|
|
543
|
+
vertexShader: Je,
|
|
544
|
+
fragmentShader: Ze
|
|
545
|
+
}, De = {
|
|
546
|
+
declChunk: Qe,
|
|
547
|
+
uvChunk: et,
|
|
548
|
+
baseColorChunk: tt
|
|
548
549
|
};
|
|
549
|
-
function
|
|
550
|
-
var
|
|
551
|
-
const
|
|
550
|
+
function rt(i, e, t, r = null, s) {
|
|
551
|
+
var C;
|
|
552
|
+
const l = r !== null || !!i.imageSrc;
|
|
552
553
|
let o = "";
|
|
553
|
-
const
|
|
554
|
+
const n = {};
|
|
554
555
|
if (s != null && s.uniforms)
|
|
555
|
-
for (const [
|
|
556
|
-
typeof
|
|
557
|
-
`,
|
|
558
|
-
`,
|
|
559
|
-
`,
|
|
560
|
-
`,
|
|
561
|
-
`,
|
|
562
|
-
const
|
|
563
|
-
` + o,
|
|
564
|
-
`, h =
|
|
556
|
+
for (const [y, S] of Object.entries(s.uniforms))
|
|
557
|
+
typeof S == "number" ? (o += `uniform float ${y};
|
|
558
|
+
`, n[y] = { value: S }) : Array.isArray(S) ? S.length === 2 ? (o += `uniform vec2 ${y};
|
|
559
|
+
`, n[y] = { value: new w.Vector2(...S) }) : S.length === 3 ? (o += `uniform vec3 ${y};
|
|
560
|
+
`, n[y] = { value: new w.Vector3(...S) }) : S.length === 4 && (o += `uniform vec4 ${y};
|
|
561
|
+
`, n[y] = { value: new w.Vector4(...S) }) : (o += `uniform float ${y};
|
|
562
|
+
`, n[y] = { value: S });
|
|
563
|
+
const c = s !== void 0, a = (l || c ? De.declChunk : "") + `
|
|
564
|
+
` + o, u = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
|
|
565
|
+
`, h = i.isTraveler ? `vec2 resultUv = screenUv;
|
|
565
566
|
` : `vec2 localUv = (p / uSize) + 0.5;
|
|
566
567
|
vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
|
|
567
|
-
`,
|
|
568
|
+
`, d = l || c ? u + h + ((s == null ? void 0 : s.uvModifier) || "") : "", p = l || c ? De.baseColorChunk : "", f = (s == null ? void 0 : s.colorModifier) || "", L = Le.fragmentShader.replace("#INJECT_DECLARATIONS", a).replace("#INJECT_UV_MODIFIER", d).replace("#INJECT_BASE_COLOR", p).replace("#INJECT_COLOR_MODIFIER", f), m = le(i.backgroundColor), b = le(i.borderColor), E = {
|
|
568
569
|
uSize: { value: new w.Vector2(e, t) },
|
|
569
570
|
uMeshSize: { value: new w.Vector2(e, t) },
|
|
570
571
|
uShadowColor: { value: new w.Vector4(0, 0, 0, 0) },
|
|
@@ -573,23 +574,23 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
|
|
|
573
574
|
uShadowSpread: { value: 0 },
|
|
574
575
|
uBgColor: {
|
|
575
576
|
value: new w.Vector4(
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
577
|
+
m.color.r,
|
|
578
|
+
m.color.g,
|
|
579
|
+
m.color.b,
|
|
580
|
+
m.alpha
|
|
580
581
|
)
|
|
581
582
|
},
|
|
582
583
|
uBorderColor: {
|
|
583
584
|
value: new w.Vector4(
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
585
|
+
b.color.r,
|
|
586
|
+
b.color.g,
|
|
587
|
+
b.color.b,
|
|
588
|
+
b.alpha
|
|
588
589
|
)
|
|
589
590
|
},
|
|
590
591
|
uBorderRadius: { value: new w.Vector4(0, 0, 0, 0) },
|
|
591
|
-
uBorderWidth: { value:
|
|
592
|
-
uOpacity: { value: (
|
|
592
|
+
uBorderWidth: { value: ce(i.borderWidth) },
|
|
593
|
+
uOpacity: { value: (C = i.opacity) != null ? C : 1 },
|
|
593
594
|
uTexture: { value: null },
|
|
594
595
|
uTextureRepeat: { value: new w.Vector2(1, 1) },
|
|
595
596
|
uTextureOffset: { value: new w.Vector2(0, 0) },
|
|
@@ -600,24 +601,24 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
|
|
|
600
601
|
},
|
|
601
602
|
uGradientStops: { value: new Float32Array(8) }
|
|
602
603
|
};
|
|
603
|
-
|
|
604
|
-
const
|
|
605
|
-
uniforms: te(te({},
|
|
606
|
-
vertexShader:
|
|
607
|
-
fragmentShader:
|
|
604
|
+
Be(E.uBorderRadius.value, i.borderRadius, Math.min(e, t)), l && (E.uTexture.value = r);
|
|
605
|
+
const A = new w.ShaderMaterial({
|
|
606
|
+
uniforms: te(te({}, E), n),
|
|
607
|
+
vertexShader: Le.vertexShader,
|
|
608
|
+
fragmentShader: L,
|
|
608
609
|
transparent: !0,
|
|
609
610
|
side: w.FrontSide
|
|
610
611
|
// for better performance
|
|
611
612
|
});
|
|
612
|
-
return
|
|
613
|
+
return i.backgroundImage && xe(A, { backgroundImage: i.backgroundImage }), A;
|
|
613
614
|
}
|
|
614
|
-
function
|
|
615
|
-
const
|
|
616
|
-
|
|
615
|
+
function it(i, e, t, r, s) {
|
|
616
|
+
const l = ce(e.borderWidth);
|
|
617
|
+
xe(i, {
|
|
617
618
|
width: t,
|
|
618
|
-
height:
|
|
619
|
+
height: r,
|
|
619
620
|
borderRadius: e.borderRadius,
|
|
620
|
-
borderWidth:
|
|
621
|
+
borderWidth: l,
|
|
621
622
|
backgroundColor: e.backgroundColor,
|
|
622
623
|
borderColor: e.borderColor,
|
|
623
624
|
opacity: e.opacity,
|
|
@@ -626,24 +627,24 @@ function tt(r, e, t, i, s) {
|
|
|
626
627
|
boxShadow: e.boxShadow
|
|
627
628
|
});
|
|
628
629
|
}
|
|
629
|
-
function
|
|
630
|
-
var
|
|
630
|
+
function xe(i, e) {
|
|
631
|
+
var r, s, l;
|
|
631
632
|
if (e.boxShadow !== void 0) {
|
|
632
|
-
const o =
|
|
633
|
-
o ? (
|
|
633
|
+
const o = Ke(e.boxShadow);
|
|
634
|
+
o ? (i.uniforms.uShadowColor.value.set(o.color.r, o.color.g, o.color.b, o.alpha), i.uniforms.uShadowOffset.value.set(o.offsetX, o.offsetY), i.uniforms.uShadowBlur.value = o.blurRadius, i.uniforms.uShadowSpread.value = o.spreadRadius, i.userData.shadowPadding = o.blurRadius + o.spreadRadius + Math.max(Math.abs(o.offsetX), Math.abs(o.offsetY))) : (i.uniforms.uShadowColor.value.w = 0, i.userData.shadowPadding = 0);
|
|
634
635
|
}
|
|
635
|
-
if (e.width !== void 0 && e.height !== void 0 &&
|
|
636
|
-
const o =
|
|
637
|
-
|
|
636
|
+
if (e.width !== void 0 && e.height !== void 0 && i.uniforms.uSize.value.set(e.width, e.height), i.uniforms.uMeshSize) {
|
|
637
|
+
const o = i.userData.shadowPadding || 0, n = e.width !== void 0 ? e.width : i.uniforms.uSize.value.x, c = e.height !== void 0 ? e.height : i.uniforms.uSize.value.y;
|
|
638
|
+
i.uniforms.uMeshSize.value.set(n + o * 2, c + o * 2);
|
|
638
639
|
}
|
|
639
640
|
if (e.borderRadius !== void 0) {
|
|
640
|
-
const o = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(
|
|
641
|
-
|
|
641
|
+
const o = e.width !== void 0 && e.height !== void 0 ? Math.min(e.width, e.height) : Math.min(i.uniforms.uSize.value.x, i.uniforms.uSize.value.y);
|
|
642
|
+
Be(i.uniforms.uBorderRadius.value, e.borderRadius, o);
|
|
642
643
|
}
|
|
643
|
-
if (e.borderWidth !== void 0 && (
|
|
644
|
+
if (e.borderWidth !== void 0 && (i.uniforms.uBorderWidth.value = e.borderWidth), e.backgroundColor !== void 0)
|
|
644
645
|
if (Array.isArray(e.backgroundColor)) {
|
|
645
|
-
const o =
|
|
646
|
-
|
|
646
|
+
const o = e.backgroundColor[3] !== void 0 ? e.backgroundColor[3] : i.uniforms.uBgColor.value.w;
|
|
647
|
+
i.uniforms.uBgColor.value.set(
|
|
647
648
|
e.backgroundColor[0],
|
|
648
649
|
e.backgroundColor[1],
|
|
649
650
|
e.backgroundColor[2],
|
|
@@ -651,15 +652,15 @@ function be(r, e) {
|
|
|
651
652
|
);
|
|
652
653
|
} else if (typeof e.backgroundColor == "string") {
|
|
653
654
|
const o = le(e.backgroundColor);
|
|
654
|
-
|
|
655
|
+
i.uniforms.uBgColor.value.set(
|
|
655
656
|
o.color.r,
|
|
656
657
|
o.color.g,
|
|
657
658
|
o.color.b,
|
|
658
659
|
o.alpha
|
|
659
660
|
);
|
|
660
661
|
} else {
|
|
661
|
-
const o =
|
|
662
|
-
|
|
662
|
+
const o = i.uniforms.uBgColor.value.w;
|
|
663
|
+
i.uniforms.uBgColor.value.set(
|
|
663
664
|
e.backgroundColor.r,
|
|
664
665
|
e.backgroundColor.g,
|
|
665
666
|
e.backgroundColor.b,
|
|
@@ -668,8 +669,8 @@ function be(r, e) {
|
|
|
668
669
|
}
|
|
669
670
|
if (e.borderColor !== void 0)
|
|
670
671
|
if (Array.isArray(e.borderColor)) {
|
|
671
|
-
const o =
|
|
672
|
-
|
|
672
|
+
const o = i.uniforms.uBorderColor.value.w;
|
|
673
|
+
i.uniforms.uBorderColor.value.set(
|
|
673
674
|
e.borderColor[0],
|
|
674
675
|
e.borderColor[1],
|
|
675
676
|
e.borderColor[2],
|
|
@@ -677,122 +678,122 @@ function be(r, e) {
|
|
|
677
678
|
);
|
|
678
679
|
} else if (typeof e.borderColor == "string") {
|
|
679
680
|
const o = le(e.borderColor);
|
|
680
|
-
|
|
681
|
+
i.uniforms.uBorderColor.value.set(
|
|
681
682
|
o.color.r,
|
|
682
683
|
o.color.g,
|
|
683
684
|
o.color.b,
|
|
684
685
|
o.alpha
|
|
685
686
|
);
|
|
686
687
|
} else {
|
|
687
|
-
const o =
|
|
688
|
-
|
|
688
|
+
const o = i.uniforms.uBorderColor.value.w;
|
|
689
|
+
i.uniforms.uBorderColor.value.set(
|
|
689
690
|
e.borderColor.r,
|
|
690
691
|
e.borderColor.g,
|
|
691
692
|
e.borderColor.b,
|
|
692
693
|
o
|
|
693
694
|
);
|
|
694
695
|
}
|
|
695
|
-
e.opacity !== void 0 && (
|
|
696
|
-
const t = e.texture !== void 0 ? e.texture : (
|
|
696
|
+
e.opacity !== void 0 && (i.uniforms.uOpacity.value = e.opacity), e.bgOpacity !== void 0 && (i.uniforms.uBgColor.value.w = e.bgOpacity), e.borderOpacity !== void 0 && (i.uniforms.uBorderColor.value.w = e.borderOpacity), i.uniforms.uTexture && e.texture !== void 0 && (i.uniforms.uTexture.value = e.texture);
|
|
697
|
+
const t = e.texture !== void 0 ? e.texture : (r = i.uniforms.uTexture) == null ? void 0 : r.value;
|
|
697
698
|
if (t && (t.image instanceof ImageBitmap || t.image instanceof HTMLImageElement || t.image instanceof HTMLCanvasElement)) {
|
|
698
|
-
const o = t.image.naturalWidth || t.image.videoWidth || t.image.width,
|
|
699
|
-
if (o &&
|
|
700
|
-
const
|
|
701
|
-
if (
|
|
702
|
-
const
|
|
703
|
-
|
|
699
|
+
const o = t.image.naturalWidth || t.image.videoWidth || t.image.width, n = t.image.naturalHeight || t.image.videoHeight || t.image.height, c = (s = e.width) != null ? s : i.uniforms.uSize.value.x, a = (l = e.height) != null ? l : i.uniforms.uSize.value.y;
|
|
700
|
+
if (o && n && c && a) {
|
|
701
|
+
const u = o / n, h = c / a;
|
|
702
|
+
if (u > h) {
|
|
703
|
+
const d = h / u;
|
|
704
|
+
i.uniforms.uTextureRepeat.value.set(d, 1), i.uniforms.uTextureOffset.value.set((1 - d) / 2, 0);
|
|
704
705
|
} else {
|
|
705
|
-
const
|
|
706
|
-
|
|
706
|
+
const d = u / h;
|
|
707
|
+
i.uniforms.uTextureRepeat.value.set(1, d), i.uniforms.uTextureOffset.value.set(0, (1 - d) / 2);
|
|
707
708
|
}
|
|
708
709
|
}
|
|
709
710
|
} else
|
|
710
|
-
|
|
711
|
+
i.uniforms.uTextureRepeat && (i.uniforms.uTextureRepeat.value.set(1, 1), i.uniforms.uTextureOffset.value.set(0, 0));
|
|
711
712
|
if (e.backgroundImage !== void 0) {
|
|
712
|
-
const o =
|
|
713
|
+
const o = je(e.backgroundImage);
|
|
713
714
|
if (o) {
|
|
714
|
-
|
|
715
|
-
for (let
|
|
716
|
-
if (
|
|
717
|
-
const
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
),
|
|
715
|
+
i.uniforms.uGradientCount.value = o.stops.length, i.uniforms.uGradientAngle.value = o.angle;
|
|
716
|
+
for (let n = 0; n < 8; n++)
|
|
717
|
+
if (n < o.stops.length) {
|
|
718
|
+
const c = o.stops[n];
|
|
719
|
+
i.uniforms.uGradientColors.value[n].set(
|
|
720
|
+
c.color.r,
|
|
721
|
+
c.color.g,
|
|
722
|
+
c.color.b,
|
|
723
|
+
c.alpha
|
|
724
|
+
), i.uniforms.uGradientStops.value[n] = c.stop;
|
|
724
725
|
} else
|
|
725
|
-
|
|
726
|
+
i.uniforms.uGradientColors.value[n].set(0, 0, 0, 0), i.uniforms.uGradientStops.value[n] = 1;
|
|
726
727
|
} else
|
|
727
|
-
|
|
728
|
+
i.uniforms.uGradientCount.value = 0;
|
|
728
729
|
}
|
|
729
730
|
for (const o of Object.keys(e))
|
|
730
|
-
o !== "width" && o !== "height" && o !== "borderRadius" && o !== "borderWidth" && o !== "backgroundColor" && o !== "borderColor" && o !== "opacity" && o !== "bgOpacity" && o !== "borderOpacity" && o !== "texture" && o !== "backgroundImage" && o !== "boxShadow" &&
|
|
731
|
+
o !== "width" && o !== "height" && o !== "borderRadius" && o !== "borderWidth" && o !== "backgroundColor" && o !== "borderColor" && o !== "opacity" && o !== "bgOpacity" && o !== "borderOpacity" && o !== "texture" && o !== "backgroundImage" && o !== "boxShadow" && i.uniforms[o] !== void 0 && (i.uniforms[o].value !== void 0 && i.uniforms[o].value !== null && typeof i.uniforms[o].value.set == "function" ? Array.isArray(e[o]) ? i.uniforms[o].value.set(...e[o]) : e[o] !== void 0 && (e[o].copy ? i.uniforms[o].value.copy(e[o]) : i.uniforms[o].value = e[o]) : i.uniforms[o].value = e[o]);
|
|
731
732
|
}
|
|
732
|
-
function
|
|
733
|
-
var
|
|
733
|
+
function Be(i, e, t = 0) {
|
|
734
|
+
var c, a, u, h;
|
|
734
735
|
if (e == null) {
|
|
735
|
-
|
|
736
|
+
i.set(0, 0, 0, 0);
|
|
736
737
|
return;
|
|
737
738
|
}
|
|
738
739
|
if (typeof e == "number") {
|
|
739
|
-
|
|
740
|
+
i.set(e, e, e, e);
|
|
740
741
|
return;
|
|
741
742
|
}
|
|
742
743
|
if (Array.isArray(e)) {
|
|
743
|
-
|
|
744
|
+
i.set(e[0], e[1], e[2], e[3]);
|
|
744
745
|
return;
|
|
745
746
|
}
|
|
746
|
-
const
|
|
747
|
-
|
|
747
|
+
const r = e.split("/")[0].trim().split(/\s+/), s = ce(r[0], t), l = ce((c = r[1]) != null ? c : r[0], t), o = ce((a = r[2]) != null ? a : r[0], t), n = ce((h = (u = r[3]) != null ? u : r[1]) != null ? h : r[0], t);
|
|
748
|
+
i.set(s, l, o, n);
|
|
748
749
|
}
|
|
749
|
-
const
|
|
750
|
-
create(
|
|
751
|
-
return
|
|
750
|
+
const P = {
|
|
751
|
+
create(i, e, t, r, s, l = 2, o = null, n) {
|
|
752
|
+
return i === "BOX" ? rt(
|
|
752
753
|
e,
|
|
753
|
-
|
|
754
|
+
r,
|
|
754
755
|
s,
|
|
755
756
|
o,
|
|
756
|
-
|
|
757
|
-
) :
|
|
757
|
+
n
|
|
758
|
+
) : i === "TEXT" ? new $e(
|
|
758
759
|
t || "",
|
|
759
760
|
e,
|
|
760
|
-
|
|
761
|
+
r,
|
|
761
762
|
s,
|
|
762
|
-
|
|
763
|
+
l
|
|
763
764
|
) : new w.MeshBasicMaterial({ visible: !1 });
|
|
764
765
|
},
|
|
765
|
-
update(
|
|
766
|
-
e === "BOX" ?
|
|
767
|
-
|
|
766
|
+
update(i, e, t, r, s, l, o = 2, n) {
|
|
767
|
+
e === "BOX" ? it(
|
|
768
|
+
i,
|
|
768
769
|
t,
|
|
769
770
|
s,
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
) : e === "TEXT" &&
|
|
773
|
-
|
|
771
|
+
l,
|
|
772
|
+
n
|
|
773
|
+
) : e === "TEXT" && i.updateText(
|
|
774
|
+
r || "",
|
|
774
775
|
t,
|
|
775
776
|
s,
|
|
776
|
-
|
|
777
|
+
l,
|
|
777
778
|
o
|
|
778
779
|
);
|
|
779
780
|
},
|
|
780
|
-
forceUpdateUniforms(
|
|
781
|
-
|
|
781
|
+
forceUpdateUniforms(i, e) {
|
|
782
|
+
xe(i, e);
|
|
782
783
|
}
|
|
783
784
|
};
|
|
784
|
-
class
|
|
785
|
+
class st {
|
|
785
786
|
constructor(e, t = !0) {
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
787
|
+
g(this, "observer");
|
|
788
|
+
g(this, "textures", /* @__PURE__ */ new WeakMap());
|
|
789
|
+
g(this, "loadStatus", /* @__PURE__ */ new WeakMap());
|
|
790
|
+
g(this, "elementUrls", /* @__PURE__ */ new WeakMap());
|
|
791
|
+
g(this, "onUpdate");
|
|
791
792
|
this.onUpdate = e, t && (this.observer = new IntersectionObserver(
|
|
792
|
-
(
|
|
793
|
-
for (const s of
|
|
794
|
-
const
|
|
795
|
-
s.isIntersecting ? this.loadTexture(
|
|
793
|
+
(r) => {
|
|
794
|
+
for (const s of r) {
|
|
795
|
+
const l = s.target;
|
|
796
|
+
s.isIntersecting ? this.loadTexture(l) : this.disposeTexture(l);
|
|
796
797
|
}
|
|
797
798
|
},
|
|
798
799
|
{ rootMargin: "300px" }
|
|
@@ -807,31 +808,31 @@ class rt {
|
|
|
807
808
|
e.nodeType === Node.ELEMENT_NODE && this.observer && this.observer.unobserve(e), this.disposeTexture(e), this.elementUrls.delete(e), this.loadStatus.delete(e);
|
|
808
809
|
}
|
|
809
810
|
loadTexture(e) {
|
|
810
|
-
return
|
|
811
|
+
return Te(this, null, function* () {
|
|
811
812
|
if (this.loadStatus.get(e) || this.textures.has(e))
|
|
812
813
|
return;
|
|
813
814
|
const t = this.elementUrls.get(e);
|
|
814
815
|
if (t) {
|
|
815
816
|
this.loadStatus.set(e, !0);
|
|
816
817
|
try {
|
|
817
|
-
let
|
|
818
|
+
let r;
|
|
818
819
|
if (t.startsWith("data:image/svg+xml"))
|
|
819
|
-
|
|
820
|
-
const
|
|
821
|
-
|
|
820
|
+
r = yield new Promise((l, o) => {
|
|
821
|
+
const n = new Image();
|
|
822
|
+
n.onload = () => l(n), n.onerror = o, n.src = t;
|
|
822
823
|
});
|
|
823
824
|
else {
|
|
824
825
|
const o = yield (yield fetch(t)).blob();
|
|
825
|
-
|
|
826
|
+
r = yield createImageBitmap(o, { imageOrientation: "flipY" });
|
|
826
827
|
}
|
|
827
828
|
if (this.elementUrls.get(e) !== t) {
|
|
828
|
-
"close" in
|
|
829
|
+
"close" in r && r.close();
|
|
829
830
|
return;
|
|
830
831
|
}
|
|
831
|
-
const s = new w.Texture(
|
|
832
|
-
|
|
833
|
-
} catch (
|
|
834
|
-
console.warn("[MirageEngine] Failed to load texture:", t,
|
|
832
|
+
const s = new w.Texture(r);
|
|
833
|
+
r instanceof HTMLImageElement || (s.flipY = !1), s.colorSpace = w.LinearSRGBColorSpace, s.needsUpdate = !0, this.textures.set(e, s), this.onUpdate(e, s);
|
|
834
|
+
} catch (r) {
|
|
835
|
+
console.warn("[MirageEngine] Failed to load texture:", t, r);
|
|
835
836
|
} finally {
|
|
836
837
|
this.elementUrls.has(e) && this.loadStatus.set(e, !1);
|
|
837
838
|
}
|
|
@@ -849,40 +850,40 @@ class rt {
|
|
|
849
850
|
this.observer && this.observer.disconnect();
|
|
850
851
|
}
|
|
851
852
|
}
|
|
852
|
-
class
|
|
853
|
-
constructor(e, t,
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
{ length:
|
|
853
|
+
class ot {
|
|
854
|
+
constructor(e, t, r, s) {
|
|
855
|
+
g(this, "canvas");
|
|
856
|
+
g(this, "scene");
|
|
857
|
+
g(this, "camera");
|
|
858
|
+
g(this, "renderer");
|
|
859
|
+
g(this, "renderTargets", []);
|
|
860
|
+
g(this, "renderOrder", 0);
|
|
861
|
+
g(this, "qualityFactor", 2);
|
|
862
|
+
g(this, "mode", "overlay");
|
|
863
|
+
g(this, "canvasSize", "viewport");
|
|
864
|
+
g(this, "clipArea", 1);
|
|
865
|
+
g(this, "targetLayer", "base");
|
|
866
|
+
g(this, "overscan", 200);
|
|
867
|
+
g(this, "target");
|
|
868
|
+
g(this, "mountContainer");
|
|
869
|
+
g(this, "registry");
|
|
870
|
+
g(this, "targetRect");
|
|
871
|
+
g(this, "travelersByLayer", Array.from(
|
|
872
|
+
{ length: N.MAX_LAYERS },
|
|
872
873
|
() => /* @__PURE__ */ new Set()
|
|
873
874
|
));
|
|
874
|
-
|
|
875
|
+
g(this, "textureManager");
|
|
875
876
|
// private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
|
|
876
|
-
|
|
877
|
-
var
|
|
878
|
-
this.target = e, this.mountContainer =
|
|
879
|
-
const
|
|
880
|
-
|
|
877
|
+
g(this, "fixedMeshes", /* @__PURE__ */ new Set());
|
|
878
|
+
var n, c, a, u, h;
|
|
879
|
+
this.target = e, this.mountContainer = r, this.registry = s, this.mode = (n = t.mode) != null ? n : "overlay", this.canvasSize = (c = t.canvasSize) != null ? c : "viewport", this.clipArea = (a = t.travelerClipArea) != null ? a : 1, this.targetLayer = (u = t.layer) != null ? u : "base", this.textureManager = new st((d, p) => {
|
|
880
|
+
const f = this.registry.get(d);
|
|
881
|
+
f && f.material instanceof w.ShaderMaterial && P.forceUpdateUniforms(f.material, { texture: p });
|
|
881
882
|
}, this.isViewport), this.canvas = document.createElement("canvas"), this.scene = new w.Scene(), this.targetRect = this.target.getBoundingClientRect();
|
|
882
|
-
const
|
|
883
|
+
const l = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, o = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
|
|
883
884
|
this.camera = new w.OrthographicCamera(
|
|
884
|
-
|
|
885
|
-
|
|
885
|
+
l / -2,
|
|
886
|
+
l / 2,
|
|
886
887
|
o / 2,
|
|
887
888
|
o / -2,
|
|
888
889
|
1,
|
|
@@ -893,7 +894,7 @@ class it {
|
|
|
893
894
|
antialias: !0
|
|
894
895
|
// [new]
|
|
895
896
|
// premultipliedAlpha: true
|
|
896
|
-
}), w.ColorManagement.enabled = !1, this.renderer.outputColorSpace = w.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(
|
|
897
|
+
}), w.ColorManagement.enabled = !1, this.renderer.outputColorSpace = w.LinearSRGBColorSpace, this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(l, o), this.applyTextQuality((h = t.quality) != null ? h : "medium");
|
|
897
898
|
}
|
|
898
899
|
get isViewport() {
|
|
899
900
|
return this.mode === "overlay" && this.canvasSize === "viewport";
|
|
@@ -902,12 +903,12 @@ class it {
|
|
|
902
903
|
return typeof this.targetLayer == "number" ? this.targetLayer : this.targetLayer === "selected" ? F.SELECTED : F.BASE;
|
|
903
904
|
}
|
|
904
905
|
createRenderTarget() {
|
|
905
|
-
for (let e = 0; e <
|
|
906
|
-
const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width,
|
|
906
|
+
for (let e = 0; e < N.MAX_LAYERS; e++) {
|
|
907
|
+
const t = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, r = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height;
|
|
907
908
|
this.renderTargets.push(
|
|
908
909
|
new w.WebGLRenderTarget(
|
|
909
910
|
t * this.qualityFactor,
|
|
910
|
-
|
|
911
|
+
r * this.qualityFactor,
|
|
911
912
|
{
|
|
912
913
|
minFilter: w.LinearFilter,
|
|
913
914
|
magFilter: w.LinearFilter,
|
|
@@ -947,14 +948,14 @@ class it {
|
|
|
947
948
|
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");
|
|
948
949
|
}
|
|
949
950
|
updateUniforms(e, t) {
|
|
950
|
-
const
|
|
951
|
-
|
|
952
|
-
s.isMesh && s.material &&
|
|
951
|
+
const r = this.registry.get(e);
|
|
952
|
+
r && (r.traverse((s) => {
|
|
953
|
+
s.isMesh && s.material && P.forceUpdateUniforms(
|
|
953
954
|
s.material,
|
|
954
955
|
t
|
|
955
956
|
);
|
|
956
|
-
}),
|
|
957
|
-
s.isMesh && s.material &&
|
|
957
|
+
}), r.userData.nativeMesh && r.userData.nativeMesh.traverse((s) => {
|
|
958
|
+
s.isMesh && s.material && P.forceUpdateUniforms(
|
|
958
959
|
s.material,
|
|
959
960
|
t
|
|
960
961
|
);
|
|
@@ -965,23 +966,23 @@ class it {
|
|
|
965
966
|
}
|
|
966
967
|
setSize(e, t) {
|
|
967
968
|
this.renderer.setSize(e, t);
|
|
968
|
-
for (const
|
|
969
|
-
|
|
969
|
+
for (const r of this.renderTargets)
|
|
970
|
+
r.setSize(e * this.qualityFactor, t * this.qualityFactor);
|
|
970
971
|
this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
|
|
971
972
|
}
|
|
972
973
|
syncScene(e, t) {
|
|
973
|
-
const
|
|
974
|
-
|
|
975
|
-
const h = this.registry.get(
|
|
974
|
+
const r = this.target.getBoundingClientRect(), s = this.isViewport ? window.innerWidth + this.overscan * 2 : r.width, l = this.isViewport ? window.innerHeight + this.overscan * 2 : r.height, o = this.isViewport ? this.canvas.clientWidth : this.targetRect.width, n = this.isViewport ? this.canvas.clientHeight : this.targetRect.height, c = Math.abs(s - o) > 0.1 || Math.abs(l - n) > 0.1, a = this.mode === "overlay" && (Math.abs(r.top - this.targetRect.top) > 0.1 || Math.abs(r.left - this.targetRect.left) > 0.1);
|
|
975
|
+
c ? (this.targetRect = r, this.setSize(s, l), this.updateCanvasLayout()) : a ? (this.targetRect = r, this.updateCanvasLayout()) : this.targetRect = r, this.renderOrder = 0, this.reconcileNode(e), t.size > 0 && t.forEach((u) => {
|
|
976
|
+
const h = this.registry.get(u);
|
|
976
977
|
if (h) {
|
|
977
978
|
this.scene.remove(h);
|
|
978
|
-
for (const
|
|
979
|
-
|
|
979
|
+
for (const d of this.travelersByLayer)
|
|
980
|
+
d.delete(h);
|
|
980
981
|
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(
|
|
981
|
-
(
|
|
982
|
-
) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((
|
|
983
|
-
|
|
984
|
-
}), this.registry.remove(
|
|
982
|
+
(d) => d.dispose()
|
|
983
|
+
) : h.userData.nativeMesh.material.dispose(), h.userData.nativeMesh.geometry.dispose()), h.traverse((d) => {
|
|
984
|
+
d instanceof w.Mesh && (d.geometry && d.geometry.dispose(), d.material && (Array.isArray(d.material) ? d.material.forEach((p) => p.dispose()) : d.material.dispose()));
|
|
985
|
+
}), this.registry.remove(u), this.textureManager.unregister(u);
|
|
985
986
|
}
|
|
986
987
|
});
|
|
987
988
|
}
|
|
@@ -990,24 +991,24 @@ class it {
|
|
|
990
991
|
// => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
|
|
991
992
|
// private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
|
|
992
993
|
reconcileNode(e) {
|
|
993
|
-
var s,
|
|
994
|
+
var s, l;
|
|
994
995
|
let t = this.registry.get(e.element);
|
|
995
|
-
const
|
|
996
|
-
if (t && t.userData.shaderHash !==
|
|
997
|
-
const o = new w.PlaneGeometry(1, 1),
|
|
996
|
+
const r = JSON.stringify(e.shaderHooks || null);
|
|
997
|
+
if (t && t.userData.shaderHash !== r && (this.scene.remove(t), t.geometry.dispose(), t.material instanceof w.Material && t.material.dispose(), this.registry.remove(e.element), t = void 0), !t) {
|
|
998
|
+
const o = new w.PlaneGeometry(1, 1), n = e.isTraveler ? (s = this.renderTargets[e.captureLayer - 2]) == null ? void 0 : s.texture : this.textureManager.get(e.element), c = P.create(
|
|
998
999
|
"BOX",
|
|
999
1000
|
e.styles,
|
|
1000
1001
|
"",
|
|
1001
1002
|
e.rect.width,
|
|
1002
1003
|
e.rect.height,
|
|
1003
1004
|
this.qualityFactor,
|
|
1004
|
-
|
|
1005
|
+
n,
|
|
1005
1006
|
e.shaderHooks
|
|
1006
1007
|
);
|
|
1007
|
-
t = new w.Mesh(o,
|
|
1008
|
+
t = new w.Mesh(o, c), e.type === "TEXT" && (t.name = "BG_MESH"), this.scene.add(t), this.registry.register(e.element, t), t.userData.baseMaterial = c, t.userData.domElement = e.element, t.userData.shaderHash = r;
|
|
1008
1009
|
}
|
|
1009
|
-
if ((
|
|
1010
|
-
for (let o = 0; o <
|
|
1010
|
+
if (t.userData.clipElements = e.clipElements, (l = e.nativeStyles) != null && l.transform ? t.userData.nativeTransform = e.nativeStyles.transform : t.userData.nativeTransform = void 0, this.updateMeshProperties(t, e), this.updateMeshLayers(t, e), e.isTraveler)
|
|
1011
|
+
for (let o = 0; o < N.MAX_LAYERS; o++)
|
|
1011
1012
|
o === e.captureLayer - 2 ? this.travelersByLayer[o].add(t) : this.travelersByLayer[o].delete(t);
|
|
1012
1013
|
else
|
|
1013
1014
|
for (const o of this.travelersByLayer)
|
|
@@ -1022,371 +1023,404 @@ class it {
|
|
|
1022
1023
|
!0
|
|
1023
1024
|
));
|
|
1024
1025
|
}
|
|
1025
|
-
reconcileTextChild(e, t,
|
|
1026
|
-
var
|
|
1026
|
+
reconcileTextChild(e, t, r) {
|
|
1027
|
+
var a;
|
|
1027
1028
|
const s = t.textLines || [
|
|
1028
1029
|
{ text: t.textContent || "", rect: t.rect }
|
|
1029
|
-
],
|
|
1030
|
-
if (t.dirtyMask &
|
|
1030
|
+
], l = r ? t.nativeStyles : t.textStyles, o = JSON.stringify(l) + t.textContent + s.map((u) => u.text).join("|"), n = (a = e.userData) == null ? void 0 : a.textChildStyleHash;
|
|
1031
|
+
if (t.dirtyMask & ye || o !== n) {
|
|
1031
1032
|
e.children.filter(
|
|
1032
|
-
(
|
|
1033
|
-
).forEach((
|
|
1034
|
-
var
|
|
1035
|
-
const
|
|
1036
|
-
(
|
|
1033
|
+
(f) => f.name.startsWith("TEXT_CHILD")
|
|
1034
|
+
).forEach((f) => {
|
|
1035
|
+
var m;
|
|
1036
|
+
const L = f;
|
|
1037
|
+
(m = L.material.map) == null || m.dispose(), L.geometry.dispose(), e.remove(L);
|
|
1037
1038
|
});
|
|
1038
|
-
const h = t.rect,
|
|
1039
|
-
s.forEach((
|
|
1040
|
-
const
|
|
1039
|
+
const h = t.rect, d = h.x + h.width / 2, p = h.y + h.height / 2;
|
|
1040
|
+
s.forEach((f, L) => {
|
|
1041
|
+
const m = P.create(
|
|
1041
1042
|
"TEXT",
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1043
|
+
l,
|
|
1044
|
+
f.text,
|
|
1045
|
+
f.rect.width,
|
|
1046
|
+
f.rect.height,
|
|
1046
1047
|
this.qualityFactor
|
|
1047
|
-
),
|
|
1048
|
-
|
|
1049
|
-
const
|
|
1050
|
-
|
|
1051
|
-
const
|
|
1052
|
-
|
|
1053
|
-
t.rect.width === 0 ? 0 :
|
|
1054
|
-
t.rect.height === 0 ? 0 :
|
|
1048
|
+
), b = new w.PlaneGeometry(1, 1), E = new w.Mesh(b, m);
|
|
1049
|
+
E.name = `TEXT_CHILD_${L}`;
|
|
1050
|
+
const A = t.rect.width === 0 ? 1 : f.rect.width / t.rect.width, C = t.rect.height === 0 ? 1 : f.rect.height / t.rect.height;
|
|
1051
|
+
E.scale.set(A, C, 1);
|
|
1052
|
+
const y = f.rect.x + f.rect.width / 2, S = f.rect.y + f.rect.height / 2, X = y - d, z = -(S - p);
|
|
1053
|
+
E.position.set(
|
|
1054
|
+
t.rect.width === 0 ? 0 : X / t.rect.width,
|
|
1055
|
+
t.rect.height === 0 ? 0 : z / t.rect.height,
|
|
1055
1056
|
5e-3
|
|
1056
|
-
), e.add(
|
|
1057
|
+
), e.add(E);
|
|
1057
1058
|
}), e.userData.textChildStyleHash = o;
|
|
1058
1059
|
}
|
|
1059
|
-
e.children.forEach((
|
|
1060
|
-
if (!
|
|
1060
|
+
e.children.forEach((u) => {
|
|
1061
|
+
if (!u.name.startsWith("TEXT_CHILD"))
|
|
1061
1062
|
return;
|
|
1062
|
-
const h =
|
|
1063
|
-
if (
|
|
1064
|
-
h.layers.set(F.HIDDEN), t.visibility &
|
|
1063
|
+
const h = u;
|
|
1064
|
+
if (r && t.nativeLayer !== void 0)
|
|
1065
|
+
h.layers.set(F.HIDDEN), t.visibility & G && h.layers.enable(F.getCaptureLayer(t.nativeLayer));
|
|
1065
1066
|
else {
|
|
1066
|
-
const
|
|
1067
|
-
if (h.layers.set(
|
|
1068
|
-
if (!
|
|
1069
|
-
for (let
|
|
1070
|
-
|
|
1067
|
+
const d = t.visibility & G ? F.BASE : F.HIDDEN;
|
|
1068
|
+
if (h.layers.set(d), t.visibility & ae && h.layers.enable(F.SELECTED), t.visibility & G)
|
|
1069
|
+
if (!r && t.nativeLayer !== void 0 && t.nativeStyles !== void 0)
|
|
1070
|
+
for (let p = t.captureLayer; p <= N.MAX_LAYERS + 1; p++)
|
|
1071
|
+
p !== t.nativeLayer && h.layers.enable(F.getCaptureLayer(p));
|
|
1071
1072
|
else
|
|
1072
|
-
for (let
|
|
1073
|
-
h.layers.enable(F.getCaptureLayer(
|
|
1073
|
+
for (let p = t.captureLayer; p <= N.MAX_LAYERS + 1; p++)
|
|
1074
|
+
h.layers.enable(F.getCaptureLayer(p));
|
|
1074
1075
|
}
|
|
1075
1076
|
});
|
|
1076
1077
|
}
|
|
1077
1078
|
updateMeshProperties(e, t) {
|
|
1078
|
-
var
|
|
1079
|
-
const { rect:
|
|
1079
|
+
var C, y, S, X, z;
|
|
1080
|
+
const { rect: r, styles: s } = t, l = this.renderer.getPixelRatio(), o = this.renderer.domElement.width / l, n = this.renderer.domElement.height / l;
|
|
1080
1081
|
e.material = e.userData.baseMaterial;
|
|
1081
|
-
let
|
|
1082
|
-
e.scale.set(
|
|
1083
|
-
x:
|
|
1084
|
-
y:
|
|
1085
|
-
width:
|
|
1086
|
-
height:
|
|
1082
|
+
let c = ((C = e.material.userData) == null ? void 0 : C.shadowPadding) || 0;
|
|
1083
|
+
e.scale.set(r.width + c * 2, r.height + c * 2, 1), e.userData.domRect = {
|
|
1084
|
+
x: r.x,
|
|
1085
|
+
y: r.y,
|
|
1086
|
+
width: r.width,
|
|
1087
|
+
height: r.height
|
|
1087
1088
|
};
|
|
1088
|
-
const
|
|
1089
|
+
const a = 1e-3;
|
|
1089
1090
|
this.renderOrder++;
|
|
1090
|
-
const
|
|
1091
|
-
let
|
|
1091
|
+
const u = this.targetRect.left + window.scrollX, h = this.targetRect.top + window.scrollY;
|
|
1092
|
+
let d, p;
|
|
1092
1093
|
if (this.isViewport)
|
|
1093
|
-
|
|
1094
|
+
d = r.x - window.innerWidth / 2 + r.width / 2, p = -r.y + window.innerHeight / 2 - r.height / 2;
|
|
1094
1095
|
else {
|
|
1095
|
-
const
|
|
1096
|
-
|
|
1096
|
+
const U = r.x - u, I = r.y - h;
|
|
1097
|
+
d = U - o / 2 + r.width / 2, p = -I + n / 2 - r.height / 2;
|
|
1097
1098
|
}
|
|
1098
1099
|
e.position.set(
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
s.zIndex + this.renderOrder *
|
|
1100
|
+
d,
|
|
1101
|
+
p,
|
|
1102
|
+
s.zIndex + this.renderOrder * a
|
|
1102
1103
|
);
|
|
1103
|
-
const
|
|
1104
|
-
e.userData.basePosition = { x:
|
|
1105
|
-
const
|
|
1106
|
-
let
|
|
1107
|
-
if (
|
|
1108
|
-
const
|
|
1109
|
-
|
|
1104
|
+
const f = r.x, L = r.y;
|
|
1105
|
+
e.userData.basePosition = { x: d, y: p }, e.userData.originalBasePosition = { x: d, y: p }, e.userData.baseSize = { width: r.width, height: r.height }, e.userData.baseDOM = { x: f, y: L }, e.userData.isFixed = t.isFixed, e.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
|
|
1106
|
+
const m = t.element.nodeType === Node.TEXT_NODE ? t.element.parentElement : t.element, b = window.getComputedStyle(m);
|
|
1107
|
+
let E = 0, A = 0;
|
|
1108
|
+
if (b.transform && b.transform !== "none") {
|
|
1109
|
+
const U = new DOMMatrix(b.transform);
|
|
1110
|
+
E = U.m41, A = U.m42;
|
|
1110
1111
|
}
|
|
1111
|
-
if (e.userData.baseTransform = { x:
|
|
1112
|
+
if (e.userData.baseTransform = { x: E, y: A }, delete e.userData.originRatioX, delete e.userData.originRatioY, P.update(
|
|
1112
1113
|
e.userData.baseMaterial,
|
|
1113
1114
|
"BOX",
|
|
1114
1115
|
s,
|
|
1115
1116
|
"",
|
|
1116
|
-
|
|
1117
|
-
|
|
1117
|
+
r.width,
|
|
1118
|
+
r.height,
|
|
1118
1119
|
this.qualityFactor,
|
|
1119
|
-
t.isTraveler ? (
|
|
1120
|
+
t.isTraveler ? (y = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : y.texture : this.textureManager.get(t.element)
|
|
1120
1121
|
), t.nativeStyles && t.nativeRect) {
|
|
1121
1122
|
if (!e.userData.nativeMesh) {
|
|
1122
|
-
const
|
|
1123
|
+
const B = P.create(
|
|
1123
1124
|
"BOX",
|
|
1124
1125
|
t.nativeStyles,
|
|
1125
1126
|
"",
|
|
1126
1127
|
t.nativeRect.width,
|
|
1127
1128
|
t.nativeRect.height,
|
|
1128
1129
|
this.qualityFactor,
|
|
1129
|
-
t.isTraveler ? (
|
|
1130
|
+
t.isTraveler ? (S = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : S.texture : this.textureManager.get(t.element),
|
|
1130
1131
|
t.shaderHooks
|
|
1131
|
-
),
|
|
1132
|
-
t.type === "TEXT" && (
|
|
1132
|
+
), V = new w.Mesh(e.geometry, B);
|
|
1133
|
+
t.type === "TEXT" && (V.name = "BG_MESH"), this.scene.add(V), e.userData.nativeMesh = V;
|
|
1133
1134
|
}
|
|
1134
|
-
const
|
|
1135
|
-
let
|
|
1135
|
+
const U = e.userData.nativeMesh;
|
|
1136
|
+
let I, j;
|
|
1136
1137
|
if (this.isViewport)
|
|
1137
|
-
|
|
1138
|
+
I = t.nativeRect.x - window.innerWidth / 2 + t.nativeRect.width / 2, j = -t.nativeRect.y + window.innerHeight / 2 - t.nativeRect.height / 2;
|
|
1138
1139
|
else {
|
|
1139
|
-
const
|
|
1140
|
-
|
|
1140
|
+
const B = t.nativeRect.x - u, V = t.nativeRect.y - h;
|
|
1141
|
+
I = B - o / 2 + t.nativeRect.width / 2, j = -V + n / 2 - t.nativeRect.height / 2;
|
|
1141
1142
|
}
|
|
1142
|
-
let
|
|
1143
|
+
let J = t.nativeRect.width, Z = t.nativeRect.height, M = I, O = j;
|
|
1143
1144
|
if (t.nativeStyles.transform) {
|
|
1144
|
-
const
|
|
1145
|
-
if (
|
|
1146
|
-
let
|
|
1147
|
-
|
|
1145
|
+
const B = t.nativeStyles.transform, V = B.match(/scale\(([\d.]+%?)\)/);
|
|
1146
|
+
if (V) {
|
|
1147
|
+
let x = parseFloat(V[1]);
|
|
1148
|
+
V[1].includes("%") && (x /= 100), J *= x, Z *= x;
|
|
1148
1149
|
}
|
|
1149
|
-
const ie =
|
|
1150
|
+
const ie = B.match(/scaleX\(([\d.]+%?)\)/);
|
|
1150
1151
|
if (ie) {
|
|
1151
|
-
let
|
|
1152
|
-
ie[1].includes("%") && (
|
|
1152
|
+
let x = parseFloat(ie[1]);
|
|
1153
|
+
ie[1].includes("%") && (x /= 100), J *= x;
|
|
1153
1154
|
}
|
|
1154
|
-
const se =
|
|
1155
|
+
const se = B.match(/scaleY\(([\d.]+%?)\)/);
|
|
1155
1156
|
if (se) {
|
|
1156
|
-
let
|
|
1157
|
-
se[1].includes("%") && (
|
|
1157
|
+
let x = parseFloat(se[1]);
|
|
1158
|
+
se[1].includes("%") && (x /= 100), Z *= x;
|
|
1158
1159
|
}
|
|
1159
|
-
const
|
|
1160
|
-
if (
|
|
1161
|
-
const
|
|
1162
|
-
let
|
|
1163
|
-
|
|
1164
|
-
let
|
|
1165
|
-
|
|
1160
|
+
const oe = B.match(/translate\(([^,]+),\s*([^)]+)\)/);
|
|
1161
|
+
if (oe) {
|
|
1162
|
+
const x = oe[1].trim(), T = oe[2].trim();
|
|
1163
|
+
let _ = parseFloat(x);
|
|
1164
|
+
x.includes("%") && (_ = _ / 100 * t.nativeRect.width);
|
|
1165
|
+
let D = parseFloat(T);
|
|
1166
|
+
T.includes("%") && (D = D / 100 * t.nativeRect.height), M += _, O -= D;
|
|
1166
1167
|
}
|
|
1167
|
-
const
|
|
1168
|
-
if (
|
|
1169
|
-
const
|
|
1170
|
-
let
|
|
1171
|
-
|
|
1168
|
+
const he = B.match(/translateX\(([^)]+)\)/);
|
|
1169
|
+
if (he) {
|
|
1170
|
+
const x = he[1].trim();
|
|
1171
|
+
let T = parseFloat(x);
|
|
1172
|
+
x.includes("%") && (T = T / 100 * t.nativeRect.width), M += T;
|
|
1172
1173
|
}
|
|
1173
|
-
const
|
|
1174
|
-
if (
|
|
1175
|
-
const
|
|
1176
|
-
let
|
|
1177
|
-
|
|
1174
|
+
const v = B.match(/translateY\(([^)]+)\)/);
|
|
1175
|
+
if (v) {
|
|
1176
|
+
const x = v[1].trim();
|
|
1177
|
+
let T = parseFloat(x);
|
|
1178
|
+
x.includes("%") && (T = T / 100 * t.nativeRect.height), O -= T;
|
|
1178
1179
|
}
|
|
1179
1180
|
}
|
|
1180
|
-
let K = ((
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
t.nativeStyles.zIndex + this.renderOrder *
|
|
1185
|
-
),
|
|
1186
|
-
|
|
1181
|
+
let K = ((X = U.material.userData) == null ? void 0 : X.shadowPadding) || 0;
|
|
1182
|
+
U.scale.set(J + K * 2, Z + K * 2, 1), U.position.set(
|
|
1183
|
+
M,
|
|
1184
|
+
O,
|
|
1185
|
+
t.nativeStyles.zIndex + this.renderOrder * a
|
|
1186
|
+
), P.update(
|
|
1187
|
+
U.material,
|
|
1187
1188
|
"BOX",
|
|
1188
1189
|
t.nativeStyles,
|
|
1189
1190
|
"",
|
|
1190
1191
|
t.nativeRect.width,
|
|
1191
1192
|
t.nativeRect.height,
|
|
1192
1193
|
this.qualityFactor,
|
|
1193
|
-
t.isTraveler ? (
|
|
1194
|
+
t.isTraveler ? (z = this.renderTargets[t.captureLayer - 2]) == null ? void 0 : z.texture : this.textureManager.get(t.element)
|
|
1194
1195
|
);
|
|
1195
1196
|
} else
|
|
1196
1197
|
e.userData.nativeMesh && (this.scene.remove(e.userData.nativeMesh), e.userData.nativeMesh.material instanceof w.Material && e.userData.nativeMesh.material.dispose(), delete e.userData.nativeMesh);
|
|
1197
1198
|
}
|
|
1198
1199
|
updateMeshLayers(e, t) {
|
|
1199
|
-
const
|
|
1200
|
-
if (e.layers.set(
|
|
1200
|
+
const r = t.visibility & G ? F.BASE : F.HIDDEN;
|
|
1201
|
+
if (e.layers.set(r), t.visibility & ae && e.layers.enable(F.SELECTED), e.userData.nativeMesh && t.nativeLayer !== void 0) {
|
|
1201
1202
|
const s = e.userData.nativeMesh;
|
|
1202
|
-
if (s.layers.set(F.HIDDEN), t.visibility &
|
|
1203
|
+
if (s.layers.set(F.HIDDEN), t.visibility & G) {
|
|
1203
1204
|
s.layers.enable(F.getCaptureLayer(t.nativeLayer));
|
|
1204
|
-
for (let
|
|
1205
|
-
|
|
1205
|
+
for (let l = t.captureLayer; l <= N.MAX_LAYERS + 1; l++)
|
|
1206
|
+
l !== t.nativeLayer && e.layers.enable(F.getCaptureLayer(l));
|
|
1206
1207
|
}
|
|
1207
|
-
} else if (t.visibility &
|
|
1208
|
-
for (let s = t.captureLayer; s <=
|
|
1208
|
+
} else if (t.visibility & G)
|
|
1209
|
+
for (let s = t.captureLayer; s <= N.MAX_LAYERS + 1; s++)
|
|
1209
1210
|
e.layers.enable(F.getCaptureLayer(s));
|
|
1210
1211
|
}
|
|
1211
|
-
captureRenderTarget(e, t,
|
|
1212
|
-
if (e.size === 0 || !
|
|
1212
|
+
captureRenderTarget(e, t, r) {
|
|
1213
|
+
if (e.size === 0 || !r)
|
|
1213
1214
|
return;
|
|
1214
|
-
const s = new w.Color(),
|
|
1215
|
-
this.renderer.getClearColor(s), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(
|
|
1216
|
-
const o = new w.Vector3(),
|
|
1217
|
-
for (const
|
|
1218
|
-
o.setFromMatrixPosition(
|
|
1219
|
-
const h = (o.x + 1) / 2 *
|
|
1220
|
-
let
|
|
1221
|
-
typeof this.clipArea == "number" ?
|
|
1222
|
-
const
|
|
1223
|
-
this.renderer.setScissor(
|
|
1215
|
+
const s = new w.Color(), l = this.renderer.getClearAlpha();
|
|
1216
|
+
this.renderer.getClearColor(s), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(r), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(t);
|
|
1217
|
+
const o = new w.Vector3(), n = this.isViewport ? window.innerWidth + this.overscan * 2 : this.targetRect.width, c = this.isViewport ? window.innerHeight + this.overscan * 2 : this.targetRect.height, a = this.renderer.getPixelRatio();
|
|
1218
|
+
for (const u of e) {
|
|
1219
|
+
o.setFromMatrixPosition(u.matrixWorld), o.project(this.camera);
|
|
1220
|
+
const h = (o.x + 1) / 2 * n, d = (o.y + 1) / 2 * c;
|
|
1221
|
+
let p = 0, f = 1;
|
|
1222
|
+
typeof this.clipArea == "number" ? f = this.clipArea : this.clipArea.endsWith("%") ? f = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (p = parseFloat(this.clipArea));
|
|
1223
|
+
const L = u.scale.x * f + 0.5, m = u.scale.y * f + 0.5, b = h - L / 2, E = d - m / 2, A = (b * this.qualityFactor - p) / a, C = (E * this.qualityFactor - p) / a, y = (L * this.qualityFactor + p * 2) / a, S = (m * this.qualityFactor + p * 2) / a;
|
|
1224
|
+
this.renderer.setScissor(A, C, y, S), this.renderer.render(this.scene, this.camera);
|
|
1224
1225
|
}
|
|
1225
|
-
this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(s,
|
|
1226
|
+
this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(this.getSceneLayer()), this.renderer.setClearColor(s, l);
|
|
1226
1227
|
}
|
|
1227
1228
|
render() {
|
|
1228
|
-
for (let
|
|
1229
|
-
const
|
|
1229
|
+
for (let n = 0; n < N.MAX_LAYERS; n++) {
|
|
1230
|
+
const c = n + 1;
|
|
1230
1231
|
this.captureRenderTarget(
|
|
1231
|
-
this.travelersByLayer[
|
|
1232
|
-
F.getCaptureLayer(
|
|
1233
|
-
this.renderTargets[
|
|
1232
|
+
this.travelersByLayer[n],
|
|
1233
|
+
F.getCaptureLayer(c),
|
|
1234
|
+
this.renderTargets[n]
|
|
1234
1235
|
);
|
|
1235
1236
|
}
|
|
1236
|
-
this.renderer.
|
|
1237
|
+
const e = this.renderer.getContext(), t = this.renderer.getPixelRatio(), r = this.renderer.domElement.height / t, s = this.renderer.domElement, l = s.getBoundingClientRect().top, o = s.getBoundingClientRect().left;
|
|
1238
|
+
this.scene.children.forEach((n) => {
|
|
1239
|
+
var u;
|
|
1240
|
+
const c = n, a = (u = c.userData) == null ? void 0 : u.scissorRect;
|
|
1241
|
+
if (a && a.width > 0 && a.height > 0) {
|
|
1242
|
+
const h = Math.floor((a.x - o) * t), d = Math.floor(
|
|
1243
|
+
(r - (a.y - l + a.height)) * t
|
|
1244
|
+
), p = Math.ceil(a.width * t), f = Math.ceil(a.height * t);
|
|
1245
|
+
c.onBeforeRender = () => {
|
|
1246
|
+
e.enable(e.SCISSOR_TEST), e.scissor(h, d, p, f);
|
|
1247
|
+
}, c.onAfterRender = () => {
|
|
1248
|
+
e.disable(e.SCISSOR_TEST);
|
|
1249
|
+
};
|
|
1250
|
+
} else
|
|
1251
|
+
c.onBeforeRender && c.__hasScissorHook && (c.onBeforeRender = () => {
|
|
1252
|
+
}, c.onAfterRender = () => {
|
|
1253
|
+
}, c.__hasScissorHook = !1);
|
|
1254
|
+
a && (c.__hasScissorHook = !0);
|
|
1255
|
+
}), this.renderer.render(this.scene, this.camera);
|
|
1237
1256
|
}
|
|
1238
1257
|
syncMeshesByDOM() {
|
|
1239
|
-
const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY,
|
|
1258
|
+
const e = this.targetRect.left + window.scrollX, t = this.targetRect.top + window.scrollY, r = this.renderer.getPixelRatio(), s = this.renderer.domElement.width / r, l = this.renderer.domElement.height / r;
|
|
1240
1259
|
this.scene.children.forEach((o) => {
|
|
1241
|
-
var h,
|
|
1242
|
-
const
|
|
1243
|
-
if (!
|
|
1260
|
+
var h, d;
|
|
1261
|
+
const n = o;
|
|
1262
|
+
if (!n.userData || !n.userData.domElement)
|
|
1244
1263
|
return;
|
|
1245
|
-
const
|
|
1246
|
-
if (!
|
|
1264
|
+
const c = n.userData.domElement;
|
|
1265
|
+
if (!c.isConnected)
|
|
1247
1266
|
return;
|
|
1248
|
-
let
|
|
1249
|
-
if (
|
|
1250
|
-
const
|
|
1251
|
-
|
|
1267
|
+
let a;
|
|
1268
|
+
if (c.nodeType === Node.TEXT_NODE) {
|
|
1269
|
+
const p = document.createRange();
|
|
1270
|
+
p.selectNode(c), a = p.getBoundingClientRect();
|
|
1252
1271
|
} else
|
|
1253
|
-
|
|
1254
|
-
const
|
|
1255
|
-
if (!
|
|
1256
|
-
|
|
1257
|
-
x:
|
|
1258
|
-
y:
|
|
1259
|
-
width:
|
|
1260
|
-
height:
|
|
1272
|
+
a = c.getBoundingClientRect();
|
|
1273
|
+
const u = n.userData.domRect;
|
|
1274
|
+
if (!u || Math.abs(a.x - u.x) > 0.5 || Math.abs(a.y - u.y) > 0.5 || Math.abs(a.width - u.width) > 0.5 || Math.abs(a.height - u.height) > 0.5) {
|
|
1275
|
+
n.userData.domRect = {
|
|
1276
|
+
x: a.x,
|
|
1277
|
+
y: a.y,
|
|
1278
|
+
width: a.width,
|
|
1279
|
+
height: a.height
|
|
1261
1280
|
};
|
|
1262
|
-
|
|
1281
|
+
const p = n.userData.clipElements;
|
|
1282
|
+
if (p && p.length > 0) {
|
|
1283
|
+
let b = -1 / 0, E = -1 / 0, A = 1 / 0, C = 1 / 0;
|
|
1284
|
+
for (const y of p) {
|
|
1285
|
+
const S = y.getBoundingClientRect();
|
|
1286
|
+
b = Math.max(b, S.left), E = Math.max(E, S.top), A = Math.min(A, S.right), C = Math.min(C, S.bottom);
|
|
1287
|
+
}
|
|
1288
|
+
n.userData.scissorRect = {
|
|
1289
|
+
x: b,
|
|
1290
|
+
y: E,
|
|
1291
|
+
width: Math.max(0, A - b),
|
|
1292
|
+
height: Math.max(0, C - E)
|
|
1293
|
+
};
|
|
1294
|
+
} else
|
|
1295
|
+
n.userData.scissorRect = void 0;
|
|
1296
|
+
let f, L;
|
|
1263
1297
|
if (this.isViewport)
|
|
1264
|
-
f =
|
|
1298
|
+
f = a.x - window.innerWidth / 2 + a.width / 2, L = -a.y + window.innerHeight / 2 - a.height / 2;
|
|
1265
1299
|
else {
|
|
1266
|
-
const b =
|
|
1267
|
-
f = b - s / 2 +
|
|
1300
|
+
const b = a.x - e, E = a.y - t;
|
|
1301
|
+
f = b - s / 2 + a.width / 2, L = -E + l / 2 - a.height / 2;
|
|
1268
1302
|
}
|
|
1269
|
-
|
|
1270
|
-
let
|
|
1271
|
-
if (
|
|
1272
|
-
width:
|
|
1273
|
-
height:
|
|
1274
|
-
}),
|
|
1275
|
-
const b =
|
|
1276
|
-
let
|
|
1277
|
-
if (
|
|
1278
|
-
const
|
|
1279
|
-
if (
|
|
1280
|
-
let
|
|
1281
|
-
|
|
1303
|
+
n.position.setX(f), n.position.setY(L);
|
|
1304
|
+
let m = ((h = n.material.userData) == null ? void 0 : h.shadowPadding) || 0;
|
|
1305
|
+
if (n.scale.set(a.width + m * 2, a.height + m * 2, 1), n.updateMatrixWorld(), n.material instanceof w.ShaderMaterial && P.forceUpdateUniforms(n.material, {
|
|
1306
|
+
width: a.width,
|
|
1307
|
+
height: a.height
|
|
1308
|
+
}), n.userData.nativeMesh) {
|
|
1309
|
+
const b = n.userData.nativeMesh;
|
|
1310
|
+
let E = a.width, A = a.height, C = f, y = L;
|
|
1311
|
+
if (n.userData.nativeTransform) {
|
|
1312
|
+
const X = n.userData.nativeTransform, z = X.match(/scale\(([\d.]+%?)\)/);
|
|
1313
|
+
if (z) {
|
|
1314
|
+
let M = parseFloat(z[1]);
|
|
1315
|
+
z[1].includes("%") && (M /= 100), E *= M, A *= M;
|
|
1282
1316
|
}
|
|
1283
|
-
const
|
|
1284
|
-
if (
|
|
1285
|
-
let
|
|
1286
|
-
|
|
1317
|
+
const U = X.match(/scaleX\(([\d.]+%?)\)/);
|
|
1318
|
+
if (U) {
|
|
1319
|
+
let M = parseFloat(U[1]);
|
|
1320
|
+
U[1].includes("%") && (M /= 100), E *= M;
|
|
1287
1321
|
}
|
|
1288
|
-
const
|
|
1289
|
-
if (
|
|
1290
|
-
let
|
|
1291
|
-
|
|
1322
|
+
const I = X.match(/scaleY\(([\d.]+%?)\)/);
|
|
1323
|
+
if (I) {
|
|
1324
|
+
let M = parseFloat(I[1]);
|
|
1325
|
+
I[1].includes("%") && (M /= 100), A *= M;
|
|
1292
1326
|
}
|
|
1293
|
-
const
|
|
1294
|
-
if (
|
|
1295
|
-
const
|
|
1296
|
-
let
|
|
1297
|
-
|
|
1298
|
-
let
|
|
1299
|
-
|
|
1327
|
+
const j = X.match(/translate\(([^,]+),\s*([^)]+)\)/);
|
|
1328
|
+
if (j) {
|
|
1329
|
+
const M = j[1].trim(), O = j[2].trim();
|
|
1330
|
+
let K = parseFloat(M);
|
|
1331
|
+
M.includes("%") && (K = K / 100 * a.width);
|
|
1332
|
+
let B = parseFloat(O);
|
|
1333
|
+
O.includes("%") && (B = B / 100 * a.height), C += K, y -= B;
|
|
1300
1334
|
}
|
|
1301
|
-
const J =
|
|
1335
|
+
const J = X.match(/translateX\(([^)]+)\)/);
|
|
1302
1336
|
if (J) {
|
|
1303
|
-
const
|
|
1304
|
-
let
|
|
1305
|
-
|
|
1337
|
+
const M = J[1].trim();
|
|
1338
|
+
let O = parseFloat(M);
|
|
1339
|
+
M.includes("%") && (O = O / 100 * a.width), C += O;
|
|
1306
1340
|
}
|
|
1307
|
-
const Z =
|
|
1341
|
+
const Z = X.match(/translateY\(([^)]+)\)/);
|
|
1308
1342
|
if (Z) {
|
|
1309
|
-
const
|
|
1310
|
-
let
|
|
1311
|
-
|
|
1343
|
+
const M = Z[1].trim();
|
|
1344
|
+
let O = parseFloat(M);
|
|
1345
|
+
M.includes("%") && (O = O / 100 * a.height), y -= O;
|
|
1312
1346
|
}
|
|
1313
1347
|
}
|
|
1314
|
-
let
|
|
1315
|
-
b.position.setX(
|
|
1316
|
-
width:
|
|
1317
|
-
height:
|
|
1348
|
+
let S = ((d = b.material.userData) == null ? void 0 : d.shadowPadding) || 0;
|
|
1349
|
+
b.position.setX(C), b.position.setY(y), b.scale.set(E + S * 2, A + S * 2, 1), b.updateMatrixWorld(), b.material instanceof w.ShaderMaterial && P.forceUpdateUniforms(b.material, {
|
|
1350
|
+
width: E,
|
|
1351
|
+
height: A
|
|
1318
1352
|
});
|
|
1319
1353
|
}
|
|
1320
1354
|
}
|
|
1321
1355
|
});
|
|
1322
1356
|
}
|
|
1323
1357
|
}
|
|
1324
|
-
function
|
|
1325
|
-
const e =
|
|
1326
|
-
let
|
|
1327
|
-
const o = (
|
|
1328
|
-
for (let h = 0; h <
|
|
1329
|
-
const
|
|
1330
|
-
|
|
1331
|
-
const
|
|
1332
|
-
if (
|
|
1333
|
-
|
|
1358
|
+
function nt(i) {
|
|
1359
|
+
const e = i.textContent || "", t = [];
|
|
1360
|
+
let r = "", s = null, l = -1;
|
|
1361
|
+
const o = (a, u) => {
|
|
1362
|
+
for (let h = 0; h < a.length; h++) {
|
|
1363
|
+
const d = a[h], p = document.createRange();
|
|
1364
|
+
p.setStart(i, u + h), p.setEnd(i, u + h + 1);
|
|
1365
|
+
const f = p.getBoundingClientRect();
|
|
1366
|
+
if (f.width === 0 && f.height === 0) {
|
|
1367
|
+
r += d;
|
|
1334
1368
|
continue;
|
|
1335
1369
|
}
|
|
1336
|
-
|
|
1337
|
-
text:
|
|
1370
|
+
l === -1 || Math.abs(f.top - l) > f.height / 2 ? (r && s && t.push({
|
|
1371
|
+
text: r,
|
|
1338
1372
|
rect: {
|
|
1339
1373
|
left: s.left,
|
|
1340
1374
|
top: s.top,
|
|
1341
1375
|
width: s.right - s.left,
|
|
1342
1376
|
height: s.bottom - s.top
|
|
1343
1377
|
}
|
|
1344
|
-
}),
|
|
1345
|
-
left:
|
|
1346
|
-
top:
|
|
1347
|
-
right:
|
|
1348
|
-
bottom:
|
|
1349
|
-
},
|
|
1378
|
+
}), r = d, s = {
|
|
1379
|
+
left: f.left,
|
|
1380
|
+
top: f.top,
|
|
1381
|
+
right: f.right,
|
|
1382
|
+
bottom: f.bottom
|
|
1383
|
+
}, l = f.top) : (r += d, s && (s.left = Math.min(s.left, f.left), s.top = Math.min(s.top, f.top), s.right = Math.max(s.right, f.right), s.bottom = Math.max(
|
|
1350
1384
|
s.bottom,
|
|
1351
|
-
|
|
1385
|
+
f.bottom
|
|
1352
1386
|
)));
|
|
1353
1387
|
}
|
|
1354
|
-
},
|
|
1355
|
-
let
|
|
1356
|
-
for (const
|
|
1357
|
-
const
|
|
1358
|
-
|
|
1359
|
-
const h =
|
|
1388
|
+
}, n = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
|
|
1389
|
+
let c = 0;
|
|
1390
|
+
for (const a of n) {
|
|
1391
|
+
const u = document.createRange();
|
|
1392
|
+
u.setStart(i, c), u.setEnd(i, c + a.length);
|
|
1393
|
+
const h = u.getClientRects();
|
|
1360
1394
|
if (h.length > 1)
|
|
1361
|
-
o(
|
|
1395
|
+
o(a, c);
|
|
1362
1396
|
else {
|
|
1363
|
-
const
|
|
1364
|
-
if (
|
|
1365
|
-
|
|
1397
|
+
const d = h.length === 1 ? h[0] : u.getBoundingClientRect();
|
|
1398
|
+
if (d.width === 0 && d.height === 0) {
|
|
1399
|
+
r += a, c += a.length;
|
|
1366
1400
|
continue;
|
|
1367
1401
|
}
|
|
1368
|
-
|
|
1369
|
-
text:
|
|
1402
|
+
l === -1 || Math.abs(d.top - l) > d.height / 2 ? (r && s && t.push({
|
|
1403
|
+
text: r,
|
|
1370
1404
|
rect: {
|
|
1371
1405
|
left: s.left,
|
|
1372
1406
|
top: s.top,
|
|
1373
1407
|
width: s.right - s.left,
|
|
1374
1408
|
height: s.bottom - s.top
|
|
1375
1409
|
}
|
|
1376
|
-
}),
|
|
1377
|
-
left:
|
|
1378
|
-
top:
|
|
1379
|
-
right:
|
|
1380
|
-
bottom:
|
|
1381
|
-
},
|
|
1410
|
+
}), r = a, s = {
|
|
1411
|
+
left: d.left,
|
|
1412
|
+
top: d.top,
|
|
1413
|
+
right: d.right,
|
|
1414
|
+
bottom: d.bottom
|
|
1415
|
+
}, l = d.top) : (r += a, s && (s.left = Math.min(s.left, d.left), s.top = Math.min(s.top, d.top), s.right = Math.max(s.right, d.right), s.bottom = Math.max(
|
|
1382
1416
|
s.bottom,
|
|
1383
|
-
|
|
1417
|
+
d.bottom
|
|
1384
1418
|
)));
|
|
1385
1419
|
}
|
|
1386
|
-
|
|
1420
|
+
c += a.length;
|
|
1387
1421
|
}
|
|
1388
|
-
return
|
|
1389
|
-
text:
|
|
1422
|
+
return r && s && t.push({
|
|
1423
|
+
text: r,
|
|
1390
1424
|
rect: {
|
|
1391
1425
|
left: s.left,
|
|
1392
1426
|
top: s.top,
|
|
@@ -1394,335 +1428,338 @@ function st(r) {
|
|
|
1394
1428
|
height: s.bottom - s.top
|
|
1395
1429
|
}
|
|
1396
1430
|
}), t.filter(
|
|
1397
|
-
(
|
|
1431
|
+
(a) => a.text.trim().length > 0 && a.rect.width > 0 && a.rect.height > 0
|
|
1398
1432
|
);
|
|
1399
1433
|
}
|
|
1400
|
-
function
|
|
1401
|
-
const e = parseFloat(
|
|
1402
|
-
let t = parseFloat(
|
|
1434
|
+
function Ae(i) {
|
|
1435
|
+
const e = parseFloat(i.fontSize);
|
|
1436
|
+
let t = parseFloat(i.lineHeight);
|
|
1403
1437
|
isNaN(t) && (t = e * 1.2);
|
|
1404
|
-
let
|
|
1405
|
-
return isNaN(
|
|
1406
|
-
font: `${
|
|
1407
|
-
fontSize:
|
|
1408
|
-
color:
|
|
1409
|
-
textAlign:
|
|
1438
|
+
let r = parseFloat(i.letterSpacing);
|
|
1439
|
+
return isNaN(r) && (r = 0), {
|
|
1440
|
+
font: `${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,
|
|
1441
|
+
fontSize: i.fontSize,
|
|
1442
|
+
color: i.color,
|
|
1443
|
+
textAlign: i.textAlign || "start",
|
|
1410
1444
|
textBaseline: "alphabetic",
|
|
1411
|
-
direction:
|
|
1445
|
+
direction: i.direction || "inherit",
|
|
1412
1446
|
lineHeight: t,
|
|
1413
|
-
letterSpacing:
|
|
1447
|
+
letterSpacing: r
|
|
1414
1448
|
};
|
|
1415
1449
|
}
|
|
1416
|
-
function
|
|
1417
|
-
var B,
|
|
1418
|
-
if (
|
|
1419
|
-
const
|
|
1420
|
-
if (!
|
|
1450
|
+
function Fe(i, e = re | ue | We | ye | pe, t, r = 1, s = 0, l = 2, o, n, c) {
|
|
1451
|
+
var K, B, V, ie, se, oe, he;
|
|
1452
|
+
if (i.nodeType === Node.TEXT_NODE) {
|
|
1453
|
+
const v = i;
|
|
1454
|
+
if (!v.textContent || !v.textContent.trim())
|
|
1421
1455
|
return null;
|
|
1422
|
-
const
|
|
1423
|
-
if (
|
|
1456
|
+
const x = v.textContent.replace(/\s+/g, " ");
|
|
1457
|
+
if (x.length === 0)
|
|
1424
1458
|
return null;
|
|
1425
|
-
const
|
|
1426
|
-
if (
|
|
1459
|
+
const T = nt(v);
|
|
1460
|
+
if (T.length === 0)
|
|
1427
1461
|
return null;
|
|
1428
|
-
const
|
|
1429
|
-
if (!
|
|
1462
|
+
const _ = v.parentElement, D = _ ? window.getComputedStyle(_) : null;
|
|
1463
|
+
if (!D)
|
|
1430
1464
|
return null;
|
|
1431
|
-
const
|
|
1465
|
+
const q = Math.min(...T.map((R) => R.rect.left)), Y = Math.min(...T.map((R) => R.rect.top)), Q = Math.max(...T.map((R) => R.rect.left + R.rect.width)), k = Math.max(...T.map((R) => R.rect.top + R.rect.height));
|
|
1432
1466
|
return {
|
|
1433
1467
|
id: Math.random().toString(36).substring(2, 9),
|
|
1434
1468
|
type: "TEXT",
|
|
1435
|
-
element:
|
|
1469
|
+
element: v,
|
|
1436
1470
|
rect: {
|
|
1437
|
-
x:
|
|
1438
|
-
y:
|
|
1439
|
-
width: Q -
|
|
1440
|
-
height: k -
|
|
1471
|
+
x: q + window.scrollX,
|
|
1472
|
+
y: Y + window.scrollY,
|
|
1473
|
+
width: Q - q,
|
|
1474
|
+
height: k - Y
|
|
1441
1475
|
},
|
|
1442
1476
|
styles: {
|
|
1443
1477
|
backgroundColor: "transparent",
|
|
1444
1478
|
backgroundImage: "",
|
|
1445
|
-
opacity:
|
|
1446
|
-
zIndex: (isNaN(parseInt(
|
|
1479
|
+
opacity: _ && _.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(D.opacity),
|
|
1480
|
+
zIndex: (isNaN(parseInt(D.zIndex)) ? 0 : parseInt(D.zIndex)) + s,
|
|
1447
1481
|
borderRadius: "0px",
|
|
1448
1482
|
borderColor: "transparent",
|
|
1449
1483
|
borderWidth: "0px",
|
|
1450
1484
|
isTraveler: !1
|
|
1451
1485
|
},
|
|
1452
|
-
textContent:
|
|
1453
|
-
textLines:
|
|
1454
|
-
text:
|
|
1486
|
+
textContent: x,
|
|
1487
|
+
textLines: T.map((R) => ({
|
|
1488
|
+
text: R.text.trim(),
|
|
1455
1489
|
rect: {
|
|
1456
|
-
x:
|
|
1457
|
-
y:
|
|
1458
|
-
width:
|
|
1459
|
-
height:
|
|
1490
|
+
x: R.rect.left + window.scrollX,
|
|
1491
|
+
y: R.rect.top + window.scrollY,
|
|
1492
|
+
width: R.rect.width,
|
|
1493
|
+
height: R.rect.height
|
|
1460
1494
|
}
|
|
1461
1495
|
})),
|
|
1462
|
-
textStyles:
|
|
1496
|
+
textStyles: Ae(D),
|
|
1463
1497
|
dirtyMask: e,
|
|
1464
1498
|
visibility: t,
|
|
1465
1499
|
isTraveler: !1,
|
|
1466
|
-
captureLayer:
|
|
1467
|
-
isFixed:
|
|
1500
|
+
captureLayer: r,
|
|
1501
|
+
isFixed: D.position === "fixed",
|
|
1468
1502
|
nativeLayer: o,
|
|
1469
|
-
nativeStyles:
|
|
1503
|
+
nativeStyles: n ? te(te({
|
|
1470
1504
|
backgroundColor: "transparent",
|
|
1471
1505
|
backgroundImage: "",
|
|
1472
|
-
opacity:
|
|
1473
|
-
zIndex: (isNaN(parseInt(
|
|
1506
|
+
opacity: _ && _.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(D.opacity),
|
|
1507
|
+
zIndex: (isNaN(parseInt(D.zIndex)) ? 0 : parseInt(D.zIndex)) + s,
|
|
1474
1508
|
borderRadius: "0px",
|
|
1475
1509
|
borderColor: "transparent",
|
|
1476
1510
|
borderWidth: "0px",
|
|
1477
1511
|
isTraveler: !1
|
|
1478
|
-
},
|
|
1479
|
-
nativeRect:
|
|
1480
|
-
x:
|
|
1481
|
-
y:
|
|
1482
|
-
width: Q -
|
|
1483
|
-
height: k -
|
|
1512
|
+
}, Ae(D)), n) : void 0,
|
|
1513
|
+
nativeRect: n ? {
|
|
1514
|
+
x: q + window.scrollX,
|
|
1515
|
+
y: Y + window.scrollY,
|
|
1516
|
+
width: Q - q,
|
|
1517
|
+
height: k - Y
|
|
1484
1518
|
} : void 0,
|
|
1519
|
+
clipElements: c,
|
|
1485
1520
|
children: []
|
|
1486
1521
|
};
|
|
1487
1522
|
}
|
|
1488
|
-
if (
|
|
1523
|
+
if (i.nodeType !== Node.ELEMENT_NODE)
|
|
1489
1524
|
return null;
|
|
1490
|
-
const
|
|
1491
|
-
let
|
|
1492
|
-
if (
|
|
1493
|
-
const
|
|
1494
|
-
for (const
|
|
1495
|
-
if (!
|
|
1525
|
+
const a = i, u = a.dataset[H.KEY];
|
|
1526
|
+
let h = t, d = t;
|
|
1527
|
+
if (u) {
|
|
1528
|
+
const v = new Set(u.split(/\s+/));
|
|
1529
|
+
for (const x of v)
|
|
1530
|
+
if (!Me.includes(x))
|
|
1496
1531
|
throw new Error(
|
|
1497
|
-
`[MirageEngine] Invalid filter token: '${
|
|
1532
|
+
`[MirageEngine] Invalid filter token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1498
1533
|
);
|
|
1499
|
-
if (
|
|
1534
|
+
if (v.has(H.VALUES.END))
|
|
1500
1535
|
return null;
|
|
1501
|
-
if (
|
|
1536
|
+
if (v.has(H.VALUES.INCLUDE_TREE) && v.has(H.VALUES.EXCLUDE_TREE))
|
|
1502
1537
|
throw new Error(
|
|
1503
1538
|
"[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
|
|
1504
1539
|
);
|
|
1505
|
-
if (
|
|
1540
|
+
if (v.has(H.VALUES.INCLUDE_SELF) && v.has(H.VALUES.EXCLUDE_SELF))
|
|
1506
1541
|
throw new Error(
|
|
1507
1542
|
"[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1508
1543
|
);
|
|
1509
|
-
|
|
1544
|
+
v.has(H.VALUES.INCLUDE_TREE) ? h = h | G : v.has(H.VALUES.EXCLUDE_TREE) && (h = h & ~G), d = h, v.has(H.VALUES.INCLUDE_SELF) ? d = d | G : v.has(H.VALUES.EXCLUDE_SELF) && (d = d & ~G);
|
|
1510
1545
|
}
|
|
1511
|
-
const
|
|
1512
|
-
if (
|
|
1513
|
-
const
|
|
1514
|
-
for (const
|
|
1515
|
-
if (!
|
|
1546
|
+
const p = a.dataset[$.KEY];
|
|
1547
|
+
if (p) {
|
|
1548
|
+
const v = new Set(p.split(/\s+/));
|
|
1549
|
+
for (const x of v)
|
|
1550
|
+
if (!Me.includes(x))
|
|
1516
1551
|
throw new Error(
|
|
1517
|
-
`[MirageEngine] Invalid select token: '${
|
|
1552
|
+
`[MirageEngine] Invalid select token: '${x}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1518
1553
|
);
|
|
1519
|
-
if (
|
|
1554
|
+
if (v.has($.VALUES.END))
|
|
1520
1555
|
return null;
|
|
1521
|
-
if (
|
|
1556
|
+
if (v.has($.VALUES.INCLUDE_TREE) && v.has($.VALUES.EXCLUDE_TREE))
|
|
1522
1557
|
throw new Error(
|
|
1523
1558
|
"[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
|
|
1524
1559
|
);
|
|
1525
|
-
if (
|
|
1560
|
+
if (v.has($.VALUES.INCLUDE_SELF) && v.has($.VALUES.EXCLUDE_SELF))
|
|
1526
1561
|
throw new Error(
|
|
1527
1562
|
"[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1528
1563
|
);
|
|
1529
|
-
|
|
1564
|
+
v.has($.VALUES.INCLUDE_TREE) ? h = h | ae : v.has($.VALUES.EXCLUDE_TREE) && (h = h & ~ae), d = h, v.has($.VALUES.INCLUDE_SELF) ? d = d | ae : v.has($.VALUES.EXCLUDE_SELF) && (d = d & ~ae);
|
|
1530
1565
|
}
|
|
1531
|
-
const f =
|
|
1532
|
-
let
|
|
1566
|
+
const f = a.dataset[N.KEY];
|
|
1567
|
+
let L = !1, m = n ? te({}, n) : {}, b = o;
|
|
1533
1568
|
if (f) {
|
|
1534
|
-
let
|
|
1535
|
-
const
|
|
1536
|
-
let
|
|
1537
|
-
if (
|
|
1538
|
-
|
|
1539
|
-
const k = f.substring(
|
|
1569
|
+
let v = 1;
|
|
1570
|
+
const x = f.indexOf("{"), T = f.lastIndexOf("}");
|
|
1571
|
+
let _ = f;
|
|
1572
|
+
if (x !== -1 && T !== -1 && T > x) {
|
|
1573
|
+
_ = f.substring(0, x).trim();
|
|
1574
|
+
const k = f.substring(x, T + 1);
|
|
1540
1575
|
try {
|
|
1541
|
-
|
|
1542
|
-
} catch (
|
|
1576
|
+
m = new Function("return " + k)();
|
|
1577
|
+
} catch (R) {
|
|
1543
1578
|
console.warn(
|
|
1544
1579
|
`[MirageEngine] Failed to parse travel styles JSON: ${k}`
|
|
1545
1580
|
);
|
|
1546
1581
|
}
|
|
1547
1582
|
}
|
|
1548
|
-
const
|
|
1549
|
-
let
|
|
1550
|
-
const
|
|
1551
|
-
if (
|
|
1552
|
-
|
|
1553
|
-
const k =
|
|
1583
|
+
const D = _.split(/\s+/);
|
|
1584
|
+
let q = !1;
|
|
1585
|
+
const Y = D.indexOf(N.VALUES.TRAVELER);
|
|
1586
|
+
if (Y !== -1) {
|
|
1587
|
+
L = !0, q = !0;
|
|
1588
|
+
const k = D[Y + 1];
|
|
1554
1589
|
if (k && !isNaN(parseInt(k, 10)))
|
|
1555
|
-
|
|
1590
|
+
v = parseInt(k, 10);
|
|
1556
1591
|
else {
|
|
1557
|
-
const
|
|
1558
|
-
|
|
1592
|
+
const R = D.find((ne) => !isNaN(parseInt(ne, 10)));
|
|
1593
|
+
R && (v = parseInt(R, 10));
|
|
1559
1594
|
}
|
|
1560
1595
|
}
|
|
1561
|
-
const Q =
|
|
1596
|
+
const Q = D.indexOf(N.VALUES.NATIVE);
|
|
1562
1597
|
if (Q !== -1) {
|
|
1563
|
-
const k =
|
|
1598
|
+
const k = D[Q + 1];
|
|
1564
1599
|
if (k && !isNaN(parseInt(k, 10)))
|
|
1565
1600
|
b = parseInt(k, 10);
|
|
1566
|
-
else if (!
|
|
1567
|
-
const
|
|
1568
|
-
|
|
1601
|
+
else if (!L) {
|
|
1602
|
+
const R = D.find((ne) => !isNaN(parseInt(ne, 10)));
|
|
1603
|
+
R && (b = parseInt(R, 10));
|
|
1569
1604
|
}
|
|
1570
1605
|
}
|
|
1571
|
-
if (
|
|
1572
|
-
const k =
|
|
1573
|
-
if (k <
|
|
1606
|
+
if (q) {
|
|
1607
|
+
const k = v + 1;
|
|
1608
|
+
if (k < r)
|
|
1574
1609
|
throw new Error(
|
|
1575
|
-
`[MirageEngine] Traveler layer (${
|
|
1610
|
+
`[MirageEngine] Traveler layer (${v}) cannot be smaller than inherited capture layer (${r - 1}).`
|
|
1576
1611
|
);
|
|
1577
|
-
|
|
1612
|
+
r = Math.min(k, N.MAX_LAYERS + 1);
|
|
1578
1613
|
}
|
|
1579
1614
|
}
|
|
1580
|
-
const
|
|
1581
|
-
let
|
|
1582
|
-
|
|
1583
|
-
const
|
|
1584
|
-
if (
|
|
1615
|
+
const E = a.dataset[Pe.KEY];
|
|
1616
|
+
let A;
|
|
1617
|
+
E && (A = JSON.parse(E));
|
|
1618
|
+
const C = a.getBoundingClientRect(), y = window.getComputedStyle(a);
|
|
1619
|
+
if (C.width === 0 || C.height === 0 || y.display === "none")
|
|
1585
1620
|
return null;
|
|
1586
|
-
let
|
|
1587
|
-
|
|
1588
|
-
const
|
|
1589
|
-
let
|
|
1590
|
-
if (
|
|
1591
|
-
|
|
1592
|
-
else if (
|
|
1593
|
-
const
|
|
1594
|
-
const
|
|
1595
|
-
|
|
1596
|
-
const
|
|
1597
|
-
|
|
1598
|
-
const
|
|
1599
|
-
|
|
1600
|
-
const
|
|
1601
|
-
|
|
1602
|
-
for (let
|
|
1603
|
-
|
|
1621
|
+
let S = a.getAttribute("data-mid");
|
|
1622
|
+
S || (S = Math.random().toString(36).substring(2, 11), a.setAttribute("data-mid", S));
|
|
1623
|
+
const X = parseInt(y.zIndex), z = (isNaN(X) ? 0 : X) + s;
|
|
1624
|
+
let U;
|
|
1625
|
+
if (a.tagName === "IMG")
|
|
1626
|
+
U = a.src;
|
|
1627
|
+
else if (a.tagName.toLowerCase() === "svg") {
|
|
1628
|
+
const v = a.cloneNode(!0), x = m == null ? void 0 : m.color, T = m == null ? void 0 : m.fill, _ = m == null ? void 0 : m.stroke, D = m == null ? void 0 : m.opacity, q = (R, ne) => {
|
|
1629
|
+
const W = window.getComputedStyle(R), de = ne, Oe = W.fill === W.color, _e = W.stroke === W.color, me = T || (Oe ? x : void 0) || W.fill;
|
|
1630
|
+
me && me !== "none" && (de.style.fill = me);
|
|
1631
|
+
const ve = _ || (_e ? x : void 0) || W.stroke;
|
|
1632
|
+
ve && ve !== "none" && (de.style.stroke = ve), W.strokeWidth && W.strokeWidth !== "0px" && (de.style.strokeWidth = W.strokeWidth);
|
|
1633
|
+
const Se = x || W.color;
|
|
1634
|
+
Se && (de.style.color = Se);
|
|
1635
|
+
const we = D || W.opacity;
|
|
1636
|
+
we && we !== "1" && (de.style.opacity = we);
|
|
1637
|
+
for (let fe = 0; fe < R.children.length; fe++)
|
|
1638
|
+
q(R.children[fe], ne.children[fe]);
|
|
1604
1639
|
};
|
|
1605
|
-
|
|
1606
|
-
const
|
|
1607
|
-
|
|
1608
|
-
let k = new XMLSerializer().serializeToString(
|
|
1640
|
+
q(a, v);
|
|
1641
|
+
const Y = a.getBoundingClientRect(), Q = window.devicePixelRatio * l;
|
|
1642
|
+
v.hasAttribute("viewBox") || v.setAttribute("viewBox", `0 0 ${Y.width} ${Y.height}`), v.setAttribute("width", (Y.width * Q).toString()), v.setAttribute("height", (Y.height * Q).toString());
|
|
1643
|
+
let k = new XMLSerializer().serializeToString(v);
|
|
1609
1644
|
k.includes("xmlns=") || (k = k.replace(
|
|
1610
1645
|
"<svg",
|
|
1611
1646
|
'<svg xmlns="http://www.w3.org/2000/svg"'
|
|
1612
|
-
)),
|
|
1613
|
-
} else if (
|
|
1614
|
-
const
|
|
1615
|
-
|
|
1616
|
-
}
|
|
1617
|
-
const
|
|
1618
|
-
backgroundColor:
|
|
1619
|
-
backgroundImage:
|
|
1620
|
-
opacity:
|
|
1621
|
-
zIndex:
|
|
1622
|
-
borderRadius:
|
|
1623
|
-
borderColor:
|
|
1624
|
-
borderWidth:
|
|
1625
|
-
boxShadow:
|
|
1626
|
-
imageSrc:
|
|
1627
|
-
isTraveler:
|
|
1628
|
-
},
|
|
1647
|
+
)), U = `data:image/svg+xml;utf8,${encodeURIComponent(k)}`;
|
|
1648
|
+
} else if (y.backgroundImage && y.backgroundImage !== "none") {
|
|
1649
|
+
const v = y.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
|
|
1650
|
+
v && (U = v[1]);
|
|
1651
|
+
}
|
|
1652
|
+
const I = {
|
|
1653
|
+
backgroundColor: y.backgroundColor,
|
|
1654
|
+
backgroundImage: y.backgroundImage,
|
|
1655
|
+
opacity: a.dataset[ee.KEY] === ee.VALUES.HIDE ? 1 : parseFloat(y.opacity),
|
|
1656
|
+
zIndex: z,
|
|
1657
|
+
borderRadius: y.borderRadius,
|
|
1658
|
+
borderColor: y.borderColor,
|
|
1659
|
+
borderWidth: y.borderWidth,
|
|
1660
|
+
boxShadow: y.boxShadow,
|
|
1661
|
+
imageSrc: U,
|
|
1662
|
+
isTraveler: L
|
|
1663
|
+
}, j = I;
|
|
1629
1664
|
let J, Z;
|
|
1630
|
-
const
|
|
1631
|
-
return
|
|
1632
|
-
const
|
|
1633
|
-
|
|
1665
|
+
const M = [], O = y.overflow === "hidden" ? [...c || [], a] : c;
|
|
1666
|
+
return a.tagName.toLowerCase() !== "svg" && Array.from(a.childNodes).forEach((v) => {
|
|
1667
|
+
const x = v.nodeType === Node.TEXT_NODE ? d : h, T = Fe(
|
|
1668
|
+
v,
|
|
1634
1669
|
e,
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1670
|
+
x,
|
|
1671
|
+
r,
|
|
1672
|
+
z,
|
|
1673
|
+
l,
|
|
1674
|
+
v.nodeType === Node.TEXT_NODE ? b : void 0,
|
|
1675
|
+
v.nodeType === Node.TEXT_NODE && Object.keys(m).length > 0 ? m : void 0,
|
|
1676
|
+
O
|
|
1641
1677
|
);
|
|
1642
|
-
|
|
1678
|
+
T && M.push(T);
|
|
1643
1679
|
}), {
|
|
1644
|
-
id:
|
|
1680
|
+
id: S,
|
|
1645
1681
|
type: "BOX",
|
|
1646
|
-
element:
|
|
1682
|
+
element: a,
|
|
1647
1683
|
rect: {
|
|
1648
|
-
x:
|
|
1649
|
-
y:
|
|
1650
|
-
width:
|
|
1651
|
-
height:
|
|
1684
|
+
x: C.left + window.scrollX,
|
|
1685
|
+
y: C.top + window.scrollY,
|
|
1686
|
+
width: C.width,
|
|
1687
|
+
height: C.height
|
|
1652
1688
|
},
|
|
1653
|
-
styles:
|
|
1689
|
+
styles: j,
|
|
1654
1690
|
textContent: J,
|
|
1655
1691
|
textStyles: Z,
|
|
1656
1692
|
dirtyMask: e,
|
|
1657
|
-
visibility:
|
|
1658
|
-
isTraveler:
|
|
1659
|
-
captureLayer:
|
|
1693
|
+
visibility: d,
|
|
1694
|
+
isTraveler: L,
|
|
1695
|
+
captureLayer: r,
|
|
1660
1696
|
nativeLayer: b,
|
|
1661
|
-
nativeStyles: b !== void 0 ?
|
|
1662
|
-
backgroundColor: (
|
|
1663
|
-
backgroundImage: (
|
|
1664
|
-
opacity: (
|
|
1665
|
-
zIndex:
|
|
1666
|
-
borderRadius: (
|
|
1667
|
-
borderColor: (
|
|
1668
|
-
borderWidth: (
|
|
1669
|
-
boxShadow: (
|
|
1670
|
-
isTraveler:
|
|
1671
|
-
transform:
|
|
1697
|
+
nativeStyles: b !== void 0 ? Ce(te({}, I), {
|
|
1698
|
+
backgroundColor: (K = m.backgroundColor) != null ? K : I.backgroundColor,
|
|
1699
|
+
backgroundImage: (B = m.backgroundImage) != null ? B : I.backgroundImage,
|
|
1700
|
+
opacity: (V = m.opacity) != null ? V : I.opacity,
|
|
1701
|
+
zIndex: m.zIndex !== void 0 ? m.zIndex + z : I.zIndex,
|
|
1702
|
+
borderRadius: (ie = m.borderRadius) != null ? ie : I.borderRadius,
|
|
1703
|
+
borderColor: (se = m.borderColor) != null ? se : I.borderColor,
|
|
1704
|
+
borderWidth: (oe = m.borderWidth) != null ? oe : I.borderWidth,
|
|
1705
|
+
boxShadow: (he = m.boxShadow) != null ? he : I.boxShadow,
|
|
1706
|
+
isTraveler: I.isTraveler,
|
|
1707
|
+
transform: m.transform
|
|
1672
1708
|
}) : void 0,
|
|
1673
1709
|
nativeRect: b !== void 0 ? {
|
|
1674
|
-
x:
|
|
1675
|
-
y:
|
|
1676
|
-
width:
|
|
1677
|
-
height:
|
|
1710
|
+
x: m.x !== void 0 ? parseFloat(m.x) : C.left + window.scrollX,
|
|
1711
|
+
y: m.y !== void 0 ? parseFloat(m.y) : C.top + window.scrollY,
|
|
1712
|
+
width: m.width !== void 0 ? parseFloat(m.width) : C.width,
|
|
1713
|
+
height: m.height !== void 0 ? parseFloat(m.height) : C.height
|
|
1678
1714
|
} : void 0,
|
|
1679
|
-
isFixed:
|
|
1680
|
-
|
|
1681
|
-
|
|
1715
|
+
isFixed: y.position === "fixed",
|
|
1716
|
+
clipElements: c,
|
|
1717
|
+
children: M,
|
|
1718
|
+
shaderHooks: A
|
|
1682
1719
|
};
|
|
1683
1720
|
}
|
|
1684
|
-
function
|
|
1685
|
-
e.size !== 0 && e.forEach((t,
|
|
1686
|
-
var
|
|
1687
|
-
const s =
|
|
1688
|
-
!s || !s.userData.basePosition || (
|
|
1721
|
+
function at(i, e) {
|
|
1722
|
+
e.size !== 0 && e.forEach((t, r) => {
|
|
1723
|
+
var l, o, n, c;
|
|
1724
|
+
const s = i.get(r);
|
|
1725
|
+
!s || !s.userData.basePosition || (P.forceUpdateUniforms(s.material, {
|
|
1689
1726
|
backgroundColor: t.backgroundColor,
|
|
1690
1727
|
backgroundImage: t.backgroundImage,
|
|
1691
1728
|
boxShadow: t.boxShadow,
|
|
1692
1729
|
opacity: t.opacity,
|
|
1693
|
-
borderRadius: (o = t.borderRadius) != null ? o : (
|
|
1730
|
+
borderRadius: (o = t.borderRadius) != null ? o : (l = s.userData.baseStyles) == null ? void 0 : l.borderRadius
|
|
1694
1731
|
// width and height are no longer updated here, they are updated in syncMeshesByDOM
|
|
1695
|
-
}), s.userData.nativeMesh &&
|
|
1732
|
+
}), s.userData.nativeMesh && P.forceUpdateUniforms(s.userData.nativeMesh.material, {
|
|
1696
1733
|
backgroundColor: t.backgroundColor,
|
|
1697
1734
|
backgroundImage: t.backgroundImage,
|
|
1698
1735
|
boxShadow: t.boxShadow,
|
|
1699
1736
|
opacity: t.opacity,
|
|
1700
|
-
borderRadius: (
|
|
1737
|
+
borderRadius: (c = t.borderRadius) != null ? c : (n = s.userData.baseStyles) == null ? void 0 : n.borderRadius
|
|
1701
1738
|
}));
|
|
1702
1739
|
});
|
|
1703
1740
|
}
|
|
1704
|
-
class
|
|
1705
|
-
constructor(e, t,
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
this.target = e, this.renderer = t, this.registry =
|
|
1741
|
+
class ct {
|
|
1742
|
+
constructor(e, t, r, s) {
|
|
1743
|
+
g(this, "target");
|
|
1744
|
+
g(this, "renderer");
|
|
1745
|
+
g(this, "registry");
|
|
1746
|
+
g(this, "isTravelEnabled", !1);
|
|
1747
|
+
g(this, "tracker");
|
|
1748
|
+
this.target = e, this.renderer = t, this.registry = r, this.tracker = new qe(e, {
|
|
1712
1749
|
resizeDebounce: s.resizeDebounce
|
|
1713
|
-
}), this.tracker.onLayoutChange.add((
|
|
1714
|
-
document.querySelector(`[${
|
|
1715
|
-
const
|
|
1750
|
+
}), this.tracker.onLayoutChange.add((l, o) => {
|
|
1751
|
+
document.querySelector(`[${N.NAME}~='${N.VALUES.TRAVELER}']`) !== null && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
|
|
1752
|
+
const c = Fe(
|
|
1716
1753
|
this.target,
|
|
1717
|
-
|
|
1718
|
-
|
|
1754
|
+
l,
|
|
1755
|
+
G,
|
|
1719
1756
|
1,
|
|
1720
1757
|
0,
|
|
1721
1758
|
this.renderer.qualityFactor
|
|
1722
1759
|
);
|
|
1723
|
-
|
|
1724
|
-
}), this.tracker.onStyleChange.add((
|
|
1725
|
-
|
|
1760
|
+
c && this.renderer.syncScene(c, o);
|
|
1761
|
+
}), this.tracker.onStyleChange.add((l) => {
|
|
1762
|
+
at(this.registry, l);
|
|
1726
1763
|
}), this.tracker.onRender.add(() => {
|
|
1727
1764
|
this.renderer.syncMeshesByDOM(), this.renderer.render();
|
|
1728
1765
|
});
|
|
@@ -1734,9 +1771,9 @@ class at {
|
|
|
1734
1771
|
this.tracker.stop();
|
|
1735
1772
|
}
|
|
1736
1773
|
}
|
|
1737
|
-
class
|
|
1774
|
+
class lt {
|
|
1738
1775
|
constructor() {
|
|
1739
|
-
|
|
1776
|
+
g(this, "store");
|
|
1740
1777
|
this.store = /* @__PURE__ */ new WeakMap();
|
|
1741
1778
|
}
|
|
1742
1779
|
register(e, t) {
|
|
@@ -1759,30 +1796,30 @@ class nt {
|
|
|
1759
1796
|
this.store.delete(e);
|
|
1760
1797
|
}
|
|
1761
1798
|
}
|
|
1762
|
-
class
|
|
1799
|
+
class ft {
|
|
1763
1800
|
constructor(e, t) {
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
var s,
|
|
1769
|
-
if (this.target = e, this.registry = new
|
|
1770
|
-
const
|
|
1771
|
-
|
|
1801
|
+
g(this, "renderer");
|
|
1802
|
+
g(this, "syncer");
|
|
1803
|
+
g(this, "target");
|
|
1804
|
+
g(this, "registry");
|
|
1805
|
+
var s, l, o;
|
|
1806
|
+
if (this.target = e, this.registry = new lt(), !document.getElementById("mirage-engine-styles")) {
|
|
1807
|
+
const n = document.createElement("style");
|
|
1808
|
+
n.id = "mirage-engine-styles", n.textContent = `
|
|
1772
1809
|
[${ee.NAME}="${ee.VALUES.HIDE}"] {
|
|
1773
1810
|
opacity: 0 !important;
|
|
1774
1811
|
}
|
|
1775
|
-
`, document.head.appendChild(
|
|
1812
|
+
`, document.head.appendChild(n);
|
|
1776
1813
|
}
|
|
1777
|
-
let
|
|
1778
|
-
if (t.mode === "duplicate" ?
|
|
1814
|
+
let r;
|
|
1815
|
+
if (t.mode === "duplicate" ? r = (l = (s = t.container) != null ? s : this.target.parentElement) != null ? l : void 0 : r = (o = this.target.parentElement) != null ? o : void 0, !r)
|
|
1779
1816
|
throw new Error("[Mirage] Cannot find a container (parent or option).");
|
|
1780
|
-
this.renderer = new
|
|
1817
|
+
this.renderer = new ot(
|
|
1781
1818
|
this.target,
|
|
1782
1819
|
t,
|
|
1783
|
-
|
|
1820
|
+
r,
|
|
1784
1821
|
this.registry
|
|
1785
|
-
), this.renderer.mount(), this.syncer = new
|
|
1822
|
+
), this.renderer.mount(), this.syncer = new ct(this.target, this.renderer, this.registry, t);
|
|
1786
1823
|
}
|
|
1787
1824
|
start() {
|
|
1788
1825
|
this.syncer.start();
|
|
@@ -1814,37 +1851,37 @@ class dt {
|
|
|
1814
1851
|
ArrowUp: !1,
|
|
1815
1852
|
ArrowDown: !1
|
|
1816
1853
|
};
|
|
1817
|
-
window.addEventListener("keydown", (
|
|
1818
|
-
t[
|
|
1819
|
-
}), window.addEventListener("keyup", (
|
|
1820
|
-
t[
|
|
1854
|
+
window.addEventListener("keydown", (l) => {
|
|
1855
|
+
t[l.key] !== void 0 && (t[l.key] = !0);
|
|
1856
|
+
}), window.addEventListener("keyup", (l) => {
|
|
1857
|
+
t[l.key] !== void 0 && (t[l.key] = !1);
|
|
1821
1858
|
});
|
|
1822
|
-
const
|
|
1823
|
-
requestAnimationFrame(s), t.ArrowRight && e.position.setX(e.position.x +
|
|
1859
|
+
const r = 2, s = () => {
|
|
1860
|
+
requestAnimationFrame(s), t.ArrowRight && e.position.setX(e.position.x + r), t.ArrowLeft && e.position.setX(e.position.x - r), t.ArrowUp && e.position.setY(e.position.y + r), t.ArrowDown && e.position.setY(e.position.y - r);
|
|
1824
1861
|
};
|
|
1825
1862
|
s();
|
|
1826
1863
|
}
|
|
1827
1864
|
}
|
|
1828
1865
|
export {
|
|
1829
|
-
|
|
1866
|
+
Me as ALLOWED_FILTERS,
|
|
1830
1867
|
ee as ATTR_DOM,
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1868
|
+
H as ATTR_FILTER,
|
|
1869
|
+
dt as ATTR_SANDWICH,
|
|
1870
|
+
$ as ATTR_SELECT,
|
|
1871
|
+
Pe as ATTR_SHADER,
|
|
1872
|
+
N as ATTR_TRAVEL,
|
|
1873
|
+
ye as DIRTY_CONTENT,
|
|
1874
|
+
ge as DIRTY_NONE,
|
|
1838
1875
|
re as DIRTY_RECT,
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1876
|
+
pe as DIRTY_STRUCTURE,
|
|
1877
|
+
ue as DIRTY_STYLE,
|
|
1878
|
+
We as DIRTY_ZINDEX,
|
|
1879
|
+
ut as EXCLUDED,
|
|
1880
|
+
ft as Engine,
|
|
1844
1881
|
ae as SELECT_LAYER,
|
|
1845
1882
|
F as THREE_LAYERS,
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1883
|
+
Re as TRAVEL_VALUES,
|
|
1884
|
+
qe as Tracker,
|
|
1885
|
+
G as USER_LAYER,
|
|
1886
|
+
Ge as extractFromStyle
|
|
1850
1887
|
};
|