index.js

"use strict";

const always = require("ramda/src/always");
const append = require("ramda/src/append");
const converge = require("ramda/src/converge");
const curry = require("ramda/src/curry");
const drop = require("ramda/src/drop");
const equals = require("ramda/src/equals");
const head = require("ramda/src/head");
const identity = require("ramda/src/identity");
const isNil = require("ramda/src/isNil");
const merge = require("ramda/src/merge");
const nth = require("ramda/src/nth");
const pair = require("ramda/src/pair");
const pipe = require("ramda/src/pipe");
const prepend = require("ramda/src/prepend");
const prop = require("ramda/src/prop");
const when = require("ramda/src/when");
const parse = require("parse-svg-path");
const R = require("ramda"); // Import Ramda

// SET_ABSOLUTE :: String
const SET_ABSOLUTE = "SET_ABSOLUTE";

// SET_RELATIVE :: String
const SET_RELATIVE = "SET_RELATIVE";

// type alias State = { x: String, y: String }
// initialState :: State
const initialState = { x: 0, y: 0 };

// state :: State
let state = Object.assign({}, initialState);

// reducer :: State -> String -> Object -> State
const reducer = curry((a, b, c) => {
	switch (b) {
		case SET_RELATIVE:
			return Object.assign({}, a, {
				x: a.x + Number(c.x),
				y: a.y + Number(c.y),
			});
		case SET_ABSOLUTE:
			return Object.assign({}, a, {
				x: Number(when(isNil, always(a.x), c.x)),
				y: Number(when(isNil, always(a.y), c.y)),
			});
		default:
			return a;
	}
});

// dispatch :: String -> Object -> State
const dispatch = curry((a, b) => {
	state = reducer(state, a, b);

	return state;
});

// roundFloat :: Number | String -> Number
const roundFloat = (a) => {
	return Number(a * 100).toFixed() / 100;
};

// convertXY :: Array (Number | String) -> Object
const convertXY = (a) => {
	const x = Number(nth(0, a));
	const y = Number(nth(1, a));

	return { x, y };
};

// convertCCXY :: Array (Number | String) -> Object
const convertCCXY = (a) => {
	const x = Number(nth(4, a));
	const y = Number(nth(5, a));
	const cp1x = Number(nth(0, a));
	const cp1y = Number(nth(1, a));
	const cp2x = Number(nth(2, a));
	const cp2y = Number(nth(3, a));

	return { x, y, cp1x, cp1y, cp2x, cp2y };
};

// convertQCXY :: Array (Number | String) -> Object
const convertQCXY = (a) => {
	const x = Number(nth(2, a));
	const y = Number(nth(3, a));
	const cpx = Number(nth(0, a));
	const cpy = Number(nth(1, a));

	return { x, y, cpx, cpy };
};

// convertArcXY :: Array (Number | String) -> Object
const convertArcXY = (a) => {
	const x = Number(nth(5, a));
	const y = Number(nth(6, a));
	const rx = Number(nth(0, a));
	const ry = Number(nth(1, a));
	const cw = pipe(nth(4), equals(1))(a);

	return { x, y, rx, ry, cw };
};

// beginShape :: Nothing -> String
const beginShape = (n) => {
	return `struct SVGShape${n}: Shape {
    func path(in rect: CGRect) -> Path {
        var shape = Path()`;
};

const beginPath = (n) => {
	return `let shape${n} = UIBezierPath()`;
};

// endShape :: String
const endShape = `        shape.closeSubpath()
        return shape
    }\n}`;

// cgPoint :: Object -> String
const cgPoint = (a) => {
	return `CGPoint(x: ${roundFloat(a.x)}, y: ${roundFloat(a.y)})`;
};

// convertMove :: String -> String
const convertMove = (a) => {
	return `shape.move(to: ${a})`;
};

// convertLine :: String -> String
const convertLine = (a) => {
	return `shape.addLine(to: ${a})`;
};

// convertCubicCurve :: Object -> String
const convertCubicCurveU = (a) => {
	const anchorPoint = pipe(
		converge(pair, [prop("x"), prop("y")]),
		convertXY,
		cgPoint
	)(a);
	const controlPointOne = pipe(
		converge(pair, [prop("cp1x"), prop("cp1y")]),
		convertXY,
		cgPoint
	)(a);
	const controlPointTwo = pipe(
		converge(pair, [prop("cp2x"), prop("cp2y")]),
		convertXY,
		cgPoint
	)(a);

	return `shape.addCurve(to: ${anchorPoint}, controlPoint1: ${controlPointOne}, controlPoint2: ${controlPointTwo})`;
};

// convertCubicCurve :: Object -> String
const convertCubicCurve = (a) => {
	const anchorPoint = pipe(
		converge(pair, [prop("x"), prop("y")]),
		convertXY,
		cgPoint
	)(a);
	const controlPointOne = pipe(
		converge(pair, [prop("cp1x"), prop("cp1y")]),
		convertXY,
		cgPoint
	)(a);
	const controlPointTwo = pipe(
		converge(pair, [prop("cp2x"), prop("cp2y")]),
		convertXY,
		cgPoint
	)(a);

	return `shape.addCurve(to: ${anchorPoint}, control1: ${controlPointOne}, control2: ${controlPointTwo})`;
};

