dyomedea/src/components/map/Handlers.tsx

import react, { useRef, useState } from 'react';
import { Point } from './types';
import './Handler.css';
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 the following handlers
 * * mouseLeave, mouseDown and mouseUp to track the mouse state
 * * mouseMove to shift the map if the mouse is down
 * * doubleClick to zoom in
 * * wheel to zoom in and out
 *
 */
export const Handlers: react.FC<HandlersProperties> = (
  props: HandlersProperties
) => {
  const genericHandler = (event: any) => {
    // console.log(`Log - Event:  ${event.type}`);
    // if (event.clientX !== undefined) {
    //   console.log(
    //     `Mouse : ${event.clientX}, ${event.clientY}, target: ${event.target}`
    //   );
    //   console.log(
    //     `mouseState: ' ${JSON.stringify(mouseState)} (+${
    //       Date.now() - mouseState.timestamp
    //     }ms) `
    //   );
    //   return;
    //}
  };

  /**
   *
   * Mouse handlers
   *
   */
  const initialMouseState = {
    down: false,
    starting: { x: -1, y: -1 },
    timestamp: 0,
  };

  const mouseState = useRef(initialMouseState);

  const mouseLeaveHandler = (event: any) => {
    genericHandler(event);
    mouseState.current = initialMouseState;
  };

  const mouseDownHandler = (event: any) => {
    genericHandler(event);
    mouseState.current = {
      down: true,
      starting: { x: event.clientX, y: event.clientY },
      timestamp: 0,
    };
  };

  const mouseUpHandler = (event: any) => {
    genericHandler(event);
    mouseState.current = initialMouseState;
  };

  const mouseMoveHandler = (event: any) => {
    if (
      mouseState.current.down &&
      Date.now() - mouseState.current.timestamp >
        handlersConfig.mouseMoveThrottleDelay
    ) {
      genericHandler(event);
      if (mouseState.current.down) {
        props.transformMap(
          {
            x: event.clientX - mouseState.current.starting.x,
            y: event.clientY - mouseState.current.starting.y,
          },
          null,
          null
        );
        mouseState.current = {
          down: true,
          starting: {
            x: event.clientX,
            y: event.clientY,
          },
          timestamp: Date.now(),
        };
      }
    }
  };

  /**
   *
   * Double click
   *
   */

  const doubleClickHandler = (event: any) => {
    genericHandler(event);
    props.transformMap(null, Math.SQRT2, {
      x: event.clientX,
      y: event.clientY,
    });
  };

  /**
   *
   * Wheel handler
   *
   */

  const initialWheelState = {
    timestamp: 0,
  };

  const wheelState = useRef(initialWheelState);

  const wheelEventHandler = (event: any) => {
    genericHandler(event);
    if (
      event.deltaMode === WheelEvent.DOM_DELTA_PIXEL &&
      Date.now() - wheelState.current.timestamp >
        handlersConfig.wheelThrottleDelay
    ) {
      props.transformMap(null, event.deltaY < 0 ? Math.SQRT2 : Math.SQRT1_2, {
        x: event.clientX,
        y: event.clientY,
      });
      wheelState.current = {
        timestamp: Date.now(),
      };
    }
  };

  return (
    <div
      className='handler'
      role='presentation'
      onMouseDown={mouseDownHandler}
      onMouseMove={mouseMoveHandler}
      onMouseUp={mouseUpHandler}
      onMouseLeave={mouseLeaveHandler}
      onDoubleClick={doubleClickHandler}
      onWheel={wheelEventHandler}
    />
  );
};

export default Handlers;