@px-petals/roku.motion-web 0.0.0-stage → 1.1.0

package/lottie/lottie.props.js

@@ -0,0 +1,265 @@
+/**
+ * Lottie properties as functions of the frame: a static value, or keyframes
+ * eased by their cubic beziers. A property carrying a slot id (`sid`) reads
+ * the live slot table first, so data bindings change what draws without
+ * recompiling the animation.
+ *
+ * Both keyframe forms are read: the current one, where a segment ends at the
+ * next keyframe's `s`, and the older one lottie-roku's sources still use,
+ * where a keyframe carries its own end value in `e`.
+ */
+
+import { mixValues, settledWeight } from '../mixer/mixer.mix.js'
+
+/**
+ * @typedef {(frame: number) => any} Evaluator
+ */
+
+/**
+ * Live slot values, by slot id; `undefined` leaves a property to its keyframes, and a function gives the value at a frame.
+ * @typedef {Record<string, any>} Slots
+ */
+
+/**
+ * @param   {any}       property   a Lottie property: `{ a, k }`, optionally with `sid`
+ * @param   {Slots}     slots      read on every call, so changing it changes the result
+ * @param   {any}       [fallback] the value when the property is absent
+ * @returns {Evaluator}
+ */
+export function evaluator(property, slots, fallback) {
+  if (!property) return () => fallback
+
+  const keyed = property.pz ? posedEvaluator(property, keyedEvaluator(property, fallback), slots) : keyedEvaluator(property, fallback)
+  const sid = property.sid
+  if (typeof sid !== 'string') return keyed
+
+  // a nested machine that mixes several animations names where its poses are
+  const poseKey = property.pz ? 'pz:' + property.pz.n : ''
+  return (frame) => {
+    const live = slots[sid]
+    // a live value can depend on the frame: a skin the animation keys is asked for its path, in the poses of the machine it is drawn in
+    if (typeof live === 'function') return live(frame, poseKey ? slots[poseKey] : null)
+    return live === undefined ? keyed(frame) : live
+  }
+}
+
+/**
+ * A property of a nested machine that plays several animations at once. The
+ * machine says which it plays, as `{ start, frame, weight }` in the slot
+ * `pz:<id>`: the first frame of the animation's segment on the stitched
+ * timeline, how far in it is, and its weight. Rive applies the poses in
+ * order, each mixing the value toward its own by its weight, onto what the
+ * last frame left: held, that settles where each pose that keys the property
+ * counts by its weight times what the poses after it leave (`settledWeight`),
+ * and the setup value no longer shows. One that does not key it leaves it
+ * alone; with none keying it, it is the keyframes at the time remap's frame.
+ *
+ * @param   {any}       property `pz` is `{ n, k }`: the machine's id, and the segments that key the property
+ * @param   {Evaluator} keyed
+ * @param   {Slots}     slots
+ * @returns {Evaluator}
+ */
+function posedEvaluator(property, keyed, slots) {
+  const key = 'pz:' + property.pz.n
+  const keying = property.pz.k
+  return (frame) => {
+    const poses = slots[key]
+    const value = keyed(frame)
+    if (!poses) return value
+
+    let mixed = value
+    let total = 0
+    for (let n = 0; n < poses.length; n++) {
+      const pose = poses[n]
+      const weight = keying.indexOf(pose.start) < 0 ? 0 : settledWeight(poses, n, keying)
+      if (weight <= 0) continue
+      // a running weighted average: each pose's share of what has been counted so far
+      total += weight
+      mixed = mixValues(mixed, keyed(pose.start + pose.frame), weight / total)
+    }
+    return mixed
+  }
+}
+
+/**
+ * Whether a property's value changes over time.
+ *
+ * @param {any} property
+ */
+export function isAnimated(property) {
+  return !!property && property.a === 1 && Array.isArray(property.k) && property.k.length > 0 && typeof property.k[0] === 'object' && property.k[0] !== null && 't' in property.k[0]
+}
+
+/**
+ * @param   {any}       property
+ * @param   {any}       fallback
+ * @returns {Evaluator}
+ */
+function keyedEvaluator(property, fallback) {
+  // the pose mixer replaces a keyed property's keyframes with its own evaluator
+  if (typeof property.mx === 'function') return property.mx
+
+  if (!isAnimated(property)) {
+    const value = property.k === undefined ? fallback : property.k
+    return () => value
+  }
+
+  const keyframes = property.k
+  return (frame) => valueAt(keyframes, frame)
+}
+
+/**
+ * @param   {any[]}  keyframes
+ * @param   {number} frame
+ * @returns {any}
+ */
+function valueAt(keyframes, frame) {
+  const first = keyframes[0]
+  if (frame <= first.t || keyframes.length === 1) return startValue(first)
+
+  for (let n = 0; n < keyframes.length - 1; n++) {
+    const from = keyframes[n]
+    const to = keyframes[n + 1]
+    if (frame >= to.t) continue
+
+    if (from.h === 1) return startValue(from)
+    const end = from.e !== undefined ? from.e : startValue(to)
+    const span = to.t - from.t
+    const progress = span > 0 ? (frame - from.t) / span : 1
+    return blend(startValue(from), end, from, progress)
+  }
+
+  const last = keyframes[keyframes.length - 1]
+  // an old-form last keyframe may hold no `s`; the one before ends where it ends
+  if (last.s === undefined) {
+    const before = keyframes[keyframes.length - 2]
+    return before.e !== undefined ? before.e : startValue(before)
+  }
+  return startValue(last)
+}
+
+/** @param {any} keyframe */
+function startValue(keyframe) {
+  return keyframe.s
+}
+
+/**
+ * Eases each dimension by its own bezier when the keyframe gives one per
+ * dimension, else all by the same one.
+ *
+ * @param {any}    from
+ * @param {any}    to
+ * @param {any}    keyframe the segment's first keyframe, holding `o` and `i`
+ * @param {number} progress 0-1 through the segment
+ */
+function blend(from, to, keyframe, progress) {
+  if (isPath(from)) return blendPath(from, to, easeAt(keyframe, 0, progress))
+  if (!Array.isArray(from)) return lerp(from, to, easeAt(keyframe, 0, progress))
+
+  const result = []
+  for (let d = 0; d < from.length; d++) {
+    const target = Array.isArray(to) && d < to.length ? to[d] : from[d]
+    result.push(lerp(from[d], target, easeAt(keyframe, d, progress)))
+  }
+  return result
+}
+
+/**
+ * @param {any} value
+ */
+function isPath(value) {
+  return Array.isArray(value) && value.length > 0 && typeof value[0] === 'object' && value[0] !== null && Array.isArray(value[0].v)
+}
+
+/**
+ * A shape keyframe's value is `[{ i, o, v, c }]`; its vertices blend pairwise.
+ *
+ * @param {any[]}  from
+ * @param {any[]}  to
+ * @param {number} t
+ */
+function blendPath(from, to, t) {
+  const a = from[0]
+  const b = Array.isArray(to) && to[0] ? to[0] : a
+  return [ { c: a.c, v: blendPoints(a.v, b.v, t), i: blendPoints(a.i, b.i, t), o: blendPoints(a.o, b.o, t) } ]
+}
+
+/**
+ * @param {number[][]} a
+ * @param {number[][]} b
+ * @param {number}     t
+ */
+function blendPoints(a, b, t) {
+  const points = []
+  for (let n = 0; n < a.length; n++) {
+    const q = b[n] || a[n]
+    points.push([ lerp(a[n][0], q[0], t), lerp(a[n][1], q[1], t) ])
+  }
+  return points
+}
+
+/**
+ * @param {number} a
+ * @param {number} b
+ * @param {number} t
+ */
+function lerp(a, b, t) {
+  return a + (b - a) * t
+}
+
+/**
+ * The eased progress for one dimension.
+ *
+ * @param   {any}    keyframe
+ * @param   {number} dimension
+ * @param   {number} progress
+ * @returns {number}
+ */
+function easeAt(keyframe, dimension, progress) {
+  const out = keyframe.o
+  const into = keyframe.i
+  if (!out || !into) return progress
+
+  const pick = (/** @type {any} */ value) => (Array.isArray(value) ? (dimension < value.length ? value[dimension] : value[0]) : value)
+  return cubicBezier(pick(out.x), pick(out.y), pick(into.x), pick(into.y), progress)
+}
+
+/**
+ * The y of a CSS-style cubic bezier easing curve (0,0)-(x1,y1)-(x2,y2)-(1,1)
+ * at x: Newton's method on x, bisection when it stalls.
+ *
+ * @param   {number} x1
+ * @param   {number} y1
+ * @param   {number} x2
+ * @param   {number} y2
+ * @param   {number} x
+ * @returns {number}
+ */
+export function cubicBezier(x1, y1, x2, y2, x) {
+  const isLinear = x1 === y1 && x2 === y2
+  if (isLinear || x <= 0 || x >= 1) return x <= 0 ? 0 : x >= 1 ? 1 : x
+
+  const curve = (/** @type {number} */ t, /** @type {number} */ p1, /** @type {number} */ p2) => 3 * (1 - t) * (1 - t) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t
+  const slope = (/** @type {number} */ t, /** @type {number} */ p1, /** @type {number} */ p2) => 3 * (1 - t) * (1 - t) * p1 + 6 * (1 - t) * t * (p2 - p1) + 3 * t * t * (1 - p2)
+
+  let t = x
+  for (let n = 0; n < 8; n++) {
+    const error = curve(t, x1, x2) - x
+    if (Math.abs(error) < 1e-6) return curve(t, y1, y2)
+    const d = slope(t, x1, x2)
+    if (Math.abs(d) < 1e-6) break
+    t -= error / d
+  }
+
+  let low = 0
+  let high = 1
+  t = x
+  for (let n = 0; n < 40; n++) {
+    const value = curve(t, x1, x2)
+    if (Math.abs(value - x) < 1e-6) break
+    if (value < x) low = t
+    else high = t
+    t = (low + high) / 2
+  }
+  return curve(t, y1, y2)
+}

