2018-07-23 11:44:34 +00:00
|
|
|
import attributes from "./attributes";
|
2018-08-01 14:55:54 +02:00
|
|
|
import Bezier from "bezier-js";
|
|
|
|
import { pathOffset, pathLength } from "./utils";
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 11:44:34 +00:00
|
|
|
function path() {
|
2018-07-23 11:12:06 +00:00
|
|
|
this.render = true;
|
|
|
|
this.attributes = new attributes();
|
2018-07-24 08:34:26 +02:00
|
|
|
this.ops = [];
|
2018-07-23 20:14:32 +02:00
|
|
|
}
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
/** Adds a move operation to Point to */
|
|
|
|
path.prototype.move = function(to) {
|
|
|
|
this.ops.push({ type: "move", to });
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
return this;
|
|
|
|
};
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
/** Adds a line operation to Point to */
|
|
|
|
path.prototype.line = function(to) {
|
|
|
|
this.ops.push({ type: "line", to });
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
return this;
|
|
|
|
};
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
/** Adds a line operation to Point to */
|
|
|
|
path.prototype.curve = function(cp1, cp2, to) {
|
|
|
|
this.ops.push({ type: "curve", cp1, cp2, to });
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
return this;
|
|
|
|
};
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
/** Adds a close operation */
|
|
|
|
path.prototype.close = function() {
|
|
|
|
this.ops.push({ type: "close" });
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
return this;
|
|
|
|
};
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
/** Adds an attribute. This is here to make this call chainable in assignment */
|
|
|
|
path.prototype.attr = function(name, value) {
|
|
|
|
this.attributes.add(name, value);
|
2018-07-21 12:54:29 +02:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
return this;
|
|
|
|
};
|
2018-07-21 12:54:29 +02:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
/** 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;
|
2018-07-14 16:04:39 +00:00
|
|
|
}
|
2018-07-23 20:14:32 +02:00
|
|
|
}
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2018-07-23 20:14:32 +02:00
|
|
|
return d;
|
|
|
|
};
|
2018-07-23 11:12:06 +00:00
|
|
|
|
2018-07-26 13:43:12 +00:00
|
|
|
/** Returns offset of this path as a new path */
|
|
|
|
path.prototype.offset = function(distance) {
|
|
|
|
return pathOffset(this, distance);
|
|
|
|
};
|
|
|
|
|
2018-08-01 14:55:54 +02:00
|
|
|
/** Returns the length of this path */
|
|
|
|
path.prototype.length = function() {
|
|
|
|
let current, start;
|
|
|
|
let length = 0;
|
|
|
|
for (let i in this.ops) {
|
|
|
|
let op = this.ops[i];
|
|
|
|
if (op.type === "move") {
|
|
|
|
start = op.to;
|
|
|
|
} else if (op.type === "line") {
|
|
|
|
length += op.from.dist(op.to);
|
|
|
|
} else if (op.type === "curve") {
|
|
|
|
length += new Bezier(
|
|
|
|
{ x: current.x, y: current.y },
|
|
|
|
{ x: op.cp1.x, y: op.cp1.y },
|
|
|
|
{ x: op.cp2.x, y: op.cp2.y },
|
|
|
|
{ x: op.to.x, y: op.to.y }
|
|
|
|
).length();
|
|
|
|
} else if (op.type === "close") {
|
|
|
|
length += current.dist(start);
|
|
|
|
}
|
|
|
|
if (op.to) current = op.to;
|
|
|
|
}
|
|
|
|
|
|
|
|
return length;
|
|
|
|
};
|
|
|
|
|
|
|
|
/** Returns the startpoint of the path */
|
|
|
|
path.prototype.start = function() {
|
|
|
|
return this.ops[0].to;
|
|
|
|
};
|
|
|
|
|
|
|
|
/** Returns the endpoint of the path */
|
|
|
|
path.prototype.end = function() {
|
|
|
|
let op = this.ops[this.ops.length - 1];
|
|
|
|
|
|
|
|
if (op.type === "close") return this.start();
|
|
|
|
else return op.to;
|
|
|
|
};
|
2018-07-23 11:12:06 +00:00
|
|
|
export default path;
|