expose editable rendered result in public api

Author: g-harel

index.ts

@@ -4,7 +4,8 @@ import {rand} from "./internal/math/rand";
 import {Point} from "./internal/math/geometry";
 import {rad} from "./internal/math/unit";
 import {smooth} from "./internal/svg/smooth";
-import {render} from "./internal/svg/render";
+import {renderEditable} from "./internal/svg/render";
+import {XmlElement} from "./internal/xml";
 
 export interface BlobOptions {
     // Bounding box dimensions.
@@ -34,8 +35,14 @@ export interface BlobOptions {
     guides?: boolean;
 }
 
-// Generates a random rounded shape.
+// Generates an svg document string containing a randomized rounded shape.
 const blobs = (opt: BlobOptions): string => {
+    return editable(opt).render();
+};
+
+// Generates an editable data structure which can be rendered to an svg document
+// containing a randomized rounded shape.
+export const editable = (opt: BlobOptions): XmlElement => {
     // Random number generator.
     const rgen = rand(opt.seed || String(Date.now()));
 
@@ -74,7 +81,7 @@ const blobs = (opt: BlobOptions): string => {
         strength: ((4 / 3) * Math.tan(rad(angle / 4))) / Math.sin(rad(angle / 2)),
     });
 
-    return render(smoothed, {
+    return renderEditable(smoothed, {
         closed: true,
         width: opt.size,
         height: opt.size,
@@ -87,3 +94,4 @@ const blobs = (opt: BlobOptions): string => {
 };
 
 export default blobs;
+export {IXml, XmlElement} from "./internal/xml";

internal/svg/render.ts

@@ -1,6 +1,6 @@
 import {loopAccess} from "./util";
 import {Point, interpolate} from "./point";
-import {xml} from "../xml";
+import {xml, XmlElement} from "../xml";
 
 export interface RenderOptions {
     // Viewport size.
@@ -24,8 +24,9 @@ export interface RenderOptions {
     boundingBox?: boolean;
 }
 
-// Renders a shape made up of the input points.
-export const render = (p: Point[], opt: RenderOptions): string => {
+// Renders a shape made up of the input points to an editable data structure
+// which can be rendered to svg.
+export const renderEditable = (p: Point[], opt: RenderOptions): XmlElement => {
     const points = p.map((point) => interpolate(point, opt.height));
 
     // Compute guides from input point data.
@@ -49,8 +50,8 @@ export const render = (p: Point[], opt: RenderOptions): string => {
         });
     }
 
-    // Render path data attribute from points and handles. Must loop more times than the
-    // number of points in order to correctly close the path.
+    // Render path data attribute from points and handles. Must loop more times
+    // than the number of points in order to correctly close the path.
     let path = "";
     for (let i = 0; i <= points.length; i++) {
         const point = loopAccess(points)(i);
@@ -155,5 +156,5 @@ export const render = (p: Point[], opt: RenderOptions): string => {
         }
     }
 
-    return xmlRoot.render();
+    return xmlRoot;
 };

testing/blobs.test.ts

@@ -1,4 +1,4 @@
-import blobs, {BlobOptions} from "..";
+import blobs, {BlobOptions, editable} from "..";
 
 const genMinimalOptions = (): BlobOptions => ({
     size: 1000 * Math.random(),
@@ -63,3 +63,16 @@ describe("blobs", () => {
         expect(() => blobs(options)).toThrow("color");
     });
 });
+
+describe("editable", () => {
+    it("should reflect changes when edited", () => {
+        const options = genMinimalOptions();
+
+        const out = editable(options);
+        const initial = out.render();
+        out.attributes.id = "test";
+        const modified = out.render();
+
+        expect(modified).not.toBe(initial);
+    });
+});