Skip to content

Commit

Permalink
Add some checks for right values and some small bug fixes. 0.7.1
Browse files Browse the repository at this point in the history
  • Loading branch information
Dmitry Baranovskiy authored and Dmitry Baranovskiy committed Mar 18, 2009
1 parent 7bf5840 commit 0c935da
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 45 deletions.
33 changes: 17 additions & 16 deletions raphael.js
View file
@@ -1,5 +1,5 @@
/*
* Raphael 0.7 - JavaScript Vector Library
* Raphael 0.7.1 - 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.
Expand All @@ -14,15 +14,15 @@ var Raphael = (function () {
R = function () {
return create.apply(R, arguments);
};
R.version = "0.7";
R.version = "0.7.1";
R.type = (win.SVGAngle ? "SVG" : "VML");
R.svg = !(R.vml = R.type == "VML");
R.idGenerator = 0;
var paper = {};
R.fn = {};
var availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", gradient: 0, height: 0, 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, 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"};

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.toString = function () {
return "Your browser " + (this.vml ? "doesn't ": "") + "support" + (this.svg ? "s": "") +
" SVG.\nYou are running " + unescape("Rapha%EBl%20") + this.version;
Expand Down Expand Up @@ -833,12 +833,12 @@ var Raphael = (function () {
o.rotate(value, true);
break;
case "translation":
var xy = value.split(separator);
o.translate(xy[0], xy[1]);
var xy = (value + "").split(separator);
o.translate((+xy[0] + 1 || 2) - 1, (+xy[1] + 1 || 2) - 1);
break;
case "scale":
var xy = value.split(separator);
o.scale(xy[0], xy[1]);
var xy = (value + "").split(separator);
o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1);
break;
case "fill":
var isURL = value.match(/^url\(([^\)]+)\)$/i);
Expand Down Expand Up @@ -898,7 +898,7 @@ var Raphael = (function () {
case "opacity":
case "fill-opacity":
if (o.attrs.gradient) {
var gradient = document.getElementById(o.node.getAttribute("fill").replace(/^url\(#|\)$/g, ""));
var gradient = doc.getElementById(o.node.getAttribute("fill").replace(/^url\(#|\)$/g, ""));
if (gradient) {
var stops = gradient.getElementsByTagName("stop");
stops[stops.length - 1].setAttribute("stop-opacity", value);
Expand Down Expand Up @@ -1539,11 +1539,11 @@ var Raphael = (function () {
o.rotate(params.rotation, true);
}
if (params.translation) {
var xy = params.translation.split(separator);
var xy = (params.translation + "").split(separator);
o.translate(xy[0], xy[1]);
}
if (params.scale) {
var xy = params.scale.split(separator);
var xy = (params.scale + "").split(separator);
o.scale(xy[0], xy[1]);
}
if (o.type == "image" && params.src) {
Expand All @@ -1562,7 +1562,7 @@ var Raphael = (function () {
o = o.shape || o.node;
var fill = (o.getElementsByTagName("fill") && o.getElementsByTagName("fill")[0]) || doc.createElement("rvml:fill");
if ("fill-opacity" in params || "opacity" in params) {
fill.opacity = ((params["fill-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
fill.opacity = ((+params["fill-opacity"] + 1 || 2) - 1) * ((+params.opacity + 1 || 2) - 1);
}
if (params.fill) {
fill.on = true;
Expand Down Expand Up @@ -1592,7 +1592,7 @@ var Raphael = (function () {
if (stroke.on && params.stroke) {
stroke.color = getRGB(params.stroke).hex;
}
stroke.opacity = ((params["stroke-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
stroke.opacity = ((+params["stroke-opacity"] + 1 || 2) - 1) * ((+params.opacity + 1 || 2) - 1);
params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
stroke.miterlimit = params["stroke-miterlimit"] || 8;
params["stroke-linecap"] && (stroke.endcap = {butt: "flat", square: "square", round: "round"}[params["stroke-linecap"]] || "miter");
Expand Down Expand Up @@ -2165,15 +2165,14 @@ var Raphael = (function () {
};
}
})();
var events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"];
for (var i = events.length; i--;) {
(function (eventName) {
Element.prototype[eventName] = function (fn) {
if (typeof fn == "function") {
this.events = this.events || {};
this.events[eventName] = this.events[eventName] || {};
this.events[eventName][fn] = this.events[eventName][fn] || [];
this.events[eventName][fn].push(addEvent(this.node, eventName, fn, this));
this.events[eventName][fn].push(addEvent(this.shape || this.node, eventName, fn, this));
}
return this;
};
Expand Down Expand Up @@ -2276,6 +2275,8 @@ var Raphael = (function () {
return {x: this._.sx, y: this._.sy};
}
y = y || x;
// following line is for IE, apparently NaN is not always falsy
isNaN(y) && (y = x);
var dx, dy, cx, cy;
if (x != 0) {
var dirx = Math.round(x / Math.abs(x)),
Expand Down Expand Up @@ -2411,7 +2412,7 @@ var Raphael = (function () {
from[attr] = (from2[1] == values[1] && from2[2] == values[2]) ? from2 : [0, values[1], values[2]];
diff[attr] = [(values[0] - from[attr][0]) / ms, 0, 0];
} else {
from[attr] = from[attr].split(separator);
from[attr] = (from[attr] + "").split(separator);
diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][0]) / ms];
}
to[attr] = values;
Expand Down
109 changes: 80 additions & 29 deletions reference.html
View file
Expand Up @@ -105,6 +105,12 @@ <h4>Parameters</h4>
<li>degree <em>number</em> Degree of rotation (0 – 360°)</li>
<li>isAbsolute <em>boolean</em> [optional] Specifies is degree is relative to previous position (<code>false</code>) or is it absolute angle (<code>true</code>)</li>
</ol>
<p>or</p>
<ol>
<li>degree <em>number</em> Degree of rotation (0 – 360°)</li>
<li>cx <em>number</em> [optional] X coordinate of the origin of rotation</li>
<li>cY <em>number</em> [optional] Y coordinate of the origin of rotation</li>
</ol>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
c.rotate(45); // rotation is relative
Expand Down Expand Up @@ -172,7 +178,7 @@ <h4>Possible parameters</h4>
<li>font-family <em>string</em></li>
<li>font-size <em>number</em></li>
<li>font-weight <em>string</em></li>
<li>gradient <em>object</em></li>
<li>gradient <em>object|string</em> "‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›"</li>
<li>height <em>number</em></li>
<li>opacity <em>number</em></li>
<li>path <em>pathString</em></li>
Expand All @@ -181,6 +187,7 @@ <h4>Possible parameters</h4>
<li>rx <em>number</em></li>
<li>ry <em>number</em></li>
<li>scale <em>CSV</em></li>
<li>src <em>string</em> (URL)</li>
<li>stroke <em>colour</em></li>
<li>stroke-dasharray <em>string</em> [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
<li>stroke-linecap <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
Expand Down Expand Up @@ -348,11 +355,22 @@ <h4>Parameters</h4>
</ol>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 100, 100);</code></pre>
<h3 id="set">
set
</h3>
<p>
Creates array-like object to keep and operate couple of elements at once. Warning: it doesn’t create any elements for itself in the page.
</p>
<h4>Usage</h4>
<pre class="javascript code"><code>var st = paper.set();</code>
<code>st.push(paper.circle(10, 10, 5));</code>
<code>st.push(paper.circle(30, 10, 5));</code>
<code>st.attr({fill: "red"});</code></pre>
<h3 id="text">
text
</h3>
<p>
Draws a text string.
Draws a text string. If you need line breaks, put “\n” in the string.
</p>
<h4>Parameters</h4>
<ol>
Expand Down Expand Up @@ -509,6 +527,27 @@ <h3 id="andClose">
</p>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();</code></pre>
<h3 id="setSize">
setSize
</h3>
<p>
If you need to change dimensions of the canvas call this method
</p>
<h4>Parameters</h4>
<ol>
<li>width <em>number</em> new width of the canvas</li>
<li>height <em>number</em> new height of the canvas</li>
</ol>
<h3 id="setWindow">
setWindow
</h3>
<p>
Should be called before main Raphael method. Sets which window should be used for drawing. Default is the current one. You need to use it if you want to draw inside <code>iframe</code>
</p>
<h4>Parameters</h4>
<ol>
<li>window <em>object</em></li>
</ol>
<h3 id="getColor">
getColor
</h3>
Expand Down Expand Up @@ -537,88 +576,100 @@ <h2>
</h2>
<ul id="contents">
<li>
<a href="reference.html#Raphael"><code>Raphael</code></a>
<a href="#Raphael"><code>Raphael</code></a>
</li>
<li>
<a href="#node"><code>node</code></a>
</li>
<li>
<a href="#remove"><code>remove</code></a>
</li>
<li>
<a href="reference.html#node"><code>node</code></a>
<a href="#hide"><code>hide</code></a>
</li>
<li>
<a href="reference.html#remove"><code>remove</code></a>
<a href="#show"><code>show</code></a>
</li>
<li>
<a href="reference.html#hide"><code>hide</code></a>
<a href="#rotate"><code>rotate</code></a>
</li>
<li>
<a href="reference.html#show"><code>show</code></a>
<a href="#translate"><code>translate</code></a>
</li>
<li>
<a href="reference.html#rotate"><code>rotate</code></a>
<a href="#scale"><code>scale</code></a>
</li>
<li>
<a href="reference.html#translate"><code>translate</code></a>
<a href="#attr"><code>attr</code></a>
</li>
<li>
<a href="reference.html#scale"><code>scale</code></a>
<a href="#animate"><code>animate</code></a>
</li>
<li>
<a href="reference.html#attr"><code>attr</code></a>
<a href="#getBBox"><code>getBBox</code></a>
</li>
<li>
<a href="reference.html#animate"><code>animate</code></a>
<a href="#toFront"><code>toFront</code></a>
</li>
<li>
<a href="reference.html#getBBox"><code>getBBox</code></a>
<a href="#toBack"><code>toBack</code></a>
</li>
<li>
<a href="reference.html#toFront"><code>toFront</code></a>
<a href="#circle"><code>circle</code></a>
</li>
<li>
<a href="reference.html#toBack"><code>toBack</code></a>
<a href="#rect"><code>rect</code></a>
</li>
<li>
<a href="reference.html#circle"><code>circle</code></a>
<a href="#ellipse"><code>ellipse</code></a>
</li>
<li>
<a href="reference.html#rect"><code>rect</code></a>
<a href="#image"><code>image</code></a>
</li>
<li>
<a href="reference.html#ellipse"><code>ellipse</code></a>
<a href="#set"><code>set</code></a>
</li>
<li>
<a href="reference.html#image"><code>image</code></a>
<a href="#text"><code>text</code></a>
</li>
<li>
<a href="reference.html#path"><code>path</code></a>
<a href="#path"><code>path</code></a>
<ul>
<li>
<a href="reference.html#absolutely"><code>absolutely</code></a>
<a href="#absolutely"><code>absolutely</code></a>
</li>
<li>
<a href="reference.html#relatively"><code>relatively</code></a>
<a href="#relatively"><code>relatively</code></a>
</li>
<li>
<a href="reference.html#moveTo"><code>moveTo</code></a>
<a href="#moveTo"><code>moveTo</code></a>
</li>
<li>
<a href="reference.html#lineTo"><code>lineTo</code></a>
<a href="#lineTo"><code>lineTo</code></a>
</li>
<li>
<a href="reference.html#cplineTo"><code>cplineTo</code></a>
<a href="#cplineTo"><code>cplineTo</code></a>
</li>
<li>
<a href="reference.html#curveTo"><code>curveTo</code></a>
<a href="#curveTo"><code>curveTo</code></a>
</li>
<li>
<a href="reference.html#qcurveTo"><code>qcurveTo</code></a>
<a href="#qcurveTo"><code>qcurveTo</code></a>
</li>
<li>
<a href="reference.html#addRoundedCorner"><code>addRoundedCorner</code></a>
<a href="#addRoundedCorner"><code>addRoundedCorner</code></a>
</li>
<li>
<a href="reference.html#andClose"><code>andClose</code></a>
<a href="#andClose"><code>andClose</code></a>
</li>
</ul>
</li>
<li>
<a href="#setSize"><code>setSize</code></a>
</li>
<li>
<a href="#setWindow"><code>setWindow</code></a>
</li>
<li>
<a href="#getColor"><code>getColor</code></a>
</li>
Expand Down

0 comments on commit 0c935da

Please sign in to comment.