/ext-4.0.7/docs/source/Vml.html

https://bitbucket.org/srogerf/javascript · HTML · 963 lines · 875 code · 88 blank · 0 comment · 0 complexity · fd6bd3633651427987f31f8277c0fb20 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5.   <title>The source code</title>
    6. 

  6.   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    7. 

  7.   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
    8. 

  8.   <style type="text/css">
    9. 

  9.     .highlight { display: block; background-color: #ddd; }
    10. 

  10.   </style>
    11. 

  11.   <script type="text/javascript">
    12. 

  12.     function highlight() {
    13. 

  13.       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    14. 

  14.     }
    15. 

  15.   </script>
    16. 

  16. </head>
    17. 

  17. <body onload="prettyPrint(); highlight();">
    18. 

  18.   <pre class="prettyprint lang-js"><span id='Ext-draw-engine-Vml'>/**
    19. 

  19. </span> * @class Ext.draw.engine.Vml
    20. 

  20.  * @extends Ext.draw.Surface
    21. 

  21.  * Provides specific methods to draw with VML.
    22. 

  22.  */
    23. 

  23. 

  24. Ext.define('Ext.draw.engine.Vml', {
    25. 

  25. 

  26.     /* Begin Definitions */
    27. 

  27. 

  28.     extend: 'Ext.draw.Surface',
    29. 

  29. 

  30.     requires: ['Ext.draw.Draw', 'Ext.draw.Color', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.Element'],
    31. 

  31. 

  32.     /* End Definitions */
    33. 

  33. 

  34.     engine: 'Vml',
    35. 

  35. 

  36.     map: {M: &quot;m&quot;, L: &quot;l&quot;, C: &quot;c&quot;, Z: &quot;x&quot;, m: &quot;t&quot;, l: &quot;r&quot;, c: &quot;v&quot;, z: &quot;x&quot;},
    37. 

  37.     bitesRe: /([clmz]),?([^clmz]*)/gi,
    38. 

  38.     valRe: /-?[^,\s-]+/g,
    39. 

  39.     fillUrlRe: /^url\(\s*['&quot;]?([^\)]+?)['&quot;]?\s*\)$/i,
    40. 

  40.     pathlike: /^(path|rect)$/,
    41. 

  41.     NonVmlPathRe: /[ahqstv]/ig, // Non-VML Pathing ops
    42. 

  42.     partialPathRe: /[clmz]/g,
    43. 

  43.     fontFamilyRe: /^['&quot;]+|['&quot;]+$/g,
    44. 

  44.     baseVmlCls: Ext.baseCSSPrefix + 'vml-base',
    45. 

  45.     vmlGroupCls: Ext.baseCSSPrefix + 'vml-group',
    46. 

  46.     spriteCls: Ext.baseCSSPrefix + 'vml-sprite',
    47. 

  47.     measureSpanCls: Ext.baseCSSPrefix + 'vml-measure-span',
    48. 

  48.     zoom: 21600,
    49. 

  49.     coordsize: 1000,
    50. 

  50.     coordorigin: '0 0',
    51. 

  51. 

  52.     // VML uses CSS z-index and therefore doesn't need sprites to be kept in zIndex order
    53. 

  53.     orderSpritesByZIndex: false,
    54. 

  54. 

  55.     // @private
    56. 

  56.     // Convert an SVG standard path into a VML path
    57. 

  57.     path2vml: function (path) {
    58. 

  58.         var me = this,
    59. 

  59.             nonVML =  me.NonVmlPathRe,
    60. 

  60.             map = me.map,
    61. 

  61.             val = me.valRe,
    62. 

  62.             zoom = me.zoom,
    63. 

  63.             bites = me.bitesRe,
    64. 

  64.             command = Ext.Function.bind(Ext.draw.Draw.pathToAbsolute, Ext.draw.Draw),
    65. 

  65.             res, pa, p, r, i, ii, j, jj;
    66. 

  66.         if (String(path).match(nonVML)) {
    67. 

  67.             command = Ext.Function.bind(Ext.draw.Draw.path2curve, Ext.draw.Draw);
    68. 

  68.         } else if (!String(path).match(me.partialPathRe)) {
    69. 

  69.             res = String(path).replace(bites, function (all, command, args) {
    70. 

  70.                 var vals = [],
    71. 

  71.                     isMove = command.toLowerCase() == &quot;m&quot;,
    72. 

  72.                     res = map[command];
    73. 

  73.                 args.replace(val, function (value) {
    74. 

  74.                     if (isMove &amp;&amp; vals[length] == 2) {
    75. 

  75.                         res += vals + map[command == &quot;m&quot; ? &quot;l&quot; : &quot;L&quot;];
    76. 

  76.                         vals = [];
    77. 

  77.                     }
    78. 

  78.                     vals.push(Math.round(value * zoom));
    79. 

  79.                 });
    80. 

  80.                 return res + vals;
    81. 

  81.             });
    82. 

  82.             return res;
    83. 

  83.         }
    84. 

  84.         pa = command(path);
    85. 

  85.         res = [];
    86. 

  86.         for (i = 0, ii = pa.length; i &lt; ii; i++) {
    87. 

  87.             p = pa[i];
    88. 

  88.             r = pa[i][0].toLowerCase();
    89. 

  89.             if (r == &quot;z&quot;) {
    90. 

  90.                 r = &quot;x&quot;;
    91. 

  91.             }
    92. 

  92.             for (j = 1, jj = p.length; j &lt; jj; j++) {
    93. 

  93.                 r += Math.round(p[j] * me.zoom) + (j != jj - 1 ? &quot;,&quot; : &quot;&quot;);
    94. 

  94.             }
    95. 

  95.             res.push(r);
    96. 

  96.         }
    97. 

  97.         return res.join(&quot; &quot;);
    98. 

  98.     },
    99. 

  99. 

  100.     // @private - set of attributes which need to be translated from the sprite API to the native browser API
    101. 

  101.     translateAttrs: {
    102. 

  102.         radius: &quot;r&quot;,
    103. 

  103.         radiusX: &quot;rx&quot;,
    104. 

  104.         radiusY: &quot;ry&quot;,
    105. 

  105.         lineWidth: &quot;stroke-width&quot;,
    106. 

  106.         fillOpacity: &quot;fill-opacity&quot;,
    107. 

  107.         strokeOpacity: &quot;stroke-opacity&quot;,
    108. 

  108.         strokeLinejoin: &quot;stroke-linejoin&quot;
    109. 

  109.     },
    110. 

  110. 

  111.     // @private - Minimun set of defaults for different types of sprites.
    112. 

  112.     minDefaults: {
    113. 

  113.         circle: {
    114. 

  114.             fill: &quot;none&quot;,
    115. 

  115.             stroke: null,
    116. 

  116.             &quot;stroke-width&quot;: null,
    117. 

  117.             opacity: null,
    118. 

  118.             &quot;fill-opacity&quot;: null,
    119. 

  119.             &quot;stroke-opacity&quot;: null
    120. 

  120.         },
    121. 

  121.         ellipse: {
    122. 

  122.             cx: 0,
    123. 

  123.             cy: 0,
    124. 

  124.             rx: 0,
    125. 

  125.             ry: 0,
    126. 

  126.             fill: &quot;none&quot;,
    127. 

  127.             stroke: null,
    128. 

  128.             &quot;stroke-width&quot;: null,
    129. 

  129.             opacity: null,
    130. 

  130.             &quot;fill-opacity&quot;: null,
    131. 

  131.             &quot;stroke-opacity&quot;: null
    132. 

  132.         },
    133. 

  133.         rect: {
    134. 

  134.             x: 0,
    135. 

  135.             y: 0,
    136. 

  136.             width: 0,
    137. 

  137.             height: 0,
    138. 

  138.             rx: 0,
    139. 

  139.             ry: 0,
    140. 

  140.             fill: &quot;none&quot;,
    141. 

  141.             stroke: null,
    142. 

  142.             &quot;stroke-width&quot;: null,
    143. 

  143.             opacity: null,
    144. 

  144.             &quot;fill-opacity&quot;: null,
    145. 

  145.             &quot;stroke-opacity&quot;: null
    146. 

  146.         },
    147. 

  147.         text: {
    148. 

  148.             x: 0,
    149. 

  149.             y: 0,
    150. 

  150.             &quot;text-anchor&quot;: &quot;start&quot;,
    151. 

  151.             font: '10px &quot;Arial&quot;',
    152. 

  152.             fill: &quot;#000&quot;,
    153. 

  153.             stroke: null,
    154. 

  154.             &quot;stroke-width&quot;: null,
    155. 

  155.             opacity: null,
    156. 

  156.             &quot;fill-opacity&quot;: null,
    157. 

  157.             &quot;stroke-opacity&quot;: null
    158. 

  158.         },
    159. 

  159.         path: {
    160. 

  160.             d: &quot;M0,0&quot;,
    161. 

  161.             fill: &quot;none&quot;,
    162. 

  162.             stroke: null,
    163. 

  163.             &quot;stroke-width&quot;: null,
    164. 

  164.             opacity: null,
    165. 

  165.             &quot;fill-opacity&quot;: null,
    166. 

  166.             &quot;stroke-opacity&quot;: null
    167. 

  167.         },
    168. 

  168.         image: {
    169. 

  169.             x: 0,
    170. 

  170.             y: 0,
    171. 

  171.             width: 0,
    172. 

  172.             height: 0,
    173. 

  173.             preserveAspectRatio: &quot;none&quot;,
    174. 

  174.             opacity: null
    175. 

  175.         }
    176. 

  176.     },
    177. 

  177. 

  178.     // private
    179. 

  179.     onMouseEnter: function(e) {
    180. 

  180.         this.fireEvent(&quot;mouseenter&quot;, e);
    181. 

  181.     },
    182. 

  182. 

  183.     // private
    184. 

  184.     onMouseLeave: function(e) {
    185. 

  185.         this.fireEvent(&quot;mouseleave&quot;, e);
    186. 

  186.     },
    187. 

  187. 

  188.     // @private - Normalize a delegated single event from the main container to each sprite and sprite group
    189. 

  189.     processEvent: function(name, e) {
    190. 

  190.         var target = e.getTarget(),
    191. 

  191.             surface = this.surface,
    192. 

  192.             sprite;
    193. 

  193.         this.fireEvent(name, e);
    194. 

  194.         sprite = this.items.get(target.id);
    195. 

  195.         if (sprite) {
    196. 

  196.             sprite.fireEvent(name, sprite, e);
    197. 

  197.         }
    198. 

  198.     },
    199. 

  199. 

  200.     // Create the VML element/elements and append them to the DOM
    201. 

  201.     createSpriteElement: function(sprite) {
    202. 

  202.         var me = this,
    203. 

  203.             attr = sprite.attr,
    204. 

  204.             type = sprite.type,
    205. 

  205.             zoom = me.zoom,
    206. 

  206.             vml = sprite.vml || (sprite.vml = {}),
    207. 

  207.             round = Math.round,
    208. 

  208.             el = me.createNode('shape'),
    209. 

  209.             path, skew, textPath;
    210. 

  210. 

  211.         el.coordsize = zoom + ' ' + zoom;
    212. 

  212.         el.coordorigin = attr.coordorigin || &quot;0 0&quot;;
    213. 

  213.         Ext.get(el).addCls(me.spriteCls);
    214. 

  214.         if (type == &quot;text&quot;) {
    215. 

  215.             vml.path = path = me.createNode(&quot;path&quot;);
    216. 

  216.             path.textpathok = true;
    217. 

  217.             vml.textpath = textPath = me.createNode(&quot;textpath&quot;);
    218. 

  218.             textPath.on = true;
    219. 

  219.             el.appendChild(textPath);
    220. 

  220.             el.appendChild(path);
    221. 

  221.         }
    222. 

  222.         el.id = sprite.id;
    223. 

  223.         sprite.el = Ext.get(el);
    224. 

  224.         me.el.appendChild(el);
    225. 

  225.         if (type !== 'image') {
    226. 

  226.             skew = me.createNode(&quot;skew&quot;);
    227. 

  227.             skew.on = true;
    228. 

  228.             el.appendChild(skew);
    229. 

  229.             sprite.skew = skew;
    230. 

  230.         }
    231. 

  231.         sprite.matrix = Ext.create('Ext.draw.Matrix');
    232. 

  232.         sprite.bbox = {
    233. 

  233.             plain: null,
    234. 

  234.             transform: null
    235. 

  235.         };
    236. 

  236.         sprite.fireEvent(&quot;render&quot;, sprite);
    237. 

  237.         return sprite.el;
    238. 

  238.     },
    239. 

  239. 

  240.     // @private - Get bounding box for the sprite.  The Sprite itself has the public method.
    241. 

  241.     getBBox: function (sprite, isWithoutTransform) {
    242. 

  242.         var realPath = this[&quot;getPath&quot; + sprite.type](sprite);
    243. 

  243.         if (isWithoutTransform) {
    244. 

  244.             sprite.bbox.plain = sprite.bbox.plain || Ext.draw.Draw.pathDimensions(realPath);
    245. 

  245.             return sprite.bbox.plain;
    246. 

  246.         }
    247. 

  247.         sprite.bbox.transform = sprite.bbox.transform || Ext.draw.Draw.pathDimensions(Ext.draw.Draw.mapPath(realPath, sprite.matrix));
    248. 

  248.         return sprite.bbox.transform;
    249. 

  249.     },
    250. 

  250. 

  251.     getBBoxText: function (sprite) {
    252. 

  252.         var vml = sprite.vml;
    253. 

  253.         return {
    254. 

  254.             x: vml.X + (vml.bbx || 0) - vml.W / 2,
    255. 

  255.             y: vml.Y - vml.H / 2,
    256. 

  256.             width: vml.W,
    257. 

  257.             height: vml.H
    258. 

  258.         };
    259. 

  259.     },
    260. 

  260. 

  261.     applyAttrs: function (sprite) {
    262. 

  262.         var me = this,
    263. 

  263.             vml = sprite.vml,
    264. 

  264.             group = sprite.group,
    265. 

  265.             spriteAttr = sprite.attr,
    266. 

  266.             el = sprite.el,
    267. 

  267.             dom = el.dom,
    268. 

  268.             style, name, groups, i, ln, scrubbedAttrs, font, key, bbox;
    269. 

  269. 

  270.         if (group) {
    271. 

  271.             groups = [].concat(group);
    272. 

  272.             ln = groups.length;
    273. 

  273.             for (i = 0; i &lt; ln; i++) {
    274. 

  274.                 group = groups[i];
    275. 

  275.                 me.getGroup(group).add(sprite);
    276. 

  276.             }
    277. 

  277.             delete sprite.group;
    278. 

  278.         }
    279. 

  279.         scrubbedAttrs = me.scrubAttrs(sprite) || {};
    280. 

  280. 

  281.         if (sprite.zIndexDirty) {
    282. 

  282.             me.setZIndex(sprite);
    283. 

  283.         }
    284. 

  284. 

  285.         // Apply minimum default attributes
    286. 

  286.         Ext.applyIf(scrubbedAttrs, me.minDefaults[sprite.type]);
    287. 

  287. 

  288.         if (dom.href) {
    289. 

  289.             dom.href = scrubbedAttrs.href;
    290. 

  290.         }
    291. 

  291.         if (dom.title) {
    292. 

  292.             dom.title = scrubbedAttrs.title;
    293. 

  293.         }
    294. 

  294.         if (dom.target) {
    295. 

  295.             dom.target = scrubbedAttrs.target;
    296. 

  296.         }
    297. 

  297.         if (dom.cursor) {
    298. 

  298.             dom.cursor = scrubbedAttrs.cursor;
    299. 

  299.         }
    300. 

  300. 

  301.         // Change visibility
    302. 

  302.         if (sprite.dirtyHidden) {
    303. 

  303.             (scrubbedAttrs.hidden) ? me.hidePrim(sprite) : me.showPrim(sprite);
    304. 

  304.             sprite.dirtyHidden = false;
    305. 

  305.         }
    306. 

  306. 

  307.         // Update path
    308. 

  308.         if (sprite.dirtyPath) {
    309. 

  309.             if (sprite.type == &quot;circle&quot; || sprite.type == &quot;ellipse&quot;) {
    310. 

  310.                 var cx = scrubbedAttrs.x,
    311. 

  311.                     cy = scrubbedAttrs.y,
    312. 

  312.                     rx = scrubbedAttrs.rx || scrubbedAttrs.r || 0,
    313. 

  313.                     ry = scrubbedAttrs.ry || scrubbedAttrs.r || 0;
    314. 

  314.                 dom.path = Ext.String.format(&quot;ar{0},{1},{2},{3},{4},{1},{4},{1}&quot;,
    315. 

  315.                             Math.round((cx - rx) * me.zoom),
    316. 

  316.                             Math.round((cy - ry) * me.zoom),
    317. 

  317.                             Math.round((cx + rx) * me.zoom),
    318. 

  318.                             Math.round((cy + ry) * me.zoom),
    319. 

  319.                             Math.round(cx * me.zoom));
    320. 

  320.                 sprite.dirtyPath = false;
    321. 

  321.             }
    322. 

  322.             else if (sprite.type !== &quot;text&quot;) {
    323. 

  323.                 sprite.attr.path = scrubbedAttrs.path = me.setPaths(sprite, scrubbedAttrs) || scrubbedAttrs.path;
    324. 

  324.                 dom.path = me.path2vml(scrubbedAttrs.path);
    325. 

  325.                 sprite.dirtyPath = false;
    326. 

  326.             }
    327. 

  327.         }
    328. 

  328. 

  329.         // Apply clipping
    330. 

  330.         if (&quot;clip-rect&quot; in scrubbedAttrs) {
    331. 

  331.             me.setClip(sprite, scrubbedAttrs);
    332. 

  332.         }
    333. 

  333. 

  334.         // Handle text (special handling required)
    335. 

  335.         if (sprite.type == &quot;text&quot;) {
    336. 

  336.             me.setTextAttributes(sprite, scrubbedAttrs);
    337. 

  337.         }
    338. 

  338. 

  339.         // Handle fill and opacity
    340. 

  340.         if (sprite.type == 'image' || scrubbedAttrs.opacity  || scrubbedAttrs['fill-opacity'] || scrubbedAttrs.fill) {
    341. 

  341.             me.setFill(sprite, scrubbedAttrs);
    342. 

  342.         }
    343. 

  343. 

  344.         // Handle stroke (all fills require a stroke element)
    345. 

  345.         if (scrubbedAttrs.stroke || scrubbedAttrs['stroke-opacity'] || scrubbedAttrs.fill) {
    346. 

  346.             me.setStroke(sprite, scrubbedAttrs);
    347. 

  347.         }
    348. 

  348.         
    349. 

  349.         //set styles
    350. 

  350.         style = spriteAttr.style;
    351. 

  351.         if (style) {
    352. 

  352.             el.setStyle(style);
    353. 

  353.         }
    354. 

  354. 

  355.         sprite.dirty = false;
    356. 

  356.     },
    357. 

  357. 

  358.     setZIndex: function(sprite) {
    359. 

  359.         if (sprite.el) {
    360. 

  360.             if (sprite.attr.zIndex != undefined) {
    361. 

  361.                 sprite.el.setStyle('zIndex', sprite.attr.zIndex);
    362. 

  362.             }
    363. 

  363.             sprite.zIndexDirty = false;
    364. 

  364.         }
    365. 

  365.     },
    366. 

  366. 

  367.     // Normalize all virtualized types into paths.
    368. 

  368.     setPaths: function(sprite, params) {
    369. 

  369.         var spriteAttr = sprite.attr;
    370. 

  370.         // Clear bbox cache
    371. 

  371.         sprite.bbox.plain = null;
    372. 

  372.         sprite.bbox.transform = null;
    373. 

  373.         if (sprite.type == 'circle') {
    374. 

  374.             spriteAttr.rx = spriteAttr.ry = params.r;
    375. 

  375.             return Ext.draw.Draw.ellipsePath(sprite);
    376. 

  376.         }
    377. 

  377.         else if (sprite.type == 'ellipse') {
    378. 

  378.             spriteAttr.rx = params.rx;
    379. 

  379.             spriteAttr.ry = params.ry;
    380. 

  380.             return Ext.draw.Draw.ellipsePath(sprite);
    381. 

  381.         }
    382. 

  382.         else if (sprite.type == 'rect' || sprite.type == 'image') {
    383. 

  383.             spriteAttr.rx = spriteAttr.ry = params.r;
    384. 

  384.             return Ext.draw.Draw.rectPath(sprite);
    385. 

  385.         }
    386. 

  386.         else if (sprite.type == 'path' &amp;&amp; spriteAttr.path) {
    387. 

  387.             return Ext.draw.Draw.pathToAbsolute(spriteAttr.path);
    388. 

  388.         }
    389. 

  389.         return false;
    390. 

  390.     },
    391. 

  391. 

  392.     setFill: function(sprite, params) {
    393. 

  393.         var me = this,
    394. 

  394.             el = sprite.el,
    395. 

  395.             dom = el.dom,
    396. 

  396.             fillEl = dom.getElementsByTagName('fill')[0],
    397. 

  397.             opacity, gradient, fillUrl, rotation, angle;
    398. 

  398. 

  399.         if (fillEl) {
    400. 

  400.             dom.removeChild(fillEl);
    401. 

  401.         } else {
    402. 

  402.             fillEl = me.createNode('fill');
    403. 

  403.         }
    404. 

  404.         if (Ext.isArray(params.fill)) {
    405. 

  405.             params.fill = params.fill[0];
    406. 

  406.         }
    407. 

  407.         if (sprite.type == 'image') {
    408. 

  408.             fillEl.on = true;
    409. 

  409.             fillEl.src = params.src;
    410. 

  410.             fillEl.type = &quot;tile&quot;;
    411. 

  411.             fillEl.rotate = true;
    412. 

  412.         } else if (params.fill == &quot;none&quot;) {
    413. 

  413.             fillEl.on = false;
    414. 

  414.         } else {
    415. 

  415.             if (typeof params.opacity == &quot;number&quot;) {
    416. 

  416.                 fillEl.opacity = params.opacity;
    417. 

  417.             }
    418. 

  418.             if (typeof params[&quot;fill-opacity&quot;] == &quot;number&quot;) {
    419. 

  419.                 fillEl.opacity = params[&quot;fill-opacity&quot;];
    420. 

  420.             }
    421. 

  421.             fillEl.on = true;
    422. 

  422.             if (typeof params.fill == &quot;string&quot;) {
    423. 

  423.                 fillUrl = params.fill.match(me.fillUrlRe);
    424. 

  424.                 if (fillUrl) {
    425. 

  425.                     fillUrl = fillUrl[1];
    426. 

  426.                     // If the URL matches one of the registered gradients, render that gradient
    427. 

  427.                     if (fillUrl.charAt(0) == &quot;#&quot;) {
    428. 

  428.                         gradient = me.gradientsColl.getByKey(fillUrl.substring(1));
    429. 

  429.                     }
    430. 

  430.                     if (gradient) {
    431. 

  431.                         // VML angle is offset and inverted from standard, and must be adjusted to match rotation transform
    432. 

  432.                         rotation = params.rotation;
    433. 

  433.                         angle = -(gradient.angle + 270 + (rotation ? rotation.degrees : 0)) % 360;
    434. 

  434.                         // IE will flip the angle at 0 degrees...
    435. 

  435.                         if (angle === 0) {
    436. 

  436.                             angle = 180;
    437. 

  437.                         }
    438. 

  438.                         fillEl.angle = angle;
    439. 

  439.                         fillEl.type = &quot;gradient&quot;;
    440. 

  440.                         fillEl.method = &quot;sigma&quot;;
    441. 

  441.                         fillEl.colors = gradient.colors;
    442. 

  442.                     }
    443. 

  443.                     // Otherwise treat it as an image
    444. 

  444.                     else {
    445. 

  445.                         fillEl.src = fillUrl;
    446. 

  446.                         fillEl.type = &quot;tile&quot;;
    447. 

  447.                         fillEl.rotate = true;
    448. 

  448.                     }
    449. 

  449.                 }
    450. 

  450.                 else {
    451. 

  451.                     fillEl.color = Ext.draw.Color.toHex(params.fill) || params.fill;
    452. 

  452.                     fillEl.src = &quot;&quot;;
    453. 

  453.                     fillEl.type = &quot;solid&quot;;
    454. 

  454.                 }
    455. 

  455.             }
    456. 

  456.         }
    457. 

  457.         dom.appendChild(fillEl);
    458. 

  458.     },
    459. 

  459. 

  460.     setStroke: function(sprite, params) {
    461. 

  461.         var me = this,
    462. 

  462.             el = sprite.el.dom,
    463. 

  463.             strokeEl = sprite.strokeEl,
    464. 

  464.             newStroke = false,
    465. 

  465.             width, opacity;
    466. 

  466. 

  467.         if (!strokeEl) {
    468. 

  468.             strokeEl = sprite.strokeEl = me.createNode(&quot;stroke&quot;);
    469. 

  469.             newStroke = true;
    470. 

  470.         }
    471. 

  471.         if (Ext.isArray(params.stroke)) {
    472. 

  472.             params.stroke = params.stroke[0];
    473. 

  473.         }
    474. 

  474.         if (!params.stroke || params.stroke == &quot;none&quot; || params.stroke == 0 || params[&quot;stroke-width&quot;] == 0) {
    475. 

  475.             strokeEl.on = false;
    476. 

  476.         }
    477. 

  477.         else {
    478. 

  478.             strokeEl.on = true;
    479. 

  479.             if (params.stroke &amp;&amp; !params.stroke.match(me.fillUrlRe)) {
    480. 

  480.                 // VML does NOT support a gradient stroke :(
    481. 

  481.                 strokeEl.color = Ext.draw.Color.toHex(params.stroke);
    482. 

  482.             }
    483. 

  483.             strokeEl.joinstyle = params[&quot;stroke-linejoin&quot;];
    484. 

  484.             strokeEl.endcap = params[&quot;stroke-linecap&quot;] || &quot;round&quot;;
    485. 

  485.             strokeEl.miterlimit = params[&quot;stroke-miterlimit&quot;] || 8;
    486. 

  486.             width = parseFloat(params[&quot;stroke-width&quot;] || 1) * 0.75;
    487. 

  487.             opacity = params[&quot;stroke-opacity&quot;] || 1;
    488. 

  488.             // VML Does not support stroke widths under 1, so we're going to fiddle with stroke-opacity instead.
    489. 

  489.             if (Ext.isNumber(width) &amp;&amp; width &lt; 1) {
    490. 

  490.                 strokeEl.weight = 1;
    491. 

  491.                 strokeEl.opacity = opacity * width;
    492. 

  492.             }
    493. 

  493.             else {
    494. 

  494.                 strokeEl.weight = width;
    495. 

  495.                 strokeEl.opacity = opacity;
    496. 

  496.             }
    497. 

  497.         }
    498. 

  498.         if (newStroke) {
    499. 

  499.             el.appendChild(strokeEl);
    500. 

  500.         }
    501. 

  501.     },
    502. 

  502. 

  503.     setClip: function(sprite, params) {
    504. 

  504.         var me = this,
    505. 

  505.             el = sprite.el,
    506. 

  506.             clipEl = sprite.clipEl,
    507. 

  507.             rect = String(params[&quot;clip-rect&quot;]).split(me.separatorRe);
    508. 

  508.         if (!clipEl) {
    509. 

  509.             clipEl = sprite.clipEl = me.el.insertFirst(Ext.getDoc().dom.createElement(&quot;div&quot;));
    510. 

  510.             clipEl.addCls(Ext.baseCSSPrefix + 'vml-sprite');
    511. 

  511.         }
    512. 

  512.         if (rect.length == 4) {
    513. 

  513.             rect[2] = +rect[2] + (+rect[0]);
    514. 

  514.             rect[3] = +rect[3] + (+rect[1]);
    515. 

  515.             clipEl.setStyle(&quot;clip&quot;, Ext.String.format(&quot;rect({1}px {2}px {3}px {0}px)&quot;, rect[0], rect[1], rect[2], rect[3]));
    516. 

  516.             clipEl.setSize(me.el.width, me.el.height);
    517. 

  517.         }
    518. 

  518.         else {
    519. 

  519.             clipEl.setStyle(&quot;clip&quot;, &quot;&quot;);
    520. 

  520.         }
    521. 

  521.     },
    522. 

  522. 

  523.     setTextAttributes: function(sprite, params) {
    524. 

  524.         var me = this,
    525. 

  525.             vml = sprite.vml,
    526. 

  526.             textStyle = vml.textpath.style,
    527. 

  527.             spanCacheStyle = me.span.style,
    528. 

  528.             zoom = me.zoom,
    529. 

  529.             round = Math.round,
    530. 

  530.             fontObj = {
    531. 

  531.                 fontSize: &quot;font-size&quot;,
    532. 

  532.                 fontWeight: &quot;font-weight&quot;,
    533. 

  533.                 fontStyle: &quot;font-style&quot;
    534. 

  534.             },
    535. 

  535.             fontProp,
    536. 

  536.             paramProp;
    537. 

  537.         if (sprite.dirtyFont) {
    538. 

  538.             if (params.font) {
    539. 

  539.                 textStyle.font = spanCacheStyle.font = params.font;
    540. 

  540.             }
    541. 

  541.             if (params[&quot;font-family&quot;]) {
    542. 

  542.                 textStyle.fontFamily = '&quot;' + params[&quot;font-family&quot;].split(&quot;,&quot;)[0].replace(me.fontFamilyRe, &quot;&quot;) + '&quot;';
    543. 

  543.                 spanCacheStyle.fontFamily = params[&quot;font-family&quot;];
    544. 

  544.             }
    545. 

  545. 

  546.             for (fontProp in fontObj) {
    547. 

  547.                 paramProp = params[fontObj[fontProp]];
    548. 

  548.                 if (paramProp) {
    549. 

  549.                     textStyle[fontProp] = spanCacheStyle[fontProp] = paramProp;
    550. 

  550.                 }
    551. 

  551.             }
    552. 

  552. 

  553.             me.setText(sprite, params.text);
    554. 

  554.             
    555. 

  555.             if (vml.textpath.string) {
    556. 

  556.                 me.span.innerHTML = String(vml.textpath.string).replace(/&lt;/g, &quot;&amp;#60;&quot;).replace(/&amp;/g, &quot;&amp;#38;&quot;).replace(/\n/g, &quot;&lt;br&gt;&quot;);
    557. 

  557.             }
    558. 

  558.             vml.W = me.span.offsetWidth;
    559. 

  559.             vml.H = me.span.offsetHeight + 2; // TODO handle baseline differences and offset in VML Textpath
    560. 

  560. 

  561.             // text-anchor emulation
    562. 

  562.             if (params[&quot;text-anchor&quot;] == &quot;middle&quot;) {
    563. 

  563.                 textStyle[&quot;v-text-align&quot;] = &quot;center&quot;;
    564. 

  564.             }
    565. 

  565.             else if (params[&quot;text-anchor&quot;] == &quot;end&quot;) {
    566. 

  566.                 textStyle[&quot;v-text-align&quot;] = &quot;right&quot;;
    567. 

  567.                 vml.bbx = -Math.round(vml.W / 2);
    568. 

  568.             }
    569. 

  569.             else {
    570. 

  570.                 textStyle[&quot;v-text-align&quot;] = &quot;left&quot;;
    571. 

  571.                 vml.bbx = Math.round(vml.W / 2);
    572. 

  572.             }
    573. 

  573.         }
    574. 

  574.         vml.X = params.x;
    575. 

  575.         vml.Y = params.y;
    576. 

  576.         vml.path.v = Ext.String.format(&quot;m{0},{1}l{2},{1}&quot;, Math.round(vml.X * zoom), Math.round(vml.Y * zoom), Math.round(vml.X * zoom) + 1);
    577. 

  577.         // Clear bbox cache
    578. 

  578.         sprite.bbox.plain = null;
    579. 

  579.         sprite.bbox.transform = null;
    580. 

  580.         sprite.dirtyFont = false;
    581. 

  581.     },
    582. 

  582.     
    583. 

  583.     setText: function(sprite, text) {
    584. 

  584.         sprite.vml.textpath.string = Ext.htmlDecode(text);
    585. 

  585.     },
    586. 

  586. 

  587.     hide: function() {
    588. 

  588.         this.el.hide();
    589. 

  589.     },
    590. 

  590. 

  591.     show: function() {
    592. 

  592.         this.el.show();
    593. 

  593.     },
    594. 

  594. 

  595.     hidePrim: function(sprite) {
    596. 

  596.         sprite.el.addCls(Ext.baseCSSPrefix + 'hide-visibility');
    597. 

  597.     },
    598. 

  598. 

  599.     showPrim: function(sprite) {
    600. 

  600.         sprite.el.removeCls(Ext.baseCSSPrefix + 'hide-visibility');
    601. 

  601.     },
    602. 

  602. 

  603.     setSize: function(width, height) {
    604. 

  604.         var me = this;
    605. 

  605.         width = width || me.width;
    606. 

  606.         height = height || me.height;
    607. 

  607.         me.width = width;
    608. 

  608.         me.height = height;
    609. 

  609. 

  610.         if (me.el) {
    611. 

  611.             // Size outer div
    612. 

  612.             if (width != undefined) {
    613. 

  613.                 me.el.setWidth(width);
    614. 

  614.             }
    615. 

  615.             if (height != undefined) {
    616. 

  616.                 me.el.setHeight(height);
    617. 

  617.             }
    618. 

  618. 

  619.             // Handle viewBox sizing
    620. 

  620.             me.applyViewBox();
    621. 

  621. 

  622.             me.callParent(arguments);
    623. 

  623.         }
    624. 

  624.     },
    625. 

  625. 

  626.     setViewBox: function(x, y, width, height) {
    627. 

  627.         this.callParent(arguments);
    628. 

  628.         this.viewBox = {
    629. 

  629.             x: x,
    630. 

  630.             y: y,
    631. 

  631.             width: width,
    632. 

  632.             height: height
    633. 

  633.         };
    634. 

  634.         this.applyViewBox();
    635. 

  635.     },
    636. 

  636. 

  637. <span id='Ext-draw-engine-Vml-method-applyViewBox'>    /**
    638. 

  638. </span>     * @private Using the current viewBox property and the surface's width and height, calculate the
    639. 

  639.      * appropriate viewBoxShift that will be applied as a persistent transform to all sprites.
    640. 

  640.      */
    641. 

  641.     applyViewBox: function() {
    642. 

  642.         var me = this,
    643. 

  643.             viewBox = me.viewBox,
    644. 

  644.             width = me.width,
    645. 

  645.             height = me.height,
    646. 

  646.             viewBoxX, viewBoxY, viewBoxWidth, viewBoxHeight,
    647. 

  647.             relativeHeight, relativeWidth, size;
    648. 

  648. 

  649.         if (viewBox &amp;&amp; (width || height)) {
    650. 

  650.             viewBoxX = viewBox.x;
    651. 

  651.             viewBoxY = viewBox.y;
    652. 

  652.             viewBoxWidth = viewBox.width;
    653. 

  653.             viewBoxHeight = viewBox.height;
    654. 

  654.             relativeHeight = height / viewBoxHeight;
    655. 

  655.             relativeWidth = width / viewBoxWidth;
    656. 

  656. 

  657.             if (viewBoxWidth * relativeHeight &lt; width) {
    658. 

  658.                 viewBoxX -= (width - viewBoxWidth * relativeHeight) / 2 / relativeHeight;
    659. 

  659.             }
    660. 

  660.             if (viewBoxHeight * relativeWidth &lt; height) {
    661. 

  661.                 viewBoxY -= (height - viewBoxHeight * relativeWidth) / 2 / relativeWidth;
    662. 

  662.             }
    663. 

  663. 

  664.             size = 1 / Math.max(viewBoxWidth / width, viewBoxHeight / height);
    665. 

  665. 

  666.             me.viewBoxShift = {
    667. 

  667.                 dx: -viewBoxX,
    668. 

  668.                 dy: -viewBoxY,
    669. 

  669.                 scale: size
    670. 

  670.             };
    671. 

  671.             me.items.each(function(item) {
    672. 

  672.                 me.transform(item);
    673. 

  673.             });
    674. 

  674.         }
    675. 

  675.     },
    676. 

  676. 

  677.     onAdd: function(item) {
    678. 

  678.         this.callParent(arguments);
    679. 

  679.         if (this.el) {
    680. 

  680.             this.renderItem(item);
    681. 

  681.         }
    682. 

  682.     },
    683. 

  683. 

  684.     onRemove: function(sprite) {
    685. 

  685.         if (sprite.el) {
    686. 

  686.             sprite.el.remove();
    687. 

  687.             delete sprite.el;
    688. 

  688.         }
    689. 

  689.         this.callParent(arguments);
    690. 

  690.     },
    691. 

  691. 

  692.     // VML Node factory method (createNode)
    693. 

  693.     createNode : (function () {
    694. 

  694.         try {
    695. 

  695.             var doc = Ext.getDoc().dom;
    696. 

  696.             if (!doc.namespaces.rvml) {
    697. 

  697.                 doc.namespaces.add(&quot;rvml&quot;, &quot;urn:schemas-microsoft-com:vml&quot;);
    698. 

  698.             }
    699. 

  699.             return function (tagName) {
    700. 

  700.                 return doc.createElement(&quot;&lt;rvml:&quot; + tagName + ' class=&quot;rvml&quot;&gt;');
    701. 

  701.             };
    702. 

  702.         } catch (e) {
    703. 

  703.             return function (tagName) {
    704. 

  704.                 return doc.createElement(&quot;&lt;&quot; + tagName + ' xmlns=&quot;urn:schemas-microsoft.com:vml&quot; class=&quot;rvml&quot;&gt;');
    705. 

  705.             };
    706. 

  706.         }
    707. 

  707.     })(),
    708. 

  708. 

  709.     render: function (container) {
    710. 

  710.         var me = this,
    711. 

  711.             doc = Ext.getDoc().dom;
    712. 

  712. 

  713.         if (!me.el) {
    714. 

  714.             var el = doc.createElement(&quot;div&quot;);
    715. 

  715.             me.el = Ext.get(el);
    716. 

  716.             me.el.addCls(me.baseVmlCls);
    717. 

  717. 

  718.             // Measuring span (offscrren)
    719. 

  719.             me.span = doc.createElement(&quot;span&quot;);
    720. 

  720.             Ext.get(me.span).addCls(me.measureSpanCls);
    721. 

  721.             el.appendChild(me.span);
    722. 

  722.             me.el.setSize(me.width || 10, me.height || 10);
    723. 

  723.             container.appendChild(el);
    724. 

  724.             me.el.on({
    725. 

  725.                 scope: me,
    726. 

  726.                 mouseup: me.onMouseUp,
    727. 

  727.                 mousedown: me.onMouseDown,
    728. 

  728.                 mouseover: me.onMouseOver,
    729. 

  729.                 mouseout: me.onMouseOut,
    730. 

  730.                 mousemove: me.onMouseMove,
    731. 

  731.                 mouseenter: me.onMouseEnter,
    732. 

  732.                 mouseleave: me.onMouseLeave,
    733. 

  733.                 click: me.onClick
    734. 

  734.             });
    735. 

  735.         }
    736. 

  736.         me.renderAll();
    737. 

  737.     },
    738. 

  738. 

  739.     renderAll: function() {
    740. 

  740.         this.items.each(this.renderItem, this);
    741. 

  741.     },
    742. 

  742. 

  743.     redraw: function(sprite) {
    744. 

  744.         sprite.dirty = true;
    745. 

  745.         this.renderItem(sprite);
    746. 

  746.     },
    747. 

  747. 

  748.     renderItem: function (sprite) {
    749. 

  749.         // Does the surface element exist?
    750. 

  750.         if (!this.el) {
    751. 

  751.             return;
    752. 

  752.         }
    753. 

  753. 

  754.         // Create sprite element if necessary
    755. 

  755.         if (!sprite.el) {
    756. 

  756.             this.createSpriteElement(sprite);
    757. 

  757.         }
    758. 

  758. 

  759.         if (sprite.dirty) {
    760. 

  760.             this.applyAttrs(sprite);
    761. 

  761.             if (sprite.dirtyTransform) {
    762. 

  762.                 this.applyTransformations(sprite);
    763. 

  763.             }
    764. 

  764.         }
    765. 

  765.     },
    766. 

  766. 

  767.     rotationCompensation: function (deg, dx, dy) {
    768. 

  768.         var matrix = Ext.create('Ext.draw.Matrix');
    769. 

  769.         matrix.rotate(-deg, 0.5, 0.5);
    770. 

  770.         return {
    771. 

  771.             x: matrix.x(dx, dy),
    772. 

  772.             y: matrix.y(dx, dy)
    773. 

  773.         };
    774. 

  774.     },
    775. 

  775. 

  776.     extractTransform: function (sprite) {
    777. 

  777.         var me = this,
    778. 

  778.             matrix = Ext.create('Ext.draw.Matrix'), scale,
    779. 

  779.             transformstions, tranformationsLength,
    780. 

  780.             transform, i = 0,
    781. 

  781.             shift = me.viewBoxShift;
    782. 

  782. 

  783.         for(transformstions = sprite.transformations, tranformationsLength = transformstions.length;
    784. 

  784.             i &lt; tranformationsLength; i ++) {
    785. 

  785.             transform = transformstions[i];
    786. 

  786.             switch (transform.type) {
    787. 

  787.                 case 'translate' :
    788. 

  788.                     matrix.translate(transform.x, transform.y);
    789. 

  789.                     break;
    790. 

  790.                 case 'rotate':
    791. 

  791.                     matrix.rotate(transform.degrees, transform.x, transform.y);
    792. 

  792.                     break;
    793. 

  793.                 case 'scale':
    794. 

  794.                     matrix.scale(transform.x || transform.scale, transform.y || transform.scale, transform.centerX, transform.centerY);
    795. 

  795.                     break;
    796. 

  796.             }
    797. 

  797.         }
    798. 

  798. 

  799.         if (shift) {
    800. 

  800.             matrix.add(1, 0, 0, 1, shift.dx, shift.dy);
    801. 

  801.             matrix.prepend(shift.scale, 0, 0, shift.scale, 0, 0);
    802. 

  802.         }
    803. 

  803.         
    804. 

  804.         return sprite.matrix = matrix;
    805. 

  805.     },
    806. 

  806. 

  807.     setSimpleCoords: function(sprite, sx, sy, dx, dy, rotate) {
    808. 

  808.         var me = this,
    809. 

  809.             matrix = sprite.matrix,
    810. 

  810.             dom = sprite.el.dom,
    811. 

  811.             style = dom.style,
    812. 

  812.             yFlipper = 1,
    813. 

  813.             flip = &quot;&quot;,
    814. 

  814.             fill = dom.getElementsByTagName('fill')[0],
    815. 

  815.             kx = me.zoom / sx,
    816. 

  816.             ky = me.zoom / sy,
    817. 

  817.             rotationCompensation;
    818. 

  818.         if (!sx || !sy) {
    819. 

  819.             return;
    820. 

  820.         }
    821. 

  821.         dom.coordsize = Math.abs(kx) + ' ' + Math.abs(ky);
    822. 

  822.         style.rotation = rotate * (sx * sy &lt; 0 ? -1 : 1);
    823. 

  823.         if (rotate) {
    824. 

  824.             rotationCompensation = me.rotationCompensation(rotate, dx, dy);
    825. 

  825.             dx = rotationCompensation.x;
    826. 

  826.             dy = rotationCompensation.y;
    827. 

  827.         }
    828. 

  828.         if (sx &lt; 0) {
    829. 

  829.             flip += &quot;x&quot;
    830. 

  830.         }
    831. 

  831.         if (sy &lt; 0) {
    832. 

  832.             flip += &quot; y&quot;;
    833. 

  833.             yFlipper = -1;
    834. 

  834.         }
    835. 

  835.         style.flip = flip;
    836. 

  836.         dom.coordorigin = (dx * -kx) + ' ' + (dy * -ky);
    837. 

  837.         if (fill) {
    838. 

  838.             dom.removeChild(fill);
    839. 

  839.             rotationCompensation = me.rotationCompensation(rotate, matrix.x(sprite.x, sprite.y), matrix.y(sprite.x, sprite.y));
    840. 

  840.             fill.position = rotationCompensation.x * yFlipper + ' ' + rotationCompensation.y * yFlipper;
    841. 

  841.             fill.size = sprite.width * Math.abs(sx) + ' ' + sprite.height * Math.abs(sy);
    842. 

  842.             dom.appendChild(fill);
    843. 

  843.         }
    844. 

  844.     },
    845. 

  845. 

  846.     transform : function (sprite) {
    847. 

  847.         var me = this,
    848. 

  848.             el = sprite.el,
    849. 

  849.             skew = sprite.skew,
    850. 

  850.             dom = el.dom,
    851. 

  851.             domStyle = dom.style,
    852. 

  852.             matrix = me.extractTransform(sprite).clone(),
    853. 

  853.             split, zoom = me.zoom,
    854. 

  854.             fill = dom.getElementsByTagName('fill')[0],
    855. 

  855.             isPatt = !String(sprite.fill).indexOf(&quot;url(&quot;),
    856. 

  856.             offset, c;
    857. 

  857. 

  858. 

  859.         // Hide element while we transform
    860. 

  860. 

  861.         if (sprite.type != &quot;image&quot; &amp;&amp; skew &amp;&amp; !isPatt) {
    862. 

  862.             // matrix transform via VML skew
    863. 

  863.             skew.matrix = matrix.toString();
    864. 

  864.             // skew.offset = '32767,1' OK
    865. 

  865.             // skew.offset = '32768,1' Crash
    866. 

  866.             // M$, R U kidding??
    867. 

  867.             offset = matrix.offset();
    868. 

  868.             if (offset[0] &gt; 32767) {
    869. 

  869.                 offset[0] = 32767;
    870. 

  870.             } else if (offset[0] &lt; -32768) {
    871. 

  871.                 offset[0] = -32768
    872. 

  872.             }
    873. 

  873.             if (offset[1] &gt; 32767) {
    874. 

  874.                 offset[1] = 32767;
    875. 

  875.             } else if (offset[1] &lt; -32768) {
    876. 

  876.                 offset[1] = -32768
    877. 

  877.             }
    878. 

  878.             skew.offset = offset;
    879. 

  879.         } else {
    880. 

  880.             if (skew) {
    881. 

  881.                 skew.matrix = &quot;1 0 0 1&quot;;
    882. 

  882.                 skew.offset = &quot;0 0&quot;;
    883. 

  883.             }
    884. 

  884.             split = matrix.split();
    885. 

  885.             if (split.isSimple) {
    886. 

  886.                 domStyle.filter = '';
    887. 

  887.                 me.setSimpleCoords(sprite, split.scaleX, split.scaleY, split.translateX, split.translateY, split.rotate / Math.PI * 180);
    888. 

  888.             } else {
    889. 

  889.                 domStyle.filter = matrix.toFilter();
    890. 

  890.                 var bb = me.getBBox(sprite),
    891. 

  891.                     dx = bb.x - sprite.x,
    892. 

  892.                     dy = bb.y - sprite.y;
    893. 

  893.                 dom.coordorigin = (dx * -zoom) + ' ' + (dy * -zoom);
    894. 

  894.                 if (fill) {
    895. 

  895.                     dom.removeChild(fill);
    896. 

  896.                     fill.position = dx + ' ' + dy;
    897. 

  897.                     fill.size = sprite.width * sprite.scale.x + ' ' + sprite.height * 1.1;
    898. 

  898.                     dom.appendChild(fill);
    899. 

  899.                 }
    900. 

  900.             }
    901. 

  901.         }
    902. 

  902.     },
    903. 

  903. 

  904.     createItem: function (config) {
    905. 

  905.         return Ext.create('Ext.draw.Sprite', config);
    906. 

  906.     },
    907. 

  907. 

  908.     getRegion: function() {
    909. 

  909.         return this.el.getRegion();
    910. 

  910.     },
    911. 

  911. 

  912.     addCls: function(sprite, className) {
    913. 

  913.         if (sprite &amp;&amp; sprite.el) {
    914. 

  914.             sprite.el.addCls(className);
    915. 

  915.         }
    916. 

  916.     },
    917. 

  917. 

  918.     removeCls: function(sprite, className) {
    919. 

  919.         if (sprite &amp;&amp; sprite.el) {
    920. 

  920.             sprite.el.removeCls(className);
    921. 

  921.         }
    922. 

  922.     },
    923. 

  923. 

  924. <span id='Ext-draw-engine-Vml-method-addGradient'>    /**
    925. 

  925. </span>     * Adds a definition to this Surface for a linear gradient. We convert the gradient definition
    926. 

  926.      * to its corresponding VML attributes and store it for later use by individual sprites.
    927. 

  927.      * @param {Object} gradient
    928. 

  928.      */
    929. 

  929.     addGradient: function(gradient) {
    930. 

  930.         var gradients = this.gradientsColl || (this.gradientsColl = Ext.create('Ext.util.MixedCollection')),
    931. 

  931.             colors = [],
    932. 

  932.             stops = Ext.create('Ext.util.MixedCollection');
    933. 

  933. 

  934.         // Build colors string
    935. 

  935.         stops.addAll(gradient.stops);
    936. 

  936.         stops.sortByKey(&quot;ASC&quot;, function(a, b) {
    937. 

  937.             a = parseInt(a, 10);
    938. 

  938.             b = parseInt(b, 10);
    939. 

  939.             return a &gt; b ? 1 : (a &lt; b ? -1 : 0);
    940. 

  940.         });
    941. 

  941.         stops.eachKey(function(k, v) {
    942. 

  942.             colors.push(k + &quot;% &quot; + v.color);
    943. 

  943.         });
    944. 

  944. 

  945.         gradients.add(gradient.id, {
    946. 

  946.             colors: colors.join(&quot;,&quot;),
    947. 

  947.             angle: gradient.angle
    948. 

  948.         });
    949. 

  949.     },
    950. 

  950. 

  951.     destroy: function() {
    952. 

  952.         var me = this;
    953. 

  953.         
    954. 

  954.         me.callParent(arguments);
    955. 

  955.         if (me.el) {
    956. 

  956.             me.el.remove();
    957. 

  957.         }
    958. 

  958.         delete me.el;
    959. 

  959.     }
    960. 

  960. });
    961. 

  961. </pre>
    962. 

  962. </body>
    963. 

  963. </html>
    964.