Refactor getLength & getPointAtLength again
[raphael] / raphael.js
index 7f02c80..3f74da0 100644 (file)
@@ -4,8 +4,8 @@
  * Copyright (c) 2008 - 2009 Dmitry Baranovskiy (http://raphaeljs.com)
  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
  */
-
-
 window.Raphael = (function () {
     var separator = /[, ]+/,
         elements = /^(circle|rect|path|ellipse|text|image)$/,
@@ -219,7 +219,7 @@ window.Raphael = (function () {
         }
         return newf;
     }
-
     R.getRGB = cacher(function (colour) {
         if (!colour || !!((colour = colour + E).indexOf("-") + 1)) {
             return {r: -1, g: -1, b: -1, hex: "none", error: 1};
@@ -325,7 +325,7 @@ window.Raphael = (function () {
         data[toString] = R._path2string;
         return data;
     });
-    R.findDotsAtSegment = cacher(function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+    R.findDotsAtSegment = function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
         var t1 = 1 - t,
             x = pow(t1, 3) * p1x + pow(t1, 2) * 3 * t * c1x + t1 * 3 * t * t * c2x + pow(t, 3) * p2x,
             y = pow(t1, 3) * p1y + pow(t1, 2) * 3 * t * c1y + t1 * 3 * t * t * c2y + pow(t, 3) * p2y,
@@ -336,9 +336,10 @@ window.Raphael = (function () {
             ax = (1 - t) * p1x + t * c1x,
             ay = (1 - t) * p1y + t * c1y,
             cx = (1 - t) * c2x + t * p2x,
-            cy = (1 - t) * c2y + t * p2y;
-        return {x: x, y: y, m: {x: mx, y: my}, n: {x: nx, y: ny}, start: {x: ax, y: ay}, end: {x: cx, y: cy}};
-    });
+            cy = (1 - t) * c2y + t * p2y,
+            alpha = (90 - math.atan((mx - nx) / (my - ny)) * 180 / math.PI) % 360;
+        return {x: x, y: y, m: {x: mx, y: my}, n: {x: nx, y: ny}, start: {x: ax, y: ay}, end: {x: cx, y: cy}, alpha: alpha};
+    };
     var pathDimensions = cacher(function (path) {
         if (!path) {
             return {x: 0, y: 0, width: 0, height: 0};
@@ -581,7 +582,7 @@ window.Raphael = (function () {
                     cy = k * -ry * x / rx + (y1 + y2) / 2,
                     f1 = math.asin(((y1 - cy) / ry).toFixed(7)),
                     f2 = math.asin(((y2 - cy) / ry).toFixed(7));
-
                 f1 = x1 < cx ? PI - f1 : f1;
                 f2 = x2 < cx ? PI - f2 : f2;
                 f1 < 0 && (f1 = PI * 2 + f1);
@@ -906,7 +907,7 @@ window.Raphael = (function () {
             };
         },
         radial_gradient = /^r(?:\(([^,]+?)\s*,\s*([^\)]+?)\))?/;
-
     // SVG
     if (R.svg) {
         Paper[proto].svgns = "http://www.w3.org/2000/svg";
@@ -1200,7 +1201,7 @@ window.Raphael = (function () {
                             $(ig, {x: 0, y: 0});
                             ig.setAttributeNS(o.paper.xlink, "href", isURL[1]);
                             el[appendChild](ig);
-
                             var img = doc.createElement("img");
                             img.style.cssText = "position:absolute;left:-9999em;top-9999em";
                             img.onload = function () {
@@ -1275,7 +1276,7 @@ window.Raphael = (function () {
             var a = el.attrs,
                 node = el.node,
                 fontSize = node.firstChild ? toInt(doc.defaultView.getComputedStyle(node.firstChild, E).getPropertyValue("font-size"), 10) : 10;
-
             if (params[has]("text")) {
                 a.text = params.text;
                 while (node.firstChild) {
@@ -1497,19 +1498,19 @@ window.Raphael = (function () {
             insertbefore(this, element, this.paper);
             return this;
         };
-        Element[proto].getTotalLength = function () {
-            if (this.type != "path") {
-                return -1;
-            }
-            return this.node.getTotalLength();
-        };
-        Element[proto].getPointAtLength = function (length) {
-            if (this.type != "path") {
-                return -1;
-            }
-            var point = this.node.getPointAtLength(length);
-            return {x: point.x, y: point.y};
-        };
+        // Element[proto].getTotalLength = function () {
+        //     if (this.type != "path") {
+        //         return -1;
+        //     }
+        //     return this.node.getTotalLength();
+        // };
+        // Element[proto].getPointAtLength = function (length) {
+        //     if (this.type != "path") {
+        //         return -1;
+        //     }
+        //     var point = this.node.getPointAtLength(length);
+        //     return {x: point.x, y: point.y};
+        // };
         var theCircle = function (svg, x, y, r) {
             x = round(x);
             y = round(y);
@@ -1624,7 +1625,7 @@ window.Raphael = (function () {
             }
         };
     }
-
     // VML
     if (R.vml) {
         var path2vml = function (path) {
@@ -1656,16 +1657,6 @@ window.Raphael = (function () {
                 res[push](r);
             }
             return res[join](S);
-        },
-        segmentLength = function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
-            var old = {x: 0, y: 0},
-                len = 0;
-            for (var i = 0; i < 1.01; i+=.01) {
-                var dot = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, i);
-                i && (len += math.sqrt(pow(old.x - dot.x, 2) + pow(old.y - dot.y, 2)));
-                old = dot;
-            }
-            return len;
         };
         
         R[toString] = function () {
@@ -1857,7 +1848,7 @@ window.Raphael = (function () {
                 res.H = a.h = res.paper.span.offsetHeight;
                 res.X = a.x;
                 res.Y = a.y + round(res.H / 2);
-
                 // text-anchor emulationm
                 switch (a["text-anchor"]) {
                     case "start":
@@ -2224,49 +2215,7 @@ window.Raphael = (function () {
             insertbefore(this, element, this.paper);
             return this;
         };
-        Element[proto].getTotalLength = function () {
-            if (this.type != "path") {
-                return -1;
-            }
-            var path = path2curve(this.attrs.path), x, y, p,
-                len = 0;
-            for (var i = 0, ii = path.length; i < ii; i++) {
-                p = path[i];
-                if (p[0] == "M") {
-                    x = +p[1];
-                    y = +p[2];
-                } else {
-                    len += segmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
-                    x = +p[5];
-                    y = +p[6];
-                }
-            }
-            return len;
-        };
-        Element[proto].getPointAtLength = function (length) {
-            if (this.type != "path") {
-                return -1;
-            }
-            var path = path2curve(this.attrs.path), x, y, p, l,
-                len = 0;
-            for (var i = 0, ii = path.length; i < ii; i++) {
-                p = path[i];
-                if (p[0] == "M") {
-                    x = +p[1];
-                    y = +p[2];
-                } else {
-                    l = segmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
-                    if (len + l > length) {
-                        return findDotAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], (length - len) / l);
-                    }
-                    len += l;
-                    x = +p[5];
-                    y = +p[6];
-                }
-            }
-            return {x: x, y: y};
-        };
-
         var theCircle = function (vml, x, y, r) {
             var g = createNode("group"),
                 o = createNode("oval"),
@@ -2439,6 +2388,9 @@ window.Raphael = (function () {
         };
         Paper[proto].clear = function () {
             this.canvas.innerHTML = E;
+            this.span = doc.createElement("span");
+            this.span.style.cssText = "position:absolute;left:-9999px;top:-9999px;padding:0;margin:0;line-height:1;display:inline;";
+            this.canvas[appendChild](this.span);
             this.bottom = this.top = null;
         };
         Paper[proto].remove = function () {
@@ -2448,7 +2400,7 @@ window.Raphael = (function () {
             }
         };
     }
-
     // rest
     // Safari or Chrome (WebKit) rendering bug workaround method
     if ((/^Apple|^Google/).test(navigator.vendor) && !(navigator.userAgent.indexOf("Version/4.0") + 1)) {
@@ -2459,7 +2411,7 @@ window.Raphael = (function () {
     } else {
         Paper[proto].safari = function () {};
     }
-
     // Events
     var addEvent = (function () {
         if (doc.addEventListener) {
@@ -2673,6 +2625,43 @@ window.Raphael = (function () {
         delete attr.translation;
         return this.paper[this.type]().attr(attr);
     };
+    var getLengthFactory = function (istotal) {
+        return function (length) {
+            if (this.type != "path") {
+                return -1;
+            }
+            var path = path2curve(this.attrs.path), x, y, p, l,
+                len = 0;
+            for (var i = 0, ii = path.length; i < ii; i++) {
+                p = path[i];
+                if (p[0] == "M") {
+                    x = +p[1];
+                    y = +p[2];
+                } else {
+                    l = segmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
+                    if (!istotal && len + l > length) {
+                        return R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], (length - len) / l);
+                    }
+                    len += l;
+                    x = +p[5];
+                    y = +p[6];
+                }
+            }
+            return istotal ? len : R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], 1);
+        };
+    },
+    segmentLength = function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
+        var old = {x: 0, y: 0},
+            len = 0;
+        for (var i = 0; i < 1.01; i+=.01) {
+            var dot = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, i);
+            i && (len += math.sqrt(pow(old.x - dot.x, 2) + pow(old.y - dot.y, 2)));
+            old = dot;
+        }
+        return len;
+    };
+    Element[proto].getTotalLength = getLengthFactory(1);
+    Element[proto].getPointAtLength = getLengthFactory();
 
     // animation easing formulas
     R.easing_formulas = {
@@ -2733,7 +2722,7 @@ window.Raphael = (function () {
             return l;
         }
     };
-
     var animationElements = {length : 0},
         animation = function () {
             var Now = +new Date;
@@ -2956,7 +2945,7 @@ window.Raphael = (function () {
         return "Rapha\xebl\u2019s object";
     };
     R.ae = animationElements;
-
     // Set
     var Set = function (items) {
         this.items = [];
@@ -3052,7 +3041,7 @@ window.Raphael = (function () {
             height: mmax[apply](0, h) - y
         };
     };
-
     R.registerFont = function (font) {
         if (!font.face) {
             return font;
@@ -3140,7 +3129,7 @@ window.Raphael = (function () {
         }
         return out;
     };
-
     R.format = function (token) {
         var args = R.is(arguments[1], "array") ? [0][concat](arguments[1]) : arguments,
             rg = /\{(\d+)\}/g;