<commit_before>import * as React from "react";
import { toScreen, toHex } from "./Util";
import { flatten } from "lodash";
import {  IGPIPropsDraggable } from "./types";
import draggable from './Draggable';

const toPathString = (pathData: any[], canvasSize: [number, number]) =>
  pathData
    .map((group: any) => {
      const { tag, contents } = group;
      const mapped = contents
        .map((point: any) => {
          switch (point.tag) {
            case "Pt":
              return "M" + toScreen(point.contents, canvasSize).join(" ");
            case "CubicBez":
              return (
                "C" +
                flatten(
                  point.contents.map((coords: [number, number]) => {
                    return toScreen(coords, canvasSize);
                  })
                ).join(" ")
              );
            default:
              return " ";
          }
        })
        .join(" ");
      return mapped + (tag === "Closed" ? "Z" : "");
    })
    .join(" ");

class Curve extends React.Component<IGPIPropsDraggable> {
  public render() {
    const { shape } = this.props;
    const { canvasSize } = this.props;
    const color = toHex(shape.color.contents);
    const alpha = shape.color.contents[3];
    return (
      <path
        stroke={color}
        fill="rgba(0,0,0,0)"
        style={{ strokeWidth: 2.5 }}
        fillOpacity={alpha}
        d={toPathString(shape.pathData.contents, canvasSize)}
      >
        <title>{shape.name.contents}</title>
      </path>
    );
  }
}<commit_msg>[end-user] #141 completed curve renderer implementation (not thoroughly tested yet)<commit_after>import * as React from "react";
import { toScreen, toHex } from "./Util";
import { flatten } from "lodash";
import {  IGPIPropsDraggable } from "./types";
import draggable from './Draggable';

const pathCommandString = (command: string, pts: number[][], canvasSize: [number, number]) =>
  command + flatten(
    pts.map((coords: [number, number]) => {
      return toScreen(coords, canvasSize);
    })
  ).join(" ")

const toPathString = (pathData: any[], canvasSize: [number, number]) =>
  pathData
    .map((group: any) => {
      const { tag, contents } = group;
      const mapped = contents
        .map((cmd: any) => {
          switch (cmd.tag) {
            case "Pt":
              return "M" + toScreen(cmd.contents, canvasSize).join(" ");
            case "CubicBez":
              return pathCommandString("C", cmd.contents, canvasSize);
            case "CubicBezJoin":
              return pathCommandString("S", cmd.contents, canvasSize);
            case "QuadBez":
              return pathCommandString("Q", cmd.contents, canvasSize);
            case "QuadBezJoin":
              return pathCommandString("T", cmd.contents, canvasSize);
            default:
              return " ";
          }
        })
        .join(" ");
      return mapped + (tag === "Closed" ? "Z" : "");
    })
    .join(" ");

class Curve extends React.Component<IGPIPropsDraggable> {
  public render() {
    const { shape } = this.props;
    const { canvasSize } = this.props;
    const color = toHex(shape.color.contents);
    const alpha = shape.color.contents[3];
    return (
      <path
        stroke={color}
        fill="rgba(0,0,0,0)"
        style={{ strokeWidth: 2.5 }}
        fillOpacity={alpha}
        d={toPathString(shape.pathData.contents, canvasSize)}
      >
        <title>{shape.name.contents}</title>
      </path>
    );
  }
}
{'fraction_non_alphanumeric': 0.1509325681492109, 'fraction_numerical': 0.004878048780487805, 'mean_word_length': 2.087688219663419, 'pattern_counts': {'":': 7, '<': 13, '<?xml version=': 0, '>': 22, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1986536', 'n_tokens_mistral': 1041, 'n_tokens_neox': 1027, 'n_words': 239}