@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.
@@ -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(PxNodeBase, { width: px.number().optional() });
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 PxTimelineEngineExtra = __spreadProps(__spreadValues({}, PxTimelineEngine), {
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 getDefs(doc) {
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 kfTime = (kf) => {
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 kfValue = (kf) => {
830
+ var keyframeValue = (kf) => {
831
831
  var _a;
832
832
  return (_a = anyKf(kf).value) != null ? _a : anyKf(kf).v;
833
833
  };
834
- var kfEasing = (kf) => {
834
+ var keyframeEasing = (kf) => {
835
835
  var _a;
836
836
  return (_a = anyKf(kf).easing) != null ? _a : anyKf(kf).e;
837
837
  };
838
- var kfTangentIn = (kf) => anyKf(kf).tangentIn;
839
- var kfTangentOut = (kf) => anyKf(kf).tangentOut;
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 PxDefsSchema = implementsInterface()(px.object({
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([PxTimelineEngineExtra.auto, PxTimelineEngineExtra.native, PxTimelineEngineExtra.js]).optional();
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: PxDefsSchema.optional(),
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 `PxNodeBase.type`.
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 PxNodeBase = px.openObject({
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 (MINIFICATION-BOUNDARY-PLAN.md §1.1).
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 `applyPlayerEffects` before any other normalization
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({}, PxNodeBase._shape), {
1143
+ var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBaseSchema._shape), {
1144
1144
  children: px.lazy(() => px.array(PxNodeSchema), []).optional()
1145
1145
  }), PxAttrValueSchema);
1146
- var PxSvgNodeExtra = px.object({
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({}, PxNodeBase._shape), PxSvgNodeExtra._shape), {
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 COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
1392
- var TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
1393
- var PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
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 = kfValue(kf);
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 kfTime(kf);
1601
+ return keyframeTime(kf);
1602
1602
  }
1603
1603
  function getKfEasing(kf) {
1604
- return kfEasing(kf);
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 (kfTangentIn(kf) || kfTangentOut(kf)) return true;
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 = kfTangentOut(prevKf);
1621
- const ti = kfTangentIn(nextKf);
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 = kfValue(kf);
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 = kfValue(kf);
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 = kfValue(lastKf);
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 LOOP_JUMP_SHIFT_MS = 1;
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 (COLOR_ATTR_NAMES.has(propName)) {
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 (TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
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: kfTangentIn(kf),
2152
- tangentOut: kfTangentOut(kf)
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 ? LOOP_JUMP_SHIFT_MS : 0),
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 = kfTime(kf);
2306
- let value = kfValue(kf);
2307
- const easing = kfEasing(kf);
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 (COLOR_ATTR_NAMES.has(propNameKebab)) {
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 = kfTangentIn(kf);
2321
- const tOut = kfTangentOut(kf);
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) => TRANSFORM_FN_NAMES.has(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 getNormalizedBindings(doc, engine = PxTimelineEngine.native) {
2396
+ function normalizeBindings(doc, engine = PxTimelineEngine.native) {
2397
2397
  const animatorConfig = getAnimatorConfig(doc) || {};
2398
- const defs = getDefs(doc);
2398
+ const defs = getDefinitions(doc);
2399
2399
  const duration = animatorConfig.duration || 1e3;
2400
2400
  const bindings = [];
2401
2401
  const processAnimation = (id, animDefs, staticTransform) => {
@@ -2565,13 +2565,13 @@ var PixodeskAnimator = (() => {
2565
2565
  }
2566
2566
 
2567
2567
  // src/triggers/PxAnimatorTriggers.ts
2568
- function setupAnimationTriggers(api, config, diag) {
2568
+ function setupAnimationTriggers(api, trigger, diag) {
2569
2569
  const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
2570
2570
  const cleanups = [];
2571
2571
  const dispose = () => {
2572
2572
  for (const undo of cleanups.splice(0)) undo();
2573
2573
  };
2574
- const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(config);
2574
+ const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
2575
2575
  const root = api.getRootElement();
2576
2576
  if (!root) {
2577
2577
  report.warn(PxDiagnosticKind.host, "setupAnimationTriggers: No root element found for animation.");
@@ -2688,20 +2688,20 @@ var PixodeskAnimator = (() => {
2688
2688
 
2689
2689
  // src/engines/PxAnimatorWebApi.ts
2690
2690
  function createCssKf(kf, t, propName, unsupportedSet) {
2691
- let value = kfValue(kf);
2692
- const e = kfEasing(kf);
2691
+ let value = keyframeValue(kf);
2692
+ const e = keyframeEasing(kf);
2693
2693
  const cssKf = {
2694
2694
  offset: t,
2695
2695
  easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
2696
2696
  };
2697
2697
  let cssValue;
2698
2698
  let cssKey = propName;
2699
- if (COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
2699
+ if (PX_COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
2700
2700
  cssValue = toRGBA(value);
2701
2701
  } else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
2702
2702
  cssValue = composeTransformParts(value, { withUnits: true });
2703
2703
  cssKey = "transform";
2704
- } else if (TRANSFORM_FN_NAMES.has(propName)) {
2704
+ } else if (PX_TRANSFORM_FN_NAMES.has(propName)) {
2705
2705
  if (Array.isArray(value)) {
2706
2706
  if (propName === "translate") value = value.map((v) => v + "px");
2707
2707
  value = value.join(",");
@@ -2712,7 +2712,7 @@ var PixodeskAnimator = (() => {
2712
2712
  } else if (propName === "d") {
2713
2713
  const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
2714
2714
  cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
2715
- } else if (PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
2715
+ } else if (PX_PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
2716
2716
  cssValue = value * 100 + "%";
2717
2717
  } else {
2718
2718
  cssValue = "" + value;
@@ -2795,7 +2795,7 @@ var PixodeskAnimator = (() => {
2795
2795
  diag.warn(PxDiagnosticKind.host, "createWebApiAnimator: No root element provided");
2796
2796
  }
2797
2797
  }
2798
- const bindings = getNormalizedBindings(doc, PxTimelineEngine.native);
2798
+ const bindings = normalizeBindings(doc, PxTimelineEngine.native);
2799
2799
  const animations = [];
2800
2800
  const _iterations = config.iterations;
2801
2801
  let iterations;