Add some checks for right values and some small bug fixes. 0.7.1

0c935da0 · Dmitry Baranovskiy · 7bf58408 · 0c935da0 · 0c935da0
Commit 0c935da0 authored Mar 19, 2009 by Dmitry Baranovskiy
Hide whitespace changes
Inline Side-by-side

Showing with 97 additions and 45 deletions

raphael.js
+17 -16

reference.html
+80 -29

No files found.
--- a/raphael.js
+++ b/raphael.js
 /*
- * 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.
@@ -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;
@@ -833,12 +833,12 @@ var Raphael = (function () {
                        o.rotate(value, true);
                        break;
                    case "translation":
-                        var xy = value.split(separator);
+                        var xy = (value + "").split(separator);
-                        o.translate(xy[0], xy[1]);
+                        o.translate((+xy[0] + 1 || 2) - 1, (+xy[1] + 1 || 2) - 1);
                        break;
                    case "scale":
-                        var xy = value.split(separator);
+                        var xy = (value + "").split(separator);
-                        o.scale(xy[0], xy[1]);
+                        o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1);
                        break;
                    case "fill":
                        var isURL = value.match(/^url\(([^\)]+)\)$/i);
@@ -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);
@@ -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) {
@@ -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;
@@ -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");
@@ -2165,7 +2165,6 @@ 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) {
@@ -2173,7 +2172,7 @@ var Raphael = (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;
            };
@@ -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)),
@@ -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;

--- a/reference.html
+++ b/reference.html
@@ -105,6 +105,12 @@ c.show();</code></pre>
                            <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
@@ -172,7 +178,7 @@ c.scale(.5, .75);  // makes the circle half as wide, and 75% as high</code></pre
                            <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>
@@ -181,6 +187,7 @@ c.scale(.5, .75);  // makes the circle half as wide, and 75% as high</code></pre
                            <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>
@@ -348,11 +355,22 @@ c.attr({fill: "#000", stroke: "#f00", opacity: 0.5}); // using params object</co
                        </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>
@@ -509,6 +527,27 @@ var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
                        </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>
@@ -537,89 +576,101 @@ var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);</code></pre>
                        </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>
                            <li>