@pixodesk/svg-animator-web 1.0.24 → 1.0.26

package/dist/index.js

@@ -909,8 +909,10 @@ var PxNodeSchema = px.openObject(__spreadProps2(__spreadValues2({}, PxNodeBase._
   children: px.lazy(() => px.array(PxNodeSchema), []).optional()
 }), PxAttrValueSchema);
 var PxSvgNodeExtra = px.object({
-  width: px.number().optional(),
-  height: px.number().optional(),
+  // `"100%"` and other SVG length strings are legal here — a number-only slot rejected
+  // real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
+  width: px.union([px.number(), px.string()]).optional(),
+  height: px.union([px.number(), px.string()]).optional(),
   viewBox: px.string().optional(),
   animator: PxAnimatorConfigSchema.optional()
 });
@@ -1943,7 +1945,7 @@ function walkAndMaterialise(node, opts) {
   if (newAnimate) cloned.animate = newAnimate;
   return cloned;
 }
-var LOOP_JUMP_SHIFT_MS = 10;
+var LOOP_JUMP_SHIFT_MS = 1;
 function deepEqualValue(a, b) {
   if (a === b) return true;
   if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
@@ -2192,6 +2194,8 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   const looped = [];
   const separateBoundary = loop.extend !== PxLoopExtend.before;
   const originalTerminalKf = keyframes[keyframes.length - 1];
+  let terminalEasingOverride;
+  let hasTerminalEasingOverride = false;
   function appendRep(repStart, isReversed, partial) {
     var _a2;
     let entries;
@@ -2232,7 +2236,16 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
       const prevKf = looped.length > 0 ? looped[looped.length - 1] : originalTerminalKf;
       const isBoundary = separateBoundary && i === 0 && prevKf !== void 0 && Math.abs(((_a2 = prevKf.t) != null ? _a2 : 0) - (repStart + entry.relT * segDuration)) < 1e-9;
       if (isBoundary) {
-        if (deepEqualValue(prevKf.v, entry.v)) continue;
+        if (deepEqualValue(prevKf.v, entry.v)) {
+          if (looped.length > 0) {
+            prevKf.e = entry.e;
+            prevKf.tangentOut = entry.tangentOut;
+          } else {
+            terminalEasingOverride = entry.e;
+            hasTerminalEasingOverride = true;
+          }
+          continue;
+        }
         if (looped.length > 0) {
           delete prevKf.tangentIn;
           delete prevKf.tangentOut;
@@ -2313,6 +2326,11 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   if (loop.extend === PxLoopExtend.before) {
     return [...looped, ...keyframes];
   } else {
+    if (hasTerminalEasingOverride && keyframes.length > 0) {
+      const head = keyframes.slice(0, -1);
+      const tail = __spreadProps2(__spreadValues2({}, keyframes[keyframes.length - 1]), { e: terminalEasingOverride });
+      return [...head, tail, ...looped];
+    }
     return [...keyframes, ...looped];
   }
 }
@@ -2429,6 +2447,9 @@ function generateElementId() {
 function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimatorEngine.waapi) {
   const normalized = {};
   for (const [propName, propAnim] of Object.entries(animDef)) {
+    if (propName === "transform" && propAnim.alongPathMode === "offsetPath" && animDef["offsetDistance"] !== void 0) {
+      continue;
+    }
     const normalizedKfs = normalizeKeyframes(propName, propAnim, duration, defs);
     if (normalizedKfs.length > 0) {
       const out = { kfs: normalizedKfs };
@@ -5240,9 +5261,138 @@ function applyPlayerEffects_retime(node, ctx) {
   applyAllRetimeEffects(node, ctx);
   return node;
 }
+var kfTime = (kf) => {
+  var _a, _b;
+  return (_b = (_a = kf.t) != null ? _a : kf.time) != null ? _b : 0;
+};
+var kfValue = (kf) => {
+  var _a;
+  return (_a = kf.v) != null ? _a : kf.value;
+};
+var kfEasing = (kf) => {
+  var _a;
+  return (_a = kf.e) != null ? _a : kf.easing;
+};
+var kfTangentIn = (kf) => {
+  var _a;
+  return (_a = kf.tangentIn) != null ? _a : kf.ti;
+};
+var kfTangentOut = (kf) => {
+  var _a;
+  return (_a = kf.tangentOut) != null ? _a : kf.to;
+};
+function cubicAt(p0, c1, c2, p1, t) {
+  const u = 1 - t;
+  const a = u * u * u, b = 3 * u * u * t, c = 3 * u * t * t, d = t * t * t;
+  return [
+    a * p0[0] + b * c1[0] + c * c2[0] + d * p1[0],
+    a * p0[1] + b * c1[1] + c * c2[1] + d * p1[1]
+  ];
+}
+function cubicLength(p0, c1, c2, p1, steps = 64) {
+  let len = 0;
+  let prev = p0;
+  for (let i = 1; i <= steps; i++) {
+    const pt = cubicAt(p0, c1, c2, p1, i / steps);
+    len += Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);
+    prev = pt;
+  }
+  return len;
+}
+var fmt2 = (n) => {
+  const r = Math.round(n * 1e4) / 1e4;
+  return Object.is(r, -0) ? "0" : String(r);
+};
+function buildOffsetPath(propAnim) {
+  var _a, _b, _c, _d;
+  if (propAnim.alongPathMode !== "offsetPath") return void 0;
+  const kfs = (_a = propAnim.keyframes) != null ? _a : propAnim.kfs;
+  if (!kfs || kfs.length < 2) return void 0;
+  const first = kfValue(kfs[0]);
+  const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
+  const points = [];
+  for (const kf of kfs) {
+    const v = kfValue(kf);
+    const tr = v == null ? void 0 : v.translate;
+    if (!tr || tr.length < 2) return void 0;
+    const parts = Object.keys(v);
+    if (parts.some((p) => p !== "translate" && p !== "origin")) return void 0;
+    const o = (_b = v == null ? void 0 : v.origin) != null ? _b : [0, 0];
+    if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
+    points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
+  }
+  if (!kfs.some((kf) => kfTangentIn(kf) || kfTangentOut(kf))) return void 0;
+  let d = "M" + fmt2(points[0][0]) + "," + fmt2(points[0][1]);
+  const segLens = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i], p1 = points[i + 1];
+    const to = (_c = kfTangentOut(kfs[i])) != null ? _c : [0, 0];
+    const ti = (_d = kfTangentIn(kfs[i + 1])) != null ? _d : [0, 0];
+    const c1 = [p0[0] + to[0], p0[1] + to[1]];
+    const c2 = [p1[0] + ti[0], p1[1] + ti[1]];
+    d += "C" + fmt2(c1[0]) + "," + fmt2(c1[1]) + "," + fmt2(c2[0]) + "," + fmt2(c2[1]) + "," + fmt2(p1[0]) + "," + fmt2(p1[1]);
+    segLens.push(cubicLength(p0, c1, c2, p1));
+  }
+  const total = segLens.reduce((a, b) => a + b, 0);
+  if (!(total > 0)) return void 0;
+  const distanceKfs = [];
+  let cum = 0;
+  for (let i = 0; i < kfs.length; i++) {
+    if (i > 0) cum += segLens[i - 1];
+    const out = { t: kfTime(kfs[i]), v: cum / total };
+    const e = kfEasing(kfs[i]);
+    if (e !== void 0) out.e = e;
+    distanceKfs.push(out);
+  }
+  return { pathStr: d, distanceKfs, autoOrient: !!propAnim.autoOrient, anchor };
+}
+function materialiseOffsetPathsInTree(root) {
+  const walk = (node) => {
+    var _a;
+    let out = node;
+    const anim = node.animate;
+    const transform = anim == null ? void 0 : anim["transform"];
+    if (transform) {
+      const built = buildOffsetPath(transform);
+      if (built) {
+        const newAnimate = __spreadValues2({}, anim);
+        delete newAnimate["transform"];
+        const distance = { keyframes: built.distanceKfs };
+        if (transform.loop !== void 0) distance.loop = transform.loop;
+        newAnimate["offsetDistance"] = distance;
+        const staticTr = node.transform;
+        let newTransform = staticTr;
+        if (staticTr && typeof staticTr === "object") {
+          const t = __spreadValues2({}, staticTr);
+          delete t["translate"];
+          delete t["origin"];
+          newTransform = Object.keys(t).length ? t : void 0;
+        }
+        out = __spreadProps2(__spreadValues2({}, node), {
+          animate: newAnimate,
+          style: __spreadProps2(__spreadValues2({}, node.style), {
+            offsetPath: "path('" + built.pathStr + "')",
+            offsetAnchor: fmt2(built.anchor[0]) + "px " + fmt2(built.anchor[1]) + "px",
+            offsetRotate: built.autoOrient ? "auto" : "0deg",
+            offsetDistance: "0%"
+          })
+        });
+        if (newTransform !== void 0) out.transform = newTransform;
+        else delete out.transform;
+      }
+    }
+    if ((_a = out.children) == null ? void 0 : _a.length) {
+      const children = out.children.map(walk);
+      if (children.some((c, i) => c !== out.children[i])) out = __spreadProps2(__spreadValues2({}, out), { children });
+    }
+    return out;
+  };
+  return walk(root);
+}
 function materialiseAllInTree(doc, engine, opts) {
   var _a, _b;
   let root = applyPlayerEffects(doc).root;
+  root = materialiseOffsetPathsInTree(root);
   const duration = (_b = (_a = getAnimatorConfig(root)) == null ? void 0 : _a.duration) != null ? _b : DEFAULT_DURATION_MS;
   root = materialiseInternalLoopsInTree(root, duration);
   if (engine === PxAnimatorEngine.waapi) {
@@ -5951,6 +6101,8 @@ function createCssKf(kf, t, propName, unsupportedSet) {
   } else if (propName === "d") {
     const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
     cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
+  } else if (PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
+    cssValue = value * 100 + "%";
   } else {
     cssValue = "" + value;
   }