🚧 Fixing prototype issues

package.json

@@ -51,6 +51,7 @@
     "mocha": "^5.2.0",
     "prettier": "^1.13.7",
     "rimraf": "^2.6.2",
+    "rollup": "0.63.4",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-filesize": "^4.0.1",

src/attributes.js

@@ -1,52 +1,51 @@
 function attributes(init = false) {
+  this.list = {};
   if (init) {
     for (let key in init) {
       let val = init[key];
       this.add(key, val);
     }
   }
-
-  /** Adds an attribute */
-  this.prototype.add = function(name, value) {
-    if (typeof this.list[name] === "undefined") {
-      this.list[name] = [];
-    }
-    this.list[name].push(value);
-
-    return this;
-  };
-
-  /** Retrieves an attribute */
-  this.prototype.get = function(name) {
-    if (typeof this.list[name] === "undefined") return false;
-    else return this.list[name].join(" ");
-  };
-
-  /** Returns SVG code for attributes */
-  this.prototype.render = function() {
-    let svg = "";
-    for (let key in this.list) {
-      svg += ` ${key}="${this.list[key].join(" ")}"`;
-    }
-
-    return svg;
-  };
-
-  /** Returns SVG code for attributes with a fiven prefix
-   * typically used for data-text*/
-  this.prototype.renderIfPrefixIs = function(prefix = "") {
-    let svg = "";
-    let prefixLen = prefix.length;
-    for (let key in this.list) {
-      if (key.substr(0, prefixLen) === prefix) {
-        svg += ` ${key.substr(prefixLen)}="${this.list[key].join(" ")}"`;
-      }
-    }
-
-    return svg;
-  };
-
-  return this;
 }
 
+/** Adds an attribute */
+attributes.prototype.add = function(name, value) {
+  if (typeof this.list[name] === "undefined") {
+    this.list[name] = [];
+  }
+  this.list[name].push(value);
+
+  return this;
+};
+
+/** Retrieves an attribute */
+attributes.prototype.get = function(name) {
+  if (typeof this.list[name] === "undefined") return false;
+  else return this.list[name].join(" ");
+};
+
+/** Returns SVG code for attributes */
+attributes.prototype.render = function() {
+  let svg = "";
+  for (let key in this.list) {
+    svg += ` ${key}="${this.list[key].join(" ")}"`;
+  }
+
+  return svg;
+};
+
+/** Returns SVG code for attributes with a fiven prefix
+ * typically used for data-text*/
+attributes.prototype.renderIfPrefixIs = function(prefix = "") {
+  let svg = "";
+  let prefixLen = prefix.length;
+  for (let key in this.list) {
+    if (key.substr(0, prefixLen) === prefix) {
+      svg += ` ${key.substr(prefixLen)}="${this.list[key].join(" ")}"`;
+    }
+  }
+
+  return svg;
+};
+
 export default attributes;

src/hooks.js

@@ -1,19 +1,19 @@
 export default function hooks() {
   this._hooks = {};
   this.all = ["preRenderSvg", "postRenderSvg", "insertText"];
-
-  this.prototype.list = function(hook) {
-    if (typeof this._hooks[hook] === "undefined") {
-      return false;
-    }
-
-    return this._hooks[hook];
-  };
-
-  this.prototype.attach = function(hook, obj) {
-    if (typeof this._hooks[hook] === "undefined") return;
-    for (let func of this._hooks[hook]) {
-      obj.pre(hook, func);
-    }
-  };
 }
+
+hooks.prototype.list = function(hook) {
+  if (typeof this._hooks[hook] === "undefined") {
+    return false;
+  }
+
+  return this._hooks[hook];
+};
+
+hooks.prototype.attach = function(hook, obj) {
+  if (typeof this._hooks[hook] === "undefined") return;
+  for (let func of this._hooks[hook]) {
+    obj.pre(hook, func);
+  }
+};

src/part.js

@@ -1,9 +1,10 @@
 import { macroName } from "./utils";
 import point from "./point";
