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

package/pointer/pointer.js

@@ -0,0 +1,292 @@
+/**
+ * The pointer on the canvas: mouse, touch and pen events become the pointer
+ * interactions a bundle's listeners answer (down, up, enter, exit, move,
+ * click), each hit-tested against the shape or group the listener targets.
+ *
+ * - A target is hovered while the pointer is inside its geometry in the last
+ * drawn frame (`hit/`), so enter and exit follow a moving shape as well as
+ * a moving pointer.
+ * - A listener with no target watches the whole canvas: it enters when the
+ * pointer comes onto the canvas and exits when it leaves.
+ * - A click is a down and an up on the same target. Clicks on the canvas
+ * itself (the `click` event) belong to the listeners with no target, which
+ * motion.js forwards.
+ *
+ * Events: `pointer*` where the browser has them (they cover mouse, touch and
+ * pen); otherwise `mouse*` and `touch*`, ignoring the mouse events a touch
+ * makes up afterwards.
+ */
+
+/** @import { Hits } from '../hit/hit.js' */
+
+/** A mouse event this soon after a touch is the browser's own imitation of it */
+const TOUCH_MOUSE_MS = 800
+
+/**
+ * @typedef {object} PointerOptions
+ * @property {() => Hits | null}                      hits   the geometry the last frame drew; null while it is not vector
+ * @property {(type: string, target: string) => void} fire   runs a pointer interaction; target "" for the listeners without one
+ * @property {boolean}                                clicks whether a click fires Click interactions
+ */
+
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @param {PointerOptions}    options
+ */
+export function createPointer(canvas, options) {
+  /** @type {Record<string, string[]>} target → interaction types, as the machine lists them */
+  let targets = {}
+  /** @type {Record<string, boolean>} */
+  let inside = {}
+  /** @type {Record<string, boolean>} */
+  let pressed = {}
+  let lastTouch = 0
+  let isBound = false
+  /** @type {{ name: string, listener: (event: any) => void }[]} */
+  const bound = []
+
+  /**
+   * @param   {string}  target
+   * @param   {string}  type
+   * @returns {boolean}
+   */
+  const listensTo = (target, type) => !!targets[target] && targets[target].indexOf(type) >= 0
+
+  /**
+   * @param   {string[]} types
+   * @returns {boolean}        whether any target listens to one of these
+   */
+  const hasAny = (types) => {
+    for (const target in targets) for (let n = 0; n < types.length; n++) if (listensTo(target, types[n])) return true
+    return false
+  }
+
+  /**
+   * @param   {string}  target
+   * @param   {number}  x
+   * @param   {number}  y
+   * @returns {boolean}        whether the pointer is on the target
+   */
+  function isOn(target, x, y) {
+    if (target === '') return true
+    const hits = options.hits()
+    return !!hits && hits.test(target, x, y)
+  }
+
+  /**
+   * Takes the interactions each target listens to and starts watching for the pointer, or stops.
+   *
+   * @param {Record<string, string[]>} next the machine's `pointerTargets`
+   */
+  function listen(next) {
+    // what is watched again keeps where the pointer is on it: rows that come and go do not end a press on the others
+    /** @type {Record<string, boolean>} */
+    const keptInside = {}
+    /** @type {Record<string, boolean>} */
+    const keptPressed = {}
+    for (const name in next) {
+      if (!targets[name]) continue
+      keptInside[name] = inside[name]
+      keptPressed[name] = pressed[name]
+    }
+    targets = next
+    inside = keptInside
+    pressed = keptPressed
+    const wanted = hasAny([ 'PointerDown', 'PointerUp', 'PointerEnter', 'PointerExit', 'PointerMove' ]) || (options.clicks && hasAnyTargeted('Click'))
+    if (wanted && !isBound) bind()
+    else if (!wanted && isBound) unbind()
+  }
+
+  /**
+   * @param   {string}  type
+   * @returns {boolean}      whether a listener on a target (not the whole artboard) has it
+   */
+  function hasAnyTargeted(type) {
+    for (const target in targets) if (target !== '' && listensTo(target, type)) return true
+    return false
+  }
+
+  /** @returns {string[]} the targets that have a pointer interaction */
+  function names() {
+    const list = []
+    for (const target in targets) list.push(target)
+    return list
+  }
+
+  /**
+   * The pointer is at a canvas pixel: targets it entered or left fire, and
+   * every one it is on fires a move.
+   *
+   * @param {number} x
+   * @param {number} y
+   */
+  function moved(x, y) {
+    const list = names()
+    for (let n = 0; n < list.length; n++) {
+      const target = list[n]
+      const isNow = isOn(target, x, y)
+      if (isNow && !inside[target]) {
+        inside[target] = true
+        if (listensTo(target, 'PointerEnter')) options.fire('PointerEnter', target)
+      } else if (!isNow && inside[target]) {
+        inside[target] = false
+        pressed[target] = false
+        if (listensTo(target, 'PointerExit')) options.fire('PointerExit', target)
+      }
+      if (isNow && listensTo(target, 'PointerMove')) options.fire('PointerMove', target)
+    }
+  }
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   */
+  function pressedAt(x, y) {
+    moved(x, y)
+    const list = names()
+    for (let n = 0; n < list.length; n++) {
+      const target = list[n]
+      if (!isOn(target, x, y)) continue
+      pressed[target] = true
+      if (listensTo(target, 'PointerDown')) options.fire('PointerDown', target)
+    }
+  }
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   */
+  function releasedAt(x, y) {
+    const list = names()
+    for (let n = 0; n < list.length; n++) {
+      const target = list[n]
+      const wasPressed = pressed[target]
+      pressed[target] = false
+      if (!isOn(target, x, y)) continue
+      if (listensTo(target, 'PointerUp')) options.fire('PointerUp', target)
+      // a click on the whole canvas is the canvas's own `click` event
+      if (wasPressed && target !== '' && options.clicks && listensTo(target, 'Click')) options.fire('Click', target)
+    }
+  }
+
+  /** The pointer left the canvas, or its touch ended: every target it was on is exited. */
+  function left() {
+    const list = names()
+    for (let n = 0; n < list.length; n++) {
+      const target = list[n]
+      pressed[target] = false
+      if (!inside[target]) continue
+      inside[target] = false
+      if (listensTo(target, 'PointerExit')) options.fire('PointerExit', target)
+    }
+  }
+
+  /**
+   * A client position as canvas pixels, which the hit geometry is in.
+   *
+   * @param   {{ clientX: number, clientY: number }} point
+   * @returns {{ x: number, y: number } | null}            null while the canvas has no size
+   */
+  function place(point) {
+    const box = canvas.getBoundingClientRect()
+    if (!box.width || !box.height) return null
+    return { x: ((point.clientX - box.left) * canvas.width) / box.width, y: ((point.clientY - box.top) * canvas.height) / box.height }
+  }
+
+  /**
+   * @param {(x: number, y: number) => void}                   then
+   * @param {{ clientX: number, clientY: number } | undefined} point
+   */
+  function at(then, point) {
+    const where = point ? place(point) : null
+    if (where) then(where.x, where.y)
+  }
+
+  /** @param {any} event */
+  const isMouseAfterTouch = (event) => event.type.indexOf('mouse') === 0 && Date.now() - lastTouch < TOUCH_MOUSE_MS
+
+  /** @param {any} event */
+  const firstTouch = (event) => (event.changedTouches && event.changedTouches[0]) || (event.touches && event.touches[0])
+
+  /** @type {Record<string, (event: any) => void>} */
+  const handlers = {
+    // pen, touch and mouse together
+    pointerdown: (event) => {
+      if (event.button) return
+      at(pressedAt, event)
+    },
+    pointermove: (event) => at(moved, event),
+    pointerup: (event) => {
+      if (event.button) return
+      at(releasedAt, event)
+      // a finger has no hover: lifting it leaves
+      if (event.pointerType && event.pointerType !== 'mouse') left()
+    },
+    pointercancel: () => left(),
+    pointerleave: () => left(),
+
+    // the browsers before pointer events
+    mousedown: (event) => {
+      if (isMouseAfterTouch(event) || event.button) return
+      at(pressedAt, event)
+    },
+    mousemove: (event) => {
+      if (!isMouseAfterTouch(event)) at(moved, event)
+    },
+    mouseup: (event) => {
+      if (isMouseAfterTouch(event) || event.button) return
+      at(releasedAt, event)
+    },
+    mouseleave: (event) => {
+      if (!isMouseAfterTouch(event)) left()
+    },
+    touchstart: (event) => {
+      lastTouch = Date.now()
+      at(pressedAt, firstTouch(event))
+    },
+    touchmove: (event) => {
+      lastTouch = Date.now()
+      at(moved, firstTouch(event))
+    },
+    touchend: (event) => {
+      lastTouch = Date.now()
+      at(releasedAt, firstTouch(event))
+      left()
+    },
+    touchcancel: () => {
+      lastTouch = Date.now()
+      left()
+    },
+  }
+
+  function bind() {
+    const events = window.PointerEvent
+      ? [ 'pointerdown', 'pointermove', 'pointerup', 'pointercancel', 'pointerleave' ]
+      : [ 'mousedown', 'mousemove', 'mouseup', 'mouseleave', 'touchstart', 'touchmove', 'touchend', 'touchcancel' ]
+    for (let n = 0; n < events.length; n++) {
+      bound.push({ name: events[n], listener: handlers[events[n]] })
+      canvas.addEventListener(events[n], handlers[events[n]], false)
+    }
+    isBound = true
+  }
+
+  function unbind() {
+    for (let n = 0; n < bound.length; n++) canvas.removeEventListener(bound[n].name, bound[n].listener, false)
+    bound.length = 0
+    isBound = false
+  }
+
+  return {
+    listen,
+    destroy() {
+      unbind()
+      targets = {}
+    },
+    /** The targets the pointer is on now, for tests and hosts */
+    get hovering() {
+      const list = []
+      for (const target in inside) if (inside[target] && target !== '') list.push(target)
+      return list
+    },
+  }
+}