@cliquify.me/transitions 1.0.1 → 1.0.3
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/LICENSE +46 -0
- package/dist/index.es.js +376 -416
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/presentations/index.d.ts +0 -1
- package/package.json +10 -10
- package/dist/presentations/circle-reveal.d.ts +0 -7
package/dist/index.es.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { interpolate as D, spring as
|
|
2
|
-
import { jsx as o, Fragment as
|
|
3
|
-
import
|
|
4
|
-
import { getBoundingBox as
|
|
5
|
-
import { makeStar as
|
|
6
|
-
const
|
|
1
|
+
import { interpolate as D, spring as ce, measureSpring as me, AbsoluteFill as c, Internals as Z, Sequence as M, useVideoConfig as de, useCurrentFrame as fe, Freeze as Y, random as B } from "remotion";
|
|
2
|
+
import { jsx as o, Fragment as ee, jsxs as W } from "react/jsx-runtime";
|
|
3
|
+
import C, { useMemo as h, Children as pe, useState as A } from "react";
|
|
4
|
+
import { getBoundingBox as he, translatePath as te } from "@remotion/paths";
|
|
5
|
+
import { makeStar as ge, makePie as ye } from "@remotion/shapes";
|
|
6
|
+
const T = (n) => ({
|
|
7
7
|
getDurationInFrames: () => n.durationInFrames,
|
|
8
|
-
getProgress: ({ frame:
|
|
8
|
+
getProgress: ({ frame: t }) => D(t, [0, n.durationInFrames], [0, 1], {
|
|
9
9
|
easing: n.easing,
|
|
10
10
|
extrapolateLeft: "clamp",
|
|
11
11
|
extrapolateRight: "clamp"
|
|
12
12
|
})
|
|
13
|
-
}),
|
|
14
|
-
getDurationInFrames: ({ fps:
|
|
13
|
+
}), at = (n = {}) => ({
|
|
14
|
+
getDurationInFrames: ({ fps: t }) => n.durationInFrames ? n.durationInFrames : me({
|
|
15
15
|
config: n.config,
|
|
16
16
|
threshold: n.durationRestThreshold,
|
|
17
|
-
fps:
|
|
17
|
+
fps: t
|
|
18
18
|
}),
|
|
19
|
-
getProgress: ({ fps:
|
|
19
|
+
getProgress: ({ fps: t, frame: e }) => {
|
|
20
20
|
const r = n.reverse ? 0 : 1, s = n.reverse ? 1 : 0;
|
|
21
|
-
return
|
|
22
|
-
fps:
|
|
23
|
-
frame:
|
|
21
|
+
return ce({
|
|
22
|
+
fps: t,
|
|
23
|
+
frame: e,
|
|
24
24
|
to: r,
|
|
25
25
|
from: s,
|
|
26
26
|
config: n.config,
|
|
@@ -31,7 +31,7 @@ const b = (n) => ({
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
typeof window < "u" && (window.remotion_renderReady = !1, window.remotion_delayRenderTimeouts || (window.remotion_delayRenderTimeouts = {}), window.remotion_delayRenderHandles = []);
|
|
34
|
-
var
|
|
34
|
+
var $e = {
|
|
35
35
|
"style.transformOrigin": {
|
|
36
36
|
type: "transform-origin",
|
|
37
37
|
step: 1,
|
|
@@ -67,7 +67,7 @@ var wt = {
|
|
|
67
67
|
description: "Opacity",
|
|
68
68
|
hiddenFromList: !1
|
|
69
69
|
}
|
|
70
|
-
},
|
|
70
|
+
}, we = {
|
|
71
71
|
"style.borderWidth": {
|
|
72
72
|
type: "number",
|
|
73
73
|
default: void 0,
|
|
@@ -98,7 +98,7 @@ var wt = {
|
|
|
98
98
|
default: void 0,
|
|
99
99
|
description: "Border color"
|
|
100
100
|
}
|
|
101
|
-
},
|
|
101
|
+
}, Te = {
|
|
102
102
|
"style.borderRadius": {
|
|
103
103
|
type: "number",
|
|
104
104
|
default: 0,
|
|
@@ -140,13 +140,13 @@ var wt = {
|
|
|
140
140
|
description: "Bottom left radius",
|
|
141
141
|
hiddenFromList: !1
|
|
142
142
|
}
|
|
143
|
-
},
|
|
143
|
+
}, be = {
|
|
144
144
|
"style.backgroundColor": {
|
|
145
145
|
type: "color",
|
|
146
146
|
default: "transparent",
|
|
147
147
|
description: "Color"
|
|
148
148
|
}
|
|
149
|
-
},
|
|
149
|
+
}, Se = {
|
|
150
150
|
premountFor: {
|
|
151
151
|
type: "number",
|
|
152
152
|
default: 0,
|
|
@@ -164,9 +164,9 @@ var wt = {
|
|
|
164
164
|
hiddenFromList: !0,
|
|
165
165
|
keyframable: !1
|
|
166
166
|
}
|
|
167
|
-
},
|
|
168
|
-
...
|
|
169
|
-
},
|
|
167
|
+
}, Fe = {
|
|
168
|
+
...Se
|
|
169
|
+
}, ve = {
|
|
170
170
|
cropLeft: {
|
|
171
171
|
type: "number",
|
|
172
172
|
default: 0,
|
|
@@ -207,66 +207,66 @@ var wt = {
|
|
|
207
207
|
hiddenFromList: !1,
|
|
208
208
|
keyframable: !0
|
|
209
209
|
}
|
|
210
|
-
},
|
|
211
|
-
...
|
|
212
|
-
|
|
213
|
-
...
|
|
214
|
-
|
|
215
|
-
...
|
|
216
|
-
...
|
|
217
|
-
},
|
|
210
|
+
}, xe = ve, Ie = {
|
|
211
|
+
...xe,
|
|
212
|
+
...$e,
|
|
213
|
+
...be,
|
|
214
|
+
...we,
|
|
215
|
+
...Te,
|
|
216
|
+
...Fe
|
|
217
|
+
}, Ee = {
|
|
218
218
|
layout: {
|
|
219
219
|
type: "enum",
|
|
220
220
|
default: "absolute-fill",
|
|
221
221
|
description: "Layout",
|
|
222
222
|
variants: {
|
|
223
|
-
"absolute-fill":
|
|
223
|
+
"absolute-fill": Ie,
|
|
224
224
|
none: {}
|
|
225
225
|
}
|
|
226
226
|
}
|
|
227
227
|
};
|
|
228
228
|
({
|
|
229
|
-
...
|
|
229
|
+
...Ee.layout
|
|
230
230
|
});
|
|
231
|
-
function
|
|
232
|
-
const { allowFloats:
|
|
231
|
+
function Pe(n, t) {
|
|
232
|
+
const { allowFloats: e, component: r } = t;
|
|
233
233
|
if (typeof n > "u")
|
|
234
234
|
throw new Error(`The "durationInFrames" prop ${r} is missing.`);
|
|
235
235
|
if (typeof n != "number")
|
|
236
236
|
throw new Error(`The "durationInFrames" prop ${r} must be a number, but you passed a value of type ${typeof n}`);
|
|
237
237
|
if (n <= 0)
|
|
238
238
|
throw new TypeError(`The "durationInFrames" prop ${r} must be positive, but got ${n}.`);
|
|
239
|
-
if (!
|
|
239
|
+
if (!e && n % 1 !== 0)
|
|
240
240
|
throw new TypeError(`The "durationInFrames" prop ${r} must be an integer, but got ${n}.`);
|
|
241
241
|
if (!Number.isFinite(n))
|
|
242
242
|
throw new TypeError(`The "durationInFrames" prop ${r} must be finite, but got ${n}.`);
|
|
243
243
|
}
|
|
244
|
-
var
|
|
245
|
-
validateDurationInFrames:
|
|
244
|
+
var qe = {
|
|
245
|
+
validateDurationInFrames: Pe
|
|
246
246
|
};
|
|
247
|
-
const
|
|
248
|
-
const
|
|
247
|
+
const ne = C.createContext(null), re = C.createContext(null), K = ({ presentationProgress: n, children: t }) => {
|
|
248
|
+
const e = h(() => ({
|
|
249
249
|
enteringProgress: n
|
|
250
250
|
}), [n]);
|
|
251
|
-
return /* @__PURE__ */ o(
|
|
252
|
-
}, G = ({ presentationProgress: n, children:
|
|
253
|
-
const
|
|
251
|
+
return /* @__PURE__ */ o(ne.Provider, { value: e, children: t });
|
|
252
|
+
}, G = ({ presentationProgress: n, children: t }) => {
|
|
253
|
+
const e = h(() => ({
|
|
254
254
|
exitingProgress: n
|
|
255
255
|
}), [n]);
|
|
256
|
-
return /* @__PURE__ */ o(
|
|
257
|
-
},
|
|
258
|
-
|
|
256
|
+
return /* @__PURE__ */ o(re.Provider, { value: e, children: t });
|
|
257
|
+
}, oe = (n) => C.Children.toArray(n).reduce((e, r) => r.type === C.Fragment ? e.concat(
|
|
258
|
+
oe(
|
|
259
259
|
r.props.children
|
|
260
260
|
)
|
|
261
|
-
) : (
|
|
261
|
+
) : (e.push(r), e), []), Re = 0.01, ke = ({
|
|
262
262
|
children: n,
|
|
263
|
-
presentationProgress:
|
|
264
|
-
presentationDirection:
|
|
263
|
+
presentationProgress: t,
|
|
264
|
+
presentationDirection: e,
|
|
265
265
|
passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
|
|
266
266
|
}) => {
|
|
267
|
-
const
|
|
268
|
-
const i =
|
|
269
|
-
if (
|
|
267
|
+
const u = h(() => {
|
|
268
|
+
const i = t === 1 ? t * 100 : t * 100 - Re;
|
|
269
|
+
if (e === "exiting")
|
|
270
270
|
switch (r) {
|
|
271
271
|
case "from-left":
|
|
272
272
|
return {
|
|
@@ -274,7 +274,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
274
274
|
};
|
|
275
275
|
case "from-right":
|
|
276
276
|
return {
|
|
277
|
-
transform: `translateX(${-
|
|
277
|
+
transform: `translateX(${-t * 100}%)`
|
|
278
278
|
};
|
|
279
279
|
case "from-top":
|
|
280
280
|
return {
|
|
@@ -282,7 +282,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
282
282
|
};
|
|
283
283
|
case "from-bottom":
|
|
284
284
|
return {
|
|
285
|
-
transform: `translateY(${-
|
|
285
|
+
transform: `translateY(${-t * 100}%)`
|
|
286
286
|
};
|
|
287
287
|
default:
|
|
288
288
|
throw new Error(`Invalid direction: ${r}`);
|
|
@@ -290,7 +290,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
290
290
|
switch (r) {
|
|
291
291
|
case "from-left":
|
|
292
292
|
return {
|
|
293
|
-
transform: `translateX(${-100 +
|
|
293
|
+
transform: `translateX(${-100 + t * 100}%)`
|
|
294
294
|
};
|
|
295
295
|
case "from-right":
|
|
296
296
|
return {
|
|
@@ -298,7 +298,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
298
298
|
};
|
|
299
299
|
case "from-top":
|
|
300
300
|
return {
|
|
301
|
-
transform: `translateY(${-100 +
|
|
301
|
+
transform: `translateY(${-100 + t * 100}%)`
|
|
302
302
|
};
|
|
303
303
|
case "from-bottom":
|
|
304
304
|
return {
|
|
@@ -307,132 +307,132 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
307
307
|
default:
|
|
308
308
|
throw new Error(`Invalid direction: ${r}`);
|
|
309
309
|
}
|
|
310
|
-
}, [
|
|
310
|
+
}, [e, t, r]), a = h(() => ({
|
|
311
311
|
width: "100%",
|
|
312
312
|
height: "100%",
|
|
313
313
|
justifyContent: "center",
|
|
314
314
|
alignItems: "center",
|
|
315
|
-
...
|
|
316
|
-
...
|
|
317
|
-
}), [
|
|
318
|
-
return /* @__PURE__ */ o(
|
|
319
|
-
},
|
|
320
|
-
component:
|
|
315
|
+
...u,
|
|
316
|
+
...e === "entering" ? s : l
|
|
317
|
+
}), [u, s, l, e]);
|
|
318
|
+
return /* @__PURE__ */ o(c, { style: a, children: n });
|
|
319
|
+
}, N = (n) => ({
|
|
320
|
+
component: ke,
|
|
321
321
|
props: {}
|
|
322
|
-
}),
|
|
322
|
+
}), Ce = qe.validateDurationInFrames, L = function(n) {
|
|
323
323
|
return null;
|
|
324
|
-
},
|
|
324
|
+
}, z = ({ children: n }) => /* @__PURE__ */ o(ee, { children: n }), Me = ({
|
|
325
325
|
children: n
|
|
326
326
|
}) => {
|
|
327
|
-
const { fps:
|
|
327
|
+
const { fps: t } = de(), e = fe(), r = h(() => {
|
|
328
328
|
let s = 0, l = 0;
|
|
329
|
-
const
|
|
330
|
-
return
|
|
331
|
-
const
|
|
332
|
-
if (typeof
|
|
333
|
-
if (
|
|
329
|
+
const u = oe(n);
|
|
330
|
+
return pe.map(u, (a, i) => {
|
|
331
|
+
const f = a;
|
|
332
|
+
if (typeof f == "string") {
|
|
333
|
+
if (f.trim() === "")
|
|
334
334
|
return null;
|
|
335
335
|
throw new TypeError(
|
|
336
|
-
`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${
|
|
336
|
+
`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${f}"`
|
|
337
337
|
);
|
|
338
338
|
}
|
|
339
|
-
const
|
|
340
|
-
if (
|
|
341
|
-
if (
|
|
339
|
+
const d = u[i - 1], $ = u[i + 1], p = typeof d == "string" || typeof d > "u" ? null : d.type === L ? d : null, g = typeof $ == "string" || typeof $ > "u" ? null : $.type === L ? $ : null, _ = typeof d == "string" || typeof d > "u" ? !1 : d.type === L;
|
|
340
|
+
if (f.type === L) {
|
|
341
|
+
if (_)
|
|
342
342
|
throw new TypeError(
|
|
343
343
|
`A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`
|
|
344
344
|
);
|
|
345
345
|
return null;
|
|
346
346
|
}
|
|
347
|
-
if (
|
|
347
|
+
if (f.type !== z)
|
|
348
348
|
throw new TypeError(
|
|
349
|
-
`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${
|
|
349
|
+
`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${f} instead`
|
|
350
350
|
);
|
|
351
|
-
const E =
|
|
351
|
+
const E = f, R = `index = ${i}, duration = ${E.props.durationInFrames}`;
|
|
352
352
|
if (!(E != null && E.props.children))
|
|
353
353
|
throw new TypeError(
|
|
354
|
-
`A <TransitionSeries.Sequence /> component (${
|
|
354
|
+
`A <TransitionSeries.Sequence /> component (${R}) was detected to not have any children. Delete it to fix this error.`
|
|
355
355
|
);
|
|
356
|
-
const
|
|
357
|
-
durationInFrames:
|
|
358
|
-
children:
|
|
359
|
-
...
|
|
356
|
+
const w = E.props.durationInFrames, {
|
|
357
|
+
durationInFrames: b,
|
|
358
|
+
children: tt,
|
|
359
|
+
...F
|
|
360
360
|
} = E.props;
|
|
361
|
-
|
|
361
|
+
Ce(w, {
|
|
362
362
|
component: "of a <TransitionSeries.Sequence /> component",
|
|
363
363
|
allowFloats: !0
|
|
364
364
|
});
|
|
365
365
|
const P = E.props.offset ?? 0;
|
|
366
366
|
if (Number.isNaN(P))
|
|
367
367
|
throw new TypeError(
|
|
368
|
-
`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${
|
|
368
|
+
`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${R}).`
|
|
369
369
|
);
|
|
370
370
|
if (!Number.isFinite(P))
|
|
371
371
|
throw new TypeError(
|
|
372
|
-
`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${
|
|
372
|
+
`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${R}).`
|
|
373
373
|
);
|
|
374
374
|
if (P % 1 !== 0)
|
|
375
375
|
throw new TypeError(
|
|
376
|
-
`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${
|
|
376
|
+
`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${R}).`
|
|
377
377
|
);
|
|
378
|
-
const
|
|
379
|
-
let
|
|
380
|
-
|
|
381
|
-
fps:
|
|
382
|
-
}), s -=
|
|
383
|
-
let
|
|
384
|
-
l +=
|
|
385
|
-
const
|
|
386
|
-
frame:
|
|
387
|
-
fps:
|
|
388
|
-
}) : null,
|
|
389
|
-
frame:
|
|
390
|
-
fps:
|
|
391
|
-
}) : null,
|
|
392
|
-
frame:
|
|
393
|
-
fps:
|
|
378
|
+
const ie = l + P;
|
|
379
|
+
let X = 0;
|
|
380
|
+
p && (X = p.props.timing.getDurationInFrames({
|
|
381
|
+
fps: t
|
|
382
|
+
}), s -= X / 2);
|
|
383
|
+
let m = ie - X / 2;
|
|
384
|
+
l += w + P, m < 0 && (m = 0);
|
|
385
|
+
const O = g ? g.props.timing.getProgress({
|
|
386
|
+
frame: e - m - b + g.props.timing.getDurationInFrames({ fps: t }) / 2 + s,
|
|
387
|
+
fps: t
|
|
388
|
+
}) : null, k = p ? p.props.timing.getProgress({
|
|
389
|
+
frame: e - m,
|
|
390
|
+
fps: t
|
|
391
|
+
}) : null, se = p ? p.props.timing.getProgress({
|
|
392
|
+
frame: e - (m + b),
|
|
393
|
+
fps: t
|
|
394
394
|
}) : null;
|
|
395
|
-
if (
|
|
395
|
+
if (g && w < g.props.timing.getDurationInFrames({ fps: t }) / 2)
|
|
396
396
|
throw new Error(
|
|
397
|
-
`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${
|
|
398
|
-
{ fps:
|
|
399
|
-
)} frames long, but the sequence is only ${
|
|
397
|
+
`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${g.props.timing.getDurationInFrames(
|
|
398
|
+
{ fps: t }
|
|
399
|
+
)} frames long, but the sequence is only ${w} frames long (${R})`
|
|
400
400
|
);
|
|
401
|
-
if (
|
|
401
|
+
if (p && w < p.props.timing.getDurationInFrames({ fps: t }) / 2)
|
|
402
402
|
throw new Error(
|
|
403
|
-
`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${
|
|
404
|
-
{ fps:
|
|
405
|
-
)} frames long, but the sequence is only ${
|
|
403
|
+
`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${p.props.timing.getDurationInFrames(
|
|
404
|
+
{ fps: t }
|
|
405
|
+
)} frames long, but the sequence is only ${w} frames long (${R})`
|
|
406
406
|
);
|
|
407
|
-
if (
|
|
408
|
-
const
|
|
409
|
-
fps:
|
|
410
|
-
}), S =
|
|
411
|
-
fps:
|
|
412
|
-
}),
|
|
413
|
-
frame:
|
|
414
|
-
fps:
|
|
415
|
-
}),
|
|
407
|
+
if (g && p && se !== null && k !== null) {
|
|
408
|
+
const v = g.props.presentation ?? N(), x = p.props.presentation ?? N(), I = p.props.timing.getDurationInFrames({
|
|
409
|
+
fps: t
|
|
410
|
+
}), S = g.props.timing.getDurationInFrames({
|
|
411
|
+
fps: t
|
|
412
|
+
}), q = v.component, U = x.component, j = e < +Math.floor(m) + I / 2, V = e > Math.floor(m) + Math.floor(b) + I / 2, ae = V ? Math.floor(m) + Math.floor(b) + Math.floor(S / 2) : Math.floor(m), H = j ? Math.floor(m) : Math.floor(m) + I / 2, J = g.props.timing.getProgress({
|
|
413
|
+
frame: e - (H + b - S / 2),
|
|
414
|
+
fps: t
|
|
415
|
+
}), le = e > m, ue = e < m + b + S / 2 + I / 2;
|
|
416
416
|
return /* @__PURE__ */ o(
|
|
417
|
-
|
|
417
|
+
Y,
|
|
418
418
|
{
|
|
419
|
-
active:
|
|
420
|
-
frame:
|
|
419
|
+
active: ue && le && (j || V),
|
|
420
|
+
frame: ae,
|
|
421
421
|
children: /* @__PURE__ */ o(
|
|
422
|
-
|
|
422
|
+
M,
|
|
423
423
|
{
|
|
424
424
|
from: H,
|
|
425
|
-
durationInFrames:
|
|
426
|
-
...
|
|
427
|
-
name:
|
|
425
|
+
durationInFrames: w + S / 2,
|
|
426
|
+
...F,
|
|
427
|
+
name: F.name || "<TS.Sequence>",
|
|
428
428
|
children: /* @__PURE__ */ o(
|
|
429
|
-
|
|
429
|
+
q,
|
|
430
430
|
{
|
|
431
|
-
passedProps:
|
|
431
|
+
passedProps: v.props ?? {},
|
|
432
432
|
presentationDirection: "exiting",
|
|
433
433
|
presentationProgress: J,
|
|
434
|
-
presentationDurationInFrames:
|
|
435
|
-
{ fps:
|
|
434
|
+
presentationDurationInFrames: g.props.timing.getDurationInFrames(
|
|
435
|
+
{ fps: t }
|
|
436
436
|
),
|
|
437
437
|
onElementImage: () => {
|
|
438
438
|
},
|
|
@@ -444,13 +444,13 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
444
444
|
{
|
|
445
445
|
presentationProgress: J,
|
|
446
446
|
children: /* @__PURE__ */ o(
|
|
447
|
-
|
|
447
|
+
U,
|
|
448
448
|
{
|
|
449
449
|
passedProps: x.props ?? {},
|
|
450
450
|
presentationDirection: "entering",
|
|
451
|
-
presentationProgress:
|
|
452
|
-
presentationDurationInFrames:
|
|
453
|
-
{ fps:
|
|
451
|
+
presentationProgress: k,
|
|
452
|
+
presentationDurationInFrames: p.props.timing.getDurationInFrames(
|
|
453
|
+
{ fps: t }
|
|
454
454
|
),
|
|
455
455
|
onElementImage: () => {
|
|
456
456
|
},
|
|
@@ -460,7 +460,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
460
460
|
children: /* @__PURE__ */ o(
|
|
461
461
|
K,
|
|
462
462
|
{
|
|
463
|
-
presentationProgress:
|
|
463
|
+
presentationProgress: k,
|
|
464
464
|
children: a
|
|
465
465
|
}
|
|
466
466
|
)
|
|
@@ -477,28 +477,28 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
477
477
|
i
|
|
478
478
|
);
|
|
479
479
|
}
|
|
480
|
-
if (
|
|
481
|
-
const
|
|
480
|
+
if (k !== null && p) {
|
|
481
|
+
const v = p.props.timing.getDurationInFrames({ fps: t }) / 2, x = p.props.presentation ?? N(), I = x.component, S = e < m + v, q = S ? Math.floor(m) : Math.floor(m) + v, U = e > q;
|
|
482
482
|
return /* @__PURE__ */ o(
|
|
483
|
-
|
|
483
|
+
Y,
|
|
484
484
|
{
|
|
485
|
-
active:
|
|
486
|
-
frame:
|
|
485
|
+
active: U && S,
|
|
486
|
+
frame: q,
|
|
487
487
|
children: /* @__PURE__ */ o(
|
|
488
|
-
|
|
488
|
+
M,
|
|
489
489
|
{
|
|
490
|
-
from:
|
|
491
|
-
durationInFrames:
|
|
492
|
-
...
|
|
493
|
-
name:
|
|
490
|
+
from: q,
|
|
491
|
+
durationInFrames: w,
|
|
492
|
+
...F,
|
|
493
|
+
name: F.name || "<TS.Sequence>",
|
|
494
494
|
children: /* @__PURE__ */ o(
|
|
495
495
|
I,
|
|
496
496
|
{
|
|
497
497
|
passedProps: x.props ?? {},
|
|
498
498
|
presentationDirection: "entering",
|
|
499
|
-
presentationProgress:
|
|
500
|
-
presentationDurationInFrames:
|
|
501
|
-
{ fps:
|
|
499
|
+
presentationProgress: k,
|
|
500
|
+
presentationDurationInFrames: p.props.timing.getDurationInFrames(
|
|
501
|
+
{ fps: t }
|
|
502
502
|
),
|
|
503
503
|
onElementImage: () => {
|
|
504
504
|
},
|
|
@@ -508,7 +508,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
508
508
|
children: /* @__PURE__ */ o(
|
|
509
509
|
K,
|
|
510
510
|
{
|
|
511
|
-
presentationProgress:
|
|
511
|
+
presentationProgress: k,
|
|
512
512
|
children: a
|
|
513
513
|
}
|
|
514
514
|
)
|
|
@@ -521,28 +521,28 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
521
521
|
i
|
|
522
522
|
);
|
|
523
523
|
}
|
|
524
|
-
if (
|
|
525
|
-
const
|
|
524
|
+
if (O !== null && g) {
|
|
525
|
+
const v = g.props.timing.getDurationInFrames({ fps: t }) / 2, x = g.props.presentation ?? N(), I = x.component, S = e > Math.floor(b) + Math.floor(m), q = e < Math.floor(b) + Math.floor(m) + v;
|
|
526
526
|
return /* @__PURE__ */ o(
|
|
527
|
-
|
|
527
|
+
Y,
|
|
528
528
|
{
|
|
529
|
-
active:
|
|
530
|
-
frame: Math.floor(
|
|
529
|
+
active: q && S,
|
|
530
|
+
frame: Math.floor(b),
|
|
531
531
|
children: /* @__PURE__ */ o(
|
|
532
|
-
|
|
532
|
+
M,
|
|
533
533
|
{
|
|
534
|
-
from: Math.floor(
|
|
535
|
-
durationInFrames:
|
|
536
|
-
...
|
|
537
|
-
name:
|
|
534
|
+
from: Math.floor(m),
|
|
535
|
+
durationInFrames: w + v,
|
|
536
|
+
...F,
|
|
537
|
+
name: F.name || "<TS.Sequence>",
|
|
538
538
|
children: /* @__PURE__ */ o(
|
|
539
539
|
I,
|
|
540
540
|
{
|
|
541
541
|
passedProps: x.props ?? {},
|
|
542
542
|
presentationDirection: "exiting",
|
|
543
|
-
presentationProgress:
|
|
544
|
-
presentationDurationInFrames:
|
|
545
|
-
{ fps:
|
|
543
|
+
presentationProgress: O,
|
|
544
|
+
presentationDurationInFrames: g.props.timing.getDurationInFrames(
|
|
545
|
+
{ fps: t }
|
|
546
546
|
),
|
|
547
547
|
onElementImage: () => {
|
|
548
548
|
},
|
|
@@ -552,7 +552,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
552
552
|
children: /* @__PURE__ */ o(
|
|
553
553
|
G,
|
|
554
554
|
{
|
|
555
|
-
presentationProgress:
|
|
555
|
+
presentationProgress: O,
|
|
556
556
|
children: a
|
|
557
557
|
}
|
|
558
558
|
)
|
|
@@ -566,196 +566,157 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
|
|
|
566
566
|
);
|
|
567
567
|
}
|
|
568
568
|
return /* @__PURE__ */ o(
|
|
569
|
-
|
|
569
|
+
M,
|
|
570
570
|
{
|
|
571
|
-
from: Math.floor(
|
|
572
|
-
durationInFrames:
|
|
573
|
-
...
|
|
574
|
-
name:
|
|
571
|
+
from: Math.floor(m),
|
|
572
|
+
durationInFrames: w,
|
|
573
|
+
...F,
|
|
574
|
+
name: F.name || "<TS.Sequence>",
|
|
575
575
|
children: a
|
|
576
576
|
},
|
|
577
577
|
i
|
|
578
578
|
);
|
|
579
579
|
});
|
|
580
|
-
}, [n,
|
|
581
|
-
return /* @__PURE__ */ o(
|
|
582
|
-
},
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
Z.addSequenceStackTraces(
|
|
586
|
-
Z.addSequenceStackTraces(
|
|
587
|
-
const
|
|
588
|
-
const n =
|
|
589
|
-
return !n && !
|
|
580
|
+
}, [n, t, e]);
|
|
581
|
+
return /* @__PURE__ */ o(ee, { children: r });
|
|
582
|
+
}, y = ({ children: n, name: t, layout: e, ...r }) => /* @__PURE__ */ o(M, { name: t ?? "<TransitionSeries>", layout: e ?? "absolute-fill", ...r, children: /* @__PURE__ */ o(Me, { children: n }) });
|
|
583
|
+
y.Sequence = z;
|
|
584
|
+
y.Transition = L;
|
|
585
|
+
Z.addSequenceStackTraces(y);
|
|
586
|
+
Z.addSequenceStackTraces(z);
|
|
587
|
+
const lt = () => {
|
|
588
|
+
const n = C.useContext(ne), t = C.useContext(re);
|
|
589
|
+
return !n && !t ? {
|
|
590
590
|
isInTransitionSeries: !1,
|
|
591
591
|
entering: 1,
|
|
592
592
|
exiting: 0
|
|
593
593
|
} : {
|
|
594
594
|
isInTransitionSeries: !0,
|
|
595
595
|
entering: (n == null ? void 0 : n.enteringProgress) ?? 1,
|
|
596
|
-
exiting: (
|
|
596
|
+
exiting: (t == null ? void 0 : t.exitingProgress) ?? 0
|
|
597
597
|
};
|
|
598
|
-
},
|
|
598
|
+
}, Le = ({
|
|
599
599
|
children: n,
|
|
600
|
-
presentationDirection:
|
|
601
|
-
presentationProgress:
|
|
600
|
+
presentationDirection: t,
|
|
601
|
+
presentationProgress: e,
|
|
602
602
|
passedProps: r
|
|
603
603
|
}) => {
|
|
604
|
-
const l = Math.sqrt(r.width ** 2 + r.height ** 2) / 2 *
|
|
604
|
+
const l = Math.sqrt(r.width ** 2 + r.height ** 2) / 2 * e, u = Be(
|
|
605
605
|
r.width / 2,
|
|
606
606
|
r.height / 2,
|
|
607
607
|
l
|
|
608
|
-
), [a] =
|
|
609
|
-
width: "100%",
|
|
610
|
-
height: "100%",
|
|
611
|
-
clipPath: e === "exiting" ? void 0 : `url(#${a})`
|
|
612
|
-
}), [a, e]);
|
|
613
|
-
return /* @__PURE__ */ C(u, { children: [
|
|
614
|
-
/* @__PURE__ */ o(u, { style: i, children: n }),
|
|
615
|
-
e === "exiting" ? null : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("svg", { width: r.width, height: r.height, children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: a, children: /* @__PURE__ */ o("path", { d: c, fill: "black" }) }) }) }) })
|
|
616
|
-
] });
|
|
617
|
-
}, Nt = (n) => ({ component: Lt, props: n }), Wt = (n, e, t) => `M ${n}, ${e}
|
|
618
|
-
m -${t}, 0
|
|
619
|
-
a ${t},${t} 0 1,0 ${t * 2},0
|
|
620
|
-
a ${t},${t} 0 1,0 -${t * 2},0`, Bt = ({
|
|
621
|
-
children: n,
|
|
622
|
-
presentationDirection: e,
|
|
623
|
-
presentationProgress: t,
|
|
624
|
-
passedProps: r
|
|
625
|
-
}) => {
|
|
626
|
-
const { width: s, height: l } = r, c = -s * 0.35, a = l * 0.52, i = Math.sqrt((s - c) ** 2 + Math.max(a, l - a) ** 2), d = s * 0.3, m = d + (i - d + s * 0.1) * t, [y] = B(() => String(W(null))), f = Math.max(3, Math.round(s * 7e-3)), p = Math.max(0, m - f / 2), A = g(() => ({
|
|
608
|
+
), [a] = A(() => String(B(null))), i = h(() => ({
|
|
627
609
|
width: "100%",
|
|
628
610
|
height: "100%",
|
|
629
|
-
clipPath:
|
|
630
|
-
}), [
|
|
631
|
-
return /* @__PURE__ */
|
|
632
|
-
/* @__PURE__ */ o(
|
|
633
|
-
|
|
634
|
-
"svg",
|
|
635
|
-
{
|
|
636
|
-
width: s,
|
|
637
|
-
height: l,
|
|
638
|
-
style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
|
|
639
|
-
children: [
|
|
640
|
-
/* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: y, children: /* @__PURE__ */ o("circle", { cx: c, cy: a, r: m, fill: "black" }) }) }),
|
|
641
|
-
t > 0 && t < 1 && /* @__PURE__ */ o(
|
|
642
|
-
"circle",
|
|
643
|
-
{
|
|
644
|
-
cx: c,
|
|
645
|
-
cy: a,
|
|
646
|
-
r: p,
|
|
647
|
-
fill: "none",
|
|
648
|
-
stroke: "#1e3a8a",
|
|
649
|
-
strokeWidth: f
|
|
650
|
-
}
|
|
651
|
-
)
|
|
652
|
-
]
|
|
653
|
-
}
|
|
654
|
-
) })
|
|
611
|
+
clipPath: t === "exiting" ? void 0 : `url(#${a})`
|
|
612
|
+
}), [a, t]);
|
|
613
|
+
return /* @__PURE__ */ W(c, { children: [
|
|
614
|
+
/* @__PURE__ */ o(c, { style: i, children: n }),
|
|
615
|
+
t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { width: r.width, height: r.height, children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: a, children: /* @__PURE__ */ o("path", { d: u, fill: "black" }) }) }) }) })
|
|
655
616
|
] });
|
|
656
|
-
},
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
}
|
|
617
|
+
}, Ne = (n) => ({ component: Le, props: n }), Be = (n, t, e) => `M ${n}, ${t}
|
|
618
|
+
m -${e}, 0
|
|
619
|
+
a ${e},${e} 0 1,0 ${e * 2},0
|
|
620
|
+
a ${e},${e} 0 1,0 -${e * 2},0`, We = ({
|
|
660
621
|
children: n,
|
|
661
|
-
presentationDirection:
|
|
662
|
-
presentationProgress:
|
|
622
|
+
presentationDirection: t,
|
|
623
|
+
presentationProgress: e,
|
|
663
624
|
passedProps: r
|
|
664
625
|
}) => {
|
|
665
|
-
const { width: s, height: l } = r,
|
|
626
|
+
const { width: s, height: l } = r, u = s * e, a = l * e, i = s / 2 - u / 2, f = l / 2 - a / 2, [d] = A(() => String(B(null))), $ = h(() => ({
|
|
666
627
|
width: "100%",
|
|
667
628
|
height: "100%",
|
|
668
|
-
clipPath:
|
|
669
|
-
}), [
|
|
670
|
-
return /* @__PURE__ */
|
|
671
|
-
/* @__PURE__ */ o(
|
|
672
|
-
|
|
629
|
+
clipPath: t === "exiting" ? void 0 : `url(#${d})`
|
|
630
|
+
}), [d, t]);
|
|
631
|
+
return /* @__PURE__ */ W(c, { children: [
|
|
632
|
+
/* @__PURE__ */ o(c, { style: $, children: n }),
|
|
633
|
+
t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: d, children: /* @__PURE__ */ o(
|
|
673
634
|
"rect",
|
|
674
635
|
{
|
|
675
636
|
x: i,
|
|
676
|
-
y:
|
|
677
|
-
width:
|
|
637
|
+
y: f,
|
|
638
|
+
width: u,
|
|
678
639
|
height: a,
|
|
679
640
|
fill: "black"
|
|
680
641
|
}
|
|
681
642
|
) }) }) }) })
|
|
682
643
|
] });
|
|
683
|
-
},
|
|
644
|
+
}, Ae = (n) => ({ component: We, props: n }), Xe = ({
|
|
684
645
|
children: n,
|
|
685
|
-
presentationDirection:
|
|
686
|
-
presentationProgress:
|
|
646
|
+
presentationDirection: t,
|
|
647
|
+
presentationProgress: e,
|
|
687
648
|
passedProps: r
|
|
688
649
|
}) => {
|
|
689
|
-
const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, l = s *
|
|
650
|
+
const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, l = s * e, u = s * 2 * e, { path: a } = ge({
|
|
690
651
|
innerRadius: l,
|
|
691
|
-
outerRadius:
|
|
652
|
+
outerRadius: u,
|
|
692
653
|
points: 5
|
|
693
|
-
}), i =
|
|
654
|
+
}), i = he(a), f = te(
|
|
694
655
|
a,
|
|
695
656
|
r.width / 2 - i.width / 2,
|
|
696
657
|
r.height / 2 - i.height / 2
|
|
697
|
-
), [
|
|
658
|
+
), [d] = A(() => String(B(null))), $ = h(() => ({
|
|
698
659
|
width: "100%",
|
|
699
660
|
height: "100%",
|
|
700
|
-
clipPath:
|
|
701
|
-
}), [
|
|
702
|
-
return /* @__PURE__ */
|
|
703
|
-
/* @__PURE__ */ o(
|
|
704
|
-
|
|
661
|
+
clipPath: t === "exiting" ? void 0 : `url(#${d})`
|
|
662
|
+
}), [d, t]);
|
|
663
|
+
return /* @__PURE__ */ W(c, { children: [
|
|
664
|
+
/* @__PURE__ */ o(c, { style: $, children: n }),
|
|
665
|
+
t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: d, children: /* @__PURE__ */ o("path", { d: f, fill: "black" }) }) }) }) })
|
|
705
666
|
] });
|
|
706
|
-
},
|
|
667
|
+
}, Oe = (n) => ({ component: Xe, props: n }), Ue = ({
|
|
707
668
|
children: n,
|
|
708
|
-
presentationDirection:
|
|
709
|
-
presentationProgress:
|
|
669
|
+
presentationDirection: t,
|
|
670
|
+
presentationProgress: e,
|
|
710
671
|
passedProps: r
|
|
711
672
|
}) => {
|
|
712
|
-
const { width: s, height: l } = r,
|
|
673
|
+
const { width: s, height: l } = r, u = s * e, a = s / 2 - u / 2, [i] = A(() => String(B(null))), f = h(() => ({
|
|
713
674
|
width: "100%",
|
|
714
675
|
height: "100%",
|
|
715
|
-
clipPath:
|
|
716
|
-
}), [i,
|
|
717
|
-
return /* @__PURE__ */
|
|
718
|
-
/* @__PURE__ */ o(
|
|
719
|
-
|
|
676
|
+
clipPath: t === "exiting" ? void 0 : `url(#${i})`
|
|
677
|
+
}), [i, t]);
|
|
678
|
+
return /* @__PURE__ */ W(c, { children: [
|
|
679
|
+
/* @__PURE__ */ o(c, { style: f, children: n }),
|
|
680
|
+
t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: i, children: /* @__PURE__ */ o(
|
|
720
681
|
"rect",
|
|
721
682
|
{
|
|
722
683
|
x: a,
|
|
723
684
|
y: 0,
|
|
724
|
-
width:
|
|
685
|
+
width: u,
|
|
725
686
|
height: l,
|
|
726
687
|
fill: "black"
|
|
727
688
|
}
|
|
728
689
|
) }) }) }) })
|
|
729
690
|
] });
|
|
730
|
-
},
|
|
731
|
-
var
|
|
732
|
-
const s =
|
|
733
|
-
opacity: s ?
|
|
734
|
-
...
|
|
691
|
+
}, Ye = (n) => ({ component: Ue, props: n });
|
|
692
|
+
var De = ({ children: n, presentationDirection: t, presentationProgress: e, passedProps: r }) => {
|
|
693
|
+
const s = t === "entering", l = h(() => ({
|
|
694
|
+
opacity: s ? e : r.shouldFadeOutExitingScene ? 1 - e : 1,
|
|
695
|
+
...t === "entering" ? r.enterStyle : r.exitStyle
|
|
735
696
|
}), [
|
|
736
697
|
s,
|
|
737
698
|
r.enterStyle,
|
|
738
699
|
r.exitStyle,
|
|
739
700
|
r.shouldFadeOutExitingScene,
|
|
740
|
-
|
|
741
|
-
|
|
701
|
+
t,
|
|
702
|
+
e
|
|
742
703
|
]);
|
|
743
|
-
return /* @__PURE__ */ o(
|
|
704
|
+
return /* @__PURE__ */ o(c, {
|
|
744
705
|
style: l,
|
|
745
706
|
children: n
|
|
746
707
|
});
|
|
747
708
|
}, Q = (n) => ({
|
|
748
|
-
component:
|
|
709
|
+
component: De,
|
|
749
710
|
props: n ?? {}
|
|
750
|
-
}),
|
|
711
|
+
}), ze = 0.01, _e = ({
|
|
751
712
|
children: n,
|
|
752
|
-
presentationProgress:
|
|
753
|
-
presentationDirection:
|
|
713
|
+
presentationProgress: t,
|
|
714
|
+
presentationDirection: e,
|
|
754
715
|
passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
|
|
755
716
|
}) => {
|
|
756
|
-
const
|
|
757
|
-
const i =
|
|
758
|
-
if (
|
|
717
|
+
const u = h(() => {
|
|
718
|
+
const i = t === 1 ? t * 100 : t * 100 - ze;
|
|
719
|
+
if (e === "exiting")
|
|
759
720
|
switch (r) {
|
|
760
721
|
case "from-left":
|
|
761
722
|
return {
|
|
@@ -763,7 +724,7 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
|
|
|
763
724
|
};
|
|
764
725
|
case "from-right":
|
|
765
726
|
return {
|
|
766
|
-
transform: `translateX(${-
|
|
727
|
+
transform: `translateX(${-t * 100}%)`
|
|
767
728
|
};
|
|
768
729
|
case "from-top":
|
|
769
730
|
return {
|
|
@@ -771,7 +732,7 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
|
|
|
771
732
|
};
|
|
772
733
|
case "from-bottom":
|
|
773
734
|
return {
|
|
774
|
-
transform: `translateY(${-
|
|
735
|
+
transform: `translateY(${-t * 100}%)`
|
|
775
736
|
};
|
|
776
737
|
default:
|
|
777
738
|
throw new Error(`Invalid direction: ${r}`);
|
|
@@ -779,7 +740,7 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
|
|
|
779
740
|
switch (r) {
|
|
780
741
|
case "from-left":
|
|
781
742
|
return {
|
|
782
|
-
transform: `translateX(${-100 +
|
|
743
|
+
transform: `translateX(${-100 + t * 100}%)`
|
|
783
744
|
};
|
|
784
745
|
case "from-right":
|
|
785
746
|
return {
|
|
@@ -787,7 +748,7 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
|
|
|
787
748
|
};
|
|
788
749
|
case "from-top":
|
|
789
750
|
return {
|
|
790
|
-
transform: `translateY(${-100 +
|
|
751
|
+
transform: `translateY(${-100 + t * 100}%)`
|
|
791
752
|
};
|
|
792
753
|
case "from-bottom":
|
|
793
754
|
return {
|
|
@@ -796,265 +757,264 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
|
|
|
796
757
|
default:
|
|
797
758
|
throw new Error(`Invalid direction: ${r}`);
|
|
798
759
|
}
|
|
799
|
-
}, [
|
|
760
|
+
}, [e, t, r]), a = h(() => ({
|
|
800
761
|
width: "100%",
|
|
801
762
|
height: "100%",
|
|
802
763
|
justifyContent: "center",
|
|
803
764
|
alignItems: "center",
|
|
804
|
-
...
|
|
805
|
-
...
|
|
806
|
-
}), [
|
|
807
|
-
return /* @__PURE__ */ o(
|
|
765
|
+
...u,
|
|
766
|
+
...e === "entering" ? s : l
|
|
767
|
+
}), [u, s, l, e]);
|
|
768
|
+
return /* @__PURE__ */ o(c, {
|
|
808
769
|
style: a,
|
|
809
770
|
children: n
|
|
810
771
|
});
|
|
811
|
-
},
|
|
812
|
-
component:
|
|
772
|
+
}, je = (n) => ({
|
|
773
|
+
component: _e,
|
|
813
774
|
props: n ?? {}
|
|
814
|
-
}),
|
|
815
|
-
const
|
|
816
|
-
switch (
|
|
775
|
+
}), Ve = (n, t) => {
|
|
776
|
+
const e = n * 100;
|
|
777
|
+
switch (t) {
|
|
817
778
|
case "from-left":
|
|
818
|
-
return `polygon(0% 0%, ${
|
|
779
|
+
return `polygon(0% 0%, ${e}% 0%, ${e}% 100%, 0% 100%)`;
|
|
819
780
|
case "from-top-left":
|
|
820
|
-
return `polygon(0% 0%, ${
|
|
781
|
+
return `polygon(0% 0%, ${e * 2}% 0%, 0% ${e * 2}%)`;
|
|
821
782
|
case "from-top":
|
|
822
|
-
return `polygon(0% 0%, 100% 0%, 100% ${
|
|
783
|
+
return `polygon(0% 0%, 100% 0%, 100% ${e}%, 0% ${e}%)`;
|
|
823
784
|
case "from-top-right":
|
|
824
|
-
return `polygon(100% 0%, ${100 -
|
|
785
|
+
return `polygon(100% 0%, ${100 - e * 2}% 0%, 100% ${e * 2}%)`;
|
|
825
786
|
case "from-right":
|
|
826
|
-
return `polygon(100% 0%, 100% 100%, ${100 -
|
|
787
|
+
return `polygon(100% 0%, 100% 100%, ${100 - e}% 100%, ${100 - e}% 0%)`;
|
|
827
788
|
case "from-bottom-right":
|
|
828
|
-
return `polygon(100% 100%, ${100 -
|
|
789
|
+
return `polygon(100% 100%, ${100 - e * 2}% 100%, 100% ${100 - e * 2}%)`;
|
|
829
790
|
case "from-bottom":
|
|
830
|
-
return `polygon(0% 100%, 100% 100%, 100% ${100 -
|
|
791
|
+
return `polygon(0% 100%, 100% 100%, 100% ${100 - e}%, 0% ${100 - e}%)`;
|
|
831
792
|
case "from-bottom-left":
|
|
832
|
-
return `polygon(0% 100%, 0% ${100 -
|
|
793
|
+
return `polygon(0% 100%, 0% ${100 - e * 2}%, ${e * 2}% 100%)`;
|
|
833
794
|
default:
|
|
834
|
-
throw new Error(`Unknown direction ${JSON.stringify(
|
|
795
|
+
throw new Error(`Unknown direction ${JSON.stringify(t)}`);
|
|
835
796
|
}
|
|
836
|
-
},
|
|
837
|
-
const
|
|
838
|
-
switch (
|
|
797
|
+
}, He = (n, t) => {
|
|
798
|
+
const e = n * 100;
|
|
799
|
+
switch (t) {
|
|
839
800
|
case "from-left":
|
|
840
|
-
return `polygon(100% 100%, ${100 -
|
|
801
|
+
return `polygon(100% 100%, ${100 - e}% 100%, ${100 - e}% 0%, 100% 0%)`;
|
|
841
802
|
case "from-top-left":
|
|
842
|
-
return `polygon(100% 100%, ${100 -
|
|
803
|
+
return `polygon(100% 100%, ${100 - e * 2}% 100%, 100% ${100 - e * 2}%)`;
|
|
843
804
|
case "from-top":
|
|
844
|
-
return `polygon(100% 100%, 0% 100%, 0% ${100 -
|
|
805
|
+
return `polygon(100% 100%, 0% 100%, 0% ${100 - e}%, 100% ${100 - e}%)`;
|
|
845
806
|
case "from-top-right":
|
|
846
|
-
return `polygon(0% 100%, ${
|
|
807
|
+
return `polygon(0% 100%, ${e * 2}% 100%, 0% ${100 - e * 2}%)`;
|
|
847
808
|
case "from-right":
|
|
848
|
-
return `polygon(0% 0%, ${
|
|
809
|
+
return `polygon(0% 0%, ${e}% 0%, ${e}% 100%, 0% 100%)`;
|
|
849
810
|
case "from-bottom-right":
|
|
850
|
-
return `polygon(0% 0%, ${
|
|
811
|
+
return `polygon(0% 0%, ${e * 2}% 0%, 0% ${e * 2}%)`;
|
|
851
812
|
case "from-bottom":
|
|
852
|
-
return `polygon(100% 0%, 0% 0%, 0% ${
|
|
813
|
+
return `polygon(100% 0%, 0% 0%, 0% ${e}%, 100% ${e}%)`;
|
|
853
814
|
case "from-bottom-left":
|
|
854
|
-
return `polygon(100% 0%, ${100 -
|
|
815
|
+
return `polygon(100% 0%, ${100 - e * 2}% 0%, 100% ${e * 2}%)`;
|
|
855
816
|
default:
|
|
856
|
-
throw new Error(`Unknown direction ${JSON.stringify(
|
|
817
|
+
throw new Error(`Unknown direction ${JSON.stringify(t)}`);
|
|
857
818
|
}
|
|
858
|
-
},
|
|
819
|
+
}, Je = ({
|
|
859
820
|
children: n,
|
|
860
|
-
presentationProgress:
|
|
861
|
-
presentationDirection:
|
|
821
|
+
presentationProgress: t,
|
|
822
|
+
presentationDirection: e,
|
|
862
823
|
passedProps: {
|
|
863
824
|
direction: r = "from-left",
|
|
864
825
|
innerEnterStyle: s,
|
|
865
826
|
innerExitStyle: l,
|
|
866
|
-
outerEnterStyle:
|
|
827
|
+
outerEnterStyle: u,
|
|
867
828
|
outerExitStyle: a
|
|
868
829
|
}
|
|
869
830
|
}) => {
|
|
870
|
-
const i =
|
|
831
|
+
const i = e === "entering" ? t : 1 - t, f = e === "entering" ? Ve(i, r) : He(i, r), d = h(() => ({
|
|
871
832
|
width: "100%",
|
|
872
833
|
height: "100%",
|
|
873
834
|
justifyContent: "center",
|
|
874
835
|
alignItems: "center",
|
|
875
|
-
clipPath:
|
|
876
|
-
...
|
|
877
|
-
}), [
|
|
878
|
-
return /* @__PURE__ */ o(
|
|
879
|
-
style:
|
|
880
|
-
children: /* @__PURE__ */ o(
|
|
881
|
-
style:
|
|
836
|
+
clipPath: f,
|
|
837
|
+
...e === "entering" ? s : l
|
|
838
|
+
}), [f, s, l, e]), $ = h(() => e === "entering" ? u : a, [u, a, e]);
|
|
839
|
+
return /* @__PURE__ */ o(c, {
|
|
840
|
+
style: $,
|
|
841
|
+
children: /* @__PURE__ */ o(c, {
|
|
842
|
+
style: d,
|
|
882
843
|
children: n
|
|
883
844
|
})
|
|
884
845
|
});
|
|
885
|
-
},
|
|
886
|
-
component:
|
|
846
|
+
}, Ke = (n) => ({
|
|
847
|
+
component: Je,
|
|
887
848
|
props: n ?? {}
|
|
888
|
-
}),
|
|
849
|
+
}), Ge = ({
|
|
889
850
|
children: n,
|
|
890
|
-
presentationDirection:
|
|
891
|
-
presentationProgress:
|
|
851
|
+
presentationDirection: t,
|
|
852
|
+
presentationProgress: e,
|
|
892
853
|
passedProps: {
|
|
893
854
|
direction: r = "from-left",
|
|
894
855
|
perspective: s = 1e3,
|
|
895
856
|
innerEnterStyle: l,
|
|
896
|
-
innerExitStyle:
|
|
857
|
+
innerExitStyle: u,
|
|
897
858
|
outerEnterStyle: a,
|
|
898
859
|
outerExitStyle: i
|
|
899
860
|
}
|
|
900
861
|
}) => {
|
|
901
|
-
const
|
|
902
|
-
const
|
|
862
|
+
const f = h(() => {
|
|
863
|
+
const g = t === "entering" ? D(e, [0, 1], [r === "from-right" || r === "from-top" ? 180 : -180, 0]) : D(e, [0, 1], [0, r === "from-right" || r === "from-top" ? -180 : 180]);
|
|
903
864
|
return {
|
|
904
865
|
width: "100%",
|
|
905
866
|
height: "100%",
|
|
906
|
-
transform: `${r === "from-top" || r === "from-bottom" ? "rotateX" : "rotateY"}(${
|
|
867
|
+
transform: `${r === "from-top" || r === "from-bottom" ? "rotateX" : "rotateY"}(${g}deg)`,
|
|
907
868
|
backfaceVisibility: "hidden",
|
|
908
869
|
WebkitBackfaceVisibility: "hidden",
|
|
909
|
-
...
|
|
870
|
+
...t === "entering" ? l : u
|
|
910
871
|
};
|
|
911
872
|
}, [
|
|
912
873
|
r,
|
|
913
874
|
l,
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
]),
|
|
875
|
+
u,
|
|
876
|
+
t,
|
|
877
|
+
e
|
|
878
|
+
]), d = h(() => ({
|
|
918
879
|
perspective: s,
|
|
919
880
|
transformStyle: "preserve-3d",
|
|
920
|
-
...
|
|
921
|
-
}), [a, i, s,
|
|
922
|
-
return /* @__PURE__ */ o(
|
|
923
|
-
style:
|
|
924
|
-
children: /* @__PURE__ */ o(
|
|
925
|
-
style:
|
|
881
|
+
...t === "entering" ? a : i
|
|
882
|
+
}), [a, i, s, t]);
|
|
883
|
+
return /* @__PURE__ */ o(c, {
|
|
884
|
+
style: d,
|
|
885
|
+
children: /* @__PURE__ */ o(c, {
|
|
886
|
+
style: f,
|
|
926
887
|
children: n
|
|
927
888
|
})
|
|
928
889
|
});
|
|
929
|
-
},
|
|
930
|
-
const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, { path: l } =
|
|
890
|
+
}, Qe = (n) => ({ component: Ge, props: n ?? {} }), Ze = ({ children: n, presentationDirection: t, presentationProgress: e, passedProps: r }) => {
|
|
891
|
+
const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, { path: l } = ye({
|
|
931
892
|
radius: s,
|
|
932
|
-
progress:
|
|
933
|
-
}),
|
|
893
|
+
progress: e
|
|
894
|
+
}), u = te(l, -(s * 2 - r.width) / 2, -(s * 2 - r.height) / 2), a = h(() => ({
|
|
934
895
|
width: "100%",
|
|
935
896
|
height: "100%",
|
|
936
|
-
clipPath:
|
|
937
|
-
...
|
|
897
|
+
clipPath: t === "exiting" ? void 0 : `path("${u}")`,
|
|
898
|
+
...t === "entering" ? r.innerEnterStyle : r.innerExitStyle
|
|
938
899
|
}), [
|
|
939
|
-
|
|
900
|
+
u,
|
|
940
901
|
r.innerEnterStyle,
|
|
941
902
|
r.innerExitStyle,
|
|
942
|
-
|
|
943
|
-
]), i =
|
|
903
|
+
t
|
|
904
|
+
]), i = h(() => t === "entering" ? r.outerEnterStyle : r.outerExitStyle, [
|
|
944
905
|
r.outerEnterStyle,
|
|
945
906
|
r.outerExitStyle,
|
|
946
|
-
|
|
907
|
+
t
|
|
947
908
|
]);
|
|
948
|
-
return /* @__PURE__ */ o(
|
|
909
|
+
return /* @__PURE__ */ o(c, {
|
|
949
910
|
style: i,
|
|
950
|
-
children: /* @__PURE__ */ o(
|
|
911
|
+
children: /* @__PURE__ */ o(c, {
|
|
951
912
|
style: a,
|
|
952
913
|
children: n
|
|
953
914
|
})
|
|
954
915
|
});
|
|
955
|
-
},
|
|
956
|
-
const
|
|
916
|
+
}, et = (n) => ({ component: Ze, props: n ?? {} });
|
|
917
|
+
const ut = {
|
|
957
918
|
none: ({ id: n }) => /* @__PURE__ */ o(
|
|
958
|
-
|
|
919
|
+
y.Transition,
|
|
959
920
|
{
|
|
960
921
|
presentation: Q(),
|
|
961
|
-
timing:
|
|
922
|
+
timing: T({ durationInFrames: 1 })
|
|
962
923
|
},
|
|
963
924
|
n
|
|
964
925
|
),
|
|
965
|
-
fade: ({ durationInFrames: n, id:
|
|
966
|
-
|
|
926
|
+
fade: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
|
|
927
|
+
y.Transition,
|
|
967
928
|
{
|
|
968
929
|
presentation: Q(),
|
|
969
|
-
timing:
|
|
930
|
+
timing: T({ durationInFrames: n })
|
|
970
931
|
},
|
|
971
|
-
|
|
932
|
+
t
|
|
972
933
|
),
|
|
973
|
-
slide: ({ durationInFrames: n, id:
|
|
974
|
-
|
|
934
|
+
slide: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
|
|
935
|
+
y.Transition,
|
|
975
936
|
{
|
|
976
|
-
presentation:
|
|
977
|
-
timing:
|
|
937
|
+
presentation: je({ direction: e }),
|
|
938
|
+
timing: T({ durationInFrames: n })
|
|
978
939
|
},
|
|
979
|
-
|
|
940
|
+
t
|
|
980
941
|
),
|
|
981
|
-
wipe: ({ durationInFrames: n, id:
|
|
982
|
-
|
|
942
|
+
wipe: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
|
|
943
|
+
y.Transition,
|
|
983
944
|
{
|
|
984
|
-
presentation:
|
|
985
|
-
timing:
|
|
945
|
+
presentation: Ke({ direction: e }),
|
|
946
|
+
timing: T({ durationInFrames: n })
|
|
986
947
|
},
|
|
987
|
-
|
|
948
|
+
t
|
|
988
949
|
),
|
|
989
|
-
flip: ({ durationInFrames: n, id:
|
|
990
|
-
|
|
950
|
+
flip: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
|
|
951
|
+
y.Transition,
|
|
991
952
|
{
|
|
992
|
-
presentation:
|
|
993
|
-
timing:
|
|
953
|
+
presentation: Qe(),
|
|
954
|
+
timing: T({ durationInFrames: n })
|
|
994
955
|
},
|
|
995
|
-
|
|
956
|
+
t
|
|
996
957
|
),
|
|
997
|
-
clockWipe: ({ width: n, height:
|
|
998
|
-
|
|
958
|
+
clockWipe: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
|
|
959
|
+
y.Transition,
|
|
999
960
|
{
|
|
1000
|
-
presentation:
|
|
1001
|
-
timing:
|
|
961
|
+
presentation: et({ width: n, height: t }),
|
|
962
|
+
timing: T({ durationInFrames: e })
|
|
1002
963
|
},
|
|
1003
964
|
r
|
|
1004
965
|
),
|
|
1005
|
-
star: ({ width: n, height:
|
|
1006
|
-
|
|
966
|
+
star: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
|
|
967
|
+
y.Transition,
|
|
1007
968
|
{
|
|
1008
|
-
presentation:
|
|
1009
|
-
timing:
|
|
969
|
+
presentation: Oe({ width: n, height: t }),
|
|
970
|
+
timing: T({ durationInFrames: e })
|
|
1010
971
|
},
|
|
1011
972
|
r
|
|
1012
973
|
),
|
|
1013
|
-
circle: ({ width: n, height:
|
|
1014
|
-
|
|
974
|
+
circle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
|
|
975
|
+
y.Transition,
|
|
1015
976
|
{
|
|
1016
|
-
presentation:
|
|
1017
|
-
timing:
|
|
977
|
+
presentation: Ne({ width: n, height: t }),
|
|
978
|
+
timing: T({ durationInFrames: e })
|
|
1018
979
|
},
|
|
1019
980
|
r
|
|
1020
981
|
),
|
|
1021
|
-
rectangle: ({ width: n, height:
|
|
1022
|
-
|
|
982
|
+
rectangle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
|
|
983
|
+
y.Transition,
|
|
1023
984
|
{
|
|
1024
|
-
presentation:
|
|
1025
|
-
timing:
|
|
985
|
+
presentation: Ae({ width: n, height: t }),
|
|
986
|
+
timing: T({ durationInFrames: e })
|
|
1026
987
|
},
|
|
1027
988
|
r
|
|
1028
989
|
),
|
|
1029
990
|
slidingDoors: ({
|
|
1030
991
|
width: n,
|
|
1031
|
-
height:
|
|
1032
|
-
durationInFrames:
|
|
992
|
+
height: t,
|
|
993
|
+
durationInFrames: e,
|
|
1033
994
|
id: r
|
|
1034
995
|
}) => /* @__PURE__ */ o(
|
|
1035
|
-
|
|
996
|
+
y.Transition,
|
|
1036
997
|
{
|
|
1037
|
-
presentation:
|
|
1038
|
-
timing:
|
|
998
|
+
presentation: Ye({ width: n, height: t }),
|
|
999
|
+
timing: T({ durationInFrames: e })
|
|
1039
1000
|
},
|
|
1040
1001
|
r
|
|
1041
1002
|
)
|
|
1042
1003
|
};
|
|
1043
1004
|
export {
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
ee as clockWipe,
|
|
1005
|
+
y as TransitionSeries,
|
|
1006
|
+
ut as Transitions,
|
|
1007
|
+
Ne as circle,
|
|
1008
|
+
et as clockWipe,
|
|
1049
1009
|
Q as fade,
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1010
|
+
Qe as flip,
|
|
1011
|
+
T as linearTiming,
|
|
1012
|
+
Ae as rectangle,
|
|
1013
|
+
je as slide,
|
|
1014
|
+
Ye as slidingDoors,
|
|
1015
|
+
at as springTiming,
|
|
1016
|
+
Oe as star,
|
|
1017
|
+
lt as useTransitionProgress,
|
|
1018
|
+
Ke as wipe
|
|
1059
1019
|
};
|
|
1060
1020
|
//# sourceMappingURL=index.es.js.map
|