events.md

Events

Overview

TODO…

Slide Events

The slide() function is a useful utility for listening to pointer event gestures, e.g. to make an element draggable:

import {Point} from '@mathigon/fermat';
import {slide, $} from '@mathigon/boost';

const $target = $('.my-element');
slide($target, {
  down: (posn: Point) => {
    // Executed on mouse/touch/pointerdown
  },
  start: (posn: Point) => {
    // Executed just before starting to move the pointer
  },
  move: (posn: Point, start: Point, last: Point) => {
    // Executed on every frame while sliding, including outside of the original $target.
    // You can always access the start position of the gesture, and the last position
    // with which the move() function was called as arguments of this function.
    const distance = Point.distance(posn, last);
  },
  end: (posn: Point) => {
    // Executed on mouse/touch/pointerup, after a sliding gesture.
  },
  click: (posn: Point) => {
    // Executed on mouse/touch/pointerup, if there was no sliding gesture and the
    // user simply clicked.
  }
});

If $target is a simple HTML element, the posn values will always be pixel distanced from the top-left corner of the browser. if $target is an SVG or CANVAS element, the posn values will be in the coordinate system of that element. This includes automatically inverting any transformations applied to the element (e.g. scaling).

Attributes

You can watch changes to element attributes using the .onAttr() method:

import {slide, $} from '@mathigon/boost';

const $target = $('.my-element');
$target.onAttr('style', (style: string) => {
  console.log(style);
});

The callback is executed once immediately when binding the event listener, with the current value of the corresponding attribute. In that case, a second initial: boolean parameter is passed to the callback with value true.

Other event types

TODO…

Draggable elements

TODO…