was: Object.prototype[has].call(g.win, "Raphael"),
is: g.win.Raphael
},
- Paper = function () {},
+ Paper = function () {
+ /*\
+ * Paper.ca
+ [ property (object) ]
+ **
+ * Shortcut for @Paper.customAttributes
+ \*/
+ /*\
+ * Paper.customAttributes
+ [ property (object) ]
+ **
+ * If you have a set of attributes that you would like to represent
+ * as a function of some number you can do it easily with custom attributes:
+ > Usage
+ | paper.customAttributes.hue = function (num) {
+ | num = num % 1;
+ | return {fill: "hsb(" + num + ", 0.75, 1)"};
+ | };
+ | // Custom attribute “hue” will change fill
+ | // to be given hue with fixed saturation and brightness.
+ | // Now you can use it like this:
+ | var c = paper.circle(10, 10, 10).attr({hue: .45});
+ | // or even like this:
+ | c.animate({hue: 1}, 1e3);
+ |
+ | // You could also create custom attribute
+ | // with multiple parameters:
+ | paper.customAttributes.hsb = function (h, s, b) {
+ | return {fill: "hsb(" + [h, s, b].join(",") + ")"};
+ | };
+ | c.attr({hsb: "0.5 .8 1"});
+ | c.animate({hsb: [1, 0, 0.5]}, 1e3);
+ \*/
+ this.ca = this.customAttributes = {};
+ },
paperproto,
appendChild = "appendChild",
apply = "apply",
S = " ",
Str = String,
split = "split",
- events = "click dblclick mousedown mousemove mouseout mouseover mouseup touchstart touchmove touchend touchcancel".split(S),
+ events = "click dblclick mousedown mousemove mouseout mouseover mouseup touchstart touchmove touchend touchcancel"[split](S),
touchMap = {
mousedown: "touchstart",
mousemove: "touchmove",
return rectPath(bbox.x, bbox.y, bbox.width, bbox.height);
}
},
- mapPath = function (path, matrix) {
+ mapPath = R.mapPath = function (path, matrix) {
if (!matrix) {
return path;
}
| paper.mystuff.star();
\*/
R.fn = paperproto = Paper.prototype = R.prototype;
- /*\
- * Paper.customAttributes
- [ property (object) ]
- **
- * If you have a set of attributes that you would like to represent
- * as a function of some number you can do it easily with custom attributes:
- > Usage
- | paper.customAttributes.hue = function (num) {
- | num = num % 1;
- | return {fill: "hsb(" + num + ", .75, 1)"};
- | };
- | // Custom attribute “hue” will change fill
- | // to be given hue with fixed saturation and brightness.
- | // Now you can use it like this:
- | var c = paper.circle(10, 10, 10).attr({hue: .45});
- | // or even like this:
- | c.animate({hue: 1}, 1e3);
- |
- | // You could also create custom attribute
- | // with multiple parameters:
- | paper.customAttributes.hsb = function (h, s, b) {
- | return {fill: "hsb(" + [h, s, b].join(",") + ")"};
- | };
- | c.attr({hsb: ".5 .8 1"});
- | c.animate({hsb: "1 0 .5"}, 1e3);
- \*/
- paperproto.customAttributes = {};
R._id = 0;
R._oid = 0;
/*\
return o instanceof Array;
}
return (type == "null" && o === null) ||
- (type == typeof o) ||
+ (type == typeof o && o !== null) ||
(type == "object" && o === Object(o)) ||
(type == "array" && Array.isArray && Array.isArray(o)) ||
objectToString.call(o).slice(8, -1).toLowerCase() == type;
return value;
};
- var createUUID = R._createUUID = (function (uuidRegEx, uuidReplacer) {
+ /*\
+ * Raphael.createUUID
+ [ method ]
+ **
+ * Returns RFC4122, version 4 ID
+ \*/
+ var createUUID = R.createUUID = (function (uuidRegEx, uuidReplacer) {
return function () {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(uuidRegEx, uuidReplacer).toUpperCase();
};
red = toInt((t = rgb[3].charAt(1)) + t, 16);
}
if (rgb[4]) {
- values = rgb[4].split(commaSpaces);
+ values = rgb[4][split](commaSpaces);
red = toFloat(values[0]);
values[0].slice(-1) == "%" && (red *= 2.55);
green = toFloat(values[1]);
values[3] && values[3].slice(-1) == "%" && (opacity /= 100);
}
if (rgb[5]) {
- values = rgb[5].split(commaSpaces);
+ values = rgb[5][split](commaSpaces);
red = toFloat(values[0]);
values[0].slice(-1) == "%" && (red *= 2.55);
green = toFloat(values[1]);
return R.hsb2rgb(red, green, blue, opacity);
}
if (rgb[6]) {
- values = rgb[6].split(commaSpaces);
+ values = rgb[6][split](commaSpaces);
red = toFloat(values[0]);
values[0].slice(-1) == "%" && (red *= 2.55);
green = toFloat(values[1]);
c.replace(pathValues, function (a, b) {
b && params.push(+b);
});
- data.push([name][concat](params));
+ data.push([b][concat](params));
});
}
data.toString = R._path2string;
if (recursive) {
return [m2, m3, m4][concat](res);
} else {
- res = [m2, m3, m4][concat](res).join().split(",");
+ res = [m2, m3, m4][concat](res).join()[split](",");
var newres = [];
for (var i = 0, ii = res.length; i < ii; i++) {
newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x;
for (var i = 0, ii = tdata.length; i < ii; i++) {
var t = tdata[i],
tlen = t.length,
+ command = Str(t[0]).toLowerCase(),
+ absolute = t[0] != command,
+ inver = absolute ? m.invert() : 0,
+ x1,
+ y1,
+ x2,
+ y2,
bb;
- t[0] = Str(t[0]).toLowerCase();
- if (t[0] == "t" && tlen == 3) {
- m.translate(t[1], t[2]);
- } else if (t[0] == "r") {
+ if (command == "t" && tlen == 3) {
+ if (absolute) {
+ x1 = inver.x(0, 0);
+ y1 = inver.y(0, 0);
+ x2 = inver.x(t[1], t[2]);
+ y2 = inver.y(t[1], t[2]);
+ m.translate(x2 - x1, y2 - y1);
+ } else {
+ m.translate(t[1], t[2]);
+ }
+ } else if (command == "r") {
if (tlen == 2) {
bb = bb || el.getBBox(1);
m.rotate(t[1], bb.x + bb.width / 2, bb.y + bb.height / 2);
deg += t[1];
} else if (tlen == 4) {
- m.rotate(t[1], t[2], t[3]);
+ if (absolute) {
+ x2 = inver.x(t[2], t[3]);
+ y2 = inver.y(t[2], t[3]);
+ m.rotate(t[1], x2, y2);
+ } else {
+ m.rotate(t[1], t[2], t[3]);
+ }
deg += t[1];
}
- } else if (t[0] == "s") {
+ } else if (command == "s") {
if (tlen == 2 || tlen == 3) {
bb = bb || el.getBBox(1);
m.scale(t[1], t[tlen - 1], bb.x + bb.width / 2, bb.y + bb.height / 2);
sx *= t[1];
sy *= t[tlen - 1];
} else if (tlen == 5) {
- m.scale(t[1], t[2], t[3], t[4]);
+ if (absolute) {
+ x2 = inver.x(t[3], t[4]);
+ y2 = inver.y(t[3], t[4]);
+ m.scale(t[1], t[2], x2, y2);
+ } else {
+ m.scale(t[1], t[2], t[3], t[4]);
+ }
sx *= t[1];
sy *= t[2];
}
- } else if (t[0] == "m" && tlen == 7) {
+ } else if (command == "m" && tlen == 7) {
m.add(t[1], t[2], t[3], t[4], t[5], t[6]);
}
_.dirtyT = 1;
}
},
getEmpty = function (item) {
- switch (item[0]) {
- case "t": return ["t", 0, 0];
- case "m": return ["m", 1, 0, 0, 1, 0, 0];
+ var l = item[0];
+ switch (l.toLowerCase()) {
+ case "t": return [l, 0, 0];
+ case "m": return [l, 1, 0, 0, 1, 0, 0];
case "r": if (item.length == 4) {
- return ["r", 0, item[2], item[3]];
+ return [l, 0, item[2], item[3]];
} else {
- return ["r", 0];
+ return [l, 0];
}
case "s": if (item.length == 5) {
- return ["s", 1, 1, item[3], item[4]];
+ return [l, 1, 1, item[3], item[4]];
} else if (item.length == 3) {
- return ["s", 1, 1];
+ return [l, 1, 1];
} else {
- return ["s", 1];
+ return [l, 1];
}
}
},
tt1 = t1[i] || getEmpty(t2[i]);
tt2 = t2[i] || getEmpty(tt1);
if ((tt1[0] != tt2[0]) ||
- (tt1[0] == "r" && (tt1[2] != tt2[2] || tt1[3] != tt2[3])) ||
- (tt1[0] == "s" && (tt1[3] != tt2[3] || tt1[4] != tt2[4]))
+ (tt1[0].toLowerCase() == "r" && (tt1[2] != tt2[2] || tt1[3] != tt2[3])) ||
+ (tt1[0].toLowerCase() == "s" && (tt1[3] != tt2[3] || tt1[4] != tt2[4]))
) {
return;
}
* Return transform string that represents given matrix
= (string) transform string
\*/
- matrixproto.toTransformString = function () {
- var s = this.split();
+ matrixproto.toTransformString = function (shorter) {
+ var s = shorter || this[split]();
if (s.isSimple) {
return "t" + [s.dx, s.dy] + "s" + [s.scalex, s.scaley, 0, 0] + "r" + [s.rotate, 0, 0];
} else {
**
* Shortcut for assigning event handler for `drag.over.<id>` event, where id is id of the element (see @Element.id).
> Parameters
- - f (function) handler for event
+ - f (function) handler for event, first argument would be the element you are dragging over
\*/
elproto.onDragOver = function (f) {
f ? eve.on("drag.over." + this.id, f) : eve.unbind("drag.over." + this.id);
[ method ]
**
* Creates a path element by given path data string.
- **
> Parameters
- **
- - pathString (string) path data in SVG path string format.
- = (object) Raphaël element object with type “path”
- # Details of a path's data attribute's format are described in the <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG specification</a>.
- **
+ - pathString (string) #optional path string in SVG format.
+ * Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example:
+ | "M10,20L30,40"
+ * Here we can see two commands: “M”, with arguments `(10, 20)` and “L” with arguments `(30, 40)`. Upper case letter mean command is absolute, lower case—relative.
+ *
+ # <p>Here is short list of commands available, for more details see <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a>.</p>
+ # <table><thead><tr><th>Command</th><th>Name</th><th>Parameters</th></tr></thead><tbody>
+ # <tr><td>M</td><td>moveto</td><td>(x y)+</td></tr>
+ # <tr><td>Z</td><td>closepath</td><td>(none)</td></tr>
+ # <tr><td>L</td><td>lineto</td><td>(x y)+</td></tr>
+ # <tr><td>H</td><td>horizontal lineto</td><td>x+</td></tr>
+ # <tr><td>V</td><td>vertical lineto</td><td>y+</td></tr>
+ # <tr><td>C</td><td>curveto</td><td>(x1 y1 x2 y2 x y)+</td></tr>
+ # <tr><td>S</td><td>smooth curveto</td><td>(x2 y2 x y)+</td></tr>
+ # <tr><td>Q</td><td>quadratic Bézier curveto</td><td>(x1 y1 x y)+</td></tr>
+ # <tr><td>T</td><td>smooth quadratic Bézier curveto</td><td>(x y)+</td></tr>
+ # <tr><td>A</td><td>elliptical arc</td><td>(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+</td></tr>
+ # <tr><td>R</td><td><a href="http://en.wikipedia.org/wiki/Catmull–Rom_spline#Catmull.E2.80.93Rom_spline">Catmull-Rom curveto</a>*</td><td>x1 y1 (x y)+</td></tr></tbody></table>
+ * * “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier.
> Usage
| var c = paper.path("M10 10L90 90");
| // draw a diagonal line:
if (this.removed) {
return null;
}
- return this.paper[this.type]().attr(this.attr());
+ var out = this.paper[this.type]().attr(this.attr());
+ this.__set__ && this.__set__.push(out);
+ return out;
};
/*\
* Element.glow
sp += p.shift() + p;
}
subpaths.end = sp;
- point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], 1);
+ point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha});
return point;
};
= (string) pathstring for the segment
\*/
R.getSubpath = function (path, from, to) {
- if (abs(this.getTotalLength(path) - to) < 1e-6) {
+ if (this.getTotalLength(path) - to < 1e-6) {
return getSubpathsAtLength(path, from).end;
}
var a = getSubpathsAtLength(path, to, 1);
t = e.t,
that = e.el,
set = {},
- now;
+ now,
+ init = {},
+ key;
if (e.initstatus) {
time = (e.initstatus * e.anim.top - e.prev) / (e.percent - e.prev) * ms;
e.status = e.initstatus;
}
break;
default:
- var from2 = [].concat(from[attr]);
+ var from2 = [][concat](from[attr]);
now = [];
i = that.paper.customAttributes[attr].length;
while (i--) {
that.attr(to);
animationElements.splice(l--, 1);
if (e.repeat > 1 && !e.next) {
+ for (key in to) if (to[has](key)) {
+ init[key] = e.totalOrigin[key];
+ }
+ e.el.attr(init);
runAnimation(e.anim, e.el, e.anim.percents[0], null, e.totalOrigin, e.repeat - 1);
}
if (e.next && !e.stop) {
- delay (number) number of ms to pass between animation start and actual animation
**
= (object) new altered Animation object
+ | var anim = Raphael.animation({cx: 10, cy: 20}, 2e3);
+ | circle1.animate(anim); // run the given animation immediately
+ | circle2.animate(anim.delay(500)); // run the given animation after 500 ms
\*/
Animation.prototype.delay = function (delay) {
var a = new Animation(this.anim, this.ms);
}
break;
case "csv":
- var values = Str(params[attr]).split(separator),
- from2 = Str(from[attr]).split(separator);
+ var values = Str(params[attr])[split](separator),
+ from2 = Str(from[attr])[split](separator);
if (attr == "clip-rect") {
from[attr] = from2;
diff[attr] = [];
to[attr] = values;
break;
default:
- values = [].concat(params[attr]);
- from2 = [].concat(from[attr]);
+ values = [][concat](params[attr]);
+ from2 = [][concat](from[attr]);
diff[attr] = [];
i = element.paper.customAttributes[attr].length;
while (i--) {
\*/
setproto.forEach = function (callback, thisArg) {
for (var i = 0, ii = this.items.length; i < ii; i++) {
- if (callback.call(thisArg, this.items[i]) === false) {
+ if (callback.call(thisArg, this.items[i], i) === false) {
return this;
}
}
= (boolean) `true` if object was found & removed from the set
\*/
setproto.exclude = function (el) {
- for (var i = 0, ii = this.length, found; i < ii; i++) if (found || this[i] == el) {
- this[i] = this[i + 1];
- found = 1;
- }
- if (found) {
- this.length--;
- delete this[i];
+ for (var i = 0, ii = this.length; i < ii; i++) if (this[i] == el) {
+ this.splice(i, 1);
return true;
}
};
origin = origin || "middle"; // baseline|middle
letter_spacing = mmax(mmin(letter_spacing || 0, 1), -1);
var out = this.set(),
- letters = Str(string).split(E),
+ letters = Str(string)[split](E),
shift = 0,
path = E,
scale;
R.is(font, string) && (font = this.getFont(font));
if (font) {
scale = (size || 16) / font.face["units-per-em"];
- var bb = font.face.bbox.split(separator),
+ var bb = font.face.bbox[split](separator),
top = +bb[0],
height = +bb[1] + (origin == "baseline" ? bb[3] - bb[1] + (+font.face.descent) : (bb[3] - bb[1]) / 2);
for (var i = 0, ii = letters.length; i < ii; i++) {
projects / raphael / blobdiff