@ssgoi/core 7.3.0-beta.2 → 7.3.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/animation/frame-scheduler.d.ts +7 -25
- package/dist/animation/frame-scheduler.d.ts.map +1 -1
- package/dist/animation/host-animation.d.ts +3 -0
- package/dist/animation/host-animation.d.ts.map +1 -1
- package/dist/animation/multi-animation.d.ts.map +1 -1
- package/dist/animation/web-animation.d.ts +29 -25
- package/dist/animation/web-animation.d.ts.map +1 -1
- package/dist/animation/web-presentation.d.ts +14 -1
- package/dist/animation/web-presentation.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +2 -2
- package/dist/internal.cjs +1 -1
- package/dist/internal.js +727 -709
- package/dist/{retain-opacity-ChyA_fg_.js → retain-opacity-BVcRlLr1.js} +400 -440
- package/dist/retain-opacity-BrtENsD0.cjs +1 -0
- package/dist/ssgoi-transition/create-ssgoi-transition-context.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/retain-opacity-C5ajTKSI.cjs +0 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var h = (s,
|
|
4
|
-
import { A as
|
|
1
|
+
var ut = Object.defineProperty;
|
|
2
|
+
var dt = (s, n, t) => n in s ? ut(s, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[n] = t;
|
|
3
|
+
var h = (s, n, t) => dt(s, typeof n != "symbol" ? n + "" : n, t);
|
|
4
|
+
import { A as ft, c as U, a as pt, r as mt, i as gt, s as yt, I as vt } from "./provider-BLf6XeXT.js";
|
|
5
5
|
const j = {
|
|
6
6
|
reason: "finished",
|
|
7
7
|
owns: () => !0
|
|
8
8
|
};
|
|
9
|
-
class
|
|
9
|
+
class nt extends ft {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments);
|
|
12
12
|
h(this, "_startCondition");
|
|
@@ -60,72 +60,72 @@ class st extends ut {
|
|
|
60
60
|
throw new Error("This animation does not support replacing its integrator");
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
|
-
const
|
|
64
|
-
s[0] *
|
|
65
|
-
s[1] *
|
|
66
|
-
s[0] *
|
|
67
|
-
s[1] *
|
|
68
|
-
s[0] *
|
|
69
|
-
s[1] *
|
|
63
|
+
const L = [1, 0, 0, 1, 0, 0], rt = (s, n) => [
|
|
64
|
+
s[0] * n[0] + s[2] * n[1],
|
|
65
|
+
s[1] * n[0] + s[3] * n[1],
|
|
66
|
+
s[0] * n[2] + s[2] * n[3],
|
|
67
|
+
s[1] * n[2] + s[3] * n[3],
|
|
68
|
+
s[0] * n[4] + s[2] * n[5] + s[4],
|
|
69
|
+
s[1] * n[4] + s[3] * n[5] + s[5]
|
|
70
70
|
];
|
|
71
|
-
function
|
|
72
|
-
const
|
|
73
|
-
return Math.abs(
|
|
74
|
-
s[3] /
|
|
75
|
-
-s[1] /
|
|
76
|
-
-s[2] /
|
|
77
|
-
s[0] /
|
|
78
|
-
(s[2] * s[5] - s[3] * s[4]) /
|
|
79
|
-
(s[1] * s[4] - s[0] * s[5]) /
|
|
71
|
+
function J(s) {
|
|
72
|
+
const n = s[0] * s[3] - s[1] * s[2];
|
|
73
|
+
return Math.abs(n) < 1e-10 ? null : [
|
|
74
|
+
s[3] / n,
|
|
75
|
+
-s[1] / n,
|
|
76
|
+
-s[2] / n,
|
|
77
|
+
s[0] / n,
|
|
78
|
+
(s[2] * s[5] - s[3] * s[4]) / n,
|
|
79
|
+
(s[1] * s[4] - s[0] * s[5]) / n
|
|
80
80
|
];
|
|
81
81
|
}
|
|
82
|
-
const
|
|
83
|
-
function
|
|
84
|
-
if (!s || s === "none") return [...
|
|
85
|
-
let e = [...
|
|
82
|
+
const B = (s, n) => [1, 0, 0, 1, s, n], H = (s, n) => [s, 0, 0, n, 0, 0];
|
|
83
|
+
function bt(s, n, t) {
|
|
84
|
+
if (!s || s === "none") return [...L];
|
|
85
|
+
let e = [...L];
|
|
86
86
|
const i = /([a-zA-Z][a-zA-Z0-9]*)\(([^()]*)\)/g;
|
|
87
|
-
let
|
|
87
|
+
let l = "";
|
|
88
88
|
for (const c of s.matchAll(i)) {
|
|
89
|
-
|
|
90
|
-
const
|
|
91
|
-
if (
|
|
92
|
-
(
|
|
93
|
-
|
|
89
|
+
l += c[0];
|
|
90
|
+
const u = c[1].toLowerCase(), d = c[2].trim().split(/\s*,\s*|\s+/);
|
|
91
|
+
if (d.some(
|
|
92
|
+
(r) => !/^[-+]?(?:\d*\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?(?:px|%|deg|rad|turn)?$/i.test(
|
|
93
|
+
r
|
|
94
94
|
)
|
|
95
95
|
))
|
|
96
96
|
return null;
|
|
97
|
-
const m =
|
|
98
|
-
if (m.some((
|
|
99
|
-
const
|
|
100
|
-
var
|
|
101
|
-
return m[
|
|
102
|
-
},
|
|
103
|
-
var
|
|
104
|
-
return m[
|
|
97
|
+
const m = d.map(Number.parseFloat);
|
|
98
|
+
if (m.some((r) => !Number.isFinite(r))) return null;
|
|
99
|
+
const y = (r, g) => {
|
|
100
|
+
var a;
|
|
101
|
+
return m[r] * ((a = d[r]) != null && a.endsWith("%") ? g / 100 : 1);
|
|
102
|
+
}, f = (r) => {
|
|
103
|
+
var g, a;
|
|
104
|
+
return m[r] * ((g = d[r]) != null && g.endsWith("rad") ? 1 : (a = d[r]) != null && a.endsWith("turn") ? 2 * Math.PI : Math.PI / 180);
|
|
105
105
|
};
|
|
106
|
-
let
|
|
107
|
-
if (
|
|
108
|
-
else if (
|
|
109
|
-
if (
|
|
110
|
-
|
|
111
|
-
} else if (
|
|
112
|
-
else if (
|
|
113
|
-
else if (
|
|
114
|
-
else if (
|
|
115
|
-
else if (
|
|
116
|
-
else if (
|
|
117
|
-
else if (
|
|
118
|
-
const
|
|
119
|
-
|
|
106
|
+
let o;
|
|
107
|
+
if (u === "matrix" && m.length === 6) o = m;
|
|
108
|
+
else if (u === "translate" || u === "translate3d") {
|
|
109
|
+
if (u === "translate3d" && m[2] !== 0) return null;
|
|
110
|
+
o = B(y(0, n), d[1] ? y(1, t) : 0);
|
|
111
|
+
} else if (u === "translatex") o = B(y(0, n), 0);
|
|
112
|
+
else if (u === "translatey") o = B(0, y(0, t));
|
|
113
|
+
else if (u === "translatez" && m[0] === 0) o = [...L];
|
|
114
|
+
else if (u === "scale") o = H(m[0], m[1] ?? m[0]);
|
|
115
|
+
else if (u === "scalex") o = H(m[0], 1);
|
|
116
|
+
else if (u === "scaley") o = H(1, m[0]);
|
|
117
|
+
else if (u === "rotate" || u === "rotatez") {
|
|
118
|
+
const r = f(0);
|
|
119
|
+
o = [Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0];
|
|
120
120
|
} else return null;
|
|
121
|
-
e =
|
|
121
|
+
e = rt(e, o);
|
|
122
122
|
}
|
|
123
|
-
return
|
|
123
|
+
return l.replace(/\s/g, "") === s.replace(/\s/g, "") ? e : null;
|
|
124
124
|
}
|
|
125
|
-
function
|
|
126
|
-
return { schema: s, value:
|
|
125
|
+
function Q(s, n) {
|
|
126
|
+
return { schema: s, value: n, velocity: n.map(() => 0) };
|
|
127
127
|
}
|
|
128
|
-
const
|
|
128
|
+
const tt = /[-+]?(?:\d*\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/gi, _ = (s) => [
|
|
129
129
|
s[0],
|
|
130
130
|
s[2],
|
|
131
131
|
s[4],
|
|
@@ -136,175 +136,140 @@ const Q = /[-+]?(?:\d*\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/gi, M = (s) => [
|
|
|
136
136
|
0,
|
|
137
137
|
1
|
|
138
138
|
];
|
|
139
|
-
function
|
|
139
|
+
function P(s, n) {
|
|
140
140
|
return Array.from({ length: 9 }, (t, e) => {
|
|
141
|
-
const i = Math.floor(e / 3),
|
|
142
|
-
return s[i * 3] *
|
|
141
|
+
const i = Math.floor(e / 3), l = e % 3;
|
|
142
|
+
return s[i * 3] * n[l] + s[i * 3 + 1] * n[l + 3] + s[i * 3 + 2] * n[l + 6];
|
|
143
143
|
});
|
|
144
144
|
}
|
|
145
|
-
function
|
|
146
|
-
return Math.abs(s[8]) < 1e-8 || !s.every(Number.isFinite) ? null : s.map((
|
|
145
|
+
function ot(s) {
|
|
146
|
+
return Math.abs(s[8]) < 1e-8 || !s.every(Number.isFinite) ? null : s.map((n) => n / s[8]);
|
|
147
147
|
}
|
|
148
|
-
function
|
|
149
|
-
const e =
|
|
150
|
-
if (e) return
|
|
148
|
+
function et(s, n, t) {
|
|
149
|
+
const e = bt(s, n, t);
|
|
150
|
+
if (e) return _(e);
|
|
151
151
|
if (typeof DOMMatrix > "u") return null;
|
|
152
152
|
const i = s.replace(
|
|
153
153
|
/(translate(?:3d|X|Y)?)\(([^()]*)\)/gi,
|
|
154
|
-
(
|
|
155
|
-
const
|
|
154
|
+
(l, c, u) => {
|
|
155
|
+
const d = u.split(/\s*,\s*|\s+/).map((m, y) => {
|
|
156
156
|
if (!m.endsWith("%")) return m;
|
|
157
|
-
const
|
|
158
|
-
return `${Number.parseFloat(m) *
|
|
157
|
+
const f = c.toLowerCase() === "translatey" || y === 1 ? t : n;
|
|
158
|
+
return `${Number.parseFloat(m) * f / 100}px`;
|
|
159
159
|
});
|
|
160
|
-
return `${c}(${
|
|
160
|
+
return `${c}(${d.join(",")})`;
|
|
161
161
|
}
|
|
162
162
|
);
|
|
163
163
|
try {
|
|
164
|
-
const
|
|
165
|
-
return
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
164
|
+
const l = new DOMMatrix(i);
|
|
165
|
+
return ot([
|
|
166
|
+
l.m11,
|
|
167
|
+
l.m21,
|
|
168
|
+
l.m41,
|
|
169
|
+
l.m12,
|
|
170
|
+
l.m22,
|
|
171
|
+
l.m42,
|
|
172
|
+
l.m14,
|
|
173
|
+
l.m24,
|
|
174
|
+
l.m44
|
|
175
175
|
]);
|
|
176
176
|
} catch {
|
|
177
177
|
return null;
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
|
-
const
|
|
181
|
-
function
|
|
182
|
-
var
|
|
183
|
-
const
|
|
184
|
-
let d = !0;
|
|
185
|
-
if (typeof getComputedStyle == "function")
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
180
|
+
const st = "viewport-plane-v1";
|
|
181
|
+
function E(s, n) {
|
|
182
|
+
var X;
|
|
183
|
+
const t = s.offsetWidth || 1, e = s.offsetHeight || 1, i = typeof getComputedStyle == "function" ? getComputedStyle(s) : null, l = ((i == null ? void 0 : i.transformOrigin) || `${t / 2}px ${e / 2}px`).split(" "), c = Number.parseFloat(l[0]) || 0, u = Number.parseFloat(l[1]) || 0;
|
|
184
|
+
let d = !0, m = !!n && n.container !== s && n.container.contains(s) && (i == null ? void 0 : i.position) !== "fixed";
|
|
185
|
+
if (typeof getComputedStyle == "function") {
|
|
186
|
+
let S = m;
|
|
187
|
+
for (let w = s.parentElement; w; w = w.parentElement) {
|
|
188
|
+
w === (n == null ? void 0 : n.container) && (S = !1);
|
|
189
|
+
const C = getComputedStyle(w);
|
|
190
|
+
if (S && C.position === "fixed" && (m = !1), C.transform && C.transform !== "none" || C.perspective && C.perspective !== "none") {
|
|
189
191
|
d = !1;
|
|
190
192
|
break;
|
|
191
193
|
}
|
|
192
194
|
}
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
195
|
+
}
|
|
196
|
+
const y = m ? n.container.scrollLeft - n.x : 0, f = m ? n.container.scrollTop - n.y : 0, o = (X = s.getBoundingClientRect) == null ? void 0 : X.call(s), r = et((i == null ? void 0 : i.transform) || "", t, e) ?? _(L), g = P(
|
|
197
|
+
P(_(B(c, u)), r),
|
|
198
|
+
_(B(-c, -u))
|
|
199
|
+
), a = [
|
|
197
200
|
[0, 0],
|
|
198
|
-
[
|
|
199
|
-
[0,
|
|
200
|
-
[
|
|
201
|
-
].map(([
|
|
202
|
-
const
|
|
201
|
+
[t, 0],
|
|
202
|
+
[0, e],
|
|
203
|
+
[t, e]
|
|
204
|
+
].map(([S, w]) => {
|
|
205
|
+
const C = g[6] * S + g[7] * w + g[8];
|
|
203
206
|
return [
|
|
204
|
-
(g[0] *
|
|
205
|
-
(g[3] *
|
|
207
|
+
(g[0] * S + g[1] * w + g[2]) / C,
|
|
208
|
+
(g[3] * S + g[4] * w + g[5]) / C
|
|
206
209
|
];
|
|
207
|
-
}),
|
|
210
|
+
}), p = ((o == null ? void 0 : o.left) ?? 0) + y - Math.min(...a.map((S) => S[0])), v = ((o == null ? void 0 : o.top) ?? 0) + f - Math.min(...a.map((S) => S[1])), k = B(p + c, v + u), Z = rt(B(-c, -u), H(t, e)), ht = _(J(k)), ct = _(J(Z));
|
|
208
211
|
return {
|
|
209
|
-
frame: d ? { left:
|
|
210
|
-
read(
|
|
211
|
-
const
|
|
212
|
-
for (const [
|
|
213
|
-
const
|
|
214
|
-
if (
|
|
212
|
+
frame: d ? { left: p, top: v, width: t, height: e } : void 0,
|
|
213
|
+
read(S) {
|
|
214
|
+
const w = {};
|
|
215
|
+
for (const [C, A] of Object.entries(S)) {
|
|
216
|
+
const M = String(A);
|
|
217
|
+
if (C === "transform") {
|
|
215
218
|
if (!d) continue;
|
|
216
|
-
const R =
|
|
217
|
-
if (
|
|
218
|
-
const [
|
|
219
|
-
if (
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
Math.atan2(
|
|
224
|
-
|
|
225
|
-
(
|
|
226
|
-
(
|
|
227
|
-
|
|
228
|
-
|
|
219
|
+
const R = et(M, t, e), T = R && ot(P(P(_(k), R), _(Z)));
|
|
220
|
+
if (T) {
|
|
221
|
+
const [N, q, I, O, V, x, D, b] = T, z = N - I * D, W = O - x * D, Y = q - I * b, G = V - x * b, $ = Math.hypot(z, W);
|
|
222
|
+
if ($ > 1e-8) {
|
|
223
|
+
w[C] = Q(st, [
|
|
224
|
+
I,
|
|
225
|
+
x,
|
|
226
|
+
Math.atan2(W, z),
|
|
227
|
+
$,
|
|
228
|
+
(z * G - W * Y) / $,
|
|
229
|
+
(z * Y + W * G) / $,
|
|
230
|
+
D,
|
|
231
|
+
b
|
|
229
232
|
]);
|
|
230
233
|
continue;
|
|
231
234
|
}
|
|
232
235
|
}
|
|
233
236
|
}
|
|
234
|
-
const
|
|
237
|
+
const F = [...M.matchAll(tt)].map(
|
|
235
238
|
(R) => Number(R[0])
|
|
236
239
|
);
|
|
237
|
-
|
|
238
|
-
`css:${
|
|
239
|
-
|
|
240
|
+
F.length && F.every(Number.isFinite) && (w[C] = Q(
|
|
241
|
+
`css:${M.replace(tt, "#")}`,
|
|
242
|
+
F
|
|
240
243
|
));
|
|
241
244
|
}
|
|
242
|
-
return
|
|
245
|
+
return w;
|
|
243
246
|
},
|
|
244
|
-
write(
|
|
245
|
-
const
|
|
246
|
-
for (const [
|
|
247
|
-
if (
|
|
248
|
-
const [
|
|
249
|
-
V *
|
|
250
|
-
V *
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
247
|
+
write(S) {
|
|
248
|
+
const w = {};
|
|
249
|
+
for (const [C, A] of Object.entries(S))
|
|
250
|
+
if (C === "transform" && A.schema === st) {
|
|
251
|
+
const [M, F, R, T, N, q, I, O] = A.value, V = Math.cos(R), x = Math.sin(R), D = [
|
|
252
|
+
V * T + M * I,
|
|
253
|
+
V * q - x * N + M * O,
|
|
254
|
+
M,
|
|
255
|
+
x * T + F * I,
|
|
256
|
+
x * q + V * N + F * O,
|
|
257
|
+
F,
|
|
258
|
+
I,
|
|
256
259
|
O,
|
|
257
260
|
1
|
|
258
|
-
],
|
|
259
|
-
Math.abs(
|
|
261
|
+
], b = P(P(ht, D), ct);
|
|
262
|
+
Math.abs(b[6]) + Math.abs(b[7]) < 1e-10 && Math.abs(b[8] - 1) < 1e-10 ? w[C] = `matrix(${[b[0], b[3], b[1], b[4], b[2], b[5]].join(",")})` : w[C] = `matrix3d(${[b[0], b[3], 0, b[6], b[1], b[4], 0, b[7], 0, 0, 1, 0, b[2], b[5], 0, b[8]].join(",")})`;
|
|
260
263
|
} else if (A.schema.startsWith("css:")) {
|
|
261
|
-
let
|
|
262
|
-
|
|
264
|
+
let M = 0;
|
|
265
|
+
w[C] = A.schema.slice(4).replace(/#/g, () => String(A.value[M++]));
|
|
263
266
|
}
|
|
264
|
-
return
|
|
267
|
+
return w;
|
|
265
268
|
}
|
|
266
269
|
};
|
|
267
270
|
}
|
|
268
|
-
const
|
|
269
|
-
class
|
|
270
|
-
constructor() {
|
|
271
|
-
h(this, "drivers", /* @__PURE__ */ new Set());
|
|
272
|
-
h(this, "observers", /* @__PURE__ */ new Set());
|
|
273
|
-
h(this, "frameRequest", null);
|
|
274
|
-
h(this, "previousTimestamp", null);
|
|
275
|
-
h(this, "tick", (r) => {
|
|
276
|
-
this.frameRequest = null;
|
|
277
|
-
const t = this.previousTimestamp === null ? vt : Math.max(0, r - this.previousTimestamp);
|
|
278
|
-
this.previousTimestamp = r;
|
|
279
|
-
const e = {
|
|
280
|
-
delta: Math.min(t, nt),
|
|
281
|
-
rawDelta: t
|
|
282
|
-
};
|
|
283
|
-
this.runPhase(this.drivers, e), this.runPhase(this.observers, e), this.hasCallbacks() ? this.requestFrame() : this.previousTimestamp = null;
|
|
284
|
-
});
|
|
285
|
-
}
|
|
286
|
-
subscribe(r, t = "drive") {
|
|
287
|
-
const e = t === "drive" ? this.drivers : this.observers;
|
|
288
|
-
return e.add(r), this.requestFrame(), () => {
|
|
289
|
-
e.delete(r), this.stopIfIdle();
|
|
290
|
-
};
|
|
291
|
-
}
|
|
292
|
-
requestFrame() {
|
|
293
|
-
this.frameRequest !== null || !this.hasCallbacks() || (this.frameRequest = requestAnimationFrame(this.tick));
|
|
294
|
-
}
|
|
295
|
-
runPhase(r, t) {
|
|
296
|
-
for (const e of [...r])
|
|
297
|
-
r.has(e) && e(t);
|
|
298
|
-
}
|
|
299
|
-
hasCallbacks() {
|
|
300
|
-
return this.drivers.size > 0 || this.observers.size > 0;
|
|
301
|
-
}
|
|
302
|
-
stopIfIdle() {
|
|
303
|
-
this.hasCallbacks() || (this.frameRequest !== null && typeof cancelAnimationFrame < "u" && cancelAnimationFrame(this.frameRequest), this.frameRequest = null, this.previousTimestamp = null);
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
const at = new St(), Ct = 2;
|
|
307
|
-
class ot extends st {
|
|
271
|
+
const wt = 1e3 / 60;
|
|
272
|
+
class at extends nt {
|
|
308
273
|
constructor(t) {
|
|
309
274
|
super();
|
|
310
275
|
h(this, "_element");
|
|
@@ -323,11 +288,6 @@ class ot extends st {
|
|
|
323
288
|
h(this, "frames", []);
|
|
324
289
|
h(this, "waapi", null);
|
|
325
290
|
h(this, "runId", 0);
|
|
326
|
-
h(this, "waitingForStart", !1);
|
|
327
|
-
h(this, "startReady", !1);
|
|
328
|
-
h(this, "pendingFirstFrame");
|
|
329
|
-
h(this, "stopStartupClock", null);
|
|
330
|
-
h(this, "startupStableFrames", 0);
|
|
331
291
|
h(this, "running", !1);
|
|
332
292
|
h(this, "paused", !1);
|
|
333
293
|
h(this, "settled", !1);
|
|
@@ -336,6 +296,7 @@ class ot extends st {
|
|
|
336
296
|
h(this, "legacyCompletionCleanup");
|
|
337
297
|
h(this, "motion");
|
|
338
298
|
h(this, "codec");
|
|
299
|
+
h(this, "viewport");
|
|
339
300
|
h(this, "adopted");
|
|
340
301
|
h(this, "presentationFrames", []);
|
|
341
302
|
h(this, "hold", null);
|
|
@@ -372,11 +333,7 @@ class ot extends st {
|
|
|
372
333
|
var e;
|
|
373
334
|
const t = this.reversing;
|
|
374
335
|
if (this.reversing = !1, this.paused && this.waapi && !t) {
|
|
375
|
-
|
|
376
|
-
this.startReady && this.startFramePacedPlayback(this.waapi);
|
|
377
|
-
return;
|
|
378
|
-
}
|
|
379
|
-
this.waapi.play(), (e = this.fallbackCopy) == null || e.play();
|
|
336
|
+
this.paused = !1, this.running = !0, this.waapi.play(), (e = this.fallbackCopy) == null || e.play();
|
|
380
337
|
return;
|
|
381
338
|
}
|
|
382
339
|
this.runToward(this.upperBound);
|
|
@@ -385,8 +342,8 @@ class ot extends st {
|
|
|
385
342
|
this.reversing = !0, this.runToward(this.lowerBound);
|
|
386
343
|
}
|
|
387
344
|
pause() {
|
|
388
|
-
var t, e
|
|
389
|
-
this.running && (this.captureLiveState(), (t = this.waapi) == null || t.pause(), (e = this.fallbackCopy) == null || e.pause(),
|
|
345
|
+
var t, e;
|
|
346
|
+
this.running && (this.captureLiveState(), (t = this.waapi) == null || t.pause(), (e = this.fallbackCopy) == null || e.pause(), this.running = !1, this.paused = !0);
|
|
390
347
|
}
|
|
391
348
|
complete() {
|
|
392
349
|
this.settled || (this.clearWaapi(), this.running = !1, this.paused = !1, this.currentValue = this.upperBound, this.currentVelocity = 0, this.applyStyleAt(this.currentValue), this.settled = !0, this.finish());
|
|
@@ -421,8 +378,8 @@ class ot extends st {
|
|
|
421
378
|
}
|
|
422
379
|
}
|
|
423
380
|
finish() {
|
|
424
|
-
var t, e, i,
|
|
425
|
-
this.presentationTime = ((t = this.frames[this.frames.length - 1]) == null ? void 0 : t.time) ?? 0, this.solverState = void 0, (e = this.hold) == null || e.cancel(), this.hold = null, this.applyStyleAt(this.currentValue), this.clearWaapi(), (i = this.fallbackCopy) == null || i.cancel({ reason: "disposed", owns: () => !0 }), this.fallbackCopy = null, this.deferDisposal || this.disposeResources(j), (
|
|
381
|
+
var t, e, i, l;
|
|
382
|
+
this.presentationTime = ((t = this.frames[this.frames.length - 1]) == null ? void 0 : t.time) ?? 0, this.solverState = void 0, (e = this.hold) == null || e.cancel(), this.hold = null, this.applyStyleAt(this.currentValue), this.clearWaapi(), (i = this.fallbackCopy) == null || i.cancel({ reason: "disposed", owns: () => !0 }), this.fallbackCopy = null, this.deferDisposal || this.disposeResources(j), (l = this.onComplete) == null || l.call(this);
|
|
426
383
|
}
|
|
427
384
|
get motionIdentity() {
|
|
428
385
|
return {
|
|
@@ -433,18 +390,31 @@ class ot extends st {
|
|
|
433
390
|
lifetime: this.motion.lifetime
|
|
434
391
|
};
|
|
435
392
|
}
|
|
393
|
+
/**
|
|
394
|
+
* Read the element's rendered box while the scene is laid out for this run.
|
|
395
|
+
* The next navigation snapshots this track only after the framework has
|
|
396
|
+
* unmounted the element or an Activity hide has taken it out of flow, so a
|
|
397
|
+
* box measured at that point is empty or shifted and the handoff would
|
|
398
|
+
* decode the pose against the wrong frame. Playback never needs this; an
|
|
399
|
+
* uninterrupted run still decodes nothing.
|
|
400
|
+
*/
|
|
401
|
+
measure(t) {
|
|
402
|
+
if (this.viewport = t ?? this.viewport, this.codec) return;
|
|
403
|
+
const e = this._element;
|
|
404
|
+
!e.isConnected || !(e.offsetWidth || e.offsetHeight) || (this.codec = this.motion.codec ?? E(e, this.viewport));
|
|
405
|
+
}
|
|
436
406
|
/** Final output, including any earlier residual, is the next handoff's source. */
|
|
437
407
|
getMotionSnapshot() {
|
|
438
|
-
var
|
|
408
|
+
var l, c;
|
|
439
409
|
this.running && this.captureLiveState();
|
|
440
410
|
const t = this.samplePresentation(
|
|
441
|
-
|
|
442
|
-
), e = this.paused
|
|
411
|
+
it(this.waapi) ?? this.presentationTime
|
|
412
|
+
), e = this.paused ? 0 : this.playbackRate, i = {
|
|
443
413
|
...this.styleFn(
|
|
444
414
|
this.currentValue,
|
|
445
415
|
this.lowerBound + this.upperBound - this.currentValue
|
|
446
416
|
),
|
|
447
|
-
...(
|
|
417
|
+
...(l = this.codec) == null ? void 0 : l.write(t)
|
|
448
418
|
};
|
|
449
419
|
return {
|
|
450
420
|
...this.motionIdentity,
|
|
@@ -452,19 +422,19 @@ class ot extends st {
|
|
|
452
422
|
inlineStyle: this.element.style.cssText,
|
|
453
423
|
frame: (c = this.codec) == null ? void 0 : c.frame,
|
|
454
424
|
channels: Object.fromEntries(
|
|
455
|
-
Object.entries(t).map(([
|
|
456
|
-
|
|
425
|
+
Object.entries(t).map(([u, d]) => [
|
|
426
|
+
u,
|
|
457
427
|
{
|
|
458
|
-
...
|
|
459
|
-
velocity:
|
|
428
|
+
...d,
|
|
429
|
+
velocity: d.velocity.map((m) => m * e)
|
|
460
430
|
}
|
|
461
431
|
])
|
|
462
432
|
)
|
|
463
433
|
};
|
|
464
434
|
}
|
|
465
435
|
adopt(t) {
|
|
466
|
-
var
|
|
467
|
-
this.codec ?? (this.codec = this.motion.codec ??
|
|
436
|
+
var u, d, m, y, f;
|
|
437
|
+
this.codec ?? (this.codec = this.motion.codec ?? E(this.element, this.viewport)), this.adopted = t;
|
|
468
438
|
const e = this.codec.read({
|
|
469
439
|
transform: "none",
|
|
470
440
|
opacity: 1,
|
|
@@ -477,51 +447,51 @@ class ot extends st {
|
|
|
477
447
|
const i = this.styleFn(
|
|
478
448
|
this.currentValue,
|
|
479
449
|
this.lowerBound + this.upperBound - this.currentValue
|
|
480
|
-
),
|
|
481
|
-
for (const [
|
|
482
|
-
|
|
483
|
-
for (const [
|
|
484
|
-
const
|
|
485
|
-
|
|
450
|
+
), l = t.displayStyle;
|
|
451
|
+
for (const [o, r] of Object.entries(l ?? {}))
|
|
452
|
+
o in i && String(r) !== String(i[o]) && (!t.channels[o] || !e[o]) && this.fallbackChannels.add(o);
|
|
453
|
+
for (const [o, r] of Object.entries(t.channels)) {
|
|
454
|
+
const g = e[o];
|
|
455
|
+
g && !U(r, g) && this.fallbackChannels.add(o);
|
|
486
456
|
}
|
|
487
457
|
if (this.fallbackChannels.size && (this.fallbackMode = "finish"), this.fallbackChannels.size && this.motion.fallback !== "finish") {
|
|
488
|
-
const
|
|
489
|
-
if (
|
|
490
|
-
|
|
458
|
+
const o = t;
|
|
459
|
+
if (o.frame && o.displayStyle && t.target.cloneNode && t.target.parentElement && !t.target.shadowRoot && !((d = (u = t.target).matches) != null && d.call(
|
|
460
|
+
u,
|
|
491
461
|
"canvas, video, audio, iframe, object, embed"
|
|
492
|
-
)) && !((
|
|
462
|
+
)) && !((y = (m = t.target).querySelector) != null && y.call(
|
|
493
463
|
m,
|
|
494
464
|
"canvas, video, audio, iframe, object, embed"
|
|
495
465
|
))) {
|
|
496
466
|
this.fallbackMode = "crossfade";
|
|
497
|
-
const
|
|
498
|
-
|
|
499
|
-
for (const
|
|
467
|
+
const r = t.target.cloneNode(!0);
|
|
468
|
+
r.removeAttribute("id"), r.removeAttribute("data-ssgoi-transition");
|
|
469
|
+
for (const a of r.querySelectorAll(
|
|
500
470
|
"[id], [data-ssgoi-transition]"
|
|
501
471
|
))
|
|
502
|
-
|
|
503
|
-
|
|
472
|
+
a.removeAttribute("id"), a.removeAttribute("data-ssgoi-transition");
|
|
473
|
+
r.style.cssText = o.inlineStyle ?? "", Object.assign(r.style, o.displayStyle, {
|
|
504
474
|
position: "fixed",
|
|
505
|
-
left: `${
|
|
506
|
-
top: `${
|
|
507
|
-
width: `${
|
|
508
|
-
height: `${
|
|
475
|
+
left: `${o.frame.left}px`,
|
|
476
|
+
top: `${o.frame.top}px`,
|
|
477
|
+
width: `${o.frame.width}px`,
|
|
478
|
+
height: `${o.frame.height}px`,
|
|
509
479
|
margin: "0",
|
|
510
480
|
pointerEvents: "none",
|
|
511
481
|
zIndex: "2147483646"
|
|
512
|
-
}),
|
|
513
|
-
const
|
|
514
|
-
this.fallbackCopy = new
|
|
515
|
-
element:
|
|
482
|
+
}), r.setAttribute("aria-hidden", "true"), r.inert = !0, t.target.parentElement.appendChild(r);
|
|
483
|
+
const g = Number(o.displayStyle.opacity ?? 1);
|
|
484
|
+
this.fallbackCopy = new at({
|
|
485
|
+
element: r,
|
|
516
486
|
integrator: {
|
|
517
|
-
step: (
|
|
518
|
-
position: Math.min(
|
|
487
|
+
step: (a, p, v) => ({
|
|
488
|
+
position: Math.min(p, a.position + v / 0.18),
|
|
519
489
|
velocity: 0
|
|
520
490
|
}),
|
|
521
|
-
isSettled: (
|
|
491
|
+
isSettled: (a, p) => a.position >= p
|
|
522
492
|
},
|
|
523
|
-
style: (
|
|
524
|
-
onDispose: () =>
|
|
493
|
+
style: (a, p) => ({ opacity: g * p }),
|
|
494
|
+
onDispose: () => r.remove()
|
|
525
495
|
}), this.adopted = {
|
|
526
496
|
...t,
|
|
527
497
|
channels: {
|
|
@@ -532,7 +502,7 @@ class ot extends st {
|
|
|
532
502
|
}
|
|
533
503
|
}
|
|
534
504
|
const c = this.codec.write(this.adopted.channels);
|
|
535
|
-
(
|
|
505
|
+
(f = this.hold) == null || f.cancel(), Object.keys(c).length && (this.hold = this.element.animate([c, c], {
|
|
536
506
|
duration: 1,
|
|
537
507
|
fill: "both"
|
|
538
508
|
}), this.hold.pause(), this.hold.currentTime = 0);
|
|
@@ -542,7 +512,7 @@ class ot extends st {
|
|
|
542
512
|
const e = this.presentationFrames[t];
|
|
543
513
|
if (e) return e.channels;
|
|
544
514
|
const i = this.frames[t];
|
|
545
|
-
return this.codec ?? (this.codec = this.motion.codec ??
|
|
515
|
+
return this.codec ?? (this.codec = this.motion.codec ?? E(this.element, this.viewport)), this.codec.read({
|
|
546
516
|
transform: "none",
|
|
547
517
|
opacity: 1,
|
|
548
518
|
...this.styleFn(
|
|
@@ -554,7 +524,7 @@ class ot extends st {
|
|
|
554
524
|
samplePresentation(t) {
|
|
555
525
|
const e = this.frames;
|
|
556
526
|
if (!e.length)
|
|
557
|
-
return this.adopted ? { ...this.adopted.channels } : (this.codec ?? (this.codec = this.motion.codec ??
|
|
527
|
+
return this.adopted ? { ...this.adopted.channels } : (this.codec ?? (this.codec = this.motion.codec ?? E(this.element, this.viewport)), this.codec.read({
|
|
558
528
|
transform: "none",
|
|
559
529
|
opacity: 1,
|
|
560
530
|
...this.styleFn(
|
|
@@ -562,24 +532,24 @@ class ot extends st {
|
|
|
562
532
|
this.lowerBound + this.upperBound - this.currentValue
|
|
563
533
|
)
|
|
564
534
|
}));
|
|
565
|
-
let i = e.findIndex((
|
|
535
|
+
let i = e.findIndex((r) => r.time > t);
|
|
566
536
|
i < 0 && (i = e.length - 1);
|
|
567
|
-
const
|
|
568
|
-
for (const [
|
|
569
|
-
const
|
|
570
|
-
if (!
|
|
571
|
-
|
|
537
|
+
const l = Math.max(0, i - 1), c = e[l], u = e[i], d = this.channelsAt(l), m = l === i ? d : this.channelsAt(i), y = (u.time - c.time) / 1e3, f = y ? Math.max(0, Math.min(1, (t - c.time) / (y * 1e3))) : 0, o = {};
|
|
538
|
+
for (const [r, g] of Object.entries(d)) {
|
|
539
|
+
const a = m[r];
|
|
540
|
+
if (!a || !U(g, a)) {
|
|
541
|
+
o[r] = g;
|
|
572
542
|
continue;
|
|
573
543
|
}
|
|
574
|
-
|
|
575
|
-
schema:
|
|
576
|
-
value:
|
|
577
|
-
velocity:
|
|
578
|
-
(
|
|
544
|
+
o[r] = {
|
|
545
|
+
schema: g.schema,
|
|
546
|
+
value: g.value.map((p, v) => p + (a.value[v] - p) * f),
|
|
547
|
+
velocity: g.value.map(
|
|
548
|
+
(p, v) => t >= e[e.length - 1].time || !y ? 0 : (a.value[v] - p) / y
|
|
579
549
|
)
|
|
580
550
|
};
|
|
581
551
|
}
|
|
582
|
-
return
|
|
552
|
+
return o;
|
|
583
553
|
}
|
|
584
554
|
/**
|
|
585
555
|
* Drop the WAAPI forwards-fill after the run has settled, letting inline
|
|
@@ -635,12 +605,12 @@ class ot extends st {
|
|
|
635
605
|
}
|
|
636
606
|
getTimeline() {
|
|
637
607
|
const t = this.frames.map((e, i) => {
|
|
638
|
-
const
|
|
608
|
+
const l = e.position, c = this.lowerBound + this.upperBound - l;
|
|
639
609
|
return {
|
|
640
610
|
time: e.time,
|
|
641
611
|
value: e.position,
|
|
642
612
|
velocity: e.velocity,
|
|
643
|
-
style: this.renderedStyles[i] ?? this.styleFn(
|
|
613
|
+
style: this.renderedStyles[i] ?? this.styleFn(l, c)
|
|
644
614
|
};
|
|
645
615
|
});
|
|
646
616
|
return [{ element: this._element, frames: t }];
|
|
@@ -651,12 +621,12 @@ class ot extends st {
|
|
|
651
621
|
}
|
|
652
622
|
/* ───────────────────────────────────────────────────────── private */
|
|
653
623
|
runToward(t) {
|
|
654
|
-
var m,
|
|
624
|
+
var m, y;
|
|
655
625
|
if (this.validate(), this.running || this.paused) {
|
|
656
|
-
const
|
|
657
|
-
this.captureLiveState(), this.adopted =
|
|
626
|
+
const f = this.getMotionSnapshot();
|
|
627
|
+
this.captureLiveState(), this.adopted = f;
|
|
658
628
|
}
|
|
659
|
-
if (this.clearWaapi(), this.running = !1, this.paused = !1, this.settled = !1, this.disposed = !1, this.presentationTime = 0, this.presentationFrames = [], this.solverTarget = t, this.frames =
|
|
629
|
+
if (this.clearWaapi(), this.running = !1, this.paused = !1, this.settled = !1, this.disposed = !1, this.presentationTime = 0, this.presentationFrames = [], this.solverTarget = t, this.frames = pt(
|
|
660
630
|
this._integrator,
|
|
661
631
|
this.currentValue,
|
|
662
632
|
t,
|
|
@@ -667,19 +637,19 @@ class ot extends st {
|
|
|
667
637
|
this.currentValue = t, this.currentVelocity = 0, this.applyStyleAt(t), this.settled = !0, this.finish();
|
|
668
638
|
return;
|
|
669
639
|
}
|
|
670
|
-
const e = (
|
|
640
|
+
const e = (f) => this.styleFn(f.position, this.lowerBound + this.upperBound - f.position), i = this.adopted ? this.bridgeKeyframes(e) : this.frames.map((f) => e(f));
|
|
671
641
|
this.renderedStyles = i, this.adopted = void 0;
|
|
672
|
-
const
|
|
642
|
+
const l = i[0], c = this.frames[this.frames.length - 1], u = c.time;
|
|
673
643
|
this.runId++;
|
|
674
|
-
const
|
|
675
|
-
duration:
|
|
644
|
+
const d = this._element.animate(i, {
|
|
645
|
+
duration: u,
|
|
676
646
|
fill: "both",
|
|
677
647
|
easing: "linear",
|
|
678
648
|
composite: "replace"
|
|
679
649
|
});
|
|
680
|
-
|
|
681
|
-
!this.running || this.waapi !==
|
|
682
|
-
}, this.
|
|
650
|
+
d.playbackRate = this.playbackRate, this.waapi = d, (m = this.fallbackCopy) == null || m.play(), (y = this.hold) == null || y.cancel(), this.hold = null, this.running = !0, d.onfinish = () => {
|
|
651
|
+
!this.running || this.waapi !== d || (this.running = !1, this.settled = !0, this.currentValue = c.position, this.currentVelocity = 0, this.finish());
|
|
652
|
+
}, this.clearInlineStyle(l), this.beginPlayback(d, u);
|
|
683
653
|
}
|
|
684
654
|
/**
|
|
685
655
|
* Bake the residual correction into the keyframes: each authored frame is
|
|
@@ -688,159 +658,151 @@ class ot extends st {
|
|
|
688
658
|
* interruption samples what is actually displayed.
|
|
689
659
|
*/
|
|
690
660
|
bridgeKeyframes(t) {
|
|
691
|
-
var
|
|
692
|
-
this.codec = this.motion.codec ??
|
|
693
|
-
const e = this.codec, i = Math.max(16, this.motion.handoffDuration ?? 280),
|
|
694
|
-
for (let
|
|
695
|
-
this.frames.push({ time:
|
|
661
|
+
var y;
|
|
662
|
+
this.codec = this.motion.codec ?? E(this.element, this.viewport);
|
|
663
|
+
const e = this.codec, i = Math.max(16, this.motion.handoffDuration ?? 280), l = this.frames[this.frames.length - 1];
|
|
664
|
+
for (let f = l.time + 1e3 / 60; f < i + 1e3 / 60; f += 1e3 / 60)
|
|
665
|
+
this.frames.push({ time: f, position: l.position, velocity: 0 });
|
|
696
666
|
const c = this.frames.map(
|
|
697
|
-
(
|
|
667
|
+
(f) => e.read({ transform: "none", opacity: 1, ...t(f) })
|
|
698
668
|
);
|
|
699
|
-
for (let
|
|
700
|
-
const
|
|
701
|
-
if ((
|
|
702
|
-
const
|
|
703
|
-
|
|
704
|
-
Math.sin(
|
|
705
|
-
Math.cos(
|
|
706
|
-
), c[
|
|
669
|
+
for (let f = 1; f < c.length; f++) {
|
|
670
|
+
const o = c[f - 1].transform, r = c[f].transform;
|
|
671
|
+
if ((o == null ? void 0 : o.schema) === "viewport-plane-v1" && (r == null ? void 0 : r.schema) === o.schema) {
|
|
672
|
+
const g = [...r.value];
|
|
673
|
+
g[2] = o.value[2] + Math.atan2(
|
|
674
|
+
Math.sin(g[2] - o.value[2]),
|
|
675
|
+
Math.cos(g[2] - o.value[2])
|
|
676
|
+
), c[f].transform = { ...r, value: g };
|
|
707
677
|
}
|
|
708
678
|
}
|
|
709
|
-
const
|
|
710
|
-
for (const [
|
|
711
|
-
((
|
|
679
|
+
const u = c[0], d = c[1] ?? u, m = {};
|
|
680
|
+
for (const [f, o] of Object.entries(
|
|
681
|
+
((y = this.adopted) == null ? void 0 : y.channels) ?? {}
|
|
712
682
|
)) {
|
|
713
|
-
let
|
|
714
|
-
if (!
|
|
715
|
-
const
|
|
716
|
-
if (
|
|
717
|
-
for (const
|
|
683
|
+
let r = u[f];
|
|
684
|
+
if (!r) {
|
|
685
|
+
const a = f === "transform" ? { transform: "none" } : f === "opacity" ? { opacity: 1 } : {};
|
|
686
|
+
if (r = e.read(a)[f], r)
|
|
687
|
+
for (const p of c) p[f] = r;
|
|
718
688
|
}
|
|
719
|
-
if (!
|
|
720
|
-
const
|
|
721
|
-
m[
|
|
722
|
-
offset:
|
|
723
|
-
let
|
|
724
|
-
return
|
|
689
|
+
if (!r || !U(o, r)) continue;
|
|
690
|
+
const g = d[f] ?? r;
|
|
691
|
+
m[f] = {
|
|
692
|
+
offset: o.value.map((a, p) => {
|
|
693
|
+
let v = a - r.value[p];
|
|
694
|
+
return f === "transform" && o.schema === "viewport-plane-v1" && p === 2 && (v = Math.atan2(Math.sin(v), Math.cos(v))), v;
|
|
725
695
|
}),
|
|
726
|
-
velocity:
|
|
727
|
-
(
|
|
696
|
+
velocity: o.velocity.map(
|
|
697
|
+
(a, p) => a / Math.max(Math.abs(this.playbackRate), 1e-4) - (g.value[p] - r.value[p]) * 60
|
|
728
698
|
)
|
|
729
699
|
};
|
|
730
700
|
}
|
|
731
|
-
return this.presentationFrames = this.frames.map((
|
|
732
|
-
const
|
|
733
|
-
for (const [
|
|
734
|
-
const
|
|
735
|
-
|
|
736
|
-
...
|
|
737
|
-
value:
|
|
738
|
-
(
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
701
|
+
return this.presentationFrames = this.frames.map((f, o) => {
|
|
702
|
+
const r = { ...c[o] };
|
|
703
|
+
for (const [g, a] of Object.entries(m)) {
|
|
704
|
+
const p = r[g];
|
|
705
|
+
r[g] = {
|
|
706
|
+
...p,
|
|
707
|
+
value: p.value.map(
|
|
708
|
+
(v, k) => v + mt(
|
|
709
|
+
a.offset[k],
|
|
710
|
+
a.velocity[k],
|
|
711
|
+
f.time / 1e3,
|
|
742
712
|
i / 1e3
|
|
743
713
|
).value
|
|
744
714
|
)
|
|
745
715
|
};
|
|
746
716
|
}
|
|
747
|
-
return { time:
|
|
748
|
-
}), this.frames.map((
|
|
749
|
-
const
|
|
717
|
+
return { time: f.time, channels: r };
|
|
718
|
+
}), this.frames.map((f, o) => {
|
|
719
|
+
const r = this.presentationFrames[o].channels;
|
|
750
720
|
return {
|
|
751
|
-
...t(
|
|
721
|
+
...t(f),
|
|
752
722
|
...e.write(
|
|
753
723
|
Object.fromEntries(
|
|
754
|
-
Object.keys(m).map((
|
|
724
|
+
Object.keys(m).map((g) => [g, r[g]])
|
|
755
725
|
)
|
|
756
726
|
)
|
|
757
727
|
};
|
|
758
728
|
});
|
|
759
729
|
}
|
|
760
730
|
clearWaapi() {
|
|
761
|
-
var t
|
|
762
|
-
this.runId++, (t = this.waapi) == null || t.cancel(), this.waapi = null
|
|
731
|
+
var t;
|
|
732
|
+
this.runId++, (t = this.waapi) == null || t.cancel(), this.waapi = null;
|
|
763
733
|
}
|
|
764
734
|
captureLiveState() {
|
|
765
735
|
if (this.frames.length === 0) return;
|
|
766
|
-
const t =
|
|
736
|
+
const t = it(this.waapi);
|
|
767
737
|
if (t === null) return;
|
|
768
738
|
this.presentationTime = t;
|
|
769
|
-
const { position: e, velocity: i } =
|
|
770
|
-
this.currentValue = e, this.currentVelocity = i, this.solverState =
|
|
739
|
+
const { position: e, velocity: i } = gt(this.frames, t);
|
|
740
|
+
this.currentValue = e, this.currentVelocity = i, this.solverState = yt(
|
|
771
741
|
this.frames,
|
|
772
742
|
t,
|
|
773
743
|
this._integrator,
|
|
774
744
|
this.solverTarget
|
|
775
745
|
);
|
|
776
746
|
}
|
|
777
|
-
startFramePacedPlayback(t) {
|
|
778
|
-
if (!(this.waapi !== t || !this.waitingForStart || !this.startReady || this.stopStartupClock)) {
|
|
779
|
-
if (typeof requestAnimationFrame > "u" || this.playbackRate < 0) {
|
|
780
|
-
this.clearStartStyles(), this.handOffToWaapi(t);
|
|
781
|
-
return;
|
|
782
|
-
}
|
|
783
|
-
this.startupStableFrames = 0, this.stopStartupClock = at.subscribe((e) => {
|
|
784
|
-
this.advanceFramePacedStartup(t, e);
|
|
785
|
-
});
|
|
786
|
-
}
|
|
787
|
-
}
|
|
788
747
|
/**
|
|
789
|
-
*
|
|
790
|
-
*
|
|
791
|
-
*
|
|
792
|
-
*
|
|
748
|
+
* `Element.animate()` auto-plays with a pending start time that the browser
|
|
749
|
+
* resolves at its next rendering update, after whatever the current task
|
|
750
|
+
* still has to do. The run is seeked one nominal frame in while pending, so
|
|
751
|
+
* its first painted frame follows the frame that showed its first keyframe.
|
|
752
|
+
* A negative rate takes WAAPI's own auto-rewind: `play()` seeks to the end
|
|
753
|
+
* and runs the baked path backwards.
|
|
793
754
|
*/
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
this.pendingFirstFrame = void 0;
|
|
799
|
-
}
|
|
800
|
-
advanceFramePacedStartup(t, e) {
|
|
801
|
-
if (this.waapi !== t || !this.running || this.paused || !this.waitingForStart)
|
|
802
|
-
return;
|
|
803
|
-
const i = this.frames[this.frames.length - 1];
|
|
804
|
-
if (!i) return;
|
|
805
|
-
const a = D(t) ?? 0, c = Math.min(
|
|
806
|
-
i.time,
|
|
807
|
-
a + e.delta * Math.max(0, this.playbackRate)
|
|
808
|
-
);
|
|
809
|
-
if (t.currentTime = c, this.clearStartStyles(), this.captureLiveState(), c >= i.time) {
|
|
810
|
-
this.finishFramePacedRun(t, i);
|
|
811
|
-
return;
|
|
812
|
-
}
|
|
813
|
-
e.rawDelta <= bt ? this.startupStableFrames++ : this.startupStableFrames = 0, !(this.startupStableFrames < Ct) && this.handOffToWaapi(t);
|
|
814
|
-
}
|
|
815
|
-
handOffToWaapi(t) {
|
|
816
|
-
var c, d;
|
|
817
|
-
if (this.waapi !== t || !this.running || this.paused) return;
|
|
818
|
-
(c = this.stopStartupClock) == null || c.call(this), this.stopStartupClock = null, this.waitingForStart = !1, this.startReady = !1, this.startupStableFrames = 0;
|
|
819
|
-
const e = (d = t.timeline) == null ? void 0 : d.currentTime, i = D(t), a = this.playbackRate;
|
|
820
|
-
if (typeof e == "number" && i !== null && a !== 0) {
|
|
821
|
-
t.startTime = e - i / a;
|
|
755
|
+
beginPlayback(t, e) {
|
|
756
|
+
const i = this.playbackRate;
|
|
757
|
+
if (i < 0) {
|
|
758
|
+
t.play();
|
|
822
759
|
return;
|
|
823
760
|
}
|
|
824
|
-
t.
|
|
761
|
+
i > 0 && (t.currentTime = Math.min(e, wt * i));
|
|
825
762
|
}
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
763
|
+
clearInlineStyle(t) {
|
|
764
|
+
if (t)
|
|
765
|
+
for (const e of Object.keys(t))
|
|
766
|
+
this._element.style[e] = "";
|
|
829
767
|
}
|
|
830
768
|
applyStyleAt(t) {
|
|
831
769
|
const e = this.lowerBound + this.upperBound - t, i = this.styleFn(t, e);
|
|
832
|
-
for (const [
|
|
833
|
-
this._element.style[
|
|
770
|
+
for (const [l, c] of Object.entries(i))
|
|
771
|
+
this._element.style[l] = typeof c == "number" ? String(c) : c;
|
|
834
772
|
}
|
|
835
773
|
}
|
|
836
|
-
function
|
|
837
|
-
const
|
|
838
|
-
return typeof
|
|
774
|
+
function it(s) {
|
|
775
|
+
const n = s == null ? void 0 : s.currentTime;
|
|
776
|
+
return typeof n == "number" ? n : null;
|
|
777
|
+
}
|
|
778
|
+
class Ct {
|
|
779
|
+
constructor() {
|
|
780
|
+
h(this, "callbacks", /* @__PURE__ */ new Set());
|
|
781
|
+
h(this, "frameRequest", null);
|
|
782
|
+
h(this, "tick", () => {
|
|
783
|
+
this.frameRequest = null;
|
|
784
|
+
for (const n of [...this.callbacks])
|
|
785
|
+
this.callbacks.has(n) && n();
|
|
786
|
+
this.requestFrame();
|
|
787
|
+
});
|
|
788
|
+
}
|
|
789
|
+
subscribe(n) {
|
|
790
|
+
return this.callbacks.add(n), this.requestFrame(), () => {
|
|
791
|
+
this.callbacks.delete(n), this.stopIfIdle();
|
|
792
|
+
};
|
|
793
|
+
}
|
|
794
|
+
requestFrame() {
|
|
795
|
+
this.frameRequest !== null || this.callbacks.size === 0 || (this.frameRequest = requestAnimationFrame(this.tick));
|
|
796
|
+
}
|
|
797
|
+
stopIfIdle() {
|
|
798
|
+
this.callbacks.size > 0 || this.frameRequest === null || (typeof cancelAnimationFrame < "u" && cancelAnimationFrame(this.frameRequest), this.frameRequest = null);
|
|
799
|
+
}
|
|
839
800
|
}
|
|
840
|
-
|
|
841
|
-
|
|
801
|
+
const St = new Ct();
|
|
802
|
+
function kt(s) {
|
|
803
|
+
return typeof s.step == "function" ? s : vt.from(s);
|
|
842
804
|
}
|
|
843
|
-
class lt extends
|
|
805
|
+
class lt extends nt {
|
|
844
806
|
constructor(t, e = {}) {
|
|
845
807
|
super();
|
|
846
808
|
h(this, "_children");
|
|
@@ -863,7 +825,7 @@ class lt extends st {
|
|
|
863
825
|
for (const i of this._children) i.deferDisposal = !0;
|
|
864
826
|
this.progressChildren = this._children.filter(
|
|
865
827
|
(i) => !(i instanceof lt) || i.progressChildren.length > 0
|
|
866
|
-
), (e.mode ?? "parallel") === "sequence" ? this._startAt = this._children.map((i,
|
|
828
|
+
), (e.mode ?? "parallel") === "sequence" ? this._startAt = this._children.map((i, l) => l === 0 ? 0 : 1) : this._startAt = e.startAt ?? [];
|
|
867
829
|
}
|
|
868
830
|
/** Child animations in play order. */
|
|
869
831
|
get children() {
|
|
@@ -899,7 +861,7 @@ class lt extends st {
|
|
|
899
861
|
set(t, e) {
|
|
900
862
|
if (typeof t == "string") {
|
|
901
863
|
const i = this.select(t);
|
|
902
|
-
return (e == null ? void 0 : e.integrator) !== void 0 && i.set({ integrator:
|
|
864
|
+
return (e == null ? void 0 : e.integrator) !== void 0 && i.set({ integrator: kt(e.integrator) }), this;
|
|
903
865
|
}
|
|
904
866
|
return super.set(t);
|
|
905
867
|
}
|
|
@@ -988,68 +950,66 @@ class lt extends st {
|
|
|
988
950
|
}
|
|
989
951
|
/* ───────────────────────────────────────────────────────── private */
|
|
990
952
|
startRun(t) {
|
|
991
|
-
const e = this.buildDependencies(), i = this.pausedRun && t === this.lastMethod,
|
|
992
|
-
this._children.filter((
|
|
993
|
-
),
|
|
953
|
+
const e = this.buildDependencies(), i = this.pausedRun && t === this.lastMethod, l = t !== this.lastMethod, c = new Set(this.startedChildren), u = new Set(
|
|
954
|
+
this._children.filter((a) => a.isComplete)
|
|
955
|
+
), d = t === "reverse" && c.size ? this._children.filter((a) => c.has(a)) : [...this._children], m = t === "reverse" ? [...d].reverse() : d, y = /* @__PURE__ */ new Map();
|
|
994
956
|
if (t === "reverse")
|
|
995
|
-
for (const [
|
|
996
|
-
if (!
|
|
957
|
+
for (const [a, p] of e) {
|
|
958
|
+
if (!d.includes(a) || !d.includes(p.after))
|
|
997
959
|
continue;
|
|
998
|
-
const
|
|
999
|
-
|
|
1000
|
-
after:
|
|
1001
|
-
at:
|
|
1002
|
-
}),
|
|
960
|
+
const v = y.get(p.after) ?? [];
|
|
961
|
+
v.push({
|
|
962
|
+
after: a,
|
|
963
|
+
at: p.at === "settled" ? "settled" : 1 - p.at
|
|
964
|
+
}), y.set(p.after, v);
|
|
1003
965
|
}
|
|
1004
966
|
else
|
|
1005
|
-
for (const [
|
|
1006
|
-
|
|
1007
|
-
if (
|
|
1008
|
-
for (const
|
|
1009
|
-
|
|
967
|
+
for (const [a, p] of e)
|
|
968
|
+
y.set(a, [p]);
|
|
969
|
+
if (l || i)
|
|
970
|
+
for (const a of c)
|
|
971
|
+
u.has(a) || y.delete(a);
|
|
1010
972
|
this.running && this.pause(), this.restoreCompletionHandlers();
|
|
1011
|
-
const
|
|
1012
|
-
if (this.running = !0, this.pausedRun = !1, this.lastMethod = t, this.disposed = !1, this.settled = !1, this.pendingComplete =
|
|
973
|
+
const f = ++this.runId;
|
|
974
|
+
if (this.running = !0, this.pausedRun = !1, this.lastMethod = t, this.disposed = !1, this.settled = !1, this.pendingComplete = d.length, !i && !l && this.startedChildren.clear(), this.pendingComplete === 0) {
|
|
1013
975
|
this.handleFinished();
|
|
1014
976
|
return;
|
|
1015
977
|
}
|
|
1016
|
-
const
|
|
978
|
+
const o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set();
|
|
1017
979
|
if (i)
|
|
1018
|
-
for (const
|
|
1019
|
-
c.has(
|
|
1020
|
-
for (const
|
|
1021
|
-
const
|
|
1022
|
-
if (!(this.runId !==
|
|
980
|
+
for (const a of d)
|
|
981
|
+
c.has(a) && u.has(a) && (r.add(a), o.add(a), this.pendingComplete--);
|
|
982
|
+
for (const a of d) {
|
|
983
|
+
const p = a.onComplete, v = () => {
|
|
984
|
+
if (!(this.runId !== f || !this.running || o.has(a))) {
|
|
1023
985
|
try {
|
|
1024
|
-
|
|
1025
|
-
} catch (
|
|
1026
|
-
console.error("[ssgoi] animation completion failed",
|
|
986
|
+
p == null || p();
|
|
987
|
+
} catch (k) {
|
|
988
|
+
console.error("[ssgoi] animation completion failed", k);
|
|
1027
989
|
}
|
|
1028
|
-
|
|
990
|
+
o.add(a), --this.pendingComplete === 0 && this.handleFinished();
|
|
1029
991
|
}
|
|
1030
992
|
};
|
|
1031
|
-
|
|
1032
|
-
|
|
993
|
+
a.onComplete = v, this.restoreChildCallbacks.push(() => {
|
|
994
|
+
a.onComplete === v && (a.onComplete = p);
|
|
1033
995
|
});
|
|
1034
996
|
}
|
|
1035
|
-
const
|
|
1036
|
-
let
|
|
1037
|
-
for (; this.running && this.runId ===
|
|
1038
|
-
|
|
1039
|
-
for (const
|
|
1040
|
-
!this.running ||
|
|
1041
|
-
(
|
|
1042
|
-
|
|
1043
|
-
|
|
997
|
+
const g = () => {
|
|
998
|
+
let a = !0;
|
|
999
|
+
for (; this.running && this.runId === f && a; ) {
|
|
1000
|
+
a = !1;
|
|
1001
|
+
for (const p of m)
|
|
1002
|
+
!this.running || r.has(p) || (y.get(p) ?? []).some(
|
|
1003
|
+
(k) => !r.has(k.after) || !this.hasReachedThreshold(
|
|
1004
|
+
k.after,
|
|
1005
|
+
k.at,
|
|
1044
1006
|
t
|
|
1045
1007
|
)
|
|
1046
|
-
) || (
|
|
1008
|
+
) || (r.add(p), this.startedChildren.add(p), p[t](), a = !0);
|
|
1047
1009
|
}
|
|
1048
|
-
|
|
1010
|
+
r.size === d.length && this.clearPendingStartObservers();
|
|
1049
1011
|
};
|
|
1050
|
-
|
|
1051
|
-
at.subscribe(y, "observe")
|
|
1052
|
-
);
|
|
1012
|
+
g(), this.pendingComplete === 0 && this.handleFinished(), this.running && r.size !== d.length && this.pendingStartObservers.push(St.subscribe(g));
|
|
1053
1013
|
}
|
|
1054
1014
|
buildDependencies() {
|
|
1055
1015
|
const t = /* @__PURE__ */ new Map(), e = new Set(this._children);
|
|
@@ -1057,26 +1017,26 @@ class lt extends st {
|
|
|
1057
1017
|
throw new Error(
|
|
1058
1018
|
"Each child animation must occur once in a MultiAnimation"
|
|
1059
1019
|
);
|
|
1060
|
-
this._children.forEach((
|
|
1061
|
-
const m =
|
|
1020
|
+
this._children.forEach((u, d) => {
|
|
1021
|
+
const m = u.startCondition;
|
|
1062
1022
|
if (m) {
|
|
1063
1023
|
if (!e.has(m.after))
|
|
1064
1024
|
throw new Error(
|
|
1065
1025
|
"startAt.after must reference a sibling in the same MultiAnimation"
|
|
1066
1026
|
);
|
|
1067
|
-
t.set(
|
|
1068
|
-
} else
|
|
1069
|
-
after: this._children[
|
|
1070
|
-
at: this._startAt[
|
|
1027
|
+
t.set(u, { ...m });
|
|
1028
|
+
} else d > 0 && this._startAt.some((y) => y > 0) && t.set(u, {
|
|
1029
|
+
after: this._children[d - 1],
|
|
1030
|
+
at: this._startAt[d] ?? 0
|
|
1071
1031
|
});
|
|
1072
1032
|
});
|
|
1073
|
-
const i = /* @__PURE__ */ new Set(),
|
|
1074
|
-
if (
|
|
1033
|
+
const i = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), c = (u) => {
|
|
1034
|
+
if (l.has(u))
|
|
1075
1035
|
throw new Error("Animation startAt dependencies form a cycle");
|
|
1076
|
-
if (i.has(
|
|
1077
|
-
|
|
1078
|
-
const
|
|
1079
|
-
|
|
1036
|
+
if (i.has(u)) return;
|
|
1037
|
+
l.add(u);
|
|
1038
|
+
const d = t.get(u);
|
|
1039
|
+
d && c(d.after), l.delete(u), i.add(u);
|
|
1080
1040
|
};
|
|
1081
1041
|
return this._children.forEach(c), t;
|
|
1082
1042
|
}
|
|
@@ -1105,38 +1065,38 @@ class lt extends st {
|
|
|
1105
1065
|
return null;
|
|
1106
1066
|
}
|
|
1107
1067
|
}
|
|
1108
|
-
const
|
|
1109
|
-
function
|
|
1110
|
-
const
|
|
1068
|
+
const K = /* @__PURE__ */ new WeakMap();
|
|
1069
|
+
function At(s) {
|
|
1070
|
+
const n = K.get(s) ?? {
|
|
1111
1071
|
value: s.style.getPropertyValue("opacity"),
|
|
1112
1072
|
priority: s.style.getPropertyPriority("opacity"),
|
|
1113
1073
|
opacity: typeof getComputedStyle == "function" ? Number.parseFloat(getComputedStyle(s).opacity) : Number.NaN,
|
|
1114
1074
|
users: /* @__PURE__ */ new Set()
|
|
1115
1075
|
}, t = {};
|
|
1116
|
-
|
|
1076
|
+
n.users.add(t), K.set(s, n);
|
|
1117
1077
|
let e = !1;
|
|
1118
1078
|
return {
|
|
1119
|
-
opacity: Number.isFinite(
|
|
1079
|
+
opacity: Number.isFinite(n.opacity) ? n.opacity : 1,
|
|
1120
1080
|
set: (i) => {
|
|
1121
1081
|
t.value = i, s.style.opacity = String(i);
|
|
1122
1082
|
},
|
|
1123
1083
|
restore: () => {
|
|
1124
1084
|
if (!e) {
|
|
1125
|
-
if (e = !0,
|
|
1126
|
-
const i = Array.from(
|
|
1127
|
-
(
|
|
1085
|
+
if (e = !0, n.users.delete(t), n.users.size > 0) {
|
|
1086
|
+
const i = Array.from(n.users), l = i[i.length - 1];
|
|
1087
|
+
(l == null ? void 0 : l.value) !== void 0 && (s.style.opacity = String(l.value));
|
|
1128
1088
|
return;
|
|
1129
1089
|
}
|
|
1130
|
-
|
|
1090
|
+
n.value ? s.style.setProperty("opacity", n.value, n.priority) : s.style.removeProperty("opacity"), K.delete(s);
|
|
1131
1091
|
}
|
|
1132
1092
|
}
|
|
1133
1093
|
};
|
|
1134
1094
|
}
|
|
1135
1095
|
export {
|
|
1136
|
-
|
|
1096
|
+
nt as A,
|
|
1137
1097
|
lt as M,
|
|
1138
|
-
|
|
1139
|
-
|
|
1098
|
+
at as W,
|
|
1099
|
+
E as c,
|
|
1140
1100
|
j as f,
|
|
1141
|
-
|
|
1101
|
+
At as r
|
|
1142
1102
|
};
|