Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / Svg.html
index d9bd369..7a3298d 100644 (file)
@@ -1,4 +1,21 @@
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-draw.engine.Svg'>/**
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-draw-engine-Svg'>/**
 </span> * @class Ext.draw.engine.Svg
  * @extends Ext.draw.Surface
  * Provides specific methods to draw with SVG.
@@ -29,6 +46,8 @@ Ext.define('Ext.draw.engine.Svg', {
         strokeOpacity: &quot;stroke-opacity&quot;,
         strokeLinejoin: &quot;stroke-linejoin&quot;
     },
+    
+    parsers: {},
 
     minDefaults: {
         circle: {
@@ -229,7 +248,7 @@ Ext.define('Ext.draw.engine.Svg', {
         me.callParent([w, h]);
     },
 
-<span id='Ext-draw.engine.Svg-method-getRegion'>    /**
+<span id='Ext-draw-engine-Svg-method-getRegion'>    /**
 </span>     * Get the region for the surface's canvas area
      * @returns {Ext.util.Region}
      */
@@ -437,6 +456,12 @@ Ext.define('Ext.draw.engine.Svg', {
             el = sprite.el,
             group = sprite.group,
             sattr = sprite.attr,
+            parsers = me.parsers,
+            //Safari does not handle linear gradients correctly in quirksmode
+            //ref: https://bugs.webkit.org/show_bug.cgi?id=41952
+            //ref: EXTJSIV-1472
+            gradientsMap = me.gradientsMap || {},
+            safariFix = Ext.isSafari &amp;&amp; !Ext.isStrict,
             groups, i, ln, attrs, font, key, style, name, rect;
 
         if (group) {
@@ -451,8 +476,8 @@ Ext.define('Ext.draw.engine.Svg', {
         attrs = me.scrubAttrs(sprite) || {};
 
         // if (sprite.dirtyPath) {
-        sprite.bbox.plain = 0;
-        sprite.bbox.transform = 0;
+            sprite.bbox.plain = 0;
+            sprite.bbox.transform = 0;
             if (sprite.type == &quot;circle&quot; || sprite.type == &quot;ellipse&quot;) {
                 attrs.cx = attrs.cx || attrs.x;
                 attrs.cy = attrs.cy || attrs.y;
@@ -461,10 +486,13 @@ Ext.define('Ext.draw.engine.Svg', {
                 attrs.rx = attrs.ry = attrs.r;
             }
             else if (sprite.type == &quot;path&quot; &amp;&amp; attrs.d) {
-                attrs.d = Ext.draw.Draw.pathToAbsolute(attrs.d);
+                attrs.d = Ext.draw.Draw.pathToString(Ext.draw.Draw.pathToAbsolute(attrs.d));
             }
             sprite.dirtyPath = false;
         // }
+        // else {
+        //     delete attrs.d;
+        // }
 
         if (attrs['clip-rect']) {
             me.setClip(sprite, attrs);
@@ -485,9 +513,22 @@ Ext.define('Ext.draw.engine.Svg', {
         }
         for (key in attrs) {
             if (attrs.hasOwnProperty(key) &amp;&amp; attrs[key] != null) {
-                el.dom.setAttribute(key, String(attrs[key]));
+                //Safari does not handle linear gradients correctly in quirksmode
+                //ref: https://bugs.webkit.org/show_bug.cgi?id=41952
+                //ref: EXTJSIV-1472
+                //if we're Safari in QuirksMode and we're applying some color attribute and the value of that
+                //attribute is a reference to a gradient then assign a plain color to that value instead of the gradient.
+                if (safariFix &amp;&amp; ('color|stroke|fill'.indexOf(key) &gt; -1) &amp;&amp; (attrs[key] in gradientsMap)) {
+                    attrs[key] = gradientsMap[attrs[key]];
+                }
+                if (key in parsers) {
+                    el.dom.setAttribute(key, parsers[key](attrs[key], sprite, me));
+                } else {
+                    el.dom.setAttribute(key, attrs[key]);
+                }
             }
         }
+        
         if (sprite.type == 'text') {
             me.tuneText(sprite, attrs);
         }
@@ -537,7 +578,7 @@ Ext.define('Ext.draw.engine.Svg', {
         // }
     },
 
-<span id='Ext-draw.engine.Svg-method-applyZIndex'>    /**
+<span id='Ext-draw-engine-Svg-method-applyZIndex'>    /**
 </span>     * Insert or move a given sprite's element to the correct place in the DOM list for its zIndex
      * @param {Ext.draw.Sprite} sprite
      */
@@ -565,43 +606,52 @@ Ext.define('Ext.draw.engine.Svg', {
 
     addGradient: function(gradient) {
         gradient = Ext.draw.Draw.parseGradient(gradient);
-        var ln = gradient.stops.length,
+        var me = this,
+            ln = gradient.stops.length,
             vector = gradient.vector,
-            gradientEl,
-            stop,
-            stopEl,
-            i;
-        if (gradient.type == &quot;linear&quot;) {
-            gradientEl = this.createSvgElement(&quot;linearGradient&quot;);
-            gradientEl.setAttribute(&quot;x1&quot;, vector[0]);
-            gradientEl.setAttribute(&quot;y1&quot;, vector[1]);
-            gradientEl.setAttribute(&quot;x2&quot;, vector[2]);
-            gradientEl.setAttribute(&quot;y2&quot;, vector[3]);
-        }
-        else {
-            gradientEl = this.createSvgElement(&quot;radialGradient&quot;);
-            gradientEl.setAttribute(&quot;cx&quot;, gradient.centerX);
-            gradientEl.setAttribute(&quot;cy&quot;, gradient.centerY);
-            gradientEl.setAttribute(&quot;r&quot;, gradient.radius);
-            if (Ext.isNumber(gradient.focalX) &amp;&amp; Ext.isNumber(gradient.focalY)) {
-                gradientEl.setAttribute(&quot;fx&quot;, gradient.focalX);
-                gradientEl.setAttribute(&quot;fy&quot;, gradient.focalY);
+            //Safari does not handle linear gradients correctly in quirksmode
+            //ref: https://bugs.webkit.org/show_bug.cgi?id=41952
+            //ref: EXTJSIV-1472
+            usePlain = Ext.isSafari &amp;&amp; !Ext.isStrict,
+            gradientEl, stop, stopEl, i, gradientsMap;
+            
+        gradientsMap = me.gradientsMap || {};
+        
+        if (!usePlain) {
+            if (gradient.type == &quot;linear&quot;) {
+                gradientEl = me.createSvgElement(&quot;linearGradient&quot;);
+                gradientEl.setAttribute(&quot;x1&quot;, vector[0]);
+                gradientEl.setAttribute(&quot;y1&quot;, vector[1]);
+                gradientEl.setAttribute(&quot;x2&quot;, vector[2]);
+                gradientEl.setAttribute(&quot;y2&quot;, vector[3]);
             }
-        }    
-        gradientEl.id = gradient.id;
-        this.getDefs().appendChild(gradientEl);
-
-        for (i = 0; i &lt; ln; i++) {
-            stop = gradient.stops[i];
-            stopEl = this.createSvgElement(&quot;stop&quot;);
-            stopEl.setAttribute(&quot;offset&quot;, stop.offset + &quot;%&quot;);
-            stopEl.setAttribute(&quot;stop-color&quot;, stop.color);
-            stopEl.setAttribute(&quot;stop-opacity&quot;,stop.opacity);
-            gradientEl.appendChild(stopEl);
+            else {
+                gradientEl = me.createSvgElement(&quot;radialGradient&quot;);
+                gradientEl.setAttribute(&quot;cx&quot;, gradient.centerX);
+                gradientEl.setAttribute(&quot;cy&quot;, gradient.centerY);
+                gradientEl.setAttribute(&quot;r&quot;, gradient.radius);
+                if (Ext.isNumber(gradient.focalX) &amp;&amp; Ext.isNumber(gradient.focalY)) {
+                    gradientEl.setAttribute(&quot;fx&quot;, gradient.focalX);
+                    gradientEl.setAttribute(&quot;fy&quot;, gradient.focalY);
+                }
+            }
+            gradientEl.id = gradient.id;
+            me.getDefs().appendChild(gradientEl);
+            for (i = 0; i &lt; ln; i++) {
+                stop = gradient.stops[i];
+                stopEl = me.createSvgElement(&quot;stop&quot;);
+                stopEl.setAttribute(&quot;offset&quot;, stop.offset + &quot;%&quot;);
+                stopEl.setAttribute(&quot;stop-color&quot;, stop.color);
+                stopEl.setAttribute(&quot;stop-opacity&quot;,stop.opacity);
+                gradientEl.appendChild(stopEl);
+            }
+        } else {
+            gradientsMap['url(#' + gradient.id + ')'] = gradient.stops[0].color;
         }
+        me.gradientsMap = gradientsMap;
     },
 
-<span id='Ext-draw.engine.Svg-method-hasCls'>    /**
+<span id='Ext-draw-engine-Svg-method-hasCls'>    /**
 </span>     * Checks if the specified CSS class exists on this element's DOM node.
      * @param {String} className The CSS class to check for
      * @return {Boolean} True if the class exists, else false
@@ -652,7 +702,7 @@ Ext.define('Ext.draw.engine.Svg', {
                     cls = cls.replace(me.trimRe, '');
                     idx = Ext.Array.indexOf(elClasses, cls);
                     if (idx != -1) {
-                        elClasses.splice(idx, 1);
+                        Ext.Array.erase(elClasses, idx, 1);
                     }
                 }
             }
@@ -669,4 +719,6 @@ Ext.define('Ext.draw.engine.Svg', {
         }
         delete me.el;
     }
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>