+import attributes from "./attributes";
 import * as hooklib from "hooks";
 
 function part(id) {
-  this.attributes = new Attributes();
+  this.attributes = new attributes();
   this.points = {};
   this.paths = {};
   this.snippets = {};
@@ -12,20 +13,20 @@ function part(id) {
   this.points.origin = new point(0, 0);
   for (let k in hooklib) this[k] = hooklib[k];
 
-  this.prototype.macroRunner = function(args) {
-    let self = this;
-    let data = args;
-    let method = function(key, data) {
-      let macro = macroName(key);
-      if (typeof self[macro] === "function") {
-        self[macro](data);
-      }
-    };
-
-    return method;
-  };
-
   return this;
 }
 
+part.prototype.macroRunner = function(args) {
+  let self = this;
+  let data = args;
+  let method = function(key, data) {
+    let macro = macroName(key);
+    if (typeof self[macro] === "function") {
+      self[macro](data);
+    }
+  };
+
+  return method;
+};
+
 export default part;

src/path.js

@@ -3,71 +3,69 @@ import attributes from "./attributes";
 function path() {
   this.render = true;
   this.attributes = new attributes();
-
-  /** Adds a move operation to Point to */
-  this.prototype.move = function(to) {
-    this.ops.push({ type: "move", to });
-
-    return this;
-  };
-
-  /** Adds a line operation to Point to */
-  this.prototype.line = function(to) {
-    this.ops.push({ type: "line", to });
-
-    return this;
-  };
-
-  /** Adds a line operation to Point to */
-  this.prototype.curve = function(cp1, cp2, to) {
-    this.ops.push({ type: "curve", cp1, cp2, to });
-
-    return this;
-  };
-
-  /** Adds a close operation */
-  this.prototype.close = function() {
-    this.ops.push({ type: "close" });
-
-    return this;
-  };
-
-  /** Adds an attribute. This is here to make this call chainable in assignment */
-  this.prototype.attr = function(name, value) {
-    this.attributes.add(name, value);
-
-    return this;
-  };
-
-  /** Returns SVG pathstring for this path */
-  this.prototype.asPathstring = function() {
-    let d = "";
-    for (let op of this.ops) {
-      switch (op.type) {
-        case "move":
-          d += `M ${op.to.x},${op.to.y}`;
-          break;
-        case "line":
-          d += ` L ${op.to.x},${op.to.y}`;
-          break;
-        case "curve":
-          d += ` C ${op.cp1.x},${op.cp1.y} ${op.cp2.x},${op.cp2.y} ${op.to.x},${
-            op.to.y
-          }`;
-          break;
-        case "close":
-          d += " z";
-          break;
-        default:
-          throw `${op.type} is not a valid path command`;
-          break;
-      }
-    }
-
-    return d;
-  };
-
-  return this;
 }
 
+/** Adds a move operation to Point to */
+path.prototype.move = function(to) {
+  this.ops.push({ type: "move", to });
+
+  return this;
+};
+
+/** Adds a line operation to Point to */
+path.prototype.line = function(to) {
+  this.ops.push({ type: "line", to });
+
+  return this;
+};
+
+/** Adds a line operation to Point to */
+path.prototype.curve = function(cp1, cp2, to) {
+  this.ops.push({ type: "curve", cp1, cp2, to });
+
+  return this;
+};
+
+/** Adds a close operation */
+path.prototype.close = function() {
+  this.ops.push({ type: "close" });
+
+  return this;
+};
+
+/** Adds an attribute. This is here to make this call chainable in assignment */
+path.prototype.attr = function(name, value) {
+  this.attributes.add(name, value);
+
+  return this;
+};
+
+/** Returns SVG pathstring for this path */
+path.prototype.asPathstring = function() {
+  let d = "";
+  for (let op of this.ops) {
+    switch (op.type) {
+      case "move":
+        d += `M ${op.to.x},${op.to.y}`;
+        break;
+      case "line":
+        d += ` L ${op.to.x},${op.to.y}`;
+        break;
+      case "curve":
+        d += ` C ${op.cp1.x},${op.cp1.y} ${op.cp2.x},${op.cp2.y} ${op.to.x},${
+          op.to.y
+        }`;
+        break;
+      case "close":
+        d += " z";
+        break;
+      default:
+        throw `${op.type} is not a valid path command`;
+        break;
+    }
+  }
+
+  return d;
+};
+
 export default path;

src/pattern.js

@@ -1,5 +1,8 @@
 import { macroName } from "./utils";
 import part from "./part";
+import point from "./point";
+import path from "./path";
+import snippet from "./snippet";
 import svg from "./svg";
 import hooks from "./hooks";
 
@@ -52,64 +55,61 @@ export default function pattern(config = false) {
     values: this.values,
     config: this.config
   };
+}
 
