@pixodesk/svg-animator-web 1.0.17 → 1.0.19
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 +27 -0
- package/dist/index.cjs +710 -67
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +269 -28
- package/dist/index.d.ts +269 -28
- package/dist/index.js +702 -66
- 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 +702 -66
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -270,6 +270,11 @@ declare const PxLoopSchema: PxSchema<{} & {
|
|
|
270
270
|
alternate: PxSchema<boolean | undefined, true>;
|
|
271
271
|
};
|
|
272
272
|
};
|
|
273
|
+
/**
|
|
274
|
+
* Defines how a property's keyframe animation is extended beyond its defined keyframe range
|
|
275
|
+
* by continuously repeating a chosen segment of the sequence.
|
|
276
|
+
*/
|
|
277
|
+
type PxLoop = PxInfer<typeof PxLoopSchema>;
|
|
273
278
|
declare const PxPropertyAnimationSchema: PxSchema<{} & {
|
|
274
279
|
keyframes?: ({} & {
|
|
275
280
|
time?: number | undefined;
|
|
@@ -547,6 +552,38 @@ declare const PxTriggerSchema: PxSchema<{} & {
|
|
|
547
552
|
};
|
|
548
553
|
/** Defines when and how an animation should be triggered. */
|
|
549
554
|
type PxTrigger = PxInfer<typeof PxTriggerSchema>;
|
|
555
|
+
declare const PxGlyphSchema: PxSchema<{
|
|
556
|
+
width: number;
|
|
557
|
+
d: string;
|
|
558
|
+
} & {}, false> & {
|
|
559
|
+
readonly _shape: {
|
|
560
|
+
width: PxSchema<number, false>;
|
|
561
|
+
d: PxSchema<string, false>;
|
|
562
|
+
};
|
|
563
|
+
};
|
|
564
|
+
type PxGlyph = PxInfer<typeof PxGlyphSchema>;
|
|
565
|
+
declare const PxGlyphFontSchema: PxSchema<{
|
|
566
|
+
fFamily: string;
|
|
567
|
+
style: string;
|
|
568
|
+
ascent: number;
|
|
569
|
+
unitsPerEm: number;
|
|
570
|
+
glyphs: Record<string, {
|
|
571
|
+
width: number;
|
|
572
|
+
d: string;
|
|
573
|
+
} & {}>;
|
|
574
|
+
} & {}, false> & {
|
|
575
|
+
readonly _shape: {
|
|
576
|
+
fFamily: PxSchema<string, false>;
|
|
577
|
+
style: PxSchema<string, false>;
|
|
578
|
+
ascent: PxSchema<number, false>;
|
|
579
|
+
unitsPerEm: PxSchema<number, false>;
|
|
580
|
+
glyphs: PxSchema<Record<string, {
|
|
581
|
+
width: number;
|
|
582
|
+
d: string;
|
|
583
|
+
} & {}>, false>;
|
|
584
|
+
};
|
|
585
|
+
};
|
|
586
|
+
type PxGlyphFont = PxInfer<typeof PxGlyphFontSchema>;
|
|
550
587
|
declare const PxDefsSchema: PxSchema<{} & {
|
|
551
588
|
easings?: Record<string, [number, number, number, number]> | undefined;
|
|
552
589
|
animations?: Record<string, Record<string, {} & {
|
|
@@ -584,6 +621,16 @@ declare const PxDefsSchema: PxSchema<{} & {
|
|
|
584
621
|
autoOrient?: boolean | undefined;
|
|
585
622
|
}>> | undefined;
|
|
586
623
|
styles?: Record<string, any> | undefined;
|
|
624
|
+
glyphs?: Record<string, {
|
|
625
|
+
fFamily: string;
|
|
626
|
+
style: string;
|
|
627
|
+
ascent: number;
|
|
628
|
+
unitsPerEm: number;
|
|
629
|
+
glyphs: Record<string, {
|
|
630
|
+
width: number;
|
|
631
|
+
d: string;
|
|
632
|
+
} & {}>;
|
|
633
|
+
} & {}> | undefined;
|
|
587
634
|
}, false> & {
|
|
588
635
|
readonly _shape: {
|
|
589
636
|
easings: PxSchema<Record<string, [number, number, number, number]> | undefined, true>;
|
|
@@ -622,6 +669,16 @@ declare const PxDefsSchema: PxSchema<{} & {
|
|
|
622
669
|
autoOrient?: boolean | undefined;
|
|
623
670
|
}>> | undefined, true>;
|
|
624
671
|
styles: PxSchema<Record<string, any> | undefined, true>;
|
|
672
|
+
glyphs: PxSchema<Record<string, {
|
|
673
|
+
fFamily: string;
|
|
674
|
+
style: string;
|
|
675
|
+
ascent: number;
|
|
676
|
+
unitsPerEm: number;
|
|
677
|
+
glyphs: Record<string, {
|
|
678
|
+
width: number;
|
|
679
|
+
d: string;
|
|
680
|
+
} & {}>;
|
|
681
|
+
} & {}> | undefined, true>;
|
|
625
682
|
};
|
|
626
683
|
};
|
|
627
684
|
/** Reusable definitions library for easings, animations, and styles. */
|
|
@@ -676,6 +733,16 @@ declare const PxAnimatorConfigSchema: PxSchema<{} & {
|
|
|
676
733
|
autoOrient?: boolean | undefined;
|
|
677
734
|
}>> | undefined;
|
|
678
735
|
styles?: Record<string, any> | undefined;
|
|
736
|
+
glyphs?: Record<string, {
|
|
737
|
+
fFamily: string;
|
|
738
|
+
style: string;
|
|
739
|
+
ascent: number;
|
|
740
|
+
unitsPerEm: number;
|
|
741
|
+
glyphs: Record<string, {
|
|
742
|
+
width: number;
|
|
743
|
+
d: string;
|
|
744
|
+
} & {}>;
|
|
745
|
+
} & {}> | undefined;
|
|
679
746
|
}) | undefined;
|
|
680
747
|
animate?: Record<string, string | Record<string, {} & {
|
|
681
748
|
keyframes?: ({} & {
|
|
@@ -797,6 +864,16 @@ declare const PxAnimatorConfigSchema: PxSchema<{} & {
|
|
|
797
864
|
autoOrient?: boolean | undefined;
|
|
798
865
|
}>> | undefined;
|
|
799
866
|
styles?: Record<string, any> | undefined;
|
|
867
|
+
glyphs?: Record<string, {
|
|
868
|
+
fFamily: string;
|
|
869
|
+
style: string;
|
|
870
|
+
ascent: number;
|
|
871
|
+
unitsPerEm: number;
|
|
872
|
+
glyphs: Record<string, {
|
|
873
|
+
width: number;
|
|
874
|
+
d: string;
|
|
875
|
+
} & {}>;
|
|
876
|
+
} & {}> | undefined;
|
|
800
877
|
}) | undefined, true>;
|
|
801
878
|
animate: PxSchema<Record<string, string | Record<string, {} & {
|
|
802
879
|
keyframes?: ({} & {
|
|
@@ -1752,9 +1829,10 @@ declare const PxStrokeGradientEffectSchema: PxSchema<{
|
|
|
1752
1829
|
};
|
|
1753
1830
|
};
|
|
1754
1831
|
type PxStrokeGradientEffect = PxFillGradientEffect;
|
|
1755
|
-
declare const
|
|
1756
|
-
|
|
1832
|
+
declare const PxTextPathEffectSchema: PxSchema<{
|
|
1833
|
+
path: string;
|
|
1757
1834
|
} & {
|
|
1835
|
+
pathOverflow?: string | undefined;
|
|
1758
1836
|
lengthAdjust?: string | undefined;
|
|
1759
1837
|
method?: string | undefined;
|
|
1760
1838
|
spacing?: string | undefined;
|
|
@@ -1798,7 +1876,8 @@ declare const PxTextAlongPathEffectSchema: PxSchema<{
|
|
|
1798
1876
|
}) | undefined;
|
|
1799
1877
|
}, false> & {
|
|
1800
1878
|
readonly _shape: {
|
|
1801
|
-
|
|
1879
|
+
path: PxSchema<string, false>;
|
|
1880
|
+
pathOverflow: PxSchema<string | undefined, true>;
|
|
1802
1881
|
lengthAdjust: PxSchema<string | undefined, true>;
|
|
1803
1882
|
method: PxSchema<string | undefined, true>;
|
|
1804
1883
|
spacing: PxSchema<string | undefined, true>;
|
|
@@ -1842,7 +1921,14 @@ declare const PxTextAlongPathEffectSchema: PxSchema<{
|
|
|
1842
1921
|
}) | undefined, true>;
|
|
1843
1922
|
};
|
|
1844
1923
|
};
|
|
1845
|
-
type
|
|
1924
|
+
type PxTextPathEffect = PxInfer<typeof PxTextPathEffectSchema>;
|
|
1925
|
+
declare const PxTextEffectSchema: PxSchema<{} & {
|
|
1926
|
+
useGlyphs?: boolean | undefined;
|
|
1927
|
+
}, false> & {
|
|
1928
|
+
readonly _shape: {
|
|
1929
|
+
useGlyphs: PxSchema<boolean | undefined, true>;
|
|
1930
|
+
};
|
|
1931
|
+
};
|
|
1846
1932
|
declare const PxEffectsSchema: PxSchema<{} & {
|
|
1847
1933
|
transformation?: ({} & {
|
|
1848
1934
|
translate?: [number, number] | ({
|
|
@@ -2148,9 +2234,10 @@ declare const PxEffectsSchema: PxSchema<{} & {
|
|
|
2148
2234
|
spreadMethod?: string | undefined;
|
|
2149
2235
|
gradientTransform?: string | undefined;
|
|
2150
2236
|
}) | undefined;
|
|
2151
|
-
|
|
2152
|
-
|
|
2237
|
+
textPath?: ({
|
|
2238
|
+
path: string;
|
|
2153
2239
|
} & {
|
|
2240
|
+
pathOverflow?: string | undefined;
|
|
2154
2241
|
lengthAdjust?: string | undefined;
|
|
2155
2242
|
method?: string | undefined;
|
|
2156
2243
|
spacing?: string | undefined;
|
|
@@ -2193,6 +2280,9 @@ declare const PxEffectsSchema: PxSchema<{} & {
|
|
|
2193
2280
|
autoOrient?: boolean | undefined;
|
|
2194
2281
|
}) | undefined;
|
|
2195
2282
|
}) | undefined;
|
|
2283
|
+
text?: ({} & {
|
|
2284
|
+
useGlyphs?: boolean | undefined;
|
|
2285
|
+
}) | undefined;
|
|
2196
2286
|
}, false> & {
|
|
2197
2287
|
readonly _shape: {
|
|
2198
2288
|
transformation: PxSchema<({} & {
|
|
@@ -2499,9 +2589,10 @@ declare const PxEffectsSchema: PxSchema<{} & {
|
|
|
2499
2589
|
spreadMethod?: string | undefined;
|
|
2500
2590
|
gradientTransform?: string | undefined;
|
|
2501
2591
|
}) | undefined, true>;
|
|
2502
|
-
|
|
2503
|
-
|
|
2592
|
+
textPath: PxSchema<({
|
|
2593
|
+
path: string;
|
|
2504
2594
|
} & {
|
|
2595
|
+
pathOverflow?: string | undefined;
|
|
2505
2596
|
lengthAdjust?: string | undefined;
|
|
2506
2597
|
method?: string | undefined;
|
|
2507
2598
|
spacing?: string | undefined;
|
|
@@ -2544,6 +2635,9 @@ declare const PxEffectsSchema: PxSchema<{} & {
|
|
|
2544
2635
|
autoOrient?: boolean | undefined;
|
|
2545
2636
|
}) | undefined;
|
|
2546
2637
|
}) | undefined, true>;
|
|
2638
|
+
text: PxSchema<({} & {
|
|
2639
|
+
useGlyphs?: boolean | undefined;
|
|
2640
|
+
}) | undefined, true>;
|
|
2547
2641
|
};
|
|
2548
2642
|
};
|
|
2549
2643
|
type PxEffects = PxInfer<typeof PxEffectsSchema>;
|
|
@@ -2875,9 +2969,10 @@ declare const PxNodeBase: PxSchema<{
|
|
|
2875
2969
|
spreadMethod?: string | undefined;
|
|
2876
2970
|
gradientTransform?: string | undefined;
|
|
2877
2971
|
}) | undefined;
|
|
2878
|
-
|
|
2879
|
-
|
|
2972
|
+
textPath?: ({
|
|
2973
|
+
path: string;
|
|
2880
2974
|
} & {
|
|
2975
|
+
pathOverflow?: string | undefined;
|
|
2881
2976
|
lengthAdjust?: string | undefined;
|
|
2882
2977
|
method?: string | undefined;
|
|
2883
2978
|
spacing?: string | undefined;
|
|
@@ -2920,6 +3015,9 @@ declare const PxNodeBase: PxSchema<{
|
|
|
2920
3015
|
autoOrient?: boolean | undefined;
|
|
2921
3016
|
}) | undefined;
|
|
2922
3017
|
}) | undefined;
|
|
3018
|
+
text?: ({} & {
|
|
3019
|
+
useGlyphs?: boolean | undefined;
|
|
3020
|
+
}) | undefined;
|
|
2923
3021
|
}) | undefined;
|
|
2924
3022
|
animate?: string | Record<string, {} & {
|
|
2925
3023
|
keyframes?: ({} & {
|
|
@@ -3301,9 +3399,10 @@ declare const PxNodeBase: PxSchema<{
|
|
|
3301
3399
|
spreadMethod?: string | undefined;
|
|
3302
3400
|
gradientTransform?: string | undefined;
|
|
3303
3401
|
}) | undefined;
|
|
3304
|
-
|
|
3305
|
-
|
|
3402
|
+
textPath?: ({
|
|
3403
|
+
path: string;
|
|
3306
3404
|
} & {
|
|
3405
|
+
pathOverflow?: string | undefined;
|
|
3307
3406
|
lengthAdjust?: string | undefined;
|
|
3308
3407
|
method?: string | undefined;
|
|
3309
3408
|
spacing?: string | undefined;
|
|
@@ -3346,6 +3445,9 @@ declare const PxNodeBase: PxSchema<{
|
|
|
3346
3445
|
autoOrient?: boolean | undefined;
|
|
3347
3446
|
}) | undefined;
|
|
3348
3447
|
}) | undefined;
|
|
3448
|
+
text?: ({} & {
|
|
3449
|
+
useGlyphs?: boolean | undefined;
|
|
3450
|
+
}) | undefined;
|
|
3349
3451
|
}) | undefined, true>;
|
|
3350
3452
|
animate: PxSchema<string | Record<string, {} & {
|
|
3351
3453
|
keyframes?: ({} & {
|
|
@@ -3489,6 +3591,16 @@ declare const PxSvgNodeExtra: PxSchema<{} & {
|
|
|
3489
3591
|
autoOrient?: boolean | undefined;
|
|
3490
3592
|
}>> | undefined;
|
|
3491
3593
|
styles?: Record<string, any> | undefined;
|
|
3594
|
+
glyphs?: Record<string, {
|
|
3595
|
+
fFamily: string;
|
|
3596
|
+
style: string;
|
|
3597
|
+
ascent: number;
|
|
3598
|
+
unitsPerEm: number;
|
|
3599
|
+
glyphs: Record<string, {
|
|
3600
|
+
width: number;
|
|
3601
|
+
d: string;
|
|
3602
|
+
} & {}>;
|
|
3603
|
+
} & {}> | undefined;
|
|
3492
3604
|
}) | undefined;
|
|
3493
3605
|
animate?: Record<string, string | Record<string, {} & {
|
|
3494
3606
|
keyframes?: ({} & {
|
|
@@ -3615,6 +3727,16 @@ declare const PxSvgNodeExtra: PxSchema<{} & {
|
|
|
3615
3727
|
autoOrient?: boolean | undefined;
|
|
3616
3728
|
}>> | undefined;
|
|
3617
3729
|
styles?: Record<string, any> | undefined;
|
|
3730
|
+
glyphs?: Record<string, {
|
|
3731
|
+
fFamily: string;
|
|
3732
|
+
style: string;
|
|
3733
|
+
ascent: number;
|
|
3734
|
+
unitsPerEm: number;
|
|
3735
|
+
glyphs: Record<string, {
|
|
3736
|
+
width: number;
|
|
3737
|
+
d: string;
|
|
3738
|
+
} & {}>;
|
|
3739
|
+
} & {}> | undefined;
|
|
3618
3740
|
}) | undefined;
|
|
3619
3741
|
animate?: Record<string, string | Record<string, {} & {
|
|
3620
3742
|
keyframes?: ({} & {
|
|
@@ -3760,6 +3882,16 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
3760
3882
|
autoOrient?: boolean | undefined;
|
|
3761
3883
|
}>> | undefined;
|
|
3762
3884
|
styles?: Record<string, any> | undefined;
|
|
3885
|
+
glyphs?: Record<string, {
|
|
3886
|
+
fFamily: string;
|
|
3887
|
+
style: string;
|
|
3888
|
+
ascent: number;
|
|
3889
|
+
unitsPerEm: number;
|
|
3890
|
+
glyphs: Record<string, {
|
|
3891
|
+
width: number;
|
|
3892
|
+
d: string;
|
|
3893
|
+
} & {}>;
|
|
3894
|
+
} & {}> | undefined;
|
|
3763
3895
|
}) | undefined;
|
|
3764
3896
|
animate?: Record<string, string | Record<string, {} & {
|
|
3765
3897
|
keyframes?: ({} & {
|
|
@@ -4138,9 +4270,10 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
4138
4270
|
spreadMethod?: string | undefined;
|
|
4139
4271
|
gradientTransform?: string | undefined;
|
|
4140
4272
|
}) | undefined;
|
|
4141
|
-
|
|
4142
|
-
|
|
4273
|
+
textPath?: ({
|
|
4274
|
+
path: string;
|
|
4143
4275
|
} & {
|
|
4276
|
+
pathOverflow?: string | undefined;
|
|
4144
4277
|
lengthAdjust?: string | undefined;
|
|
4145
4278
|
method?: string | undefined;
|
|
4146
4279
|
spacing?: string | undefined;
|
|
@@ -4183,6 +4316,9 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
4183
4316
|
autoOrient?: boolean | undefined;
|
|
4184
4317
|
}) | undefined;
|
|
4185
4318
|
}) | undefined;
|
|
4319
|
+
text?: ({} & {
|
|
4320
|
+
useGlyphs?: boolean | undefined;
|
|
4321
|
+
}) | undefined;
|
|
4186
4322
|
}) | undefined;
|
|
4187
4323
|
animate?: string | Record<string, {} & {
|
|
4188
4324
|
keyframes?: ({} & {
|
|
@@ -4311,6 +4447,16 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
4311
4447
|
autoOrient?: boolean | undefined;
|
|
4312
4448
|
}>> | undefined;
|
|
4313
4449
|
styles?: Record<string, any> | undefined;
|
|
4450
|
+
glyphs?: Record<string, {
|
|
4451
|
+
fFamily: string;
|
|
4452
|
+
style: string;
|
|
4453
|
+
ascent: number;
|
|
4454
|
+
unitsPerEm: number;
|
|
4455
|
+
glyphs: Record<string, {
|
|
4456
|
+
width: number;
|
|
4457
|
+
d: string;
|
|
4458
|
+
} & {}>;
|
|
4459
|
+
} & {}> | undefined;
|
|
4314
4460
|
}) | undefined;
|
|
4315
4461
|
animate?: Record<string, string | Record<string, {} & {
|
|
4316
4462
|
keyframes?: ({} & {
|
|
@@ -4689,9 +4835,10 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
4689
4835
|
spreadMethod?: string | undefined;
|
|
4690
4836
|
gradientTransform?: string | undefined;
|
|
4691
4837
|
}) | undefined;
|
|
4692
|
-
|
|
4693
|
-
|
|
4838
|
+
textPath?: ({
|
|
4839
|
+
path: string;
|
|
4694
4840
|
} & {
|
|
4841
|
+
pathOverflow?: string | undefined;
|
|
4695
4842
|
lengthAdjust?: string | undefined;
|
|
4696
4843
|
method?: string | undefined;
|
|
4697
4844
|
spacing?: string | undefined;
|
|
@@ -4734,6 +4881,9 @@ declare const PxAnimatedSvgDocumentSchema: PxSchema<{
|
|
|
4734
4881
|
autoOrient?: boolean | undefined;
|
|
4735
4882
|
}) | undefined;
|
|
4736
4883
|
}) | undefined;
|
|
4884
|
+
text?: ({} & {
|
|
4885
|
+
useGlyphs?: boolean | undefined;
|
|
4886
|
+
}) | undefined;
|
|
4737
4887
|
}) | undefined, true>;
|
|
4738
4888
|
animate: PxSchema<string | Record<string, {} & {
|
|
4739
4889
|
keyframes?: ({} & {
|
|
@@ -5114,18 +5264,23 @@ declare function getNormalizedProps(props: Record<string, any>): Record<string,
|
|
|
5114
5264
|
declare function renderNode(node: PxNode, defs?: PxDefs): Element | null;
|
|
5115
5265
|
|
|
5116
5266
|
/**
|
|
5117
|
-
*
|
|
5118
|
-
*
|
|
5119
|
-
*
|
|
5120
|
-
* animation configuration contains properties not supported by the browser's
|
|
5121
|
-
* Web Animations API implementation, unless forceEvenIfHasUnsupportedAttrs is true.
|
|
5267
|
+
* Element-creation factory — abstracts WHAT an "element" is so the same
|
|
5268
|
+
* geometry/layout code (e.g. the glyph text materialiser) can emit plain wire
|
|
5269
|
+
* nodes here, or the editor's React / px elements when called from the editor.
|
|
5122
5270
|
*
|
|
5123
|
-
*
|
|
5124
|
-
*
|
|
5125
|
-
*
|
|
5126
|
-
* @returns An PxAnimatorAPI instance, or null if unsupported features are used and not forced.
|
|
5271
|
+
* The signature intentionally mirrors the editor's `createPxElement(type,
|
|
5272
|
+
* props, children, fixReactKeysIfNeeded?)` so the editor's own factory drops in
|
|
5273
|
+
* unchanged.
|
|
5127
5274
|
*/
|
|
5128
|
-
|
|
5275
|
+
type PxCreateElement<E = any> = (type: string, props: {
|
|
5276
|
+
[k: string]: any;
|
|
5277
|
+
}, children?: Array<E> | E | null, fixReactKeysIfNeeded?: boolean) => E;
|
|
5278
|
+
/**
|
|
5279
|
+
* Default factory → a plain wire node `{ type, ...props, children? }`.
|
|
5280
|
+
* Drops `undefined` props and empty `children` so output matches the shape the
|
|
5281
|
+
* effects pipeline (and `JSON.stringify`) expects.
|
|
5282
|
+
*/
|
|
5283
|
+
declare const jsonElementFactory: PxCreateElement<any>;
|
|
5129
5284
|
|
|
5130
5285
|
/**
|
|
5131
5286
|
* Applier-runtime types: `ApplyContext` (per-run mutable state) and `ApplyResult`
|
|
@@ -5145,6 +5300,92 @@ interface ApplyResult {
|
|
|
5145
5300
|
errors: Array<string>;
|
|
5146
5301
|
}
|
|
5147
5302
|
|
|
5303
|
+
/**
|
|
5304
|
+
* Glyph text materialiser — turns a `<text>`/`<tspan>` subtree into `<path>`
|
|
5305
|
+
* outlines from `definitions.glyphs`, so the text renders with no external font.
|
|
5306
|
+
*
|
|
5307
|
+
* - HORIZONTAL ({@link materialiseGlyphTextHorizontal}) — left-to-right by
|
|
5308
|
+
* advance width; honours font-size, text-anchor, letter/word-spacing,
|
|
5309
|
+
* per-tspan x/y/dx/dy, fill/stroke, nested tspans.
|
|
5310
|
+
* - ALONG-PATH ({@link materialiseGlyphTextAlongPath}) — each glyph placed and
|
|
5311
|
+
* rotated to the referenced path's tangent. Static `startOffset` → glyphs
|
|
5312
|
+
* bake+merge; animated `startOffset` → per-glyph `<path>` with sampled
|
|
5313
|
+
* `animate.transform`. Ignores per-tspan positioning (a single run).
|
|
5314
|
+
*
|
|
5315
|
+
* Element creation goes through an injected {@link PxCreateElement} factory, so
|
|
5316
|
+
* the SAME layout produces plain wire nodes here (the effects pipeline) or the
|
|
5317
|
+
* editor's React/px elements when the editor calls it — see
|
|
5318
|
+
* {@link materialiseGlyphText}.
|
|
5319
|
+
*
|
|
5320
|
+
* v1 scope (see svga.text.design.md): keyframe-interval easing is linear;
|
|
5321
|
+
* kerning/ligatures, per-tspan opacity, text-level animated fill are out of scope.
|
|
5322
|
+
*/
|
|
5323
|
+
|
|
5324
|
+
/** Inputs for a glyph materialisation, decoupled from the effects `ApplyContext`
|
|
5325
|
+
* so the editor can call the materialiser directly. */
|
|
5326
|
+
interface GlyphMaterialiseOpts<E = any> {
|
|
5327
|
+
/** Embedded glyph fonts, keyed by `font-family`. */
|
|
5328
|
+
glyphs: Record<string, PxGlyphFont>;
|
|
5329
|
+
/** Element factory — defaults to plain wire nodes ({@link jsonElementFactory}). */
|
|
5330
|
+
create?: PxCreateElement<E>;
|
|
5331
|
+
/** Optional diagnostics sink. */
|
|
5332
|
+
warnings?: Array<string>;
|
|
5333
|
+
}
|
|
5334
|
+
declare function materialiseGlyphTextHorizontal<E = any>(node: PxNode, opts: GlyphMaterialiseOpts<E>): E;
|
|
5335
|
+
declare function materialiseGlyphTextAlongPath<E = any>(node: PxNode, pathD: string | undefined, startOffset: PxAnimatable<number> | undefined, opts: GlyphMaterialiseOpts<E>, textLength?: number, pathOverflow?: string): E | null;
|
|
5336
|
+
/** Single entry the EDITOR calls: materialises a glyph `<text>` node into the
|
|
5337
|
+
* factory's element type, choosing along-path when `alongPath` is given. */
|
|
5338
|
+
declare function materialiseGlyphText<E = any>(node: PxNode, opts: GlyphMaterialiseOpts<E> & {
|
|
5339
|
+
alongPath?: {
|
|
5340
|
+
pathD?: string;
|
|
5341
|
+
startOffset?: PxAnimatable<number>;
|
|
5342
|
+
textLength?: number;
|
|
5343
|
+
pathOverflow?: string;
|
|
5344
|
+
};
|
|
5345
|
+
}): E | null;
|
|
5346
|
+
|
|
5347
|
+
/** Inputs for {@link extendedPathForBrowser}. `advance` = the text run-width used to
|
|
5348
|
+
* size the end extension (caller-measured; the player estimates it from the node,
|
|
5349
|
+
* the editor from its text model — browser fonts have no glyph metrics available). */
|
|
5350
|
+
interface ExtendPathOpts {
|
|
5351
|
+
pathOverflow?: string;
|
|
5352
|
+
startOffset?: PxAnimatable<number>;
|
|
5353
|
+
textLength?: PxAnimatable<number>;
|
|
5354
|
+
advance?: number;
|
|
5355
|
+
}
|
|
5356
|
+
/** Result of {@link extendedPathForBrowser}: the (possibly) extended `d`, plus
|
|
5357
|
+
* `startShift` — the length of the prepended START lead-in. Because that lead-in
|
|
5358
|
+
* moves the `<textPath>` origin back by `startShift`, EVERY `startOffset` (all
|
|
5359
|
+
* keyframes) MUST be shifted by `+startShift` so the text lands where it would on
|
|
5360
|
+
* the un-extended path (`extend` only adds a tail, it must never move the text). */
|
|
5361
|
+
interface ExtendedPath {
|
|
5362
|
+
d: string;
|
|
5363
|
+
startShift: number;
|
|
5364
|
+
}
|
|
5365
|
+
/** Shift a `PxAnimatable<number>` by a constant (all keyframes). No-op for `0`. */
|
|
5366
|
+
declare function shiftAnimatable(v: PxAnimatable<number> | undefined, by: number): PxAnimatable<number> | undefined;
|
|
5367
|
+
/** For `pathOverflow:'extend'` (browser-font): extend an OPEN path along its endpoint
|
|
5368
|
+
* tangents so the browser lays overflow glyphs onto the straight extension (matching
|
|
5369
|
+
* glyph-mode's tangent behavior) instead of dropping them. `'clip'`/closed paths are
|
|
5370
|
+
* returned unchanged (browser clips natively). Shared by the player's browser-font
|
|
5371
|
+
* applier and the editor's live/heavy `<textPath>` def mint (single source of truth).
|
|
5372
|
+
* Returns the extended `d` AND `startShift` — see {@link ExtendedPath}. */
|
|
5373
|
+
declare function extendedPathForBrowser(pathD: string, opts: ExtendPathOpts): ExtendedPath;
|
|
5374
|
+
|
|
5375
|
+
/**
|
|
5376
|
+
* Creates an animator instance that uses the native Web Animations API.
|
|
5377
|
+
*
|
|
5378
|
+
* This is the preferred, more performant animator. It will return null if the
|
|
5379
|
+
* animation configuration contains properties not supported by the browser's
|
|
5380
|
+
* Web Animations API implementation, unless forceEvenIfHasUnsupportedAttrs is true.
|
|
5381
|
+
*
|
|
5382
|
+
* @param callbacks Optional lifecycle callbacks.
|
|
5383
|
+
* @param rootElement Root element.
|
|
5384
|
+
* @param forceEvenIfHasUnsupportedAttrs If true, an animator will be created even if some CSS properties are not supported.
|
|
5385
|
+
* @returns An PxAnimatorAPI instance, or null if unsupported features are used and not forced.
|
|
5386
|
+
*/
|
|
5387
|
+
declare function createWebApiAnimator(doc: PxAnimatedSvgDocument, callbacks?: PxAnimatorCallbacksConfig, rootElement?: Element | null, forceEvenIfHasUnsupportedAttrs?: boolean): PxAnimatorAPI | null;
|
|
5388
|
+
|
|
5148
5389
|
/**
|
|
5149
5390
|
* Applies all player-effects in `root` and returns a materialised copy plus any
|
|
5150
5391
|
* generated <defs> nodes, warnings and errors. `root` is not mutated.
|
|
@@ -5158,7 +5399,7 @@ interface ApplyResult {
|
|
|
5158
5399
|
* Pre-pass identifies every element that is the target of a `<use>` with
|
|
5159
5400
|
* `ref:{type:'content'}` and allocates a fresh "inner" id for it; pass 1 then
|
|
5160
5401
|
* splits those sources into outer-translate + inner-content layers so the use
|
|
5161
|
-
* can target the inner layer
|
|
5402
|
+
* can target the inner layer.
|
|
5162
5403
|
*/
|
|
5163
5404
|
declare function applyPlayerEffects(root: PxNode): ApplyResult;
|
|
5164
5405
|
|
|
@@ -5182,4 +5423,4 @@ interface EffectDiff {
|
|
|
5182
5423
|
*/
|
|
5183
5424
|
declare function diffInEffect(a: VmNode, b: VmNode): Array<EffectDiff>;
|
|
5184
5425
|
|
|
5185
|
-
export { type ApplyResult, COLOUR_ATTR_NAMES, type FillMode, 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 PxDefs, PxDefsSchema, PxEasingOrRefSchema, type PxEffects, PxEffectsSchema, type PxElementAnimation, PxElementAnimationSchema, type PxFillGradientEffect, PxFillGradientEffectSchema, 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
|
|
5426
|
+
export { type ApplyResult, COLOUR_ATTR_NAMES, type ExtendPathOpts, type ExtendedPath, 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, 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, createWebApiAnimator, describeSchema, diffInEffect, evaluateMotionPathSegment, extendedPathForBrowser, generateNewIds, getAnimatorConfig, getBindings, getChildren, getDefs, getNormalizedProps, isPxElementFileFormat, isPxElementFileFormatDeep, jsonElementFactory, loadTagAnimators, materialiseAllInTree, materialiseAnimatedUseInstances, materialiseGlyphText, materialiseGlyphTextAlongPath, materialiseGlyphTextHorizontal, materialiseInternalLoopsInPropAnim, materialiseInternalLoopsInTree, materialiseMotionPathInPropAnim, materialiseMotionPathsInTree, getNormalisedBindings as normalizeDocument, propAnimIsMotionPath, px, renderNode, schemaKeys, setupAnimationTriggers, shiftAnimatable, toRGBA, validateNodeEffects, visualModelAt };
|