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

package/hit/hit.js

@@ -0,0 +1,129 @@
+/**
+ * Where a pointer can hit: the geometry of the shapes and groups a bundle's
+ * pointer listeners target, as the last drawn frame traced it.
+ *
+ * rive2lottie tags each Lottie group built from a Rive Shape or Node with
+ * `rid`, the Rive object's index, and a listener's `target.rid` names it. While
+ * a frame draws, the renderer hands over a tagged group's paths (after the
+ * group's trims and merges, with the matrix that maps them to canvas pixels:
+ * the mixer's poses, layout and fit included). Nothing is flattened until a
+ * point is tested, so a watched target costs a few references per frame.
+ */
+
+import { multiply } from '../lottie/lottie.paths.js'
+import { contains, outline } from './hit.geometry.js'
+
+/** @import { Matrix } from '../lottie/lottie.paths.js' */
+/** @import { Entry } from '../lottie/lottie.shapes.js' */
+
+/**
+ * @typedef {object} Hits
+ * @property {(rids: string[]) => void}                                watch  the targets to record; others are skipped
+ * @property {boolean}                                                 active whether any target is watched
+ * @property {() => void}                                              begin  a frame starts drawing: last frame's geometry goes
+ * @property {(rid: string) => boolean}                                wants
+ * @property {(rid: string, entries: Entry[], matrix: Matrix) => void} add    a group's paths; `matrix` maps the entries' space to canvas pixels
+ * @property {(rid: string, x: number, y: number) => boolean}          test   whether a canvas pixel is inside the target's geometry in the last frame
+ * @property {(rid: string) => ({ x: number, y: number } | null)}      center the middle of the target's bounding box in the last frame, in canvas pixels; null when it drew nothing
+ */
+
+/** @returns {Hits} */
+export function createHits() {
+  /** @type {Record<string, boolean>} */
+  let watched = {}
+  /** @type {Record<string, { entries: Entry[], matrix: Matrix }[]>} */
+  let recorded = {}
+
+  /**
+   * The polygons of one recorded group, a merge's parts included.
+   *
+   * @param   {Entry[]} entries
+   * @param   {Matrix}  matrix
+   * @param   {number}  x
+   * @param   {number}  y
+   * @returns {boolean}
+   */
+  function isInside(entries, matrix, x, y) {
+    for (let n = 0; n < entries.length; n++) {
+      const holder = entries[n].holder
+      const world = multiply(matrix, entries[n].matrix)
+      if (holder.merge) {
+        if (isInside(holder.merge.parts, world, x, y)) return true
+        continue
+      }
+      for (let k = 0; k < holder.paths.length; k++) {
+        if (contains(outline(holder.paths[k], world), x, y)) return true
+      }
+    }
+    return false
+  }
+
+  /**
+   * Grows a box over the polygons of one recorded group.
+   *
+   * @param {Entry[]}  entries
+   * @param {Matrix}   matrix
+   * @param {number[]} box     [minX, minY, maxX, maxY], grown in place
+   */
+  function grow(entries, matrix, box) {
+    for (let n = 0; n < entries.length; n++) {
+      const holder = entries[n].holder
+      const world = multiply(matrix, entries[n].matrix)
+      if (holder.merge) {
+        grow(holder.merge.parts, world, box)
+        continue
+      }
+      for (let k = 0; k < holder.paths.length; k++) {
+        const polygon = outline(holder.paths[k], world)
+        for (let p = 0; p < polygon.length; p++) {
+          if (polygon[p].x < box[0]) box[0] = polygon[p].x
+          if (polygon[p].y < box[1]) box[1] = polygon[p].y
+          if (polygon[p].x > box[2]) box[2] = polygon[p].x
+          if (polygon[p].y > box[3]) box[3] = polygon[p].y
+        }
+      }
+    }
+  }
+
+  /** @type {Hits} */
+  const hits = {
+    active: false,
+
+    watch(rids) {
+      watched = {}
+      for (let n = 0; n < rids.length; n++) watched[rids[n]] = true
+      hits.active = rids.length > 0
+      recorded = {}
+    },
+
+    begin() {
+      recorded = {}
+    },
+
+    wants(rid) {
+      return watched[rid] === true
+    },
+
+    add(rid, entries, matrix) {
+      if (!watched[rid]) return
+      if (!recorded[rid]) recorded[rid] = []
+      recorded[rid].push({ entries, matrix })
+    },
+
+    center(rid) {
+      const parts = recorded[rid]
+      if (!parts) return null
+      const box = [ Infinity, Infinity, -Infinity, -Infinity ]
+      for (let n = 0; n < parts.length; n++) grow(parts[n].entries, parts[n].matrix, box)
+      return box[0] > box[2] ? null : { x: (box[0] + box[2]) / 2, y: (box[1] + box[3]) / 2 }
+    },
+
+    test(rid, x, y) {
+      const parts = recorded[rid]
+      if (!parts) return false
+      for (let n = 0; n < parts.length; n++) if (isInside(parts[n].entries, parts[n].matrix, x, y)) return true
+      return false
+    },
+  }
+  return hits
+}

