Add some checks for right values and some small bug fixes. 0.7.1
[raphael] / raphael.js
index f22c6f6..bde0737 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Raphael 0.7.dev - 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.dev";
+    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: '16px "Arial"', "font-family": '"Arial"', "font-size": "16", 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"};
-
+    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"},
+        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;
@@ -309,7 +309,7 @@ var Raphael = (function () {
             switch (res[i][0]) {
                 case "z":
                     break;
-                case "h": 
+                case "h":
                     x += res[i][res[i].length - 1];
                     break;
                 case "v":
@@ -328,7 +328,9 @@ var Raphael = (function () {
         if (typeof pathArray == "string") {
             pathArray = R.parsePathString(pathArray);
         }
-        var x = 0, y = 0, start = 0;
+        var x = 0,
+            y = 0,
+            start = 0;
         if (pathArray[0][0] == "M") {
             x = +pathArray[0][1];
             y = +pathArray[0][2];
@@ -337,8 +339,8 @@ var Raphael = (function () {
         }
         for (var i = start, ii = pathArray.length; i < ii; i++) {
             res[i] = [];
-            if (pathArray[i][0] != pathArray[i][0].toUpperCase()) {
-                res[i][0] = pathArray[i][0].toUpperCase();
+            if (pathArray[i][0] != (pathArray[i][0] + "").toUpperCase()) {
+                res[i][0] = (pathArray[i][0] + "").toUpperCase();
                 switch (res[i][0]) {
                     case "A":
                         res[i][1] = pathArray[i][1];
@@ -363,7 +365,7 @@ var Raphael = (function () {
             switch (res[i][0]) {
                 case "Z":
                     break;
-                case "H": 
+                case "H":
                     x = res[i][1];
                     break;
                 case "V":
@@ -472,7 +474,7 @@ var Raphael = (function () {
     };
     var toGradient = function (gradient) {
         if (typeof gradient == "string") {
-            gradient = gradient.split(/\s*\/\s*/);
+            gradient = gradient.split(/\s*\-\s*/);
             var angle = gradient.shift();
             if (angle.toLowerCase() == "v") {
                 angle = 90;
@@ -827,22 +829,16 @@ var Raphael = (function () {
                     case "stroke-dasharray":
                         addDashes(o, value);
                         break;
-                    case "text":
-                        if (o.type == "text") {
-                            o.node.childNodes.length && o.node.removeChild(o.node.firstChild);
-                            o.node.appendChild(doc.createTextNode(value));
-                        }
-                        break;
                     case "rotation":
                         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);
@@ -902,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);
@@ -919,6 +915,44 @@ var Raphael = (function () {
                         break;
                 }
             }
+            tuneText(o, params);
+        };
+        var leading = 1.2;
+        var tuneText = function (element, params) {
+            if (element.type != "text" || !("text" in params || "font" in params || "font-size" in params || "x" in params)) {
+                return;
+            }
+            var fontSize = element.node.firstChild ? parseInt(doc.defaultView.getComputedStyle(element.node.firstChild, "").getPropertyValue("font-size"), 10) : 10;
+            var height = 0;
+
+            if ("text" in params) {
+                while (element.node.firstChild) {
+                    element.node.removeChild(element.node.firstChild);
+                }
+                var texts = (params.text + "").split("\n");
+                for (var i = 0, ii = texts.length; i < ii; i++) {
+                    var tspan = doc.createElementNS(element.svg.svgns, "tspan");
+                    i && tspan.setAttribute("dy", fontSize * leading);
+                    i && tspan.setAttribute("x", element.attrs.x);
+                    tspan.appendChild(doc.createTextNode(texts[i]));
+                    element.node.appendChild(tspan);
+                    height += fontSize * leading;
+                }
+            } else {
+                var texts = element.node.getElementsByTagName("tspan");
+                for (var i = 0, ii = texts.length; i < ii; i++) {
+                    i && texts[i].setAttribute("dy", fontSize * leading);
+                    i && texts[i].setAttribute("x", element.attrs.x);
+                    height += fontSize * leading;
+                }
+            }
+            height -= fontSize * (leading - 1);
+            var dif = height / 2 - fontSize;
+            if (dif) {
+                element.node.setAttribute("y", element.attrs.y - dif);
+            }
+            setTimeout(function () {
+            });
         };
         var Element = function (node, svg) {
             var X = 0,
@@ -950,7 +984,7 @@ var Raphael = (function () {
                 case "rect":
                 case "image":
                 case "text":
-                    this.attr({x: this.attrs.x + x, y: this.attrs.y + y});
+                    this.attr({x: this.attrs.x + +x, y: this.attrs.y + +y});
                     break;
                 case "path":
                     var path = pathToRelative(this.attrs.path);
@@ -1142,9 +1176,6 @@ var Raphael = (function () {
             el.setAttribute("x", x);
             el.setAttribute("y", y);
             el.setAttribute("text-anchor", "middle");
-            if (text) {
-                el.appendChild(doc.createTextNode(text));
-            }
             if (svg.canvas) {
                 svg.canvas.appendChild(el);
             }
@@ -1153,7 +1184,7 @@ var Raphael = (function () {
             res.attrs.x = x;
             res.attrs.y = y;
             res.type = "text";
-            setFillAndStroke(res, {font: '10px "Arial"', stroke: "none", fill: "#000"});
+            setFillAndStroke(res, {font: availableAttrs.font, stroke: "none", fill: "#000", text: text});
             return res;
         };
         var theGroup = function (svg) {
@@ -1508,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) {
@@ -1531,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;
@@ -1561,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");
@@ -1712,7 +1743,7 @@ var Raphael = (function () {
             cy = cy || this._.rt.cy;
             var attr = this.attrs, x, y, w, h;
             switch (this.type) {
-                case "circle": 
+                case "circle":
                     x = attr.cx - attr.r;
                     y = attr.cy - attr.r;
                     w = h = attr.r * 2;
@@ -1975,7 +2006,7 @@ var Raphael = (function () {
             res.attrs.y = y;
             res.attrs.w = 1;
             res.attrs.h = 1;
-            setFillAndStroke(res, {font: '10px "Arial"', stroke: "none", fill: "#000"});
+            setFillAndStroke(res, {font: availableAttrs.font, stroke: "none", fill: "#000"});
             return res;
         };
         var setSize = function (width, height) {
@@ -2098,25 +2129,63 @@ var Raphael = (function () {
     var addEvent = (function () {
         if (doc.addEventListener) {
             return function (obj, type, fn, element) {
-                obj.addEventListener(type, function (e) {
+                var f = function (e) {
                     return fn.call(element, e);
-                }, false);
+                };
+                obj.addEventListener(type, f, false);
+                return function () {
+                    obj.removeEventListener(type, f, false);
+                    return true;
+                };
             };
         } else if (doc.attachEvent) {
             return function (obj, type, fn, element) {
-                obj.attachEvent("on" + type, function (e) {
+                var f = function (e) {
                     return fn.call(element, e || win.event);
-                });
+                };
+                obj.attachEvent("on" + type, f);
+                var detacher = function () {
+                    obj.detachEvent("on" + type, f);
+                    return true;
+                };
+                if (type == "mouseover") {
+                    obj.attachEvent("onmouseenter", f);
+                    return function () {
+                        obj.detachEvent("onmouseenter", f);
+                        return detacher();
+                    };
+                } else if (type == "mouseout") {
+                    obj.attachEvent("onmouseleave", f);
+                    return function () {
+                        obj.detachEvent("onmouseleave", f);
+                        return detacher();
+                    };
+                }
+                return detacher;
             };
         }
     })();
-    var events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"];
     for (var i = events.length; i--;) {
         (function (eventName) {
             Element.prototype[eventName] = function (fn) {
-                (typeof fn == "function") && addEvent(this.node, eventName, fn, this);
+                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.shape || this.node, eventName, fn, this));
+                }
                 return this;
             };
+            Element.prototype["un" + eventName] = function (fn) {
+                this.events &&
+                this.events[eventName] &&
+                this.events[eventName][fn] &&
+                this.events[eventName][fn].length &&
+                this.events[eventName][fn].shift()() &&
+                !this.events[eventName][fn].length &&
+                delete this.events[eventName][fn];
+            };
+
         })(events[i]);
     }
     paper.circle = function (x, y, r) {
@@ -2206,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)),
@@ -2259,7 +2330,7 @@ var Raphael = (function () {
                     });
                     break;
                 case "path":
-                    var path = pathToRelative(Raphael.parsePathString(this.attr("path"))), 
+                    var path = pathToRelative(Raphael.parsePathString(this.attr("path"))),
                         skip = true,
                         dim = pathDimensions(this.attrs.path),
                         dx = -dim.width * (x - 1) / 2,
@@ -2285,7 +2356,7 @@ var Raphael = (function () {
                     path = pathToRelative(path);
                     path[0][1] += dx;
                     path[0][2] += dy;
-                    
+
                     this.attr({path: path.join(" ")});
             }
         }
@@ -2341,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;