-  /**
+/**
-   * @throws Will throw an error when called
+ * @throws Will throw an error when called
-   */
+ */
-  this.prototype.draft = function() {
+pattern.prototype.draft = function() {
-    throw Error(
+  throw Error(
-      "You have to implement the draft() method in your Pattern instance."
+    "You have to implement the draft() method in your Pattern instance."
-    );
+  );
-  };
+};
 
-  this.prototype.render = function() {
+pattern.prototype.render = function() {
-    this.hooks.attach("preRenderSvg", this.svg);
+  this.hooks.attach("preRenderSvg", this.svg);
-    this.hooks.attach("postRenderSvg", this.svg);
+  this.hooks.attach("postRenderSvg", this.svg);
-    //this.hooks.attach('insertText', this.svg);
+  //this.hooks.attach('insertText', this.svg);
 
-    return this.svg.render(this);
+  return this.svg.render(this);
-  };
+};
 
-  this.prototype.on = function(hook, method) {
+pattern.prototype.on = function(hook, method) {
-    if (typeof this.hooks._hooks[hook] === "undefined") {
+  if (typeof this.hooks._hooks[hook] === "undefined") {
-      this.hooks._hooks[hook] = [];
+    this.hooks._hooks[hook] = [];
-    }
-    this.hooks._hooks[hook].push(method);
-  };
-
-  this.prototype.macro = function(key, method) {
-    let name = macroName(key);
-    this.on(name, method);
-    for (let partId in this.parts) {
-      let part = this.parts[partId];
-      part[name] = () => null;
-      this.hooks.attach(name, part);
-    }
-  };
-
-  this.prototype.withPlugin(plugin);
-  {
-    if (plugin.hooks) this.loadPluginHooks(plugin);
-    if (plugin.macros) this.loadPluginMacros(plugin);
-
-    return this;
   }
+  this.hooks._hooks[hook].push(method);
+};
 
-  this.prototype.loadPluginHooks = function(plugin) {
+pattern.prototype.macro = function(key, method) {
-    for (let hook of this.hooks.all) {
+  let name = macroName(key);
-      if (typeof plugin.hooks[hook] === "function") {
+  this.on(name, method);
-        this.on(hook, plugin.hooks[hook]);
+  for (let partId in this.parts) {
-      }
+    let part = this.parts[partId];
-    }
+    part[name] = () => null;
-  };
+    this.hooks.attach(name, part);
+  }
+};
 
-  this.prototype.loadPluginMacros = function(plugin) {
+pattern.prototype.withPlugin = function(plugin) {
-    for (let macro in plugin.macros) {
+  if (plugin.hooks) this.loadPluginHooks(plugin);
-      if (typeof plugin.macros[macro] === "function") {
+  if (plugin.macros) this.loadPluginMacros(plugin);
-        this.macro(macro, plugin.macros[macro]);
-      }
-    }
-  };
 
   return this;
-}
+};
+
+pattern.prototype.loadPluginHooks = function(plugin) {
+  for (let hook of this.hooks.all) {
+    if (typeof plugin.hooks[hook] === "function") {
+      this.on(hook, plugin.hooks[hook]);
+    }
+  }
+};
+
+pattern.prototype.loadPluginMacros = function(plugin) {
+  for (let macro in plugin.macros) {
+    if (typeof plugin.macros[macro] === "function") {
+      this.macro(macro, plugin.macros[macro]);
+    }
+  }
+};

src/point.js

