@pixodesk/svg-animator-web 1.0.30 → 1.0.34

package/dist/index.prerendered-waapi.umd.js

@@ -21,6 +21,18 @@ var PixodeskAnimator = (() => {
     return a;
   };
   var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+  var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+        target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
   var __export = (target, all) => {
     for (var name in all)
       __defProp(target, name, { get: all[name], enumerable: true });
@@ -291,6 +303,38 @@ var PixodeskAnimator = (() => {
     if (o) segs.push("translate(" + -o[0] + tu + "," + -o[1] + tu + ")");
     return segs.join("");
   }
+  function parseTransformParts(str) {
+    var _a, _b;
+    if (!str || typeof str !== "string") return void 0;
+    const out = {};
+    const re = /([a-zA-Z]+)\s*\(([^)]*)\)/g;
+    const order = ["translate", "rotate", "skewX", "scale"];
+    let lastIdx = -1;
+    let m;
+    while ((m = re.exec(str)) !== null) {
+      const fn = m[1];
+      const idx = order.indexOf(fn);
+      if (idx < 0 || idx <= lastIdx) return void 0;
+      lastIdx = idx;
+      const nums = m[2].split(/[\s,]+/).filter(Boolean).map(Number);
+      if (nums.some((n) => Number.isNaN(n))) return void 0;
+      if (fn === "translate") {
+        if (nums.length < 1 || nums.length > 2) return void 0;
+        out.translate = [nums[0], (_a = nums[1]) != null ? _a : 0];
+      } else if (fn === "rotate") {
+        if (nums.length !== 1) return void 0;
+        out.rotate = nums[0];
+      } else if (fn === "skewX") {
+        if (nums.length !== 1) return void 0;
+        out.skew = nums[0];
+      } else {
+        if (nums.length < 1 || nums.length > 2) return void 0;
+        out.scale = [nums[0], (_b = nums[1]) != null ? _b : nums[0]];
+      }
+    }
+    if (str.replace(/([a-zA-Z]+)\s*\(([^)]*)\)/g, "").replace(/[\s,]/g, "").length) return void 0;
+    return Object.keys(out).length ? out : void 0;
+  }
   function kebabToCamelCaseWord(kebab) {
     return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
   }
@@ -454,7 +498,51 @@ var PixodeskAnimator = (() => {
   };
   function getAnimatorConfig(doc) {
     var _a;
-    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator);
+    const cfg = (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator);
+    return cfg ? flattenAnimatorTimeline(cfg) : void 0;
+  }
+  var flattenMemo = /* @__PURE__ */ new WeakMap();
+  function flattenAnimatorTimeline(cfg) {
+    const timeline = cfg.timeline;
+    if (timeline === void 0 || timeline === null || typeof timeline !== "object") return cfg;
+    const memoised = flattenMemo.get(cfg);
+    if (memoised) return memoised;
+    const _a = cfg, { timeline: _dropped } = _a, flat = __objRest(_a, ["timeline"]);
+    if (timeline.type === "scroll" || timeline.type === "view") {
+      flat.timelineSource = "scroll";
+      if (timeline.duration !== void 0) flat.duration = timeline.duration;
+      if (timeline.iterations !== void 0) flat.iterations = timeline.iterations;
+      const scroll = __spreadValues({}, flat.scroll || {});
+      scroll.kind = timeline.type;
+      if (timeline.engine !== void 0) scroll.driver = timeline.engine;
+      if (timeline.axis !== void 0) scroll.axis = timeline.axis;
+      if (timeline.source !== void 0) scroll.source = timeline.source;
+      if (timeline.subject !== void 0) scroll.subject = timeline.subject;
+      if (timeline.smoothing !== void 0) scroll.smoothing = timeline.smoothing;
+      if (timeline.range !== void 0) scroll.range = timeline.range;
+      const pin = timeline.pin;
+      if (typeof pin === "boolean") scroll.pin = pin;
+      else if (pin && typeof pin === "object") {
+        scroll.pin = true;
+        if (pin.align !== void 0) scroll.pinAlign = pin.align;
+        if (pin.top !== void 0) scroll.pinTop = pin.top;
+        if (pin.distance !== void 0) scroll.pinDistance = pin.distance;
+      }
+      flat.scroll = scroll;
+    } else {
+      if (timeline.duration !== void 0) flat.duration = timeline.duration;
+      if (timeline.trigger !== void 0) {
+        const _b = timeline.trigger, { onFinish } = _b, restTrigger = __objRest(_b, ["onFinish"]);
+        if (Object.keys(restTrigger).length) flat.trigger = restTrigger;
+        if (onFinish !== void 0) flat.resetOnFinish = onFinish === "reset";
+      }
+      if (timeline.delay !== void 0) flat.delay = timeline.delay;
+      if (timeline.iterations !== void 0) flat.iterations = timeline.iterations;
+      if (timeline.direction !== void 0) flat.direction = timeline.direction;
+      if (timeline.fill !== void 0) flat.fill = timeline.fill;
+    }
+    flattenMemo.set(cfg, flat);
+    return flat;
   }
   function getDefs(doc) {
     var _a;
@@ -466,7 +554,7 @@ var PixodeskAnimator = (() => {
     if (!doc) return void 0;
     const animateById = (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.animateById;
     if (!animateById) return void 0;
-    return Object.entries(animateById).map(([id, anim]) => ({ id, animate: anim }));
+    return Object.entries(animateById).map(([id, anim]) => ({ id: id.startsWith("#") ? id.slice(1) : id, animate: anim }));
   }
 
   // ../svg-animator-core/src/PxMotionPath.ts
@@ -490,12 +578,12 @@ var PixodeskAnimator = (() => {
     return (_a = kf.easing) != null ? _a : kf.e;
   }
   function propAnimIsMotionPath(anim) {
-    var _a, _b, _c;
-    const kfs = (_a = anim.keyframes) != null ? _a : anim.kfs;
+    var _a, _b;
+    const kfs = anim.keyframes;
     if (!Array.isArray(kfs)) return false;
     if (anim.autoOrient) return true;
     for (const kf of kfs) {
-      if (((_b = kf.tangentIn) != null ? _b : kf.ti) || ((_c = kf.tangentOut) != null ? _c : kf.to)) return true;
+      if (((_a = kf.tangentIn) != null ? _a : kf.ti) || ((_b = kf.tangentOut) != null ? _b : kf.to)) return true;
     }
     return false;
   }
@@ -529,14 +617,14 @@ var PixodeskAnimator = (() => {
   var DEFAULT_ROTATION_TOL = 5;
   var DEFAULT_MAX_SAMPLES = 32;
   function materialiseMotionPathInPropAnim(anim, opts) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (!propAnimIsMotionPath(anim)) return anim;
-    const kfs = (_a = anim.keyframes) != null ? _a : anim.kfs;
+    const kfs = anim.keyframes;
     if (!Array.isArray(kfs) || kfs.length < 2) return anim;
     const autoOrient = !!anim.autoOrient;
-    const flatnessTol = (_b = opts == null ? void 0 : opts.flatnessTolerance) != null ? _b : DEFAULT_FLATNESS_TOL;
-    const rotationTol = (_c = opts == null ? void 0 : opts.rotationTolerance) != null ? _c : DEFAULT_ROTATION_TOL;
-    const maxSamples = (_d = opts == null ? void 0 : opts.maxSamplesPerSegment) != null ? _d : DEFAULT_MAX_SAMPLES;
+    const flatnessTol = (_a = opts == null ? void 0 : opts.flatnessTolerance) != null ? _a : DEFAULT_FLATNESS_TOL;
+    const rotationTol = (_b = opts == null ? void 0 : opts.rotationTolerance) != null ? _b : DEFAULT_ROTATION_TOL;
+    const maxSamples = (_c = opts == null ? void 0 : opts.maxSamplesPerSegment) != null ? _c : DEFAULT_MAX_SAMPLES;
     const out = [];
     const firstPos = getKfTranslate(kfs[0]);
     if (!firstPos) return anim;
@@ -565,7 +653,7 @@ var PixodeskAnimator = (() => {
     const lastInE = getKfEasing(kfs[kfs.length - 1]);
     if (lastInE) out[out.length - 1].e = lastInE;
     if (autoOrient) unwrapAutoOrientRotations(out);
-    const result = { kfs: out };
+    const result = { keyframes: out };
     if (anim.loop !== void 0) result.loop = anim.loop;
     return result;
   }
@@ -1193,7 +1281,7 @@ var PixodeskAnimator = (() => {
   }
   function normalizeKeyframes(propName, propAnim, duration, defs) {
     var _a, _b, _c, _d, _e, _f, _g;
-    const keyframes = propAnim.keyframes || propAnim.kfs || [];
+    const keyframes = propAnim.keyframes || [];
     const normalized = [];
     for (const kf of keyframes) {
       const timePct = (_b = (_a = kf.time) != null ? _a : kf.t) != null ? _b : 0;
@@ -1241,6 +1329,36 @@ var PixodeskAnimator = (() => {
   function generateElementId() {
     return "_px_el_" + ++_elementIdCounter;
   }
+  function mergeStaticTransformIntoAnimDef(animDef, staticTransform) {
+    if (!animDef) return animDef;
+    const staticParts = staticTransform && typeof staticTransform === "object" && !Array.isArray(staticTransform) ? staticTransform : parseTransformParts(staticTransform);
+    if (!staticParts || !Object.keys(staticParts).length) return animDef;
+    const mergeKfValue = (v) => v && typeof v === "object" && !Array.isArray(v) ? __spreadValues(__spreadValues({}, staticParts), v) : v;
+    const transformAnim = animDef["transform"];
+    if (transformAnim && typeof transformAnim === "object") {
+      const anim = transformAnim;
+      if (Array.isArray(anim.keyframes)) {
+        const out = __spreadProps(__spreadValues({}, anim), {
+          keyframes: anim.keyframes.map((kf) => __spreadProps(__spreadValues({}, kf), { value: mergeKfValue(kf.value) }))
+        });
+        if (out.value !== void 0) out.value = mergeKfValue(out.value);
+        return __spreadProps(__spreadValues({}, animDef), { transform: out });
+      }
+      return animDef;
+    }
+    const channels = Object.keys(animDef).filter((k) => TRANSFORM_FN_NAMES.has(k));
+    if (channels.length !== 1) return animDef;
+    const ch = channels[0];
+    const chAnim = animDef[ch];
+    if (!chAnim || typeof chAnim !== "object" || !Array.isArray(chAnim.keyframes)) return animDef;
+    const lifted = __spreadProps(__spreadValues({}, chAnim), {
+      keyframes: chAnim.keyframes.map((kf) => __spreadProps(__spreadValues({}, kf), { value: __spreadProps(__spreadValues({}, staticParts), { [ch]: kf.value }) }))
+    });
+    if (lifted.value !== void 0) lifted.value = __spreadProps(__spreadValues({}, staticParts), { [ch]: lifted.value });
+    const rest = __spreadValues({}, animDef);
+    delete rest[ch];
+    return __spreadProps(__spreadValues({}, rest), { transform: lifted });
+  }
   function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimatorEngine.waapi) {
     const normalized = {};
     for (const [propName, propAnim] of Object.entries(animDef)) {
@@ -1249,7 +1367,7 @@ var PixodeskAnimator = (() => {
       }
       const normalizedKfs = normalizeKeyframes(propName, propAnim, duration, defs);
       if (normalizedKfs.length > 0) {
-        const out = { kfs: normalizedKfs };
+        const out = { keyframes: normalizedKfs };
         if (propAnim.autoOrient !== void 0) out.autoOrient = propAnim.autoOrient;
         if (propAnim.loop !== void 0) out.loop = propAnim.loop;
         normalized[propName] = engine === PxAnimatorEngine.waapi && propName === "transform" ? materialiseMotionPathInPropAnim(out) : out;
@@ -1262,11 +1380,11 @@ var PixodeskAnimator = (() => {
     const defs = getDefs(doc);
     const duration = animatorConfig.duration || 1e3;
     const bindings = [];
-    const processAnimation = (id, animate) => {
+    const processAnimation = (id, animate, staticTransform) => {
       if (!animate) return null;
       const animDefs = resolveElementAnimation(animate, defs);
       if (animDefs.length === 0) return null;
-      const merged = mergeAnimationDefinitions(animDefs);
+      const merged = mergeStaticTransformIntoAnimDef(mergeAnimationDefinitions(animDefs), staticTransform);
       const normalizedAnim = normalizeAnimationDefinition(merged, duration, defs, engine);
       if (Object.keys(normalizedAnim).length === 0) return null;
       return {
@@ -1286,7 +1404,7 @@ var PixodeskAnimator = (() => {
       if (inlineAnim && Object.keys(inlineAnim).length > 0) {
         const nodeId = node.id || generateElementId();
         node.id = nodeId;
-        const normalized = processAnimation(nodeId, inlineAnim);
+        const normalized = processAnimation(nodeId, inlineAnim, node.transform);
         if (normalized) bindings.push(normalized);
       }
       if (node.children) {
@@ -1488,7 +1606,7 @@ var PixodeskAnimator = (() => {
     const result = /* @__PURE__ */ new Map();
     for (const [propName, propAnim] of Object.entries(animDef)) {
       const duration = config.duration || 1;
-      const clippedKeyframes = clipKeyframesToDuration(propName, propAnim.kfs || propAnim.keyframes || [], duration);
+      const clippedKeyframes = clipKeyframesToDuration(propName, propAnim.keyframes || [], duration);
       const cssKeyframes = [];
       for (let i = 0; i < clippedKeyframes.length; i++) {
         const kf = clippedKeyframes[i];