@pixodesk/svg-animator-react 1.0.24 → 1.0.26

package/dist/index.umd.js

@@ -2643,8 +2643,10 @@ var PixodeskAnimatorReact = (() => {
     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()
   });
@@ -3673,7 +3675,7 @@ var PixodeskAnimatorReact = (() => {
     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;
@@ -3922,6 +3924,8 @@ var PixodeskAnimatorReact = (() => {
     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;
@@ -3962,7 +3966,16 @@ var PixodeskAnimatorReact = (() => {
         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;
@@ -4043,6 +4056,11 @@ var PixodeskAnimatorReact = (() => {
     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];
     }
   }
@@ -4159,6 +4177,9 @@ var PixodeskAnimatorReact = (() => {
   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 };
@@ -6838,9 +6859,138 @@ var PixodeskAnimatorReact = (() => {
     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) {
@@ -7336,6 +7486,8 @@ var PixodeskAnimatorReact = (() => {
     } 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;
     }