@pixodesk/svg-animator-web 1.0.40 → 1.0.43
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 +299 -270
- 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 +294 -262
- 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 +79 -78
- 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 +103 -101
- 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 +179 -177
- package/dist/pixodesk-svg-animator.umd.js.map +1 -1
- package/dist/pixodesk-svg-animator.umd.min.js +1 -1
- package/mangle-reserved.json +2 -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-BOTZI36B.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) {
|
|
@@ -3922,32 +3921,34 @@ var PxDiagnosticKind = {
|
|
|
3922
3921
|
/** The player failed where it did not expect to — report it to us. */
|
|
3923
3922
|
internal: "internal"
|
|
3924
3923
|
};
|
|
3925
|
-
|
|
3926
|
-
|
|
3924
|
+
var DOCS_URL = "https://github.com/pixodesk/pixodesk-svg-animator/blob/main/docs/diagnostics.md";
|
|
3925
|
+
function codeLine(code) {
|
|
3926
|
+
return "PX" + code + " " + DOCS_URL + "#px" + code;
|
|
3927
|
+
}
|
|
3928
|
+
function errorIn(data) {
|
|
3929
|
+
return data.find((d) => d instanceof Error);
|
|
3927
3930
|
}
|
|
3928
3931
|
function createDiagnostics(config, prefix) {
|
|
3929
3932
|
const tag = prefix ? prefix + " " : "";
|
|
3930
3933
|
return {
|
|
3931
|
-
warn: (kind,
|
|
3934
|
+
warn: (kind, code, ...data) => {
|
|
3935
|
+
const message = codeLine(code);
|
|
3932
3936
|
if (config == null ? void 0 : config.onWarn) {
|
|
3933
|
-
config.onWarn({ kind,
|
|
3937
|
+
config.onWarn({ code, kind, data, message });
|
|
3934
3938
|
return;
|
|
3935
3939
|
}
|
|
3936
3940
|
if (config == null ? void 0 : config.muteWarn) return;
|
|
3937
|
-
|
|
3938
|
-
if (detail === void 0) console.warn(line);
|
|
3939
|
-
else console.warn(line, detail);
|
|
3941
|
+
console.warn(tag + kind + " " + message, ...data);
|
|
3940
3942
|
},
|
|
3941
|
-
error: (kind,
|
|
3942
|
-
const
|
|
3943
|
+
error: (kind, code, ...data) => {
|
|
3944
|
+
const message = codeLine(code);
|
|
3945
|
+
const error = errorIn(data);
|
|
3943
3946
|
if (config == null ? void 0 : config.onError) {
|
|
3944
|
-
config.onError({ kind,
|
|
3947
|
+
config.onError({ code, kind, data, message, error });
|
|
3945
3948
|
return;
|
|
3946
3949
|
}
|
|
3947
3950
|
if (config == null ? void 0 : config.muteError) return;
|
|
3948
|
-
|
|
3949
|
-
if (detail === void 0) console.error(line);
|
|
3950
|
-
else console.error(line, detail);
|
|
3951
|
+
console.error(tag + kind + " " + message, ...data);
|
|
3951
3952
|
}
|
|
3952
3953
|
};
|
|
3953
3954
|
}
|
|
@@ -3968,60 +3969,6 @@ function reportDocumentDiagnostics(doc, where) {
|
|
|
3968
3969
|
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
3970
|
);
|
|
3970
3971
|
}
|
|
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
3972
|
|
|
4026
3973
|
// ../svg-animator-core/dist/index.js
|
|
4027
3974
|
function applyTransformByEffect(node, fx, ctx) {
|
|
@@ -4405,11 +4352,11 @@ function buildStopChildren(stops, ctx) {
|
|
|
4405
4352
|
const loopFromSource = read.loop;
|
|
4406
4353
|
let stopCount = 0;
|
|
4407
4354
|
for (const kf of kfs) {
|
|
4408
|
-
const v =
|
|
4355
|
+
const v = keyframeValue(kf);
|
|
4409
4356
|
if (Array.isArray(v) && v.length > stopCount) stopCount = v.length;
|
|
4410
4357
|
}
|
|
4411
4358
|
if (!stopCount) return [];
|
|
4412
|
-
const firstKfValue =
|
|
4359
|
+
const firstKfValue = keyframeValue(kfs[0]);
|
|
4413
4360
|
const baselineStops = [];
|
|
4414
4361
|
for (let i = 0; i < stopCount; i++) {
|
|
4415
4362
|
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 +4377,11 @@ function animatedStopNode(baseline, kfs, stopIdx, _ctx, loop) {
|
|
|
4430
4377
|
const offsetKfs = [];
|
|
4431
4378
|
let offsetVaries = false;
|
|
4432
4379
|
for (const kf of kfs) {
|
|
4433
|
-
const t =
|
|
4434
|
-
const arr =
|
|
4380
|
+
const t = keyframeTime(kf);
|
|
4381
|
+
const arr = keyframeValue(kf);
|
|
4435
4382
|
const sliced = (_a2 = arr == null ? void 0 : arr[stopIdx]) != null ? _a2 : prevDefinedStop(kfs, kfs.indexOf(kf), stopIdx);
|
|
4436
4383
|
if (!sliced) continue;
|
|
4437
|
-
const easing =
|
|
4384
|
+
const easing = keyframeEasing(kf);
|
|
4438
4385
|
const colorOut = { time: t, value: sliced.color };
|
|
4439
4386
|
if (easing !== void 0) colorOut.easing = easing;
|
|
4440
4387
|
colorKfs.push(colorOut);
|
|
@@ -4462,11 +4409,11 @@ function animatedStopNode(baseline, kfs, stopIdx, _ctx, loop) {
|
|
|
4462
4409
|
}
|
|
4463
4410
|
function prevDefinedStop(kfs, fromIdx, stopIdx) {
|
|
4464
4411
|
for (let i = fromIdx; i >= 0; i--) {
|
|
4465
|
-
const arr =
|
|
4412
|
+
const arr = keyframeValue(kfs[i]);
|
|
4466
4413
|
if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
|
|
4467
4414
|
}
|
|
4468
4415
|
for (let i = fromIdx + 1; i < kfs.length; i++) {
|
|
4469
|
-
const arr =
|
|
4416
|
+
const arr = keyframeValue(kfs[i]);
|
|
4470
4417
|
if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
|
|
4471
4418
|
}
|
|
4472
4419
|
return void 0;
|
|
@@ -5255,7 +5202,7 @@ function readScalarValues(r) {
|
|
|
5255
5202
|
if (r.kind === "static") return [r.value];
|
|
5256
5203
|
const out = [];
|
|
5257
5204
|
for (const kf of r.keyframes) {
|
|
5258
|
-
const v =
|
|
5205
|
+
const v = keyframeValue(kf);
|
|
5259
5206
|
if (typeof v === "number") out.push(v);
|
|
5260
5207
|
}
|
|
5261
5208
|
return out;
|
|
@@ -5266,9 +5213,9 @@ function computeAnimAttr(read, map) {
|
|
|
5266
5213
|
return {
|
|
5267
5214
|
kind: "animated",
|
|
5268
5215
|
keyframes: read.keyframes.map((kf) => ({
|
|
5269
|
-
time:
|
|
5270
|
-
value: map(
|
|
5271
|
-
easing:
|
|
5216
|
+
time: keyframeTime(kf),
|
|
5217
|
+
value: map(keyframeValue(kf)),
|
|
5218
|
+
easing: keyframeEasing(kf)
|
|
5272
5219
|
})),
|
|
5273
5220
|
loop: read.loop
|
|
5274
5221
|
};
|
|
@@ -5286,7 +5233,7 @@ function computeOpacityFromRange(rangeRead) {
|
|
|
5286
5233
|
let anyHide = false;
|
|
5287
5234
|
let allHide = true;
|
|
5288
5235
|
for (const kf of kfs) {
|
|
5289
|
-
if (hide(
|
|
5236
|
+
if (hide(keyframeValue(kf))) anyHide = true;
|
|
5290
5237
|
else allHide = false;
|
|
5291
5238
|
}
|
|
5292
5239
|
if (!anyHide) return void 0;
|
|
@@ -5296,10 +5243,10 @@ function computeOpacityFromRange(rangeRead) {
|
|
|
5296
5243
|
const kf = kfs[i];
|
|
5297
5244
|
const prevKf = i > 0 ? kfs[i - 1] : void 0;
|
|
5298
5245
|
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(
|
|
5246
|
+
const t = keyframeTime(kf);
|
|
5247
|
+
const thisHide = hide(keyframeValue(kf));
|
|
5248
|
+
const prevHide = prevKf ? thisHide && hide(keyframeValue(prevKf)) : thisHide;
|
|
5249
|
+
const nextHide = nextKf ? thisHide && hide(keyframeValue(nextKf)) : thisHide;
|
|
5303
5250
|
if (prevHide && !nextHide) {
|
|
5304
5251
|
out.push({ time: t, value: 0 });
|
|
5305
5252
|
out.push({ time: t + OPACITY_STEP_MS, value: 1 });
|
|
@@ -5315,9 +5262,9 @@ function readRangeWithCrossings(raw) {
|
|
|
5315
5262
|
const r = readAnimatable(raw);
|
|
5316
5263
|
if (r.kind !== "animated") return r;
|
|
5317
5264
|
const kfs = r.keyframes.map((kf) => ({
|
|
5318
|
-
time:
|
|
5319
|
-
value:
|
|
5320
|
-
easing:
|
|
5265
|
+
time: keyframeTime(kf),
|
|
5266
|
+
value: keyframeValue(kf),
|
|
5267
|
+
easing: keyframeEasing(kf)
|
|
5321
5268
|
}));
|
|
5322
5269
|
const hasReverse = kfs.some((kf) => kf.value[0] > kf.value[1]);
|
|
5323
5270
|
if (!hasReverse) {
|
|
@@ -5443,7 +5390,7 @@ function shapeToPathD(node) {
|
|
|
5443
5390
|
}
|
|
5444
5391
|
return void 0;
|
|
5445
5392
|
}
|
|
5446
|
-
function
|
|
5393
|
+
function materializeNodeEffects(root) {
|
|
5447
5394
|
var _a2, _b;
|
|
5448
5395
|
const ctx = {
|
|
5449
5396
|
defs: [],
|
|
@@ -5456,7 +5403,7 @@ function applyPlayerEffects(root) {
|
|
|
5456
5403
|
// Resolved engine: `frames` ONLY when explicitly set; auto/waapi/unset →
|
|
5457
5404
|
// waapi (we're not 100% sure it's frames, and CSS/WAAPI need the inline form).
|
|
5458
5405
|
engine: resolveTimelineEngine((_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.engine),
|
|
5459
|
-
glyphs: (_b =
|
|
5406
|
+
glyphs: (_b = getDefinitions(root)) == null ? void 0 : _b.fonts
|
|
5460
5407
|
};
|
|
5461
5408
|
const working = clone(root);
|
|
5462
5409
|
indexById(working, ctx.idMap);
|
|
@@ -5538,11 +5485,11 @@ function buildOffsetPath(propAnim) {
|
|
|
5538
5485
|
if (propAnim.alongPathMode !== "offsetPath") return void 0;
|
|
5539
5486
|
const kfs = propAnim.keyframes;
|
|
5540
5487
|
if (!kfs || kfs.length < 2) return void 0;
|
|
5541
|
-
const first =
|
|
5488
|
+
const first = keyframeValue(kfs[0]);
|
|
5542
5489
|
const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
|
|
5543
5490
|
const points = [];
|
|
5544
5491
|
for (const kf of kfs) {
|
|
5545
|
-
const v =
|
|
5492
|
+
const v = keyframeValue(kf);
|
|
5546
5493
|
const tr = v == null ? void 0 : v.translate;
|
|
5547
5494
|
if (!tr || tr.length < 2) return void 0;
|
|
5548
5495
|
const parts = Object.keys(v);
|
|
@@ -5551,13 +5498,13 @@ function buildOffsetPath(propAnim) {
|
|
|
5551
5498
|
if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
|
|
5552
5499
|
points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
|
|
5553
5500
|
}
|
|
5554
|
-
if (!kfs.some((kf) =>
|
|
5501
|
+
if (!kfs.some((kf) => keyframeTangentIn(kf) || keyframeTangentOut(kf))) return void 0;
|
|
5555
5502
|
let d = "M" + fmt2(points[0][0]) + "," + fmt2(points[0][1]);
|
|
5556
5503
|
const segLens = [];
|
|
5557
5504
|
for (let i = 0; i < points.length - 1; i++) {
|
|
5558
5505
|
const p0 = points[i], p1 = points[i + 1];
|
|
5559
|
-
const to = (_b =
|
|
5560
|
-
const ti = (_c =
|
|
5506
|
+
const to = (_b = keyframeTangentOut(kfs[i])) != null ? _b : [0, 0];
|
|
5507
|
+
const ti = (_c = keyframeTangentIn(kfs[i + 1])) != null ? _c : [0, 0];
|
|
5561
5508
|
const c1 = [p0[0] + to[0], p0[1] + to[1]];
|
|
5562
5509
|
const c2 = [p1[0] + ti[0], p1[1] + ti[1]];
|
|
5563
5510
|
d += "C" + fmt2(c1[0]) + "," + fmt2(c1[1]) + "," + fmt2(c2[0]) + "," + fmt2(c2[1]) + "," + fmt2(p1[0]) + "," + fmt2(p1[1]);
|
|
@@ -5569,8 +5516,8 @@ function buildOffsetPath(propAnim) {
|
|
|
5569
5516
|
let cum = 0;
|
|
5570
5517
|
for (let i = 0; i < kfs.length; i++) {
|
|
5571
5518
|
if (i > 0) cum += segLens[i - 1];
|
|
5572
|
-
const out = { t:
|
|
5573
|
-
const e =
|
|
5519
|
+
const out = { t: keyframeTime(kfs[i]), v: cum / total };
|
|
5520
|
+
const e = keyframeEasing(kfs[i]);
|
|
5574
5521
|
if (e !== void 0) out.e = e;
|
|
5575
5522
|
distanceKfs.push(out);
|
|
5576
5523
|
}
|
|
@@ -5765,14 +5712,14 @@ function walkAndMaterialize2(node, idMap, animatedIds, genId3, defsCollector, ro
|
|
|
5765
5712
|
});
|
|
5766
5713
|
return changed ? __spreadProps2(__spreadValues2({}, node), { children: newChildren }) : node;
|
|
5767
5714
|
}
|
|
5768
|
-
function materializeAllInTree(doc, engine,
|
|
5715
|
+
function materializeAllInTree(doc, engine, options) {
|
|
5769
5716
|
var _a2, _b;
|
|
5770
|
-
let root =
|
|
5717
|
+
let root = materializeNodeEffects(doc).root;
|
|
5771
5718
|
root = materializeOffsetPathsInTree(root);
|
|
5772
|
-
const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b :
|
|
5719
|
+
const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b : PX_DEFAULT_DURATION_MS;
|
|
5773
5720
|
root = materializeInternalLoopsInTree(root, duration);
|
|
5774
5721
|
if (engine === PxTimelineEngine.native) {
|
|
5775
|
-
root = materializeMotionPathsInTree(root,
|
|
5722
|
+
root = materializeMotionPathsInTree(root, options == null ? void 0 : options.motionPath);
|
|
5776
5723
|
root = materializeAnimatedUseInstances(root);
|
|
5777
5724
|
root = pruneUnreferencedDefs(root);
|
|
5778
5725
|
}
|
|
@@ -5852,16 +5799,16 @@ function cancelFrame(handle) {
|
|
|
5852
5799
|
}
|
|
5853
5800
|
g.clearTimeout(handle);
|
|
5854
5801
|
}
|
|
5855
|
-
function
|
|
5802
|
+
function createAdapterAnimator(doc, adapter, callbacks) {
|
|
5856
5803
|
var _a2;
|
|
5857
5804
|
const config = getAnimatorConfig(doc) || {};
|
|
5858
|
-
const bindings =
|
|
5805
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.js);
|
|
5859
5806
|
const _iterations = config.iterations;
|
|
5860
5807
|
let iterations = 1;
|
|
5861
5808
|
if (typeof _iterations === "number") iterations = _iterations || 1;
|
|
5862
5809
|
if (_iterations === "infinite") iterations = Infinity;
|
|
5863
5810
|
if (iterations < 1) iterations = 1;
|
|
5864
|
-
const duration = +(config.duration ||
|
|
5811
|
+
const duration = +(config.duration || PX_DEFAULT_DURATION_MS);
|
|
5865
5812
|
const totalDuration = duration && iterations ? duration * (iterations === Infinity ? Infinity : iterations) : duration ? (iterations != null ? iterations : 1) * duration : 0;
|
|
5866
5813
|
const direction = config.direction || "normal";
|
|
5867
5814
|
const fill = (_a2 = config.fill) != null ? _a2 : "forwards";
|
|
@@ -6118,6 +6065,36 @@ function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
|
|
|
6118
6065
|
};
|
|
6119
6066
|
return api;
|
|
6120
6067
|
}
|
|
6068
|
+
var PxDiagnosticCode = /* @__PURE__ */ ((PxDiagnosticCode2) => {
|
|
6069
|
+
PxDiagnosticCode2[PxDiagnosticCode2["buildFailed"] = 1001] = "buildFailed";
|
|
6070
|
+
PxDiagnosticCode2[PxDiagnosticCode2["invalidDocumentAtSrc"] = 1002] = "invalidDocumentAtSrc";
|
|
6071
|
+
PxDiagnosticCode2[PxDiagnosticCode2["loadFailed"] = 1003] = "loadFailed";
|
|
6072
|
+
PxDiagnosticCode2[PxDiagnosticCode2["animationBuildFailed"] = 1004] = "animationBuildFailed";
|
|
6073
|
+
PxDiagnosticCode2[PxDiagnosticCode2["effectsShape"] = 1101] = "effectsShape";
|
|
6074
|
+
PxDiagnosticCode2[PxDiagnosticCode2["timelineOverrideIgnored"] = 1102] = "timelineOverrideIgnored";
|
|
6075
|
+
PxDiagnosticCode2[PxDiagnosticCode2["blockedTag"] = 1103] = "blockedTag";
|
|
6076
|
+
PxDiagnosticCode2[PxDiagnosticCode2["unsupportedAnimatedAttrs"] = 1104] = "unsupportedAnimatedAttrs";
|
|
6077
|
+
PxDiagnosticCode2[PxDiagnosticCode2["noBindings"] = 1105] = "noBindings";
|
|
6078
|
+
PxDiagnosticCode2[PxDiagnosticCode2["unresolvedBinding"] = 1106] = "unresolvedBinding";
|
|
6079
|
+
PxDiagnosticCode2[PxDiagnosticCode2["triggersNoRoot"] = 1201] = "triggersNoRoot";
|
|
6080
|
+
PxDiagnosticCode2[PxDiagnosticCode2["noRootForSelector"] = 1202] = "noRootForSelector";
|
|
6081
|
+
PxDiagnosticCode2[PxDiagnosticCode2["noRootElement"] = 1203] = "noRootElement";
|
|
6082
|
+
PxDiagnosticCode2[PxDiagnosticCode2["noElementsForSelector"] = 1206] = "noElementsForSelector";
|
|
6083
|
+
PxDiagnosticCode2[PxDiagnosticCode2["setAttributeNoElement"] = 1207] = "setAttributeNoElement";
|
|
6084
|
+
PxDiagnosticCode2[PxDiagnosticCode2["scrollSmoothingNeedsOwnDriver"] = 1301] = "scrollSmoothingNeedsOwnDriver";
|
|
6085
|
+
PxDiagnosticCode2[PxDiagnosticCode2["scrollNativeUnavailable"] = 1302] = "scrollNativeUnavailable";
|
|
6086
|
+
PxDiagnosticCode2[PxDiagnosticCode2["scrollSubjectInvalid"] = 1303] = "scrollSubjectInvalid";
|
|
6087
|
+
PxDiagnosticCode2[PxDiagnosticCode2["scrollSubjectNoMatch"] = 1304] = "scrollSubjectNoMatch";
|
|
6088
|
+
PxDiagnosticCode2[PxDiagnosticCode2["scrollNoRootToObserve"] = 1305] = "scrollNoRootToObserve";
|
|
6089
|
+
PxDiagnosticCode2[PxDiagnosticCode2["scrollTriggerIgnored"] = 1306] = "scrollTriggerIgnored";
|
|
6090
|
+
PxDiagnosticCode2[PxDiagnosticCode2["rateRejected"] = 1401] = "rateRejected";
|
|
6091
|
+
PxDiagnosticCode2[PxDiagnosticCode2["controlPropsConflict"] = 1501] = "controlPropsConflict";
|
|
6092
|
+
PxDiagnosticCode2[PxDiagnosticCode2["rnCompileFailed"] = 1601] = "rnCompileFailed";
|
|
6093
|
+
PxDiagnosticCode2[PxDiagnosticCode2["rnRenderFailed"] = 1602] = "rnRenderFailed";
|
|
6094
|
+
PxDiagnosticCode2[PxDiagnosticCode2["rnBoundaryCaught"] = 1603] = "rnBoundaryCaught";
|
|
6095
|
+
PxDiagnosticCode2[PxDiagnosticCode2["rnUnsupported"] = 1604] = "rnUnsupported";
|
|
6096
|
+
return PxDiagnosticCode2;
|
|
6097
|
+
})(PxDiagnosticCode || {});
|
|
6121
6098
|
var FLAT_ONLY_KEYS = [
|
|
6122
6099
|
"timelineSource",
|
|
6123
6100
|
"scroll",
|
|
@@ -6235,9 +6212,9 @@ function mergeAnimatorConfig(base, patch) {
|
|
|
6235
6212
|
}
|
|
6236
6213
|
return { config: out, warnings };
|
|
6237
6214
|
}
|
|
6238
|
-
function applyAnimatorConfig(doc, patch,
|
|
6215
|
+
function applyAnimatorConfig(doc, patch, options) {
|
|
6239
6216
|
var _a2, _b;
|
|
6240
|
-
const reset = !!(
|
|
6217
|
+
const reset = !!(options == null ? void 0 : options.resetTimeline);
|
|
6241
6218
|
if (!doc || (patch === void 0 || !reset && (patch === null || !isPlainObject(patch) || !Object.keys(patch).length))) {
|
|
6242
6219
|
return { doc, warnings: [] };
|
|
6243
6220
|
}
|
|
@@ -6269,6 +6246,62 @@ function applyAnimatorConfig(doc, patch, opts) {
|
|
|
6269
6246
|
return { doc: __spreadProps2(__spreadValues2({}, anyDoc), { animator: merged.config }), warnings };
|
|
6270
6247
|
}
|
|
6271
6248
|
|
|
6249
|
+
// ../svg-animator-core/dist/internal.js
|
|
6250
|
+
function isScrollTimeline(config) {
|
|
6251
|
+
return (config == null ? void 0 : config.timelineSource) === "scroll";
|
|
6252
|
+
}
|
|
6253
|
+
function scrollTotalDurationMs(config) {
|
|
6254
|
+
const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : PX_DEFAULT_DURATION_MS;
|
|
6255
|
+
const iterations = typeof (config == null ? void 0 : config.iterations) === "number" && config.iterations > 0 ? config.iterations : 1;
|
|
6256
|
+
return duration * iterations;
|
|
6257
|
+
}
|
|
6258
|
+
function scrollPhaseInterval(phase, subjectSize, scrollportSize) {
|
|
6259
|
+
const s = subjectSize, vp = scrollportSize;
|
|
6260
|
+
switch (phase) {
|
|
6261
|
+
case "cover":
|
|
6262
|
+
return [0, s + vp];
|
|
6263
|
+
case "entry":
|
|
6264
|
+
return [0, Math.min(s, vp)];
|
|
6265
|
+
case "contain":
|
|
6266
|
+
return [Math.min(s, vp), Math.max(s, vp)];
|
|
6267
|
+
case "exit":
|
|
6268
|
+
return [Math.max(s, vp), s + vp];
|
|
6269
|
+
case "entry-crossing":
|
|
6270
|
+
return [0, s];
|
|
6271
|
+
case "exit-crossing":
|
|
6272
|
+
return [vp, s + vp];
|
|
6273
|
+
}
|
|
6274
|
+
}
|
|
6275
|
+
var DEFAULT_PHASE = "cover";
|
|
6276
|
+
function resolveRangePointU(point, defaultFraction, subjectSize, scrollportSize) {
|
|
6277
|
+
var _a2;
|
|
6278
|
+
const [u0, u1] = scrollPhaseInterval((_a2 = point == null ? void 0 : point.phase) != null ? _a2 : DEFAULT_PHASE, subjectSize, scrollportSize);
|
|
6279
|
+
const fraction = typeof (point == null ? void 0 : point.fraction) === "number" ? point.fraction : defaultFraction;
|
|
6280
|
+
return u0 + fraction * (u1 - u0);
|
|
6281
|
+
}
|
|
6282
|
+
function scrollViewProgress(subjectStart, subjectSize, scrollportSize, range) {
|
|
6283
|
+
const u = scrollportSize - subjectStart;
|
|
6284
|
+
const uStart = resolveRangePointU(range == null ? void 0 : range.start, 0, subjectSize, scrollportSize);
|
|
6285
|
+
const uEnd = resolveRangePointU(range == null ? void 0 : range.end, 1, subjectSize, scrollportSize);
|
|
6286
|
+
if (uEnd <= uStart) return u >= uEnd ? 1 : 0;
|
|
6287
|
+
return clamp((u - uStart) / (uEnd - uStart), 0, 1);
|
|
6288
|
+
}
|
|
6289
|
+
function scrollOffsetProgress(offset, maxOffset, range) {
|
|
6290
|
+
var _a2, _b;
|
|
6291
|
+
const raw = maxOffset > 0 ? clamp(offset / maxOffset, 0, 1) : 1;
|
|
6292
|
+
const start = typeof ((_a2 = range == null ? void 0 : range.start) == null ? void 0 : _a2.fraction) === "number" ? range.start.fraction : 0;
|
|
6293
|
+
const end = typeof ((_b = range == null ? void 0 : range.end) == null ? void 0 : _b.fraction) === "number" ? range.end.fraction : 1;
|
|
6294
|
+
if (end <= start) return raw >= end ? 1 : 0;
|
|
6295
|
+
return clamp((raw - start) / (end - start), 0, 1);
|
|
6296
|
+
}
|
|
6297
|
+
function scrollResolveAxis(axis, writingMode) {
|
|
6298
|
+
const a = axis != null ? axis : "block";
|
|
6299
|
+
if (a === "x" || a === "y") return a;
|
|
6300
|
+
const vertical = !!writingMode && writingMode.startsWith("vertical");
|
|
6301
|
+
if (a === "inline") return vertical ? "y" : "x";
|
|
6302
|
+
return vertical ? "x" : "y";
|
|
6303
|
+
}
|
|
6304
|
+
|
|
6272
6305
|
// src/shared/PxAnimatorCallbacks.ts
|
|
6273
6306
|
function toEngineCallbacks(inline) {
|
|
6274
6307
|
const { onPlay, onPause, onCancel, onFinish, onRemove, onStop, onWarn, onError, muteWarn, muteError } = inline != null ? inline : {};
|
|
@@ -6293,16 +6326,16 @@ function asThrownError(e) {
|
|
|
6293
6326
|
}
|
|
6294
6327
|
|
|
6295
6328
|
// src/triggers/PxAnimatorTriggers.ts
|
|
6296
|
-
function setupAnimationTriggers(api,
|
|
6329
|
+
function setupAnimationTriggers(api, trigger, diag) {
|
|
6297
6330
|
const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
|
|
6298
6331
|
const cleanups = [];
|
|
6299
6332
|
const dispose = () => {
|
|
6300
6333
|
for (const undo of cleanups.splice(0)) undo();
|
|
6301
6334
|
};
|
|
6302
|
-
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(
|
|
6335
|
+
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
|
|
6303
6336
|
const root = api.getRootElement();
|
|
6304
6337
|
if (!root) {
|
|
6305
|
-
report.warn(PxDiagnosticKind.host,
|
|
6338
|
+
report.warn(PxDiagnosticKind.host, PxDiagnosticCode.triggersNoRoot);
|
|
6306
6339
|
return dispose;
|
|
6307
6340
|
}
|
|
6308
6341
|
let reversed = false;
|
|
@@ -6421,12 +6454,12 @@ function createFrameLoopAnimator(doc, adapter, callbacks, rootElement) {
|
|
|
6421
6454
|
if (doc.id) {
|
|
6422
6455
|
const rootSelector = getSelector(doc.id);
|
|
6423
6456
|
rootElement = document.querySelector(rootSelector);
|
|
6424
|
-
if (!rootElement) diag.warn(PxDiagnosticKind.host,
|
|
6457
|
+
if (!rootElement) diag.warn(PxDiagnosticKind.host, PxDiagnosticCode.noRootForSelector, rootSelector);
|
|
6425
6458
|
} else {
|
|
6426
|
-
diag.warn(PxDiagnosticKind.host,
|
|
6459
|
+
diag.warn(PxDiagnosticKind.host, PxDiagnosticCode.noRootElement);
|
|
6427
6460
|
}
|
|
6428
6461
|
}
|
|
6429
|
-
const basicApi =
|
|
6462
|
+
const basicApi = createAdapterAnimator(
|
|
6430
6463
|
doc,
|
|
6431
6464
|
adapter || createDomAdapter(rootElement, diag),
|
|
6432
6465
|
callbacks
|
|
@@ -6435,7 +6468,7 @@ function createFrameLoopAnimator(doc, adapter, callbacks, rootElement) {
|
|
|
6435
6468
|
"getRootElement": () => rootElement || null
|
|
6436
6469
|
});
|
|
6437
6470
|
if (isScrollTimeline(config)) {
|
|
6438
|
-
if (config.trigger) diag.warn(PxDiagnosticKind.usage,
|
|
6471
|
+
if (config.trigger) diag.warn(PxDiagnosticKind.usage, PxDiagnosticCode.scrollTriggerIgnored);
|
|
6439
6472
|
} else {
|
|
6440
6473
|
const detachTriggers = setupAnimationTriggers(api, (_a2 = config.trigger) != null ? _a2 : {}, diag);
|
|
6441
6474
|
const destroyEngine = api.destroy.bind(api);
|
|
@@ -6460,13 +6493,13 @@ function createDomAdapter(rootElement, diag) {
|
|
|
6460
6493
|
const elements = (rootElement == null ? void 0 : rootElement.querySelectorAll(selector)) || document.querySelectorAll(selector);
|
|
6461
6494
|
if (elements.length === 0 && !warnedSelectors.has(selector)) {
|
|
6462
6495
|
warnedSelectors.add(selector);
|
|
6463
|
-
report.warn(PxDiagnosticKind.host,
|
|
6496
|
+
report.warn(PxDiagnosticKind.host, PxDiagnosticCode.setAttributeNoElement, selector);
|
|
6464
6497
|
}
|
|
6465
6498
|
for (let i = 0; i < elements.length; i++) {
|
|
6466
6499
|
const element = elements[i];
|
|
6467
6500
|
const effectiveAttrName = attrName === "transform" && element.tagName === "pattern" ? "patternTransform" : attrName;
|
|
6468
6501
|
element.setAttribute(effectiveAttrName, value);
|
|
6469
|
-
if (
|
|
6502
|
+
if (PX_STYLE_ATTR_NAMES.has(attrName)) {
|
|
6470
6503
|
element.style[attrName] = value;
|
|
6471
6504
|
}
|
|
6472
6505
|
}
|
|
@@ -6477,20 +6510,20 @@ function createDomAdapter(rootElement, diag) {
|
|
|
6477
6510
|
|
|
6478
6511
|
// src/engines/PxAnimatorWebApi.ts
|
|
6479
6512
|
function createCssKf(kf, t, propName, unsupportedSet) {
|
|
6480
|
-
let value =
|
|
6481
|
-
const e =
|
|
6513
|
+
let value = keyframeValue(kf);
|
|
6514
|
+
const e = keyframeEasing(kf);
|
|
6482
6515
|
const cssKf = {
|
|
6483
6516
|
offset: t,
|
|
6484
6517
|
easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
|
|
6485
6518
|
};
|
|
6486
6519
|
let cssValue;
|
|
6487
6520
|
let cssKey = propName;
|
|
6488
|
-
if (
|
|
6521
|
+
if (PX_COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
|
|
6489
6522
|
cssValue = toRGBA(value);
|
|
6490
6523
|
} else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
|
|
6491
6524
|
cssValue = composeTransformParts(value, { withUnits: true });
|
|
6492
6525
|
cssKey = "transform";
|
|
6493
|
-
} else if (
|
|
6526
|
+
} else if (PX_TRANSFORM_FN_NAMES.has(propName)) {
|
|
6494
6527
|
if (Array.isArray(value)) {
|
|
6495
6528
|
if (propName === "translate") value = value.map((v) => v + "px");
|
|
6496
6529
|
value = value.join(",");
|
|
@@ -6501,7 +6534,7 @@ function createCssKf(kf, t, propName, unsupportedSet) {
|
|
|
6501
6534
|
} else if (propName === "d") {
|
|
6502
6535
|
const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
|
|
6503
6536
|
cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
|
|
6504
|
-
} else if (
|
|
6537
|
+
} else if (PX_PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
|
|
6505
6538
|
cssValue = value * 100 + "%";
|
|
6506
6539
|
} else {
|
|
6507
6540
|
cssValue = "" + value;
|
|
@@ -6579,12 +6612,12 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
|
|
|
6579
6612
|
if (doc.id) {
|
|
6580
6613
|
const rootSelector = getSelector(doc.id);
|
|
6581
6614
|
rootElement = document.querySelector(rootSelector);
|
|
6582
|
-
if (!rootElement) diag.warn(PxDiagnosticKind.host,
|
|
6615
|
+
if (!rootElement) diag.warn(PxDiagnosticKind.host, PxDiagnosticCode.noRootForSelector, rootSelector);
|
|
6583
6616
|
} else {
|
|
6584
|
-
diag.warn(PxDiagnosticKind.host,
|
|
6617
|
+
diag.warn(PxDiagnosticKind.host, PxDiagnosticCode.noRootElement);
|
|
6585
6618
|
}
|
|
6586
6619
|
}
|
|
6587
|
-
const bindings =
|
|
6620
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.native);
|
|
6588
6621
|
const animations = [];
|
|
6589
6622
|
const _iterations = config.iterations;
|
|
6590
6623
|
let iterations;
|
|
@@ -6594,18 +6627,18 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
|
|
|
6594
6627
|
let finishNotified = false;
|
|
6595
6628
|
let removeCalled = false;
|
|
6596
6629
|
if (!(bindings == null ? void 0 : bindings.length)) {
|
|
6597
|
-
diag.warn(PxDiagnosticKind.document,
|
|
6630
|
+
diag.warn(PxDiagnosticKind.document, PxDiagnosticCode.noBindings);
|
|
6598
6631
|
}
|
|
6599
6632
|
for (const binding of bindings || []) {
|
|
6600
6633
|
const animDef = binding.animate;
|
|
6601
6634
|
if (!animDef || typeof animDef !== "object" || Array.isArray(animDef)) {
|
|
6602
|
-
diag.warn(PxDiagnosticKind.document,
|
|
6635
|
+
diag.warn(PxDiagnosticKind.document, PxDiagnosticCode.unresolvedBinding, binding);
|
|
6603
6636
|
continue;
|
|
6604
6637
|
}
|
|
6605
6638
|
const selector = getSelector(binding.id);
|
|
6606
6639
|
const elements = (rootElement == null ? void 0 : rootElement.querySelectorAll(selector)) || document.querySelectorAll(selector);
|
|
6607
6640
|
if (elements.length === 0) {
|
|
6608
|
-
diag.warn(PxDiagnosticKind.host,
|
|
6641
|
+
diag.warn(PxDiagnosticKind.host, PxDiagnosticCode.noElementsForSelector, selector);
|
|
6609
6642
|
}
|
|
6610
6643
|
const keyframesMap = convertToWebApiKeyframes(animDef, unsupportedSet, config);
|
|
6611
6644
|
const positiveDelay = config.delay && config.delay > 0 ? config.delay : void 0;
|
|
@@ -6654,14 +6687,14 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
|
|
|
6654
6687
|
}
|
|
6655
6688
|
animations.push(anim);
|
|
6656
6689
|
} catch (e) {
|
|
6657
|
-
diag.warn(PxDiagnosticKind.internal,
|
|
6690
|
+
diag.warn(PxDiagnosticKind.internal, PxDiagnosticCode.animationBuildFailed, e);
|
|
6658
6691
|
}
|
|
6659
6692
|
}
|
|
6660
6693
|
}
|
|
6661
6694
|
}
|
|
6662
6695
|
}
|
|
6663
6696
|
if (!forceEvenIfHasUnsupportedAttrs && unsupportedSet.size) {
|
|
6664
|
-
diag.warn(PxDiagnosticKind.platform,
|
|
6697
|
+
diag.warn(PxDiagnosticKind.platform, PxDiagnosticCode.unsupportedAnimatedAttrs, [...unsupportedSet].join(", "));
|
|
6665
6698
|
return null;
|
|
6666
6699
|
}
|
|
6667
6700
|
const api = {
|
|
@@ -6706,7 +6739,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
|
|
|
6706
6739
|
},
|
|
6707
6740
|
"setPlaybackRate": (rate) => {
|
|
6708
6741
|
if (!isValidPlaybackRate(rate)) {
|
|
6709
|
-
diag.warn(PxDiagnosticKind.usage,
|
|
6742
|
+
diag.warn(PxDiagnosticKind.usage, PxDiagnosticCode.rateRejected);
|
|
6710
6743
|
return api;
|
|
6711
6744
|
}
|
|
6712
6745
|
animations.forEach((a) => a.playbackRate = rate);
|
|
@@ -6746,7 +6779,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
|
|
|
6746
6779
|
}
|
|
6747
6780
|
};
|
|
6748
6781
|
if (config.timelineSource === "scroll") {
|
|
6749
|
-
if (config.trigger) diag.warn(PxDiagnosticKind.usage,
|
|
6782
|
+
if (config.trigger) diag.warn(PxDiagnosticKind.usage, PxDiagnosticCode.scrollTriggerIgnored);
|
|
6750
6783
|
} else {
|
|
6751
6784
|
const detachTriggers = setupAnimationTriggers(api, (_b = config.trigger) != null ? _b : {}, diag);
|
|
6752
6785
|
const destroyEngine = api.destroy.bind(api);
|
|
@@ -6776,7 +6809,7 @@ function createNativeScrollTimeline(subject, config, diag) {
|
|
|
6776
6809
|
const scroll = config.scroll || {};
|
|
6777
6810
|
const kind = (_a2 = scroll.kind) != null ? _a2 : "view";
|
|
6778
6811
|
if (scroll.smoothing) {
|
|
6779
|
-
report.warn(PxDiagnosticKind.platform,
|
|
6812
|
+
report.warn(PxDiagnosticKind.platform, PxDiagnosticCode.scrollSmoothingNeedsOwnDriver);
|
|
6780
6813
|
return null;
|
|
6781
6814
|
}
|
|
6782
6815
|
const g = globalThis;
|
|
@@ -6793,7 +6826,7 @@ function createNativeScrollTimeline(subject, config, diag) {
|
|
|
6793
6826
|
timeline = new Ctor({ source, axis });
|
|
6794
6827
|
}
|
|
6795
6828
|
} catch (e) {
|
|
6796
|
-
report.warn(PxDiagnosticKind.platform,
|
|
6829
|
+
report.warn(PxDiagnosticKind.platform, PxDiagnosticCode.scrollNativeUnavailable, e);
|
|
6797
6830
|
return null;
|
|
6798
6831
|
}
|
|
6799
6832
|
return {
|
|
@@ -6840,11 +6873,11 @@ function resolveScrollSubject(svgRoot, subject, diag) {
|
|
|
6840
6873
|
try {
|
|
6841
6874
|
found = document.querySelector(spec);
|
|
6842
6875
|
} catch (e) {
|
|
6843
|
-
report.warn(PxDiagnosticKind.document,
|
|
6876
|
+
report.warn(PxDiagnosticKind.document, PxDiagnosticCode.scrollSubjectInvalid, spec);
|
|
6844
6877
|
return svgRoot;
|
|
6845
6878
|
}
|
|
6846
6879
|
if (!found) {
|
|
6847
|
-
report.warn(PxDiagnosticKind.host,
|
|
6880
|
+
report.warn(PxDiagnosticKind.host, PxDiagnosticCode.scrollSubjectNoMatch, spec);
|
|
6848
6881
|
return svgRoot;
|
|
6849
6882
|
}
|
|
6850
6883
|
return found;
|
|
@@ -7066,7 +7099,7 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
|
|
|
7066
7099
|
unpin = () => {
|
|
7067
7100
|
};
|
|
7068
7101
|
}
|
|
7069
|
-
const api = (animatorConfig.engine !==
|
|
7102
|
+
const api = (animatorConfig.engine !== PxTimelineEngineSetting.js ? createWebApiAnimator(doc, cb, rootElement, isNativeForced(animatorConfig.engine)) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
|
|
7070
7103
|
const subject = ((_a2 = api.getRootElement) == null ? void 0 : _a2.call(api)) || rootElement;
|
|
7071
7104
|
if (subject) {
|
|
7072
7105
|
unpin = applyScrollPin(subject, animatorConfig.scroll);
|
|
@@ -7086,13 +7119,13 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
|
|
|
7086
7119
|
};
|
|
7087
7120
|
}
|
|
7088
7121
|
} else {
|
|
7089
|
-
diag.warn(PxDiagnosticKind.host,
|
|
7122
|
+
diag.warn(PxDiagnosticKind.host, PxDiagnosticCode.scrollNoRootToObserve);
|
|
7090
7123
|
}
|
|
7091
7124
|
return api;
|
|
7092
7125
|
});
|
|
7093
7126
|
}
|
|
7094
7127
|
return finaliseAnimator(animatorConfig, callbacks, (cb) => {
|
|
7095
|
-
if (animatorConfig.engine ===
|
|
7128
|
+
if (animatorConfig.engine === PxTimelineEngineSetting.js) {
|
|
7096
7129
|
return createFrameLoopAnimator(doc, adapter, cb, rootElement);
|
|
7097
7130
|
}
|
|
7098
7131
|
return createWebApiAnimator(
|
|
@@ -7107,15 +7140,15 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
|
|
|
7107
7140
|
// src/dom/PxAnimatorDOM.ts
|
|
7108
7141
|
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
7109
7142
|
function createElement(tagName, normalizedProps, style, children, textContent, diag) {
|
|
7110
|
-
if (
|
|
7111
|
-
(diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document,
|
|
7143
|
+
if (PX_DISALLOWED_SVG_TAGS_LOWER.has(tagName.toLowerCase())) {
|
|
7144
|
+
(diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document, PxDiagnosticCode.blockedTag, tagName);
|
|
7112
7145
|
return null;
|
|
7113
7146
|
}
|
|
7114
7147
|
const element = document.createElementNS(SVG_NS, tagName);
|
|
7115
7148
|
for (const propName in normalizedProps) {
|
|
7116
7149
|
const sanitized = sanitizeAttributeValue(propName, normalizedProps[propName]);
|
|
7117
7150
|
if (sanitized === void 0) continue;
|
|
7118
|
-
if (
|
|
7151
|
+
if (PX_CSS_ONLY_STYLE_PROPS.has(propName)) {
|
|
7119
7152
|
element.style[propName] = String(sanitized);
|
|
7120
7153
|
continue;
|
|
7121
7154
|
}
|
|
@@ -7140,7 +7173,7 @@ function renderNode(node, defs, diag) {
|
|
|
7140
7173
|
const _a2 = node, { type, children, style } = _a2, props = __objRest(_a2, ["type", "children", "style"]);
|
|
7141
7174
|
const domType = props.domType;
|
|
7142
7175
|
if (domType !== void 0) delete props.domType;
|
|
7143
|
-
const nodeDefs =
|
|
7176
|
+
const nodeDefs = getDefinitions(node) || defs;
|
|
7144
7177
|
const resolvedStyle = style;
|
|
7145
7178
|
let childElements;
|
|
7146
7179
|
if (children) {
|
|
@@ -7154,10 +7187,10 @@ function renderNode(node, defs, diag) {
|
|
|
7154
7187
|
}
|
|
7155
7188
|
const element = createElement(
|
|
7156
7189
|
type || "g",
|
|
7157
|
-
|
|
7190
|
+
toDomProps(props),
|
|
7158
7191
|
resolvedStyle,
|
|
7159
7192
|
childElements,
|
|
7160
|
-
props[
|
|
7193
|
+
props[PX_TEXT_CONTENT_ATTR],
|
|
7161
7194
|
diag
|
|
7162
7195
|
);
|
|
7163
7196
|
if (element && domType !== void 0) element.setAttribute("type", domType);
|
|
@@ -7171,11 +7204,11 @@ function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
|
|
|
7171
7204
|
function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, resetTimeline) {
|
|
7172
7205
|
const diag = createDiagnostics(callbacks, "[PxAnimator]");
|
|
7173
7206
|
const effectsWarnings = validateNodeEffects(doc);
|
|
7174
|
-
for (const w of effectsWarnings) diag.warn(PxDiagnosticKind.document,
|
|
7207
|
+
for (const w of effectsWarnings) diag.warn(PxDiagnosticKind.document, PxDiagnosticCode.effectsShape, w);
|
|
7175
7208
|
reportDocumentDiagnostics(doc, "[PxAnimator] createAnimator");
|
|
7176
7209
|
if (patch !== void 0 || resetTimeline) {
|
|
7177
|
-
const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, {
|
|
7178
|
-
for (const w of patched.warnings) diag.warn(PxDiagnosticKind.usage,
|
|
7210
|
+
const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, { resetTimeline: !!resetTimeline });
|
|
7211
|
+
for (const w of patched.warnings) diag.warn(PxDiagnosticKind.usage, PxDiagnosticCode.timelineOverrideIgnored, w);
|
|
7179
7212
|
doc = patched.doc;
|
|
7180
7213
|
}
|
|
7181
7214
|
const animatorConfig = getAnimatorConfig(doc) || {};
|
|
@@ -7238,16 +7271,16 @@ function createAnimator(options) {
|
|
|
7238
7271
|
pending = null;
|
|
7239
7272
|
queued == null ? void 0 : queued.forEach((call) => call(api));
|
|
7240
7273
|
};
|
|
7241
|
-
const failed = (kind,
|
|
7274
|
+
const failed = (kind, code, ...data) => {
|
|
7242
7275
|
pending = null;
|
|
7243
|
-
diag.error(kind,
|
|
7276
|
+
diag.error(kind, code, ...data);
|
|
7244
7277
|
};
|
|
7245
7278
|
const build = (document2) => {
|
|
7246
7279
|
try {
|
|
7247
7280
|
ready(createAnimatorImpl(document2, adapter, callbacks, container, patch, resetTimeline));
|
|
7248
7281
|
} catch (e) {
|
|
7249
7282
|
const err = asThrownError(e);
|
|
7250
|
-
failed(PxDiagnosticKind.internal,
|
|
7283
|
+
failed(PxDiagnosticKind.internal, PxDiagnosticCode.buildFailed, err);
|
|
7251
7284
|
}
|
|
7252
7285
|
};
|
|
7253
7286
|
if (doc !== void 0) {
|
|
@@ -7255,11 +7288,11 @@ function createAnimator(options) {
|
|
|
7255
7288
|
} else {
|
|
7256
7289
|
fetch(src).then((res) => res.json()).then((json) => {
|
|
7257
7290
|
if (destroyed) return;
|
|
7258
|
-
if (
|
|
7259
|
-
else failed(PxDiagnosticKind.document,
|
|
7291
|
+
if (isPxDocument(json)) build(json);
|
|
7292
|
+
else failed(PxDiagnosticKind.document, PxDiagnosticCode.invalidDocumentAtSrc, src);
|
|
7260
7293
|
}).catch((err) => {
|
|
7261
7294
|
var _a2;
|
|
7262
|
-
failed(PxDiagnosticKind.host,
|
|
7295
|
+
failed(PxDiagnosticKind.host, PxDiagnosticCode.loadFailed, src, (_a2 = err == null ? void 0 : err.message) != null ? _a2 : String(err));
|
|
7263
7296
|
});
|
|
7264
7297
|
}
|
|
7265
7298
|
return {
|
|
@@ -7309,23 +7342,22 @@ function loadTagAnimators(options) {
|
|
|
7309
7342
|
}
|
|
7310
7343
|
}
|
|
7311
7344
|
export {
|
|
7312
|
-
PX_ANIMATOR_DOC_KEY,
|
|
7313
7345
|
PxAnimatorConfigSchema,
|
|
7314
|
-
|
|
7346
|
+
PxDefinitionsSchema,
|
|
7315
7347
|
PxDiagnosticKind,
|
|
7316
|
-
|
|
7348
|
+
PxNodeBaseSchema,
|
|
7317
7349
|
PxScrollSchema,
|
|
7318
|
-
|
|
7319
|
-
|
|
7350
|
+
PxSvgNodeRootSchema,
|
|
7351
|
+
PxTimelineEngineSetting,
|
|
7320
7352
|
PxTriggerSchema,
|
|
7353
|
+
createAdapterAnimator,
|
|
7321
7354
|
createAnimator,
|
|
7322
|
-
createBasicFrameLoopAnimator,
|
|
7323
7355
|
generateNewIds,
|
|
7324
|
-
getNormalizedProps,
|
|
7325
7356
|
loadTagAnimators,
|
|
7326
7357
|
px,
|
|
7327
7358
|
renderNode,
|
|
7328
7359
|
setupAnimationTriggers,
|
|
7360
|
+
toDomProps,
|
|
7329
7361
|
validateDocument
|
|
7330
7362
|
};
|
|
7331
7363
|
//# sourceMappingURL=index.js.map
|