@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
|
@@ -545,7 +545,7 @@ var PixodeskAnimator = (() => {
|
|
|
545
545
|
* The base can be the result of px.object() or px.openObject() — anything with a _shape property.
|
|
546
546
|
*
|
|
547
547
|
* @example
|
|
548
|
-
* const PxSvgNodeSchema = px.extendedObject(
|
|
548
|
+
* const PxSvgNodeSchema = px.extendedObject(PxNodeBaseSchema, { width: px.number().optional() });
|
|
549
549
|
*/
|
|
550
550
|
extendedObject: (base, extra) => new Obj(__spreadValues(__spreadValues({}, base._shape), extra)),
|
|
551
551
|
/** Array whose unrecoverable items are filtered out. Default: []. */
|
|
@@ -637,7 +637,7 @@ var PixodeskAnimator = (() => {
|
|
|
637
637
|
native: "native",
|
|
638
638
|
js: "js"
|
|
639
639
|
};
|
|
640
|
-
var
|
|
640
|
+
var PxTimelineEngineSetting = __spreadProps(__spreadValues({}, PxTimelineEngine), {
|
|
641
641
|
auto: "auto"
|
|
642
642
|
});
|
|
643
643
|
var PX_TRIGGER_DEFAULTS = {
|
|
@@ -780,7 +780,7 @@ var PixodeskAnimator = (() => {
|
|
|
780
780
|
flattenMemo.set(cfg, flat);
|
|
781
781
|
return flat;
|
|
782
782
|
}
|
|
783
|
-
function
|
|
783
|
+
function getDefinitions(doc) {
|
|
784
784
|
var _a;
|
|
785
785
|
if (!doc) return void 0;
|
|
786
786
|
return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
|
|
@@ -823,20 +823,20 @@ var PixodeskAnimator = (() => {
|
|
|
823
823
|
// its internal COPY-PASTE payload, which never validates against this schema.)
|
|
824
824
|
}));
|
|
825
825
|
var anyKf = (kf) => kf;
|
|
826
|
-
var
|
|
826
|
+
var keyframeTime = (kf) => {
|
|
827
827
|
var _a, _b;
|
|
828
828
|
return (_b = (_a = anyKf(kf).time) != null ? _a : anyKf(kf).t) != null ? _b : 0;
|
|
829
829
|
};
|
|
830
|
-
var
|
|
830
|
+
var keyframeValue = (kf) => {
|
|
831
831
|
var _a;
|
|
832
832
|
return (_a = anyKf(kf).value) != null ? _a : anyKf(kf).v;
|
|
833
833
|
};
|
|
834
|
-
var
|
|
834
|
+
var keyframeEasing = (kf) => {
|
|
835
835
|
var _a;
|
|
836
836
|
return (_a = anyKf(kf).easing) != null ? _a : anyKf(kf).e;
|
|
837
837
|
};
|
|
838
|
-
var
|
|
839
|
-
var
|
|
838
|
+
var keyframeTangentIn = (kf) => anyKf(kf).tangentIn;
|
|
839
|
+
var keyframeTangentOut = (kf) => anyKf(kf).tangentOut;
|
|
840
840
|
var PxLoopSchema = implementsInterface()(px.object({
|
|
841
841
|
segmentCount: px.number().optional(),
|
|
842
842
|
repeatAt: px.enum([PxLoopRepeatAt.start, PxLoopRepeatAt.end]).optional(),
|
|
@@ -890,7 +890,7 @@ var PixodeskAnimator = (() => {
|
|
|
890
890
|
unitsPerEm: px.number(),
|
|
891
891
|
glyphs: px.record(PxGlyphSchema)
|
|
892
892
|
}));
|
|
893
|
-
var
|
|
893
|
+
var PxDefinitionsSchema = implementsInterface()(px.object({
|
|
894
894
|
easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
|
|
895
895
|
animations: px.record(PxAnimationDefinitionSchema).optional(),
|
|
896
896
|
fonts: px.record(PxGlyphFontSchema).optional()
|
|
@@ -928,7 +928,7 @@ var PixodeskAnimator = (() => {
|
|
|
928
928
|
offset: px.number().optional(),
|
|
929
929
|
distance: px.number().optional()
|
|
930
930
|
}));
|
|
931
|
-
var PxTimelineEngineSchema = px.enum([
|
|
931
|
+
var PxTimelineEngineSchema = px.enum([PxTimelineEngineSetting.auto, PxTimelineEngineSetting.native, PxTimelineEngineSetting.js]).optional();
|
|
932
932
|
var PxTimeTimelineSchema = implementsInterface()(px.object({
|
|
933
933
|
type: px.literal("time").optional(),
|
|
934
934
|
engine: PxTimelineEngineSchema,
|
|
@@ -982,7 +982,7 @@ var PixodeskAnimator = (() => {
|
|
|
982
982
|
// at this level only on the runtime view, like the rest of the playback dynamics.)
|
|
983
983
|
// THE spelling of "what advances progress" — clock / scroll / view (review §2.1).
|
|
984
984
|
timeline: PxTimelineSchema.optional(),
|
|
985
|
-
definitions:
|
|
985
|
+
definitions: PxDefinitionsSchema.optional(),
|
|
986
986
|
bindings: px.array(PxBindingSchema).optional(),
|
|
987
987
|
debugGlobalName: px.string().optional(),
|
|
988
988
|
// Declared HERE because this is a closed object: an undeclared key would be stripped by
|
|
@@ -1071,7 +1071,7 @@ var PixodeskAnimator = (() => {
|
|
|
1071
1071
|
PxPropertyAnimationSchema
|
|
1072
1072
|
]);
|
|
1073
1073
|
var PxFillGradientEffectSchema = implementsInterface()(px.object({
|
|
1074
|
-
// Contextual kind — the `type` convention, see `
|
|
1074
|
+
// Contextual kind — the `type` convention, see `PxNodeBaseSchema.type`.
|
|
1075
1075
|
type: px.enum([PxGradientType.linear, PxGradientType.radial]),
|
|
1076
1076
|
start: PxAnimatableVec2Schema.optional(),
|
|
1077
1077
|
end: PxAnimatableVec2Schema.optional(),
|
|
@@ -1108,7 +1108,7 @@ var PixodeskAnimator = (() => {
|
|
|
1108
1108
|
textPath: PxTextPathEffectSchema.optional(),
|
|
1109
1109
|
text: PxTextEffectSchema.optional()
|
|
1110
1110
|
}));
|
|
1111
|
-
var
|
|
1111
|
+
var PxNodeBaseSchema = px.openObject({
|
|
1112
1112
|
// CONVENTION (SCHEMA-DESIGN R1 / issues N4): `type` is the ONE word for "what
|
|
1113
1113
|
// kind of thing is this", discriminated by its CARRIER — here the node TAG
|
|
1114
1114
|
// (`rect`, `text`), and inside a sub-object that object's kind (`fillGradient.type`,
|
|
@@ -1123,7 +1123,7 @@ var PixodeskAnimator = (() => {
|
|
|
1123
1123
|
// `type` is taken by the tag name, so the attribute travels here and the renderer puts
|
|
1124
1124
|
// it back (`PxAnimatorDOM.renderNode`, `PxRnRender`). Declared here — not merely
|
|
1125
1125
|
// documented — because a wire key that is not in a schema is invisible to the
|
|
1126
|
-
// minifier's reserve list and gets renamed (
|
|
1126
|
+
// minifier's reserve list and gets renamed (dev-docs/plans/minification-boundary.md §1.1).
|
|
1127
1127
|
domType: px.string().optional(),
|
|
1128
1128
|
// Text content of a `<text>` / `<tspan>`. Declared, so a non-string value is a schema error
|
|
1129
1129
|
// and the minifier reserves the key; `text` is NOT an alias for it and is not read anywhere.
|
|
@@ -1131,7 +1131,7 @@ var PixodeskAnimator = (() => {
|
|
|
1131
1131
|
id: px.string().optional(),
|
|
1132
1132
|
meta: px.any().optional(),
|
|
1133
1133
|
// Player-effects bucket emitted by the Editor's lightweight design format.
|
|
1134
|
-
// Consumed and removed by `
|
|
1134
|
+
// Consumed and removed by `materializeNodeEffects` before any other normalization
|
|
1135
1135
|
// (see `createAnimatorImpl`), so downstream code never sees it.
|
|
1136
1136
|
effects: PxEffectsSchema.optional(),
|
|
1137
1137
|
// `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
|
|
@@ -1140,10 +1140,10 @@ var PixodeskAnimator = (() => {
|
|
|
1140
1140
|
animate: PxElementAnimationSchema.optional(),
|
|
1141
1141
|
style: px.record(px.union([px.string(), px.number()])).optional()
|
|
1142
1142
|
}, PxAttrValueSchema);
|
|
1143
|
-
var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({},
|
|
1143
|
+
var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBaseSchema._shape), {
|
|
1144
1144
|
children: px.lazy(() => px.array(PxNodeSchema), []).optional()
|
|
1145
1145
|
}), PxAttrValueSchema);
|
|
1146
|
-
var
|
|
1146
|
+
var PxSvgNodeRootSchema = px.object({
|
|
1147
1147
|
// `"100%"` and other SVG length strings are legal here — a number-only slot rejected
|
|
1148
1148
|
// real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
|
|
1149
1149
|
width: px.union([px.number(), px.string()]).optional(),
|
|
@@ -1151,7 +1151,7 @@ var PixodeskAnimator = (() => {
|
|
|
1151
1151
|
viewBox: px.string().optional(),
|
|
1152
1152
|
animator: PxAnimatorConfigSchema.optional()
|
|
1153
1153
|
});
|
|
1154
|
-
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({},
|
|
1154
|
+
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({}, PxNodeBaseSchema._shape), PxSvgNodeRootSchema._shape), {
|
|
1155
1155
|
type: px.literal("svg"),
|
|
1156
1156
|
// override string → literal to require 'svg'
|
|
1157
1157
|
children: px.array(PxNodeSchema).optional()
|
|
@@ -1388,9 +1388,9 @@ var PixodeskAnimator = (() => {
|
|
|
1388
1388
|
}
|
|
1389
1389
|
return void 0;
|
|
1390
1390
|
}
|
|
1391
|
-
var
|
|
1392
|
-
var
|
|
1393
|
-
var
|
|
1391
|
+
var PX_COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
|
|
1392
|
+
var PX_TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
|
|
1393
|
+
var PX_PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
|
|
1394
1394
|
function composeTransformParts(parts, opts) {
|
|
1395
1395
|
var _a;
|
|
1396
1396
|
if (!parts) return "";
|
|
@@ -1588,7 +1588,7 @@ var PixodeskAnimator = (() => {
|
|
|
1588
1588
|
|
|
1589
1589
|
// ../svg-animator-core/src/materialize/PxMotionPath.ts
|
|
1590
1590
|
function getKfTranslate(kf) {
|
|
1591
|
-
const v =
|
|
1591
|
+
const v = keyframeValue(kf);
|
|
1592
1592
|
if (!v) return void 0;
|
|
1593
1593
|
if (Array.isArray(v) && v.length >= 2 && typeof v[0] === "number" && typeof v[1] === "number") {
|
|
1594
1594
|
return [v[0], v[1]];
|
|
@@ -1598,17 +1598,17 @@ var PixodeskAnimator = (() => {
|
|
|
1598
1598
|
return void 0;
|
|
1599
1599
|
}
|
|
1600
1600
|
function getKfTime(kf) {
|
|
1601
|
-
return
|
|
1601
|
+
return keyframeTime(kf);
|
|
1602
1602
|
}
|
|
1603
1603
|
function getKfEasing(kf) {
|
|
1604
|
-
return
|
|
1604
|
+
return keyframeEasing(kf);
|
|
1605
1605
|
}
|
|
1606
1606
|
function propAnimIsMotionPath(anim) {
|
|
1607
1607
|
const kfs = anim.keyframes;
|
|
1608
1608
|
if (!Array.isArray(kfs)) return false;
|
|
1609
1609
|
if (anim.autoOrient) return true;
|
|
1610
1610
|
for (const kf of kfs) {
|
|
1611
|
-
if (
|
|
1611
|
+
if (keyframeTangentIn(kf) || keyframeTangentOut(kf)) return true;
|
|
1612
1612
|
}
|
|
1613
1613
|
return false;
|
|
1614
1614
|
}
|
|
@@ -1617,8 +1617,8 @@ var PixodeskAnimator = (() => {
|
|
|
1617
1617
|
let byNext = _segmentCache.get(prevKf);
|
|
1618
1618
|
const existing = byNext == null ? void 0 : byNext.get(nextKf);
|
|
1619
1619
|
if (existing) return existing;
|
|
1620
|
-
const to =
|
|
1621
|
-
const ti =
|
|
1620
|
+
const to = keyframeTangentOut(prevKf);
|
|
1621
|
+
const ti = keyframeTangentIn(nextKf);
|
|
1622
1622
|
const P1 = [prevPos[0] + (to ? to[0] : 0), prevPos[1] + (to ? to[1] : 0)];
|
|
1623
1623
|
const P2 = [nextPos[0] + (ti ? ti[0] : 0), nextPos[1] + (ti ? ti[1] : 0)];
|
|
1624
1624
|
const lut = bezier2D_arcLengthLUT(prevPos, P1, P2, nextPos);
|
|
@@ -1684,7 +1684,7 @@ var PixodeskAnimator = (() => {
|
|
|
1684
1684
|
function unwrapAutoOrientRotations(kfs) {
|
|
1685
1685
|
let prev;
|
|
1686
1686
|
for (const kf of kfs) {
|
|
1687
|
-
const v =
|
|
1687
|
+
const v = keyframeValue(kf);
|
|
1688
1688
|
if (!v || typeof v.rotate !== "number") continue;
|
|
1689
1689
|
if (prev === void 0) {
|
|
1690
1690
|
prev = v.rotate;
|
|
@@ -1701,7 +1701,7 @@ var PixodeskAnimator = (() => {
|
|
|
1701
1701
|
return { t: time, v: value };
|
|
1702
1702
|
}
|
|
1703
1703
|
function getKfValueParts(kf) {
|
|
1704
|
-
const v =
|
|
1704
|
+
const v = keyframeValue(kf);
|
|
1705
1705
|
if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
|
|
1706
1706
|
return v;
|
|
1707
1707
|
}
|
|
@@ -1763,7 +1763,7 @@ var PixodeskAnimator = (() => {
|
|
|
1763
1763
|
}
|
|
1764
1764
|
function insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol) {
|
|
1765
1765
|
const lastKf = out[out.length - 1];
|
|
1766
|
-
const lastV =
|
|
1766
|
+
const lastV = keyframeValue(lastKf);
|
|
1767
1767
|
const prevExit = lastV == null ? void 0 : lastV.rotate;
|
|
1768
1768
|
if (typeof prevExit !== "number") return;
|
|
1769
1769
|
const boundaryV = getKfValueParts(prevKf);
|
|
@@ -1911,7 +1911,7 @@ var PixodeskAnimator = (() => {
|
|
|
1911
1911
|
}
|
|
1912
1912
|
|
|
1913
1913
|
// ../svg-animator-core/src/animation/PxDefinitions.ts
|
|
1914
|
-
var
|
|
1914
|
+
var PX_LOOP_JUMP_SHIFT_MS = 1;
|
|
1915
1915
|
function deepEqualValue(a, b) {
|
|
1916
1916
|
if (a === b) return true;
|
|
1917
1917
|
if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
|
|
@@ -2087,7 +2087,7 @@ var PixodeskAnimator = (() => {
|
|
|
2087
2087
|
const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
|
|
2088
2088
|
return { paths: interpolateBeziers(aPaths, bPaths, t) };
|
|
2089
2089
|
}
|
|
2090
|
-
if (
|
|
2090
|
+
if (PX_COLOR_ATTR_NAMES.has(propName)) {
|
|
2091
2091
|
return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
|
|
2092
2092
|
}
|
|
2093
2093
|
if (propName === "transform" && typeof a === "object" && a !== null && !Array.isArray(a) && typeof b === "object" && b !== null && !Array.isArray(b)) {
|
|
@@ -2096,7 +2096,7 @@ var PixodeskAnimator = (() => {
|
|
|
2096
2096
|
if (propName === "rotate" && typeof a === "number" && typeof b === "number") {
|
|
2097
2097
|
return interpolateNum(a, b, t);
|
|
2098
2098
|
}
|
|
2099
|
-
if (
|
|
2099
|
+
if (PX_TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
|
|
2100
2100
|
return interpolateVec(a || [], b || [], t);
|
|
2101
2101
|
}
|
|
2102
2102
|
return interpolateNum(+(a || 0), +(b || 0), t);
|
|
@@ -2148,8 +2148,8 @@ var PixodeskAnimator = (() => {
|
|
|
2148
2148
|
relT: (kf.t - segStartT) / segDuration,
|
|
2149
2149
|
v: kf.v,
|
|
2150
2150
|
e: kf.e,
|
|
2151
|
-
tangentIn:
|
|
2152
|
-
tangentOut:
|
|
2151
|
+
tangentIn: keyframeTangentIn(kf),
|
|
2152
|
+
tangentOut: keyframeTangentOut(kf)
|
|
2153
2153
|
}));
|
|
2154
2154
|
const fullReps = Math.floor(fillDuration / segDuration);
|
|
2155
2155
|
const remainder = fillDuration - fullReps * segDuration;
|
|
@@ -2215,7 +2215,7 @@ var PixodeskAnimator = (() => {
|
|
|
2215
2215
|
}
|
|
2216
2216
|
}
|
|
2217
2217
|
const pushed = {
|
|
2218
|
-
t: repStart + entry.relT * segDuration + (isBoundary ?
|
|
2218
|
+
t: repStart + entry.relT * segDuration + (isBoundary ? PX_LOOP_JUMP_SHIFT_MS : 0),
|
|
2219
2219
|
v: entry.v,
|
|
2220
2220
|
e: i < entries.length - 1 ? entry.e : void 0
|
|
2221
2221
|
};
|
|
@@ -2302,14 +2302,14 @@ var PixodeskAnimator = (() => {
|
|
|
2302
2302
|
const keyframes = propAnim.keyframes || [];
|
|
2303
2303
|
const normalized = [];
|
|
2304
2304
|
for (const kf of keyframes) {
|
|
2305
|
-
const timePct =
|
|
2306
|
-
let value =
|
|
2307
|
-
const easing =
|
|
2305
|
+
const timePct = keyframeTime(kf);
|
|
2306
|
+
let value = keyframeValue(kf);
|
|
2307
|
+
const easing = keyframeEasing(kf);
|
|
2308
2308
|
if (propName === "d") {
|
|
2309
2309
|
value = normalizePathValue(value);
|
|
2310
2310
|
}
|
|
2311
2311
|
const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
|
|
2312
|
-
if (
|
|
2312
|
+
if (PX_COLOR_ATTR_NAMES.has(propNameKebab)) {
|
|
2313
2313
|
value = (_a = parseColor(value)) != null ? _a : value;
|
|
2314
2314
|
}
|
|
2315
2315
|
const normKf = {
|
|
@@ -2317,8 +2317,8 @@ var PixodeskAnimator = (() => {
|
|
|
2317
2317
|
v: value,
|
|
2318
2318
|
e: resolveEasing(easing, defs)
|
|
2319
2319
|
};
|
|
2320
|
-
const tIn =
|
|
2321
|
-
const tOut =
|
|
2320
|
+
const tIn = keyframeTangentIn(kf);
|
|
2321
|
+
const tOut = keyframeTangentOut(kf);
|
|
2322
2322
|
if (tIn) normKf.tangentIn = tIn;
|
|
2323
2323
|
if (tOut) normKf.tangentOut = tOut;
|
|
2324
2324
|
normalized.push(normKf);
|
|
@@ -2364,7 +2364,7 @@ var PixodeskAnimator = (() => {
|
|
|
2364
2364
|
}
|
|
2365
2365
|
return animDef;
|
|
2366
2366
|
}
|
|
2367
|
-
const channels = Object.keys(animDef).filter((k) =>
|
|
2367
|
+
const channels = Object.keys(animDef).filter((k) => PX_TRANSFORM_FN_NAMES.has(k));
|
|
2368
2368
|
if (channels.length !== 1) return animDef;
|
|
2369
2369
|
const ch = channels[0];
|
|
2370
2370
|
const chAnim = animDef[ch];
|
|
@@ -2393,9 +2393,9 @@ var PixodeskAnimator = (() => {
|
|
|
2393
2393
|
}
|
|
2394
2394
|
return normalized;
|
|
2395
2395
|
}
|
|
2396
|
-
function
|
|
2396
|
+
function normalizeBindings(doc, engine = PxTimelineEngine.native) {
|
|
2397
2397
|
const animatorConfig = getAnimatorConfig(doc) || {};
|
|
2398
|
-
const defs =
|
|
2398
|
+
const defs = getDefinitions(doc);
|
|
2399
2399
|
const duration = animatorConfig.duration || 1e3;
|
|
2400
2400
|
const bindings = [];
|
|
2401
2401
|
const processAnimation = (id, animDefs, staticTransform) => {
|
|
@@ -2440,7 +2440,6 @@ var PixodeskAnimator = (() => {
|
|
|
2440
2440
|
}
|
|
2441
2441
|
|
|
2442
2442
|
// ../svg-animator-core/src/playback/PxPlaybackTime.ts
|
|
2443
|
-
var PX_RATE_REJECTED = "setPlaybackRate: rate must be finite and non-zero";
|
|
2444
2443
|
function isValidPlaybackRate(rate) {
|
|
2445
2444
|
return Number.isFinite(rate) && rate !== 0;
|
|
2446
2445
|
}
|
|
@@ -2486,32 +2485,34 @@ var PixodeskAnimator = (() => {
|
|
|
2486
2485
|
/** The player failed where it did not expect to — report it to us. */
|
|
2487
2486
|
internal: "internal"
|
|
2488
2487
|
};
|
|
2489
|
-
|
|
2490
|
-
|
|
2488
|
+
var DOCS_URL = "https://github.com/pixodesk/pixodesk-svg-animator/blob/main/docs/diagnostics.md";
|
|
2489
|
+
function codeLine(code) {
|
|
2490
|
+
return "PX" + code + " " + DOCS_URL + "#px" + code;
|
|
2491
|
+
}
|
|
2492
|
+
function errorIn(data) {
|
|
2493
|
+
return data.find((d) => d instanceof Error);
|
|
2491
2494
|
}
|
|
2492
2495
|
function createDiagnostics(config, prefix) {
|
|
2493
2496
|
const tag = prefix ? prefix + " " : "";
|
|
2494
2497
|
return {
|
|
2495
|
-
warn: (kind,
|
|
2498
|
+
warn: (kind, code, ...data) => {
|
|
2499
|
+
const message = codeLine(code);
|
|
2496
2500
|
if (config == null ? void 0 : config.onWarn) {
|
|
2497
|
-
config.onWarn({ kind,
|
|
2501
|
+
config.onWarn({ code, kind, data, message });
|
|
2498
2502
|
return;
|
|
2499
2503
|
}
|
|
2500
2504
|
if (config == null ? void 0 : config.muteWarn) return;
|
|
2501
|
-
|
|
2502
|
-
if (detail === void 0) console.warn(line);
|
|
2503
|
-
else console.warn(line, detail);
|
|
2505
|
+
console.warn(tag + kind + " " + message, ...data);
|
|
2504
2506
|
},
|
|
2505
|
-
error: (kind,
|
|
2506
|
-
const
|
|
2507
|
+
error: (kind, code, ...data) => {
|
|
2508
|
+
const message = codeLine(code);
|
|
2509
|
+
const error = errorIn(data);
|
|
2507
2510
|
if (config == null ? void 0 : config.onError) {
|
|
2508
|
-
config.onError({ kind,
|
|
2511
|
+
config.onError({ code, kind, data, message, error });
|
|
2509
2512
|
return;
|
|
2510
2513
|
}
|
|
2511
2514
|
if (config == null ? void 0 : config.muteError) return;
|
|
2512
|
-
|
|
2513
|
-
if (detail === void 0) console.error(line);
|
|
2514
|
-
else console.error(line, detail);
|
|
2515
|
+
console.error(tag + kind + " " + message, ...data);
|
|
2515
2516
|
}
|
|
2516
2517
|
};
|
|
2517
2518
|
}
|
|
@@ -2565,16 +2566,16 @@ var PixodeskAnimator = (() => {
|
|
|
2565
2566
|
}
|
|
2566
2567
|
|
|
2567
2568
|
// src/triggers/PxAnimatorTriggers.ts
|
|
2568
|
-
function setupAnimationTriggers(api,
|
|
2569
|
+
function setupAnimationTriggers(api, trigger, diag) {
|
|
2569
2570
|
const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
|
|
2570
2571
|
const cleanups = [];
|
|
2571
2572
|
const dispose = () => {
|
|
2572
2573
|
for (const undo of cleanups.splice(0)) undo();
|
|
2573
2574
|
};
|
|
2574
|
-
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(
|
|
2575
|
+
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
|
|
2575
2576
|
const root = api.getRootElement();
|
|
2576
2577
|
if (!root) {
|
|
2577
|
-
report.warn(PxDiagnosticKind.host,
|
|
2578
|
+
report.warn(PxDiagnosticKind.host, 1201 /* triggersNoRoot */);
|
|
2578
2579
|
return dispose;
|
|
2579
2580
|
}
|
|
2580
2581
|
let reversed = false;
|
|
@@ -2688,20 +2689,20 @@ var PixodeskAnimator = (() => {
|
|
|
2688
2689
|
|
|
2689
2690
|
// src/engines/PxAnimatorWebApi.ts
|
|
2690
2691
|
function createCssKf(kf, t, propName, unsupportedSet) {
|
|
2691
|
-
let value =
|
|
2692
|
-
const e =
|
|
2692
|
+
let value = keyframeValue(kf);
|
|
2693
|
+
const e = keyframeEasing(kf);
|
|
2693
2694
|
const cssKf = {
|
|
2694
2695
|
offset: t,
|
|
2695
2696
|
easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
|
|
2696
2697
|
};
|
|
2697
2698
|
let cssValue;
|
|
2698
2699
|
let cssKey = propName;
|
|
2699
|
-
if (
|
|
2700
|
+
if (PX_COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
|
|
2700
2701
|
cssValue = toRGBA(value);
|
|
2701
2702
|
} else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
|
|
2702
2703
|
cssValue = composeTransformParts(value, { withUnits: true });
|
|
2703
2704
|
cssKey = "transform";
|
|
2704
|
-
} else if (
|
|
2705
|
+
} else if (PX_TRANSFORM_FN_NAMES.has(propName)) {
|
|
2705
2706
|
if (Array.isArray(value)) {
|
|
2706
2707
|
if (propName === "translate") value = value.map((v) => v + "px");
|
|
2707
2708
|
value = value.join(",");
|
|
@@ -2712,7 +2713,7 @@ var PixodeskAnimator = (() => {
|
|
|
2712
2713
|
} else if (propName === "d") {
|
|
2713
2714
|
const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
|
|
2714
2715
|
cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
|
|
2715
|
-
} else if (
|
|
2716
|
+
} else if (PX_PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
|
|
2716
2717
|
cssValue = value * 100 + "%";
|
|
2717
2718
|
} else {
|
|
2718
2719
|
cssValue = "" + value;
|
|
@@ -2790,12 +2791,12 @@ var PixodeskAnimator = (() => {
|
|
|
2790
2791
|
if (doc.id) {
|
|
2791
2792
|
const rootSelector = getSelector(doc.id);
|
|
2792
2793
|
rootElement = document.querySelector(rootSelector);
|
|
2793
|
-
if (!rootElement) diag.warn(PxDiagnosticKind.host,
|
|
2794
|
+
if (!rootElement) diag.warn(PxDiagnosticKind.host, 1202 /* noRootForSelector */, rootSelector);
|
|
2794
2795
|
} else {
|
|
2795
|
-
diag.warn(PxDiagnosticKind.host,
|
|
2796
|
+
diag.warn(PxDiagnosticKind.host, 1203 /* noRootElement */);
|
|
2796
2797
|
}
|
|
2797
2798
|
}
|
|
2798
|
-
const bindings =
|
|
2799
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.native);
|
|
2799
2800
|
const animations = [];
|
|
2800
2801
|
const _iterations = config.iterations;
|
|
2801
2802
|
let iterations;
|
|
@@ -2805,18 +2806,18 @@ var PixodeskAnimator = (() => {
|
|
|
2805
2806
|
let finishNotified = false;
|
|
2806
2807
|
let removeCalled = false;
|
|
2807
2808
|
if (!(bindings == null ? void 0 : bindings.length)) {
|
|
2808
|
-
diag.warn(PxDiagnosticKind.document,
|
|
2809
|
+
diag.warn(PxDiagnosticKind.document, 1105 /* noBindings */);
|
|
2809
2810
|
}
|
|
2810
2811
|
for (const binding of bindings || []) {
|
|
2811
2812
|
const animDef = binding.animate;
|
|
2812
2813
|
if (!animDef || typeof animDef !== "object" || Array.isArray(animDef)) {
|
|
2813
|
-
diag.warn(PxDiagnosticKind.document,
|
|
2814
|
+
diag.warn(PxDiagnosticKind.document, 1106 /* unresolvedBinding */, binding);
|
|
2814
2815
|
continue;
|
|
2815
2816
|
}
|
|
2816
2817
|
const selector = getSelector(binding.id);
|
|
2817
2818
|
const elements = (rootElement == null ? void 0 : rootElement.querySelectorAll(selector)) || document.querySelectorAll(selector);
|
|
2818
2819
|
if (elements.length === 0) {
|
|
2819
|
-
diag.warn(PxDiagnosticKind.host,
|
|
2820
|
+
diag.warn(PxDiagnosticKind.host, 1206 /* noElementsForSelector */, selector);
|
|
2820
2821
|
}
|
|
2821
2822
|
const keyframesMap = convertToWebApiKeyframes(animDef, unsupportedSet, config);
|
|
2822
2823
|
const positiveDelay = config.delay && config.delay > 0 ? config.delay : void 0;
|
|
@@ -2865,14 +2866,14 @@ var PixodeskAnimator = (() => {
|
|
|
2865
2866
|
}
|
|
2866
2867
|
animations.push(anim);
|
|
2867
2868
|
} catch (e) {
|
|
2868
|
-
diag.warn(PxDiagnosticKind.internal,
|
|
2869
|
+
diag.warn(PxDiagnosticKind.internal, 1004 /* animationBuildFailed */, e);
|
|
2869
2870
|
}
|
|
2870
2871
|
}
|
|
2871
2872
|
}
|
|
2872
2873
|
}
|
|
2873
2874
|
}
|
|
2874
2875
|
if (!forceEvenIfHasUnsupportedAttrs && unsupportedSet.size) {
|
|
2875
|
-
diag.warn(PxDiagnosticKind.platform,
|
|
2876
|
+
diag.warn(PxDiagnosticKind.platform, 1104 /* unsupportedAnimatedAttrs */, [...unsupportedSet].join(", "));
|
|
2876
2877
|
return null;
|
|
2877
2878
|
}
|
|
2878
2879
|
const api = {
|
|
@@ -2917,7 +2918,7 @@ var PixodeskAnimator = (() => {
|
|
|
2917
2918
|
},
|
|
2918
2919
|
"setPlaybackRate": (rate) => {
|
|
2919
2920
|
if (!isValidPlaybackRate(rate)) {
|
|
2920
|
-
diag.warn(PxDiagnosticKind.usage,
|
|
2921
|
+
diag.warn(PxDiagnosticKind.usage, 1401 /* rateRejected */);
|
|
2921
2922
|
return api;
|
|
2922
2923
|
}
|
|
2923
2924
|
animations.forEach((a) => a.playbackRate = rate);
|
|
@@ -2957,7 +2958,7 @@ var PixodeskAnimator = (() => {
|
|
|
2957
2958
|
}
|
|
2958
2959
|
};
|
|
2959
2960
|
if (config.timelineSource === "scroll") {
|
|
2960
|
-
if (config.trigger) diag.warn(PxDiagnosticKind.usage,
|
|
2961
|
+
if (config.trigger) diag.warn(PxDiagnosticKind.usage, 1306 /* scrollTriggerIgnored */);
|
|
2961
2962
|
} else {
|
|
2962
2963
|
const detachTriggers = setupAnimationTriggers(api, (_b = config.trigger) != null ? _b : {}, diag);
|
|
2963
2964
|
const destroyEngine = api.destroy.bind(api);
|
|
@@ -3001,7 +3002,7 @@ var PixodeskAnimator = (() => {
|
|
|
3001
3002
|
return build();
|
|
3002
3003
|
} catch (e) {
|
|
3003
3004
|
const err = asThrownError(e);
|
|
3004
|
-
createDiagnostics(options, "[PxAnimator]").error(PxDiagnosticKind.internal,
|
|
3005
|
+
createDiagnostics(options, "[PxAnimator]").error(PxDiagnosticKind.internal, 1001 /* buildFailed */, err);
|
|
3005
3006
|
return createInertAnimator();
|
|
3006
3007
|
}
|
|
3007
3008
|
}
|