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

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

import { useState, useEffect } from 'react';
import useDrawShape from './useDrawShape';
import useReadingMaskCanvas from './useReadingMaskCanvas';
import useEventHandler from './useEventHandler';
export default function useReadingMaskController(_ref) {
  let {
    uiConfig
  } = _ref;
  const alpha = uiConfig.appearance.opacity;
  const initialDimensions = uiConfig.dimensions;
  const getRootElement = uiConfig.getRootElement;
  const [dimensions, setDimensions] = useState(uiConfig.dimensions);
  const {
    updateCanvasState,
    canvasState,
    getCanvasRef,
    canvasContext,
    lastMousePosition
  } = useReadingMaskCanvas({
    getRootElement
  }); //Get reading mask canvas 

  const {
    drawRectangle
  } = useDrawShape({
    canvasState,
    alpha,
    lastMousePosition,
    canvasContext,
    getRootElement
  }); //Draw shape using the canvas

  const {
    mouseMove,
    onResize,
    iFrameMessageReceiver
  } = useEventHandler({
    drawRectangle,
    updateCanvasState,
    dimensions
  }); //handleEventListeners for mouse

  useEffect(() => {
    drawRectangle();
  }, [canvasState, drawRectangle]);
  useEffect(() => {
    setDimensions(initialDimensions);
    updateCanvasState(initialDimensions);
  }, [initialDimensions, setDimensions, updateCanvasState]);
  useEffect(() => {
    const root = getRootElement();
    const target = root || document;
    target.addEventListener('mousemove', mouseMove);
    window.addEventListener('resize', onResize);
    window.addEventListener('message', iFrameMessageReceiver);
    return () => {
      target.removeEventListener('mousemove', mouseMove);
      window.removeEventListener('resize', onResize);
      window.removeEventListener('message', iFrameMessageReceiver);
    };
  }, [mouseMove, onResize, getRootElement]);
  return {
    canvasState,
    getCanvasRef
  };
}