@zohodesk/a11y/es/ReadingMask/hooks/useEventHandler.js

In this Package, We Provide Some Basic Components For Accessibility.

import { useMemo } from 'react';
import selectn from 'selectn';
import { throttle } from "../utils/readingMaskUtils";
import { POST_MESSAGE_TYPE } from "../data/constants";
import useEvent from "../../hooks/useEvent";
export default function useEventHandler(_ref) {
  let {
    drawRectangle,
    updateCanvasState,
    dimensions
  } = _ref;
  const throttleDrawRectangle = useMemo(() => throttle(drawRectangle, 10), [drawRectangle]); //delay added for 10 milli

  /* Mouse move event handler for drawing on canvas */

  const mouseMove = useEvent(event => {
    const {
      clientX,
      clientY
    } = event;
    /* Ensure clientX and clientY are valid numbers before drawing */

    if (typeof clientX === 'number' && typeof clientY === 'number') {
      throttleDrawRectangle.func({
        mouseX: clientX,
        mouseY: clientY
      });
    }
  });
  /* Resize event handler for updating the canvas state based on dimensions changes */

  const onResize = useEvent(() => {
    updateCanvasState(dimensions);
  });
  /* IFrame message event handler for receiving and processing messages */

  const iFrameMessageReceiver = useEvent(event => {
    const READINGMASK_TYPE = selectn('data.type', event) == POST_MESSAGE_TYPE;

    if (READINGMASK_TYPE) {
      const {
        type,
        x,
        y,
        iframeData
      } = selectn('data.event', event);

      switch (type) {
        case 'mousemove':
          if (typeof x === 'number' && typeof y === 'number') {
            drawRectangle({
              mouseX: x,
              mouseY: y,
              type: 'iframe',
              iframeData
            });
          }

          break;
      }
    }
  });
  return {
    mouseMove,
    onResize,
    iFrameMessageReceiver
  };
}