splitPathExample.js

// @flow

import * as React from "react";

type Breakpoint = {
  type: "Breakpoint",
  x: number,
  y: number
};

function createSVGPath(head: string, ...numbers: number[]): string {
  if (!numbers || !numbers.length) {
    return head;
  }
  return `${head} ${numbers.map(num => num.toFixed(2)).join(" ")}`;
}

function openTypeCommandToString(command: any): string {
  // If a Breakpoint ends up in the final path it couldn't find anything to stitch with,
  // so just treat it as a normal line.
  if (command.type === "Breakpoint") {
    return createSVGPath("L", command.x, command.y);
  }

  if (command.type === "M" || command.type === "L") {
    return createSVGPath(command.type, command.x, command.y);
  }

  if (command.type === "Q") {
    return createSVGPath("Q", command.x1, command.y1, command.x, command.y);
  }

  if (command.type === "C") {
    return createSVGPath("C", command.x1, command.y1, command.x2, command.y2, command.x, command.y);
  }

  return createSVGPath(command.type);
}

type SplitPath = {
  commands: OpenTypePathCommand[],
  boundingBox: { x1: number, x2: number, y1: number, y2: number }
};

export function RenderSplitPath(
  {boundingBox: { x1, x2, y1, y2 }, commands}: SplitPath
): React.Node {
  const d = commands.map(command => openTypeCommandToString(command)).join();
  return (
    <svg viewBox={`${x1} ${y1} ${x2 - x1} ${y2 - y1}`}>
      <path d={d} />
    </svg>
  );
}