@@ -4,115 +4,112 @@ function point(x, y) {
   this.x = this.round(x);
   this.y = this.round(y);
   this.attributes = new attributes();
-
-  /** Rounds a value to PRECISION */
-  this.prototype.round = function(value) {
-    return Math.round(value * 1e2) / 1e2;
-  };
-
-  /** Radians to degrees */
-  this.prototype.rad2deg = function(radians) {
-    return radians * 57.29577951308232;
-  };
-
-  /** Degrees to radians */
-  this.prototype.deg2rad(degrees);
-  {
-    return degrees / 57.29577951308232;
-  }
-
-  /** Adds an attribute. This is here to make this call chainable in assignment */
-  this.prototype.attr = function(name, value) {
-    this.attributes.add(name, value);
-
-    return this;
-  };
-
-  /** Returns the distance between this point and that point */
-  this.prototype.dist = function(that) {
-    let dx = this.x - that.x;
-    let dy = this.y - that.y;
-
-    return this.round(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)));
-  };
-
-  /** Returns slope of a line made by this point and that point */
-  this.prototype.slope = function(that) {
-    return (that.y - this.y) / (that.x - this.x);
-  };
-
-  /** Returns the x-delta between this point and that point */
-  this.prototype.dx = function(that) {
-    return that.x - this.x;
-  };
-
-  /** Returns the y-delta between this point and that point */
-  this.prototype.dy = function(that) {
-    return that.y - this.y;
-  };
-
-  /** Returns the angle between this point and that point */
-  this.prototype.angle = function(that) {
-    let rad = Math.atan2(-1 * this.dy(that), this.dx(that));
-    while (rad < 0) rad += 2 * Math.PI;
-
-    return this.rad2deg(rad);
-  };
-
-  /** Rotate this point deg around that point */
-  this.prototype.rotate = function(deg, that) {
-    let radius = this.dist(that);
-    let angle = this.angle(that);
-    let x = that.x + radius * Math.cos(this.deg2rad(angle + deg)) * -1;
-    let y = that.y + radius * Math.sin(this.deg2rad(angle + deg));
-
-    return new Point(x, y);
-  };
-
-  /** returns an identical copy of this point */
-  this.prototype.copy = function() {
-    return new Point(this.x, this.y);
-  };
-
-  /** checks whether this point is equal to that point */
-  this.prototype.equals = function(that) {
-    return this.x === that.x && this.y === that.y ? true : false;
-  };
-
-  /** Mirrors this point around X value of that point */
-  this.prototype.flipX = function(that) {
-    return new Point(that.x + this.dx(that), that.y);
-  };
-
-  /** Mirrors this point around Y value of that point */
-  this.prototype.flipY = function(that) {
-    return new Point(that.x, that.y + this.dy(that));
-  };
-
-  /** Shifts this point distance in the deg direction */
-  this.prototype.shift = function(deg, distance) {
-    let p = this.copy();
-    p.x += distance;
-
-    return p.rotate(deg, this);
-  };
-
-  /** Shifts this point distance in the direction of that point */
-  this.prototype.shiftTowards = function(that, distance) {
-    return this.shift(this.angle(that), distance);
-  };
-
-  /** Shifts this point fraction of the distance towards that point */
-  this.prototype.shiftFractionTowards = function(that, fraction) {
-    return this.shiftTowards(that, this.dist(that) * fraction);
-  };
-
-  /** Shifts this point distance beyond that point */
-  this.prototype.shiftOutwards = function(that, distance) {
-    return this.shiftTowards(that, this.dist(that) + distance);
-  };
-
-  return this;
 }
 
