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

package/focus/focus.dom.js

@@ -0,0 +1,158 @@
+/**
+ * The canvas as a focus target, for `keys: 'auto'`: it can be given DOM focus
+ * (it gets a `tabIndex`), and while it has it, its keys go to Rive's focus.
+ *
+ * Motion never takes DOM focus: nothing here calls `focus()`. The user or the
+ * host gives it (Tab, a click on the canvas, `canvas.focus()`), and this
+ * reacts, as `@rive-app/canvas` does:
+ * - DOM focus arrives by keyboard: focus enters the tree at once, at the first
+ * stop for a Tab from before the canvas, the last for a Shift+Tab from after.
+ * Arriving by pointer leaves the tree unfocused until the next Tab (or a
+ * listener's focus action), so a click does not pick a stop.
+ * - DOM focus leaves (the user moved on): Rive's focus is cleared, so Blur
+ * listeners run. Not when the window itself lost focus.
+ * - Tab from the last stop (or Shift+Tab from the first) is left to the
+ * browser, which moves DOM focus on; the keys that follow are ignored until
+ * focus is given again.
+ * - `preventDefault` only for a key Rive used: one a listener took, a Tab or
+ * arrow that moved focus or is held by a `stop` edge.
+ */
+
+import { keyFromEvent, keyNames, modifiersFromEvent } from '../motion/motion.keys.js'
+import { PHASES } from './focus.js'
+
+/** A focus this soon after a mouse or touch press is the pointer's */
+const POINTER_FOCUS_MS = 600
+
+/**
+ * @typedef {object} DomOptions
+ * @property {ReturnType<typeof import('./focus.js').createFocus>} focus
+ * @property {(down: boolean) => void}                             [pressed] a key went through (for the host's `key` event)
+ */
+
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @param {DomOptions}        options
+ */
+export function createDom(canvas, options) {
+  const focus = options.focus
+  let isBound = false
+  let hasDomFocus = typeof document !== 'undefined' && document.activeElement === canvas
+  /** Tab left the tree: the page has the keys until focus comes back */
+  let released = false
+  let lastPointer = 0
+  /** @type {{ target: any, name: string, listener: (event: any) => void }[]} */
+  const bound = []
+
+  const onPointer = () => {
+    lastPointer = new Date().getTime()
+  }
+
+  /**
+   * Whether the focus that just arrived came from the keyboard. `:focus-visible`
+   * is the browser's own answer; where it is missing, a recent press says it
+   * was the pointer.
+   */
+  function isKeyboardFocus() {
+    try {
+      return canvas.matches(':focus-visible')
+    } catch {
+      return new Date().getTime() - lastPointer > POINTER_FOCUS_MS
+    }
+  }
+
+  /**
+   * @param   {any}     from where focus came from
+   * @returns {boolean}      whether that is before the canvas in the page
+   */
+  function isFromBefore(from) {
+    if (!from || !from.compareDocumentPosition) return true
+    const position = canvas.compareDocumentPosition(from)
+    if (position & 2) return true
+    if (position & 4) return false
+    return true
+  }
+
+  /** @param {any} event */
+  function onFocus(event) {
+    hasDomFocus = true
+    released = false
+    if (focus.current !== null || !focus.hasNodes) return
+    if (isKeyboardFocus()) focus.move(isFromBefore(event.relatedTarget) ? 'next' : 'previous')
+  }
+
+  /** @param {any} event */
+  function onBlur(event) {
+    hasDomFocus = false
+    // the window itself lost focus (another tab, another app): the canvas keeps Rive's focus for when it returns
+    if (!event.relatedTarget && typeof document.hasFocus === 'function' && !document.hasFocus()) return
+    focus.clear()
+  }
+
+  /**
+   * @param   {any}     event
+   * @param   {number}  phase
+   * @returns {boolean}       whether Rive used it
+   */
+  function handle(event, phase) {
+    if (event.isComposing || event.keyCode === 229) return false
+    if (released) return false
+    const name = keyFromEvent(event)
+    if (!name) return false
+    const names = keyNames(name)
+    if (name === 'tab' && !focus.hasNodes) return false
+    return focus.press({ names, mods: modifiersFromEvent(event), phase })
+  }
+
+  /** @param {any} event */
+  function onKeyDown(event) {
+    if (!hasDomFocus && event.target !== canvas) return
+    const used = handle(event, event.repeat ? PHASES.repeat : PHASES.down)
+    if (used) {
+      if (event.preventDefault) event.preventDefault()
+      return
+    }
+    // Tab (or Shift+Tab) off the end: the page moves focus on, and Rive's keys wait until it is given back
+    if (focus.hasNodes && keyFromEvent(event) === 'tab') released = true
+  }
+
+  /** @param {any} event */
+  function onKeyUp(event) {
+    if (!hasDomFocus && event.target !== canvas) return
+    handle(event, PHASES.up)
+  }
+
+  /** @type {Record<string, (event: any) => void>} */
+  const handlers = { focus: onFocus, blur: onBlur, keydown: onKeyDown, keyup: onKeyUp, mousedown: onPointer, touchstart: onPointer, pointerdown: onPointer }
+
+  /**
+   * Makes the canvas able to be given focus, and starts listening, or stops.
+   *
+   * @param {boolean} wanted whether the bundle has keys or a focus tree to answer
+   */
+  function listen(wanted) {
+    if (wanted === isBound) return
+    isBound = wanted
+    if (wanted) {
+      // a tabIndex lets the canvas be given focus; it never takes it
+      if (canvas.tabIndex < 0 || !canvas.hasAttribute('tabindex')) canvas.tabIndex = 0
+      for (const name in handlers) {
+        bound.push({ target: canvas, name, listener: handlers[name] })
+        canvas.addEventListener(name, handlers[name], false)
+      }
+      hasDomFocus = document.activeElement === canvas
+    } else {
+      for (let n = 0; n < bound.length; n++) bound[n].target.removeEventListener(bound[n].name, bound[n].listener, false)
+      bound.length = 0
+    }
+  }
+
+  return {
+    listen,
+    destroy: () => listen(false),
+    /** Whether the canvas has DOM focus */
+    get hasFocus() {
+      return hasDomFocus
+    },
+  }
+}

