@pixodesk/svg-animator-web 1.0.18 → 1.0.19

package/dist/index.cjs

@@ -83,8 +83,8 @@ __export(index_exports, {
   PxRetimeEffectSchema: () => PxRetimeEffectSchema,
   PxStrokeGradientEffectSchema: () => PxStrokeGradientEffectSchema,
   PxSvgNodeExtra: () => PxSvgNodeExtra,
-  PxTextAlongPathEffectSchema: () => PxTextAlongPathEffectSchema,
   PxTextEffectSchema: () => PxTextEffectSchema,
+  PxTextPathEffectSchema: () => PxTextPathEffectSchema,
   PxTransformPartsSchema: () => PxTransformPartsSchema,
   PxTransformValueSchema: () => PxTransformValueSchema,
   PxTransformationEffectSchema: () => PxTransformationEffectSchema,
@@ -104,6 +104,7 @@ __export(index_exports, {
   describeSchema: () => describeSchema,
   diffInEffect: () => diffInEffect,
   evaluateMotionPathSegment: () => evaluateMotionPathSegment,
+  extendedPathForBrowser: () => extendedPathForBrowser,
   generateNewIds: () => generateNewIds,
   getAnimatorConfig: () => getAnimatorConfig,
   getBindings: () => getBindings,
@@ -129,6 +130,7 @@ __export(index_exports, {
   renderNode: () => renderNode,
   schemaKeys: () => schemaKeys,
   setupAnimationTriggers: () => setupAnimationTriggers,
+  shiftAnimatable: () => shiftAnimatable,
   toRGBA: () => toRGBA,
   validateNodeEffects: () => validateNodeEffects,
   visualModelAt: () => visualModelAt
@@ -1139,8 +1141,9 @@ var PxFillGradientEffectSchema = implementsInterface()(px.object({
   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 PxEffectsSchema = implementsInterface()(px.object({
   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 @@ function remapKeyframeTimesOnly(node, start, stretch) {
   }
 }
 
-// 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 @@ function createPathSampler(d) {
   };
   return {
     totalLength,
+    closed,
     sampleAtDistance(dist) {
       if (!closed && (dist < 0 || dist > totalLength)) {
         const edge = dist < 0 ? 0 : totalLength;
@@ -2685,6 +2592,173 @@ function createPathSampler(d) {
   };
 }
 
+// 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 @@ function alongAffine(sampler, dist, scale, widthEm) {
   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 @@ function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLengt
     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 @@ function roundN(v, n) {
   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 @@ function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create) {
         }
       };
     };
-    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 @@ function toGroup(node, children, create) {
   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 @@ function applyTextGlyphsEffect(node, fx, ctx) {
   }
   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 @@ function applyPlayerEffects_exceptRetime(node, ctx) {
   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 @@ function applyPlayerEffects_exceptRetime(node, ctx) {
       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);
@@ -5784,8 +5875,8 @@ function subtractMultiset(a, b) {
   PxRetimeEffectSchema,
   PxStrokeGradientEffectSchema,
   PxSvgNodeExtra,
-  PxTextAlongPathEffectSchema,
   PxTextEffectSchema,
+  PxTextPathEffectSchema,
   PxTransformPartsSchema,
   PxTransformValueSchema,
   PxTransformationEffectSchema,
@@ -5805,6 +5896,7 @@ function subtractMultiset(a, b) {
   describeSchema,
   diffInEffect,
   evaluateMotionPathSegment,
+  extendedPathForBrowser,
   generateNewIds,
   getAnimatorConfig,
   getBindings,
@@ -5830,6 +5922,7 @@ function subtractMultiset(a, b) {
   renderNode,
   schemaKeys,
   setupAnimationTriggers,
+  shiftAnimatable,
   toRGBA,
   validateNodeEffects,
   visualModelAt