@pixodesk/svg-animator-web 1.0.18 → 1.0.20
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/README.md +31 -14
- package/dist/index.cjs +573 -182
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +344 -21
- package/dist/index.d.ts +344 -21
- package/dist/index.js +568 -181
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.umd.js +568 -181
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/package.json +2 -1
package/dist/index.d.cts
CHANGED
|
@@ -257,8 +257,17 @@ declare const PxKeyframeSchema: PxSchema<{} & {
|
|
|
257
257
|
selected: PxSchema<boolean | undefined, true>;
|
|
258
258
|
};
|
|
259
259
|
};
|
|
260
|
-
/**
|
|
261
|
-
|
|
260
|
+
/**
|
|
261
|
+
* A single animation keyframe defining the state at a specific point in time.
|
|
262
|
+
*
|
|
263
|
+
* Generic over the keyframe `value` type for callers that know the per-property
|
|
264
|
+
* value shape (e.g. `PxKeyframe<Vec2>` in the effect appliers). Defaults to
|
|
265
|
+
* `any`, matching the schema (`value` is stored as `px.any()` on the wire).
|
|
266
|
+
*/
|
|
267
|
+
type PxKeyframe<T = any> = Omit<PxInfer<typeof PxKeyframeSchema>, 'value' | 'v'> & {
|
|
268
|
+
value?: T;
|
|
269
|
+
v?: T;
|
|
270
|
+
};
|
|
262
271
|
declare const PxLoopSchema: PxSchema<{} & {
|
|
263
272
|
segmentCount?: number | undefined;
|
|
264
273
|
before?: boolean | undefined;
|
|
@@ -270,6 +279,11 @@ declare const PxLoopSchema: PxSchema<{} & {
|
|
|
270
279
|
alternate: PxSchema<boolean | undefined, true>;
|
|
271
280
|
};
|
|
272
281
|
};
|
|
282
|
+
/**
|
|
283
|
+
* Defines how a property's keyframe animation is extended beyond its defined keyframe range
|
|
284
|
+
* by continuously repeating a chosen segment of the sequence.
|
|
285
|
+
*/
|
|
286
|
+
type PxLoop = PxInfer<typeof PxLoopSchema>;
|
|
273
287
|
declare const PxPropertyAnimationSchema: PxSchema<{} & {
|
|
274
288
|
keyframes?: ({} & {
|
|
275
289
|
time?: number | undefined;
|
|
@@ -1824,9 +1838,10 @@ declare const PxStrokeGradientEffectSchema: PxSchema<{
|
|
|
1824
1838
|
};
|
|
1825
1839
|
};
|
|
1826
1840
|
type PxStrokeGradientEffect = PxFillGradientEffect;
|
|
1827
|
-
declare const
|
|
1828
|
-
|
|
1841
|
+
declare const PxTextPathEffectSchema: PxSchema<{
|
|
1842
|
+
path: string;
|
|
1829
1843
|
} & {
|
|
1844
|
+
pathOverflow?: string | undefined;
|
|
1830
1845
|
lengthAdjust?: string | undefined;
|
|
1831
1846
|
method?: string | undefined;
|
|
1832
1847
|
spacing?: string | undefined;
|
|
@@ -1870,7 +1885,8 @@ declare const PxTextAlongPathEffectSchema: PxSchema<{
|
|
|
1870
1885
|
}) | undefined;
|
|
1871
1886
|
}, false> & {
|
|
1872
1887
|
readonly _shape: {
|
|
1873
|
-
|
|
1888
|
+
path: PxSchema<string, false>;
|
|
1889
|
+
pathOverflow: PxSchema<string | undefined, true>;
|
|
1874
1890
|
lengthAdjust: PxSchema<string | undefined, true>;
|
|
1875
1891
|
method: PxSchema<string | undefined, true>;
|
|
1876
1892
|
spacing: PxSchema<string | undefined, true>;
|
|
@@ -1914,7 +1930,7 @@ declare const PxTextAlongPathEffectSchema: PxSchema<{
|
|
|
1914
1930
|
}) | undefined, true>;
|
|
1915
1931
|
};
|
|
1916
1932
|
};
|
|
1917
|
-
type
|
|
1933
|
+
type PxTextPathEffect = PxInfer<typeof PxTextPathEffectSchema>;
|
|
1918
1934
|
declare const PxTextEffectSchema: PxSchema<{} & {
|
|
1919
1935
|
useGlyphs?: boolean | undefined;
|
|
1920
1936
|
}, false> & {
|
|
@@ -2105,6 +2121,43 @@ declare const PxEffectsSchema: PxSchema<{} & {
|
|
|
2105
2121
|
maskUnits?: string | undefined;
|
|
2106
2122
|
maskContentUnits?: string | undefined;
|
|
2107
2123
|
}) | undefined;
|
|
2124
|
+
clipPath?: ({} & {
|
|
2125
|
+
d?: string | undefined;
|
|
2126
|
+
animate?: ({} & {
|
|
2127
|
+
keyframes?: ({} & {
|
|
2128
|
+
time?: number | undefined;
|
|
2129
|
+
t?: number | undefined;
|
|
2130
|
+
value?: any;
|
|
2131
|
+
v?: any;
|
|
2132
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
2133
|
+
e?: string | [number, number, number, number] | undefined;
|
|
2134
|
+
tangentOut?: [number, number] | undefined;
|
|
2135
|
+
to?: [number, number] | undefined;
|
|
2136
|
+
tangentIn?: [number, number] | undefined;
|
|
2137
|
+
ti?: [number, number] | undefined;
|
|
2138
|
+
selected?: boolean | undefined;
|
|
2139
|
+
})[] | undefined;
|
|
2140
|
+
kfs?: ({} & {
|
|
2141
|
+
time?: number | undefined;
|
|
2142
|
+
t?: number | undefined;
|
|
2143
|
+
value?: any;
|
|
2144
|
+
v?: any;
|
|
2145
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
2146
|
+
e?: string | [number, number, number, number] | undefined;
|
|
2147
|
+
tangentOut?: [number, number] | undefined;
|
|
2148
|
+
to?: [number, number] | undefined;
|
|
2149
|
+
tangentIn?: [number, number] | undefined;
|
|
2150
|
+
ti?: [number, number] | undefined;
|
|
2151
|
+
selected?: boolean | undefined;
|
|
2152
|
+
})[] | undefined;
|
|
2153
|
+
loop?: boolean | ({} & {
|
|
2154
|
+
segmentCount?: number | undefined;
|
|
2155
|
+
before?: boolean | undefined;
|
|
2156
|
+
alternate?: boolean | undefined;
|
|
2157
|
+
}) | undefined;
|
|
2158
|
+
autoOrient?: boolean | undefined;
|
|
2159
|
+
}) | undefined;
|
|
2160
|
+
}) | undefined;
|
|
2108
2161
|
trimPath?: ({} & {
|
|
2109
2162
|
offset?: number | ({
|
|
2110
2163
|
value: number;
|
|
@@ -2227,9 +2280,10 @@ declare const PxEffectsSchema: PxSchema<{} & {
|
|
|
2227
2280
|
spreadMethod?: string | undefined;
|
|
2228
2281
|
gradientTransform?: string | undefined;
|
|
2229
2282
|
}) | undefined;
|
|
2230
|
-
|
|
2231
|
-
|
|
2283
|
+
textPath?: ({
|
|
2284
|
+
path: string;
|
|
2232
2285
|
} & {
|
|
2286
|
+
pathOverflow?: string | undefined;
|
|
2233
2287
|
lengthAdjust?: string | undefined;
|
|
2234
2288
|
method?: string | undefined;
|
|
2235
2289
|
spacing?: string | undefined;
|
|
@@ -2459,6 +2513,43 @@ declare const PxEffectsSchema: PxSchema<{} & {
|
|
|
2459
2513
|
maskUnits?: string | undefined;
|
|
2460
2514
|
maskContentUnits?: string | undefined;
|
|
2461
2515
|
}) | undefined, true>;
|
|
2516
|
+
clipPath: PxSchema<({} & {
|
|
2517
|
+
d?: string | undefined;
|
|
2518
|
+
animate?: ({} & {
|
|
2519
|
+
keyframes?: ({} & {
|
|
2520
|
+
time?: number | undefined;
|
|
2521
|
+
t?: number | undefined;
|
|
2522
|
+
value?: any;
|
|
2523
|
+
v?: any;
|
|
2524
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
2525
|
+
e?: string | [number, number, number, number] | undefined;
|
|
2526
|
+
tangentOut?: [number, number] | undefined;
|
|
2527
|
+
to?: [number, number] | undefined;
|
|
2528
|
+
tangentIn?: [number, number] | undefined;
|
|
2529
|
+
ti?: [number, number] | undefined;
|
|
2530
|
+
selected?: boolean | undefined;
|
|
2531
|
+
})[] | undefined;
|
|
2532
|
+
kfs?: ({} & {
|
|
2533
|
+
time?: number | undefined;
|
|
2534
|
+
t?: number | undefined;
|
|
2535
|
+
value?: any;
|
|
2536
|
+
v?: any;
|
|
2537
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
2538
|
+
e?: string | [number, number, number, number] | undefined;
|
|
2539
|
+
tangentOut?: [number, number] | undefined;
|
|
2540
|
+
to?: [number, number] | undefined;
|
|
2541
|
+
tangentIn?: [number, number] | undefined;
|
|
2542
|
+
ti?: [number, number] | undefined;
|
|
2543
|
+
selected?: boolean | undefined;
|
|
2544
|
+
})[] | undefined;
|
|
2545
|
+
loop?: boolean | ({} & {
|
|
2546
|
+
segmentCount?: number | undefined;
|
|
2547
|
+
before?: boolean | undefined;
|
|
2548
|
+
alternate?: boolean | undefined;
|
|
2549
|
+
}) | undefined;
|
|
2550
|
+
autoOrient?: boolean | undefined;
|
|
2551
|
+
}) | undefined;
|
|
2552
|
+
}) | undefined, true>;
|
|
2462
2553
|
trimPath: PxSchema<({} & {
|
|
2463
2554
|
offset?: number | ({
|
|
2464
2555
|
value: number;
|
|
@@ -2581,9 +2672,10 @@ declare const PxEffectsSchema: PxSchema<{} & {
|
|
|
2581
2672
|
spreadMethod?: string | undefined;
|
|
2582
2673
|
gradientTransform?: string | undefined;
|
|
2583
2674
|
}) | undefined, true>;
|
|
2584
|
-
|
|
2585
|
-
|
|
2675
|
+
textPath: PxSchema<({
|
|
2676
|
+
path: string;
|
|
2586
2677
|
} & {
|
|
2678
|
+
pathOverflow?: string | undefined;
|
|
2587
2679
|
lengthAdjust?: string | undefined;
|
|
2588
2680
|
method?: string | undefined;
|
|
2589
2681
|
spacing?: string | undefined;
|
|
@@ -2838,6 +2930,43 @@ declare const PxNodeBase: PxSchema<{
|
|
|
2838
2930
|
maskUnits?: string | undefined;
|
|
2839
2931
|
maskContentUnits?: string | undefined;
|
|
2840
2932
|
}) | undefined;
|
|
2933
|
+
clipPath?: ({} & {
|
|
2934
|
+
d?: string | undefined;
|
|
2935
|
+
animate?: ({} & {
|
|
2936
|
+
keyframes?: ({} & {
|
|
2937
|
+
time?: number | undefined;
|
|
2938
|
+
t?: number | undefined;
|
|
2939
|
+
value?: any;
|
|
2940
|
+
v?: any;
|
|
2941
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
2942
|
+
e?: string | [number, number, number, number] | undefined;
|
|
2943
|
+
tangentOut?: [number, number] | undefined;
|
|
2944
|
+
to?: [number, number] | undefined;
|
|
2945
|
+
tangentIn?: [number, number] | undefined;
|
|
2946
|
+
ti?: [number, number] | undefined;
|
|
2947
|
+
selected?: boolean | undefined;
|
|
2948
|
+
})[] | undefined;
|
|
2949
|
+
kfs?: ({} & {
|
|
2950
|
+
time?: number | undefined;
|
|
2951
|
+
t?: number | undefined;
|
|
2952
|
+
value?: any;
|
|
2953
|
+
v?: any;
|
|
2954
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
2955
|
+
e?: string | [number, number, number, number] | undefined;
|
|
2956
|
+
tangentOut?: [number, number] | undefined;
|
|
2957
|
+
to?: [number, number] | undefined;
|
|
2958
|
+
tangentIn?: [number, number] | undefined;
|
|
2959
|
+
ti?: [number, number] | undefined;
|
|
2960
|
+
selected?: boolean | undefined;
|
|
2961
|
+
})[] | undefined;
|
|
2962
|
+
loop?: boolean | ({} & {
|
|
2963
|
+
segmentCount?: number | undefined;
|
|
2964
|
+
before?: boolean | undefined;
|
|
2965
|
+
alternate?: boolean | undefined;
|
|
2966
|
+
}) | undefined;
|
|
2967
|
+
autoOrient?: boolean | undefined;
|
|
2968
|
+
}) | undefined;
|
|
2969
|
+
}) | undefined;
|
|
2841
2970
|
trimPath?: ({} & {
|
|
2842
2971
|
offset?: number | ({
|
|
2843
2972
|
value: number;
|
|
@@ -2960,9 +3089,10 @@ declare const PxNodeBase: PxSchema<{
|
|
|
2960
3089
|
spreadMethod?: string | undefined;
|
|
2961
3090
|
gradientTransform?: string | undefined;
|
|
2962
3091
|
}) | undefined;
|
|
2963
|
-
|
|
2964
|
-
|
|
3092
|
+
textPath?: ({
|
|
3093
|
+
path: string;
|
|
2965
3094
|
} & {
|
|
3095
|
+
pathOverflow?: string | undefined;
|
|
2966
3096
|
lengthAdjust?: string | undefined;
|
|
2967
3097
|
method?: string | undefined;
|
|
2968
3098
|
spacing?: string | undefined;
|
|
@@ -3267,6 +3397,43 @@ declare const PxNodeBase: PxSchema<{
|
|
|
3267
3397
|
maskUnits?: string | undefined;
|
|
3268
3398
|
maskContentUnits?: string | undefined;
|
|
3269
3399
|
}) | undefined;
|
|
3400
|
+
clipPath?: ({} & {
|
|
3401
|
+
d?: string | undefined;
|
|
3402
|
+
animate?: ({} & {
|
|
3403
|
+
keyframes?: ({} & {
|
|
3404
|
+
time?: number | undefined;
|
|
3405
|
+
t?: number | undefined;
|
|
3406
|
+
value?: any;
|
|
3407
|
+
v?: any;
|
|
3408
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
3409
|
+
e?: string | [number, number, number, number] | undefined;
|
|
3410
|
+
tangentOut?: [number, number] | undefined;
|
|
3411
|
+
to?: [number, number] | undefined;
|
|
3412
|
+
tangentIn?: [number, number] | undefined;
|
|
3413
|
+
ti?: [number, number] | undefined;
|
|
3414
|
+
selected?: boolean | undefined;
|
|
3415
|
+
})[] | undefined;
|
|
3416
|
+
kfs?: ({} & {
|
|
3417
|
+
time?: number | undefined;
|
|
3418
|
+
t?: number | undefined;
|
|
3419
|
+
value?: any;
|
|
3420
|
+
v?: any;
|
|
3421
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
3422
|
+
e?: string | [number, number, number, number] | undefined;
|
|
3423
|
+
tangentOut?: [number, number] | undefined;
|
|
3424
|
+
to?: [number, number] | undefined;
|
|
3425
|
+
tangentIn?: [number, number] | undefined;
|
|
3426
|
+
ti?: [number, number] | undefined;
|
|
3427
|
+
selected?: boolean | undefined;
|
|
3428
|
+
})[] | undefined;
|
|
3429
|
+
loop?: boolean | ({} & {
|
|
3430
|
+
segmentCount?: number | undefined;
|
|
3431
|
+
before?: boolean | undefined;
|
|
3432
|
+
alternate?: boolean | undefined;
|
|
3433
|
+
}) | undefined;
|
|
3434
|
+
autoOrient?: boolean | undefined;
|
|
3435
|
+
}) | undefined;
|
|
3436
|
+
}) | undefined;
|
|
3270
3437
|
trimPath?: ({} & {
|
|
3271
3438
|
offset?: number | ({
|
|
3272
3439
|
value: number;
|
|
@@ -3389,9 +3556,10 @@ declare const PxNodeBase: PxSchema<{
|
|
|
3389
3556
|
spreadMethod?: string | undefined;
|
|
3390
3557
|
gradientTransform?: string | undefined;
|
|
3391
3558
|
}) | undefined;
|
|
3392
|
-
|
|
3393
|
-
|
|
3559
|
+
textPath?: ({
|
|
3560
|
+
path: string;
|
|
3394
3561
|
} & {
|
|
3562
|
+
pathOverflow?: string | undefined;
|
|
3395
3563
|
lengthAdjust?: string | undefined;
|
|
3396
3564
|
method?: string | undefined;
|
|
3397
3565
|
spacing?: string | undefined;
|
|
@@ -4137,6 +4305,43 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
4137
4305
|
maskUnits?: string | undefined;
|
|
4138
4306
|
maskContentUnits?: string | undefined;
|
|
4139
4307
|
}) | undefined;
|
|
4308
|
+
clipPath?: ({} & {
|
|
4309
|
+
d?: string | undefined;
|
|
4310
|
+
animate?: ({} & {
|
|
4311
|
+
keyframes?: ({} & {
|
|
4312
|
+
time?: number | undefined;
|
|
4313
|
+
t?: number | undefined;
|
|
4314
|
+
value?: any;
|
|
4315
|
+
v?: any;
|
|
4316
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
4317
|
+
e?: string | [number, number, number, number] | undefined;
|
|
4318
|
+
tangentOut?: [number, number] | undefined;
|
|
4319
|
+
to?: [number, number] | undefined;
|
|
4320
|
+
tangentIn?: [number, number] | undefined;
|
|
4321
|
+
ti?: [number, number] | undefined;
|
|
4322
|
+
selected?: boolean | undefined;
|
|
4323
|
+
})[] | undefined;
|
|
4324
|
+
kfs?: ({} & {
|
|
4325
|
+
time?: number | undefined;
|
|
4326
|
+
t?: number | undefined;
|
|
4327
|
+
value?: any;
|
|
4328
|
+
v?: any;
|
|
4329
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
4330
|
+
e?: string | [number, number, number, number] | undefined;
|
|
4331
|
+
tangentOut?: [number, number] | undefined;
|
|
4332
|
+
to?: [number, number] | undefined;
|
|
4333
|
+
tangentIn?: [number, number] | undefined;
|
|
4334
|
+
ti?: [number, number] | undefined;
|
|
4335
|
+
selected?: boolean | undefined;
|
|
4336
|
+
})[] | undefined;
|
|
4337
|
+
loop?: boolean | ({} & {
|
|
4338
|
+
segmentCount?: number | undefined;
|
|
4339
|
+
before?: boolean | undefined;
|
|
4340
|
+
alternate?: boolean | undefined;
|
|
4341
|
+
}) | undefined;
|
|
4342
|
+
autoOrient?: boolean | undefined;
|
|
4343
|
+
}) | undefined;
|
|
4344
|
+
}) | undefined;
|
|
4140
4345
|
trimPath?: ({} & {
|
|
4141
4346
|
offset?: number | ({
|
|
4142
4347
|
value: number;
|
|
@@ -4259,9 +4464,10 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
4259
4464
|
spreadMethod?: string | undefined;
|
|
4260
4465
|
gradientTransform?: string | undefined;
|
|
4261
4466
|
}) | undefined;
|
|
4262
|
-
|
|
4263
|
-
|
|
4467
|
+
textPath?: ({
|
|
4468
|
+
path: string;
|
|
4264
4469
|
} & {
|
|
4470
|
+
pathOverflow?: string | undefined;
|
|
4265
4471
|
lengthAdjust?: string | undefined;
|
|
4266
4472
|
method?: string | undefined;
|
|
4267
4473
|
spacing?: string | undefined;
|
|
@@ -4701,6 +4907,43 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
4701
4907
|
maskUnits?: string | undefined;
|
|
4702
4908
|
maskContentUnits?: string | undefined;
|
|
4703
4909
|
}) | undefined;
|
|
4910
|
+
clipPath?: ({} & {
|
|
4911
|
+
d?: string | undefined;
|
|
4912
|
+
animate?: ({} & {
|
|
4913
|
+
keyframes?: ({} & {
|
|
4914
|
+
time?: number | undefined;
|
|
4915
|
+
t?: number | undefined;
|
|
4916
|
+
value?: any;
|
|
4917
|
+
v?: any;
|
|
4918
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
4919
|
+
e?: string | [number, number, number, number] | undefined;
|
|
4920
|
+
tangentOut?: [number, number] | undefined;
|
|
4921
|
+
to?: [number, number] | undefined;
|
|
4922
|
+
tangentIn?: [number, number] | undefined;
|
|
4923
|
+
ti?: [number, number] | undefined;
|
|
4924
|
+
selected?: boolean | undefined;
|
|
4925
|
+
})[] | undefined;
|
|
4926
|
+
kfs?: ({} & {
|
|
4927
|
+
time?: number | undefined;
|
|
4928
|
+
t?: number | undefined;
|
|
4929
|
+
value?: any;
|
|
4930
|
+
v?: any;
|
|
4931
|
+
easing?: string | [number, number, number, number] | undefined;
|
|
4932
|
+
e?: string | [number, number, number, number] | undefined;
|
|
4933
|
+
tangentOut?: [number, number] | undefined;
|
|
4934
|
+
to?: [number, number] | undefined;
|
|
4935
|
+
tangentIn?: [number, number] | undefined;
|
|
4936
|
+
ti?: [number, number] | undefined;
|
|
4937
|
+
selected?: boolean | undefined;
|
|
4938
|
+
})[] | undefined;
|
|
4939
|
+
loop?: boolean | ({} & {
|
|
4940
|
+
segmentCount?: number | undefined;
|
|
4941
|
+
before?: boolean | undefined;
|
|
4942
|
+
alternate?: boolean | undefined;
|
|
4943
|
+
}) | undefined;
|
|
4944
|
+
autoOrient?: boolean | undefined;
|
|
4945
|
+
}) | undefined;
|
|
4946
|
+
}) | undefined;
|
|
4704
4947
|
trimPath?: ({} & {
|
|
4705
4948
|
offset?: number | ({
|
|
4706
4949
|
value: number;
|
|
@@ -4823,9 +5066,10 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
4823
5066
|
spreadMethod?: string | undefined;
|
|
4824
5067
|
gradientTransform?: string | undefined;
|
|
4825
5068
|
}) | undefined;
|
|
4826
|
-
|
|
4827
|
-
|
|
5069
|
+
textPath?: ({
|
|
5070
|
+
path: string;
|
|
4828
5071
|
} & {
|
|
5072
|
+
pathOverflow?: string | undefined;
|
|
4829
5073
|
lengthAdjust?: string | undefined;
|
|
4830
5074
|
method?: string | undefined;
|
|
4831
5075
|
spacing?: string | undefined;
|
|
@@ -5297,7 +5541,10 @@ interface ApplyResult {
|
|
|
5297
5541
|
* - ALONG-PATH ({@link materialiseGlyphTextAlongPath}) — each glyph placed and
|
|
5298
5542
|
* rotated to the referenced path's tangent. Static `startOffset` → glyphs
|
|
5299
5543
|
* bake+merge; animated `startOffset` → per-glyph `<path>` with sampled
|
|
5300
|
-
* `animate.transform`.
|
|
5544
|
+
* `animate.transform`. Text-level `x`/`dx` add distance ALONG the path (≈
|
|
5545
|
+
* startOffset) and `dy` shifts PERPENDICULAR — matching native `<textPath>`
|
|
5546
|
+
* (see {@link alongPathNodeOffsets}); `y` and per-tspan positioning are ignored
|
|
5547
|
+
* (a single run).
|
|
5301
5548
|
*
|
|
5302
5549
|
* Element creation goes through an injected {@link PxCreateElement} factory, so
|
|
5303
5550
|
* the SAME layout produces plain wire nodes here (the effects pipeline) or the
|
|
@@ -5319,7 +5566,40 @@ interface GlyphMaterialiseOpts<E = any> {
|
|
|
5319
5566
|
warnings?: Array<string>;
|
|
5320
5567
|
}
|
|
5321
5568
|
declare function materialiseGlyphTextHorizontal<E = any>(node: PxNode, opts: GlyphMaterialiseOpts<E>): E;
|
|
5322
|
-
|
|
5569
|
+
/** Per-CHARACTER advance box (local, pre-transform coords). `x,y` = the char's baseline start,
|
|
5570
|
+
* `width` = its advance, `ascent`/`fontSize` size its bbox. */
|
|
5571
|
+
interface GlyphCharBox {
|
|
5572
|
+
x: number;
|
|
5573
|
+
y: number;
|
|
5574
|
+
width: number;
|
|
5575
|
+
ascent: number;
|
|
5576
|
+
fontSize: number;
|
|
5577
|
+
/** Along-path only: baseline END point (leading edge of the next char). Absent for
|
|
5578
|
+
* horizontal, where the end is `x + width` on the same baseline. */
|
|
5579
|
+
endX?: number;
|
|
5580
|
+
endY?: number;
|
|
5581
|
+
/** Along-path only: char rotation in DEGREES (path tangent; 0 = horizontal). */
|
|
5582
|
+
rotation?: number;
|
|
5583
|
+
}
|
|
5584
|
+
/** Optional along-path geometry for {@link layoutGlyphTextChars}: when given, chars are
|
|
5585
|
+
* placed + rotated along `pathD` (mirrors {@link materialiseGlyphTextAlongPath}) at the
|
|
5586
|
+
* STATIC / frame-0 startOffset, so the editor caret follows the path. */
|
|
5587
|
+
interface GlyphCharBoxAlongPath {
|
|
5588
|
+
pathD?: string;
|
|
5589
|
+
startOffset?: PxAnimatable<number>;
|
|
5590
|
+
textLength?: number;
|
|
5591
|
+
pathOverflow?: string;
|
|
5592
|
+
}
|
|
5593
|
+
/** Per-character layout boxes for a glyph text, in reading/DOM order INCLUDING spaces
|
|
5594
|
+
* (a space has no glyph but advances the pen). HORIZONTAL by default — mirrors
|
|
5595
|
+
* `materialiseGlyphTextHorizontal`'s pen-walk exactly (same x/y/dx/dy, spacing and
|
|
5596
|
+
* text-anchor). When `opts.alongPath` is given, mirrors `materialiseGlyphTextAlongPath`
|
|
5597
|
+
* (each char placed + rotated to the path tangent). So an editor caret built from these
|
|
5598
|
+
* lands on the rendered glyphs. Empty for a text with no glyph font / unparsable path. */
|
|
5599
|
+
declare function layoutGlyphTextChars(node: PxNode, opts: Pick<GlyphMaterialiseOpts, 'glyphs' | 'warnings'> & {
|
|
5600
|
+
alongPath?: GlyphCharBoxAlongPath;
|
|
5601
|
+
}): Array<GlyphCharBox>;
|
|
5602
|
+
declare function materialiseGlyphTextAlongPath<E = any>(node: PxNode, pathD: string | undefined, startOffset: PxAnimatable<number> | undefined, opts: GlyphMaterialiseOpts<E>, textLength?: number, pathOverflow?: string): E | null;
|
|
5323
5603
|
/** Single entry the EDITOR calls: materialises a glyph `<text>` node into the
|
|
5324
5604
|
* factory's element type, choosing along-path when `alongPath` is given. */
|
|
5325
5605
|
declare function materialiseGlyphText<E = any>(node: PxNode, opts: GlyphMaterialiseOpts<E> & {
|
|
@@ -5327,9 +5607,52 @@ declare function materialiseGlyphText<E = any>(node: PxNode, opts: GlyphMaterial
|
|
|
5327
5607
|
pathD?: string;
|
|
5328
5608
|
startOffset?: PxAnimatable<number>;
|
|
5329
5609
|
textLength?: number;
|
|
5610
|
+
pathOverflow?: string;
|
|
5330
5611
|
};
|
|
5331
5612
|
}): E | null;
|
|
5332
5613
|
|
|
5614
|
+
interface PathPoint {
|
|
5615
|
+
x: number;
|
|
5616
|
+
y: number;
|
|
5617
|
+
angle: number;
|
|
5618
|
+
}
|
|
5619
|
+
interface PathSampler {
|
|
5620
|
+
totalLength: number;
|
|
5621
|
+
/** True when the path loops back on itself (explicit `Z` or coincident ends) —
|
|
5622
|
+
* no open tip to run off, so overflow clamps/wraps rather than clipping. */
|
|
5623
|
+
closed: boolean;
|
|
5624
|
+
sampleAtDistance(dist: number): PathPoint;
|
|
5625
|
+
}
|
|
5626
|
+
declare function createPathSampler(d: string): PathSampler | null;
|
|
5627
|
+
|
|
5628
|
+
/** Inputs for {@link extendedPathForBrowser}. `advance` = the text run-width used to
|
|
5629
|
+
* size the end extension (caller-measured; the player estimates it from the node,
|
|
5630
|
+
* the editor from its text model — browser fonts have no glyph metrics available). */
|
|
5631
|
+
interface ExtendPathOpts {
|
|
5632
|
+
pathOverflow?: string;
|
|
5633
|
+
startOffset?: PxAnimatable<number>;
|
|
5634
|
+
textLength?: PxAnimatable<number>;
|
|
5635
|
+
advance?: number;
|
|
5636
|
+
}
|
|
5637
|
+
/** Result of {@link extendedPathForBrowser}: the (possibly) extended `d`, plus
|
|
5638
|
+
* `startShift` — the length of the prepended START lead-in. Because that lead-in
|
|
5639
|
+
* moves the `<textPath>` origin back by `startShift`, EVERY `startOffset` (all
|
|
5640
|
+
* keyframes) MUST be shifted by `+startShift` so the text lands where it would on
|
|
5641
|
+
* the un-extended path (`extend` only adds a tail, it must never move the text). */
|
|
5642
|
+
interface ExtendedPath {
|
|
5643
|
+
d: string;
|
|
5644
|
+
startShift: number;
|
|
5645
|
+
}
|
|
5646
|
+
/** Shift a `PxAnimatable<number>` by a constant (all keyframes). No-op for `0`. */
|
|
5647
|
+
declare function shiftAnimatable(v: PxAnimatable<number> | undefined, by: number): PxAnimatable<number> | undefined;
|
|
5648
|
+
/** For `pathOverflow:'extend'` (browser-font): extend an OPEN path along its endpoint
|
|
5649
|
+
* tangents so the browser lays overflow glyphs onto the straight extension (matching
|
|
5650
|
+
* glyph-mode's tangent behavior) instead of dropping them. `'clip'`/closed paths are
|
|
5651
|
+
* returned unchanged (browser clips natively). Shared by the player's browser-font
|
|
5652
|
+
* applier and the editor's live/heavy `<textPath>` def mint (single source of truth).
|
|
5653
|
+
* Returns the extended `d` AND `startShift` — see {@link ExtendedPath}. */
|
|
5654
|
+
declare function extendedPathForBrowser(pathD: string, opts: ExtendPathOpts): ExtendedPath;
|
|
5655
|
+
|
|
5333
5656
|
/**
|
|
5334
5657
|
* Creates an animator instance that uses the native Web Animations API.
|
|
5335
5658
|
*
|
|
@@ -5381,4 +5704,4 @@ interface EffectDiff {
|
|
|
5381
5704
|
*/
|
|
5382
5705
|
declare function diffInEffect(a: VmNode, b: VmNode): Array<EffectDiff>;
|
|
5383
5706
|
|
|
5384
|
-
export { type ApplyResult, COLOUR_ATTR_NAMES, type FillMode, type GlyphMaterialiseOpts, type JsMode, type KeysMatch, type MaterialiseAllOptions, type MotionPathMaterialisationOptions, type MotionPathSample, type OutAction, PX_ANIMATOR_DATA_KEY, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, type PlaybackDirection, type PxAnimatable, type PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, type PxAnimationDefinition, PxAnimationDefinitionSchema, type PxAnimatorAPI, type PxAnimatorCallbacksConfig, type PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, type PxAnimatorOptions, type PxAttrValue, PxAttrValueSchema, type PxBezierPath, PxBezierPathSchema, type PxBinding, PxBindingSchema, type PxCloneEffect, PxCloneEffectSchema, type PxCreateElement, type PxDefs, PxDefsSchema, PxEasingOrRefSchema, type PxEffects, PxEffectsSchema, type PxElementAnimation, PxElementAnimationSchema, type PxFillGradientEffect, PxFillGradientEffectSchema, type PxGlyph, type PxGlyphFont, PxGradientSpreadMethod, type PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, type PxInfer, type PxKeyframe, PxKeyframeSchema, PxLoopSchema, type PxMaskedByEffect, PxMaskedByEffectSchema, type PxNode, PxNodeBase, PxNodeSchema, type PxPlatformAdapter, type PxPropertyAnimation, PxPropertyAnimationSchema, type PxRepeaterEffect, PxRepeaterEffectSchema, type PxRetimeEffect, PxRetimeEffectSchema, type PxSchema, type PxSchemaDesc, type PxStrokeGradientEffect, PxStrokeGradientEffectSchema, type PxSvgNode, PxSvgNodeExtra, type
|
|
5707
|
+
export { type ApplyResult, COLOUR_ATTR_NAMES, type ExtendPathOpts, type ExtendedPath, type FillMode, type GlyphCharBox, type GlyphCharBoxAlongPath, type GlyphMaterialiseOpts, type JsMode, type KeysMatch, type MaterialiseAllOptions, type MotionPathMaterialisationOptions, type MotionPathSample, type OutAction, PX_ANIMATOR_DATA_KEY, PX_ANIM_ATTR_NAME, PX_ANIM_SRC_ATTR_NAME, PX_TRANSFORM_PART_KEYS, type PathPoint, type PathSampler, type PlaybackDirection, type PxAnimatable, type PxAnimatedSvgDocument, PxAnimatedSvgDocumentSchema, type PxAnimationDefinition, PxAnimationDefinitionSchema, type PxAnimatorAPI, type PxAnimatorCallbacksConfig, type PxAnimatorConfig, PxAnimatorConfigSchema, PxAnimatorEngine, PxAnimatorMode, type PxAnimatorOptions, type PxAttrValue, PxAttrValueSchema, type PxBezierPath, PxBezierPathSchema, type PxBinding, PxBindingSchema, type PxCloneEffect, PxCloneEffectSchema, type PxCreateElement, type PxDefs, PxDefsSchema, PxEasingOrRefSchema, type PxEffects, PxEffectsSchema, type PxElementAnimation, PxElementAnimationSchema, type PxFillGradientEffect, PxFillGradientEffectSchema, type PxGlyph, type PxGlyphFont, PxGradientSpreadMethod, type PxGradientStop, PxGradientStopSchema, PxGradientType, PxGradientUnits, type PxInfer, type PxKeyframe, PxKeyframeSchema, type PxLoop, PxLoopSchema, type PxMaskedByEffect, PxMaskedByEffectSchema, type PxNode, PxNodeBase, PxNodeSchema, type PxPlatformAdapter, type PxPropertyAnimation, PxPropertyAnimationSchema, type PxRepeaterEffect, PxRepeaterEffectSchema, type PxRetimeEffect, PxRetimeEffectSchema, type PxSchema, type PxSchemaDesc, type PxStrokeGradientEffect, PxStrokeGradientEffectSchema, type PxSvgNode, PxSvgNodeExtra, PxTextEffectSchema, type PxTextPathEffect, PxTextPathEffectSchema, type PxTransformPartKey, type PxTransformParts, PxTransformPartsSchema, type PxTransformValue, PxTransformValueSchema, type PxTransformationEffect, PxTransformationEffectSchema, type PxTrigger, PxTriggerSchema, type PxTrimPathEffect, PxTrimPathEffectSchema, type PxValidationContext, type PxValidationResult, type RemoveIndex, STYLE_ATTR_NAMES, type StartOn, TRANSFORM_FN_NAMES, type Vec2, applyPlayerEffects, calcAnimationValues, camelCaseToKebabWordIfNeeded, collectSampleTimes, createAnimator, createAnimatorImpl, createBasicFrameLoopAnimator, createFrameLoopAnimator, createPathSampler, createWebApiAnimator, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalizedProps, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, layoutGlyphTextChars, loadTagAnimators, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, getNormalisedBindings as normalizeDocument, propAnimIsMotionPath, px, renderNode, schemaKeys, setupAnimationTriggers, shiftAnimatable, toRGBA, validateNodeEffects, visualModelAt };
|