/*
- * Raphael 0.8.6 - JavaScript Vector Library
+ * Raphael 1.0 - JavaScript Vector Library
*
* Copyright (c) 2008 - 2009 Dmitry Baranovskiy (http://raphaeljs.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", "font-style": "normal", "font-weight": 400, gradient: 0, height: 0, href: "http://raphaeljs.com/", opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, target: "_blank", "text-anchor": "middle", title: "Raphael", translation: "0 0", width: 0, x: 0, y: 0},
availableAnimAttrs = {cx: "number", cy: "number", fill: "colour", "fill-opacity": "number", "font-size": "number", height: "number", opacity: "number", path: "path", r: "number", rotation: "csv", rx: "number", ry: "number", scale: "csv", stroke: "colour", "stroke-opacity": "number", "stroke-width": "number", translation: "csv", width: "number", x: "number", y: "number"},
events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"];
- R.version = "0.8.6";
+ R.version = "1.0";
R.type = (window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");
R.svg = !(R.vml = R.type == "VML");
R.idGenerator = 0;
delete this.start;
};
// path utilities
+ var pathMethods = {
+ absolutely: function () {
+ this.isAbsolute = true;
+ return this;
+ },
+ relatively: function () {
+ this.isAbsolute = false;
+ return this;
+ },
+ moveTo: function (x, y) {
+ var d = this.isAbsolute ? "M" : "m";
+ d += +parseFloat(x).toFixed(3) + " " + (+parseFloat(y).toFixed(3)) + " ";
+ this.attr({path: this.attrs.path + d});
+ return this;
+ },
+ lineTo: function (x, y) {
+ var d = this.isAbsolute ? "L" : "l";
+ d += +parseFloat(x).toFixed(3) + " " + (+parseFloat(y).toFixed(3)) + " ";
+ this.attr({path: this.attrs.path + d});
+ return this;
+ },
+ arcTo: function (rx, ry, large_arc_flag, sweep_flag, x, y) {
+ var d = this.isAbsolute ? "A" : "a";
+ d += [+parseFloat(rx).toFixed(3), +parseFloat(ry).toFixed(3), 0, large_arc_flag, sweep_flag, +parseFloat(x).toFixed(3), +parseFloat(y).toFixed(3)].join(" ");
+ this.attr({path: this.attrs.path + d});
+ return this;
+ },
+ curveTo: function () {
+ var args = Array.prototype.splice.call(arguments, 0, arguments.length),
+ d = [0, 0, 0, 0, "s", 0, "c"][args.length] || "";
+ if (this.isAbsolute) {
+ d = d.toUpperCase();
+ }
+ this.attr({path: this.attrs.path + d + args});
+ return this;
+ },
+ qcurveTo: function () {
+ var d = [0, 1, "t", 3, "q"][arguments.length],
+ args = Array.prototype.splice.call(arguments, 0, arguments.length);
+ if (this.isAbsolute) {
+ d = d.toUpperCase();
+ }
+ this.attr({path: this.attrs.path + d + args});
+ return this;
+ },
+ addRoundedCorner: function (r, dir) {
+ var rollback = this.isAbsolute,
+ o = this;
+ if (rollback) {
+ this.relatively();
+ rollback = function () {
+ o.absolutely();
+ };
+ } else {
+ rollback = function () {};
+ }
+ this.arcTo(r, r, 0, {"lu": 1, "rd": 1, "ur": 1, "dl": 1}[dir] || 0, r * (!!(dir.indexOf("r") + 1) * 2 - 1), r * (!!(dir.indexOf("d") + 1) * 2 - 1));
+ rollback();
+ return this;
+ },
+ andClose: function () {
+ this.attr({path: this.attrs.path + "z"});
+ return this;
+ },
+ getPathArray: function () {
+ return R.parsePathString(this.attrs.path);
+ }
+ };
var pathcache = {},
+ path2string = function () {
+ var res = "";
+ for (var i = 0, ii = this.length; i < ii; i++) {
+ res += this[i][0] + this[i].join(",").substring(2);
+ }
+ return res.replace(/,(?=-)/g, "");
+ },
pathcount = [];
R.parsePathString = function (pathString) {
if (pathString in pathcache) {
return pathcache[pathString];
}
var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0},
- data = [],
- toString = function () {
- var res = "";
- for (var i = 0, ii = this.length; i < ii; i++) {
- res += this[i][0] + this[i].join(",").substring(2);
- }
- return res;
- };
- if (pathString.toString.toString() == toString.toString()) {
+ data = [];
+ if (pathString.toString == path2string) {
data = pathString;
}
if (!data.length) {
- pathString.replace(/([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig, function (a, b, c) {
+ (pathString + "").replace(/([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig, function (a, b, c) {
var params = [],
name = b.toLowerCase();
c.replace(/(-?\d*\.?\d*(?:e[-+]?\d+)?)\s*,?\s*/ig, function (a, b) {
};
}
});
- data.toString = toString;
+ data.toString = path2string;
}
if (pathcount.length > 20) {
delete pathcache[pathcount.unshift()];
};
var pathDimensions = function (path) {
var pathArray = path;
- if (typeof path == "string") {
- pathArray = R.parsePathString(path);
- }
pathArray = pathToAbsolute(pathArray);
var x = [],
y = [],
};
}
},
- addRoundedCorner = function (r, dir) {
- var R = .5522 * r,
- rollback = this.isAbsolute,
- o = this;
- if (rollback) {
- this.relatively();
- rollback = function () {
- o.absolutely();
- };
- } else {
- rollback = function () {};
- }
- var actions = {
- l: function () {
- return {
- u: function () {
- o.curveTo(-R, 0, -r, -(r - R), -r, -r);
- },
- d: function () {
- o.curveTo(-R, 0, -r, r - R, -r, r);
- }
- };
- },
- r: function () {
- return {
- u: function () {
- o.curveTo(R, 0, r, -(r - R), r, -r);
- },
- d: function () {
- o.curveTo(R, 0, r, r - R, r, r);
- }
- };
- },
- u: function () {
- return {
- r: function () {
- o.curveTo(0, -R, -(R - r), -r, r, -r);
- },
- l: function () {
- o.curveTo(0, -R, R - r, -r, -r, -r);
- }
- };
- },
- d: function () {
- return {
- r: function () {
- o.curveTo(0, R, -(R - r), r, r, r);
- },
- l: function () {
- o.curveTo(0, R, R - r, r, -r, r);
- }
- };
- }
- };
- actions[dir.charAt(0)]()[dir.charAt(1)]();
- rollback();
- return o;
- },
pathToRelative = function (pathArray) {
var res = [],
x = 0,
return res;
},
pathToAbsolute = function (pathArray) {
- var res = [];
+ var res = [],
+ x = 0,
+ y = 0,
+ start = 0;
if (typeof pathArray == "string") {
pathArray = R.parsePathString(pathArray);
}
- var x = 0,
- y = 0,
- start = 0;
if (pathArray[0][0] == "M") {
x = +pathArray[0][1];
y = +pathArray[0][2];
res.toString = pathArray.toString;
return res;
},
- pecache = {}, pecount = [],
- pathEqualiser = function (path1, path2) {
- if ((path1 + path2) in pecache) {
- return pecache[path1 + path2];
+ l2c = function (x1, y1, x2, y2) {
+ return [x1, y1, x2, y2, x2, y2];
+ },
+ q2c = function (x1, y1, ax, ay, x2, y2) {
+ return [
+ 2 / 3 * x1 + 1 / 3 * ax,
+ 2 / 3 * y1 + 1 / 3 * ay,
+ 2 / 3 * x1 + 1 / 3 * x2,
+ 2 / 3 * y1 + 1 / 3 * y2,
+ x2,
+ y2
+ ];
+ },
+ a2c = function (x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
+ // for more information of where this math came from visit:
+ // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
+ var _120 = Math.PI * 120 / 180,
+ res = [];
+ if (!recursive) {
+ var x = (x1 - x2) / 2,
+ y = (y1 - y2) / 2,
+ rx2 = rx * rx,
+ ry2 = ry * ry,
+ k = (large_arc_flag == sweep_flag ? -1 : 1) *
+ Math.sqrt(Math.abs(rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)),
+ cx = k * rx * y / ry + (x1 + x2) / 2,
+ cy = k * -ry * x / rx + (y1 + y2) / 2,
+ f1 = Math.asin((y1 - cy) / ry),
+ f2 = Math.asin((y2 - cy) / ry);
+
+ f1 = x1 < cx ? Math.PI - f1 : f1;
+ f2 = x2 < cx ? Math.PI - f2 : f2;
+ f1 < 0 && (f1 = Math.PI * 2 + f1);
+ f2 < 0 && (f2 = Math.PI * 2 + f2);
+ if (sweep_flag && f1 > f2) {
+ f1 = f1 - Math.PI * 2;
+ }
+ if (!sweep_flag && f2 > f1) {
+ f2 = f2 - Math.PI * 2;
+ }
+ } else {
+ f1 = recursive[0];
+ f2 = recursive[1];
+ cx = recursive[2];
+ cy = recursive[3];
+ }
+ var df = f2 - f1;
+ if (Math.abs(df) > _120) {
+ var f2old = f2,
+ x2old = x2,
+ y2old = y2;
+ f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
+ x2 = cx + rx * Math.cos(f2);
+ y2 = cy + ry * Math.sin(f2);
+ res = arguments.callee(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
+ }
+ var c1 = Math.cos(f1),
+ s1 = Math.sin(f1),
+ c2 = Math.cos(f2),
+ s2 = Math.sin(f2),
+ df = f2 - f1,
+ t = Math.tan(df / 4),
+ hx = 4 / 3 * rx * t,
+ hy = 4 / 3 * ry * t,
+ m1 = [x1, y1],
+ m2 = [x1 + hx * s1, y1 - hy * c1],
+ m3 = [x2 + hx * s2, y2 - hy * c2],
+ m4 = [x2, y2];
+ m2[0] = 2 * m1[0] - m2[0];
+ m2[1] = 2 * m1[1] - m2[1];
+ if (recursive) {
+ return [m2, m3, m4].concat(res);
+ } else {
+ res = [m2, m3, m4].concat(res).join(",").split(",");
+ for (var i = res.length; i--;) {
+ res[i] = +res[i];
+ }
+ return res;
}
- var data = [pathToAbsolute(R.parsePathString(path1)), pathToAbsolute(R.parsePathString(path2))],
- attrs = [{x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0}, {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0}],
+ },
+ findDotAtSegment = function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+ var x = Math.pow(1 - t, 3) * p1x + Math.pow(1 - t, 2) * 3 * t * c1x + (1 - t) * 3 * t * t * c2x + Math.pow(t, 3) * p2x,
+ y = Math.pow(1 - t, 3) * p1y + Math.pow(1 - t, 2) * 3 * t * c1y + (1 - t) * 3 * t * t * c2y + Math.pow(t, 3) * p2y,
+ mx = p1x + 2 * t * (c1x - p1x) + t * t * (c2x - 2 * c1x + p1x),
+ my = p1y + 2 * t * (c1y - p1y) + t * t * (c2y - 2 * c1y + p1y),
+ nx = c1x + 2 * t * (c2x - c1x) + t * t * (p2x - 2 * c2x + c1x),
+ ny = c1y + 2 * t * (c2y - c1y) + t * t * (p2y - 2 * c2y + c1y),
+ ax = (1 - t) * p1x + t * c1x,
+ ay = (1 - t) * p1y + t * c1y,
+ cx = (1 - t) * c2x + t * p2x,
+ cy = (1 - t) * c2y + t * p2y;
+ return {x: x, y: y, m: {x: mx, y: my}, n: {x: nx, y: ny}, start: {x: ax, y: ay}, end: {x: cx, y: cy}};
+ },
+ path2curve = function (path, path2) {
+ path2curve.cache = path2curve.cache || {};
+ path2curve.count = path2curve.count || [];
+ if (path in path2curve.cache) {
+ return path2curve.cache[path + "&" + path2];
+ }
+ var p = pathToAbsolute(path),
+ p2 = path2 && pathToAbsolute(path2),
+ attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0},
+ attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0},
processPath = function (path, d) {
if (!path) {
- return ["U"];
+ return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
}
switch (path[0]) {
case "M":
d.X = path[1];
d.Y = path[2];
break;
+ case "A":
+ path = ["C"].concat(a2c(d.x, d.y, path[1], path[2], path[3], path[4], path[5], path[6], path[7]));
+ break;
case "S":
var nx = d.x + (d.x - (d.bx || d.x)),
ny = d.y + (d.y - (d.by || d.y));
case "T":
var nx = d.x + (d.x - (d.bx || d.x)),
ny = d.y + (d.y - (d.by || d.y));
- path = ["Q", nx, ny, path[1], path[2]];
+ path = ["C"].concat(q2c(d.x, d.y, nx, ny, path[1], path[2]));
+ break;
+ case "Q":
+ path = ["C"].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4]));
+ break;
+ case "L":
+ path = ["C"].concat(l2c(d.x, d.y, path[1], path[2]));
break;
case "H":
- path = ["L", path[1], d.y];
+ path = ["C"].concat(l2c(d.x, d.y, path[1], d.y));
break;
case "V":
- path = ["L", d.x, path[1]];
+ path = ["C"].concat(l2c(d.x, d.y, d.x, path[1]));
break;
case "Z":
- path = ["L", d.X, d.Y];
+ path = ["C"].concat(l2c(d.x, d.y, d.X, d.Y));
break;
}
return path;
},
- edgeCases = function (a, b, i) {
- if (data[a][i][0] == "M" && data[b][i][0] != "M") {
- data[b].splice(i, 0, ["M", attrs[b].x, attrs[b].y]);
- attrs[a].bx = data[a][i][data[a][i].length - 4] || 0;
- attrs[a].by = data[a][i][data[a][i].length - 3] || 0;
- attrs[a].x = data[a][i][data[a][i].length - 2];
- attrs[a].y = data[a][i][data[a][i].length - 1];
- return true;
- } else if (data[a][i][0] == "L" && data[b][i][0] == "C") {
- data[a][i] = ["C", attrs[a].x, attrs[a].y, data[a][i][1], data[a][i][2], data[a][i][1], data[a][i][2]];
- } else if (data[a][i][0] == "L" && data[b][i][0] == "Q") {
- data[a][i] = ["Q", data[a][i][1], data[a][i][2], data[a][i][1], data[a][i][2]];
- } else if (data[a][i][0] == "Q" && data[b][i][0] == "C") {
- var x = data[b][i][data[b][i].length - 2],
- y = data[b][i][data[b][i].length - 1];
- data[b].splice(i + 1, 0, ["Q", x, y, x, y]);
- data[a].splice(i, 0, ["C", attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y]);
- i++;
- attrs[b].bx = data[b][i][data[b][i].length - 4] || 0;
- attrs[b].by = data[b][i][data[b][i].length - 3] || 0;
- attrs[b].x = data[b][i][data[b][i].length - 2];
- attrs[b].y = data[b][i][data[b][i].length - 1];
- return true;
- } else if (data[a][i][0] == "A" && data[b][i][0] == "C") {
- var x = data[b][i][data[b][i].length - 2],
- y = data[b][i][data[b][i].length - 1];
- data[b].splice(i + 1, 0, ["A", 0, 0, data[a][i][3], data[a][i][4], data[a][i][5], x, y]);
- data[a].splice(i, 0, ["C", attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y]);
- i++;
- attrs[b].bx = data[b][i][data[b][i].length - 4] || 0;
- attrs[b].by = data[b][i][data[b][i].length - 3] || 0;
- attrs[b].x = data[b][i][data[b][i].length - 2];
- attrs[b].y = data[b][i][data[b][i].length - 1];
- return true;
- } else if (data[a][i][0] == "U") {
- data[a][i][0] = data[b][i][0];
- for (var j = 1, jj = data[b][i].length; j < jj; j++) {
- data[a][i][j] = (j % 2) ? attrs[a].x : attrs[a].y;
+ fixArc = function (pp, i) {
+ if (pp[i].length > 7) {
+ pp[i].shift();
+ var pi = pp[i];
+ while (pi.length) {
+ pp.splice(i++, 0, ["C"].concat(pi.splice(0, 6)));
}
+ pp.splice(i, 1);
+ ii = Math.max(p.length, p2 && p2.length || 0);
+ }
+ },
+ fixM = function (path1, path2, a1, a2, i) {
+ if (path1 && path2 && path1[i][0] == "M" && path2[i][0] != "M") {
+ path2.splice(i, 0, ["M", a2.x, a2.y]);
+ a1.bx = 0;
+ a1.by = 0;
+ a1.x = path1[i][1];
+ a1.y = path1[i][2];
+ ii = Math.max(p.length, p2 && p2.length || 0);
}
- return false;
};
- for (var i = 0; i < Math.max(data[0].length, data[1].length); i++) {
- data[0][i] = processPath(data[0][i], attrs[0]);
- data[1][i] = processPath(data[1][i], attrs[1]);
- if (data[0][i][0] != data[1][i][0] && (edgeCases(0, 1, i) || edgeCases(1, 0, i))) {
- continue;
- }
- attrs[0].bx = data[0][i][data[0][i].length - 4] || 0;
- attrs[0].by = data[0][i][data[0][i].length - 3] || 0;
- attrs[0].x = data[0][i][data[0][i].length - 2];
- attrs[0].y = data[0][i][data[0][i].length - 1];
- attrs[1].bx = data[1][i][data[1][i].length - 4] || 0;
- attrs[1].by = data[1][i][data[1][i].length - 3] || 0;
- attrs[1].x = data[1][i][data[1][i].length - 2];
- attrs[1].y = data[1][i][data[1][i].length - 1];
- }
- if (pecount.length > 20) {
- delete pecache[pecount.unshift()];
- }
- pecount.push(path1 + path2);
- pecache[path1 + path2] = data;
- return data;
+ for (var i = 0, ii = Math.max(p.length, p2 && p2.length || 0); i < ii; i++) {
+ p[i] = processPath(p[i], attrs);
+ fixArc(p, i);
+ p2 && (p2[i] = processPath(p2[i], attrs2));
+ p2 && fixArc(p2, i);
+ fixM(p, p2, attrs, attrs2, i);
+ fixM(p2, p, attrs2, attrs, i);
+ var seg = p[i],
+ seg2 = p2 && p2[i],
+ seglen = seg.length,
+ seg2len = p2 && seg2.length;
+ attrs.bx = seg[seglen - 4] || 0;
+ attrs.by = seg[seglen - 3] || 0;
+ attrs.x = seg[seglen - 2];
+ attrs.y = seg[seglen - 1];
+ attrs2.bx = p2 && (seg2[seg2len - 4] || 0);
+ attrs2.by = p2 && (seg2[seg2len - 3] || 0);
+ attrs2.x = p2 && seg2[seg2len - 2];
+ attrs2.y = p2 && seg2[seg2len - 1];
+ }
+ if (path2curve.count.length > 100) {
+ delete path2curve.cache[path2curve.count.unshift()];
+ }
+ path2curve.count.push(path + "&" + path2);
+ return (path2curve.cache[path + "&" + path2] = p2 ? [p, p2] : p);
},
toGradient = function (gradient) {
if (typeof gradient == "string") {
R.toString = function () {
return "Your browser supports SVG.\nYou are running Rapha\u00ebl " + this.version;
};
- var pathMethods = {
- absolutely: function () {
- this.isAbsolute = true;
- return this;
- },
- relatively: function () {
- this.isAbsolute = false;
- return this;
- },
- moveTo: function (x, y) {
- var d = this.isAbsolute ? "M" : "m";
- d += parseFloat(x).toFixed(3) + " " + parseFloat(y).toFixed(3) + " ";
- var oldD = this[0].getAttribute("d") || "";
- (oldD == "M0,0") && (oldD = "");
- this[0].setAttribute("d", oldD + d);
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x);
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y);
- this.attrs.path = oldD + d;
- return this;
- },
- lineTo: function (x, y) {
- this.last.x = (!this.isAbsolute * this.last.x) + parseFloat(x);
- this.last.y = (!this.isAbsolute * this.last.y) + parseFloat(y);
- var d = this.isAbsolute ? "L" : "l";
- d += parseFloat(x).toFixed(3) + " " + parseFloat(y).toFixed(3) + " ";
- var oldD = this.node.getAttribute("d") || "";
- this.node.setAttribute("d", oldD + d);
- this.attrs.path = oldD + d;
- return this;
- },
- arcTo: function (rx, ry, large_arc_flag, sweep_flag, x, y) {
- var d = this.isAbsolute ? "A" : "a";
- d += [parseFloat(rx).toFixed(3), parseFloat(ry).toFixed(3), 0, large_arc_flag, sweep_flag, parseFloat(x).toFixed(3), parseFloat(y).toFixed(3)].join(" ");
- var oldD = this[0].getAttribute("d") || "";
- this.node.setAttribute("d", oldD + d);
- this.last.x = parseFloat(x);
- this.last.y = parseFloat(y);
- this.attrs.path = oldD + d;
- return this;
- },
- cplineTo: function (x1, y1, w1) {
- if (!w1) {
- return this.lineTo(x1, y1);
- } else {
- var p = {},
- x = parseFloat(x1),
- y = parseFloat(y1),
- w = parseFloat(w1),
- d = this.isAbsolute ? "C" : "c",
- attr = [+this.last.x + w, +this.last.y, x - w, y, x, y];
- for (var i = 0, ii = attr.length; i < ii; i++) {
- d += attr[i] + " ";
- }
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5];
- this.last.bx = attr[2];
- this.last.by = attr[3];
- var oldD = this.node.getAttribute("d") || "";
- this.node.setAttribute("d", oldD + d);
- this.attrs.path = oldD + d;
- return this;
- }
- },
- curveTo: function () {
- var p = {},
- d = [0, 1, 2, 3, "s", 5, "c"][arguments.length];
- if (this.isAbsolute) {
- d = d.toUpperCase();
- }
- for (var i = 0, ii = arguments.length; i < ii; i++) {
- d += parseFloat(arguments[i]).toFixed(3) + " ";
- }
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[arguments.length - 2]);
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[arguments.length - 1]);
- this.last.bx = parseFloat(arguments[arguments.length - 4]);
- this.last.by = parseFloat(arguments[arguments.length - 3]);
- var oldD = this.node.getAttribute("d") || "";
- this.node.setAttribute("d", oldD + d);
- this.attrs.path = oldD + d;
- return this;
- },
- qcurveTo: function () {
- var p = {},
- d = [0, 1, "t", 3, "q"][arguments.length];
- if (this.isAbsolute) {
- d = d.toUpperCase();
- }
- for (var i = 0, ii = arguments.length; i < ii; i++) {
- d += parseFloat(arguments[i]).toFixed(3) + " ";
- }
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[arguments.length - 2]);
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[arguments.length - 1]);
- if (arguments.length != 2) {
- this.last.qx = parseFloat(arguments[arguments.length - 4]);
- this.last.qy = parseFloat(arguments[arguments.length - 3]);
- }
- var oldD = this.node.getAttribute("d") || "";
- this.node.setAttribute("d", oldD + d);
- this.attrs.path = oldD + d;
- return this;
- },
- addRoundedCorner: addRoundedCorner,
- andClose: function () {
- var oldD = this[0].getAttribute("d") || "";
- this[0].setAttribute("d", oldD + "Z ");
- this.attrs.path = oldD + "Z ";
- return this;
- }
- };
var thePath = function (params, pathString, SVG) {
- params = params || {};
var el = doc.createElementNS(SVG.svgns, "path");
if (SVG.canvas) {
SVG.canvas.appendChild(el);
p[method] = pathMethods[method];
}
p.type = "path";
- p.last = {x: 0, y: 0, bx: 0, by: 0};
- if (pathString) {
- p.attrs.path = "" + pathString;
- p.absolutely();
- paper.pathfinder(p, p.attrs.path);
- }
+ p.attrs.path = "" + (pathString || "");
+ pathString && p.node.setAttribute("d", R.parsePathString(pathString));
if (params) {
!params.gradient && (params.fill = params.fill || "none");
params.stroke = params.stroke || "#000";
attrs = o.attrs,
rot = attrs.rotation,
addDashes = function (o, value) {
- value = dasharray[value.toString().toLowerCase()];
+ value = dasharray[(value + "").toLowerCase()];
if (value) {
var width = o.attrs["stroke-width"] || "1",
butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
break;
case "path":
if (o.type == "path") {
- node.setAttribute("d", "M0,0");
- paper.pathfinder(o, value);
+ node.setAttribute("d", R.parsePathString(value));
}
case "width":
node.setAttribute(att, value);
};
Element.prototype.rotate = function (deg, cx, cy) {
if (deg == null) {
+ if (this._.rt.cx) {
+ return [this._.rt.deg, this._.rt.cx, this._.rt.cy].join(" ");
+ }
return this._.rt.deg;
}
var bbox = this.getBBox();
- deg = deg.toString().split(separator);
+ deg = (deg + "").split(separator);
if (deg.length - 1) {
cx = parseFloat(deg[1]);
cy = parseFloat(deg[2]);
} else {
this._.rt.deg += deg;
}
- if (cy == null) {
- cx = null;
- }
+ (cy == null) && (cx = null);
+ this._.rt.cx = cx;
+ this._.rt.cy = cy;
cx = cx == null ? bbox.x + bbox.width / 2 : cx;
cy = cy == null ? bbox.y + bbox.height / 2 : cy;
if (this._.rt.deg) {
if (arguments[0] == "translation") {
return this.translate();
}
+ if (arguments[0] == "rotation") {
+ return this.rotate();
+ }
+ if (arguments[0] == "scale") {
+ return this.scale();
+ }
return this.attrs[arguments[0]];
}
if (arguments.length == 1 && R.isArray(arguments[0])) {
}
var res = new Element(el, svg);
res.attrs = res.attrs || {};
+ res.attrs.src = src;
res.attrs.x = x;
res.attrs.y = y;
res.attrs.width = w;
}
var res = new Element(el, svg);
res.attrs = res.attrs || {};
+ res.attrs.text = text;
res.attrs.x = x;
res.attrs.y = y;
res.type = "text";
return container;
};
paper.remove = function () {
- this.canvas.parentNode.removeChild(this.canvas);
+ this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas);
};
paper.svgns = "http://www.w3.org/2000/svg";
paper.xlink = "http://www.w3.org/1999/xlink";
// VML
if (R.vml) {
- R.toString = function () {
- return "Your browser doesn\u2019t support SVG. Assuming it is Internet Explorer and falling down to VML.\nYou are running Rapha\u00ebl " + this.version;
- };
- var pathMethods = {
- absolutely: function () {
- this.isAbsolute = true;
- return this;
- },
- relatively: function () {
- this.isAbsolute = false;
- return this;
- },
- moveTo: function (x, y) {
- var X = Math.round(parseFloat(x)) - 1,
- Y = Math.round(parseFloat(y)) - 1,
- d = this.isAbsolute ? "m" : "t";
- d += X + " " + Y;
- this.node.path = this.Path += d;
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x);
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y);
- this.last.isAbsolute = this.isAbsolute;
- this.attrs.path += (this.isAbsolute ? "M" : "m") + [x, y];
- return this;
- },
- lineTo: function (x, y) {
- var X = Math.round(parseFloat(x)) - 1,
- Y = Math.round(parseFloat(y)) - 1,
- d = this.isAbsolute ? "l" : "r";
- d += X + " " + Y;
- this.node.path = this.Path += d;
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x);
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y);
- this.last.isAbsolute = this.isAbsolute;
- this.attrs.path += (this.isAbsolute ? "L" : "l") + [x, y];
- return this;
- },
- arcTo: function (rx, ry, large_arc_flag, sweep_flag, x2, y2) {
- // for more information of where this math came from visit:
- // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
- var x22 = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x2) - 1,
- y22 = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y2) - 1,
- x1 = this.last.x - 1,
- y1 = this.last.y - 1,
- x = (x1 - x22) / 2,
- y = (y1 - y22) / 2,
- k = (large_arc_flag == sweep_flag ? -1 : 1) *
- Math.sqrt(Math.abs(rx * rx * ry * ry - rx * rx * y * y - ry * ry * x * x) / (rx * rx * y * y + ry * ry * x * x)),
- cx = k * rx * y / ry + (x1 + x22) / 2,
- cy = k * -ry * x / rx + (y1 + y22) / 2,
- d = sweep_flag ? (this.isAbsolute ? "wa" : "wr") : (this.isAbsolute ? "at" : "ar"),
- left = Math.round(cx - rx),
- top = Math.round(cy - ry);
- d += [left, top, Math.round(left + rx * 2), Math.round(top + ry * 2), Math.round(x1), Math.round(y1), Math.round(x22), Math.round(y22)].join(", ");
- this.node.path = this.Path += d;
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + x2;
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + y2;
- this.last.isAbsolute = this.isAbsolute;
- this.attrs.path += (this.isAbsolute ? "A" : "a") + [rx, ry, 0, large_arc_flag, sweep_flag, x2, y2];
- return this;
- },
- cplineTo: function (x1, y1, w1) {
- if (!w1) {
- return this.lineTo(x1, y1);
- } else {
- var x = Math.round(parseFloat(x1)) - 1,
- y = Math.round(parseFloat(y1)) - 1,
- w = Math.round(parseFloat(w1)),
- d = this.isAbsolute ? "c" : "v",
- attr = [Math.round(this.last.x) - 1 + w, Math.round(this.last.y) - 1, x - w, y, x, y],
- svgattr = [this.last.x + w1, this.last.y, x1 - w1, y1, x1, y1];
- d += attr.join(" ") + " ";
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5];
- this.last.bx = attr[2];
- this.last.by = attr[3];
- this.node.path = this.Path += d;
- this.attrs.path += (this.isAbsolute ? "C" : "c") + svgattr;
- return this;
+ var path2vml = function (path) {
+ var pa = path2curve(path);
+ for (var i = 0, ii = pa.length; i < ii; i++) {
+ for (var j = 0, jj = pa[i].length; j < jj; j++) {
+ pa[i][j] = isNaN(pa[i][j]) ? pa[i][j] : Math.round(pa[i][j]);
}
- },
- curveTo: function () {
- var d = this.isAbsolute ? "c" : "v";
- if (arguments.length == 6) {
- this.last.bx = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2]);
- this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3]);
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[4]);
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[5]);
- d += [Math.round(parseFloat(arguments[0])) - 1,
- Math.round(parseFloat(arguments[1])) - 1,
- Math.round(parseFloat(arguments[2])) - 1,
- Math.round(parseFloat(arguments[3])) - 1,
- Math.round(parseFloat(arguments[4])) - 1,
- Math.round(parseFloat(arguments[5])) - 1].join(" ") + " ";
- this.last.isAbsolute = this.isAbsolute;
- this.attrs.path += (this.isAbsolute ? "C" : "c") + Array.prototype.splice.call(arguments, 0, arguments.length);
- }
- if (arguments.length == 4) {
- var bx = this.last.x * 2 - this.last.bx,
- by = this.last.y * 2 - this.last.by;
- this.last.bx = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[0]);
- this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[1]);
- this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2]);
- this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3]);
- d += [Math.round(bx) - 1, Math.round(by) - 1,
- Math.round(parseFloat(arguments[0])) - 1,
- Math.round(parseFloat(arguments[1])) - 1,
- Math.round(parseFloat(arguments[2])) - 1,
- Math.round(parseFloat(arguments[3])) - 1].join(" ") + " ";
- this.attrs.path += (this.isAbsolute ? "S" : "s") + Array.prototype.splice.call(arguments, 0, arguments.length);
- }
- this.node.path = this.Path += d;
- return this;
- },
- qcurveTo: function () {
- var lx = Math.round(this.last.x) - 1,
- ly = Math.round(this.last.y) - 1,
- res = [];
- if (arguments.length == 4) {
- this.last.qx = (!this.isAbsolute * this.last.x) + parseFloat(arguments[0]);
- this.last.qy = (!this.isAbsolute * this.last.y) + parseFloat(arguments[1]);
- this.last.x = (!this.isAbsolute * this.last.x) + parseFloat(arguments[2]);
- this.last.y = (!this.isAbsolute * this.last.y) + parseFloat(arguments[3]);
- res = [this.last.qx, this.last.qy, this.last.x, this.last.y];
- this.last.isAbsolute = this.isAbsolute;
- this.attrs.path += (this.isAbsolute ? "Q" : "q") + Array.prototype.splice.call(arguments, 0, arguments.length);
- }
- if (arguments.length == 2) {
- this.last.qx = this.last.x * 2 - this.last.qx;
- this.last.qy = this.last.y * 2 - this.last.qy;
- this.last.x = (!this.isAbsolute * this.last.x) + parseFloat(arguments[2]);
- this.last.y = (!this.isAbsolute * this.last.y) + parseFloat(arguments[3]);
- res = [this.last.qx, this.last.qy, this.last.x, this.last.y];
- this.attrs.path += (this.isAbsolute ? "T" : "t") + Array.prototype.splice.call(arguments, 0, arguments.length);
- }
- var d = "c" + [
- Math.round(2 / 3 * res[0] + 1 / 3 * lx) - 1,
- Math.round(2 / 3 * res[1] + 1 / 3 * ly) - 1,
- Math.round(2 / 3 * res[0] + 1 / 3 * res[2]) - 1,
- Math.round(2 / 3 * res[1] + 1 / 3 * res[3]) - 1,
- Math.round(res[2]) - 1,
- Math.round(res[3]) - 1
- ].join(" ") + " ";
- this.node.path = this.Path += d;
- return this;
- },
- addRoundedCorner: addRoundedCorner,
- andClose: function () {
- this.node.path = (this.Path += "x");
- this.attrs.path += "z";
- return this;
}
+ return (pa + "").toLowerCase().replace(/z/g, "x");
+ };
+ R.toString = function () {
+ return "Your browser doesn\u2019t support SVG. Assuming it is Internet Explorer and falling down to VML.\nYou are running Rapha\u00ebl " + this.version;
};
var thePath = function (params, pathString, VML) {
- params = params || {};
var g = createNode("group"), gl = g.style;
gl.position = "absolute";
gl.left = 0;
p[method] = pathMethods[method];
}
- if (pathString) {
- p.absolutely();
- p.attrs.path = "";
- paper.pathfinder(p, "" + pathString);
- }
if (params) {
params.fill = params.fill || "none";
params.stroke = params.stroke || "#000";
} else {
params = {fill: "none", stroke: "#000"};
}
+ if (pathString) {
+ p.node.path = path2vml(pathString);
+ p.attrs.path = pathString;
+ }
setFillAndStroke(p, params);
if (params.gradient) {
addGradientFill(p, params.gradient);
params.title && (node.title = params.title);
params.target && (node.target = params.target);
if (params.path && o.type == "path") {
- o.Path = "";
- o.path = [];
- o.attrs.path = "";
- paper.pathfinder(o, params.path);
+ o.node.path = path2vml(params.path);
}
if (params.rotation != null) {
o.rotate(params.rotation, true);
a["font-size"] && (s.fontSize = a["font-size"]);
a["font-weight"] && (s.fontWeight = a["font-weight"]);
a["font-style"] && (s.fontStyle = a["font-style"]);
- paper.span.innerText = res.node.string;
+ paper.span.innerHTML = "";
+ paper.span.appendChild(doc.createTextNode(res.node.string));
res.W = a.w = paper.span.offsetWidth;
res.H = a.h = paper.span.offsetHeight;
res.X = a.x;
};
Element.prototype.rotate = function (deg, cx, cy) {
if (deg == null) {
+ if (this._.rt.cx) {
+ return [this._.rt.deg, this._.rt.cx, this._.rt.cy].join(" ");
+ }
return this._.rt.deg;
}
deg = (deg + "").split(separator);
} else {
this._.rt.deg += deg;
}
- if (cy == null) {
- cx = null;
- }
+ (cy == null) && (cx = null);
this._.rt.cx = cx;
this._.rt.cy = cy;
this.setBox(this.attrs, cx, cy);
if (arguments[0] == "translation") {
return this.translate();
}
+ if (arguments[0] == "rotation") {
+ return this.rotate();
+ }
+ if (arguments[0] == "scale") {
+ return this.scale();
+ }
return this.attrs[arguments[0]];
}
if (this.attrs && arguments.length == 1 && R.isArray(arguments[0])) {
g.appendChild(o);
var res = new Element(o, g, vml);
res.type = "image";
+ res.attrs.src = src;
res.attrs.x = x;
res.attrs.y = y;
res.attrs.w = w;
res.shape = el;
res.textpath = path;
res.type = "text";
+ res.attrs.text = text;
res.attrs.x = x;
res.attrs.y = y;
res.attrs.w = 1;
return theEllipse(this, x, y, rx, ry);
};
paper.path = function (params, pathString) {
+ if (typeof params == "string" && !pathString) {
+ pathString = params;
+ params = {};
+ }
+ params = params || {};
return thePath(params, pathString, this);
};
paper.image = function (src, x, y, w, h) {
}
return this.path({stroke: color, "stroke-width": 1}, path.join(","));
};
- paper.pathfinder = function (p, path) {
- var commands = {
- M: function (x, y) {
- this.moveTo(x, y);
- },
- C: function (x1, y1, x2, y2, x3, y3) {
- this.curveTo(x1, y1, x2, y2, x3, y3);
- },
- Q: function (x1, y1, x2, y2) {
- this.qcurveTo(x1, y1, x2, y2);
- },
- T: function (x, y) {
- this.qcurveTo(x, y);
- },
- S: function (x1, y1, x2, y2) {
- p.curveTo(x1, y1, x2, y2);
- },
- L: function (x, y) {
- p.lineTo(x, y);
- },
- H: function (x) {
- this.lineTo(x, this.last.y);
- },
- V: function (y) {
- this.lineTo(this.last.x, y);
- },
- A: function (rx, ry, xaxisrotation, largearcflag, sweepflag, x, y) {
- this.arcTo(rx, ry, largearcflag, sweepflag, x, y);
- },
- Z: function () {
- this.andClose();
- }
- };
-
- path = pathToAbsolute(path);
- for (var i = 0, ii = path.length; i < ii; i++) {
- var b = path[i].shift();
- commands[b].apply(p, path[i]);
- path[i].unshift(b);
- }
- };
paper.set = function (itemsArray) {
return new Set(itemsArray);
};
};
Element.prototype.scale = function (x, y, cx, cy) {
if (x == null && y == null) {
- return {x: this._.sx, y: this._.sy, toString: function () { return this.x.toFixed(3) + " " + this.y.toFixed(3); }};
+ return {x: this._.sx, y: this._.sy, toString: function () { return +this.x.toFixed(3) + " " + (+this.y.toFixed(3)); }};
}
y = y || x;
!+y && (y = x);
};
break;
case "path":
- var pathes = pathEqualiser(from[attr], to[attr]);
+ var pathes = path2curve(from[attr], to[attr]);
from[attr] = pathes[0];
to[attr] = pathes[1];
diff[attr] = [];
for (var i = 0, ii = from[attr].length; i < ii; i++) {
now[i] = [from[attr][i][0]];
for (var j = 1, jj = from[attr][i].length; j < jj; j++) {
- now[i][j] = from[attr][i][j] + pos * ms * diff[attr][i][j];
+ now[i][j] = +from[attr][i][j] + pos * ms * diff[attr][i][j];
}
now[i] = now[i].join(" ");
}
(t.x || t.y) && that.translate(-t.x, -t.y);
that.attr(params);
clearTimeout(that.animation_in_progress);
- paper.safari();
+ R.svg && paper.safari();
(typeof callback == "function") && callback.call(that);
}
prev = time;
projects / raphael / commitdiff