+/** Rounds a value to PRECISION */
+point.prototype.round = function(value) {
+  return Math.round(value * 1e2) / 1e2;
+};
+
+/** Radians to degrees */
+point.prototype.rad2deg = function(radians) {
+  return radians * 57.29577951308232;
+};
+
+/** Degrees to radians */
+point.prototype.deg2rad = function(degrees) {
+  return degrees / 57.29577951308232;
+};
+
+/** Adds an attribute. This is here to make this call chainable in assignment */
+point.prototype.attr = function(name, value) {
+  this.attributes.add(name, value);
+
+  return this;
+};
+
+/** Returns the distance between this point and that point */
+point.prototype.dist = function(that) {
+  let dx = this.x - that.x;
+  let dy = this.y - that.y;
+
+  return this.round(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)));
+};
+
+/** Returns slope of a line made by this point and that point */
+point.prototype.slope = function(that) {
+  return (that.y - this.y) / (that.x - this.x);
+};
+
+/** Returns the x-delta between this point and that point */
+point.prototype.dx = function(that) {
+  return that.x - this.x;
+};
+
+/** Returns the y-delta between this point and that point */
+point.prototype.dy = function(that) {
+  return that.y - this.y;
+};
+
+/** Returns the angle between this point and that point */
+point.prototype.angle = function(that) {
+  let rad = Math.atan2(-1 * this.dy(that), this.dx(that));
+  while (rad < 0) rad += 2 * Math.PI;
+
+  return this.rad2deg(rad);
+};
+
+/** Rotate this point deg around that point */
+point.prototype.rotate = function(deg, that) {
+  let radius = this.dist(that);
+  let angle = this.angle(that);
+  let x = that.x + radius * Math.cos(this.deg2rad(angle + deg)) * -1;
+  let y = that.y + radius * Math.sin(this.deg2rad(angle + deg));
+
+  return new Point(x, y);
+};
+
+/** returns an identical copy of this point */
+point.prototype.copy = function() {
+  return new Point(this.x, this.y);
+};
+
+/** checks whether this point is equal to that point */
+point.prototype.equals = function(that) {
+  return this.x === that.x && this.y === that.y ? true : false;
+};
+
+/** Mirrors this point around X value of that point */
+point.prototype.flipX = function(that) {
+  return new Point(that.x + this.dx(that), that.y);
+};
+
+/** Mirrors this point around Y value of that point */
+point.prototype.flipY = function(that) {
+  return new Point(that.x, that.y + this.dy(that));
+};
+
+/** Shifts this point distance in the deg direction */
+point.prototype.shift = function(deg, distance) {
+  let p = this.copy();
+  p.x += distance;
+
+  return p.rotate(deg, this);
+};
+
+/** Shifts this point distance in the direction of that point */
+point.prototype.shiftTowards = function(that, distance) {
+  return this.shift(this.angle(that), distance);
+};
+
+/** Shifts this point fraction of the distance towards that point */
+point.prototype.shiftFractionTowards = function(that, fraction) {
+  return this.shiftTowards(that, this.dist(that) * fraction);
+};
+
+/** Shifts this point distance beyond that point */
+point.prototype.shiftOutwards = function(that, distance) {
+  return this.shiftTowards(that, this.dist(that) + distance);
+};
+
 export default point;

src/svg.js

