pixi-effects 0.9.0 → 0.10.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { CompositionSequence } from './chunk-O4AJYUPK.js';
-import { ensureFilterLibrary, homeDistance, DEFAULT_FOV, DEG, resolveAt, collectPropKeys } from './chunk-FNKSXBKB.js';
-export { registerSequenceType } from './chunk-FNKSXBKB.js';
+import { CompositionSequence } from './chunk-WDGAVOMS.js';
+import { ensureFilterLibrary, homeDistance, DEFAULT_FOV, flattenSvgPath, random, rand, DEG, resolveAt, collectPropKeys } from './chunk-JAMNDBXW.js';
+export { noise, rand, random, registerSequenceType } from './chunk-JAMNDBXW.js';
 import { warnUnknownOptions, suggestName } from './chunk-DKGG7WD4.js';
 import * as PIXI from 'pixi.js';
 import { extensions, CullerPlugin, Application, Container, Rectangle, Culler, CanvasTextMetrics, TextStyle, Assets, ExtensionType, Filter, UniformGroup, GpuProgram, GlProgram, defaultFilterVert } from 'pixi.js';
@@ -1153,12 +1153,12 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
         blending.add(w.to);
       }
     }
-    comp.layers().forEach(({ seq, display, threeD }, i) => {
+    comp.layers().forEach(({ seq, display, threeD, carriers }, i) => {
       const t = seq.target;
       const name = seq.spec.name;
       const label = name ?? `${seq.spec.type}#${i}`;
-      const alpha = t?.alpha ?? 1;
-      const alive = threeD ? display.visible : t?.renderable ?? true;
+      const alpha = (t?.alpha ?? 1) * carriers.reduce((a, c) => a * (c.target?.alpha ?? 1), 1);
+      const alive = (threeD ? display.visible : t?.renderable ?? true) && carriers.every((c) => c.target?.renderable ?? true);
       const visible = parentVisible && alive && alpha > 0;
       let bounds = null;
       if (!insideThreeD) {
@@ -1173,9 +1173,16 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
         if (area === 0) onCanvas = "none";
       }
       const keys = collectPropKeys(seq.spec);
-      const moving = parentMoving || (seq.spec.keyframes ?? []).length > 0 && (keys.has("x") || keys.has("y"));
-      const scale = t?.scale;
-      const zero = parentZero || !!scale && (scale.x === 0 || scale.y === 0);
+      const carried = carriers.some((c) => {
+        const k = collectPropKeys(c.spec);
+        return (c.spec.keyframes ?? []).length > 0 && (k.has("x") || k.has("y") || k.has("rotation") || k.has("scale"));
+      });
+      const moving = parentMoving || carried || (seq.spec.keyframes ?? []).length > 0 && (keys.has("x") || keys.has("y"));
+      const zeroScale = (o) => {
+        const s = o?.scale;
+        return !!s && (s.x === 0 || s.y === 0);
+      };
+      const zero = parentZero || zeroScale(t) || carriers.some((c) => zeroScale(c.target));
       const info = { path: prefix + label, name, type: seq.spec.type, threeD, visible, alpha, moving, bounds, onCanvas };
       layers.push(info);
       let shown = bounds ? clip(bounds, view) : null;
@@ -1308,7 +1315,8 @@ var COLORS = {
   audio: "#ff7aa8",
   composition: "#8ea4c8",
   three: "#ff9f68",
-  camera: "#b0b0b0"
+  camera: "#b0b0b0",
+  null: "#b0b0b0"
 };
 var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 var num = (n) => String(Math.round(n * 100) / 100);
@@ -2136,6 +2144,269 @@ function orbit(opts) {
   return spec;
 }
 
+// src/presets/followPath.ts
+var KEYS = ["d", "at", "duration", "ease", "from", "to", "orient", "rotate", "frameRate"];
+var MAX_STEPS = 2e3;
+function followPath(opts) {
+  warnUnknownOptions("followPath()", opts, KEYS);
+  const { d, at = 0, duration, ease = "none", from = 0, to = 1, orient = false, rotate = 0, frameRate = 30 } = opts;
+  if (typeof d !== "string" || d.trim() === "") throw new Error('followPath(): d must be SVG path data, e.g. "M 100 600 C 300 100 900 100 1180 600"');
+  if (!(Number.isFinite(duration) && duration > 0)) throw new Error(`followPath(): duration must be a positive number of seconds, got ${duration}`);
+  if (!(Number.isFinite(frameRate) && frameRate > 0)) throw new Error(`followPath(): frameRate must be a positive number (samples per second), got ${frameRate}`);
+  for (const [n, v] of [["from", from], ["to", to]]) {
+    if (!(Number.isFinite(v) && v >= 0 && v <= 1)) throw new Error(`followPath(): ${n} must be a fraction of the path between 0 and 1, got ${v}`);
+  }
+  const steps = Math.max(1, Math.round(duration * frameRate));
+  if (steps > MAX_STEPS) throw new Error(`followPath(): ${steps} samples is too many (max ${MAX_STEPS}); lower frameRate or duration`);
+  const segments = [];
+  let total = 0;
+  for (const line of flattenSvgPath(d)) {
+    const p = line.closed ? [...line.pts, line.pts[0], line.pts[1]] : line.pts;
+    for (let i = 2; i < p.length; i += 2) {
+      const len = Math.hypot(p[i] - p[i - 2], p[i + 1] - p[i - 1]);
+      if (len === 0) continue;
+      segments.push({ x0: p[i - 2], y0: p[i - 1], x1: p[i], y1: p[i + 1], start: total, len });
+      total += len;
+    }
+  }
+  if (!(total > 0)) throw new Error(`followPath(): the path "${d}" has no length (it needs at least two different points)`);
+  const find = (s) => {
+    let lo = 0, hi = segments.length - 1;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (segments[mid].start + segments[mid].len < s) lo = mid + 1;
+      else hi = mid;
+    }
+    return segments[lo];
+  };
+  const at_ = (fraction) => {
+    const s = Math.min(Math.max(fraction, 0), 1) * total;
+    const g = find(s);
+    const t = Math.min(Math.max((s - g.start) / g.len, 0), 1);
+    return { x: g.x0 + (g.x1 - g.x0) * t, y: g.y0 + (g.y1 - g.y0) * t, heading: Math.atan2(g.y1 - g.y0, g.x1 - g.x0) * 180 / Math.PI };
+  };
+  const shape = parseEase(ease);
+  const round2 = (v) => Math.round(v * 1e6) / 1e6;
+  let turn = 0;
+  const sample = (k) => {
+    const p = from + (to - from) * shape(k / steps);
+    const pt = at_(p);
+    const out2 = { x: round2(pt.x), y: round2(pt.y) };
+    if (orient) {
+      let h = pt.heading + rotate;
+      if (k === 0) turn = h;
+      else {
+        let delta = h - turn;
+        delta -= 360 * Math.round(delta / 360);
+        turn += delta;
+      }
+      out2.rotation = round2(turn);
+    }
+    return out2;
+  };
+  const out = [{ at, set: sample(0) }];
+  const step = duration / steps;
+  for (let k = 1; k <= steps; k++) out.push({ at: round2(at + (k - 1) * step), to: sample(k), duration: round2(step), ease: "none" });
+  return out;
+}
+
+// src/presets/stagger.ts
+var STAGGER_KEYS = ["each", "amount", "from", "grid", "ease", "seed"];
+var FROM_NAMES = ["start", "end", "center", "edges", "random"];
+function stagger(items, options = {}) {
+  const isCount = typeof items === "number";
+  const n = isCount ? items : items.length;
+  if (!Number.isInteger(n) || n < 0) throw new Error(`stagger(): count must be a whole number of items, got ${n}`);
+  warnUnknownOptions("stagger()", options, STAGGER_KEYS);
+  const { each, amount, from = "start", grid, ease = "none", seed = 0 } = options;
+  if (each !== void 0 && amount !== void 0) throw new Error("stagger(): give `each` (seconds between neighbours) or `amount` (seconds in total), not both");
+  if (each !== void 0 && !(Number.isFinite(each) && each >= 0)) throw new Error(`stagger(): each must be a number of seconds >= 0, got ${each}`);
+  if (amount !== void 0 && !(Number.isFinite(amount) && amount >= 0)) throw new Error(`stagger(): amount must be a number of seconds >= 0, got ${amount}`);
+  if (typeof from === "string" && !FROM_NAMES.includes(from)) {
+    throw new Error(`stagger(): from "${from}" is not one of ${FROM_NAMES.map((f) => `"${f}"`).join(", ")} or an item index`);
+  }
+  if (typeof from === "number" && !(Number.isInteger(from) && from >= 0 && from < Math.max(n, 1))) throw new Error(`stagger(): from ${from} is not an index of the ${n} items`);
+  if (grid && !(Array.isArray(grid) && grid.length === 2 && grid.every((g) => Number.isInteger(g) && g > 0) && grid[0] * grid[1] >= n)) {
+    throw new Error(`stagger(): grid must be [columns, rows] and hold all ${n} items, got ${JSON.stringify(grid)}`);
+  }
+  const dist = distances(n, from, grid, seed);
+  const max = dist.reduce((m, d) => Math.max(m, d), 0);
+  const total = amount !== void 0 ? amount : (each ?? 0.1) * max;
+  const shape = parseEase(ease);
+  const delays = dist.map((d) => max === 0 ? 0 : Math.round(total * shape(d / max) * 1e6) / 1e6);
+  if (isCount) return delays;
+  return items.map((layer, i) => ({ ...layer, at: Math.round(((layer.at ?? 0) + delays[i]) * 1e6) / 1e6 }));
+}
+function distances(n, from, grid, seed) {
+  if (n === 0) return [];
+  if (from === "random") {
+    const order = Array.from({ length: n }, (_, i) => i);
+    const r = random(seed);
+    for (let i = n - 1; i > 0; i--) {
+      const j = Math.floor(r() * (i + 1));
+      [order[i], order[j]] = [order[j], order[i]];
+    }
+    return order;
+  }
+  if (!grid) {
+    const mid = (n - 1) / 2;
+    return Array.from({ length: n }, (_, i) => {
+      switch (from) {
+        case "start":
+          return i;
+        case "end":
+          return n - 1 - i;
+        case "center":
+          return Math.abs(i - mid);
+        case "edges":
+          return mid - Math.abs(i - mid);
+        default:
+          return Math.abs(i - from);
+      }
+    });
+  }
+  const [cols, rows] = grid;
+  const at = (i) => ({ x: i % cols, y: Math.floor(i / cols) });
+  const origin = from === "start" ? { x: 0, y: 0 } : from === "end" ? { x: cols - 1, y: rows - 1 } : from === "center" || from === "edges" ? { x: (cols - 1) / 2, y: (rows - 1) / 2 } : at(from);
+  const d = Array.from({ length: n }, (_, i) => Math.hypot(at(i).x - origin.x, at(i).y - origin.y));
+  if (from !== "edges") return d;
+  const far = Math.max(...d);
+  return d.map((v) => far - v);
+}
+
+// src/presets/wiggle.ts
+var WIGGLE_KEYS = ["at", "duration", "freq", "seed", "ease", "props"];
+var MAX_STEPS2 = 2e3;
+function wiggle(opts) {
+  warnUnknownOptions("wiggle()", opts, WIGGLE_KEYS);
+  const { at = 0, duration, freq = 3, seed = 0, ease = "sine.inOut", props } = opts;
+  if (!(Number.isFinite(duration) && duration > 0)) throw new Error(`wiggle(): duration must be a positive number of seconds, got ${duration}`);
+  if (!(Number.isFinite(freq) && freq > 0)) throw new Error(`wiggle(): freq must be a positive number (steps per second), got ${freq}`);
+  const names = Object.keys(props ?? {});
+  if (names.length === 0) throw new Error("wiggle(): props is empty; name at least one property, e.g. props: { x: { around: 100, amp: 8 } }");
+  for (const n of names) {
+    const p = props[n];
+    if (!Number.isFinite(p.amp)) throw new Error(`wiggle(): props.${n}.amp must be a number, got ${p.amp}`);
+    if (p.around === void 0 || p.around === null || p.around === "") throw new Error(`wiggle(): props.${n}.around is missing`);
+  }
+  const steps = Math.ceil(duration * freq - 1e-9);
+  if (steps > MAX_STEPS2) throw new Error(`wiggle(): ${steps} steps is too many (max ${MAX_STEPS2}); lower freq or duration`);
+  const set = {};
+  for (const n of names) set[n] = props[n].around;
+  const out = [{ at, set }];
+  const stepLen = duration / steps;
+  for (let s = 0; s < steps; s++) {
+    const to = {};
+    names.forEach((n, pi) => {
+      const p = props[n];
+      if (s === steps - 1) {
+        to[n] = p.around;
+        return;
+      }
+      const off = (rand(seed * 7919 + pi * 104729 + s * 31 + 1) * 2 - 1) * p.amp;
+      to[n] = typeof p.around === "number" ? p.around + off : `(${p.around}) ${off < 0 ? "-" : "+"} ${Math.abs(off)}`;
+    });
+    out.push({ at: at + s * stepLen, to, duration: stepLen, ease });
+  }
+  return out;
+}
+
+// src/presets/animateText.ts
+var KEYS2 = ["by", "x", "y", "align", "name", "at", "duration", "in", "out", "stagger", "idle", "styleFor"];
+var PRESETS = {
+  rise: { from: { y: 40, alpha: 0 }, duration: 0.5, ease: "back.out(2)" },
+  drop: { from: { y: -50, alpha: 0 }, duration: 0.7, ease: "bounce.out" },
+  fade: { from: { alpha: 0 }, duration: 0.5, ease: "power1.out" },
+  pop: { from: { scale: 0, alpha: 0 }, duration: 0.45, ease: "back.out(2.4)" },
+  zoom: { from: { scale: 2.5, alpha: 0 }, duration: 0.6, ease: "power3.out" },
+  slide: { from: { x: -60, alpha: 0 }, duration: 0.5, ease: "power3.out" },
+  spin: { from: { rotation: -90, scale: 0, alpha: 0 }, duration: 0.6, ease: "back.out(1.7)" }
+};
+var PRESET_NAMES = Object.keys(PRESETS);
+function animateText(text, style, options) {
+  warnUnknownOptions("animateText()", options, KEYS2);
+  const { by = "chars", x = 0, y = 0, align = "left", name = "text", at = 0, duration, idle, styleFor } = options;
+  if (!(Number.isFinite(duration) && duration > 0)) throw new Error(`animateText(): duration must be a positive number of seconds (how long until the last piece is gone), got ${duration}`);
+  const pieces = splitText(text, style, { by, x, y, align });
+  if (pieces.length === 0) return [];
+  const lineHeight = measureText("M", style).height;
+  const inTween = options.in === false ? null : resolveTween(options.in ?? "rise", "in");
+  const outTween = options.out === void 0 || options.out === false ? null : resolveTween(options.out, "out");
+  const delays = stagger(pieces.length, options.stagger ?? { each: 0.04 });
+  const wave = Math.max(...delays);
+  const need = (inTween?.duration ?? 0) + (outTween?.duration ?? 0) + wave;
+  if (duration < need - 1e-9) {
+    throw new Error(`animateText(): duration ${duration} is too short for this wave: the entrance${outTween ? ", the exit" : ""} and the stagger need at least ${+need.toFixed(3)} s`);
+  }
+  const end = at + duration;
+  return pieces.map((p, i) => {
+    const cx = p.x + p.width / 2, cy = p.y + lineHeight / 2;
+    const rest = { x: cx, y: cy, alpha: 1, scale: 1, scaleX: 1, scaleY: 1, rotation: 0 };
+    const start = at + delays[i];
+    const len = end - start;
+    const keyframes = [];
+    const place = (key, v) => key === "x" || key === "y" ? rest[key] + v : v;
+    if (inTween) {
+      keyframes.push({
+        at: 0,
+        duration: inTween.duration,
+        ease: inTween.ease,
+        from: Object.fromEntries(Object.entries(inTween.from).map(([k, v]) => [k, place(k, v)])),
+        to: Object.fromEntries(Object.keys(inTween.from).map((k) => [k, inTween.to[k] ?? rest[k]]))
+      });
+    }
+    let idleEnd = len;
+    if (outTween) {
+      const begin = outTween.duration + (wave - delays[i]);
+      idleEnd = len - begin;
+      keyframes.push({
+        at: -begin,
+        duration: outTween.duration,
+        ease: outTween.ease,
+        from: Object.fromEntries(Object.keys(outTween.from).map((k) => [k, outTween.to[k] ?? rest[k]])),
+        to: Object.fromEntries(Object.entries(outTween.from).map(([k, v]) => [k, place(k, v)]))
+      });
+    }
+    if (idle) {
+      const props = {};
+      for (const k of ["x", "y", "rotation", "scale"]) if (idle[k] !== void 0) props[k] = { around: rest[k], amp: idle[k] };
+      const freq = idle.freq ?? 1;
+      const from = inTween?.duration ?? 0;
+      if (Object.keys(props).length > 0 && idleEnd - from >= 1 / freq) {
+        keyframes.push(...wiggle({ at: from, duration: idleEnd - from, freq, seed: (idle.seed ?? 0) * 1e3 + i, props }));
+      }
+    }
+    return {
+      type: "text",
+      name: `${name}-${i}`,
+      text: p.text,
+      style: styleFor ? { ...style, ...styleFor(p) } : style,
+      at: start,
+      duration: len,
+      initial: { x: cx, y: cy, anchorX: 0.5, anchorY: 0.5 },
+      keyframes
+    };
+  });
+}
+function resolveTween(spec, which) {
+  const t = typeof spec === "string" ? { preset: spec } : spec;
+  if (t.preset !== void 0 && !(t.preset in PRESETS)) {
+    const guess = suggestName(String(t.preset), PRESET_NAMES);
+    throw new Error(`animateText(): ${which} "${t.preset}" is not a preset${guess ? `; did you mean "${guess}"?` : ""} (presets: ${PRESET_NAMES.map((n) => `"${n}"`).join(", ")})`);
+  }
+  const base = t.preset ? PRESETS[t.preset] : void 0;
+  const from = { ...base?.from ?? {}, ...t.from ?? {} };
+  const to = t.to ?? {};
+  const known = /* @__PURE__ */ new Set(["x", "y", "alpha", "scale", "scaleX", "scaleY", "rotation"]);
+  for (const k of Object.keys(from)) {
+    if (!known.has(k) && to[k] === void 0) throw new Error(`animateText(): ${which}.from has "${k}", which has no resting value; give ${which}.to: { ${k}: \u2026 }`);
+  }
+  if (Object.keys(from).length === 0) throw new Error(`animateText(): ${which} needs a preset or a from`);
+  let ease = t.ease ?? base?.ease ?? "power2.out";
+  if (which === "out" && t.ease === void 0) ease = ease.replace(".out", ".in");
+  return { from, to: { ...to }, duration: t.duration ?? base?.duration ?? 0.5, ease };
+}
+
 // src/transforms/withFade.ts
 function withFade(spec, opts) {
   warnUnknownOptions("withFade()", opts, ["in", "out"]);
@@ -2156,6 +2427,6 @@ function withFade(spec, opts) {
   return spec;
 }
 
-export { Movie, kenBurns, measureText, orbit, splitText, withFade };
+export { Movie, animateText, followPath, kenBurns, measureText, orbit, splitText, stagger, wiggle, withFade };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map