@mirage-engine/core 0.3.13 → 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 +14 -0
- package/dist/mirage-engine.js +841 -769
- 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 +30 -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
|
-
|
|
17
|
+
a(t.next(n));
|
|
18
18
|
} catch (l) {
|
|
19
|
-
|
|
19
|
+
s(l);
|
|
20
20
|
}
|
|
21
|
-
},
|
|
21
|
+
}, o = (n) => {
|
|
22
22
|
try {
|
|
23
|
-
|
|
23
|
+
a(t.throw(n));
|
|
24
24
|
} catch (l) {
|
|
25
|
-
|
|
25
|
+
s(l);
|
|
26
26
|
}
|
|
27
|
-
},
|
|
28
|
-
|
|
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
|
|
155
|
-
for (const
|
|
156
|
-
if (
|
|
157
|
-
|
|
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
|
-
|
|
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 (
|
|
170
|
-
if (this.pendingMask |=
|
|
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
|
|
242
|
-
if (
|
|
240
|
+
return s.forEach((o) => {
|
|
241
|
+
const a = o.match(/[^\s\-]+\-?|\-|\s+/g) || [];
|
|
242
|
+
if (a.length === 0) {
|
|
243
243
|
c.push("");
|
|
244
244
|
return;
|
|
245
245
|
}
|
|
246
|
-
let
|
|
247
|
-
for (let l = 1; l <
|
|
248
|
-
const d =
|
|
249
|
-
this.ctx.measureText(
|
|
246
|
+
let n = a[0];
|
|
247
|
+
for (let l = 1; l < a.length; l++) {
|
|
248
|
+
const d = a[l];
|
|
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,63 +301,84 @@ 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
|
-
|
|
318
|
-
}
|
|
319
|
-
const
|
|
320
|
-
for (let
|
|
321
|
-
const l = r[
|
|
322
|
-
let h = l,
|
|
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
|
+
}
|
|
319
|
+
const a = [];
|
|
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
|
|
328
|
-
|
|
329
|
-
color:
|
|
330
|
-
alpha:
|
|
331
|
-
rawStop:
|
|
327
|
+
const f = le(h);
|
|
328
|
+
a.push({
|
|
329
|
+
color: f.color,
|
|
330
|
+
alpha: f.alpha,
|
|
331
|
+
rawStop: u,
|
|
332
332
|
stop: 0
|
|
333
333
|
});
|
|
334
334
|
}
|
|
335
|
-
if (
|
|
336
|
-
for (let l = 0; l <
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
let
|
|
340
|
-
for (let l = 1; l <
|
|
341
|
-
if (
|
|
342
|
-
const d = l -
|
|
335
|
+
if (a.length > 0) {
|
|
336
|
+
for (let l = 0; l < a.length; l++)
|
|
337
|
+
a[l].rawStop !== null && (a[l].stop = parseFloat(a[l].rawStop) / 100);
|
|
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 n = 0;
|
|
340
|
+
for (let l = 1; l < a.length; l++)
|
|
341
|
+
if (a[l].rawStop !== null || l === a.length - 1) {
|
|
342
|
+
const d = l - n;
|
|
343
343
|
if (d > 1) {
|
|
344
|
-
const h =
|
|
344
|
+
const h = a[n].stop, f = (a[l].stop - h) / d;
|
|
345
345
|
for (let g = 1; g < d; g++)
|
|
346
|
-
|
|
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
352
|
}
|
|
353
|
-
|
|
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 };
|
|
368
|
+
}
|
|
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
|
|
518
|
-
const
|
|
519
|
-
if (
|
|
520
|
-
for (const [
|
|
521
|
-
typeof
|
|
522
|
-
`,
|
|
523
|
-
`,
|
|
524
|
-
`,
|
|
525
|
-
`,
|
|
526
|
-
`,
|
|
527
|
-
const
|
|
528
|
-
` +
|
|
529
|
-
`, h =
|
|
530
|
-
` : `vec2
|
|
531
|
-
|
|
532
|
-
|
|
549
|
+
function et(i, e, t, r = null, s) {
|
|
550
|
+
var S;
|
|
551
|
+
const c = r !== null || !!i.imageSrc;
|
|
552
|
+
let o = "";
|
|
553
|
+
const a = {};
|
|
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
|
-
|
|
665
|
-
for (let
|
|
666
|
-
if (
|
|
667
|
-
const
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
),
|
|
712
|
+
const o = qe(e.backgroundImage);
|
|
713
|
+
if (o) {
|
|
714
|
+
i.uniforms.uGradientCount.value = o.stops.length, i.uniforms.uGradientAngle.value = o.angle;
|
|
715
|
+
for (let a = 0; a < 8; a++)
|
|
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
|
-
|
|
706
|
-
|
|
707
|
-
) :
|
|
754
|
+
s,
|
|
755
|
+
o,
|
|
756
|
+
a
|
|
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
|
-
|
|
722
|
-
) : e === "TEXT" &&
|
|
771
|
+
a
|
|
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,
|
|
770
|
-
const
|
|
771
|
-
|
|
819
|
+
r = yield new Promise((c, o) => {
|
|
820
|
+
const a = new Image();
|
|
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,32 +868,32 @@ 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
|
|
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";
|
|
@@ -852,16 +902,16 @@ class tt {
|
|
|
852
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,31 +990,31 @@ 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
|
"",
|
|
951
1001
|
e.rect.width,
|
|
952
1002
|
e.rect.height,
|
|
953
1003
|
this.qualityFactor,
|
|
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,100 +1024,102 @@ 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(F.HIDDEN), t.visibility &
|
|
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(F.getCaptureLayer(
|
|
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
|
|
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,
|
|
1066
1118
|
this.qualityFactor,
|
|
1067
|
-
t.isTraveler ? (
|
|
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
|
"",
|
|
@@ -1076,103 +1128,104 @@ class tt {
|
|
|
1076
1128
|
this.qualityFactor,
|
|
1077
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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
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,
|
|
1183
|
+
$,
|
|
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 <=
|
|
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++)
|
|
1152
1205
|
c !== t.nativeLayer && e.layers.enable(F.getCaptureLayer(c));
|
|
1153
1206
|
}
|
|
1154
|
-
} else if (t.visibility &
|
|
1155
|
-
for (let
|
|
1156
|
-
e.layers.enable(F.getCaptureLayer(
|
|
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],
|
|
@@ -1183,472 +1236,491 @@ class tt {
|
|
|
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
|
-
|
|
1189
|
-
|
|
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;
|
|
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 =
|
|
1200
|
-
const d =
|
|
1253
|
+
l = n.getBoundingClientRect();
|
|
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 = {
|
|
1203
1257
|
x: l.x,
|
|
1204
1258
|
y: l.y,
|
|
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
|
-
}),
|
|
1219
|
-
const
|
|
1220
|
-
let
|
|
1221
|
-
if (
|
|
1222
|
-
const
|
|
1223
|
-
if (
|
|
1224
|
-
let
|
|
1225
|
-
|
|
1274
|
+
}), a.userData.nativeMesh) {
|
|
1275
|
+
const b = a.userData.nativeMesh;
|
|
1276
|
+
let C = l.width, I = l.height, D = f, S = g;
|
|
1277
|
+
if (a.userData.nativeTransform) {
|
|
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;
|
|
1282
|
+
}
|
|
1283
|
+
const N = E.match(/scaleX\(([\d.]+%?)\)/);
|
|
1284
|
+
if (N) {
|
|
1285
|
+
let L = parseFloat(N[1]);
|
|
1286
|
+
N[1].includes("%") && (L /= 100), C *= L;
|
|
1226
1287
|
}
|
|
1227
|
-
const
|
|
1228
|
-
if (
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
R.includes("%") && (U = U / 100 * l.width);
|
|
1232
|
-
let G = parseFloat(D);
|
|
1233
|
-
D.includes("%") && (G = G / 100 * l.height), w += U, M -= G;
|
|
1288
|
+
const M = E.match(/scaleY\(([\d.]+%?)\)/);
|
|
1289
|
+
if (M) {
|
|
1290
|
+
let L = parseFloat(M[1]);
|
|
1291
|
+
M[1].includes("%") && (L /= 100), I *= L;
|
|
1234
1292
|
}
|
|
1235
|
-
const
|
|
1236
|
-
if (
|
|
1237
|
-
const
|
|
1238
|
-
let
|
|
1239
|
-
|
|
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;
|
|
1240
1300
|
}
|
|
1241
|
-
const
|
|
1242
|
-
if (
|
|
1243
|
-
const
|
|
1244
|
-
let
|
|
1245
|
-
|
|
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;
|
|
1306
|
+
}
|
|
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;
|
|
1246
1312
|
}
|
|
1247
1313
|
}
|
|
1248
|
-
|
|
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
|
|
1318
|
+
});
|
|
1249
1319
|
}
|
|
1250
1320
|
}
|
|
1251
1321
|
});
|
|
1252
1322
|
}
|
|
1253
1323
|
}
|
|
1254
|
-
function
|
|
1255
|
-
const e =
|
|
1256
|
-
let r = "",
|
|
1257
|
-
const
|
|
1324
|
+
function st(i) {
|
|
1325
|
+
const e = i.textContent || "", t = [];
|
|
1326
|
+
let r = "", s = null, c = -1;
|
|
1327
|
+
const o = (l, d) => {
|
|
1258
1328
|
for (let h = 0; h < l.length; h++) {
|
|
1259
|
-
const
|
|
1260
|
-
|
|
1261
|
-
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();
|
|
1262
1332
|
if (g.width === 0 && g.height === 0) {
|
|
1263
|
-
r +=
|
|
1333
|
+
r += u;
|
|
1264
1334
|
continue;
|
|
1265
1335
|
}
|
|
1266
|
-
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({
|
|
1267
1337
|
text: r,
|
|
1268
1338
|
rect: {
|
|
1269
|
-
left:
|
|
1270
|
-
top:
|
|
1271
|
-
width:
|
|
1272
|
-
height:
|
|
1339
|
+
left: s.left,
|
|
1340
|
+
top: s.top,
|
|
1341
|
+
width: s.right - s.left,
|
|
1342
|
+
height: s.bottom - s.top
|
|
1273
1343
|
}
|
|
1274
|
-
}), r =
|
|
1344
|
+
}), r = u, s = {
|
|
1275
1345
|
left: g.left,
|
|
1276
1346
|
top: g.top,
|
|
1277
1347
|
right: g.right,
|
|
1278
1348
|
bottom: g.bottom
|
|
1279
|
-
}, c = g.top) : (r +=
|
|
1280
|
-
|
|
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,
|
|
1281
1351
|
g.bottom
|
|
1282
1352
|
)));
|
|
1283
1353
|
}
|
|
1284
|
-
},
|
|
1285
|
-
let
|
|
1286
|
-
for (const l of
|
|
1354
|
+
}, a = e.match(/[^\s\-]+\-?|\-|\s+/g) || [];
|
|
1355
|
+
let n = 0;
|
|
1356
|
+
for (const l of a) {
|
|
1287
1357
|
const d = document.createRange();
|
|
1288
|
-
d.setStart(
|
|
1358
|
+
d.setStart(i, n), d.setEnd(i, n + l.length);
|
|
1289
1359
|
const h = d.getClientRects();
|
|
1290
1360
|
if (h.length > 1)
|
|
1291
|
-
|
|
1361
|
+
o(l, n);
|
|
1292
1362
|
else {
|
|
1293
|
-
const
|
|
1294
|
-
if (
|
|
1295
|
-
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;
|
|
1296
1366
|
continue;
|
|
1297
1367
|
}
|
|
1298
|
-
c === -1 || Math.abs(
|
|
1368
|
+
c === -1 || Math.abs(u.top - c) > u.height / 2 ? (r && s && t.push({
|
|
1299
1369
|
text: r,
|
|
1300
1370
|
rect: {
|
|
1301
|
-
left:
|
|
1302
|
-
top:
|
|
1303
|
-
width:
|
|
1304
|
-
height:
|
|
1371
|
+
left: s.left,
|
|
1372
|
+
top: s.top,
|
|
1373
|
+
width: s.right - s.left,
|
|
1374
|
+
height: s.bottom - s.top
|
|
1305
1375
|
}
|
|
1306
|
-
}), r = l,
|
|
1307
|
-
left:
|
|
1308
|
-
top:
|
|
1309
|
-
right:
|
|
1310
|
-
bottom:
|
|
1311
|
-
}, c =
|
|
1312
|
-
|
|
1313
|
-
|
|
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
|
|
1314
1384
|
)));
|
|
1315
1385
|
}
|
|
1316
|
-
|
|
1386
|
+
n += l.length;
|
|
1317
1387
|
}
|
|
1318
|
-
return r &&
|
|
1388
|
+
return r && s && t.push({
|
|
1319
1389
|
text: r,
|
|
1320
1390
|
rect: {
|
|
1321
|
-
left:
|
|
1322
|
-
top:
|
|
1323
|
-
width:
|
|
1324
|
-
height:
|
|
1391
|
+
left: s.left,
|
|
1392
|
+
top: s.top,
|
|
1393
|
+
width: s.right - s.left,
|
|
1394
|
+
height: s.bottom - s.top
|
|
1325
1395
|
}
|
|
1326
1396
|
}), t.filter(
|
|
1327
1397
|
(l) => l.text.trim().length > 0 && l.rect.width > 0 && l.rect.height > 0
|
|
1328
1398
|
);
|
|
1329
1399
|
}
|
|
1330
|
-
function
|
|
1331
|
-
const e = parseFloat(
|
|
1332
|
-
let t = parseFloat(
|
|
1400
|
+
function Le(i) {
|
|
1401
|
+
const e = parseFloat(i.fontSize);
|
|
1402
|
+
let t = parseFloat(i.lineHeight);
|
|
1333
1403
|
isNaN(t) && (t = e * 1.2);
|
|
1334
|
-
let r = parseFloat(
|
|
1404
|
+
let r = parseFloat(i.letterSpacing);
|
|
1335
1405
|
return isNaN(r) && (r = 0), {
|
|
1336
|
-
font: `${
|
|
1337
|
-
fontSize:
|
|
1338
|
-
color:
|
|
1339
|
-
textAlign:
|
|
1406
|
+
font: `${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,
|
|
1407
|
+
fontSize: i.fontSize,
|
|
1408
|
+
color: i.color,
|
|
1409
|
+
textAlign: i.textAlign || "start",
|
|
1340
1410
|
textBaseline: "alphabetic",
|
|
1341
|
-
direction:
|
|
1411
|
+
direction: i.direction || "inherit",
|
|
1342
1412
|
lineHeight: t,
|
|
1343
1413
|
letterSpacing: r
|
|
1344
1414
|
};
|
|
1345
1415
|
}
|
|
1346
|
-
function
|
|
1347
|
-
var
|
|
1348
|
-
if (
|
|
1349
|
-
const
|
|
1350
|
-
if (!
|
|
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())
|
|
1351
1421
|
return null;
|
|
1352
|
-
const
|
|
1353
|
-
if (
|
|
1422
|
+
const A = m.textContent.replace(/\s+/g, " ");
|
|
1423
|
+
if (A.length === 0)
|
|
1354
1424
|
return null;
|
|
1355
|
-
const
|
|
1356
|
-
if (
|
|
1425
|
+
const U = st(m);
|
|
1426
|
+
if (U.length === 0)
|
|
1357
1427
|
return null;
|
|
1358
|
-
const
|
|
1359
|
-
if (!
|
|
1428
|
+
const y = m.parentElement, x = y ? window.getComputedStyle(y) : null;
|
|
1429
|
+
if (!x)
|
|
1360
1430
|
return null;
|
|
1361
|
-
const
|
|
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));
|
|
1362
1432
|
return {
|
|
1363
1433
|
id: Math.random().toString(36).substring(2, 9),
|
|
1364
1434
|
type: "TEXT",
|
|
1365
|
-
element:
|
|
1435
|
+
element: m,
|
|
1366
1436
|
rect: {
|
|
1367
|
-
x:
|
|
1368
|
-
y:
|
|
1369
|
-
width:
|
|
1370
|
-
height:
|
|
1437
|
+
x: X + window.scrollX,
|
|
1438
|
+
y: O + window.scrollY,
|
|
1439
|
+
width: Q - X,
|
|
1440
|
+
height: k - O
|
|
1371
1441
|
},
|
|
1372
1442
|
styles: {
|
|
1373
1443
|
backgroundColor: "transparent",
|
|
1374
1444
|
backgroundImage: "",
|
|
1375
|
-
opacity:
|
|
1376
|
-
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,
|
|
1377
1447
|
borderRadius: "0px",
|
|
1378
1448
|
borderColor: "transparent",
|
|
1379
1449
|
borderWidth: "0px",
|
|
1380
1450
|
isTraveler: !1
|
|
1381
1451
|
},
|
|
1382
|
-
textContent:
|
|
1383
|
-
textLines:
|
|
1384
|
-
text:
|
|
1452
|
+
textContent: A,
|
|
1453
|
+
textLines: U.map((T) => ({
|
|
1454
|
+
text: T.text.trim(),
|
|
1385
1455
|
rect: {
|
|
1386
|
-
x:
|
|
1387
|
-
y:
|
|
1388
|
-
width:
|
|
1389
|
-
height:
|
|
1456
|
+
x: T.rect.left + window.scrollX,
|
|
1457
|
+
y: T.rect.top + window.scrollY,
|
|
1458
|
+
width: T.rect.width,
|
|
1459
|
+
height: T.rect.height
|
|
1390
1460
|
}
|
|
1391
1461
|
})),
|
|
1392
|
-
textStyles:
|
|
1462
|
+
textStyles: Le(x),
|
|
1393
1463
|
dirtyMask: e,
|
|
1394
1464
|
visibility: t,
|
|
1395
1465
|
isTraveler: !1,
|
|
1396
1466
|
captureLayer: r,
|
|
1397
|
-
isFixed:
|
|
1398
|
-
nativeLayer:
|
|
1399
|
-
nativeStyles:
|
|
1467
|
+
isFixed: x.position === "fixed",
|
|
1468
|
+
nativeLayer: o,
|
|
1469
|
+
nativeStyles: a ? te(te({
|
|
1400
1470
|
backgroundColor: "transparent",
|
|
1401
1471
|
backgroundImage: "",
|
|
1402
|
-
opacity:
|
|
1403
|
-
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,
|
|
1404
1474
|
borderRadius: "0px",
|
|
1405
1475
|
borderColor: "transparent",
|
|
1406
1476
|
borderWidth: "0px",
|
|
1407
1477
|
isTraveler: !1
|
|
1408
|
-
},
|
|
1409
|
-
nativeRect:
|
|
1410
|
-
x:
|
|
1411
|
-
y:
|
|
1412
|
-
width:
|
|
1413
|
-
height:
|
|
1478
|
+
}, Le(x)), a) : void 0,
|
|
1479
|
+
nativeRect: a ? {
|
|
1480
|
+
x: X + window.scrollX,
|
|
1481
|
+
y: O + window.scrollY,
|
|
1482
|
+
width: Q - X,
|
|
1483
|
+
height: k - O
|
|
1414
1484
|
} : void 0,
|
|
1415
1485
|
children: []
|
|
1416
1486
|
};
|
|
1417
1487
|
}
|
|
1418
|
-
if (
|
|
1488
|
+
if (i.nodeType !== Node.ELEMENT_NODE)
|
|
1419
1489
|
return null;
|
|
1420
|
-
const
|
|
1490
|
+
const n = i, l = n.dataset[G.KEY];
|
|
1421
1491
|
let d = t, h = t;
|
|
1422
1492
|
if (l) {
|
|
1423
|
-
const
|
|
1424
|
-
for (const
|
|
1425
|
-
if (!
|
|
1493
|
+
const m = new Set(l.split(/\s+/));
|
|
1494
|
+
for (const A of m)
|
|
1495
|
+
if (!Te.includes(A))
|
|
1426
1496
|
throw new Error(
|
|
1427
|
-
`[MirageEngine] Invalid filter token: '${
|
|
1497
|
+
`[MirageEngine] Invalid filter token: '${A}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1428
1498
|
);
|
|
1429
|
-
if (
|
|
1499
|
+
if (m.has(G.VALUES.END))
|
|
1430
1500
|
return null;
|
|
1431
|
-
if (
|
|
1501
|
+
if (m.has(G.VALUES.INCLUDE_TREE) && m.has(G.VALUES.EXCLUDE_TREE))
|
|
1432
1502
|
throw new Error(
|
|
1433
1503
|
"[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
|
|
1434
1504
|
);
|
|
1435
|
-
if (
|
|
1505
|
+
if (m.has(G.VALUES.INCLUDE_SELF) && m.has(G.VALUES.EXCLUDE_SELF))
|
|
1436
1506
|
throw new Error(
|
|
1437
1507
|
"[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1438
1508
|
);
|
|
1439
|
-
|
|
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);
|
|
1440
1510
|
}
|
|
1441
|
-
const
|
|
1442
|
-
if (
|
|
1443
|
-
const
|
|
1444
|
-
for (const
|
|
1445
|
-
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))
|
|
1446
1516
|
throw new Error(
|
|
1447
|
-
`[MirageEngine] Invalid select token: '${
|
|
1517
|
+
`[MirageEngine] Invalid select token: '${A}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
|
|
1448
1518
|
);
|
|
1449
|
-
if (
|
|
1519
|
+
if (m.has(j.VALUES.END))
|
|
1450
1520
|
return null;
|
|
1451
|
-
if (
|
|
1521
|
+
if (m.has(j.VALUES.INCLUDE_TREE) && m.has(j.VALUES.EXCLUDE_TREE))
|
|
1452
1522
|
throw new Error(
|
|
1453
1523
|
"[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
|
|
1454
1524
|
);
|
|
1455
|
-
if (
|
|
1525
|
+
if (m.has(j.VALUES.INCLUDE_SELF) && m.has(j.VALUES.EXCLUDE_SELF))
|
|
1456
1526
|
throw new Error(
|
|
1457
1527
|
"[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element."
|
|
1458
1528
|
);
|
|
1459
|
-
|
|
1460
|
-
}
|
|
1461
|
-
const
|
|
1462
|
-
let g = !1,
|
|
1463
|
-
if (
|
|
1464
|
-
let
|
|
1465
|
-
const
|
|
1466
|
-
let
|
|
1467
|
-
if (
|
|
1468
|
-
|
|
1469
|
-
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);
|
|
1470
1540
|
try {
|
|
1471
|
-
|
|
1472
|
-
} catch (
|
|
1541
|
+
v = new Function("return " + k)();
|
|
1542
|
+
} catch (T) {
|
|
1473
1543
|
console.warn(
|
|
1474
|
-
`[MirageEngine] Failed to parse travel styles JSON: ${
|
|
1544
|
+
`[MirageEngine] Failed to parse travel styles JSON: ${k}`
|
|
1475
1545
|
);
|
|
1476
1546
|
}
|
|
1477
1547
|
}
|
|
1478
|
-
const
|
|
1479
|
-
let
|
|
1480
|
-
const
|
|
1481
|
-
if (
|
|
1482
|
-
g = !0,
|
|
1483
|
-
const
|
|
1484
|
-
if (
|
|
1485
|
-
|
|
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);
|
|
1486
1556
|
else {
|
|
1487
|
-
const
|
|
1488
|
-
|
|
1557
|
+
const T = x.find((oe) => !isNaN(parseInt(oe, 10)));
|
|
1558
|
+
T && (m = parseInt(T, 10));
|
|
1489
1559
|
}
|
|
1490
1560
|
}
|
|
1491
|
-
const
|
|
1492
|
-
if (
|
|
1493
|
-
const
|
|
1494
|
-
if (
|
|
1495
|
-
|
|
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);
|
|
1496
1566
|
else if (!g) {
|
|
1497
|
-
const
|
|
1498
|
-
|
|
1567
|
+
const T = x.find((oe) => !isNaN(parseInt(oe, 10)));
|
|
1568
|
+
T && (b = parseInt(T, 10));
|
|
1499
1569
|
}
|
|
1500
1570
|
}
|
|
1501
|
-
if (
|
|
1502
|
-
const
|
|
1503
|
-
if (
|
|
1571
|
+
if (X) {
|
|
1572
|
+
const k = m + 1;
|
|
1573
|
+
if (k < r)
|
|
1504
1574
|
throw new Error(
|
|
1505
|
-
`[MirageEngine] Traveler layer (${
|
|
1575
|
+
`[MirageEngine] Traveler layer (${m}) cannot be smaller than inherited capture layer (${r - 1}).`
|
|
1506
1576
|
);
|
|
1507
|
-
r = Math.min(
|
|
1577
|
+
r = Math.min(k, _.MAX_LAYERS + 1);
|
|
1508
1578
|
}
|
|
1509
1579
|
}
|
|
1510
|
-
const
|
|
1511
|
-
let
|
|
1512
|
-
|
|
1513
|
-
const
|
|
1514
|
-
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")
|
|
1515
1585
|
return null;
|
|
1516
|
-
let
|
|
1517
|
-
|
|
1518
|
-
const
|
|
1519
|
-
let
|
|
1520
|
-
if (
|
|
1521
|
-
|
|
1522
|
-
else if (
|
|
1523
|
-
const
|
|
1524
|
-
const
|
|
1525
|
-
|
|
1526
|
-
const
|
|
1527
|
-
|
|
1528
|
-
const
|
|
1529
|
-
|
|
1530
|
-
const
|
|
1531
|
-
|
|
1532
|
-
for (let
|
|
1533
|
-
|
|
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]);
|
|
1534
1604
|
};
|
|
1535
|
-
|
|
1536
|
-
const
|
|
1537
|
-
|
|
1538
|
-
let
|
|
1539
|
-
|
|
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(
|
|
1540
1610
|
"<svg",
|
|
1541
1611
|
'<svg xmlns="http://www.w3.org/2000/svg"'
|
|
1542
|
-
)),
|
|
1543
|
-
} else if (
|
|
1544
|
-
const
|
|
1545
|
-
|
|
1546
|
-
}
|
|
1547
|
-
const
|
|
1548
|
-
backgroundColor:
|
|
1549
|
-
backgroundImage:
|
|
1550
|
-
opacity:
|
|
1551
|
-
zIndex:
|
|
1552
|
-
borderRadius:
|
|
1553
|
-
borderColor:
|
|
1554
|
-
borderWidth:
|
|
1555
|
-
|
|
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,
|
|
1556
1627
|
isTraveler: g
|
|
1557
|
-
},
|
|
1558
|
-
let
|
|
1559
|
-
const
|
|
1560
|
-
return
|
|
1561
|
-
const
|
|
1562
|
-
|
|
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,
|
|
1563
1634
|
e,
|
|
1564
|
-
|
|
1635
|
+
A,
|
|
1565
1636
|
r,
|
|
1566
|
-
|
|
1637
|
+
V,
|
|
1567
1638
|
c,
|
|
1568
|
-
|
|
1569
|
-
|
|
1639
|
+
m.nodeType === Node.TEXT_NODE ? b : void 0,
|
|
1640
|
+
m.nodeType === Node.TEXT_NODE && Object.keys(v).length > 0 ? v : void 0
|
|
1570
1641
|
);
|
|
1571
|
-
|
|
1642
|
+
U && L.push(U);
|
|
1572
1643
|
}), {
|
|
1573
|
-
id:
|
|
1644
|
+
id: R,
|
|
1574
1645
|
type: "BOX",
|
|
1575
|
-
element:
|
|
1646
|
+
element: n,
|
|
1576
1647
|
rect: {
|
|
1577
|
-
x:
|
|
1578
|
-
y:
|
|
1579
|
-
width:
|
|
1580
|
-
height:
|
|
1648
|
+
x: D.left + window.scrollX,
|
|
1649
|
+
y: D.top + window.scrollY,
|
|
1650
|
+
width: D.width,
|
|
1651
|
+
height: D.height
|
|
1581
1652
|
},
|
|
1582
|
-
styles:
|
|
1583
|
-
textContent:
|
|
1584
|
-
textStyles:
|
|
1653
|
+
styles: P,
|
|
1654
|
+
textContent: J,
|
|
1655
|
+
textStyles: Z,
|
|
1585
1656
|
dirtyMask: e,
|
|
1586
1657
|
visibility: h,
|
|
1587
1658
|
isTraveler: g,
|
|
1588
1659
|
captureLayer: r,
|
|
1589
|
-
nativeLayer:
|
|
1590
|
-
nativeStyles:
|
|
1591
|
-
backgroundColor: (
|
|
1592
|
-
backgroundImage: (
|
|
1593
|
-
opacity: (
|
|
1594
|
-
zIndex:
|
|
1595
|
-
borderRadius: (
|
|
1596
|
-
borderColor: (
|
|
1597
|
-
borderWidth: (
|
|
1598
|
-
|
|
1599
|
-
|
|
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
|
|
1600
1672
|
}) : void 0,
|
|
1601
|
-
nativeRect:
|
|
1602
|
-
x:
|
|
1603
|
-
y:
|
|
1604
|
-
width:
|
|
1605
|
-
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
|
|
1606
1678
|
} : void 0,
|
|
1607
|
-
isFixed:
|
|
1608
|
-
children:
|
|
1609
|
-
shaderHooks:
|
|
1679
|
+
isFixed: S.position === "fixed",
|
|
1680
|
+
children: L,
|
|
1681
|
+
shaderHooks: I
|
|
1610
1682
|
};
|
|
1611
1683
|
}
|
|
1612
|
-
function
|
|
1684
|
+
function ot(i, e) {
|
|
1613
1685
|
e.size !== 0 && e.forEach((t, r) => {
|
|
1614
|
-
var c,
|
|
1615
|
-
const
|
|
1616
|
-
!
|
|
1686
|
+
var c, o, a, n;
|
|
1687
|
+
const s = i.get(r);
|
|
1688
|
+
!s || !s.userData.basePosition || (W.forceUpdateUniforms(s.material, {
|
|
1617
1689
|
backgroundColor: t.backgroundColor,
|
|
1618
1690
|
backgroundImage: t.backgroundImage,
|
|
1619
1691
|
opacity: t.opacity,
|
|
1620
|
-
borderRadius: (
|
|
1692
|
+
borderRadius: (o = t.borderRadius) != null ? o : (c = s.userData.baseStyles) == null ? void 0 : c.borderRadius
|
|
1621
1693
|
// width and height are no longer updated here, they are updated in syncMeshesByDOM
|
|
1622
|
-
}),
|
|
1694
|
+
}), s.userData.nativeMesh && W.forceUpdateUniforms(s.userData.nativeMesh.material, {
|
|
1623
1695
|
backgroundColor: t.backgroundColor,
|
|
1624
1696
|
backgroundImage: t.backgroundImage,
|
|
1625
1697
|
opacity: t.opacity,
|
|
1626
|
-
borderRadius: (
|
|
1698
|
+
borderRadius: (n = t.borderRadius) != null ? n : (a = s.userData.baseStyles) == null ? void 0 : a.borderRadius
|
|
1627
1699
|
}));
|
|
1628
1700
|
});
|
|
1629
1701
|
}
|
|
1630
|
-
class
|
|
1631
|
-
constructor(e, t, r,
|
|
1702
|
+
class at {
|
|
1703
|
+
constructor(e, t, r, s) {
|
|
1632
1704
|
p(this, "target");
|
|
1633
1705
|
p(this, "renderer");
|
|
1634
1706
|
p(this, "registry");
|
|
1635
1707
|
p(this, "isTravelEnabled", !1);
|
|
1636
1708
|
p(this, "tracker");
|
|
1637
|
-
this.target = e, this.renderer = t, this.registry = r, this.tracker = new
|
|
1638
|
-
resizeDebounce:
|
|
1639
|
-
}), this.tracker.onLayoutChange.add((c,
|
|
1640
|
-
document.querySelector(`[${
|
|
1641
|
-
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(
|
|
1642
1714
|
this.target,
|
|
1643
1715
|
c,
|
|
1644
|
-
|
|
1716
|
+
q,
|
|
1645
1717
|
1,
|
|
1646
1718
|
0,
|
|
1647
1719
|
this.renderer.qualityFactor
|
|
1648
1720
|
);
|
|
1649
|
-
|
|
1721
|
+
n && this.renderer.syncScene(n, o);
|
|
1650
1722
|
}), this.tracker.onStyleChange.add((c) => {
|
|
1651
|
-
|
|
1723
|
+
ot(this.registry, c);
|
|
1652
1724
|
}), this.tracker.onRender.add(() => {
|
|
1653
1725
|
this.renderer.syncMeshesByDOM(), this.renderer.render();
|
|
1654
1726
|
});
|
|
@@ -1685,30 +1757,30 @@ class nt {
|
|
|
1685
1757
|
this.store.delete(e);
|
|
1686
1758
|
}
|
|
1687
1759
|
}
|
|
1688
|
-
class
|
|
1760
|
+
class dt {
|
|
1689
1761
|
constructor(e, t) {
|
|
1690
1762
|
p(this, "renderer");
|
|
1691
1763
|
p(this, "syncer");
|
|
1692
1764
|
p(this, "target");
|
|
1693
1765
|
p(this, "registry");
|
|
1694
|
-
var
|
|
1766
|
+
var s, c, o;
|
|
1695
1767
|
if (this.target = e, this.registry = new nt(), !document.getElementById("mirage-engine-styles")) {
|
|
1696
|
-
const
|
|
1697
|
-
|
|
1698
|
-
[${
|
|
1768
|
+
const a = document.createElement("style");
|
|
1769
|
+
a.id = "mirage-engine-styles", a.textContent = `
|
|
1770
|
+
[${ee.NAME}="${ee.VALUES.HIDE}"] {
|
|
1699
1771
|
opacity: 0 !important;
|
|
1700
1772
|
}
|
|
1701
|
-
`, document.head.appendChild(
|
|
1773
|
+
`, document.head.appendChild(a);
|
|
1702
1774
|
}
|
|
1703
1775
|
let r;
|
|
1704
|
-
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)
|
|
1705
1777
|
throw new Error("[Mirage] Cannot find a container (parent or option).");
|
|
1706
|
-
this.renderer = new
|
|
1778
|
+
this.renderer = new it(
|
|
1707
1779
|
this.target,
|
|
1708
1780
|
t,
|
|
1709
1781
|
r,
|
|
1710
1782
|
this.registry
|
|
1711
|
-
), this.renderer.mount(), this.syncer = new
|
|
1783
|
+
), this.renderer.mount(), this.syncer = new at(this.target, this.renderer, this.registry, t);
|
|
1712
1784
|
}
|
|
1713
1785
|
start() {
|
|
1714
1786
|
this.syncer.start();
|
|
@@ -1745,32 +1817,32 @@ class ct {
|
|
|
1745
1817
|
}), window.addEventListener("keyup", (c) => {
|
|
1746
1818
|
t[c.key] !== void 0 && (t[c.key] = !1);
|
|
1747
1819
|
});
|
|
1748
|
-
const r = 2,
|
|
1749
|
-
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);
|
|
1750
1822
|
};
|
|
1751
|
-
|
|
1823
|
+
s();
|
|
1752
1824
|
}
|
|
1753
1825
|
}
|
|
1754
1826
|
export {
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
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,
|
|
1771
1843
|
F as THREE_LAYERS,
|
|
1772
1844
|
Ce as TRAVEL_VALUES,
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1845
|
+
He as Tracker,
|
|
1846
|
+
q as USER_LAYER,
|
|
1847
|
+
Pe as extractFromStyle
|
|
1776
1848
|
};
|