@@ -25,228 +25,225 @@ function svg(pattern) {
   this.hooks = hooks.all;
   for (let k in hooklib) this[k] = hooklib[k];
   for (let k in this.hooks) this.hook(k, this[k]);
-
-  /** Method to attach preRenderSvg hooks on */
-  this.prototype.preRenderSvg = function() {};
-
-  /** Method to attach postRenderSvg hooks on */
-  this.prototype.postRenderSvg = function() {};
-
-  /** Method to attach insertText hooks on */
-  this.prototype.insertText = function() {};
-
-  /** Renders a draft object as SVG */
-  this.prototype.render = function(pattern) {
-    this.preRenderSvg();
-    this.svg = this.prefix;
-    this.svg += this.renderComments(this.header);
-    this.svg += this.renderSvgTag(pattern);
-    this.svg += this.renderStyle();
-    this.svg += this.renderScript();
-    this.svg += this.renderDefs();
-    this.svg += this.openGroup("draftContainer");
-    for (let partId in pattern.parts) {
-      let part = pattern.parts[partId];
-      if (part.render) {
-        this.svg += this.openGroup(part.id, part.attributes);
-        this.svg += this.renderPart(part);
-        this.svg += this.closeGroup();
-      }
-    }
-    this.svg += this.closeGroup();
-    this.svg += this.nl() + "</svg>";
-    this.svg += this.renderComments(this.footer);
-    this.postRenderSvg();
-    return this.svg;
-  };
-
-  /** Returns SVG code for the opening SVG tag */
-  this.prototype.renderSvgTag = funtion(pattern);
-  {
-    let svg = "<svg";
-    this.indent();
-    svg += this.nl() + this.attributes.render();
-    this.outdent();
-    svg += this.nl() + ">" + this.nl();
-
-    return svg;
-  }
-
-  /** Returns SVG code for the style block */
-  this.prototype.renderStyle = function() {
-    let svg = '<style type="text/css"> <![CDATA[ ';
-    this.indent();
-    svg += this.nl() + this.style;
-    this.outdent();
-    svg += this.nl() + "]]>" + this.nl() + "</style>" + this.nl();
-    return svg;
-  };
-
-  /** Returns SVG code for the script block */
-  this.prototype.renderScript = function() {
-    let svg = '<script type="text/javascript"> <![CDATA[';
-    this.indent();
-    svg += this.nl() + this.script;
-    this.outdent();
-    svg += this.nl() + "]]>" + this.nl() + "</script>" + this.nl();
-
-    return svg;
-  };
-
-  /** Returns SVG code for the defs block */
-  this.prototype.renderDefs = function() {
-    let svg = '<defs id="defs">';
-    this.indent();
-    svg += this.nl() + this.defs;
-    this.outdent();
-    svg += this.nl() + "</defs>" + this.nl();
-
-    return svg;
-  };
-
-  /** Returns SVG code for a comment block */
-  this.prototype.renderComments = function(comments) {
-    return (
-      this.nl() + this.nl() + "<!--" + this.nl() + comments + this.nl() + "-->"
-    );
-  };
-
-  /** Returns SVG code for a Part object */
-  this.prototype.renderPart = function(part) {
-    let svg = "";
-    for (let key in part.paths) {
-      let path = part.paths[key];
-      if (path.render) svg += this.renderPath(path);
-    }
-    for (let key in part.points) {
-      if (part.points[key].attributes.get("data-text")) {
-        svg += this.renderPoint(part.points[key]);
-      }
-    }
-    for (let key in part.snippets) {
-      let snippet = part.snippets[key];
-      svg += this.renderSnippet(snippet);
-    }
-
-    return svg;
-  };
-
-  /** Returns SVG code for a Point object */
-  this.prototype.renderPoint = function(point) {
-    let svg = "";
-    if (point.attributes.get("data-text")) svg += this.renderText(point);
-
-    return svg;
-  };
-
-  /** Returns SVG code for a Path object */
-  this.prototype.renderPath = function(path) {
-    if (!path.attributes.get("id")) path.attributes.add("id", this.getUid());
-    path.attributes.add("d", path.asPathstring());
-
-    return `${this.nl()}<path ${path.attributes.render()} />${this.renderPathText(
-      path
-    )}`;
-  };
-
-  this.prototype.renderPathText = function(path) {
-    let text = path.attributes.get("data-text");
-    if (!text) return false;
-    let attributes = path.attributes.renderIfPrefixIs("data-text-");
-    let svg = this.nl() + "<text>";
-    this.indent();
-    svg += `<textPath xlink:href="#${path.attributes.get(
-      "id"
-    )}" startOffset="50%"><tspan ${attributes}>${text}</tspan></textPath>`;
-    this.outdent();
-    svg += this.nl() + "</text>";
-
-    return svg;
-  };
-
-  this.prototype.renderText = function(point) {
-    let text = point.attributes.get("data-text");
-    if (!text) return false;
-
-    point.attributes.add("data-text-x", point.x);
-    point.attributes.add("data-text-y", point.y);
-    let attributes = point.attributes.renderIfPrefixIs("data-text-");
-    let svg = `${this.nl()}<text ${point.attributes.renderIfPrefixIs(
-      "data-text-"
-    )}>`;
-    this.indent();
-    svg += `<tspan>${text}</tspan>`;
-    this.outdent();
-    svg += this.nl() + "</text>";
-
-    return svg;
-  };
-
-  /** Returns SVG code for a snippet */
-  this.prototype.renderSnippet = function(snippet) {
-    let svg = this.nl();
-    svg += `<use x="${snippet.anchor.x}" y="${snippet.anchor.y}" `;
-    svg += `xlink:href="#${snippet.def}" ${snippet.attributes.render()}>`;
-    if (snippet.description) {
-      svg += `<title>${snippet.description}</title>`;
-    }
-    svg += "</use>";
-
-    return svg;
-  };
-
-  /** Returns SVG code to open a group */
-  this.prototype.openGroup = function(id) {
-    let svg = this.nl() + this.nl();
-    svg += `<!-- Start of group #${id} -->`;
-    svg += this.nl();
-    svg += `<g id="${id}">`;
-    this.indent();
-    this.openGroups.push(id);
-
-    return svg;
-  };
-
-  /** Returns SVG code to close a group */
-  this.prototype.closeGroup = function() {
-    this.outdent();
-
-    return `${this.nl()}</g>${this.nl()}<!-- end of group #${this.openGroups.pop()} -->`;
-  };
-
-  /** Returns a linebreak + identation */
-  this.prototype.nl = function() {
-    return "\n" + this.tab();
-  };
-
-  /** Returns indentation */
-  this.prototype.tab = function() {
-    let space = "";
-    for (let i = 0; i < this.tabs; i++) {
-      space += "  ";
-    }
-
-    return space;
-  };
-
-  /** Increases indentation by 1 */
-  this.prototype.indent = function() {
-    this.tabs += 1;
-  };
-
-  /** Decreases indentation by 1 */
-  this.prototype.outdent = function() {
-    this.tabs -= 1;
-  };
-
-  /** Returns an unused ID */
-  this.prototype.getUid = function() {
-    this.freeId += 1;
-
-    return "" + this.freeId;
-  };
-
-  return this;
 }
 
