svg-layout-designer-react/src/Components/ElementsSidebar/MouseEventHandlers.ts

import React, { RefObject, Dispatch, SetStateAction, useEffect } from 'react';
import { IPoint } from '../../Interfaces/IPoint';

export function UseMouseEvents(
  isContextMenuOpen: boolean,
  elementRef: RefObject<HTMLDivElement>,
  setIsContextMenuOpen: Dispatch<SetStateAction<boolean>>,
  setOnClickContainerId: Dispatch<SetStateAction<string>>,
  setContextMenuPosition: Dispatch<SetStateAction<IPoint>>
): void {
  useEffect(() => {
    function OnContextMenu(event: MouseEvent): void {
      return HandleRightClick(
        event,
        setIsContextMenuOpen,
        setOnClickContainerId,
        setContextMenuPosition
      );
    }

    function OnLeftClick(): void {
      return HandleLeftClick(
        isContextMenuOpen,
        setIsContextMenuOpen,
        setOnClickContainerId
      );
    }

    elementRef.current?.addEventListener(
      'contextmenu',
      OnContextMenu
    );

    window.addEventListener(
      'click',
      OnLeftClick
    );

    return () => {
      elementRef.current?.removeEventListener(
        'contextmenu',
        OnContextMenu
      );

      window.removeEventListener(
        'click',
        OnLeftClick
      );
    };
  });
}

export function HandleRightClick(
  event: MouseEvent,
  setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
  setOnClickContainerId: React.Dispatch<React.SetStateAction<string>>,
  setContextMenuPosition: React.Dispatch<React.SetStateAction<IPoint>>
): void {
  event.preventDefault();

  if (!(event.target instanceof HTMLButtonElement)) {
    setIsContextMenuOpen(false);
    setOnClickContainerId('');
    return;
  }

  const contextMenuPosition: IPoint = { x: event.pageX, y: event.pageY };
  setIsContextMenuOpen(true);
  setOnClickContainerId(event.target.id);
  setContextMenuPosition(contextMenuPosition);
}

export function HandleLeftClick(
  isContextMenuOpen: boolean,
  setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
  setOnClickContainerId: React.Dispatch<React.SetStateAction<string>>
): void {
  if (!isContextMenuOpen) {
    return;
  }

  setIsContextMenuOpen(false);
  setOnClickContainerId('');
}