@pixodesk/svg-animator-react 1.0.28 → 1.0.30

package/dist/index.umd.js

@@ -2790,7 +2790,7 @@ var PixodeskAnimatorReact = (() => {
     auto: "auto",
     exact: "exact"
   };
-  var PxTrimSubPaths = {
+  var PxStrokeTrimSubPaths = {
     separate: "separate",
     combined: "combined"
   };
@@ -2945,6 +2945,7 @@ var PixodeskAnimatorReact = (() => {
     subject: px.string().optional(),
     smoothing: px.number().optional(),
     pin: px.boolean().optional(),
+    pinAlign: px.enum(["top", "center", "bottom"]).optional(),
     pinTop: px.number().optional(),
     pinDistance: px.number().optional(),
     range: PxScrollRangeSchema.optional()
@@ -3027,10 +3028,10 @@ var PixodeskAnimatorReact = (() => {
     d: PxAnimatableStringSchema.optional(),
     animate: PxPropertyAnimationSchema.optional()
   }));
-  var PxTrimPathEffectSchema = implementsInterface()(px.object({
+  var PxStrokeTrimEffectSchema = implementsInterface()(px.object({
     offset: PxAnimatableNumberSchema.optional(),
     range: PxAnimatableVec2Schema.optional(),
-    subPaths: px.enum([PxTrimSubPaths.separate, PxTrimSubPaths.combined]).optional()
+    subPaths: px.enum([PxStrokeTrimSubPaths.separate, PxStrokeTrimSubPaths.combined]).optional()
   }));
   var PxRetimeEffectSchema = implementsInterface()(px.object({
     sourceId: px.string().optional(),
@@ -3084,7 +3085,7 @@ var PixodeskAnimatorReact = (() => {
     repeater: PxRepeaterEffectSchema.optional(),
     maskedBy: PxMaskedByEffectSchema.optional(),
     clipPath: PxClipPathEffectSchema.optional(),
-    trimPath: PxTrimPathEffectSchema.optional(),
+    strokeTrim: PxStrokeTrimEffectSchema.optional(),
     clone: PxCloneEffectSchema.optional(),
     fillGradient: PxFillGradientEffectSchema.optional(),
     strokeGradient: PxStrokeGradientEffectSchema.optional(),
@@ -6175,6 +6176,19 @@ var PixodeskAnimatorReact = (() => {
     TEXT_CONTENT_ATTR,
     "xml:space"
   ];
+  var PAINT_STATIC_KEYS = [
+    "fillOpacity",
+    "fillRule",
+    "strokeOpacity",
+    "strokeDasharray",
+    "strokeDashoffset",
+    "strokeLinecap",
+    "strokeLinejoin",
+    "strokeMiterlimit",
+    "mixBlendMode",
+    "filter"
+  ];
+  var PAINT_ANIMATE_KEYS = ["fill", "stroke", "strokeWidth", "opacity", "fillOpacity", "strokeOpacity", "strokeDasharray", "strokeDashoffset"];
   function parseLen(v) {
     if (typeof v === "number") return v;
     if (typeof v === "string") {
@@ -6186,17 +6200,39 @@ var PixodeskAnimatorReact = (() => {
   function str(v) {
     return typeof v === "string" ? v : void 0;
   }
+  function paintAnimateOf(node) {
+    const bag = node.animate;
+    if (!bag || typeof bag !== "object") return void 0;
+    let out;
+    for (const k of PAINT_ANIMATE_KEYS) {
+      if (bag[k] !== void 0) (out != null ? out : out = {})[k] = bag[k];
+    }
+    return out;
+  }
   function resolveStyle2(node, parent) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const isTextRoot = node.type === "text";
+    const nodeStyle = node.style;
+    const own = (key) => {
+      var _a2;
+      return isTextRoot ? void 0 : (_a2 = node[key]) != null ? _a2 : nodeStyle == null ? void 0 : nodeStyle[key];
+    };
+    const res = {
       fontFamily: (_a = str(node.fontFamily)) != null ? _a : parent.fontFamily,
       fontSize: (_b = parseLen(node.fontSize)) != null ? _b : parent.fontSize,
       fill: (_c = node.fill) != null ? _c : parent.fill,
       stroke: (_d = node.stroke) != null ? _d : parent.stroke,
       strokeWidth: (_e = node.strokeWidth) != null ? _e : parent.strokeWidth,
       letterSpacing: (_f = parseLen(node.letterSpacing)) != null ? _f : parent.letterSpacing,
-      wordSpacing: (_g = parseLen(node.wordSpacing)) != null ? _g : parent.wordSpacing
+      wordSpacing: (_g = parseLen(node.wordSpacing)) != null ? _g : parent.wordSpacing,
+      opacity: (_h = parseLen(own("opacity"))) != null ? _h : parent.opacity,
+      animate: (_i = isTextRoot ? void 0 : paintAnimateOf(node)) != null ? _i : parent.animate
     };
+    for (const key of PAINT_STATIC_KEYS) {
+      const v = (_j = own(key)) != null ? _j : parent[key];
+      if (v !== void 0) res[key] = v;
+    }
+    return res;
   }
   function rootStyleOf(node) {
     var _a, _b, _c;
@@ -6215,6 +6251,11 @@ var PixodeskAnimatorReact = (() => {
     if (s.fill !== void 0) p.fill = s.fill;
     if (s.stroke !== void 0) p.stroke = s.stroke;
     if (s.strokeWidth !== void 0) p.strokeWidth = s.strokeWidth;
+    if (s.opacity !== void 0 && s.opacity !== 1) p.opacity = s.opacity;
+    for (const key of PAINT_STATIC_KEYS) {
+      if (s[key] !== void 0) p[key] = s[key];
+    }
+    if (s.animate !== void 0) p.animate = s.animate;
     return p;
   }
   function glyphFontFor(s, glyphs, soleFont, warnings) {
@@ -6228,6 +6269,7 @@ var PixodeskAnimatorReact = (() => {
     return names.length === 1 ? glyphs[names[0]] : void 0;
   }
   var MISSING_GLYPH_ADVANCE_EM = 0.6;
+  var MISSING_GLYPH_CLASS_NAME = "px-missing-glyph";
   function missingGlyphBoxEm(advanceEm, ascentEm) {
     if (advanceEm <= 0 || ascentEm <= 0) return "";
     const inset = 0.08;
@@ -6263,7 +6305,7 @@ var PixodeskAnimatorReact = (() => {
           pen.x += g.width * scale;
         } else if (/\S/.test(ch)) {
           const advEm = g && g.width > 0 ? g.width : MISSING_GLYPH_ADVANCE_EM * upm;
-          placements.push({ glyphD: missingGlyphBoxEm(advEm, ascentEm), m: [scale, 0, 0, scale, pen.x, pen.y], paint, line, x: pen.x, y: pen.y, scale });
+          placements.push({ glyphD: missingGlyphBoxEm(advEm, ascentEm), m: [scale, 0, 0, scale, pen.x, pen.y], paint, isMissing: true, line, x: pen.x, y: pen.y, scale });
           pen.x += advEm * scale;
         } else {
           pen.x += (g ? g.width : 0) * scale;
@@ -6326,7 +6368,7 @@ var PixodeskAnimatorReact = (() => {
             } else if (/\S/.test(ch)) {
               const wEm = g && g.width > 0 ? g.width : MISSING_GLYPH_ADVANCE_EM * gf.unitsPerEm;
               const boxAdv = wEm * scale;
-              cells.push({ glyphD: missingGlyphBoxEm(wEm, ascentEm), widthEm: wEm, scale, paint, midBase: adv + boxAdv / 2 });
+              cells.push({ glyphD: missingGlyphBoxEm(wEm, ascentEm), widthEm: wEm, scale, paint, isMissing: true, midBase: adv + boxAdv / 2 });
               adv += boxAdv;
             } else {
               adv += (g ? g.width : 0) * scale;
@@ -6382,6 +6424,7 @@ var PixodeskAnimatorReact = (() => {
     const placements = placeCells.map((c) => ({
       glyphD: c.glyphD,
       paint: c.paint,
+      isMissing: c.isMissing,
       m: alongAffine(sampler, base + c.midBase * k, c.scale, c.widthEm, perp)
     }));
     return toGroup(node, buildPaths(placements, create, warnings), create);
@@ -6470,12 +6513,13 @@ var PixodeskAnimatorReact = (() => {
       const transform = { keyframes: kfs };
       if (loop !== void 0) transform.loop = loop;
       const animate = { transform };
+      if (c.paint.animate) Object.assign(animate, c.paint.animate);
       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", __spreadProps2(__spreadValues2({ d }, paintProps(c.paint)), { animate }), []));
+      out.push(create("path", __spreadProps2(__spreadValues2(__spreadValues2({ d }, paintProps(c.paint)), missingGlyphProps(c.isMissing)), { animate }), []));
     }
     return out;
   }
@@ -6484,24 +6528,34 @@ var PixodeskAnimatorReact = (() => {
     if (paint.fill !== void 0) p.fill = paint.fill;
     if (paint.stroke !== void 0) p.stroke = paint.stroke;
     if (paint.strokeWidth !== void 0) p.strokeWidth = paint.strokeWidth;
+    if (paint.opacity !== void 0) p.opacity = paint.opacity;
+    for (const key of PAINT_STATIC_KEYS) {
+      if (paint[key] !== void 0) p[key] = paint[key];
+    }
     return p;
   }
+  function missingGlyphProps(isMissing) {
+    return isMissing ? { class: MISSING_GLYPH_CLASS_NAME } : {};
+  }
   function buildPaths(placements, create, warnings) {
-    var _a, _b, _c;
     if (!placements.length) {
       warnings == null ? void 0 : warnings.push("textGlyphs: nothing to render");
       return [];
     }
     const byPaint = /* @__PURE__ */ new Map();
     for (const p of placements) {
-      const key = JSON.stringify([(_a = p.paint.fill) != null ? _a : null, (_b = p.paint.stroke) != null ? _b : null, (_c = p.paint.strokeWidth) != null ? _c : null]);
+      const key = JSON.stringify([p.paint, !!p.isMissing]);
       const baked = transformPathData(p.glyphD, p.m);
       const entry = byPaint.get(key);
       if (entry) entry.d += baked;
-      else byPaint.set(key, { paint: p.paint, d: baked });
+      else byPaint.set(key, { paint: p.paint, d: baked, isMissing: p.isMissing });
     }
     const out = [];
-    for (const { paint, d } of byPaint.values()) out.push(create("path", __spreadValues2({ d }, paintProps(paint)), []));
+    for (const { paint, d, isMissing } of byPaint.values()) {
+      out.push(create("path", __spreadValues2(__spreadValues2(__spreadValues2({
+        d
+      }, paintProps(paint)), missingGlyphProps(isMissing)), paint.animate !== void 0 ? { animate: __spreadValues2({}, paint.animate) } : {}), []));
+    }
     return out;
   }
   function toGroup(node, children, create) {
@@ -6533,9 +6587,9 @@ var PixodeskAnimatorReact = (() => {
     }
     return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength, pathOverflow);
   }
-  function applyTrimPathEffect(node, trimPath, ctx) {
-    if (!trimPath) return node;
-    const combined = trimPath.subPaths === PxTrimSubPaths.combined;
+  function applyStrokeTrimEffect(node, strokeTrim, ctx) {
+    if (!strokeTrim) return node;
+    const combined = strokeTrim.subPaths === PxStrokeTrimSubPaths.combined;
     const leafEntries = [];
     const measure = (n) => {
       if (Array.isArray(n.children) && n.children.length > 0) {
@@ -6566,9 +6620,9 @@ var PixodeskAnimatorReact = (() => {
     }
     const chainLengthPx = acc;
     if (combined && chainLengthPx < 1e-3) return node;
-    const offsetReadRaw = readAnimatable(trimPath.offset);
+    const offsetReadRaw = readAnimatable(strokeTrim.offset);
     const offsetRead = offsetReadRaw.kind === "absent" ? { kind: "static", value: 0 } : offsetReadRaw;
-    const rangeReadRaw = readRangeWithCrossings(trimPath.range);
+    const rangeReadRaw = readRangeWithCrossings(strokeTrim.range);
     const rangeRead = rangeReadRaw.kind === "absent" ? { kind: "static", value: [0, 1] } : rangeReadRaw;
     const offsetValues = readScalarValues(offsetRead);
     const minOffset = offsetValues.length ? Math.min(...offsetValues) : 0;
@@ -6898,7 +6952,7 @@ var PixodeskAnimatorReact = (() => {
     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 { transformBy, repeater, maskedBy, clipPath, trimPath, clone: cloneFx, fillGradient, strokeGradient, textPath, text } = fx != null ? fx : {};
+    const { transformBy, repeater, maskedBy, clipPath, strokeTrim, clone: cloneFx, fillGradient, strokeGradient, textPath, text } = fx != null ? fx : {};
     if (fx) delete node.effects;
     let n = node;
     let consumedByGlyphs = false;
@@ -6918,7 +6972,7 @@ var PixodeskAnimatorReact = (() => {
     if (!consumedByGlyphs) n = applyTextPathEffect(n, textPath, ctx);
     n = applyFillGradientEffect(n, fillGradient, ctx);
     n = applyStrokeGradientEffect(n, strokeGradient, ctx);
-    n = applyTrimPathEffect(n, trimPath, ctx);
+    n = applyStrokeTrimEffect(n, strokeTrim, ctx);
     n = applyRepeaterEffect(n, repeater, ctx);
     n = applyMaskedByEffect(n, maskedBy, transformBy, ctx);
     n = applyClipPathEffect(n, clipPath, ctx);
@@ -8002,8 +8056,11 @@ var PixodeskAnimatorReact = (() => {
     driver.refresh();
     return driver;
   }
+  function pinScrollportHeight(svgRoot) {
+    const scroller = findNearestScroller(svgRoot, "y");
+    return scroller ? scroller.clientHeight : document.documentElement.clientHeight;
+  }
   function applyScrollPin(svgRoot, scroll) {
-    var _a;
     const styled = svgRoot;
     if (!(scroll == null ? void 0 : scroll.pin) || !styled.style) return () => {
     };
@@ -8011,7 +8068,28 @@ var PixodeskAnimatorReact = (() => {
     const prevPosition = style.position;
     const prevTop = style.top;
     style.position = "sticky";
-    style.top = ((_a = scroll.pinTop) != null ? _a : 0) + "px";
+    const alignFactor = scroll.pinAlign === "center" ? 0.5 : scroll.pinAlign === "bottom" ? 1 : 0;
+    const applyTop = () => {
+      var _a;
+      const extra = (_a = scroll.pinTop) != null ? _a : 0;
+      if (!alignFactor) {
+        style.top = extra + "px";
+        return;
+      }
+      const portSize = pinScrollportHeight(svgRoot);
+      const ownSize = svgRoot.getBoundingClientRect().height;
+      style.top = Math.round((portSize - ownSize) * alignFactor + extra) + "px";
+    };
+    applyTop();
+    let resizeObserver = null;
+    const onWindowResize = alignFactor ? applyTop : null;
+    if (alignFactor) {
+      if (onWindowResize) window.addEventListener("resize", onWindowResize);
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(applyTop);
+        resizeObserver.observe(svgRoot);
+      }
+    }
     let wrapper = null;
     const parent = svgRoot.parentElement;
     if (scroll.pinDistance && scroll.pinDistance > 0 && parent) {
@@ -8022,6 +8100,8 @@ var PixodeskAnimatorReact = (() => {
       wrapper.appendChild(svgRoot);
     }
     return () => {
+      if (onWindowResize) window.removeEventListener("resize", onWindowResize);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
       style.position = prevPosition;
       style.top = prevTop;
       if (wrapper == null ? void 0 : wrapper.parentElement) {