1
0
Fork 0

🚧 Fixing prototype issues

This commit is contained in:
Joost De Cock 2018-07-23 20:14:32 +02:00
parent 7758ba81a6
commit 9fbef27330
9 changed files with 1482 additions and 1467 deletions

1918
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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",

View file

@ -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;

View file

@ -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);
}
};

View file

@ -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;

View file

@ -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;

View file

@ -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
*/
this.prototype.draft = function() {
throw Error(
"You have to implement the draft() method in your Pattern instance."
);
};
/**
* @throws Will throw an error when called
*/
pattern.prototype.draft = function() {
throw Error(
"You have to implement the draft() method in your Pattern instance."
);
};
this.prototype.render = function() {
this.hooks.attach("preRenderSvg", this.svg);
this.hooks.attach("postRenderSvg", this.svg);
//this.hooks.attach('insertText', this.svg);
pattern.prototype.render = function() {
this.hooks.attach("preRenderSvg", this.svg);
this.hooks.attach("postRenderSvg", this.svg);
//this.hooks.attach('insertText', this.svg);
return this.svg.render(this);
};
return this.svg.render(this);
};
this.prototype.on = function(hook, method) {
if (typeof this.hooks._hooks[hook] === "undefined") {
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;
pattern.prototype.on = function(hook, method) {
if (typeof this.hooks._hooks[hook] === "undefined") {
this.hooks._hooks[hook] = [];
}
this.hooks._hooks[hook].push(method);
};
this.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.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.loadPluginMacros = function(plugin) {
for (let macro in plugin.macros) {
if (typeof plugin.macros[macro] === "function") {
this.macro(macro, plugin.macros[macro]);
}
}
};
pattern.prototype.withPlugin = function(plugin) {
if (plugin.hooks) this.loadPluginHooks(plugin);
if (plugin.macros) this.loadPluginMacros(plugin);
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]);
}
}
};

View file

@ -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;

View file

@ -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;