@pixodesk/svg-animator-web 1.0.18 → 1.0.19

package/dist/index.umd.js

@@ -84,8 +84,8 @@ var PixodeskAnimator = (() => {
     PxRetimeEffectSchema: () => PxRetimeEffectSchema,
     PxStrokeGradientEffectSchema: () => PxStrokeGradientEffectSchema,
     PxSvgNodeExtra: () => PxSvgNodeExtra,
-    PxTextAlongPathEffectSchema: () => PxTextAlongPathEffectSchema,
     PxTextEffectSchema: () => PxTextEffectSchema,
+    PxTextPathEffectSchema: () => PxTextPathEffectSchema,
     PxTransformPartsSchema: () => PxTransformPartsSchema,
     PxTransformValueSchema: () => PxTransformValueSchema,
     PxTransformationEffectSchema: () => PxTransformationEffectSchema,
@@ -105,6 +105,7 @@ var PixodeskAnimator = (() => {
     describeSchema: () => describeSchema,
     diffInEffect: () => diffInEffect,
     evaluateMotionPathSegment: () => evaluateMotionPathSegment,
+    extendedPathForBrowser: () => extendedPathForBrowser,
     generateNewIds: () => generateNewIds,
     getAnimatorConfig: () => getAnimatorConfig,
     getBindings: () => getBindings,
@@ -130,6 +131,7 @@ var PixodeskAnimator = (() => {
     renderNode: () => renderNode,
     schemaKeys: () => schemaKeys,
     setupAnimationTriggers: () => setupAnimationTriggers,
+    shiftAnimatable: () => shiftAnimatable,
     toRGBA: () => toRGBA,
     validateNodeEffects: () => validateNodeEffects,
     visualModelAt: () => visualModelAt
@@ -1139,8 +1141,9 @@ var PixodeskAnimator = (() => {
     gradientTransform: px.string().optional()
   }));
   var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
-  var PxTextAlongPathEffectSchema = implementsInterface()(px.object({
-    href: px.string(),
+  var PxTextPathEffectSchema = implementsInterface()(px.object({
+    path: px.string(),
+    pathOverflow: px.string().optional(),
     lengthAdjust: px.string().optional(),
     method: px.string().optional(),
     spacing: px.string().optional(),
@@ -1159,7 +1162,7 @@ var PixodeskAnimator = (() => {
     isCombinedShape: px.boolean().optional(),
     fillGradient: PxFillGradientEffectSchema.optional(),
     strokeGradient: PxStrokeGradientEffectSchema.optional(),
-    textAlongPath: PxTextAlongPathEffectSchema.optional(),
+    textPath: PxTextPathEffectSchema.optional(),
     text: PxTextEffectSchema.optional()
   }));
   function validateNodeEffects(root, opts) {
@@ -2032,103 +2035,6 @@ var PixodeskAnimator = (() => {
     }
   }
 
-  // src/effects/textAlongPathEffect.ts
-  function applyTextAlongPathEffect(node, fx, _ctx) {
-    var _a;
-    if (!fx) return node;
-    const href = typeof fx.href === "string" && !fx.href.startsWith("#") ? "#" + fx.href : fx.href;
-    const textPath = {
-      type: "textPath",
-      href,
-      children: (_a = node.children) != null ? _a : []
-    };
-    if (fx.lengthAdjust !== void 0) textPath.lengthAdjust = fx.lengthAdjust;
-    if (fx.method !== void 0) textPath.method = fx.method;
-    if (fx.spacing !== void 0) textPath.spacing = fx.spacing;
-    applyAnimatableNumber(textPath, "startOffset", fx.startOffset);
-    applyAnimatableNumber(textPath, "textLength", fx.textLength);
-    node.children = [textPath];
-    return node;
-  }
-  function applyAnimatableNumber(node, attrName, raw) {
-    if (raw === void 0 || raw === null) return;
-    if (typeof raw === "number") {
-      node[attrName] = String(raw);
-      return;
-    }
-    if (typeof raw === "object" && raw !== null) {
-      const obj = raw;
-      if (Array.isArray(obj.keyframes)) {
-        const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
-        const animate = __spreadValues({}, prevAnimate || {});
-        const block = { keyframes: obj.keyframes };
-        if (obj.loop !== void 0) block.loop = obj.loop;
-        animate[attrName] = block;
-        node.animate = animate;
-        return;
-      }
-      if (typeof obj.value === "number") {
-        node[attrName] = String(obj.value);
-        return;
-      }
-    }
-  }
-
-  // src/effects/elementFactory.ts
-  var jsonElementFactory = (type, props, children) => {
-    const node = { type };
-    for (const k in props) if (props[k] !== void 0) node[k] = props[k];
-    const arr = Array.isArray(children) ? children.filter((c) => c != null) : children != null ? [children] : [];
-    if (arr.length) node.children = arr;
-    return node;
-  };
-
-  // src/effects/glyphPathBake.ts
-  function fmt(v, decimals) {
-    return Math.round(v) === v ? "" + Math.round(v) : v.toFixed(decimals);
-  }
-  function pack(nums, decimals) {
-    let s = "";
-    for (let i = 0; i < nums.length; i++) {
-      const str2 = fmt(nums[i], decimals);
-      if (i > 0 && str2.charCodeAt(0) !== 45) s += " ";
-      s += str2;
-    }
-    return s;
-  }
-  function apply(m, x, y) {
-    return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
-  }
-  var TOKEN_RE = /([MLCQZ])|(-?\d*\.?\d+(?:e[-+]?\d+)?)/gi;
-  function transformPathData(d, m, decimals = 2) {
-    const tokens = [];
-    let match;
-    TOKEN_RE.lastIndex = 0;
-    while ((match = TOKEN_RE.exec(d)) !== null) tokens.push(match[0]);
-    let out = "";
-    let i = 0;
-    const num2 = () => parseFloat(tokens[i++]);
-    while (i < tokens.length) {
-      const cmd = tokens[i++];
-      if (cmd === "M" || cmd === "L") {
-        const [x, y] = apply(m, num2(), num2());
-        out += cmd + pack([x, y], decimals);
-      } else if (cmd === "C") {
-        const [x1, y1] = apply(m, num2(), num2());
-        const [x2, y2] = apply(m, num2(), num2());
-        const [x, y] = apply(m, num2(), num2());
-        out += "C" + pack([x1, y1, x2, y2, x, y], decimals);
-      } else if (cmd === "Q") {
-        const [x1, y1] = apply(m, num2(), num2());
-        const [x, y] = apply(m, num2(), num2());
-        out += "Q" + pack([x1, y1, x, y], decimals);
-      } else if (cmd === "Z" || cmd === "z") {
-        out += "Z";
-      }
-    }
-    return out;
-  }
-
   // src/PxAnimatorUtil.ts
   function bezierToSvgPath(path) {
     var _a, _b, _c, _d;
@@ -2673,6 +2579,7 @@ var PixodeskAnimator = (() => {
     };
     return {
       totalLength,
+      closed,
       sampleAtDistance(dist) {
         if (!closed && (dist < 0 || dist > totalLength)) {
           const edge = dist < 0 ? 0 : totalLength;
@@ -2685,6 +2592,173 @@ var PixodeskAnimator = (() => {
     };
   }
 
+  // src/effects/textPathEffect.ts
+  var EXTEND_MARGIN_FRAC = 0.15;
+  function numRange(v) {
+    if (typeof v === "number") return { min: v, max: v };
+    if (v && typeof v === "object") {
+      const o = v;
+      if (typeof o.value === "number") return { min: o.value, max: o.value };
+      if (Array.isArray(o.keyframes) && o.keyframes.length) {
+        const vals = o.keyframes.map((k) => Number(k.value) || 0);
+        return { min: Math.min(...vals), max: Math.max(...vals) };
+      }
+    }
+    return { min: 0, max: 0 };
+  }
+  function estimateTextAdvance(node) {
+    let chars = 0, maxFont = 16;
+    const walk = (el) => {
+      var _a, _b;
+      const fs = parseFloat(String((_a = el.fontSize) != null ? _a : "")) || 0;
+      if (fs) maxFont = Math.max(maxFont, fs);
+      const t = (_b = el.text) != null ? _b : el.textContent;
+      if (typeof t === "string") chars += t.length;
+      if (el.children) for (const c of el.children) walk(c);
+    };
+    walk(node);
+    return chars * maxFont;
+  }
+  var r3 = (n) => Math.round(n * 1e3) / 1e3;
+  function shiftAnimatable(v, by) {
+    if (!by || v === void 0 || v === null) return v;
+    if (typeof v === "number") return v + by;
+    const o = v;
+    if (typeof o.value === "number") return __spreadProps(__spreadValues({}, o), { value: o.value + by });
+    if (Array.isArray(o.keyframes)) return __spreadProps(__spreadValues({}, o), { keyframes: o.keyframes.map((k) => __spreadProps(__spreadValues({}, k), { value: (Number(k.value) || 0) + by })) });
+    return v;
+  }
+  function extendedPathForBrowser(pathD, opts) {
+    var _a;
+    if (opts.pathOverflow === "clip") return { d: pathD, startShift: 0 };
+    const sampler = createPathSampler(pathD);
+    if (!sampler || sampler.closed || sampler.totalLength <= 0) return { d: pathD, startShift: 0 };
+    const L = sampler.totalLength;
+    const margin = EXTEND_MARGIN_FRAC * L;
+    const so = numRange(opts.startOffset);
+    const runWidth = numRange(opts.textLength).max || ((_a = opts.advance) != null ? _a : 0);
+    const startOverflow = Math.max(0, -so.min);
+    const endOverflow = Math.max(0, so.max + runWidth - L);
+    const startExt = startOverflow > 0 ? startOverflow + margin : 0;
+    const endExt = endOverflow > 0 ? endOverflow + margin : 0;
+    if (endExt <= 0 && startExt <= 0) return { d: pathD, startShift: 0 };
+    const s = sampler.sampleAtDistance(0);
+    const e = sampler.sampleAtDistance(L);
+    let d = pathD;
+    if (startExt > 0) {
+      const sx = s.x - Math.cos(s.angle) * startExt, sy = s.y - Math.sin(s.angle) * startExt;
+      const rest = pathD.replace(/^\s*[Mm]\s*-?[\d.]+[\s,]+-?[\d.]+/, "");
+      d = "M" + r3(sx) + "," + r3(sy) + "L" + r3(s.x) + "," + r3(s.y) + rest;
+    }
+    if (endExt > 0) {
+      const ex = e.x + Math.cos(e.angle) * endExt, ey = e.y + Math.sin(e.angle) * endExt;
+      d += "L" + r3(ex) + "," + r3(ey);
+    }
+    return { d, startShift: startExt };
+  }
+  function applyTextPathEffect(node, fx, ctx) {
+    var _a;
+    if (!fx || typeof fx.path !== "string" || !fx.path) return node;
+    const pathId = genId(ctx, "tpath");
+    const { d, startShift } = extendedPathForBrowser(fx.path, {
+      pathOverflow: fx.pathOverflow,
+      startOffset: fx.startOffset,
+      textLength: fx.textLength,
+      advance: estimateTextAdvance(node)
+    });
+    ctx.defs.push({ type: "path", id: pathId, d });
+    const textPath = {
+      type: "textPath",
+      href: "#" + pathId,
+      children: (_a = node.children) != null ? _a : []
+    };
+    if (fx.lengthAdjust !== void 0) textPath.lengthAdjust = fx.lengthAdjust;
+    if (fx.method !== void 0) textPath.method = fx.method;
+    if (fx.spacing !== void 0) textPath.spacing = fx.spacing;
+    applyAnimatableNumber(textPath, "startOffset", shiftAnimatable(fx.startOffset, startShift));
+    applyAnimatableNumber(textPath, "textLength", fx.textLength);
+    node.children = [textPath];
+    return node;
+  }
+  function applyAnimatableNumber(node, attrName, raw) {
+    if (raw === void 0 || raw === null) return;
+    if (typeof raw === "number") {
+      node[attrName] = String(raw);
+      return;
+    }
+    if (typeof raw === "object" && raw !== null) {
+      const obj = raw;
+      if (Array.isArray(obj.keyframes)) {
+        const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+        const animate = __spreadValues({}, prevAnimate || {});
+        const block = { keyframes: obj.keyframes };
+        if (obj.loop !== void 0) block.loop = obj.loop;
+        animate[attrName] = block;
+        node.animate = animate;
+        return;
+      }
+      if (typeof obj.value === "number") {
+        node[attrName] = String(obj.value);
+        return;
+      }
+    }
+  }
+
+  // src/effects/elementFactory.ts
+  var jsonElementFactory = (type, props, children) => {
+    const node = { type };
+    for (const k in props) if (props[k] !== void 0) node[k] = props[k];
+    const arr = Array.isArray(children) ? children.filter((c) => c != null) : children != null ? [children] : [];
+    if (arr.length) node.children = arr;
+    return node;
+  };
+
+  // src/effects/glyphPathBake.ts
+  function fmt(v, decimals) {
+    return Math.round(v) === v ? "" + Math.round(v) : v.toFixed(decimals);
+  }
+  function pack(nums, decimals) {
+    let s = "";
+    for (let i = 0; i < nums.length; i++) {
+      const str2 = fmt(nums[i], decimals);
+      if (i > 0 && str2.charCodeAt(0) !== 45) s += " ";
+      s += str2;
+    }
+    return s;
+  }
+  function apply(m, x, y) {
+    return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+  }
+  var TOKEN_RE = /([MLCQZ])|(-?\d*\.?\d+(?:e[-+]?\d+)?)/gi;
+  function transformPathData(d, m, decimals = 2) {
+    const tokens = [];
+    let match;
+    TOKEN_RE.lastIndex = 0;
+    while ((match = TOKEN_RE.exec(d)) !== null) tokens.push(match[0]);
+    let out = "";
+    let i = 0;
+    const num2 = () => parseFloat(tokens[i++]);
+    while (i < tokens.length) {
+      const cmd = tokens[i++];
+      if (cmd === "M" || cmd === "L") {
+        const [x, y] = apply(m, num2(), num2());
+        out += cmd + pack([x, y], decimals);
+      } else if (cmd === "C") {
+        const [x1, y1] = apply(m, num2(), num2());
+        const [x2, y2] = apply(m, num2(), num2());
+        const [x, y] = apply(m, num2(), num2());
+        out += "C" + pack([x1, y1, x2, y2, x, y], decimals);
+      } else if (cmd === "Q") {
+        const [x1, y1] = apply(m, num2(), num2());
+        const [x, y] = apply(m, num2(), num2());
+        out += "Q" + pack([x1, y1, x, y], decimals);
+      } else if (cmd === "Z" || cmd === "z") {
+        out += "Z";
+      }
+    }
+    return out;
+  }
+
   // src/effects/textGlyphsEffect.ts
   var DEFAULT_FONT_SIZE = 16;
   var TEXT_ATTR_KEYS = [
@@ -2846,7 +2920,7 @@ var PixodeskAnimator = (() => {
     const cos = Math.cos(angle), sin = Math.sin(angle), hw = widthEm / 2;
     return [scale * cos, scale * sin, -scale * sin, scale * cos, x - scale * cos * hw, y - scale * sin * hw];
   }
-  function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLength) {
+  function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLength, pathOverflow) {
     var _a;
     const { glyphs, create = jsonElementFactory, warnings } = opts;
     const sampler = pathD ? createPathSampler(pathD) : null;
@@ -2861,12 +2935,17 @@ var PixodeskAnimator = (() => {
       const k = textLength / width;
       for (const c of cells) c.midBase *= k;
     }
+    const isClip = pathOverflow === "clip" && !sampler.closed;
     const so = readAnimatable(startOffset);
     if (so.kind === "animated" /* Animated */ && so.keyframes.length >= 2) {
-      return toGroup(node, buildAnimatedAlongPath(cells, sampler, so.keyframes, so.loop, create), create);
+      return toGroup(node, buildAnimatedAlongPath(cells, sampler, so.keyframes, so.loop, create, isClip), create);
     }
     const base = so.kind === "animated" /* Animated */ ? Number((_a = so.keyframes[0]) == null ? void 0 : _a.value) || 0 : so.kind === "static" /* Static */ ? Number(so.value) || 0 : 0;
-    const placements = cells.map((c) => ({
+    const placeCells = isClip ? cells.filter((c) => {
+      const d = base + c.midBase;
+      return d >= 0 && d <= sampler.totalLength;
+    }) : cells;
+    const placements = placeCells.map((c) => ({
       glyphD: c.glyphD,
       paint: c.paint,
       m: alongAffine(sampler, base + c.midBase, c.scale, c.widthEm)
@@ -2879,10 +2958,11 @@ var PixodeskAnimator = (() => {
     const f = __pow(10, n);
     return Math.round(v * f) / f;
   }
-  function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create) {
+  function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create, isClip) {
     const step = Math.max(sampler.totalLength / ALONG_PATH_MAX_STEPS, 0.5);
     const timeOf = (kf) => Number(kf.time) || 0;
     const offOf = (kf) => Number(kf.value) || 0;
+    const onPath = (dist) => dist >= 0 && dist <= sampler.totalLength;
     const out = [];
     for (const c of cells) {
       const centred = [c.scale, 0, 0, c.scale, -c.scale * (c.widthEm / 2), 0];
@@ -2897,19 +2977,31 @@ var PixodeskAnimator = (() => {
           }
         };
       };
-      const kfs = [sampleKf(offOf(sokfs[0]) + c.midBase, timeOf(sokfs[0]))];
+      const kfs = [];
+      const opKfs = [];
+      const pushKf = (dist, time) => {
+        kfs.push(sampleKf(dist, time));
+        if (isClip) opKfs.push({ time, value: onPath(dist) ? 1 : 0 });
+      };
+      pushKf(offOf(sokfs[0]) + c.midBase, timeOf(sokfs[0]));
       for (let k = 1; k < sokfs.length; k++) {
         const t0 = timeOf(sokfs[k - 1]), t1 = timeOf(sokfs[k]);
         const o0 = offOf(sokfs[k - 1]), o1 = offOf(sokfs[k]);
         const n = Math.min(ALONG_PATH_MAX_STEPS_PER_SEGMENT, Math.max(1, Math.ceil(Math.abs(o1 - o0) / step)));
         for (let s = 1; s <= n; s++) {
           const f = s / n;
-          kfs.push(sampleKf(o0 + f * (o1 - o0) + c.midBase, t0 + f * (t1 - t0)));
+          pushKf(o0 + f * (o1 - o0) + c.midBase, t0 + f * (t1 - t0));
         }
       }
       const transform = { keyframes: kfs };
       if (loop !== void 0) transform.loop = loop;
-      out.push(create("path", __spreadProps(__spreadValues({ d }, paintProps(c.paint)), { animate: { transform } }), []));
+      const animate = { transform };
+      if (isClip && opKfs.some((k) => k.value === 0)) {
+        const op = { keyframes: opKfs };
+        if (loop !== void 0) op.loop = loop;
+        animate.opacity = op;
+      }
+      out.push(create("path", __spreadProps(__spreadValues({ d }, paintProps(c.paint)), { animate }), []));
     }
     return out;
   }
@@ -2953,7 +3045,7 @@ var PixodeskAnimator = (() => {
     return create("g", gProps, children);
   }
   function materialiseGlyphText(node, opts) {
-    if (opts.alongPath) return materialiseGlyphTextAlongPath(node, opts.alongPath.pathD, opts.alongPath.startOffset, opts, opts.alongPath.textLength);
+    if (opts.alongPath) return materialiseGlyphTextAlongPath(node, opts.alongPath.pathD, opts.alongPath.startOffset, opts, opts.alongPath.textLength, opts.alongPath.pathOverflow);
     return materialiseGlyphTextHorizontal(node, opts);
   }
   function applyTextGlyphsEffect(node, fx, ctx) {
@@ -2964,12 +3056,12 @@ var PixodeskAnimator = (() => {
     }
     return materialiseGlyphTextHorizontal(node, { glyphs: ctx.glyphs, warnings: ctx.warnings });
   }
-  function applyTextGlyphsAlongPath(node, ctx, pathD, startOffset, textLength) {
+  function applyTextGlyphsAlongPath(node, ctx, pathD, startOffset, textLength, pathOverflow) {
     if (!ctx.glyphs) {
       ctx.warnings.push("textGlyphs: no definitions.glyphs");
       return null;
     }
-    return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength);
+    return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength, pathOverflow);
   }
 
   // src/PxMotionPath.ts
@@ -4375,18 +4467,17 @@ var PixodeskAnimator = (() => {
     const originalId = typeof node.id === "string" ? node.id : void 0;
     const innerIdForContentRef = originalId ? ctx.contentRefInnerIds.get(originalId) : void 0;
     if (!fx && !innerIdForContentRef) return node;
-    const { transformation, repeater, maskedBy, trimPath, clone: cloneFx, fillGradient, strokeGradient, textAlongPath, text } = fx != null ? fx : {};
+    const { transformation, repeater, maskedBy, trimPath, clone: cloneFx, fillGradient, strokeGradient, textPath, text } = fx != null ? fx : {};
     const isCombinedShape = fx == null ? void 0 : fx.isCombinedShape;
     if (fx) delete node.effects;
     let n = node;
     let consumedByGlyphs = false;
     if (text == null ? void 0 : text.useGlyphs) {
-      if (textAlongPath) {
-        const pathNode = typeof textAlongPath.href === "string" ? ctx.idMap.get(textAlongPath.href) : void 0;
-        const pathD = pathNode && typeof pathNode.d === "string" ? pathNode.d : void 0;
-        const rawTL = textAlongPath.textLength;
+      if (textPath) {
+        const pathD = typeof textPath.path === "string" ? textPath.path : void 0;
+        const rawTL = textPath.textLength;
         const textLength = typeof rawTL === "number" ? rawTL : rawTL && typeof rawTL === "object" ? typeof rawTL.value === "number" ? rawTL.value : Array.isArray(rawTL.keyframes) && rawTL.keyframes.length ? Number((_a = rawTL.keyframes[0]) == null ? void 0 : _a.value) : void 0 : void 0;
-        const glyphed = applyTextGlyphsAlongPath(n, ctx, pathD, textAlongPath.startOffset, textLength);
+        const glyphed = applyTextGlyphsAlongPath(n, ctx, pathD, textPath.startOffset, textLength, textPath.pathOverflow);
         if (glyphed) {
           n = glyphed;
           consumedByGlyphs = true;
@@ -4396,7 +4487,7 @@ var PixodeskAnimator = (() => {
         consumedByGlyphs = true;
       }
     }
-    if (!consumedByGlyphs) n = applyTextAlongPathEffect(n, textAlongPath, ctx);
+    if (!consumedByGlyphs) n = applyTextPathEffect(n, textPath, ctx);
     n = applyFillGradientEffect(n, fillGradient, ctx);
     n = applyStrokeGradientEffect(n, strokeGradient, ctx);
     n = applyTrimPathEffect(n, trimPath, isCombinedShape, ctx);