@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
|
@@ -55,7 +55,7 @@ var PixodeskAnimator = (() => {
|
|
|
55
55
|
PX_ANIM_ATTR_NAME: () => PX_ANIM_ATTR_NAME,
|
|
56
56
|
PX_ANIM_SRC_ATTR_NAME: () => PX_ANIM_SRC_ATTR_NAME,
|
|
57
57
|
PxTimelineEngine: () => PxTimelineEngine,
|
|
58
|
-
|
|
58
|
+
PxTimelineEngineSetting: () => PxTimelineEngineSetting,
|
|
59
59
|
createAnimator: () => createAnimator,
|
|
60
60
|
generateNewIds: () => generateNewIds,
|
|
61
61
|
loadTagAnimators: () => loadTagAnimators,
|
|
@@ -553,7 +553,7 @@ var PixodeskAnimator = (() => {
|
|
|
553
553
|
* The base can be the result of px.object() or px.openObject() — anything with a _shape property.
|
|
554
554
|
*
|
|
555
555
|
* @example
|
|
556
|
-
* const PxSvgNodeSchema = px.extendedObject(
|
|
556
|
+
* const PxSvgNodeSchema = px.extendedObject(PxNodeBaseSchema, { width: px.number().optional() });
|
|
557
557
|
*/
|
|
558
558
|
extendedObject: (base, extra) => new Obj(__spreadValues(__spreadValues({}, base._shape), extra)),
|
|
559
559
|
/** Array whose unrecoverable items are filtered out. Default: []. */
|
|
@@ -571,7 +571,7 @@ var PixodeskAnimator = (() => {
|
|
|
571
571
|
};
|
|
572
572
|
|
|
573
573
|
// ../svg-animator-core/src/version/PxSchemaVersion.ts
|
|
574
|
-
var
|
|
574
|
+
var PX_WIRE_SCHEMA_VERSION = "1.1";
|
|
575
575
|
|
|
576
576
|
// ../svg-animator-core/src/version/PxWireVersion.ts
|
|
577
577
|
var VERSION_RE = /^(\d+)\.(\d+)(?:\.(\d+))?$/;
|
|
@@ -582,7 +582,7 @@ var PixodeskAnimator = (() => {
|
|
|
582
582
|
return { a: Number(m[1]), b: Number(m[2]), c: m[3] === void 0 ? 0 : Number(m[3]) };
|
|
583
583
|
}
|
|
584
584
|
var _a;
|
|
585
|
-
var
|
|
585
|
+
var PX_WIRE_VERSION = (_a = parseWireVersion(PX_WIRE_SCHEMA_VERSION)) != null ? _a : { a: 1, b: 1, c: 0 };
|
|
586
586
|
|
|
587
587
|
// ../svg-animator-core/src/format/PxAnimatorConstants.ts
|
|
588
588
|
var PxFillMode = {
|
|
@@ -661,17 +661,17 @@ var PixodeskAnimator = (() => {
|
|
|
661
661
|
native: "native",
|
|
662
662
|
js: "js"
|
|
663
663
|
};
|
|
664
|
-
var
|
|
664
|
+
var PxTimelineEngineSetting = __spreadProps(__spreadValues({}, PxTimelineEngine), {
|
|
665
665
|
auto: "auto"
|
|
666
666
|
});
|
|
667
667
|
function resolveTimelineEngine(engine) {
|
|
668
|
-
return engine ===
|
|
668
|
+
return engine === PxTimelineEngineSetting.js ? PxTimelineEngine.js : PxTimelineEngine.native;
|
|
669
669
|
}
|
|
670
670
|
function isNativeForced(engine) {
|
|
671
|
-
return engine ===
|
|
671
|
+
return engine === PxTimelineEngineSetting.native;
|
|
672
672
|
}
|
|
673
673
|
function mayUseNativeScrollTimeline(engine) {
|
|
674
|
-
return engine !==
|
|
674
|
+
return engine !== PxTimelineEngineSetting.js;
|
|
675
675
|
}
|
|
676
676
|
var PX_TRIGGER_DEFAULTS = {
|
|
677
677
|
startOn: "load",
|
|
@@ -732,7 +732,7 @@ var PixodeskAnimator = (() => {
|
|
|
732
732
|
separate: "separate",
|
|
733
733
|
combined: "combined"
|
|
734
734
|
};
|
|
735
|
-
var
|
|
735
|
+
var PX_TEXT_CONTENT_ATTR = "textContent";
|
|
736
736
|
var CLASS_ATTR = "class";
|
|
737
737
|
var TRANSFORM_ATTR = "transform";
|
|
738
738
|
var OFFSET_DISTANCE_ATTR = "offsetDistance";
|
|
@@ -743,7 +743,7 @@ var PixodeskAnimator = (() => {
|
|
|
743
743
|
"meta",
|
|
744
744
|
"animate",
|
|
745
745
|
"effects",
|
|
746
|
-
|
|
746
|
+
PX_TEXT_CONTENT_ATTR
|
|
747
747
|
]);
|
|
748
748
|
var TRANSFORM_PART = {
|
|
749
749
|
translate: "translate",
|
|
@@ -766,11 +766,11 @@ var PixodeskAnimator = (() => {
|
|
|
766
766
|
linear: "linear",
|
|
767
767
|
radial: "radial"
|
|
768
768
|
};
|
|
769
|
-
function
|
|
770
|
-
if (!(
|
|
769
|
+
function isPxDocument(doc) {
|
|
770
|
+
if (!(doc && typeof doc === "object" && !Array.isArray(doc))) {
|
|
771
771
|
return false;
|
|
772
772
|
}
|
|
773
|
-
return
|
|
773
|
+
return doc.type === "svg";
|
|
774
774
|
}
|
|
775
775
|
function getAnimatorConfig(doc) {
|
|
776
776
|
var _a2;
|
|
@@ -831,7 +831,7 @@ var PixodeskAnimator = (() => {
|
|
|
831
831
|
flattenMemo.set(cfg, flat);
|
|
832
832
|
return flat;
|
|
833
833
|
}
|
|
834
|
-
function
|
|
834
|
+
function getDefinitions(doc) {
|
|
835
835
|
var _a2;
|
|
836
836
|
if (!doc) return void 0;
|
|
837
837
|
return (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.definitions;
|
|
@@ -874,20 +874,20 @@ var PixodeskAnimator = (() => {
|
|
|
874
874
|
// its internal COPY-PASTE payload, which never validates against this schema.)
|
|
875
875
|
}));
|
|
876
876
|
var anyKf = (kf) => kf;
|
|
877
|
-
var
|
|
877
|
+
var keyframeTime = (kf) => {
|
|
878
878
|
var _a2, _b;
|
|
879
879
|
return (_b = (_a2 = anyKf(kf).time) != null ? _a2 : anyKf(kf).t) != null ? _b : 0;
|
|
880
880
|
};
|
|
881
|
-
var
|
|
881
|
+
var keyframeValue = (kf) => {
|
|
882
882
|
var _a2;
|
|
883
883
|
return (_a2 = anyKf(kf).value) != null ? _a2 : anyKf(kf).v;
|
|
884
884
|
};
|
|
885
|
-
var
|
|
885
|
+
var keyframeEasing = (kf) => {
|
|
886
886
|
var _a2;
|
|
887
887
|
return (_a2 = anyKf(kf).easing) != null ? _a2 : anyKf(kf).e;
|
|
888
888
|
};
|
|
889
|
-
var
|
|
890
|
-
var
|
|
889
|
+
var keyframeTangentIn = (kf) => anyKf(kf).tangentIn;
|
|
890
|
+
var keyframeTangentOut = (kf) => anyKf(kf).tangentOut;
|
|
891
891
|
var PxLoopSchema = implementsInterface()(px.object({
|
|
892
892
|
segmentCount: px.number().optional(),
|
|
893
893
|
repeatAt: px.enum([PxLoopRepeatAt.start, PxLoopRepeatAt.end]).optional(),
|
|
@@ -941,7 +941,7 @@ var PixodeskAnimator = (() => {
|
|
|
941
941
|
unitsPerEm: px.number(),
|
|
942
942
|
glyphs: px.record(PxGlyphSchema)
|
|
943
943
|
}));
|
|
944
|
-
var
|
|
944
|
+
var PxDefinitionsSchema = implementsInterface()(px.object({
|
|
945
945
|
easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
|
|
946
946
|
animations: px.record(PxAnimationDefinitionSchema).optional(),
|
|
947
947
|
fonts: px.record(PxGlyphFontSchema).optional()
|
|
@@ -979,7 +979,7 @@ var PixodeskAnimator = (() => {
|
|
|
979
979
|
offset: px.number().optional(),
|
|
980
980
|
distance: px.number().optional()
|
|
981
981
|
}));
|
|
982
|
-
var PxTimelineEngineSchema = px.enum([
|
|
982
|
+
var PxTimelineEngineSchema = px.enum([PxTimelineEngineSetting.auto, PxTimelineEngineSetting.native, PxTimelineEngineSetting.js]).optional();
|
|
983
983
|
var PxTimeTimelineSchema = implementsInterface()(px.object({
|
|
984
984
|
type: px.literal("time").optional(),
|
|
985
985
|
engine: PxTimelineEngineSchema,
|
|
@@ -1033,7 +1033,7 @@ var PixodeskAnimator = (() => {
|
|
|
1033
1033
|
// at this level only on the runtime view, like the rest of the playback dynamics.)
|
|
1034
1034
|
// THE spelling of "what advances progress" — clock / scroll / view (review §2.1).
|
|
1035
1035
|
timeline: PxTimelineSchema.optional(),
|
|
1036
|
-
definitions:
|
|
1036
|
+
definitions: PxDefinitionsSchema.optional(),
|
|
1037
1037
|
bindings: px.array(PxBindingSchema).optional(),
|
|
1038
1038
|
debugGlobalName: px.string().optional(),
|
|
1039
1039
|
// Declared HERE because this is a closed object: an undeclared key would be stripped by
|
|
@@ -1122,7 +1122,7 @@ var PixodeskAnimator = (() => {
|
|
|
1122
1122
|
PxPropertyAnimationSchema
|
|
1123
1123
|
]);
|
|
1124
1124
|
var PxFillGradientEffectSchema = implementsInterface()(px.object({
|
|
1125
|
-
// Contextual kind — the `type` convention, see `
|
|
1125
|
+
// Contextual kind — the `type` convention, see `PxNodeBaseSchema.type`.
|
|
1126
1126
|
type: px.enum([PxGradientType.linear, PxGradientType.radial]),
|
|
1127
1127
|
start: PxAnimatableVec2Schema.optional(),
|
|
1128
1128
|
end: PxAnimatableVec2Schema.optional(),
|
|
@@ -1159,11 +1159,11 @@ var PixodeskAnimator = (() => {
|
|
|
1159
1159
|
textPath: PxTextPathEffectSchema.optional(),
|
|
1160
1160
|
text: PxTextEffectSchema.optional()
|
|
1161
1161
|
}));
|
|
1162
|
-
function validateNodeEffects(root,
|
|
1162
|
+
function validateNodeEffects(root, options) {
|
|
1163
1163
|
const warnings = [];
|
|
1164
1164
|
const walk = (node, path) => {
|
|
1165
1165
|
if (node && node.effects) {
|
|
1166
|
-
const ctx = { errors: [], warnings: [], strict: !!(
|
|
1166
|
+
const ctx = { errors: [], warnings: [], strict: !!(options == null ? void 0 : options.strict) };
|
|
1167
1167
|
const ok = PxEffectsSchema.isValid(node.effects, ctx, [path + ".effects"]);
|
|
1168
1168
|
if (!ok) {
|
|
1169
1169
|
for (const err of ctx.errors) warnings.push(err);
|
|
@@ -1224,9 +1224,9 @@ var PixodeskAnimator = (() => {
|
|
|
1224
1224
|
if (parseWireVersion(version) !== void 0) return [];
|
|
1225
1225
|
return ["root.animator.version: " + JSON.stringify(version) + ' is not a version stamp ("a.b" or "a.b.c") \u2014 it reads as unstamped'];
|
|
1226
1226
|
}
|
|
1227
|
-
function validateDocument(doc,
|
|
1227
|
+
function validateDocument(doc, options) {
|
|
1228
1228
|
var _a2;
|
|
1229
|
-
const strict = (
|
|
1229
|
+
const strict = (options == null ? void 0 : options.strict) !== false;
|
|
1230
1230
|
const ctx = { errors: [], warnings: [], strict };
|
|
1231
1231
|
const problems = PxAnimatedSvgDocumentSchema.isValid(doc, ctx, ["root"]) ? [] : [...ctx.errors];
|
|
1232
1232
|
if (doc && typeof doc === "object") {
|
|
@@ -1246,7 +1246,7 @@ var PixodeskAnimator = (() => {
|
|
|
1246
1246
|
}
|
|
1247
1247
|
return problems;
|
|
1248
1248
|
}
|
|
1249
|
-
var
|
|
1249
|
+
var PxNodeBaseSchema = px.openObject({
|
|
1250
1250
|
// CONVENTION (SCHEMA-DESIGN R1 / issues N4): `type` is the ONE word for "what
|
|
1251
1251
|
// kind of thing is this", discriminated by its CARRIER — here the node TAG
|
|
1252
1252
|
// (`rect`, `text`), and inside a sub-object that object's kind (`fillGradient.type`,
|
|
@@ -1261,7 +1261,7 @@ var PixodeskAnimator = (() => {
|
|
|
1261
1261
|
// `type` is taken by the tag name, so the attribute travels here and the renderer puts
|
|
1262
1262
|
// it back (`PxAnimatorDOM.renderNode`, `PxRnRender`). Declared here — not merely
|
|
1263
1263
|
// documented — because a wire key that is not in a schema is invisible to the
|
|
1264
|
-
// minifier's reserve list and gets renamed (
|
|
1264
|
+
// minifier's reserve list and gets renamed (dev-docs/plans/minification-boundary.md §1.1).
|
|
1265
1265
|
domType: px.string().optional(),
|
|
1266
1266
|
// Text content of a `<text>` / `<tspan>`. Declared, so a non-string value is a schema error
|
|
1267
1267
|
// and the minifier reserves the key; `text` is NOT an alias for it and is not read anywhere.
|
|
@@ -1269,7 +1269,7 @@ var PixodeskAnimator = (() => {
|
|
|
1269
1269
|
id: px.string().optional(),
|
|
1270
1270
|
meta: px.any().optional(),
|
|
1271
1271
|
// Player-effects bucket emitted by the Editor's lightweight design format.
|
|
1272
|
-
// Consumed and removed by `
|
|
1272
|
+
// Consumed and removed by `materializeNodeEffects` before any other normalization
|
|
1273
1273
|
// (see `createAnimatorImpl`), so downstream code never sees it.
|
|
1274
1274
|
effects: PxEffectsSchema.optional(),
|
|
1275
1275
|
// `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
|
|
@@ -1278,10 +1278,10 @@ var PixodeskAnimator = (() => {
|
|
|
1278
1278
|
animate: PxElementAnimationSchema.optional(),
|
|
1279
1279
|
style: px.record(px.union([px.string(), px.number()])).optional()
|
|
1280
1280
|
}, PxAttrValueSchema);
|
|
1281
|
-
var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({},
|
|
1281
|
+
var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBaseSchema._shape), {
|
|
1282
1282
|
children: px.lazy(() => px.array(PxNodeSchema), []).optional()
|
|
1283
1283
|
}), PxAttrValueSchema);
|
|
1284
|
-
var
|
|
1284
|
+
var PxSvgNodeRootSchema = px.object({
|
|
1285
1285
|
// `"100%"` and other SVG length strings are legal here — a number-only slot rejected
|
|
1286
1286
|
// real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
|
|
1287
1287
|
width: px.union([px.number(), px.string()]).optional(),
|
|
@@ -1289,7 +1289,7 @@ var PixodeskAnimator = (() => {
|
|
|
1289
1289
|
viewBox: px.string().optional(),
|
|
1290
1290
|
animator: PxAnimatorConfigSchema.optional()
|
|
1291
1291
|
});
|
|
1292
|
-
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({},
|
|
1292
|
+
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({}, PxNodeBaseSchema._shape), PxSvgNodeRootSchema._shape), {
|
|
1293
1293
|
type: px.literal("svg"),
|
|
1294
1294
|
// override string → literal to require 'svg'
|
|
1295
1295
|
children: px.array(PxNodeSchema).optional()
|
|
@@ -1648,9 +1648,9 @@ var PixodeskAnimator = (() => {
|
|
|
1648
1648
|
}
|
|
1649
1649
|
return void 0;
|
|
1650
1650
|
}
|
|
1651
|
-
var
|
|
1652
|
-
var
|
|
1653
|
-
var
|
|
1651
|
+
var PX_COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
|
|
1652
|
+
var PX_TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
|
|
1653
|
+
var PX_PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
|
|
1654
1654
|
function composeTransformParts(parts, opts) {
|
|
1655
1655
|
var _a2;
|
|
1656
1656
|
if (!parts) return "";
|
|
@@ -1703,8 +1703,8 @@ var PixodeskAnimator = (() => {
|
|
|
1703
1703
|
if (str2.replace(/([a-zA-Z]+)\s*\(([^)]*)\)/g, "").replace(/[\s,]/g, "").length) return void 0;
|
|
1704
1704
|
return Object.keys(out).length ? out : void 0;
|
|
1705
1705
|
}
|
|
1706
|
-
var
|
|
1707
|
-
var
|
|
1706
|
+
var PX_STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
|
|
1707
|
+
var PX_DEFAULT_DURATION_MS = 1e3;
|
|
1708
1708
|
function kebabToCamelCaseWord(kebab) {
|
|
1709
1709
|
return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
|
|
1710
1710
|
}
|
|
@@ -1867,7 +1867,7 @@ var PixodeskAnimator = (() => {
|
|
|
1867
1867
|
}
|
|
1868
1868
|
|
|
1869
1869
|
// ../svg-animator-core/src/util/PxNodeProps.ts
|
|
1870
|
-
var
|
|
1870
|
+
var PX_DISALLOWED_SVG_TAGS_LOWER = /* @__PURE__ */ new Set([
|
|
1871
1871
|
"script",
|
|
1872
1872
|
"foreignobject"
|
|
1873
1873
|
]);
|
|
@@ -1892,7 +1892,7 @@ var PixodeskAnimator = (() => {
|
|
|
1892
1892
|
// marker-end="url(#…)"
|
|
1893
1893
|
]);
|
|
1894
1894
|
var IMAGE_REF_ATTRS_LOWER = /* @__PURE__ */ new Set(["href", "xlink:href", "src"]);
|
|
1895
|
-
var
|
|
1895
|
+
var PX_CSS_ONLY_STYLE_PROPS = /* @__PURE__ */ new Set(["mixBlendMode", "isolation"]);
|
|
1896
1896
|
var DATA_RASTER_IMAGE_RE = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,/i;
|
|
1897
1897
|
var DATA_SVG_IMAGE_RE = /^data:image\/svg\+xml(?:;[^,]*)?,/i;
|
|
1898
1898
|
var DATA_IMAGE_BASE64_PAYLOAD_RE = /^data:image\/[^;,]*;base64,([A-Za-z0-9+/]{8})/i;
|
|
@@ -1929,19 +1929,19 @@ var PixodeskAnimator = (() => {
|
|
|
1929
1929
|
}
|
|
1930
1930
|
return value;
|
|
1931
1931
|
}
|
|
1932
|
-
function
|
|
1932
|
+
function toDomProps(props) {
|
|
1933
1933
|
const propsCopy = {};
|
|
1934
1934
|
for (const rawKey of Object.keys(props)) {
|
|
1935
1935
|
const key = kebabToCamelCaseWord(rawKey);
|
|
1936
1936
|
if (INTERNAL_ATTRS.has(key)) continue;
|
|
1937
1937
|
if (key === "style") continue;
|
|
1938
1938
|
let value = props[rawKey];
|
|
1939
|
-
if (
|
|
1939
|
+
if (PX_COLOR_ATTR_NAMES.has(key) && Array.isArray(value)) {
|
|
1940
1940
|
propsCopy[key] = toRGBA(value);
|
|
1941
1941
|
} else if (key === "transform" && value !== null && typeof value === "object" && !Array.isArray(value) && !value.keyframes) {
|
|
1942
1942
|
const parts = value.value && typeof value.value === "object" ? value.value : value;
|
|
1943
1943
|
propsCopy[TRANSFORM_ATTR] = composeTransformParts(parts, { withUnits: false });
|
|
1944
|
-
} else if (
|
|
1944
|
+
} else if (PX_TRANSFORM_FN_NAMES.has(key)) {
|
|
1945
1945
|
if (Array.isArray(value)) {
|
|
1946
1946
|
if (key === "translate") value = value.map((v) => v + "px");
|
|
1947
1947
|
value = value.join(",");
|
|
@@ -1959,7 +1959,7 @@ var PixodeskAnimator = (() => {
|
|
|
1959
1959
|
|
|
1960
1960
|
// ../svg-animator-core/src/materialize/PxMotionPath.ts
|
|
1961
1961
|
function getKfTranslate(kf) {
|
|
1962
|
-
const v =
|
|
1962
|
+
const v = keyframeValue(kf);
|
|
1963
1963
|
if (!v) return void 0;
|
|
1964
1964
|
if (Array.isArray(v) && v.length >= 2 && typeof v[0] === "number" && typeof v[1] === "number") {
|
|
1965
1965
|
return [v[0], v[1]];
|
|
@@ -1969,17 +1969,17 @@ var PixodeskAnimator = (() => {
|
|
|
1969
1969
|
return void 0;
|
|
1970
1970
|
}
|
|
1971
1971
|
function getKfTime(kf) {
|
|
1972
|
-
return
|
|
1972
|
+
return keyframeTime(kf);
|
|
1973
1973
|
}
|
|
1974
1974
|
function getKfEasing(kf) {
|
|
1975
|
-
return
|
|
1975
|
+
return keyframeEasing(kf);
|
|
1976
1976
|
}
|
|
1977
1977
|
function propAnimIsMotionPath(anim) {
|
|
1978
1978
|
const kfs = anim.keyframes;
|
|
1979
1979
|
if (!Array.isArray(kfs)) return false;
|
|
1980
1980
|
if (anim.autoOrient) return true;
|
|
1981
1981
|
for (const kf of kfs) {
|
|
1982
|
-
if (
|
|
1982
|
+
if (keyframeTangentIn(kf) || keyframeTangentOut(kf)) return true;
|
|
1983
1983
|
}
|
|
1984
1984
|
return false;
|
|
1985
1985
|
}
|
|
@@ -1988,8 +1988,8 @@ var PixodeskAnimator = (() => {
|
|
|
1988
1988
|
let byNext = _segmentCache.get(prevKf);
|
|
1989
1989
|
const existing = byNext == null ? void 0 : byNext.get(nextKf);
|
|
1990
1990
|
if (existing) return existing;
|
|
1991
|
-
const to =
|
|
1992
|
-
const ti =
|
|
1991
|
+
const to = keyframeTangentOut(prevKf);
|
|
1992
|
+
const ti = keyframeTangentIn(nextKf);
|
|
1993
1993
|
const P1 = [prevPos[0] + (to ? to[0] : 0), prevPos[1] + (to ? to[1] : 0)];
|
|
1994
1994
|
const P2 = [nextPos[0] + (ti ? ti[0] : 0), nextPos[1] + (ti ? ti[1] : 0)];
|
|
1995
1995
|
const lut = bezier2D_arcLengthLUT(prevPos, P1, P2, nextPos);
|
|
@@ -2082,7 +2082,7 @@ var PixodeskAnimator = (() => {
|
|
|
2082
2082
|
function unwrapAutoOrientRotations(kfs) {
|
|
2083
2083
|
let prev;
|
|
2084
2084
|
for (const kf of kfs) {
|
|
2085
|
-
const v =
|
|
2085
|
+
const v = keyframeValue(kf);
|
|
2086
2086
|
if (!v || typeof v.rotate !== "number") continue;
|
|
2087
2087
|
if (prev === void 0) {
|
|
2088
2088
|
prev = v.rotate;
|
|
@@ -2099,7 +2099,7 @@ var PixodeskAnimator = (() => {
|
|
|
2099
2099
|
return { t: time, v: value };
|
|
2100
2100
|
}
|
|
2101
2101
|
function getKfValueParts(kf) {
|
|
2102
|
-
const v =
|
|
2102
|
+
const v = keyframeValue(kf);
|
|
2103
2103
|
if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
|
|
2104
2104
|
return v;
|
|
2105
2105
|
}
|
|
@@ -2161,7 +2161,7 @@ var PixodeskAnimator = (() => {
|
|
|
2161
2161
|
}
|
|
2162
2162
|
function insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol) {
|
|
2163
2163
|
const lastKf = out[out.length - 1];
|
|
2164
|
-
const lastV =
|
|
2164
|
+
const lastV = keyframeValue(lastKf);
|
|
2165
2165
|
const prevExit = lastV == null ? void 0 : lastV.rotate;
|
|
2166
2166
|
if (typeof prevExit !== "number") return;
|
|
2167
2167
|
const boundaryV = getKfValueParts(prevKf);
|
|
@@ -2343,7 +2343,7 @@ var PixodeskAnimator = (() => {
|
|
|
2343
2343
|
}
|
|
2344
2344
|
|
|
2345
2345
|
// ../svg-animator-core/src/animation/PxDefinitions.ts
|
|
2346
|
-
var
|
|
2346
|
+
var PX_LOOP_JUMP_SHIFT_MS = 1;
|
|
2347
2347
|
function deepEqualValue(a, b) {
|
|
2348
2348
|
if (a === b) return true;
|
|
2349
2349
|
if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
|
|
@@ -2519,7 +2519,7 @@ var PixodeskAnimator = (() => {
|
|
|
2519
2519
|
const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
|
|
2520
2520
|
return { paths: interpolateBeziers(aPaths, bPaths, t) };
|
|
2521
2521
|
}
|
|
2522
|
-
if (
|
|
2522
|
+
if (PX_COLOR_ATTR_NAMES.has(propName)) {
|
|
2523
2523
|
return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
|
|
2524
2524
|
}
|
|
2525
2525
|
if (propName === "transform" && typeof a === "object" && a !== null && !Array.isArray(a) && typeof b === "object" && b !== null && !Array.isArray(b)) {
|
|
@@ -2528,7 +2528,7 @@ var PixodeskAnimator = (() => {
|
|
|
2528
2528
|
if (propName === "rotate" && typeof a === "number" && typeof b === "number") {
|
|
2529
2529
|
return interpolateNum(a, b, t);
|
|
2530
2530
|
}
|
|
2531
|
-
if (
|
|
2531
|
+
if (PX_TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
|
|
2532
2532
|
return interpolateVec(a || [], b || [], t);
|
|
2533
2533
|
}
|
|
2534
2534
|
return interpolateNum(+(a || 0), +(b || 0), t);
|
|
@@ -2580,8 +2580,8 @@ var PixodeskAnimator = (() => {
|
|
|
2580
2580
|
relT: (kf.t - segStartT) / segDuration,
|
|
2581
2581
|
v: kf.v,
|
|
2582
2582
|
e: kf.e,
|
|
2583
|
-
tangentIn:
|
|
2584
|
-
tangentOut:
|
|
2583
|
+
tangentIn: keyframeTangentIn(kf),
|
|
2584
|
+
tangentOut: keyframeTangentOut(kf)
|
|
2585
2585
|
}));
|
|
2586
2586
|
const fullReps = Math.floor(fillDuration / segDuration);
|
|
2587
2587
|
const remainder = fillDuration - fullReps * segDuration;
|
|
@@ -2647,7 +2647,7 @@ var PixodeskAnimator = (() => {
|
|
|
2647
2647
|
}
|
|
2648
2648
|
}
|
|
2649
2649
|
const pushed = {
|
|
2650
|
-
t: repStart + entry.relT * segDuration + (isBoundary ?
|
|
2650
|
+
t: repStart + entry.relT * segDuration + (isBoundary ? PX_LOOP_JUMP_SHIFT_MS : 0),
|
|
2651
2651
|
v: entry.v,
|
|
2652
2652
|
e: i < entries.length - 1 ? entry.e : void 0
|
|
2653
2653
|
};
|
|
@@ -2734,14 +2734,14 @@ var PixodeskAnimator = (() => {
|
|
|
2734
2734
|
const keyframes = propAnim.keyframes || [];
|
|
2735
2735
|
const normalized = [];
|
|
2736
2736
|
for (const kf of keyframes) {
|
|
2737
|
-
const timePct =
|
|
2738
|
-
let value =
|
|
2739
|
-
const easing =
|
|
2737
|
+
const timePct = keyframeTime(kf);
|
|
2738
|
+
let value = keyframeValue(kf);
|
|
2739
|
+
const easing = keyframeEasing(kf);
|
|
2740
2740
|
if (propName === "d") {
|
|
2741
2741
|
value = normalizePathValue(value);
|
|
2742
2742
|
}
|
|
2743
2743
|
const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
|
|
2744
|
-
if (
|
|
2744
|
+
if (PX_COLOR_ATTR_NAMES.has(propNameKebab)) {
|
|
2745
2745
|
value = (_a2 = parseColor(value)) != null ? _a2 : value;
|
|
2746
2746
|
}
|
|
2747
2747
|
const normKf = {
|
|
@@ -2749,8 +2749,8 @@ var PixodeskAnimator = (() => {
|
|
|
2749
2749
|
v: value,
|
|
2750
2750
|
e: resolveEasing(easing, defs)
|
|
2751
2751
|
};
|
|
2752
|
-
const tIn =
|
|
2753
|
-
const tOut =
|
|
2752
|
+
const tIn = keyframeTangentIn(kf);
|
|
2753
|
+
const tOut = keyframeTangentOut(kf);
|
|
2754
2754
|
if (tIn) normKf.tangentIn = tIn;
|
|
2755
2755
|
if (tOut) normKf.tangentOut = tOut;
|
|
2756
2756
|
normalized.push(normKf);
|
|
@@ -2782,17 +2782,17 @@ var PixodeskAnimator = (() => {
|
|
|
2782
2782
|
const rawKfs = propAnim.keyframes;
|
|
2783
2783
|
if (!Array.isArray(rawKfs) || rawKfs.length < 2) return propAnim;
|
|
2784
2784
|
const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
|
|
2785
|
-
const isColor =
|
|
2785
|
+
const isColor = PX_COLOR_ATTR_NAMES.has(propNameKebab);
|
|
2786
2786
|
const kfs = rawKfs.map((kf) => {
|
|
2787
2787
|
var _a2;
|
|
2788
|
-
const t =
|
|
2789
|
-
let v =
|
|
2788
|
+
const t = keyframeTime(kf);
|
|
2789
|
+
let v = keyframeValue(kf);
|
|
2790
2790
|
if (propName === "d") v = normalizePathValue(v);
|
|
2791
2791
|
if (isColor) v = (_a2 = parseColor(v)) != null ? _a2 : v;
|
|
2792
|
-
const e =
|
|
2792
|
+
const e = keyframeEasing(kf);
|
|
2793
2793
|
const out2 = { t, v, e };
|
|
2794
|
-
const tIn =
|
|
2795
|
-
const tOut =
|
|
2794
|
+
const tIn = keyframeTangentIn(kf);
|
|
2795
|
+
const tOut = keyframeTangentOut(kf);
|
|
2796
2796
|
if (tIn) out2.tangentIn = tIn;
|
|
2797
2797
|
if (tOut) out2.tangentOut = tOut;
|
|
2798
2798
|
return out2;
|
|
@@ -2857,7 +2857,7 @@ var PixodeskAnimator = (() => {
|
|
|
2857
2857
|
}
|
|
2858
2858
|
return animDef;
|
|
2859
2859
|
}
|
|
2860
|
-
const channels = Object.keys(animDef).filter((k) =>
|
|
2860
|
+
const channels = Object.keys(animDef).filter((k) => PX_TRANSFORM_FN_NAMES.has(k));
|
|
2861
2861
|
if (channels.length !== 1) return animDef;
|
|
2862
2862
|
const ch = channels[0];
|
|
2863
2863
|
const chAnim = animDef[ch];
|
|
@@ -2886,9 +2886,9 @@ var PixodeskAnimator = (() => {
|
|
|
2886
2886
|
}
|
|
2887
2887
|
return normalized;
|
|
2888
2888
|
}
|
|
2889
|
-
function
|
|
2889
|
+
function normalizeBindings(doc, engine = PxTimelineEngine.native) {
|
|
2890
2890
|
const animatorConfig = getAnimatorConfig(doc) || {};
|
|
2891
|
-
const defs =
|
|
2891
|
+
const defs = getDefinitions(doc);
|
|
2892
2892
|
const duration = animatorConfig.duration || 1e3;
|
|
2893
2893
|
const bindings = [];
|
|
2894
2894
|
const processAnimation = (id, animDefs, staticTransform) => {
|
|
@@ -2958,7 +2958,7 @@ var PixodeskAnimator = (() => {
|
|
|
2958
2958
|
const { prevKf, nextKf } = getKeyframesPair(keyframes, progress);
|
|
2959
2959
|
let localProgress = prevKf === nextKf ? 0 : remap(progress, (_a2 = prevKf.t) != null ? _a2 : 0, (_b = nextKf.t) != null ? _b : 0, 0, 1);
|
|
2960
2960
|
localProgress = clamp(localProgress, 0, 1);
|
|
2961
|
-
const easing =
|
|
2961
|
+
const easing = keyframeEasing(prevKf);
|
|
2962
2962
|
if (easing && Array.isArray(easing)) {
|
|
2963
2963
|
try {
|
|
2964
2964
|
localProgress = cubicBezier(easing)(localProgress);
|
|
@@ -2977,7 +2977,7 @@ var PixodeskAnimator = (() => {
|
|
|
2977
2977
|
nextPaths,
|
|
2978
2978
|
localProgress
|
|
2979
2979
|
).map((bz) => bezierToSvgPath(bz)).join("");
|
|
2980
|
-
} else if (
|
|
2980
|
+
} else if (PX_COLOR_ATTR_NAMES.has(cssAttrName)) {
|
|
2981
2981
|
cssValue = toRGBA(interpolateColor(
|
|
2982
2982
|
prevV || [0, 0, 0, 1],
|
|
2983
2983
|
nextV || [0, 0, 0, 1],
|
|
@@ -3058,7 +3058,7 @@ var PixodeskAnimator = (() => {
|
|
|
3058
3058
|
);
|
|
3059
3059
|
cssValue = num;
|
|
3060
3060
|
}
|
|
3061
|
-
if (
|
|
3061
|
+
if (PX_PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
|
|
3062
3062
|
cssValue = cssValue * 100 + "%";
|
|
3063
3063
|
}
|
|
3064
3064
|
return { k: cssAttrName, v: cssValue === null ? "" : "" + cssValue };
|
|
@@ -3623,11 +3623,11 @@ var PixodeskAnimator = (() => {
|
|
|
3623
3623
|
const loopFromSource = read.loop;
|
|
3624
3624
|
let stopCount = 0;
|
|
3625
3625
|
for (const kf of kfs) {
|
|
3626
|
-
const v =
|
|
3626
|
+
const v = keyframeValue(kf);
|
|
3627
3627
|
if (Array.isArray(v) && v.length > stopCount) stopCount = v.length;
|
|
3628
3628
|
}
|
|
3629
3629
|
if (!stopCount) return [];
|
|
3630
|
-
const firstKfValue =
|
|
3630
|
+
const firstKfValue = keyframeValue(kfs[0]);
|
|
3631
3631
|
const baselineStops = [];
|
|
3632
3632
|
for (let i = 0; i < stopCount; i++) {
|
|
3633
3633
|
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" };
|
|
@@ -3648,11 +3648,11 @@ var PixodeskAnimator = (() => {
|
|
|
3648
3648
|
const offsetKfs = [];
|
|
3649
3649
|
let offsetVaries = false;
|
|
3650
3650
|
for (const kf of kfs) {
|
|
3651
|
-
const t =
|
|
3652
|
-
const arr =
|
|
3651
|
+
const t = keyframeTime(kf);
|
|
3652
|
+
const arr = keyframeValue(kf);
|
|
3653
3653
|
const sliced = (_a2 = arr == null ? void 0 : arr[stopIdx]) != null ? _a2 : prevDefinedStop(kfs, kfs.indexOf(kf), stopIdx);
|
|
3654
3654
|
if (!sliced) continue;
|
|
3655
|
-
const easing =
|
|
3655
|
+
const easing = keyframeEasing(kf);
|
|
3656
3656
|
const colorOut = { time: t, value: sliced.color };
|
|
3657
3657
|
if (easing !== void 0) colorOut.easing = easing;
|
|
3658
3658
|
colorKfs.push(colorOut);
|
|
@@ -3680,11 +3680,11 @@ var PixodeskAnimator = (() => {
|
|
|
3680
3680
|
}
|
|
3681
3681
|
function prevDefinedStop(kfs, fromIdx, stopIdx) {
|
|
3682
3682
|
for (let i = fromIdx; i >= 0; i--) {
|
|
3683
|
-
const arr =
|
|
3683
|
+
const arr = keyframeValue(kfs[i]);
|
|
3684
3684
|
if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
|
|
3685
3685
|
}
|
|
3686
3686
|
for (let i = fromIdx + 1; i < kfs.length; i++) {
|
|
3687
|
-
const arr =
|
|
3687
|
+
const arr = keyframeValue(kfs[i]);
|
|
3688
3688
|
if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
|
|
3689
3689
|
}
|
|
3690
3690
|
return void 0;
|
|
@@ -4665,7 +4665,7 @@ var PixodeskAnimator = (() => {
|
|
|
4665
4665
|
"stroke",
|
|
4666
4666
|
"strokeWidth",
|
|
4667
4667
|
"effects",
|
|
4668
|
-
|
|
4668
|
+
PX_TEXT_CONTENT_ATTR,
|
|
4669
4669
|
"xml:space"
|
|
4670
4670
|
];
|
|
4671
4671
|
var PAINT_STATIC_KEYS = [
|
|
@@ -4819,13 +4819,13 @@ var PixodeskAnimator = (() => {
|
|
|
4819
4819
|
if (y !== void 0) pen.y = y;
|
|
4820
4820
|
pen.x += (_a3 = parseLen(el.dx)) != null ? _a3 : 0;
|
|
4821
4821
|
pen.y += (_b2 = parseLen(el.dy)) != null ? _b2 : 0;
|
|
4822
|
-
const content = str(el[
|
|
4822
|
+
const content = str(el[PX_TEXT_CONTENT_ATTR]);
|
|
4823
4823
|
if (content && !((_c2 = el.children) == null ? void 0 : _c2.length)) renderChars(content, s);
|
|
4824
4824
|
if (el.children) for (const ch of el.children) walk(ch, s);
|
|
4825
4825
|
};
|
|
4826
4826
|
const rootStyle = rootStyleOf(node);
|
|
4827
4827
|
if (node.children) for (const ch of node.children) walk(ch, rootStyle);
|
|
4828
|
-
const rootContent = str(node[
|
|
4828
|
+
const rootContent = str(node[PX_TEXT_CONTENT_ATTR]);
|
|
4829
4829
|
if (rootContent && !((_c = node.children) == null ? void 0 : _c.length)) renderChars(rootContent, rootStyle);
|
|
4830
4830
|
const anchor = str(node.textAnchor);
|
|
4831
4831
|
if (anchor === "middle" || anchor === "end") {
|
|
@@ -4843,7 +4843,7 @@ var PixodeskAnimator = (() => {
|
|
|
4843
4843
|
const walk = (el, parentStyle) => {
|
|
4844
4844
|
var _a2, _b;
|
|
4845
4845
|
const s = resolveStyle(el, parentStyle);
|
|
4846
|
-
const content = str(el[
|
|
4846
|
+
const content = str(el[PX_TEXT_CONTENT_ATTR]);
|
|
4847
4847
|
if (content && !((_a2 = el.children) == null ? void 0 : _a2.length)) {
|
|
4848
4848
|
const gf = glyphFontFor(s, glyphs, soleFont, warnings);
|
|
4849
4849
|
if (gf) {
|
|
@@ -5214,7 +5214,7 @@ var PixodeskAnimator = (() => {
|
|
|
5214
5214
|
if (r.kind === "static" /* Static */) return [r.value];
|
|
5215
5215
|
const out = [];
|
|
5216
5216
|
for (const kf of r.keyframes) {
|
|
5217
|
-
const v =
|
|
5217
|
+
const v = keyframeValue(kf);
|
|
5218
5218
|
if (typeof v === "number") out.push(v);
|
|
5219
5219
|
}
|
|
5220
5220
|
return out;
|
|
@@ -5225,9 +5225,9 @@ var PixodeskAnimator = (() => {
|
|
|
5225
5225
|
return {
|
|
5226
5226
|
kind: "animated" /* Animated */,
|
|
5227
5227
|
keyframes: read.keyframes.map((kf) => ({
|
|
5228
|
-
time:
|
|
5229
|
-
value: map(
|
|
5230
|
-
easing:
|
|
5228
|
+
time: keyframeTime(kf),
|
|
5229
|
+
value: map(keyframeValue(kf)),
|
|
5230
|
+
easing: keyframeEasing(kf)
|
|
5231
5231
|
})),
|
|
5232
5232
|
loop: read.loop
|
|
5233
5233
|
};
|
|
@@ -5245,7 +5245,7 @@ var PixodeskAnimator = (() => {
|
|
|
5245
5245
|
let anyHide = false;
|
|
5246
5246
|
let allHide = true;
|
|
5247
5247
|
for (const kf of kfs) {
|
|
5248
|
-
if (hide(
|
|
5248
|
+
if (hide(keyframeValue(kf))) anyHide = true;
|
|
5249
5249
|
else allHide = false;
|
|
5250
5250
|
}
|
|
5251
5251
|
if (!anyHide) return void 0;
|
|
@@ -5255,10 +5255,10 @@ var PixodeskAnimator = (() => {
|
|
|
5255
5255
|
const kf = kfs[i];
|
|
5256
5256
|
const prevKf = i > 0 ? kfs[i - 1] : void 0;
|
|
5257
5257
|
const nextKf = i < kfs.length - 1 ? kfs[i + 1] : void 0;
|
|
5258
|
-
const t =
|
|
5259
|
-
const thisHide = hide(
|
|
5260
|
-
const prevHide = prevKf ? thisHide && hide(
|
|
5261
|
-
const nextHide = nextKf ? thisHide && hide(
|
|
5258
|
+
const t = keyframeTime(kf);
|
|
5259
|
+
const thisHide = hide(keyframeValue(kf));
|
|
5260
|
+
const prevHide = prevKf ? thisHide && hide(keyframeValue(prevKf)) : thisHide;
|
|
5261
|
+
const nextHide = nextKf ? thisHide && hide(keyframeValue(nextKf)) : thisHide;
|
|
5262
5262
|
if (prevHide && !nextHide) {
|
|
5263
5263
|
out.push({ time: t, value: 0 });
|
|
5264
5264
|
out.push({ time: t + OPACITY_STEP_MS, value: 1 });
|
|
@@ -5274,9 +5274,9 @@ var PixodeskAnimator = (() => {
|
|
|
5274
5274
|
const r = readAnimatable(raw);
|
|
5275
5275
|
if (r.kind !== "animated" /* Animated */) return r;
|
|
5276
5276
|
const kfs = r.keyframes.map((kf) => ({
|
|
5277
|
-
time:
|
|
5278
|
-
value:
|
|
5279
|
-
easing:
|
|
5277
|
+
time: keyframeTime(kf),
|
|
5278
|
+
value: keyframeValue(kf),
|
|
5279
|
+
easing: keyframeEasing(kf)
|
|
5280
5280
|
}));
|
|
5281
5281
|
const hasReverse = kfs.some((kf) => kf.value[0] > kf.value[1]);
|
|
5282
5282
|
if (!hasReverse) {
|
|
@@ -5404,7 +5404,7 @@ var PixodeskAnimator = (() => {
|
|
|
5404
5404
|
}
|
|
5405
5405
|
|
|
5406
5406
|
// ../svg-animator-core/src/effects/PlayerEffectsUtil.ts
|
|
5407
|
-
function
|
|
5407
|
+
function materializeNodeEffects(root) {
|
|
5408
5408
|
var _a2, _b;
|
|
5409
5409
|
const ctx = {
|
|
5410
5410
|
defs: [],
|
|
@@ -5417,7 +5417,7 @@ var PixodeskAnimator = (() => {
|
|
|
5417
5417
|
// Resolved engine: `frames` ONLY when explicitly set; auto/waapi/unset →
|
|
5418
5418
|
// waapi (we're not 100% sure it's frames, and CSS/WAAPI need the inline form).
|
|
5419
5419
|
engine: resolveTimelineEngine((_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.engine),
|
|
5420
|
-
glyphs: (_b =
|
|
5420
|
+
glyphs: (_b = getDefinitions(root)) == null ? void 0 : _b.fonts
|
|
5421
5421
|
};
|
|
5422
5422
|
const working = clone(root);
|
|
5423
5423
|
indexById(working, ctx.idMap);
|
|
@@ -5501,11 +5501,11 @@ var PixodeskAnimator = (() => {
|
|
|
5501
5501
|
if (propAnim.alongPathMode !== "offsetPath") return void 0;
|
|
5502
5502
|
const kfs = propAnim.keyframes;
|
|
5503
5503
|
if (!kfs || kfs.length < 2) return void 0;
|
|
5504
|
-
const first =
|
|
5504
|
+
const first = keyframeValue(kfs[0]);
|
|
5505
5505
|
const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
|
|
5506
5506
|
const points = [];
|
|
5507
5507
|
for (const kf of kfs) {
|
|
5508
|
-
const v =
|
|
5508
|
+
const v = keyframeValue(kf);
|
|
5509
5509
|
const tr = v == null ? void 0 : v.translate;
|
|
5510
5510
|
if (!tr || tr.length < 2) return void 0;
|
|
5511
5511
|
const parts = Object.keys(v);
|
|
@@ -5514,13 +5514,13 @@ var PixodeskAnimator = (() => {
|
|
|
5514
5514
|
if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
|
|
5515
5515
|
points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
|
|
5516
5516
|
}
|
|
5517
|
-
if (!kfs.some((kf) =>
|
|
5517
|
+
if (!kfs.some((kf) => keyframeTangentIn(kf) || keyframeTangentOut(kf))) return void 0;
|
|
5518
5518
|
let d = "M" + fmt2(points[0][0]) + "," + fmt2(points[0][1]);
|
|
5519
5519
|
const segLens = [];
|
|
5520
5520
|
for (let i = 0; i < points.length - 1; i++) {
|
|
5521
5521
|
const p0 = points[i], p1 = points[i + 1];
|
|
5522
|
-
const to = (_b =
|
|
5523
|
-
const ti = (_c =
|
|
5522
|
+
const to = (_b = keyframeTangentOut(kfs[i])) != null ? _b : [0, 0];
|
|
5523
|
+
const ti = (_c = keyframeTangentIn(kfs[i + 1])) != null ? _c : [0, 0];
|
|
5524
5524
|
const c1 = [p0[0] + to[0], p0[1] + to[1]];
|
|
5525
5525
|
const c2 = [p1[0] + ti[0], p1[1] + ti[1]];
|
|
5526
5526
|
d += "C" + fmt2(c1[0]) + "," + fmt2(c1[1]) + "," + fmt2(c2[0]) + "," + fmt2(c2[1]) + "," + fmt2(p1[0]) + "," + fmt2(p1[1]);
|
|
@@ -5532,8 +5532,8 @@ var PixodeskAnimator = (() => {
|
|
|
5532
5532
|
let cum = 0;
|
|
5533
5533
|
for (let i = 0; i < kfs.length; i++) {
|
|
5534
5534
|
if (i > 0) cum += segLens[i - 1];
|
|
5535
|
-
const out = { t:
|
|
5536
|
-
const e =
|
|
5535
|
+
const out = { t: keyframeTime(kfs[i]), v: cum / total };
|
|
5536
|
+
const e = keyframeEasing(kfs[i]);
|
|
5537
5537
|
if (e !== void 0) out.e = e;
|
|
5538
5538
|
distanceKfs.push(out);
|
|
5539
5539
|
}
|
|
@@ -5732,14 +5732,14 @@ var PixodeskAnimator = (() => {
|
|
|
5732
5732
|
}
|
|
5733
5733
|
|
|
5734
5734
|
// ../svg-animator-core/src/materialize/PxAnimatorMaterializeAll.ts
|
|
5735
|
-
function materializeAllInTree(doc, engine,
|
|
5735
|
+
function materializeAllInTree(doc, engine, options) {
|
|
5736
5736
|
var _a2, _b;
|
|
5737
|
-
let root =
|
|
5737
|
+
let root = materializeNodeEffects(doc).root;
|
|
5738
5738
|
root = materializeOffsetPathsInTree(root);
|
|
5739
|
-
const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b :
|
|
5739
|
+
const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b : PX_DEFAULT_DURATION_MS;
|
|
5740
5740
|
root = materializeInternalLoopsInTree(root, duration);
|
|
5741
5741
|
if (engine === PxTimelineEngine.native) {
|
|
5742
|
-
root = materializeMotionPathsInTree(root,
|
|
5742
|
+
root = materializeMotionPathsInTree(root, options == null ? void 0 : options.motionPath);
|
|
5743
5743
|
root = materializeAnimatedUseInstances(root);
|
|
5744
5744
|
root = pruneUnreferencedDefs(root);
|
|
5745
5745
|
}
|
|
@@ -5823,16 +5823,16 @@ var PixodeskAnimator = (() => {
|
|
|
5823
5823
|
}
|
|
5824
5824
|
g.clearTimeout(handle);
|
|
5825
5825
|
}
|
|
5826
|
-
function
|
|
5826
|
+
function createAdapterAnimator(doc, adapter, callbacks) {
|
|
5827
5827
|
var _a2;
|
|
5828
5828
|
const config = getAnimatorConfig(doc) || {};
|
|
5829
|
-
const bindings =
|
|
5829
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.js);
|
|
5830
5830
|
const _iterations = config.iterations;
|
|
5831
5831
|
let iterations = 1;
|
|
5832
5832
|
if (typeof _iterations === "number") iterations = _iterations || 1;
|
|
5833
5833
|
if (_iterations === "infinite") iterations = Infinity;
|
|
5834
5834
|
if (iterations < 1) iterations = 1;
|
|
5835
|
-
const duration = +(config.duration ||
|
|
5835
|
+
const duration = +(config.duration || PX_DEFAULT_DURATION_MS);
|
|
5836
5836
|
const totalDuration = duration && iterations ? duration * (iterations === Infinity ? Infinity : iterations) : duration ? (iterations != null ? iterations : 1) * duration : 0;
|
|
5837
5837
|
const direction = config.direction || "normal";
|
|
5838
5838
|
const fill = (_a2 = config.fill) != null ? _a2 : "forwards";
|
|
@@ -6251,9 +6251,9 @@ var PixodeskAnimator = (() => {
|
|
|
6251
6251
|
}
|
|
6252
6252
|
return { config: out, warnings };
|
|
6253
6253
|
}
|
|
6254
|
-
function applyAnimatorConfig(doc, patch,
|
|
6254
|
+
function applyAnimatorConfig(doc, patch, options) {
|
|
6255
6255
|
var _a2, _b;
|
|
6256
|
-
const reset = !!(
|
|
6256
|
+
const reset = !!(options == null ? void 0 : options.resetTimeline);
|
|
6257
6257
|
if (!doc || (patch === void 0 || !reset && (patch === null || !isPlainObject(patch) || !Object.keys(patch).length))) {
|
|
6258
6258
|
return { doc, warnings: [] };
|
|
6259
6259
|
}
|
|
@@ -6309,7 +6309,7 @@ var PixodeskAnimator = (() => {
|
|
|
6309
6309
|
return (config == null ? void 0 : config.timelineSource) === "scroll";
|
|
6310
6310
|
}
|
|
6311
6311
|
function scrollTotalDurationMs(config) {
|
|
6312
|
-
const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration :
|
|
6312
|
+
const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : PX_DEFAULT_DURATION_MS;
|
|
6313
6313
|
const iterations = typeof (config == null ? void 0 : config.iterations) === "number" && config.iterations > 0 ? config.iterations : 1;
|
|
6314
6314
|
return duration * iterations;
|
|
6315
6315
|
}
|
|
@@ -6384,13 +6384,13 @@ var PixodeskAnimator = (() => {
|
|
|
6384
6384
|
}
|
|
6385
6385
|
|
|
6386
6386
|
// src/triggers/PxAnimatorTriggers.ts
|
|
6387
|
-
function setupAnimationTriggers(api,
|
|
6387
|
+
function setupAnimationTriggers(api, trigger, diag) {
|
|
6388
6388
|
const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
|
|
6389
6389
|
const cleanups = [];
|
|
6390
6390
|
const dispose = () => {
|
|
6391
6391
|
for (const undo of cleanups.splice(0)) undo();
|
|
6392
6392
|
};
|
|
6393
|
-
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(
|
|
6393
|
+
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
|
|
6394
6394
|
const root = api.getRootElement();
|
|
6395
6395
|
if (!root) {
|
|
6396
6396
|
report.warn(PxDiagnosticKind.host, "setupAnimationTriggers: No root element found for animation.");
|
|
@@ -6517,7 +6517,7 @@ var PixodeskAnimator = (() => {
|
|
|
6517
6517
|
diag.warn(PxDiagnosticKind.host, "createFrameLoopAnimator: No root element provided");
|
|
6518
6518
|
}
|
|
6519
6519
|
}
|
|
6520
|
-
const basicApi =
|
|
6520
|
+
const basicApi = createAdapterAnimator(
|
|
6521
6521
|
doc,
|
|
6522
6522
|
adapter || createDomAdapter(rootElement, diag),
|
|
6523
6523
|
callbacks
|
|
@@ -6557,7 +6557,7 @@ var PixodeskAnimator = (() => {
|
|
|
6557
6557
|
const element = elements[i];
|
|
6558
6558
|
const effectiveAttrName = attrName === "transform" && element.tagName === "pattern" ? "patternTransform" : attrName;
|
|
6559
6559
|
element.setAttribute(effectiveAttrName, value);
|
|
6560
|
-
if (
|
|
6560
|
+
if (PX_STYLE_ATTR_NAMES.has(attrName)) {
|
|
6561
6561
|
element.style[attrName] = value;
|
|
6562
6562
|
}
|
|
6563
6563
|
}
|
|
@@ -6568,20 +6568,20 @@ var PixodeskAnimator = (() => {
|
|
|
6568
6568
|
|
|
6569
6569
|
// src/engines/PxAnimatorWebApi.ts
|
|
6570
6570
|
function createCssKf(kf, t, propName, unsupportedSet) {
|
|
6571
|
-
let value =
|
|
6572
|
-
const e =
|
|
6571
|
+
let value = keyframeValue(kf);
|
|
6572
|
+
const e = keyframeEasing(kf);
|
|
6573
6573
|
const cssKf = {
|
|
6574
6574
|
offset: t,
|
|
6575
6575
|
easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
|
|
6576
6576
|
};
|
|
6577
6577
|
let cssValue;
|
|
6578
6578
|
let cssKey = propName;
|
|
6579
|
-
if (
|
|
6579
|
+
if (PX_COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
|
|
6580
6580
|
cssValue = toRGBA(value);
|
|
6581
6581
|
} else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
|
|
6582
6582
|
cssValue = composeTransformParts(value, { withUnits: true });
|
|
6583
6583
|
cssKey = "transform";
|
|
6584
|
-
} else if (
|
|
6584
|
+
} else if (PX_TRANSFORM_FN_NAMES.has(propName)) {
|
|
6585
6585
|
if (Array.isArray(value)) {
|
|
6586
6586
|
if (propName === "translate") value = value.map((v) => v + "px");
|
|
6587
6587
|
value = value.join(",");
|
|
@@ -6592,7 +6592,7 @@ var PixodeskAnimator = (() => {
|
|
|
6592
6592
|
} else if (propName === "d") {
|
|
6593
6593
|
const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
|
|
6594
6594
|
cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
|
|
6595
|
-
} else if (
|
|
6595
|
+
} else if (PX_PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
|
|
6596
6596
|
cssValue = value * 100 + "%";
|
|
6597
6597
|
} else {
|
|
6598
6598
|
cssValue = "" + value;
|
|
@@ -6675,7 +6675,7 @@ var PixodeskAnimator = (() => {
|
|
|
6675
6675
|
diag.warn(PxDiagnosticKind.host, "createWebApiAnimator: No root element provided");
|
|
6676
6676
|
}
|
|
6677
6677
|
}
|
|
6678
|
-
const bindings =
|
|
6678
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.native);
|
|
6679
6679
|
const animations = [];
|
|
6680
6680
|
const _iterations = config.iterations;
|
|
6681
6681
|
let iterations;
|
|
@@ -7157,7 +7157,7 @@ var PixodeskAnimator = (() => {
|
|
|
7157
7157
|
unpin = () => {
|
|
7158
7158
|
};
|
|
7159
7159
|
}
|
|
7160
|
-
const api = (animatorConfig.engine !==
|
|
7160
|
+
const api = (animatorConfig.engine !== PxTimelineEngineSetting.js ? createWebApiAnimator(doc, cb, rootElement, isNativeForced(animatorConfig.engine)) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
|
|
7161
7161
|
const subject = ((_a2 = api.getRootElement) == null ? void 0 : _a2.call(api)) || rootElement;
|
|
7162
7162
|
if (subject) {
|
|
7163
7163
|
unpin = applyScrollPin(subject, animatorConfig.scroll);
|
|
@@ -7183,7 +7183,7 @@ var PixodeskAnimator = (() => {
|
|
|
7183
7183
|
});
|
|
7184
7184
|
}
|
|
7185
7185
|
return finaliseAnimator(animatorConfig, callbacks, (cb) => {
|
|
7186
|
-
if (animatorConfig.engine ===
|
|
7186
|
+
if (animatorConfig.engine === PxTimelineEngineSetting.js) {
|
|
7187
7187
|
return createFrameLoopAnimator(doc, adapter, cb, rootElement);
|
|
7188
7188
|
}
|
|
7189
7189
|
return createWebApiAnimator(
|
|
@@ -7198,7 +7198,7 @@ var PixodeskAnimator = (() => {
|
|
|
7198
7198
|
// src/dom/PxAnimatorDOM.ts
|
|
7199
7199
|
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
7200
7200
|
function createElement(tagName, normalizedProps, style, children, textContent, diag) {
|
|
7201
|
-
if (
|
|
7201
|
+
if (PX_DISALLOWED_SVG_TAGS_LOWER.has(tagName.toLowerCase())) {
|
|
7202
7202
|
(diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document, "SVG tag blocked (dangerous): " + tagName);
|
|
7203
7203
|
return null;
|
|
7204
7204
|
}
|
|
@@ -7206,7 +7206,7 @@ var PixodeskAnimator = (() => {
|
|
|
7206
7206
|
for (const propName in normalizedProps) {
|
|
7207
7207
|
const sanitized = sanitizeAttributeValue(propName, normalizedProps[propName]);
|
|
7208
7208
|
if (sanitized === void 0) continue;
|
|
7209
|
-
if (
|
|
7209
|
+
if (PX_CSS_ONLY_STYLE_PROPS.has(propName)) {
|
|
7210
7210
|
element.style[propName] = String(sanitized);
|
|
7211
7211
|
continue;
|
|
7212
7212
|
}
|
|
@@ -7231,7 +7231,7 @@ var PixodeskAnimator = (() => {
|
|
|
7231
7231
|
const _a2 = node, { type, children, style } = _a2, props = __objRest(_a2, ["type", "children", "style"]);
|
|
7232
7232
|
const domType = props.domType;
|
|
7233
7233
|
if (domType !== void 0) delete props.domType;
|
|
7234
|
-
const nodeDefs =
|
|
7234
|
+
const nodeDefs = getDefinitions(node) || defs;
|
|
7235
7235
|
const resolvedStyle = style;
|
|
7236
7236
|
let childElements;
|
|
7237
7237
|
if (children) {
|
|
@@ -7245,10 +7245,10 @@ var PixodeskAnimator = (() => {
|
|
|
7245
7245
|
}
|
|
7246
7246
|
const element = createElement(
|
|
7247
7247
|
type || "g",
|
|
7248
|
-
|
|
7248
|
+
toDomProps(props),
|
|
7249
7249
|
resolvedStyle,
|
|
7250
7250
|
childElements,
|
|
7251
|
-
props[
|
|
7251
|
+
props[PX_TEXT_CONTENT_ATTR],
|
|
7252
7252
|
diag
|
|
7253
7253
|
);
|
|
7254
7254
|
if (element && domType !== void 0) element.setAttribute("type", domType);
|
|
@@ -7268,7 +7268,7 @@ var PixodeskAnimator = (() => {
|
|
|
7268
7268
|
for (const w of effectsWarnings) diag.warn(PxDiagnosticKind.document, "effects shape: " + w);
|
|
7269
7269
|
reportDocumentDiagnostics(doc, "[PxAnimator] createAnimator");
|
|
7270
7270
|
if (patch !== void 0 || resetTimeline) {
|
|
7271
|
-
const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, {
|
|
7271
|
+
const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, { resetTimeline: !!resetTimeline });
|
|
7272
7272
|
for (const w of patched.warnings) diag.warn(PxDiagnosticKind.usage, "timeline override: " + w);
|
|
7273
7273
|
doc = patched.doc;
|
|
7274
7274
|
}
|
|
@@ -7349,7 +7349,7 @@ var PixodeskAnimator = (() => {
|
|
|
7349
7349
|
} else {
|
|
7350
7350
|
fetch(src).then((res) => res.json()).then((json) => {
|
|
7351
7351
|
if (destroyed) return;
|
|
7352
|
-
if (
|
|
7352
|
+
if (isPxDocument(json)) build(json);
|
|
7353
7353
|
else failed(PxDiagnosticKind.document, 'createAnimator: invalid animation document format at "' + src + '"');
|
|
7354
7354
|
}).catch((err) => {
|
|
7355
7355
|
var _a2;
|