// convertQuadraticCurve :: Object -> String
const convertQuadraticCurve = (a) => {
	const anchorPoint = pipe(
		converge(pair, [prop("x"), prop("y")]),
		convertXY,
		cgPoint
	)(a);
	const controlPoint = pipe(
		converge(pair, [prop("cpx"), prop("cpy")]),
		convertXY,
		cgPoint
	)(a);

	return `shape.addCurve(to: ${anchorPoint}, controlPoint: ${controlPoint})`;
};

// convertArc :: Object -> String
const convertArc = (a) => {
	const anchor = pipe(
		converge(pair, [prop("x"), prop("y")]),
		convertXY,
		cgPoint
	)(a);
	const radius = pipe(
		converge(pair, [prop("rx"), prop("ry")]),
		convertXY,
		cgPoint
	)(a);
	const clockwise = prop("cw", a);
	const startAngle = 0;
	const endAngle = 360;

	return `shape.addArc(withCenter: ${anchor}, radius: ${radius}, startAngle: ${startAngle}, endAngle: ${endAngle}, clockwise: ${clockwise})`;
};

// processPathData :: Array (Array (Number | String)) -> String
const processPathData = (a) => {
	switch (head(a)) {
		case "v":
			return pipe(
				drop(1),
				prepend(0),
				convertXY,
				dispatch(SET_RELATIVE),
				cgPoint,
				convertLine
			)(a);
		case "V":
			return pipe(
				drop(1),
				prepend(null),
				convertXY,
				dispatch(SET_ABSOLUTE),
				cgPoint,
				convertLine
			)(a);
		case "h":
			return pipe(
				drop(1),
				append(0),
				convertXY,
				dispatch(SET_RELATIVE),
				cgPoint,
				convertLine
			)(a);
		case "H":
			return pipe(
				drop(1),
				append(null),
				convertXY,
				dispatch(SET_ABSOLUTE),
				cgPoint,
				convertLine
			)(a);
		case "M":
			return pipe(
				drop(1),
				convertXY,
				dispatch(SET_ABSOLUTE),
				cgPoint,
				convertMove
			)(a);
		case "l":
			return pipe(
				drop(1),
				convertXY,
				dispatch(SET_RELATIVE),
				cgPoint,
				convertLine
			)(a);
		case "L":
			return pipe(
				drop(1),
				convertXY,
				dispatch(SET_ABSOLUTE),
				cgPoint,
				convertLine
			)(a);
		case "c":
			return pipe(
				drop(1),
				convertCCXY,
				converge(merge, [identity, dispatch(SET_RELATIVE)]),
				convertCubicCurve
			)(a);
		case "C":
			return pipe(
				drop(1),
				convertCCXY,
				converge(merge, [identity, dispatch(SET_ABSOLUTE)]),
				convertCubicCurve
			)(a);
		case "q":
			return pipe(
				drop(1),
				convertQCXY,
				converge(merge, [identity, dispatch(SET_RELATIVE)]),
				convertQuadraticCurve
			)(a);
		case "Q":
			return pipe(
				drop(1),
				convertQCXY,
				converge(merge, [identity, dispatch(SET_ABSOLUTE)]),
				convertQuadraticCurve
			)(a);
		case "A":
			return pipe(
				drop(1),
				convertArcXY,
				converge(merge, [identity, dispatch(SET_ABSOLUTE)]),
				convertArc
			)(a);
		case "Z":
			return undefined;
		default:
			return `// SVG parsing for ${head(a)} data isn't supported yet`;
	}
};

// convertPoints :: Array (Array (Number | String)) -> Array String
const convertPoints = (a) => {
	return a.map(processPathData);
};

const getPathsByAttribute = (svgText) => {
	const parser = new DOMParser();
	const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
	const pathElements = svgDoc.querySelectorAll(`path[d]`);
	return Array.from(pathElements);
};

// swiftvg :: String -> Array String
module.exports = (pathData, mode) => {
	let allPaths = getPathsByAttribute(pathData);

	const processedResults = R.addIndex(R.map)((pathNode, index) => {
		const dAttribute = pathNode.getAttribute("d");

		const pathDrawing = pipe(
			parse,
			convertPoints,
			R.reject(R.isNil)
		)(dAttribute).map((line) => "        " + line);

		return pipe(prepend(beginShape(index)), append(endShape))(pathDrawing);
	}, allPaths);

	return processedResults.map((e) => e.join("\n"));
};

module.exports.SET_ABSOLUTE = SET_ABSOLUTE;
module.exports.SET_RELATIVE = SET_RELATIVE;
module.exports.initialState = initialState;
module.exports.reducer = reducer;
module.exports.dispatch = dispatch;
module.exports.roundFloat = roundFloat;
module.exports.cgPoint = cgPoint;
module.exports.beginShape = beginShape;
module.exports.endShape = endShape;
module.exports.convertXY = convertXY;
module.exports.convertCCXY = convertCCXY;
module.exports.convertQCXY = convertQCXY;
module.exports.convertArcXY = convertArcXY;
module.exports.convertMove = convertMove;
module.exports.convertLine = convertLine;
module.exports.convertCubicCurve = convertCubicCurve;
module.exports.convertQuadraticCurve = convertQuadraticCurve;
module.exports.convertArc = convertArc;
module.exports.processPathData = processPathData;
module.exports.convertPoints = convertPoints;