penpot-exporter-figma-plugin/plugin-src/translators/vectors/translateVectorPaths.ts

import { Command, CurveToCommand, LineToCommand, MoveToCommand, parseSVG } from 'svg-path-parser';

import { Segment } from '@ui/lib/types/shapes/pathShape';

export const translateVectorPaths = (
  paths: VectorPaths,
  baseX: number,
  baseY: number
): Segment[] => {
  let segments: Segment[] = [];

  for (const path of paths) {
    const normalizedPaths = parseSVG(path.data);

    segments = [...segments, ...translateCommandsToSegments(normalizedPaths, baseX, baseY)];
  }

  return segments;
};

export const translateCommandsToSegments = (
  commands: Command[],
  baseX: number,
  baseY: number
): Segment[] => {
  return commands.map(command => {
    switch (command.command) {
      case 'moveto':
        return translateMoveToCommand(command, baseX, baseY);
      case 'lineto':
        return translateLineToCommand(command, baseX, baseY);
      case 'curveto':
        return translateCurveToCommand(command, baseX, baseY);
      case 'closepath':
      default:
        return {
          command: 'close-path'
        };
    }
  });
};

const translateMoveToCommand = (command: MoveToCommand, baseX: number, baseY: number): Segment => {
  return {
    command: 'move-to',
    params: { x: command.x + baseX, y: command.y + baseY }
  };
};

const translateLineToCommand = (command: LineToCommand, baseX: number, baseY: number): Segment => {
  return {
    command: 'line-to',
    params: { x: command.x + baseX, y: command.y + baseY }
  };
};

const translateCurveToCommand = (
  command: CurveToCommand,
  baseX: number,
  baseY: number
): Segment => {
  return {
    command: 'curve-to',
    params: {
      c1x: command.x1 + baseX,
      c1y: command.y1 + baseY,
      c2x: command.x2 + baseX,
      c2y: command.y2 + baseY,
      x: command.x + baseX,
      y: command.y + baseY
    }
  };
};