@pixodesk/svg-animator-web 1.0.27 → 1.0.29

package/dist/index.cjs

@@ -50,6 +50,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   COLOUR_ATTR_NAMES: () => COLOUR_ATTR_NAMES,
+  MISSING_GLYPH_CLASS_NAME: () => MISSING_GLYPH_CLASS_NAME,
   PX_ANIMATOR_DATA_KEY: () => PX_ANIMATOR_DATA_KEY,
   PX_ANIM_ATTR_NAME: () => PX_ANIM_ATTR_NAME,
   PX_ANIM_SRC_ATTR_NAME: () => PX_ANIM_SRC_ATTR_NAME,
@@ -1316,6 +1317,13 @@ var PxScrollSchema = implementsInterface()(px.object({
   kind: px.enum(["view", "scroll"]).optional(),
   axis: px.enum(["block", "inline", "x", "y"]).optional(),
   source: px.enum(["nearest", "root"]).optional(),
+  // Free-form: the two keywords `parent`/`scroller` plus any CSS selector.
+  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()
 }));
 var PxAnimatorConfigSchema = implementsInterface()(px.object({
@@ -4548,6 +4556,19 @@ var TEXT_ATTR_KEYS = [
   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") {
@@ -4559,17 +4580,39 @@ function parseLen(v) {
 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;
@@ -4588,6 +4631,11 @@ function paintOf(s) {
   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) {
@@ -4601,6 +4649,7 @@ function soleFontOf(glyphs) {
   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;
@@ -4636,7 +4685,7 @@ function materialiseGlyphTextHorizontal(node, opts) {
         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;
@@ -4827,7 +4876,7 @@ function collectAlongPathCells(node, glyphs, soleFont, warnings) {
           } 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;
@@ -4883,6 +4932,7 @@ function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLengt
   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);
@@ -4971,12 +5021,13 @@ function buildAnimatedAlongPath(cells, sampler, distOf, times, loop, create, isC
     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;
 }
@@ -4985,24 +5036,34 @@ function paintProps(paint) {
   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) {
@@ -6540,6 +6601,10 @@ function createNativeScrollTimeline(subject, config) {
   if (!config || !isScrollTimeline(config)) return null;
   const scroll = config.scroll || {};
   const kind = (_a = scroll.kind) != null ? _a : "view";
+  if (scroll.smoothing) {
+    console.warn('scroll timeline: `smoothing` needs the built-in driver \u2014 ignoring `driver: "native"`');
+    return null;
+  }
   const g = globalThis;
   const view = kind === "view";
   const Ctor = view ? g.ViewTimeline : g.ScrollTimeline;
@@ -6548,7 +6613,7 @@ function createNativeScrollTimeline(subject, config) {
   let timeline;
   try {
     if (view) {
-      timeline = new Ctor({ subject, axis });
+      timeline = new Ctor({ subject: resolveScrollSubject(subject, scroll.subject), axis });
     } else {
       const source = scroll.source === "root" ? documentScroller() : findNearestScroller(subject, "y") || findNearestScroller(subject, "x") || documentScroller();
       timeline = new Ctor({ source, axis });
@@ -6564,7 +6629,10 @@ function createNativeScrollTimeline(subject, config) {
   };
 }
 function findNearestScroller(el, axis) {
+  const body = document.body;
+  const root = document.documentElement;
   for (let p = el.parentElement; p; p = p.parentElement) {
+    if (p === body || p === root) return null;
     const style = getComputedStyle(p);
     const overflow = axis === "y" ? style.overflowY : style.overflowX;
     if (overflow === "auto" || overflow === "scroll" || overflow === "hidden" || overflow === "overlay") {
@@ -6576,11 +6644,42 @@ function findNearestScroller(el, axis) {
 function documentScroller() {
   return document.scrollingElement || document.documentElement;
 }
+var SUBJECT_PARENT = "parent";
+var SUBJECT_SCROLLER = "scroller";
+function resolveScrollSubject(svgRoot, subject) {
+  var _a, _b;
+  const spec = subject == null ? void 0 : subject.trim();
+  if (!spec) return svgRoot;
+  if (spec === SUBJECT_PARENT) {
+    let outermostPinned = null;
+    for (let p = svgRoot.parentElement; p && p !== document.body; p = p.parentElement) {
+      const position = getComputedStyle(p).position;
+      if (position === "sticky" || position === "fixed") outermostPinned = p;
+    }
+    return (_b = (_a = outermostPinned == null ? void 0 : outermostPinned.parentElement) != null ? _a : svgRoot.parentElement) != null ? _b : svgRoot;
+  }
+  if (spec === SUBJECT_SCROLLER) {
+    return findNearestScroller(svgRoot, "y") || findNearestScroller(svgRoot, "x") || documentScroller();
+  }
+  let found = null;
+  try {
+    found = document.querySelector(spec);
+  } catch (e) {
+    console.warn('scroll timeline: subject "' + spec + '" is not a valid selector \u2014 measuring the SVG itself');
+    return svgRoot;
+  }
+  if (!found) {
+    console.warn('scroll timeline: subject "' + spec + '" matched no element \u2014 measuring the SVG itself');
+    return svgRoot;
+  }
+  return found;
+}
 function createScrollDriver(subject, config, onProgress) {
-  var _a;
+  var _a, _b;
   if (!config || !isScrollTimeline(config)) return null;
   const scroll = config.scroll || {};
   const kind = (_a = scroll.kind) != null ? _a : "view";
+  const measured = resolveScrollSubject(subject, scroll.subject);
   const nearest = findNearestScroller(subject, "y") || findNearestScroller(subject, "x");
   const scroller = kind === "scroll" && scroll.source === "root" ? documentScroller() : nearest || documentScroller();
   const isRootScroller = scroller === documentScroller();
@@ -6591,7 +6690,7 @@ function createScrollDriver(subject, config, onProgress) {
       const maxOffset = axis === "y" ? scroller.scrollHeight - scroller.clientHeight : scroller.scrollWidth - scroller.clientWidth;
       return scrollOffsetProgress(offset, maxOffset, scroll.range);
     }
-    const subjectRect = subject.getBoundingClientRect();
+    const subjectRect = measured.getBoundingClientRect();
     let portStart, portSize;
     if (isRootScroller) {
       portStart = 0;
@@ -6605,12 +6704,43 @@ function createScrollDriver(subject, config, onProgress) {
     const subjectSize = axis === "y" ? subjectRect.height : subjectRect.width;
     return scrollViewProgress(subjectStart, subjectSize, portSize, scroll.range);
   };
-  let rafId = null;
+  const smoothingSec = Math.max(0, (_b = scroll.smoothing) != null ? _b : 0) / 1e3;
+  const SETTLE_EPSILON = 1e-3;
   let destroyed = false;
+  let smoothed = null;
+  let smoothRaf = null;
+  let lastFrameMs = 0;
+  const emit = (target) => {
+    if (!smoothingSec) {
+      onProgress(target);
+      return;
+    }
+    if (smoothed === null) {
+      smoothed = target;
+      onProgress(target);
+      return;
+    }
+    if (smoothRaf !== null) return;
+    lastFrameMs = 0;
+    const step = (nowMs) => {
+      smoothRaf = null;
+      if (destroyed) return;
+      const dtSec = lastFrameMs ? Math.min(0.1, (nowMs - lastFrameMs) / 1e3) : 1 / 60;
+      lastFrameMs = nowMs;
+      const goal = compute();
+      const k = 1 - Math.exp(-dtSec / smoothingSec);
+      smoothed = smoothed + (goal - smoothed) * k;
+      if (Math.abs(goal - smoothed) < SETTLE_EPSILON) smoothed = goal;
+      onProgress(smoothed);
+      if (smoothed !== goal) smoothRaf = requestAnimationFrame(step);
+    };
+    smoothRaf = requestAnimationFrame(step);
+  };
+  let rafId = null;
   const tick = () => {
     rafId = null;
     if (destroyed) return;
-    onProgress(compute());
+    emit(compute());
   };
   const schedule = () => {
     if (destroyed || rafId !== null) return;
@@ -6622,7 +6752,8 @@ function createScrollDriver(subject, config, onProgress) {
   let resizeObserver;
   if (typeof ResizeObserver !== "undefined") {
     resizeObserver = new ResizeObserver(schedule);
-    resizeObserver.observe(subject);
+    resizeObserver.observe(measured);
+    if (measured !== subject) resizeObserver.observe(subject);
     if (!isRootScroller) resizeObserver.observe(scroller);
   }
   const driver = {
@@ -6636,14 +6767,76 @@ function createScrollDriver(subject, config, onProgress) {
         cancelAnimationFrame(rafId);
         rafId = null;
       }
+      if (smoothRaf !== null) {
+        cancelAnimationFrame(smoothRaf);
+        smoothRaf = null;
+      }
     },
+    // `refresh` is a deliberate JUMP (attach, host relayout) — never eased.
     refresh: () => {
-      if (!destroyed) onProgress(compute());
+      if (!destroyed) {
+        smoothed = compute();
+        onProgress(smoothed);
+      }
     }
   };
   driver.refresh();
   return driver;
 }
+function pinScrollportHeight(svgRoot) {
+  const scroller = findNearestScroller(svgRoot, "y");
+  return scroller ? scroller.clientHeight : document.documentElement.clientHeight;
+}
+function applyScrollPin(svgRoot, scroll) {
+  const styled = svgRoot;
+  if (!(scroll == null ? void 0 : scroll.pin) || !styled.style) return () => {
+  };
+  const style = styled.style;
+  const prevPosition = style.position;
+  const prevTop = style.top;
+  style.position = "sticky";
+  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) {
+    wrapper = document.createElement("div");
+    wrapper.setAttribute("data-px-pin", "");
+    wrapper.style.height = scroll.pinDistance * 100 + "vh";
+    parent.insertBefore(wrapper, svgRoot);
+    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) {
+      wrapper.parentElement.insertBefore(svgRoot, wrapper);
+      wrapper.remove();
+    }
+  };
+}
 
 // src/PxAnimatorBind.ts
 function finaliseAnimator(animatorConfig, callbacks, make) {
@@ -6670,7 +6863,10 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
   if (isScrollTimeline(animatorConfig)) {
     return finaliseAnimator(animatorConfig, callbacks, (cb) => {
       var _a, _b;
+      let unpin = () => {
+      };
       if (animatorConfig.mode !== PxAnimatorMode.frames && ((_a = animatorConfig.scroll) == null ? void 0 : _a.driver) === "native" && rootElement) {
+        unpin = applyScrollPin(rootElement, animatorConfig.scroll);
         const native = createNativeScrollTimeline(rootElement, animatorConfig);
         if (native) {
           const api2 = createWebApiAnimator(
@@ -6680,12 +6876,23 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
             animatorConfig.mode === PxAnimatorMode.waapi,
             native
           );
-          if (api2) return api2;
+          if (api2) {
+            const destroyNative = api2.destroy.bind(api2);
+            api2.destroy = () => {
+              unpin();
+              destroyNative();
+            };
+            return api2;
+          }
         }
+        unpin();
+        unpin = () => {
+        };
       }
       const api = (animatorConfig.mode !== PxAnimatorMode.frames ? createWebApiAnimator(doc, cb, rootElement, animatorConfig.mode === PxAnimatorMode.waapi) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
       const subject = ((_b = api.getRootElement) == null ? void 0 : _b.call(api)) || rootElement;
       if (subject) {
+        unpin = applyScrollPin(subject, animatorConfig.scroll);
         const totalMs = scrollTotalDurationMs(animatorConfig);
         const driver = createScrollDriver(
           subject,
@@ -6696,6 +6903,7 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
           const destroy = api.destroy.bind(api);
           api.destroy = () => {
             driver.destroy();
+            unpin();
             destroy();
           };
         }
@@ -6888,6 +7096,7 @@ if (typeof window !== "undefined") {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   COLOUR_ATTR_NAMES,
+  MISSING_GLYPH_CLASS_NAME,
   PX_ANIMATOR_DATA_KEY,
   PX_ANIM_ATTR_NAME,
   PX_ANIM_SRC_ATTR_NAME,