Function pointer

src/events/pointer.js:7–1924

* @module Events * @submodule Pointer * @for p5

(p5, fn, lifecycles)

 */

function pointer(p5, fn, lifecycles){
  lifecycles.presetup = function(){
    const events = [
      'pointerdown',
      'pointerup',
      'pointermove',
      'dragend',
      'dragover',
      'click',
      'dblclick',
      'wheel'
    ];
    for(const event of events){
      window.addEventListener(event, this[`_on${event}`].bind(this), {
        passive: false,
        signal: this._removeSignal
      });
    }

    window.addEventListener('blur', () => {
      this.mouseIsPressed = false;
    }, { signal: this._removeSignal });
  };

  /**
   * A `Number` system variable that tracks the mouse's horizontal movement.
   *
   * `movedX` tracks how many pixels the mouse moves left or right between
   * frames. `movedX` will have a negative value if the mouse moves left between
   * frames and a positive value if it moves right. `movedX` can be calculated
   * as `mouseX - pmouseX`.
   *
   * Note: `movedX` continues updating even when
   * <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
   *
   * @property {Number} movedX
   * @readOnly
   *
   * @example
   * function setup() {
   *   createCanvas(100, 100);
   *
   *   describe(
   *     'A gray square. The text ">>" appears when the user moves the mouse to the right. The text "<<" appears when the user moves the mouse to the left.'
   *   );
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Style the text.
   *   textAlign(CENTER);
   *   textSize(16);
   *
   *   // Display >> when movedX is positive and
   *   // << when it's negative.
   *   if (movedX > 0) {
   *     text('>>', 50, 50);