add (optional) cursor support

[nickschot]

Currently only actual touch events are supported.

[josemarluedke]

👍 I recently implemented a similar modifier and I had cursor support as requirement. Having it here would be awesome. BTW, great addon!

[nickschot]

@josemarluedke how did you implement the cursor part? Plain mouse events or through pointer events (or both)? Currently researching what the best way to add support for this would be.

[josemarluedke]

I used mouse events. It worked well so far.

  setup() {
    // setup touch
    this.element.addEventListener('touchstart', this.handleStart, false);
    this.element.addEventListener('touchmove', this.handleMove, false);
    this.element.addEventListener('touchend', this.handleEnd, false);

    // setup mouse
    this.element.addEventListener('mousedown', this.handleStart, false);
    this.element.addEventListener('mousemove', this.handleMove, false);
    this.element.addEventListener('mouseup', this.handleEnd, false);
  }
  
  /// ....

  @action handleStart(event: TouchEvent | MouseEvent): void {
    if (event instanceof TouchEvent) {
      this.startX = event.changedTouches[0].clientX;
    } else {
      this.startX = event.clientX;
    }
  }
  // etc ... 

[josemarluedke]

Actually, the check needs to account for TouchEvent not been defined, which occurs in desktop Safari.

function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent {
  return (
    (typeof TouchEvent as never) !== 'undefined' && event instanceof TouchEvent
  );
}

[nickschot]

So I'm gonna rework the implementation to utilize PointerEvents so we can support all types of input at once (also pencils etc.)