package/list/list.flex.js

@@ -0,0 +1,181 @@
+/**
+ * A small flex for a list's rows: the subset of Rive's layout a container
+ * of a list uses, with no Yoga in the browser. The rows are boxes of fixed
+ * size, put in a container by its direction (row or column, either one
+ * reversed), gap, padding, wrap, and main and cross alignment. A container
+ * that hugs takes the size of what it holds.
+ *
+ * Not modelled: rows that grow, shrink or stretch to fit (a row that does
+ * not fit overflows the container, as it does in Rive when it cannot shrink),
+ * and items other than the rows.
+ */
+
+/**
+ * @typedef {object} Flex
+ * @property {string}    direction `row` or `column`
+ * @property {boolean}   reverse   the main axis runs from the far side
+ * @property {number}    wrap      0 no wrap, 1 wrap, 2 wrap reverse
+ * @property {number}    justify   along the main axis: 0 start, 1 centre, 2 end, in the axis's own direction
+ * @property {number}    items     across it, the same
+ * @property {boolean}   spread    the rows are spread between the ends of the main axis
+ * @property {number}    gap       between rows along the main axis
+ * @property {number}    crossGap  between wrapped lines
+ * @property {number[]}  padding   left, top, right, bottom
+ * @property {boolean[]} hug       whether the container's width and height are its content's
+ */
+
+/**
+ * @typedef {object} Placed
+ * @property {number[]} x      each row's left, from the container's left
+ * @property {number[]} y      each row's top, from the container's top
+ * @property {number}   width  the container's width, which a hugging one takes from its rows
+ * @property {number}   height
+ */
+
+/**
+ * Where each row goes in a container.
+ *
+ * @param   {Flex}                       flex
+ * @param   {{ w: number, h: number }}   box   the container's size
+ * @param   {{ w: number, h: number }[]} sizes each row's
+ * @returns {Placed}
+ */
+export function layoutRows(flex, box, sizes) {
+  const isRow = flex.direction === 'row'
+  const pad = flex.padding
+  // the padding at each end of the main and cross axes; a reversed axis starts at the far edge
+  const mainStart = isRow ? (flex.reverse ? pad[2] : pad[0]) : (flex.reverse ? pad[3] : pad[1])
+  const mainEnd = isRow ? (flex.reverse ? pad[0] : pad[2]) : (flex.reverse ? pad[1] : pad[3])
+  const crossStart = isRow ? (flex.wrap === 2 ? pad[3] : pad[1]) : (flex.wrap === 2 ? pad[2] : pad[0])
+  const crossEnd = isRow ? (flex.wrap === 2 ? pad[1] : pad[3]) : (flex.wrap === 2 ? pad[0] : pad[2])
+
+  const mains = []
+  const crosses = []
+  for (let n = 0; n < sizes.length; n++) {
+    mains.push(isRow ? sizes[n].w : sizes[n].h)
+    crosses.push(isRow ? sizes[n].h : sizes[n].w)
+  }
+
+  const hugsMain = flex.hug[isRow ? 0 : 1]
+  const hugsCross = flex.hug[isRow ? 1 : 0]
+  let mainSize = isRow ? box.w : box.h
+  let crossSize = isRow ? box.h : box.w
+
+  const lines = hugsMain ? [ range(0, sizes.length) ] : breakLines(flex.wrap, mains, flex.gap, mainSize - mainStart - mainEnd)
+  if (hugsMain) mainSize = mainStart + mainEnd + extent(lines[0], mains, flex.gap)
+  const innerMain = mainSize - mainStart - mainEnd
+
+  /** @type {number[]} */
+  const lineCross = []
+  let total = 0
+  for (let n = 0; n < lines.length; n++) {
+    let tallest = 0
+    for (let k = 0; k < lines[n].length; k++) tallest = Math.max(tallest, crosses[lines[n][k]])
+    lineCross.push(tallest)
+    total += tallest
+  }
+  total += Math.max(lines.length - 1, 0) * flex.crossGap
+  if (hugsCross) crossSize = crossStart + crossEnd + total
+  const innerCross = crossSize - crossStart - crossEnd
+
+  // one line takes the container's whole cross size; wrapped lines pack by the cross alignment
+  const isWrapped = flex.wrap !== 0 && lines.length > 0
+  if (!isWrapped && lines.length === 1 && !hugsCross) {
+    lineCross[0] = innerCross
+    total = innerCross
+  }
+  let cross = crossStart + align(flex.items, innerCross - total)
+
+  const main = []
+  const across = []
+  for (let n = 0; n < sizes.length; n++) {
+    main.push(0)
+    across.push(0)
+  }
+  for (let n = 0; n < lines.length; n++) {
+    const line = lines[n]
+    const free = innerMain - extent(line, mains, flex.gap)
+    const extra = flex.spread && line.length > 1 ? Math.max(free, 0) / (line.length - 1) : 0
+    let at = mainStart + (flex.spread ? 0 : align(flex.justify, free))
+    for (let k = 0; k < line.length; k++) {
+      const item = line[k]
+      main[item] = at
+      across[item] = cross + align(flex.items, lineCross[n] - crosses[item])
+      at += mains[item] + flex.gap + extra
+    }
+    cross += lineCross[n] + flex.crossGap
+  }
+
+  // a reversed axis was laid out from its far edge
+  const x = []
+  const y = []
+  for (let n = 0; n < sizes.length; n++) {
+    const m = flex.reverse ? mainSize - main[n] - mains[n] : main[n]
+    const c = flex.wrap === 2 ? crossSize - across[n] - crosses[n] : across[n]
+    x.push(isRow ? m : c)
+    y.push(isRow ? c : m)
+  }
+  return { x, y, width: isRow ? mainSize : crossSize, height: isRow ? crossSize : mainSize }
+}
+
+/**
+ * The rows on each line: all of them on one line without wrap, else as many as fit.
+ *
+ * @param   {number}     wrap
+ * @param   {number[]}   mains the rows' sizes along the main axis
+ * @param   {number}     gap
+ * @param   {number}     room  the main axis's inner size
+ * @returns {number[][]}       row indexes, a line each
+ */
+function breakLines(wrap, mains, gap, room) {
+  if (!mains.length) return []
+  if (wrap === 0) return [ range(0, mains.length) ]
+
+  /** @type {number[][]} */
+  const lines = [ [] ]
+  let used = 0
+  for (let n = 0; n < mains.length; n++) {
+    const line = lines[lines.length - 1]
+    const needs = mains[n] + (line.length ? gap : 0)
+    if (line.length && used + needs > room) {
+      lines.push([ n ])
+      used = mains[n]
+    } else {
+      line.push(n)
+      used += needs
+    }
+  }
+  return lines
+}
+
+/**
+ * @param   {number[]} line  row indexes
+ * @param   {number[]} mains
+ * @param   {number}   gap
+ * @returns {number}         the line's length along the main axis
+ */
+function extent(line, mains, gap) {
+  let sum = 0
+  for (let n = 0; n < line.length; n++) sum += mains[line[n]]
+  return sum + Math.max(line.length - 1, 0) * gap
+}
+
+/**
+ * @param   {number} at   0 start, 1 centre, 2 end
+ * @param   {number} free room left over
+ * @returns {number}
+ */
+function align(at, free) {
+  return at === 1 ? free / 2 : at === 2 ? free : 0
+}
+
+/**
+ * @param   {number}   from
+ * @param   {number}   to
+ * @returns {number[]}
+ */
+function range(from, to) {
+  const list = []
+  for (let n = from; n < to; n++) list.push(n)
+  return list
+}

