pdf-reader-web/helpers/position.ts

import _ from 'lodash';

import {
  PositionType, HTMLCoordinateType, PointType, AnnotationPositionType, LinePositionType,
} from '../constants/type';

export const rectCalc = (
  position: PositionType, viewHeight: number, scale: number,
): HTMLCoordinateType => ({
  top: viewHeight - position.top * scale,
  left: position.left * scale,
  width: (position.right - position.left) * scale,
  height: (position.top - position.bottom) * scale,
});

export const getPosition = (type: string, element: Record<string, any>): any => {
  switch (type) {
    case 'Ink': {
      const gestures: any[] = [];
      let nodes: any = element.childNodes[1].childNodes;

      nodes = Array.prototype.slice.call(nodes);
      nodes.forEach((ele: HTMLElement) => {
        if (ele.tagName === 'gesture') {
          const points: PointType[] = [];
          const gestureArray = ele.innerHTML.split(';');
          gestureArray.forEach((ele1: string) => {
            const pointArr = ele1.split(',');
            const point = {
              x: parseInt(pointArr[0], 10),
              y: parseInt(pointArr[1], 10),
            };
            points.push(point);
          });
          gestures.push(points);
        }
      });
      return gestures;
    }
    case 'Line': {
      const start = element.attributes.start.value.split(',');
      const end = element.attributes.end.value.split(',');
      return {
        start: {
          x: start[0],
          y: start[1],
        },
        end: {
          x: end[0],
          y: end[1],
        },
      };
    }
    case 'Square':
    case 'Circle': {
      const width = parseInt(element.attributes.width.value, 10);
      const rect = element.attributes.rect.value.split(',');
      return {
        left: parseInt(rect[0], 10) + width,
        bottom: parseInt(rect[1], 10) + width,
        right: parseInt(rect[2], 10) - width,
        top: parseInt(rect[3], 10) - width,
      };
    }
    case 'Text':
    case 'FreeText': {
      const rect = element.attributes.rect.value.split(',');
      return {
        left: parseInt(rect[0], 10),
        bottom: parseInt(rect[1], 10),
        right: parseInt(rect[2], 10),
        top: parseInt(rect[3], 10),
      };
    }
    case 'Highlight':
    case 'Underline':
    case 'Squiggly':
    case 'StrikeOut': {
      let tempArray: any[] = [];

      if (element.attributes.coords) {
        const coords = element.attributes.coords.value.split(',');
        tempArray = _.chunk(coords, 8);
      }

      const position = tempArray.map((ele: string[]) => ({
        left: parseInt(ele[0], 10),
        bottom: parseInt(ele[1], 10),
        right: parseInt(ele[2], 10),
        top: parseInt(ele[5], 10),
      }));

      return position;
    }
    default:
      return '';
  }
};

export const parsePositionForBackend = (
  type: string, position: AnnotationPositionType, pageHeight: number, scale: number,
): AnnotationPositionType => {
  switch (type) {
    case 'Highlight':
    case 'Underline':
    case 'Squiggly':
    case 'StrikeOut': {
      const coercionPositionTypeArray = position as PositionType[];

      return coercionPositionTypeArray.map((ele: PositionType) => ({
        left: ele.left / scale,
        bottom: (pageHeight - ele.bottom) / scale,
        right: ele.right / scale,
        top: (pageHeight - ele.top) / scale,
      }));
    }
    case 'Square':
    case 'Circle':
    case 'FreeText':
    case 'Text': {
      const coercionPositionType = position as PositionType;

      return {
        left: coercionPositionType.left / scale,
        bottom: (pageHeight - coercionPositionType.bottom) / scale,
        right: coercionPositionType.right / scale,
        top: (pageHeight - coercionPositionType.top) / scale,
      };
    }
    case 'Line': {
      const { start, end } = position as LinePositionType;

      return {
        start: {
          x: start.x / scale,
          y: (pageHeight - start.y) / scale,
        },
        end: {
          x: end.x / scale,
          y: (pageHeight - end.y) / scale,
        },
      };
    }
    case 'Ink': {
      const points = position as PointType;
      return {
        x: points.x / scale,
        y: (pageHeight - points.y) / scale,
      };
    }
    default:
      return {
        left: 0,
        bottom: 0,
        right: 0,
        top: 0,
      };
  }
};

type GetAbsoluteCoordinateType = (
  (
    parentElement: HTMLElement | SVGSVGElement | SVGCircleElement | null,
    clickEvent: MouseEvent | React.MouseEvent
  ) => { x: number; y: number }
);

export const getAbsoluteCoordinate: GetAbsoluteCoordinateType = (parentElement, clickEvent) => {
  if (!parentElement) return { x: 0, y: 0 };

  const {
    pageX,
    pageY,
  } = clickEvent;
  const rect = parentElement.getBoundingClientRect();
  const offsetX = window.pageXOffset || window.scrollX || 0;
  const offsetY = window.pageYOffset || window.scrollY || 0;
  const coordinate = {
    x: pageX - rect.left - offsetX,
    y: pageY - rect.top - offsetY,
  };

  return coordinate;
};

export default rectCalc;