dyomedea/src/components/map/Handlers.tsx

import react, { useState } from 'react';
import { throttle } from 'lodash';
import { Point } from './types';
import { handlersConfig } from './config';

export interface HandlersProperties {
  /**Transform the map:
   * * Shift the map by a number of pixel
   * * Multiply the zoom by deltaZoom around the zoomCenter
   *   */
  transformMap: (
    deltaShift: Point | null,
    deltaZoom: number | null,
    zoomCenter: Point | null
  ) => void;
}
/**
 *
 * @param props
 * @returns A div with handlers
 */
export const Handlers: react.FC<HandlersProperties> = (
  props: HandlersProperties
) => {
  const genericHandler = (event: any) => {
    // console.log(`Log - Event:  ${event.type}`);
    // if (event.pageX !== undefined) {
    //   console.log(
    //     `Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}`
    //   );
    //   console.log(
    //     `mouseState: ' ${JSON.stringify(mouseState)} (+${
    //       Date.now() - mouseState.timestamp
    //     }ms) `
    //   );
    //   return;
    //}
  };

  const initialMouseState = {
    down: false,
    starting: { x: -1, y: -1 },
  };
  const mouseLeaveHandler = (event: any) => {
    genericHandler(event);
    setMouseState(initialMouseState);
  };

  const mouseDownHandler = (event: any) => {
    genericHandler(event);
    setMouseState({
      down: true,
      starting: { x: event.pageX, y: event.pageY },
    });
  };

  const mouseUpHandler = (event: any) => {
    genericHandler(event);
    setMouseState(initialMouseState);
  };

  const mouseMoveHandler = throttle((event: any) => {
    genericHandler(event);
    props.transformMap(
      {
        x: event.pageX - mouseState.starting.x,
        y: event.pageY - mouseState.starting.y,
      },
      null,
      null
    );
    setMouseState({
      down: true,
      starting: {
        x: event.pageX,
        y: event.pageY,
      },
    });
  }, handlersConfig.mouseMoveThrottleDelay);

  const [mouseState, setMouseState] = useState(initialMouseState);
  return (
    <div
      className='handler'
      onMouseDown={mouseDownHandler}
      onMouseMove={mouseMoveHandler}
      onMouseUp={mouseUpHandler}
      onMouseLeave={mouseLeaveHandler}
    />
  );
};

export default Handlers;