package/focus/focus.js

@@ -0,0 +1,277 @@
+/**
+ * Rive's focus, in a bundle: which node of its focus tree holds focus, how
+ * focus moves (Tab, the arrows, focus actions), the Focus and Blur listeners
+ * that fire as it does, and the keyboard listeners that hear a key through the
+ * focused node and the nodes above it.
+ *
+ * This is Rive's own focus, not the browser's: it says which target of the
+ * graphic the keys belong to. It never touches DOM focus. Whether keys reach
+ * it at all is `focus.dom.js` (a canvas that has DOM focus) or the host
+ * (`motion.key`). See the web readme, "Focus and keys".
+ *
+ * Rive's rules, as read from `@rive-app/canvas` and checked by the parity
+ * fixtures:
+ * - A key goes to the focused node's listeners first. If any matched, it is
+ * spent. If none did, it goes to the node above, and so on up the tree.
+ * - Focus and Blur listeners fire for every node whose subtree gains or loses
+ * the focused node: moving from a node to its child fires nothing on the
+ * node, leaving the node's subtree fires its Blur.
+ * - Tab on a key a listener took does not move focus. Tab from the last stop
+ * leaves the tree (focus is cleared). An arrow no listener took moves
+ * focus in that direction.
+ */
+
+import { pickInDirection } from './focus.direction.js'
+import { createTree } from './focus.tree.js'
+
+/** Key modifier bits, as a KeyboardInput's `modifiers` has them */
+export const MODIFIERS = { shift: 1, ctrl: 2, alt: 4, meta: 8 }
+
+/** The phases of a keystroke, as a KeyboardInput's `keyPhase` has them */
+export const PHASES = { down: 1, repeat: 2, up: 4 }
+
+const ARROWS = { up: 'up', down: 'down', left: 'left', right: 'right' }
+
+/**
+ * @typedef {object} FocusOptions
+ * @property {(type: 'Focus' | 'Blur', rid: string) => void}      fire     a node gained or lost focus: its listeners run
+ * @property {(actions: any[], scope: string) => void}            run      runs a key binding's actions, in the machine its `scope` names ("" for the bundle's own; a nested artboard's binding has the machine's id)
+ * @property {(rid: string) => ({ x: number, y: number } | null)} centerOf where a node was drawn (canvas pixels); null while it has no geometry
+ * @property {(rid: string | null) => void}                       changed  the focused node changed
+ */
+
+/**
+ * @param {FocusOptions} options
+ */
+export function createFocus(options) {
+  let tree = createTree([])
+  /** @type {any[]} the machine's key bindings (`remoteKeys`) */
+  let bindings = []
+  /** @type {string | null} */
+  let current = null
+
+  /**
+   * @param {any[]} nodes the machine's `focus.nodes`
+   * @param {any[]} keys  the bundle's `remoteKeys`
+   */
+  function setup(nodes, keys) {
+    tree = createTree(nodes || [])
+    bindings = keys || []
+    current = null
+  }
+
+  /**
+   * Swaps in a new tree and key bindings while the page runs, as a list's rows
+   * come and go. Focus stays where it is. On a node that is gone it stays too,
+   * as in `@rive-app/canvas`: nothing hears a key, and the next Tab, which has
+   * no place to go on from, leaves the tree and clears it.
+   *
+   * @param {any[]} nodes
+   * @param {any[]} keys
+   */
+  function retree(nodes, keys) {
+    tree = createTree(nodes || [])
+    bindings = keys || []
+  }
+
+  /**
+   * Moves focus to a node (or nowhere), firing the listeners of every node
+   * whose subtree lost or gained it.
+   *
+   * @param {string | null} next
+   */
+  function set(next) {
+    if (next === current) return
+    const before = tree.chain(current)
+    const after = tree.chain(next)
+    current = next
+    for (let n = 0; n < before.length; n++) if (after.indexOf(before[n]) < 0) options.fire('Blur', before[n])
+    for (let n = after.length - 1; n >= 0; n--) if (before.indexOf(after[n]) < 0) options.fire('Focus', after[n])
+    options.changed(current)
+  }
+
+  /**
+   * A focus node by its `rid` or its name.
+   *
+   * @param   {string}        target
+   * @returns {string | null}
+   */
+  function resolve(target) {
+    if (tree.has(target)) return target
+    for (let n = 0; n < tree.nodes.length; n++) if (tree.nodes[n].name === target) return tree.nodes[n].rid
+    return null
+  }
+
+  /**
+   * @param   {string}  target a node's `rid` or name
+   * @returns {boolean}        whether it took focus (a node that cannot focus does not)
+   */
+  function focus(target) {
+    const rid = resolve(target)
+    if (rid === null || !tree.canFocus(rid)) return false
+    set(rid)
+    return true
+  }
+
+  /**
+   * Tab (`next`), Shift+Tab (`previous`), or a direction.
+   *
+   * @param   {string}  kind next, previous, up, down, left or right
+   * @returns {boolean}      whether focus moved
+   */
+  function move(kind) {
+    if (kind === 'next' || kind === 'previous') {
+      const step = tree.step(current, kind === 'next')
+      if (step.stays) return false
+      set(step.to)
+      return step.to !== null
+    }
+    if (current === null || !ARROWS[/** @type {keyof typeof ARROWS} */ (kind)]) return false
+    const from = options.centerOf(current)
+    if (!from) return false
+    const to = pickInDirection(kind, from, tree.stops, options.centerOf)
+    if (to === null) return false
+    set(to)
+    return true
+  }
+
+  function clear() {
+    set(null)
+  }
+
+  /**
+   * The key bindings a key sets off on one node.
+   *
+   * @param   {string}   rid
+   * @param   {string[]} names the Rive names the key has
+   * @param   {number}   phase
+   * @param   {number}   mods
+   * @returns {any[]}
+   */
+  function bound(rid, names, phase, mods) {
+    const found = []
+    for (let n = 0; n < bindings.length; n++) {
+      const binding = bindings[n]
+      if (binding.target !== rid) continue
+      if (((binding.phase === undefined ? PHASES.down : binding.phase) & phase) === 0) continue
+      if ((binding.modifiers || 0) !== mods) continue
+      if (matches(binding.keys, names)) found.push(binding)
+    }
+    return found
+  }
+
+  /**
+   * Offers a key to the focused node's listeners, then the nodes above it; the
+   * first node with a listener for it keeps it.
+   *
+   * @param   {string[]} names
+   * @param   {number}   phase
+   * @param   {number}   mods
+   * @returns {boolean}        whether a listener took it
+   */
+  function route(names, phase, mods) {
+    if (!tree.hasNodes) return runUnscoped(names, phase)
+    const chain = tree.chain(current)
+    for (let n = 0; n < chain.length; n++) {
+      const found = bound(chain[n], names, phase, mods)
+      if (!found.length) continue
+      for (let k = 0; k < found.length; k++) options.run(found[k].actions, found[k].scope || '')
+      return true
+    }
+    return false
+  }
+
+  /**
+   * A bundle with nothing focusable has no focus to route by: its listeners
+   * hear a key press wherever it is sent, as they did before focus.
+   *
+   * @param   {string[]} names
+   * @param   {number}   phase
+   * @returns {boolean}
+   */
+  function runUnscoped(names, phase) {
+    if (phase !== PHASES.down) return false
+    let took = false
+    for (let n = 0; n < bindings.length; n++) {
+      if (bindings[n].phase !== undefined && bindings[n].phase !== PHASES.down) continue
+      if (!matches(bindings[n].keys, names)) continue
+      options.run(bindings[n].actions, '')
+      took = true
+    }
+    return took
+  }
+
+  /**
+   * A keystroke, as Rive's canvas runtime handles it.
+   *
+   * @param   {object}   key
+   * @param   {string[]} key.names the Rive names the key has
+   * @param   {number}   key.mods  MODIFIERS bits held
+   * @param   {number}   key.phase PHASES: down, repeat or up
+   * @returns {boolean}            whether it was used (a listener took it, or focus moved or is held); false lets the page or the host have it
+   */
+  function press({ names, mods, phase }) {
+    if (phase === PHASES.up) {
+      route(names, phase, mods)
+      return false
+    }
+    const isTab = names.indexOf('tab') >= 0
+    if (isTab && tree.hasNodes) {
+      if (current !== null && route(names, phase, mods)) return true
+      move(mods & MODIFIERS.shift ? 'previous' : 'next')
+      // focus walked off the end (cleared) is a Tab for the page
+      return current !== null
+    }
+
+    let used = route(names, phase, mods)
+    if (!used && tree.hasNodes && !(mods & (MODIFIERS.ctrl | MODIFIERS.alt | MODIFIERS.meta))) {
+      for (let n = 0; n < names.length && !used; n++) {
+        if (ARROWS[/** @type {keyof typeof ARROWS} */ (names[n])]) used = move(names[n]) || current !== null
+      }
+    }
+    return used
+  }
+
+  return {
+    setup,
+    retree,
+    focus,
+    move,
+    clear,
+    press,
+    resolve,
+    /** The node that has focus (its `rid`), or null */
+    get current() {
+      return current
+    },
+    get hasNodes() {
+      return tree.hasNodes
+    },
+    /** @param {string} rid */
+    node: (rid) => tree.node(rid),
+    get nodes() {
+      return tree.nodes
+    },
+    get stops() {
+      return tree.stops
+    },
+    /** Whether any key binding could hear this key, wherever focus is: the keys a bundle uses */
+    /** @param {string[]} names */
+    uses(names) {
+      for (let n = 0; n < bindings.length; n++) if (matches(bindings[n].keys, names)) return true
+      return false
+    },
+  }
+}
+
+/**
+ * @param   {string[]} keys  a binding's key names; "any" matches every key
+ * @param   {string[]} names the key's names
+ * @returns {boolean}
+ */
+function matches(keys, names) {
+  for (let n = 0; n < (keys || []).length; n++) {
+    if (keys[n] === 'any' || names.indexOf(keys[n]) >= 0) return true
+  }
+  return false
+}

