pdf-reader-web/helpers/svgBezierCurve.ts

type PointType = { x: number; y: number };

type LineFunc = (
  (pointA: PointType, pointB: PointType) => { length: number; angle: number}
);

type ControlPointClosure = (
  (current: PointType, previous: PointType, next: PointType, reverse?: boolean) => number[]
);

type ControlPointFunc = (
  (lineCale: LineFunc, smooth: number) => ControlPointClosure
);

type BezierCommandClosure = (
  (point: PointType, i: number, a: PointType[]) => string
);

type BezierCommandFunc = (
  (controlPoint: ControlPointClosure) => BezierCommandClosure
);

type SvgPathFunc = (
  (points: PointType[], command: BezierCommandClosure) => string
);

export const line: LineFunc = (pointA, pointB) => {
  const lengthX = pointB.x - pointA.x;
  const lengthY = pointB.y - pointA.y;

  return {
    length: Math.sqrt((lengthX ** 2) + (lengthY ** 2)),
    angle: Math.atan2(lengthY, lengthX),
  };
};

export const controlPoint: ControlPointFunc = (
  lineCale, smooth,
) => (
  current, previous, next, reverse,
): number[] => {
  // When 'current' is the first or last point of the array
  // 'previous' or 'next' don't exist.
  // Replace with 'current'
  const p = previous || current;
  const n = next || current;
  // Properties of the opposed-line
  const o = lineCale(p, n);
  // If is end-control-point, add PI to the angle to go backward
  const angle = o.angle + (reverse ? Math.PI : 0);
  const length = o.length * smooth;
  // The control point position is relative to the current point
  const x = current.x + Math.cos(angle) * length;
  const y = current.y + Math.sin(angle) * length;

  return [x, y];
};

export const bezierCommand: BezierCommandFunc = controlPointCalc => (point, i, a): string => {
  // start control point
  const [cpsX, cpsY] = controlPointCalc(a[i - 1], a[i - 2], point);
  // end control point
  const [cpeX, cpeY] = controlPointCalc(point, a[i - 1], a[i + 1], true);

  return `C ${cpsX},${cpsY} ${cpeX},${cpeY} ${point.x},${point.y}`;
};

export const svgPath: SvgPathFunc = (points, command) => {
  const d = points.reduce(
    (acc, point, i, a) => (i === 0 ? (
      `M ${point.x},${point.y}`
    ) : (
      `${acc} ${command(point, i, a)}`
    )),
    '',
  );
  return d;
};

export default line;