Implement code builder

_includes/footer.html

@@ -1,7 +1,11 @@
 <footer>
-	<span>&copy; 2023 Mike Engel & Roger Lee</span>
 	<span
-		><a
+		>&copy; 2023
+		<a href="https://github.com/mike-engel" target="_blank">Mike Engel</a> &
+		<a href="https://github.com/rijieli" target="_blank">Roger Lee</a>
+	</span>
+	<span>
+		<a
 			href="https://github.com/mike-engel/swiftvg/tree/master/LICENSE.md"
 			target="_blank"
 			>MIT</a

_sass/theme.scss

@@ -101,8 +101,8 @@ svg {
     color: #000;
     display: block;
     font-family: monospace;
-    font-size: 1rem;
-    font-weight: 600;
+    font-size: 0.8rem;
+    font-weight: 500;
     height: 50vh;
     line-height: 1.4;
     max-height: 300px;

index.html

@@ -52,8 +52,14 @@ <h2 class="h3">
 					class="input"
 					data-hook="input"
 					placeholder="Your `SVG` string goes here."
+					spellcheck="false"
+				></textarea>
+				<textarea
+					class="output"
+					data-hook="output"
+					spellcheck="false"
+					readonly
 				></textarea>
-				<textarea class="output" data-hook="output" readonly></textarea>
 			</section>
 			{% include footer.html %}
 		</main>

index.js

@@ -104,10 +104,20 @@ const convertArcXY = (a) => {
 };
 
 // beginShape :: Nothing -> String
-const beginShape = always("let shape = UIBezierPath()");
+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.close()";
+const endShape = `        shape.closeSubpath()
+        return shape
+    }\n}`;
 
 // cgPoint :: Object -> String
 const cgPoint = (a) => {
@@ -121,11 +131,11 @@ const convertMove = (a) => {
 
 // convertLine :: String -> String
 const convertLine = (a) => {
-	return `\nshape.addLine(to: ${a})`;
+	return `shape.addLine(to: ${a})`;
 };
 
 // convertCubicCurve :: Object -> String
-const convertCubicCurve = (a) => {
+const convertCubicCurveU = (a) => {
 	const anchorPoint = pipe(
 		converge(pair, [prop("x"), prop("y")]),
 		convertXY,
@@ -145,6 +155,27 @@ const convertCubicCurve = (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(
@@ -279,9 +310,9 @@ const processPathData = (a) => {
 				convertArc
 			)(a);
 		case "Z":
-			return endShape;
+			return undefined;
 		default:
-			return `SVG parsing for ${head(a)} data isn't supported yet`;
+			return `// SVG parsing for ${head(a)} data isn't supported yet`;
 	}
 };
 
@@ -300,13 +331,19 @@ const getPathsByAttribute = (svgText) => {
 // swiftvg :: String -> Array String
 module.exports = (pathData, mode) => {
 	let allPaths = getPathsByAttribute(pathData);
-	// Use R.map to transform the 'd' attribute of each path
-	const processedResults = R.map((pathNode) => {
+
+	const processedResults = R.addIndex(R.map)((pathNode, index) => {
 		const dAttribute = pathNode.getAttribute("d");
-		return pipe(parse, convertPoints, prepend(beginShape()))(dAttribute);
+
+		const pathDrawing = pipe(
+			parse,
+			convertPoints,
+			R.reject(R.isNil)
+		)(dAttribute).map((line) => "        " + line);
+
+		return pipe(prepend(beginShape(index)), append(endShape))(pathDrawing);
 	}, allPaths);
-	processedResults.map((e) => e.join("\n\n")).map((e) => console.log(e));
-	// Return the processed results
+
 	return processedResults.map((e) => e.join("\n"));
 };
 

site/main.js

@@ -24,7 +24,26 @@ const updateShape = (evt) => {
 	}
 };
 
-inputEl.value = `<svg t="1697965384192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3814" width="200" height="200"><path d="M339.724315 4.592091a34.099379 34.099379 0 0 1 34.192462 0l291.597781 169.007567c10.549398 6.143473 17.096231 17.468563 17.096231 29.724481v338.015134c0 12.255919-6.515805 23.581008-17.096231 29.724481l-291.597781 169.007567a34.099379 34.099379 0 0 1-34.192462 0L48.095506 571.063754A34.3476 34.3476 0 0 1 31.030303 541.339273V203.324139c0-12.255919 6.515805-23.581008 17.096231-29.724481L339.755343 4.592091z" fill="#C1D0FF" p-id="3815"></path><path d="M745.255598 97.085492a29.879619 29.879619 0 0 1 29.848592 0l202.858725 116.974211A29.786536 29.786536 0 0 1 992.88721 239.843674v233.948422a29.786536 29.786536 0 0 1-14.924295 25.814998l-202.858725 116.974211a29.910647 29.910647 0 0 1-29.848592 0l-202.858724-116.974211A29.786536 29.786536 0 0 1 527.472578 473.792096V239.843674a29.786536 29.786536 0 0 1 14.924296-25.814998l202.858724-116.974211zM513.510139 531.224262a27.707684 27.707684 0 0 1 27.924878 0l189.268617 110.086074c8.656712 5.026478 13.962439 14.272715 13.962439 24.294644v220.172149a28.080016 28.080016 0 0 1-13.962439 24.294644l-189.268617 110.086074a27.676657 27.676657 0 0 1-27.893851 0L324.210494 910.040745A28.080016 28.080016 0 0 1 310.279083 885.777129v-220.172149c0-10.021928 5.305727-19.299193 13.931411-24.294644l189.330672-110.086074z" fill="#0F62FE" p-id="3816"></path><path d="M339.724315 4.592091a34.099379 34.099379 0 0 1 34.192462 0l291.597781 169.007567c10.549398 6.143473 17.096231 17.468563 17.096231 29.724481v338.015134c0 12.255919-6.515805 23.581008-17.096231 29.724481l-291.597781 169.007567a34.099379 34.099379 0 0 1-34.192462 0L48.095506 571.063754A34.3476 34.3476 0 0 1 31.030303 541.339273V203.324139c0-12.255919 6.515805-23.581008 17.096231-29.724481L339.755343 4.592091z" fill="#E8E8E8" fill-opacity=".1" p-id="3817"></path><path d="M648.418327 203.324139v338.015134L356.820546 710.34684l-291.597781-169.007567V203.324139L356.820546 34.316572l291.597781 169.007567zM373.885749 4.592091a34.099379 34.099379 0 0 0-34.192462 0L48.095506 173.599658A34.3476 34.3476 0 0 0 31.030303 203.324139v338.015134c0 12.255919 6.515805 23.581008 17.096231 29.724481l291.597781 169.007567c10.549398 6.112446 23.612036 6.112446 34.192462 0l291.597781-169.007567c10.549398-6.143473 17.096231-17.468563 17.096231-29.724481V203.324139c0-12.255919-6.515805-23.581008-17.096231-29.724481L373.885749 4.592091z" fill="#FFFFFF" fill-opacity=".6" p-id="3818"></path><path d="M339.2589 171.831082a17.592673 17.592673 0 0 1 35.123291 0l18.616586 194.450234c0.52747 5.274699 3.16482 10.083984 7.260468 13.186748l150.763313 114.181723c17.251369 13.093665 1.830631 41.204709-17.561645 32.020527l-169.410927-80.268511a16.879037 16.879037 0 0 0-14.489908 0l-169.379899 80.268511c-19.392276 9.184182-34.813015-18.926862-17.561646-32.020527L313.381847 379.468064a18.771724 18.771724 0 0 0 7.260468-13.186748l18.616585-194.450234z" fill="#FFFFFF" p-id="3819"></path></svg>`;
-
 buttonShape.addEventListener("click", updateShape);
 buttonPath.addEventListener("click", updatePath);
+
+inputEl.value = `<svg width="26" height="7" viewBox="0 0 26 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 3V0H0V3H6.45454C7.74219 3 8.95469 3.60625 9.72727 4.63636C11.3636 6.81818 14.6364 6.81818 16.2727 4.63636C17.0453 3.60625 18.2578 3 19.5455 3H26Z" fill="#D9D9D9"/>
+</svg>`;
+
+outputEl.value = `struct SVGShape0: Shape {
+    func path(in rect: CGRect) -> Path {
+        var shape = Path()
+        shape.move(to: CGPoint(x: 26, y: 3))
+        shape.addLine(to: CGPoint(x: 0, y: 0))
+        shape.addLine(to: CGPoint(x: 0, y: 0))
+        shape.addLine(to: CGPoint(x: 0, y: 3))
+        shape.addLine(to: CGPoint(x: 6.45, y: 0))
+        shape.addCurve(to: CGPoint(x: 9.73, y: 4.64), control1: CGPoint(x: 7.74, y: 3), control2: CGPoint(x: 8.95, y: 3.61))
+        shape.addCurve(to: CGPoint(x: 16.27, y: 4.64), control1: CGPoint(x: 11.36, y: 6.82), control2: CGPoint(x: 14.64, y: 6.82))
+        shape.addCurve(to: CGPoint(x: 19.55, y: 3), control1: CGPoint(x: 17.05, y: 3.61), control2: CGPoint(x: 18.26, y: 3))
+        shape.addLine(to: CGPoint(x: 26, y: 0))
+        shape.closeSubpath()
+        return shape
+    }
+}`;