export func to generate the svg's path directly

Author: g-harel

internal/render/svg.ts

@@ -24,11 +24,7 @@ export interface RenderOptions {
     boundingBox?: boolean;
 }
 
-// TODO render path only
-
-// Renders a shape made up of the input points to an editable data structure
-// which can be rendered to svg.
-export const renderEditable = (shape: Shape, opt: RenderOptions): XmlElement => {
+export const renderPath = (shape: Shape): string => {
     // Render path data attribute from points and handles.
     let path = `M${shape[0].x},${shape[0].y}`;
     forShape(shape, ({curr, next: getNext}) => {
@@ -37,7 +33,12 @@ export const renderEditable = (shape: Shape, opt: RenderOptions): XmlElement =>
         const nextControl = expandHandle(next, next.handleIn);
         path += `C${currControl.x},${currControl.y},${nextControl.x},${nextControl.y},${next.x},${next.y}`;
     });
+    return path;
+};
 
+// Renders a shape made up of the input points to an editable data structure
+// which can be rendered to svg.
+export const renderEditable = (shape: Shape, opt: RenderOptions): XmlElement => {
     const stroke = opt.stroke || (opt.guides ? "black" : "none");
     const strokeWidth = opt.strokeWidth || (opt.guides ? 1 : 0);
 
@@ -54,7 +55,7 @@ export const renderEditable = (shape: Shape, opt: RenderOptions): XmlElement =>
     xmlBlobPath.attributes.stroke = stroke;
     xmlBlobPath.attributes["stroke-width"] = strokeWidth;
     xmlBlobPath.attributes.fill = opt.fill || "none";
-    xmlBlobPath.attributes.d = path;
+    xmlBlobPath.attributes.d = renderPath(shape);
 
     xmlContentGroup.children.push(xmlBlobPath);
     xmlRoot.children.push(xmlContentGroup);