package/focus/focus.tree.js

@@ -0,0 +1,146 @@
+/**
+ * Rive's focus tree as a bundle's `machine.focus.nodes` lists it: the nodes
+ * that own a FocusData, in the order Tab visits them (a parent before its
+ * children), each with the focus node it sits inside.
+ *
+ * - A node is a Tab stop when `canFocus` and `canTraverse` are on (they are,
+ * unless the node says `false`); a node that is not is skipped and traversal
+ * goes on into its children.
+ * - `edge` says what traversal does when it would leave that node's subtree:
+ * `closedLoop` wraps within it (the node itself is part of the loop if it is
+ * a stop) and `stop` stays on the last stop. The artboard (`rid` "") is the
+ * outermost scope; by default leaving it ends focus.
+ */
+
+/**
+ * @typedef {object} FocusNode
+ * @property {string}  rid
+ * @property {string}  [name]
+ * @property {string}  [parent]
+ * @property {boolean} [canFocus]
+ * @property {boolean} [canTouch]
+ * @property {boolean} [canTraverse]
+ * @property {string}  [edge]
+ */
+
+/**
+ * @param {FocusNode[]} list a machine's `focus.nodes`
+ */
+export function createTree(list) {
+  /** @type {Record<string, FocusNode>} */
+  const byRid = {}
+  /** @type {Record<string, number>} */
+  const position = {}
+  /** @type {string} the artboard's own edge behaviour */
+  let rootEdge = ''
+  for (let n = 0; n < list.length; n++) {
+    byRid[list[n].rid] = list[n]
+    position[list[n].rid] = n
+    if (list[n].rid === '') rootEdge = list[n].edge || ''
+  }
+
+  /** @param {string} rid */
+  const isStop = (rid) => {
+    const node = byRid[rid]
+    return !!node && node.canFocus !== false && node.canTraverse !== false
+  }
+
+  /** The Tab stops, in order @type {string[]} */
+  const stops = []
+  for (let n = 0; n < list.length; n++) if (list[n].rid !== '' && isStop(list[n].rid)) stops.push(list[n].rid)
+
+  /**
+   * Whether `rid` is `scope` or sits inside it.
+   *
+   * @param   {string}  rid
+   * @param   {string}  scope
+   * @returns {boolean}
+   */
+  function isInside(rid, scope) {
+    if (scope === '') return true
+    for (let at = /** @type {string | undefined} */ (rid); at !== undefined && at !== ''; at = byRid[at] ? byRid[at].parent : undefined) if (at === scope) return true
+    return false
+  }
+
+  /**
+   * The nearest scope around a node that has an edge behaviour: itself, or the
+   * node above it, up to the artboard.
+   *
+   * @param   {string} rid
+   * @returns {string}
+   */
+  function scopeOf(rid) {
+    for (let at = /** @type {string | undefined} */ (rid); at !== undefined && at !== ''; at = byRid[at] ? byRid[at].parent : undefined) {
+      if (byRid[at] && (byRid[at].edge === 'closedLoop' || byRid[at].edge === 'stop')) return at
+    }
+    return ''
+  }
+
+  /** @param {string} scope */
+  const edgeOf = (scope) => (scope === '' ? rootEdge : byRid[scope].edge)
+
+  return {
+    /** Whether the artboard has anything to focus */
+    get hasNodes() {
+      return list.length > 0
+    },
+    nodes: list,
+    stops,
+    /** @param {string} rid */
+    has: (rid) => !!byRid[rid],
+    /** @param {string} rid */
+    node: (rid) => byRid[rid] || null,
+    /**
+     * The focus nodes from a node up to the outermost, itself first.
+     *
+     * @param   {string | null} rid
+     * @returns {string[]}
+     */
+    chain(rid) {
+      /** @type {string[]} */
+      const found = []
+      for (let at = rid; at !== null && at !== undefined && at !== '' && byRid[at]; at = byRid[at].parent || '') found.push(at)
+      if (rid !== null && byRid[''] ) found.push('')
+      return found
+    },
+    /** @param {string} rid */
+    canFocus: (rid) => !!byRid[rid] && byRid[rid].canFocus !== false,
+    /**
+     * Tab, or Shift+Tab, from a node (or from nothing).
+     *
+     * @param   {string | null}                         from
+     * @param   {boolean}                               forward
+     * @returns {{ to: string | null, stays: boolean }}         `to` the stop it lands on; null with `stays` false when it walked off the end, and `stays` true when a `stop` edge holds it where it is
+     */
+    step(from, forward) {
+      if (!stops.length) return { to: null, stays: false }
+      if (from === null) return { to: forward ? stops[0] : stops[stops.length - 1], stays: false }
+
+      // the nearest stop after (or before) the node in the tree's order
+      const at = position[from]
+      /** @type {string | null} */
+      let candidate = null
+      if (forward) {
+        for (let n = 0; n < stops.length; n++) if (position[stops[n]] > at) { candidate = stops[n]; break }
+      } else {
+        for (let n = stops.length - 1; n >= 0; n--) if (position[stops[n]] < at) { candidate = stops[n]; break }
+      }
+
+      const scope = scopeOf(from)
+      const leaves = candidate === null || !isInside(candidate, scope)
+      if (!leaves) return { to: candidate, stays: false }
+      const edge = edgeOf(scope)
+      if (edge === 'stop') return { to: from, stays: true }
+      if (edge !== 'closedLoop') return { to: null, stays: false }
+
+      // wrap within the scope: its first (or last) stop
+      /** @type {string | null} */
+      let wrapped = null
+      for (let n = 0; n < stops.length; n++) {
+        const stop = stops[forward ? n : stops.length - 1 - n]
+        if (isInside(stop, scope)) { wrapped = stop; break }
+      }
+      return { to: wrapped, stays: false }
+    },
+  }
+}