package/lottie/lottie.shapes.js

@@ -0,0 +1,259 @@
+/**
+ * A shape layer's items, compiled once and run per frame into draw
+ * operations.
+ *
+ * Lottie's rules, in a group's item list:
+ * - earlier items are on top, so operations draw in reverse;
+ * - a paint covers every path above it in its group, and in groups above it;
+ * - a modifier (trim, merge) changes those same paths, so a subgroup's own
+ * paint draws them trimmed too.
+ *
+ * Geometry therefore lives in a shared holder: a trim rewrites the holder's
+ * paths, and every paint that captured it draws the result.
+ */
+
+import { evaluator } from './lottie.props.js'
+import { ellipse, fromLottie, IDENTITY, multiply, rectangle, star, transformMatrix, trimEach } from './lottie.paths.js'
+
+/** @import { Path, Matrix } from './lottie.paths.js' */
+/** @import { Slots } from './lottie.props.js' */
+
+/**
+ * Geometry gathered from items above a paint or modifier.
+ * @typedef {{ paths: Path[], merge?: { mode: number, parts: Entry[] } }} Holder
+ * @typedef {{ holder: Holder, matrix: Matrix }} Entry  `matrix` maps the holder's space into the gathering group's
+ * @typedef {{ paint: any, entries: Entry[], matrix: Matrix, opacity: number }} Operation  `matrix` maps the paint's group into the layer
+ */
+
+/**
+ * @param   {any[]} items a shape layer's `shapes`, or a group's `it`
+ * @param   {Slots} slots
+ * @returns {any[]}       compiled items
+ */
+export function compileItems(items, slots) {
+  const compiled = []
+  for (let n = 0; n < (items || []).length; n++) {
+    const item = items[n]
+    if (item.hd) continue
+    const one = compileItem(item, slots)
+    if (one) compiled.push(one)
+  }
+  return compiled
+}
+
+/**
+ * @param {any}   item
+ * @param {Slots} slots
+ */
+function compileItem(item, slots) {
+  const at = (/** @type {any} */ property, /** @type {any} */ fallback) => evaluator(property, slots, fallback)
+  const reversed = item.d === 3
+
+  switch (item.ty) {
+    case 'gr':
+      return { kind: 'group', rid: typeof item.rid === 'string' ? item.rid : '', items: compileItems(item.it, slots), transform: compileTransform((item.it || []).filter((/** @type {any} */ i) => i.ty === 'tr')[0], slots) }
+    case 'sh': {
+      const shape = at(item.ks, { v: [], i: [], o: [], c: false })
+      return { kind: 'geometry', path: (/** @type {number} */ f) => fromLottie(unwrap(shape(f))) }
+    }
+    case 'rc': {
+      const p = at(item.p, [ 0, 0 ])
+      const s = at(item.s, [ 0, 0 ])
+      const r = at(item.r, 0)
+      return { kind: 'geometry', path: (/** @type {number} */ f) => rectangle(p(f), s(f), scalar(r(f)), reversed) }
+    }
+    case 'el': {
+      const p = at(item.p, [ 0, 0 ])
+      const s = at(item.s, [ 0, 0 ])
+      return { kind: 'geometry', path: (/** @type {number} */ f) => ellipse(p(f), s(f), reversed) }
+    }
+    case 'sr': {
+      const p = at(item.p, [ 0, 0 ])
+      const pt = at(item.pt, 5)
+      const r = at(item.r, 0)
+      const or = at(item.or, 0)
+      const ir = at(item.ir, 0)
+      const os = at(item.os, 0)
+      const is = at(item.is, 0)
+      return {
+        kind: 'geometry',
+        path: (/** @type {number} */ f) => star({ type: item.sy, points: scalar(pt(f)), position: p(f), rotation: scalar(r(f)), outer: scalar(or(f)), inner: scalar(ir(f)), outerRound: scalar(os(f)), innerRound: scalar(is(f)), reversed }),
+      }
+    }
+    case 'tm':
+      return { kind: 'trim', start: at(item.s, 0), end: at(item.e, 100), offset: at(item.o, 0), together: item.m === 2 }
+    case 'mm':
+      return { kind: 'merge', mode: item.mm || 1 }
+    case 'fl':
+    case 'st':
+    case 'gf':
+    case 'gs':
+      return { kind: 'paint', paint: compilePaint(item, slots) }
+    default:
+      // `tr` is read by its group; repeaters, round corners and the rest are not drawn
+      return null
+  }
+}
+
+/**
+ * A shape keyframe value arrives wrapped in a one-element array.
+ *
+ * @param {any} value
+ */
+function unwrap(value) {
+  return Array.isArray(value) ? value[0] || { v: [] } : value
+}
+
+/** @param {any} value */
+export function scalar(value) {
+  return Array.isArray(value) ? value[0] : value
+}
+
+/**
+ * @param   {any}                                                    tr
+ * @param   {Slots}                                                  slots
+ * @returns {(frame: number) => { matrix: Matrix, opacity: number }}
+ */
+export function compileTransform(tr, slots) {
+  if (!tr) return () => ({ matrix: IDENTITY, opacity: 1 })
+
+  const at = (/** @type {any} */ property, /** @type {any} */ fallback) => evaluator(property, slots, fallback)
+  const a = at(tr.a, [ 0, 0 ])
+  const p = splitPosition(tr.p, slots)
+  const s = at(tr.s, [ 100, 100 ])
+  const r = at(tr.r || tr.rz, 0)
+  const o = at(tr.o, 100)
+  const sk = at(tr.sk, 0)
+  const sa = at(tr.sa, 0)
+  return (frame) => ({
+    matrix: transformMatrix(a(frame), p(frame), s(frame), scalar(r(frame)), scalar(sk(frame)), scalar(sa(frame))),
+    opacity: scalar(o(frame)) / 100,
+  })
+}
+
+/**
+ * A position, given whole or as separate `x` and `y` (`s: true`).
+ *
+ * @param {any}   position
+ * @param {Slots} slots
+ */
+function splitPosition(position, slots) {
+  if (position && position.s) {
+    const x = evaluator(position.x, slots, 0)
+    const y = evaluator(position.y, slots, 0)
+    return (/** @type {number} */ frame) => [ scalar(x(frame)), scalar(y(frame)) ]
+  }
+  return evaluator(position, slots, [ 0, 0 ])
+}
+
+/**
+ * @param {any}   item
+ * @param {Slots} slots
+ */
+function compilePaint(item, slots) {
+  const at = (/** @type {any} */ property, /** @type {any} */ fallback) => evaluator(property, slots, fallback)
+  const isStroke = item.ty === 'st' || item.ty === 'gs'
+  const isGradient = item.ty === 'gf' || item.ty === 'gs'
+  return {
+    isStroke,
+    isGradient,
+    rule: item.r === 2 ? 'evenodd' : 'nonzero',
+    opacity: at(item.o, 100),
+    color: at(item.c, [ 0, 0, 0, 1 ]),
+    width: at(item.w, 1),
+    cap: [ 'butt', 'butt', 'round', 'square' ][item.lc || 1],
+    join: [ 'miter', 'miter', 'round', 'bevel' ][item.lj || 1],
+    miter: item.ml || 4,
+    dashes: (item.d || []).map((/** @type {any} */ d) => ({ kind: d.n, value: at(d.v, 0) })),
+    gradient: isGradient
+      ? { type: item.t || 1, start: at(item.s, [ 0, 0 ]), end: at(item.e, [ 0, 0 ]), stops: at(item.g && item.g.k, []), count: (item.g && item.g.p) || 0, highlight: at(item.h, 0), angle: at(item.a, 0) }
+      : null,
+  }
+}
+
+// Running
+// ■■■■■■■
+
+/**
+ * Where a frame's hit-test geometry goes: groups tagged with a watched `rid` hand over their paths.
+ * @typedef {object} HitSink
+ * @property {import('../hit/hit.js').Hits} hits
+ * @property {Matrix}                       matrix the layer's space onto the canvas
+ * @property {string}                       prefix what a group's `rid` is named under: a nested machine's artboard has its own, so it is `<the layer's nid>/`; "" in the animation's own
+ */
+
+/**
+ * Runs a group's items at a frame.
+ *
+ * @param   {any[]}                                         items   compiled items
+ * @param   {number}                                        frame
+ * @param   {Matrix}                                        matrix  the group's space into the layer's
+ * @param   {number}                                        opacity the group's opacity, compounded
+ * @param   {HitSink | null}                                [sink]  records the paths of groups a pointer listener targets
+ * @returns {{ entries: Entry[], operations: Operation[] }}         the paths above, for the parent's paints, and what to draw, top first
+ */
+export function runGroup(items, frame, matrix, opacity, sink) {
+  /** @type {Entry[]} */
+  let entries = []
+  /** @type {Operation[]} */
+  const operations = []
+
+  for (let n = 0; n < items.length; n++) {
+    const item = items[n]
+    if (item.kind === 'geometry') {
+      entries.push({ holder: { paths: [ item.path(frame) ] }, matrix: IDENTITY })
+    } else if (item.kind === 'group') {
+      const local = item.transform(frame)
+      const inner = runGroup(item.items, frame, multiply(matrix, local.matrix), opacity * local.opacity, sink)
+      // a group that draws nothing (a Solo's hidden child, or anything faded out) is not a place a pointer can hit
+      if (sink && item.rid && opacity * local.opacity > 0) {
+        const rid = sink.prefix + item.rid
+        if (sink.hits.wants(rid)) sink.hits.add(rid, inner.entries, multiply(sink.matrix, multiply(matrix, local.matrix)))
+      }
+      for (let k = 0; k < inner.operations.length; k++) operations.push(inner.operations[k])
+      for (let k = 0; k < inner.entries.length; k++) entries.push({ holder: inner.entries[k].holder, matrix: multiply(local.matrix, inner.entries[k].matrix) })
+    } else if (item.kind === 'trim') {
+      trimEntries(entries, scalar(item.start(frame)), scalar(item.end(frame)), scalar(item.offset(frame)), item.together)
+    } else if (item.kind === 'merge') {
+      entries = entries.length > 1 ? [ { holder: { paths: [], merge: { mode: item.mode, parts: entries } }, matrix: IDENTITY } ] : entries
+    } else if (item.kind === 'paint') {
+      operations.push({ paint: item.paint, entries: entries.slice(), matrix, opacity })
+    }
+  }
+  return { entries, operations }
+}
+
+/**
+ * Trims every holder above, in its own space. Together, the holders' paths
+ * are trimmed as one list and each holder keeps its own share.
+ *
+ * @param {Entry[]} entries
+ * @param {number}  start
+ * @param {number}  end
+ * @param {number}  offset
+ * @param {boolean} together
+ */
+function trimEntries(entries, start, end, offset, together) {
+  /** @type {Holder[]} */
+  const holders = []
+  for (let n = 0; n < entries.length; n++) {
+    const holder = entries[n].holder
+    if (!holder.merge) holders.push(holder)
+    else for (let k = 0; k < holder.merge.parts.length; k++) holders.push(holder.merge.parts[k].holder)
+  }
+
+  const all = []
+  const owners = []
+  for (let n = 0; n < holders.length; n++) {
+    for (let k = 0; k < holders[n].paths.length; k++) {
+      all.push(holders[n].paths[k])
+      owners.push(n)
+    }
+  }
+
+  const kept = trimEach(all, start, end, offset, together)
+  for (let n = 0; n < holders.length; n++) holders[n].paths = []
+  for (let k = 0; k < kept.length; k++) {
+    for (let j = 0; j < kept[k].length; j++) holders[owners[k]].paths.push(kept[k][j])
+  }
+}