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