pdf-reader-web/components/Line/index.tsx

import React from 'react';
import { v4 as uuidv4 } from 'uuid';

import Outer from '../OuterRectForLine';
import {
  AnnotationElementPropsType, LinePositionType, HTMLCoordinateType,
} from '../../constants/type';
import { parsePositionForBackend } from '../../helpers/position';

import { AnnotationContainer } from '../../global/otherStyled';

const Note: React.SFC<AnnotationElementPropsType> = ({
  obj_type,
  obj_attr,
  scale,
  viewport,
  isCollapse,
  onUpdate,
}: AnnotationElementPropsType) => {
  const {
    bdcolor = '',
    bdwidth = 0,
    transparency = 0,
    position,
    is_arrow,
  } = obj_attr;
  const uuid = uuidv4();

  const getActualPoint = (
    { start, end }: LinePositionType, h: number, s: number,
  ): LinePositionType => {
    const x1 = start.x * scale;
    const y1 = h - start.y * s;
    const x2 = end.x * scale;
    const y2 = h - end.y * s;
    return {
      start: {
        x: x1,
        y: y1,
      },
      end: {
        x: x2,
        y: y2,
      },
    };
  };

  const pointCalc = (
    { start, end }: LinePositionType,
    borderWidth: number,
  ): LinePositionType => ({
    start: {
      x: start.x + borderWidth,
      y: start.y + borderWidth,
    },
    end: {
      x: end.x + borderWidth,
      y: end.y + borderWidth,
    },
  });

  const rectCalc = (
    { start, end }: LinePositionType, h: number, s: number,
  ): HTMLCoordinateType => {
    const startY = h - start.y * s;
    const endY = h - end.y * s;

    return {
      top: startY > endY ? endY : startY,
      left: start.x > end.x ? end.x * s : start.x * s,
      width: Math.abs((end.x - start.x) * s),
      height: Math.abs(endY - startY),
    };
  };

  const actualbdwidth = bdwidth * scale;
  const annotRect = rectCalc(position as LinePositionType, viewport.height, scale);
  const { start, end } = getActualPoint(position as LinePositionType, viewport.height, scale);
  const {
    start: completeStart,
    end: completeEnd,
  } = pointCalc({ start, end } as LinePositionType, actualbdwidth);

  const actualWidth = annotRect.width + actualbdwidth + 15;
  const actualHeight = annotRect.height + actualbdwidth + 15;

  const handleMove = ({ start: moveStart, end: moveEnd }: LinePositionType): void => {
    const newPosition = {
      start: {
        x: moveStart.x, y: moveStart.y,
      },
      end: {
        x: moveEnd.x, y: moveEnd.y,
      },
    };

    onUpdate({
      position: parsePositionForBackend(obj_type, newPosition, viewport.height, scale),
    });
  };

  return (
    <>
      <AnnotationContainer
        top={`${annotRect.top}px`}
        left={`${annotRect.left}px`}
        width={`${actualWidth}px`}
        height={`${actualHeight}px`}
      >
        <svg
          width={`${actualWidth}px`}
          height={`${actualHeight}px`}
          viewBox={`${annotRect.left} ${annotRect.top} ${actualWidth} ${actualHeight}`}
        >
          {
            is_arrow ? (
              <defs>
                <marker
                  id={uuid}
                  markerWidth={actualbdwidth * 2}
                  markerHeight={actualbdwidth * 3}
                  refX={3}
                  refY={2}
                  orient="auto"
                  markerUnits="strokeWidth"
                >
                  <polyline
                    points="0.25,0.5 3.25,2 0.25,3.5 3.25,2 -0.25,2"
                    stroke={bdcolor}
                    strokeWidth={1}
                    fill="none"
                    strokeDasharray={100}
                  />
                </marker>
              </defs>
            ) : null
          }
          <line
            x1={completeStart.x}
            y1={completeStart.y}
            x2={completeEnd.x}
            y2={completeEnd.y}
            stroke={bdcolor}
            strokeWidth={actualbdwidth}
            strokeOpacity={transparency}
            markerEnd={is_arrow ? `url(#${uuid})` : ''}
          />
        </svg>
      </AnnotationContainer>
      {
        !isCollapse ? (
          <Outer
            top={annotRect.top}
            left={annotRect.left}
            width={actualWidth}
            height={actualHeight}
            start={start}
            end={end}
            completeStart={completeStart}
            completeEnd={completeEnd}
            onMove={handleMove}
          />
        ) : ''
      }
    </>
  );
};

export default Note;