package/hit/hit.geometry.js

@@ -0,0 +1,113 @@
+/**
+ * Point-in-shape maths for hit tests, on the traced paths the renderer draws.
+ *
+ * `isPointInPath` would need the context's current path and transform, and
+ * re-tracing every target on each pointer move; here the traced paths are
+ * kept as they were drawn, and flattened to polygons only when a point is
+ * tested. A fill is nonzero-wound, as Lottie and Rive fill by default.
+ */
+
+import { apply } from '../lottie/lottie.paths.js'
+
+/** @import { Matrix, Path, Point } from '../lottie/lottie.paths.js' */
+
+/** Line segments a curve is flattened to; a 16th of a quarter circle is well inside a pixel */
+const CURVE_STEPS = 16
+
+/**
+ * A path as a polygon in the space `matrix` maps it to. Curves are flattened,
+ * and an open path is closed, as a fill closes it.
+ *
+ * @param   {Path}    path
+ * @param   {Matrix}  matrix
+ * @returns {Point[]}
+ */
+export function outline(path, matrix) {
+  const count = path.points.length
+  if (!count) return []
+
+  const points = path.points.map((point) => apply(matrix, point.x, point.y))
+  const cIn = path.cIn.map((point) => apply(matrix, point.x, point.y))
+  const cOut = path.cOut.map((point) => apply(matrix, point.x, point.y))
+
+  const polygon = [ points[0] ]
+  // the segment closing the path counts when the path is closed or has a curve back to its start
+  for (let k = 1; k <= count; k++) {
+    const isClosing = k === count
+    if (isClosing && count < 2) break
+    const from = k - 1
+    const to = isClosing ? 0 : k
+    // an open path is closed by a straight line, whatever its end tangents
+    const isCurved = !isClosing || path.closed
+    appendSegment(polygon, points[from], isCurved ? cOut[from] : points[from], isCurved ? cIn[to] : points[to], points[to], isClosing)
+  }
+  return polygon
+}
+
+/**
+ * @param {Point[]} polygon
+ * @param {Point}   a       start
+ * @param {Point}   b       first control
+ * @param {Point}   c       second control
+ * @param {Point}   d       end
+ * @param {boolean} isLast  the segment back to the polygon's first point, which is not added again
+ */
+function appendSegment(polygon, a, b, c, d, isLast) {
+  const isStraight = same(a, b) && same(c, d)
+  if (!isStraight) {
+    for (let step = 1; step < CURVE_STEPS; step++) {
+      const t = step / CURVE_STEPS
+      const u = 1 - t
+      polygon.push({
+        x: u * u * u * a.x + 3 * u * u * t * b.x + 3 * u * t * t * c.x + t * t * t * d.x,
+        y: u * u * u * a.y + 3 * u * u * t * b.y + 3 * u * t * t * c.y + t * t * t * d.y,
+      })
+    }
+  }
+  if (!isLast) polygon.push(d)
+}
+
+/**
+ * @param   {Point}   a
+ * @param   {Point}   b
+ * @returns {boolean}
+ */
+function same(a, b) {
+  return Math.abs(a.x - b.x) < 1e-9 && Math.abs(a.y - b.y) < 1e-9
+}
+
+/**
+ * Whether a point is inside a polygon by the nonzero rule: the winding
+ * number around it is not zero.
+ *
+ * @param   {Point[]} polygon
+ * @param   {number}  x
+ * @param   {number}  y
+ * @returns {boolean}
+ */
+export function contains(polygon, x, y) {
+  let winding = 0
+  for (let k = 0, j = polygon.length - 1; k < polygon.length; j = k++) {
+    const a = polygon[j]
+    const b = polygon[k]
+    if (a.y <= y) {
+      if (b.y > y && side(a, b, x, y) > 0) winding++
+    } else if (b.y <= y && side(a, b, x, y) < 0) {
+      winding--
+    }
+  }
+  return winding !== 0
+}
+
+/**
+ * Which side of the line a→b the point is on: positive to its left.
+ *
+ * @param   {Point}  a
+ * @param   {Point}  b
+ * @param   {number} x
+ * @param   {number} y
+ * @returns {number}
+ */
+function side(a, b, x, y) {
+  return (b.x - a.x) * (y - a.y) - (x - a.x) * (b.y - a.y)
+}