+/** Method to attach preRenderSvg hooks on */
+svg.prototype.preRenderSvg = function() {};
+
+/** Method to attach postRenderSvg hooks on */
+svg.prototype.postRenderSvg = function() {};
+
+/** Method to attach insertText hooks on */
+svg.prototype.insertText = function() {};
+
+/** Renders a draft object as SVG */
+svg.prototype.render = function(pattern) {
+  this.preRenderSvg();
+  this.svg = this.prefix;
+  this.svg += this.renderComments(this.header);
+  this.svg += this.renderSvgTag(pattern);
+  this.svg += this.renderStyle();
+  this.svg += this.renderScript();
+  this.svg += this.renderDefs();
+  this.svg += this.openGroup("draftContainer");
+  for (let partId in pattern.parts) {
+    let part = pattern.parts[partId];
+    if (part.render) {
+      this.svg += this.openGroup(part.id, part.attributes);
+      this.svg += this.renderPart(part);
+      this.svg += this.closeGroup();
+    }
+  }
+  this.svg += this.closeGroup();
+  this.svg += this.nl() + "</svg>";
+  this.svg += this.renderComments(this.footer);
+  this.postRenderSvg();
+  return this.svg;
+};
+
+/** Returns SVG code for the opening SVG tag */
+svg.prototype.renderSvgTag = function(pattern) {
+  let svg = "<svg";
+  this.indent();
+  svg += this.nl() + this.attributes.render();
+  this.outdent();
+  svg += this.nl() + ">" + this.nl();
+
+  return svg;
+};
+
+/** Returns SVG code for the style block */
+svg.prototype.renderStyle = function() {
+  let svg = '<style type="text/css"> <![CDATA[ ';
+  this.indent();
+  svg += this.nl() + this.style;
+  this.outdent();
+  svg += this.nl() + "]]>" + this.nl() + "</style>" + this.nl();
+  return svg;
+};
+
+/** Returns SVG code for the script block */
+svg.prototype.renderScript = function() {
+  let svg = '<script type="text/javascript"> <![CDATA[';
+  this.indent();
+  svg += this.nl() + this.script;
+  this.outdent();
+  svg += this.nl() + "]]>" + this.nl() + "</script>" + this.nl();
+
+  return svg;
+};
+
+/** Returns SVG code for the defs block */
+svg.prototype.renderDefs = function() {
+  let svg = '<defs id="defs">';
+  this.indent();
+  svg += this.nl() + this.defs;
+  this.outdent();
+  svg += this.nl() + "</defs>" + this.nl();
+
+  return svg;
+};
+
+/** Returns SVG code for a comment block */
+svg.prototype.renderComments = function(comments) {
+  return (
+    this.nl() + this.nl() + "<!--" + this.nl() + comments + this.nl() + "-->"
+  );
+};
+
+/** Returns SVG code for a Part object */
+svg.prototype.renderPart = function(part) {
+  let svg = "";
+  for (let key in part.paths) {
+    let path = part.paths[key];
+    if (path.render) svg += this.renderPath(path);
+  }
+  for (let key in part.points) {
+    if (part.points[key].attributes.get("data-text")) {
+      svg += this.renderPoint(part.points[key]);
+    }
+  }
+  for (let key in part.snippets) {
+    let snippet = part.snippets[key];
+    svg += this.renderSnippet(snippet);
+  }
+
+  return svg;
+};
+
+/** Returns SVG code for a Point object */
+svg.prototype.renderPoint = function(point) {
+  let svg = "";
+  if (point.attributes.get("data-text")) svg += this.renderText(point);
+
+  return svg;
+};
+
+/** Returns SVG code for a Path object */
+svg.prototype.renderPath = function(path) {
+  if (!path.attributes.get("id")) path.attributes.add("id", this.getUid());
+  path.attributes.add("d", path.asPathstring());
+
+  return `${this.nl()}<path ${path.attributes.render()} />${this.renderPathText(
+    path
+  )}`;
+};
+
+svg.prototype.renderPathText = function(path) {
+  let text = path.attributes.get("data-text");
+  if (!text) return false;
+  let attributes = path.attributes.renderIfPrefixIs("data-text-");
+  let svg = this.nl() + "<text>";
+  this.indent();
+  svg += `<textPath xlink:href="#${path.attributes.get(
+    "id"
+  )}" startOffset="50%"><tspan ${attributes}>${text}</tspan></textPath>`;
+  this.outdent();
+  svg += this.nl() + "</text>";
+
+  return svg;
+};
+
+svg.prototype.renderText = function(point) {
+  let text = point.attributes.get("data-text");
+  if (!text) return false;
+
+  point.attributes.add("data-text-x", point.x);
+  point.attributes.add("data-text-y", point.y);
+  let attributes = point.attributes.renderIfPrefixIs("data-text-");
+  let svg = `${this.nl()}<text ${point.attributes.renderIfPrefixIs(
+    "data-text-"
+  )}>`;
+  this.indent();
+  svg += `<tspan>${text}</tspan>`;
+  this.outdent();
+  svg += this.nl() + "</text>";
+
+  return svg;
+};
+
+/** Returns SVG code for a snippet */
+svg.prototype.renderSnippet = function(snippet) {
+  let svg = this.nl();
+  svg += `<use x="${snippet.anchor.x}" y="${snippet.anchor.y}" `;
+  svg += `xlink:href="#${snippet.def}" ${snippet.attributes.render()}>`;
+  if (snippet.description) {
+    svg += `<title>${snippet.description}</title>`;
+  }
+  svg += "</use>";
+
+  return svg;
+};
+
+/** Returns SVG code to open a group */
+svg.prototype.openGroup = function(id) {
+  let svg = this.nl() + this.nl();
+  svg += `<!-- Start of group #${id} -->`;
+  svg += this.nl();
+  svg += `<g id="${id}">`;
+  this.indent();
+  this.openGroups.push(id);
+
+  return svg;
+};
+
+/** Returns SVG code to close a group */
+svg.prototype.closeGroup = function() {
+  this.outdent();
+
+  return `${this.nl()}</g>${this.nl()}<!-- end of group #${this.openGroups.pop()} -->`;
+};
+
+/** Returns a linebreak + identation */
+svg.prototype.nl = function() {
+  return "\n" + this.tab();
+};
+
+/** Returns indentation */
+svg.prototype.tab = function() {
+  let space = "";
+  for (let i = 0; i < this.tabs; i++) {
+    space += "  ";
+  }
+
+  return space;
+};
+
+/** Increases indentation by 1 */
+svg.prototype.indent = function() {
+  this.tabs += 1;
+};
+
+/** Decreases indentation by 1 */
+svg.prototype.outdent = function() {
+  this.tabs -= 1;
+};
+
+/** Returns an unused ID */
+svg.prototype.getUid = function() {
+  this.freeId += 1;
+
+  return "" + this.freeId;
+};
+
 export default svg;