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

import React from 'react';

import OuterRect from '../OuterRect';
import SvgShapeElement from '../SvgShapeElement';
import {
  AnnotationElementPropsType, PositionType, CoordType,
} from '../../constants/type';
import { rectCalc, parsePositionForBackend } from '../../helpers/position';

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

const Note: React.SFC<AnnotationElementPropsType> = ({
  obj_type,
  obj_attr: {
    bdcolor = '',
    fcolor = '',
    bdwidth = 0,
    transparency = 0,
    ftransparency = 0,
    position,
  },
  scale,
  viewport,
  isCollapse,
  onUpdate,
}: AnnotationElementPropsType) => {
  const annotRect = rectCalc(position as PositionType, viewport.height, scale);

  const handleScaleOrMove = ({
    top, left, width = 0, height = 0,
  }: CoordType): void => {
    const newPosition = {
      top,
      left,
      bottom: top + (height || annotRect.height),
      right: left + (width || annotRect.width),
    };

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

  const actualbdwidth = bdwidth * scale;
  const actualWidth = annotRect.width;
  const actualHeight = annotRect.height;

  return (
    <>
      <AnnotationContainer
        top={`${annotRect.top}px`}
        left={`${annotRect.left}px`}
        width={`${actualWidth}px`}
        height={`${actualHeight}px`}
      >
        <SvgShapeElement
          shape={obj_type}
          width={actualWidth}
          height={actualHeight}
          bdcolor={bdcolor}
          transparency={transparency}
          bdwidth={actualbdwidth}
          fcolor={fcolor}
          ftransparency={ftransparency}
        />
      </AnnotationContainer>
      {
        !isCollapse ? (
          <OuterRect
            top={annotRect.top}
            left={annotRect.left}
            width={actualWidth}
            height={actualHeight}
            onMove={handleScaleOrMove}
            onScale={handleScaleOrMove}
          />
        ) : ''
      }
    </>
  );
};

export default Note;