package/list/list.items.js

@@ -0,0 +1,80 @@
+/**
+ * What a list's items are, and the values each gives its row.
+ *
+ * An item is what the manifest's default instance holds, `{ viewModel,
+ * instance }`, or what a host passes to `setInputs({ rows: [ ... ] })`:
+ *
+ * - `{ instance: 'Two' }`: a named instance of the row's view model
+ * - `{ values: { tint: '#FF66BB6A', size: 200 } }`: values of its own, over
+ * the view model's default instance, which is the instance Rive makes for
+ * a blank one
+ * - both, the values over the instance; a property's name may also stand in
+ * the item itself (`{ size: 200 }`) unless it is `viewModel`, `instance`
+ * or `values`
+ * - `'Two'`: the same as `{ instance: 'Two' }`
+ *
+ * `viewModel` picks the row when a list draws more than one; it defaults to
+ * the first row the list has.
+ */
+
+import { inputValue } from '../motion/motion.values.js'
+
+/** Keys of an item that are not property values */
+const RESERVED = { viewModel: true, instance: true, values: true }
+
+/**
+ * @param   {any}                 item
+ * @param   {Record<string, any>} rows a list's `rows`, by view-model name
+ * @returns {string | null}            the view model whose row draws the item, null when none does
+ */
+export function rowNameOf(item, rows) {
+  const names = []
+  for (const name in rows) names.push(name)
+  if (!names.length) return null
+
+  const asked = item && typeof item === 'object' && typeof item.viewModel === 'string' ? item.viewModel : names[0]
+  return rows[asked] ? asked : null
+}
+
+/**
+ * The view-model values of one item: its instance's, with its own over them.
+ *
+ * @param   {any}                 item
+ * @param   {any}                 data a row's `data`: its properties, slots and instances
+ * @returns {Record<string, any>}
+ */
+export function itemValues(item, data) {
+  /** @type {Record<string, any>} */
+  const values = {}
+  const instances = data.instances || {}
+  const named = typeof item === 'string' ? item : item && typeof item.instance === 'string' ? item.instance : data.defaultInstance
+  const base = instances[named] || instances[data.defaultInstance] || {}
+  for (const name in base) values[name] = base[name]
+  if (!item || typeof item !== 'object') return values
+
+  const own = item.values && typeof item.values === 'object' ? item.values : {}
+  for (const name in item) {
+    if (!RESERVED[/** @type {'viewModel'} */ (name)] && declared(data, name)) values[name] = inputValue(data, name, item[name])
+  }
+  for (const name in own) values[name] = inputValue(data, name, own[name])
+  return values
+}
+
+/**
+ * @param   {any}     data
+ * @param   {string}  name
+ * @returns {boolean}      whether the row's view model has a property of this name
+ */
+function declared(data, name) {
+  const properties = data.properties || []
+  for (let n = 0; n < properties.length; n++) if (properties[n].name === name) return true
+  return false
+}
+
+/**
+ * @param   {any}    item
+ * @returns {string}      what makes one item the same as another
+ */
+export function signature(item) {
+  return typeof item === 'string' ? 's:' + item : JSON.stringify(item === undefined ? null : item)
+}