@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.cjs
CHANGED
|
@@ -49,28 +49,27 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
49
49
|
// src/index.ts
|
|
50
50
|
var index_exports = {};
|
|
51
51
|
__export(index_exports, {
|
|
52
|
-
PX_ANIMATOR_DOC_KEY: () => PX_ANIMATOR_DOC_KEY,
|
|
53
52
|
PxAnimatorConfigSchema: () => PxAnimatorConfigSchema,
|
|
54
|
-
|
|
53
|
+
PxDefinitionsSchema: () => PxDefinitionsSchema,
|
|
55
54
|
PxDiagnosticKind: () => PxDiagnosticKind,
|
|
56
|
-
|
|
55
|
+
PxNodeBaseSchema: () => PxNodeBaseSchema,
|
|
57
56
|
PxScrollSchema: () => PxScrollSchema,
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
PxSvgNodeRootSchema: () => PxSvgNodeRootSchema,
|
|
58
|
+
PxTimelineEngineSetting: () => PxTimelineEngineSetting,
|
|
60
59
|
PxTriggerSchema: () => PxTriggerSchema,
|
|
60
|
+
createAdapterAnimator: () => createAdapterAnimator,
|
|
61
61
|
createAnimator: () => createAnimator,
|
|
62
|
-
createBasicFrameLoopAnimator: () => createBasicFrameLoopAnimator,
|
|
63
62
|
generateNewIds: () => generateNewIds,
|
|
64
|
-
getNormalizedProps: () => getNormalizedProps,
|
|
65
63
|
loadTagAnimators: () => loadTagAnimators,
|
|
66
64
|
px: () => px,
|
|
67
65
|
renderNode: () => renderNode,
|
|
68
66
|
setupAnimationTriggers: () => setupAnimationTriggers,
|
|
67
|
+
toDomProps: () => toDomProps,
|
|
69
68
|
validateDocument: () => validateDocument
|
|
70
69
|
});
|
|
71
70
|
module.exports = __toCommonJS(index_exports);
|
|
72
71
|
|
|
73
|
-
// ../svg-animator-core/dist/chunk-
|
|
72
|
+
// ../svg-animator-core/dist/chunk-L6GJ6Y2M.js
|
|
74
73
|
var __defProp2 = Object.defineProperty;
|
|
75
74
|
var __defProps2 = Object.defineProperties;
|
|
76
75
|
var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
|
|
@@ -588,7 +587,7 @@ var px = {
|
|
|
588
587
|
* The base can be the result of px.object() or px.openObject() — anything with a _shape property.
|
|
589
588
|
*
|
|
590
589
|
* @example
|
|
591
|
-
* const PxSvgNodeSchema = px.extendedObject(
|
|
590
|
+
* const PxSvgNodeSchema = px.extendedObject(PxNodeBaseSchema, { width: px.number().optional() });
|
|
592
591
|
*/
|
|
593
592
|
extendedObject: (base, extra) => new Obj(__spreadValues2(__spreadValues2({}, base._shape), extra)),
|
|
594
593
|
/** Array whose unrecoverable items are filtered out. Default: []. */
|
|
@@ -604,7 +603,7 @@ var px = {
|
|
|
604
603
|
/** Defers schema creation — required for recursive types. Must supply a default value. */
|
|
605
604
|
lazy: (fn, defaultVal) => new Lazy(fn, defaultVal)
|
|
606
605
|
};
|
|
607
|
-
var
|
|
606
|
+
var PX_WIRE_SCHEMA_VERSION = "1.1";
|
|
608
607
|
var VERSION_RE = /^(\d+)\.(\d+)(?:\.(\d+))?$/;
|
|
609
608
|
function parseWireVersion(raw) {
|
|
610
609
|
if (typeof raw !== "string") return void 0;
|
|
@@ -613,7 +612,7 @@ function parseWireVersion(raw) {
|
|
|
613
612
|
return { a: Number(m[1]), b: Number(m[2]), c: m[3] === void 0 ? 0 : Number(m[3]) };
|
|
614
613
|
}
|
|
615
614
|
var _a;
|
|
616
|
-
var
|
|
615
|
+
var PX_WIRE_VERSION = (_a = parseWireVersion(PX_WIRE_SCHEMA_VERSION)) != null ? _a : { a: 1, b: 1, c: 0 };
|
|
617
616
|
var PxFillMode = {
|
|
618
617
|
forwards: "forwards",
|
|
619
618
|
backwards: "backwards",
|
|
@@ -690,17 +689,17 @@ var PxTimelineEngine = {
|
|
|
690
689
|
native: "native",
|
|
691
690
|
js: "js"
|
|
692
691
|
};
|
|
693
|
-
var
|
|
692
|
+
var PxTimelineEngineSetting = __spreadProps2(__spreadValues2({}, PxTimelineEngine), {
|
|
694
693
|
auto: "auto"
|
|
695
694
|
});
|
|
696
695
|
function resolveTimelineEngine(engine) {
|
|
697
|
-
return engine ===
|
|
696
|
+
return engine === PxTimelineEngineSetting.js ? PxTimelineEngine.js : PxTimelineEngine.native;
|
|
698
697
|
}
|
|
699
698
|
function isNativeForced(engine) {
|
|
700
|
-
return engine ===
|
|
699
|
+
return engine === PxTimelineEngineSetting.native;
|
|
701
700
|
}
|
|
702
701
|
function mayUseNativeScrollTimeline(engine) {
|
|
703
|
-
return engine !==
|
|
702
|
+
return engine !== PxTimelineEngineSetting.js;
|
|
704
703
|
}
|
|
705
704
|
var PX_TRIGGER_DEFAULTS = {
|
|
706
705
|
startOn: "load",
|
|
@@ -761,7 +760,7 @@ var PxStrokeTrimSubPaths = {
|
|
|
761
760
|
separate: "separate",
|
|
762
761
|
combined: "combined"
|
|
763
762
|
};
|
|
764
|
-
var
|
|
763
|
+
var PX_TEXT_CONTENT_ATTR = "textContent";
|
|
765
764
|
var CLASS_ATTR = "class";
|
|
766
765
|
var TRANSFORM_ATTR = "transform";
|
|
767
766
|
var OFFSET_DISTANCE_ATTR = "offsetDistance";
|
|
@@ -772,7 +771,7 @@ var INTERNAL_ATTRS = /* @__PURE__ */ new Set([
|
|
|
772
771
|
"meta",
|
|
773
772
|
"animate",
|
|
774
773
|
"effects",
|
|
775
|
-
|
|
774
|
+
PX_TEXT_CONTENT_ATTR
|
|
776
775
|
]);
|
|
777
776
|
var TRANSFORM_PART = {
|
|
778
777
|
translate: "translate",
|
|
@@ -795,11 +794,11 @@ var PxGradientType = {
|
|
|
795
794
|
linear: "linear",
|
|
796
795
|
radial: "radial"
|
|
797
796
|
};
|
|
798
|
-
function
|
|
799
|
-
if (!(
|
|
797
|
+
function isPxDocument(doc) {
|
|
798
|
+
if (!(doc && typeof doc === "object" && !Array.isArray(doc))) {
|
|
800
799
|
return false;
|
|
801
800
|
}
|
|
802
|
-
return
|
|
801
|
+
return doc.type === "svg";
|
|
803
802
|
}
|
|
804
803
|
function getAnimatorConfig(doc) {
|
|
805
804
|
var _a2;
|
|
@@ -860,7 +859,7 @@ function flattenAnimatorTimeline(cfg) {
|
|
|
860
859
|
flattenMemo.set(cfg, flat);
|
|
861
860
|
return flat;
|
|
862
861
|
}
|
|
863
|
-
function
|
|
862
|
+
function getDefinitions(doc) {
|
|
864
863
|
var _a2;
|
|
865
864
|
if (!doc) return void 0;
|
|
866
865
|
return (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.definitions;
|
|
@@ -901,20 +900,20 @@ var PxKeyframeSchema = implementsInterface()(px.object({
|
|
|
901
900
|
// its internal COPY-PASTE payload, which never validates against this schema.)
|
|
902
901
|
}));
|
|
903
902
|
var anyKf = (kf) => kf;
|
|
904
|
-
var
|
|
903
|
+
var keyframeTime = (kf) => {
|
|
905
904
|
var _a2, _b;
|
|
906
905
|
return (_b = (_a2 = anyKf(kf).time) != null ? _a2 : anyKf(kf).t) != null ? _b : 0;
|
|
907
906
|
};
|
|
908
|
-
var
|
|
907
|
+
var keyframeValue = (kf) => {
|
|
909
908
|
var _a2;
|
|
910
909
|
return (_a2 = anyKf(kf).value) != null ? _a2 : anyKf(kf).v;
|
|
911
910
|
};
|
|
912
|
-
var
|
|
911
|
+
var keyframeEasing = (kf) => {
|
|
913
912
|
var _a2;
|
|
914
913
|
return (_a2 = anyKf(kf).easing) != null ? _a2 : anyKf(kf).e;
|
|
915
914
|
};
|
|
916
|
-
var
|
|
917
|
-
var
|
|
915
|
+
var keyframeTangentIn = (kf) => anyKf(kf).tangentIn;
|
|
916
|
+
var keyframeTangentOut = (kf) => anyKf(kf).tangentOut;
|
|
918
917
|
var PxLoopSchema = implementsInterface()(px.object({
|
|
919
918
|
segmentCount: px.number().optional(),
|
|
920
919
|
repeatAt: px.enum([PxLoopRepeatAt.start, PxLoopRepeatAt.end]).optional(),
|
|
@@ -968,7 +967,7 @@ var PxGlyphFontSchema = implementsInterface()(px.object({
|
|
|
968
967
|
unitsPerEm: px.number(),
|
|
969
968
|
glyphs: px.record(PxGlyphSchema)
|
|
970
969
|
}));
|
|
971
|
-
var
|
|
970
|
+
var PxDefinitionsSchema = implementsInterface()(px.object({
|
|
972
971
|
easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
|
|
973
972
|
animations: px.record(PxAnimationDefinitionSchema).optional(),
|
|
974
973
|
fonts: px.record(PxGlyphFontSchema).optional()
|
|
@@ -1006,7 +1005,7 @@ var PxTimelinePinSchema = implementsInterface()(px.object({
|
|
|
1006
1005
|
offset: px.number().optional(),
|
|
1007
1006
|
distance: px.number().optional()
|
|
1008
1007
|
}));
|
|
1009
|
-
var PxTimelineEngineSchema = px.enum([
|
|
1008
|
+
var PxTimelineEngineSchema = px.enum([PxTimelineEngineSetting.auto, PxTimelineEngineSetting.native, PxTimelineEngineSetting.js]).optional();
|
|
1010
1009
|
var PxTimeTimelineSchema = implementsInterface()(px.object({
|
|
1011
1010
|
type: px.literal("time").optional(),
|
|
1012
1011
|
engine: PxTimelineEngineSchema,
|
|
@@ -1060,7 +1059,7 @@ var PxAnimatorConfigSchema = implementsInterface()(px.object({
|
|
|
1060
1059
|
// at this level only on the runtime view, like the rest of the playback dynamics.)
|
|
1061
1060
|
// THE spelling of "what advances progress" — clock / scroll / view (review §2.1).
|
|
1062
1061
|
timeline: PxTimelineSchema.optional(),
|
|
1063
|
-
definitions:
|
|
1062
|
+
definitions: PxDefinitionsSchema.optional(),
|
|
1064
1063
|
bindings: px.array(PxBindingSchema).optional(),
|
|
1065
1064
|
debugGlobalName: px.string().optional(),
|
|
1066
1065
|
// Declared HERE because this is a closed object: an undeclared key would be stripped by
|
|
@@ -1149,7 +1148,7 @@ var PxAnimatableGradientStopsSchema = px.union([
|
|
|
1149
1148
|
PxPropertyAnimationSchema
|
|
1150
1149
|
]);
|
|
1151
1150
|
var PxFillGradientEffectSchema = implementsInterface()(px.object({
|
|
1152
|
-
// Contextual kind — the `type` convention, see `
|
|
1151
|
+
// Contextual kind — the `type` convention, see `PxNodeBaseSchema.type`.
|
|
1153
1152
|
type: px.enum([PxGradientType.linear, PxGradientType.radial]),
|
|
1154
1153
|
start: PxAnimatableVec2Schema.optional(),
|
|
1155
1154
|
end: PxAnimatableVec2Schema.optional(),
|
|
@@ -1186,11 +1185,11 @@ var PxEffectsSchema = implementsInterface()(px.object({
|
|
|
1186
1185
|
textPath: PxTextPathEffectSchema.optional(),
|
|
1187
1186
|
text: PxTextEffectSchema.optional()
|
|
1188
1187
|
}));
|
|
1189
|
-
function validateNodeEffects(root,
|
|
1188
|
+
function validateNodeEffects(root, options) {
|
|
1190
1189
|
const warnings = [];
|
|
1191
1190
|
const walk = (node, path) => {
|
|
1192
1191
|
if (node && node.effects) {
|
|
1193
|
-
const ctx = { errors: [], warnings: [], strict: !!(
|
|
1192
|
+
const ctx = { errors: [], warnings: [], strict: !!(options == null ? void 0 : options.strict) };
|
|
1194
1193
|
const ok = PxEffectsSchema.isValid(node.effects, ctx, [path + ".effects"]);
|
|
1195
1194
|
if (!ok) {
|
|
1196
1195
|
for (const err of ctx.errors) warnings.push(err);
|
|
@@ -1251,9 +1250,9 @@ function validateVersionStamp(doc) {
|
|
|
1251
1250
|
if (parseWireVersion(version) !== void 0) return [];
|
|
1252
1251
|
return ["root.animator.version: " + JSON.stringify(version) + ' is not a version stamp ("a.b" or "a.b.c") \u2014 it reads as unstamped'];
|
|
1253
1252
|
}
|
|
1254
|
-
function validateDocument(doc,
|
|
1253
|
+
function validateDocument(doc, options) {
|
|
1255
1254
|
var _a2;
|
|
1256
|
-
const strict = (
|
|
1255
|
+
const strict = (options == null ? void 0 : options.strict) !== false;
|
|
1257
1256
|
const ctx = { errors: [], warnings: [], strict };
|
|
1258
1257
|
const problems = PxAnimatedSvgDocumentSchema.isValid(doc, ctx, ["root"]) ? [] : [...ctx.errors];
|
|
1259
1258
|
if (doc && typeof doc === "object") {
|
|
@@ -1273,7 +1272,7 @@ function validateDocument(doc, opts) {
|
|
|
1273
1272
|
}
|
|
1274
1273
|
return problems;
|
|
1275
1274
|
}
|
|
1276
|
-
var
|
|
1275
|
+
var PxNodeBaseSchema = px.openObject({
|
|
1277
1276
|
// CONVENTION (SCHEMA-DESIGN R1 / issues N4): `type` is the ONE word for "what
|
|
1278
1277
|
// kind of thing is this", discriminated by its CARRIER — here the node TAG
|
|
1279
1278
|
// (`rect`, `text`), and inside a sub-object that object's kind (`fillGradient.type`,
|
|
@@ -1288,7 +1287,7 @@ var PxNodeBase = px.openObject({
|
|
|
1288
1287
|
// `type` is taken by the tag name, so the attribute travels here and the renderer puts
|
|
1289
1288
|
// it back (`PxAnimatorDOM.renderNode`, `PxRnRender`). Declared here — not merely
|
|
1290
1289
|
// documented — because a wire key that is not in a schema is invisible to the
|
|
1291
|
-
// minifier's reserve list and gets renamed (
|
|
1290
|
+
// minifier's reserve list and gets renamed (dev-docs/plans/minification-boundary.md §1.1).
|
|
1292
1291
|
domType: px.string().optional(),
|
|
1293
1292
|
// Text content of a `<text>` / `<tspan>`. Declared, so a non-string value is a schema error
|
|
1294
1293
|
// and the minifier reserves the key; `text` is NOT an alias for it and is not read anywhere.
|
|
@@ -1296,7 +1295,7 @@ var PxNodeBase = px.openObject({
|
|
|
1296
1295
|
id: px.string().optional(),
|
|
1297
1296
|
meta: px.any().optional(),
|
|
1298
1297
|
// Player-effects bucket emitted by the Editor's lightweight design format.
|
|
1299
|
-
// Consumed and removed by `
|
|
1298
|
+
// Consumed and removed by `materializeNodeEffects` before any other normalization
|
|
1300
1299
|
// (see `createAnimatorImpl`), so downstream code never sees it.
|
|
1301
1300
|
effects: PxEffectsSchema.optional(),
|
|
1302
1301
|
// `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
|
|
@@ -1305,10 +1304,10 @@ var PxNodeBase = px.openObject({
|
|
|
1305
1304
|
animate: PxElementAnimationSchema.optional(),
|
|
1306
1305
|
style: px.record(px.union([px.string(), px.number()])).optional()
|
|
1307
1306
|
}, PxAttrValueSchema);
|
|
1308
|
-
var PxNodeSchema = px.openObject(__spreadProps2(__spreadValues2({},
|
|
1307
|
+
var PxNodeSchema = px.openObject(__spreadProps2(__spreadValues2({}, PxNodeBaseSchema._shape), {
|
|
1309
1308
|
children: px.lazy(() => px.array(PxNodeSchema), []).optional()
|
|
1310
1309
|
}), PxAttrValueSchema);
|
|
1311
|
-
var
|
|
1310
|
+
var PxSvgNodeRootSchema = px.object({
|
|
1312
1311
|
// `"100%"` and other SVG length strings are legal here — a number-only slot rejected
|
|
1313
1312
|
// real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
|
|
1314
1313
|
width: px.union([px.number(), px.string()]).optional(),
|
|
@@ -1316,7 +1315,7 @@ var PxSvgNodeExtra = px.object({
|
|
|
1316
1315
|
viewBox: px.string().optional(),
|
|
1317
1316
|
animator: PxAnimatorConfigSchema.optional()
|
|
1318
1317
|
});
|
|
1319
|
-
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps2(__spreadValues2(__spreadValues2({},
|
|
1318
|
+
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps2(__spreadValues2(__spreadValues2({}, PxNodeBaseSchema._shape), PxSvgNodeRootSchema._shape), {
|
|
1320
1319
|
type: px.literal("svg"),
|
|
1321
1320
|
// override string → literal to require 'svg'
|
|
1322
1321
|
children: px.array(PxNodeSchema).optional()
|
|
@@ -1671,9 +1670,9 @@ function parseColor(s) {
|
|
|
1671
1670
|
}
|
|
1672
1671
|
return void 0;
|
|
1673
1672
|
}
|
|
1674
|
-
var
|
|
1675
|
-
var
|
|
1676
|
-
var
|
|
1673
|
+
var PX_COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
|
|
1674
|
+
var PX_TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
|
|
1675
|
+
var PX_PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
|
|
1677
1676
|
function composeTransformParts(parts, opts) {
|
|
1678
1677
|
var _a2;
|
|
1679
1678
|
if (!parts) return "";
|
|
@@ -1726,8 +1725,8 @@ function parseTransformParts(str2) {
|
|
|
1726
1725
|
if (str2.replace(/([a-zA-Z]+)\s*\(([^)]*)\)/g, "").replace(/[\s,]/g, "").length) return void 0;
|
|
1727
1726
|
return Object.keys(out).length ? out : void 0;
|
|
1728
1727
|
}
|
|
1729
|
-
var
|
|
1730
|
-
var
|
|
1728
|
+
var PX_STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
|
|
1729
|
+
var PX_DEFAULT_DURATION_MS = 1e3;
|
|
1731
1730
|
function kebabToCamelCaseWord(kebab) {
|
|
1732
1731
|
return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
|
|
1733
1732
|
}
|
|
@@ -1888,7 +1887,7 @@ function invertEasing(easing) {
|
|
|
1888
1887
|
const flipped = [easing[1], easing[0], easing[3], easing[2]];
|
|
1889
1888
|
return cubicBezier(flipped);
|
|
1890
1889
|
}
|
|
1891
|
-
var
|
|
1890
|
+
var PX_DISALLOWED_SVG_TAGS_LOWER = /* @__PURE__ */ new Set([
|
|
1892
1891
|
"script",
|
|
1893
1892
|
"foreignobject"
|
|
1894
1893
|
]);
|
|
@@ -1913,7 +1912,7 @@ var URL_VALUE_ATTRS_LOWER = /* @__PURE__ */ new Set([
|
|
|
1913
1912
|
// marker-end="url(#…)"
|
|
1914
1913
|
]);
|
|
1915
1914
|
var IMAGE_REF_ATTRS_LOWER = /* @__PURE__ */ new Set(["href", "xlink:href", "src"]);
|
|
1916
|
-
var
|
|
1915
|
+
var PX_CSS_ONLY_STYLE_PROPS = /* @__PURE__ */ new Set(["mixBlendMode", "isolation"]);
|
|
1917
1916
|
var DATA_RASTER_IMAGE_RE = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,/i;
|
|
1918
1917
|
var DATA_SVG_IMAGE_RE = /^data:image\/svg\+xml(?:;[^,]*)?,/i;
|
|
1919
1918
|
var DATA_IMAGE_BASE64_PAYLOAD_RE = /^data:image\/[^;,]*;base64,([A-Za-z0-9+/]{8})/i;
|
|
@@ -1950,19 +1949,19 @@ function sanitizeAttributeValue(name, value) {
|
|
|
1950
1949
|
}
|
|
1951
1950
|
return value;
|
|
1952
1951
|
}
|
|
1953
|
-
function
|
|
1952
|
+
function toDomProps(props) {
|
|
1954
1953
|
const propsCopy = {};
|
|
1955
1954
|
for (const rawKey of Object.keys(props)) {
|
|
1956
1955
|
const key = kebabToCamelCaseWord(rawKey);
|
|
1957
1956
|
if (INTERNAL_ATTRS.has(key)) continue;
|
|
1958
1957
|
if (key === "style") continue;
|
|
1959
1958
|
let value = props[rawKey];
|
|
1960
|
-
if (
|
|
1959
|
+
if (PX_COLOR_ATTR_NAMES.has(key) && Array.isArray(value)) {
|
|
1961
1960
|
propsCopy[key] = toRGBA(value);
|
|
1962
1961
|
} else if (key === "transform" && value !== null && typeof value === "object" && !Array.isArray(value) && !value.keyframes) {
|
|
1963
1962
|
const parts = value.value && typeof value.value === "object" ? value.value : value;
|
|
1964
1963
|
propsCopy[TRANSFORM_ATTR] = composeTransformParts(parts, { withUnits: false });
|
|
1965
|
-
} else if (
|
|
1964
|
+
} else if (PX_TRANSFORM_FN_NAMES.has(key)) {
|
|
1966
1965
|
if (Array.isArray(value)) {
|
|
1967
1966
|
if (key === "translate") value = value.map((v) => v + "px");
|
|
1968
1967
|
value = value.join(",");
|
|
@@ -1978,7 +1977,7 @@ function getNormalizedProps(props) {
|
|
|
1978
1977
|
return propsCopy;
|
|
1979
1978
|
}
|
|
1980
1979
|
function getKfTranslate(kf) {
|
|
1981
|
-
const v =
|
|
1980
|
+
const v = keyframeValue(kf);
|
|
1982
1981
|
if (!v) return void 0;
|
|
1983
1982
|
if (Array.isArray(v) && v.length >= 2 && typeof v[0] === "number" && typeof v[1] === "number") {
|
|
1984
1983
|
return [v[0], v[1]];
|
|
@@ -1988,17 +1987,17 @@ function getKfTranslate(kf) {
|
|
|
1988
1987
|
return void 0;
|
|
1989
1988
|
}
|
|
1990
1989
|
function getKfTime(kf) {
|
|
1991
|
-
return
|
|
1990
|
+
return keyframeTime(kf);
|
|
1992
1991
|
}
|
|
1993
1992
|
function getKfEasing(kf) {
|
|
1994
|
-
return
|
|
1993
|
+
return keyframeEasing(kf);
|
|
1995
1994
|
}
|
|
1996
1995
|
function propAnimIsMotionPath(anim) {
|
|
1997
1996
|
const kfs = anim.keyframes;
|
|
1998
1997
|
if (!Array.isArray(kfs)) return false;
|
|
1999
1998
|
if (anim.autoOrient) return true;
|
|
2000
1999
|
for (const kf of kfs) {
|
|
2001
|
-
if (
|
|
2000
|
+
if (keyframeTangentIn(kf) || keyframeTangentOut(kf)) return true;
|
|
2002
2001
|
}
|
|
2003
2002
|
return false;
|
|
2004
2003
|
}
|
|
@@ -2007,8 +2006,8 @@ function getSegmentCache(prevKf, nextKf, prevPos, nextPos) {
|
|
|
2007
2006
|
let byNext = _segmentCache.get(prevKf);
|
|
2008
2007
|
const existing = byNext == null ? void 0 : byNext.get(nextKf);
|
|
2009
2008
|
if (existing) return existing;
|
|
2010
|
-
const to =
|
|
2011
|
-
const ti =
|
|
2009
|
+
const to = keyframeTangentOut(prevKf);
|
|
2010
|
+
const ti = keyframeTangentIn(nextKf);
|
|
2012
2011
|
const P1 = [prevPos[0] + (to ? to[0] : 0), prevPos[1] + (to ? to[1] : 0)];
|
|
2013
2012
|
const P2 = [nextPos[0] + (ti ? ti[0] : 0), nextPos[1] + (ti ? ti[1] : 0)];
|
|
2014
2013
|
const lut = bezier2D_arcLengthLUT(prevPos, P1, P2, nextPos);
|
|
@@ -2101,7 +2100,7 @@ function materializeMotionPathInPropAnim(anim, opts) {
|
|
|
2101
2100
|
function unwrapAutoOrientRotations(kfs) {
|
|
2102
2101
|
let prev;
|
|
2103
2102
|
for (const kf of kfs) {
|
|
2104
|
-
const v =
|
|
2103
|
+
const v = keyframeValue(kf);
|
|
2105
2104
|
if (!v || typeof v.rotate !== "number") continue;
|
|
2106
2105
|
if (prev === void 0) {
|
|
2107
2106
|
prev = v.rotate;
|
|
@@ -2118,7 +2117,7 @@ function makeOutKf(time, value) {
|
|
|
2118
2117
|
return { t: time, v: value };
|
|
2119
2118
|
}
|
|
2120
2119
|
function getKfValueParts(kf) {
|
|
2121
|
-
const v =
|
|
2120
|
+
const v = keyframeValue(kf);
|
|
2122
2121
|
if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
|
|
2123
2122
|
return v;
|
|
2124
2123
|
}
|
|
@@ -2180,7 +2179,7 @@ function wrappedAngleDelta(a, b) {
|
|
|
2180
2179
|
}
|
|
2181
2180
|
function insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol) {
|
|
2182
2181
|
const lastKf = out[out.length - 1];
|
|
2183
|
-
const lastV =
|
|
2182
|
+
const lastV = keyframeValue(lastKf);
|
|
2184
2183
|
const prevExit = lastV == null ? void 0 : lastV.rotate;
|
|
2185
2184
|
if (typeof prevExit !== "number") return;
|
|
2186
2185
|
const boundaryV = getKfValueParts(prevKf);
|
|
@@ -2360,7 +2359,7 @@ function walkAndMaterialize(node, opts) {
|
|
|
2360
2359
|
if (newAnimate) cloned.animate = newAnimate;
|
|
2361
2360
|
return cloned;
|
|
2362
2361
|
}
|
|
2363
|
-
var
|
|
2362
|
+
var PX_LOOP_JUMP_SHIFT_MS = 1;
|
|
2364
2363
|
function deepEqualValue(a, b) {
|
|
2365
2364
|
if (a === b) return true;
|
|
2366
2365
|
if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
|
|
@@ -2536,7 +2535,7 @@ function interpolateValue(propName, a, b, t) {
|
|
|
2536
2535
|
const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
|
|
2537
2536
|
return { paths: interpolateBeziers(aPaths, bPaths, t) };
|
|
2538
2537
|
}
|
|
2539
|
-
if (
|
|
2538
|
+
if (PX_COLOR_ATTR_NAMES.has(propName)) {
|
|
2540
2539
|
return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
|
|
2541
2540
|
}
|
|
2542
2541
|
if (propName === "transform" && typeof a === "object" && a !== null && !Array.isArray(a) && typeof b === "object" && b !== null && !Array.isArray(b)) {
|
|
@@ -2545,7 +2544,7 @@ function interpolateValue(propName, a, b, t) {
|
|
|
2545
2544
|
if (propName === "rotate" && typeof a === "number" && typeof b === "number") {
|
|
2546
2545
|
return interpolateNum(a, b, t);
|
|
2547
2546
|
}
|
|
2548
|
-
if (
|
|
2547
|
+
if (PX_TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
|
|
2549
2548
|
return interpolateVec(a || [], b || [], t);
|
|
2550
2549
|
}
|
|
2551
2550
|
return interpolateNum(+(a || 0), +(b || 0), t);
|
|
@@ -2597,8 +2596,8 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
|
|
|
2597
2596
|
relT: (kf.t - segStartT) / segDuration,
|
|
2598
2597
|
v: kf.v,
|
|
2599
2598
|
e: kf.e,
|
|
2600
|
-
tangentIn:
|
|
2601
|
-
tangentOut:
|
|
2599
|
+
tangentIn: keyframeTangentIn(kf),
|
|
2600
|
+
tangentOut: keyframeTangentOut(kf)
|
|
2602
2601
|
}));
|
|
2603
2602
|
const fullReps = Math.floor(fillDuration / segDuration);
|
|
2604
2603
|
const remainder = fillDuration - fullReps * segDuration;
|
|
@@ -2664,7 +2663,7 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
|
|
|
2664
2663
|
}
|
|
2665
2664
|
}
|
|
2666
2665
|
const pushed = {
|
|
2667
|
-
t: repStart + entry.relT * segDuration + (isBoundary ?
|
|
2666
|
+
t: repStart + entry.relT * segDuration + (isBoundary ? PX_LOOP_JUMP_SHIFT_MS : 0),
|
|
2668
2667
|
v: entry.v,
|
|
2669
2668
|
e: i < entries.length - 1 ? entry.e : void 0
|
|
2670
2669
|
};
|
|
@@ -2751,14 +2750,14 @@ function normalizeKeyframes(propName, propAnim, duration, defs) {
|
|
|
2751
2750
|
const keyframes = propAnim.keyframes || [];
|
|
2752
2751
|
const normalized = [];
|
|
2753
2752
|
for (const kf of keyframes) {
|
|
2754
|
-
const timePct =
|
|
2755
|
-
let value =
|
|
2756
|
-
const easing =
|
|
2753
|
+
const timePct = keyframeTime(kf);
|
|
2754
|
+
let value = keyframeValue(kf);
|
|
2755
|
+
const easing = keyframeEasing(kf);
|
|
2757
2756
|
if (propName === "d") {
|
|
2758
2757
|
value = normalizePathValue(value);
|
|
2759
2758
|
}
|
|
2760
2759
|
const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
|
|
2761
|
-
if (
|
|
2760
|
+
if (PX_COLOR_ATTR_NAMES.has(propNameKebab)) {
|
|
2762
2761
|
value = (_a2 = parseColor(value)) != null ? _a2 : value;
|
|
2763
2762
|
}
|
|
2764
2763
|
const normKf = {
|
|
@@ -2766,8 +2765,8 @@ function normalizeKeyframes(propName, propAnim, duration, defs) {
|
|
|
2766
2765
|
v: value,
|
|
2767
2766
|
e: resolveEasing(easing, defs)
|
|
2768
2767
|
};
|
|
2769
|
-
const tIn =
|
|
2770
|
-
const tOut =
|
|
2768
|
+
const tIn = keyframeTangentIn(kf);
|
|
2769
|
+
const tOut = keyframeTangentOut(kf);
|
|
2771
2770
|
if (tIn) normKf.tangentIn = tIn;
|
|
2772
2771
|
if (tOut) normKf.tangentOut = tOut;
|
|
2773
2772
|
normalized.push(normKf);
|
|
@@ -2799,17 +2798,17 @@ function materializeInternalLoopsInPropAnim(propName, propAnim, duration) {
|
|
|
2799
2798
|
const rawKfs = propAnim.keyframes;
|
|
2800
2799
|
if (!Array.isArray(rawKfs) || rawKfs.length < 2) return propAnim;
|
|
2801
2800
|
const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
|
|
2802
|
-
const isColor =
|
|
2801
|
+
const isColor = PX_COLOR_ATTR_NAMES.has(propNameKebab);
|
|
2803
2802
|
const kfs = rawKfs.map((kf) => {
|
|
2804
2803
|
var _a2;
|
|
2805
|
-
const t =
|
|
2806
|
-
let v =
|
|
2804
|
+
const t = keyframeTime(kf);
|
|
2805
|
+
let v = keyframeValue(kf);
|
|
2807
2806
|
if (propName === "d") v = normalizePathValue(v);
|
|
2808
2807
|
if (isColor) v = (_a2 = parseColor(v)) != null ? _a2 : v;
|
|
2809
|
-
const e =
|
|
2808
|
+
const e = keyframeEasing(kf);
|
|
2810
2809
|
const out2 = { t, v, e };
|
|
2811
|
-
const tIn =
|
|
2812
|
-
const tOut =
|
|
2810
|
+
const tIn = keyframeTangentIn(kf);
|
|
2811
|
+
const tOut = keyframeTangentOut(kf);
|
|
2813
2812
|
if (tIn) out2.tangentIn = tIn;
|
|
2814
2813
|
if (tOut) out2.tangentOut = tOut;
|
|
2815
2814
|
return out2;
|
|
@@ -2874,7 +2873,7 @@ function mergeStaticTransformIntoAnimDef(animDef, staticTransform) {
|
|
|
2874
2873
|
}
|
|
2875
2874
|
return animDef;
|
|
2876
2875
|
}
|
|
2877
|
-
const channels = Object.keys(animDef).filter((k) =>
|
|
2876
|
+
const channels = Object.keys(animDef).filter((k) => PX_TRANSFORM_FN_NAMES.has(k));
|
|
2878
2877
|
if (channels.length !== 1) return animDef;
|
|
2879
2878
|
const ch = channels[0];
|
|
2880
2879
|
const chAnim = animDef[ch];
|
|
@@ -2903,9 +2902,9 @@ function normalizeAnimationDefinition(animDef, duration, defs, engine = PxTimeli
|
|
|
2903
2902
|
}
|
|
2904
2903
|
return normalized;
|
|
2905
2904
|
}
|
|
2906
|
-
function
|
|
2905
|
+
function normalizeBindings(doc, engine = PxTimelineEngine.native) {
|
|
2907
2906
|
const animatorConfig = getAnimatorConfig(doc) || {};
|
|
2908
|
-
const defs =
|
|
2907
|
+
const defs = getDefinitions(doc);
|
|
2909
2908
|
const duration = animatorConfig.duration || 1e3;
|
|
2910
2909
|
const bindings = [];
|
|
2911
2910
|
const processAnimation = (id, animDefs, staticTransform) => {
|
|
@@ -2975,7 +2974,7 @@ function calcPropertyValue(propName, propAnim, progress) {
|
|
|
2975
2974
|
const { prevKf, nextKf } = getKeyframesPair(keyframes, progress);
|
|
2976
2975
|
let localProgress = prevKf === nextKf ? 0 : remap(progress, (_a2 = prevKf.t) != null ? _a2 : 0, (_b = nextKf.t) != null ? _b : 0, 0, 1);
|
|
2977
2976
|
localProgress = clamp(localProgress, 0, 1);
|
|
2978
|
-
const easing =
|
|
2977
|
+
const easing = keyframeEasing(prevKf);
|
|
2979
2978
|
if (easing && Array.isArray(easing)) {
|
|
2980
2979
|
try {
|
|
2981
2980
|
localProgress = cubicBezier(easing)(localProgress);
|
|
@@ -2994,7 +2993,7 @@ function calcPropertyValue(propName, propAnim, progress) {
|
|
|
2994
2993
|
nextPaths,
|
|
2995
2994
|
localProgress
|
|
2996
2995
|
).map((bz) => bezierToSvgPath(bz)).join("");
|
|
2997
|
-
} else if (
|
|
2996
|
+
} else if (PX_COLOR_ATTR_NAMES.has(cssAttrName)) {
|
|
2998
2997
|
cssValue = toRGBA(interpolateColor(
|
|
2999
2998
|
prevV || [0, 0, 0, 1],
|
|
3000
2999
|
nextV || [0, 0, 0, 1],
|
|
@@ -3068,14 +3067,14 @@ function calcPropertyValue(propName, propAnim, progress) {
|
|
|
3068
3067
|
cssValue = "scale(" + v.join(",") + ")";
|
|
3069
3068
|
cssAttrName = "transform";
|
|
3070
3069
|
} else {
|
|
3071
|
-
const
|
|
3070
|
+
const num = interpolateNum(
|
|
3072
3071
|
+(prevV || 0),
|
|
3073
3072
|
+(nextV || 0),
|
|
3074
3073
|
localProgress
|
|
3075
3074
|
);
|
|
3076
|
-
cssValue =
|
|
3075
|
+
cssValue = num;
|
|
3077
3076
|
}
|
|
3078
|
-
if (
|
|
3077
|
+
if (PX_PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
|
|
3079
3078
|
cssValue = cssValue * 100 + "%";
|
|
3080
3079
|
}
|
|
3081
3080
|
return { k: cssAttrName, v: cssValue === null ? "" : "" + cssValue };
|
|
@@ -3114,7 +3113,7 @@ function parseCubics(d) {
|
|
|
3114
3113
|
let pcx = 0, pcy = 0;
|
|
3115
3114
|
let pqx = 0, pqy = 0;
|
|
3116
3115
|
let prevCmd = "";
|
|
3117
|
-
const
|
|
3116
|
+
const num = () => parseFloat(tokens[i++]);
|
|
3118
3117
|
const push = (P1, P2, P3) => {
|
|
3119
3118
|
const P0 = [cx, cy];
|
|
3120
3119
|
const lut = bezier2D_arcLengthLUT(P0, P1, P2, P3, LUT_STEPS);
|
|
@@ -3143,7 +3142,7 @@ function parseCubics(d) {
|
|
|
3143
3142
|
continue;
|
|
3144
3143
|
}
|
|
3145
3144
|
if (U === "M") {
|
|
3146
|
-
const x =
|
|
3145
|
+
const x = num() + (rel ? cx : 0), y = num() + (rel ? cy : 0);
|
|
3147
3146
|
cx = x;
|
|
3148
3147
|
cy = y;
|
|
3149
3148
|
sx = x;
|
|
@@ -3152,29 +3151,29 @@ function parseCubics(d) {
|
|
|
3152
3151
|
continue;
|
|
3153
3152
|
}
|
|
3154
3153
|
if (U === "L") {
|
|
3155
|
-
pushLine(
|
|
3154
|
+
pushLine(num() + (rel ? cx : 0), num() + (rel ? cy : 0));
|
|
3156
3155
|
} else if (U === "H") {
|
|
3157
|
-
pushLine(
|
|
3156
|
+
pushLine(num() + (rel ? cx : 0), cy);
|
|
3158
3157
|
} else if (U === "V") {
|
|
3159
|
-
pushLine(cx,
|
|
3158
|
+
pushLine(cx, num() + (rel ? cy : 0));
|
|
3160
3159
|
} else if (U === "C") {
|
|
3161
|
-
const p1 = [
|
|
3162
|
-
const p2 = [
|
|
3163
|
-
const p3 = [
|
|
3160
|
+
const p1 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3161
|
+
const p2 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3162
|
+
const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3164
3163
|
pcx = p2[0];
|
|
3165
3164
|
pcy = p2[1];
|
|
3166
3165
|
push(p1, p2, p3);
|
|
3167
3166
|
} else if (U === "S") {
|
|
3168
3167
|
const smooth = prevCmd.toUpperCase() === "C" || prevCmd.toUpperCase() === "S";
|
|
3169
3168
|
const p1 = smooth ? [2 * cx - pcx, 2 * cy - pcy] : [cx, cy];
|
|
3170
|
-
const p2 = [
|
|
3171
|
-
const p3 = [
|
|
3169
|
+
const p2 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3170
|
+
const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3172
3171
|
pcx = p2[0];
|
|
3173
3172
|
pcy = p2[1];
|
|
3174
3173
|
push(p1, p2, p3);
|
|
3175
3174
|
} else if (U === "Q") {
|
|
3176
|
-
const qc = [
|
|
3177
|
-
const p3 = [
|
|
3175
|
+
const qc = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3176
|
+
const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3178
3177
|
pqx = qc[0];
|
|
3179
3178
|
pqy = qc[1];
|
|
3180
3179
|
const { P1, P2 } = quadToCubic([cx, cy], qc, p3);
|
|
@@ -3182,14 +3181,14 @@ function parseCubics(d) {
|
|
|
3182
3181
|
} else if (U === "T") {
|
|
3183
3182
|
const smooth = prevCmd.toUpperCase() === "Q" || prevCmd.toUpperCase() === "T";
|
|
3184
3183
|
const qc = smooth ? [2 * cx - pqx, 2 * cy - pqy] : [cx, cy];
|
|
3185
|
-
const p3 = [
|
|
3184
|
+
const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
|
|
3186
3185
|
pqx = qc[0];
|
|
3187
3186
|
pqy = qc[1];
|
|
3188
3187
|
const { P1, P2 } = quadToCubic([cx, cy], qc, p3);
|
|
3189
3188
|
push(P1, P2, p3);
|
|
3190
3189
|
} else if (U === "A") {
|
|
3191
3190
|
i += 5;
|
|
3192
|
-
pushLine(
|
|
3191
|
+
pushLine(num() + (rel ? cx : 0), num() + (rel ? cy : 0));
|
|
3193
3192
|
} else {
|
|
3194
3193
|
i++;
|
|
3195
3194
|
continue;
|
|
@@ -3519,20 +3518,20 @@ function transformPathData(d, m, decimals = 2) {
|
|
|
3519
3518
|
while ((match = TOKEN_RE.exec(d)) !== null) tokens.push(match[0]);
|
|
3520
3519
|
let out = "";
|
|
3521
3520
|
let i = 0;
|
|
3522
|
-
const
|
|
3521
|
+
const num = () => parseFloat(tokens[i++]);
|
|
3523
3522
|
while (i < tokens.length) {
|
|
3524
3523
|
const cmd = tokens[i++];
|
|
3525
3524
|
if (cmd === "M" || cmd === "L") {
|
|
3526
|
-
const [x, y] = apply(m,
|
|
3525
|
+
const [x, y] = apply(m, num(), num());
|
|
3527
3526
|
out += cmd + pack([x, y], decimals);
|
|
3528
3527
|
} else if (cmd === "C") {
|
|
3529
|
-
const [x1, y1] = apply(m,
|
|
3530
|
-
const [x2, y2] = apply(m,
|
|
3531
|
-
const [x, y] = apply(m,
|
|
3528
|
+
const [x1, y1] = apply(m, num(), num());
|
|
3529
|
+
const [x2, y2] = apply(m, num(), num());
|
|
3530
|
+
const [x, y] = apply(m, num(), num());
|
|
3532
3531
|
out += "C" + pack([x1, y1, x2, y2, x, y], decimals);
|
|
3533
3532
|
} else if (cmd === "Q") {
|
|
3534
|
-
const [x1, y1] = apply(m,
|
|
3535
|
-
const [x, y] = apply(m,
|
|
3533
|
+
const [x1, y1] = apply(m, num(), num());
|
|
3534
|
+
const [x, y] = apply(m, num(), num());
|
|
3536
3535
|
out += "Q" + pack([x1, y1, x, y], decimals);
|
|
3537
3536
|
} else if (cmd === "Z" || cmd === "z") {
|
|
3538
3537
|
out += "Z";
|
|
@@ -3561,7 +3560,7 @@ var TEXT_ATTR_KEYS = [
|
|
|
3561
3560
|
"stroke",
|
|
3562
3561
|
"strokeWidth",
|
|
3563
3562
|
"effects",
|
|
3564
|
-
|
|
3563
|
+
PX_TEXT_CONTENT_ATTR,
|
|
3565
3564
|
"xml:space"
|
|
3566
3565
|
];
|
|
3567
3566
|
var PAINT_STATIC_KEYS = [
|
|
@@ -3715,13 +3714,13 @@ function materializeGlyphTextHorizontal(node, opts) {
|
|
|
3715
3714
|
if (y !== void 0) pen.y = y;
|
|
3716
3715
|
pen.x += (_a3 = parseLen(el.dx)) != null ? _a3 : 0;
|
|
3717
3716
|
pen.y += (_b2 = parseLen(el.dy)) != null ? _b2 : 0;
|
|
3718
|
-
const content = str(el[
|
|
3717
|
+
const content = str(el[PX_TEXT_CONTENT_ATTR]);
|
|
3719
3718
|
if (content && !((_c2 = el.children) == null ? void 0 : _c2.length)) renderChars(content, s);
|
|
3720
3719
|
if (el.children) for (const ch of el.children) walk(ch, s);
|
|
3721
3720
|
};
|
|
3722
3721
|
const rootStyle = rootStyleOf(node);
|
|
3723
3722
|
if (node.children) for (const ch of node.children) walk(ch, rootStyle);
|
|
3724
|
-
const rootContent = str(node[
|
|
3723
|
+
const rootContent = str(node[PX_TEXT_CONTENT_ATTR]);
|
|
3725
3724
|
if (rootContent && !((_c = node.children) == null ? void 0 : _c.length)) renderChars(rootContent, rootStyle);
|
|
3726
3725
|
const anchor = str(node.textAnchor);
|
|
3727
3726
|
if (anchor === "middle" || anchor === "end") {
|
|
@@ -3739,7 +3738,7 @@ function collectAlongPathCells(node, glyphs, soleFont, warnings) {
|
|
|
3739
3738
|
const walk = (el, parentStyle) => {
|
|
3740
3739
|
var _a2, _b;
|
|
3741
3740
|
const s = resolveStyle(el, parentStyle);
|
|
3742
|
-
const content = str(el[
|
|
3741
|
+
const content = str(el[PX_TEXT_CONTENT_ATTR]);
|
|
3743
3742
|
if (content && !((_a2 = el.children) == null ? void 0 : _a2.length)) {
|
|
3744
3743
|
const gf = glyphFontFor(s, glyphs, soleFont, warnings);
|
|
3745
3744
|
if (gf) {
|
|
@@ -4033,60 +4032,6 @@ function reportDocumentDiagnostics(doc, where) {
|
|
|
4033
4032
|
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."
|
|
4034
4033
|
);
|
|
4035
4034
|
}
|
|
4036
|
-
function isScrollTimeline(config) {
|
|
4037
|
-
return (config == null ? void 0 : config.timelineSource) === "scroll";
|
|
4038
|
-
}
|
|
4039
|
-
function scrollTotalDurationMs(config) {
|
|
4040
|
-
const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : DEFAULT_DURATION_MS;
|
|
4041
|
-
const iterations = typeof (config == null ? void 0 : config.iterations) === "number" && config.iterations > 0 ? config.iterations : 1;
|
|
4042
|
-
return duration * iterations;
|
|
4043
|
-
}
|
|
4044
|
-
function scrollPhaseInterval(phase, subjectSize, scrollportSize) {
|
|
4045
|
-
const s = subjectSize, vp = scrollportSize;
|
|
4046
|
-
switch (phase) {
|
|
4047
|
-
case "cover":
|
|
4048
|
-
return [0, s + vp];
|
|
4049
|
-
case "entry":
|
|
4050
|
-
return [0, Math.min(s, vp)];
|
|
4051
|
-
case "contain":
|
|
4052
|
-
return [Math.min(s, vp), Math.max(s, vp)];
|
|
4053
|
-
case "exit":
|
|
4054
|
-
return [Math.max(s, vp), s + vp];
|
|
4055
|
-
case "entry-crossing":
|
|
4056
|
-
return [0, s];
|
|
4057
|
-
case "exit-crossing":
|
|
4058
|
-
return [vp, s + vp];
|
|
4059
|
-
}
|
|
4060
|
-
}
|
|
4061
|
-
var DEFAULT_PHASE = "cover";
|
|
4062
|
-
function resolveRangePointU(point, defaultFraction, subjectSize, scrollportSize) {
|
|
4063
|
-
var _a2;
|
|
4064
|
-
const [u0, u1] = scrollPhaseInterval((_a2 = point == null ? void 0 : point.phase) != null ? _a2 : DEFAULT_PHASE, subjectSize, scrollportSize);
|
|
4065
|
-
const fraction = typeof (point == null ? void 0 : point.fraction) === "number" ? point.fraction : defaultFraction;
|
|
4066
|
-
return u0 + fraction * (u1 - u0);
|
|
4067
|
-
}
|
|
4068
|
-
function scrollViewProgress(subjectStart, subjectSize, scrollportSize, range) {
|
|
4069
|
-
const u = scrollportSize - subjectStart;
|
|
4070
|
-
const uStart = resolveRangePointU(range == null ? void 0 : range.start, 0, subjectSize, scrollportSize);
|
|
4071
|
-
const uEnd = resolveRangePointU(range == null ? void 0 : range.end, 1, subjectSize, scrollportSize);
|
|
4072
|
-
if (uEnd <= uStart) return u >= uEnd ? 1 : 0;
|
|
4073
|
-
return clamp((u - uStart) / (uEnd - uStart), 0, 1);
|
|
4074
|
-
}
|
|
4075
|
-
function scrollOffsetProgress(offset, maxOffset, range) {
|
|
4076
|
-
var _a2, _b;
|
|
4077
|
-
const raw = maxOffset > 0 ? clamp(offset / maxOffset, 0, 1) : 1;
|
|
4078
|
-
const start = typeof ((_a2 = range == null ? void 0 : range.start) == null ? void 0 : _a2.fraction) === "number" ? range.start.fraction : 0;
|
|
4079
|
-
const end = typeof ((_b = range == null ? void 0 : range.end) == null ? void 0 : _b.fraction) === "number" ? range.end.fraction : 1;
|
|
4080
|
-
if (end <= start) return raw >= end ? 1 : 0;
|
|
4081
|
-
return clamp((raw - start) / (end - start), 0, 1);
|
|
4082
|
-
}
|
|
4083
|
-
function scrollResolveAxis(axis, writingMode) {
|
|
4084
|
-
const a = axis != null ? axis : "block";
|
|
4085
|
-
if (a === "x" || a === "y") return a;
|
|
4086
|
-
const vertical = !!writingMode && writingMode.startsWith("vertical");
|
|
4087
|
-
if (a === "inline") return vertical ? "y" : "x";
|
|
4088
|
-
return vertical ? "x" : "y";
|
|
4089
|
-
}
|
|
4090
4035
|
|
|
4091
4036
|
// ../svg-animator-core/dist/index.js
|
|
4092
4037
|
function applyTransformByEffect(node, fx, ctx) {
|
|
@@ -4470,11 +4415,11 @@ function buildStopChildren(stops, ctx) {
|
|
|
4470
4415
|
const loopFromSource = read.loop;
|
|
4471
4416
|
let stopCount = 0;
|
|
4472
4417
|
for (const kf of kfs) {
|
|
4473
|
-
const v =
|
|
4418
|
+
const v = keyframeValue(kf);
|
|
4474
4419
|
if (Array.isArray(v) && v.length > stopCount) stopCount = v.length;
|
|
4475
4420
|
}
|
|
4476
4421
|
if (!stopCount) return [];
|
|
4477
|
-
const firstKfValue =
|
|
4422
|
+
const firstKfValue = keyframeValue(kfs[0]);
|
|
4478
4423
|
const baselineStops = [];
|
|
4479
4424
|
for (let i = 0; i < stopCount; i++) {
|
|
4480
4425
|
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" };
|
|
@@ -4495,11 +4440,11 @@ function animatedStopNode(baseline, kfs, stopIdx, _ctx, loop) {
|
|
|
4495
4440
|
const offsetKfs = [];
|
|
4496
4441
|
let offsetVaries = false;
|
|
4497
4442
|
for (const kf of kfs) {
|
|
4498
|
-
const t =
|
|
4499
|
-
const arr =
|
|
4443
|
+
const t = keyframeTime(kf);
|
|
4444
|
+
const arr = keyframeValue(kf);
|
|
4500
4445
|
const sliced = (_a2 = arr == null ? void 0 : arr[stopIdx]) != null ? _a2 : prevDefinedStop(kfs, kfs.indexOf(kf), stopIdx);
|
|
4501
4446
|
if (!sliced) continue;
|
|
4502
|
-
const easing =
|
|
4447
|
+
const easing = keyframeEasing(kf);
|
|
4503
4448
|
const colorOut = { time: t, value: sliced.color };
|
|
4504
4449
|
if (easing !== void 0) colorOut.easing = easing;
|
|
4505
4450
|
colorKfs.push(colorOut);
|
|
@@ -4527,11 +4472,11 @@ function animatedStopNode(baseline, kfs, stopIdx, _ctx, loop) {
|
|
|
4527
4472
|
}
|
|
4528
4473
|
function prevDefinedStop(kfs, fromIdx, stopIdx) {
|
|
4529
4474
|
for (let i = fromIdx; i >= 0; i--) {
|
|
4530
|
-
const arr =
|
|
4475
|
+
const arr = keyframeValue(kfs[i]);
|
|
4531
4476
|
if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
|
|
4532
4477
|
}
|
|
4533
4478
|
for (let i = fromIdx + 1; i < kfs.length; i++) {
|
|
4534
|
-
const arr =
|
|
4479
|
+
const arr = keyframeValue(kfs[i]);
|
|
4535
4480
|
if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
|
|
4536
4481
|
}
|
|
4537
4482
|
return void 0;
|
|
@@ -5320,7 +5265,7 @@ function readScalarValues(r) {
|
|
|
5320
5265
|
if (r.kind === "static") return [r.value];
|
|
5321
5266
|
const out = [];
|
|
5322
5267
|
for (const kf of r.keyframes) {
|
|
5323
|
-
const v =
|
|
5268
|
+
const v = keyframeValue(kf);
|
|
5324
5269
|
if (typeof v === "number") out.push(v);
|
|
5325
5270
|
}
|
|
5326
5271
|
return out;
|
|
@@ -5331,9 +5276,9 @@ function computeAnimAttr(read, map) {
|
|
|
5331
5276
|
return {
|
|
5332
5277
|
kind: "animated",
|
|
5333
5278
|
keyframes: read.keyframes.map((kf) => ({
|
|
5334
|
-
time:
|
|
5335
|
-
value: map(
|
|
5336
|
-
easing:
|
|
5279
|
+
time: keyframeTime(kf),
|
|
5280
|
+
value: map(keyframeValue(kf)),
|
|
5281
|
+
easing: keyframeEasing(kf)
|
|
5337
5282
|
})),
|
|
5338
5283
|
loop: read.loop
|
|
5339
5284
|
};
|
|
@@ -5351,7 +5296,7 @@ function computeOpacityFromRange(rangeRead) {
|
|
|
5351
5296
|
let anyHide = false;
|
|
5352
5297
|
let allHide = true;
|
|
5353
5298
|
for (const kf of kfs) {
|
|
5354
|
-
if (hide(
|
|
5299
|
+
if (hide(keyframeValue(kf))) anyHide = true;
|
|
5355
5300
|
else allHide = false;
|
|
5356
5301
|
}
|
|
5357
5302
|
if (!anyHide) return void 0;
|
|
@@ -5361,10 +5306,10 @@ function computeOpacityFromRange(rangeRead) {
|
|
|
5361
5306
|
const kf = kfs[i];
|
|
5362
5307
|
const prevKf = i > 0 ? kfs[i - 1] : void 0;
|
|
5363
5308
|
const nextKf = i < kfs.length - 1 ? kfs[i + 1] : void 0;
|
|
5364
|
-
const t =
|
|
5365
|
-
const thisHide = hide(
|
|
5366
|
-
const prevHide = prevKf ? thisHide && hide(
|
|
5367
|
-
const nextHide = nextKf ? thisHide && hide(
|
|
5309
|
+
const t = keyframeTime(kf);
|
|
5310
|
+
const thisHide = hide(keyframeValue(kf));
|
|
5311
|
+
const prevHide = prevKf ? thisHide && hide(keyframeValue(prevKf)) : thisHide;
|
|
5312
|
+
const nextHide = nextKf ? thisHide && hide(keyframeValue(nextKf)) : thisHide;
|
|
5368
5313
|
if (prevHide && !nextHide) {
|
|
5369
5314
|
out.push({ time: t, value: 0 });
|
|
5370
5315
|
out.push({ time: t + OPACITY_STEP_MS, value: 1 });
|
|
@@ -5380,9 +5325,9 @@ function readRangeWithCrossings(raw) {
|
|
|
5380
5325
|
const r = readAnimatable(raw);
|
|
5381
5326
|
if (r.kind !== "animated") return r;
|
|
5382
5327
|
const kfs = r.keyframes.map((kf) => ({
|
|
5383
|
-
time:
|
|
5384
|
-
value:
|
|
5385
|
-
easing:
|
|
5328
|
+
time: keyframeTime(kf),
|
|
5329
|
+
value: keyframeValue(kf),
|
|
5330
|
+
easing: keyframeEasing(kf)
|
|
5386
5331
|
}));
|
|
5387
5332
|
const hasReverse = kfs.some((kf) => kf.value[0] > kf.value[1]);
|
|
5388
5333
|
if (!hasReverse) {
|
|
@@ -5508,7 +5453,7 @@ function shapeToPathD(node) {
|
|
|
5508
5453
|
}
|
|
5509
5454
|
return void 0;
|
|
5510
5455
|
}
|
|
5511
|
-
function
|
|
5456
|
+
function materializeNodeEffects(root) {
|
|
5512
5457
|
var _a2, _b;
|
|
5513
5458
|
const ctx = {
|
|
5514
5459
|
defs: [],
|
|
@@ -5521,7 +5466,7 @@ function applyPlayerEffects(root) {
|
|
|
5521
5466
|
// Resolved engine: `frames` ONLY when explicitly set; auto/waapi/unset →
|
|
5522
5467
|
// waapi (we're not 100% sure it's frames, and CSS/WAAPI need the inline form).
|
|
5523
5468
|
engine: resolveTimelineEngine((_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.engine),
|
|
5524
|
-
glyphs: (_b =
|
|
5469
|
+
glyphs: (_b = getDefinitions(root)) == null ? void 0 : _b.fonts
|
|
5525
5470
|
};
|
|
5526
5471
|
const working = clone(root);
|
|
5527
5472
|
indexById(working, ctx.idMap);
|
|
@@ -5603,11 +5548,11 @@ function buildOffsetPath(propAnim) {
|
|
|
5603
5548
|
if (propAnim.alongPathMode !== "offsetPath") return void 0;
|
|
5604
5549
|
const kfs = propAnim.keyframes;
|
|
5605
5550
|
if (!kfs || kfs.length < 2) return void 0;
|
|
5606
|
-
const first =
|
|
5551
|
+
const first = keyframeValue(kfs[0]);
|
|
5607
5552
|
const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
|
|
5608
5553
|
const points = [];
|
|
5609
5554
|
for (const kf of kfs) {
|
|
5610
|
-
const v =
|
|
5555
|
+
const v = keyframeValue(kf);
|
|
5611
5556
|
const tr = v == null ? void 0 : v.translate;
|
|
5612
5557
|
if (!tr || tr.length < 2) return void 0;
|
|
5613
5558
|
const parts = Object.keys(v);
|
|
@@ -5616,13 +5561,13 @@ function buildOffsetPath(propAnim) {
|
|
|
5616
5561
|
if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
|
|
5617
5562
|
points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
|
|
5618
5563
|
}
|
|
5619
|
-
if (!kfs.some((kf) =>
|
|
5564
|
+
if (!kfs.some((kf) => keyframeTangentIn(kf) || keyframeTangentOut(kf))) return void 0;
|
|
5620
5565
|
let d = "M" + fmt2(points[0][0]) + "," + fmt2(points[0][1]);
|
|
5621
5566
|
const segLens = [];
|
|
5622
5567
|
for (let i = 0; i < points.length - 1; i++) {
|
|
5623
5568
|
const p0 = points[i], p1 = points[i + 1];
|
|
5624
|
-
const to = (_b =
|
|
5625
|
-
const ti = (_c =
|
|
5569
|
+
const to = (_b = keyframeTangentOut(kfs[i])) != null ? _b : [0, 0];
|
|
5570
|
+
const ti = (_c = keyframeTangentIn(kfs[i + 1])) != null ? _c : [0, 0];
|
|
5626
5571
|
const c1 = [p0[0] + to[0], p0[1] + to[1]];
|
|
5627
5572
|
const c2 = [p1[0] + ti[0], p1[1] + ti[1]];
|
|
5628
5573
|
d += "C" + fmt2(c1[0]) + "," + fmt2(c1[1]) + "," + fmt2(c2[0]) + "," + fmt2(c2[1]) + "," + fmt2(p1[0]) + "," + fmt2(p1[1]);
|
|
@@ -5634,8 +5579,8 @@ function buildOffsetPath(propAnim) {
|
|
|
5634
5579
|
let cum = 0;
|
|
5635
5580
|
for (let i = 0; i < kfs.length; i++) {
|
|
5636
5581
|
if (i > 0) cum += segLens[i - 1];
|
|
5637
|
-
const out = { t:
|
|
5638
|
-
const e =
|
|
5582
|
+
const out = { t: keyframeTime(kfs[i]), v: cum / total };
|
|
5583
|
+
const e = keyframeEasing(kfs[i]);
|
|
5639
5584
|
if (e !== void 0) out.e = e;
|
|
5640
5585
|
distanceKfs.push(out);
|
|
5641
5586
|
}
|
|
@@ -5830,14 +5775,14 @@ function walkAndMaterialize2(node, idMap, animatedIds, genId3, defsCollector, ro
|
|
|
5830
5775
|
});
|
|
5831
5776
|
return changed ? __spreadProps2(__spreadValues2({}, node), { children: newChildren }) : node;
|
|
5832
5777
|
}
|
|
5833
|
-
function materializeAllInTree(doc, engine,
|
|
5778
|
+
function materializeAllInTree(doc, engine, options) {
|
|
5834
5779
|
var _a2, _b;
|
|
5835
|
-
let root =
|
|
5780
|
+
let root = materializeNodeEffects(doc).root;
|
|
5836
5781
|
root = materializeOffsetPathsInTree(root);
|
|
5837
|
-
const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b :
|
|
5782
|
+
const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b : PX_DEFAULT_DURATION_MS;
|
|
5838
5783
|
root = materializeInternalLoopsInTree(root, duration);
|
|
5839
5784
|
if (engine === PxTimelineEngine.native) {
|
|
5840
|
-
root = materializeMotionPathsInTree(root,
|
|
5785
|
+
root = materializeMotionPathsInTree(root, options == null ? void 0 : options.motionPath);
|
|
5841
5786
|
root = materializeAnimatedUseInstances(root);
|
|
5842
5787
|
root = pruneUnreferencedDefs(root);
|
|
5843
5788
|
}
|
|
@@ -5917,16 +5862,16 @@ function cancelFrame(handle) {
|
|
|
5917
5862
|
}
|
|
5918
5863
|
g.clearTimeout(handle);
|
|
5919
5864
|
}
|
|
5920
|
-
function
|
|
5865
|
+
function createAdapterAnimator(doc, adapter, callbacks) {
|
|
5921
5866
|
var _a2;
|
|
5922
5867
|
const config = getAnimatorConfig(doc) || {};
|
|
5923
|
-
const bindings =
|
|
5868
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.js);
|
|
5924
5869
|
const _iterations = config.iterations;
|
|
5925
5870
|
let iterations = 1;
|
|
5926
5871
|
if (typeof _iterations === "number") iterations = _iterations || 1;
|
|
5927
5872
|
if (_iterations === "infinite") iterations = Infinity;
|
|
5928
5873
|
if (iterations < 1) iterations = 1;
|
|
5929
|
-
const duration = +(config.duration ||
|
|
5874
|
+
const duration = +(config.duration || PX_DEFAULT_DURATION_MS);
|
|
5930
5875
|
const totalDuration = duration && iterations ? duration * (iterations === Infinity ? Infinity : iterations) : duration ? (iterations != null ? iterations : 1) * duration : 0;
|
|
5931
5876
|
const direction = config.direction || "normal";
|
|
5932
5877
|
const fill = (_a2 = config.fill) != null ? _a2 : "forwards";
|
|
@@ -6300,9 +6245,9 @@ function mergeAnimatorConfig(base, patch) {
|
|
|
6300
6245
|
}
|
|
6301
6246
|
return { config: out, warnings };
|
|
6302
6247
|
}
|
|
6303
|
-
function applyAnimatorConfig(doc, patch,
|
|
6248
|
+
function applyAnimatorConfig(doc, patch, options) {
|
|
6304
6249
|
var _a2, _b;
|
|
6305
|
-
const reset = !!(
|
|
6250
|
+
const reset = !!(options == null ? void 0 : options.resetTimeline);
|
|
6306
6251
|
if (!doc || (patch === void 0 || !reset && (patch === null || !isPlainObject(patch) || !Object.keys(patch).length))) {
|
|
6307
6252
|
return { doc, warnings: [] };
|
|
6308
6253
|
}
|
|
@@ -6334,6 +6279,62 @@ function applyAnimatorConfig(doc, patch, opts) {
|
|
|
6334
6279
|
return { doc: __spreadProps2(__spreadValues2({}, anyDoc), { animator: merged.config }), warnings };
|
|
6335
6280
|
}
|
|
6336
6281
|
|
|
6282
|
+
// ../svg-animator-core/dist/internal.js
|
|
6283
|
+
function isScrollTimeline(config) {
|
|
6284
|
+
return (config == null ? void 0 : config.timelineSource) === "scroll";
|
|
6285
|
+
}
|
|
6286
|
+
function scrollTotalDurationMs(config) {
|
|
6287
|
+
const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : PX_DEFAULT_DURATION_MS;
|
|
6288
|
+
const iterations = typeof (config == null ? void 0 : config.iterations) === "number" && config.iterations > 0 ? config.iterations : 1;
|
|
6289
|
+
return duration * iterations;
|
|
6290
|
+
}
|
|
6291
|
+
function scrollPhaseInterval(phase, subjectSize, scrollportSize) {
|
|
6292
|
+
const s = subjectSize, vp = scrollportSize;
|
|
6293
|
+
switch (phase) {
|
|
6294
|
+
case "cover":
|
|
6295
|
+
return [0, s + vp];
|
|
6296
|
+
case "entry":
|
|
6297
|
+
return [0, Math.min(s, vp)];
|
|
6298
|
+
case "contain":
|
|
6299
|
+
return [Math.min(s, vp), Math.max(s, vp)];
|
|
6300
|
+
case "exit":
|
|
6301
|
+
return [Math.max(s, vp), s + vp];
|
|
6302
|
+
case "entry-crossing":
|
|
6303
|
+
return [0, s];
|
|
6304
|
+
case "exit-crossing":
|
|
6305
|
+
return [vp, s + vp];
|
|
6306
|
+
}
|
|
6307
|
+
}
|
|
6308
|
+
var DEFAULT_PHASE = "cover";
|
|
6309
|
+
function resolveRangePointU(point, defaultFraction, subjectSize, scrollportSize) {
|
|
6310
|
+
var _a2;
|
|
6311
|
+
const [u0, u1] = scrollPhaseInterval((_a2 = point == null ? void 0 : point.phase) != null ? _a2 : DEFAULT_PHASE, subjectSize, scrollportSize);
|
|
6312
|
+
const fraction = typeof (point == null ? void 0 : point.fraction) === "number" ? point.fraction : defaultFraction;
|
|
6313
|
+
return u0 + fraction * (u1 - u0);
|
|
6314
|
+
}
|
|
6315
|
+
function scrollViewProgress(subjectStart, subjectSize, scrollportSize, range) {
|
|
6316
|
+
const u = scrollportSize - subjectStart;
|
|
6317
|
+
const uStart = resolveRangePointU(range == null ? void 0 : range.start, 0, subjectSize, scrollportSize);
|
|
6318
|
+
const uEnd = resolveRangePointU(range == null ? void 0 : range.end, 1, subjectSize, scrollportSize);
|
|
6319
|
+
if (uEnd <= uStart) return u >= uEnd ? 1 : 0;
|
|
6320
|
+
return clamp((u - uStart) / (uEnd - uStart), 0, 1);
|
|
6321
|
+
}
|
|
6322
|
+
function scrollOffsetProgress(offset, maxOffset, range) {
|
|
6323
|
+
var _a2, _b;
|
|
6324
|
+
const raw = maxOffset > 0 ? clamp(offset / maxOffset, 0, 1) : 1;
|
|
6325
|
+
const start = typeof ((_a2 = range == null ? void 0 : range.start) == null ? void 0 : _a2.fraction) === "number" ? range.start.fraction : 0;
|
|
6326
|
+
const end = typeof ((_b = range == null ? void 0 : range.end) == null ? void 0 : _b.fraction) === "number" ? range.end.fraction : 1;
|
|
6327
|
+
if (end <= start) return raw >= end ? 1 : 0;
|
|
6328
|
+
return clamp((raw - start) / (end - start), 0, 1);
|
|
6329
|
+
}
|
|
6330
|
+
function scrollResolveAxis(axis, writingMode) {
|
|
6331
|
+
const a = axis != null ? axis : "block";
|
|
6332
|
+
if (a === "x" || a === "y") return a;
|
|
6333
|
+
const vertical = !!writingMode && writingMode.startsWith("vertical");
|
|
6334
|
+
if (a === "inline") return vertical ? "y" : "x";
|
|
6335
|
+
return vertical ? "x" : "y";
|
|
6336
|
+
}
|
|
6337
|
+
|
|
6337
6338
|
// src/shared/PxAnimatorCallbacks.ts
|
|
6338
6339
|
function toEngineCallbacks(inline) {
|
|
6339
6340
|
const { onPlay, onPause, onCancel, onFinish, onRemove, onStop, onWarn, onError, muteWarn, muteError } = inline != null ? inline : {};
|
|
@@ -6358,13 +6359,13 @@ function asThrownError(e) {
|
|
|
6358
6359
|
}
|
|
6359
6360
|
|
|
6360
6361
|
// src/triggers/PxAnimatorTriggers.ts
|
|
6361
|
-
function setupAnimationTriggers(api,
|
|
6362
|
+
function setupAnimationTriggers(api, trigger, diag) {
|
|
6362
6363
|
const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
|
|
6363
6364
|
const cleanups = [];
|
|
6364
6365
|
const dispose = () => {
|
|
6365
6366
|
for (const undo of cleanups.splice(0)) undo();
|
|
6366
6367
|
};
|
|
6367
|
-
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(
|
|
6368
|
+
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
|
|
6368
6369
|
const root = api.getRootElement();
|
|
6369
6370
|
if (!root) {
|
|
6370
6371
|
report.warn(PxDiagnosticKind.host, "setupAnimationTriggers: No root element found for animation.");
|
|
@@ -6491,7 +6492,7 @@ function createFrameLoopAnimator(doc, adapter, callbacks, rootElement) {
|
|
|
6491
6492
|
diag.warn(PxDiagnosticKind.host, "createFrameLoopAnimator: No root element provided");
|
|
6492
6493
|
}
|
|
6493
6494
|
}
|
|
6494
|
-
const basicApi =
|
|
6495
|
+
const basicApi = createAdapterAnimator(
|
|
6495
6496
|
doc,
|
|
6496
6497
|
adapter || createDomAdapter(rootElement, diag),
|
|
6497
6498
|
callbacks
|
|
@@ -6531,7 +6532,7 @@ function createDomAdapter(rootElement, diag) {
|
|
|
6531
6532
|
const element = elements[i];
|
|
6532
6533
|
const effectiveAttrName = attrName === "transform" && element.tagName === "pattern" ? "patternTransform" : attrName;
|
|
6533
6534
|
element.setAttribute(effectiveAttrName, value);
|
|
6534
|
-
if (
|
|
6535
|
+
if (PX_STYLE_ATTR_NAMES.has(attrName)) {
|
|
6535
6536
|
element.style[attrName] = value;
|
|
6536
6537
|
}
|
|
6537
6538
|
}
|
|
@@ -6542,20 +6543,20 @@ function createDomAdapter(rootElement, diag) {
|
|
|
6542
6543
|
|
|
6543
6544
|
// src/engines/PxAnimatorWebApi.ts
|
|
6544
6545
|
function createCssKf(kf, t, propName, unsupportedSet) {
|
|
6545
|
-
let value =
|
|
6546
|
-
const e =
|
|
6546
|
+
let value = keyframeValue(kf);
|
|
6547
|
+
const e = keyframeEasing(kf);
|
|
6547
6548
|
const cssKf = {
|
|
6548
6549
|
offset: t,
|
|
6549
6550
|
easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
|
|
6550
6551
|
};
|
|
6551
6552
|
let cssValue;
|
|
6552
6553
|
let cssKey = propName;
|
|
6553
|
-
if (
|
|
6554
|
+
if (PX_COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
|
|
6554
6555
|
cssValue = toRGBA(value);
|
|
6555
6556
|
} else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
|
|
6556
6557
|
cssValue = composeTransformParts(value, { withUnits: true });
|
|
6557
6558
|
cssKey = "transform";
|
|
6558
|
-
} else if (
|
|
6559
|
+
} else if (PX_TRANSFORM_FN_NAMES.has(propName)) {
|
|
6559
6560
|
if (Array.isArray(value)) {
|
|
6560
6561
|
if (propName === "translate") value = value.map((v) => v + "px");
|
|
6561
6562
|
value = value.join(",");
|
|
@@ -6566,7 +6567,7 @@ function createCssKf(kf, t, propName, unsupportedSet) {
|
|
|
6566
6567
|
} else if (propName === "d") {
|
|
6567
6568
|
const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
|
|
6568
6569
|
cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
|
|
6569
|
-
} else if (
|
|
6570
|
+
} else if (PX_PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
|
|
6570
6571
|
cssValue = value * 100 + "%";
|
|
6571
6572
|
} else {
|
|
6572
6573
|
cssValue = "" + value;
|
|
@@ -6649,7 +6650,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
|
|
|
6649
6650
|
diag.warn(PxDiagnosticKind.host, "createWebApiAnimator: No root element provided");
|
|
6650
6651
|
}
|
|
6651
6652
|
}
|
|
6652
|
-
const bindings =
|
|
6653
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.native);
|
|
6653
6654
|
const animations = [];
|
|
6654
6655
|
const _iterations = config.iterations;
|
|
6655
6656
|
let iterations;
|
|
@@ -7131,7 +7132,7 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
|
|
|
7131
7132
|
unpin = () => {
|
|
7132
7133
|
};
|
|
7133
7134
|
}
|
|
7134
|
-
const api = (animatorConfig.engine !==
|
|
7135
|
+
const api = (animatorConfig.engine !== PxTimelineEngineSetting.js ? createWebApiAnimator(doc, cb, rootElement, isNativeForced(animatorConfig.engine)) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
|
|
7135
7136
|
const subject = ((_a2 = api.getRootElement) == null ? void 0 : _a2.call(api)) || rootElement;
|
|
7136
7137
|
if (subject) {
|
|
7137
7138
|
unpin = applyScrollPin(subject, animatorConfig.scroll);
|
|
@@ -7157,7 +7158,7 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
|
|
|
7157
7158
|
});
|
|
7158
7159
|
}
|
|
7159
7160
|
return finaliseAnimator(animatorConfig, callbacks, (cb) => {
|
|
7160
|
-
if (animatorConfig.engine ===
|
|
7161
|
+
if (animatorConfig.engine === PxTimelineEngineSetting.js) {
|
|
7161
7162
|
return createFrameLoopAnimator(doc, adapter, cb, rootElement);
|
|
7162
7163
|
}
|
|
7163
7164
|
return createWebApiAnimator(
|
|
@@ -7172,7 +7173,7 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
|
|
|
7172
7173
|
// src/dom/PxAnimatorDOM.ts
|
|
7173
7174
|
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
7174
7175
|
function createElement(tagName, normalizedProps, style, children, textContent, diag) {
|
|
7175
|
-
if (
|
|
7176
|
+
if (PX_DISALLOWED_SVG_TAGS_LOWER.has(tagName.toLowerCase())) {
|
|
7176
7177
|
(diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document, "SVG tag blocked (dangerous): " + tagName);
|
|
7177
7178
|
return null;
|
|
7178
7179
|
}
|
|
@@ -7180,7 +7181,7 @@ function createElement(tagName, normalizedProps, style, children, textContent, d
|
|
|
7180
7181
|
for (const propName in normalizedProps) {
|
|
7181
7182
|
const sanitized = sanitizeAttributeValue(propName, normalizedProps[propName]);
|
|
7182
7183
|
if (sanitized === void 0) continue;
|
|
7183
|
-
if (
|
|
7184
|
+
if (PX_CSS_ONLY_STYLE_PROPS.has(propName)) {
|
|
7184
7185
|
element.style[propName] = String(sanitized);
|
|
7185
7186
|
continue;
|
|
7186
7187
|
}
|
|
@@ -7205,7 +7206,7 @@ function renderNode(node, defs, diag) {
|
|
|
7205
7206
|
const _a2 = node, { type, children, style } = _a2, props = __objRest(_a2, ["type", "children", "style"]);
|
|
7206
7207
|
const domType = props.domType;
|
|
7207
7208
|
if (domType !== void 0) delete props.domType;
|
|
7208
|
-
const nodeDefs =
|
|
7209
|
+
const nodeDefs = getDefinitions(node) || defs;
|
|
7209
7210
|
const resolvedStyle = style;
|
|
7210
7211
|
let childElements;
|
|
7211
7212
|
if (children) {
|
|
@@ -7219,19 +7220,16 @@ function renderNode(node, defs, diag) {
|
|
|
7219
7220
|
}
|
|
7220
7221
|
const element = createElement(
|
|
7221
7222
|
type || "g",
|
|
7222
|
-
|
|
7223
|
+
toDomProps(props),
|
|
7223
7224
|
resolvedStyle,
|
|
7224
7225
|
childElements,
|
|
7225
|
-
props[
|
|
7226
|
+
props[PX_TEXT_CONTENT_ATTR],
|
|
7226
7227
|
diag
|
|
7227
7228
|
);
|
|
7228
7229
|
if (element && domType !== void 0) element.setAttribute("type", domType);
|
|
7229
7230
|
return element;
|
|
7230
7231
|
}
|
|
7231
7232
|
|
|
7232
|
-
// src/shared/PxAnimatorKeys.ts
|
|
7233
|
-
var PX_ANIMATOR_DOC_KEY = "doc";
|
|
7234
|
-
|
|
7235
7233
|
// src/animator/PxAnimator.ts
|
|
7236
7234
|
function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
|
|
7237
7235
|
return bindWithEngineChoice(doc, adapter, callbacks, rootElement);
|
|
@@ -7242,7 +7240,7 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, re
|
|
|
7242
7240
|
for (const w of effectsWarnings) diag.warn(PxDiagnosticKind.document, "effects shape: " + w);
|
|
7243
7241
|
reportDocumentDiagnostics(doc, "[PxAnimator] createAnimator");
|
|
7244
7242
|
if (patch !== void 0 || resetTimeline) {
|
|
7245
|
-
const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, {
|
|
7243
|
+
const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, { resetTimeline: !!resetTimeline });
|
|
7246
7244
|
for (const w of patched.warnings) diag.warn(PxDiagnosticKind.usage, "timeline override: " + w);
|
|
7247
7245
|
doc = patched.doc;
|
|
7248
7246
|
}
|
|
@@ -7323,7 +7321,7 @@ function createAnimator(options) {
|
|
|
7323
7321
|
} else {
|
|
7324
7322
|
fetch(src).then((res) => res.json()).then((json) => {
|
|
7325
7323
|
if (destroyed) return;
|
|
7326
|
-
if (
|
|
7324
|
+
if (isPxDocument(json)) build(json);
|
|
7327
7325
|
else failed(PxDiagnosticKind.document, 'createAnimator: invalid animation document format at "' + src + '"');
|
|
7328
7326
|
}).catch((err) => {
|
|
7329
7327
|
var _a2;
|
|
@@ -7378,23 +7376,22 @@ function loadTagAnimators(options) {
|
|
|
7378
7376
|
}
|
|
7379
7377
|
// Annotate the CommonJS export names for ESM import in node:
|
|
7380
7378
|
0 && (module.exports = {
|
|
7381
|
-
PX_ANIMATOR_DOC_KEY,
|
|
7382
7379
|
PxAnimatorConfigSchema,
|
|
7383
|
-
|
|
7380
|
+
PxDefinitionsSchema,
|
|
7384
7381
|
PxDiagnosticKind,
|
|
7385
|
-
|
|
7382
|
+
PxNodeBaseSchema,
|
|
7386
7383
|
PxScrollSchema,
|
|
7387
|
-
|
|
7388
|
-
|
|
7384
|
+
PxSvgNodeRootSchema,
|
|
7385
|
+
PxTimelineEngineSetting,
|
|
7389
7386
|
PxTriggerSchema,
|
|
7387
|
+
createAdapterAnimator,
|
|
7390
7388
|
createAnimator,
|
|
7391
|
-
createBasicFrameLoopAnimator,
|
|
7392
7389
|
generateNewIds,
|
|
7393
|
-
getNormalizedProps,
|
|
7394
7390
|
loadTagAnimators,
|
|
7395
7391
|
px,
|
|
7396
7392
|
renderNode,
|
|
7397
7393
|
setupAnimationTriggers,
|
|
7394
|
+
toDomProps,
|
|
7398
7395
|
validateDocument
|
|
7399
7396
|
});
|
|
7400
7397
|
//# sourceMappingURL=index.cjs.map
|