Permalink
Browse files

Documentation fixes + custom attributes and getPointAtLength fix

  • Loading branch information...
1 parent 9ae9af8 commit 1dacaa3842e43f15092323abe678d2bba7bc6e57 @DmitryBaranovskiy committed Aug 26, 2011
Showing with 637 additions and 420 deletions.
  1. +1 −1 raphael-min.js
  2. +51 −37 raphael.core.js
  3. +6 −7 raphael.js
  4. +0 −30 raphael.svg.js
  5. +331 −345 reference.html
  6. +248 −0 reference.js
View
2 raphael-min.js
1 addition, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
View
88 raphael.core.js
@@ -99,7 +99,35 @@
was: Object.prototype[has].call(g.win, "Raphael"),
is: g.win.Raphael
},
- Paper = function () {},
+ Paper = function () {
+ /*\
+ * 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);
+ \*/
+ this.customAttributes = {};
+ },
paperproto,
appendChild = "appendChild",
apply = "apply",
@@ -332,33 +360,6 @@
| 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;
/*\
@@ -2662,7 +2663,7 @@
**
* 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);
@@ -2756,13 +2757,26 @@
[ 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:
@@ -3208,7 +3222,7 @@
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;
};
@@ -3263,7 +3277,7 @@
= (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);
View
13 raphael.js
@@ -257,7 +257,10 @@
was: Object.prototype[has].call(g.win, "Raphael"),
is: g.win.Raphael
},
- Paper = function () {},
+ Paper = function () {
+
+ this.customAttributes = {};
+ },
paperproto,
appendChild = "appendChild",
apply = "apply",
@@ -451,8 +454,6 @@
R._Paper = Paper;
R.fn = paperproto = Paper.prototype = R.prototype;
-
- paperproto.customAttributes = {};
R._id = 0;
R._oid = 0;
@@ -2366,7 +2367,7 @@
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;
};
@@ -2380,7 +2381,7 @@
R.getPointAtLength = getPointAtLength;
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);
@@ -3968,7 +3969,6 @@ window.Raphael.svg && function (R) {
Element.prototype = elproto;
elproto.constructor = Element;
-
R._engine.path = function (pathString, SVG) {
var el = $("path");
SVG.canvas && SVG.canvas.appendChild(el);
@@ -4585,7 +4585,6 @@ window.Raphael.vml && function (R) {
params.cursor && (s.cursor = params.cursor);
"blur" in params && o.blur(params.blur);
if (params.path && o.type == "path" || newpath) {
- // node.path = path2vml(a.path);
node.path = path2vml(~Str(a.path).toLowerCase().indexOf("r") ? R._pathToAbsolute(a.path) : a.path);
if (o.type == "image") {
o._.fillpos = [a.x, a.y];
View
30 raphael.svg.js
@@ -684,36 +684,6 @@ window.Raphael.svg && function (R) {
Element.prototype = elproto;
elproto.constructor = Element;
- /*\
- * Element.path
- [ method ]
- **
- * Creates a path element by given path data string.
- > Parameters
- - 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.
- *
- x <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:
- | // move to 10,10, line to 90,90
- \*/
R._engine.path = function (pathString, SVG) {
var el = $("path");
SVG.canvas && SVG.canvas.appendChild(el);
View
676 reference.html
331 additions, 345 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
248 reference.js
@@ -0,0 +1,248 @@
+Raphael(function () {
+
+ // TOC
+ (function (ol) {
+ if (!ol) {
+ return;
+ }
+ var li = document.createElement("li"),
+ isABBR = function (str, abbr) {
+ var letters = abbr.toUpperCase().split(""),
+ first = letters.shift(),
+ rg = new RegExp("^[" + first.toLowerCase() + first + "][a-z]*" + letters.join("[a-z]*") + "[a-z]*$");
+ return !!String(str).match(rg);
+ },
+ score = function (me, search) {
+ me = String(me);
+ search = String(search);
+ var score = 0,
+ chunk;
+ if (me == search) {
+ return 1;
+ }
+ if (!me || !search) {
+ return 0;
+ }
+ if (isABBR(me, search)) {
+ return .9;
+ }
+ score = 0;
+ chunk = me.toLowerCase();
+ for (var j, i = 0, ii = search.length; i < ii; i++) {
+ j = chunk.indexOf(search.charAt(i));
+ if (~j) {
+ chunk = chunk.substring(j + 1);
+ score += 1 / (j + 1);
+ }
+ }
+ score = Math.max(score / ii - Math.abs(me.length - ii) / me.length / 2, 0);
+ return score;
+ };
+ li.innerHTML = '<input type="search" id="dr-filter" results="0">';
+ var lis = ol.getElementsByTagName("span"),
+ names = [],
+ rgName = /[^\.\(]*(?=(\(\))?$)/;
+ for (var i = 0, ii = lis.length; i < ii; i++) {
+ names[i] = {
+ li: lis[i].parentNode.parentNode,
+ text: lis[i].innerHTML.match(rgName)[0]
+ };
+ }
+ ol.insertBefore(li, ol.firstChild);
+ var input = document.getElementById("dr-filter");
+ input.style.width = "100%";
+ input.style.marginTop = "10px";
+ input.onclick = input.onchange = input.onkeydown = input.onkeyup = function () {
+ var v = input.value,
+ res = [];
+ if (v.length > 1) {
+ for (var i = 0, ii = names.length; i < ii; i++) {
+ res[i] = {
+ li: names[i].li,
+ weight: score(names[i].text, v)
+ };
+ }
+ res.sort(function (a, b) {
+ return b.weight - a.weight;
+ });
+ for (i = 0, ii = res.length; i < ii; i++) {
+ ol.appendChild(res[i].li);
+ }
+ } else {
+ for (i = 0, ii = names.length; i < ii; i++) {
+ ol.appendChild(names[i].li);
+ }
+ }
+ };
+ })(document.getElementById("dr-toc"));
+
+ function prepare(id) {
+ var div = document.getElementById(id);
+ div.style.cssText = "float:right;padding:10px;width:99px;height:99px;background:#2C53B0 url(http://raphaeljs.com/blueprint-min.png) no-repeat";
+ return Raphael(div, 99, 99);
+ }
+
+ var line = {
+ stroke: "#fff",
+ "stroke-width": 2,
+ "stroke-linecap": "round",
+ "stroke-linejoin": "round"
+ },
+ dots = {
+ stroke: "#fff",
+ "stroke-width": 2,
+ "stroke-dasharray": "- ",
+ "stroke-linecap": "round",
+ "stroke-linejoin": "round"
+ },
+ fill = {
+ stroke: "#fff",
+ fill: "#fff",
+ "fill-opacity": .5,
+ "stroke-width": 2,
+ "stroke-linecap": "round",
+ "stroke-linejoin": "round"
+ },
+ none = {
+ fill: "#000",
+ opacity: 0
+ };
+ prepare("Paper.path-extra").path("M10,10R90,50 10,90").attr(line);
+
+ (function (r) {
+ var there;
+ r.circle(15, 15, 10).attr(fill).click(function () {
+ var clr = Raphael.hsb(Math.random(), .6, 1);
+ this.animate(there ? {
+ cx: 15,
+ cy: 15,
+ r: 10,
+ stroke: "#fff",
+ fill: "#fff"
+ } : {
+ cx: 80,
+ cy: 80,
+ r: 15,
+ stroke: clr,
+ fill: clr
+ }, 600, ["bounce", "<>", "elastic", ""][Math.round(Math.random() * 3)]);
+ there = !there;
+ });
+ })(prepare("Element.animate-extra"));
+
+ (function (r) {
+ var x, y;
+ r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
+ this.attr({
+ cx: Math.min(Math.max(x + dx, 15), 85),
+ cy: Math.min(Math.max(y + dy, 15), 85)
+ });
+ }, function () {
+ x = this.attr("cx");
+ y = this.attr("cy");
+ });
+
+ })(prepare("Element.drag-extra"));
+
+ (function (r) {
+ var e = r.ellipse(50, 50, 40, 30).attr(fill).click(function () {
+ this.animate({
+ transform: "r180"
+ }, 1000, function () {
+ this.attr({
+ transform: ""
+ });
+ });
+ }),
+ bb = r.rect().attr(e.getBBox()).attr(dots);
+ eve.on("anim.frame." + e.id, function (anim) {
+ bb.attr(e.getBBox());
+ });
+ })(prepare("Element.getBBox-extra"));
+
+ (function (r) {
+ var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line),
+ l = e.getTotalLength(),
+ to = 1;
+ r.customAttributes.along = function (a) {
+ var p = e.getPointAtLength(a * l);
+ return {
+ transform: "t" + [p.x, p.y] + "r" + p.alpha
+ };
+ };
+ var c = r.ellipse(0, 0, 5, 2).attr({
+ along: 0
+ }).attr(line);
+ r.rect(0, 0, 100, 100).attr(none).click(function () {
+ c.stop().animate({
+ along: to
+ }, 5000);
+ to = +!to;
+ });
+ })(prepare("Element.getPointAtLength-extra"));
+
+ (function (r) {
+ var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line),
+ l = e.getTotalLength() - 10,
+ to = 1;
+ r.customAttributes.along = function (a) {
+ return {
+ path: e.getSubpath(a * l, a * l + 11)
+ };
+ };
+ var c = r.path().attr(line).attr({
+ along: 0,
+ stroke: "#f00",
+ "stroke-width": 3
+ });
+ r.rect(0, 0, 100, 100).attr(none).click(function () {
+ c.stop().animate({
+ along: to
+ }, 5000);
+ to = +!to;
+ });
+ })(prepare("Element.getSubpath-extra"));
+
+ (function (r) {
+ r.circle(50, 50, 40).attr(line).glow({color: "#fff"});
+ })(prepare("Element.glow-extra"));
+
+ (function (r) {
+ r.rect(10, 10, 40, 30).attr(dots);
+ r.rect(10, 10, 40, 30).attr(line).transform("r-30, 50, 10t10, 20s1.5");
+ r.text(50, 90, "r-30, 50, 10\nt10, 20s1.5").attr({fill: "#fff"});
+ })(prepare("Element.transform-extra"));
+
+ (function (r) {
+ r.circle(50, 50, 40).attr(line);
+ })(prepare("Paper.circle-extra"));
+
+ (function (r) {
+ r.ellipse(50, 50, 40, 30).attr(line);
+ })(prepare("Paper.ellipse-extra"));
+
+ (function (r) {
+ r.rect(10, 10, 50, 50).attr(line);
+ r.rect(40, 40, 50, 50, 10).attr(line);
+ })(prepare("Paper.rect-extra"));
+
+ (function (r) {
+ var set = r.set(
+ r.rect(10, 10, 50, 50).attr(fill),
+ r.rect(40, 40, 50, 50, 10).attr(fill)
+ ).hover(function () {
+ set.stop().animate({stroke: "#f00"}, 600, "<>");
+ }, function () {
+ set.stop().animate({stroke: "#fff"}, 600, "<>");
+ });
+ })(prepare("Paper.set-extra"));
+
+ (function (r) {
+ r.text(50, 50, "Raphaël\nkicks\nbutt!").attr({
+ fill: "#fff",
+ font: "italic 20px Georgia",
+ transform: "r-10"
+ });
+ })(prepare("Paper.text-extra"));
+
+});

0 comments on commit 1dacaa3

Please sign in to comment.