pdf-reader-web/containers/FreeTextTools.tsx

import React, { useEffect, useState, useCallback } from 'react';

import { ANNOTATION_TYPE } from '../constants';
import Icon from '../components/Icon';
import Button from '../components/Button';
import ExpansionPanel from '../components/ExpansionPanel';
import FreeTextOption from '../components/FreeTextOption';
import { OptionPropsType } from '../constants/type';
import { getAbsoluteCoordinate } from '../helpers/position';
import { parseAnnotationObject } from '../helpers/annotation';

import useActions from '../actions';
import useStore from '../store';

type Props = {
  title: string;
  isActive: boolean;
  onClick: () => void;
};

const HighlightTools: React.FC<Props> = ({
  title,
  isActive,
  onClick,
}: Props) => {
  const [data, setData] = useState({
    fontName: 'Helvetica',
    fontSize: 12,
    align: 'left',
    fontStyle: '',
    color: '#FCFF36',
    opacity: 100,
  });
  const [{ viewport, scale }, dispatch] = useStore();
  const { addAnnots } = useActions(dispatch);

  const setDataState = (obj: OptionPropsType): void => {
    setData(prev => ({
      ...prev,
      ...obj,
    }));
  };

  const addFreeText = (
    pageEle: HTMLElement,
    event: MouseEvent | TouchEvent,
    attributes: OptionPropsType,
  ): void => {
    const {
      fontStyle, fontName, fontSize = 0, opacity, color, align,
    } = attributes;
    const pageNum = pageEle.getAttribute('data-page-num') || 0;
    const coordinate = getAbsoluteCoordinate(pageEle, event);

    const annotData = {
      obj_type: ANNOTATION_TYPE.freetext,
      obj_attr: {
        page: pageNum as number,
        position: {
          top: coordinate.y,
          left: coordinate.x,
          bottom: coordinate.y + fontSize,
          right: coordinate.x + 30,
        },
        transparency: opacity,
        fontname: fontStyle ? `${fontName}-${fontStyle}` : fontName,
        fontsize: fontSize,
        textcolor: color,
        align,
        content: '',
      },
    };
    const freeText = parseAnnotationObject(annotData, viewport.height, scale);

    addAnnots([freeText], true);
  };

  const handleMouseDown = useCallback((event: MouseEvent | TouchEvent): void => {
    event.preventDefault();
    const pageEle = (event.target as HTMLElement).parentNode as HTMLElement;

    if (pageEle.hasAttribute('data-page-num')) {
      addFreeText(pageEle, event, data);
    }
  }, [data, viewport, scale]);

  useEffect(() => {
    const pdfViewer = document.getElementById('pdf_viewer') as HTMLDivElement;
    if (isActive && pdfViewer) {
      pdfViewer.addEventListener('mousedown', handleMouseDown);
      pdfViewer.addEventListener('touchstart', handleMouseDown);
    }

    return (): void => {
      if (pdfViewer) {
        pdfViewer.removeEventListener('mousedown', handleMouseDown);
        pdfViewer.removeEventListener('touchstart', handleMouseDown);
      }
    };
  }, [isActive, handleMouseDown]);

  return (
    <ExpansionPanel
      label={(
        <Button
          shouldFitContainer
          align="left"
          onClick={onClick}
          isActive={isActive}
        >
          <Icon glyph="text" style={{ marginRight: '10px' }} />
          {title}
        </Button>
      )}
      isActive={isActive}
      showBottomBorder
    >
      <FreeTextOption
        {...data}
        setDataState={setDataState}
      />
    </ExpansionPanel>
  );
};

export default HighlightTools;