cursor.ts

cursor.ts

import { Vector } from '@ndbx/types';
import { MouseEvent as MouseEventReact } from 'react';

/**
 * cursor
 *
 * @param e MouseEvent
 * @param callback called every onMouseMove
 * @returns Promise resolved onMouseUp
 */
export const cursor = (e: MouseEventReact, callback: (delta: Vector, event: MouseEvent, timespan: number) => void) => {
  return new Promise<{ delta: Vector; event: MouseEvent; timespan: number }>((resolve) => {
    const start = {
      x: e.clientX,
      y: e.clientY,
    };
    const startTime = performance.now();

    const onMouseMove = (e: MouseEvent) => {
      callback(
        {
          x: start.x - e.clientX,
          y: start.y - e.clientY,
        },
        e,
        performance.now() - startTime
      );
    };
    const onMouseUp = (e: MouseEvent) => {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', onMouseUp);
      const delta = {
        x: start.x - e.clientX,
        y: start.y - e.clientY,
      };
      callback(delta, e, performance.now() - startTime);
      resolve({ delta, event: e, timespan: performance.now() - startTime });
    };

    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
  });
};