@pixodesk/svg-animator-web 1.0.40 → 1.0.41
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 +12 -4
- package/dist/{internal-BmFv1B6H.d.cts → PxAnimator-yjuSFhQw.d.cts} +8 -29
- package/dist/{internal-BmFv1B6H.d.ts → PxAnimator-yjuSFhQw.d.ts} +8 -29
- package/dist/{chunk-TNWZIIVG.js → chunk-BYDBNKO7.js} +1 -1
- package/dist/chunk-BYDBNKO7.js.map +1 -0
- package/dist/index.cjs +227 -230
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +10 -10
- package/dist/index.d.ts +10 -10
- package/dist/index.js +222 -222
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.prerendered-waapi.umd.js +53 -53
- package/dist/index.prerendered-waapi.umd.js.map +1 -1
- package/dist/index.prerendered-waapi.umd.min.js +1 -1
- package/dist/index.prerendered.umd.js +68 -68
- package/dist/index.prerendered.umd.js.map +1 -1
- package/dist/index.prerendered.umd.min.js +1 -1
- package/dist/internal.cjs.map +1 -1
- package/dist/internal.d.cts +24 -1
- package/dist/internal.d.ts +24 -1
- package/dist/internal.js +1 -1
- package/dist/internal.min.cjs +1 -1
- package/dist/pixodesk-svg-animator.umd.js +137 -137
- package/dist/pixodesk-svg-animator.umd.js.map +1 -1
- package/dist/pixodesk-svg-animator.umd.min.js +1 -1
- package/package.json +2 -2
- package/dist/chunk-TNWZIIVG.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
|
-
PX_ANIMATOR_DOC_KEY,
|
|
3
2
|
__objRest,
|
|
4
3
|
__spreadProps,
|
|
5
4
|
__spreadValues
|
|
6
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-BYDBNKO7.js";
|
|
7
6
|
|
|
8
|
-
// ../svg-animator-core/dist/chunk-
|
|
7
|
+
// ../svg-animator-core/dist/chunk-L6GJ6Y2M.js
|
|
9
8
|
var __defProp = Object.defineProperty;
|
|
10
9
|
var __defProps = Object.defineProperties;
|
|
11
10
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
@@ -523,7 +522,7 @@ var px = {
|
|
|
523
522
|
* The base can be the result of px.object() or px.openObject() — anything with a _shape property.
|
|
524
523
|
*
|
|
525
524
|
* @example
|
|
526
|
-
* const PxSvgNodeSchema = px.extendedObject(
|
|
525
|
+
* const PxSvgNodeSchema = px.extendedObject(PxNodeBaseSchema, { width: px.number().optional() });
|
|
527
526
|
*/
|
|
528
527
|
extendedObject: (base, extra) => new Obj(__spreadValues2(__spreadValues2({}, base._shape), extra)),
|
|
529
528
|
/** Array whose unrecoverable items are filtered out. Default: []. */
|
|
@@ -539,7 +538,7 @@ var px = {
|
|
|
539
538
|
/** Defers schema creation — required for recursive types. Must supply a default value. */
|
|
540
539
|
lazy: (fn, defaultVal) => new Lazy(fn, defaultVal)
|
|
541
540
|
};
|
|
542
|
-
var
|
|
541
|
+
var PX_WIRE_SCHEMA_VERSION = "1.1";
|
|
543
542
|
var VERSION_RE = /^(\d+)\.(\d+)(?:\.(\d+))?$/;
|
|
544
543
|
function parseWireVersion(raw) {
|
|
545
544
|
if (typeof raw !== "string") return void 0;
|
|
@@ -548,7 +547,7 @@ function parseWireVersion(raw) {
|
|
|
548
547
|
return { a: Number(m[1]), b: Number(m[2]), c: m[3] === void 0 ? 0 : Number(m[3]) };
|
|
549
548
|
}
|
|
550
549
|
var _a;
|
|
551
|
-
var
|
|
550
|
+
var PX_WIRE_VERSION = (_a = parseWireVersion(PX_WIRE_SCHEMA_VERSION)) != null ? _a : { a: 1, b: 1, c: 0 };
|
|
552
551
|
var PxFillMode = {
|
|
553
552
|
forwards: "forwards",
|
|
554
553
|
backwards: "backwards",
|
|
@@ -625,17 +624,17 @@ var PxTimelineEngine = {
|
|
|
625
624
|
native: "native",
|
|
626
625
|
js: "js"
|
|
627
626
|
};
|
|
628
|
-
var
|
|
627
|
+
var PxTimelineEngineSetting = __spreadProps2(__spreadValues2({}, PxTimelineEngine), {
|
|
629
628
|
auto: "auto"
|
|
630
629
|
});
|
|
631
630
|
function resolveTimelineEngine(engine) {
|
|
632
|
-
return engine ===
|
|
631
|
+
return engine === PxTimelineEngineSetting.js ? PxTimelineEngine.js : PxTimelineEngine.native;
|
|
633
632
|
}
|
|
634
633
|
function isNativeForced(engine) {
|
|
635
|
-
return engine ===
|
|
634
|
+
return engine === PxTimelineEngineSetting.native;
|
|
636
635
|
}
|
|
637
636
|
function mayUseNativeScrollTimeline(engine) {
|
|
638
|
-
return engine !==
|
|
637
|
+
return engine !== PxTimelineEngineSetting.js;
|
|
639
638
|
}
|
|
640
639
|
var PX_TRIGGER_DEFAULTS = {
|
|
641
640
|
startOn: "load",
|
|
@@ -696,7 +695,7 @@ var PxStrokeTrimSubPaths = {
|
|
|
696
695
|
separate: "separate",
|
|
697
696
|
combined: "combined"
|
|
698
697
|
};
|
|
699
|
-
var
|
|
698
|
+
var PX_TEXT_CONTENT_ATTR = "textContent";
|
|
700
699
|
var CLASS_ATTR = "class";
|
|
701
700
|
var TRANSFORM_ATTR = "transform";
|
|
702
701
|
var OFFSET_DISTANCE_ATTR = "offsetDistance";
|
|
@@ -707,7 +706,7 @@ var INTERNAL_ATTRS = /* @__PURE__ */ new Set([
|
|
|
707
706
|
"meta",
|
|
708
707
|
"animate",
|
|
709
708
|
"effects",
|
|
710
|
-
|
|
709
|
+
PX_TEXT_CONTENT_ATTR
|
|
711
710
|
]);
|
|
712
711
|
var TRANSFORM_PART = {
|
|
713
712
|
translate: "translate",
|
|
@@ -730,11 +729,11 @@ var PxGradientType = {
|
|
|
730
729
|
linear: "linear",
|
|
731
730
|
radial: "radial"
|
|
732
731
|
};
|
|
733
|
-
function
|
|
734
|
-
if (!(
|
|
732
|
+
function isPxDocument(doc) {
|
|
733
|
+
if (!(doc && typeof doc === "object" && !Array.isArray(doc))) {
|
|
735
734
|
return false;
|
|
736
735
|
}
|
|
737
|
-
return
|
|
736
|
+
return doc.type === "svg";
|
|
738
737
|
}
|
|
739
738
|
function getAnimatorConfig(doc) {
|
|
740
739
|
var _a2;
|
|
@@ -795,7 +794,7 @@ function flattenAnimatorTimeline(cfg) {
|
|
|
795
794
|
flattenMemo.set(cfg, flat);
|
|
796
795
|
return flat;
|
|
797
796
|
}
|
|
798
|
-
function
|
|
797
|
+
function getDefinitions(doc) {
|
|
799
798
|
var _a2;
|
|
800
799
|
if (!doc) return void 0;
|
|
801
800
|
return (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.definitions;
|
|
@@ -836,20 +835,20 @@ var PxKeyframeSchema = implementsInterface()(px.object({
|
|
|
836
835
|
// its internal COPY-PASTE payload, which never validates against this schema.)
|
|
837
836
|
}));
|
|
838
837
|
var anyKf = (kf) => kf;
|
|
839
|
-
var
|
|
838
|
+
var keyframeTime = (kf) => {
|
|
840
839
|
var _a2, _b;
|
|
841
840
|
return (_b = (_a2 = anyKf(kf).time) != null ? _a2 : anyKf(kf).t) != null ? _b : 0;
|
|
842
841
|
};
|
|
843
|
-
var
|
|
842
|
+
var keyframeValue = (kf) => {
|
|
844
843
|
var _a2;
|
|
845
844
|
return (_a2 = anyKf(kf).value) != null ? _a2 : anyKf(kf).v;
|
|
846
845
|
};
|
|
847
|
-
var
|
|
846
|
+
var keyframeEasing = (kf) => {
|
|
848
847
|
var _a2;
|
|
849
848
|
return (_a2 = anyKf(kf).easing) != null ? _a2 : anyKf(kf).e;
|
|
850
849
|
};
|
|
851
|
-
var
|
|
852
|
-
var
|
|
850
|
+
var keyframeTangentIn = (kf) => anyKf(kf).tangentIn;
|
|
851
|
+
var keyframeTangentOut = (kf) => anyKf(kf).tangentOut;
|
|
853
852
|
var PxLoopSchema = implementsInterface()(px.object({
|
|
854
853
|
segmentCount: px.number().optional(),
|
|
855
854
|
repeatAt: px.enum([PxLoopRepeatAt.start, PxLoopRepeatAt.end]).optional(),
|
|
@@ -903,7 +902,7 @@ var PxGlyphFontSchema = implementsInterface()(px.object({
|
|
|
903
902
|
unitsPerEm: px.number(),
|
|
904
903
|
glyphs: px.record(PxGlyphSchema)
|
|
905
904
|
}));
|
|
906
|
-
var
|
|
905
|
+
var PxDefinitionsSchema = implementsInterface()(px.object({
|
|
907
906
|
easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
|
|
908
907
|
animations: px.record(PxAnimationDefinitionSchema).optional(),
|
|
909
908
|
fonts: px.record(PxGlyphFontSchema).optional()
|
|
@@ -941,7 +940,7 @@ var PxTimelinePinSchema = implementsInterface()(px.object({
|
|
|
941
940
|
offset: px.number().optional(),
|
|
942
941
|
distance: px.number().optional()
|
|
943
942
|
}));
|
|
944
|
-
var PxTimelineEngineSchema = px.enum([
|
|
943
|
+
var PxTimelineEngineSchema = px.enum([PxTimelineEngineSetting.auto, PxTimelineEngineSetting.native, PxTimelineEngineSetting.js]).optional();
|
|
945
944
|
var PxTimeTimelineSchema = implementsInterface()(px.object({
|
|
946
945
|
type: px.literal("time").optional(),
|
|
947
946
|
engine: PxTimelineEngineSchema,
|
|
@@ -995,7 +994,7 @@ var PxAnimatorConfigSchema = implementsInterface()(px.object({
|
|
|
995
994
|
// at this level only on the runtime view, like the rest of the playback dynamics.)
|
|
996
995
|
// THE spelling of "what advances progress" — clock / scroll / view (review §2.1).
|
|
997
996
|
timeline: PxTimelineSchema.optional(),
|
|
998
|
-
definitions:
|
|
997
|
+
definitions: PxDefinitionsSchema.optional(),
|
|
999
998
|
bindings: px.array(PxBindingSchema).optional(),
|
|
1000
999
|
debugGlobalName: px.string().optional(),
|
|
1001
1000
|
// Declared HERE because this is a closed object: an undeclared key would be stripped by
|
|
@@ -1084,7 +1083,7 @@ var PxAnimatableGradientStopsSchema = px.union([
|
|
|
1084
1083
|
PxPropertyAnimationSchema
|
|
1085
1084
|
]);
|
|
1086
1085
|
var PxFillGradientEffectSchema = implementsInterface()(px.object({
|
|
1087
|
-
// Contextual kind — the `type` convention, see `
|
|
1086
|
+
// Contextual kind — the `type` convention, see `PxNodeBaseSchema.type`.
|
|
1088
1087
|
type: px.enum([PxGradientType.linear, PxGradientType.radial]),
|
|
1089
1088
|
start: PxAnimatableVec2Schema.optional(),
|
|
1090
1089
|
end: PxAnimatableVec2Schema.optional(),
|
|
@@ -1121,11 +1120,11 @@ var PxEffectsSchema = implementsInterface()(px.object({
|
|
|
1121
1120
|
textPath: PxTextPathEffectSchema.optional(),
|
|
1122
1121
|
text: PxTextEffectSchema.optional()
|
|
1123
1122
|
}));
|
|
1124
|
-
function validateNodeEffects(root,
|
|
1123
|
+
function validateNodeEffects(root, options) {
|
|
1125
1124
|
const warnings = [];
|
|
1126
1125
|
const walk = (node, path) => {
|
|
1127
1126
|
if (node && node.effects) {
|
|
1128
|
-
const ctx = { errors: [], warnings: [], strict: !!(
|
|
1127
|
+
const ctx = { errors: [], warnings: [], strict: !!(options == null ? void 0 : options.strict) };
|
|
1129
1128
|
const ok = PxEffectsSchema.isValid(node.effects, ctx, [path + ".effects"]);
|
|
1130
1129
|
if (!ok) {
|
|
1131
1130
|
for (const err of ctx.errors) warnings.push(err);
|
|
@@ -1186,9 +1185,9 @@ function validateVersionStamp(doc) {
|
|
|
1186
1185
|
if (parseWireVersion(version) !== void 0) return [];
|
|
1187
1186
|
return ["root.animator.version: " + JSON.stringify(version) + ' is not a version stamp ("a.b" or "a.b.c") \u2014 it reads as unstamped'];
|
|
1188
1187
|
}
|
|
1189
|
-
function validateDocument(doc,
|
|
1188
|
+
function validateDocument(doc, options) {
|
|
1190
1189
|
var _a2;
|
|
1191
|
-
const strict = (
|
|
1190
|
+
const strict = (options == null ? void 0 : options.strict) !== false;
|
|
1192
1191
|
const ctx = { errors: [], warnings: [], strict };
|
|
1193
1192
|
const problems = PxAnimatedSvgDocumentSchema.isValid(doc, ctx, ["root"]) ? [] : [...ctx.errors];
|
|
1194
1193
|
if (doc && typeof doc === "object") {
|
|
@@ -1208,7 +1207,7 @@ function validateDocument(doc, opts) {
|
|
|
1208
1207
|
}
|
|
1209
1208
|
return problems;
|
|
1210
1209
|
}
|
|
1211
|
-
var
|
|
1210
|
+
var PxNodeBaseSchema = px.openObject({
|
|
1212
1211
|
// CONVENTION (SCHEMA-DESIGN R1 / issues N4): `type` is the ONE word for "what
|
|
1213
1212
|
// kind of thing is this", discriminated by its CARRIER — here the node TAG
|
|
1214
1213
|
// (`rect`, `text`), and inside a sub-object that object's kind (`fillGradient.type`,
|
|
@@ -1223,7 +1222,7 @@ var PxNodeBase = px.openObject({
|
|
|
1223
1222
|
// `type` is taken by the tag name, so the attribute travels here and the renderer puts
|
|
1224
1223
|
// it back (`PxAnimatorDOM.renderNode`, `PxRnRender`). Declared here — not merely
|
|
1225
1224
|
// documented — because a wire key that is not in a schema is invisible to the
|
|
1226
|
-
// minifier's reserve list and gets renamed (
|
|
1225
|
+
// minifier's reserve list and gets renamed (dev-docs/plans/minification-boundary.md §1.1).
|
|
1227
1226
|
domType: px.string().optional(),
|
|
1228
1227
|
// Text content of a `<text>` / `<tspan>`. Declared, so a non-string value is a schema error
|
|
1229
1228
|
// and the minifier reserves the key; `text` is NOT an alias for it and is not read anywhere.
|
|
@@ -1231,7 +1230,7 @@ var PxNodeBase = px.openObject({
|
|
|
1231
1230
|
id: px.string().optional(),
|
|
1232
1231
|
meta: px.any().optional(),
|
|
1233
1232
|
// Player-effects bucket emitted by the Editor's lightweight design format.
|
|
1234
|
-
// Consumed and removed by `
|
|
1233
|
+
// Consumed and removed by `materializeNodeEffects` before any other normalization
|
|
1235
1234
|
// (see `createAnimatorImpl`), so downstream code never sees it.
|
|
1236
1235
|
effects: PxEffectsSchema.optional(),
|
|
1237
1236
|
// `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
|
|
@@ -1240,10 +1239,10 @@ var PxNodeBase = px.openObject({
|
|
|
1240
1239
|
animate: PxElementAnimationSchema.optional(),
|
|
1241
1240
|
style: px.record(px.union([px.string(), px.number()])).optional()
|
|
1242
1241
|
}, PxAttrValueSchema);
|
|
1243
|
-
var PxNodeSchema = px.openObject(__spreadProps2(__spreadValues2({},
|
|
1242
|
+
var PxNodeSchema = px.openObject(__spreadProps2(__spreadValues2({}, PxNodeBaseSchema._shape), {
|
|
1244
1243
|
children: px.lazy(() => px.array(PxNodeSchema), []).optional()
|
|
1245
1244
|
}), PxAttrValueSchema);
|
|
1246
|
-
var
|
|
1245
|
+
var PxSvgNodeRootSchema = px.object({
|
|
1247
1246
|
// `"100%"` and other SVG length strings are legal here — a number-only slot rejected
|
|
1248
1247
|
// real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
|
|
1249
1248
|
width: px.union([px.number(), px.string()]).optional(),
|
|
@@ -1251,7 +1250,7 @@ var PxSvgNodeExtra = px.object({
|
|
|
1251
1250
|
viewBox: px.string().optional(),
|
|
1252
1251
|
animator: PxAnimatorConfigSchema.optional()
|
|
1253
1252
|
});
|
|
1254
|
-
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps2(__spreadValues2(__spreadValues2({},
|
|
1253
|
+
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps2(__spreadValues2(__spreadValues2({}, PxNodeBaseSchema._shape), PxSvgNodeRootSchema._shape), {
|
|
1255
1254
|
type: px.literal("svg"),
|
|
1256
1255
|
// override string → literal to require 'svg'
|
|
1257
1256
|
children: px.array(PxNodeSchema).optional()
|
|
@@ -1606,9 +1605,9 @@ function parseColor(s) {
|
|
|
1606
1605
|
}
|
|
1607
1606
|
return void 0;
|
|
1608
1607
|
}
|
|
1609
|
-
var
|
|
1610
|
-
var
|
|
1611
|
-
var
|
|
1608
|
+
var PX_COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
|
|
1609
|
+
var PX_TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
|
|
1610
|
+
var PX_PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
|
|
1612
1611
|
function composeTransformParts(parts, opts) {
|
|
1613
1612
|
var _a2;
|
|
1614
1613
|
if (!parts) return "";
|
|
@@ -1661,8 +1660,8 @@ function parseTransformParts(str2) {
|
|
|
1661
1660
|
if (str2.replace(/([a-zA-Z]+)\s*\(([^)]*)\)/g, "").replace(/[\s,]/g, "").length) return void 0;
|
|
1662
1661
|
return Object.keys(out).length ? out : void 0;
|
|
1663
1662
|
}
|
|
1664
|
-
var
|
|
1665
|
-
var
|
|
1663
|
+
var PX_STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
|
|
1664
|
+
var PX_DEFAULT_DURATION_MS = 1e3;
|
|
1666
1665
|
function kebabToCamelCaseWord(kebab) {
|
|
1667
1666
|
return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
|
|
1668
1667
|
}
|
|
@@ -1823,7 +1822,7 @@ function invertEasing(easing) {
|
|
|
1823
1822
|
const flipped = [easing[1], easing[0], easing[3], easing[2]];
|
|
1824
1823
|
return cubicBezier(flipped);
|
|
1825
1824
|
}
|
|
1826
|
-
var
|
|
1825
|
+
var PX_DISALLOWED_SVG_TAGS_LOWER = /* @__PURE__ */ new Set([
|
|
1827
1826
|
"script",
|
|
1828
1827
|
"foreignobject"
|
|
1829
1828
|
]);
|
|
@@ -1848,7 +1847,7 @@ var URL_VALUE_ATTRS_LOWER = /* @__PURE__ */ new Set([
|
|
|
1848
1847
|
// marker-end="url(#…)"
|
|
1849
1848
|
]);
|
|
1850
1849
|
var IMAGE_REF_ATTRS_LOWER = /* @__PURE__ */ new Set(["href", "xlink:href", "src"]);
|
|
1851
|
-
var
|
|
1850
|
+
var PX_CSS_ONLY_STYLE_PROPS = /* @__PURE__ */ new Set(["mixBlendMode", "isolation"]);
|
|
1852
1851
|
var DATA_RASTER_IMAGE_RE = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,/i;
|
|
1853
1852
|
var DATA_SVG_IMAGE_RE = /^data:image\/svg\+xml(?:;[^,]*)?,/i;
|
|
1854
1853
|
var DATA_IMAGE_BASE64_PAYLOAD_RE = /^data:image\/[^;,]*;base64,([A-Za-z0-9+/]{8})/i;
|
|
@@ -1885,19 +1884,19 @@ function sanitizeAttributeValue(name, value) {
|
|
|
1885
1884
|
}
|
|
1886
1885
|
return value;
|
|
1887
1886
|
}
|
|
1888
|
-
function
|
|
1887
|
+
function toDomProps(props) {
|
|
1889
1888
|
const propsCopy = {};
|
|
1890
1889
|
for (const rawKey of Object.keys(props)) {
|
|
1891
1890
|
const key = kebabToCamelCaseWord(rawKey);
|
|
1892
1891
|
if (INTERNAL_ATTRS.has(key)) continue;
|
|
1893
1892
|
if (key === "style") continue;
|
|
1894
1893
|
let value = props[rawKey];
|
|
1895
|
-
if (
|
|
1894
|
+
if (PX_COLOR_ATTR_NAMES.has(key) && Array.isArray(value)) {
|
|
1896
1895
|
propsCopy[key] = toRGBA(value);
|
|
1897
1896
|
} else if (key === "transform" && value !== null && typeof value === "object" && !Array.isArray(value) && !value.keyframes) {
|
|
1898
1897
|
const parts = value.value && typeof value.value === "object" ? value.value : value;
|
|
1899
1898
|
propsCopy[TRANSFORM_ATTR] = composeTransformParts(parts, { withUnits: false });
|
|
1900
|
-
} else if (
|
|
1899
|
+
} else if (PX_TRANSFORM_FN_NAMES.has(key)) {
|
|
1901
1900
|
if (Array.isArray(value)) {
|
|
1902
1901
|
if (key === "translate") value = value.map((v) => v + "px");
|
|
1903
1902
|
value = value.join(",");
|
|
@@ -1913,7 +1912,7 @@ function getNormalizedProps(props) {
|
|
|
1913
1912
|
return propsCopy;
|
|
1914
1913
|
}
|
|
1915
1914
|
function getKfTranslate(kf) {
|
|
1916
|
-
const v =
|
|
1915
|
+
const v = keyframeValue(kf);
|
|
1917
1916
|
if (!v) return void 0;
|
|
1918
1917
|
if (Array.isArray(v) && v.length >= 2 && typeof v[0] === "number" && typeof v[1] === "number") {
|
|
1919
1918
|
return [v[0], v[1]];
|
|
@@ -1923,17 +1922,17 @@ function getKfTranslate(kf) {
|
|
|
1923
1922
|
return void 0;
|
|
1924
1923
|
}
|
|
1925
1924
|
function getKfTime(kf) {
|
|
1926
|
-
return
|
|
1925
|
+
return keyframeTime(kf);
|
|
1927
1926
|
}
|
|
1928
1927
|
function getKfEasing(kf) {
|
|
1929
|
-
return
|
|
1928
|
+
return keyframeEasing(kf);
|
|
1930
1929
|
}
|
|
1931
1930
|
function propAnimIsMotionPath(anim) {
|
|
1932
1931
|
const kfs = anim.keyframes;
|
|
1933
1932
|
if (!Array.isArray(kfs)) return false;
|
|
1934
1933
|
if (anim.autoOrient) return true;
|
|
1935
1934
|
for (const kf of kfs) {
|
|
1936
|
-
if (
|
|
1935
|
+
if (keyframeTangentIn(kf) || keyframeTangentOut(kf)) return true;
|
|
1937
1936
|
}
|
|
1938
1937
|
return false;
|
|
1939
1938
|
}
|
|
@@ -1942,8 +1941,8 @@ function getSegmentCache(prevKf, nextKf, prevPos, nextPos) {
|
|
|
1942
1941
|
let byNext = _segmentCache.get(prevKf);
|
|
1943
1942
|
const existing = byNext == null ? void 0 : byNext.get(nextKf);
|
|
1944
1943
|
if (existing) return existing;
|
|
1945
|
-
const to =
|
|
1946
|
-
const ti =
|
|
1944
|
+
const to = keyframeTangentOut(prevKf);
|
|
1945
|
+
const ti = keyframeTangentIn(nextKf);
|
|
1947
1946
|
const P1 = [prevPos[0] + (to ? to[0] : 0), prevPos[1] + (to ? to[1] : 0)];
|
|
1948
1947
|
const P2 = [nextPos[0] + (ti ? ti[0] : 0), nextPos[1] + (ti ? ti[1] : 0)];
|
|
1949
1948
|
const lut = bezier2D_arcLengthLUT(prevPos, P1, P2, nextPos);
|
|
@@ -2036,7 +2035,7 @@ function materializeMotionPathInPropAnim(anim, opts) {
|
|
|
2036
2035
|
function unwrapAutoOrientRotations(kfs) {
|
|
2037
2036
|
let prev;
|
|
2038
2037
|
for (const kf of kfs) {
|
|
2039
|
-
const v =
|
|
2038
|
+
const v = keyframeValue(kf);
|
|
2040
2039
|
if (!v || typeof v.rotate !== "number") continue;
|
|
2041
2040
|
if (prev === void 0) {
|
|
2042
2041
|
prev = v.rotate;
|
|
@@ -2053,7 +2052,7 @@ function makeOutKf(time, value) {
|
|
|
2053
2052
|
return { t: time, v: value };
|
|
2054
2053
|
}
|
|
2055
2054
|
function getKfValueParts(kf) {
|
|
2056
|
-
const v =
|
|
2055
|
+
const v = keyframeValue(kf);
|
|
2057
2056
|
if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
|
|
2058
2057
|
return v;
|
|
2059
2058
|
}
|
|
@@ -2115,7 +2114,7 @@ function wrappedAngleDelta(a, b) {
|
|
|
2115
2114
|
}
|
|
2116
2115
|
function insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol) {
|
|
2117
2116
|
const lastKf = out[out.length - 1];
|
|
2118
|
-
const lastV =
|
|
2117
|
+
const lastV = keyframeValue(lastKf);
|
|
2119
2118
|
const prevExit = lastV == null ? void 0 : lastV.rotate;
|
|
2120
2119
|
if (typeof prevExit !== "number") return;
|
|
2121
2120
|
const boundaryV = getKfValueParts(prevKf);
|
|
@@ -2295,7 +2294,7 @@ function walkAndMaterialize(node, opts) {
|
|
|
2295
2294
|
if (newAnimate) cloned.animate = newAnimate;
|
|
2296
2295
|
return cloned;
|
|
2297
2296
|
}
|
|
2298
|
-
var
|
|
2297
|
+
var PX_LOOP_JUMP_SHIFT_MS = 1;
|
|
2299
2298
|
function deepEqualValue(a, b) {
|
|
2300
2299
|
if (a === b) return true;
|
|
2301
2300
|
if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
|
|
@@ -2471,7 +2470,7 @@ function interpolateValue(propName, a, b, t) {
|
|
|
2471
2470
|
const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
|
|
2472
2471
|
return { paths: interpolateBeziers(aPaths, bPaths, t) };
|
|
2473
2472
|
}
|
|
2474
|
-
if (
|
|
2473
|
+
if (PX_COLOR_ATTR_NAMES.has(propName)) {
|
|
2475
2474
|
return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
|
|
2476
2475
|
}
|
|
2477
2476
|
if (propName === "transform" && typeof a === "object" && a !== null && !Array.isArray(a) && typeof b === "object" && b !== null && !Array.isArray(b)) {
|
|
@@ -2480,7 +2479,7 @@ function interpolateValue(propName, a, b, t) {
|
|
|
2480
2479
|
if (propName === "rotate" && typeof a === "number" && typeof b === "number") {
|
|
2481
2480
|
return interpolateNum(a, b, t);
|
|
2482
2481
|
}
|
|
2483
|
-
if (
|
|
2482
|
+
if (PX_TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
|
|
2484
2483
|
return interpolateVec(a || [], b || [], t);
|
|
2485
2484
|
}
|
|
2486
2485
|
return interpolateNum(+(a || 0), +(b || 0), t);
|
|
@@ -2532,8 +2531,8 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
|
|
|
2532
2531
|
relT: (kf.t - segStartT) / segDuration,
|
|
2533
2532
|
v: kf.v,
|
|
2534
2533
|
e: kf.e,
|
|
2535
|
-
tangentIn:
|
|
2536
|
-
tangentOut:
|
|
2534
|
+
tangentIn: keyframeTangentIn(kf),
|
|
2535
|
+
tangentOut: keyframeTangentOut(kf)
|
|
2537
2536
|
}));
|
|
2538
2537
|
const fullReps = Math.floor(fillDuration / segDuration);
|
|
2539
2538
|
const remainder = fillDuration - fullReps * segDuration;
|
|
@@ -2599,7 +2598,7 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
|
|
|
2599
2598
|
}
|
|
2600
2599
|
}
|
|
2601
2600
|
const pushed = {
|
|
2602
|
-
t: repStart + entry.relT * segDuration + (isBoundary ?
|
|
2601
|
+
t: repStart + entry.relT * segDuration + (isBoundary ? PX_LOOP_JUMP_SHIFT_MS : 0),
|
|
2603
2602
|
v: entry.v,
|
|
2604
2603
|
e: i < entries.length - 1 ? entry.e : void 0
|
|
2605
2604
|
};
|
|
@@ -2686,14 +2685,14 @@ function normalizeKeyframes(propName, propAnim, duration, defs) {
|
|
|
2686
2685
|
const keyframes = propAnim.keyframes || [];
|
|
2687
2686
|
const normalized = [];
|
|
2688
2687
|
for (const kf of keyframes) {
|
|
2689
|
-
const timePct =
|
|
2690
|
-
let value =
|
|
2691
|
-
const easing =
|
|
2688
|
+
const timePct = keyframeTime(kf);
|
|
2689
|
+
let value = keyframeValue(kf);
|
|
2690
|
+
const easing = keyframeEasing(kf);
|
|
2692
2691
|
if (propName === "d") {
|
|
2693
2692
|
value = normalizePathValue(value);
|
|
2694
2693
|
}
|
|
2695
2694
|
const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
|
|
2696
|
-
if (
|
|
2695
|
+
if (PX_COLOR_ATTR_NAMES.has(propNameKebab)) {
|
|
2697
2696
|
value = (_a2 = parseColor(value)) != null ? _a2 : value;
|
|
2698
2697
|
}
|
|
2699
2698
|
const normKf = {
|
|
@@ -2701,8 +2700,8 @@ function normalizeKeyframes(propName, propAnim, duration, defs) {
|
|
|
2701
2700
|
v: value,
|
|
2702
2701
|
e: resolveEasing(easing, defs)
|
|
2703
2702
|
};
|
|
2704
|
-
const tIn =
|
|
2705
|
-
const tOut =
|
|
2703
|
+
const tIn = keyframeTangentIn(kf);
|
|
2704
|
+
const tOut = keyframeTangentOut(kf);
|
|
2706
2705
|
if (tIn) normKf.tangentIn = tIn;
|
|
2707
2706
|
if (tOut) normKf.tangentOut = tOut;
|
|
2708
2707
|
normalized.push(normKf);
|
|
@@ -2734,17 +2733,17 @@ function materializeInternalLoopsInPropAnim(propName, propAnim, duration) {
|
|
|
2734
2733
|
const rawKfs = propAnim.keyframes;
|
|
2735
2734
|
if (!Array.isArray(rawKfs) || rawKfs.length < 2) return propAnim;
|
|
2736
2735
|
const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
|
|
2737
|
-
const isColor =
|
|
2736
|
+
const isColor = PX_COLOR_ATTR_NAMES.has(propNameKebab);
|
|
2738
2737
|
const kfs = rawKfs.map((kf) => {
|
|
2739
2738
|
var _a2;
|
|
2740
|
-
const t =
|
|
2741
|
-
let v =
|
|
2739
|
+
const t = keyframeTime(kf);
|
|
2740
|
+
let v = keyframeValue(kf);
|
|
2742
2741
|
if (propName === "d") v = normalizePathValue(v);
|
|
2743
2742
|
if (isColor) v = (_a2 = parseColor(v)) != null ? _a2 : v;
|
|
2744
|
-
const e =
|
|
2743
|
+
const e = keyframeEasing(kf);
|
|
2745
2744
|
const out2 = { t, v, e };
|
|
2746
|
-
const tIn =
|
|
2747
|
-
const tOut =
|
|
2745
|
+
const tIn = keyframeTangentIn(kf);
|
|
2746
|
+
const tOut = keyframeTangentOut(kf);
|
|
2748
2747
|
if (tIn) out2.tangentIn = tIn;
|
|
2749
2748
|
if (tOut) out2.tangentOut = tOut;
|
|
2750
2749
|
return out2;
|
|
@@ -2809,7 +2808,7 @@ function mergeStaticTransformIntoAnimDef(animDef, staticTransform) {
|
|
|
2809
2808
|
}
|
|
2810
2809
|
return animDef;
|
|
2811
2810
|
}
|
|
2812
|
-
const channels = Object.keys(animDef).filter((k) =>
|
|
2811
|
+
const channels = Object.keys(animDef).filter((k) => PX_TRANSFORM_FN_NAMES.has(k));
|
|
2813
2812
|
if (channels.length !== 1) return animDef;
|
|
2814
2813
|
const ch = channels[0];
|
|
2815
2814
|
const chAnim = animDef[ch];
|
|
@@ -2838,9 +2837,9 @@ function normalizeAnimationDefinition(animDef, duration, defs, engine = PxTimeli
|
|
|
2838
2837
|
}
|
|
2839
2838
|
return normalized;
|
|
2840
2839
|
}
|
|
2841
|
-
function
|
|
2840
|
+
function normalizeBindings(doc, engine = PxTimelineEngine.native) {
|
|
2842
2841
|
const animatorConfig = getAnimatorConfig(doc) || {};
|
|
2843
|
-
const defs =
|
|
2842
|
+
const defs = getDefinitions(doc);
|
|
2844
2843
|
const duration = animatorConfig.duration || 1e3;
|
|
2845
2844
|
const bindings = [];
|
|
2846
2845
|
const processAnimation = (id, animDefs, staticTransform) => {
|
|
@@ -2910,7 +2909,7 @@ function calcPropertyValue(propName, propAnim, progress) {
|
|
|
2910
2909
|
const { prevKf, nextKf } = getKeyframesPair(keyframes, progress);
|
|
2911
2910
|
let localProgress = prevKf === nextKf ? 0 : remap(progress, (_a2 = prevKf.t) != null ? _a2 : 0, (_b = nextKf.t) != null ? _b : 0, 0, 1);
|
|
2912
2911
|
localProgress = clamp(localProgress, 0, 1);
|
|
2913
|
-
const easing =
|
|
2912
|
+
const easing = keyframeEasing(prevKf);
|
|
2914
2913
|
if (easing && Array.isArray(easing)) {
|
|
2915
2914
|
try {
|
|
2916
2915
|
localProgress = cubicBezier(easing)(localProgress);
|
|
@@ -2929,7 +2928,7 @@ function calcPropertyValue(propName, propAnim, progress) {
|
|
|
2929
2928
|
nextPaths,
|
|
2930
2929
|
localProgress
|
|
2931
2930
|
).map((bz) => bezierToSvgPath(bz)).join("");
|
|
2932
|
-
} else if (
|
|
2931
|
+
} else if (PX_COLOR_ATTR_NAMES.has(cssAttrName)) {
|
|
2933
2932
|
cssValue = toRGBA(interpolateColor(
|
|
2934
2933
|
prevV || [0, 0, 0, 1],
|
|
2935
2934
|
nextV || [0, 0, 0, 1],
|
|
@@ -3003,14 +3002,14 @@ function calcPropertyValue(propName, propAnim, progress) {
|
|
|
3003
3002
|
cssValue = "scale(" + v.join(",") + ")";
|
|
3004
3003
|
cssAttrName = "transform";
|
|
3005
3004
|
} else {
|
|
3006
|
-
const
|
|
3005
|
+
const num = interpolateNum(
|
|
3007
3006
|
+(prevV || 0),
|
|
3008
3007
|
+(nextV || 0),
|
|
3009
3008
|
localProgress
|
|
3010
3009
|
);
|
|
3011
|
-
cssValue =
|
|
3010
|
+
cssValue = num;
|
|
3012
3011
|
}
|
|
3013
|
-
if (
|
|
3012
|
+
if (PX_PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
|
|
3014
3013
|
cssValue = cssValue * 100 + "%";
|
|
3015
3014
|
}
|
|
3016
3015
|
return { k: cssAttrName, v: cssValue === null ? "" : "" + cssValue };
|
|
@@ -3049,7 +3048,7 @@ function parseCubics(d) {
|
|
|
3049
3048
|
let pcx = 0, pcy = 0;
|
|
3050
3049
|
let pqx = 0, pqy = 0;
|
|
3051
3050
|
let prevCmd = "";
|
|
3052
|
-
const
|
|
3051
|
+
const num = () => parseFloat(tokens[i++]);
|
|
3053
3052
|
const push = (P1, P2, P3) => {
|
|
3054
3053
|
const P0 = [cx, cy];
|
|
3055
3054
|
const lut = bezier2D_arcLengthLUT(P0, P1, P2, P3, LUT_STEPS);
|
|
@@ -3078,7 +3077,7 @@ function parseCubics(d) {
|
|
|
3078
3077
|
continue;
|
|
3079
3078
|
}
|
|
3080
3079
|
if (U === "M") {
|
|
3081
|
-
const x =
|
|
3080
|
+
const x = num() + (rel ? cx : 0), y = num() + (rel ? cy : 0);
|
|
3082
3081
|
cx = x;
|
|
3083
3082
|
cy = y;
|
|
3084
3083
|
sx = x;
|
|
@@ -3087,29 +3086,29 @@ function parseCubics(d) {
|
|
|
3087
3086
|
continue;
|
|
3088
3087
|
}
|
|
3089
3088
|
if (U === "L") {
|
|
3090
|
-
pushLine(
|
|
3089
|
+
pushLine(num() + (rel ? cx : 0), num() + (rel ? cy : 0));
|
|
3091
3090
|
} else if (U === "H") {
|
|
3092
|
-
pushLine(
|
|
3091
|
+
pushLine(num() + (rel ? cx : 0), cy);
|
|
3093
3092
|
} else if (U === "V") {
|
|
3094
|
-
pushLine(cx,
|
|
3093
|
+
pushLine(cx, num() + (rel ? cy : 0));
|
|
3095
3094
|
} else if (U === "C") {
|
|
3096
|
-
const p1 = [
|
|
3097
|
-
const p2 = [
|
|
3098
|
-
const p3 = [
|
|
3095
|
+
const p1 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3096
|
+
const p2 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3097
|
+
const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3099
3098
|
pcx = p2[0];
|
|
3100
3099
|
pcy = p2[1];
|
|
3101
3100
|
push(p1, p2, p3);
|
|
3102
3101
|
} else if (U === "S") {
|
|
3103
3102
|
const smooth = prevCmd.toUpperCase() === "C" || prevCmd.toUpperCase() === "S";
|
|
3104
3103
|
const p1 = smooth ? [2 * cx - pcx, 2 * cy - pcy] : [cx, cy];
|
|
3105
|
-
const p2 = [
|
|
3106
|
-
const p3 = [
|
|
3104
|
+
const p2 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3105
|
+
const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3107
3106
|
pcx = p2[0];
|
|
3108
3107
|
pcy = p2[1];
|
|
3109
3108
|
push(p1, p2, p3);
|
|
3110
3109
|
} else if (U === "Q") {
|
|
3111
|
-
const qc = [
|
|
3112
|
-
const p3 = [
|
|
3110
|
+
const qc = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3111
|
+
const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3113
3112
|
pqx = qc[0];
|
|
3114
3113
|
pqy = qc[1];
|
|
3115
3114
|
const { P1, P2 } = quadToCubic([cx, cy], qc, p3);
|
|
@@ -3117,14 +3116,14 @@ function parseCubics(d) {
|
|
|
3117
3116
|
} else if (U === "T") {
|
|
3118
3117
|
const smooth = prevCmd.toUpperCase() === "Q" || prevCmd.toUpperCase() === "T";
|
|
3119
3118
|
const qc = smooth ? [2 * cx - pqx, 2 * cy - pqy] : [cx, cy];
|
|
3120
|
-
const p3 = [
|
|
3119
|
+
const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3121
3120
|
pqx = qc[0];
|
|
3122
3121
|
pqy = qc[1];
|
|
3123
3122
|
const { P1, P2 } = quadToCubic([cx, cy], qc, p3);
|
|
3124
3123
|
push(P1, P2, p3);
|
|
3125
3124
|
} else if (U === "A") {
|
|
3126
3125
|
i += 5;
|
|
3127
|
-
pushLine(
|
|
3126
|
+
pushLine(num() + (rel ? cx : 0), num() + (rel ? cy : 0));
|
|
3128
3127
|
} else {
|
|
3129
3128
|
i++;
|
|
3130
3129
|
continue;
|
|
@@ -3454,20 +3453,20 @@ function transformPathData(d, m, decimals = 2) {
|
|
|
3454
3453
|
while ((match = TOKEN_RE.exec(d)) !== null) tokens.push(match[0]);
|
|
3455
3454
|
let out = "";
|
|
3456
3455
|
let i = 0;
|
|
3457
|
-
const
|
|
3456
|
+
const num = () => parseFloat(tokens[i++]);
|
|
3458
3457
|
while (i < tokens.length) {
|
|
3459
3458
|
const cmd = tokens[i++];
|
|
3460
3459
|
if (cmd === "M" || cmd === "L") {
|
|
3461
|
-
const [x, y] = apply(m,
|
|
3460
|
+
const [x, y] = apply(m, num(), num());
|
|
3462
3461
|
out += cmd + pack([x, y], decimals);
|
|
3463
3462
|
} else if (cmd === "C") {
|
|
3464
|
-
const [x1, y1] = apply(m,
|
|
3465
|
-
const [x2, y2] = apply(m,
|
|
3466
|
-
const [x, y] = apply(m,
|
|
3463
|
+
const [x1, y1] = apply(m, num(), num());
|
|
3464
|
+
const [x2, y2] = apply(m, num(), num());
|
|
3465
|
+
const [x, y] = apply(m, num(), num());
|
|
3467
3466
|
out += "C" + pack([x1, y1, x2, y2, x, y], decimals);
|
|
3468
3467
|
} else if (cmd === "Q") {
|
|
3469
|
-
const [x1, y1] = apply(m,
|
|
3470
|
-
const [x, y] = apply(m,
|
|
3468
|
+
const [x1, y1] = apply(m, num(), num());
|
|
3469
|
+
const [x, y] = apply(m, num(), num());
|
|
3471
3470
|
out += "Q" + pack([x1, y1, x, y], decimals);
|
|
3472
3471
|
} else if (cmd === "Z" || cmd === "z") {
|
|
3473
3472
|
out += "Z";
|
|
@@ -3496,7 +3495,7 @@ var TEXT_ATTR_KEYS = [
|
|
|
3496
3495
|
"stroke",
|
|
3497
3496
|
"strokeWidth",
|
|
3498
3497
|
"effects",
|
|
3499
|
-
|
|
3498
|
+
PX_TEXT_CONTENT_ATTR,
|
|
3500
3499
|
"xml:space"
|
|
3501
3500
|
];
|
|
3502
3501
|
var PAINT_STATIC_KEYS = [
|
|
@@ -3650,13 +3649,13 @@ function materializeGlyphTextHorizontal(node, opts) {
|
|
|
3650
3649
|
if (y !== void 0) pen.y = y;
|
|
3651
3650
|
pen.x += (_a3 = parseLen(el.dx)) != null ? _a3 : 0;
|
|
3652
3651
|
pen.y += (_b2 = parseLen(el.dy)) != null ? _b2 : 0;
|
|
3653
|
-
const content = str(el[
|
|
3652
|
+
const content = str(el[PX_TEXT_CONTENT_ATTR]);
|
|
3654
3653
|
if (content && !((_c2 = el.children) == null ? void 0 : _c2.length)) renderChars(content, s);
|
|
3655
3654
|
if (el.children) for (const ch of el.children) walk(ch, s);
|
|
3656
3655
|
};
|
|
3657
3656
|
const rootStyle = rootStyleOf(node);
|
|
3658
3657
|
if (node.children) for (const ch of node.children) walk(ch, rootStyle);
|
|
3659
|
-
const rootContent = str(node[
|
|
3658
|
+
const rootContent = str(node[PX_TEXT_CONTENT_ATTR]);
|
|
3660
3659
|
if (rootContent && !((_c = node.children) == null ? void 0 : _c.length)) renderChars(rootContent, rootStyle);
|
|
3661
3660
|
const anchor = str(node.textAnchor);
|
|
3662
3661
|
if (anchor === "middle" || anchor === "end") {
|
|
@@ -3674,7 +3673,7 @@ function collectAlongPathCells(node, glyphs, soleFont, warnings) {
|
|
|
3674
3673
|
const walk = (el, parentStyle) => {
|
|
3675
3674
|
var _a2, _b;
|
|
3676
3675
|
const s = resolveStyle(el, parentStyle);
|
|
3677
|
-
const content = str(el[
|
|
3676
|
+
const content = str(el[PX_TEXT_CONTENT_ATTR]);
|
|
3678
3677
|
if (content && !((_a2 = el.children) == null ? void 0 : _a2.length)) {
|
|
3679
3678
|
const gf = glyphFontFor(s, glyphs, soleFont, warnings);
|
|
3680
3679
|
if (gf) {
|
|
@@ -3968,60 +3967,6 @@ function reportDocumentDiagnostics(doc, where) {
|
|
|
3968
3967
|
where + ": this document does not match the animation schema in " + problems.length + " place" + (problems.length === 1 ? "" : "s") + ".\n" + shown.map((p) => " - " + p).join("\n") + (more > 0 ? "\n \u2026 and " + more + " more" : "") + "\n\nIf you did not author these keys, the usual cause is a build that MANGLES PROPERTY NAMES. An animation document is data loaded at runtime, so renaming the property reads inside the player stops them matching the keys in the JSON, and the animation silently does nothing. Feed the published reserved-name list to your minifier \u2014 @pixodesk/svg-animator-web/mangle-reserved.json \u2014 see docs/library/minification.md."
|
|
3969
3968
|
);
|
|
3970
3969
|
}
|
|
3971
|
-
function isScrollTimeline(config) {
|
|
3972
|
-
return (config == null ? void 0 : config.timelineSource) === "scroll";
|
|
3973
|
-
}
|
|
3974
|
-
function scrollTotalDurationMs(config) {
|
|
3975
|
-
const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : DEFAULT_DURATION_MS;
|
|
3976
|
-
const iterations = typeof (config == null ? void 0 : config.iterations) === "number" && config.iterations > 0 ? config.iterations : 1;
|
|
3977
|
-
return duration * iterations;
|
|
3978
|
-
}
|
|
3979
|
-
function scrollPhaseInterval(phase, subjectSize, scrollportSize) {
|
|
3980
|
-
const s = subjectSize, vp = scrollportSize;
|
|
3981
|
-
switch (phase) {
|
|
3982
|
-
case "cover":
|
|
3983
|
-
return [0, s + vp];
|
|
3984
|
-
case "entry":
|
|
3985
|
-
return [0, Math.min(s, vp)];
|
|
3986
|
-
case "contain":
|
|
3987
|
-
return [Math.min(s, vp), Math.max(s, vp)];
|
|
3988
|
-
case "exit":
|
|
3989
|
-
return [Math.max(s, vp), s + vp];
|
|
3990
|
-
case "entry-crossing":
|
|
3991
|
-
return [0, s];
|
|
3992
|
-
case "exit-crossing":
|
|
3993
|
-
return [vp, s + vp];
|
|
3994
|
-
}
|
|
3995
|
-
}
|
|
3996
|
-
var DEFAULT_PHASE = "cover";
|
|
3997
|
-
function resolveRangePointU(point, defaultFraction, subjectSize, scrollportSize) {
|
|
3998
|
-
var _a2;
|
|
3999
|
-
const [u0, u1] = scrollPhaseInterval((_a2 = point == null ? void 0 : point.phase) != null ? _a2 : DEFAULT_PHASE, subjectSize, scrollportSize);
|
|
4000
|
-
const fraction = typeof (point == null ? void 0 : point.fraction) === "number" ? point.fraction : defaultFraction;
|
|
4001
|
-
return u0 + fraction * (u1 - u0);
|
|
4002
|
-
}
|
|
4003
|
-
function scrollViewProgress(subjectStart, subjectSize, scrollportSize, range) {
|
|
4004
|
-
const u = scrollportSize - subjectStart;
|
|
4005
|
-
const uStart = resolveRangePointU(range == null ? void 0 : range.start, 0, subjectSize, scrollportSize);
|
|
4006
|
-
const uEnd = resolveRangePointU(range == null ? void 0 : range.end, 1, subjectSize, scrollportSize);
|
|
4007
|
-
if (uEnd <= uStart) return u >= uEnd ? 1 : 0;
|
|
4008
|
-
return clamp((u - uStart) / (uEnd - uStart), 0, 1);
|
|
4009
|
-
}
|
|
4010
|
-
function scrollOffsetProgress(offset, maxOffset, range) {
|
|
4011
|
-
var _a2, _b;
|
|
4012
|
-
const raw = maxOffset > 0 ? clamp(offset / maxOffset, 0, 1) : 1;
|
|
4013
|
-
const start = typeof ((_a2 = range == null ? void 0 : range.start) == null ? void 0 : _a2.fraction) === "number" ? range.start.fraction : 0;
|
|
4014
|
-
const end = typeof ((_b = range == null ? void 0 : range.end) == null ? void 0 : _b.fraction) === "number" ? range.end.fraction : 1;
|
|
4015
|
-
if (end <= start) return raw >= end ? 1 : 0;
|
|
4016
|
-
return clamp((raw - start) / (end - start), 0, 1);
|
|
4017
|
-
}
|
|
4018
|
-
function scrollResolveAxis(axis, writingMode) {
|
|
4019
|
-
const a = axis != null ? axis : "block";
|
|
4020
|
-
if (a === "x" || a === "y") return a;
|
|
4021
|
-
const vertical = !!writingMode && writingMode.startsWith("vertical");
|
|
4022
|
-
if (a === "inline") return vertical ? "y" : "x";
|
|
4023
|
-
return vertical ? "x" : "y";
|
|
4024
|
-
}
|
|
4025
3970
|
|
|
4026
3971
|
// ../svg-animator-core/dist/index.js
|
|
4027
3972
|
function applyTransformByEffect(node, fx, ctx) {
|
|
@@ -4405,11 +4350,11 @@ function buildStopChildren(stops, ctx) {
|
|
|
4405
4350
|
const loopFromSource = read.loop;
|
|
4406
4351
|
let stopCount = 0;
|
|
4407
4352
|
for (const kf of kfs) {
|
|
4408
|
-
const v =
|
|
4353
|
+
const v = keyframeValue(kf);
|
|
4409
4354
|
if (Array.isArray(v) && v.length > stopCount) stopCount = v.length;
|
|
4410
4355
|
}
|
|
4411
4356
|
if (!stopCount) return [];
|
|
4412
|
-
const firstKfValue =
|
|
4357
|
+
const firstKfValue = keyframeValue(kfs[0]);
|
|
4413
4358
|
const baselineStops = [];
|
|
4414
4359
|
for (let i = 0; i < stopCount; i++) {
|
|
4415
4360
|
const s = (_b = (_a2 = firstKfValue == null ? void 0 : firstKfValue[i]) != null ? _a2 : prevDefinedStop(kfs, 0, i)) != null ? _b : { offset: i / Math.max(1, stopCount - 1), color: "#000000" };
|
|
@@ -4430,11 +4375,11 @@ function animatedStopNode(baseline, kfs, stopIdx, _ctx, loop) {
|
|
|
4430
4375
|
const offsetKfs = [];
|
|
4431
4376
|
let offsetVaries = false;
|
|
4432
4377
|
for (const kf of kfs) {
|
|
4433
|
-
const t =
|
|
4434
|
-
const arr =
|
|
4378
|
+
const t = keyframeTime(kf);
|
|
4379
|
+
const arr = keyframeValue(kf);
|
|
4435
4380
|
const sliced = (_a2 = arr == null ? void 0 : arr[stopIdx]) != null ? _a2 : prevDefinedStop(kfs, kfs.indexOf(kf), stopIdx);
|
|
4436
4381
|
if (!sliced) continue;
|
|
4437
|
-
const easing =
|
|
4382
|
+
const easing = keyframeEasing(kf);
|
|
4438
4383
|
const colorOut = { time: t, value: sliced.color };
|
|
4439
4384
|
if (easing !== void 0) colorOut.easing = easing;
|
|
4440
4385
|
colorKfs.push(colorOut);
|
|
@@ -4462,11 +4407,11 @@ function animatedStopNode(baseline, kfs, stopIdx, _ctx, loop) {
|
|
|
4462
4407
|
}
|
|
4463
4408
|
function prevDefinedStop(kfs, fromIdx, stopIdx) {
|
|
4464
4409
|
for (let i = fromIdx; i >= 0; i--) {
|
|
4465
|
-
const arr =
|
|
4410
|
+
const arr = keyframeValue(kfs[i]);
|
|
4466
4411
|
if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
|
|
4467
4412
|
}
|
|
4468
4413
|
for (let i = fromIdx + 1; i < kfs.length; i++) {
|
|
4469
|
-
const arr =
|
|
4414
|
+
const arr = keyframeValue(kfs[i]);
|
|
4470
4415
|
if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
|
|
4471
4416
|
}
|
|
4472
4417
|
return void 0;
|
|
@@ -5255,7 +5200,7 @@ function readScalarValues(r) {
|
|
|
5255
5200
|
if (r.kind === "static") return [r.value];
|
|
5256
5201
|
const out = [];
|
|
5257
5202
|
for (const kf of r.keyframes) {
|
|
5258
|
-
const v =
|
|
5203
|
+
const v = keyframeValue(kf);
|
|
5259
5204
|
if (typeof v === "number") out.push(v);
|
|
5260
5205
|
}
|
|
5261
5206
|
return out;
|
|
@@ -5266,9 +5211,9 @@ function computeAnimAttr(read, map) {
|
|
|
5266
5211
|
return {
|
|
5267
5212
|
kind: "animated",
|
|
5268
5213
|
keyframes: read.keyframes.map((kf) => ({
|
|
5269
|
-
time:
|
|
5270
|
-
value: map(
|
|
5271
|
-
easing:
|
|
5214
|
+
time: keyframeTime(kf),
|
|
5215
|
+
value: map(keyframeValue(kf)),
|
|
5216
|
+
easing: keyframeEasing(kf)
|
|
5272
5217
|
})),
|
|
5273
5218
|
loop: read.loop
|
|
5274
5219
|
};
|
|
@@ -5286,7 +5231,7 @@ function computeOpacityFromRange(rangeRead) {
|
|
|
5286
5231
|
let anyHide = false;
|
|
5287
5232
|
let allHide = true;
|
|
5288
5233
|
for (const kf of kfs) {
|
|
5289
|
-
if (hide(
|
|
5234
|
+
if (hide(keyframeValue(kf))) anyHide = true;
|
|
5290
5235
|
else allHide = false;
|
|
5291
5236
|
}
|
|
5292
5237
|
if (!anyHide) return void 0;
|
|
@@ -5296,10 +5241,10 @@ function computeOpacityFromRange(rangeRead) {
|
|
|
5296
5241
|
const kf = kfs[i];
|
|
5297
5242
|
const prevKf = i > 0 ? kfs[i - 1] : void 0;
|
|
5298
5243
|
const nextKf = i < kfs.length - 1 ? kfs[i + 1] : void 0;
|
|
5299
|
-
const t =
|
|
5300
|
-
const thisHide = hide(
|
|
5301
|
-
const prevHide = prevKf ? thisHide && hide(
|
|
5302
|
-
const nextHide = nextKf ? thisHide && hide(
|
|
5244
|
+
const t = keyframeTime(kf);
|
|
5245
|
+
const thisHide = hide(keyframeValue(kf));
|
|
5246
|
+
const prevHide = prevKf ? thisHide && hide(keyframeValue(prevKf)) : thisHide;
|
|
5247
|
+
const nextHide = nextKf ? thisHide && hide(keyframeValue(nextKf)) : thisHide;
|
|
5303
5248
|
if (prevHide && !nextHide) {
|
|
5304
5249
|
out.push({ time: t, value: 0 });
|
|
5305
5250
|
out.push({ time: t + OPACITY_STEP_MS, value: 1 });
|
|
@@ -5315,9 +5260,9 @@ function readRangeWithCrossings(raw) {
|
|
|
5315
5260
|
const r = readAnimatable(raw);
|
|
5316
5261
|
if (r.kind !== "animated") return r;
|
|
5317
5262
|
const kfs = r.keyframes.map((kf) => ({
|
|
5318
|
-
time:
|
|
5319
|
-
value:
|
|
5320
|
-
easing:
|
|
5263
|
+
time: keyframeTime(kf),
|
|
5264
|
+
value: keyframeValue(kf),
|
|
5265
|
+
easing: keyframeEasing(kf)
|
|
5321
5266
|
}));
|
|
5322
5267
|
const hasReverse = kfs.some((kf) => kf.value[0] > kf.value[1]);
|
|
5323
5268
|
if (!hasReverse) {
|
|
@@ -5443,7 +5388,7 @@ function shapeToPathD(node) {
|
|
|
5443
5388
|
}
|
|
5444
5389
|
return void 0;
|
|
5445
5390
|
}
|
|
5446
|
-
function
|
|
5391
|
+
function materializeNodeEffects(root) {
|
|
5447
5392
|
var _a2, _b;
|
|
5448
5393
|
const ctx = {
|
|
5449
5394
|
defs: [],
|
|
@@ -5456,7 +5401,7 @@ function applyPlayerEffects(root) {
|
|
|
5456
5401
|
// Resolved engine: `frames` ONLY when explicitly set; auto/waapi/unset →
|
|
5457
5402
|
// waapi (we're not 100% sure it's frames, and CSS/WAAPI need the inline form).
|
|
5458
5403
|
engine: resolveTimelineEngine((_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.engine),
|
|
5459
|
-
glyphs: (_b =
|
|
5404
|
+
glyphs: (_b = getDefinitions(root)) == null ? void 0 : _b.fonts
|
|
5460
5405
|
};
|
|
5461
5406
|
const working = clone(root);
|
|
5462
5407
|
indexById(working, ctx.idMap);
|
|
@@ -5538,11 +5483,11 @@ function buildOffsetPath(propAnim) {
|
|
|
5538
5483
|
if (propAnim.alongPathMode !== "offsetPath") return void 0;
|
|
5539
5484
|
const kfs = propAnim.keyframes;
|
|
5540
5485
|
if (!kfs || kfs.length < 2) return void 0;
|
|
5541
|
-
const first =
|
|
5486
|
+
const first = keyframeValue(kfs[0]);
|
|
5542
5487
|
const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
|
|
5543
5488
|
const points = [];
|
|
5544
5489
|
for (const kf of kfs) {
|
|
5545
|
-
const v =
|
|
5490
|
+
const v = keyframeValue(kf);
|
|
5546
5491
|
const tr = v == null ? void 0 : v.translate;
|
|
5547
5492
|
if (!tr || tr.length < 2) return void 0;
|
|
5548
5493
|
const parts = Object.keys(v);
|
|
@@ -5551,13 +5496,13 @@ function buildOffsetPath(propAnim) {
|
|
|
5551
5496
|
if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
|
|
5552
5497
|
points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
|
|
5553
5498
|
}
|
|
5554
|
-
if (!kfs.some((kf) =>
|
|
5499
|
+
if (!kfs.some((kf) => keyframeTangentIn(kf) || keyframeTangentOut(kf))) return void 0;
|
|
5555
5500
|
let d = "M" + fmt2(points[0][0]) + "," + fmt2(points[0][1]);
|
|
5556
5501
|
const segLens = [];
|
|
5557
5502
|
for (let i = 0; i < points.length - 1; i++) {
|
|
5558
5503
|
const p0 = points[i], p1 = points[i + 1];
|
|
5559
|
-
const to = (_b =
|
|
5560
|
-
const ti = (_c =
|
|
5504
|
+
const to = (_b = keyframeTangentOut(kfs[i])) != null ? _b : [0, 0];
|
|
5505
|
+
const ti = (_c = keyframeTangentIn(kfs[i + 1])) != null ? _c : [0, 0];
|
|
5561
5506
|
const c1 = [p0[0] + to[0], p0[1] + to[1]];
|
|
5562
5507
|
const c2 = [p1[0] + ti[0], p1[1] + ti[1]];
|
|
5563
5508
|
d += "C" + fmt2(c1[0]) + "," + fmt2(c1[1]) + "," + fmt2(c2[0]) + "," + fmt2(c2[1]) + "," + fmt2(p1[0]) + "," + fmt2(p1[1]);
|
|
@@ -5569,8 +5514,8 @@ function buildOffsetPath(propAnim) {
|
|
|
5569
5514
|
let cum = 0;
|
|
5570
5515
|
for (let i = 0; i < kfs.length; i++) {
|
|
5571
5516
|
if (i > 0) cum += segLens[i - 1];
|
|
5572
|
-
const out = { t:
|
|
5573
|
-
const e =
|
|
5517
|
+
const out = { t: keyframeTime(kfs[i]), v: cum / total };
|
|
5518
|
+
const e = keyframeEasing(kfs[i]);
|
|
5574
5519
|
if (e !== void 0) out.e = e;
|
|
5575
5520
|
distanceKfs.push(out);
|
|
5576
5521
|
}
|
|
@@ -5765,14 +5710,14 @@ function walkAndMaterialize2(node, idMap, animatedIds, genId3, defsCollector, ro
|
|
|
5765
5710
|
});
|
|
5766
5711
|
return changed ? __spreadProps2(__spreadValues2({}, node), { children: newChildren }) : node;
|
|
5767
5712
|
}
|
|
5768
|
-
function materializeAllInTree(doc, engine,
|
|
5713
|
+
function materializeAllInTree(doc, engine, options) {
|
|
5769
5714
|
var _a2, _b;
|
|
5770
|
-
let root =
|
|
5715
|
+
let root = materializeNodeEffects(doc).root;
|
|
5771
5716
|
root = materializeOffsetPathsInTree(root);
|
|
5772
|
-
const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b :
|
|
5717
|
+
const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b : PX_DEFAULT_DURATION_MS;
|
|
5773
5718
|
root = materializeInternalLoopsInTree(root, duration);
|
|
5774
5719
|
if (engine === PxTimelineEngine.native) {
|
|
5775
|
-
root = materializeMotionPathsInTree(root,
|
|
5720
|
+
root = materializeMotionPathsInTree(root, options == null ? void 0 : options.motionPath);
|
|
5776
5721
|
root = materializeAnimatedUseInstances(root);
|
|
5777
5722
|
root = pruneUnreferencedDefs(root);
|
|
5778
5723
|
}
|
|
@@ -5852,16 +5797,16 @@ function cancelFrame(handle) {
|
|
|
5852
5797
|
}
|
|
5853
5798
|
g.clearTimeout(handle);
|
|
5854
5799
|
}
|
|
5855
|
-
function
|
|
5800
|
+
function createAdapterAnimator(doc, adapter, callbacks) {
|
|
5856
5801
|
var _a2;
|
|
5857
5802
|
const config = getAnimatorConfig(doc) || {};
|
|
5858
|
-
const bindings =
|
|
5803
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.js);
|
|
5859
5804
|
const _iterations = config.iterations;
|
|
5860
5805
|
let iterations = 1;
|
|
5861
5806
|
if (typeof _iterations === "number") iterations = _iterations || 1;
|
|
5862
5807
|
if (_iterations === "infinite") iterations = Infinity;
|
|
5863
5808
|
if (iterations < 1) iterations = 1;
|
|
5864
|
-
const duration = +(config.duration ||
|
|
5809
|
+
const duration = +(config.duration || PX_DEFAULT_DURATION_MS);
|
|
5865
5810
|
const totalDuration = duration && iterations ? duration * (iterations === Infinity ? Infinity : iterations) : duration ? (iterations != null ? iterations : 1) * duration : 0;
|
|
5866
5811
|
const direction = config.direction || "normal";
|
|
5867
5812
|
const fill = (_a2 = config.fill) != null ? _a2 : "forwards";
|
|
@@ -6235,9 +6180,9 @@ function mergeAnimatorConfig(base, patch) {
|
|
|
6235
6180
|
}
|
|
6236
6181
|
return { config: out, warnings };
|
|
6237
6182
|
}
|
|
6238
|
-
function applyAnimatorConfig(doc, patch,
|
|
6183
|
+
function applyAnimatorConfig(doc, patch, options) {
|
|
6239
6184
|
var _a2, _b;
|
|
6240
|
-
const reset = !!(
|
|
6185
|
+
const reset = !!(options == null ? void 0 : options.resetTimeline);
|
|
6241
6186
|
if (!doc || (patch === void 0 || !reset && (patch === null || !isPlainObject(patch) || !Object.keys(patch).length))) {
|
|
6242
6187
|
return { doc, warnings: [] };
|
|
6243
6188
|
}
|
|
@@ -6269,6 +6214,62 @@ function applyAnimatorConfig(doc, patch, opts) {
|
|
|
6269
6214
|
return { doc: __spreadProps2(__spreadValues2({}, anyDoc), { animator: merged.config }), warnings };
|
|
6270
6215
|
}
|
|
6271
6216
|
|
|
6217
|
+
// ../svg-animator-core/dist/internal.js
|
|
6218
|
+
function isScrollTimeline(config) {
|
|
6219
|
+
return (config == null ? void 0 : config.timelineSource) === "scroll";
|
|
6220
|
+
}
|
|
6221
|
+
function scrollTotalDurationMs(config) {
|
|
6222
|
+
const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : PX_DEFAULT_DURATION_MS;
|
|
6223
|
+
const iterations = typeof (config == null ? void 0 : config.iterations) === "number" && config.iterations > 0 ? config.iterations : 1;
|
|
6224
|
+
return duration * iterations;
|
|
6225
|
+
}
|
|
6226
|
+
function scrollPhaseInterval(phase, subjectSize, scrollportSize) {
|
|
6227
|
+
const s = subjectSize, vp = scrollportSize;
|
|
6228
|
+
switch (phase) {
|
|
6229
|
+
case "cover":
|
|
6230
|
+
return [0, s + vp];
|
|
6231
|
+
case "entry":
|
|
6232
|
+
return [0, Math.min(s, vp)];
|
|
6233
|
+
case "contain":
|
|
6234
|
+
return [Math.min(s, vp), Math.max(s, vp)];
|
|
6235
|
+
case "exit":
|
|
6236
|
+
return [Math.max(s, vp), s + vp];
|
|
6237
|
+
case "entry-crossing":
|
|
6238
|
+
return [0, s];
|
|
6239
|
+
case "exit-crossing":
|
|
6240
|
+
return [vp, s + vp];
|
|
6241
|
+
}
|
|
6242
|
+
}
|
|
6243
|
+
var DEFAULT_PHASE = "cover";
|
|
6244
|
+
function resolveRangePointU(point, defaultFraction, subjectSize, scrollportSize) {
|
|
6245
|
+
var _a2;
|
|
6246
|
+
const [u0, u1] = scrollPhaseInterval((_a2 = point == null ? void 0 : point.phase) != null ? _a2 : DEFAULT_PHASE, subjectSize, scrollportSize);
|
|
6247
|
+
const fraction = typeof (point == null ? void 0 : point.fraction) === "number" ? point.fraction : defaultFraction;
|
|
6248
|
+
return u0 + fraction * (u1 - u0);
|
|
6249
|
+
}
|
|
6250
|
+
function scrollViewProgress(subjectStart, subjectSize, scrollportSize, range) {
|
|
6251
|
+
const u = scrollportSize - subjectStart;
|
|
6252
|
+
const uStart = resolveRangePointU(range == null ? void 0 : range.start, 0, subjectSize, scrollportSize);
|
|
6253
|
+
const uEnd = resolveRangePointU(range == null ? void 0 : range.end, 1, subjectSize, scrollportSize);
|
|
6254
|
+
if (uEnd <= uStart) return u >= uEnd ? 1 : 0;
|
|
6255
|
+
return clamp((u - uStart) / (uEnd - uStart), 0, 1);
|
|
6256
|
+
}
|
|
6257
|
+
function scrollOffsetProgress(offset, maxOffset, range) {
|
|
6258
|
+
var _a2, _b;
|
|
6259
|
+
const raw = maxOffset > 0 ? clamp(offset / maxOffset, 0, 1) : 1;
|
|
6260
|
+
const start = typeof ((_a2 = range == null ? void 0 : range.start) == null ? void 0 : _a2.fraction) === "number" ? range.start.fraction : 0;
|
|
6261
|
+
const end = typeof ((_b = range == null ? void 0 : range.end) == null ? void 0 : _b.fraction) === "number" ? range.end.fraction : 1;
|
|
6262
|
+
if (end <= start) return raw >= end ? 1 : 0;
|
|
6263
|
+
return clamp((raw - start) / (end - start), 0, 1);
|
|
6264
|
+
}
|
|
6265
|
+
function scrollResolveAxis(axis, writingMode) {
|
|
6266
|
+
const a = axis != null ? axis : "block";
|
|
6267
|
+
if (a === "x" || a === "y") return a;
|
|
6268
|
+
const vertical = !!writingMode && writingMode.startsWith("vertical");
|
|
6269
|
+
if (a === "inline") return vertical ? "y" : "x";
|
|
6270
|
+
return vertical ? "x" : "y";
|
|
6271
|
+
}
|
|
6272
|
+
|
|
6272
6273
|
// src/shared/PxAnimatorCallbacks.ts
|
|
6273
6274
|
function toEngineCallbacks(inline) {
|
|
6274
6275
|
const { onPlay, onPause, onCancel, onFinish, onRemove, onStop, onWarn, onError, muteWarn, muteError } = inline != null ? inline : {};
|
|
@@ -6293,13 +6294,13 @@ function asThrownError(e) {
|
|
|
6293
6294
|
}
|
|
6294
6295
|
|
|
6295
6296
|
// src/triggers/PxAnimatorTriggers.ts
|
|
6296
|
-
function setupAnimationTriggers(api,
|
|
6297
|
+
function setupAnimationTriggers(api, trigger, diag) {
|
|
6297
6298
|
const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
|
|
6298
6299
|
const cleanups = [];
|
|
6299
6300
|
const dispose = () => {
|
|
6300
6301
|
for (const undo of cleanups.splice(0)) undo();
|
|
6301
6302
|
};
|
|
6302
|
-
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(
|
|
6303
|
+
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
|
|
6303
6304
|
const root = api.getRootElement();
|
|
6304
6305
|
if (!root) {
|
|
6305
6306
|
report.warn(PxDiagnosticKind.host, "setupAnimationTriggers: No root element found for animation.");
|
|
@@ -6426,7 +6427,7 @@ function createFrameLoopAnimator(doc, adapter, callbacks, rootElement) {
|
|
|
6426
6427
|
diag.warn(PxDiagnosticKind.host, "createFrameLoopAnimator: No root element provided");
|
|
6427
6428
|
}
|
|
6428
6429
|
}
|
|
6429
|
-
const basicApi =
|
|
6430
|
+
const basicApi = createAdapterAnimator(
|
|
6430
6431
|
doc,
|
|
6431
6432
|
adapter || createDomAdapter(rootElement, diag),
|
|
6432
6433
|
callbacks
|
|
@@ -6466,7 +6467,7 @@ function createDomAdapter(rootElement, diag) {
|
|
|
6466
6467
|
const element = elements[i];
|
|
6467
6468
|
const effectiveAttrName = attrName === "transform" && element.tagName === "pattern" ? "patternTransform" : attrName;
|
|
6468
6469
|
element.setAttribute(effectiveAttrName, value);
|
|
6469
|
-
if (
|
|
6470
|
+
if (PX_STYLE_ATTR_NAMES.has(attrName)) {
|
|
6470
6471
|
element.style[attrName] = value;
|
|
6471
6472
|
}
|
|
6472
6473
|
}
|
|
@@ -6477,20 +6478,20 @@ function createDomAdapter(rootElement, diag) {
|
|
|
6477
6478
|
|
|
6478
6479
|
// src/engines/PxAnimatorWebApi.ts
|
|
6479
6480
|
function createCssKf(kf, t, propName, unsupportedSet) {
|
|
6480
|
-
let value =
|
|
6481
|
-
const e =
|
|
6481
|
+
let value = keyframeValue(kf);
|
|
6482
|
+
const e = keyframeEasing(kf);
|
|
6482
6483
|
const cssKf = {
|
|
6483
6484
|
offset: t,
|
|
6484
6485
|
easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
|
|
6485
6486
|
};
|
|
6486
6487
|
let cssValue;
|
|
6487
6488
|
let cssKey = propName;
|
|
6488
|
-
if (
|
|
6489
|
+
if (PX_COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
|
|
6489
6490
|
cssValue = toRGBA(value);
|
|
6490
6491
|
} else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
|
|
6491
6492
|
cssValue = composeTransformParts(value, { withUnits: true });
|
|
6492
6493
|
cssKey = "transform";
|
|
6493
|
-
} else if (
|
|
6494
|
+
} else if (PX_TRANSFORM_FN_NAMES.has(propName)) {
|
|
6494
6495
|
if (Array.isArray(value)) {
|
|
6495
6496
|
if (propName === "translate") value = value.map((v) => v + "px");
|
|
6496
6497
|
value = value.join(",");
|
|
@@ -6501,7 +6502,7 @@ function createCssKf(kf, t, propName, unsupportedSet) {
|
|
|
6501
6502
|
} else if (propName === "d") {
|
|
6502
6503
|
const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
|
|
6503
6504
|
cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
|
|
6504
|
-
} else if (
|
|
6505
|
+
} else if (PX_PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
|
|
6505
6506
|
cssValue = value * 100 + "%";
|
|
6506
6507
|
} else {
|
|
6507
6508
|
cssValue = "" + value;
|
|
@@ -6584,7 +6585,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
|
|
|
6584
6585
|
diag.warn(PxDiagnosticKind.host, "createWebApiAnimator: No root element provided");
|
|
6585
6586
|
}
|
|
6586
6587
|
}
|
|
6587
|
-
const bindings =
|
|
6588
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.native);
|
|
6588
6589
|
const animations = [];
|
|
6589
6590
|
const _iterations = config.iterations;
|
|
6590
6591
|
let iterations;
|
|
@@ -7066,7 +7067,7 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
|
|
|
7066
7067
|
unpin = () => {
|
|
7067
7068
|
};
|
|
7068
7069
|
}
|
|
7069
|
-
const api = (animatorConfig.engine !==
|
|
7070
|
+
const api = (animatorConfig.engine !== PxTimelineEngineSetting.js ? createWebApiAnimator(doc, cb, rootElement, isNativeForced(animatorConfig.engine)) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
|
|
7070
7071
|
const subject = ((_a2 = api.getRootElement) == null ? void 0 : _a2.call(api)) || rootElement;
|
|
7071
7072
|
if (subject) {
|
|
7072
7073
|
unpin = applyScrollPin(subject, animatorConfig.scroll);
|
|
@@ -7092,7 +7093,7 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
|
|
|
7092
7093
|
});
|
|
7093
7094
|
}
|
|
7094
7095
|
return finaliseAnimator(animatorConfig, callbacks, (cb) => {
|
|
7095
|
-
if (animatorConfig.engine ===
|
|
7096
|
+
if (animatorConfig.engine === PxTimelineEngineSetting.js) {
|
|
7096
7097
|
return createFrameLoopAnimator(doc, adapter, cb, rootElement);
|
|
7097
7098
|
}
|
|
7098
7099
|
return createWebApiAnimator(
|
|
@@ -7107,7 +7108,7 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
|
|
|
7107
7108
|
// src/dom/PxAnimatorDOM.ts
|
|
7108
7109
|
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
7109
7110
|
function createElement(tagName, normalizedProps, style, children, textContent, diag) {
|
|
7110
|
-
if (
|
|
7111
|
+
if (PX_DISALLOWED_SVG_TAGS_LOWER.has(tagName.toLowerCase())) {
|
|
7111
7112
|
(diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document, "SVG tag blocked (dangerous): " + tagName);
|
|
7112
7113
|
return null;
|
|
7113
7114
|
}
|
|
@@ -7115,7 +7116,7 @@ function createElement(tagName, normalizedProps, style, children, textContent, d
|
|
|
7115
7116
|
for (const propName in normalizedProps) {
|
|
7116
7117
|
const sanitized = sanitizeAttributeValue(propName, normalizedProps[propName]);
|
|
7117
7118
|
if (sanitized === void 0) continue;
|
|
7118
|
-
if (
|
|
7119
|
+
if (PX_CSS_ONLY_STYLE_PROPS.has(propName)) {
|
|
7119
7120
|
element.style[propName] = String(sanitized);
|
|
7120
7121
|
continue;
|
|
7121
7122
|
}
|
|
@@ -7140,7 +7141,7 @@ function renderNode(node, defs, diag) {
|
|
|
7140
7141
|
const _a2 = node, { type, children, style } = _a2, props = __objRest(_a2, ["type", "children", "style"]);
|
|
7141
7142
|
const domType = props.domType;
|
|
7142
7143
|
if (domType !== void 0) delete props.domType;
|
|
7143
|
-
const nodeDefs =
|
|
7144
|
+
const nodeDefs = getDefinitions(node) || defs;
|
|
7144
7145
|
const resolvedStyle = style;
|
|
7145
7146
|
let childElements;
|
|
7146
7147
|
if (children) {
|
|
@@ -7154,10 +7155,10 @@ function renderNode(node, defs, diag) {
|
|
|
7154
7155
|
}
|
|
7155
7156
|
const element = createElement(
|
|
7156
7157
|
type || "g",
|
|
7157
|
-
|
|
7158
|
+
toDomProps(props),
|
|
7158
7159
|
resolvedStyle,
|
|
7159
7160
|
childElements,
|
|
7160
|
-
props[
|
|
7161
|
+
props[PX_TEXT_CONTENT_ATTR],
|
|
7161
7162
|
diag
|
|
7162
7163
|
);
|
|
7163
7164
|
if (element && domType !== void 0) element.setAttribute("type", domType);
|
|
@@ -7174,7 +7175,7 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, re
|
|
|
7174
7175
|
for (const w of effectsWarnings) diag.warn(PxDiagnosticKind.document, "effects shape: " + w);
|
|
7175
7176
|
reportDocumentDiagnostics(doc, "[PxAnimator] createAnimator");
|
|
7176
7177
|
if (patch !== void 0 || resetTimeline) {
|
|
7177
|
-
const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, {
|
|
7178
|
+
const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, { resetTimeline: !!resetTimeline });
|
|
7178
7179
|
for (const w of patched.warnings) diag.warn(PxDiagnosticKind.usage, "timeline override: " + w);
|
|
7179
7180
|
doc = patched.doc;
|
|
7180
7181
|
}
|
|
@@ -7255,7 +7256,7 @@ function createAnimator(options) {
|
|
|
7255
7256
|
} else {
|
|
7256
7257
|
fetch(src).then((res) => res.json()).then((json) => {
|
|
7257
7258
|
if (destroyed) return;
|
|
7258
|
-
if (
|
|
7259
|
+
if (isPxDocument(json)) build(json);
|
|
7259
7260
|
else failed(PxDiagnosticKind.document, 'createAnimator: invalid animation document format at "' + src + '"');
|
|
7260
7261
|
}).catch((err) => {
|
|
7261
7262
|
var _a2;
|
|
@@ -7309,23 +7310,22 @@ function loadTagAnimators(options) {
|
|
|
7309
7310
|
}
|
|
7310
7311
|
}
|
|
7311
7312
|
export {
|
|
7312
|
-
PX_ANIMATOR_DOC_KEY,
|
|
7313
7313
|
PxAnimatorConfigSchema,
|
|
7314
|
-
|
|
7314
|
+
PxDefinitionsSchema,
|
|
7315
7315
|
PxDiagnosticKind,
|
|
7316
|
-
|
|
7316
|
+
PxNodeBaseSchema,
|
|
7317
7317
|
PxScrollSchema,
|
|
7318
|
-
|
|
7319
|
-
|
|
7318
|
+
PxSvgNodeRootSchema,
|
|
7319
|
+
PxTimelineEngineSetting,
|
|
7320
7320
|
PxTriggerSchema,
|
|
7321
|
+
createAdapterAnimator,
|
|
7321
7322
|
createAnimator,
|
|
7322
|
-
createBasicFrameLoopAnimator,
|
|
7323
7323
|
generateNewIds,
|
|
7324
|
-
getNormalizedProps,
|
|
7325
7324
|
loadTagAnimators,
|
|
7326
7325
|
px,
|
|
7327
7326
|
renderNode,
|
|
7328
7327
|
setupAnimationTriggers,
|
|
7328
|
+
toDomProps,
|
|
7329
7329
|
validateDocument
|
|
7330
7330
|
};
|
|
7331
7331
|
//# sourceMappingURL=index.js.map
|