--- /dev/null
+<!DOCTYPE html>
+<!-- Generated with Dr.js -->
+<html lang="en"><head><meta charset="utf-8"><title>raphael.js</title><link rel="stylesheet" href="dr.css"></head><body id="src-dr-js"><code id="L1"><span class="ln">1</span><span class="c">/*
+</span></code><code id="L2"><span class="ln">2</span><span class="c"><span class="s"> * </span>Raphaël <span class="d">2.0</span><span class="d">.0</span><span class="s"> - </span>JavaScript Vector Library
+</span></code><code id="L3"><span class="ln">3</span><span class="c"> *
+</span></code><code id="L4"><span class="ln">4</span><span class="c"><span class="s"> * </span>Copyright (c) <span class="d">2011</span> Dmitry Baranovskiy (http:<span class="c">//raphaeljs.com)</span>
+</span></code><code id="L5"><span class="ln">5</span><span class="c"><span class="s"> * </span>Copyright (c) <span class="d">2011</span> Sencha Labs (http:<span class="c">//sencha.com)</span>
+</span></code><code id="L6"><span class="ln">6</span><span class="c"><span class="s"> * </span>Licensed under the MIT (http:<span class="c">//raphaeljs.com/license.html) license.</span>
+</span></code><code id="L7"><span class="ln">7</span><span class="c"> */</span>
+</code><code id="L8"><span class="ln">8</span>(<b>function</b> () {
+</code><code id="L9"><span class="ln">9</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L10"><span class="ln">10</span><span class="c"> <span class="s"> * </span>Raphael
+</span></code><code id="L11"><span class="ln">11</span><span class="c"> [ method ]
+</span></code><code id="L12"><span class="ln">12</span><span class="c"> **
+</span></code><code id="L13"><span class="ln">13</span><span class="c"> <span class="s"> * </span>Creates a canvas object on which to draw.
+</span></code><code id="L14"><span class="ln">14</span><span class="c"> <span class="s"> * </span>You must <b>do</b> <b>this</b> first, as all future calls to drawing methods
+</span></code><code id="L15"><span class="ln">15</span><span class="c"> <span class="s"> * </span>from <b>this</b> instance will be bound to <b>this</b> canvas.
+</span></code><code id="L16"><span class="ln">16</span><span class="c"> > Parameters
+</span></code><code id="L17"><span class="ln">17</span><span class="c"> **
+</span></code><code id="L18"><span class="ln">18</span><span class="c"> <span class="s"> - </span>container (HTMLElement|string) DOM element or it’s id which is going to be a parent <b>for</b> drawing surface
+</span></code><code id="L19"><span class="ln">19</span><span class="c"> <span class="s"> - </span>width (number)
+</span></code><code id="L20"><span class="ln">20</span><span class="c"> <span class="s"> - </span>height (number)
+</span></code><code id="L21"><span class="ln">21</span><span class="c"> <span class="s"> * </span>or
+</span></code><code id="L22"><span class="ln">22</span><span class="c"> <span class="s"> - </span>x (number)
+</span></code><code id="L23"><span class="ln">23</span><span class="c"> <span class="s"> - </span>y (number)
+</span></code><code id="L24"><span class="ln">24</span><span class="c"> <span class="s"> - </span>width (number)
+</span></code><code id="L25"><span class="ln">25</span><span class="c"> <span class="s"> - </span>height (number)
+</span></code><code id="L26"><span class="ln">26</span><span class="c"> <span class="s"> * </span>or
+</span></code><code id="L27"><span class="ln">27</span><span class="c"> <span class="s"> - </span>all (array) (first <span class="d">3</span> or <span class="d">4</span> elements <b>in</b> the array are equal to [containerID, width, height] or [x, y, width, height]. The rest are element descriptions <b>in</b> format {type: type, <attributes>})
+</span></code><code id="L28"><span class="ln">28</span><span class="c"> <span class="s"> * </span>or
+</span></code><code id="L29"><span class="ln">29</span><span class="c"> <span class="s"> - </span>onReadyCallback (<b>function</b>) <b>function</b> that is going to be called on DOM ready event. You can also subscribe to <b>this</b> event via Eve’s “DOMLoad” event. In <b>this</b> <b>case</b> method returns `<b>undefined</b>`.
+</span></code><code id="L30"><span class="ln">30</span><span class="c"> <span class="s"> = </span>(object) @Paper
+</span></code><code id="L31"><span class="ln">31</span><span class="c"> > Usage
+</span></code><code id="L32"><span class="ln">32</span><span class="c"> | <span class="c">// Each of the following examples create a canvas that is 320px wide by 200px high</span>
+</span></code><code id="L33"><span class="ln">33</span><span class="c"> | <span class="c">// Canvas is created at the viewport’s <span class="d">10</span>,<span class="d">50</span> coordinate</span>
+</span></code><code id="L34"><span class="ln">34</span><span class="c"> | <b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">50</span>, <span class="d">320</span>, <span class="d">200</span>);
+</span></code><code id="L35"><span class="ln">35</span><span class="c"> | <span class="c">// Canvas is created at the top left corner of the #notepad element</span>
+</span></code><code id="L36"><span class="ln">36</span><span class="c"> | <span class="c">// (or its top right corner <b>in</b> dir=<i>"rtl"</i> elements)</span>
+</span></code><code id="L37"><span class="ln">37</span><span class="c"> | <b>var</b> paper<span class="s"> = </span>Raphael(document.getElementById(<i>"notepad"</i>), <span class="d">320</span>, <span class="d">200</span>);
+</span></code><code id="L38"><span class="ln">38</span><span class="c"> | <span class="c">// Same as above</span>
+</span></code><code id="L39"><span class="ln">39</span><span class="c"> | <b>var</b> paper<span class="s"> = </span>Raphael(<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>);
+</span></code><code id="L40"><span class="ln">40</span><span class="c"> | <span class="c">// Image dump</span>
+</span></code><code id="L41"><span class="ln">41</span><span class="c"> | <b>var</b> set<span class="s"> = </span>Raphael([<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>, {
+</span></code><code id="L42"><span class="ln">42</span><span class="c"> | type: <i>"rect"</i>,
+</span></code><code id="L43"><span class="ln">43</span><span class="c"> | x: <span class="d">10</span>,
+</span></code><code id="L44"><span class="ln">44</span><span class="c"> | y: <span class="d">10</span>,
+</span></code><code id="L45"><span class="ln">45</span><span class="c"> | width: <span class="d">25</span>,
+</span></code><code id="L46"><span class="ln">46</span><span class="c"> | height: <span class="d">25</span>,
+</span></code><code id="L47"><span class="ln">47</span><span class="c"> | stroke: <i>"#f00"</i>
+</span></code><code id="L48"><span class="ln">48</span><span class="c"> | }, {
+</span></code><code id="L49"><span class="ln">49</span><span class="c"> | type: <i>"text"</i>,
+</span></code><code id="L50"><span class="ln">50</span><span class="c"> | x: <span class="d">30</span>,
+</span></code><code id="L51"><span class="ln">51</span><span class="c"> | y: <span class="d">40</span>,
+</span></code><code id="L52"><span class="ln">52</span><span class="c"> | text: <i>"Dump"</i>
+</span></code><code id="L53"><span class="ln">53</span><span class="c"> | }]);
+</span></code><code id="L54"><span class="ln">54</span><span class="c"> \*/</span>
+</code><code id="L55"><span class="ln">55</span> <b>function</b> R(first) {
+</code><code id="L56"><span class="ln">56</span> <b>if</b> (R.is(first, <i>"<b>function</b>"</i>)) {
+</code><code id="L57"><span class="ln">57</span> <b>return</b> eve.on(<i>"DOMload"</i>, first);
+</code><code id="L58"><span class="ln">58</span> } <b>else</b> <b>if</b> (R.is(first, array)) {
+</code><code id="L59"><span class="ln">59</span> <b>var</b> a<span class="s"> = </span>first,
+</code><code id="L60"><span class="ln">60</span> cnv<span class="s"> = </span>create[apply](R, a.splice(<span class="d">0</span>, <span class="d">3</span><span class="s"> + </span>R.is(a[<span class="d">0</span>], nu))),
+</code><code id="L61"><span class="ln">61</span> res<span class="s"> = </span>cnv.set(),
+</code><code id="L62"><span class="ln">62</span> i<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L63"><span class="ln">63</span> ii<span class="s"> = </span>a.length,
+</code><code id="L64"><span class="ln">64</span> j;
+</code><code id="L65"><span class="ln">65</span> <b>for</b> (; i < ii; i++) {
+</code><code id="L66"><span class="ln">66</span> j<span class="s"> = </span>a[i]<span class="s"> || </span>{};
+</code><code id="L67"><span class="ln">67</span> elements[has](j.type) && res.push(cnv[j.type]().attr(j));
+</code><code id="L68"><span class="ln">68</span> }
+</code><code id="L69"><span class="ln">69</span> <b>return</b> res;
+</code><code id="L70"><span class="ln">70</span> }
+</code><code id="L71"><span class="ln">71</span> <b>return</b> create[apply](R, arguments);
+</code><code id="L72"><span class="ln">72</span> }
+</code><code id="L73"><span class="ln">73</span> R.version<span class="s"> = </span><i>"<span class="d">2.0</span><span class="d">.0</span>"</i>;
+</code><code id="L74"><span class="ln">74</span> <b>var</b> separator<span class="s"> = </span>/[, ]+/,
+</code><code id="L75"><span class="ln">75</span> elements<span class="s"> = </span>{circle: <span class="d">1</span>, rect: <span class="d">1</span>, path: <span class="d">1</span>, ellipse: <span class="d">1</span>, text: <span class="d">1</span>, image: <span class="d">1</span>},
+</code><code id="L76"><span class="ln">76</span> formatrg<span class="s"> = </span>/\{(\d+)\}/g,
+</code><code id="L77"><span class="ln">77</span> proto<span class="s"> = </span><i>"prototype"</i>,
+</code><code id="L78"><span class="ln">78</span> has<span class="s"> = </span><i>"hasOwnProperty"</i>,
+</code><code id="L79"><span class="ln">79</span> g<span class="s"> = </span>{
+</code><code id="L80"><span class="ln">80</span> doc: document,
+</code><code id="L81"><span class="ln">81</span> win: window
+</code><code id="L82"><span class="ln">82</span> },
+</code><code id="L83"><span class="ln">83</span> oldRaphael<span class="s"> = </span>{
+</code><code id="L84"><span class="ln">84</span> was: Object.prototype[has].call(g.win, <i>"Raphael"</i>),
+</code><code id="L85"><span class="ln">85</span> is: g.win.Raphael
+</code><code id="L86"><span class="ln">86</span> },
+</code><code id="L87"><span class="ln">87</span> Paper<span class="s"> = </span><b>function</b> () {},
+</code><code id="L88"><span class="ln">88</span> paperproto,
+</code><code id="L89"><span class="ln">89</span> appendChild<span class="s"> = </span><i>"appendChild"</i>,
+</code><code id="L90"><span class="ln">90</span> apply<span class="s"> = </span><i>"apply"</i>,
+</code><code id="L91"><span class="ln">91</span> concat<span class="s"> = </span><i>"concat"</i>,
+</code><code id="L92"><span class="ln">92</span> supportsTouch<span class="s"> = </span><i>"createTouch"</i> <b>in</b> g.doc,
+</code><code id="L93"><span class="ln">93</span> E<span class="s"> = </span><i>""</i>,
+</code><code id="L94"><span class="ln">94</span> S<span class="s"> = </span><i>" "</i>,
+</code><code id="L95"><span class="ln">95</span> Str<span class="s"> = </span>String,
+</code><code id="L96"><span class="ln">96</span> split<span class="s"> = </span><i>"split"</i>,
+</code><code id="L97"><span class="ln">97</span> events<span class="s"> = </span><i>"click dblclick mousedown mousemove mouseout mouseover mouseup touchstart touchmove touchend orientationchange touchcancel gesturestart gesturechange gestureend"</i>.split(S),
+</code><code id="L98"><span class="ln">98</span> touchMap<span class="s"> = </span>{
+</code><code id="L99"><span class="ln">99</span> mousedown: <i>"touchstart"</i>,
+</code><code id="L100"><span class="ln">100</span> mousemove: <i>"touchmove"</i>,
+</code><code id="L101"><span class="ln">101</span> mouseup: <i>"touchend"</i>
+</code><code id="L102"><span class="ln">102</span> },
+</code><code id="L103"><span class="ln">103</span> lowerCase<span class="s"> = </span>Str.prototype.toLowerCase,
+</code><code id="L104"><span class="ln">104</span> math<span class="s"> = </span>Math,
+</code><code id="L105"><span class="ln">105</span> mmax<span class="s"> = </span>math.max,
+</code><code id="L106"><span class="ln">106</span> mmin<span class="s"> = </span>math.min,
+</code><code id="L107"><span class="ln">107</span> abs<span class="s"> = </span>math.abs,
+</code><code id="L108"><span class="ln">108</span> pow<span class="s"> = </span>math.pow,
+</code><code id="L109"><span class="ln">109</span> PI<span class="s"> = </span>math.PI,
+</code><code id="L110"><span class="ln">110</span> nu<span class="s"> = </span><i>"number"</i>,
+</code><code id="L111"><span class="ln">111</span> string<span class="s"> = </span><i>"string"</i>,
+</code><code id="L112"><span class="ln">112</span> array<span class="s"> = </span><i>"array"</i>,
+</code><code id="L113"><span class="ln">113</span> toString<span class="s"> = </span><i>"toString"</i>,
+</code><code id="L114"><span class="ln">114</span> fillString<span class="s"> = </span><i>"fill"</i>,
+</code><code id="L115"><span class="ln">115</span> objectToString<span class="s"> = </span>Object.prototype.toString,
+</code><code id="L116"><span class="ln">116</span> paper<span class="s"> = </span>{},
+</code><code id="L117"><span class="ln">117</span> push<span class="s"> = </span><i>"push"</i>,
+</code><code id="L118"><span class="ln">118</span> ISURL<span class="s"> = </span>/^url\(['<i>"]?([^\)]+?)['"</i>]?\)$/i,
+</code><code id="L119"><span class="ln">119</span> colourRegExp<span class="s"> = </span>/^\s*((#[a-f\d]{<span class="d">6</span>})|(#[a-f\d]{<span class="d">3</span>})|rgba?\(\s*([\d\.]+%?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?)%?\s*\)|hsba?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?)%?\s*\)|hsla?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?)%?\s*\))\s*$/i,
+</code><code id="L120"><span class="ln">120</span> isnan<span class="s"> = </span>{<i>"NaN"</i>: <span class="d">1</span>, <i>"Infinity"</i>: <span class="d">1</span>, <i>"-Infinity"</i>: <span class="d">1</span>},
+</code><code id="L121"><span class="ln">121</span> bezierrg<span class="s"> = </span>/^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/,
+</code><code id="L122"><span class="ln">122</span> round<span class="s"> = </span>math.round,
+</code><code id="L123"><span class="ln">123</span> setAttribute<span class="s"> = </span><i>"setAttribute"</i>,
+</code><code id="L124"><span class="ln">124</span> toFloat<span class="s"> = </span>parseFloat,
+</code><code id="L125"><span class="ln">125</span> toInt<span class="s"> = </span>parseInt,
+</code><code id="L126"><span class="ln">126</span> ms<span class="s"> = </span><i>" progid:DXImageTransform.Microsoft"</i>,
+</code><code id="L127"><span class="ln">127</span> upperCase<span class="s"> = </span>Str.prototype.toUpperCase,
+</code><code id="L128"><span class="ln">128</span> availableAttrs<span class="s"> = </span>{<i>"arrow-end"</i>: <i>"none"</i>, <i>"arrow-start"</i>: <i>"none"</i>, blur: <span class="d">0</span>, <i>"clip-rect"</i>: <i>"<span class="d">0</span> <span class="d">0</span> <span class="d">1e9</span> <span class="d">1e9</span>"</i>, cursor: <i>"<b>default</b>"</i>, cx: <span class="d">0</span>, cy: <span class="d">0</span>, fill: <i>"#fff"</i>, <i>"fill-opacity"</i>: <span class="d">1</span>, font: '10px <i>"Arial"</i>', <i>"font-family"</i>: '<i>"Arial"</i>', <i>"font-size"</i>: <i>"<span class="d">10</span>"</i>, <i>"font-style"</i>: <i>"normal"</i>, <i>"font-weight"</i>: <span class="d">400</span>, gradient: <span class="d">0</span>, height: <span class="d">0</span>, href: <i>"http:<span class="c">//raphaeljs.com/"</i>, opacity: <span class="d">1</span>, path: <i>"M0,<span class="d">0</span>"</i>, r: <span class="d">0</span>, rx: <span class="d">0</span>, ry: <span class="d">0</span>, src: <i>""</i>, stroke: <i>"#<span class="d">000</span>"</i>, <i>"stroke-dasharray"</i>: <i>""</i>, <i>"stroke-linecap"</i>: <i>"butt"</i>, <i>"stroke-linejoin"</i>: <i>"butt"</i>, <i>"stroke-miterlimit"</i>: <span class="d">0</span>, <i>"stroke-opacity"</i>: <span class="d">1</span>, <i>"stroke-width"</i>: <span class="d">1</span>, target: <i>"_blank"</i>, <i>"text-anchor"</i>: <i>"middle"</i>, title: <i>"Raphael"</i>, transform: <i>""</i>, width: <span class="d">0</span>, x: <span class="d">0</span>, y: <span class="d">0</span>},</span>
+</code><code id="L129"><span class="ln">129</span> availableAnimAttrs<span class="s"> = </span>{blur: nu, <i>"clip-rect"</i>: <i>"csv"</i>, cx: nu, cy: nu, fill: <i>"colour"</i>, <i>"fill-opacity"</i>: nu, <i>"font-size"</i>: nu, height: nu, opacity: nu, path: <i>"path"</i>, r: nu, rx: nu, ry: nu, stroke: <i>"colour"</i>, <i>"stroke-opacity"</i>: nu, <i>"stroke-width"</i>: nu, transform: <i>"transform"</i>, width: nu, x: nu, y: nu},
+</code><code id="L130"><span class="ln">130</span> commaSpaces<span class="s"> = </span>/\s*,\s*/,
+</code><code id="L131"><span class="ln">131</span> hsrg<span class="s"> = </span>{hs: <span class="d">1</span>, rg: <span class="d">1</span>},
+</code><code id="L132"><span class="ln">132</span> p2s<span class="s"> = </span>/,?([achlmqrstvxz]),?/gi,
+</code><code id="L133"><span class="ln">133</span> pathCommand<span class="s"> = </span>/([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig,
+</code><code id="L134"><span class="ln">134</span> tCommand<span class="s"> = </span>/([rstm])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig,
+</code><code id="L135"><span class="ln">135</span> pathValues<span class="s"> = </span>/(-?\d*\.?\d*(?:e[-+]?\d+)?)\s*,?\s*/ig,
+</code><code id="L136"><span class="ln">136</span> radial_gradient<span class="s"> = </span>/^r(?:\(([^,]+?)\s*,\s*([^\)]+?)\))?/,
+</code><code id="L137"><span class="ln">137</span> sortByKey<span class="s"> = </span><b>function</b> (a, b) {
+</code><code id="L138"><span class="ln">138</span> <b>return</b> a.key<span class="s"> - </span>b.key;
+</code><code id="L139"><span class="ln">139</span> },
+</code><code id="L140"><span class="ln">140</span> sortByNumber<span class="s"> = </span><b>function</b> (a, b) {
+</code><code id="L141"><span class="ln">141</span> <b>return</b> a<span class="s"> - </span>b;
+</code><code id="L142"><span class="ln">142</span> },
+</code><code id="L143"><span class="ln">143</span> fun<span class="s"> = </span><b>function</b> () {},
+</code><code id="L144"><span class="ln">144</span> pipe<span class="s"> = </span><b>function</b> (x) {
+</code><code id="L145"><span class="ln">145</span> <b>return</b> x;
+</code><code id="L146"><span class="ln">146</span> },
+</code><code id="L147"><span class="ln">147</span> rectPath<span class="s"> = </span><b>function</b> (x, y, w, h, r) {
+</code><code id="L148"><span class="ln">148</span> <b>if</b> (r) {
+</code><code id="L149"><span class="ln">149</span> <b>return</b> [[<i>"M"</i>, x<span class="s"> + </span>r, y], [<i>"l"</i>, w<span class="s"> - </span>r<span class="s"> * </span><span class="d">2</span>, <span class="d">0</span>], [<i>"a"</i>, r, r, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, r, r], [<i>"l"</i>, <span class="d">0</span>, h<span class="s"> - </span>r<span class="s"> * </span><span class="d">2</span>], [<i>"a"</i>, r, r, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, -r, r], [<i>"l"</i>, r<span class="s"> * </span><span class="d">2</span><span class="s"> - </span>w, <span class="d">0</span>], [<i>"a"</i>, r, r, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, -r, -r], [<i>"l"</i>, <span class="d">0</span>, r<span class="s"> * </span><span class="d">2</span><span class="s"> - </span>h], [<i>"a"</i>, r, r, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, r, -r], [<i>"z"</i>]];
+</code><code id="L150"><span class="ln">150</span> }
+</code><code id="L151"><span class="ln">151</span> <b>return</b> [[<i>"M"</i>, x, y], [<i>"l"</i>, w, <span class="d">0</span>], [<i>"l"</i>, <span class="d">0</span>, h], [<i>"l"</i>, -w, <span class="d">0</span>], [<i>"z"</i>]];
+</code><code id="L152"><span class="ln">152</span> },
+</code><code id="L153"><span class="ln">153</span> ellipsePath<span class="s"> = </span><b>function</b> (x, y, rx, ry) {
+</code><code id="L154"><span class="ln">154</span> <b>if</b> (ry<span class="s"> == </span><b>null</b>) {
+</code><code id="L155"><span class="ln">155</span> ry<span class="s"> = </span>rx;
+</code><code id="L156"><span class="ln">156</span> }
+</code><code id="L157"><span class="ln">157</span> <b>return</b> [[<i>"M"</i>, x, y], [<i>"m"</i>, <span class="d">0</span>, -ry], [<i>"a"</i>, rx, ry, <span class="d">0</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">0</span>, <span class="d">2</span><span class="s"> * </span>ry], [<i>"a"</i>, rx, ry, <span class="d">0</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">0</span>, -<span class="d">2</span><span class="s"> * </span>ry], [<i>"z"</i>]];
+</code><code id="L158"><span class="ln">158</span> },
+</code><code id="L159"><span class="ln">159</span> getPath<span class="s"> = </span>{
+</code><code id="L160"><span class="ln">160</span> path: <b>function</b> (el) {
+</code><code id="L161"><span class="ln">161</span> <b>return</b> el.attr(<i>"path"</i>);
+</code><code id="L162"><span class="ln">162</span> },
+</code><code id="L163"><span class="ln">163</span> circle: <b>function</b> (el) {
+</code><code id="L164"><span class="ln">164</span> <b>var</b> a<span class="s"> = </span>el.attrs;
+</code><code id="L165"><span class="ln">165</span> <b>return</b> ellipsePath(a.cx, a.cy, a.r);
+</code><code id="L166"><span class="ln">166</span> },
+</code><code id="L167"><span class="ln">167</span> ellipse: <b>function</b> (el) {
+</code><code id="L168"><span class="ln">168</span> <b>var</b> a<span class="s"> = </span>el.attrs;
+</code><code id="L169"><span class="ln">169</span> <b>return</b> ellipsePath(a.cx, a.cy, a.rx, a.ry);
+</code><code id="L170"><span class="ln">170</span> },
+</code><code id="L171"><span class="ln">171</span> rect: <b>function</b> (el) {
+</code><code id="L172"><span class="ln">172</span> <b>var</b> a<span class="s"> = </span>el.attrs;
+</code><code id="L173"><span class="ln">173</span> <b>return</b> rectPath(a.x, a.y, a.width, a.height, a.r);
+</code><code id="L174"><span class="ln">174</span> },
+</code><code id="L175"><span class="ln">175</span> image: <b>function</b> (el) {
+</code><code id="L176"><span class="ln">176</span> <b>var</b> a<span class="s"> = </span>el.attrs;
+</code><code id="L177"><span class="ln">177</span> <b>return</b> rectPath(a.x, a.y, a.width, a.height);
+</code><code id="L178"><span class="ln">178</span> },
+</code><code id="L179"><span class="ln">179</span> text: <b>function</b> (el) {
+</code><code id="L180"><span class="ln">180</span> <b>var</b> bbox<span class="s"> = </span>el._getBBox();
+</code><code id="L181"><span class="ln">181</span> <b>return</b> rectPath(bbox.x, bbox.y, bbox.width, bbox.height);
+</code><code id="L182"><span class="ln">182</span> }
+</code><code id="L183"><span class="ln">183</span> },
+</code><code id="L184"><span class="ln">184</span> mapPath<span class="s"> = </span><b>function</b> (path, matrix) {
+</code><code id="L185"><span class="ln">185</span> <b>if</b> (!matrix) {
+</code><code id="L186"><span class="ln">186</span> <b>return</b> path;
+</code><code id="L187"><span class="ln">187</span> }
+</code><code id="L188"><span class="ln">188</span> <b>var</b> x, y, i, j, pathi;
+</code><code id="L189"><span class="ln">189</span> path<span class="s"> = </span>path2curve(path);
+</code><code id="L190"><span class="ln">190</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>path.length; i < ii; i++) {
+</code><code id="L191"><span class="ln">191</span> pathi<span class="s"> = </span>path[i];
+</code><code id="L192"><span class="ln">192</span> <b>for</b> (j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>pathi.length; j < jj; j += <span class="d">2</span>) {
+</code><code id="L193"><span class="ln">193</span> x<span class="s"> = </span>matrix.x(pathi[j], pathi[j<span class="s"> + </span><span class="d">1</span>]);
+</code><code id="L194"><span class="ln">194</span> y<span class="s"> = </span>matrix.y(pathi[j], pathi[j<span class="s"> + </span><span class="d">1</span>]);
+</code><code id="L195"><span class="ln">195</span> pathi[j]<span class="s"> = </span>x;
+</code><code id="L196"><span class="ln">196</span> pathi[j<span class="s"> + </span><span class="d">1</span>]<span class="s"> = </span>y;
+</code><code id="L197"><span class="ln">197</span> }
+</code><code id="L198"><span class="ln">198</span> }
+</code><code id="L199"><span class="ln">199</span> <b>return</b> path;
+</code><code id="L200"><span class="ln">200</span> };
+</code><code id="L201"><span class="ln">201</span>
+</code><code id="L202"><span class="ln">202</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L203"><span class="ln">203</span><span class="c"> <span class="s"> * </span>Raphael.type
+</span></code><code id="L204"><span class="ln">204</span><span class="c"> [ property (string) ]
+</span></code><code id="L205"><span class="ln">205</span><span class="c"> **
+</span></code><code id="L206"><span class="ln">206</span><span class="c"> <span class="s"> * </span>Can be “SVG”, “VML” or empty, depending on browser support.
+</span></code><code id="L207"><span class="ln">207</span><span class="c"> \*/</span>
+</code><code id="L208"><span class="ln">208</span> R.type<span class="s"> = </span>(g.win.SVGAngle<span class="s"> || </span>g.doc.implementation.hasFeature(<i>"http:<span class="c">//www.w3.org/TR/SVG11/feature#BasicStructure"</i>, <i>"<span class="d">1.1</span>"</i>) ? <i>"SVG"</i> : <i>"VML"</i>);</span>
+</code><code id="L209"><span class="ln">209</span> <b>if</b> (R.type<span class="s"> == </span><i>"VML"</i>) {
+</code><code id="L210"><span class="ln">210</span> <b>var</b> d<span class="s"> = </span>g.doc.createElement(<i>"div"</i>),
+</code><code id="L211"><span class="ln">211</span> b;
+</code><code id="L212"><span class="ln">212</span> d.innerHTML<span class="s"> = </span>'<v:shape adj=<i>"<span class="d">1</span>"</i>/>';
+</code><code id="L213"><span class="ln">213</span> b<span class="s"> = </span>d.firstChild;
+</code><code id="L214"><span class="ln">214</span> b.style.behavior<span class="s"> = </span><i>"url(#<b>default</b>#VML)"</i>;
+</code><code id="L215"><span class="ln">215</span> <b>if</b> (!(b && <b>typeof</b> b.adj<span class="s"> == </span><i>"object"</i>)) {
+</code><code id="L216"><span class="ln">216</span> <b>return</b> R.type<span class="s"> = </span>E;
+</code><code id="L217"><span class="ln">217</span> }
+</code><code id="L218"><span class="ln">218</span> d<span class="s"> = </span><b>null</b>;
+</code><code id="L219"><span class="ln">219</span> }
+</code><code id="L220"><span class="ln">220</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L221"><span class="ln">221</span><span class="c"> <span class="s"> * </span>Raphael.svg
+</span></code><code id="L222"><span class="ln">222</span><span class="c"> [ property (<b>boolean</b>) ]
+</span></code><code id="L223"><span class="ln">223</span><span class="c"> **
+</span></code><code id="L224"><span class="ln">224</span><span class="c"> <span class="s"> * </span>`<b>true</b>` <b>if</b> browser supports SVG.
+</span></code><code id="L225"><span class="ln">225</span><span class="c"> \*/</span>
+</code><code id="L226"><span class="ln">226</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L227"><span class="ln">227</span><span class="c"> <span class="s"> * </span>Raphael.vml
+</span></code><code id="L228"><span class="ln">228</span><span class="c"> [ property (<b>boolean</b>) ]
+</span></code><code id="L229"><span class="ln">229</span><span class="c"> **
+</span></code><code id="L230"><span class="ln">230</span><span class="c"> <span class="s"> * </span>`<b>true</b>` <b>if</b> browser supports VML.
+</span></code><code id="L231"><span class="ln">231</span><span class="c"> \*/</span>
+</code><code id="L232"><span class="ln">232</span> R.svg<span class="s"> = </span>!(R.vml<span class="s"> = </span>R.type<span class="s"> == </span><i>"VML"</i>);
+</code><code id="L233"><span class="ln">233</span> paperproto<span class="s"> = </span>Paper.prototype<span class="s"> = </span>R.prototype;
+</code><code id="L234"><span class="ln">234</span> paperproto.customAttributes<span class="s"> = </span>{};
+</code><code id="L235"><span class="ln">235</span> R._id<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L236"><span class="ln">236</span> R._oid<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L237"><span class="ln">237</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L238"><span class="ln">238</span><span class="c"> <span class="s"> * </span>Raphael.fn
+</span></code><code id="L239"><span class="ln">239</span><span class="c"> [ property (object) ]
+</span></code><code id="L240"><span class="ln">240</span><span class="c"> **
+</span></code><code id="L241"><span class="ln">241</span><span class="c"> <span class="s"> * </span>You can add your own method to the canvas. For example <b>if</b> you want to draw pie chart,
+</span></code><code id="L242"><span class="ln">242</span><span class="c"> <span class="s"> * </span>you can create your own pie chart <b>function</b> and ship it as a Raphaël plugin. To <b>do</b> <b>this</b>
+</span></code><code id="L243"><span class="ln">243</span><span class="c"> <span class="s"> * </span>you need to extend `Raphael.fn` object. Please note that you can create your own namespaces
+</span></code><code id="L244"><span class="ln">244</span><span class="c"> <span class="s"> * </span>inside `fn` object. Methods will be run <b>in</b> context of canvas anyway. You should alter `fn`
+</span></code><code id="L245"><span class="ln">245</span><span class="c"> <span class="s"> * </span>object before Raphaël instance was created, otherwise it will take no effect.
+</span></code><code id="L246"><span class="ln">246</span><span class="c"> > Usage
+</span></code><code id="L247"><span class="ln">247</span><span class="c"> | Raphael.fn.arrow<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, size) {
+</span></code><code id="L248"><span class="ln">248</span><span class="c"> | <b>return</b> <b>this</b>.path( ... );
+</span></code><code id="L249"><span class="ln">249</span><span class="c"> | };
+</span></code><code id="L250"><span class="ln">250</span><span class="c"> | <span class="c">// or create namespace</span>
+</span></code><code id="L251"><span class="ln">251</span><span class="c"> | Raphael.fn.mystuff<span class="s"> = </span>{
+</span></code><code id="L252"><span class="ln">252</span><span class="c"> | arrow: <b>function</b> () {…},
+</span></code><code id="L253"><span class="ln">253</span><span class="c"> | star: <b>function</b> () {…},
+</span></code><code id="L254"><span class="ln">254</span><span class="c"> | <span class="c">// etc…</span>
+</span></code><code id="L255"><span class="ln">255</span><span class="c"> | };
+</span></code><code id="L256"><span class="ln">256</span><span class="c"> | <b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">10</span>, <span class="d">630</span>, <span class="d">480</span>);
+</span></code><code id="L257"><span class="ln">257</span><span class="c"> | <span class="c">// then use it</span>
+</span></code><code id="L258"><span class="ln">258</span><span class="c"> | paper.arrow(<span class="d">10</span>, <span class="d">10</span>, <span class="d">30</span>, <span class="d">30</span>, <span class="d">5</span>).attr({fill: <i>"#f00"</i>});
+</span></code><code id="L259"><span class="ln">259</span><span class="c"> | paper.mystuff.arrow();
+</span></code><code id="L260"><span class="ln">260</span><span class="c"> | paper.mystuff.star();
+</span></code><code id="L261"><span class="ln">261</span><span class="c"> \*/</span>
+</code><code id="L262"><span class="ln">262</span> R.fn<span class="s"> = </span>{};
+</code><code id="L263"><span class="ln">263</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L264"><span class="ln">264</span><span class="c"> <span class="s"> * </span>Raphael.is
+</span></code><code id="L265"><span class="ln">265</span><span class="c"> [ method ]
+</span></code><code id="L266"><span class="ln">266</span><span class="c"> **
+</span></code><code id="L267"><span class="ln">267</span><span class="c"> <span class="s"> * </span>Handfull replacement <b>for</b> `<b>typeof</b>` operator.
+</span></code><code id="L268"><span class="ln">268</span><span class="c"> > Parameters
+</span></code><code id="L269"><span class="ln">269</span><span class="c"> <span class="s"> - </span>o (…) any object or primitive
+</span></code><code id="L270"><span class="ln">270</span><span class="c"> <span class="s"> - </span>type (string) name of the type, i.e. “string”, “<b>function</b>”, “number”, etc.
+</span></code><code id="L271"><span class="ln">271</span><span class="c"> <span class="s"> = </span>(<b>boolean</b>) is given value is of given type
+</span></code><code id="L272"><span class="ln">272</span><span class="c"> \*/</span>
+</code><code id="L273"><span class="ln">273</span> R.is<span class="s"> = </span><b>function</b> (o, type) {
+</code><code id="L274"><span class="ln">274</span> type<span class="s"> = </span>lowerCase.call(type);
+</code><code id="L275"><span class="ln">275</span> <b>if</b> (type<span class="s"> == </span><i>"finite"</i>) {
+</code><code id="L276"><span class="ln">276</span> <b>return</b> !isnan[has](+o);
+</code><code id="L277"><span class="ln">277</span> }
+</code><code id="L278"><span class="ln">278</span> <b>return</b> (type<span class="s"> == </span><i>"<b>null</b>"</i> && o<span class="s"> === </span><b>null</b>) ||
+</code><code id="L279"><span class="ln">279</span> (type<span class="s"> == </span><b>typeof</b> o) ||
+</code><code id="L280"><span class="ln">280</span> (type<span class="s"> == </span><i>"object"</i> && o<span class="s"> === </span>Object(o)) ||
+</code><code id="L281"><span class="ln">281</span> (type<span class="s"> == </span><i>"array"</i> && Array.isArray && Array.isArray(o)) ||
+</code><code id="L282"><span class="ln">282</span> objectToString.call(o).slice(<span class="d">8</span>, -<span class="d">1</span>).toLowerCase()<span class="s"> == </span>type;
+</code><code id="L283"><span class="ln">283</span> };
+</code><code id="L284"><span class="ln">284</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L285"><span class="ln">285</span><span class="c"> <span class="s"> * </span>Raphael.angle
+</span></code><code id="L286"><span class="ln">286</span><span class="c"> [ method ]
+</span></code><code id="L287"><span class="ln">287</span><span class="c"> **
+</span></code><code id="L288"><span class="ln">288</span><span class="c"> <span class="s"> * </span>Returns angle between two or three points
+</span></code><code id="L289"><span class="ln">289</span><span class="c"> > Parameters
+</span></code><code id="L290"><span class="ln">290</span><span class="c"> <span class="s"> - </span>x1 (number) x coord of first point
+</span></code><code id="L291"><span class="ln">291</span><span class="c"> <span class="s"> - </span>y1 (number) y coord of first point
+</span></code><code id="L292"><span class="ln">292</span><span class="c"> <span class="s"> - </span>x2 (number) x coord of second point
+</span></code><code id="L293"><span class="ln">293</span><span class="c"> <span class="s"> - </span>y2 (number) y coord of second point
+</span></code><code id="L294"><span class="ln">294</span><span class="c"> <span class="s"> - </span>x3 (number) #optional x coord of third point
+</span></code><code id="L295"><span class="ln">295</span><span class="c"> <span class="s"> - </span>y3 (number) #optional y coord of third point
+</span></code><code id="L296"><span class="ln">296</span><span class="c"> <span class="s"> = </span>(number) angle <b>in</b> degrees.
+</span></code><code id="L297"><span class="ln">297</span><span class="c"> \*/</span>
+</code><code id="L298"><span class="ln">298</span> R.angle<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, x3, y3) {
+</code><code id="L299"><span class="ln">299</span> <b>if</b> (x3<span class="s"> == </span><b>null</b>) {
+</code><code id="L300"><span class="ln">300</span> <b>var</b> x<span class="s"> = </span>x1<span class="s"> - </span>x2,
+</code><code id="L301"><span class="ln">301</span> y<span class="s"> = </span>y1<span class="s"> - </span>y2;
+</code><code id="L302"><span class="ln">302</span> <b>if</b> (!x && !y) {
+</code><code id="L303"><span class="ln">303</span> <b>return</b> <span class="d">0</span>;
+</code><code id="L304"><span class="ln">304</span> }
+</code><code id="L305"><span class="ln">305</span> <b>return</b> (<span class="d">180</span><span class="s"> + </span>math.atan2(-y, -x)<span class="s"> * </span><span class="d">180</span><span class="s"> / </span>PI<span class="s"> + </span><span class="d">360</span>) % <span class="d">360</span>;
+</code><code id="L306"><span class="ln">306</span> } <b>else</b> {
+</code><code id="L307"><span class="ln">307</span> <b>return</b> R.angle(x1, y1, x3, y3)<span class="s"> - </span>R.angle(x2, y2, x3, y3);
+</code><code id="L308"><span class="ln">308</span> }
+</code><code id="L309"><span class="ln">309</span> };
+</code><code id="L310"><span class="ln">310</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L311"><span class="ln">311</span><span class="c"> <span class="s"> * </span>Raphael.rad
+</span></code><code id="L312"><span class="ln">312</span><span class="c"> [ method ]
+</span></code><code id="L313"><span class="ln">313</span><span class="c"> **
+</span></code><code id="L314"><span class="ln">314</span><span class="c"> <span class="s"> * </span>Transform angle to radians
+</span></code><code id="L315"><span class="ln">315</span><span class="c"> > Parameters
+</span></code><code id="L316"><span class="ln">316</span><span class="c"> <span class="s"> - </span>deg (number) angle <b>in</b> degrees
+</span></code><code id="L317"><span class="ln">317</span><span class="c"> <span class="s"> = </span>(number) angle <b>in</b> radians.
+</span></code><code id="L318"><span class="ln">318</span><span class="c"> \*/</span>
+</code><code id="L319"><span class="ln">319</span> R.rad<span class="s"> = </span><b>function</b> (deg) {
+</code><code id="L320"><span class="ln">320</span> <b>return</b> deg % <span class="d">360</span><span class="s"> * </span>PI<span class="s"> / </span><span class="d">180</span>;
+</code><code id="L321"><span class="ln">321</span> };
+</code><code id="L322"><span class="ln">322</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L323"><span class="ln">323</span><span class="c"> <span class="s"> * </span>Raphael.deg
+</span></code><code id="L324"><span class="ln">324</span><span class="c"> [ method ]
+</span></code><code id="L325"><span class="ln">325</span><span class="c"> **
+</span></code><code id="L326"><span class="ln">326</span><span class="c"> <span class="s"> * </span>Transform angle to degrees
+</span></code><code id="L327"><span class="ln">327</span><span class="c"> > Parameters
+</span></code><code id="L328"><span class="ln">328</span><span class="c"> <span class="s"> - </span>deg (number) angle <b>in</b> radians
+</span></code><code id="L329"><span class="ln">329</span><span class="c"> <span class="s"> = </span>(number) angle <b>in</b> degrees.
+</span></code><code id="L330"><span class="ln">330</span><span class="c"> \*/</span>
+</code><code id="L331"><span class="ln">331</span> R.deg<span class="s"> = </span><b>function</b> (rad) {
+</code><code id="L332"><span class="ln">332</span> <b>return</b> rad<span class="s"> * </span><span class="d">180</span><span class="s"> / </span>PI % <span class="d">360</span>;
+</code><code id="L333"><span class="ln">333</span> };
+</code><code id="L334"><span class="ln">334</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L335"><span class="ln">335</span><span class="c"> <span class="s"> * </span>Raphael.snapTo
+</span></code><code id="L336"><span class="ln">336</span><span class="c"> [ method ]
+</span></code><code id="L337"><span class="ln">337</span><span class="c"> **
+</span></code><code id="L338"><span class="ln">338</span><span class="c"> <span class="s"> * </span>Snaps given value to given grid.
+</span></code><code id="L339"><span class="ln">339</span><span class="c"> > Parameters
+</span></code><code id="L340"><span class="ln">340</span><span class="c"> <span class="s"> - </span>values (array|number) given array of values or step of the grid
+</span></code><code id="L341"><span class="ln">341</span><span class="c"> <span class="s"> - </span>value (number) value to adjust
+</span></code><code id="L342"><span class="ln">342</span><span class="c"> <span class="s"> - </span>tolerance (number) #optional tolerance <b>for</b> snapping. Default is `<span class="d">10</span>`.
+</span></code><code id="L343"><span class="ln">343</span><span class="c"> <span class="s"> = </span>(number) adjusted value.
+</span></code><code id="L344"><span class="ln">344</span><span class="c"> \*/</span>
+</code><code id="L345"><span class="ln">345</span> R.snapTo<span class="s"> = </span><b>function</b> (values, value, tolerance) {
+</code><code id="L346"><span class="ln">346</span> tolerance<span class="s"> = </span>R.is(tolerance, <i>"finite"</i>) ? tolerance : <span class="d">10</span>;
+</code><code id="L347"><span class="ln">347</span> <b>if</b> (R.is(values, array)) {
+</code><code id="L348"><span class="ln">348</span> <b>var</b> i<span class="s"> = </span>values.length;
+</code><code id="L349"><span class="ln">349</span> <b>while</b> (i--) <b>if</b> (abs(values[i]<span class="s"> - </span>value) <= tolerance) {
+</code><code id="L350"><span class="ln">350</span> <b>return</b> values[i];
+</code><code id="L351"><span class="ln">351</span> }
+</code><code id="L352"><span class="ln">352</span> } <b>else</b> {
+</code><code id="L353"><span class="ln">353</span> values<span class="s"> = </span>+values;
+</code><code id="L354"><span class="ln">354</span> <b>var</b> rem<span class="s"> = </span>value % values;
+</code><code id="L355"><span class="ln">355</span> <b>if</b> (rem < tolerance) {
+</code><code id="L356"><span class="ln">356</span> <b>return</b> value<span class="s"> - </span>rem;
+</code><code id="L357"><span class="ln">357</span> }
+</code><code id="L358"><span class="ln">358</span> <b>if</b> (rem > values<span class="s"> - </span>tolerance) {
+</code><code id="L359"><span class="ln">359</span> <b>return</b> value<span class="s"> - </span>rem<span class="s"> + </span>values;
+</code><code id="L360"><span class="ln">360</span> }
+</code><code id="L361"><span class="ln">361</span> }
+</code><code id="L362"><span class="ln">362</span> <b>return</b> value;
+</code><code id="L363"><span class="ln">363</span> };
+</code><code id="L364"><span class="ln">364</span>
+</code><code id="L365"><span class="ln">365</span> <b>var</b> createUUID<span class="s"> = </span>(<b>function</b> (uuidRegEx, uuidReplacer) {
+</code><code id="L366"><span class="ln">366</span> <b>return</b> <b>function</b> () {
+</code><code id="L367"><span class="ln">367</span> <b>return</b> <i>"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"</i>.replace(uuidRegEx, uuidReplacer).toUpperCase();
+</code><code id="L368"><span class="ln">368</span> };
+</code><code id="L369"><span class="ln">369</span> })(/[xy]/g, <b>function</b> (c) {
+</code><code id="L370"><span class="ln">370</span> <b>var</b> r<span class="s"> = </span>math.random()<span class="s"> * </span><span class="d">16</span> | <span class="d">0</span>,
+</code><code id="L371"><span class="ln">371</span> v<span class="s"> = </span>c<span class="s"> == </span><i>"x"</i> ? r : (r & <span class="d">3</span> | <span class="d">8</span>);
+</code><code id="L372"><span class="ln">372</span> <b>return</b> v.toString(<span class="d">16</span>);
+</code><code id="L373"><span class="ln">373</span> });
+</code><code id="L374"><span class="ln">374</span>
+</code><code id="L375"><span class="ln">375</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L376"><span class="ln">376</span><span class="c"> <span class="s"> * </span>Raphael.setWindow
+</span></code><code id="L377"><span class="ln">377</span><span class="c"> [ method ]
+</span></code><code id="L378"><span class="ln">378</span><span class="c"> **
+</span></code><code id="L379"><span class="ln">379</span><span class="c"> <span class="s"> * </span>Used when you need to draw <b>in</b> `<iframe>`. Switched window to the iframe one.
+</span></code><code id="L380"><span class="ln">380</span><span class="c"> > Parameters
+</span></code><code id="L381"><span class="ln">381</span><span class="c"> <span class="s"> - </span>newwin (window) <b>new</b> window object
+</span></code><code id="L382"><span class="ln">382</span><span class="c"> \*/</span>
+</code><code id="L383"><span class="ln">383</span> R.setWindow<span class="s"> = </span><b>function</b> (newwin) {
+</code><code id="L384"><span class="ln">384</span> eve(<i>"setWindow"</i>, R, g.win, newwin);
+</code><code id="L385"><span class="ln">385</span> g.win<span class="s"> = </span>newwin;
+</code><code id="L386"><span class="ln">386</span> g.doc<span class="s"> = </span>g.win.document;
+</code><code id="L387"><span class="ln">387</span> <b>if</b> (initWin) {
+</code><code id="L388"><span class="ln">388</span> initWin(g.win);
+</code><code id="L389"><span class="ln">389</span> }
+</code><code id="L390"><span class="ln">390</span> };
+</code><code id="L391"><span class="ln">391</span> <span class="c">// colour utilities</span>
+</code><code id="L392"><span class="ln">392</span> <b>var</b> toHex<span class="s"> = </span><b>function</b> (color) {
+</code><code id="L393"><span class="ln">393</span> <b>if</b> (R.vml) {
+</code><code id="L394"><span class="ln">394</span> <span class="c">// http://dean.edwards.name/weblog/<span class="d">2009</span>/<span class="d">10</span>/convert-any-colour-value-to-hex-<b>in</b>-msie/</span>
+</code><code id="L395"><span class="ln">395</span> <b>var</b> trim<span class="s"> = </span>/^\s+|\s+$/g;
+</code><code id="L396"><span class="ln">396</span> <b>var</b> bod;
+</code><code id="L397"><span class="ln">397</span> <b>try</b> {
+</code><code id="L398"><span class="ln">398</span> <b>var</b> docum<span class="s"> = </span><b>new</b> ActiveXObject(<i>"htmlfile"</i>);
+</code><code id="L399"><span class="ln">399</span> docum.write(<i>"<body>"</i>);
+</code><code id="L400"><span class="ln">400</span> docum.close();
+</code><code id="L401"><span class="ln">401</span> bod<span class="s"> = </span>docum.body;
+</code><code id="L402"><span class="ln">402</span> } <b>catch</b>(e) {
+</code><code id="L403"><span class="ln">403</span> bod<span class="s"> = </span>createPopup().document.body;
+</code><code id="L404"><span class="ln">404</span> }
+</code><code id="L405"><span class="ln">405</span> <b>var</b> range<span class="s"> = </span>bod.createTextRange();
+</code><code id="L406"><span class="ln">406</span> toHex<span class="s"> = </span>cacher(<b>function</b> (color) {
+</code><code id="L407"><span class="ln">407</span> <b>try</b> {
+</code><code id="L408"><span class="ln">408</span> bod.style.color<span class="s"> = </span>Str(color).replace(trim, E);
+</code><code id="L409"><span class="ln">409</span> <b>var</b> value<span class="s"> = </span>range.queryCommandValue(<i>"ForeColor"</i>);
+</code><code id="L410"><span class="ln">410</span> value<span class="s"> = </span>((value & <span class="d">255</span>) << <span class="d">16</span>) | (value & <span class="d">65280</span>) | ((value & <span class="d">16711680</span>) >>> <span class="d">16</span>);
+</code><code id="L411"><span class="ln">411</span> <b>return</b> <i>"#"</i><span class="s"> + </span>(<i>"<span class="d">000000</span>"</i><span class="s"> + </span>value.toString(<span class="d">16</span>)).slice(-<span class="d">6</span>);
+</code><code id="L412"><span class="ln">412</span> } <b>catch</b>(e) {
+</code><code id="L413"><span class="ln">413</span> <b>return</b> <i>"none"</i>;
+</code><code id="L414"><span class="ln">414</span> }
+</code><code id="L415"><span class="ln">415</span> });
+</code><code id="L416"><span class="ln">416</span> } <b>else</b> {
+</code><code id="L417"><span class="ln">417</span> <b>var</b> i<span class="s"> = </span>g.doc.createElement(<i>"i"</i>);
+</code><code id="L418"><span class="ln">418</span> i.title<span class="s"> = </span><i>"Rapha\xebl Colour Picker"</i>;
+</code><code id="L419"><span class="ln">419</span> i.style.display<span class="s"> = </span><i>"none"</i>;
+</code><code id="L420"><span class="ln">420</span> g.doc.body.appendChild(i);
+</code><code id="L421"><span class="ln">421</span> toHex<span class="s"> = </span>cacher(<b>function</b> (color) {
+</code><code id="L422"><span class="ln">422</span> i.style.color<span class="s"> = </span>color;
+</code><code id="L423"><span class="ln">423</span> <b>return</b> g.doc.defaultView.getComputedStyle(i, E).getPropertyValue(<i>"color"</i>);
+</code><code id="L424"><span class="ln">424</span> });
+</code><code id="L425"><span class="ln">425</span> }
+</code><code id="L426"><span class="ln">426</span> <b>return</b> toHex(color);
+</code><code id="L427"><span class="ln">427</span> },
+</code><code id="L428"><span class="ln">428</span> hsbtoString<span class="s"> = </span><b>function</b> () {
+</code><code id="L429"><span class="ln">429</span> <b>return</b> <i>"hsb("</i><span class="s"> + </span>[<b>this</b>.h, <b>this</b>.s, <b>this</b>.b]<span class="s"> + </span><i>")"</i>;
+</code><code id="L430"><span class="ln">430</span> },
+</code><code id="L431"><span class="ln">431</span> hsltoString<span class="s"> = </span><b>function</b> () {
+</code><code id="L432"><span class="ln">432</span> <b>return</b> <i>"hsl("</i><span class="s"> + </span>[<b>this</b>.h, <b>this</b>.s, <b>this</b>.l]<span class="s"> + </span><i>")"</i>;
+</code><code id="L433"><span class="ln">433</span> },
+</code><code id="L434"><span class="ln">434</span> rgbtoString<span class="s"> = </span><b>function</b> () {
+</code><code id="L435"><span class="ln">435</span> <b>return</b> <b>this</b>.hex;
+</code><code id="L436"><span class="ln">436</span> },
+</code><code id="L437"><span class="ln">437</span> prepareRGB<span class="s"> = </span><b>function</b> (r, g, b) {
+</code><code id="L438"><span class="ln">438</span> <b>if</b> (g<span class="s"> == </span><b>null</b> && R.is(r, <i>"object"</i>) && <i>"r"</i> <b>in</b> r && <i>"g"</i> <b>in</b> r && <i>"b"</i> <b>in</b> r) {
+</code><code id="L439"><span class="ln">439</span> b<span class="s"> = </span>r.b;
+</code><code id="L440"><span class="ln">440</span> g<span class="s"> = </span>r.g;
+</code><code id="L441"><span class="ln">441</span> r<span class="s"> = </span>r.r;
+</code><code id="L442"><span class="ln">442</span> }
+</code><code id="L443"><span class="ln">443</span> <b>if</b> (g<span class="s"> == </span><b>null</b> && R.is(r, string)) {
+</code><code id="L444"><span class="ln">444</span> <b>var</b> clr<span class="s"> = </span>R.getRGB(r);
+</code><code id="L445"><span class="ln">445</span> r<span class="s"> = </span>clr.r;
+</code><code id="L446"><span class="ln">446</span> g<span class="s"> = </span>clr.g;
+</code><code id="L447"><span class="ln">447</span> b<span class="s"> = </span>clr.b;
+</code><code id="L448"><span class="ln">448</span> }
+</code><code id="L449"><span class="ln">449</span> <b>if</b> (r > <span class="d">1</span><span class="s"> || </span>g > <span class="d">1</span><span class="s"> || </span>b > <span class="d">1</span>) {
+</code><code id="L450"><span class="ln">450</span> r /= <span class="d">255</span>;
+</code><code id="L451"><span class="ln">451</span> g /= <span class="d">255</span>;
+</code><code id="L452"><span class="ln">452</span> b /= <span class="d">255</span>;
+</code><code id="L453"><span class="ln">453</span> }
+</code><code id="L454"><span class="ln">454</span>
+</code><code id="L455"><span class="ln">455</span> <b>return</b> [r, g, b];
+</code><code id="L456"><span class="ln">456</span> },
+</code><code id="L457"><span class="ln">457</span> packageRGB<span class="s"> = </span><b>function</b> (r, g, b, o) {
+</code><code id="L458"><span class="ln">458</span> r *= <span class="d">255</span>;
+</code><code id="L459"><span class="ln">459</span> g *= <span class="d">255</span>;
+</code><code id="L460"><span class="ln">460</span> b *= <span class="d">255</span>;
+</code><code id="L461"><span class="ln">461</span> <b>var</b> rgb<span class="s"> = </span>{
+</code><code id="L462"><span class="ln">462</span> r: r,
+</code><code id="L463"><span class="ln">463</span> g: g,
+</code><code id="L464"><span class="ln">464</span> b: b,
+</code><code id="L465"><span class="ln">465</span> hex: R.rgb(r, g, b),
+</code><code id="L466"><span class="ln">466</span> toString: rgbtoString
+</code><code id="L467"><span class="ln">467</span> };
+</code><code id="L468"><span class="ln">468</span> R.is(o, <i>"finite"</i>) && (rgb.opacity<span class="s"> = </span>o);
+</code><code id="L469"><span class="ln">469</span> <b>return</b> rgb;
+</code><code id="L470"><span class="ln">470</span> };
+</code><code id="L471"><span class="ln">471</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L472"><span class="ln">472</span><span class="c"> <span class="s"> * </span>Raphael.hsb2rgb
+</span></code><code id="L473"><span class="ln">473</span><span class="c"> [ method ]
+</span></code><code id="L474"><span class="ln">474</span><span class="c"> **
+</span></code><code id="L475"><span class="ln">475</span><span class="c"> <span class="s"> * </span>Converts HSB values to RGB object.
+</span></code><code id="L476"><span class="ln">476</span><span class="c"> > Parameters
+</span></code><code id="L477"><span class="ln">477</span><span class="c"> <span class="s"> - </span>h (number) hue
+</span></code><code id="L478"><span class="ln">478</span><span class="c"> <span class="s"> - </span>s (number) saturation
+</span></code><code id="L479"><span class="ln">479</span><span class="c"> <span class="s"> - </span>v (number) value or brightness
+</span></code><code id="L480"><span class="ln">480</span><span class="c"> <span class="s"> = </span>(object) RGB object <b>in</b> format:
+</span></code><code id="L481"><span class="ln">481</span><span class="c"> | {
+</span></code><code id="L482"><span class="ln">482</span><span class="c"> | r: <span class="c">// red,</span>
+</span></code><code id="L483"><span class="ln">483</span><span class="c"> | g: <span class="c">// green,</span>
+</span></code><code id="L484"><span class="ln">484</span><span class="c"> | b: <span class="c">// blue</span>
+</span></code><code id="L485"><span class="ln">485</span><span class="c"> | hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
+</span></code><code id="L486"><span class="ln">486</span><span class="c"> | }
+</span></code><code id="L487"><span class="ln">487</span><span class="c"> \*/</span>
+</code><code id="L488"><span class="ln">488</span> R.hsb2rgb<span class="s"> = </span><b>function</b> (h, s, v, o) {
+</code><code id="L489"><span class="ln">489</span> <b>if</b> (<b>this</b>.is(h, <i>"object"</i>) && <i>"h"</i> <b>in</b> h && <i>"s"</i> <b>in</b> h && <i>"b"</i> <b>in</b> h) {
+</code><code id="L490"><span class="ln">490</span> v<span class="s"> = </span>h.b;
+</code><code id="L491"><span class="ln">491</span> s<span class="s"> = </span>h.s;
+</code><code id="L492"><span class="ln">492</span> h<span class="s"> = </span>h.h;
+</code><code id="L493"><span class="ln">493</span> o<span class="s"> = </span>h.o;
+</code><code id="L494"><span class="ln">494</span> }
+</code><code id="L495"><span class="ln">495</span> h *= <span class="d">360</span>;
+</code><code id="L496"><span class="ln">496</span> <b>var</b> R, G, B, X, C;
+</code><code id="L497"><span class="ln">497</span> h<span class="s"> = </span>(h % <span class="d">360</span>)<span class="s"> / </span><span class="d">60</span>;
+</code><code id="L498"><span class="ln">498</span> C<span class="s"> = </span>v<span class="s"> * </span>s;
+</code><code id="L499"><span class="ln">499</span> X<span class="s"> = </span>C<span class="s"> * </span>(<span class="d">1</span><span class="s"> - </span>abs(h % <span class="d">2</span><span class="s"> - </span><span class="d">1</span>));
+</code><code id="L500"><span class="ln">500</span> R<span class="s"> = </span>G<span class="s"> = </span>B<span class="s"> = </span>v<span class="s"> - </span>C;
+</code><code id="L501"><span class="ln">501</span>
+</code><code id="L502"><span class="ln">502</span> h<span class="s"> = </span>~~h;
+</code><code id="L503"><span class="ln">503</span> R += [C, X, <span class="d">0</span>, <span class="d">0</span>, X, C][h];
+</code><code id="L504"><span class="ln">504</span> G += [X, C, C, X, <span class="d">0</span>, <span class="d">0</span>][h];
+</code><code id="L505"><span class="ln">505</span> B += [<span class="d">0</span>, <span class="d">0</span>, X, C, C, X][h];
+</code><code id="L506"><span class="ln">506</span> <b>return</b> packageRGB(R, G, B, o);
+</code><code id="L507"><span class="ln">507</span> };
+</code><code id="L508"><span class="ln">508</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L509"><span class="ln">509</span><span class="c"> <span class="s"> * </span>Raphael.hsl2rgb
+</span></code><code id="L510"><span class="ln">510</span><span class="c"> [ method ]
+</span></code><code id="L511"><span class="ln">511</span><span class="c"> **
+</span></code><code id="L512"><span class="ln">512</span><span class="c"> <span class="s"> * </span>Converts HSL values to RGB object.
+</span></code><code id="L513"><span class="ln">513</span><span class="c"> > Parameters
+</span></code><code id="L514"><span class="ln">514</span><span class="c"> <span class="s"> - </span>h (number) hue
+</span></code><code id="L515"><span class="ln">515</span><span class="c"> <span class="s"> - </span>s (number) saturation
+</span></code><code id="L516"><span class="ln">516</span><span class="c"> <span class="s"> - </span>l (number) luminosity
+</span></code><code id="L517"><span class="ln">517</span><span class="c"> <span class="s"> = </span>(object) RGB object <b>in</b> format:
+</span></code><code id="L518"><span class="ln">518</span><span class="c"> | {
+</span></code><code id="L519"><span class="ln">519</span><span class="c"> | r: <span class="c">// red,</span>
+</span></code><code id="L520"><span class="ln">520</span><span class="c"> | g: <span class="c">// green,</span>
+</span></code><code id="L521"><span class="ln">521</span><span class="c"> | b: <span class="c">// blue</span>
+</span></code><code id="L522"><span class="ln">522</span><span class="c"> | hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
+</span></code><code id="L523"><span class="ln">523</span><span class="c"> | }
+</span></code><code id="L524"><span class="ln">524</span><span class="c"> \*/</span>
+</code><code id="L525"><span class="ln">525</span> R.hsl2rgb<span class="s"> = </span><b>function</b> (h, s, l, o) {
+</code><code id="L526"><span class="ln">526</span> <b>if</b> (<b>this</b>.is(h, <i>"object"</i>) && <i>"h"</i> <b>in</b> h && <i>"s"</i> <b>in</b> h && <i>"l"</i> <b>in</b> h) {
+</code><code id="L527"><span class="ln">527</span> l<span class="s"> = </span>h.l;
+</code><code id="L528"><span class="ln">528</span> s<span class="s"> = </span>h.s;
+</code><code id="L529"><span class="ln">529</span> h<span class="s"> = </span>h.h;
+</code><code id="L530"><span class="ln">530</span> }
+</code><code id="L531"><span class="ln">531</span> <b>if</b> (h > <span class="d">1</span><span class="s"> || </span>s > <span class="d">1</span><span class="s"> || </span>l > <span class="d">1</span>) {
+</code><code id="L532"><span class="ln">532</span> h /= <span class="d">360</span>;
+</code><code id="L533"><span class="ln">533</span> s /= <span class="d">100</span>;
+</code><code id="L534"><span class="ln">534</span> l /= <span class="d">100</span>;
+</code><code id="L535"><span class="ln">535</span> }
+</code><code id="L536"><span class="ln">536</span> h *= <span class="d">360</span>;
+</code><code id="L537"><span class="ln">537</span> <b>var</b> R, G, B, X, C;
+</code><code id="L538"><span class="ln">538</span> h<span class="s"> = </span>(h % <span class="d">360</span>)<span class="s"> / </span><span class="d">60</span>;
+</code><code id="L539"><span class="ln">539</span> C<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>s<span class="s"> * </span>(l < <span class="d">.5</span> ? l : <span class="d">1</span><span class="s"> - </span>l);
+</code><code id="L540"><span class="ln">540</span> X<span class="s"> = </span>C<span class="s"> * </span>(<span class="d">1</span><span class="s"> - </span>abs(h % <span class="d">2</span><span class="s"> - </span><span class="d">1</span>));
+</code><code id="L541"><span class="ln">541</span> R<span class="s"> = </span>G<span class="s"> = </span>B<span class="s"> = </span>l<span class="s"> - </span>C<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L542"><span class="ln">542</span>
+</code><code id="L543"><span class="ln">543</span> h<span class="s"> = </span>~~h;
+</code><code id="L544"><span class="ln">544</span> R += [C, X, <span class="d">0</span>, <span class="d">0</span>, X, C][h];
+</code><code id="L545"><span class="ln">545</span> G += [X, C, C, X, <span class="d">0</span>, <span class="d">0</span>][h];
+</code><code id="L546"><span class="ln">546</span> B += [<span class="d">0</span>, <span class="d">0</span>, X, C, C, X][h];
+</code><code id="L547"><span class="ln">547</span> <b>return</b> packageRGB(R, G, B, o);
+</code><code id="L548"><span class="ln">548</span> };
+</code><code id="L549"><span class="ln">549</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L550"><span class="ln">550</span><span class="c"> <span class="s"> * </span>Raphael.rgb2hsb
+</span></code><code id="L551"><span class="ln">551</span><span class="c"> [ method ]
+</span></code><code id="L552"><span class="ln">552</span><span class="c"> **
+</span></code><code id="L553"><span class="ln">553</span><span class="c"> <span class="s"> * </span>Converts RGB values to HSB object.
+</span></code><code id="L554"><span class="ln">554</span><span class="c"> > Parameters
+</span></code><code id="L555"><span class="ln">555</span><span class="c"> <span class="s"> - </span>r (number) red
+</span></code><code id="L556"><span class="ln">556</span><span class="c"> <span class="s"> - </span>g (number) green
+</span></code><code id="L557"><span class="ln">557</span><span class="c"> <span class="s"> - </span>b (number) blue
+</span></code><code id="L558"><span class="ln">558</span><span class="c"> <span class="s"> = </span>(object) HSB object <b>in</b> format:
+</span></code><code id="L559"><span class="ln">559</span><span class="c"> | {
+</span></code><code id="L560"><span class="ln">560</span><span class="c"> | h: <span class="c">// hue,</span>
+</span></code><code id="L561"><span class="ln">561</span><span class="c"> | s: <span class="c">// saturation,</span>
+</span></code><code id="L562"><span class="ln">562</span><span class="c"> | b: <span class="c">// brightness</span>
+</span></code><code id="L563"><span class="ln">563</span><span class="c"> | }
+</span></code><code id="L564"><span class="ln">564</span><span class="c"> \*/</span>
+</code><code id="L565"><span class="ln">565</span> R.rgb2hsb<span class="s"> = </span><b>function</b> (r, g, b) {
+</code><code id="L566"><span class="ln">566</span> b<span class="s"> = </span>prepareRGB(r, g, b);
+</code><code id="L567"><span class="ln">567</span> r<span class="s"> = </span>b[<span class="d">0</span>];
+</code><code id="L568"><span class="ln">568</span> g<span class="s"> = </span>b[<span class="d">1</span>];
+</code><code id="L569"><span class="ln">569</span> b<span class="s"> = </span>b[<span class="d">2</span>];
+</code><code id="L570"><span class="ln">570</span>
+</code><code id="L571"><span class="ln">571</span> <b>var</b> H, S, V, C;
+</code><code id="L572"><span class="ln">572</span> V<span class="s"> = </span>mmax(r, g, b);
+</code><code id="L573"><span class="ln">573</span> C<span class="s"> = </span>V<span class="s"> - </span>mmin(r, g, b);
+</code><code id="L574"><span class="ln">574</span> H<span class="s"> = </span>(C<span class="s"> == </span><span class="d">0</span> ? <b>null</b> :
+</code><code id="L575"><span class="ln">575</span> V<span class="s"> == </span>r ? (g<span class="s"> - </span>b)<span class="s"> / </span>C :
+</code><code id="L576"><span class="ln">576</span> V<span class="s"> == </span>g ? (b<span class="s"> - </span>r)<span class="s"> / </span>C<span class="s"> + </span><span class="d">2</span> :
+</code><code id="L577"><span class="ln">577</span> (r<span class="s"> - </span>g)<span class="s"> / </span>C<span class="s"> + </span><span class="d">4</span>);
+</code><code id="L578"><span class="ln">578</span> H<span class="s"> = </span>(H % <span class="d">6</span>)<span class="s"> * </span><span class="d">60</span>;
+</code><code id="L579"><span class="ln">579</span> S<span class="s"> = </span>C<span class="s"> == </span><span class="d">0</span> ? <span class="d">0</span> : C<span class="s"> / </span>V;
+</code><code id="L580"><span class="ln">580</span> <b>return</b> {h: H, s: S, b: V, toString: hsbtoString};
+</code><code id="L581"><span class="ln">581</span> };
+</code><code id="L582"><span class="ln">582</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L583"><span class="ln">583</span><span class="c"> <span class="s"> * </span>Raphael.rgb2hsl
+</span></code><code id="L584"><span class="ln">584</span><span class="c"> [ method ]
+</span></code><code id="L585"><span class="ln">585</span><span class="c"> **
+</span></code><code id="L586"><span class="ln">586</span><span class="c"> <span class="s"> * </span>Converts RGB values to HSL object.
+</span></code><code id="L587"><span class="ln">587</span><span class="c"> > Parameters
+</span></code><code id="L588"><span class="ln">588</span><span class="c"> <span class="s"> - </span>r (number) red
+</span></code><code id="L589"><span class="ln">589</span><span class="c"> <span class="s"> - </span>g (number) green
+</span></code><code id="L590"><span class="ln">590</span><span class="c"> <span class="s"> - </span>b (number) blue
+</span></code><code id="L591"><span class="ln">591</span><span class="c"> <span class="s"> = </span>(object) HSL object <b>in</b> format:
+</span></code><code id="L592"><span class="ln">592</span><span class="c"> | {
+</span></code><code id="L593"><span class="ln">593</span><span class="c"> | h: <span class="c">// hue,</span>
+</span></code><code id="L594"><span class="ln">594</span><span class="c"> | s: <span class="c">// saturation,</span>
+</span></code><code id="L595"><span class="ln">595</span><span class="c"> | l: <span class="c">// luminosity</span>
+</span></code><code id="L596"><span class="ln">596</span><span class="c"> | }
+</span></code><code id="L597"><span class="ln">597</span><span class="c"> \*/</span>
+</code><code id="L598"><span class="ln">598</span> R.rgb2hsl<span class="s"> = </span><b>function</b> (r, g, b) {
+</code><code id="L599"><span class="ln">599</span> b<span class="s"> = </span>prepareRGB(r, g, b);
+</code><code id="L600"><span class="ln">600</span> r<span class="s"> = </span>b[<span class="d">0</span>];
+</code><code id="L601"><span class="ln">601</span> g<span class="s"> = </span>b[<span class="d">1</span>];
+</code><code id="L602"><span class="ln">602</span> b<span class="s"> = </span>b[<span class="d">2</span>];
+</code><code id="L603"><span class="ln">603</span>
+</code><code id="L604"><span class="ln">604</span> <b>var</b> H, S, L, M, m, C;
+</code><code id="L605"><span class="ln">605</span> M<span class="s"> = </span>mmax(r, g, b);
+</code><code id="L606"><span class="ln">606</span> m<span class="s"> = </span>mmin(r, g, b);
+</code><code id="L607"><span class="ln">607</span> C<span class="s"> = </span>M<span class="s"> - </span>m;
+</code><code id="L608"><span class="ln">608</span> H<span class="s"> = </span>(C<span class="s"> == </span><span class="d">0</span> ? <b>null</b> :
+</code><code id="L609"><span class="ln">609</span> M<span class="s"> == </span>r ? (g<span class="s"> - </span>b)<span class="s"> / </span>C :
+</code><code id="L610"><span class="ln">610</span> M<span class="s"> == </span>g ? (b<span class="s"> - </span>r)<span class="s"> / </span>C<span class="s"> + </span><span class="d">2</span> :
+</code><code id="L611"><span class="ln">611</span> (r<span class="s"> - </span>g)<span class="s"> / </span>C<span class="s"> + </span><span class="d">4</span>);
+</code><code id="L612"><span class="ln">612</span> H<span class="s"> = </span>(H % <span class="d">6</span>)<span class="s"> * </span><span class="d">60</span>;
+</code><code id="L613"><span class="ln">613</span> L<span class="s"> = </span>(M<span class="s"> + </span>m)<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L614"><span class="ln">614</span> S<span class="s"> = </span>(C<span class="s"> == </span><span class="d">0</span> ? <span class="d">0</span> :
+</code><code id="L615"><span class="ln">615</span> L < <span class="d">.5</span> ? C<span class="s"> / </span>(<span class="d">2</span><span class="s"> * </span>L) :
+</code><code id="L616"><span class="ln">616</span> C<span class="s"> / </span>(<span class="d">2</span><span class="s"> - </span><span class="d">2</span><span class="s"> * </span>L));
+</code><code id="L617"><span class="ln">617</span> <b>return</b> {h: H, s: S, l: L, toString: hsltoString};
+</code><code id="L618"><span class="ln">618</span> };
+</code><code id="L619"><span class="ln">619</span> R._path2string<span class="s"> = </span><b>function</b> () {
+</code><code id="L620"><span class="ln">620</span> <b>return</b> <b>this</b>.join(<i>","</i>).replace(p2s, <i>"$<span class="d">1</span>"</i>);
+</code><code id="L621"><span class="ln">621</span> };
+</code><code id="L622"><span class="ln">622</span> <b>function</b> cacher(f, scope, postprocessor) {
+</code><code id="L623"><span class="ln">623</span> <b>function</b> newf() {
+</code><code id="L624"><span class="ln">624</span> <b>var</b> arg<span class="s"> = </span>Array.prototype.slice.call(arguments, <span class="d">0</span>),
+</code><code id="L625"><span class="ln">625</span> args<span class="s"> = </span>arg.join(<i>"\u2400"</i>),
+</code><code id="L626"><span class="ln">626</span> cache<span class="s"> = </span>newf.cache<span class="s"> = </span>newf.cache<span class="s"> || </span>{},
+</code><code id="L627"><span class="ln">627</span> count<span class="s"> = </span>newf.count<span class="s"> = </span>newf.count<span class="s"> || </span>[];
+</code><code id="L628"><span class="ln">628</span> <b>if</b> (cache[has](args)) {
+</code><code id="L629"><span class="ln">629</span> <b>return</b> postprocessor ? postprocessor(cache[args]) : cache[args];
+</code><code id="L630"><span class="ln">630</span> }
+</code><code id="L631"><span class="ln">631</span> count.length >= <span class="d">1e3</span> && <b>delete</b> cache[count.shift()];
+</code><code id="L632"><span class="ln">632</span> count.push(args);
+</code><code id="L633"><span class="ln">633</span> cache[args]<span class="s"> = </span>f[apply](scope, arg);
+</code><code id="L634"><span class="ln">634</span> <b>return</b> postprocessor ? postprocessor(cache[args]) : cache[args];
+</code><code id="L635"><span class="ln">635</span> }
+</code><code id="L636"><span class="ln">636</span> <b>return</b> newf;
+</code><code id="L637"><span class="ln">637</span> }
+</code><code id="L638"><span class="ln">638</span>
+</code><code id="L639"><span class="ln">639</span> <b>function</b> preload(src, f) {
+</code><code id="L640"><span class="ln">640</span> <b>var</b> img<span class="s"> = </span>g.doc.createElement(<i>"img"</i>);
+</code><code id="L641"><span class="ln">641</span> img.style.cssText<span class="s"> = </span><i>"position:absolute;left:-9999em;top-9999em"</i>;
+</code><code id="L642"><span class="ln">642</span> img.onload<span class="s"> = </span><b>function</b> () {
+</code><code id="L643"><span class="ln">643</span> f.call(<b>this</b>);
+</code><code id="L644"><span class="ln">644</span> <b>this</b>.onload<span class="s"> = </span><b>null</b>;
+</code><code id="L645"><span class="ln">645</span> g.doc.body.removeChild(<b>this</b>);
+</code><code id="L646"><span class="ln">646</span> };
+</code><code id="L647"><span class="ln">647</span> img.onerror<span class="s"> = </span><b>function</b> () {
+</code><code id="L648"><span class="ln">648</span> g.doc.body.removeChild(<b>this</b>);
+</code><code id="L649"><span class="ln">649</span> };
+</code><code id="L650"><span class="ln">650</span> g.doc.body.appendChild(img);
+</code><code id="L651"><span class="ln">651</span> img.src<span class="s"> = </span>src;
+</code><code id="L652"><span class="ln">652</span> }
+</code><code id="L653"><span class="ln">653</span>
+</code><code id="L654"><span class="ln">654</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L655"><span class="ln">655</span><span class="c"> <span class="s"> * </span>Raphael.getRGB
+</span></code><code id="L656"><span class="ln">656</span><span class="c"> [ method ]
+</span></code><code id="L657"><span class="ln">657</span><span class="c"> **
+</span></code><code id="L658"><span class="ln">658</span><span class="c"> <span class="s"> * </span>Parses colour string as RGB object
+</span></code><code id="L659"><span class="ln">659</span><span class="c"> > Parameters
+</span></code><code id="L660"><span class="ln">660</span><span class="c"> <span class="s"> - </span>colour (string) colour string <b>in</b> one of formats:
+</span></code><code id="L661"><span class="ln">661</span><span class="c"> <ul>
+</span></code><code id="L662"><span class="ln">662</span><span class="c"> <li>Colour name (“<samp>red</samp>”, “<samp>green</samp>”, “<samp>cornflowerblue</samp>”, etc)</li>
+</span></code><code id="L663"><span class="ln">663</span><span class="c"> <li>#••• — shortened HTML colour: (“<samp>#<span class="d">000</span></samp>”, “<samp>#fc0</samp>”, etc)</li>
+</span></code><code id="L664"><span class="ln">664</span><span class="c"> <li>#•••••• — full length HTML colour: (“<samp>#<span class="d">000000</span></samp>”, “<samp>#bd2300</samp>”)</li>
+</span></code><code id="L665"><span class="ln">665</span><span class="c"> <li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<samp>rgb(<span class="d">200</span>, <span class="d">100</span>, <span class="d">0</span>)</samp>”)</li>
+</span></code><code id="L666"><span class="ln">666</span><span class="c"> <li>rgb(•••%, •••%, •••%) — same as above, but <b>in</b> %: (“<samp>rgb(<span class="d">100</span>%, <span class="d">175</span>%, <span class="d">0</span>%)</samp>”)</li>
+</span></code><code id="L667"><span class="ln">667</span><span class="c"> <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<samp>hsb(<span class="d">0.5</span>, <span class="d">0.25</span>, <span class="d">1</span>)</samp>”)</li>
+</span></code><code id="L668"><span class="ln">668</span><span class="c"> <li>hsb(•••%, •••%, •••%) — same as above, but <b>in</b> %</li>
+</span></code><code id="L669"><span class="ln">669</span><span class="c"> <li>hsl(•••, •••, •••) — same as hsb</li>
+</span></code><code id="L670"><span class="ln">670</span><span class="c"> <li>hsl(•••%, •••%, •••%) — same as hsb</li>
+</span></code><code id="L671"><span class="ln">671</span><span class="c"> </ul>
+</span></code><code id="L672"><span class="ln">672</span><span class="c"> <span class="s"> = </span>(object) RGB object <b>in</b> format:
+</span></code><code id="L673"><span class="ln">673</span><span class="c"> | {
+</span></code><code id="L674"><span class="ln">674</span><span class="c"> | r: <span class="c">// red,</span>
+</span></code><code id="L675"><span class="ln">675</span><span class="c"> | g: <span class="c">// green,</span>
+</span></code><code id="L676"><span class="ln">676</span><span class="c"> | b: <span class="c">// blue</span>
+</span></code><code id="L677"><span class="ln">677</span><span class="c"> | hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••,</span>
+</span></code><code id="L678"><span class="ln">678</span><span class="c"> | error: <span class="c">// <b>true</b> <b>if</b> string can’t be parsed</span>
+</span></code><code id="L679"><span class="ln">679</span><span class="c"> | }
+</span></code><code id="L680"><span class="ln">680</span><span class="c"> \*/</span>
+</code><code id="L681"><span class="ln">681</span> R.getRGB<span class="s"> = </span>cacher(<b>function</b> (colour) {
+</code><code id="L682"><span class="ln">682</span> <b>if</b> (!colour<span class="s"> || </span>!!((colour<span class="s"> = </span>Str(colour)).indexOf(<i>"-"</i>)<span class="s"> + </span><span class="d">1</span>)) {
+</code><code id="L683"><span class="ln">683</span> <b>return</b> {r: -<span class="d">1</span>, g: -<span class="d">1</span>, b: -<span class="d">1</span>, hex: <i>"none"</i>, error: <span class="d">1</span>};
+</code><code id="L684"><span class="ln">684</span> }
+</code><code id="L685"><span class="ln">685</span> <b>if</b> (colour<span class="s"> == </span><i>"none"</i>) {
+</code><code id="L686"><span class="ln">686</span> <b>return</b> {r: -<span class="d">1</span>, g: -<span class="d">1</span>, b: -<span class="d">1</span>, hex: <i>"none"</i>};
+</code><code id="L687"><span class="ln">687</span> }
+</code><code id="L688"><span class="ln">688</span> !(hsrg[has](colour.toLowerCase().substring(<span class="d">0</span>, <span class="d">2</span>))<span class="s"> || </span>colour.charAt()<span class="s"> == </span><i>"#"</i>) && (colour<span class="s"> = </span>toHex(colour));
+</code><code id="L689"><span class="ln">689</span> <b>var</b> res,
+</code><code id="L690"><span class="ln">690</span> red,
+</code><code id="L691"><span class="ln">691</span> green,
+</code><code id="L692"><span class="ln">692</span> blue,
+</code><code id="L693"><span class="ln">693</span> opacity,
+</code><code id="L694"><span class="ln">694</span> t,
+</code><code id="L695"><span class="ln">695</span> values,
+</code><code id="L696"><span class="ln">696</span> rgb<span class="s"> = </span>colour.match(colourRegExp);
+</code><code id="L697"><span class="ln">697</span> <b>if</b> (rgb) {
+</code><code id="L698"><span class="ln">698</span> <b>if</b> (rgb[<span class="d">2</span>]) {
+</code><code id="L699"><span class="ln">699</span> blue<span class="s"> = </span>toInt(rgb[<span class="d">2</span>].substring(<span class="d">5</span>), <span class="d">16</span>);
+</code><code id="L700"><span class="ln">700</span> green<span class="s"> = </span>toInt(rgb[<span class="d">2</span>].substring(<span class="d">3</span>, <span class="d">5</span>), <span class="d">16</span>);
+</code><code id="L701"><span class="ln">701</span> red<span class="s"> = </span>toInt(rgb[<span class="d">2</span>].substring(<span class="d">1</span>, <span class="d">3</span>), <span class="d">16</span>);
+</code><code id="L702"><span class="ln">702</span> }
+</code><code id="L703"><span class="ln">703</span> <b>if</b> (rgb[<span class="d">3</span>]) {
+</code><code id="L704"><span class="ln">704</span> blue<span class="s"> = </span>toInt((t<span class="s"> = </span>rgb[<span class="d">3</span>].charAt(<span class="d">3</span>))<span class="s"> + </span>t, <span class="d">16</span>);
+</code><code id="L705"><span class="ln">705</span> green<span class="s"> = </span>toInt((t<span class="s"> = </span>rgb[<span class="d">3</span>].charAt(<span class="d">2</span>))<span class="s"> + </span>t, <span class="d">16</span>);
+</code><code id="L706"><span class="ln">706</span> red<span class="s"> = </span>toInt((t<span class="s"> = </span>rgb[<span class="d">3</span>].charAt(<span class="d">1</span>))<span class="s"> + </span>t, <span class="d">16</span>);
+</code><code id="L707"><span class="ln">707</span> }
+</code><code id="L708"><span class="ln">708</span> <b>if</b> (rgb[<span class="d">4</span>]) {
+</code><code id="L709"><span class="ln">709</span> values<span class="s"> = </span>rgb[<span class="d">4</span>].split(commaSpaces);
+</code><code id="L710"><span class="ln">710</span> red<span class="s"> = </span>toFloat(values[<span class="d">0</span>]);
+</code><code id="L711"><span class="ln">711</span> values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (red *= <span class="d">2.55</span>);
+</code><code id="L712"><span class="ln">712</span> green<span class="s"> = </span>toFloat(values[<span class="d">1</span>]);
+</code><code id="L713"><span class="ln">713</span> values[<span class="d">1</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (green *= <span class="d">2.55</span>);
+</code><code id="L714"><span class="ln">714</span> blue<span class="s"> = </span>toFloat(values[<span class="d">2</span>]);
+</code><code id="L715"><span class="ln">715</span> values[<span class="d">2</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (blue *= <span class="d">2.55</span>);
+</code><code id="L716"><span class="ln">716</span> rgb[<span class="d">1</span>].toLowerCase().slice(<span class="d">0</span>, <span class="d">4</span>)<span class="s"> == </span><i>"rgba"</i> && (opacity<span class="s"> = </span>toFloat(values[<span class="d">3</span>]));
+</code><code id="L717"><span class="ln">717</span> values[<span class="d">3</span>] && values[<span class="d">3</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (opacity /= <span class="d">100</span>);
+</code><code id="L718"><span class="ln">718</span> }
+</code><code id="L719"><span class="ln">719</span> <b>if</b> (rgb[<span class="d">5</span>]) {
+</code><code id="L720"><span class="ln">720</span> values<span class="s"> = </span>rgb[<span class="d">5</span>].split(commaSpaces);
+</code><code id="L721"><span class="ln">721</span> red<span class="s"> = </span>toFloat(values[<span class="d">0</span>]);
+</code><code id="L722"><span class="ln">722</span> values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (red *= <span class="d">2.55</span>);
+</code><code id="L723"><span class="ln">723</span> green<span class="s"> = </span>toFloat(values[<span class="d">1</span>]);
+</code><code id="L724"><span class="ln">724</span> values[<span class="d">1</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (green *= <span class="d">2.55</span>);
+</code><code id="L725"><span class="ln">725</span> blue<span class="s"> = </span>toFloat(values[<span class="d">2</span>]);
+</code><code id="L726"><span class="ln">726</span> values[<span class="d">2</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (blue *= <span class="d">2.55</span>);
+</code><code id="L727"><span class="ln">727</span> (values[<span class="d">0</span>].slice(-<span class="d">3</span>)<span class="s"> == </span><i>"deg"</i><span class="s"> || </span>values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"\xb0"</i>) && (red /= <span class="d">360</span>);
+</code><code id="L728"><span class="ln">728</span> rgb[<span class="d">1</span>].toLowerCase().slice(<span class="d">0</span>, <span class="d">4</span>)<span class="s"> == </span><i>"hsba"</i> && (opacity<span class="s"> = </span>toFloat(values[<span class="d">3</span>]));
+</code><code id="L729"><span class="ln">729</span> values[<span class="d">3</span>] && values[<span class="d">3</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (opacity /= <span class="d">100</span>);
+</code><code id="L730"><span class="ln">730</span> <b>return</b> R.hsb2rgb(red, green, blue, opacity);
+</code><code id="L731"><span class="ln">731</span> }
+</code><code id="L732"><span class="ln">732</span> <b>if</b> (rgb[<span class="d">6</span>]) {
+</code><code id="L733"><span class="ln">733</span> values<span class="s"> = </span>rgb[<span class="d">6</span>].split(commaSpaces);
+</code><code id="L734"><span class="ln">734</span> red<span class="s"> = </span>toFloat(values[<span class="d">0</span>]);
+</code><code id="L735"><span class="ln">735</span> values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (red *= <span class="d">2.55</span>);
+</code><code id="L736"><span class="ln">736</span> green<span class="s"> = </span>toFloat(values[<span class="d">1</span>]);
+</code><code id="L737"><span class="ln">737</span> values[<span class="d">1</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (green *= <span class="d">2.55</span>);
+</code><code id="L738"><span class="ln">738</span> blue<span class="s"> = </span>toFloat(values[<span class="d">2</span>]);
+</code><code id="L739"><span class="ln">739</span> values[<span class="d">2</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (blue *= <span class="d">2.55</span>);
+</code><code id="L740"><span class="ln">740</span> (values[<span class="d">0</span>].slice(-<span class="d">3</span>)<span class="s"> == </span><i>"deg"</i><span class="s"> || </span>values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"\xb0"</i>) && (red /= <span class="d">360</span>);
+</code><code id="L741"><span class="ln">741</span> rgb[<span class="d">1</span>].toLowerCase().slice(<span class="d">0</span>, <span class="d">4</span>)<span class="s"> == </span><i>"hsla"</i> && (opacity<span class="s"> = </span>toFloat(values[<span class="d">3</span>]));
+</code><code id="L742"><span class="ln">742</span> values[<span class="d">3</span>] && values[<span class="d">3</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> && (opacity /= <span class="d">100</span>);
+</code><code id="L743"><span class="ln">743</span> <b>return</b> R.hsl2rgb(red, green, blue, opacity);
+</code><code id="L744"><span class="ln">744</span> }
+</code><code id="L745"><span class="ln">745</span> rgb<span class="s"> = </span>{r: red, g: green, b: blue};
+</code><code id="L746"><span class="ln">746</span> rgb.hex<span class="s"> = </span><i>"#"</i><span class="s"> + </span>(<span class="d">16777216</span> | blue | (green << <span class="d">8</span>) | (red << <span class="d">16</span>)).toString(<span class="d">16</span>).slice(<span class="d">1</span>);
+</code><code id="L747"><span class="ln">747</span> R.is(opacity, <i>"finite"</i>) && (rgb.opacity<span class="s"> = </span>opacity);
+</code><code id="L748"><span class="ln">748</span> <b>return</b> rgb;
+</code><code id="L749"><span class="ln">749</span> }
+</code><code id="L750"><span class="ln">750</span> <b>return</b> {r: -<span class="d">1</span>, g: -<span class="d">1</span>, b: -<span class="d">1</span>, hex: <i>"none"</i>, error: <span class="d">1</span>};
+</code><code id="L751"><span class="ln">751</span> }, R);
+</code><code id="L752"><span class="ln">752</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L753"><span class="ln">753</span><span class="c"> <span class="s"> * </span>Raphael.hsb
+</span></code><code id="L754"><span class="ln">754</span><span class="c"> [ method ]
+</span></code><code id="L755"><span class="ln">755</span><span class="c"> **
+</span></code><code id="L756"><span class="ln">756</span><span class="c"> <span class="s"> * </span>Converts HSB values to hex representation of the colour.
+</span></code><code id="L757"><span class="ln">757</span><span class="c"> > Parameters
+</span></code><code id="L758"><span class="ln">758</span><span class="c"> <span class="s"> - </span>h (number) hue
+</span></code><code id="L759"><span class="ln">759</span><span class="c"> <span class="s"> - </span>s (number) saturation
+</span></code><code id="L760"><span class="ln">760</span><span class="c"> <span class="s"> - </span>b (number) value or brightness
+</span></code><code id="L761"><span class="ln">761</span><span class="c"> <span class="s"> = </span>(string) hex representation of the colour.
+</span></code><code id="L762"><span class="ln">762</span><span class="c"> \*/</span>
+</code><code id="L763"><span class="ln">763</span> R.hsb<span class="s"> = </span>cacher(<b>function</b> (h, s, b) {
+</code><code id="L764"><span class="ln">764</span> <b>return</b> R.hsb2rgb(h, s, b).hex;
+</code><code id="L765"><span class="ln">765</span> });
+</code><code id="L766"><span class="ln">766</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L767"><span class="ln">767</span><span class="c"> <span class="s"> * </span>Raphael.hsl
+</span></code><code id="L768"><span class="ln">768</span><span class="c"> [ method ]
+</span></code><code id="L769"><span class="ln">769</span><span class="c"> **
+</span></code><code id="L770"><span class="ln">770</span><span class="c"> <span class="s"> * </span>Converts HSL values to hex representation of the colour.
+</span></code><code id="L771"><span class="ln">771</span><span class="c"> > Parameters
+</span></code><code id="L772"><span class="ln">772</span><span class="c"> <span class="s"> - </span>h (number) hue
+</span></code><code id="L773"><span class="ln">773</span><span class="c"> <span class="s"> - </span>s (number) saturation
+</span></code><code id="L774"><span class="ln">774</span><span class="c"> <span class="s"> - </span>l (number) luminosity
+</span></code><code id="L775"><span class="ln">775</span><span class="c"> <span class="s"> = </span>(string) hex representation of the colour.
+</span></code><code id="L776"><span class="ln">776</span><span class="c"> \*/</span>
+</code><code id="L777"><span class="ln">777</span> R.hsl<span class="s"> = </span>cacher(<b>function</b> (h, s, l) {
+</code><code id="L778"><span class="ln">778</span> <b>return</b> R.hsl2rgb(h, s, l).hex;
+</code><code id="L779"><span class="ln">779</span> });
+</code><code id="L780"><span class="ln">780</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L781"><span class="ln">781</span><span class="c"> <span class="s"> * </span>Raphael.rgb
+</span></code><code id="L782"><span class="ln">782</span><span class="c"> [ method ]
+</span></code><code id="L783"><span class="ln">783</span><span class="c"> **
+</span></code><code id="L784"><span class="ln">784</span><span class="c"> <span class="s"> * </span>Converts RGB values to hex representation of the colour.
+</span></code><code id="L785"><span class="ln">785</span><span class="c"> > Parameters
+</span></code><code id="L786"><span class="ln">786</span><span class="c"> <span class="s"> - </span>r (number) red
+</span></code><code id="L787"><span class="ln">787</span><span class="c"> <span class="s"> - </span>g (number) green
+</span></code><code id="L788"><span class="ln">788</span><span class="c"> <span class="s"> - </span>b (number) blue
+</span></code><code id="L789"><span class="ln">789</span><span class="c"> <span class="s"> = </span>(string) hex representation of the colour.
+</span></code><code id="L790"><span class="ln">790</span><span class="c"> \*/</span>
+</code><code id="L791"><span class="ln">791</span> R.rgb<span class="s"> = </span>cacher(<b>function</b> (r, g, b) {
+</code><code id="L792"><span class="ln">792</span> <b>return</b> <i>"#"</i><span class="s"> + </span>(<span class="d">16777216</span> | b | (g << <span class="d">8</span>) | (r << <span class="d">16</span>)).toString(<span class="d">16</span>).slice(<span class="d">1</span>);
+</code><code id="L793"><span class="ln">793</span> });
+</code><code id="L794"><span class="ln">794</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L795"><span class="ln">795</span><span class="c"> <span class="s"> * </span>Raphael.getColor
+</span></code><code id="L796"><span class="ln">796</span><span class="c"> [ method ]
+</span></code><code id="L797"><span class="ln">797</span><span class="c"> **
+</span></code><code id="L798"><span class="ln">798</span><span class="c"> <span class="s"> * </span>On each call returns next colour <b>in</b> the spectrum. To reset it back to red call @Raphael.getColor.reset
+</span></code><code id="L799"><span class="ln">799</span><span class="c"> > Parameters
+</span></code><code id="L800"><span class="ln">800</span><span class="c"> <span class="s"> - </span>value (number) #optional brightness, <b>default</b> is `<span class="d">0.75</span>`
+</span></code><code id="L801"><span class="ln">801</span><span class="c"> <span class="s"> = </span>(string) hex representation of the colour.
+</span></code><code id="L802"><span class="ln">802</span><span class="c"> \*/</span>
+</code><code id="L803"><span class="ln">803</span> R.getColor<span class="s"> = </span><b>function</b> (value) {
+</code><code id="L804"><span class="ln">804</span> <b>var</b> start<span class="s"> = </span><b>this</b>.getColor.start<span class="s"> = </span><b>this</b>.getColor.start<span class="s"> || </span>{h: <span class="d">0</span>, s: <span class="d">1</span>, b: value<span class="s"> || </span><span class="d">.75</span>},
+</code><code id="L805"><span class="ln">805</span> rgb<span class="s"> = </span><b>this</b>.hsb2rgb(start.h, start.s, start.b);
+</code><code id="L806"><span class="ln">806</span> start.h += <span class="d">.075</span>;
+</code><code id="L807"><span class="ln">807</span> <b>if</b> (start.h > <span class="d">1</span>) {
+</code><code id="L808"><span class="ln">808</span> start.h<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L809"><span class="ln">809</span> start.s -= <span class="d">.2</span>;
+</code><code id="L810"><span class="ln">810</span> start.s <= <span class="d">0</span> && (<b>this</b>.getColor.start<span class="s"> = </span>{h: <span class="d">0</span>, s: <span class="d">1</span>, b: start.b});
+</code><code id="L811"><span class="ln">811</span> }
+</code><code id="L812"><span class="ln">812</span> <b>return</b> rgb.hex;
+</code><code id="L813"><span class="ln">813</span> };
+</code><code id="L814"><span class="ln">814</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L815"><span class="ln">815</span><span class="c"> <span class="s"> * </span>Raphael.getColor.reset
+</span></code><code id="L816"><span class="ln">816</span><span class="c"> [ method ]
+</span></code><code id="L817"><span class="ln">817</span><span class="c"> **
+</span></code><code id="L818"><span class="ln">818</span><span class="c"> <span class="s"> * </span>Resets spectrum position <b>for</b> @Raphael.getColor back to red.
+</span></code><code id="L819"><span class="ln">819</span><span class="c"> \*/</span>
+</code><code id="L820"><span class="ln">820</span> R.getColor.reset<span class="s"> = </span><b>function</b> () {
+</code><code id="L821"><span class="ln">821</span> <b>delete</b> <b>this</b>.start;
+</code><code id="L822"><span class="ln">822</span> };
+</code><code id="L823"><span class="ln">823</span>
+</code><code id="L824"><span class="ln">824</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L825"><span class="ln">825</span><span class="c"> <span class="s"> * </span>Raphael.parsePathString
+</span></code><code id="L826"><span class="ln">826</span><span class="c"> [ method ]
+</span></code><code id="L827"><span class="ln">827</span><span class="c"> **
+</span></code><code id="L828"><span class="ln">828</span><span class="c"> <span class="s"> * </span>Utility method
+</span></code><code id="L829"><span class="ln">829</span><span class="c"> **
+</span></code><code id="L830"><span class="ln">830</span><span class="c"> <span class="s"> * </span>Parses given path string into an array of arrays of path segments.
+</span></code><code id="L831"><span class="ln">831</span><span class="c"> > Parameters
+</span></code><code id="L832"><span class="ln">832</span><span class="c"> <span class="s"> - </span>pathString (string|array) path string or array of segments (<b>in</b> the last <b>case</b> it will be returned stright away)
+</span></code><code id="L833"><span class="ln">833</span><span class="c"> <span class="s"> = </span>(array) array of segments.
+</span></code><code id="L834"><span class="ln">834</span><span class="c"> \*/</span>
+</code><code id="L835"><span class="ln">835</span> R.parsePathString<span class="s"> = </span>cacher(<b>function</b> (pathString) {
+</code><code id="L836"><span class="ln">836</span> <b>if</b> (!pathString) {
+</code><code id="L837"><span class="ln">837</span> <b>return</b> <b>null</b>;
+</code><code id="L838"><span class="ln">838</span> }
+</code><code id="L839"><span class="ln">839</span> <b>var</b> paramCounts<span class="s"> = </span>{a: <span class="d">7</span>, c: <span class="d">6</span>, h: <span class="d">1</span>, l: <span class="d">2</span>, m: <span class="d">2</span>, q: <span class="d">4</span>, s: <span class="d">4</span>, t: <span class="d">2</span>, v: <span class="d">1</span>, z: <span class="d">0</span>},
+</code><code id="L840"><span class="ln">840</span> data<span class="s"> = </span>[];
+</code><code id="L841"><span class="ln">841</span> <b>if</b> (R.is(pathString, array) && R.is(pathString[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L842"><span class="ln">842</span> data<span class="s"> = </span>pathClone(pathString);
+</code><code id="L843"><span class="ln">843</span> }
+</code><code id="L844"><span class="ln">844</span> <b>if</b> (!data.length) {
+</code><code id="L845"><span class="ln">845</span> Str(pathString).replace(pathCommand, <b>function</b> (a, b, c) {
+</code><code id="L846"><span class="ln">846</span> <b>var</b> params<span class="s"> = </span>[],
+</code><code id="L847"><span class="ln">847</span> name<span class="s"> = </span>lowerCase.call(b);
+</code><code id="L848"><span class="ln">848</span> c.replace(pathValues, <b>function</b> (a, b) {
+</code><code id="L849"><span class="ln">849</span> b && params.push(+b);
+</code><code id="L850"><span class="ln">850</span> });
+</code><code id="L851"><span class="ln">851</span> <b>if</b> (name<span class="s"> == </span><i>"m"</i> && params.length > <span class="d">2</span>) {
+</code><code id="L852"><span class="ln">852</span> data.push([b][concat](params.splice(<span class="d">0</span>, <span class="d">2</span>)));
+</code><code id="L853"><span class="ln">853</span> name<span class="s"> = </span><i>"l"</i>;
+</code><code id="L854"><span class="ln">854</span> b<span class="s"> = </span>b<span class="s"> == </span><i>"m"</i> ? <i>"l"</i> : <i>"L"</i>;
+</code><code id="L855"><span class="ln">855</span> }
+</code><code id="L856"><span class="ln">856</span> <b>while</b> (params.length >= paramCounts[name]) {
+</code><code id="L857"><span class="ln">857</span> data.push([b][concat](params.splice(<span class="d">0</span>, paramCounts[name])));
+</code><code id="L858"><span class="ln">858</span> <b>if</b> (!paramCounts[name]) {
+</code><code id="L859"><span class="ln">859</span> <b>break</b>;
+</code><code id="L860"><span class="ln">860</span> }
+</code><code id="L861"><span class="ln">861</span> }
+</code><code id="L862"><span class="ln">862</span> });
+</code><code id="L863"><span class="ln">863</span> }
+</code><code id="L864"><span class="ln">864</span> data.toString<span class="s"> = </span>R._path2string;
+</code><code id="L865"><span class="ln">865</span> <b>return</b> data;
+</code><code id="L866"><span class="ln">866</span> });
+</code><code id="L867"><span class="ln">867</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L868"><span class="ln">868</span><span class="c"> <span class="s"> * </span>Raphael.parseTransformString
+</span></code><code id="L869"><span class="ln">869</span><span class="c"> [ method ]
+</span></code><code id="L870"><span class="ln">870</span><span class="c"> **
+</span></code><code id="L871"><span class="ln">871</span><span class="c"> <span class="s"> * </span>Utility method
+</span></code><code id="L872"><span class="ln">872</span><span class="c"> **
+</span></code><code id="L873"><span class="ln">873</span><span class="c"> <span class="s"> * </span>Parses given path string into an array of transformations.
+</span></code><code id="L874"><span class="ln">874</span><span class="c"> > Parameters
+</span></code><code id="L875"><span class="ln">875</span><span class="c"> <span class="s"> - </span>TString (string|array) transform string or array of transformations (<b>in</b> the last <b>case</b> it will be returned stright away)
+</span></code><code id="L876"><span class="ln">876</span><span class="c"> <span class="s"> = </span>(array) array of transformations.
+</span></code><code id="L877"><span class="ln">877</span><span class="c"> \*/</span>
+</code><code id="L878"><span class="ln">878</span> R.parseTransformString<span class="s"> = </span>cacher(<b>function</b> (TString) {
+</code><code id="L879"><span class="ln">879</span> <b>if</b> (!TString) {
+</code><code id="L880"><span class="ln">880</span> <b>return</b> <b>null</b>;
+</code><code id="L881"><span class="ln">881</span> }
+</code><code id="L882"><span class="ln">882</span> <b>var</b> paramCounts<span class="s"> = </span>{r: <span class="d">3</span>, s: <span class="d">4</span>, t: <span class="d">2</span>, m: <span class="d">6</span>},
+</code><code id="L883"><span class="ln">883</span> data<span class="s"> = </span>[];
+</code><code id="L884"><span class="ln">884</span> <b>if</b> (R.is(TString, array) && R.is(TString[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L885"><span class="ln">885</span> data<span class="s"> = </span>pathClone(TString);
+</code><code id="L886"><span class="ln">886</span> }
+</code><code id="L887"><span class="ln">887</span> <b>if</b> (!data.length) {
+</code><code id="L888"><span class="ln">888</span> Str(TString).replace(tCommand, <b>function</b> (a, b, c) {
+</code><code id="L889"><span class="ln">889</span> <b>var</b> params<span class="s"> = </span>[],
+</code><code id="L890"><span class="ln">890</span> name<span class="s"> = </span>lowerCase.call(b);
+</code><code id="L891"><span class="ln">891</span> c.replace(pathValues, <b>function</b> (a, b) {
+</code><code id="L892"><span class="ln">892</span> b && params.push(+b);
+</code><code id="L893"><span class="ln">893</span> });
+</code><code id="L894"><span class="ln">894</span> data.push([name][concat](params));
+</code><code id="L895"><span class="ln">895</span> });
+</code><code id="L896"><span class="ln">896</span> }
+</code><code id="L897"><span class="ln">897</span> data.toString<span class="s"> = </span>R._path2string;
+</code><code id="L898"><span class="ln">898</span> <b>return</b> data;
+</code><code id="L899"><span class="ln">899</span> });
+</code><code id="L900"><span class="ln">900</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L901"><span class="ln">901</span><span class="c"> <span class="s"> * </span>Raphael.findDotsAtSegment
+</span></code><code id="L902"><span class="ln">902</span><span class="c"> [ method ]
+</span></code><code id="L903"><span class="ln">903</span><span class="c"> **
+</span></code><code id="L904"><span class="ln">904</span><span class="c"> <span class="s"> * </span>Utility method
+</span></code><code id="L905"><span class="ln">905</span><span class="c"> **
+</span></code><code id="L906"><span class="ln">906</span><span class="c"> <span class="s"> * </span>Find dot coordinates on the given cubic bezier curve at the given t.
+</span></code><code id="L907"><span class="ln">907</span><span class="c"> > Parameters
+</span></code><code id="L908"><span class="ln">908</span><span class="c"> <span class="s"> - </span>p1x (number) x of the first point of the curve
+</span></code><code id="L909"><span class="ln">909</span><span class="c"> <span class="s"> - </span>p1y (number) y of the first point of the curve
+</span></code><code id="L910"><span class="ln">910</span><span class="c"> <span class="s"> - </span>c1x (number) x of the first anchor of the curve
+</span></code><code id="L911"><span class="ln">911</span><span class="c"> <span class="s"> - </span>c1y (number) y of the first anchor of the curve
+</span></code><code id="L912"><span class="ln">912</span><span class="c"> <span class="s"> - </span>c2x (number) x of the second anchor of the curve
+</span></code><code id="L913"><span class="ln">913</span><span class="c"> <span class="s"> - </span>c2y (number) y of the second anchor of the curve
+</span></code><code id="L914"><span class="ln">914</span><span class="c"> <span class="s"> - </span>p2x (number) x of the second point of the curve
+</span></code><code id="L915"><span class="ln">915</span><span class="c"> <span class="s"> - </span>p2y (number) y of the second point of the curve
+</span></code><code id="L916"><span class="ln">916</span><span class="c"> <span class="s"> - </span>t (number) position on the curve (<span class="d">0</span>.<span class="d">.1</span>)
+</span></code><code id="L917"><span class="ln">917</span><span class="c"> <span class="s"> = </span>(object) point information <b>in</b> format:
+</span></code><code id="L918"><span class="ln">918</span><span class="c"> | {
+</span></code><code id="L919"><span class="ln">919</span><span class="c"> | x: <span class="c">// x coordinate of the point,</span>
+</span></code><code id="L920"><span class="ln">920</span><span class="c"> | y: <span class="c">// y coordinate of the point,</span>
+</span></code><code id="L921"><span class="ln">921</span><span class="c"> | m: {
+</span></code><code id="L922"><span class="ln">922</span><span class="c"> | x: <span class="c">// x coordinate of the left anchor,</span>
+</span></code><code id="L923"><span class="ln">923</span><span class="c"> | y: <span class="c">// y coordinate of the left anchor</span>
+</span></code><code id="L924"><span class="ln">924</span><span class="c"> | },
+</span></code><code id="L925"><span class="ln">925</span><span class="c"> | n: {
+</span></code><code id="L926"><span class="ln">926</span><span class="c"> | x: <span class="c">// x coordinate of the right anchor,</span>
+</span></code><code id="L927"><span class="ln">927</span><span class="c"> | y: <span class="c">// y coordinate of the right anchor</span>
+</span></code><code id="L928"><span class="ln">928</span><span class="c"> | },
+</span></code><code id="L929"><span class="ln">929</span><span class="c"> | start: {
+</span></code><code id="L930"><span class="ln">930</span><span class="c"> | x: <span class="c">// x coordinate of the start of the curve,</span>
+</span></code><code id="L931"><span class="ln">931</span><span class="c"> | y: <span class="c">// y coordinate of the start of the curve</span>
+</span></code><code id="L932"><span class="ln">932</span><span class="c"> | },
+</span></code><code id="L933"><span class="ln">933</span><span class="c"> | end: {
+</span></code><code id="L934"><span class="ln">934</span><span class="c"> | x: <span class="c">// x coordinate of the end of the curve,</span>
+</span></code><code id="L935"><span class="ln">935</span><span class="c"> | y: <span class="c">// y coordinate of the end of the curve</span>
+</span></code><code id="L936"><span class="ln">936</span><span class="c"> | },
+</span></code><code id="L937"><span class="ln">937</span><span class="c"> | alpha: <span class="c">// angle of the curve derivative at the point.</span>
+</span></code><code id="L938"><span class="ln">938</span><span class="c"> | }
+</span></code><code id="L939"><span class="ln">939</span><span class="c"> \*/</span>
+</code><code id="L940"><span class="ln">940</span> R.findDotsAtSegment<span class="s"> = </span><b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+</code><code id="L941"><span class="ln">941</span> <b>var</b> t1<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>t,
+</code><code id="L942"><span class="ln">942</span> x<span class="s"> = </span>pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1x<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1x<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2x<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2x,
+</code><code id="L943"><span class="ln">943</span> y<span class="s"> = </span>pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1y<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1y<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2y<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2y,
+</code><code id="L944"><span class="ln">944</span> mx<span class="s"> = </span>p1x<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c1x<span class="s"> - </span>p1x)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(c2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1x<span class="s"> + </span>p1x),
+</code><code id="L945"><span class="ln">945</span> my<span class="s"> = </span>p1y<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c1y<span class="s"> - </span>p1y)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(c2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1y<span class="s"> + </span>p1y),
+</code><code id="L946"><span class="ln">946</span> nx<span class="s"> = </span>c1x<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c2x<span class="s"> - </span>c1x)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(p2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2x<span class="s"> + </span>c1x),
+</code><code id="L947"><span class="ln">947</span> ny<span class="s"> = </span>c1y<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c2y<span class="s"> - </span>c1y)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(p2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2y<span class="s"> + </span>c1y),
+</code><code id="L948"><span class="ln">948</span> ax<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>p1x<span class="s"> + </span>t<span class="s"> * </span>c1x,
+</code><code id="L949"><span class="ln">949</span> ay<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>p1y<span class="s"> + </span>t<span class="s"> * </span>c1y,
+</code><code id="L950"><span class="ln">950</span> cx<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>c2x<span class="s"> + </span>t<span class="s"> * </span>p2x,
+</code><code id="L951"><span class="ln">951</span> cy<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>c2y<span class="s"> + </span>t<span class="s"> * </span>p2y,
+</code><code id="L952"><span class="ln">952</span> alpha<span class="s"> = </span>(<span class="d">90</span><span class="s"> - </span>math.atan2(mx<span class="s"> - </span>nx, my<span class="s"> - </span>ny)<span class="s"> * </span><span class="d">180</span><span class="s"> / </span>PI);
+</code><code id="L953"><span class="ln">953</span> (mx > nx<span class="s"> || </span>my < ny) && (alpha += <span class="d">180</span>);
+</code><code id="L954"><span class="ln">954</span> <b>return</b> {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};
+</code><code id="L955"><span class="ln">955</span> };
+</code><code id="L956"><span class="ln">956</span> <b>var</b> pathDimensions<span class="s"> = </span>cacher(<b>function</b> (path) {
+</code><code id="L957"><span class="ln">957</span> <b>if</b> (!path) {
+</code><code id="L958"><span class="ln">958</span> <b>return</b> {x: <span class="d">0</span>, y: <span class="d">0</span>, width: <span class="d">0</span>, height: <span class="d">0</span>};
+</code><code id="L959"><span class="ln">959</span> }
+</code><code id="L960"><span class="ln">960</span> path<span class="s"> = </span>path2curve(path);
+</code><code id="L961"><span class="ln">961</span> <b>var</b> x<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L962"><span class="ln">962</span> y<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L963"><span class="ln">963</span> X<span class="s"> = </span>[],
+</code><code id="L964"><span class="ln">964</span> Y<span class="s"> = </span>[],
+</code><code id="L965"><span class="ln">965</span> p;
+</code><code id="L966"><span class="ln">966</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>path.length; i < ii; i++) {
+</code><code id="L967"><span class="ln">967</span> p<span class="s"> = </span>path[i];
+</code><code id="L968"><span class="ln">968</span> <b>if</b> (p[<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
+</code><code id="L969"><span class="ln">969</span> x<span class="s"> = </span>p[<span class="d">1</span>];
+</code><code id="L970"><span class="ln">970</span> y<span class="s"> = </span>p[<span class="d">2</span>];
+</code><code id="L971"><span class="ln">971</span> X.push(x);
+</code><code id="L972"><span class="ln">972</span> Y.push(y);
+</code><code id="L973"><span class="ln">973</span> } <b>else</b> {
+</code><code id="L974"><span class="ln">974</span> <b>var</b> dim<span class="s"> = </span>curveDim(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>]);
+</code><code id="L975"><span class="ln">975</span> X<span class="s"> = </span>X[concat](dim.min.x, dim.max.x);
+</code><code id="L976"><span class="ln">976</span> Y<span class="s"> = </span>Y[concat](dim.min.y, dim.max.y);
+</code><code id="L977"><span class="ln">977</span> x<span class="s"> = </span>p[<span class="d">5</span>];
+</code><code id="L978"><span class="ln">978</span> y<span class="s"> = </span>p[<span class="d">6</span>];
+</code><code id="L979"><span class="ln">979</span> }
+</code><code id="L980"><span class="ln">980</span> }
+</code><code id="L981"><span class="ln">981</span> <b>var</b> xmin<span class="s"> = </span>mmin[apply](<span class="d">0</span>, X),
+</code><code id="L982"><span class="ln">982</span> ymin<span class="s"> = </span>mmin[apply](<span class="d">0</span>, Y);
+</code><code id="L983"><span class="ln">983</span> <b>return</b> {
+</code><code id="L984"><span class="ln">984</span> x: xmin,
+</code><code id="L985"><span class="ln">985</span> y: ymin,
+</code><code id="L986"><span class="ln">986</span> width: mmax[apply](<span class="d">0</span>, X)<span class="s"> - </span>xmin,
+</code><code id="L987"><span class="ln">987</span> height: mmax[apply](<span class="d">0</span>, Y)<span class="s"> - </span>ymin
+</code><code id="L988"><span class="ln">988</span> };
+</code><code id="L989"><span class="ln">989</span> }),
+</code><code id="L990"><span class="ln">990</span> pathClone<span class="s"> = </span><b>function</b> (pathArray) {
+</code><code id="L991"><span class="ln">991</span> <b>var</b> res<span class="s"> = </span>[];
+</code><code id="L992"><span class="ln">992</span> <b>if</b> (!R.is(pathArray, array)<span class="s"> || </span>!R.is(pathArray && pathArray[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L993"><span class="ln">993</span> pathArray<span class="s"> = </span>R.parsePathString(pathArray);
+</code><code id="L994"><span class="ln">994</span> }
+</code><code id="L995"><span class="ln">995</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>pathArray.length; i < ii; i++) {
+</code><code id="L996"><span class="ln">996</span> res[i]<span class="s"> = </span>[];
+</code><code id="L997"><span class="ln">997</span> <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>pathArray[i].length; j < jj; j++) {
+</code><code id="L998"><span class="ln">998</span> res[i][j]<span class="s"> = </span>pathArray[i][j];
+</code><code id="L999"><span class="ln">999</span> }
+</code><code id="L1000"><span class="ln">1000</span> }
+</code><code id="L1001"><span class="ln">1001</span> res.toString<span class="s"> = </span>R._path2string;
+</code><code id="L1002"><span class="ln">1002</span> <b>return</b> res;
+</code><code id="L1003"><span class="ln">1003</span> },
+</code><code id="L1004"><span class="ln">1004</span> pathToRelative<span class="s"> = </span>cacher(<b>function</b> (pathArray) {
+</code><code id="L1005"><span class="ln">1005</span> <b>if</b> (!R.is(pathArray, array)<span class="s"> || </span>!R.is(pathArray && pathArray[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L1006"><span class="ln">1006</span> pathArray<span class="s"> = </span>R.parsePathString(pathArray);
+</code><code id="L1007"><span class="ln">1007</span> }
+</code><code id="L1008"><span class="ln">1008</span> <b>var</b> res<span class="s"> = </span>[],
+</code><code id="L1009"><span class="ln">1009</span> x<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1010"><span class="ln">1010</span> y<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1011"><span class="ln">1011</span> mx<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1012"><span class="ln">1012</span> my<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1013"><span class="ln">1013</span> start<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1014"><span class="ln">1014</span> <b>if</b> (pathArray[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
+</code><code id="L1015"><span class="ln">1015</span> x<span class="s"> = </span>pathArray[<span class="d">0</span>][<span class="d">1</span>];
+</code><code id="L1016"><span class="ln">1016</span> y<span class="s"> = </span>pathArray[<span class="d">0</span>][<span class="d">2</span>];
+</code><code id="L1017"><span class="ln">1017</span> mx<span class="s"> = </span>x;
+</code><code id="L1018"><span class="ln">1018</span> my<span class="s"> = </span>y;
+</code><code id="L1019"><span class="ln">1019</span> start++;
+</code><code id="L1020"><span class="ln">1020</span> res.push([<i>"M"</i>, x, y]);
+</code><code id="L1021"><span class="ln">1021</span> }
+</code><code id="L1022"><span class="ln">1022</span> <b>for</b> (<b>var</b> i<span class="s"> = </span>start, ii<span class="s"> = </span>pathArray.length; i < ii; i++) {
+</code><code id="L1023"><span class="ln">1023</span> <b>var</b> r<span class="s"> = </span>res[i]<span class="s"> = </span>[],
+</code><code id="L1024"><span class="ln">1024</span> pa<span class="s"> = </span>pathArray[i];
+</code><code id="L1025"><span class="ln">1025</span> <b>if</b> (pa[<span class="d">0</span>] != lowerCase.call(pa[<span class="d">0</span>])) {
+</code><code id="L1026"><span class="ln">1026</span> r[<span class="d">0</span>]<span class="s"> = </span>lowerCase.call(pa[<span class="d">0</span>]);
+</code><code id="L1027"><span class="ln">1027</span> <b>switch</b> (r[<span class="d">0</span>]) {
+</code><code id="L1028"><span class="ln">1028</span> <b>case</b> <i>"a"</i>:
+</code><code id="L1029"><span class="ln">1029</span> r[<span class="d">1</span>]<span class="s"> = </span>pa[<span class="d">1</span>];
+</code><code id="L1030"><span class="ln">1030</span> r[<span class="d">2</span>]<span class="s"> = </span>pa[<span class="d">2</span>];
+</code><code id="L1031"><span class="ln">1031</span> r[<span class="d">3</span>]<span class="s"> = </span>pa[<span class="d">3</span>];
+</code><code id="L1032"><span class="ln">1032</span> r[<span class="d">4</span>]<span class="s"> = </span>pa[<span class="d">4</span>];
+</code><code id="L1033"><span class="ln">1033</span> r[<span class="d">5</span>]<span class="s"> = </span>pa[<span class="d">5</span>];
+</code><code id="L1034"><span class="ln">1034</span> r[<span class="d">6</span>]<span class="s"> = </span>+(pa[<span class="d">6</span>]<span class="s"> - </span>x).toFixed(<span class="d">3</span>);
+</code><code id="L1035"><span class="ln">1035</span> r[<span class="d">7</span>]<span class="s"> = </span>+(pa[<span class="d">7</span>]<span class="s"> - </span>y).toFixed(<span class="d">3</span>);
+</code><code id="L1036"><span class="ln">1036</span> <b>break</b>;
+</code><code id="L1037"><span class="ln">1037</span> <b>case</b> <i>"v"</i>:
+</code><code id="L1038"><span class="ln">1038</span> r[<span class="d">1</span>]<span class="s"> = </span>+(pa[<span class="d">1</span>]<span class="s"> - </span>y).toFixed(<span class="d">3</span>);
+</code><code id="L1039"><span class="ln">1039</span> <b>break</b>;
+</code><code id="L1040"><span class="ln">1040</span> <b>case</b> <i>"m"</i>:
+</code><code id="L1041"><span class="ln">1041</span> mx<span class="s"> = </span>pa[<span class="d">1</span>];
+</code><code id="L1042"><span class="ln">1042</span> my<span class="s"> = </span>pa[<span class="d">2</span>];
+</code><code id="L1043"><span class="ln">1043</span> <b>default</b>:
+</code><code id="L1044"><span class="ln">1044</span> <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>pa.length; j < jj; j++) {
+</code><code id="L1045"><span class="ln">1045</span> r[j]<span class="s"> = </span>+(pa[j]<span class="s"> - </span>((j % <span class="d">2</span>) ? x : y)).toFixed(<span class="d">3</span>);
+</code><code id="L1046"><span class="ln">1046</span> }
+</code><code id="L1047"><span class="ln">1047</span> }
+</code><code id="L1048"><span class="ln">1048</span> } <b>else</b> {
+</code><code id="L1049"><span class="ln">1049</span> r<span class="s"> = </span>res[i]<span class="s"> = </span>[];
+</code><code id="L1050"><span class="ln">1050</span> <b>if</b> (pa[<span class="d">0</span>]<span class="s"> == </span><i>"m"</i>) {
+</code><code id="L1051"><span class="ln">1051</span> mx<span class="s"> = </span>pa[<span class="d">1</span>]<span class="s"> + </span>x;
+</code><code id="L1052"><span class="ln">1052</span> my<span class="s"> = </span>pa[<span class="d">2</span>]<span class="s"> + </span>y;
+</code><code id="L1053"><span class="ln">1053</span> }
+</code><code id="L1054"><span class="ln">1054</span> <b>for</b> (<b>var</b> k<span class="s"> = </span><span class="d">0</span>, kk<span class="s"> = </span>pa.length; k < kk; k++) {
+</code><code id="L1055"><span class="ln">1055</span> res[i][k]<span class="s"> = </span>pa[k];
+</code><code id="L1056"><span class="ln">1056</span> }
+</code><code id="L1057"><span class="ln">1057</span> }
+</code><code id="L1058"><span class="ln">1058</span> <b>var</b> len<span class="s"> = </span>res[i].length;
+</code><code id="L1059"><span class="ln">1059</span> <b>switch</b> (res[i][<span class="d">0</span>]) {
+</code><code id="L1060"><span class="ln">1060</span> <b>case</b> <i>"z"</i>:
+</code><code id="L1061"><span class="ln">1061</span> x<span class="s"> = </span>mx;
+</code><code id="L1062"><span class="ln">1062</span> y<span class="s"> = </span>my;
+</code><code id="L1063"><span class="ln">1063</span> <b>break</b>;
+</code><code id="L1064"><span class="ln">1064</span> <b>case</b> <i>"h"</i>:
+</code><code id="L1065"><span class="ln">1065</span> x += +res[i][len<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1066"><span class="ln">1066</span> <b>break</b>;
+</code><code id="L1067"><span class="ln">1067</span> <b>case</b> <i>"v"</i>:
+</code><code id="L1068"><span class="ln">1068</span> y += +res[i][len<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1069"><span class="ln">1069</span> <b>break</b>;
+</code><code id="L1070"><span class="ln">1070</span> <b>default</b>:
+</code><code id="L1071"><span class="ln">1071</span> x += +res[i][len<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1072"><span class="ln">1072</span> y += +res[i][len<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1073"><span class="ln">1073</span> }
+</code><code id="L1074"><span class="ln">1074</span> }
+</code><code id="L1075"><span class="ln">1075</span> res.toString<span class="s"> = </span>R._path2string;
+</code><code id="L1076"><span class="ln">1076</span> <b>return</b> res;
+</code><code id="L1077"><span class="ln">1077</span> }, <span class="d">0</span>, pathClone),
+</code><code id="L1078"><span class="ln">1078</span> pathToAbsolute<span class="s"> = </span>cacher(<b>function</b> (pathArray) {
+</code><code id="L1079"><span class="ln">1079</span> <b>if</b> (!R.is(pathArray, array)<span class="s"> || </span>!R.is(pathArray && pathArray[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L1080"><span class="ln">1080</span> pathArray<span class="s"> = </span>R.parsePathString(pathArray);
+</code><code id="L1081"><span class="ln">1081</span> }
+</code><code id="L1082"><span class="ln">1082</span> <b>var</b> res<span class="s"> = </span>[],
+</code><code id="L1083"><span class="ln">1083</span> x<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1084"><span class="ln">1084</span> y<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1085"><span class="ln">1085</span> mx<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1086"><span class="ln">1086</span> my<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1087"><span class="ln">1087</span> start<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1088"><span class="ln">1088</span> <b>if</b> (pathArray[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
+</code><code id="L1089"><span class="ln">1089</span> x<span class="s"> = </span>+pathArray[<span class="d">0</span>][<span class="d">1</span>];
+</code><code id="L1090"><span class="ln">1090</span> y<span class="s"> = </span>+pathArray[<span class="d">0</span>][<span class="d">2</span>];
+</code><code id="L1091"><span class="ln">1091</span> mx<span class="s"> = </span>x;
+</code><code id="L1092"><span class="ln">1092</span> my<span class="s"> = </span>y;
+</code><code id="L1093"><span class="ln">1093</span> start++;
+</code><code id="L1094"><span class="ln">1094</span> res[<span class="d">0</span>]<span class="s"> = </span>[<i>"M"</i>, x, y];
+</code><code id="L1095"><span class="ln">1095</span> }
+</code><code id="L1096"><span class="ln">1096</span> <b>for</b> (<b>var</b> i<span class="s"> = </span>start, ii<span class="s"> = </span>pathArray.length; i < ii; i++) {
+</code><code id="L1097"><span class="ln">1097</span> <b>var</b> r<span class="s"> = </span>res[i]<span class="s"> = </span>[],
+</code><code id="L1098"><span class="ln">1098</span> pa<span class="s"> = </span>pathArray[i];
+</code><code id="L1099"><span class="ln">1099</span> <b>if</b> (pa[<span class="d">0</span>] != upperCase.call(pa[<span class="d">0</span>])) {
+</code><code id="L1100"><span class="ln">1100</span> r[<span class="d">0</span>]<span class="s"> = </span>upperCase.call(pa[<span class="d">0</span>]);
+</code><code id="L1101"><span class="ln">1101</span> <b>switch</b> (r[<span class="d">0</span>]) {
+</code><code id="L1102"><span class="ln">1102</span> <b>case</b> <i>"A"</i>:
+</code><code id="L1103"><span class="ln">1103</span> r[<span class="d">1</span>]<span class="s"> = </span>pa[<span class="d">1</span>];
+</code><code id="L1104"><span class="ln">1104</span> r[<span class="d">2</span>]<span class="s"> = </span>pa[<span class="d">2</span>];
+</code><code id="L1105"><span class="ln">1105</span> r[<span class="d">3</span>]<span class="s"> = </span>pa[<span class="d">3</span>];
+</code><code id="L1106"><span class="ln">1106</span> r[<span class="d">4</span>]<span class="s"> = </span>pa[<span class="d">4</span>];
+</code><code id="L1107"><span class="ln">1107</span> r[<span class="d">5</span>]<span class="s"> = </span>pa[<span class="d">5</span>];
+</code><code id="L1108"><span class="ln">1108</span> r[<span class="d">6</span>]<span class="s"> = </span>+(pa[<span class="d">6</span>]<span class="s"> + </span>x);
+</code><code id="L1109"><span class="ln">1109</span> r[<span class="d">7</span>]<span class="s"> = </span>+(pa[<span class="d">7</span>]<span class="s"> + </span>y);
+</code><code id="L1110"><span class="ln">1110</span> <b>break</b>;
+</code><code id="L1111"><span class="ln">1111</span> <b>case</b> <i>"V"</i>:
+</code><code id="L1112"><span class="ln">1112</span> r[<span class="d">1</span>]<span class="s"> = </span>+pa[<span class="d">1</span>]<span class="s"> + </span>y;
+</code><code id="L1113"><span class="ln">1113</span> <b>break</b>;
+</code><code id="L1114"><span class="ln">1114</span> <b>case</b> <i>"H"</i>:
+</code><code id="L1115"><span class="ln">1115</span> r[<span class="d">1</span>]<span class="s"> = </span>+pa[<span class="d">1</span>]<span class="s"> + </span>x;
+</code><code id="L1116"><span class="ln">1116</span> <b>break</b>;
+</code><code id="L1117"><span class="ln">1117</span> <b>case</b> <i>"M"</i>:
+</code><code id="L1118"><span class="ln">1118</span> mx<span class="s"> = </span>+pa[<span class="d">1</span>]<span class="s"> + </span>x;
+</code><code id="L1119"><span class="ln">1119</span> my<span class="s"> = </span>+pa[<span class="d">2</span>]<span class="s"> + </span>y;
+</code><code id="L1120"><span class="ln">1120</span> <b>default</b>:
+</code><code id="L1121"><span class="ln">1121</span> <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>pa.length; j < jj; j++) {
+</code><code id="L1122"><span class="ln">1122</span> r[j]<span class="s"> = </span>+pa[j]<span class="s"> + </span>((j % <span class="d">2</span>) ? x : y);
+</code><code id="L1123"><span class="ln">1123</span> }
+</code><code id="L1124"><span class="ln">1124</span> }
+</code><code id="L1125"><span class="ln">1125</span> } <b>else</b> {
+</code><code id="L1126"><span class="ln">1126</span> <b>for</b> (<b>var</b> k<span class="s"> = </span><span class="d">0</span>, kk<span class="s"> = </span>pa.length; k < kk; k++) {
+</code><code id="L1127"><span class="ln">1127</span> res[i][k]<span class="s"> = </span>pa[k];
+</code><code id="L1128"><span class="ln">1128</span> }
+</code><code id="L1129"><span class="ln">1129</span> }
+</code><code id="L1130"><span class="ln">1130</span> <b>switch</b> (r[<span class="d">0</span>]) {
+</code><code id="L1131"><span class="ln">1131</span> <b>case</b> <i>"Z"</i>:
+</code><code id="L1132"><span class="ln">1132</span> x<span class="s"> = </span>mx;
+</code><code id="L1133"><span class="ln">1133</span> y<span class="s"> = </span>my;
+</code><code id="L1134"><span class="ln">1134</span> <b>break</b>;
+</code><code id="L1135"><span class="ln">1135</span> <b>case</b> <i>"H"</i>:
+</code><code id="L1136"><span class="ln">1136</span> x<span class="s"> = </span>r[<span class="d">1</span>];
+</code><code id="L1137"><span class="ln">1137</span> <b>break</b>;
+</code><code id="L1138"><span class="ln">1138</span> <b>case</b> <i>"V"</i>:
+</code><code id="L1139"><span class="ln">1139</span> y<span class="s"> = </span>r[<span class="d">1</span>];
+</code><code id="L1140"><span class="ln">1140</span> <b>break</b>;
+</code><code id="L1141"><span class="ln">1141</span> <b>case</b> <i>"M"</i>:
+</code><code id="L1142"><span class="ln">1142</span> mx<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1143"><span class="ln">1143</span> my<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1144"><span class="ln">1144</span> <b>default</b>:
+</code><code id="L1145"><span class="ln">1145</span> x<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1146"><span class="ln">1146</span> y<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1147"><span class="ln">1147</span> }
+</code><code id="L1148"><span class="ln">1148</span> }
+</code><code id="L1149"><span class="ln">1149</span> res.toString<span class="s"> = </span>R._path2string;
+</code><code id="L1150"><span class="ln">1150</span> <b>return</b> res;
+</code><code id="L1151"><span class="ln">1151</span> }, <b>null</b>, pathClone),
+</code><code id="L1152"><span class="ln">1152</span> l2c<span class="s"> = </span><b>function</b> (x1, y1, x2, y2) {
+</code><code id="L1153"><span class="ln">1153</span> <b>return</b> [x1, y1, x2, y2, x2, y2];
+</code><code id="L1154"><span class="ln">1154</span> },
+</code><code id="L1155"><span class="ln">1155</span> q2c<span class="s"> = </span><b>function</b> (x1, y1, ax, ay, x2, y2) {
+</code><code id="L1156"><span class="ln">1156</span> <b>var</b> _13<span class="s"> = </span><span class="d">1</span><span class="s"> / </span><span class="d">3</span>,
+</code><code id="L1157"><span class="ln">1157</span> _23<span class="s"> = </span><span class="d">2</span><span class="s"> / </span><span class="d">3</span>;
+</code><code id="L1158"><span class="ln">1158</span> <b>return</b> [
+</code><code id="L1159"><span class="ln">1159</span> _13<span class="s"> * </span>x1<span class="s"> + </span>_23<span class="s"> * </span>ax,
+</code><code id="L1160"><span class="ln">1160</span> _13<span class="s"> * </span>y1<span class="s"> + </span>_23<span class="s"> * </span>ay,
+</code><code id="L1161"><span class="ln">1161</span> _13<span class="s"> * </span>x2<span class="s"> + </span>_23<span class="s"> * </span>ax,
+</code><code id="L1162"><span class="ln">1162</span> _13<span class="s"> * </span>y2<span class="s"> + </span>_23<span class="s"> * </span>ay,
+</code><code id="L1163"><span class="ln">1163</span> x2,
+</code><code id="L1164"><span class="ln">1164</span> y2
+</code><code id="L1165"><span class="ln">1165</span> ];
+</code><code id="L1166"><span class="ln">1166</span> },
+</code><code id="L1167"><span class="ln">1167</span> a2c<span class="s"> = </span><b>function</b> (x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
+</code><code id="L1168"><span class="ln">1168</span> <span class="c">// <b>for</b> more information of where <b>this</b> math came from visit:</span>
+</code><code id="L1169"><span class="ln">1169</span> <span class="c">// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes</span>
+</code><code id="L1170"><span class="ln">1170</span> <b>var</b> _120<span class="s"> = </span>PI<span class="s"> * </span><span class="d">120</span><span class="s"> / </span><span class="d">180</span>,
+</code><code id="L1171"><span class="ln">1171</span> rad<span class="s"> = </span>PI<span class="s"> / </span><span class="d">180</span><span class="s"> * </span>(+angle<span class="s"> || </span><span class="d">0</span>),
+</code><code id="L1172"><span class="ln">1172</span> res<span class="s"> = </span>[],
+</code><code id="L1173"><span class="ln">1173</span> xy,
+</code><code id="L1174"><span class="ln">1174</span> rotate<span class="s"> = </span>cacher(<b>function</b> (x, y, rad) {
+</code><code id="L1175"><span class="ln">1175</span> <b>var</b> X<span class="s"> = </span>x<span class="s"> * </span>math.cos(rad)<span class="s"> - </span>y<span class="s"> * </span>math.sin(rad),
+</code><code id="L1176"><span class="ln">1176</span> Y<span class="s"> = </span>x<span class="s"> * </span>math.sin(rad)<span class="s"> + </span>y<span class="s"> * </span>math.cos(rad);
+</code><code id="L1177"><span class="ln">1177</span> <b>return</b> {x: X, y: Y};
+</code><code id="L1178"><span class="ln">1178</span> });
+</code><code id="L1179"><span class="ln">1179</span> <b>if</b> (!recursive) {
+</code><code id="L1180"><span class="ln">1180</span> xy<span class="s"> = </span>rotate(x1, y1, -rad);
+</code><code id="L1181"><span class="ln">1181</span> x1<span class="s"> = </span>xy.x;
+</code><code id="L1182"><span class="ln">1182</span> y1<span class="s"> = </span>xy.y;
+</code><code id="L1183"><span class="ln">1183</span> xy<span class="s"> = </span>rotate(x2, y2, -rad);
+</code><code id="L1184"><span class="ln">1184</span> x2<span class="s"> = </span>xy.x;
+</code><code id="L1185"><span class="ln">1185</span> y2<span class="s"> = </span>xy.y;
+</code><code id="L1186"><span class="ln">1186</span> <b>var</b> cos<span class="s"> = </span>math.cos(PI<span class="s"> / </span><span class="d">180</span><span class="s"> * </span>angle),
+</code><code id="L1187"><span class="ln">1187</span> sin<span class="s"> = </span>math.sin(PI<span class="s"> / </span><span class="d">180</span><span class="s"> * </span>angle),
+</code><code id="L1188"><span class="ln">1188</span> x<span class="s"> = </span>(x1<span class="s"> - </span>x2)<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L1189"><span class="ln">1189</span> y<span class="s"> = </span>(y1<span class="s"> - </span>y2)<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L1190"><span class="ln">1190</span> <b>var</b> h<span class="s"> = </span>(x<span class="s"> * </span>x)<span class="s"> / </span>(rx<span class="s"> * </span>rx)<span class="s"> + </span>(y<span class="s"> * </span>y)<span class="s"> / </span>(ry<span class="s"> * </span>ry);
+</code><code id="L1191"><span class="ln">1191</span> <b>if</b> (h > <span class="d">1</span>) {
+</code><code id="L1192"><span class="ln">1192</span> h<span class="s"> = </span>math.sqrt(h);
+</code><code id="L1193"><span class="ln">1193</span> rx<span class="s"> = </span>h<span class="s"> * </span>rx;
+</code><code id="L1194"><span class="ln">1194</span> ry<span class="s"> = </span>h<span class="s"> * </span>ry;
+</code><code id="L1195"><span class="ln">1195</span> }
+</code><code id="L1196"><span class="ln">1196</span> <b>var</b> rx2<span class="s"> = </span>rx<span class="s"> * </span>rx,
+</code><code id="L1197"><span class="ln">1197</span> ry2<span class="s"> = </span>ry<span class="s"> * </span>ry,
+</code><code id="L1198"><span class="ln">1198</span> k<span class="s"> = </span>(large_arc_flag<span class="s"> == </span>sweep_flag ? -<span class="d">1</span> : <span class="d">1</span>) *
+</code><code id="L1199"><span class="ln">1199</span> math.sqrt(abs((rx2<span class="s"> * </span>ry2<span class="s"> - </span>rx2<span class="s"> * </span>y<span class="s"> * </span>y<span class="s"> - </span>ry2<span class="s"> * </span>x<span class="s"> * </span>x)<span class="s"> / </span>(rx2<span class="s"> * </span>y<span class="s"> * </span>y<span class="s"> + </span>ry2<span class="s"> * </span>x<span class="s"> * </span>x))),
+</code><code id="L1200"><span class="ln">1200</span> cx<span class="s"> = </span>k<span class="s"> * </span>rx<span class="s"> * </span>y<span class="s"> / </span>ry<span class="s"> + </span>(x1<span class="s"> + </span>x2)<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L1201"><span class="ln">1201</span> cy<span class="s"> = </span>k<span class="s"> * </span>-ry<span class="s"> * </span>x<span class="s"> / </span>rx<span class="s"> + </span>(y1<span class="s"> + </span>y2)<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L1202"><span class="ln">1202</span> f1<span class="s"> = </span>math.asin(((y1<span class="s"> - </span>cy)<span class="s"> / </span>ry).toFixed(<span class="d">9</span>)),
+</code><code id="L1203"><span class="ln">1203</span> f2<span class="s"> = </span>math.asin(((y2<span class="s"> - </span>cy)<span class="s"> / </span>ry).toFixed(<span class="d">9</span>));
+</code><code id="L1204"><span class="ln">1204</span>
+</code><code id="L1205"><span class="ln">1205</span> f1<span class="s"> = </span>x1 < cx ? PI<span class="s"> - </span>f1 : f1;
+</code><code id="L1206"><span class="ln">1206</span> f2<span class="s"> = </span>x2 < cx ? PI<span class="s"> - </span>f2 : f2;
+</code><code id="L1207"><span class="ln">1207</span> f1 < <span class="d">0</span> && (f1<span class="s"> = </span>PI<span class="s"> * </span><span class="d">2</span><span class="s"> + </span>f1);
+</code><code id="L1208"><span class="ln">1208</span> f2 < <span class="d">0</span> && (f2<span class="s"> = </span>PI<span class="s"> * </span><span class="d">2</span><span class="s"> + </span>f2);
+</code><code id="L1209"><span class="ln">1209</span> <b>if</b> (sweep_flag && f1 > f2) {
+</code><code id="L1210"><span class="ln">1210</span> f1<span class="s"> = </span>f1<span class="s"> - </span>PI<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L1211"><span class="ln">1211</span> }
+</code><code id="L1212"><span class="ln">1212</span> <b>if</b> (!sweep_flag && f2 > f1) {
+</code><code id="L1213"><span class="ln">1213</span> f2<span class="s"> = </span>f2<span class="s"> - </span>PI<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L1214"><span class="ln">1214</span> }
+</code><code id="L1215"><span class="ln">1215</span> } <b>else</b> {
+</code><code id="L1216"><span class="ln">1216</span> f1<span class="s"> = </span>recursive[<span class="d">0</span>];
+</code><code id="L1217"><span class="ln">1217</span> f2<span class="s"> = </span>recursive[<span class="d">1</span>];
+</code><code id="L1218"><span class="ln">1218</span> cx<span class="s"> = </span>recursive[<span class="d">2</span>];
+</code><code id="L1219"><span class="ln">1219</span> cy<span class="s"> = </span>recursive[<span class="d">3</span>];
+</code><code id="L1220"><span class="ln">1220</span> }
+</code><code id="L1221"><span class="ln">1221</span> <b>var</b> df<span class="s"> = </span>f2<span class="s"> - </span>f1;
+</code><code id="L1222"><span class="ln">1222</span> <b>if</b> (abs(df) > _120) {
+</code><code id="L1223"><span class="ln">1223</span> <b>var</b> f2old<span class="s"> = </span>f2,
+</code><code id="L1224"><span class="ln">1224</span> x2old<span class="s"> = </span>x2,
+</code><code id="L1225"><span class="ln">1225</span> y2old<span class="s"> = </span>y2;
+</code><code id="L1226"><span class="ln">1226</span> f2<span class="s"> = </span>f1<span class="s"> + </span>_120<span class="s"> * </span>(sweep_flag && f2 > f1 ? <span class="d">1</span> : -<span class="d">1</span>);
+</code><code id="L1227"><span class="ln">1227</span> x2<span class="s"> = </span>cx<span class="s"> + </span>rx<span class="s"> * </span>math.cos(f2);
+</code><code id="L1228"><span class="ln">1228</span> y2<span class="s"> = </span>cy<span class="s"> + </span>ry<span class="s"> * </span>math.sin(f2);
+</code><code id="L1229"><span class="ln">1229</span> res<span class="s"> = </span>a2c(x2, y2, rx, ry, angle, <span class="d">0</span>, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
+</code><code id="L1230"><span class="ln">1230</span> }
+</code><code id="L1231"><span class="ln">1231</span> df<span class="s"> = </span>f2<span class="s"> - </span>f1;
+</code><code id="L1232"><span class="ln">1232</span> <b>var</b> c1<span class="s"> = </span>math.cos(f1),
+</code><code id="L1233"><span class="ln">1233</span> s1<span class="s"> = </span>math.sin(f1),
+</code><code id="L1234"><span class="ln">1234</span> c2<span class="s"> = </span>math.cos(f2),
+</code><code id="L1235"><span class="ln">1235</span> s2<span class="s"> = </span>math.sin(f2),
+</code><code id="L1236"><span class="ln">1236</span> t<span class="s"> = </span>math.tan(df<span class="s"> / </span><span class="d">4</span>),
+</code><code id="L1237"><span class="ln">1237</span> hx<span class="s"> = </span><span class="d">4</span><span class="s"> / </span><span class="d">3</span><span class="s"> * </span>rx<span class="s"> * </span>t,
+</code><code id="L1238"><span class="ln">1238</span> hy<span class="s"> = </span><span class="d">4</span><span class="s"> / </span><span class="d">3</span><span class="s"> * </span>ry<span class="s"> * </span>t,
+</code><code id="L1239"><span class="ln">1239</span> m1<span class="s"> = </span>[x1, y1],
+</code><code id="L1240"><span class="ln">1240</span> m2<span class="s"> = </span>[x1<span class="s"> + </span>hx<span class="s"> * </span>s1, y1<span class="s"> - </span>hy<span class="s"> * </span>c1],
+</code><code id="L1241"><span class="ln">1241</span> m3<span class="s"> = </span>[x2<span class="s"> + </span>hx<span class="s"> * </span>s2, y2<span class="s"> - </span>hy<span class="s"> * </span>c2],
+</code><code id="L1242"><span class="ln">1242</span> m4<span class="s"> = </span>[x2, y2];
+</code><code id="L1243"><span class="ln">1243</span> m2[<span class="d">0</span>]<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>m1[<span class="d">0</span>]<span class="s"> - </span>m2[<span class="d">0</span>];
+</code><code id="L1244"><span class="ln">1244</span> m2[<span class="d">1</span>]<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>m1[<span class="d">1</span>]<span class="s"> - </span>m2[<span class="d">1</span>];
+</code><code id="L1245"><span class="ln">1245</span> <b>if</b> (recursive) {
+</code><code id="L1246"><span class="ln">1246</span> <b>return</b> [m2, m3, m4][concat](res);
+</code><code id="L1247"><span class="ln">1247</span> } <b>else</b> {
+</code><code id="L1248"><span class="ln">1248</span> res<span class="s"> = </span>[m2, m3, m4][concat](res).join().split(<i>","</i>);
+</code><code id="L1249"><span class="ln">1249</span> <b>var</b> newres<span class="s"> = </span>[];
+</code><code id="L1250"><span class="ln">1250</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>res.length; i < ii; i++) {
+</code><code id="L1251"><span class="ln">1251</span> newres[i]<span class="s"> = </span>i % <span class="d">2</span> ? rotate(res[i<span class="s"> - </span><span class="d">1</span>], res[i], rad).y : rotate(res[i], res[i<span class="s"> + </span><span class="d">1</span>], rad).x;
+</code><code id="L1252"><span class="ln">1252</span> }
+</code><code id="L1253"><span class="ln">1253</span> <b>return</b> newres;
+</code><code id="L1254"><span class="ln">1254</span> }
+</code><code id="L1255"><span class="ln">1255</span> },
+</code><code id="L1256"><span class="ln">1256</span> findDotAtSegment<span class="s"> = </span><b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+</code><code id="L1257"><span class="ln">1257</span> <b>var</b> t1<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>t;
+</code><code id="L1258"><span class="ln">1258</span> <b>return</b> {
+</code><code id="L1259"><span class="ln">1259</span> x: pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1x<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1x<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2x<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2x,
+</code><code id="L1260"><span class="ln">1260</span> y: pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1y<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1y<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2y<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2y
+</code><code id="L1261"><span class="ln">1261</span> };
+</code><code id="L1262"><span class="ln">1262</span> },
+</code><code id="L1263"><span class="ln">1263</span> curveDim<span class="s"> = </span>cacher(<b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
+</code><code id="L1264"><span class="ln">1264</span> <b>var</b> a<span class="s"> = </span>(c2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1x<span class="s"> + </span>p1x)<span class="s"> - </span>(p2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2x<span class="s"> + </span>c1x),
+</code><code id="L1265"><span class="ln">1265</span> b<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>(c1x<span class="s"> - </span>p1x)<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>(c2x<span class="s"> - </span>c1x),
+</code><code id="L1266"><span class="ln">1266</span> c<span class="s"> = </span>p1x<span class="s"> - </span>c1x,
+</code><code id="L1267"><span class="ln">1267</span> t1<span class="s"> = </span>(-b<span class="s"> + </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a,
+</code><code id="L1268"><span class="ln">1268</span> t2<span class="s"> = </span>(-b<span class="s"> - </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a,
+</code><code id="L1269"><span class="ln">1269</span> y<span class="s"> = </span>[p1y, p2y],
+</code><code id="L1270"><span class="ln">1270</span> x<span class="s"> = </span>[p1x, p2x],
+</code><code id="L1271"><span class="ln">1271</span> dot;
+</code><code id="L1272"><span class="ln">1272</span> abs(t1) > <i>"<span class="d">1e12</span>"</i> && (t1<span class="s"> = </span><span class="d">.5</span>);
+</code><code id="L1273"><span class="ln">1273</span> abs(t2) > <i>"<span class="d">1e12</span>"</i> && (t2<span class="s"> = </span><span class="d">.5</span>);
+</code><code id="L1274"><span class="ln">1274</span> <b>if</b> (t1 > <span class="d">0</span> && t1 < <span class="d">1</span>) {
+</code><code id="L1275"><span class="ln">1275</span> dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1);
+</code><code id="L1276"><span class="ln">1276</span> x.push(dot.x);
+</code><code id="L1277"><span class="ln">1277</span> y.push(dot.y);
+</code><code id="L1278"><span class="ln">1278</span> }
+</code><code id="L1279"><span class="ln">1279</span> <b>if</b> (t2 > <span class="d">0</span> && t2 < <span class="d">1</span>) {
+</code><code id="L1280"><span class="ln">1280</span> dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2);
+</code><code id="L1281"><span class="ln">1281</span> x.push(dot.x);
+</code><code id="L1282"><span class="ln">1282</span> y.push(dot.y);
+</code><code id="L1283"><span class="ln">1283</span> }
+</code><code id="L1284"><span class="ln">1284</span> a<span class="s"> = </span>(c2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1y<span class="s"> + </span>p1y)<span class="s"> - </span>(p2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2y<span class="s"> + </span>c1y);
+</code><code id="L1285"><span class="ln">1285</span> b<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>(c1y<span class="s"> - </span>p1y)<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>(c2y<span class="s"> - </span>c1y);
+</code><code id="L1286"><span class="ln">1286</span> c<span class="s"> = </span>p1y<span class="s"> - </span>c1y;
+</code><code id="L1287"><span class="ln">1287</span> t1<span class="s"> = </span>(-b<span class="s"> + </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a;
+</code><code id="L1288"><span class="ln">1288</span> t2<span class="s"> = </span>(-b<span class="s"> - </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a;
+</code><code id="L1289"><span class="ln">1289</span> abs(t1) > <i>"<span class="d">1e12</span>"</i> && (t1<span class="s"> = </span><span class="d">.5</span>);
+</code><code id="L1290"><span class="ln">1290</span> abs(t2) > <i>"<span class="d">1e12</span>"</i> && (t2<span class="s"> = </span><span class="d">.5</span>);
+</code><code id="L1291"><span class="ln">1291</span> <b>if</b> (t1 > <span class="d">0</span> && t1 < <span class="d">1</span>) {
+</code><code id="L1292"><span class="ln">1292</span> dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1);
+</code><code id="L1293"><span class="ln">1293</span> x.push(dot.x);
+</code><code id="L1294"><span class="ln">1294</span> y.push(dot.y);
+</code><code id="L1295"><span class="ln">1295</span> }
+</code><code id="L1296"><span class="ln">1296</span> <b>if</b> (t2 > <span class="d">0</span> && t2 < <span class="d">1</span>) {
+</code><code id="L1297"><span class="ln">1297</span> dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2);
+</code><code id="L1298"><span class="ln">1298</span> x.push(dot.x);
+</code><code id="L1299"><span class="ln">1299</span> y.push(dot.y);
+</code><code id="L1300"><span class="ln">1300</span> }
+</code><code id="L1301"><span class="ln">1301</span> <b>return</b> {
+</code><code id="L1302"><span class="ln">1302</span> min: {x: mmin[apply](<span class="d">0</span>, x), y: mmin[apply](<span class="d">0</span>, y)},
+</code><code id="L1303"><span class="ln">1303</span> max: {x: mmax[apply](<span class="d">0</span>, x), y: mmax[apply](<span class="d">0</span>, y)}
+</code><code id="L1304"><span class="ln">1304</span> };
+</code><code id="L1305"><span class="ln">1305</span> }),
+</code><code id="L1306"><span class="ln">1306</span> path2curve<span class="s"> = </span>cacher(<b>function</b> (path, path2) {
+</code><code id="L1307"><span class="ln">1307</span> <b>var</b> p<span class="s"> = </span>pathToAbsolute(path),
+</code><code id="L1308"><span class="ln">1308</span> p2<span class="s"> = </span>path2 && pathToAbsolute(path2),
+</code><code id="L1309"><span class="ln">1309</span> attrs<span class="s"> = </span>{x: <span class="d">0</span>, y: <span class="d">0</span>, bx: <span class="d">0</span>, by: <span class="d">0</span>, X: <span class="d">0</span>, Y: <span class="d">0</span>, qx: <b>null</b>, qy: <b>null</b>},
+</code><code id="L1310"><span class="ln">1310</span> attrs2<span class="s"> = </span>{x: <span class="d">0</span>, y: <span class="d">0</span>, bx: <span class="d">0</span>, by: <span class="d">0</span>, X: <span class="d">0</span>, Y: <span class="d">0</span>, qx: <b>null</b>, qy: <b>null</b>},
+</code><code id="L1311"><span class="ln">1311</span> processPath<span class="s"> = </span><b>function</b> (path, d) {
+</code><code id="L1312"><span class="ln">1312</span> <b>var</b> nx, ny;
+</code><code id="L1313"><span class="ln">1313</span> <b>if</b> (!path) {
+</code><code id="L1314"><span class="ln">1314</span> <b>return</b> [<i>"C"</i>, d.x, d.y, d.x, d.y, d.x, d.y];
+</code><code id="L1315"><span class="ln">1315</span> }
+</code><code id="L1316"><span class="ln">1316</span> !(path[<span class="d">0</span>] <b>in</b> {T:<span class="d">1</span>, Q:<span class="d">1</span>}) && (d.qx<span class="s"> = </span>d.qy<span class="s"> = </span><b>null</b>);
+</code><code id="L1317"><span class="ln">1317</span> <b>switch</b> (path[<span class="d">0</span>]) {
+</code><code id="L1318"><span class="ln">1318</span> <b>case</b> <i>"M"</i>:
+</code><code id="L1319"><span class="ln">1319</span> d.X<span class="s"> = </span>path[<span class="d">1</span>];
+</code><code id="L1320"><span class="ln">1320</span> d.Y<span class="s"> = </span>path[<span class="d">2</span>];
+</code><code id="L1321"><span class="ln">1321</span> <b>break</b>;
+</code><code id="L1322"><span class="ln">1322</span> <b>case</b> <i>"A"</i>:
+</code><code id="L1323"><span class="ln">1323</span> path<span class="s"> = </span>[<i>"C"</i>][concat](a2c[apply](<span class="d">0</span>, [d.x, d.y][concat](path.slice(<span class="d">1</span>))));
+</code><code id="L1324"><span class="ln">1324</span> <b>break</b>;
+</code><code id="L1325"><span class="ln">1325</span> <b>case</b> <i>"S"</i>:
+</code><code id="L1326"><span class="ln">1326</span> nx<span class="s"> = </span>d.x<span class="s"> + </span>(d.x<span class="s"> - </span>(d.bx<span class="s"> || </span>d.x));
+</code><code id="L1327"><span class="ln">1327</span> ny<span class="s"> = </span>d.y<span class="s"> + </span>(d.y<span class="s"> - </span>(d.by<span class="s"> || </span>d.y));
+</code><code id="L1328"><span class="ln">1328</span> path<span class="s"> = </span>[<i>"C"</i>, nx, ny][concat](path.slice(<span class="d">1</span>));
+</code><code id="L1329"><span class="ln">1329</span> <b>break</b>;
+</code><code id="L1330"><span class="ln">1330</span> <b>case</b> <i>"T"</i>:
+</code><code id="L1331"><span class="ln">1331</span> d.qx<span class="s"> = </span>d.x<span class="s"> + </span>(d.x<span class="s"> - </span>(d.qx<span class="s"> || </span>d.x));
+</code><code id="L1332"><span class="ln">1332</span> d.qy<span class="s"> = </span>d.y<span class="s"> + </span>(d.y<span class="s"> - </span>(d.qy<span class="s"> || </span>d.y));
+</code><code id="L1333"><span class="ln">1333</span> path<span class="s"> = </span>[<i>"C"</i>][concat](q2c(d.x, d.y, d.qx, d.qy, path[<span class="d">1</span>], path[<span class="d">2</span>]));
+</code><code id="L1334"><span class="ln">1334</span> <b>break</b>;
+</code><code id="L1335"><span class="ln">1335</span> <b>case</b> <i>"Q"</i>:
+</code><code id="L1336"><span class="ln">1336</span> d.qx<span class="s"> = </span>path[<span class="d">1</span>];
+</code><code id="L1337"><span class="ln">1337</span> d.qy<span class="s"> = </span>path[<span class="d">2</span>];
+</code><code id="L1338"><span class="ln">1338</span> path<span class="s"> = </span>[<i>"C"</i>][concat](q2c(d.x, d.y, path[<span class="d">1</span>], path[<span class="d">2</span>], path[<span class="d">3</span>], path[<span class="d">4</span>]));
+</code><code id="L1339"><span class="ln">1339</span> <b>break</b>;
+</code><code id="L1340"><span class="ln">1340</span> <b>case</b> <i>"L"</i>:
+</code><code id="L1341"><span class="ln">1341</span> path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, path[<span class="d">1</span>], path[<span class="d">2</span>]));
+</code><code id="L1342"><span class="ln">1342</span> <b>break</b>;
+</code><code id="L1343"><span class="ln">1343</span> <b>case</b> <i>"H"</i>:
+</code><code id="L1344"><span class="ln">1344</span> path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, path[<span class="d">1</span>], d.y));
+</code><code id="L1345"><span class="ln">1345</span> <b>break</b>;
+</code><code id="L1346"><span class="ln">1346</span> <b>case</b> <i>"V"</i>:
+</code><code id="L1347"><span class="ln">1347</span> path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, d.x, path[<span class="d">1</span>]));
+</code><code id="L1348"><span class="ln">1348</span> <b>break</b>;
+</code><code id="L1349"><span class="ln">1349</span> <b>case</b> <i>"Z"</i>:
+</code><code id="L1350"><span class="ln">1350</span> path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, d.X, d.Y));
+</code><code id="L1351"><span class="ln">1351</span> <b>break</b>;
+</code><code id="L1352"><span class="ln">1352</span> }
+</code><code id="L1353"><span class="ln">1353</span> <b>return</b> path;
+</code><code id="L1354"><span class="ln">1354</span> },
+</code><code id="L1355"><span class="ln">1355</span> fixArc<span class="s"> = </span><b>function</b> (pp, i) {
+</code><code id="L1356"><span class="ln">1356</span> <b>if</b> (pp[i].length > <span class="d">7</span>) {
+</code><code id="L1357"><span class="ln">1357</span> pp[i].shift();
+</code><code id="L1358"><span class="ln">1358</span> <b>var</b> pi<span class="s"> = </span>pp[i];
+</code><code id="L1359"><span class="ln">1359</span> <b>while</b> (pi.length) {
+</code><code id="L1360"><span class="ln">1360</span> pp.splice(i++, <span class="d">0</span>, [<i>"C"</i>][concat](pi.splice(<span class="d">0</span>, <span class="d">6</span>)));
+</code><code id="L1361"><span class="ln">1361</span> }
+</code><code id="L1362"><span class="ln">1362</span> pp.splice(i, <span class="d">1</span>);
+</code><code id="L1363"><span class="ln">1363</span> ii<span class="s"> = </span>mmax(p.length, p2 && p2.length<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L1364"><span class="ln">1364</span> }
+</code><code id="L1365"><span class="ln">1365</span> },
+</code><code id="L1366"><span class="ln">1366</span> fixM<span class="s"> = </span><b>function</b> (path1, path2, a1, a2, i) {
+</code><code id="L1367"><span class="ln">1367</span> <b>if</b> (path1 && path2 && path1[i][<span class="d">0</span>]<span class="s"> == </span><i>"M"</i> && path2[i][<span class="d">0</span>] != <i>"M"</i>) {
+</code><code id="L1368"><span class="ln">1368</span> path2.splice(i, <span class="d">0</span>, [<i>"M"</i>, a2.x, a2.y]);
+</code><code id="L1369"><span class="ln">1369</span> a1.bx<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1370"><span class="ln">1370</span> a1.by<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1371"><span class="ln">1371</span> a1.x<span class="s"> = </span>path1[i][<span class="d">1</span>];
+</code><code id="L1372"><span class="ln">1372</span> a1.y<span class="s"> = </span>path1[i][<span class="d">2</span>];
+</code><code id="L1373"><span class="ln">1373</span> ii<span class="s"> = </span>mmax(p.length, p2 && p2.length<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L1374"><span class="ln">1374</span> }
+</code><code id="L1375"><span class="ln">1375</span> };
+</code><code id="L1376"><span class="ln">1376</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>mmax(p.length, p2 && p2.length<span class="s"> || </span><span class="d">0</span>); i < ii; i++) {
+</code><code id="L1377"><span class="ln">1377</span> p[i]<span class="s"> = </span>processPath(p[i], attrs);
+</code><code id="L1378"><span class="ln">1378</span> fixArc(p, i);
+</code><code id="L1379"><span class="ln">1379</span> p2 && (p2[i]<span class="s"> = </span>processPath(p2[i], attrs2));
+</code><code id="L1380"><span class="ln">1380</span> p2 && fixArc(p2, i);
+</code><code id="L1381"><span class="ln">1381</span> fixM(p, p2, attrs, attrs2, i);
+</code><code id="L1382"><span class="ln">1382</span> fixM(p2, p, attrs2, attrs, i);
+</code><code id="L1383"><span class="ln">1383</span> <b>var</b> seg<span class="s"> = </span>p[i],
+</code><code id="L1384"><span class="ln">1384</span> seg2<span class="s"> = </span>p2 && p2[i],
+</code><code id="L1385"><span class="ln">1385</span> seglen<span class="s"> = </span>seg.length,
+</code><code id="L1386"><span class="ln">1386</span> seg2len<span class="s"> = </span>p2 && seg2.length;
+</code><code id="L1387"><span class="ln">1387</span> attrs.x<span class="s"> = </span>seg[seglen<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1388"><span class="ln">1388</span> attrs.y<span class="s"> = </span>seg[seglen<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1389"><span class="ln">1389</span> attrs.bx<span class="s"> = </span>toFloat(seg[seglen<span class="s"> - </span><span class="d">4</span>])<span class="s"> || </span>attrs.x;
+</code><code id="L1390"><span class="ln">1390</span> attrs.by<span class="s"> = </span>toFloat(seg[seglen<span class="s"> - </span><span class="d">3</span>])<span class="s"> || </span>attrs.y;
+</code><code id="L1391"><span class="ln">1391</span> attrs2.bx<span class="s"> = </span>p2 && (toFloat(seg2[seg2len<span class="s"> - </span><span class="d">4</span>])<span class="s"> || </span>attrs2.x);
+</code><code id="L1392"><span class="ln">1392</span> attrs2.by<span class="s"> = </span>p2 && (toFloat(seg2[seg2len<span class="s"> - </span><span class="d">3</span>])<span class="s"> || </span>attrs2.y);
+</code><code id="L1393"><span class="ln">1393</span> attrs2.x<span class="s"> = </span>p2 && seg2[seg2len<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1394"><span class="ln">1394</span> attrs2.y<span class="s"> = </span>p2 && seg2[seg2len<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1395"><span class="ln">1395</span> }
+</code><code id="L1396"><span class="ln">1396</span> <b>return</b> p2 ? [p, p2] : p;
+</code><code id="L1397"><span class="ln">1397</span> }, <b>null</b>, pathClone),
+</code><code id="L1398"><span class="ln">1398</span> parseDots<span class="s"> = </span>cacher(<b>function</b> (gradient) {
+</code><code id="L1399"><span class="ln">1399</span> <b>var</b> dots<span class="s"> = </span>[];
+</code><code id="L1400"><span class="ln">1400</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>gradient.length; i < ii; i++) {
+</code><code id="L1401"><span class="ln">1401</span> <b>var</b> dot<span class="s"> = </span>{},
+</code><code id="L1402"><span class="ln">1402</span> par<span class="s"> = </span>gradient[i].match(/^([^:]*):?([\d\.]*)/);
+</code><code id="L1403"><span class="ln">1403</span> dot.color<span class="s"> = </span>R.getRGB(par[<span class="d">1</span>]);
+</code><code id="L1404"><span class="ln">1404</span> <b>if</b> (dot.color.error) {
+</code><code id="L1405"><span class="ln">1405</span> <b>return</b> <b>null</b>;
+</code><code id="L1406"><span class="ln">1406</span> }
+</code><code id="L1407"><span class="ln">1407</span> dot.color<span class="s"> = </span>dot.color.hex;
+</code><code id="L1408"><span class="ln">1408</span> par[<span class="d">2</span>] && (dot.offset<span class="s"> = </span>par[<span class="d">2</span>]<span class="s"> + </span><i>"%"</i>);
+</code><code id="L1409"><span class="ln">1409</span> dots.push(dot);
+</code><code id="L1410"><span class="ln">1410</span> }
+</code><code id="L1411"><span class="ln">1411</span> <b>for</b> (i<span class="s"> = </span><span class="d">1</span>, ii<span class="s"> = </span>dots.length<span class="s"> - </span><span class="d">1</span>; i < ii; i++) {
+</code><code id="L1412"><span class="ln">1412</span> <b>if</b> (!dots[i].offset) {
+</code><code id="L1413"><span class="ln">1413</span> <b>var</b> start<span class="s"> = </span>toFloat(dots[i<span class="s"> - </span><span class="d">1</span>].offset<span class="s"> || </span><span class="d">0</span>),
+</code><code id="L1414"><span class="ln">1414</span> end<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1415"><span class="ln">1415</span> <b>for</b> (<b>var</b> j<span class="s"> = </span>i<span class="s"> + </span><span class="d">1</span>; j < ii; j++) {
+</code><code id="L1416"><span class="ln">1416</span> <b>if</b> (dots[j].offset) {
+</code><code id="L1417"><span class="ln">1417</span> end<span class="s"> = </span>dots[j].offset;
+</code><code id="L1418"><span class="ln">1418</span> <b>break</b>;
+</code><code id="L1419"><span class="ln">1419</span> }
+</code><code id="L1420"><span class="ln">1420</span> }
+</code><code id="L1421"><span class="ln">1421</span> <b>if</b> (!end) {
+</code><code id="L1422"><span class="ln">1422</span> end<span class="s"> = </span><span class="d">100</span>;
+</code><code id="L1423"><span class="ln">1423</span> j<span class="s"> = </span>ii;
+</code><code id="L1424"><span class="ln">1424</span> }
+</code><code id="L1425"><span class="ln">1425</span> end<span class="s"> = </span>toFloat(end);
+</code><code id="L1426"><span class="ln">1426</span> <b>var</b> d<span class="s"> = </span>(end<span class="s"> - </span>start)<span class="s"> / </span>(j<span class="s"> - </span>i<span class="s"> + </span><span class="d">1</span>);
+</code><code id="L1427"><span class="ln">1427</span> <b>for</b> (; i < j; i++) {
+</code><code id="L1428"><span class="ln">1428</span> start += d;
+</code><code id="L1429"><span class="ln">1429</span> dots[i].offset<span class="s"> = </span>start<span class="s"> + </span><i>"%"</i>;
+</code><code id="L1430"><span class="ln">1430</span> }
+</code><code id="L1431"><span class="ln">1431</span> }
+</code><code id="L1432"><span class="ln">1432</span> }
+</code><code id="L1433"><span class="ln">1433</span> <b>return</b> dots;
+</code><code id="L1434"><span class="ln">1434</span> }),
+</code><code id="L1435"><span class="ln">1435</span> getContainer<span class="s"> = </span><b>function</b> (x, y, w, h) {
+</code><code id="L1436"><span class="ln">1436</span> <b>var</b> container;
+</code><code id="L1437"><span class="ln">1437</span> <b>if</b> (R.is(x, string)<span class="s"> || </span>R.is(x, <i>"object"</i>)) {
+</code><code id="L1438"><span class="ln">1438</span> container<span class="s"> = </span>h<span class="s"> == </span><b>null</b> ? g.doc.getElementById(x) : x;
+</code><code id="L1439"><span class="ln">1439</span> <b>if</b> (container<span class="s"> == </span><b>null</b>) {
+</code><code id="L1440"><span class="ln">1440</span> <b>return</b>;
+</code><code id="L1441"><span class="ln">1441</span> }
+</code><code id="L1442"><span class="ln">1442</span> <b>if</b> (container.tagName) {
+</code><code id="L1443"><span class="ln">1443</span> <b>if</b> (y<span class="s"> == </span><b>null</b>) {
+</code><code id="L1444"><span class="ln">1444</span> <b>return</b> {
+</code><code id="L1445"><span class="ln">1445</span> container: container,
+</code><code id="L1446"><span class="ln">1446</span> width: container.style.pixelWidth<span class="s"> || </span>container.offsetWidth,
+</code><code id="L1447"><span class="ln">1447</span> height: container.style.pixelHeight<span class="s"> || </span>container.offsetHeight
+</code><code id="L1448"><span class="ln">1448</span> };
+</code><code id="L1449"><span class="ln">1449</span> } <b>else</b> {
+</code><code id="L1450"><span class="ln">1450</span> <b>return</b> {container: container, width: y, height: w};
+</code><code id="L1451"><span class="ln">1451</span> }
+</code><code id="L1452"><span class="ln">1452</span> }
+</code><code id="L1453"><span class="ln">1453</span> }
+</code><code id="L1454"><span class="ln">1454</span> <b>return</b> {container: <span class="d">1</span>, x: x, y: y, width: w, height: h};
+</code><code id="L1455"><span class="ln">1455</span> },
+</code><code id="L1456"><span class="ln">1456</span> plugins<span class="s"> = </span><b>function</b> (con, add) {
+</code><code id="L1457"><span class="ln">1457</span> <b>var</b> that<span class="s"> = </span><b>this</b>;
+</code><code id="L1458"><span class="ln">1458</span> <b>for</b> (<b>var</b> prop <b>in</b> add) {
+</code><code id="L1459"><span class="ln">1459</span> <b>if</b> (add[has](prop) && !(prop <b>in</b> con)) {
+</code><code id="L1460"><span class="ln">1460</span> <b>switch</b> (<b>typeof</b> add[prop]) {
+</code><code id="L1461"><span class="ln">1461</span> <b>case</b> <i>"<b>function</b>"</i>:
+</code><code id="L1462"><span class="ln">1462</span> (<b>function</b> (f) {
+</code><code id="L1463"><span class="ln">1463</span> con[prop]<span class="s"> = </span>con<span class="s"> === </span>that ? f : <b>function</b> () { <b>return</b> f[apply](that, arguments); };
+</code><code id="L1464"><span class="ln">1464</span> })(add[prop]);
+</code><code id="L1465"><span class="ln">1465</span> <b>break</b>;
+</code><code id="L1466"><span class="ln">1466</span> <b>case</b> <i>"object"</i>:
+</code><code id="L1467"><span class="ln">1467</span> con[prop]<span class="s"> = </span>con[prop]<span class="s"> || </span>{};
+</code><code id="L1468"><span class="ln">1468</span> plugins.call(<b>this</b>, con[prop], add[prop]);
+</code><code id="L1469"><span class="ln">1469</span> <b>break</b>;
+</code><code id="L1470"><span class="ln">1470</span> <b>default</b>:
+</code><code id="L1471"><span class="ln">1471</span> con[prop]<span class="s"> = </span>add[prop];
+</code><code id="L1472"><span class="ln">1472</span> <b>break</b>;
+</code><code id="L1473"><span class="ln">1473</span> }
+</code><code id="L1474"><span class="ln">1474</span> }
+</code><code id="L1475"><span class="ln">1475</span> }
+</code><code id="L1476"><span class="ln">1476</span> },
+</code><code id="L1477"><span class="ln">1477</span> tear<span class="s"> = </span><b>function</b> (el, paper) {
+</code><code id="L1478"><span class="ln">1478</span> el<span class="s"> == </span>paper.top && (paper.top<span class="s"> = </span>el.prev);
+</code><code id="L1479"><span class="ln">1479</span> el<span class="s"> == </span>paper.bottom && (paper.bottom<span class="s"> = </span>el.next);
+</code><code id="L1480"><span class="ln">1480</span> el.next && (el.next.prev<span class="s"> = </span>el.prev);
+</code><code id="L1481"><span class="ln">1481</span> el.prev && (el.prev.next<span class="s"> = </span>el.next);
+</code><code id="L1482"><span class="ln">1482</span> },
+</code><code id="L1483"><span class="ln">1483</span> tofront<span class="s"> = </span><b>function</b> (el, paper) {
+</code><code id="L1484"><span class="ln">1484</span> <b>if</b> (paper.top<span class="s"> === </span>el) {
+</code><code id="L1485"><span class="ln">1485</span> <b>return</b>;
+</code><code id="L1486"><span class="ln">1486</span> }
+</code><code id="L1487"><span class="ln">1487</span> tear(el, paper);
+</code><code id="L1488"><span class="ln">1488</span> el.next<span class="s"> = </span><b>null</b>;
+</code><code id="L1489"><span class="ln">1489</span> el.prev<span class="s"> = </span>paper.top;
+</code><code id="L1490"><span class="ln">1490</span> paper.top.next<span class="s"> = </span>el;
+</code><code id="L1491"><span class="ln">1491</span> paper.top<span class="s"> = </span>el;
+</code><code id="L1492"><span class="ln">1492</span> },
+</code><code id="L1493"><span class="ln">1493</span> toback<span class="s"> = </span><b>function</b> (el, paper) {
+</code><code id="L1494"><span class="ln">1494</span> <b>if</b> (paper.bottom<span class="s"> === </span>el) {
+</code><code id="L1495"><span class="ln">1495</span> <b>return</b>;
+</code><code id="L1496"><span class="ln">1496</span> }
+</code><code id="L1497"><span class="ln">1497</span> tear(el, paper);
+</code><code id="L1498"><span class="ln">1498</span> el.next<span class="s"> = </span>paper.bottom;
+</code><code id="L1499"><span class="ln">1499</span> el.prev<span class="s"> = </span><b>null</b>;
+</code><code id="L1500"><span class="ln">1500</span> paper.bottom.prev<span class="s"> = </span>el;
+</code><code id="L1501"><span class="ln">1501</span> paper.bottom<span class="s"> = </span>el;
+</code><code id="L1502"><span class="ln">1502</span> },
+</code><code id="L1503"><span class="ln">1503</span> insertafter<span class="s"> = </span><b>function</b> (el, el2, paper) {
+</code><code id="L1504"><span class="ln">1504</span> tear(el, paper);
+</code><code id="L1505"><span class="ln">1505</span> el2<span class="s"> == </span>paper.top && (paper.top<span class="s"> = </span>el);
+</code><code id="L1506"><span class="ln">1506</span> el2.next && (el2.next.prev<span class="s"> = </span>el);
+</code><code id="L1507"><span class="ln">1507</span> el.next<span class="s"> = </span>el2.next;
+</code><code id="L1508"><span class="ln">1508</span> el.prev<span class="s"> = </span>el2;
+</code><code id="L1509"><span class="ln">1509</span> el2.next<span class="s"> = </span>el;
+</code><code id="L1510"><span class="ln">1510</span> },
+</code><code id="L1511"><span class="ln">1511</span> insertbefore<span class="s"> = </span><b>function</b> (el, el2, paper) {
+</code><code id="L1512"><span class="ln">1512</span> tear(el, paper);
+</code><code id="L1513"><span class="ln">1513</span> el2<span class="s"> == </span>paper.bottom && (paper.bottom<span class="s"> = </span>el);
+</code><code id="L1514"><span class="ln">1514</span> el2.prev && (el2.prev.next<span class="s"> = </span>el);
+</code><code id="L1515"><span class="ln">1515</span> el.prev<span class="s"> = </span>el2.prev;
+</code><code id="L1516"><span class="ln">1516</span> el2.prev<span class="s"> = </span>el;
+</code><code id="L1517"><span class="ln">1517</span> el.next<span class="s"> = </span>el2;
+</code><code id="L1518"><span class="ln">1518</span> },
+</code><code id="L1519"><span class="ln">1519</span> removed<span class="s"> = </span><b>function</b> (methodname) {
+</code><code id="L1520"><span class="ln">1520</span> <b>return</b> <b>function</b> () {
+</code><code id="L1521"><span class="ln">1521</span> <b>throw</b> <b>new</b> Error(<i>"Rapha\xebl: you are calling to method \u201c"</i><span class="s"> + </span>methodname<span class="s"> + </span><i>"\u201d of removed object"</i>);
+</code><code id="L1522"><span class="ln">1522</span> };
+</code><code id="L1523"><span class="ln">1523</span> },
+</code><code id="L1524"><span class="ln">1524</span> extractTransform<span class="s"> = </span><b>function</b> (el, tstr) {
+</code><code id="L1525"><span class="ln">1525</span> <b>if</b> (tstr<span class="s"> == </span><b>null</b>) {
+</code><code id="L1526"><span class="ln">1526</span> <b>return</b> el._.transform;
+</code><code id="L1527"><span class="ln">1527</span> }
+</code><code id="L1528"><span class="ln">1528</span> tstr<span class="s"> = </span>Str(tstr).replace(/\.{<span class="d">3</span>}|\u2026/g, el._.transform<span class="s"> || </span>E);
+</code><code id="L1529"><span class="ln">1529</span> <b>var</b> tdata<span class="s"> = </span>R.parseTransformString(tstr),
+</code><code id="L1530"><span class="ln">1530</span> deg<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1531"><span class="ln">1531</span> dx<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1532"><span class="ln">1532</span> dy<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1533"><span class="ln">1533</span> sx<span class="s"> = </span><span class="d">1</span>,
+</code><code id="L1534"><span class="ln">1534</span> sy<span class="s"> = </span><span class="d">1</span>,
+</code><code id="L1535"><span class="ln">1535</span> _<span class="s"> = </span>el._,
+</code><code id="L1536"><span class="ln">1536</span> m<span class="s"> = </span><b>new</b> Matrix;
+</code><code id="L1537"><span class="ln">1537</span> _.transform<span class="s"> = </span>tdata<span class="s"> || </span>[];
+</code><code id="L1538"><span class="ln">1538</span> <b>if</b> (tdata) {
+</code><code id="L1539"><span class="ln">1539</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>tdata.length; i < ii; i++) {
+</code><code id="L1540"><span class="ln">1540</span> <b>var</b> t<span class="s"> = </span>tdata[i],
+</code><code id="L1541"><span class="ln">1541</span> tlen<span class="s"> = </span>t.length,
+</code><code id="L1542"><span class="ln">1542</span> bb;
+</code><code id="L1543"><span class="ln">1543</span> t[<span class="d">0</span>]<span class="s"> = </span>Str(t[<span class="d">0</span>]).toLowerCase();
+</code><code id="L1544"><span class="ln">1544</span> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"t"</i> && tlen<span class="s"> == </span><span class="d">3</span>) {
+</code><code id="L1545"><span class="ln">1545</span> m.translate(t[<span class="d">1</span>], t[<span class="d">2</span>]);
+</code><code id="L1546"><span class="ln">1546</span> } <b>else</b> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"r"</i>) {
+</code><code id="L1547"><span class="ln">1547</span> <b>if</b> (tlen<span class="s"> == </span><span class="d">2</span>) {
+</code><code id="L1548"><span class="ln">1548</span> bb<span class="s"> = </span>bb<span class="s"> || </span>el.getBBox(<span class="d">1</span>);
+</code><code id="L1549"><span class="ln">1549</span> m.rotate(t[<span class="d">1</span>], bb.x<span class="s"> + </span>bb.width<span class="s"> / </span><span class="d">2</span>, bb.y<span class="s"> + </span>bb.height<span class="s"> / </span><span class="d">2</span>);
+</code><code id="L1550"><span class="ln">1550</span> deg += t[<span class="d">1</span>];
+</code><code id="L1551"><span class="ln">1551</span> } <b>else</b> <b>if</b> (tlen<span class="s"> == </span><span class="d">4</span>) {
+</code><code id="L1552"><span class="ln">1552</span> m.rotate(t[<span class="d">1</span>], t[<span class="d">2</span>], t[<span class="d">3</span>]);
+</code><code id="L1553"><span class="ln">1553</span> deg += t[<span class="d">1</span>];
+</code><code id="L1554"><span class="ln">1554</span> }
+</code><code id="L1555"><span class="ln">1555</span> } <b>else</b> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"s"</i>) {
+</code><code id="L1556"><span class="ln">1556</span> <b>if</b> (tlen<span class="s"> == </span><span class="d">2</span><span class="s"> || </span>tlen<span class="s"> == </span><span class="d">3</span>) {
+</code><code id="L1557"><span class="ln">1557</span> bb<span class="s"> = </span>bb<span class="s"> || </span>el.getBBox(<span class="d">1</span>);
+</code><code id="L1558"><span class="ln">1558</span> m.scale(t[<span class="d">1</span>], t[tlen<span class="s"> - </span><span class="d">1</span>], bb.x<span class="s"> + </span>bb.width<span class="s"> / </span><span class="d">2</span>, bb.y<span class="s"> + </span>bb.height<span class="s"> / </span><span class="d">2</span>);
+</code><code id="L1559"><span class="ln">1559</span> sx *= t[<span class="d">1</span>];
+</code><code id="L1560"><span class="ln">1560</span> sy *= t[tlen<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1561"><span class="ln">1561</span> } <b>else</b> <b>if</b> (tlen<span class="s"> == </span><span class="d">5</span>) {
+</code><code id="L1562"><span class="ln">1562</span> m.scale(t[<span class="d">1</span>], t[<span class="d">2</span>], t[<span class="d">3</span>], t[<span class="d">4</span>]);
+</code><code id="L1563"><span class="ln">1563</span> sx *= t[<span class="d">1</span>];
+</code><code id="L1564"><span class="ln">1564</span> sy *= t[<span class="d">2</span>];
+</code><code id="L1565"><span class="ln">1565</span> }
+</code><code id="L1566"><span class="ln">1566</span> } <b>else</b> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"m"</i> && tlen<span class="s"> == </span><span class="d">7</span>) {
+</code><code id="L1567"><span class="ln">1567</span> m.add(t[<span class="d">1</span>], t[<span class="d">2</span>], t[<span class="d">3</span>], t[<span class="d">4</span>], t[<span class="d">5</span>], t[<span class="d">6</span>]);
+</code><code id="L1568"><span class="ln">1568</span> }
+</code><code id="L1569"><span class="ln">1569</span> _.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1570"><span class="ln">1570</span> el.matrix<span class="s"> = </span>m;
+</code><code id="L1571"><span class="ln">1571</span> }
+</code><code id="L1572"><span class="ln">1572</span> }
+</code><code id="L1573"><span class="ln">1573</span>
+</code><code id="L1574"><span class="ln">1574</span> el.matrix<span class="s"> = </span>m;
+</code><code id="L1575"><span class="ln">1575</span>
+</code><code id="L1576"><span class="ln">1576</span> _.sx<span class="s"> = </span>sx;
+</code><code id="L1577"><span class="ln">1577</span> _.sy<span class="s"> = </span>sy;
+</code><code id="L1578"><span class="ln">1578</span> _.deg<span class="s"> = </span>deg;
+</code><code id="L1579"><span class="ln">1579</span> _.dx<span class="s"> = </span>dx<span class="s"> = </span>m.m[<span class="d">0</span>][<span class="d">2</span>];
+</code><code id="L1580"><span class="ln">1580</span> _.dy<span class="s"> = </span>dy<span class="s"> = </span>m.m[<span class="d">1</span>][<span class="d">2</span>];
+</code><code id="L1581"><span class="ln">1581</span>
+</code><code id="L1582"><span class="ln">1582</span> <b>if</b> (sx<span class="s"> == </span><span class="d">1</span> && sy<span class="s"> == </span><span class="d">1</span> && !deg && _.bbox) {
+</code><code id="L1583"><span class="ln">1583</span> _.bbox.x += +dx;
+</code><code id="L1584"><span class="ln">1584</span> _.bbox.y += +dy;
+</code><code id="L1585"><span class="ln">1585</span> } <b>else</b> {
+</code><code id="L1586"><span class="ln">1586</span> _.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1587"><span class="ln">1587</span> }
+</code><code id="L1588"><span class="ln">1588</span> },
+</code><code id="L1589"><span class="ln">1589</span> getEmpty<span class="s"> = </span><b>function</b> (item) {
+</code><code id="L1590"><span class="ln">1590</span> <b>switch</b> (item[<span class="d">0</span>]) {
+</code><code id="L1591"><span class="ln">1591</span> <b>case</b> <i>"t"</i>: <b>return</b> [<i>"t"</i>, <span class="d">0</span>, <span class="d">0</span>];
+</code><code id="L1592"><span class="ln">1592</span> <b>case</b> <i>"m"</i>: <b>return</b> [<i>"m"</i>, <span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>];
+</code><code id="L1593"><span class="ln">1593</span> <b>case</b> <i>"r"</i>: <b>if</b> (item.length<span class="s"> == </span><span class="d">4</span>) {
+</code><code id="L1594"><span class="ln">1594</span> <b>return</b> [<i>"r"</i>, <span class="d">0</span>, item[<span class="d">2</span>], item[<span class="d">3</span>]];
+</code><code id="L1595"><span class="ln">1595</span> } <b>else</b> {
+</code><code id="L1596"><span class="ln">1596</span> <b>return</b> [<i>"r"</i>, <span class="d">0</span>];
+</code><code id="L1597"><span class="ln">1597</span> }
+</code><code id="L1598"><span class="ln">1598</span> <b>case</b> <i>"s"</i>: <b>if</b> (item.length<span class="s"> == </span><span class="d">5</span>) {
+</code><code id="L1599"><span class="ln">1599</span> <b>return</b> [<i>"s"</i>, <span class="d">1</span>, <span class="d">1</span>, item[<span class="d">3</span>], item[<span class="d">4</span>]];
+</code><code id="L1600"><span class="ln">1600</span> } <b>else</b> <b>if</b> (item.length<span class="s"> == </span><span class="d">3</span>) {
+</code><code id="L1601"><span class="ln">1601</span> <b>return</b> [<i>"s"</i>, <span class="d">1</span>, <span class="d">1</span>];
+</code><code id="L1602"><span class="ln">1602</span> } <b>else</b> {
+</code><code id="L1603"><span class="ln">1603</span> <b>return</b> [<i>"s"</i>, <span class="d">1</span>];
+</code><code id="L1604"><span class="ln">1604</span> }
+</code><code id="L1605"><span class="ln">1605</span> }
+</code><code id="L1606"><span class="ln">1606</span> },
+</code><code id="L1607"><span class="ln">1607</span> equaliseTransform<span class="s"> = </span><b>function</b> (t1, t2) {
+</code><code id="L1608"><span class="ln">1608</span> t1<span class="s"> = </span>R.parseTransformString(t1)<span class="s"> || </span>[];
+</code><code id="L1609"><span class="ln">1609</span> t2<span class="s"> = </span>R.parseTransformString(t2)<span class="s"> || </span>[];
+</code><code id="L1610"><span class="ln">1610</span> <b>var</b> maxlength<span class="s"> = </span>mmax(t1.length, t2.length),
+</code><code id="L1611"><span class="ln">1611</span> from<span class="s"> = </span>[],
+</code><code id="L1612"><span class="ln">1612</span> to<span class="s"> = </span>[],
+</code><code id="L1613"><span class="ln">1613</span> i<span class="s"> = </span><span class="d">0</span>, j, jj,
+</code><code id="L1614"><span class="ln">1614</span> tt1, tt2;
+</code><code id="L1615"><span class="ln">1615</span> <b>for</b> (; i < maxlength; i++) {
+</code><code id="L1616"><span class="ln">1616</span> tt1<span class="s"> = </span>t1[i]<span class="s"> || </span>getEmpty(t2[i]);
+</code><code id="L1617"><span class="ln">1617</span> tt2<span class="s"> = </span>t2[i]<span class="s"> || </span>getEmpty(tt1);
+</code><code id="L1618"><span class="ln">1618</span> <b>if</b> ( (tt1[<span class="d">0</span>] != tt2[<span class="d">0</span>]) ||
+</code><code id="L1619"><span class="ln">1619</span> (tt1[<span class="d">0</span>]<span class="s"> == </span><i>"r"</i> && (tt1[<span class="d">2</span>] != tt2[<span class="d">2</span>]<span class="s"> || </span>tt1[<span class="d">3</span>] != tt2[<span class="d">3</span>])) ||
+</code><code id="L1620"><span class="ln">1620</span> (tt1[<span class="d">0</span>]<span class="s"> == </span><i>"s"</i> && (tt1[<span class="d">3</span>] != tt2[<span class="d">3</span>]<span class="s"> || </span>tt1[<span class="d">4</span>] != tt2[<span class="d">4</span>]))
+</code><code id="L1621"><span class="ln">1621</span> ) {
+</code><code id="L1622"><span class="ln">1622</span> <b>return</b>;
+</code><code id="L1623"><span class="ln">1623</span> }
+</code><code id="L1624"><span class="ln">1624</span> from[i]<span class="s"> = </span>[];
+</code><code id="L1625"><span class="ln">1625</span> to[i]<span class="s"> = </span>[];
+</code><code id="L1626"><span class="ln">1626</span> <b>for</b> (j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>mmax(tt1.length, tt2.length); j < jj; j++) {
+</code><code id="L1627"><span class="ln">1627</span> j <b>in</b> tt1 && (from[i][j]<span class="s"> = </span>tt1[j]);
+</code><code id="L1628"><span class="ln">1628</span> j <b>in</b> tt2 && (to[i][j]<span class="s"> = </span>tt2[j]);
+</code><code id="L1629"><span class="ln">1629</span> }
+</code><code id="L1630"><span class="ln">1630</span> }
+</code><code id="L1631"><span class="ln">1631</span> <b>return</b> {
+</code><code id="L1632"><span class="ln">1632</span> from: from,
+</code><code id="L1633"><span class="ln">1633</span> to: to
+</code><code id="L1634"><span class="ln">1634</span> };
+</code><code id="L1635"><span class="ln">1635</span> };
+</code><code id="L1636"><span class="ln">1636</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L1637"><span class="ln">1637</span><span class="c"> <span class="s"> * </span>Raphael.pathToRelative
+</span></code><code id="L1638"><span class="ln">1638</span><span class="c"> [ method ]
+</span></code><code id="L1639"><span class="ln">1639</span><span class="c"> **
+</span></code><code id="L1640"><span class="ln">1640</span><span class="c"> <span class="s"> * </span>Utility method
+</span></code><code id="L1641"><span class="ln">1641</span><span class="c"> **
+</span></code><code id="L1642"><span class="ln">1642</span><span class="c"> <span class="s"> * </span>Converts path to relative form
+</span></code><code id="L1643"><span class="ln">1643</span><span class="c"> > Parameters
+</span></code><code id="L1644"><span class="ln">1644</span><span class="c"> <span class="s"> - </span>pathString (string|array) path string or array of segments
+</span></code><code id="L1645"><span class="ln">1645</span><span class="c"> <span class="s"> = </span>(array) array of segments.
+</span></code><code id="L1646"><span class="ln">1646</span><span class="c"> \*/</span>
+</code><code id="L1647"><span class="ln">1647</span> R.pathToRelative<span class="s"> = </span>pathToRelative;
+</code><code id="L1648"><span class="ln">1648</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L1649"><span class="ln">1649</span><span class="c"> <span class="s"> * </span>Raphael.path2curve
+</span></code><code id="L1650"><span class="ln">1650</span><span class="c"> [ method ]
+</span></code><code id="L1651"><span class="ln">1651</span><span class="c"> **
+</span></code><code id="L1652"><span class="ln">1652</span><span class="c"> <span class="s"> * </span>Utility method
+</span></code><code id="L1653"><span class="ln">1653</span><span class="c"> **
+</span></code><code id="L1654"><span class="ln">1654</span><span class="c"> <span class="s"> * </span>Converts path to path where all segments are cubic bezier curves.
+</span></code><code id="L1655"><span class="ln">1655</span><span class="c"> > Parameters
+</span></code><code id="L1656"><span class="ln">1656</span><span class="c"> <span class="s"> - </span>pathString (string|array) path string or array of segments
+</span></code><code id="L1657"><span class="ln">1657</span><span class="c"> <span class="s"> = </span>(array) array of segments.
+</span></code><code id="L1658"><span class="ln">1658</span><span class="c"> \*/</span>
+</code><code id="L1659"><span class="ln">1659</span> R.path2curve<span class="s"> = </span>path2curve;
+</code><code id="L1660"><span class="ln">1660</span> <span class="c">// Matrix</span>
+</code><code id="L1661"><span class="ln">1661</span> <span class="c">// <b>var</b> m<span class="s"> = </span>document.createElementNS(<i>"http://www.w3.org/<span class="d">2000</span>/svg"</i>, <i>"svg"</i>).createSVGMatrix();</span>
+</code><code id="L1662"><span class="ln">1662</span> <b>function</b> Matrix(a, b, c, d, e, f) {
+</code><code id="L1663"><span class="ln">1663</span> <b>if</b> (a != <b>null</b>) {
+</code><code id="L1664"><span class="ln">1664</span> <b>this</b>.m<span class="s"> = </span>[[a, c, e], [b, d, f], [<span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>]];
+</code><code id="L1665"><span class="ln">1665</span> } <b>else</b> {
+</code><code id="L1666"><span class="ln">1666</span> <b>this</b>.m<span class="s"> = </span>[[<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>], [<span class="d">0</span>, <span class="d">1</span>, <span class="d">0</span>], [<span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>]];
+</code><code id="L1667"><span class="ln">1667</span> }
+</code><code id="L1668"><span class="ln">1668</span> }
+</code><code id="L1669"><span class="ln">1669</span> <b>var</b> matrixproto<span class="s"> = </span>Matrix.prototype;
+</code><code id="L1670"><span class="ln">1670</span> matrixproto.add<span class="s"> = </span><b>function</b> (a, b, c, d, e, f) {
+</code><code id="L1671"><span class="ln">1671</span> <b>var</b> out<span class="s"> = </span>[[], [], []],
+</code><code id="L1672"><span class="ln">1672</span> matrix<span class="s"> = </span>[[a, c, e], [b, d, f], [<span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>]],
+</code><code id="L1673"><span class="ln">1673</span> x, y, z, res;
+</code><code id="L1674"><span class="ln">1674</span>
+</code><code id="L1675"><span class="ln">1675</span> <b>for</b> (x<span class="s"> = </span><span class="d">0</span>; x < <span class="d">3</span>; x++) {
+</code><code id="L1676"><span class="ln">1676</span> <b>for</b> (y<span class="s"> = </span><span class="d">0</span>; y < <span class="d">3</span>; y++) {
+</code><code id="L1677"><span class="ln">1677</span> res<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1678"><span class="ln">1678</span> <b>for</b> (z<span class="s"> = </span><span class="d">0</span>; z < <span class="d">3</span>; z++) {
+</code><code id="L1679"><span class="ln">1679</span> res += <b>this</b>.m[x][z]<span class="s"> * </span>matrix[z][y];
+</code><code id="L1680"><span class="ln">1680</span> }
+</code><code id="L1681"><span class="ln">1681</span> out[x][y]<span class="s"> = </span>res;
+</code><code id="L1682"><span class="ln">1682</span> }
+</code><code id="L1683"><span class="ln">1683</span> }
+</code><code id="L1684"><span class="ln">1684</span> <b>this</b>.m<span class="s"> = </span>out;
+</code><code id="L1685"><span class="ln">1685</span> };
+</code><code id="L1686"><span class="ln">1686</span> matrixproto.invert<span class="s"> = </span><b>function</b> () {
+</code><code id="L1687"><span class="ln">1687</span> <b>var</b> a<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">0</span>],
+</code><code id="L1688"><span class="ln">1688</span> b<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">0</span>],
+</code><code id="L1689"><span class="ln">1689</span> c<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">1</span>],
+</code><code id="L1690"><span class="ln">1690</span> d<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">1</span>],
+</code><code id="L1691"><span class="ln">1691</span> e<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>],
+</code><code id="L1692"><span class="ln">1692</span> f<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>],
+</code><code id="L1693"><span class="ln">1693</span> x<span class="s"> = </span>a<span class="s"> * </span>d<span class="s"> - </span>b<span class="s"> * </span>c;
+</code><code id="L1694"><span class="ln">1694</span> <b>return</b> <b>new</b> Matrix(d<span class="s"> / </span>x, -b<span class="s"> / </span>x, -c<span class="s"> / </span>x, a<span class="s"> / </span>x, (c<span class="s"> * </span>f<span class="s"> - </span>d<span class="s"> * </span>e)<span class="s"> / </span>x, (b<span class="s"> * </span>e<span class="s"> - </span>a<span class="s"> * </span>f)<span class="s"> / </span>x);
+</code><code id="L1695"><span class="ln">1695</span> };
+</code><code id="L1696"><span class="ln">1696</span> matrixproto.clone<span class="s"> = </span><b>function</b> () {
+</code><code id="L1697"><span class="ln">1697</span> <b>var</b> a<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">0</span>],
+</code><code id="L1698"><span class="ln">1698</span> b<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">0</span>],
+</code><code id="L1699"><span class="ln">1699</span> c<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">1</span>],
+</code><code id="L1700"><span class="ln">1700</span> d<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">1</span>],
+</code><code id="L1701"><span class="ln">1701</span> e<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>],
+</code><code id="L1702"><span class="ln">1702</span> f<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>];
+</code><code id="L1703"><span class="ln">1703</span> <b>return</b> <b>new</b> Matrix(a, b, c, d, e, f);
+</code><code id="L1704"><span class="ln">1704</span> };
+</code><code id="L1705"><span class="ln">1705</span> matrixproto.translate<span class="s"> = </span><b>function</b> (x, y) {
+</code><code id="L1706"><span class="ln">1706</span> <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, x, y);
+</code><code id="L1707"><span class="ln">1707</span> };
+</code><code id="L1708"><span class="ln">1708</span> matrixproto.scale<span class="s"> = </span><b>function</b> (x, y, cx, cy) {
+</code><code id="L1709"><span class="ln">1709</span> y<span class="s"> == </span><b>null</b> && (y<span class="s"> = </span>x);
+</code><code id="L1710"><span class="ln">1710</span> <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, cx, cy);
+</code><code id="L1711"><span class="ln">1711</span> <b>this</b>.add(x, <span class="d">0</span>, <span class="d">0</span>, y, <span class="d">0</span>, <span class="d">0</span>);
+</code><code id="L1712"><span class="ln">1712</span> <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, -cx, -cy);
+</code><code id="L1713"><span class="ln">1713</span> };
+</code><code id="L1714"><span class="ln">1714</span> matrixproto.rotate<span class="s"> = </span><b>function</b> (a, x, y) {
+</code><code id="L1715"><span class="ln">1715</span> a<span class="s"> = </span>R.rad(a);
+</code><code id="L1716"><span class="ln">1716</span> <b>var</b> cos<span class="s"> = </span>+math.cos(a).toFixed(<span class="d">9</span>),
+</code><code id="L1717"><span class="ln">1717</span> sin<span class="s"> = </span>+math.sin(a).toFixed(<span class="d">9</span>);
+</code><code id="L1718"><span class="ln">1718</span> <b>this</b>.add(cos, sin, -sin, cos, x, y);
+</code><code id="L1719"><span class="ln">1719</span> <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, -x, -y);
+</code><code id="L1720"><span class="ln">1720</span> };
+</code><code id="L1721"><span class="ln">1721</span> matrixproto.x<span class="s"> = </span><b>function</b> (x, y) {
+</code><code id="L1722"><span class="ln">1722</span> <b>return</b> x<span class="s"> * </span><b>this</b>.m[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> + </span>y<span class="s"> * </span><b>this</b>.m[<span class="d">0</span>][<span class="d">1</span>]<span class="s"> + </span><b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>];
+</code><code id="L1723"><span class="ln">1723</span> };
+</code><code id="L1724"><span class="ln">1724</span> matrixproto.y<span class="s"> = </span><b>function</b> (x, y) {
+</code><code id="L1725"><span class="ln">1725</span> <b>return</b> x<span class="s"> * </span><b>this</b>.m[<span class="d">1</span>][<span class="d">0</span>]<span class="s"> + </span>y<span class="s"> * </span><b>this</b>.m[<span class="d">1</span>][<span class="d">1</span>]<span class="s"> + </span><b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>];
+</code><code id="L1726"><span class="ln">1726</span> };
+</code><code id="L1727"><span class="ln">1727</span> matrixproto.get<span class="s"> = </span><b>function</b> (i, j) {
+</code><code id="L1728"><span class="ln">1728</span> <b>return</b> +<b>this</b>.m[i][j].toFixed(<span class="d">4</span>);
+</code><code id="L1729"><span class="ln">1729</span> };
+</code><code id="L1730"><span class="ln">1730</span> matrixproto.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L1731"><span class="ln">1731</span> <b>return</b> R.svg ?
+</code><code id="L1732"><span class="ln">1732</span> <i>"matrix("</i><span class="s"> + </span>[<b>this</b>.get(<span class="d">0</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">0</span>, <span class="d">1</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">1</span>), <b>this</b>.get(<span class="d">0</span>, <span class="d">2</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">2</span>)].join()<span class="s"> + </span><i>")"</i> :
+</code><code id="L1733"><span class="ln">1733</span> [<b>this</b>.get(<span class="d">0</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">0</span>, <span class="d">1</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">1</span>), <span class="d">0</span>, <span class="d">0</span>].join();
+</code><code id="L1734"><span class="ln">1734</span> };
+</code><code id="L1735"><span class="ln">1735</span> matrixproto.toFilter<span class="s"> = </span><b>function</b> () {
+</code><code id="L1736"><span class="ln">1736</span> <b>return</b> <i>"progid:DXImageTransform.Microsoft.Matrix(M11="</i><span class="s"> + </span><b>this</b>.get(<span class="d">0</span>, <span class="d">0</span>) +
+</code><code id="L1737"><span class="ln">1737</span> <i>", M12="</i><span class="s"> + </span><b>this</b>.get(<span class="d">0</span>, <span class="d">1</span>)<span class="s"> + </span><i>", M21="</i><span class="s"> + </span><b>this</b>.get(<span class="d">1</span>, <span class="d">0</span>)<span class="s"> + </span><i>", M22="</i><span class="s"> + </span><b>this</b>.get(<span class="d">1</span>, <span class="d">1</span>) +
+</code><code id="L1738"><span class="ln">1738</span> <i>", Dx="</i><span class="s"> + </span><b>this</b>.get(<span class="d">0</span>, <span class="d">2</span>)<span class="s"> + </span><i>", Dy="</i><span class="s"> + </span><b>this</b>.get(<span class="d">1</span>, <span class="d">2</span>)<span class="s"> + </span><i>", sizingmedthod='auto expand')"</i>;
+</code><code id="L1739"><span class="ln">1739</span> };
+</code><code id="L1740"><span class="ln">1740</span> matrixproto.offset<span class="s"> = </span><b>function</b> () {
+</code><code id="L1741"><span class="ln">1741</span> <b>return</b> [<b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>].toFixed(<span class="d">4</span>), <b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>].toFixed(<span class="d">4</span>)];
+</code><code id="L1742"><span class="ln">1742</span> };
+</code><code id="L1743"><span class="ln">1743</span>
+</code><code id="L1744"><span class="ln">1744</span> R.Matrix<span class="s"> = </span>Matrix;
+</code><code id="L1745"><span class="ln">1745</span>
+</code><code id="L1746"><span class="ln">1746</span> <span class="c">// SVG</span>
+</code><code id="L1747"><span class="ln">1747</span> <b>if</b> (R.svg) {
+</code><code id="L1748"><span class="ln">1748</span> <b>var</b> xlink<span class="s"> = </span><i>"http:<span class="c">//www.w3.org/<span class="d">1999</span>/xlink"</i>,</span>
+</code><code id="L1749"><span class="ln">1749</span> markers<span class="s"> = </span>{
+</code><code id="L1750"><span class="ln">1750</span> block: <i>"M5,<span class="d">0</span> <span class="d">0</span>,<span class="d">2.5</span> <span class="d">5</span>,5z"</i>,
+</code><code id="L1751"><span class="ln">1751</span> classic: <i>"M5,<span class="d">0</span> <span class="d">0</span>,<span class="d">2.5</span> <span class="d">5</span>,<span class="d">5</span> <span class="d">3.5</span>,<span class="d">3</span> <span class="d">3.5</span>,2z"</i>,
+</code><code id="L1752"><span class="ln">1752</span> diamond: <i>"M2<span class="d">.5</span>,<span class="d">0</span> <span class="d">5</span>,<span class="d">2.5</span> <span class="d">2.5</span>,<span class="d">5</span> <span class="d">0</span>,<span class="d">2</span>.5z"</i>,
+</code><code id="L1753"><span class="ln">1753</span> open: <i>"M6,<span class="d">1</span> <span class="d">1</span>,<span class="d">3.5</span> <span class="d">6</span>,<span class="d">6</span>"</i>,
+</code><code id="L1754"><span class="ln">1754</span> oval: <i>"M2<span class="d">.5</span>,0A2<span class="d">.5</span>,<span class="d">2.5</span>,<span class="d">0</span>,<span class="d">0</span>,<span class="d">1</span>,<span class="d">2.5</span>,<span class="d">5</span> <span class="d">2.5</span>,<span class="d">2.5</span>,<span class="d">0</span>,<span class="d">0</span>,<span class="d">1</span>,<span class="d">2.5</span>,0z"</i>
+</code><code id="L1755"><span class="ln">1755</span> },
+</code><code id="L1756"><span class="ln">1756</span> markerCounter<span class="s"> = </span>{};
+</code><code id="L1757"><span class="ln">1757</span> round<span class="s"> = </span><b>function</b> (num) {
+</code><code id="L1758"><span class="ln">1758</span> <b>return</b> +num<span class="s"> + </span>(~~num<span class="s"> === </span>num)<span class="s"> * </span><span class="d">.5</span>;
+</code><code id="L1759"><span class="ln">1759</span> };
+</code><code id="L1760"><span class="ln">1760</span> R.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L1761"><span class="ln">1761</span> <b>return</b> <i>"Your browser supports SVG.\nYou are running Rapha\xebl "</i><span class="s"> + </span><b>this</b>.version;
+</code><code id="L1762"><span class="ln">1762</span> };
+</code><code id="L1763"><span class="ln">1763</span> <b>var</b> $<span class="s"> = </span><b>function</b> (el, attr) {
+</code><code id="L1764"><span class="ln">1764</span> <b>if</b> (attr) {
+</code><code id="L1765"><span class="ln">1765</span> <b>if</b> (<b>typeof</b> el<span class="s"> == </span><i>"string"</i>) {
+</code><code id="L1766"><span class="ln">1766</span> el<span class="s"> = </span>$(el);
+</code><code id="L1767"><span class="ln">1767</span> }
+</code><code id="L1768"><span class="ln">1768</span> <b>for</b> (<b>var</b> key <b>in</b> attr) <b>if</b> (attr[has](key)) {
+</code><code id="L1769"><span class="ln">1769</span> <b>if</b> (key.substring(<span class="d">0</span>, <span class="d">6</span>)<span class="s"> == </span><i>"xlink:"</i>) {
+</code><code id="L1770"><span class="ln">1770</span> el.setAttributeNS(xlink, key.substring(<span class="d">6</span>), Str(attr[key]));
+</code><code id="L1771"><span class="ln">1771</span> } <b>else</b> {
+</code><code id="L1772"><span class="ln">1772</span> el[setAttribute](key, Str(attr[key]));
+</code><code id="L1773"><span class="ln">1773</span> }
+</code><code id="L1774"><span class="ln">1774</span> }
+</code><code id="L1775"><span class="ln">1775</span> } <b>else</b> {
+</code><code id="L1776"><span class="ln">1776</span> el<span class="s"> = </span>g.doc.createElementNS(<i>"http:<span class="c">//www.w3.org/<span class="d">2000</span>/svg"</i>, el);</span>
+</code><code id="L1777"><span class="ln">1777</span> el.style && (el.style.webkitTapHighlightColor<span class="s"> = </span><i>"rgba(<span class="d">0</span>,<span class="d">0</span>,<span class="d">0</span>,<span class="d">0</span>)"</i>);
+</code><code id="L1778"><span class="ln">1778</span> }
+</code><code id="L1779"><span class="ln">1779</span> <b>return</b> el;
+</code><code id="L1780"><span class="ln">1780</span> },
+</code><code id="L1781"><span class="ln">1781</span> thePath<span class="s"> = </span><b>function</b> (pathString, SVG) {
+</code><code id="L1782"><span class="ln">1782</span> <b>var</b> el<span class="s"> = </span>$(<i>"path"</i>);
+</code><code id="L1783"><span class="ln">1783</span> SVG.canvas && SVG.canvas.appendChild(el);
+</code><code id="L1784"><span class="ln">1784</span> <b>var</b> p<span class="s"> = </span><b>new</b> Element(el, SVG);
+</code><code id="L1785"><span class="ln">1785</span> p.type<span class="s"> = </span><i>"path"</i>;
+</code><code id="L1786"><span class="ln">1786</span> setFillAndStroke(p, {fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>, path: pathString});
+</code><code id="L1787"><span class="ln">1787</span> <b>return</b> p;
+</code><code id="L1788"><span class="ln">1788</span> },
+</code><code id="L1789"><span class="ln">1789</span> gradients<span class="s"> = </span>{},
+</code><code id="L1790"><span class="ln">1790</span> rgGrad<span class="s"> = </span>/^url\(#(.*)\)$/,
+</code><code id="L1791"><span class="ln">1791</span> removeGradientFill<span class="s"> = </span><b>function</b> (node, paper) {
+</code><code id="L1792"><span class="ln">1792</span> <b>var</b> oid<span class="s"> = </span>node.getAttribute(fillString);
+</code><code id="L1793"><span class="ln">1793</span> oid<span class="s"> = </span>oid && oid.match(rgGrad);
+</code><code id="L1794"><span class="ln">1794</span> <b>if</b> (oid && !--gradients[oid[<span class="d">1</span>]]) {
+</code><code id="L1795"><span class="ln">1795</span> <b>delete</b> gradients[oid[<span class="d">1</span>]];
+</code><code id="L1796"><span class="ln">1796</span> paper.defs.removeChild(g.doc.getElementById(oid[<span class="d">1</span>]));
+</code><code id="L1797"><span class="ln">1797</span> }
+</code><code id="L1798"><span class="ln">1798</span> },
+</code><code id="L1799"><span class="ln">1799</span> addGradientFill<span class="s"> = </span><b>function</b> (element, gradient) {
+</code><code id="L1800"><span class="ln">1800</span> <b>var</b> type<span class="s"> = </span><i>"linear"</i>,
+</code><code id="L1801"><span class="ln">1801</span> id<span class="s"> = </span>element.id<span class="s"> + </span>gradient,
+</code><code id="L1802"><span class="ln">1802</span> fx<span class="s"> = </span><span class="d">.5</span>, fy<span class="s"> = </span><span class="d">.5</span>,
+</code><code id="L1803"><span class="ln">1803</span> o<span class="s"> = </span>element.node,
+</code><code id="L1804"><span class="ln">1804</span> SVG<span class="s"> = </span>element.paper,
+</code><code id="L1805"><span class="ln">1805</span> s<span class="s"> = </span>o.style,
+</code><code id="L1806"><span class="ln">1806</span> el<span class="s"> = </span>g.doc.getElementById(id);
+</code><code id="L1807"><span class="ln">1807</span> <b>if</b> (!el) {
+</code><code id="L1808"><span class="ln">1808</span> gradient<span class="s"> = </span>Str(gradient).replace(radial_gradient, <b>function</b> (all, _fx, _fy) {
+</code><code id="L1809"><span class="ln">1809</span> type<span class="s"> = </span><i>"radial"</i>;
+</code><code id="L1810"><span class="ln">1810</span> <b>if</b> (_fx && _fy) {
+</code><code id="L1811"><span class="ln">1811</span> fx<span class="s"> = </span>toFloat(_fx);
+</code><code id="L1812"><span class="ln">1812</span> fy<span class="s"> = </span>toFloat(_fy);
+</code><code id="L1813"><span class="ln">1813</span> <b>var</b> dir<span class="s"> = </span>((fy > <span class="d">.5</span>)<span class="s"> * </span><span class="d">2</span><span class="s"> - </span><span class="d">1</span>);
+</code><code id="L1814"><span class="ln">1814</span> pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>)<span class="s"> + </span>pow(fy<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>) > <span class="d">.25</span> &&
+</code><code id="L1815"><span class="ln">1815</span> (fy<span class="s"> = </span>math.sqrt(<span class="d">.25</span><span class="s"> - </span>pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>))<span class="s"> * </span>dir<span class="s"> + </span><span class="d">.5</span>) &&
+</code><code id="L1816"><span class="ln">1816</span> fy != <span class="d">.5</span> &&
+</code><code id="L1817"><span class="ln">1817</span> (fy<span class="s"> = </span>fy.toFixed(<span class="d">5</span>)<span class="s"> - </span><span class="d">1e-5</span><span class="s"> * </span>dir);
+</code><code id="L1818"><span class="ln">1818</span> }
+</code><code id="L1819"><span class="ln">1819</span> <b>return</b> E;
+</code><code id="L1820"><span class="ln">1820</span> });
+</code><code id="L1821"><span class="ln">1821</span> gradient<span class="s"> = </span>gradient.split(/\s*\-\s*/);
+</code><code id="L1822"><span class="ln">1822</span> <b>if</b> (type<span class="s"> == </span><i>"linear"</i>) {
+</code><code id="L1823"><span class="ln">1823</span> <b>var</b> angle<span class="s"> = </span>gradient.shift();
+</code><code id="L1824"><span class="ln">1824</span> angle<span class="s"> = </span>-toFloat(angle);
+</code><code id="L1825"><span class="ln">1825</span> <b>if</b> (isNaN(angle)) {
+</code><code id="L1826"><span class="ln">1826</span> <b>return</b> <b>null</b>;
+</code><code id="L1827"><span class="ln">1827</span> }
+</code><code id="L1828"><span class="ln">1828</span> <b>var</b> vector<span class="s"> = </span>[<span class="d">0</span>, <span class="d">0</span>, math.cos(R.rad(angle)), math.sin(R.rad(angle))],
+</code><code id="L1829"><span class="ln">1829</span> max<span class="s"> = </span><span class="d">1</span><span class="s"> / </span>(mmax(abs(vector[<span class="d">2</span>]), abs(vector[<span class="d">3</span>]))<span class="s"> || </span><span class="d">1</span>);
+</code><code id="L1830"><span class="ln">1830</span> vector[<span class="d">2</span>] *= max;
+</code><code id="L1831"><span class="ln">1831</span> vector[<span class="d">3</span>] *= max;
+</code><code id="L1832"><span class="ln">1832</span> <b>if</b> (vector[<span class="d">2</span>] < <span class="d">0</span>) {
+</code><code id="L1833"><span class="ln">1833</span> vector[<span class="d">0</span>]<span class="s"> = </span>-vector[<span class="d">2</span>];
+</code><code id="L1834"><span class="ln">1834</span> vector[<span class="d">2</span>]<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1835"><span class="ln">1835</span> }
+</code><code id="L1836"><span class="ln">1836</span> <b>if</b> (vector[<span class="d">3</span>] < <span class="d">0</span>) {
+</code><code id="L1837"><span class="ln">1837</span> vector[<span class="d">1</span>]<span class="s"> = </span>-vector[<span class="d">3</span>];
+</code><code id="L1838"><span class="ln">1838</span> vector[<span class="d">3</span>]<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1839"><span class="ln">1839</span> }
+</code><code id="L1840"><span class="ln">1840</span> }
+</code><code id="L1841"><span class="ln">1841</span> <b>var</b> dots<span class="s"> = </span>parseDots(gradient);
+</code><code id="L1842"><span class="ln">1842</span> <b>if</b> (!dots) {
+</code><code id="L1843"><span class="ln">1843</span> <b>return</b> <b>null</b>;
+</code><code id="L1844"><span class="ln">1844</span> }
+</code><code id="L1845"><span class="ln">1845</span> <b>if</b> (element.gradient) {
+</code><code id="L1846"><span class="ln">1846</span> SVG.defs.removeChild(element.gradient);
+</code><code id="L1847"><span class="ln">1847</span> <b>delete</b> element.gradient;
+</code><code id="L1848"><span class="ln">1848</span> }
+</code><code id="L1849"><span class="ln">1849</span>
+</code><code id="L1850"><span class="ln">1850</span> el<span class="s"> = </span>$(type<span class="s"> + </span><i>"Gradient"</i>, {id: id});
+</code><code id="L1851"><span class="ln">1851</span> element.gradient<span class="s"> = </span>el;
+</code><code id="L1852"><span class="ln">1852</span> $(el, type<span class="s"> == </span><i>"radial"</i> ? {
+</code><code id="L1853"><span class="ln">1853</span> fx: fx,
+</code><code id="L1854"><span class="ln">1854</span> fy: fy
+</code><code id="L1855"><span class="ln">1855</span> } : {
+</code><code id="L1856"><span class="ln">1856</span> x1: vector[<span class="d">0</span>],
+</code><code id="L1857"><span class="ln">1857</span> y1: vector[<span class="d">1</span>],
+</code><code id="L1858"><span class="ln">1858</span> x2: vector[<span class="d">2</span>],
+</code><code id="L1859"><span class="ln">1859</span> y2: vector[<span class="d">3</span>],
+</code><code id="L1860"><span class="ln">1860</span> gradientTransform: element.matrix.invert()
+</code><code id="L1861"><span class="ln">1861</span> });
+</code><code id="L1862"><span class="ln">1862</span> SVG.defs.appendChild(el);
+</code><code id="L1863"><span class="ln">1863</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>dots.length; i < ii; i++) {
+</code><code id="L1864"><span class="ln">1864</span> el.appendChild($(<i>"stop"</i>, {
+</code><code id="L1865"><span class="ln">1865</span> offset: dots[i].offset ? dots[i].offset : i ? <i>"<span class="d">100</span>%"</i> : <i>"<span class="d">0</span>%"</i>,
+</code><code id="L1866"><span class="ln">1866</span> <i>"stop-color"</i>: dots[i].color<span class="s"> || </span><i>"#fff"</i>
+</code><code id="L1867"><span class="ln">1867</span> }));
+</code><code id="L1868"><span class="ln">1868</span> }
+</code><code id="L1869"><span class="ln">1869</span> }
+</code><code id="L1870"><span class="ln">1870</span> $(o, {
+</code><code id="L1871"><span class="ln">1871</span> fill: <i>"url(#"</i><span class="s"> + </span>id<span class="s"> + </span><i>")"</i>,
+</code><code id="L1872"><span class="ln">1872</span> opacity: <span class="d">1</span>,
+</code><code id="L1873"><span class="ln">1873</span> <i>"fill-opacity"</i>: <span class="d">1</span>
+</code><code id="L1874"><span class="ln">1874</span> });
+</code><code id="L1875"><span class="ln">1875</span> s.fill<span class="s"> = </span>E;
+</code><code id="L1876"><span class="ln">1876</span> s.opacity<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1877"><span class="ln">1877</span> s.fillOpacity<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1878"><span class="ln">1878</span> <b>return</b> <span class="d">1</span>;
+</code><code id="L1879"><span class="ln">1879</span> },
+</code><code id="L1880"><span class="ln">1880</span> updatePosition<span class="s"> = </span><b>function</b> (o) {
+</code><code id="L1881"><span class="ln">1881</span> <b>var</b> bbox<span class="s"> = </span>o.getBBox(<span class="d">1</span>);
+</code><code id="L1882"><span class="ln">1882</span> $(o.pattern, {patternTransform: o.matrix.invert()<span class="s"> + </span><i>" translate("</i><span class="s"> + </span>bbox.x<span class="s"> + </span><i>","</i><span class="s"> + </span>bbox.y<span class="s"> + </span><i>")"</i>});
+</code><code id="L1883"><span class="ln">1883</span> },
+</code><code id="L1884"><span class="ln">1884</span> addArrow<span class="s"> = </span><b>function</b> (o, value, isEnd) {
+</code><code id="L1885"><span class="ln">1885</span> <b>if</b> (o.type<span class="s"> == </span><i>"path"</i>) {
+</code><code id="L1886"><span class="ln">1886</span> <b>var</b> values<span class="s"> = </span>Str(value).toLowerCase().split(<i>"-"</i>),
+</code><code id="L1887"><span class="ln">1887</span> p<span class="s"> = </span>o.paper,
+</code><code id="L1888"><span class="ln">1888</span> se<span class="s"> = </span>isEnd ? <i>"end"</i> : <i>"start"</i>,
+</code><code id="L1889"><span class="ln">1889</span> node<span class="s"> = </span>o.node,
+</code><code id="L1890"><span class="ln">1890</span> attrs<span class="s"> = </span>o.attrs,
+</code><code id="L1891"><span class="ln">1891</span> stroke<span class="s"> = </span>attrs[<i>"stroke-width"</i>],
+</code><code id="L1892"><span class="ln">1892</span> i<span class="s"> = </span>values.length,
+</code><code id="L1893"><span class="ln">1893</span> type<span class="s"> = </span><i>"classic"</i>,
+</code><code id="L1894"><span class="ln">1894</span> from,
+</code><code id="L1895"><span class="ln">1895</span> to,
+</code><code id="L1896"><span class="ln">1896</span> dx,
+</code><code id="L1897"><span class="ln">1897</span> refX,
+</code><code id="L1898"><span class="ln">1898</span> attr,
+</code><code id="L1899"><span class="ln">1899</span> w<span class="s"> = </span><span class="d">3</span>,
+</code><code id="L1900"><span class="ln">1900</span> h<span class="s"> = </span><span class="d">3</span>,
+</code><code id="L1901"><span class="ln">1901</span> t<span class="s"> = </span><span class="d">5</span>;
+</code><code id="L1902"><span class="ln">1902</span> <b>while</b> (i--) {
+</code><code id="L1903"><span class="ln">1903</span> <b>switch</b> (values[i]) {
+</code><code id="L1904"><span class="ln">1904</span> <b>case</b> <i>"block"</i>:
+</code><code id="L1905"><span class="ln">1905</span> <b>case</b> <i>"classic"</i>:
+</code><code id="L1906"><span class="ln">1906</span> <b>case</b> <i>"oval"</i>:
+</code><code id="L1907"><span class="ln">1907</span> <b>case</b> <i>"diamond"</i>:
+</code><code id="L1908"><span class="ln">1908</span> <b>case</b> <i>"open"</i>:
+</code><code id="L1909"><span class="ln">1909</span> <b>case</b> <i>"none"</i>:
+</code><code id="L1910"><span class="ln">1910</span> type<span class="s"> = </span>values[i];
+</code><code id="L1911"><span class="ln">1911</span> <b>break</b>;
+</code><code id="L1912"><span class="ln">1912</span> <b>case</b> <i>"wide"</i>: h<span class="s"> = </span><span class="d">5</span>; <b>break</b>;
+</code><code id="L1913"><span class="ln">1913</span> <b>case</b> <i>"narrow"</i>: h<span class="s"> = </span><span class="d">2</span>; <b>break</b>;
+</code><code id="L1914"><span class="ln">1914</span> <b>case</b> <i>"<b>long</b>"</i>: w<span class="s"> = </span><span class="d">5</span>; <b>break</b>;
+</code><code id="L1915"><span class="ln">1915</span> <b>case</b> <i>"<b>short</b>"</i>: w<span class="s"> = </span><span class="d">2</span>; <b>break</b>;
+</code><code id="L1916"><span class="ln">1916</span> }
+</code><code id="L1917"><span class="ln">1917</span> }
+</code><code id="L1918"><span class="ln">1918</span> <b>if</b> (type<span class="s"> == </span><i>"open"</i>) {
+</code><code id="L1919"><span class="ln">1919</span> w += <span class="d">2</span>;
+</code><code id="L1920"><span class="ln">1920</span> h += <span class="d">2</span>;
+</code><code id="L1921"><span class="ln">1921</span> t += <span class="d">2</span>;
+</code><code id="L1922"><span class="ln">1922</span> dx<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1923"><span class="ln">1923</span> refX<span class="s"> = </span>isEnd ? <span class="d">4</span> : <span class="d">1</span>;
+</code><code id="L1924"><span class="ln">1924</span> attr<span class="s"> = </span>{
+</code><code id="L1925"><span class="ln">1925</span> fill: <i>"none"</i>,
+</code><code id="L1926"><span class="ln">1926</span> stroke: attrs.stroke
+</code><code id="L1927"><span class="ln">1927</span> };
+</code><code id="L1928"><span class="ln">1928</span> } <b>else</b> {
+</code><code id="L1929"><span class="ln">1929</span> refX<span class="s"> = </span>dx<span class="s"> = </span>w<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L1930"><span class="ln">1930</span> attr<span class="s"> = </span>{
+</code><code id="L1931"><span class="ln">1931</span> fill: attrs.stroke,
+</code><code id="L1932"><span class="ln">1932</span> stroke: <i>"none"</i>
+</code><code id="L1933"><span class="ln">1933</span> };
+</code><code id="L1934"><span class="ln">1934</span> }
+</code><code id="L1935"><span class="ln">1935</span> <b>if</b> (o._.arrows) {
+</code><code id="L1936"><span class="ln">1936</span> <b>if</b> (isEnd) {
+</code><code id="L1937"><span class="ln">1937</span> o._.arrows.endPath && markerCounter[o._.arrows.endPath]--;
+</code><code id="L1938"><span class="ln">1938</span> o._.arrows.endMarker && markerCounter[o._.arrows.endMarker]--;
+</code><code id="L1939"><span class="ln">1939</span> } <b>else</b> {
+</code><code id="L1940"><span class="ln">1940</span> o._.arrows.startPath && markerCounter[o._.arrows.startPath]--;
+</code><code id="L1941"><span class="ln">1941</span> o._.arrows.startMarker && markerCounter[o._.arrows.startMarker]--;
+</code><code id="L1942"><span class="ln">1942</span> }
+</code><code id="L1943"><span class="ln">1943</span> } <b>else</b> {
+</code><code id="L1944"><span class="ln">1944</span> o._.arrows<span class="s"> = </span>{};
+</code><code id="L1945"><span class="ln">1945</span> }
+</code><code id="L1946"><span class="ln">1946</span> <b>if</b> (type != <i>"none"</i>) {
+</code><code id="L1947"><span class="ln">1947</span> <b>var</b> pathId<span class="s"> = </span><i>"raphael-marker-"</i><span class="s"> + </span>type,
+</code><code id="L1948"><span class="ln">1948</span> markerId<span class="s"> = </span><i>"raphael-marker-"</i><span class="s"> + </span>se<span class="s"> + </span>type<span class="s"> + </span>w<span class="s"> + </span>h;
+</code><code id="L1949"><span class="ln">1949</span> <b>if</b> (!g.doc.getElementById(pathId)) {
+</code><code id="L1950"><span class="ln">1950</span> p.defs.appendChild($($(<i>"path"</i>), {
+</code><code id="L1951"><span class="ln">1951</span> <i>"stroke-linecap"</i>: <i>"round"</i>,
+</code><code id="L1952"><span class="ln">1952</span> d: markers[type],
+</code><code id="L1953"><span class="ln">1953</span> id: pathId
+</code><code id="L1954"><span class="ln">1954</span> }));
+</code><code id="L1955"><span class="ln">1955</span> markerCounter[pathId]<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1956"><span class="ln">1956</span> } <b>else</b> {
+</code><code id="L1957"><span class="ln">1957</span> markerCounter[pathId]++;
+</code><code id="L1958"><span class="ln">1958</span> }
+</code><code id="L1959"><span class="ln">1959</span> <b>var</b> marker<span class="s"> = </span>g.doc.getElementById(markerId),
+</code><code id="L1960"><span class="ln">1960</span> use;
+</code><code id="L1961"><span class="ln">1961</span> <b>if</b> (!marker) {
+</code><code id="L1962"><span class="ln">1962</span> marker<span class="s"> = </span>$($(<i>"marker"</i>), {
+</code><code id="L1963"><span class="ln">1963</span> id: markerId,
+</code><code id="L1964"><span class="ln">1964</span> markerHeight: h,
+</code><code id="L1965"><span class="ln">1965</span> markerWidth: w,
+</code><code id="L1966"><span class="ln">1966</span> orient: <i>"auto"</i>,
+</code><code id="L1967"><span class="ln">1967</span> refX: refX,
+</code><code id="L1968"><span class="ln">1968</span> refY: h<span class="s"> / </span><span class="d">2</span>
+</code><code id="L1969"><span class="ln">1969</span> });
+</code><code id="L1970"><span class="ln">1970</span> use<span class="s"> = </span>$($(<i>"use"</i>), {
+</code><code id="L1971"><span class="ln">1971</span> <i>"xlink:href"</i>: <i>"#"</i><span class="s"> + </span>pathId,
+</code><code id="L1972"><span class="ln">1972</span> transform: (isEnd ? <i>" rotate(<span class="d">180</span> "</i><span class="s"> + </span>w<span class="s"> / </span><span class="d">2</span><span class="s"> + </span><i>" "</i><span class="s"> + </span>h<span class="s"> / </span><span class="d">2</span><span class="s"> + </span><i>") "</i> : S)<span class="s"> + </span><i>"scale("</i><span class="s"> + </span>w<span class="s"> / </span>t<span class="s"> + </span><i>","</i><span class="s"> + </span>h<span class="s"> / </span>t<span class="s"> + </span><i>")"</i>,
+</code><code id="L1973"><span class="ln">1973</span> <i>"stroke-width"</i>: <span class="d">1</span><span class="s"> / </span>((w<span class="s"> / </span>t<span class="s"> + </span>h<span class="s"> / </span>t)<span class="s"> / </span><span class="d">2</span>)
+</code><code id="L1974"><span class="ln">1974</span> });
+</code><code id="L1975"><span class="ln">1975</span> marker.appendChild(use);
+</code><code id="L1976"><span class="ln">1976</span> p.defs.appendChild(marker);
+</code><code id="L1977"><span class="ln">1977</span> markerCounter[markerId]<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1978"><span class="ln">1978</span> } <b>else</b> {
+</code><code id="L1979"><span class="ln">1979</span> markerCounter[markerId]++;
+</code><code id="L1980"><span class="ln">1980</span> use<span class="s"> = </span>marker.getElementsByTagName(<i>"use"</i>)[<span class="d">0</span>];
+</code><code id="L1981"><span class="ln">1981</span> }
+</code><code id="L1982"><span class="ln">1982</span> $(use, attr);
+</code><code id="L1983"><span class="ln">1983</span> <b>var</b> delta<span class="s"> = </span>dx<span class="s"> * </span>(type != <i>"diamond"</i> && type != <i>"oval"</i>);
+</code><code id="L1984"><span class="ln">1984</span> <b>if</b> (isEnd) {
+</code><code id="L1985"><span class="ln">1985</span> from<span class="s"> = </span>o._.arrows.startdx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L1986"><span class="ln">1986</span> to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>delta<span class="s"> * </span>stroke;
+</code><code id="L1987"><span class="ln">1987</span> } <b>else</b> {
+</code><code id="L1988"><span class="ln">1988</span> from<span class="s"> = </span>delta<span class="s"> * </span>stroke;
+</code><code id="L1989"><span class="ln">1989</span> to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>(o._.arrows.enddx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L1990"><span class="ln">1990</span> }
+</code><code id="L1991"><span class="ln">1991</span> attr<span class="s"> = </span>{};
+</code><code id="L1992"><span class="ln">1992</span> attr[<i>"marker-"</i><span class="s"> + </span>se]<span class="s"> = </span><i>"url(#"</i><span class="s"> + </span>markerId<span class="s"> + </span><i>")"</i>;
+</code><code id="L1993"><span class="ln">1993</span> <b>if</b> (to<span class="s"> || </span>from) {
+</code><code id="L1994"><span class="ln">1994</span> attr.d<span class="s"> = </span>Raphael.getSubpath(attrs.path, from, to);
+</code><code id="L1995"><span class="ln">1995</span> }
+</code><code id="L1996"><span class="ln">1996</span> $(node, attr);
+</code><code id="L1997"><span class="ln">1997</span> o._.arrows[se<span class="s"> + </span><i>"Path"</i>]<span class="s"> = </span>pathId;
+</code><code id="L1998"><span class="ln">1998</span> o._.arrows[se<span class="s"> + </span><i>"Marker"</i>]<span class="s"> = </span>markerId;
+</code><code id="L1999"><span class="ln">1999</span> o._.arrows[se<span class="s"> + </span><i>"dx"</i>]<span class="s"> = </span>delta;
+</code><code id="L2000"><span class="ln">2000</span> o._.arrows[se<span class="s"> + </span><i>"Type"</i>]<span class="s"> = </span>type;
+</code><code id="L2001"><span class="ln">2001</span> o._.arrows[se<span class="s"> + </span><i>"String"</i>]<span class="s"> = </span>value;
+</code><code id="L2002"><span class="ln">2002</span> } <b>else</b> {
+</code><code id="L2003"><span class="ln">2003</span> <b>if</b> (isEnd) {
+</code><code id="L2004"><span class="ln">2004</span> from<span class="s"> = </span>o._.arrows.startdx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2005"><span class="ln">2005</span> to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>from;
+</code><code id="L2006"><span class="ln">2006</span> } <b>else</b> {
+</code><code id="L2007"><span class="ln">2007</span> from<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L2008"><span class="ln">2008</span> to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>(o._.arrows.enddx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L2009"><span class="ln">2009</span> }
+</code><code id="L2010"><span class="ln">2010</span> o._.arrows[se<span class="s"> + </span><i>"Path"</i>] && $(node, {d: Raphael.getSubpath(attrs.path, from, to)});
+</code><code id="L2011"><span class="ln">2011</span> <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"Path"</i>];
+</code><code id="L2012"><span class="ln">2012</span> <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"Marker"</i>];
+</code><code id="L2013"><span class="ln">2013</span> <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"dx"</i>];
+</code><code id="L2014"><span class="ln">2014</span> <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"Type"</i>];
+</code><code id="L2015"><span class="ln">2015</span> <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"String"</i>];
+</code><code id="L2016"><span class="ln">2016</span> }
+</code><code id="L2017"><span class="ln">2017</span> <b>for</b> (attr <b>in</b> markerCounter) <b>if</b> (markerCounter[has](attr) && !markerCounter[attr]) {
+</code><code id="L2018"><span class="ln">2018</span> <b>var</b> item<span class="s"> = </span>g.doc.getElementById(attr);
+</code><code id="L2019"><span class="ln">2019</span> item && item.parentNode.removeChild(item);
+</code><code id="L2020"><span class="ln">2020</span> }
+</code><code id="L2021"><span class="ln">2021</span> }
+</code><code id="L2022"><span class="ln">2022</span> },
+</code><code id="L2023"><span class="ln">2023</span> setFillAndStroke<span class="s"> = </span><b>function</b> (o, params) {
+</code><code id="L2024"><span class="ln">2024</span> <b>var</b> dasharray<span class="s"> = </span>{
+</code><code id="L2025"><span class="ln">2025</span> <i>""</i>: [<span class="d">0</span>],
+</code><code id="L2026"><span class="ln">2026</span> <i>"none"</i>: [<span class="d">0</span>],
+</code><code id="L2027"><span class="ln">2027</span> <i>"-"</i>: [<span class="d">3</span>, <span class="d">1</span>],
+</code><code id="L2028"><span class="ln">2028</span> <i>"."</i>: [<span class="d">1</span>, <span class="d">1</span>],
+</code><code id="L2029"><span class="ln">2029</span> <i>"-."</i>: [<span class="d">3</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>],
+</code><code id="L2030"><span class="ln">2030</span> <i>"-.."</i>: [<span class="d">3</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>],
+</code><code id="L2031"><span class="ln">2031</span> <i>". "</i>: [<span class="d">1</span>, <span class="d">3</span>],
+</code><code id="L2032"><span class="ln">2032</span> <i>"- "</i>: [<span class="d">4</span>, <span class="d">3</span>],
+</code><code id="L2033"><span class="ln">2033</span> <i>"--"</i>: [<span class="d">8</span>, <span class="d">3</span>],
+</code><code id="L2034"><span class="ln">2034</span> <i>"- ."</i>: [<span class="d">4</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>],
+</code><code id="L2035"><span class="ln">2035</span> <i>"--."</i>: [<span class="d">8</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>],
+</code><code id="L2036"><span class="ln">2036</span> <i>"--.."</i>: [<span class="d">8</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>]
+</code><code id="L2037"><span class="ln">2037</span> },
+</code><code id="L2038"><span class="ln">2038</span> node<span class="s"> = </span>o.node,
+</code><code id="L2039"><span class="ln">2039</span> attrs<span class="s"> = </span>o.attrs,
+</code><code id="L2040"><span class="ln">2040</span> addDashes<span class="s"> = </span><b>function</b> (o, value) {
+</code><code id="L2041"><span class="ln">2041</span> value<span class="s"> = </span>dasharray[lowerCase.call(value)];
+</code><code id="L2042"><span class="ln">2042</span> <b>if</b> (value) {
+</code><code id="L2043"><span class="ln">2043</span> <b>var</b> width<span class="s"> = </span>o.attrs[<i>"stroke-width"</i>]<span class="s"> || </span><i>"<span class="d">1</span>"</i>,
+</code><code id="L2044"><span class="ln">2044</span> butt<span class="s"> = </span>{round: width, square: width, butt: <span class="d">0</span>}[o.attrs[<i>"stroke-linecap"</i>]<span class="s"> || </span>params[<i>"stroke-linecap"</i>]]<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L2045"><span class="ln">2045</span> dashes<span class="s"> = </span>[],
+</code><code id="L2046"><span class="ln">2046</span> i<span class="s"> = </span>value.length;
+</code><code id="L2047"><span class="ln">2047</span> <b>while</b> (i--) {
+</code><code id="L2048"><span class="ln">2048</span> dashes[i]<span class="s"> = </span>value[i]<span class="s"> * </span>width<span class="s"> + </span>((i % <span class="d">2</span>) ? <span class="d">1</span> : -<span class="d">1</span>)<span class="s"> * </span>butt;
+</code><code id="L2049"><span class="ln">2049</span> }
+</code><code id="L2050"><span class="ln">2050</span> $(node, {<i>"stroke-dasharray"</i>: dashes.join(<i>","</i>)});
+</code><code id="L2051"><span class="ln">2051</span> }
+</code><code id="L2052"><span class="ln">2052</span> };
+</code><code id="L2053"><span class="ln">2053</span> <b>for</b> (<b>var</b> att <b>in</b> params) {
+</code><code id="L2054"><span class="ln">2054</span> <b>if</b> (params[has](att)) {
+</code><code id="L2055"><span class="ln">2055</span> <b>if</b> (!availableAttrs[has](att)) {
+</code><code id="L2056"><span class="ln">2056</span> <b>continue</b>;
+</code><code id="L2057"><span class="ln">2057</span> }
+</code><code id="L2058"><span class="ln">2058</span> <b>var</b> value<span class="s"> = </span>params[att];
+</code><code id="L2059"><span class="ln">2059</span> attrs[att]<span class="s"> = </span>value;
+</code><code id="L2060"><span class="ln">2060</span> <b>switch</b> (att) {
+</code><code id="L2061"><span class="ln">2061</span> <b>case</b> <i>"blur"</i>:
+</code><code id="L2062"><span class="ln">2062</span> o.blur(value);
+</code><code id="L2063"><span class="ln">2063</span> <b>break</b>;
+</code><code id="L2064"><span class="ln">2064</span> <b>case</b> <i>"href"</i>:
+</code><code id="L2065"><span class="ln">2065</span> <b>case</b> <i>"title"</i>:
+</code><code id="L2066"><span class="ln">2066</span> <b>case</b> <i>"target"</i>:
+</code><code id="L2067"><span class="ln">2067</span> <b>var</b> pn<span class="s"> = </span>node.parentNode;
+</code><code id="L2068"><span class="ln">2068</span> <b>if</b> (lowerCase.call(pn.tagName) != <i>"a"</i>) {
+</code><code id="L2069"><span class="ln">2069</span> <b>var</b> hl<span class="s"> = </span>$(<i>"a"</i>);
+</code><code id="L2070"><span class="ln">2070</span> pn.insertBefore(hl, node);
+</code><code id="L2071"><span class="ln">2071</span> hl.appendChild(node);
+</code><code id="L2072"><span class="ln">2072</span> pn<span class="s"> = </span>hl;
+</code><code id="L2073"><span class="ln">2073</span> }
+</code><code id="L2074"><span class="ln">2074</span> <b>if</b> (att<span class="s"> == </span><i>"target"</i> && value<span class="s"> == </span><i>"blank"</i>) {
+</code><code id="L2075"><span class="ln">2075</span> pn.setAttributeNS(xlink, <i>"show"</i>, <i>"<b>new</b>"</i>);
+</code><code id="L2076"><span class="ln">2076</span> } <b>else</b> {
+</code><code id="L2077"><span class="ln">2077</span> pn.setAttributeNS(xlink, att, value);
+</code><code id="L2078"><span class="ln">2078</span> }
+</code><code id="L2079"><span class="ln">2079</span> <b>break</b>;
+</code><code id="L2080"><span class="ln">2080</span> <b>case</b> <i>"cursor"</i>:
+</code><code id="L2081"><span class="ln">2081</span> node.style.cursor<span class="s"> = </span>value;
+</code><code id="L2082"><span class="ln">2082</span> <b>break</b>;
+</code><code id="L2083"><span class="ln">2083</span> <b>case</b> <i>"transform"</i>:
+</code><code id="L2084"><span class="ln">2084</span> o.transform(value);
+</code><code id="L2085"><span class="ln">2085</span> <b>break</b>;
+</code><code id="L2086"><span class="ln">2086</span> <b>case</b> <i>"arrow-start"</i>:
+</code><code id="L2087"><span class="ln">2087</span> addArrow(o, value);
+</code><code id="L2088"><span class="ln">2088</span> <b>break</b>;
+</code><code id="L2089"><span class="ln">2089</span> <b>case</b> <i>"arrow-end"</i>:
+</code><code id="L2090"><span class="ln">2090</span> addArrow(o, value, <span class="d">1</span>);
+</code><code id="L2091"><span class="ln">2091</span> <b>break</b>;
+</code><code id="L2092"><span class="ln">2092</span> <b>case</b> <i>"clip-rect"</i>:
+</code><code id="L2093"><span class="ln">2093</span> <b>var</b> rect<span class="s"> = </span>Str(value).split(separator);
+</code><code id="L2094"><span class="ln">2094</span> <b>if</b> (rect.length<span class="s"> == </span><span class="d">4</span>) {
+</code><code id="L2095"><span class="ln">2095</span> o.clip && o.clip.parentNode.parentNode.removeChild(o.clip.parentNode);
+</code><code id="L2096"><span class="ln">2096</span> <b>var</b> el<span class="s"> = </span>$(<i>"clipPath"</i>),
+</code><code id="L2097"><span class="ln">2097</span> rc<span class="s"> = </span>$(<i>"rect"</i>);
+</code><code id="L2098"><span class="ln">2098</span> el.id<span class="s"> = </span>createUUID();
+</code><code id="L2099"><span class="ln">2099</span> $(rc, {
+</code><code id="L2100"><span class="ln">2100</span> x: rect[<span class="d">0</span>],
+</code><code id="L2101"><span class="ln">2101</span> y: rect[<span class="d">1</span>],
+</code><code id="L2102"><span class="ln">2102</span> width: rect[<span class="d">2</span>],
+</code><code id="L2103"><span class="ln">2103</span> height: rect[<span class="d">3</span>]
+</code><code id="L2104"><span class="ln">2104</span> });
+</code><code id="L2105"><span class="ln">2105</span> el.appendChild(rc);
+</code><code id="L2106"><span class="ln">2106</span> o.paper.defs.appendChild(el);
+</code><code id="L2107"><span class="ln">2107</span> $(node, {<i>"clip-path"</i>: <i>"url(#"</i><span class="s"> + </span>el.id<span class="s"> + </span><i>")"</i>});
+</code><code id="L2108"><span class="ln">2108</span> o.clip<span class="s"> = </span>rc;
+</code><code id="L2109"><span class="ln">2109</span> }
+</code><code id="L2110"><span class="ln">2110</span> <b>if</b> (!value) {
+</code><code id="L2111"><span class="ln">2111</span> <b>var</b> clip<span class="s"> = </span>g.doc.getElementById(node.getAttribute(<i>"clip-path"</i>).replace(/(^url\(#|\)$)/g, E));
+</code><code id="L2112"><span class="ln">2112</span> clip && clip.parentNode.removeChild(clip);
+</code><code id="L2113"><span class="ln">2113</span> $(node, {<i>"clip-path"</i>: E});
+</code><code id="L2114"><span class="ln">2114</span> <b>delete</b> o.clip;
+</code><code id="L2115"><span class="ln">2115</span> }
+</code><code id="L2116"><span class="ln">2116</span> <b>break</b>;
+</code><code id="L2117"><span class="ln">2117</span> <b>case</b> <i>"path"</i>:
+</code><code id="L2118"><span class="ln">2118</span> <b>if</b> (o.type<span class="s"> == </span><i>"path"</i>) {
+</code><code id="L2119"><span class="ln">2119</span> $(node, {d: value ? attrs.path<span class="s"> = </span>pathToAbsolute(value) : <i>"M0,<span class="d">0</span>"</i>});
+</code><code id="L2120"><span class="ln">2120</span> o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2121"><span class="ln">2121</span> <b>if</b> (o._.arrows) {
+</code><code id="L2122"><span class="ln">2122</span> <i>"startString"</i> <b>in</b> o._.arrows && addArrow(o, o._.arrows.startString);
+</code><code id="L2123"><span class="ln">2123</span> <i>"endString"</i> <b>in</b> o._.arrows && addArrow(o, o._.arrows.endString, <span class="d">1</span>);
+</code><code id="L2124"><span class="ln">2124</span> }
+</code><code id="L2125"><span class="ln">2125</span> }
+</code><code id="L2126"><span class="ln">2126</span> <b>break</b>;
+</code><code id="L2127"><span class="ln">2127</span> <b>case</b> <i>"width"</i>:
+</code><code id="L2128"><span class="ln">2128</span> node[setAttribute](att, value);
+</code><code id="L2129"><span class="ln">2129</span> o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2130"><span class="ln">2130</span> <b>if</b> (attrs.fx) {
+</code><code id="L2131"><span class="ln">2131</span> att<span class="s"> = </span><i>"x"</i>;
+</code><code id="L2132"><span class="ln">2132</span> value<span class="s"> = </span>attrs.x;
+</code><code id="L2133"><span class="ln">2133</span> } <b>else</b> {
+</code><code id="L2134"><span class="ln">2134</span> <b>break</b>;
+</code><code id="L2135"><span class="ln">2135</span> }
+</code><code id="L2136"><span class="ln">2136</span> <b>case</b> <i>"x"</i>:
+</code><code id="L2137"><span class="ln">2137</span> <b>if</b> (attrs.fx) {
+</code><code id="L2138"><span class="ln">2138</span> value<span class="s"> = </span>-attrs.x<span class="s"> - </span>(attrs.width<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L2139"><span class="ln">2139</span> }
+</code><code id="L2140"><span class="ln">2140</span> <b>case</b> <i>"rx"</i>:
+</code><code id="L2141"><span class="ln">2141</span> <b>if</b> (att<span class="s"> == </span><i>"rx"</i> && o.type<span class="s"> == </span><i>"rect"</i>) {
+</code><code id="L2142"><span class="ln">2142</span> <b>break</b>;
+</code><code id="L2143"><span class="ln">2143</span> }
+</code><code id="L2144"><span class="ln">2144</span> <b>case</b> <i>"cx"</i>:
+</code><code id="L2145"><span class="ln">2145</span> node[setAttribute](att, value);
+</code><code id="L2146"><span class="ln">2146</span> o.pattern && updatePosition(o);
+</code><code id="L2147"><span class="ln">2147</span> o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2148"><span class="ln">2148</span> <b>break</b>;
+</code><code id="L2149"><span class="ln">2149</span> <b>case</b> <i>"height"</i>:
+</code><code id="L2150"><span class="ln">2150</span> node[setAttribute](att, value);
+</code><code id="L2151"><span class="ln">2151</span> o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2152"><span class="ln">2152</span> <b>if</b> (attrs.fy) {
+</code><code id="L2153"><span class="ln">2153</span> att<span class="s"> = </span><i>"y"</i>;
+</code><code id="L2154"><span class="ln">2154</span> value<span class="s"> = </span>attrs.y;
+</code><code id="L2155"><span class="ln">2155</span> } <b>else</b> {
+</code><code id="L2156"><span class="ln">2156</span> <b>break</b>;
+</code><code id="L2157"><span class="ln">2157</span> }
+</code><code id="L2158"><span class="ln">2158</span> <b>case</b> <i>"y"</i>:
+</code><code id="L2159"><span class="ln">2159</span> <b>if</b> (attrs.fy) {
+</code><code id="L2160"><span class="ln">2160</span> value<span class="s"> = </span>-attrs.y<span class="s"> - </span>(attrs.height<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L2161"><span class="ln">2161</span> }
+</code><code id="L2162"><span class="ln">2162</span> <b>case</b> <i>"ry"</i>:
+</code><code id="L2163"><span class="ln">2163</span> <b>if</b> (att<span class="s"> == </span><i>"ry"</i> && o.type<span class="s"> == </span><i>"rect"</i>) {
+</code><code id="L2164"><span class="ln">2164</span> <b>break</b>;
+</code><code id="L2165"><span class="ln">2165</span> }
+</code><code id="L2166"><span class="ln">2166</span> <b>case</b> <i>"cy"</i>:
+</code><code id="L2167"><span class="ln">2167</span> node[setAttribute](att, value);
+</code><code id="L2168"><span class="ln">2168</span> o.pattern && updatePosition(o);
+</code><code id="L2169"><span class="ln">2169</span> o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2170"><span class="ln">2170</span> <b>break</b>;
+</code><code id="L2171"><span class="ln">2171</span> <b>case</b> <i>"r"</i>:
+</code><code id="L2172"><span class="ln">2172</span> <b>if</b> (o.type<span class="s"> == </span><i>"rect"</i>) {
+</code><code id="L2173"><span class="ln">2173</span> $(node, {rx: value, ry: value});
+</code><code id="L2174"><span class="ln">2174</span> } <b>else</b> {
+</code><code id="L2175"><span class="ln">2175</span> node[setAttribute](att, value);
+</code><code id="L2176"><span class="ln">2176</span> }
+</code><code id="L2177"><span class="ln">2177</span> o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2178"><span class="ln">2178</span> <b>break</b>;
+</code><code id="L2179"><span class="ln">2179</span> <b>case</b> <i>"src"</i>:
+</code><code id="L2180"><span class="ln">2180</span> <b>if</b> (o.type<span class="s"> == </span><i>"image"</i>) {
+</code><code id="L2181"><span class="ln">2181</span> node.setAttributeNS(xlink, <i>"href"</i>, value);
+</code><code id="L2182"><span class="ln">2182</span> }
+</code><code id="L2183"><span class="ln">2183</span> <b>break</b>;
+</code><code id="L2184"><span class="ln">2184</span> <b>case</b> <i>"stroke-width"</i>:
+</code><code id="L2185"><span class="ln">2185</span> <b>if</b> (o._.sx != <span class="d">1</span><span class="s"> || </span>o._.sy != <span class="d">1</span>) {
+</code><code id="L2186"><span class="ln">2186</span> value /= mmax(abs(o._.sx), abs(o._.sy))<span class="s"> || </span><span class="d">1</span>;
+</code><code id="L2187"><span class="ln">2187</span> }
+</code><code id="L2188"><span class="ln">2188</span> <b>if</b> (o.paper._vbSize) {
+</code><code id="L2189"><span class="ln">2189</span> value *= o.paper._vbSize;
+</code><code id="L2190"><span class="ln">2190</span> }
+</code><code id="L2191"><span class="ln">2191</span> node[setAttribute](att, value);
+</code><code id="L2192"><span class="ln">2192</span> <b>if</b> (attrs[<i>"stroke-dasharray"</i>]) {
+</code><code id="L2193"><span class="ln">2193</span> addDashes(o, attrs[<i>"stroke-dasharray"</i>]);
+</code><code id="L2194"><span class="ln">2194</span> }
+</code><code id="L2195"><span class="ln">2195</span> <b>if</b> (o._.arrows) {
+</code><code id="L2196"><span class="ln">2196</span> <i>"startString"</i> <b>in</b> o._.arrows && addArrow(o, o._.arrows.startString);
+</code><code id="L2197"><span class="ln">2197</span> <i>"endString"</i> <b>in</b> o._.arrows && addArrow(o, o._.arrows.endString, <span class="d">1</span>);
+</code><code id="L2198"><span class="ln">2198</span> }
+</code><code id="L2199"><span class="ln">2199</span> <b>break</b>;
+</code><code id="L2200"><span class="ln">2200</span> <b>case</b> <i>"stroke-dasharray"</i>:
+</code><code id="L2201"><span class="ln">2201</span> addDashes(o, value);
+</code><code id="L2202"><span class="ln">2202</span> <b>break</b>;
+</code><code id="L2203"><span class="ln">2203</span> <b>case</b> fillString:
+</code><code id="L2204"><span class="ln">2204</span> <b>var</b> isURL<span class="s"> = </span>Str(value).match(ISURL);
+</code><code id="L2205"><span class="ln">2205</span> <b>if</b> (isURL) {
+</code><code id="L2206"><span class="ln">2206</span> el<span class="s"> = </span>$(<i>"pattern"</i>);
+</code><code id="L2207"><span class="ln">2207</span> <b>var</b> ig<span class="s"> = </span>$(<i>"image"</i>);
+</code><code id="L2208"><span class="ln">2208</span> el.id<span class="s"> = </span>createUUID();
+</code><code id="L2209"><span class="ln">2209</span> $(el, {x: <span class="d">0</span>, y: <span class="d">0</span>, patternUnits: <i>"userSpaceOnUse"</i>, height: <span class="d">1</span>, width: <span class="d">1</span>});
+</code><code id="L2210"><span class="ln">2210</span> $(ig, {x: <span class="d">0</span>, y: <span class="d">0</span>, <i>"xlink:href"</i>: isURL[<span class="d">1</span>]});
+</code><code id="L2211"><span class="ln">2211</span> el.appendChild(ig);
+</code><code id="L2212"><span class="ln">2212</span>
+</code><code id="L2213"><span class="ln">2213</span> (<b>function</b> (el) {
+</code><code id="L2214"><span class="ln">2214</span> preload(isURL[<span class="d">1</span>], <b>function</b> () {
+</code><code id="L2215"><span class="ln">2215</span> <b>var</b> w<span class="s"> = </span><b>this</b>.offsetWidth,
+</code><code id="L2216"><span class="ln">2216</span> h<span class="s"> = </span><b>this</b>.offsetHeight;
+</code><code id="L2217"><span class="ln">2217</span> $(el, {width: w, height: h});
+</code><code id="L2218"><span class="ln">2218</span> $(ig, {width: w, height: h});
+</code><code id="L2219"><span class="ln">2219</span> o.paper.safari();
+</code><code id="L2220"><span class="ln">2220</span> });
+</code><code id="L2221"><span class="ln">2221</span> })(el);
+</code><code id="L2222"><span class="ln">2222</span> o.paper.defs.appendChild(el);
+</code><code id="L2223"><span class="ln">2223</span> node.style.fill<span class="s"> = </span><i>"url(#"</i><span class="s"> + </span>el.id<span class="s"> + </span><i>")"</i>;
+</code><code id="L2224"><span class="ln">2224</span> $(node, {fill: <i>"url(#"</i><span class="s"> + </span>el.id<span class="s"> + </span><i>")"</i>});
+</code><code id="L2225"><span class="ln">2225</span> o.pattern<span class="s"> = </span>el;
+</code><code id="L2226"><span class="ln">2226</span> o.pattern && updatePosition(o);
+</code><code id="L2227"><span class="ln">2227</span> <b>break</b>;
+</code><code id="L2228"><span class="ln">2228</span> }
+</code><code id="L2229"><span class="ln">2229</span> <b>var</b> clr<span class="s"> = </span>R.getRGB(value);
+</code><code id="L2230"><span class="ln">2230</span> <b>if</b> (!clr.error) {
+</code><code id="L2231"><span class="ln">2231</span> <b>delete</b> params.gradient;
+</code><code id="L2232"><span class="ln">2232</span> <b>delete</b> attrs.gradient;
+</code><code id="L2233"><span class="ln">2233</span> !R.is(attrs.opacity, <i>"<b>undefined</b>"</i>) &&
+</code><code id="L2234"><span class="ln">2234</span> R.is(params.opacity, <i>"<b>undefined</b>"</i>) &&
+</code><code id="L2235"><span class="ln">2235</span> $(node, {opacity: attrs.opacity});
+</code><code id="L2236"><span class="ln">2236</span> !R.is(attrs[<i>"fill-opacity"</i>], <i>"<b>undefined</b>"</i>) &&
+</code><code id="L2237"><span class="ln">2237</span> R.is(params[<i>"fill-opacity"</i>], <i>"<b>undefined</b>"</i>) &&
+</code><code id="L2238"><span class="ln">2238</span> $(node, {<i>"fill-opacity"</i>: attrs[<i>"fill-opacity"</i>]});
+</code><code id="L2239"><span class="ln">2239</span> } <b>else</b> <b>if</b> ((o.type<span class="s"> == </span><i>"circle"</i><span class="s"> || </span>o.type<span class="s"> == </span><i>"ellipse"</i><span class="s"> || </span>Str(value).charAt() != <i>"r"</i>) && addGradientFill(o, value)) {
+</code><code id="L2240"><span class="ln">2240</span> <b>if</b> (<i>"opacity"</i> <b>in</b> attrs<span class="s"> || </span><i>"fill-opacity"</i> <b>in</b> attrs) {
+</code><code id="L2241"><span class="ln">2241</span> <b>var</b> gradient<span class="s"> = </span>g.doc.getElementById(node.getAttribute(fillString).replace(/^url\(#|\)$/g, E));
+</code><code id="L2242"><span class="ln">2242</span> <b>if</b> (gradient) {
+</code><code id="L2243"><span class="ln">2243</span> <b>var</b> stops<span class="s"> = </span>gradient.getElementsByTagName(<i>"stop"</i>);
+</code><code id="L2244"><span class="ln">2244</span> $(stops[stops.length<span class="s"> - </span><span class="d">1</span>], {<i>"stop-opacity"</i>: (<i>"opacity"</i> <b>in</b> attrs ? attrs.opacity : <span class="d">1</span>)<span class="s"> * </span>(<i>"fill-opacity"</i> <b>in</b> attrs ? attrs[<i>"fill-opacity"</i>] : <span class="d">1</span>)});
+</code><code id="L2245"><span class="ln">2245</span> }
+</code><code id="L2246"><span class="ln">2246</span> }
+</code><code id="L2247"><span class="ln">2247</span> attrs.gradient<span class="s"> = </span>value;
+</code><code id="L2248"><span class="ln">2248</span> attrs.fill<span class="s"> = </span><i>"none"</i>;
+</code><code id="L2249"><span class="ln">2249</span> <b>break</b>;
+</code><code id="L2250"><span class="ln">2250</span> }
+</code><code id="L2251"><span class="ln">2251</span> clr[has](<i>"opacity"</i>) && $(node, {<i>"fill-opacity"</i>: clr.opacity > <span class="d">1</span> ? clr.opacity<span class="s"> / </span><span class="d">100</span> : clr.opacity});
+</code><code id="L2252"><span class="ln">2252</span> <b>case</b> <i>"stroke"</i>:
+</code><code id="L2253"><span class="ln">2253</span> clr<span class="s"> = </span>R.getRGB(value);
+</code><code id="L2254"><span class="ln">2254</span> node[setAttribute](att, clr.hex);
+</code><code id="L2255"><span class="ln">2255</span> att<span class="s"> == </span><i>"stroke"</i> && clr[has](<i>"opacity"</i>) && $(node, {<i>"stroke-opacity"</i>: clr.opacity > <span class="d">1</span> ? clr.opacity<span class="s"> / </span><span class="d">100</span> : clr.opacity});
+</code><code id="L2256"><span class="ln">2256</span> <b>if</b> (att<span class="s"> == </span><i>"stroke"</i> && o._.arrows) {
+</code><code id="L2257"><span class="ln">2257</span> <i>"startString"</i> <b>in</b> o._.arrows && addArrow(o, o._.arrows.startString);
+</code><code id="L2258"><span class="ln">2258</span> <i>"endString"</i> <b>in</b> o._.arrows && addArrow(o, o._.arrows.endString, <span class="d">1</span>);
+</code><code id="L2259"><span class="ln">2259</span> }
+</code><code id="L2260"><span class="ln">2260</span> <b>break</b>;
+</code><code id="L2261"><span class="ln">2261</span> <b>case</b> <i>"gradient"</i>:
+</code><code id="L2262"><span class="ln">2262</span> (o.type<span class="s"> == </span><i>"circle"</i><span class="s"> || </span>o.type<span class="s"> == </span><i>"ellipse"</i><span class="s"> || </span>Str(value).charAt() != <i>"r"</i>) && addGradientFill(o, value);
+</code><code id="L2263"><span class="ln">2263</span> <b>break</b>;
+</code><code id="L2264"><span class="ln">2264</span> <b>case</b> <i>"opacity"</i>:
+</code><code id="L2265"><span class="ln">2265</span> <b>if</b> (attrs.gradient && !attrs[has](<i>"stroke-opacity"</i>)) {
+</code><code id="L2266"><span class="ln">2266</span> $(node, {<i>"stroke-opacity"</i>: value > <span class="d">1</span> ? value<span class="s"> / </span><span class="d">100</span> : value});
+</code><code id="L2267"><span class="ln">2267</span> }
+</code><code id="L2268"><span class="ln">2268</span> <span class="c">// fall</span>
+</code><code id="L2269"><span class="ln">2269</span> <b>case</b> <i>"fill-opacity"</i>:
+</code><code id="L2270"><span class="ln">2270</span> <b>if</b> (attrs.gradient) {
+</code><code id="L2271"><span class="ln">2271</span> gradient<span class="s"> = </span>g.doc.getElementById(node.getAttribute(fillString).replace(/^url\(#|\)$/g, E));
+</code><code id="L2272"><span class="ln">2272</span> <b>if</b> (gradient) {
+</code><code id="L2273"><span class="ln">2273</span> stops<span class="s"> = </span>gradient.getElementsByTagName(<i>"stop"</i>);
+</code><code id="L2274"><span class="ln">2274</span> $(stops[stops.length<span class="s"> - </span><span class="d">1</span>], {<i>"stop-opacity"</i>: value});
+</code><code id="L2275"><span class="ln">2275</span> }
+</code><code id="L2276"><span class="ln">2276</span> <b>break</b>;
+</code><code id="L2277"><span class="ln">2277</span> }
+</code><code id="L2278"><span class="ln">2278</span> <b>default</b>:
+</code><code id="L2279"><span class="ln">2279</span> att<span class="s"> == </span><i>"font-size"</i> && (value<span class="s"> = </span>toInt(value, <span class="d">10</span>)<span class="s"> + </span><i>"px"</i>);
+</code><code id="L2280"><span class="ln">2280</span> <b>var</b> cssrule<span class="s"> = </span>att.replace(/(\-.)/g, <b>function</b> (w) {
+</code><code id="L2281"><span class="ln">2281</span> <b>return</b> upperCase.call(w.substring(<span class="d">1</span>));
+</code><code id="L2282"><span class="ln">2282</span> });
+</code><code id="L2283"><span class="ln">2283</span> node.style[cssrule]<span class="s"> = </span>value;
+</code><code id="L2284"><span class="ln">2284</span> o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2285"><span class="ln">2285</span> node[setAttribute](att, value);
+</code><code id="L2286"><span class="ln">2286</span> <b>break</b>;
+</code><code id="L2287"><span class="ln">2287</span> }
+</code><code id="L2288"><span class="ln">2288</span> }
+</code><code id="L2289"><span class="ln">2289</span> }
+</code><code id="L2290"><span class="ln">2290</span>
+</code><code id="L2291"><span class="ln">2291</span> tuneText(o, params);
+</code><code id="L2292"><span class="ln">2292</span> },
+</code><code id="L2293"><span class="ln">2293</span> leading<span class="s"> = </span><span class="d">1.2</span>,
+</code><code id="L2294"><span class="ln">2294</span> tuneText<span class="s"> = </span><b>function</b> (el, params) {
+</code><code id="L2295"><span class="ln">2295</span> <b>if</b> (el.type != <i>"text"</i><span class="s"> || </span>!(params[has](<i>"text"</i>)<span class="s"> || </span>params[has](<i>"font"</i>)<span class="s"> || </span>params[has](<i>"font-size"</i>)<span class="s"> || </span>params[has](<i>"x"</i>)<span class="s"> || </span>params[has](<i>"y"</i>))) {
+</code><code id="L2296"><span class="ln">2296</span> <b>return</b>;
+</code><code id="L2297"><span class="ln">2297</span> }
+</code><code id="L2298"><span class="ln">2298</span> <b>var</b> a<span class="s"> = </span>el.attrs,
+</code><code id="L2299"><span class="ln">2299</span> node<span class="s"> = </span>el.node,
+</code><code id="L2300"><span class="ln">2300</span> fontSize<span class="s"> = </span>node.firstChild ? toInt(g.doc.defaultView.getComputedStyle(node.firstChild, E).getPropertyValue(<i>"font-size"</i>), <span class="d">10</span>) : <span class="d">10</span>;
+</code><code id="L2301"><span class="ln">2301</span>
+</code><code id="L2302"><span class="ln">2302</span> <b>if</b> (params[has](<i>"text"</i>)) {
+</code><code id="L2303"><span class="ln">2303</span> a.text<span class="s"> = </span>params.text;
+</code><code id="L2304"><span class="ln">2304</span> <b>while</b> (node.firstChild) {
+</code><code id="L2305"><span class="ln">2305</span> node.removeChild(node.firstChild);
+</code><code id="L2306"><span class="ln">2306</span> }
+</code><code id="L2307"><span class="ln">2307</span> <b>var</b> texts<span class="s"> = </span>Str(params.text).split(<i>"\n"</i>),
+</code><code id="L2308"><span class="ln">2308</span> tspans<span class="s"> = </span>[],
+</code><code id="L2309"><span class="ln">2309</span> tspan;
+</code><code id="L2310"><span class="ln">2310</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>texts.length; i < ii; i++) <b>if</b> (texts[i]) {
+</code><code id="L2311"><span class="ln">2311</span> tspan<span class="s"> = </span>$(<i>"tspan"</i>);
+</code><code id="L2312"><span class="ln">2312</span> i && $(tspan, {dy: fontSize<span class="s"> * </span>leading, x: a.x});
+</code><code id="L2313"><span class="ln">2313</span> tspan.appendChild(g.doc.createTextNode(texts[i]));
+</code><code id="L2314"><span class="ln">2314</span> node.appendChild(tspan);
+</code><code id="L2315"><span class="ln">2315</span> tspans[i]<span class="s"> = </span>tspan;
+</code><code id="L2316"><span class="ln">2316</span> }
+</code><code id="L2317"><span class="ln">2317</span> } <b>else</b> {
+</code><code id="L2318"><span class="ln">2318</span> tspans<span class="s"> = </span>node.getElementsByTagName(<i>"tspan"</i>);
+</code><code id="L2319"><span class="ln">2319</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>tspans.length; i < ii; i++) {
+</code><code id="L2320"><span class="ln">2320</span> i && $(tspans[i], {dy: fontSize<span class="s"> * </span>leading, x: a.x});
+</code><code id="L2321"><span class="ln">2321</span> }
+</code><code id="L2322"><span class="ln">2322</span> }
+</code><code id="L2323"><span class="ln">2323</span> $(node, {y: a.y});
+</code><code id="L2324"><span class="ln">2324</span> el._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2325"><span class="ln">2325</span> <b>var</b> bb<span class="s"> = </span>el._getBBox(),
+</code><code id="L2326"><span class="ln">2326</span> dif<span class="s"> = </span>a.y<span class="s"> - </span>(bb.y<span class="s"> + </span>bb.height<span class="s"> / </span><span class="d">2</span>);
+</code><code id="L2327"><span class="ln">2327</span> dif && R.is(dif, <i>"finite"</i>) && $(tspans[<span class="d">0</span>], {dy: a.y<span class="s"> + </span>dif});
+</code><code id="L2328"><span class="ln">2328</span> },
+</code><code id="L2329"><span class="ln">2329</span> Element<span class="s"> = </span><b>function</b> (node, svg) {
+</code><code id="L2330"><span class="ln">2330</span> <b>var</b> X<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L2331"><span class="ln">2331</span> Y<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L2332"><span class="ln">2332</span> <b>this</b>[<span class="d">0</span>]<span class="s"> = </span><b>this</b>.node<span class="s"> = </span>node;
+</code><code id="L2333"><span class="ln">2333</span> node.raphael<span class="s"> = </span><b>true</b>;
+</code><code id="L2334"><span class="ln">2334</span> <b>this</b>.id<span class="s"> = </span>R._oid++;
+</code><code id="L2335"><span class="ln">2335</span> node.raphaelid<span class="s"> = </span><b>this</b>.id;
+</code><code id="L2336"><span class="ln">2336</span> <b>this</b>.matrix<span class="s"> = </span><b>new</b> Matrix;
+</code><code id="L2337"><span class="ln">2337</span> <b>this</b>.realPath<span class="s"> = </span><b>null</b>;
+</code><code id="L2338"><span class="ln">2338</span> <b>this</b>.paper<span class="s"> = </span>svg;
+</code><code id="L2339"><span class="ln">2339</span> <b>this</b>.attrs<span class="s"> = </span><b>this</b>.attrs<span class="s"> || </span>{};
+</code><code id="L2340"><span class="ln">2340</span> <b>this</b>._<span class="s"> = </span>{
+</code><code id="L2341"><span class="ln">2341</span> transform: [],
+</code><code id="L2342"><span class="ln">2342</span> sx: <span class="d">1</span>,
+</code><code id="L2343"><span class="ln">2343</span> sy: <span class="d">1</span>,
+</code><code id="L2344"><span class="ln">2344</span> deg: <span class="d">0</span>,
+</code><code id="L2345"><span class="ln">2345</span> dx: <span class="d">0</span>,
+</code><code id="L2346"><span class="ln">2346</span> dy: <span class="d">0</span>,
+</code><code id="L2347"><span class="ln">2347</span> dirty: <span class="d">1</span>
+</code><code id="L2348"><span class="ln">2348</span> };
+</code><code id="L2349"><span class="ln">2349</span> !svg.bottom && (svg.bottom<span class="s"> = </span><b>this</b>);
+</code><code id="L2350"><span class="ln">2350</span> <b>this</b>.prev<span class="s"> = </span>svg.top;
+</code><code id="L2351"><span class="ln">2351</span> svg.top && (svg.top.next<span class="s"> = </span><b>this</b>);
+</code><code id="L2352"><span class="ln">2352</span> svg.top<span class="s"> = </span><b>this</b>;
+</code><code id="L2353"><span class="ln">2353</span> <b>this</b>.next<span class="s"> = </span><b>null</b>;
+</code><code id="L2354"><span class="ln">2354</span> },
+</code><code id="L2355"><span class="ln">2355</span> elproto<span class="s"> = </span>Element.prototype;
+</code><code id="L2356"><span class="ln">2356</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L2357"><span class="ln">2357</span><span class="c"> <span class="s"> * </span>Element.rotate
+</span></code><code id="L2358"><span class="ln">2358</span><span class="c"> [ method ]
+</span></code><code id="L2359"><span class="ln">2359</span><span class="c"> **
+</span></code><code id="L2360"><span class="ln">2360</span><span class="c"> <span class="s"> * </span>Adds rotation by given angle around given point to the list of
+</span></code><code id="L2361"><span class="ln">2361</span><span class="c"> <span class="s"> * </span>transformations of the element.
+</span></code><code id="L2362"><span class="ln">2362</span><span class="c"> > Parameters
+</span></code><code id="L2363"><span class="ln">2363</span><span class="c"> <span class="s"> - </span>deg (number) angle <b>in</b> degrees
+</span></code><code id="L2364"><span class="ln">2364</span><span class="c"> <span class="s"> - </span>cx (number) #optional x coordinate of the centre of rotation
+</span></code><code id="L2365"><span class="ln">2365</span><span class="c"> <span class="s"> - </span>cy (number) #optional y coordinate of the centre of rotation
+</span></code><code id="L2366"><span class="ln">2366</span><span class="c"> <span class="s"> * </span>If cx & cy aren’t specified centre of the shape is used as a point of rotation.
+</span></code><code id="L2367"><span class="ln">2367</span><span class="c"> <span class="s"> = </span>(object) @Element
+</span></code><code id="L2368"><span class="ln">2368</span><span class="c"> \*/</span>
+</code><code id="L2369"><span class="ln">2369</span> elproto.rotate<span class="s"> = </span><b>function</b> (deg, cx, cy) {
+</code><code id="L2370"><span class="ln">2370</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2371"><span class="ln">2371</span> <b>return</b> <b>this</b>;
+</code><code id="L2372"><span class="ln">2372</span> }
+</code><code id="L2373"><span class="ln">2373</span> deg<span class="s"> = </span>Str(deg).split(separator);
+</code><code id="L2374"><span class="ln">2374</span> <b>if</b> (deg.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L2375"><span class="ln">2375</span> cx<span class="s"> = </span>toFloat(deg[<span class="d">1</span>]);
+</code><code id="L2376"><span class="ln">2376</span> cy<span class="s"> = </span>toFloat(deg[<span class="d">2</span>]);
+</code><code id="L2377"><span class="ln">2377</span> }
+</code><code id="L2378"><span class="ln">2378</span> deg<span class="s"> = </span>toFloat(deg[<span class="d">0</span>]);
+</code><code id="L2379"><span class="ln">2379</span> (cy<span class="s"> == </span><b>null</b>) && (cx<span class="s"> = </span>cy);
+</code><code id="L2380"><span class="ln">2380</span> <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
+</code><code id="L2381"><span class="ln">2381</span> <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
+</code><code id="L2382"><span class="ln">2382</span> cx<span class="s"> = </span>bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L2383"><span class="ln">2383</span> cy<span class="s"> = </span>bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L2384"><span class="ln">2384</span> }
+</code><code id="L2385"><span class="ln">2385</span> <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"r"</i>, deg, cx, cy]]));
+</code><code id="L2386"><span class="ln">2386</span> <b>return</b> <b>this</b>;
+</code><code id="L2387"><span class="ln">2387</span> };
+</code><code id="L2388"><span class="ln">2388</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L2389"><span class="ln">2389</span><span class="c"> <span class="s"> * </span>Element.scale
+</span></code><code id="L2390"><span class="ln">2390</span><span class="c"> [ method ]
+</span></code><code id="L2391"><span class="ln">2391</span><span class="c"> **
+</span></code><code id="L2392"><span class="ln">2392</span><span class="c"> <span class="s"> * </span>Adds scale by given amount relative to given point to the list of
+</span></code><code id="L2393"><span class="ln">2393</span><span class="c"> <span class="s"> * </span>transformations of the element.
+</span></code><code id="L2394"><span class="ln">2394</span><span class="c"> > Parameters
+</span></code><code id="L2395"><span class="ln">2395</span><span class="c"> <span class="s"> - </span>sx (number) horisontal scale amount
+</span></code><code id="L2396"><span class="ln">2396</span><span class="c"> <span class="s"> - </span>sy (number) vertical scale amount
+</span></code><code id="L2397"><span class="ln">2397</span><span class="c"> <span class="s"> - </span>cx (number) #optional x coordinate of the centre of scale
+</span></code><code id="L2398"><span class="ln">2398</span><span class="c"> <span class="s"> - </span>cy (number) #optional y coordinate of the centre of scale
+</span></code><code id="L2399"><span class="ln">2399</span><span class="c"> <span class="s"> * </span>If cx & cy aren’t specified centre of the shape is used instead.
+</span></code><code id="L2400"><span class="ln">2400</span><span class="c"> <span class="s"> = </span>(object) @Element
+</span></code><code id="L2401"><span class="ln">2401</span><span class="c"> \*/</span>
+</code><code id="L2402"><span class="ln">2402</span> elproto.scale<span class="s"> = </span><b>function</b> (sx, sy, cx, cy) {
+</code><code id="L2403"><span class="ln">2403</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2404"><span class="ln">2404</span> <b>return</b> <b>this</b>;
+</code><code id="L2405"><span class="ln">2405</span> }
+</code><code id="L2406"><span class="ln">2406</span> sx<span class="s"> = </span>Str(sx).split(separator);
+</code><code id="L2407"><span class="ln">2407</span> <b>if</b> (sx.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L2408"><span class="ln">2408</span> sy<span class="s"> = </span>toFloat(sx[<span class="d">1</span>]);
+</code><code id="L2409"><span class="ln">2409</span> cx<span class="s"> = </span>toFloat(sx[<span class="d">2</span>]);
+</code><code id="L2410"><span class="ln">2410</span> cy<span class="s"> = </span>toFloat(sx[<span class="d">3</span>]);
+</code><code id="L2411"><span class="ln">2411</span> }
+</code><code id="L2412"><span class="ln">2412</span> sx<span class="s"> = </span>toFloat(sx[<span class="d">0</span>]);
+</code><code id="L2413"><span class="ln">2413</span> (sy<span class="s"> == </span><b>null</b>) && (sy<span class="s"> = </span>sx);
+</code><code id="L2414"><span class="ln">2414</span> (cy<span class="s"> == </span><b>null</b>) && (cx<span class="s"> = </span>cy);
+</code><code id="L2415"><span class="ln">2415</span> <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
+</code><code id="L2416"><span class="ln">2416</span> <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
+</code><code id="L2417"><span class="ln">2417</span> }
+</code><code id="L2418"><span class="ln">2418</span> cx<span class="s"> = </span>cx<span class="s"> == </span><b>null</b> ? bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span> : cx;
+</code><code id="L2419"><span class="ln">2419</span> cy<span class="s"> = </span>cy<span class="s"> == </span><b>null</b> ? bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span> : cy;
+</code><code id="L2420"><span class="ln">2420</span> <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"s"</i>, sx, sy, cx, cy]]));
+</code><code id="L2421"><span class="ln">2421</span> <b>return</b> <b>this</b>;
+</code><code id="L2422"><span class="ln">2422</span> };
+</code><code id="L2423"><span class="ln">2423</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L2424"><span class="ln">2424</span><span class="c"> <span class="s"> * </span>Element.translate
+</span></code><code id="L2425"><span class="ln">2425</span><span class="c"> [ method ]
+</span></code><code id="L2426"><span class="ln">2426</span><span class="c"> **
+</span></code><code id="L2427"><span class="ln">2427</span><span class="c"> <span class="s"> * </span>Adds translation by given amount to the list of transformations of the element.
+</span></code><code id="L2428"><span class="ln">2428</span><span class="c"> > Parameters
+</span></code><code id="L2429"><span class="ln">2429</span><span class="c"> <span class="s"> - </span>dx (number) horisontal shift
+</span></code><code id="L2430"><span class="ln">2430</span><span class="c"> <span class="s"> - </span>dy (number) vertical shift
+</span></code><code id="L2431"><span class="ln">2431</span><span class="c"> <span class="s"> = </span>(object) @Element
+</span></code><code id="L2432"><span class="ln">2432</span><span class="c"> \*/</span>
+</code><code id="L2433"><span class="ln">2433</span> elproto.translate<span class="s"> = </span><b>function</b> (dx, dy) {
+</code><code id="L2434"><span class="ln">2434</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2435"><span class="ln">2435</span> <b>return</b> <b>this</b>;
+</code><code id="L2436"><span class="ln">2436</span> }
+</code><code id="L2437"><span class="ln">2437</span> dx<span class="s"> = </span>Str(dx).split(separator);
+</code><code id="L2438"><span class="ln">2438</span> <b>if</b> (dx.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L2439"><span class="ln">2439</span> dy<span class="s"> = </span>toFloat(dx[<span class="d">1</span>]);
+</code><code id="L2440"><span class="ln">2440</span> }
+</code><code id="L2441"><span class="ln">2441</span> dx<span class="s"> = </span>toFloat(dx[<span class="d">0</span>])<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2442"><span class="ln">2442</span> dy<span class="s"> = </span>+dy<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2443"><span class="ln">2443</span> <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"t"</i>, dx, dy]]));
+</code><code id="L2444"><span class="ln">2444</span> <b>return</b> <b>this</b>;
+</code><code id="L2445"><span class="ln">2445</span> };
+</code><code id="L2446"><span class="ln">2446</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L2447"><span class="ln">2447</span><span class="c"> <span class="s"> * </span>Element.transform
+</span></code><code id="L2448"><span class="ln">2448</span><span class="c"> [ method ]
+</span></code><code id="L2449"><span class="ln">2449</span><span class="c"> **
+</span></code><code id="L2450"><span class="ln">2450</span><span class="c"> <span class="s"> * </span>Adds transformation to the element which is separate to other attributes,
+</span></code><code id="L2451"><span class="ln">2451</span><span class="c"> <span class="s"> * </span>i.e. translation doesn’t change `x` or `y` of the rectange. The format
+</span></code><code id="L2452"><span class="ln">2452</span><span class="c"> <span class="s"> * </span>of transformation string is similar to the path string syntax:
+</span></code><code id="L2453"><span class="ln">2453</span><span class="c"> | <i>"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</i>
+</span></code><code id="L2454"><span class="ln">2454</span><span class="c"> <span class="s"> * </span>Each letter is a command. There are four commands: `t` is <b>for</b> translate, `r` is <b>for</b> rotate, `s` is <b>for</b>
+</span></code><code id="L2455"><span class="ln">2455</span><span class="c"> <span class="s"> * </span>scale and `m` is <b>for</b> matrix.
+</span></code><code id="L2456"><span class="ln">2456</span><span class="c"> *
+</span></code><code id="L2457"><span class="ln">2457</span><span class="c"> <span class="s"> * </span>So, example line could be read like “translate by <span class="d">100</span>, <span class="d">100</span>, rotate <span class="d">30</span>° around <span class="d">100</span>, <span class="d">100</span>, scale twice around <span class="d">100</span>, <span class="d">100</span>
+</span></code><code id="L2458"><span class="ln">2458</span><span class="c"> <span class="s"> * </span>rotate <span class="d">45</span>° around centre and scale <span class="d">1.5</span> times relative to centre”. As you see rotate and scale commands has origin
+</span></code><code id="L2459"><span class="ln">2459</span><span class="c"> <span class="s"> * </span>coordinates as a optional parameters.
+</span></code><code id="L2460"><span class="ln">2460</span><span class="c"> <span class="s"> * </span>Matrix accepts six parameters.
+</span></code><code id="L2461"><span class="ln">2461</span><span class="c"> > Parameters
+</span></code><code id="L2462"><span class="ln">2462</span><span class="c"> <span class="s"> - </span>tstr (string) #optional transformation string
+</span></code><code id="L2463"><span class="ln">2463</span><span class="c"> <span class="s"> * </span>If tstr isn’t specified
+</span></code><code id="L2464"><span class="ln">2464</span><span class="c"> <span class="s"> = </span>(string) current transformation string
+</span></code><code id="L2465"><span class="ln">2465</span><span class="c"> <span class="s"> * </span><b>else</b>
+</span></code><code id="L2466"><span class="ln">2466</span><span class="c"> <span class="s"> = </span>(object) @Element
+</span></code><code id="L2467"><span class="ln">2467</span><span class="c"> \*/</span>
+</code><code id="L2468"><span class="ln">2468</span> elproto.transform<span class="s"> = </span><b>function</b> (tstr) {
+</code><code id="L2469"><span class="ln">2469</span> <b>var</b> _<span class="s"> = </span><b>this</b>._;
+</code><code id="L2470"><span class="ln">2470</span> <b>if</b> (!tstr) {
+</code><code id="L2471"><span class="ln">2471</span> <b>return</b> _.transform;
+</code><code id="L2472"><span class="ln">2472</span> }
+</code><code id="L2473"><span class="ln">2473</span> extractTransform(<b>this</b>, tstr);
+</code><code id="L2474"><span class="ln">2474</span>
+</code><code id="L2475"><span class="ln">2475</span> <b>this</b>.clip && $(<b>this</b>.clip, {transform: <b>this</b>.matrix.invert()});
+</code><code id="L2476"><span class="ln">2476</span> <span class="c">// <b>this</b>.gradient && $(<b>this</b>.gradient, {gradientTransform: <b>this</b>.matrix.invert()});</span>
+</code><code id="L2477"><span class="ln">2477</span> <b>this</b>.pattern && updatePosition(<b>this</b>);
+</code><code id="L2478"><span class="ln">2478</span> <b>this</b>.node && $(<b>this</b>.node, {transform: <b>this</b>.matrix});
+</code><code id="L2479"><span class="ln">2479</span>
+</code><code id="L2480"><span class="ln">2480</span> <b>if</b> (_.sx != <span class="d">1</span><span class="s"> || </span>_.sy != <span class="d">1</span>) {
+</code><code id="L2481"><span class="ln">2481</span> <b>var</b> sw<span class="s"> = </span><b>this</b>.attrs[has](<i>"stroke-width"</i>) ? <b>this</b>.attrs[<i>"stroke-width"</i>] : <span class="d">1</span>;
+</code><code id="L2482"><span class="ln">2482</span> <b>this</b>.attr({<i>"stroke-width"</i>: sw});
+</code><code id="L2483"><span class="ln">2483</span> }
+</code><code id="L2484"><span class="ln">2484</span>
+</code><code id="L2485"><span class="ln">2485</span> <b>return</b> <b>this</b>;
+</code><code id="L2486"><span class="ln">2486</span> };
+</code><code id="L2487"><span class="ln">2487</span> elproto.hide<span class="s"> = </span><b>function</b> () {
+</code><code id="L2488"><span class="ln">2488</span> !<b>this</b>.removed && (<b>this</b>.node.style.display<span class="s"> = </span><i>"none"</i>);
+</code><code id="L2489"><span class="ln">2489</span> <b>return</b> <b>this</b>;
+</code><code id="L2490"><span class="ln">2490</span> };
+</code><code id="L2491"><span class="ln">2491</span> elproto.show<span class="s"> = </span><b>function</b> () {
+</code><code id="L2492"><span class="ln">2492</span> !<b>this</b>.removed && (<b>this</b>.node.style.display<span class="s"> = </span><i>""</i>);
+</code><code id="L2493"><span class="ln">2493</span> <b>return</b> <b>this</b>;
+</code><code id="L2494"><span class="ln">2494</span> };
+</code><code id="L2495"><span class="ln">2495</span> elproto.remove<span class="s"> = </span><b>function</b> () {
+</code><code id="L2496"><span class="ln">2496</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2497"><span class="ln">2497</span> <b>return</b>;
+</code><code id="L2498"><span class="ln">2498</span> }
+</code><code id="L2499"><span class="ln">2499</span> eve.unbind(<i>"*.*."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L2500"><span class="ln">2500</span> tear(<b>this</b>, <b>this</b>.paper);
+</code><code id="L2501"><span class="ln">2501</span> <b>this</b>.node.parentNode.removeChild(<b>this</b>.node);
+</code><code id="L2502"><span class="ln">2502</span> <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
+</code><code id="L2503"><span class="ln">2503</span> <b>delete</b> <b>this</b>[i];
+</code><code id="L2504"><span class="ln">2504</span> }
+</code><code id="L2505"><span class="ln">2505</span> <b>this</b>.removed<span class="s"> = </span><b>true</b>;
+</code><code id="L2506"><span class="ln">2506</span> };
+</code><code id="L2507"><span class="ln">2507</span> elproto._getBBox<span class="s"> = </span><b>function</b> () {
+</code><code id="L2508"><span class="ln">2508</span> <b>if</b> (<b>this</b>.node.style.display<span class="s"> == </span><i>"none"</i>) {
+</code><code id="L2509"><span class="ln">2509</span> <b>this</b>.show();
+</code><code id="L2510"><span class="ln">2510</span> <b>var</b> hide<span class="s"> = </span><b>true</b>;
+</code><code id="L2511"><span class="ln">2511</span> }
+</code><code id="L2512"><span class="ln">2512</span> <b>var</b> bbox<span class="s"> = </span>{};
+</code><code id="L2513"><span class="ln">2513</span> <b>try</b> {
+</code><code id="L2514"><span class="ln">2514</span> bbox<span class="s"> = </span><b>this</b>.node.getBBox();
+</code><code id="L2515"><span class="ln">2515</span> } <b>catch</b>(e) {
+</code><code id="L2516"><span class="ln">2516</span> <span class="c">// Firefox <span class="d">3.0</span>.x plays badly here</span>
+</code><code id="L2517"><span class="ln">2517</span> } <b>finally</b> {
+</code><code id="L2518"><span class="ln">2518</span> bbox<span class="s"> = </span>bbox<span class="s"> || </span>{};
+</code><code id="L2519"><span class="ln">2519</span> }
+</code><code id="L2520"><span class="ln">2520</span> hide && <b>this</b>.hide();
+</code><code id="L2521"><span class="ln">2521</span> <b>return</b> bbox;
+</code><code id="L2522"><span class="ln">2522</span> };
+</code><code id="L2523"><span class="ln">2523</span> elproto.attr<span class="s"> = </span><b>function</b> (name, value) {
+</code><code id="L2524"><span class="ln">2524</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2525"><span class="ln">2525</span> <b>return</b> <b>this</b>;
+</code><code id="L2526"><span class="ln">2526</span> }
+</code><code id="L2527"><span class="ln">2527</span> <b>if</b> (name<span class="s"> == </span><b>null</b>) {
+</code><code id="L2528"><span class="ln">2528</span> <b>var</b> res<span class="s"> = </span>{};
+</code><code id="L2529"><span class="ln">2529</span> <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>.attrs) <b>if</b> (<b>this</b>.attrs[has](i)) {
+</code><code id="L2530"><span class="ln">2530</span> res[i]<span class="s"> = </span><b>this</b>.attrs[i];
+</code><code id="L2531"><span class="ln">2531</span> }
+</code><code id="L2532"><span class="ln">2532</span> res.gradient && res.fill<span class="s"> == </span><i>"none"</i> && (res.fill<span class="s"> = </span>res.gradient) && <b>delete</b> res.gradient;
+</code><code id="L2533"><span class="ln">2533</span> res.transform<span class="s"> = </span><b>this</b>._.transform;
+</code><code id="L2534"><span class="ln">2534</span> <b>return</b> res;
+</code><code id="L2535"><span class="ln">2535</span> }
+</code><code id="L2536"><span class="ln">2536</span> <b>if</b> (value<span class="s"> == </span><b>null</b> && R.is(name, string)) {
+</code><code id="L2537"><span class="ln">2537</span> <b>if</b> (name<span class="s"> == </span>fillString && <b>this</b>.attrs.fill<span class="s"> == </span><i>"none"</i> && <b>this</b>.attrs.gradient) {
+</code><code id="L2538"><span class="ln">2538</span> <b>return</b> <b>this</b>.attrs.gradient;
+</code><code id="L2539"><span class="ln">2539</span> }
+</code><code id="L2540"><span class="ln">2540</span> <b>if</b> (name<span class="s"> == </span><i>"transform"</i>) {
+</code><code id="L2541"><span class="ln">2541</span> <b>return</b> <b>this</b>._.transform;
+</code><code id="L2542"><span class="ln">2542</span> }
+</code><code id="L2543"><span class="ln">2543</span> <b>if</b> (name <b>in</b> <b>this</b>.attrs) {
+</code><code id="L2544"><span class="ln">2544</span> <b>return</b> <b>this</b>.attrs[name];
+</code><code id="L2545"><span class="ln">2545</span> } <b>else</b> <b>if</b> (R.is(<b>this</b>.paper.customAttributes[name], <i>"<b>function</b>"</i>)) {
+</code><code id="L2546"><span class="ln">2546</span> <b>return</b> <b>this</b>.paper.customAttributes[name].def;
+</code><code id="L2547"><span class="ln">2547</span> } <b>else</b> {
+</code><code id="L2548"><span class="ln">2548</span> <b>return</b> availableAttrs[name];
+</code><code id="L2549"><span class="ln">2549</span> }
+</code><code id="L2550"><span class="ln">2550</span> }
+</code><code id="L2551"><span class="ln">2551</span> <b>if</b> (value<span class="s"> == </span><b>null</b> && R.is(name, array)) {
+</code><code id="L2552"><span class="ln">2552</span> <b>var</b> values<span class="s"> = </span>{};
+</code><code id="L2553"><span class="ln">2553</span> <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>name.length; j < jj; j++) {
+</code><code id="L2554"><span class="ln">2554</span> values[name[j]]<span class="s"> = </span><b>this</b>.attr(name[j]);
+</code><code id="L2555"><span class="ln">2555</span> }
+</code><code id="L2556"><span class="ln">2556</span> <b>return</b> values;
+</code><code id="L2557"><span class="ln">2557</span> }
+</code><code id="L2558"><span class="ln">2558</span> <b>if</b> (value != <b>null</b>) {
+</code><code id="L2559"><span class="ln">2559</span> <b>var</b> params<span class="s"> = </span>{};
+</code><code id="L2560"><span class="ln">2560</span> params[name]<span class="s"> = </span>value;
+</code><code id="L2561"><span class="ln">2561</span> } <b>else</b> <b>if</b> (name != <b>null</b> && R.is(name, <i>"object"</i>)) {
+</code><code id="L2562"><span class="ln">2562</span> params<span class="s"> = </span>name;
+</code><code id="L2563"><span class="ln">2563</span> }
+</code><code id="L2564"><span class="ln">2564</span> <b>for</b> (<b>var</b> key <b>in</b> <b>this</b>.paper.customAttributes) <b>if</b> (<b>this</b>.paper.customAttributes[has](key) && params[has](key) && R.is(<b>this</b>.paper.customAttributes[key], <i>"<b>function</b>"</i>)) {
+</code><code id="L2565"><span class="ln">2565</span> <b>var</b> par<span class="s"> = </span><b>this</b>.paper.customAttributes[key].apply(<b>this</b>, [][concat](params[key]));
+</code><code id="L2566"><span class="ln">2566</span> <b>this</b>.attrs[key]<span class="s"> = </span>params[key];
+</code><code id="L2567"><span class="ln">2567</span> <b>for</b> (<b>var</b> subkey <b>in</b> par) <b>if</b> (par[has](subkey)) {
+</code><code id="L2568"><span class="ln">2568</span> params[subkey]<span class="s"> = </span>par[subkey];
+</code><code id="L2569"><span class="ln">2569</span> }
+</code><code id="L2570"><span class="ln">2570</span> }
+</code><code id="L2571"><span class="ln">2571</span> setFillAndStroke(<b>this</b>, params);
+</code><code id="L2572"><span class="ln">2572</span> <b>return</b> <b>this</b>;
+</code><code id="L2573"><span class="ln">2573</span> };
+</code><code id="L2574"><span class="ln">2574</span> elproto.toFront<span class="s"> = </span><b>function</b> () {
+</code><code id="L2575"><span class="ln">2575</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2576"><span class="ln">2576</span> <b>return</b> <b>this</b>;
+</code><code id="L2577"><span class="ln">2577</span> }
+</code><code id="L2578"><span class="ln">2578</span> <b>this</b>.node.parentNode.appendChild(<b>this</b>.node);
+</code><code id="L2579"><span class="ln">2579</span> <b>var</b> svg<span class="s"> = </span><b>this</b>.paper;
+</code><code id="L2580"><span class="ln">2580</span> svg.top != <b>this</b> && tofront(<b>this</b>, svg);
+</code><code id="L2581"><span class="ln">2581</span> <b>return</b> <b>this</b>;
+</code><code id="L2582"><span class="ln">2582</span> };
+</code><code id="L2583"><span class="ln">2583</span> elproto.toBack<span class="s"> = </span><b>function</b> () {
+</code><code id="L2584"><span class="ln">2584</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2585"><span class="ln">2585</span> <b>return</b> <b>this</b>;
+</code><code id="L2586"><span class="ln">2586</span> }
+</code><code id="L2587"><span class="ln">2587</span> <b>if</b> (<b>this</b>.node.parentNode.firstChild != <b>this</b>.node) {
+</code><code id="L2588"><span class="ln">2588</span> <b>this</b>.node.parentNode.insertBefore(<b>this</b>.node, <b>this</b>.node.parentNode.firstChild);
+</code><code id="L2589"><span class="ln">2589</span> toback(<b>this</b>, <b>this</b>.paper);
+</code><code id="L2590"><span class="ln">2590</span> <b>var</b> svg<span class="s"> = </span><b>this</b>.paper;
+</code><code id="L2591"><span class="ln">2591</span> }
+</code><code id="L2592"><span class="ln">2592</span> <b>return</b> <b>this</b>;
+</code><code id="L2593"><span class="ln">2593</span> };
+</code><code id="L2594"><span class="ln">2594</span> elproto.insertAfter<span class="s"> = </span><b>function</b> (element) {
+</code><code id="L2595"><span class="ln">2595</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2596"><span class="ln">2596</span> <b>return</b> <b>this</b>;
+</code><code id="L2597"><span class="ln">2597</span> }
+</code><code id="L2598"><span class="ln">2598</span> <b>var</b> node<span class="s"> = </span>element.node<span class="s"> || </span>element[element.length<span class="s"> - </span><span class="d">1</span>].node;
+</code><code id="L2599"><span class="ln">2599</span> <b>if</b> (node.nextSibling) {
+</code><code id="L2600"><span class="ln">2600</span> node.parentNode.insertBefore(<b>this</b>.node, node.nextSibling);
+</code><code id="L2601"><span class="ln">2601</span> } <b>else</b> {
+</code><code id="L2602"><span class="ln">2602</span> node.parentNode.appendChild(<b>this</b>.node);
+</code><code id="L2603"><span class="ln">2603</span> }
+</code><code id="L2604"><span class="ln">2604</span> insertafter(<b>this</b>, element, <b>this</b>.paper);
+</code><code id="L2605"><span class="ln">2605</span> <b>return</b> <b>this</b>;
+</code><code id="L2606"><span class="ln">2606</span> };
+</code><code id="L2607"><span class="ln">2607</span> elproto.insertBefore<span class="s"> = </span><b>function</b> (element) {
+</code><code id="L2608"><span class="ln">2608</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2609"><span class="ln">2609</span> <b>return</b> <b>this</b>;
+</code><code id="L2610"><span class="ln">2610</span> }
+</code><code id="L2611"><span class="ln">2611</span> <b>var</b> node<span class="s"> = </span>element.node<span class="s"> || </span>element[<span class="d">0</span>].node;
+</code><code id="L2612"><span class="ln">2612</span> node.parentNode.insertBefore(<b>this</b>.node, node);
+</code><code id="L2613"><span class="ln">2613</span> insertbefore(<b>this</b>, element, <b>this</b>.paper);
+</code><code id="L2614"><span class="ln">2614</span> <b>return</b> <b>this</b>;
+</code><code id="L2615"><span class="ln">2615</span> };
+</code><code id="L2616"><span class="ln">2616</span> elproto.blur<span class="s"> = </span><b>function</b> (size) {
+</code><code id="L2617"><span class="ln">2617</span> <span class="c">// Experimental. No Safari support. Use it on your own risk.</span>
+</code><code id="L2618"><span class="ln">2618</span> <b>var</b> t<span class="s"> = </span><b>this</b>;
+</code><code id="L2619"><span class="ln">2619</span> <b>if</b> (+size !== <span class="d">0</span>) {
+</code><code id="L2620"><span class="ln">2620</span> <b>var</b> fltr<span class="s"> = </span>$(<i>"filter"</i>),
+</code><code id="L2621"><span class="ln">2621</span> blur<span class="s"> = </span>$(<i>"feGaussianBlur"</i>);
+</code><code id="L2622"><span class="ln">2622</span> t.attrs.blur<span class="s"> = </span>size;
+</code><code id="L2623"><span class="ln">2623</span> fltr.id<span class="s"> = </span>createUUID();
+</code><code id="L2624"><span class="ln">2624</span> $(blur, {stdDeviation: +size<span class="s"> || </span><span class="d">1.5</span>});
+</code><code id="L2625"><span class="ln">2625</span> fltr.appendChild(blur);
+</code><code id="L2626"><span class="ln">2626</span> t.paper.defs.appendChild(fltr);
+</code><code id="L2627"><span class="ln">2627</span> t._blur<span class="s"> = </span>fltr;
+</code><code id="L2628"><span class="ln">2628</span> $(t.node, {filter: <i>"url(#"</i><span class="s"> + </span>fltr.id<span class="s"> + </span><i>")"</i>});
+</code><code id="L2629"><span class="ln">2629</span> } <b>else</b> {
+</code><code id="L2630"><span class="ln">2630</span> <b>if</b> (t._blur) {
+</code><code id="L2631"><span class="ln">2631</span> t._blur.parentNode.removeChild(t._blur);
+</code><code id="L2632"><span class="ln">2632</span> <b>delete</b> t._blur;
+</code><code id="L2633"><span class="ln">2633</span> <b>delete</b> t.attrs.blur;
+</code><code id="L2634"><span class="ln">2634</span> }
+</code><code id="L2635"><span class="ln">2635</span> t.node.removeAttribute(<i>"filter"</i>);
+</code><code id="L2636"><span class="ln">2636</span> }
+</code><code id="L2637"><span class="ln">2637</span> };
+</code><code id="L2638"><span class="ln">2638</span> <b>var</b> theCircle<span class="s"> = </span><b>function</b> (svg, x, y, r) {
+</code><code id="L2639"><span class="ln">2639</span> <b>var</b> el<span class="s"> = </span>$(<i>"circle"</i>);
+</code><code id="L2640"><span class="ln">2640</span> svg.canvas && svg.canvas.appendChild(el);
+</code><code id="L2641"><span class="ln">2641</span> <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2642"><span class="ln">2642</span> res.attrs<span class="s"> = </span>{cx: x, cy: y, r: r, fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L2643"><span class="ln">2643</span> res.type<span class="s"> = </span><i>"circle"</i>;
+</code><code id="L2644"><span class="ln">2644</span> $(el, res.attrs);
+</code><code id="L2645"><span class="ln">2645</span> <b>return</b> res;
+</code><code id="L2646"><span class="ln">2646</span> },
+</code><code id="L2647"><span class="ln">2647</span> theRect<span class="s"> = </span><b>function</b> (svg, x, y, w, h, r) {
+</code><code id="L2648"><span class="ln">2648</span> <b>var</b> el<span class="s"> = </span>$(<i>"rect"</i>);
+</code><code id="L2649"><span class="ln">2649</span> svg.canvas && svg.canvas.appendChild(el);
+</code><code id="L2650"><span class="ln">2650</span> <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2651"><span class="ln">2651</span> res.attrs<span class="s"> = </span>{x: x, y: y, width: w, height: h, r: r<span class="s"> || </span><span class="d">0</span>, rx: r<span class="s"> || </span><span class="d">0</span>, ry: r<span class="s"> || </span><span class="d">0</span>, fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L2652"><span class="ln">2652</span> res.type<span class="s"> = </span><i>"rect"</i>;
+</code><code id="L2653"><span class="ln">2653</span> $(el, res.attrs);
+</code><code id="L2654"><span class="ln">2654</span> <b>return</b> res;
+</code><code id="L2655"><span class="ln">2655</span> },
+</code><code id="L2656"><span class="ln">2656</span> theEllipse<span class="s"> = </span><b>function</b> (svg, x, y, rx, ry) {
+</code><code id="L2657"><span class="ln">2657</span> <b>var</b> el<span class="s"> = </span>$(<i>"ellipse"</i>);
+</code><code id="L2658"><span class="ln">2658</span> svg.canvas && svg.canvas.appendChild(el);
+</code><code id="L2659"><span class="ln">2659</span> <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2660"><span class="ln">2660</span> res.attrs<span class="s"> = </span>{cx: x, cy: y, rx: rx, ry: ry, fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L2661"><span class="ln">2661</span> res.type<span class="s"> = </span><i>"ellipse"</i>;
+</code><code id="L2662"><span class="ln">2662</span> $(el, res.attrs);
+</code><code id="L2663"><span class="ln">2663</span> <b>return</b> res;
+</code><code id="L2664"><span class="ln">2664</span> },
+</code><code id="L2665"><span class="ln">2665</span> theImage<span class="s"> = </span><b>function</b> (svg, src, x, y, w, h) {
+</code><code id="L2666"><span class="ln">2666</span> <b>var</b> el<span class="s"> = </span>$(<i>"image"</i>);
+</code><code id="L2667"><span class="ln">2667</span> $(el, {x: x, y: y, width: w, height: h, preserveAspectRatio: <i>"none"</i>});
+</code><code id="L2668"><span class="ln">2668</span> el.setAttributeNS(xlink, <i>"href"</i>, src);
+</code><code id="L2669"><span class="ln">2669</span> svg.canvas && svg.canvas.appendChild(el);
+</code><code id="L2670"><span class="ln">2670</span> <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2671"><span class="ln">2671</span> res.attrs<span class="s"> = </span>{x: x, y: y, width: w, height: h, src: src};
+</code><code id="L2672"><span class="ln">2672</span> res.type<span class="s"> = </span><i>"image"</i>;
+</code><code id="L2673"><span class="ln">2673</span> <b>return</b> res;
+</code><code id="L2674"><span class="ln">2674</span> },
+</code><code id="L2675"><span class="ln">2675</span> theText<span class="s"> = </span><b>function</b> (svg, x, y, text) {
+</code><code id="L2676"><span class="ln">2676</span> <b>var</b> el<span class="s"> = </span>$(<i>"text"</i>);
+</code><code id="L2677"><span class="ln">2677</span> $(el, {x: x, y: y, <i>"text-anchor"</i>: <i>"middle"</i>});
+</code><code id="L2678"><span class="ln">2678</span> svg.canvas && svg.canvas.appendChild(el);
+</code><code id="L2679"><span class="ln">2679</span> <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2680"><span class="ln">2680</span> res.attrs<span class="s"> = </span>{x: x, y: y, <i>"text-anchor"</i>: <i>"middle"</i>, text: text, font: availableAttrs.font, stroke: <i>"none"</i>, fill: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L2681"><span class="ln">2681</span> res.type<span class="s"> = </span><i>"text"</i>;
+</code><code id="L2682"><span class="ln">2682</span> setFillAndStroke(res, res.attrs);
+</code><code id="L2683"><span class="ln">2683</span> <b>return</b> res;
+</code><code id="L2684"><span class="ln">2684</span> },
+</code><code id="L2685"><span class="ln">2685</span> setSize<span class="s"> = </span><b>function</b> (width, height) {
+</code><code id="L2686"><span class="ln">2686</span> <b>this</b>.width<span class="s"> = </span>width<span class="s"> || </span><b>this</b>.width;
+</code><code id="L2687"><span class="ln">2687</span> <b>this</b>.height<span class="s"> = </span>height<span class="s"> || </span><b>this</b>.height;
+</code><code id="L2688"><span class="ln">2688</span> <b>this</b>.canvas[setAttribute](<i>"width"</i>, <b>this</b>.width);
+</code><code id="L2689"><span class="ln">2689</span> <b>this</b>.canvas[setAttribute](<i>"height"</i>, <b>this</b>.height);
+</code><code id="L2690"><span class="ln">2690</span> <b>if</b> (<b>this</b>._viewBox) {
+</code><code id="L2691"><span class="ln">2691</span> <b>this</b>.setViewBox.apply(<b>this</b>, <b>this</b>._viewBox);
+</code><code id="L2692"><span class="ln">2692</span> }
+</code><code id="L2693"><span class="ln">2693</span> <b>return</b> <b>this</b>;
+</code><code id="L2694"><span class="ln">2694</span> },
+</code><code id="L2695"><span class="ln">2695</span> create<span class="s"> = </span><b>function</b> () {
+</code><code id="L2696"><span class="ln">2696</span> <b>var</b> con<span class="s"> = </span>getContainer[apply](<span class="d">0</span>, arguments),
+</code><code id="L2697"><span class="ln">2697</span> container<span class="s"> = </span>con && con.container,
+</code><code id="L2698"><span class="ln">2698</span> x<span class="s"> = </span>con.x,
+</code><code id="L2699"><span class="ln">2699</span> y<span class="s"> = </span>con.y,
+</code><code id="L2700"><span class="ln">2700</span> width<span class="s"> = </span>con.width,
+</code><code id="L2701"><span class="ln">2701</span> height<span class="s"> = </span>con.height;
+</code><code id="L2702"><span class="ln">2702</span> <b>if</b> (!container) {
+</code><code id="L2703"><span class="ln">2703</span> <b>throw</b> <b>new</b> Error(<i>"SVG container not found."</i>);
+</code><code id="L2704"><span class="ln">2704</span> }
+</code><code id="L2705"><span class="ln">2705</span> <b>var</b> cnvs<span class="s"> = </span>$(<i>"svg"</i>),
+</code><code id="L2706"><span class="ln">2706</span> css<span class="s"> = </span><i>"overflow:hidden;"</i>;
+</code><code id="L2707"><span class="ln">2707</span> x<span class="s"> = </span>x<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2708"><span class="ln">2708</span> y<span class="s"> = </span>y<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2709"><span class="ln">2709</span> width<span class="s"> = </span>width<span class="s"> || </span><span class="d">512</span>;
+</code><code id="L2710"><span class="ln">2710</span> height<span class="s"> = </span>height<span class="s"> || </span><span class="d">342</span>;
+</code><code id="L2711"><span class="ln">2711</span> $(cnvs, {
+</code><code id="L2712"><span class="ln">2712</span> height: height,
+</code><code id="L2713"><span class="ln">2713</span> version: <span class="d">1.1</span>,
+</code><code id="L2714"><span class="ln">2714</span> width: width,
+</code><code id="L2715"><span class="ln">2715</span> xmlns: <i>"http:<span class="c">//www.w3.org/<span class="d">2000</span>/svg"</i></span>
+</code><code id="L2716"><span class="ln">2716</span> });
+</code><code id="L2717"><span class="ln">2717</span> <b>if</b> (container<span class="s"> == </span><span class="d">1</span>) {
+</code><code id="L2718"><span class="ln">2718</span> cnvs.style.cssText<span class="s"> = </span>css<span class="s"> + </span><i>"position:absolute;left:"</i><span class="s"> + </span>x<span class="s"> + </span><i>"px;top:"</i><span class="s"> + </span>y<span class="s"> + </span><i>"px"</i>;
+</code><code id="L2719"><span class="ln">2719</span> g.doc.body.appendChild(cnvs);
+</code><code id="L2720"><span class="ln">2720</span> } <b>else</b> {
+</code><code id="L2721"><span class="ln">2721</span> cnvs.style.cssText<span class="s"> = </span>css;
+</code><code id="L2722"><span class="ln">2722</span> <b>if</b> (container.firstChild) {
+</code><code id="L2723"><span class="ln">2723</span> container.insertBefore(cnvs, container.firstChild);
+</code><code id="L2724"><span class="ln">2724</span> } <b>else</b> {
+</code><code id="L2725"><span class="ln">2725</span> container.appendChild(cnvs);
+</code><code id="L2726"><span class="ln">2726</span> }
+</code><code id="L2727"><span class="ln">2727</span> }
+</code><code id="L2728"><span class="ln">2728</span> container<span class="s"> = </span><b>new</b> Paper;
+</code><code id="L2729"><span class="ln">2729</span> container.width<span class="s"> = </span>width;
+</code><code id="L2730"><span class="ln">2730</span> container.height<span class="s"> = </span>height;
+</code><code id="L2731"><span class="ln">2731</span> container.canvas<span class="s"> = </span>cnvs;
+</code><code id="L2732"><span class="ln">2732</span> plugins.call(container, container, R.fn);
+</code><code id="L2733"><span class="ln">2733</span> container.clear();
+</code><code id="L2734"><span class="ln">2734</span> <b>return</b> container;
+</code><code id="L2735"><span class="ln">2735</span> },
+</code><code id="L2736"><span class="ln">2736</span> setViewBox<span class="s"> = </span><b>function</b> (x, y, w, h, fit) {
+</code><code id="L2737"><span class="ln">2737</span> eve(<i>"setViewBox"</i>, <b>this</b>, <b>this</b>._viewBox, [x, y, w, h, fit]);
+</code><code id="L2738"><span class="ln">2738</span> <b>var</b> size<span class="s"> = </span>mmax(w<span class="s"> / </span><b>this</b>.width, h<span class="s"> / </span><b>this</b>.height),
+</code><code id="L2739"><span class="ln">2739</span> top<span class="s"> = </span><b>this</b>.top,
+</code><code id="L2740"><span class="ln">2740</span> aspectRatio<span class="s"> = </span>fit ? <i>"meet"</i> : <i>"xMinYMin"</i>,
+</code><code id="L2741"><span class="ln">2741</span> vb,
+</code><code id="L2742"><span class="ln">2742</span> sw;
+</code><code id="L2743"><span class="ln">2743</span> <b>if</b> (x<span class="s"> == </span><b>null</b>) {
+</code><code id="L2744"><span class="ln">2744</span> <b>if</b> (<b>this</b>._vbSize) {
+</code><code id="L2745"><span class="ln">2745</span> size<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2746"><span class="ln">2746</span> }
+</code><code id="L2747"><span class="ln">2747</span> <b>delete</b> <b>this</b>._vbSize;
+</code><code id="L2748"><span class="ln">2748</span> vb<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span> "</i><span class="s"> + </span><b>this</b>.width<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.height;
+</code><code id="L2749"><span class="ln">2749</span> } <b>else</b> {
+</code><code id="L2750"><span class="ln">2750</span> <b>this</b>._vbSize<span class="s"> = </span>size;
+</code><code id="L2751"><span class="ln">2751</span> vb<span class="s"> = </span>x<span class="s"> + </span>S<span class="s"> + </span>y<span class="s"> + </span>S<span class="s"> + </span>w<span class="s"> + </span>S<span class="s"> + </span>h;
+</code><code id="L2752"><span class="ln">2752</span> }
+</code><code id="L2753"><span class="ln">2753</span> $(<b>this</b>.canvas, {
+</code><code id="L2754"><span class="ln">2754</span> viewBox: vb,
+</code><code id="L2755"><span class="ln">2755</span> preserveAspectRatio: aspectRatio
+</code><code id="L2756"><span class="ln">2756</span> });
+</code><code id="L2757"><span class="ln">2757</span> <b>while</b> (size && top) {
+</code><code id="L2758"><span class="ln">2758</span> sw<span class="s"> = </span><i>"stroke-width"</i> <b>in</b> top.attrs ? top.attrs[<i>"stroke-width"</i>] : <span class="d">1</span>;
+</code><code id="L2759"><span class="ln">2759</span> top.attr({<i>"stroke-width"</i>: sw});
+</code><code id="L2760"><span class="ln">2760</span> top._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2761"><span class="ln">2761</span> top._.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2762"><span class="ln">2762</span> top<span class="s"> = </span>top.prev;
+</code><code id="L2763"><span class="ln">2763</span> }
+</code><code id="L2764"><span class="ln">2764</span> <b>this</b>._viewBox<span class="s"> = </span>[x, y, w, h, !!fit];
+</code><code id="L2765"><span class="ln">2765</span> <b>return</b> <b>this</b>;
+</code><code id="L2766"><span class="ln">2766</span> };
+</code><code id="L2767"><span class="ln">2767</span> paperproto.clear<span class="s"> = </span><b>function</b> () {
+</code><code id="L2768"><span class="ln">2768</span> eve(<i>"clear"</i>, <b>this</b>);
+</code><code id="L2769"><span class="ln">2769</span> <b>var</b> c<span class="s"> = </span><b>this</b>.canvas;
+</code><code id="L2770"><span class="ln">2770</span> <b>while</b> (c.firstChild) {
+</code><code id="L2771"><span class="ln">2771</span> c.removeChild(c.firstChild);
+</code><code id="L2772"><span class="ln">2772</span> }
+</code><code id="L2773"><span class="ln">2773</span> <b>this</b>.bottom<span class="s"> = </span><b>this</b>.top<span class="s"> = </span><b>null</b>;
+</code><code id="L2774"><span class="ln">2774</span> (<b>this</b>.desc<span class="s"> = </span>$(<i>"desc"</i>)).appendChild(g.doc.createTextNode(<i>"Created <b>with</b> Rapha\xebl "</i><span class="s"> + </span>R.version));
+</code><code id="L2775"><span class="ln">2775</span> c.appendChild(<b>this</b>.desc);
+</code><code id="L2776"><span class="ln">2776</span> c.appendChild(<b>this</b>.defs<span class="s"> = </span>$(<i>"defs"</i>));
+</code><code id="L2777"><span class="ln">2777</span> };
+</code><code id="L2778"><span class="ln">2778</span> paperproto.remove<span class="s"> = </span><b>function</b> () {
+</code><code id="L2779"><span class="ln">2779</span> eve(<i>"remove"</i>, <b>this</b>);
+</code><code id="L2780"><span class="ln">2780</span> <b>this</b>.canvas.parentNode && <b>this</b>.canvas.parentNode.removeChild(<b>this</b>.canvas);
+</code><code id="L2781"><span class="ln">2781</span> <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
+</code><code id="L2782"><span class="ln">2782</span> <b>this</b>[i]<span class="s"> = </span>removed(i);
+</code><code id="L2783"><span class="ln">2783</span> }
+</code><code id="L2784"><span class="ln">2784</span> };
+</code><code id="L2785"><span class="ln">2785</span> }
+</code><code id="L2786"><span class="ln">2786</span>
+</code><code id="L2787"><span class="ln">2787</span> <span class="c">// VML</span>
+</code><code id="L2788"><span class="ln">2788</span> <b>if</b> (R.vml) {
+</code><code id="L2789"><span class="ln">2789</span> <b>var</b> map<span class="s"> = </span>{M: <i>"m"</i>, L: <i>"l"</i>, C: <i>"c"</i>, Z: <i>"x"</i>, m: <i>"t"</i>, l: <i>"r"</i>, c: <i>"v"</i>, z: <i>"x"</i>},
+</code><code id="L2790"><span class="ln">2790</span> bites<span class="s"> = </span>/([clmz]),?([^clmz]*)/gi,
+</code><code id="L2791"><span class="ln">2791</span> blurregexp<span class="s"> = </span>/ progid:\S+Blur\([^\)]+\)/g,
+</code><code id="L2792"><span class="ln">2792</span> val<span class="s"> = </span>/-?[^,\s-]+/g,
+</code><code id="L2793"><span class="ln">2793</span> cssDot<span class="s"> = </span><i>"position:absolute;left:<span class="d">0</span>;top:<span class="d">0</span>;width:1px;height:1px"</i>,
+</code><code id="L2794"><span class="ln">2794</span> zoom<span class="s"> = </span><span class="d">21600</span>,
+</code><code id="L2795"><span class="ln">2795</span> pathTypes<span class="s"> = </span>{path: <span class="d">1</span>, rect: <span class="d">1</span>},
+</code><code id="L2796"><span class="ln">2796</span> ovalTypes<span class="s"> = </span>{circle: <span class="d">1</span>, ellipse: <span class="d">1</span>},
+</code><code id="L2797"><span class="ln">2797</span> path2vml<span class="s"> = </span><b>function</b> (path) {
+</code><code id="L2798"><span class="ln">2798</span> <b>var</b> total<span class="s"> = </span> /[ahqstv]/ig,
+</code><code id="L2799"><span class="ln">2799</span> command<span class="s"> = </span>pathToAbsolute;
+</code><code id="L2800"><span class="ln">2800</span> Str(path).match(total) && (command<span class="s"> = </span>path2curve);
+</code><code id="L2801"><span class="ln">2801</span> total<span class="s"> = </span>/[clmz]/g;
+</code><code id="L2802"><span class="ln">2802</span> <b>if</b> (command<span class="s"> == </span>pathToAbsolute && !Str(path).match(total)) {
+</code><code id="L2803"><span class="ln">2803</span> <b>var</b> res<span class="s"> = </span>Str(path).replace(bites, <b>function</b> (all, command, args) {
+</code><code id="L2804"><span class="ln">2804</span> <b>var</b> vals<span class="s"> = </span>[],
+</code><code id="L2805"><span class="ln">2805</span> isMove<span class="s"> = </span>lowerCase.call(command)<span class="s"> == </span><i>"m"</i>,
+</code><code id="L2806"><span class="ln">2806</span> res<span class="s"> = </span>map[command];
+</code><code id="L2807"><span class="ln">2807</span> args.replace(val, <b>function</b> (value) {
+</code><code id="L2808"><span class="ln">2808</span> <b>if</b> (isMove && vals.length<span class="s"> == </span><span class="d">2</span>) {
+</code><code id="L2809"><span class="ln">2809</span> res += vals<span class="s"> + </span>map[command<span class="s"> == </span><i>"m"</i> ? <i>"l"</i> : <i>"L"</i>];
+</code><code id="L2810"><span class="ln">2810</span> vals<span class="s"> = </span>[];
+</code><code id="L2811"><span class="ln">2811</span> }
+</code><code id="L2812"><span class="ln">2812</span> vals.push(round(value<span class="s"> * </span>zoom));
+</code><code id="L2813"><span class="ln">2813</span> });
+</code><code id="L2814"><span class="ln">2814</span> <b>return</b> res<span class="s"> + </span>vals;
+</code><code id="L2815"><span class="ln">2815</span> });
+</code><code id="L2816"><span class="ln">2816</span> <b>return</b> res;
+</code><code id="L2817"><span class="ln">2817</span> }
+</code><code id="L2818"><span class="ln">2818</span> <b>var</b> pa<span class="s"> = </span>command(path), p, r;
+</code><code id="L2819"><span class="ln">2819</span> res<span class="s"> = </span>[];
+</code><code id="L2820"><span class="ln">2820</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>pa.length; i < ii; i++) {
+</code><code id="L2821"><span class="ln">2821</span> p<span class="s"> = </span>pa[i];
+</code><code id="L2822"><span class="ln">2822</span> r<span class="s"> = </span>lowerCase.call(pa[i][<span class="d">0</span>]);
+</code><code id="L2823"><span class="ln">2823</span> r<span class="s"> == </span><i>"z"</i> && (r<span class="s"> = </span><i>"x"</i>);
+</code><code id="L2824"><span class="ln">2824</span> <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>p.length; j < jj; j++) {
+</code><code id="L2825"><span class="ln">2825</span> r += round(p[j]<span class="s"> * </span>zoom)<span class="s"> + </span>(j != jj<span class="s"> - </span><span class="d">1</span> ? <i>","</i> : E);
+</code><code id="L2826"><span class="ln">2826</span> }
+</code><code id="L2827"><span class="ln">2827</span> res.push(r);
+</code><code id="L2828"><span class="ln">2828</span> }
+</code><code id="L2829"><span class="ln">2829</span> <b>return</b> res.join(S);
+</code><code id="L2830"><span class="ln">2830</span> },
+</code><code id="L2831"><span class="ln">2831</span> compensation<span class="s"> = </span><b>function</b> (deg, dx, dy) {
+</code><code id="L2832"><span class="ln">2832</span> <b>var</b> m<span class="s"> = </span><b>new</b> Matrix;
+</code><code id="L2833"><span class="ln">2833</span> m.rotate(-deg, <span class="d">.5</span>, <span class="d">.5</span>);
+</code><code id="L2834"><span class="ln">2834</span> <b>return</b> {
+</code><code id="L2835"><span class="ln">2835</span> dx: m.x(dx, dy),
+</code><code id="L2836"><span class="ln">2836</span> dy: m.y(dx, dy)
+</code><code id="L2837"><span class="ln">2837</span> };
+</code><code id="L2838"><span class="ln">2838</span> },
+</code><code id="L2839"><span class="ln">2839</span> setCoords<span class="s"> = </span><b>function</b> (p) {
+</code><code id="L2840"><span class="ln">2840</span> <b>var</b> _<span class="s"> = </span>p._,
+</code><code id="L2841"><span class="ln">2841</span> sx<span class="s"> = </span>_.sx,
+</code><code id="L2842"><span class="ln">2842</span> sy<span class="s"> = </span>_.sy,
+</code><code id="L2843"><span class="ln">2843</span> deg<span class="s"> = </span>_.deg,
+</code><code id="L2844"><span class="ln">2844</span> dx<span class="s"> = </span>_.dx,
+</code><code id="L2845"><span class="ln">2845</span> dy<span class="s"> = </span>_.dy,
+</code><code id="L2846"><span class="ln">2846</span> fillpos<span class="s"> = </span>_.fillpos,
+</code><code id="L2847"><span class="ln">2847</span> o<span class="s"> = </span>p.node,
+</code><code id="L2848"><span class="ln">2848</span> s<span class="s"> = </span>o.style,
+</code><code id="L2849"><span class="ln">2849</span> y<span class="s"> = </span><span class="d">1</span>,
+</code><code id="L2850"><span class="ln">2850</span> m<span class="s"> = </span>p.matrix,
+</code><code id="L2851"><span class="ln">2851</span> flip<span class="s"> = </span><i>""</i>,
+</code><code id="L2852"><span class="ln">2852</span> dxdy,
+</code><code id="L2853"><span class="ln">2853</span> kx<span class="s"> = </span>zoom<span class="s"> / </span>sx,
+</code><code id="L2854"><span class="ln">2854</span> ky<span class="s"> = </span>zoom<span class="s"> / </span>sy;
+</code><code id="L2855"><span class="ln">2855</span> s.visibility<span class="s"> = </span><i>"hidden"</i>;
+</code><code id="L2856"><span class="ln">2856</span> o.coordsize<span class="s"> = </span>abs(kx)<span class="s"> + </span>S<span class="s"> + </span>abs(ky);
+</code><code id="L2857"><span class="ln">2857</span> s.rotation<span class="s"> = </span>deg<span class="s"> * </span>(sx<span class="s"> * </span>sy < <span class="d">0</span> ? -<span class="d">1</span> : <span class="d">1</span>);
+</code><code id="L2858"><span class="ln">2858</span> <b>if</b> (deg) {
+</code><code id="L2859"><span class="ln">2859</span> <b>var</b> c<span class="s"> = </span>compensation(deg, dx, dy);
+</code><code id="L2860"><span class="ln">2860</span> dx<span class="s"> = </span>c.dx;
+</code><code id="L2861"><span class="ln">2861</span> dy<span class="s"> = </span>c.dy;
+</code><code id="L2862"><span class="ln">2862</span> }
+</code><code id="L2863"><span class="ln">2863</span> sx < <span class="d">0</span> && (flip += <i>"x"</i>);
+</code><code id="L2864"><span class="ln">2864</span> sy < <span class="d">0</span> && (flip += <i>" y"</i>) && (y<span class="s"> = </span>-<span class="d">1</span>);
+</code><code id="L2865"><span class="ln">2865</span> s.flip<span class="s"> = </span>flip;
+</code><code id="L2866"><span class="ln">2866</span> o.coordorigin<span class="s"> = </span>(dx<span class="s"> * </span>-kx)<span class="s"> + </span>S<span class="s"> + </span>(dy<span class="s"> * </span>-ky);
+</code><code id="L2867"><span class="ln">2867</span> <b>if</b> (fillpos<span class="s"> || </span>_.fillsize) {
+</code><code id="L2868"><span class="ln">2868</span> <b>var</b> fill<span class="s"> = </span>o.getElementsByTagName(fillString);
+</code><code id="L2869"><span class="ln">2869</span> fill<span class="s"> = </span>fill && fill[<span class="d">0</span>];
+</code><code id="L2870"><span class="ln">2870</span> o.removeChild(fill);
+</code><code id="L2871"><span class="ln">2871</span> <b>if</b> (fillpos) {
+</code><code id="L2872"><span class="ln">2872</span> c<span class="s"> = </span>compensation(deg, m.x(fillpos[<span class="d">0</span>], fillpos[<span class="d">1</span>]), m.y(fillpos[<span class="d">0</span>], fillpos[<span class="d">1</span>]));
+</code><code id="L2873"><span class="ln">2873</span> fill.position<span class="s"> = </span>c.dx<span class="s"> * </span>y<span class="s"> + </span>S<span class="s"> + </span>c.dy<span class="s"> * </span>y;
+</code><code id="L2874"><span class="ln">2874</span> }
+</code><code id="L2875"><span class="ln">2875</span> <b>if</b> (_.fillsize) {
+</code><code id="L2876"><span class="ln">2876</span> fill.size<span class="s"> = </span>_.fillsize[<span class="d">0</span>]<span class="s"> * </span>abs(sx)<span class="s"> + </span>S<span class="s"> + </span>_.fillsize[<span class="d">1</span>]<span class="s"> * </span>abs(sy);
+</code><code id="L2877"><span class="ln">2877</span> }
+</code><code id="L2878"><span class="ln">2878</span> o.appendChild(fill);
+</code><code id="L2879"><span class="ln">2879</span> }
+</code><code id="L2880"><span class="ln">2880</span> s.visibility<span class="s"> = </span><i>"visible"</i>;
+</code><code id="L2881"><span class="ln">2881</span> };
+</code><code id="L2882"><span class="ln">2882</span> R.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L2883"><span class="ln">2883</span> <b>return</b> <i>"Your browser doesn\u2019t support SVG. Falling down to VML.\nYou are running Rapha\xebl "</i><span class="s"> + </span><b>this</b>.version;
+</code><code id="L2884"><span class="ln">2884</span> };
+</code><code id="L2885"><span class="ln">2885</span> addArrow<span class="s"> = </span><b>function</b> (o, value, isEnd) {
+</code><code id="L2886"><span class="ln">2886</span> <b>var</b> values<span class="s"> = </span>Str(value).toLowerCase().split(<i>"-"</i>),
+</code><code id="L2887"><span class="ln">2887</span> se<span class="s"> = </span>isEnd ? <i>"end"</i> : <i>"start"</i>,
+</code><code id="L2888"><span class="ln">2888</span> i<span class="s"> = </span>values.length,
+</code><code id="L2889"><span class="ln">2889</span> type<span class="s"> = </span><i>"classic"</i>,
+</code><code id="L2890"><span class="ln">2890</span> w<span class="s"> = </span><i>"medium"</i>,
+</code><code id="L2891"><span class="ln">2891</span> h<span class="s"> = </span><i>"medium"</i>;
+</code><code id="L2892"><span class="ln">2892</span> <b>while</b> (i--) {
+</code><code id="L2893"><span class="ln">2893</span> <b>switch</b> (values[i]) {
+</code><code id="L2894"><span class="ln">2894</span> <b>case</b> <i>"block"</i>:
+</code><code id="L2895"><span class="ln">2895</span> <b>case</b> <i>"classic"</i>:
+</code><code id="L2896"><span class="ln">2896</span> <b>case</b> <i>"oval"</i>:
+</code><code id="L2897"><span class="ln">2897</span> <b>case</b> <i>"diamond"</i>:
+</code><code id="L2898"><span class="ln">2898</span> <b>case</b> <i>"open"</i>:
+</code><code id="L2899"><span class="ln">2899</span> <b>case</b> <i>"none"</i>:
+</code><code id="L2900"><span class="ln">2900</span> type<span class="s"> = </span>values[i];
+</code><code id="L2901"><span class="ln">2901</span> <b>break</b>;
+</code><code id="L2902"><span class="ln">2902</span> <b>case</b> <i>"wide"</i>:
+</code><code id="L2903"><span class="ln">2903</span> <b>case</b> <i>"narrow"</i>: h<span class="s"> = </span>values[i]; <b>break</b>;
+</code><code id="L2904"><span class="ln">2904</span> <b>case</b> <i>"<b>long</b>"</i>:
+</code><code id="L2905"><span class="ln">2905</span> <b>case</b> <i>"<b>short</b>"</i>: w<span class="s"> = </span>values[i]; <b>break</b>;
+</code><code id="L2906"><span class="ln">2906</span> }
+</code><code id="L2907"><span class="ln">2907</span> }
+</code><code id="L2908"><span class="ln">2908</span> <b>var</b> stroke<span class="s"> = </span>o.node.getElementsByTagName(<i>"stroke"</i>)[<span class="d">0</span>];
+</code><code id="L2909"><span class="ln">2909</span> stroke[se<span class="s"> + </span><i>"arrow"</i>]<span class="s"> = </span>type;
+</code><code id="L2910"><span class="ln">2910</span> stroke[se<span class="s"> + </span><i>"arrowlength"</i>]<span class="s"> = </span>w;
+</code><code id="L2911"><span class="ln">2911</span> stroke[se<span class="s"> + </span><i>"arrowwidth"</i>]<span class="s"> = </span>h;
+</code><code id="L2912"><span class="ln">2912</span> };
+</code><code id="L2913"><span class="ln">2913</span> setFillAndStroke<span class="s"> = </span><b>function</b> (o, params) {
+</code><code id="L2914"><span class="ln">2914</span> o.paper.canvas.style.display<span class="s"> = </span><i>"none"</i>;
+</code><code id="L2915"><span class="ln">2915</span> o.attrs<span class="s"> = </span>o.attrs<span class="s"> || </span>{};
+</code><code id="L2916"><span class="ln">2916</span> <b>var</b> node<span class="s"> = </span>o.node,
+</code><code id="L2917"><span class="ln">2917</span> a<span class="s"> = </span>o.attrs,
+</code><code id="L2918"><span class="ln">2918</span> s<span class="s"> = </span>node.style,
+</code><code id="L2919"><span class="ln">2919</span> xy,
+</code><code id="L2920"><span class="ln">2920</span> newpath<span class="s"> = </span>pathTypes[o.type] && (params.x != a.x<span class="s"> || </span>params.y != a.y<span class="s"> || </span>params.width != a.width<span class="s"> || </span>params.height != a.height<span class="s"> || </span>params.cx != a.cx<span class="s"> || </span>params.cy != a.cy<span class="s"> || </span>params.rx != a.rx<span class="s"> || </span>params.ry != a.ry<span class="s"> || </span>params.r != a.r),
+</code><code id="L2921"><span class="ln">2921</span> isOval<span class="s"> = </span>ovalTypes[o.type] && (a.cx != params.cx<span class="s"> || </span>a.cy != params.cy<span class="s"> || </span>a.r != params.r<span class="s"> || </span>a.rx != params.rx<span class="s"> || </span>a.ry != params.ry),
+</code><code id="L2922"><span class="ln">2922</span> res<span class="s"> = </span>o;
+</code><code id="L2923"><span class="ln">2923</span>
+</code><code id="L2924"><span class="ln">2924</span>
+</code><code id="L2925"><span class="ln">2925</span> <b>for</b> (<b>var</b> par <b>in</b> params) <b>if</b> (params[has](par)) {
+</code><code id="L2926"><span class="ln">2926</span> a[par]<span class="s"> = </span>params[par];
+</code><code id="L2927"><span class="ln">2927</span> }
+</code><code id="L2928"><span class="ln">2928</span> <b>if</b> (newpath) {
+</code><code id="L2929"><span class="ln">2929</span> a.path<span class="s"> = </span>getPath[o.type](o);
+</code><code id="L2930"><span class="ln">2930</span> o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2931"><span class="ln">2931</span> }
+</code><code id="L2932"><span class="ln">2932</span> params.href && (node.href<span class="s"> = </span>params.href);
+</code><code id="L2933"><span class="ln">2933</span> params.title && (node.title<span class="s"> = </span>params.title);
+</code><code id="L2934"><span class="ln">2934</span> params.target && (node.target<span class="s"> = </span>params.target);
+</code><code id="L2935"><span class="ln">2935</span> params.cursor && (s.cursor<span class="s"> = </span>params.cursor);
+</code><code id="L2936"><span class="ln">2936</span> <i>"blur"</i> <b>in</b> params && o.blur(params.blur);
+</code><code id="L2937"><span class="ln">2937</span> <i>"transform"</i> <b>in</b> params && o.transform(params.transform);
+</code><code id="L2938"><span class="ln">2938</span> <b>if</b> (params.path && o.type<span class="s"> == </span><i>"path"</i><span class="s"> || </span>newpath) {
+</code><code id="L2939"><span class="ln">2939</span> node.path<span class="s"> = </span>path2vml(a.path);
+</code><code id="L2940"><span class="ln">2940</span> }
+</code><code id="L2941"><span class="ln">2941</span> <b>if</b> (isOval) {
+</code><code id="L2942"><span class="ln">2942</span> <b>var</b> cx<span class="s"> = </span>a.cx,
+</code><code id="L2943"><span class="ln">2943</span> cy<span class="s"> = </span>a.cy,
+</code><code id="L2944"><span class="ln">2944</span> rx<span class="s"> = </span>a.rx<span class="s"> || </span>a.r<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L2945"><span class="ln">2945</span> ry<span class="s"> = </span>a.ry<span class="s"> || </span>a.r<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2946"><span class="ln">2946</span> node.path<span class="s"> = </span>R.format(<i>"ar{<span class="d">0</span>},{<span class="d">1</span>},{<span class="d">2</span>},{<span class="d">3</span>},{<span class="d">4</span>},{<span class="d">1</span>},{<span class="d">4</span>},{<span class="d">1</span>}x"</i>, round((cx<span class="s"> - </span>rx)<span class="s"> * </span>zoom), round((cy<span class="s"> - </span>ry)<span class="s"> * </span>zoom), round((cx<span class="s"> + </span>rx)<span class="s"> * </span>zoom), round((cy<span class="s"> + </span>ry)<span class="s"> * </span>zoom), round(cx<span class="s"> * </span>zoom));
+</code><code id="L2947"><span class="ln">2947</span> }
+</code><code id="L2948"><span class="ln">2948</span> <b>if</b> (<i>"clip-rect"</i> <b>in</b> params) {
+</code><code id="L2949"><span class="ln">2949</span> <b>var</b> rect<span class="s"> = </span>Str(params[<i>"clip-rect"</i>]).split(separator);
+</code><code id="L2950"><span class="ln">2950</span> <b>if</b> (rect.length<span class="s"> == </span><span class="d">4</span>) {
+</code><code id="L2951"><span class="ln">2951</span> rect[<span class="d">2</span>]<span class="s"> = </span>+rect[<span class="d">2</span>]<span class="s"> + </span>(+rect[<span class="d">0</span>]);
+</code><code id="L2952"><span class="ln">2952</span> rect[<span class="d">3</span>]<span class="s"> = </span>+rect[<span class="d">3</span>]<span class="s"> + </span>(+rect[<span class="d">1</span>]);
+</code><code id="L2953"><span class="ln">2953</span> <b>var</b> div<span class="s"> = </span>node.clipRect<span class="s"> || </span>g.doc.createElement(<i>"div"</i>),
+</code><code id="L2954"><span class="ln">2954</span> dstyle<span class="s"> = </span>div.style,
+</code><code id="L2955"><span class="ln">2955</span> group<span class="s"> = </span>node.parentNode;
+</code><code id="L2956"><span class="ln">2956</span> dstyle.clip<span class="s"> = </span>R.format(<i>"rect({<span class="d">1</span>}px {<span class="d">2</span>}px {<span class="d">3</span>}px {<span class="d">0</span>}px)"</i>, rect);
+</code><code id="L2957"><span class="ln">2957</span> <b>if</b> (!node.clipRect) {
+</code><code id="L2958"><span class="ln">2958</span> dstyle.position<span class="s"> = </span><i>"absolute"</i>;
+</code><code id="L2959"><span class="ln">2959</span> dstyle.top<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L2960"><span class="ln">2960</span> dstyle.left<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L2961"><span class="ln">2961</span> dstyle.width<span class="s"> = </span>o.paper.width<span class="s"> + </span><i>"px"</i>;
+</code><code id="L2962"><span class="ln">2962</span> dstyle.height<span class="s"> = </span>o.paper.height<span class="s"> + </span><i>"px"</i>;
+</code><code id="L2963"><span class="ln">2963</span> group.parentNode.insertBefore(div, group);
+</code><code id="L2964"><span class="ln">2964</span> div.appendChild(group);
+</code><code id="L2965"><span class="ln">2965</span> node.clipRect<span class="s"> = </span>div;
+</code><code id="L2966"><span class="ln">2966</span> }
+</code><code id="L2967"><span class="ln">2967</span> }
+</code><code id="L2968"><span class="ln">2968</span> <b>if</b> (!params[<i>"clip-rect"</i>]) {
+</code><code id="L2969"><span class="ln">2969</span> node.clipRect && (node.clipRect.style.clip<span class="s"> = </span>E);
+</code><code id="L2970"><span class="ln">2970</span> }
+</code><code id="L2971"><span class="ln">2971</span> }
+</code><code id="L2972"><span class="ln">2972</span> <b>if</b> (o.textpath) {
+</code><code id="L2973"><span class="ln">2973</span> <b>var</b> textpathStyle<span class="s"> = </span>o.textpath.style;
+</code><code id="L2974"><span class="ln">2974</span> params.font && (textpathStyle.font<span class="s"> = </span>params.font);
+</code><code id="L2975"><span class="ln">2975</span> params[<i>"font-family"</i>] && (textpathStyle.fontFamily<span class="s"> = </span>'<i>"'<span class="s"> + </span>params["</i>font-family<i>"].split("</i>,<i>")[<span class="d">0</span>].replace(/^['"</i>]+|['<i>"]+$/g, E)<span class="s"> + </span>'"</i>');
+</code><code id="L2976"><span class="ln">2976</span> params[<i>"font-size"</i>] && (textpathStyle.fontSize<span class="s"> = </span>params[<i>"font-size"</i>]);
+</code><code id="L2977"><span class="ln">2977</span> params[<i>"font-weight"</i>] && (textpathStyle.fontWeight<span class="s"> = </span>params[<i>"font-weight"</i>]);
+</code><code id="L2978"><span class="ln">2978</span> params[<i>"font-style"</i>] && (textpathStyle.fontStyle<span class="s"> = </span>params[<i>"font-style"</i>]);
+</code><code id="L2979"><span class="ln">2979</span> }
+</code><code id="L2980"><span class="ln">2980</span> <b>if</b> (<i>"arrow-start"</i> <b>in</b> params) {
+</code><code id="L2981"><span class="ln">2981</span> addArrow(res, params[<i>"arrow-start"</i>]);
+</code><code id="L2982"><span class="ln">2982</span> }
+</code><code id="L2983"><span class="ln">2983</span> <b>if</b> (<i>"arrow-end"</i> <b>in</b> params) {
+</code><code id="L2984"><span class="ln">2984</span> addArrow(res, params[<i>"arrow-end"</i>], <span class="d">1</span>);
+</code><code id="L2985"><span class="ln">2985</span> }
+</code><code id="L2986"><span class="ln">2986</span> <b>if</b> (params.opacity != <b>null</b><span class="s"> || </span>
+</code><code id="L2987"><span class="ln">2987</span> params[<i>"stroke-width"</i>] != <b>null</b> ||
+</code><code id="L2988"><span class="ln">2988</span> params.fill != <b>null</b> ||
+</code><code id="L2989"><span class="ln">2989</span> params.src != <b>null</b> ||
+</code><code id="L2990"><span class="ln">2990</span> params.stroke != <b>null</b> ||
+</code><code id="L2991"><span class="ln">2991</span> params[<i>"stroke-width"</i>] != <b>null</b> ||
+</code><code id="L2992"><span class="ln">2992</span> params[<i>"stroke-opacity"</i>] != <b>null</b> ||
+</code><code id="L2993"><span class="ln">2993</span> params[<i>"fill-opacity"</i>] != <b>null</b> ||
+</code><code id="L2994"><span class="ln">2994</span> params[<i>"stroke-dasharray"</i>] != <b>null</b> ||
+</code><code id="L2995"><span class="ln">2995</span> params[<i>"stroke-miterlimit"</i>] != <b>null</b> ||
+</code><code id="L2996"><span class="ln">2996</span> params[<i>"stroke-linejoin"</i>] != <b>null</b> ||
+</code><code id="L2997"><span class="ln">2997</span> params[<i>"stroke-linecap"</i>] != <b>null</b>) {
+</code><code id="L2998"><span class="ln">2998</span> <b>var</b> fill<span class="s"> = </span>node.getElementsByTagName(fillString),
+</code><code id="L2999"><span class="ln">2999</span> newfill<span class="s"> = </span><b>false</b>;
+</code><code id="L3000"><span class="ln">3000</span> fill<span class="s"> = </span>fill && fill[<span class="d">0</span>];
+</code><code id="L3001"><span class="ln">3001</span> !fill && (newfill<span class="s"> = </span>fill<span class="s"> = </span>createNode(fillString));
+</code><code id="L3002"><span class="ln">3002</span> <b>if</b> (o.type<span class="s"> == </span><i>"image"</i> && params.src) {
+</code><code id="L3003"><span class="ln">3003</span> fill.src<span class="s"> = </span>params.src;
+</code><code id="L3004"><span class="ln">3004</span> }
+</code><code id="L3005"><span class="ln">3005</span> <b>if</b> (<i>"fill-opacity"</i> <b>in</b> params<span class="s"> || </span><i>"opacity"</i> <b>in</b> params) {
+</code><code id="L3006"><span class="ln">3006</span> <b>var</b> opacity<span class="s"> = </span>((+a[<i>"fill-opacity"</i>]<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+a.opacity<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+R.getRGB(params.fill).o<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>);
+</code><code id="L3007"><span class="ln">3007</span> opacity<span class="s"> = </span>mmin(mmax(opacity, <span class="d">0</span>), <span class="d">1</span>);
+</code><code id="L3008"><span class="ln">3008</span> fill.opacity<span class="s"> = </span>opacity;
+</code><code id="L3009"><span class="ln">3009</span> }
+</code><code id="L3010"><span class="ln">3010</span> params.fill && (fill.on<span class="s"> = </span><b>true</b>);
+</code><code id="L3011"><span class="ln">3011</span> <b>if</b> (fill.on<span class="s"> == </span><b>null</b><span class="s"> || </span>params.fill<span class="s"> == </span><i>"none"</i><span class="s"> || </span>params.fill<span class="s"> === </span><b>null</b>) {
+</code><code id="L3012"><span class="ln">3012</span> fill.on<span class="s"> = </span><b>false</b>;
+</code><code id="L3013"><span class="ln">3013</span> }
+</code><code id="L3014"><span class="ln">3014</span> <b>if</b> (fill.on && params.fill) {
+</code><code id="L3015"><span class="ln">3015</span> <b>var</b> isURL<span class="s"> = </span>params.fill.match(ISURL);
+</code><code id="L3016"><span class="ln">3016</span> <b>if</b> (isURL) {
+</code><code id="L3017"><span class="ln">3017</span> fill.parentNode<span class="s"> == </span>node && node.removeChild(fill);
+</code><code id="L3018"><span class="ln">3018</span> fill.rotate<span class="s"> = </span><b>true</b>;
+</code><code id="L3019"><span class="ln">3019</span> fill.src<span class="s"> = </span>isURL[<span class="d">1</span>];
+</code><code id="L3020"><span class="ln">3020</span> fill.type<span class="s"> = </span><i>"tile"</i>;
+</code><code id="L3021"><span class="ln">3021</span> <b>var</b> bbox<span class="s"> = </span>o.getBBox(<span class="d">1</span>);
+</code><code id="L3022"><span class="ln">3022</span> fill.position<span class="s"> = </span>bbox.x<span class="s"> + </span>S<span class="s"> + </span>bbox.y;
+</code><code id="L3023"><span class="ln">3023</span> o._.fillpos<span class="s"> = </span>[bbox.x, bbox.y];
+</code><code id="L3024"><span class="ln">3024</span>
+</code><code id="L3025"><span class="ln">3025</span> preload(isURL[<span class="d">1</span>], <b>function</b> () {
+</code><code id="L3026"><span class="ln">3026</span> o._.fillsize<span class="s"> = </span>[<b>this</b>.offsetWidth, <b>this</b>.offsetHeight];
+</code><code id="L3027"><span class="ln">3027</span> });
+</code><code id="L3028"><span class="ln">3028</span> } <b>else</b> {
+</code><code id="L3029"><span class="ln">3029</span> fill.color<span class="s"> = </span>R.getRGB(params.fill).hex;
+</code><code id="L3030"><span class="ln">3030</span> fill.src<span class="s"> = </span>E;
+</code><code id="L3031"><span class="ln">3031</span> fill.type<span class="s"> = </span><i>"solid"</i>;
+</code><code id="L3032"><span class="ln">3032</span> <b>if</b> (R.getRGB(params.fill).error && (res.type <b>in</b> {circle: <span class="d">1</span>, ellipse: <span class="d">1</span>}<span class="s"> || </span>Str(params.fill).charAt() != <i>"r"</i>) && addGradientFill(res, params.fill, fill)) {
+</code><code id="L3033"><span class="ln">3033</span> a.fill<span class="s"> = </span><i>"none"</i>;
+</code><code id="L3034"><span class="ln">3034</span> a.gradient<span class="s"> = </span>params.fill;
+</code><code id="L3035"><span class="ln">3035</span> fill.rotate<span class="s"> = </span><b>false</b>;
+</code><code id="L3036"><span class="ln">3036</span> }
+</code><code id="L3037"><span class="ln">3037</span> }
+</code><code id="L3038"><span class="ln">3038</span> }
+</code><code id="L3039"><span class="ln">3039</span> node.appendChild(fill);
+</code><code id="L3040"><span class="ln">3040</span> <b>var</b> stroke<span class="s"> = </span>(node.getElementsByTagName(<i>"stroke"</i>) && node.getElementsByTagName(<i>"stroke"</i>)[<span class="d">0</span>]),
+</code><code id="L3041"><span class="ln">3041</span> newstroke<span class="s"> = </span><b>false</b>;
+</code><code id="L3042"><span class="ln">3042</span> !stroke && (newstroke<span class="s"> = </span>stroke<span class="s"> = </span>createNode(<i>"stroke"</i>));
+</code><code id="L3043"><span class="ln">3043</span> <b>if</b> ((params.stroke && params.stroke != <i>"none"</i>) ||
+</code><code id="L3044"><span class="ln">3044</span> params[<i>"stroke-width"</i>] ||
+</code><code id="L3045"><span class="ln">3045</span> params[<i>"stroke-opacity"</i>] != <b>null</b> ||
+</code><code id="L3046"><span class="ln">3046</span> params[<i>"stroke-dasharray"</i>] ||
+</code><code id="L3047"><span class="ln">3047</span> params[<i>"stroke-miterlimit"</i>] ||
+</code><code id="L3048"><span class="ln">3048</span> params[<i>"stroke-linejoin"</i>] ||
+</code><code id="L3049"><span class="ln">3049</span> params[<i>"stroke-linecap"</i>]) {
+</code><code id="L3050"><span class="ln">3050</span> stroke.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3051"><span class="ln">3051</span> }
+</code><code id="L3052"><span class="ln">3052</span> (params.stroke<span class="s"> == </span><i>"none"</i><span class="s"> || </span>params.stroke<span class="s"> === </span><b>null</b><span class="s"> || </span>stroke.on<span class="s"> == </span><b>null</b><span class="s"> || </span>params.stroke<span class="s"> == </span><span class="d">0</span><span class="s"> || </span>params[<i>"stroke-width"</i>]<span class="s"> == </span><span class="d">0</span>) && (stroke.on<span class="s"> = </span><b>false</b>);
+</code><code id="L3053"><span class="ln">3053</span> <b>var</b> strokeColor<span class="s"> = </span>R.getRGB(params.stroke);
+</code><code id="L3054"><span class="ln">3054</span> stroke.on && params.stroke && (stroke.color<span class="s"> = </span>strokeColor.hex);
+</code><code id="L3055"><span class="ln">3055</span> opacity<span class="s"> = </span>((+a[<i>"stroke-opacity"</i>]<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+a.opacity<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+strokeColor.o<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>);
+</code><code id="L3056"><span class="ln">3056</span> <b>var</b> width<span class="s"> = </span>(toFloat(params[<i>"stroke-width"</i>])<span class="s"> || </span><span class="d">1</span>)<span class="s"> * </span><span class="d">.75</span>;
+</code><code id="L3057"><span class="ln">3057</span> opacity<span class="s"> = </span>mmin(mmax(opacity, <span class="d">0</span>), <span class="d">1</span>);
+</code><code id="L3058"><span class="ln">3058</span> params[<i>"stroke-width"</i>]<span class="s"> == </span><b>null</b> && (width<span class="s"> = </span>a[<i>"stroke-width"</i>]);
+</code><code id="L3059"><span class="ln">3059</span> params[<i>"stroke-width"</i>] && (stroke.weight<span class="s"> = </span>width);
+</code><code id="L3060"><span class="ln">3060</span> width && width < <span class="d">1</span> && (opacity *= width) && (stroke.weight<span class="s"> = </span><span class="d">1</span>);
+</code><code id="L3061"><span class="ln">3061</span> stroke.opacity<span class="s"> = </span>opacity;
+</code><code id="L3062"><span class="ln">3062</span>
+</code><code id="L3063"><span class="ln">3063</span> params[<i>"stroke-linejoin"</i>] && (stroke.joinstyle<span class="s"> = </span>params[<i>"stroke-linejoin"</i>]<span class="s"> || </span><i>"miter"</i>);
+</code><code id="L3064"><span class="ln">3064</span> stroke.miterlimit<span class="s"> = </span>params[<i>"stroke-miterlimit"</i>]<span class="s"> || </span><span class="d">8</span>;
+</code><code id="L3065"><span class="ln">3065</span> params[<i>"stroke-linecap"</i>] && (stroke.endcap<span class="s"> = </span>params[<i>"stroke-linecap"</i>]<span class="s"> == </span><i>"butt"</i> ? <i>"flat"</i> : params[<i>"stroke-linecap"</i>]<span class="s"> == </span><i>"square"</i> ? <i>"square"</i> : <i>"round"</i>);
+</code><code id="L3066"><span class="ln">3066</span> <b>if</b> (params[<i>"stroke-dasharray"</i>]) {
+</code><code id="L3067"><span class="ln">3067</span> <b>var</b> dasharray<span class="s"> = </span>{
+</code><code id="L3068"><span class="ln">3068</span> <i>"-"</i>: <i>"shortdash"</i>,
+</code><code id="L3069"><span class="ln">3069</span> <i>"."</i>: <i>"shortdot"</i>,
+</code><code id="L3070"><span class="ln">3070</span> <i>"-."</i>: <i>"shortdashdot"</i>,
+</code><code id="L3071"><span class="ln">3071</span> <i>"-.."</i>: <i>"shortdashdotdot"</i>,
+</code><code id="L3072"><span class="ln">3072</span> <i>". "</i>: <i>"dot"</i>,
+</code><code id="L3073"><span class="ln">3073</span> <i>"- "</i>: <i>"dash"</i>,
+</code><code id="L3074"><span class="ln">3074</span> <i>"--"</i>: <i>"longdash"</i>,
+</code><code id="L3075"><span class="ln">3075</span> <i>"- ."</i>: <i>"dashdot"</i>,
+</code><code id="L3076"><span class="ln">3076</span> <i>"--."</i>: <i>"longdashdot"</i>,
+</code><code id="L3077"><span class="ln">3077</span> <i>"--.."</i>: <i>"longdashdotdot"</i>
+</code><code id="L3078"><span class="ln">3078</span> };
+</code><code id="L3079"><span class="ln">3079</span> stroke.dashstyle<span class="s"> = </span>dasharray[has](params[<i>"stroke-dasharray"</i>]) ? dasharray[params[<i>"stroke-dasharray"</i>]] : E;
+</code><code id="L3080"><span class="ln">3080</span> }
+</code><code id="L3081"><span class="ln">3081</span> newstroke && node.appendChild(stroke);
+</code><code id="L3082"><span class="ln">3082</span> }
+</code><code id="L3083"><span class="ln">3083</span> <b>if</b> (res.type<span class="s"> == </span><i>"text"</i>) {
+</code><code id="L3084"><span class="ln">3084</span> res.paper.canvas.style.display<span class="s"> = </span>E;
+</code><code id="L3085"><span class="ln">3085</span> <b>var</b> span<span class="s"> = </span>res.paper.span,
+</code><code id="L3086"><span class="ln">3086</span> m<span class="s"> = </span><span class="d">100</span>,
+</code><code id="L3087"><span class="ln">3087</span> fontSize<span class="s"> = </span>a.font && a.font.match(/\d+(?:\.\d*)?(?=px)/);
+</code><code id="L3088"><span class="ln">3088</span> s<span class="s"> = </span>span.style;
+</code><code id="L3089"><span class="ln">3089</span> a.font && (s.font<span class="s"> = </span>a.font);
+</code><code id="L3090"><span class="ln">3090</span> a[<i>"font-family"</i>] && (s.fontFamily<span class="s"> = </span>a[<i>"font-family"</i>]);
+</code><code id="L3091"><span class="ln">3091</span> a[<i>"font-weight"</i>] && (s.fontWeight<span class="s"> = </span>a[<i>"font-weight"</i>]);
+</code><code id="L3092"><span class="ln">3092</span> a[<i>"font-style"</i>] && (s.fontStyle<span class="s"> = </span>a[<i>"font-style"</i>]);
+</code><code id="L3093"><span class="ln">3093</span> fontSize<span class="s"> = </span>toFloat(fontSize ? fontSize[<span class="d">0</span>] : a[<i>"font-size"</i>]);
+</code><code id="L3094"><span class="ln">3094</span> s.fontSize<span class="s"> = </span>fontSize<span class="s"> * </span>m<span class="s"> + </span><i>"px"</i>;
+</code><code id="L3095"><span class="ln">3095</span> res.textpath.string && (span.innerHTML<span class="s"> = </span>Str(res.textpath.string).replace(/</g, <i>"&#<span class="d">60</span>;"</i>).replace(/&/g, <i>"&#<span class="d">38</span>;"</i>).replace(/\n/g, <i>"<br>"</i>));
+</code><code id="L3096"><span class="ln">3096</span> <b>var</b> brect<span class="s"> = </span>span.getBoundingClientRect();
+</code><code id="L3097"><span class="ln">3097</span> res.W<span class="s"> = </span>a.w<span class="s"> = </span>(brect.right<span class="s"> - </span>brect.left)<span class="s"> / </span>m;
+</code><code id="L3098"><span class="ln">3098</span> res.H<span class="s"> = </span>a.h<span class="s"> = </span>(brect.bottom<span class="s"> - </span>brect.top)<span class="s"> / </span>m;
+</code><code id="L3099"><span class="ln">3099</span> res.paper.canvas.style.display<span class="s"> = </span><i>"none"</i>;
+</code><code id="L3100"><span class="ln">3100</span> res.X<span class="s"> = </span>a.x;
+</code><code id="L3101"><span class="ln">3101</span> res.Y<span class="s"> = </span>a.y<span class="s"> + </span>res.H<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3102"><span class="ln">3102</span>
+</code><code id="L3103"><span class="ln">3103</span> (<i>"x"</i> <b>in</b> params<span class="s"> || </span><i>"y"</i> <b>in</b> params) && (res.path.v<span class="s"> = </span>R.format(<i>"m{<span class="d">0</span>},{<span class="d">1</span>}l{<span class="d">2</span>},{<span class="d">1</span>}"</i>, round(a.x<span class="s"> * </span>zoom), round(a.y<span class="s"> * </span>zoom), round(a.x<span class="s"> * </span>zoom)<span class="s"> + </span><span class="d">1</span>));
+</code><code id="L3104"><span class="ln">3104</span> <b>var</b> dirtyattrs<span class="s"> = </span>[<i>"x"</i>, <i>"y"</i>, <i>"text"</i>, <i>"font"</i>, <i>"font-family"</i>, <i>"font-weight"</i>, <i>"font-style"</i>, <i>"font-size"</i>];
+</code><code id="L3105"><span class="ln">3105</span> <b>for</b> (<b>var</b> d<span class="s"> = </span><span class="d">0</span>, dd<span class="s"> = </span>dirtyattrs.length; d < dd; d++) <b>if</b> (dirtyattrs[d] <b>in</b> params) {
+</code><code id="L3106"><span class="ln">3106</span> res._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3107"><span class="ln">3107</span> <b>break</b>;
+</code><code id="L3108"><span class="ln">3108</span> }
+</code><code id="L3109"><span class="ln">3109</span>
+</code><code id="L3110"><span class="ln">3110</span> <span class="c">// text-anchor emulation</span>
+</code><code id="L3111"><span class="ln">3111</span> <b>switch</b> (a[<i>"text-anchor"</i>]) {
+</code><code id="L3112"><span class="ln">3112</span> <b>case</b> <i>"start"</i>:
+</code><code id="L3113"><span class="ln">3113</span> res.textpath.style[<i>"v-text-align"</i>]<span class="s"> = </span><i>"left"</i>;
+</code><code id="L3114"><span class="ln">3114</span> res.bbx<span class="s"> = </span>res.W<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3115"><span class="ln">3115</span> <b>break</b>;
+</code><code id="L3116"><span class="ln">3116</span> <b>case</b> <i>"end"</i>:
+</code><code id="L3117"><span class="ln">3117</span> res.textpath.style[<i>"v-text-align"</i>]<span class="s"> = </span><i>"right"</i>;
+</code><code id="L3118"><span class="ln">3118</span> res.bbx<span class="s"> = </span>-res.W<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3119"><span class="ln">3119</span> <b>break</b>;
+</code><code id="L3120"><span class="ln">3120</span> <b>default</b>:
+</code><code id="L3121"><span class="ln">3121</span> res.textpath.style[<i>"v-text-align"</i>]<span class="s"> = </span><i>"center"</i>;
+</code><code id="L3122"><span class="ln">3122</span> res.bbx<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3123"><span class="ln">3123</span> <b>break</b>;
+</code><code id="L3124"><span class="ln">3124</span> }
+</code><code id="L3125"><span class="ln">3125</span> res.textpath.style[<i>"v-text-kern"</i>]<span class="s"> = </span><b>true</b>;
+</code><code id="L3126"><span class="ln">3126</span> }
+</code><code id="L3127"><span class="ln">3127</span> res.paper.canvas.style.display<span class="s"> = </span>E;
+</code><code id="L3128"><span class="ln">3128</span> };
+</code><code id="L3129"><span class="ln">3129</span> addGradientFill<span class="s"> = </span><b>function</b> (o, gradient, fill) {
+</code><code id="L3130"><span class="ln">3130</span> o.attrs<span class="s"> = </span>o.attrs<span class="s"> || </span>{};
+</code><code id="L3131"><span class="ln">3131</span> <b>var</b> attrs<span class="s"> = </span>o.attrs,
+</code><code id="L3132"><span class="ln">3132</span> type<span class="s"> = </span><i>"linear"</i>,
+</code><code id="L3133"><span class="ln">3133</span> fxfy<span class="s"> = </span><i>"<span class="d">.5</span> <span class="d">.5</span>"</i>;
+</code><code id="L3134"><span class="ln">3134</span> o.attrs.gradient<span class="s"> = </span>gradient;
+</code><code id="L3135"><span class="ln">3135</span> gradient<span class="s"> = </span>Str(gradient).replace(radial_gradient, <b>function</b> (all, fx, fy) {
+</code><code id="L3136"><span class="ln">3136</span> type<span class="s"> = </span><i>"radial"</i>;
+</code><code id="L3137"><span class="ln">3137</span> <b>if</b> (fx && fy) {
+</code><code id="L3138"><span class="ln">3138</span> fx<span class="s"> = </span>toFloat(fx);
+</code><code id="L3139"><span class="ln">3139</span> fy<span class="s"> = </span>toFloat(fy);
+</code><code id="L3140"><span class="ln">3140</span> pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>)<span class="s"> + </span>pow(fy<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>) > <span class="d">.25</span> && (fy<span class="s"> = </span>math.sqrt(<span class="d">.25</span><span class="s"> - </span>pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>))<span class="s"> * </span>((fy > <span class="d">.5</span>)<span class="s"> * </span><span class="d">2</span><span class="s"> - </span><span class="d">1</span>)<span class="s"> + </span><span class="d">.5</span>);
+</code><code id="L3141"><span class="ln">3141</span> fxfy<span class="s"> = </span>fx<span class="s"> + </span>S<span class="s"> + </span>fy;
+</code><code id="L3142"><span class="ln">3142</span> }
+</code><code id="L3143"><span class="ln">3143</span> <b>return</b> E;
+</code><code id="L3144"><span class="ln">3144</span> });
+</code><code id="L3145"><span class="ln">3145</span> gradient<span class="s"> = </span>gradient.split(/\s*\-\s*/);
+</code><code id="L3146"><span class="ln">3146</span> <b>if</b> (type<span class="s"> == </span><i>"linear"</i>) {
+</code><code id="L3147"><span class="ln">3147</span> <b>var</b> angle<span class="s"> = </span>gradient.shift();
+</code><code id="L3148"><span class="ln">3148</span> angle<span class="s"> = </span>-toFloat(angle);
+</code><code id="L3149"><span class="ln">3149</span> <b>if</b> (isNaN(angle)) {
+</code><code id="L3150"><span class="ln">3150</span> <b>return</b> <b>null</b>;
+</code><code id="L3151"><span class="ln">3151</span> }
+</code><code id="L3152"><span class="ln">3152</span> }
+</code><code id="L3153"><span class="ln">3153</span> <b>var</b> dots<span class="s"> = </span>parseDots(gradient);
+</code><code id="L3154"><span class="ln">3154</span> <b>if</b> (!dots) {
+</code><code id="L3155"><span class="ln">3155</span> <b>return</b> <b>null</b>;
+</code><code id="L3156"><span class="ln">3156</span> }
+</code><code id="L3157"><span class="ln">3157</span> o<span class="s"> = </span>o.shape<span class="s"> || </span>o.node;
+</code><code id="L3158"><span class="ln">3158</span> <b>if</b> (dots.length) {
+</code><code id="L3159"><span class="ln">3159</span> o.removeChild(fill);
+</code><code id="L3160"><span class="ln">3160</span> fill.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3161"><span class="ln">3161</span> fill.method<span class="s"> = </span><i>"none"</i>;
+</code><code id="L3162"><span class="ln">3162</span> fill.color<span class="s"> = </span>dots[<span class="d">0</span>].color;
+</code><code id="L3163"><span class="ln">3163</span> fill.color2<span class="s"> = </span>dots[dots.length<span class="s"> - </span><span class="d">1</span>].color;
+</code><code id="L3164"><span class="ln">3164</span> <b>var</b> clrs<span class="s"> = </span>[];
+</code><code id="L3165"><span class="ln">3165</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>dots.length; i < ii; i++) {
+</code><code id="L3166"><span class="ln">3166</span> dots[i].offset && clrs.push(dots[i].offset<span class="s"> + </span>S<span class="s"> + </span>dots[i].color);
+</code><code id="L3167"><span class="ln">3167</span> }
+</code><code id="L3168"><span class="ln">3168</span> fill.colors && (fill.colors.value<span class="s"> = </span>clrs.length ? clrs.join() : <i>"<span class="d">0</span>% "</i><span class="s"> + </span>fill.color);
+</code><code id="L3169"><span class="ln">3169</span> <b>if</b> (type<span class="s"> == </span><i>"radial"</i>) {
+</code><code id="L3170"><span class="ln">3170</span> fill.type<span class="s"> = </span><i>"gradientTitle"</i>;
+</code><code id="L3171"><span class="ln">3171</span> fill.focus<span class="s"> = </span><i>"<span class="d">100</span>%"</i>;
+</code><code id="L3172"><span class="ln">3172</span> fill.focussize<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span>"</i>;
+</code><code id="L3173"><span class="ln">3173</span> fill.focusposition<span class="s"> = </span>fxfy;
+</code><code id="L3174"><span class="ln">3174</span> fill.angle<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3175"><span class="ln">3175</span> } <b>else</b> {
+</code><code id="L3176"><span class="ln">3176</span> <span class="c">// fill.rotate= <b>true</b>;</span>
+</code><code id="L3177"><span class="ln">3177</span> fill.type<span class="s"> = </span><i>"gradient"</i>;
+</code><code id="L3178"><span class="ln">3178</span> fill.angle<span class="s"> = </span>(<span class="d">270</span><span class="s"> - </span>angle) % <span class="d">360</span>;
+</code><code id="L3179"><span class="ln">3179</span> }
+</code><code id="L3180"><span class="ln">3180</span> o.appendChild(fill);
+</code><code id="L3181"><span class="ln">3181</span> <span class="c">// alert(fill.outerHTML);</span>
+</code><code id="L3182"><span class="ln">3182</span> }
+</code><code id="L3183"><span class="ln">3183</span> <b>return</b> <span class="d">1</span>;
+</code><code id="L3184"><span class="ln">3184</span> };
+</code><code id="L3185"><span class="ln">3185</span> Element<span class="s"> = </span><b>function</b> (node, vml) {
+</code><code id="L3186"><span class="ln">3186</span> <b>this</b>[<span class="d">0</span>]<span class="s"> = </span><b>this</b>.node<span class="s"> = </span>node;
+</code><code id="L3187"><span class="ln">3187</span> node.raphael<span class="s"> = </span><b>true</b>;
+</code><code id="L3188"><span class="ln">3188</span> <b>this</b>.id<span class="s"> = </span>R._oid++;
+</code><code id="L3189"><span class="ln">3189</span> node.raphaelid<span class="s"> = </span><b>this</b>.id;
+</code><code id="L3190"><span class="ln">3190</span> <b>this</b>.X<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3191"><span class="ln">3191</span> <b>this</b>.Y<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3192"><span class="ln">3192</span> <b>this</b>.attrs<span class="s"> = </span>{};
+</code><code id="L3193"><span class="ln">3193</span> <b>this</b>.paper<span class="s"> = </span>vml;
+</code><code id="L3194"><span class="ln">3194</span> <b>this</b>.matrix<span class="s"> = </span><b>new</b> Matrix;
+</code><code id="L3195"><span class="ln">3195</span> <b>this</b>._<span class="s"> = </span>{
+</code><code id="L3196"><span class="ln">3196</span> transform: [],
+</code><code id="L3197"><span class="ln">3197</span> sx: <span class="d">1</span>,
+</code><code id="L3198"><span class="ln">3198</span> sy: <span class="d">1</span>,
+</code><code id="L3199"><span class="ln">3199</span> dx: <span class="d">0</span>,
+</code><code id="L3200"><span class="ln">3200</span> dy: <span class="d">0</span>,
+</code><code id="L3201"><span class="ln">3201</span> deg: <span class="d">0</span>,
+</code><code id="L3202"><span class="ln">3202</span> dirty: <span class="d">1</span>,
+</code><code id="L3203"><span class="ln">3203</span> dirtyT: <span class="d">1</span>
+</code><code id="L3204"><span class="ln">3204</span> };
+</code><code id="L3205"><span class="ln">3205</span> !vml.bottom && (vml.bottom<span class="s"> = </span><b>this</b>);
+</code><code id="L3206"><span class="ln">3206</span> <b>this</b>.prev<span class="s"> = </span>vml.top;
+</code><code id="L3207"><span class="ln">3207</span> vml.top && (vml.top.next<span class="s"> = </span><b>this</b>);
+</code><code id="L3208"><span class="ln">3208</span> vml.top<span class="s"> = </span><b>this</b>;
+</code><code id="L3209"><span class="ln">3209</span> <b>this</b>.next<span class="s"> = </span><b>null</b>;
+</code><code id="L3210"><span class="ln">3210</span> };
+</code><code id="L3211"><span class="ln">3211</span> elproto<span class="s"> = </span>Element.prototype;
+</code><code id="L3212"><span class="ln">3212</span> elproto.transform<span class="s"> = </span><b>function</b> (tstr) {
+</code><code id="L3213"><span class="ln">3213</span> <b>if</b> (tstr<span class="s"> == </span><b>null</b>) {
+</code><code id="L3214"><span class="ln">3214</span> <b>return</b> <b>this</b>._.transform;
+</code><code id="L3215"><span class="ln">3215</span> }
+</code><code id="L3216"><span class="ln">3216</span> extractTransform(<b>this</b>, tstr);
+</code><code id="L3217"><span class="ln">3217</span> <b>var</b> matrix<span class="s"> = </span><b>this</b>.matrix.clone(),
+</code><code id="L3218"><span class="ln">3218</span> skew<span class="s"> = </span><b>this</b>.skew;
+</code><code id="L3219"><span class="ln">3219</span> matrix.translate(-<span class="d">.5</span>, -<span class="d">.5</span>);
+</code><code id="L3220"><span class="ln">3220</span> <b>if</b> (<b>this</b>.type<span class="s"> == </span><i>"image"</i>) {
+</code><code id="L3221"><span class="ln">3221</span> <b>if</b> (Str(tstr).indexOf(<i>"m"</i>)<span class="s"> + </span><span class="d">1</span>) {
+</code><code id="L3222"><span class="ln">3222</span> <b>this</b>.node.style.filter<span class="s"> = </span>matrix.toFilter();
+</code><code id="L3223"><span class="ln">3223</span> <b>var</b> bb<span class="s"> = </span><b>this</b>.getBBox(),
+</code><code id="L3224"><span class="ln">3224</span> bbt<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>),
+</code><code id="L3225"><span class="ln">3225</span> im<span class="s"> = </span>matrix.invert(),
+</code><code id="L3226"><span class="ln">3226</span> dx<span class="s"> = </span>im.x(bb.x, bb.y)<span class="s"> - </span>im.x(bbt.x, bbt.y),
+</code><code id="L3227"><span class="ln">3227</span> dy<span class="s"> = </span>im.y(bb.x, bb.y)<span class="s"> - </span>im.y(bbt.x, bbt.y);
+</code><code id="L3228"><span class="ln">3228</span> <span class="c">// skew.offset<span class="s"> = </span>dx<span class="s"> + </span>S<span class="s"> + </span>dy;</span>
+</code><code id="L3229"><span class="ln">3229</span> <span class="c">// <b>this</b>.node.getElementsByTagName(fillString)[<span class="d">0</span>].position<span class="s"> = </span>skew.offset;</span>
+</code><code id="L3230"><span class="ln">3230</span> } <b>else</b> {
+</code><code id="L3231"><span class="ln">3231</span> <b>this</b>.node.style.filter<span class="s"> = </span>E;
+</code><code id="L3232"><span class="ln">3232</span> setCoords(<b>this</b>);
+</code><code id="L3233"><span class="ln">3233</span> }
+</code><code id="L3234"><span class="ln">3234</span> } <b>else</b> {
+</code><code id="L3235"><span class="ln">3235</span> <span class="c">// o<span class="s"> = </span><b>this</b>.node,</span>
+</code><code id="L3236"><span class="ln">3236</span> <span class="c">// _<span class="s"> = </span><b>this</b>._,</span>
+</code><code id="L3237"><span class="ln">3237</span> <span class="c">// fillpos<span class="s"> = </span>_.fillpos,</span>
+</code><code id="L3238"><span class="ln">3238</span> <span class="c">// deg,</span>
+</code><code id="L3239"><span class="ln">3239</span> <span class="c">// matrix<span class="s"> = </span><b>this</b>.matrix;</span>
+</code><code id="L3240"><span class="ln">3240</span> <span class="c">// fill<span class="s"> = </span>o.getElementsByTagName(fillString)[<span class="d">0</span>],</span>
+</code><code id="L3241"><span class="ln">3241</span> <span class="c">// angle<span class="s"> = </span>fill.angle;</span>
+</code><code id="L3242"><span class="ln">3242</span>
+</code><code id="L3243"><span class="ln">3243</span> <b>this</b>.node.style.filter<span class="s"> = </span>E;
+</code><code id="L3244"><span class="ln">3244</span> skew.matrix<span class="s"> = </span>matrix;
+</code><code id="L3245"><span class="ln">3245</span> skew.offset<span class="s"> = </span>matrix.offset();
+</code><code id="L3246"><span class="ln">3246</span>
+</code><code id="L3247"><span class="ln">3247</span> <span class="c">// <b>if</b> (<span class="d">0</span>&&angle) {</span>
+</code><code id="L3248"><span class="ln">3248</span> <span class="c">// angle<span class="s"> = </span>R.rad(<span class="d">270</span><span class="s"> - </span>angle);</span>
+</code><code id="L3249"><span class="ln">3249</span> <span class="c">// <b>var</b> dx<span class="s"> = </span><span class="d">100</span><span class="s"> * </span>math.cos(angle),</span>
+</code><code id="L3250"><span class="ln">3250</span> <span class="c">// dy<span class="s"> = </span><span class="d">100</span><span class="s"> * </span>math.sin(angle),</span>
+</code><code id="L3251"><span class="ln">3251</span> <span class="c">// zx<span class="s"> = </span>matrix.x(<span class="d">0</span>, <span class="d">0</span>),</span>
+</code><code id="L3252"><span class="ln">3252</span> <span class="c">// zy<span class="s"> = </span>matrix.y(<span class="d">0</span>, <span class="d">0</span>),</span>
+</code><code id="L3253"><span class="ln">3253</span> <span class="c">// mx<span class="s"> = </span>matrix.x(dx, dy),</span>
+</code><code id="L3254"><span class="ln">3254</span> <span class="c">// my<span class="s"> = </span>matrix.y(dx, dy);</span>
+</code><code id="L3255"><span class="ln">3255</span> <span class="c">// angle<span class="s"> = </span>R.angle(zx, zy, mx, my);</span>
+</code><code id="L3256"><span class="ln">3256</span> <span class="c">// fill.angle<span class="s"> = </span>(<span class="d">270</span><span class="s"> - </span>angle) % <span class="d">360</span>;</span>
+</code><code id="L3257"><span class="ln">3257</span> <span class="c">// }</span>
+</code><code id="L3258"><span class="ln">3258</span> }
+</code><code id="L3259"><span class="ln">3259</span> <b>return</b> <b>this</b>;
+</code><code id="L3260"><span class="ln">3260</span> };
+</code><code id="L3261"><span class="ln">3261</span> elproto.rotate<span class="s"> = </span><b>function</b> (deg, cx, cy) {
+</code><code id="L3262"><span class="ln">3262</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3263"><span class="ln">3263</span> <b>return</b> <b>this</b>;
+</code><code id="L3264"><span class="ln">3264</span> }
+</code><code id="L3265"><span class="ln">3265</span> <b>if</b> (deg<span class="s"> == </span><b>null</b>) {
+</code><code id="L3266"><span class="ln">3266</span> <b>return</b>;
+</code><code id="L3267"><span class="ln">3267</span> }
+</code><code id="L3268"><span class="ln">3268</span> deg<span class="s"> = </span>Str(deg).split(separator);
+</code><code id="L3269"><span class="ln">3269</span> <b>if</b> (deg.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L3270"><span class="ln">3270</span> cx<span class="s"> = </span>toFloat(deg[<span class="d">1</span>]);
+</code><code id="L3271"><span class="ln">3271</span> cy<span class="s"> = </span>toFloat(deg[<span class="d">2</span>]);
+</code><code id="L3272"><span class="ln">3272</span> }
+</code><code id="L3273"><span class="ln">3273</span> deg<span class="s"> = </span>toFloat(deg[<span class="d">0</span>]);
+</code><code id="L3274"><span class="ln">3274</span> (cy<span class="s"> == </span><b>null</b>) && (cx<span class="s"> = </span>cy);
+</code><code id="L3275"><span class="ln">3275</span> <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
+</code><code id="L3276"><span class="ln">3276</span> <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
+</code><code id="L3277"><span class="ln">3277</span> cx<span class="s"> = </span>bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3278"><span class="ln">3278</span> cy<span class="s"> = </span>bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3279"><span class="ln">3279</span> }
+</code><code id="L3280"><span class="ln">3280</span> <b>this</b>._.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3281"><span class="ln">3281</span> <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"r"</i>, deg, cx, cy]]));
+</code><code id="L3282"><span class="ln">3282</span> <b>return</b> <b>this</b>;
+</code><code id="L3283"><span class="ln">3283</span> };
+</code><code id="L3284"><span class="ln">3284</span> elproto.translate<span class="s"> = </span><b>function</b> (dx, dy) {
+</code><code id="L3285"><span class="ln">3285</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3286"><span class="ln">3286</span> <b>return</b> <b>this</b>;
+</code><code id="L3287"><span class="ln">3287</span> }
+</code><code id="L3288"><span class="ln">3288</span> dx<span class="s"> = </span>Str(dx).split(separator);
+</code><code id="L3289"><span class="ln">3289</span> <b>if</b> (dx.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L3290"><span class="ln">3290</span> dy<span class="s"> = </span>toFloat(dx[<span class="d">1</span>]);
+</code><code id="L3291"><span class="ln">3291</span> }
+</code><code id="L3292"><span class="ln">3292</span> dx<span class="s"> = </span>toFloat(dx[<span class="d">0</span>])<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3293"><span class="ln">3293</span> dy<span class="s"> = </span>+dy<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3294"><span class="ln">3294</span> <b>if</b> (<b>this</b>._.bbox) {
+</code><code id="L3295"><span class="ln">3295</span> <b>this</b>._.bbox.x += dx;
+</code><code id="L3296"><span class="ln">3296</span> <b>this</b>._.bbox.y += dy;
+</code><code id="L3297"><span class="ln">3297</span> }
+</code><code id="L3298"><span class="ln">3298</span> <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"t"</i>, dx, dy]]));
+</code><code id="L3299"><span class="ln">3299</span> <b>return</b> <b>this</b>;
+</code><code id="L3300"><span class="ln">3300</span> };
+</code><code id="L3301"><span class="ln">3301</span> elproto.scale<span class="s"> = </span><b>function</b> (sx, sy, cx, cy) {
+</code><code id="L3302"><span class="ln">3302</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3303"><span class="ln">3303</span> <b>return</b> <b>this</b>;
+</code><code id="L3304"><span class="ln">3304</span> }
+</code><code id="L3305"><span class="ln">3305</span> sx<span class="s"> = </span>Str(sx).split(separator);
+</code><code id="L3306"><span class="ln">3306</span> <b>if</b> (sx.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L3307"><span class="ln">3307</span> sy<span class="s"> = </span>toFloat(sx[<span class="d">1</span>]);
+</code><code id="L3308"><span class="ln">3308</span> cx<span class="s"> = </span>toFloat(sx[<span class="d">2</span>]);
+</code><code id="L3309"><span class="ln">3309</span> cy<span class="s"> = </span>toFloat(sx[<span class="d">3</span>]);
+</code><code id="L3310"><span class="ln">3310</span> isNaN(cx) && (cx<span class="s"> = </span><b>null</b>);
+</code><code id="L3311"><span class="ln">3311</span> isNaN(cy) && (cy<span class="s"> = </span><b>null</b>);
+</code><code id="L3312"><span class="ln">3312</span> }
+</code><code id="L3313"><span class="ln">3313</span> sx<span class="s"> = </span>toFloat(sx[<span class="d">0</span>]);
+</code><code id="L3314"><span class="ln">3314</span> (sy<span class="s"> == </span><b>null</b>) && (sy<span class="s"> = </span>sx);
+</code><code id="L3315"><span class="ln">3315</span> (cy<span class="s"> == </span><b>null</b>) && (cx<span class="s"> = </span>cy);
+</code><code id="L3316"><span class="ln">3316</span> <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
+</code><code id="L3317"><span class="ln">3317</span> <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
+</code><code id="L3318"><span class="ln">3318</span> }
+</code><code id="L3319"><span class="ln">3319</span> cx<span class="s"> = </span>cx<span class="s"> == </span><b>null</b> ? bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span> : cx;
+</code><code id="L3320"><span class="ln">3320</span> cy<span class="s"> = </span>cy<span class="s"> == </span><b>null</b> ? bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span> : cy;
+</code><code id="L3321"><span class="ln">3321</span>
+</code><code id="L3322"><span class="ln">3322</span> <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"s"</i>, sx, sy, cx, cy]]));
+</code><code id="L3323"><span class="ln">3323</span> <b>this</b>._.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3324"><span class="ln">3324</span> <b>return</b> <b>this</b>;
+</code><code id="L3325"><span class="ln">3325</span> };
+</code><code id="L3326"><span class="ln">3326</span> elproto.hide<span class="s"> = </span><b>function</b> () {
+</code><code id="L3327"><span class="ln">3327</span> !<b>this</b>.removed && (<b>this</b>.node.style.display<span class="s"> = </span><i>"none"</i>);
+</code><code id="L3328"><span class="ln">3328</span> <b>return</b> <b>this</b>;
+</code><code id="L3329"><span class="ln">3329</span> };
+</code><code id="L3330"><span class="ln">3330</span> elproto.show<span class="s"> = </span><b>function</b> () {
+</code><code id="L3331"><span class="ln">3331</span> !<b>this</b>.removed && (<b>this</b>.node.style.display<span class="s"> = </span>E);
+</code><code id="L3332"><span class="ln">3332</span> <b>return</b> <b>this</b>;
+</code><code id="L3333"><span class="ln">3333</span> };
+</code><code id="L3334"><span class="ln">3334</span> elproto._getBBox<span class="s"> = </span><b>function</b> () {
+</code><code id="L3335"><span class="ln">3335</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3336"><span class="ln">3336</span> <b>return</b> {};
+</code><code id="L3337"><span class="ln">3337</span> }
+</code><code id="L3338"><span class="ln">3338</span> <b>if</b> (<b>this</b>.type<span class="s"> == </span><i>"text"</i>) {
+</code><code id="L3339"><span class="ln">3339</span> <b>return</b> {
+</code><code id="L3340"><span class="ln">3340</span> x: <b>this</b>.X<span class="s"> + </span>(<b>this</b>.bbx<span class="s"> || </span><span class="d">0</span>)<span class="s"> - </span><b>this</b>.W<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L3341"><span class="ln">3341</span> y: <b>this</b>.Y<span class="s"> - </span><b>this</b>.H,
+</code><code id="L3342"><span class="ln">3342</span> width: <b>this</b>.W,
+</code><code id="L3343"><span class="ln">3343</span> height: <b>this</b>.H
+</code><code id="L3344"><span class="ln">3344</span> };
+</code><code id="L3345"><span class="ln">3345</span> } <b>else</b> {
+</code><code id="L3346"><span class="ln">3346</span> <b>return</b> pathDimensions(<b>this</b>.attrs.path);
+</code><code id="L3347"><span class="ln">3347</span> }
+</code><code id="L3348"><span class="ln">3348</span> };
+</code><code id="L3349"><span class="ln">3349</span> elproto.remove<span class="s"> = </span><b>function</b> () {
+</code><code id="L3350"><span class="ln">3350</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3351"><span class="ln">3351</span> <b>return</b>;
+</code><code id="L3352"><span class="ln">3352</span> }
+</code><code id="L3353"><span class="ln">3353</span> eve.unbind(<i>"*.*."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L3354"><span class="ln">3354</span> tear(<b>this</b>, <b>this</b>.paper);
+</code><code id="L3355"><span class="ln">3355</span> <b>this</b>.node.parentNode.removeChild(<b>this</b>.node);
+</code><code id="L3356"><span class="ln">3356</span> <b>this</b>.shape && <b>this</b>.shape.parentNode.removeChild(<b>this</b>.shape);
+</code><code id="L3357"><span class="ln">3357</span> <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
+</code><code id="L3358"><span class="ln">3358</span> <b>delete</b> <b>this</b>[i];
+</code><code id="L3359"><span class="ln">3359</span> }
+</code><code id="L3360"><span class="ln">3360</span> <b>this</b>.removed<span class="s"> = </span><b>true</b>;
+</code><code id="L3361"><span class="ln">3361</span> };
+</code><code id="L3362"><span class="ln">3362</span> elproto.attr<span class="s"> = </span><b>function</b> (name, value) {
+</code><code id="L3363"><span class="ln">3363</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3364"><span class="ln">3364</span> <b>return</b> <b>this</b>;
+</code><code id="L3365"><span class="ln">3365</span> }
+</code><code id="L3366"><span class="ln">3366</span> <b>if</b> (name<span class="s"> == </span><b>null</b>) {
+</code><code id="L3367"><span class="ln">3367</span> <b>var</b> res<span class="s"> = </span>{};
+</code><code id="L3368"><span class="ln">3368</span> <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>.attrs) <b>if</b> (<b>this</b>.attrs[has](i)) {
+</code><code id="L3369"><span class="ln">3369</span> res[i]<span class="s"> = </span><b>this</b>.attrs[i];
+</code><code id="L3370"><span class="ln">3370</span> }
+</code><code id="L3371"><span class="ln">3371</span> res.gradient && res.fill<span class="s"> == </span><i>"none"</i> && (res.fill<span class="s"> = </span>res.gradient) && <b>delete</b> res.gradient;
+</code><code id="L3372"><span class="ln">3372</span> <b>return</b> res;
+</code><code id="L3373"><span class="ln">3373</span> }
+</code><code id="L3374"><span class="ln">3374</span> <b>if</b> (value<span class="s"> == </span><b>null</b> && R.is(name, <i>"string"</i>)) {
+</code><code id="L3375"><span class="ln">3375</span> <b>if</b> (name<span class="s"> == </span>fillString && <b>this</b>.attrs.fill<span class="s"> == </span><i>"none"</i> && <b>this</b>.attrs.gradient) {
+</code><code id="L3376"><span class="ln">3376</span> <b>return</b> <b>this</b>.attrs.gradient;
+</code><code id="L3377"><span class="ln">3377</span> }
+</code><code id="L3378"><span class="ln">3378</span> <b>if</b> (name <b>in</b> <b>this</b>.attrs) {
+</code><code id="L3379"><span class="ln">3379</span> <b>return</b> <b>this</b>.attrs[name];
+</code><code id="L3380"><span class="ln">3380</span> } <b>else</b> <b>if</b> (R.is(<b>this</b>.paper.customAttributes[name], <i>"<b>function</b>"</i>)) {
+</code><code id="L3381"><span class="ln">3381</span> <b>return</b> <b>this</b>.paper.customAttributes[name].def;
+</code><code id="L3382"><span class="ln">3382</span> } <b>else</b> {
+</code><code id="L3383"><span class="ln">3383</span> <b>return</b> availableAttrs[name];
+</code><code id="L3384"><span class="ln">3384</span> }
+</code><code id="L3385"><span class="ln">3385</span> }
+</code><code id="L3386"><span class="ln">3386</span> <b>if</b> (<b>this</b>.attrs && value<span class="s"> == </span><b>null</b> && R.is(name, array)) {
+</code><code id="L3387"><span class="ln">3387</span> <b>var</b> ii, values<span class="s"> = </span>{};
+</code><code id="L3388"><span class="ln">3388</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>name.length; i < ii; i++) {
+</code><code id="L3389"><span class="ln">3389</span> values[name[i]]<span class="s"> = </span><b>this</b>.attr(name[i]);
+</code><code id="L3390"><span class="ln">3390</span> }
+</code><code id="L3391"><span class="ln">3391</span> <b>return</b> values;
+</code><code id="L3392"><span class="ln">3392</span> }
+</code><code id="L3393"><span class="ln">3393</span> <b>var</b> params;
+</code><code id="L3394"><span class="ln">3394</span> <b>if</b> (value != <b>null</b>) {
+</code><code id="L3395"><span class="ln">3395</span> params<span class="s"> = </span>{};
+</code><code id="L3396"><span class="ln">3396</span> params[name]<span class="s"> = </span>value;
+</code><code id="L3397"><span class="ln">3397</span> }
+</code><code id="L3398"><span class="ln">3398</span> value<span class="s"> == </span><b>null</b> && R.is(name, <i>"object"</i>) && (params<span class="s"> = </span>name);
+</code><code id="L3399"><span class="ln">3399</span> <b>for</b> (<b>var</b> key <b>in</b> params) {
+</code><code id="L3400"><span class="ln">3400</span> eve(<i>"attr."</i><span class="s"> + </span>key<span class="s"> + </span><i>"."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, params[key]);
+</code><code id="L3401"><span class="ln">3401</span> }
+</code><code id="L3402"><span class="ln">3402</span> <b>if</b> (params) {
+</code><code id="L3403"><span class="ln">3403</span> <b>for</b> (key <b>in</b> <b>this</b>.paper.customAttributes) <b>if</b> (<b>this</b>.paper.customAttributes[has](key) && params[has](key) && R.is(<b>this</b>.paper.customAttributes[key], <i>"<b>function</b>"</i>)) {
+</code><code id="L3404"><span class="ln">3404</span> <b>var</b> par<span class="s"> = </span><b>this</b>.paper.customAttributes[key].apply(<b>this</b>, [][concat](params[key]));
+</code><code id="L3405"><span class="ln">3405</span> <b>this</b>.attrs[key]<span class="s"> = </span>params[key];
+</code><code id="L3406"><span class="ln">3406</span> <b>for</b> (<b>var</b> subkey <b>in</b> par) <b>if</b> (par[has](subkey)) {
+</code><code id="L3407"><span class="ln">3407</span> params[subkey]<span class="s"> = </span>par[subkey];
+</code><code id="L3408"><span class="ln">3408</span> }
+</code><code id="L3409"><span class="ln">3409</span> }
+</code><code id="L3410"><span class="ln">3410</span> <span class="c">// <b>this</b>.paper.canvas.style.display<span class="s"> = </span><i>"none"</i>;</span>
+</code><code id="L3411"><span class="ln">3411</span> <b>if</b> (params.text && <b>this</b>.type<span class="s"> == </span><i>"text"</i>) {
+</code><code id="L3412"><span class="ln">3412</span> <b>this</b>.textpath.string<span class="s"> = </span>params.text;
+</code><code id="L3413"><span class="ln">3413</span> }
+</code><code id="L3414"><span class="ln">3414</span> setFillAndStroke(<b>this</b>, params);
+</code><code id="L3415"><span class="ln">3415</span> <span class="c">// <b>this</b>.paper.canvas.style.display<span class="s"> = </span>E;</span>
+</code><code id="L3416"><span class="ln">3416</span> }
+</code><code id="L3417"><span class="ln">3417</span> <b>return</b> <b>this</b>;
+</code><code id="L3418"><span class="ln">3418</span> };
+</code><code id="L3419"><span class="ln">3419</span> elproto.toFront<span class="s"> = </span><b>function</b> () {
+</code><code id="L3420"><span class="ln">3420</span> !<b>this</b>.removed && <b>this</b>.node.parentNode.appendChild(<b>this</b>.node);
+</code><code id="L3421"><span class="ln">3421</span> <b>this</b>.paper.top != <b>this</b> && tofront(<b>this</b>, <b>this</b>.paper);
+</code><code id="L3422"><span class="ln">3422</span> <b>return</b> <b>this</b>;
+</code><code id="L3423"><span class="ln">3423</span> };
+</code><code id="L3424"><span class="ln">3424</span> elproto.toBack<span class="s"> = </span><b>function</b> () {
+</code><code id="L3425"><span class="ln">3425</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3426"><span class="ln">3426</span> <b>return</b> <b>this</b>;
+</code><code id="L3427"><span class="ln">3427</span> }
+</code><code id="L3428"><span class="ln">3428</span> <b>if</b> (<b>this</b>.node.parentNode.firstChild != <b>this</b>.node) {
+</code><code id="L3429"><span class="ln">3429</span> <b>this</b>.node.parentNode.insertBefore(<b>this</b>.node, <b>this</b>.node.parentNode.firstChild);
+</code><code id="L3430"><span class="ln">3430</span> toback(<b>this</b>, <b>this</b>.paper);
+</code><code id="L3431"><span class="ln">3431</span> }
+</code><code id="L3432"><span class="ln">3432</span> <b>return</b> <b>this</b>;
+</code><code id="L3433"><span class="ln">3433</span> };
+</code><code id="L3434"><span class="ln">3434</span> elproto.insertAfter<span class="s"> = </span><b>function</b> (element) {
+</code><code id="L3435"><span class="ln">3435</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3436"><span class="ln">3436</span> <b>return</b> <b>this</b>;
+</code><code id="L3437"><span class="ln">3437</span> }
+</code><code id="L3438"><span class="ln">3438</span> <b>if</b> (element.constructor<span class="s"> == </span>Set) {
+</code><code id="L3439"><span class="ln">3439</span> element<span class="s"> = </span>element[element.length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L3440"><span class="ln">3440</span> }
+</code><code id="L3441"><span class="ln">3441</span> <b>if</b> (element.node.nextSibling) {
+</code><code id="L3442"><span class="ln">3442</span> element.node.parentNode.insertBefore(<b>this</b>.node, element.node.nextSibling);
+</code><code id="L3443"><span class="ln">3443</span> } <b>else</b> {
+</code><code id="L3444"><span class="ln">3444</span> element.node.parentNode.appendChild(<b>this</b>.node);
+</code><code id="L3445"><span class="ln">3445</span> }
+</code><code id="L3446"><span class="ln">3446</span> insertafter(<b>this</b>, element, <b>this</b>.paper);
+</code><code id="L3447"><span class="ln">3447</span> <b>return</b> <b>this</b>;
+</code><code id="L3448"><span class="ln">3448</span> };
+</code><code id="L3449"><span class="ln">3449</span> elproto.insertBefore<span class="s"> = </span><b>function</b> (element) {
+</code><code id="L3450"><span class="ln">3450</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3451"><span class="ln">3451</span> <b>return</b> <b>this</b>;
+</code><code id="L3452"><span class="ln">3452</span> }
+</code><code id="L3453"><span class="ln">3453</span> <b>if</b> (element.constructor<span class="s"> == </span>Set) {
+</code><code id="L3454"><span class="ln">3454</span> element<span class="s"> = </span>element[<span class="d">0</span>];
+</code><code id="L3455"><span class="ln">3455</span> }
+</code><code id="L3456"><span class="ln">3456</span> element.node.parentNode.insertBefore(<b>this</b>.node, element.node);
+</code><code id="L3457"><span class="ln">3457</span> insertbefore(<b>this</b>, element, <b>this</b>.paper);
+</code><code id="L3458"><span class="ln">3458</span> <b>return</b> <b>this</b>;
+</code><code id="L3459"><span class="ln">3459</span> };
+</code><code id="L3460"><span class="ln">3460</span> elproto.blur<span class="s"> = </span><b>function</b> (size) {
+</code><code id="L3461"><span class="ln">3461</span> <b>var</b> s<span class="s"> = </span><b>this</b>.node.runtimeStyle,
+</code><code id="L3462"><span class="ln">3462</span> f<span class="s"> = </span>s.filter;
+</code><code id="L3463"><span class="ln">3463</span> f<span class="s"> = </span>f.replace(blurregexp, E);
+</code><code id="L3464"><span class="ln">3464</span> <b>if</b> (+size !== <span class="d">0</span>) {
+</code><code id="L3465"><span class="ln">3465</span> <b>this</b>.attrs.blur<span class="s"> = </span>size;
+</code><code id="L3466"><span class="ln">3466</span> s.filter<span class="s"> = </span>f<span class="s"> + </span>S<span class="s"> + </span>ms<span class="s"> + </span><i>".Blur(pixelradius="</i><span class="s"> + </span>(+size<span class="s"> || </span><span class="d">1.5</span>)<span class="s"> + </span><i>")"</i>;
+</code><code id="L3467"><span class="ln">3467</span> s.margin<span class="s"> = </span>R.format(<i>"-{<span class="d">0</span>}px <span class="d">0</span> <span class="d">0</span> -{<span class="d">0</span>}px"</i>, round(+size<span class="s"> || </span><span class="d">1.5</span>));
+</code><code id="L3468"><span class="ln">3468</span> } <b>else</b> {
+</code><code id="L3469"><span class="ln">3469</span> s.filter<span class="s"> = </span>f;
+</code><code id="L3470"><span class="ln">3470</span> s.margin<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3471"><span class="ln">3471</span> <b>delete</b> <b>this</b>.attrs.blur;
+</code><code id="L3472"><span class="ln">3472</span> }
+</code><code id="L3473"><span class="ln">3473</span> };
+</code><code id="L3474"><span class="ln">3474</span>
+</code><code id="L3475"><span class="ln">3475</span> thePath<span class="s"> = </span><b>function</b> (pathString, vml) {
+</code><code id="L3476"><span class="ln">3476</span> <b>var</b> el<span class="s"> = </span>createNode(<i>"shape"</i>);
+</code><code id="L3477"><span class="ln">3477</span> el.style.cssText<span class="s"> = </span>cssDot;
+</code><code id="L3478"><span class="ln">3478</span> el.coordsize<span class="s"> = </span>zoom<span class="s"> + </span>S<span class="s"> + </span>zoom;
+</code><code id="L3479"><span class="ln">3479</span> el.coordorigin<span class="s"> = </span>vml.coordorigin;
+</code><code id="L3480"><span class="ln">3480</span> <b>var</b> p<span class="s"> = </span><b>new</b> Element(el, vml),
+</code><code id="L3481"><span class="ln">3481</span> attr<span class="s"> = </span>{fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L3482"><span class="ln">3482</span> pathString && (attr.path<span class="s"> = </span>pathString);
+</code><code id="L3483"><span class="ln">3483</span> p.type<span class="s"> = </span><i>"path"</i>;
+</code><code id="L3484"><span class="ln">3484</span> p.path<span class="s"> = </span>[];
+</code><code id="L3485"><span class="ln">3485</span> p.Path<span class="s"> = </span>E;
+</code><code id="L3486"><span class="ln">3486</span> setFillAndStroke(p, attr);
+</code><code id="L3487"><span class="ln">3487</span> vml.canvas.appendChild(el);
+</code><code id="L3488"><span class="ln">3488</span> <b>var</b> skew<span class="s"> = </span>createNode(<i>"skew"</i>);
+</code><code id="L3489"><span class="ln">3489</span> skew.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3490"><span class="ln">3490</span> el.appendChild(skew);
+</code><code id="L3491"><span class="ln">3491</span> p.skew<span class="s"> = </span>skew;
+</code><code id="L3492"><span class="ln">3492</span> p.transform(E);
+</code><code id="L3493"><span class="ln">3493</span> <b>return</b> p;
+</code><code id="L3494"><span class="ln">3494</span> };
+</code><code id="L3495"><span class="ln">3495</span> theRect<span class="s"> = </span><b>function</b> (vml, x, y, w, h, r) {
+</code><code id="L3496"><span class="ln">3496</span> <b>var</b> path<span class="s"> = </span>rectPath(x, y, w, h, r),
+</code><code id="L3497"><span class="ln">3497</span> res<span class="s"> = </span>vml.path(path),
+</code><code id="L3498"><span class="ln">3498</span> a<span class="s"> = </span>res.attrs;
+</code><code id="L3499"><span class="ln">3499</span> res.X<span class="s"> = </span>a.x<span class="s"> = </span>x;
+</code><code id="L3500"><span class="ln">3500</span> res.Y<span class="s"> = </span>a.y<span class="s"> = </span>y;
+</code><code id="L3501"><span class="ln">3501</span> res.W<span class="s"> = </span>a.width<span class="s"> = </span>w;
+</code><code id="L3502"><span class="ln">3502</span> res.H<span class="s"> = </span>a.height<span class="s"> = </span>h;
+</code><code id="L3503"><span class="ln">3503</span> a.r<span class="s"> = </span>r;
+</code><code id="L3504"><span class="ln">3504</span> a.path<span class="s"> = </span>path;
+</code><code id="L3505"><span class="ln">3505</span> res.type<span class="s"> = </span><i>"rect"</i>;
+</code><code id="L3506"><span class="ln">3506</span> <b>return</b> res;
+</code><code id="L3507"><span class="ln">3507</span> };
+</code><code id="L3508"><span class="ln">3508</span> theEllipse<span class="s"> = </span><b>function</b> (vml, x, y, rx, ry) {
+</code><code id="L3509"><span class="ln">3509</span> <b>var</b> res<span class="s"> = </span>vml.path(),
+</code><code id="L3510"><span class="ln">3510</span> a<span class="s"> = </span>res.attrs;
+</code><code id="L3511"><span class="ln">3511</span> res.X<span class="s"> = </span>x<span class="s"> - </span>rx;
+</code><code id="L3512"><span class="ln">3512</span> res.Y<span class="s"> = </span>y<span class="s"> - </span>ry;
+</code><code id="L3513"><span class="ln">3513</span> res.W<span class="s"> = </span>rx<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L3514"><span class="ln">3514</span> res.H<span class="s"> = </span>ry<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L3515"><span class="ln">3515</span> res.type<span class="s"> = </span><i>"ellipse"</i>;
+</code><code id="L3516"><span class="ln">3516</span> setFillAndStroke(res, {
+</code><code id="L3517"><span class="ln">3517</span> cx: x,
+</code><code id="L3518"><span class="ln">3518</span> cy: y,
+</code><code id="L3519"><span class="ln">3519</span> rx: rx,
+</code><code id="L3520"><span class="ln">3520</span> ry: ry
+</code><code id="L3521"><span class="ln">3521</span> });
+</code><code id="L3522"><span class="ln">3522</span> <b>return</b> res;
+</code><code id="L3523"><span class="ln">3523</span> };
+</code><code id="L3524"><span class="ln">3524</span> theCircle<span class="s"> = </span><b>function</b> (vml, x, y, r) {
+</code><code id="L3525"><span class="ln">3525</span> <b>var</b> res<span class="s"> = </span>vml.path(),
+</code><code id="L3526"><span class="ln">3526</span> a<span class="s"> = </span>res.attrs;
+</code><code id="L3527"><span class="ln">3527</span> res.X<span class="s"> = </span>x<span class="s"> - </span>r;
+</code><code id="L3528"><span class="ln">3528</span> res.Y<span class="s"> = </span>y<span class="s"> - </span>r;
+</code><code id="L3529"><span class="ln">3529</span> res.W<span class="s"> = </span>res.H<span class="s"> = </span>r<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L3530"><span class="ln">3530</span> res.type<span class="s"> = </span><i>"circle"</i>;
+</code><code id="L3531"><span class="ln">3531</span> setFillAndStroke(res, {
+</code><code id="L3532"><span class="ln">3532</span> cx: x,
+</code><code id="L3533"><span class="ln">3533</span> cy: y,
+</code><code id="L3534"><span class="ln">3534</span> r: r
+</code><code id="L3535"><span class="ln">3535</span> });
+</code><code id="L3536"><span class="ln">3536</span> <b>return</b> res;
+</code><code id="L3537"><span class="ln">3537</span> };
+</code><code id="L3538"><span class="ln">3538</span> theImage<span class="s"> = </span><b>function</b> (vml, src, x, y, w, h) {
+</code><code id="L3539"><span class="ln">3539</span> <b>var</b> path<span class="s"> = </span>rectPath(x, y, w, h),
+</code><code id="L3540"><span class="ln">3540</span> res<span class="s"> = </span>vml.path(path).attr({stroke: <i>"none"</i>}),
+</code><code id="L3541"><span class="ln">3541</span> a<span class="s"> = </span>res.attrs,
+</code><code id="L3542"><span class="ln">3542</span> node<span class="s"> = </span>res.node,
+</code><code id="L3543"><span class="ln">3543</span> fill<span class="s"> = </span>node.getElementsByTagName(fillString)[<span class="d">0</span>];
+</code><code id="L3544"><span class="ln">3544</span> a.src<span class="s"> = </span>src;
+</code><code id="L3545"><span class="ln">3545</span> res.X<span class="s"> = </span>a.x<span class="s"> = </span>x;
+</code><code id="L3546"><span class="ln">3546</span> res.Y<span class="s"> = </span>a.y<span class="s"> = </span>y;
+</code><code id="L3547"><span class="ln">3547</span> res.W<span class="s"> = </span>a.width<span class="s"> = </span>w;
+</code><code id="L3548"><span class="ln">3548</span> res.H<span class="s"> = </span>a.height<span class="s"> = </span>h;
+</code><code id="L3549"><span class="ln">3549</span> a.path<span class="s"> = </span>path;
+</code><code id="L3550"><span class="ln">3550</span> res.type<span class="s"> = </span><i>"image"</i>;
+</code><code id="L3551"><span class="ln">3551</span> fill.parentNode<span class="s"> == </span>node && node.removeChild(fill);
+</code><code id="L3552"><span class="ln">3552</span> fill.rotate<span class="s"> = </span><b>true</b>;
+</code><code id="L3553"><span class="ln">3553</span> fill.src<span class="s"> = </span>src;
+</code><code id="L3554"><span class="ln">3554</span> fill.type<span class="s"> = </span><i>"tile"</i>;
+</code><code id="L3555"><span class="ln">3555</span> res._.fillpos<span class="s"> = </span>[x, y];
+</code><code id="L3556"><span class="ln">3556</span> res._.fillsize<span class="s"> = </span>[w, h];
+</code><code id="L3557"><span class="ln">3557</span> node.appendChild(fill);
+</code><code id="L3558"><span class="ln">3558</span> setCoords(res);
+</code><code id="L3559"><span class="ln">3559</span> <b>return</b> res;
+</code><code id="L3560"><span class="ln">3560</span> };
+</code><code id="L3561"><span class="ln">3561</span> theText<span class="s"> = </span><b>function</b> (vml, x, y, text) {
+</code><code id="L3562"><span class="ln">3562</span> <b>var</b> el<span class="s"> = </span>createNode(<i>"shape"</i>),
+</code><code id="L3563"><span class="ln">3563</span> path<span class="s"> = </span>createNode(<i>"path"</i>),
+</code><code id="L3564"><span class="ln">3564</span> o<span class="s"> = </span>createNode(<i>"textpath"</i>);
+</code><code id="L3565"><span class="ln">3565</span> x<span class="s"> = </span>x<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3566"><span class="ln">3566</span> y<span class="s"> = </span>y<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3567"><span class="ln">3567</span> text<span class="s"> = </span>text<span class="s"> || </span><i>""</i>;
+</code><code id="L3568"><span class="ln">3568</span> path.v<span class="s"> = </span>R.format(<i>"m{<span class="d">0</span>},{<span class="d">1</span>}l{<span class="d">2</span>},{<span class="d">1</span>}"</i>, round(x<span class="s"> * </span>zoom), round(y<span class="s"> * </span>zoom), round(x<span class="s"> * </span>zoom)<span class="s"> + </span><span class="d">1</span>);
+</code><code id="L3569"><span class="ln">3569</span> path.textpathok<span class="s"> = </span><b>true</b>;
+</code><code id="L3570"><span class="ln">3570</span> o.string<span class="s"> = </span>Str(text);
+</code><code id="L3571"><span class="ln">3571</span> o.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3572"><span class="ln">3572</span> el.style.cssText<span class="s"> = </span><i>"position:absolute;left:<span class="d">0</span>;top:<span class="d">0</span>;width:<span class="d">1</span>;height:<span class="d">1</span>"</i>;
+</code><code id="L3573"><span class="ln">3573</span> el.coordsize<span class="s"> = </span>zoom<span class="s"> + </span>S<span class="s"> + </span>zoom;
+</code><code id="L3574"><span class="ln">3574</span> el.coordorigin<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span>"</i>;
+</code><code id="L3575"><span class="ln">3575</span> <b>var</b> p<span class="s"> = </span><b>new</b> Element(el, vml),
+</code><code id="L3576"><span class="ln">3576</span> attr<span class="s"> = </span>{fill: <i>"#<span class="d">000</span>"</i>, stroke: <i>"none"</i>, font: availableAttrs.font, text: text};
+</code><code id="L3577"><span class="ln">3577</span> p.shape<span class="s"> = </span>el;
+</code><code id="L3578"><span class="ln">3578</span> p.path<span class="s"> = </span>path;
+</code><code id="L3579"><span class="ln">3579</span> p.textpath<span class="s"> = </span>o;
+</code><code id="L3580"><span class="ln">3580</span> p.type<span class="s"> = </span><i>"text"</i>;
+</code><code id="L3581"><span class="ln">3581</span> p.attrs.text<span class="s"> = </span>Str(text);
+</code><code id="L3582"><span class="ln">3582</span> p.attrs.x<span class="s"> = </span>x;
+</code><code id="L3583"><span class="ln">3583</span> p.attrs.y<span class="s"> = </span>y;
+</code><code id="L3584"><span class="ln">3584</span> p.attrs.w<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3585"><span class="ln">3585</span> p.attrs.h<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3586"><span class="ln">3586</span> setFillAndStroke(p, attr);
+</code><code id="L3587"><span class="ln">3587</span> el.appendChild(o);
+</code><code id="L3588"><span class="ln">3588</span> el.appendChild(path);
+</code><code id="L3589"><span class="ln">3589</span> vml.canvas.appendChild(el);
+</code><code id="L3590"><span class="ln">3590</span> <b>var</b> skew<span class="s"> = </span>createNode(<i>"skew"</i>);
+</code><code id="L3591"><span class="ln">3591</span> skew.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3592"><span class="ln">3592</span> el.appendChild(skew);
+</code><code id="L3593"><span class="ln">3593</span> p.skew<span class="s"> = </span>skew;
+</code><code id="L3594"><span class="ln">3594</span> p.transform(E);
+</code><code id="L3595"><span class="ln">3595</span> <b>return</b> p;
+</code><code id="L3596"><span class="ln">3596</span> };
+</code><code id="L3597"><span class="ln">3597</span> setSize<span class="s"> = </span><b>function</b> (width, height) {
+</code><code id="L3598"><span class="ln">3598</span> <b>var</b> cs<span class="s"> = </span><b>this</b>.canvas.style;
+</code><code id="L3599"><span class="ln">3599</span> <b>this</b>.width<span class="s"> = </span>width;
+</code><code id="L3600"><span class="ln">3600</span> <b>this</b>.height<span class="s"> = </span>height;
+</code><code id="L3601"><span class="ln">3601</span> width<span class="s"> == </span>+width && (width += <i>"px"</i>);
+</code><code id="L3602"><span class="ln">3602</span> height<span class="s"> == </span>+height && (height += <i>"px"</i>);
+</code><code id="L3603"><span class="ln">3603</span> cs.width<span class="s"> = </span>width;
+</code><code id="L3604"><span class="ln">3604</span> cs.height<span class="s"> = </span>height;
+</code><code id="L3605"><span class="ln">3605</span> cs.clip<span class="s"> = </span><i>"rect(<span class="d">0</span> "</i><span class="s"> + </span>width<span class="s"> + </span><i>" "</i><span class="s"> + </span>height<span class="s"> + </span><i>" <span class="d">0</span>)"</i>;
+</code><code id="L3606"><span class="ln">3606</span> <b>if</b> (<b>this</b>._viewBox) {
+</code><code id="L3607"><span class="ln">3607</span> setViewBox.apply(<b>this</b>, <b>this</b>._viewBox);
+</code><code id="L3608"><span class="ln">3608</span> }
+</code><code id="L3609"><span class="ln">3609</span> <b>return</b> <b>this</b>;
+</code><code id="L3610"><span class="ln">3610</span> };
+</code><code id="L3611"><span class="ln">3611</span> setViewBox<span class="s"> = </span><b>function</b> (x, y, w, h, fit) {
+</code><code id="L3612"><span class="ln">3612</span> eve(<i>"setViewBox"</i>, <b>this</b>, <b>this</b>._viewBox, [x, y, w, h, fit]);
+</code><code id="L3613"><span class="ln">3613</span> <b>var</b> width<span class="s"> = </span><b>this</b>.width,
+</code><code id="L3614"><span class="ln">3614</span> height<span class="s"> = </span><b>this</b>.height,
+</code><code id="L3615"><span class="ln">3615</span> size<span class="s"> = </span><span class="d">1e3</span><span class="s"> * </span>mmax(w<span class="s"> / </span>width, h<span class="s"> / </span>height),
+</code><code id="L3616"><span class="ln">3616</span> H, W;
+</code><code id="L3617"><span class="ln">3617</span> <b>if</b> (fit) {
+</code><code id="L3618"><span class="ln">3618</span> H<span class="s"> = </span>height<span class="s"> / </span>h;
+</code><code id="L3619"><span class="ln">3619</span> W<span class="s"> = </span>width<span class="s"> / </span>w;
+</code><code id="L3620"><span class="ln">3620</span> <b>if</b> (w<span class="s"> * </span>H < width) {
+</code><code id="L3621"><span class="ln">3621</span> x -= (width<span class="s"> - </span>w<span class="s"> * </span>H)<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>H;
+</code><code id="L3622"><span class="ln">3622</span> }
+</code><code id="L3623"><span class="ln">3623</span> <b>if</b> (h<span class="s"> * </span>W < height) {
+</code><code id="L3624"><span class="ln">3624</span> y -= (height<span class="s"> - </span>h<span class="s"> * </span>W)<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>W;
+</code><code id="L3625"><span class="ln">3625</span> }
+</code><code id="L3626"><span class="ln">3626</span> }
+</code><code id="L3627"><span class="ln">3627</span> <b>this</b>._viewBox<span class="s"> = </span>[x, y, w, h, !!fit];
+</code><code id="L3628"><span class="ln">3628</span> <b>this</b>.forEach(<b>function</b> (el) {
+</code><code id="L3629"><span class="ln">3629</span> el.transform(<i>"+"</i>);
+</code><code id="L3630"><span class="ln">3630</span> });
+</code><code id="L3631"><span class="ln">3631</span> <span class="c">// <b>this</b>.canvas.coordsize<span class="s"> = </span>size<span class="s"> + </span>S<span class="s"> + </span>size;</span>
+</code><code id="L3632"><span class="ln">3632</span> <span class="c">// <b>this</b>.canvas.coordorigin<span class="s"> = </span>x<span class="s"> + </span>S<span class="s"> + </span>y;</span>
+</code><code id="L3633"><span class="ln">3633</span> <b>return</b> <b>this</b>;
+</code><code id="L3634"><span class="ln">3634</span> };
+</code><code id="L3635"><span class="ln">3635</span> <b>var</b> createNode,
+</code><code id="L3636"><span class="ln">3636</span> initWin<span class="s"> = </span><b>function</b> (win) {
+</code><code id="L3637"><span class="ln">3637</span> <b>var</b> doc<span class="s"> = </span>win.document;
+</code><code id="L3638"><span class="ln">3638</span> doc.createStyleSheet().addRule(<i>".rvml"</i>, <i>"behavior:url(#<b>default</b>#VML)"</i>);
+</code><code id="L3639"><span class="ln">3639</span> <b>try</b> {
+</code><code id="L3640"><span class="ln">3640</span> !doc.namespaces.rvml && doc.namespaces.add(<i>"rvml"</i>, <i>"urn:schemas-microsoft-com:vml"</i>);
+</code><code id="L3641"><span class="ln">3641</span> createNode<span class="s"> = </span><b>function</b> (tagName) {
+</code><code id="L3642"><span class="ln">3642</span> <b>return</b> doc.createElement('<rvml:'<span class="s"> + </span>tagName<span class="s"> + </span>' <b>class</b>=<i>"rvml"</i>>');
+</code><code id="L3643"><span class="ln">3643</span> };
+</code><code id="L3644"><span class="ln">3644</span> } <b>catch</b> (e) {
+</code><code id="L3645"><span class="ln">3645</span> createNode<span class="s"> = </span><b>function</b> (tagName) {
+</code><code id="L3646"><span class="ln">3646</span> <b>return</b> doc.createElement('<'<span class="s"> + </span>tagName<span class="s"> + </span>' xmlns=<i>"urn:schemas-microsoft.com:vml"</i> <b>class</b>=<i>"rvml"</i>>');
+</code><code id="L3647"><span class="ln">3647</span> };
+</code><code id="L3648"><span class="ln">3648</span> }
+</code><code id="L3649"><span class="ln">3649</span> };
+</code><code id="L3650"><span class="ln">3650</span> initWin(g.win);
+</code><code id="L3651"><span class="ln">3651</span> create<span class="s"> = </span><b>function</b> () {
+</code><code id="L3652"><span class="ln">3652</span> <b>var</b> con<span class="s"> = </span>getContainer[apply](<span class="d">0</span>, arguments),
+</code><code id="L3653"><span class="ln">3653</span> container<span class="s"> = </span>con.container,
+</code><code id="L3654"><span class="ln">3654</span> height<span class="s"> = </span>con.height,
+</code><code id="L3655"><span class="ln">3655</span> s,
+</code><code id="L3656"><span class="ln">3656</span> width<span class="s"> = </span>con.width,
+</code><code id="L3657"><span class="ln">3657</span> x<span class="s"> = </span>con.x,
+</code><code id="L3658"><span class="ln">3658</span> y<span class="s"> = </span>con.y;
+</code><code id="L3659"><span class="ln">3659</span> <b>if</b> (!container) {
+</code><code id="L3660"><span class="ln">3660</span> <b>throw</b> <b>new</b> Error(<i>"VML container not found."</i>);
+</code><code id="L3661"><span class="ln">3661</span> }
+</code><code id="L3662"><span class="ln">3662</span> <b>var</b> res<span class="s"> = </span><b>new</b> Paper,
+</code><code id="L3663"><span class="ln">3663</span> c<span class="s"> = </span>res.canvas<span class="s"> = </span>g.doc.createElement(<i>"div"</i>),
+</code><code id="L3664"><span class="ln">3664</span> cs<span class="s"> = </span>c.style;
+</code><code id="L3665"><span class="ln">3665</span> x<span class="s"> = </span>x<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3666"><span class="ln">3666</span> y<span class="s"> = </span>y<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3667"><span class="ln">3667</span> width<span class="s"> = </span>width<span class="s"> || </span><span class="d">512</span>;
+</code><code id="L3668"><span class="ln">3668</span> height<span class="s"> = </span>height<span class="s"> || </span><span class="d">342</span>;
+</code><code id="L3669"><span class="ln">3669</span> res.width<span class="s"> = </span>width;
+</code><code id="L3670"><span class="ln">3670</span> res.height<span class="s"> = </span>height;
+</code><code id="L3671"><span class="ln">3671</span> width<span class="s"> == </span>+width && (width += <i>"px"</i>);
+</code><code id="L3672"><span class="ln">3672</span> height<span class="s"> == </span>+height && (height += <i>"px"</i>);
+</code><code id="L3673"><span class="ln">3673</span> res.coordsize<span class="s"> = </span>zoom<span class="s"> * </span><span class="d">1e3</span><span class="s"> + </span>S<span class="s"> + </span>zoom<span class="s"> * </span><span class="d">1e3</span>;
+</code><code id="L3674"><span class="ln">3674</span> res.coordorigin<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span>"</i>;
+</code><code id="L3675"><span class="ln">3675</span> res.span<span class="s"> = </span>g.doc.createElement(<i>"span"</i>);
+</code><code id="L3676"><span class="ln">3676</span> res.span.style.cssText<span class="s"> = </span><i>"position:absolute;left:-9999em;top:-9999em;padding:<span class="d">0</span>;margin:<span class="d">0</span>;line-height:<span class="d">1</span>;"</i>;
+</code><code id="L3677"><span class="ln">3677</span> c.appendChild(res.span);
+</code><code id="L3678"><span class="ln">3678</span> cs.cssText<span class="s"> = </span>R.format(<i>"top:<span class="d">0</span>;left:<span class="d">0</span>;width:{<span class="d">0</span>};height:{<span class="d">1</span>};display:inline-block;position:relative;clip:rect(<span class="d">0</span> {<span class="d">0</span>} {<span class="d">1</span>} <span class="d">0</span>);overflow:hidden"</i>, width, height);
+</code><code id="L3679"><span class="ln">3679</span> <b>if</b> (container<span class="s"> == </span><span class="d">1</span>) {
+</code><code id="L3680"><span class="ln">3680</span> g.doc.body.appendChild(c);
+</code><code id="L3681"><span class="ln">3681</span> cs.left<span class="s"> = </span>x<span class="s"> + </span><i>"px"</i>;
+</code><code id="L3682"><span class="ln">3682</span> cs.top<span class="s"> = </span>y<span class="s"> + </span><i>"px"</i>;
+</code><code id="L3683"><span class="ln">3683</span> cs.position<span class="s"> = </span><i>"absolute"</i>;
+</code><code id="L3684"><span class="ln">3684</span> } <b>else</b> {
+</code><code id="L3685"><span class="ln">3685</span> <b>if</b> (container.firstChild) {
+</code><code id="L3686"><span class="ln">3686</span> container.insertBefore(c, container.firstChild);
+</code><code id="L3687"><span class="ln">3687</span> } <b>else</b> {
+</code><code id="L3688"><span class="ln">3688</span> container.appendChild(c);
+</code><code id="L3689"><span class="ln">3689</span> }
+</code><code id="L3690"><span class="ln">3690</span> }
+</code><code id="L3691"><span class="ln">3691</span> plugins.call(res, res, R.fn);
+</code><code id="L3692"><span class="ln">3692</span> <b>return</b> res;
+</code><code id="L3693"><span class="ln">3693</span> };
+</code><code id="L3694"><span class="ln">3694</span> paperproto.clear<span class="s"> = </span><b>function</b> () {
+</code><code id="L3695"><span class="ln">3695</span> eve(<i>"clear"</i>, <b>this</b>);
+</code><code id="L3696"><span class="ln">3696</span> <b>this</b>.canvas.innerHTML<span class="s"> = </span>E;
+</code><code id="L3697"><span class="ln">3697</span> <b>this</b>.span<span class="s"> = </span>g.doc.createElement(<i>"span"</i>);
+</code><code id="L3698"><span class="ln">3698</span> <b>this</b>.span.style.cssText<span class="s"> = </span><i>"position:absolute;left:-9999em;top:-9999em;padding:<span class="d">0</span>;margin:<span class="d">0</span>;line-height:<span class="d">1</span>;display:inline;"</i>;
+</code><code id="L3699"><span class="ln">3699</span> <b>this</b>.canvas.appendChild(<b>this</b>.span);
+</code><code id="L3700"><span class="ln">3700</span> <b>this</b>.bottom<span class="s"> = </span><b>this</b>.top<span class="s"> = </span><b>null</b>;
+</code><code id="L3701"><span class="ln">3701</span> };
+</code><code id="L3702"><span class="ln">3702</span> paperproto.remove<span class="s"> = </span><b>function</b> () {
+</code><code id="L3703"><span class="ln">3703</span> eve(<i>"remove"</i>, <b>this</b>);
+</code><code id="L3704"><span class="ln">3704</span> <b>this</b>.canvas.parentNode.removeChild(<b>this</b>.canvas);
+</code><code id="L3705"><span class="ln">3705</span> <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
+</code><code id="L3706"><span class="ln">3706</span> <b>this</b>[i]<span class="s"> = </span>removed(i);
+</code><code id="L3707"><span class="ln">3707</span> }
+</code><code id="L3708"><span class="ln">3708</span> <b>return</b> <b>true</b>;
+</code><code id="L3709"><span class="ln">3709</span> };
+</code><code id="L3710"><span class="ln">3710</span> }
+</code><code id="L3711"><span class="ln">3711</span>
+</code><code id="L3712"><span class="ln">3712</span> <span class="c">// WebKit rendering bug workaround method</span>
+</code><code id="L3713"><span class="ln">3713</span> <b>var</b> version<span class="s"> = </span>navigator.userAgent.match(/Version\/(.*?)\s/);
+</code><code id="L3714"><span class="ln">3714</span> <b>if</b> ((navigator.vendor<span class="s"> == </span><i>"Apple Computer, Inc."</i>) && (version && version[<span class="d">1</span>] < <span class="d">4</span><span class="s"> || </span>navigator.platform.slice(<span class="d">0</span>, <span class="d">2</span>)<span class="s"> == </span><i>"iP"</i>)) {
+</code><code id="L3715"><span class="ln">3715</span> paperproto.safari<span class="s"> = </span><b>function</b> () {
+</code><code id="L3716"><span class="ln">3716</span> <b>var</b> rect<span class="s"> = </span><b>this</b>.rect(-<span class="d">99</span>, -<span class="d">99</span>, <b>this</b>.width<span class="s"> + </span><span class="d">99</span>, <b>this</b>.height<span class="s"> + </span><span class="d">99</span>).attr({stroke: <i>"none"</i>});
+</code><code id="L3717"><span class="ln">3717</span> setTimeout(<b>function</b> () {rect.remove();});
+</code><code id="L3718"><span class="ln">3718</span> };
+</code><code id="L3719"><span class="ln">3719</span> } <b>else</b> {
+</code><code id="L3720"><span class="ln">3720</span> paperproto.safari<span class="s"> = </span>fun;
+</code><code id="L3721"><span class="ln">3721</span> }
+</code><code id="L3722"><span class="ln">3722</span>
+</code><code id="L3723"><span class="ln">3723</span> <span class="c">// Events</span>
+</code><code id="L3724"><span class="ln">3724</span> <b>var</b> preventDefault<span class="s"> = </span><b>function</b> () {
+</code><code id="L3725"><span class="ln">3725</span> <b>this</b>.returnValue<span class="s"> = </span><b>false</b>;
+</code><code id="L3726"><span class="ln">3726</span> },
+</code><code id="L3727"><span class="ln">3727</span> preventTouch<span class="s"> = </span><b>function</b> () {
+</code><code id="L3728"><span class="ln">3728</span> <b>return</b> <b>this</b>.originalEvent.preventDefault();
+</code><code id="L3729"><span class="ln">3729</span> },
+</code><code id="L3730"><span class="ln">3730</span> stopPropagation<span class="s"> = </span><b>function</b> () {
+</code><code id="L3731"><span class="ln">3731</span> <b>this</b>.cancelBubble<span class="s"> = </span><b>true</b>;
+</code><code id="L3732"><span class="ln">3732</span> },
+</code><code id="L3733"><span class="ln">3733</span> stopTouch<span class="s"> = </span><b>function</b> () {
+</code><code id="L3734"><span class="ln">3734</span> <b>return</b> <b>this</b>.originalEvent.stopPropagation();
+</code><code id="L3735"><span class="ln">3735</span> },
+</code><code id="L3736"><span class="ln">3736</span> addEvent<span class="s"> = </span>(<b>function</b> () {
+</code><code id="L3737"><span class="ln">3737</span> <b>if</b> (g.doc.addEventListener) {
+</code><code id="L3738"><span class="ln">3738</span> <b>return</b> <b>function</b> (obj, type, fn, element) {
+</code><code id="L3739"><span class="ln">3739</span> <b>var</b> realName<span class="s"> = </span>supportsTouch && touchMap[type] ? touchMap[type] : type;
+</code><code id="L3740"><span class="ln">3740</span> <b>var</b> f<span class="s"> = </span><b>function</b> (e) {
+</code><code id="L3741"><span class="ln">3741</span> <b>if</b> (supportsTouch && touchMap[has](type)) {
+</code><code id="L3742"><span class="ln">3742</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>e.targetTouches && e.targetTouches.length; i < ii; i++) {
+</code><code id="L3743"><span class="ln">3743</span> <b>if</b> (e.targetTouches[i].target<span class="s"> == </span>obj) {
+</code><code id="L3744"><span class="ln">3744</span> <b>var</b> olde<span class="s"> = </span>e;
+</code><code id="L3745"><span class="ln">3745</span> e<span class="s"> = </span>e.targetTouches[i];
+</code><code id="L3746"><span class="ln">3746</span> e.originalEvent<span class="s"> = </span>olde;
+</code><code id="L3747"><span class="ln">3747</span> e.preventDefault<span class="s"> = </span>preventTouch;
+</code><code id="L3748"><span class="ln">3748</span> e.stopPropagation<span class="s"> = </span>stopTouch;
+</code><code id="L3749"><span class="ln">3749</span> <b>break</b>;
+</code><code id="L3750"><span class="ln">3750</span> }
+</code><code id="L3751"><span class="ln">3751</span> }
+</code><code id="L3752"><span class="ln">3752</span> }
+</code><code id="L3753"><span class="ln">3753</span> <b>return</b> fn.call(element, e);
+</code><code id="L3754"><span class="ln">3754</span> };
+</code><code id="L3755"><span class="ln">3755</span> obj.addEventListener(realName, f, <b>false</b>);
+</code><code id="L3756"><span class="ln">3756</span> <b>return</b> <b>function</b> () {
+</code><code id="L3757"><span class="ln">3757</span> obj.removeEventListener(realName, f, <b>false</b>);
+</code><code id="L3758"><span class="ln">3758</span> <b>return</b> <b>true</b>;
+</code><code id="L3759"><span class="ln">3759</span> };
+</code><code id="L3760"><span class="ln">3760</span> };
+</code><code id="L3761"><span class="ln">3761</span> } <b>else</b> <b>if</b> (g.doc.attachEvent) {
+</code><code id="L3762"><span class="ln">3762</span> <b>return</b> <b>function</b> (obj, type, fn, element) {
+</code><code id="L3763"><span class="ln">3763</span> <b>var</b> f<span class="s"> = </span><b>function</b> (e) {
+</code><code id="L3764"><span class="ln">3764</span> e<span class="s"> = </span>e<span class="s"> || </span>g.win.event;
+</code><code id="L3765"><span class="ln">3765</span> e.preventDefault<span class="s"> = </span>e.preventDefault<span class="s"> || </span>preventDefault;
+</code><code id="L3766"><span class="ln">3766</span> e.stopPropagation<span class="s"> = </span>e.stopPropagation<span class="s"> || </span>stopPropagation;
+</code><code id="L3767"><span class="ln">3767</span> <b>return</b> fn.call(element, e);
+</code><code id="L3768"><span class="ln">3768</span> };
+</code><code id="L3769"><span class="ln">3769</span> obj.attachEvent(<i>"on"</i><span class="s"> + </span>type, f);
+</code><code id="L3770"><span class="ln">3770</span> <b>var</b> detacher<span class="s"> = </span><b>function</b> () {
+</code><code id="L3771"><span class="ln">3771</span> obj.detachEvent(<i>"on"</i><span class="s"> + </span>type, f);
+</code><code id="L3772"><span class="ln">3772</span> <b>return</b> <b>true</b>;
+</code><code id="L3773"><span class="ln">3773</span> };
+</code><code id="L3774"><span class="ln">3774</span> <b>return</b> detacher;
+</code><code id="L3775"><span class="ln">3775</span> };
+</code><code id="L3776"><span class="ln">3776</span> }
+</code><code id="L3777"><span class="ln">3777</span> })(),
+</code><code id="L3778"><span class="ln">3778</span> drag<span class="s"> = </span>[],
+</code><code id="L3779"><span class="ln">3779</span> dragMove<span class="s"> = </span><b>function</b> (e) {
+</code><code id="L3780"><span class="ln">3780</span> <b>var</b> x<span class="s"> = </span>e.clientX,
+</code><code id="L3781"><span class="ln">3781</span> y<span class="s"> = </span>e.clientY,
+</code><code id="L3782"><span class="ln">3782</span> scrollY<span class="s"> = </span>g.doc.documentElement.scrollTop<span class="s"> || </span>g.doc.body.scrollTop,
+</code><code id="L3783"><span class="ln">3783</span> scrollX<span class="s"> = </span>g.doc.documentElement.scrollLeft<span class="s"> || </span>g.doc.body.scrollLeft,
+</code><code id="L3784"><span class="ln">3784</span> dragi,
+</code><code id="L3785"><span class="ln">3785</span> j<span class="s"> = </span>drag.length;
+</code><code id="L3786"><span class="ln">3786</span> <b>while</b> (j--) {
+</code><code id="L3787"><span class="ln">3787</span> dragi<span class="s"> = </span>drag[j];
+</code><code id="L3788"><span class="ln">3788</span> <b>if</b> (supportsTouch) {
+</code><code id="L3789"><span class="ln">3789</span> <b>var</b> i<span class="s"> = </span>e.touches.length,
+</code><code id="L3790"><span class="ln">3790</span> touch;
+</code><code id="L3791"><span class="ln">3791</span> <b>while</b> (i--) {
+</code><code id="L3792"><span class="ln">3792</span> touch<span class="s"> = </span>e.touches[i];
+</code><code id="L3793"><span class="ln">3793</span> <b>if</b> (touch.identifier<span class="s"> == </span>dragi.el._drag.id) {
+</code><code id="L3794"><span class="ln">3794</span> x<span class="s"> = </span>touch.clientX;
+</code><code id="L3795"><span class="ln">3795</span> y<span class="s"> = </span>touch.clientY;
+</code><code id="L3796"><span class="ln">3796</span> (e.originalEvent ? e.originalEvent : e).preventDefault();
+</code><code id="L3797"><span class="ln">3797</span> <b>break</b>;
+</code><code id="L3798"><span class="ln">3798</span> }
+</code><code id="L3799"><span class="ln">3799</span> }
+</code><code id="L3800"><span class="ln">3800</span> } <b>else</b> {
+</code><code id="L3801"><span class="ln">3801</span> e.preventDefault();
+</code><code id="L3802"><span class="ln">3802</span> }
+</code><code id="L3803"><span class="ln">3803</span> <b>var</b> node<span class="s"> = </span>dragi.el.node,
+</code><code id="L3804"><span class="ln">3804</span> o,
+</code><code id="L3805"><span class="ln">3805</span> next<span class="s"> = </span>node.nextSibling,
+</code><code id="L3806"><span class="ln">3806</span> parent<span class="s"> = </span>node.parentNode,
+</code><code id="L3807"><span class="ln">3807</span> display<span class="s"> = </span>node.style.display;
+</code><code id="L3808"><span class="ln">3808</span> g.win.opera && parent.removeChild(node);
+</code><code id="L3809"><span class="ln">3809</span> node.style.display<span class="s"> = </span><i>"none"</i>;
+</code><code id="L3810"><span class="ln">3810</span> o<span class="s"> = </span>dragi.el.paper.getElementByPoint(x, y);
+</code><code id="L3811"><span class="ln">3811</span> node.style.display<span class="s"> = </span>display;
+</code><code id="L3812"><span class="ln">3812</span> g.win.opera && (next ? parent.insertBefore(node, next) : parent.appendChild(node));
+</code><code id="L3813"><span class="ln">3813</span> o && eve(<i>"drag.over."</i><span class="s"> + </span>dragi.el.id, dragi.el, o);
+</code><code id="L3814"><span class="ln">3814</span> x += scrollX;
+</code><code id="L3815"><span class="ln">3815</span> y += scrollY;
+</code><code id="L3816"><span class="ln">3816</span> eve(<i>"drag.move."</i><span class="s"> + </span>dragi.el.id, dragi.move_scope<span class="s"> || </span>dragi.el, x<span class="s"> - </span>dragi.el._drag.x, y<span class="s"> - </span>dragi.el._drag.y, x, y, e);
+</code><code id="L3817"><span class="ln">3817</span> }
+</code><code id="L3818"><span class="ln">3818</span> },
+</code><code id="L3819"><span class="ln">3819</span> dragUp<span class="s"> = </span><b>function</b> (e) {
+</code><code id="L3820"><span class="ln">3820</span> R.unmousemove(dragMove).unmouseup(dragUp);
+</code><code id="L3821"><span class="ln">3821</span> <b>var</b> i<span class="s"> = </span>drag.length,
+</code><code id="L3822"><span class="ln">3822</span> dragi;
+</code><code id="L3823"><span class="ln">3823</span> <b>while</b> (i--) {
+</code><code id="L3824"><span class="ln">3824</span> dragi<span class="s"> = </span>drag[i];
+</code><code id="L3825"><span class="ln">3825</span> dragi.el._drag<span class="s"> = </span>{};
+</code><code id="L3826"><span class="ln">3826</span> eve(<i>"drag.end."</i><span class="s"> + </span>dragi.el.id, dragi.end_scope<span class="s"> || </span>dragi.start_scope<span class="s"> || </span>dragi.move_scope<span class="s"> || </span>dragi.el, e);
+</code><code id="L3827"><span class="ln">3827</span> }
+</code><code id="L3828"><span class="ln">3828</span> drag<span class="s"> = </span>[];
+</code><code id="L3829"><span class="ln">3829</span> };
+</code><code id="L3830"><span class="ln">3830</span> <b>for</b> (<b>var</b> i<span class="s"> = </span>events.length; i--;) {
+</code><code id="L3831"><span class="ln">3831</span> (<b>function</b> (eventName) {
+</code><code id="L3832"><span class="ln">3832</span> R[eventName]<span class="s"> = </span>Element.prototype[eventName]<span class="s"> = </span><b>function</b> (fn, scope) {
+</code><code id="L3833"><span class="ln">3833</span> <b>if</b> (R.is(fn, <i>"<b>function</b>"</i>)) {
+</code><code id="L3834"><span class="ln">3834</span> <b>this</b>.events<span class="s"> = </span><b>this</b>.events<span class="s"> || </span>[];
+</code><code id="L3835"><span class="ln">3835</span> <b>this</b>.events.push({name: eventName, f: fn, unbind: addEvent(<b>this</b>.shape<span class="s"> || </span><b>this</b>.node<span class="s"> || </span>g.doc, eventName, fn, scope<span class="s"> || </span><b>this</b>)});
+</code><code id="L3836"><span class="ln">3836</span> }
+</code><code id="L3837"><span class="ln">3837</span> <b>return</b> <b>this</b>;
+</code><code id="L3838"><span class="ln">3838</span> };
+</code><code id="L3839"><span class="ln">3839</span> R[<i>"un"</i><span class="s"> + </span>eventName]<span class="s"> = </span>Element.prototype[<i>"un"</i><span class="s"> + </span>eventName]<span class="s"> = </span><b>function</b> (fn) {
+</code><code id="L3840"><span class="ln">3840</span> <b>var</b> events<span class="s"> = </span><b>this</b>.events,
+</code><code id="L3841"><span class="ln">3841</span> l<span class="s"> = </span>events.length;
+</code><code id="L3842"><span class="ln">3842</span> <b>while</b> (l--) <b>if</b> (events[l].name<span class="s"> == </span>eventName && events[l].f<span class="s"> == </span>fn) {
+</code><code id="L3843"><span class="ln">3843</span> events[l].unbind();
+</code><code id="L3844"><span class="ln">3844</span> events.splice(l, <span class="d">1</span>);
+</code><code id="L3845"><span class="ln">3845</span> !events.length && <b>delete</b> <b>this</b>.events;
+</code><code id="L3846"><span class="ln">3846</span> <b>return</b> <b>this</b>;
+</code><code id="L3847"><span class="ln">3847</span> }
+</code><code id="L3848"><span class="ln">3848</span> <b>return</b> <b>this</b>;
+</code><code id="L3849"><span class="ln">3849</span> };
+</code><code id="L3850"><span class="ln">3850</span> })(events[i]);
+</code><code id="L3851"><span class="ln">3851</span> }
+</code><code id="L3852"><span class="ln">3852</span> elproto.hover<span class="s"> = </span><b>function</b> (f_in, f_out, scope_in, scope_out) {
+</code><code id="L3853"><span class="ln">3853</span> <b>return</b> <b>this</b>.mouseover(f_in, scope_in).mouseout(f_out, scope_out<span class="s"> || </span>scope_in);
+</code><code id="L3854"><span class="ln">3854</span> };
+</code><code id="L3855"><span class="ln">3855</span> elproto.unhover<span class="s"> = </span><b>function</b> (f_in, f_out) {
+</code><code id="L3856"><span class="ln">3856</span> <b>return</b> <b>this</b>.unmouseover(f_in).unmouseout(f_out);
+</code><code id="L3857"><span class="ln">3857</span> };
+</code><code id="L3858"><span class="ln">3858</span> elproto.drag<span class="s"> = </span><b>function</b> (onmove, onstart, onend, move_scope, start_scope, end_scope) {
+</code><code id="L3859"><span class="ln">3859</span> <b>function</b> start(e) {
+</code><code id="L3860"><span class="ln">3860</span> (e.originalEvent<span class="s"> || </span>e).preventDefault();
+</code><code id="L3861"><span class="ln">3861</span> <b>var</b> scrollY<span class="s"> = </span>g.doc.documentElement.scrollTop<span class="s"> || </span>g.doc.body.scrollTop,
+</code><code id="L3862"><span class="ln">3862</span> scrollX<span class="s"> = </span>g.doc.documentElement.scrollLeft<span class="s"> || </span>g.doc.body.scrollLeft;
+</code><code id="L3863"><span class="ln">3863</span> <b>this</b>._drag.x<span class="s"> = </span>e.clientX<span class="s"> + </span>scrollX;
+</code><code id="L3864"><span class="ln">3864</span> <b>this</b>._drag.y<span class="s"> = </span>e.clientY<span class="s"> + </span>scrollY;
+</code><code id="L3865"><span class="ln">3865</span> <b>this</b>._drag.id<span class="s"> = </span>e.identifier;
+</code><code id="L3866"><span class="ln">3866</span> !drag.length && R.mousemove(dragMove).mouseup(dragUp);
+</code><code id="L3867"><span class="ln">3867</span> drag.push({el: <b>this</b>, move_scope: move_scope, start_scope: start_scope, end_scope: end_scope});
+</code><code id="L3868"><span class="ln">3868</span> onstart && eve.on(<i>"drag.start."</i><span class="s"> + </span><b>this</b>.id, onstart);
+</code><code id="L3869"><span class="ln">3869</span> onmove && eve.on(<i>"drag.move."</i><span class="s"> + </span><b>this</b>.id, onmove);
+</code><code id="L3870"><span class="ln">3870</span> onend && eve.on(<i>"drag.end."</i><span class="s"> + </span><b>this</b>.id, onend);
+</code><code id="L3871"><span class="ln">3871</span> eve(<i>"drag.start."</i><span class="s"> + </span><b>this</b>.id, start_scope<span class="s"> || </span>move_scope<span class="s"> || </span><b>this</b>, e.clientX<span class="s"> + </span>scrollX, e.clientY<span class="s"> + </span>scrollY, e);
+</code><code id="L3872"><span class="ln">3872</span> }
+</code><code id="L3873"><span class="ln">3873</span> <b>this</b>._drag<span class="s"> = </span>{};
+</code><code id="L3874"><span class="ln">3874</span> <b>this</b>.mousedown(start);
+</code><code id="L3875"><span class="ln">3875</span> <b>return</b> <b>this</b>;
+</code><code id="L3876"><span class="ln">3876</span> };
+</code><code id="L3877"><span class="ln">3877</span> elproto.onDragOver<span class="s"> = </span><b>function</b> (f) {
+</code><code id="L3878"><span class="ln">3878</span> f ? eve.on(<i>"drag.over."</i><span class="s"> + </span><b>this</b>.id, f) : eve.unbind(<i>"drag.over."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L3879"><span class="ln">3879</span> };
+</code><code id="L3880"><span class="ln">3880</span> elproto.undrag<span class="s"> = </span><b>function</b> () {
+</code><code id="L3881"><span class="ln">3881</span> <b>var</b> i<span class="s"> = </span>drag.length;
+</code><code id="L3882"><span class="ln">3882</span> <b>while</b> (i--) <b>if</b> (drag[i].el<span class="s"> == </span><b>this</b>) {
+</code><code id="L3883"><span class="ln">3883</span> R.unmousedown(drag[i].start);
+</code><code id="L3884"><span class="ln">3884</span> drag.splice(i++, <span class="d">1</span>);
+</code><code id="L3885"><span class="ln">3885</span> eve.unbind(<i>"drag.*."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L3886"><span class="ln">3886</span> }
+</code><code id="L3887"><span class="ln">3887</span> !drag.length && R.unmousemove(dragMove).unmouseup(dragUp);
+</code><code id="L3888"><span class="ln">3888</span> };
+</code><code id="L3889"><span class="ln">3889</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L3890"><span class="ln">3890</span><span class="c"> <span class="s"> * </span>Paper.circle
+</span></code><code id="L3891"><span class="ln">3891</span><span class="c"> [ method ]
+</span></code><code id="L3892"><span class="ln">3892</span><span class="c"> **
+</span></code><code id="L3893"><span class="ln">3893</span><span class="c"> <span class="s"> * </span>Draws a circle.
+</span></code><code id="L3894"><span class="ln">3894</span><span class="c"> **
+</span></code><code id="L3895"><span class="ln">3895</span><span class="c"> > Parameters
+</span></code><code id="L3896"><span class="ln">3896</span><span class="c"> **
+</span></code><code id="L3897"><span class="ln">3897</span><span class="c"> <span class="s"> - </span>x (number) x coordinate of the centre
+</span></code><code id="L3898"><span class="ln">3898</span><span class="c"> <span class="s"> - </span>y (number) y coordinate of the centre
+</span></code><code id="L3899"><span class="ln">3899</span><span class="c"> <span class="s"> - </span>r (number) radius
+</span></code><code id="L3900"><span class="ln">3900</span><span class="c"> <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “circle”
+</span></code><code id="L3901"><span class="ln">3901</span><span class="c"> **
+</span></code><code id="L3902"><span class="ln">3902</span><span class="c"> > Usage
+</span></code><code id="L3903"><span class="ln">3903</span><span class="c"> | <b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>);
+</span></code><code id="L3904"><span class="ln">3904</span><span class="c"> \*/</span>
+</code><code id="L3905"><span class="ln">3905</span> paperproto.circle<span class="s"> = </span><b>function</b> (x, y, r) {
+</code><code id="L3906"><span class="ln">3906</span> <b>return</b> theCircle(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, r<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L3907"><span class="ln">3907</span> };
+</code><code id="L3908"><span class="ln">3908</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L3909"><span class="ln">3909</span><span class="c"> <span class="s"> * </span>Paper.rect
+</span></code><code id="L3910"><span class="ln">3910</span><span class="c"> [ method ]
+</span></code><code id="L3911"><span class="ln">3911</span><span class="c"> *
+</span></code><code id="L3912"><span class="ln">3912</span><span class="c"> <span class="s"> * </span>Draws a rectangle.
+</span></code><code id="L3913"><span class="ln">3913</span><span class="c"> **
+</span></code><code id="L3914"><span class="ln">3914</span><span class="c"> > Parameters
+</span></code><code id="L3915"><span class="ln">3915</span><span class="c"> **
+</span></code><code id="L3916"><span class="ln">3916</span><span class="c"> <span class="s"> - </span>x (number) x coordinate of the top left corner
+</span></code><code id="L3917"><span class="ln">3917</span><span class="c"> <span class="s"> - </span>y (number) y coordinate of the top left corner
+</span></code><code id="L3918"><span class="ln">3918</span><span class="c"> <span class="s"> - </span>width (number) width
+</span></code><code id="L3919"><span class="ln">3919</span><span class="c"> <span class="s"> - </span>height (number) height
+</span></code><code id="L3920"><span class="ln">3920</span><span class="c"> <span class="s"> - </span>r (number) @optional radius <b>for</b> rounded corners, <b>default</b> is <span class="d">0</span>
+</span></code><code id="L3921"><span class="ln">3921</span><span class="c"> <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “rect”
+</span></code><code id="L3922"><span class="ln">3922</span><span class="c"> **
+</span></code><code id="L3923"><span class="ln">3923</span><span class="c"> > Usage
+</span></code><code id="L3924"><span class="ln">3924</span><span class="c"> | <span class="c">// regular rectangle</span>
+</span></code><code id="L3925"><span class="ln">3925</span><span class="c"> | <b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">10</span>, <span class="d">50</span>, <span class="d">50</span>);
+</span></code><code id="L3926"><span class="ln">3926</span><span class="c"> | <span class="c">// rectangle <b>with</b> rounded corners</span>
+</span></code><code id="L3927"><span class="ln">3927</span><span class="c"> | <b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">40</span>, <span class="d">40</span>, <span class="d">50</span>, <span class="d">50</span>, <span class="d">10</span>);
+</span></code><code id="L3928"><span class="ln">3928</span><span class="c"> \*/</span>
+</code><code id="L3929"><span class="ln">3929</span> paperproto.rect<span class="s"> = </span><b>function</b> (x, y, w, h, r) {
+</code><code id="L3930"><span class="ln">3930</span> <b>return</b> theRect(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, w<span class="s"> || </span><span class="d">0</span>, h<span class="s"> || </span><span class="d">0</span>, r<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L3931"><span class="ln">3931</span> };
+</code><code id="L3932"><span class="ln">3932</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L3933"><span class="ln">3933</span><span class="c"> <span class="s"> * </span>Paper.ellipse
+</span></code><code id="L3934"><span class="ln">3934</span><span class="c"> [ method ]
+</span></code><code id="L3935"><span class="ln">3935</span><span class="c"> **
+</span></code><code id="L3936"><span class="ln">3936</span><span class="c"> <span class="s"> * </span>Draws an ellipse.
+</span></code><code id="L3937"><span class="ln">3937</span><span class="c"> **
+</span></code><code id="L3938"><span class="ln">3938</span><span class="c"> > Parameters
+</span></code><code id="L3939"><span class="ln">3939</span><span class="c"> **
+</span></code><code id="L3940"><span class="ln">3940</span><span class="c"> <span class="s"> - </span>x (number) x coordinate of the centre
+</span></code><code id="L3941"><span class="ln">3941</span><span class="c"> <span class="s"> - </span>y (number) y coordinate of the centre
+</span></code><code id="L3942"><span class="ln">3942</span><span class="c"> <span class="s"> - </span>rx (number) horisontal radius
+</span></code><code id="L3943"><span class="ln">3943</span><span class="c"> <span class="s"> - </span>ry (number) vertical radius
+</span></code><code id="L3944"><span class="ln">3944</span><span class="c"> <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “ellipse”
+</span></code><code id="L3945"><span class="ln">3945</span><span class="c"> **
+</span></code><code id="L3946"><span class="ln">3946</span><span class="c"> > Usage
+</span></code><code id="L3947"><span class="ln">3947</span><span class="c"> | <b>var</b> c<span class="s"> = </span>paper.ellipse(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>, <span class="d">20</span>);
+</span></code><code id="L3948"><span class="ln">3948</span><span class="c"> \*/</span>
+</code><code id="L3949"><span class="ln">3949</span> paperproto.ellipse<span class="s"> = </span><b>function</b> (x, y, rx, ry) {
+</code><code id="L3950"><span class="ln">3950</span> <b>return</b> theEllipse(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, rx<span class="s"> || </span><span class="d">0</span>, ry<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L3951"><span class="ln">3951</span> };
+</code><code id="L3952"><span class="ln">3952</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L3953"><span class="ln">3953</span><span class="c"> <span class="s"> * </span>Paper.path
+</span></code><code id="L3954"><span class="ln">3954</span><span class="c"> [ method ]
+</span></code><code id="L3955"><span class="ln">3955</span><span class="c"> **
+</span></code><code id="L3956"><span class="ln">3956</span><span class="c"> <span class="s"> * </span>Creates a path element by given path data string.
+</span></code><code id="L3957"><span class="ln">3957</span><span class="c"> **
+</span></code><code id="L3958"><span class="ln">3958</span><span class="c"> > Parameters
+</span></code><code id="L3959"><span class="ln">3959</span><span class="c"> **
+</span></code><code id="L3960"><span class="ln">3960</span><span class="c"> <span class="s"> - </span>pathString (string) path data <b>in</b> SVG path string format.
+</span></code><code id="L3961"><span class="ln">3961</span><span class="c"> <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “ellipse”
+</span></code><code id="L3962"><span class="ln">3962</span><span class="c"> # Details of a path's data attribute's format are described <b>in</b> the <a href=<i>"http:<span class="c">//www.w3.org/TR/SVG/paths.html#PathData"</i>>SVG specification</a>.</span>
+</span></code><code id="L3963"><span class="ln">3963</span><span class="c"> **
+</span></code><code id="L3964"><span class="ln">3964</span><span class="c"> > Usage
+</span></code><code id="L3965"><span class="ln">3965</span><span class="c"> | <b>var</b> c<span class="s"> = </span>paper.path(<i>"M10 10L90 <span class="d">90</span>"</i>);
+</span></code><code id="L3966"><span class="ln">3966</span><span class="c"> | <span class="c">// draw a diagonal line:</span>
+</span></code><code id="L3967"><span class="ln">3967</span><span class="c"> | <span class="c">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
+</span></code><code id="L3968"><span class="ln">3968</span><span class="c"> \*/</span>
+</code><code id="L3969"><span class="ln">3969</span> paperproto.path<span class="s"> = </span><b>function</b> (pathString) {
+</code><code id="L3970"><span class="ln">3970</span> pathString && !R.is(pathString, string) && !R.is(pathString[<span class="d">0</span>], array) && (pathString += E);
+</code><code id="L3971"><span class="ln">3971</span> <b>return</b> thePath(R.format[apply](R, arguments), <b>this</b>);
+</code><code id="L3972"><span class="ln">3972</span> };
+</code><code id="L3973"><span class="ln">3973</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L3974"><span class="ln">3974</span><span class="c"> <span class="s"> * </span>Paper.image
+</span></code><code id="L3975"><span class="ln">3975</span><span class="c"> [ method ]
+</span></code><code id="L3976"><span class="ln">3976</span><span class="c"> **
+</span></code><code id="L3977"><span class="ln">3977</span><span class="c"> <span class="s"> * </span>Embeds an image into the surface.
+</span></code><code id="L3978"><span class="ln">3978</span><span class="c"> **
+</span></code><code id="L3979"><span class="ln">3979</span><span class="c"> > Parameters
+</span></code><code id="L3980"><span class="ln">3980</span><span class="c"> **
+</span></code><code id="L3981"><span class="ln">3981</span><span class="c"> <span class="s"> - </span>src (string) URI of the source image
+</span></code><code id="L3982"><span class="ln">3982</span><span class="c"> <span class="s"> - </span>x (number) x coordinate position
+</span></code><code id="L3983"><span class="ln">3983</span><span class="c"> <span class="s"> - </span>y (number) y coordinate position
+</span></code><code id="L3984"><span class="ln">3984</span><span class="c"> <span class="s"> - </span>width (number) width of the image
+</span></code><code id="L3985"><span class="ln">3985</span><span class="c"> <span class="s"> - </span>height (number) height of the image
+</span></code><code id="L3986"><span class="ln">3986</span><span class="c"> <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “image”
+</span></code><code id="L3987"><span class="ln">3987</span><span class="c"> **
+</span></code><code id="L3988"><span class="ln">3988</span><span class="c"> > Usage
+</span></code><code id="L3989"><span class="ln">3989</span><span class="c"> | <b>var</b> c<span class="s"> = </span>paper.image(<i>"apple.png"</i>, <span class="d">10</span>, <span class="d">10</span>, <span class="d">80</span>, <span class="d">80</span>);
+</span></code><code id="L3990"><span class="ln">3990</span><span class="c"> \*/</span>
+</code><code id="L3991"><span class="ln">3991</span> paperproto.image<span class="s"> = </span><b>function</b> (src, x, y, w, h) {
+</code><code id="L3992"><span class="ln">3992</span> <b>return</b> theImage(<b>this</b>, src<span class="s"> || </span><i>"about:blank"</i>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, w<span class="s"> || </span><span class="d">0</span>, h<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L3993"><span class="ln">3993</span> };
+</code><code id="L3994"><span class="ln">3994</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L3995"><span class="ln">3995</span><span class="c"> <span class="s"> * </span>Paper.text
+</span></code><code id="L3996"><span class="ln">3996</span><span class="c"> [ method ]
+</span></code><code id="L3997"><span class="ln">3997</span><span class="c"> **
+</span></code><code id="L3998"><span class="ln">3998</span><span class="c"> <span class="s"> * </span>Draws a text string. If you need line breaks, put “\n” <b>in</b> the string.
+</span></code><code id="L3999"><span class="ln">3999</span><span class="c"> **
+</span></code><code id="L4000"><span class="ln">4000</span><span class="c"> > Parameters
+</span></code><code id="L4001"><span class="ln">4001</span><span class="c"> **
+</span></code><code id="L4002"><span class="ln">4002</span><span class="c"> <span class="s"> - </span>x (number) x coordinate position
+</span></code><code id="L4003"><span class="ln">4003</span><span class="c"> <span class="s"> - </span>y (number) y coordinate position
+</span></code><code id="L4004"><span class="ln">4004</span><span class="c"> <span class="s"> - </span>text (string) The text string to draw
+</span></code><code id="L4005"><span class="ln">4005</span><span class="c"> <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “text”
+</span></code><code id="L4006"><span class="ln">4006</span><span class="c"> **
+</span></code><code id="L4007"><span class="ln">4007</span><span class="c"> > Usage
+</span></code><code id="L4008"><span class="ln">4008</span><span class="c"> | <b>var</b> t<span class="s"> = </span>paper.text(<span class="d">50</span>, <span class="d">50</span>, <i>"Raphaël\nkicks\nbutt!"</i>);
+</span></code><code id="L4009"><span class="ln">4009</span><span class="c"> \*/</span>
+</code><code id="L4010"><span class="ln">4010</span> paperproto.text<span class="s"> = </span><b>function</b> (x, y, text) {
+</code><code id="L4011"><span class="ln">4011</span> <b>return</b> theText(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, Str(text));
+</code><code id="L4012"><span class="ln">4012</span> };
+</code><code id="L4013"><span class="ln">4013</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4014"><span class="ln">4014</span><span class="c"> <span class="s"> * </span>Paper.set
+</span></code><code id="L4015"><span class="ln">4015</span><span class="c"> [ method ]
+</span></code><code id="L4016"><span class="ln">4016</span><span class="c"> **
+</span></code><code id="L4017"><span class="ln">4017</span><span class="c"> <span class="s"> * </span>Creates array-like object to keep and operate couple of elements at once.
+</span></code><code id="L4018"><span class="ln">4018</span><span class="c"> <span class="s"> * </span>Warning: it doesn’t create any elements <b>for</b> itself <b>in</b> the page.
+</span></code><code id="L4019"><span class="ln">4019</span><span class="c"> <span class="s"> = </span>(object) array-like object that represents set of elements
+</span></code><code id="L4020"><span class="ln">4020</span><span class="c"> **
+</span></code><code id="L4021"><span class="ln">4021</span><span class="c"> > Usage
+</span></code><code id="L4022"><span class="ln">4022</span><span class="c"> | <b>var</b> st<span class="s"> = </span>paper.set();
+</span></code><code id="L4023"><span class="ln">4023</span><span class="c"> | st.push(
+</span></code><code id="L4024"><span class="ln">4024</span><span class="c"> | paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
+</span></code><code id="L4025"><span class="ln">4025</span><span class="c"> | paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
+</span></code><code id="L4026"><span class="ln">4026</span><span class="c"> | );
+</span></code><code id="L4027"><span class="ln">4027</span><span class="c"> | st.attr({fill: <i>"red"</i>});
+</span></code><code id="L4028"><span class="ln">4028</span><span class="c"> \*/</span>
+</code><code id="L4029"><span class="ln">4029</span> paperproto.set<span class="s"> = </span><b>function</b> (itemsArray) {
+</code><code id="L4030"><span class="ln">4030</span> arguments.length > <span class="d">1</span> && (itemsArray<span class="s"> = </span>Array.prototype.splice.call(arguments, <span class="d">0</span>, arguments.length));
+</code><code id="L4031"><span class="ln">4031</span> <b>return</b> <b>new</b> Set(itemsArray);
+</code><code id="L4032"><span class="ln">4032</span> };
+</code><code id="L4033"><span class="ln">4033</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4034"><span class="ln">4034</span><span class="c"> <span class="s"> * </span>Paper.setSize
+</span></code><code id="L4035"><span class="ln">4035</span><span class="c"> [ method ]
+</span></code><code id="L4036"><span class="ln">4036</span><span class="c"> **
+</span></code><code id="L4037"><span class="ln">4037</span><span class="c"> <span class="s"> * </span>If you need to change dimensions of the canvas call <b>this</b> method
+</span></code><code id="L4038"><span class="ln">4038</span><span class="c"> **
+</span></code><code id="L4039"><span class="ln">4039</span><span class="c"> > Parameters
+</span></code><code id="L4040"><span class="ln">4040</span><span class="c"> **
+</span></code><code id="L4041"><span class="ln">4041</span><span class="c"> <span class="s"> - </span>width (number) <b>new</b> width of the canvas
+</span></code><code id="L4042"><span class="ln">4042</span><span class="c"> <span class="s"> - </span>height (number) <b>new</b> height of the canvas
+</span></code><code id="L4043"><span class="ln">4043</span><span class="c"> > Usage
+</span></code><code id="L4044"><span class="ln">4044</span><span class="c"> | <b>var</b> st<span class="s"> = </span>paper.set();
+</span></code><code id="L4045"><span class="ln">4045</span><span class="c"> | st.push(
+</span></code><code id="L4046"><span class="ln">4046</span><span class="c"> | paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
+</span></code><code id="L4047"><span class="ln">4047</span><span class="c"> | paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
+</span></code><code id="L4048"><span class="ln">4048</span><span class="c"> | );
+</span></code><code id="L4049"><span class="ln">4049</span><span class="c"> | st.attr({fill: <i>"red"</i>});
+</span></code><code id="L4050"><span class="ln">4050</span><span class="c"> \*/</span>
+</code><code id="L4051"><span class="ln">4051</span> paperproto.setSize<span class="s"> = </span>setSize;
+</code><code id="L4052"><span class="ln">4052</span> paperproto.setViewBox<span class="s"> = </span>setViewBox;
+</code><code id="L4053"><span class="ln">4053</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4054"><span class="ln">4054</span><span class="c"> <span class="s"> * </span>Paper.top
+</span></code><code id="L4055"><span class="ln">4055</span><span class="c"> [ property ]
+</span></code><code id="L4056"><span class="ln">4056</span><span class="c"> **
+</span></code><code id="L4057"><span class="ln">4057</span><span class="c"> <span class="s"> * </span>Points to the topmost element on the paper
+</span></code><code id="L4058"><span class="ln">4058</span><span class="c"> \*/</span>
+</code><code id="L4059"><span class="ln">4059</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4060"><span class="ln">4060</span><span class="c"> <span class="s"> * </span>Paper.bottom
+</span></code><code id="L4061"><span class="ln">4061</span><span class="c"> [ property ]
+</span></code><code id="L4062"><span class="ln">4062</span><span class="c"> **
+</span></code><code id="L4063"><span class="ln">4063</span><span class="c"> <span class="s"> * </span>Points to the bottom element on the paper
+</span></code><code id="L4064"><span class="ln">4064</span><span class="c"> \*/</span>
+</code><code id="L4065"><span class="ln">4065</span> paperproto.top<span class="s"> = </span>paperproto.bottom<span class="s"> = </span><b>null</b>;
+</code><code id="L4066"><span class="ln">4066</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4067"><span class="ln">4067</span><span class="c"> <span class="s"> * </span>Paper.raphael
+</span></code><code id="L4068"><span class="ln">4068</span><span class="c"> [ property ]
+</span></code><code id="L4069"><span class="ln">4069</span><span class="c"> **
+</span></code><code id="L4070"><span class="ln">4070</span><span class="c"> <span class="s"> * </span>Points to the @Raphael object/<b>function</b>
+</span></code><code id="L4071"><span class="ln">4071</span><span class="c"> \*/</span>
+</code><code id="L4072"><span class="ln">4072</span> paperproto.raphael<span class="s"> = </span>R;
+</code><code id="L4073"><span class="ln">4073</span> <b>var</b> getOffset<span class="s"> = </span><b>function</b> (elem) {
+</code><code id="L4074"><span class="ln">4074</span> <b>var</b> box<span class="s"> = </span>elem.getBoundingClientRect(),
+</code><code id="L4075"><span class="ln">4075</span> doc<span class="s"> = </span>elem.ownerDocument,
+</code><code id="L4076"><span class="ln">4076</span> body<span class="s"> = </span>doc.body,
+</code><code id="L4077"><span class="ln">4077</span> docElem<span class="s"> = </span>doc.documentElement,
+</code><code id="L4078"><span class="ln">4078</span> clientTop<span class="s"> = </span>docElem.clientTop<span class="s"> || </span>body.clientTop<span class="s"> || </span><span class="d">0</span>, clientLeft<span class="s"> = </span>docElem.clientLeft<span class="s"> || </span>body.clientLeft<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L4079"><span class="ln">4079</span> top <span class="s"> = </span>box.top <span class="s"> + </span>(g.win.pageYOffset<span class="s"> || </span>docElem.scrollTop<span class="s"> || </span>body.scrollTop )<span class="s"> - </span>clientTop,
+</code><code id="L4080"><span class="ln">4080</span> left<span class="s"> = </span>box.left<span class="s"> + </span>(g.win.pageXOffset<span class="s"> || </span>docElem.scrollLeft<span class="s"> || </span>body.scrollLeft)<span class="s"> - </span>clientLeft;
+</code><code id="L4081"><span class="ln">4081</span> <b>return</b> {
+</code><code id="L4082"><span class="ln">4082</span> y: top,
+</code><code id="L4083"><span class="ln">4083</span> x: left
+</code><code id="L4084"><span class="ln">4084</span> };
+</code><code id="L4085"><span class="ln">4085</span> };
+</code><code id="L4086"><span class="ln">4086</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4087"><span class="ln">4087</span><span class="c"> <span class="s"> * </span>Paper.getElementByPoint
+</span></code><code id="L4088"><span class="ln">4088</span><span class="c"> [ method ]
+</span></code><code id="L4089"><span class="ln">4089</span><span class="c"> **
+</span></code><code id="L4090"><span class="ln">4090</span><span class="c"> <span class="s"> * </span>Returns you topmost element under given point.
+</span></code><code id="L4091"><span class="ln">4091</span><span class="c"> **
+</span></code><code id="L4092"><span class="ln">4092</span><span class="c"> <span class="s"> = </span>(object) Raphaël element object
+</span></code><code id="L4093"><span class="ln">4093</span><span class="c"> > Parameters
+</span></code><code id="L4094"><span class="ln">4094</span><span class="c"> **
+</span></code><code id="L4095"><span class="ln">4095</span><span class="c"> <span class="s"> - </span>x (number) x coordinate from the top left corner of the window
+</span></code><code id="L4096"><span class="ln">4096</span><span class="c"> <span class="s"> - </span>y (number) y coordinate from the top left corner of the window
+</span></code><code id="L4097"><span class="ln">4097</span><span class="c"> > Usage
+</span></code><code id="L4098"><span class="ln">4098</span><span class="c"> | paper.getElementByPoint(mouseX, mouseY).attr({stroke: <i>"#f00"</i>});
+</span></code><code id="L4099"><span class="ln">4099</span><span class="c"> \*/</span>
+</code><code id="L4100"><span class="ln">4100</span> paperproto.getElementByPoint<span class="s"> = </span><b>function</b> (x, y) {
+</code><code id="L4101"><span class="ln">4101</span> <b>var</b> paper<span class="s"> = </span><b>this</b>,
+</code><code id="L4102"><span class="ln">4102</span> svg<span class="s"> = </span>paper.canvas,
+</code><code id="L4103"><span class="ln">4103</span> target<span class="s"> = </span>g.doc.elementFromPoint(x, y);
+</code><code id="L4104"><span class="ln">4104</span> <b>if</b> (g.win.opera && target.tagName<span class="s"> == </span><i>"svg"</i>) {
+</code><code id="L4105"><span class="ln">4105</span> <b>var</b> so<span class="s"> = </span>getOffset(svg),
+</code><code id="L4106"><span class="ln">4106</span> sr<span class="s"> = </span>svg.createSVGRect();
+</code><code id="L4107"><span class="ln">4107</span> sr.x<span class="s"> = </span>x<span class="s"> - </span>so.x;
+</code><code id="L4108"><span class="ln">4108</span> sr.y<span class="s"> = </span>y<span class="s"> - </span>so.y;
+</code><code id="L4109"><span class="ln">4109</span> sr.width<span class="s"> = </span>sr.height<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L4110"><span class="ln">4110</span> <b>var</b> hits<span class="s"> = </span>svg.getIntersectionList(sr, <b>null</b>);
+</code><code id="L4111"><span class="ln">4111</span> <b>if</b> (hits.length) {
+</code><code id="L4112"><span class="ln">4112</span> target<span class="s"> = </span>hits[hits.length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L4113"><span class="ln">4113</span> }
+</code><code id="L4114"><span class="ln">4114</span> }
+</code><code id="L4115"><span class="ln">4115</span> <b>if</b> (!target) {
+</code><code id="L4116"><span class="ln">4116</span> <b>return</b> <b>null</b>;
+</code><code id="L4117"><span class="ln">4117</span> }
+</code><code id="L4118"><span class="ln">4118</span> <b>while</b> (target.parentNode && target != svg.parentNode && !target.raphael) {
+</code><code id="L4119"><span class="ln">4119</span> target<span class="s"> = </span>target.parentNode;
+</code><code id="L4120"><span class="ln">4120</span> }
+</code><code id="L4121"><span class="ln">4121</span> target<span class="s"> == </span>paper.canvas.parentNode && (target<span class="s"> = </span>svg);
+</code><code id="L4122"><span class="ln">4122</span> target<span class="s"> = </span>target && target.raphael ? paper.getById(target.raphaelid) : <b>null</b>;
+</code><code id="L4123"><span class="ln">4123</span> <b>return</b> target;
+</code><code id="L4124"><span class="ln">4124</span> };
+</code><code id="L4125"><span class="ln">4125</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4126"><span class="ln">4126</span><span class="c"> <span class="s"> * </span>Paper.getById
+</span></code><code id="L4127"><span class="ln">4127</span><span class="c"> [ method ]
+</span></code><code id="L4128"><span class="ln">4128</span><span class="c"> **
+</span></code><code id="L4129"><span class="ln">4129</span><span class="c"> <span class="s"> * </span>Returns you element by it’s internal ID.
+</span></code><code id="L4130"><span class="ln">4130</span><span class="c"> **
+</span></code><code id="L4131"><span class="ln">4131</span><span class="c"> > Parameters
+</span></code><code id="L4132"><span class="ln">4132</span><span class="c"> **
+</span></code><code id="L4133"><span class="ln">4133</span><span class="c"> <span class="s"> - </span>id (number) id
+</span></code><code id="L4134"><span class="ln">4134</span><span class="c"> <span class="s"> = </span>(object) Raphaël element object
+</span></code><code id="L4135"><span class="ln">4135</span><span class="c"> \*/</span>
+</code><code id="L4136"><span class="ln">4136</span> paperproto.getById<span class="s"> = </span><b>function</b> (id) {
+</code><code id="L4137"><span class="ln">4137</span> <b>var</b> bot<span class="s"> = </span><b>this</b>.bottom;
+</code><code id="L4138"><span class="ln">4138</span> <b>while</b> (bot) {
+</code><code id="L4139"><span class="ln">4139</span> <b>if</b> (bot.id<span class="s"> == </span>id) {
+</code><code id="L4140"><span class="ln">4140</span> <b>return</b> bot;
+</code><code id="L4141"><span class="ln">4141</span> }
+</code><code id="L4142"><span class="ln">4142</span> bot<span class="s"> = </span>bot.next;
+</code><code id="L4143"><span class="ln">4143</span> }
+</code><code id="L4144"><span class="ln">4144</span> <b>return</b> <b>null</b>;
+</code><code id="L4145"><span class="ln">4145</span> };
+</code><code id="L4146"><span class="ln">4146</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4147"><span class="ln">4147</span><span class="c"> <span class="s"> * </span>Paper.forEach
+</span></code><code id="L4148"><span class="ln">4148</span><span class="c"> [ method ]
+</span></code><code id="L4149"><span class="ln">4149</span><span class="c"> **
+</span></code><code id="L4150"><span class="ln">4150</span><span class="c"> <span class="s"> * </span>Executes given <b>function</b> <b>for</b> each element on the paper
+</span></code><code id="L4151"><span class="ln">4151</span><span class="c"> *
+</span></code><code id="L4152"><span class="ln">4152</span><span class="c"> <span class="s"> * </span>If <b>function</b> returns `<b>false</b>` it will stop loop running.
+</span></code><code id="L4153"><span class="ln">4153</span><span class="c"> **
+</span></code><code id="L4154"><span class="ln">4154</span><span class="c"> > Parameters
+</span></code><code id="L4155"><span class="ln">4155</span><span class="c"> **
+</span></code><code id="L4156"><span class="ln">4156</span><span class="c"> <span class="s"> - </span>callback (<b>function</b>) <b>function</b> to run
+</span></code><code id="L4157"><span class="ln">4157</span><span class="c"> <span class="s"> - </span>thisArg (object) context object <b>for</b> the callback
+</span></code><code id="L4158"><span class="ln">4158</span><span class="c"> <span class="s"> = </span>(object) Paper object
+</span></code><code id="L4159"><span class="ln">4159</span><span class="c"> \*/</span>
+</code><code id="L4160"><span class="ln">4160</span> paperproto.forEach<span class="s"> = </span><b>function</b> (callback, thisArg) {
+</code><code id="L4161"><span class="ln">4161</span> <b>var</b> bot<span class="s"> = </span><b>this</b>.bottom;
+</code><code id="L4162"><span class="ln">4162</span> <b>while</b> (bot) {
+</code><code id="L4163"><span class="ln">4163</span> <b>if</b> (callback.call(thisArg, bot)<span class="s"> === </span><b>false</b>) {
+</code><code id="L4164"><span class="ln">4164</span> <b>return</b> <b>this</b>;
+</code><code id="L4165"><span class="ln">4165</span> }
+</code><code id="L4166"><span class="ln">4166</span> bot<span class="s"> = </span>bot.next;
+</code><code id="L4167"><span class="ln">4167</span> }
+</code><code id="L4168"><span class="ln">4168</span> <b>return</b> <b>this</b>;
+</code><code id="L4169"><span class="ln">4169</span> };
+</code><code id="L4170"><span class="ln">4170</span> <b>function</b> x_y() {
+</code><code id="L4171"><span class="ln">4171</span> <b>return</b> <b>this</b>.x<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.y;
+</code><code id="L4172"><span class="ln">4172</span> }
+</code><code id="L4173"><span class="ln">4173</span> <b>function</b> x_y_w_h() {
+</code><code id="L4174"><span class="ln">4174</span> <b>return</b> <b>this</b>.x<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.y<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.width<span class="s"> + </span><i>"\xd7"</i><span class="s"> + </span><b>this</b>.height;
+</code><code id="L4175"><span class="ln">4175</span> }
+</code><code id="L4176"><span class="ln">4176</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4177"><span class="ln">4177</span><span class="c"> <span class="s"> * </span>Element.getBBox
+</span></code><code id="L4178"><span class="ln">4178</span><span class="c"> [ method ]
+</span></code><code id="L4179"><span class="ln">4179</span><span class="c"> **
+</span></code><code id="L4180"><span class="ln">4180</span><span class="c"> <span class="s"> * </span>Return bounding box <b>for</b> a given element
+</span></code><code id="L4181"><span class="ln">4181</span><span class="c"> **
+</span></code><code id="L4182"><span class="ln">4182</span><span class="c"> > Parameters
+</span></code><code id="L4183"><span class="ln">4183</span><span class="c"> **
+</span></code><code id="L4184"><span class="ln">4184</span><span class="c"> <span class="s"> - </span>isWithoutTransform (<b>boolean</b>) flag, `<b>true</b>` <b>if</b> you want to have bounding box before transformations. Default is `<b>false</b>`.
+</span></code><code id="L4185"><span class="ln">4185</span><span class="c"> <span class="s"> = </span>(object) Bounding box object:
+</span></code><code id="L4186"><span class="ln">4186</span><span class="c"> | {
+</span></code><code id="L4187"><span class="ln">4187</span><span class="c"> | x: <span class="c">//top left corner x,</span>
+</span></code><code id="L4188"><span class="ln">4188</span><span class="c"> | y: <span class="c">//top left corner y,</span>
+</span></code><code id="L4189"><span class="ln">4189</span><span class="c"> | width: <span class="c">//width,</span>
+</span></code><code id="L4190"><span class="ln">4190</span><span class="c"> | height: <span class="c">//height</span>
+</span></code><code id="L4191"><span class="ln">4191</span><span class="c"> | }
+</span></code><code id="L4192"><span class="ln">4192</span><span class="c"> \*/</span>
+</code><code id="L4193"><span class="ln">4193</span> elproto.getBBox<span class="s"> = </span><b>function</b> (isWithoutTransform) {
+</code><code id="L4194"><span class="ln">4194</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L4195"><span class="ln">4195</span> <b>return</b> {};
+</code><code id="L4196"><span class="ln">4196</span> }
+</code><code id="L4197"><span class="ln">4197</span> <b>var</b> _<span class="s"> = </span><b>this</b>._;
+</code><code id="L4198"><span class="ln">4198</span> <b>if</b> (isWithoutTransform) {
+</code><code id="L4199"><span class="ln">4199</span> <b>if</b> (_.dirty<span class="s"> || </span>!_.bboxwt) {
+</code><code id="L4200"><span class="ln">4200</span> <b>this</b>.realPath<span class="s"> = </span>getPath[<b>this</b>.type](<b>this</b>);
+</code><code id="L4201"><span class="ln">4201</span> _.bboxwt<span class="s"> = </span>pathDimensions(<b>this</b>.realPath);
+</code><code id="L4202"><span class="ln">4202</span> _.bboxwt.toString<span class="s"> = </span>x_y_w_h;
+</code><code id="L4203"><span class="ln">4203</span> _.dirty<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4204"><span class="ln">4204</span> }
+</code><code id="L4205"><span class="ln">4205</span> <b>return</b> _.bboxwt;
+</code><code id="L4206"><span class="ln">4206</span> }
+</code><code id="L4207"><span class="ln">4207</span> <b>if</b> (_.dirty<span class="s"> || </span>_.dirtyT<span class="s"> || </span>!_.bbox) {
+</code><code id="L4208"><span class="ln">4208</span> <b>if</b> (_.dirty<span class="s"> || </span>!<b>this</b>.realPath) {
+</code><code id="L4209"><span class="ln">4209</span> _.bboxwt<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4210"><span class="ln">4210</span> <b>this</b>.realPath<span class="s"> = </span>getPath[<b>this</b>.type](<b>this</b>);
+</code><code id="L4211"><span class="ln">4211</span> }
+</code><code id="L4212"><span class="ln">4212</span> _.bbox<span class="s"> = </span>pathDimensions(mapPath(<b>this</b>.realPath, <b>this</b>.matrix));
+</code><code id="L4213"><span class="ln">4213</span> _.bbox.toString<span class="s"> = </span>x_y_w_h;
+</code><code id="L4214"><span class="ln">4214</span> _.dirty<span class="s"> = </span>_.dirtyT<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4215"><span class="ln">4215</span> }
+</code><code id="L4216"><span class="ln">4216</span> <b>return</b> _.bbox;
+</code><code id="L4217"><span class="ln">4217</span> };
+</code><code id="L4218"><span class="ln">4218</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4219"><span class="ln">4219</span><span class="c"> <span class="s"> * </span>Element.clone
+</span></code><code id="L4220"><span class="ln">4220</span><span class="c"> [ method ]
+</span></code><code id="L4221"><span class="ln">4221</span><span class="c"> **
+</span></code><code id="L4222"><span class="ln">4222</span><span class="c"> <span class="s"> = </span>(object) clone of a given element
+</span></code><code id="L4223"><span class="ln">4223</span><span class="c"> **
+</span></code><code id="L4224"><span class="ln">4224</span><span class="c"> \*/</span>
+</code><code id="L4225"><span class="ln">4225</span> elproto.clone<span class="s"> = </span><b>function</b> () {
+</code><code id="L4226"><span class="ln">4226</span> <b>if</b> (<b>this</b>.removed) {
+</code><code id="L4227"><span class="ln">4227</span> <b>return</b> <b>null</b>;
+</code><code id="L4228"><span class="ln">4228</span> }
+</code><code id="L4229"><span class="ln">4229</span> <b>var</b> attr<span class="s"> = </span><b>this</b>.attr();
+</code><code id="L4230"><span class="ln">4230</span> <b>delete</b> attr.scale;
+</code><code id="L4231"><span class="ln">4231</span> <b>delete</b> attr.translation;
+</code><code id="L4232"><span class="ln">4232</span> <b>return</b> <b>this</b>.paper[<b>this</b>.type]().attr(attr);
+</code><code id="L4233"><span class="ln">4233</span> };
+</code><code id="L4234"><span class="ln">4234</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4235"><span class="ln">4235</span><span class="c"> <span class="s"> * </span>Element.glow
+</span></code><code id="L4236"><span class="ln">4236</span><span class="c"> [ method ]
+</span></code><code id="L4237"><span class="ln">4237</span><span class="c"> **
+</span></code><code id="L4238"><span class="ln">4238</span><span class="c"> <span class="s"> * </span>Return set of elements that create glow-like effect around given element. See @Paper.set.
+</span></code><code id="L4239"><span class="ln">4239</span><span class="c"> *
+</span></code><code id="L4240"><span class="ln">4240</span><span class="c"> <span class="s"> * </span>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.
+</span></code><code id="L4241"><span class="ln">4241</span><span class="c"> **
+</span></code><code id="L4242"><span class="ln">4242</span><span class="c"> <span class="s"> = </span>(object) set of elements that represents glow
+</span></code><code id="L4243"><span class="ln">4243</span><span class="c"> \*/</span>
+</code><code id="L4244"><span class="ln">4244</span> elproto.glow<span class="s"> = </span><b>function</b> (glow) {
+</code><code id="L4245"><span class="ln">4245</span> <b>if</b> (<b>this</b>.type<span class="s"> == </span><i>"text"</i>) {
+</code><code id="L4246"><span class="ln">4246</span> <b>return</b> <b>null</b>;
+</code><code id="L4247"><span class="ln">4247</span> }
+</code><code id="L4248"><span class="ln">4248</span> glow<span class="s"> = </span>glow<span class="s"> || </span>{};
+</code><code id="L4249"><span class="ln">4249</span> <b>var</b> s<span class="s"> = </span>{
+</code><code id="L4250"><span class="ln">4250</span> width: glow.width<span class="s"> || </span><span class="d">10</span>,
+</code><code id="L4251"><span class="ln">4251</span> fill: glow.fill<span class="s"> || </span><b>false</b>,
+</code><code id="L4252"><span class="ln">4252</span> opacity: glow.opacity<span class="s"> || </span><span class="d">.5</span>,
+</code><code id="L4253"><span class="ln">4253</span> offsetx: glow.offsetx<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L4254"><span class="ln">4254</span> offsety: glow.offsety<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L4255"><span class="ln">4255</span> color: glow.color<span class="s"> || </span><i>"#<span class="d">000</span>"</i>
+</code><code id="L4256"><span class="ln">4256</span> },
+</code><code id="L4257"><span class="ln">4257</span> c<span class="s"> = </span>s.width<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L4258"><span class="ln">4258</span> r<span class="s"> = </span><b>this</b>.paper,
+</code><code id="L4259"><span class="ln">4259</span> out<span class="s"> = </span>r.set(),
+</code><code id="L4260"><span class="ln">4260</span> path<span class="s"> = </span><b>this</b>.realPath<span class="s"> || </span>getPath[<b>this</b>.type](<b>this</b>);
+</code><code id="L4261"><span class="ln">4261</span> path<span class="s"> = </span><b>this</b>.matrix ? mapPath(path, <b>this</b>.matrix) : path;
+</code><code id="L4262"><span class="ln">4262</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">1</span>; i < c<span class="s"> + </span><span class="d">1</span>; i++) {
+</code><code id="L4263"><span class="ln">4263</span> out.push(r.path(path).attr({stroke: s.color, fill: s.fill ? s.color : <i>"none"</i>, <i>"stroke-linejoin"</i>: <i>"round"</i>, <i>"stroke-linecap"</i>: <i>"round"</i>, <i>"stroke-width"</i>: +(s.width<span class="s"> / </span>c<span class="s"> * </span>i).toFixed(<span class="d">3</span>), opacity: +(s.opacity<span class="s"> / </span>c).toFixed(<span class="d">3</span>)}));
+</code><code id="L4264"><span class="ln">4264</span> }
+</code><code id="L4265"><span class="ln">4265</span> <b>return</b> out.insertBefore(<b>this</b>).translate(s.offsetx, s.offsety);
+</code><code id="L4266"><span class="ln">4266</span> };
+</code><code id="L4267"><span class="ln">4267</span> <b>var</b> curveslengths<span class="s"> = </span>{},
+</code><code id="L4268"><span class="ln">4268</span> getPointAtSegmentLength<span class="s"> = </span><b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length) {
+</code><code id="L4269"><span class="ln">4269</span> <b>var</b> len<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L4270"><span class="ln">4270</span> precision<span class="s"> = </span><span class="d">100</span>,
+</code><code id="L4271"><span class="ln">4271</span> name<span class="s"> = </span>[p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y].join(),
+</code><code id="L4272"><span class="ln">4272</span> cache<span class="s"> = </span>curveslengths[name],
+</code><code id="L4273"><span class="ln">4273</span> old, dot;
+</code><code id="L4274"><span class="ln">4274</span> !cache && (curveslengths[name]<span class="s"> = </span>cache<span class="s"> = </span>{data: []});
+</code><code id="L4275"><span class="ln">4275</span> cache.timer && clearTimeout(cache.timer);
+</code><code id="L4276"><span class="ln">4276</span> cache.timer<span class="s"> = </span>setTimeout(<b>function</b> () {<b>delete</b> curveslengths[name];}, <span class="d">2e3</span>);
+</code><code id="L4277"><span class="ln">4277</span> <b>if</b> (length != <b>null</b> && !cache.precision) {
+</code><code id="L4278"><span class="ln">4278</span> <b>var</b> total<span class="s"> = </span>getPointAtSegmentLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y);
+</code><code id="L4279"><span class="ln">4279</span> cache.precision<span class="s"> = </span>~~total<span class="s"> * </span><span class="d">10</span>;
+</code><code id="L4280"><span class="ln">4280</span> cache.data<span class="s"> = </span>[];
+</code><code id="L4281"><span class="ln">4281</span> }
+</code><code id="L4282"><span class="ln">4282</span> precision<span class="s"> = </span>cache.precision<span class="s"> || </span>precision;
+</code><code id="L4283"><span class="ln">4283</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i < precision<span class="s"> + </span><span class="d">1</span>; i++) {
+</code><code id="L4284"><span class="ln">4284</span> <b>if</b> (cache.data[i<span class="s"> * </span>precision]) {
+</code><code id="L4285"><span class="ln">4285</span> dot<span class="s"> = </span>cache.data[i<span class="s"> * </span>precision];
+</code><code id="L4286"><span class="ln">4286</span> } <b>else</b> {
+</code><code id="L4287"><span class="ln">4287</span> dot<span class="s"> = </span>R.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, i<span class="s"> / </span>precision);
+</code><code id="L4288"><span class="ln">4288</span> cache.data[i<span class="s"> * </span>precision]<span class="s"> = </span>dot;
+</code><code id="L4289"><span class="ln">4289</span> }
+</code><code id="L4290"><span class="ln">4290</span> i && (len += pow(pow(old.x<span class="s"> - </span>dot.x, <span class="d">2</span>)<span class="s"> + </span>pow(old.y<span class="s"> - </span>dot.y, <span class="d">2</span>), <span class="d">.5</span>));
+</code><code id="L4291"><span class="ln">4291</span> <b>if</b> (length != <b>null</b> && len >= length) {
+</code><code id="L4292"><span class="ln">4292</span> <b>return</b> dot;
+</code><code id="L4293"><span class="ln">4293</span> }
+</code><code id="L4294"><span class="ln">4294</span> old<span class="s"> = </span>dot;
+</code><code id="L4295"><span class="ln">4295</span> }
+</code><code id="L4296"><span class="ln">4296</span> <b>if</b> (length<span class="s"> == </span><b>null</b>) {
+</code><code id="L4297"><span class="ln">4297</span> <b>return</b> len;
+</code><code id="L4298"><span class="ln">4298</span> }
+</code><code id="L4299"><span class="ln">4299</span> },
+</code><code id="L4300"><span class="ln">4300</span> getLengthFactory<span class="s"> = </span><b>function</b> (istotal, subpath) {
+</code><code id="L4301"><span class="ln">4301</span> <b>return</b> <b>function</b> (path, length, onlystart) {
+</code><code id="L4302"><span class="ln">4302</span> path<span class="s"> = </span>path2curve(path);
+</code><code id="L4303"><span class="ln">4303</span> <b>var</b> x, y, p, l, sp<span class="s"> = </span><i>""</i>, subpaths<span class="s"> = </span>{}, point,
+</code><code id="L4304"><span class="ln">4304</span> len<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4305"><span class="ln">4305</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>path.length; i < ii; i++) {
+</code><code id="L4306"><span class="ln">4306</span> p<span class="s"> = </span>path[i];
+</code><code id="L4307"><span class="ln">4307</span> <b>if</b> (p[<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
+</code><code id="L4308"><span class="ln">4308</span> x<span class="s"> = </span>+p[<span class="d">1</span>];
+</code><code id="L4309"><span class="ln">4309</span> y<span class="s"> = </span>+p[<span class="d">2</span>];
+</code><code id="L4310"><span class="ln">4310</span> } <b>else</b> {
+</code><code id="L4311"><span class="ln">4311</span> l<span class="s"> = </span>getPointAtSegmentLength(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>]);
+</code><code id="L4312"><span class="ln">4312</span> <b>if</b> (len<span class="s"> + </span>l > length) {
+</code><code id="L4313"><span class="ln">4313</span> <b>if</b> (subpath && !subpaths.start) {
+</code><code id="L4314"><span class="ln">4314</span> point<span class="s"> = </span>getPointAtSegmentLength(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>], length<span class="s"> - </span>len);
+</code><code id="L4315"><span class="ln">4315</span> sp += [<i>"C"</i><span class="s"> + </span>point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y];
+</code><code id="L4316"><span class="ln">4316</span> <b>if</b> (onlystart) {<b>return</b> sp;}
+</code><code id="L4317"><span class="ln">4317</span> subpaths.start<span class="s"> = </span>sp;
+</code><code id="L4318"><span class="ln">4318</span> sp<span class="s"> = </span>[<i>"M"</i><span class="s"> + </span>point.x, point.y<span class="s"> + </span><i>"C"</i><span class="s"> + </span>point.n.x, point.n.y, point.end.x, point.end.y, p[<span class="d">5</span>], p[<span class="d">6</span>]].join();
+</code><code id="L4319"><span class="ln">4319</span> len += l;
+</code><code id="L4320"><span class="ln">4320</span> x<span class="s"> = </span>+p[<span class="d">5</span>];
+</code><code id="L4321"><span class="ln">4321</span> y<span class="s"> = </span>+p[<span class="d">6</span>];
+</code><code id="L4322"><span class="ln">4322</span> <b>continue</b>;
+</code><code id="L4323"><span class="ln">4323</span> }
+</code><code id="L4324"><span class="ln">4324</span> <b>if</b> (!istotal && !subpath) {
+</code><code id="L4325"><span class="ln">4325</span> point<span class="s"> = </span>getPointAtSegmentLength(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>], length<span class="s"> - </span>len);
+</code><code id="L4326"><span class="ln">4326</span> <b>return</b> {x: point.x, y: point.y, alpha: point.alpha};
+</code><code id="L4327"><span class="ln">4327</span> }
+</code><code id="L4328"><span class="ln">4328</span> }
+</code><code id="L4329"><span class="ln">4329</span> len += l;
+</code><code id="L4330"><span class="ln">4330</span> x<span class="s"> = </span>+p[<span class="d">5</span>];
+</code><code id="L4331"><span class="ln">4331</span> y<span class="s"> = </span>+p[<span class="d">6</span>];
+</code><code id="L4332"><span class="ln">4332</span> }
+</code><code id="L4333"><span class="ln">4333</span> sp += p.shift()<span class="s"> + </span>p;
+</code><code id="L4334"><span class="ln">4334</span> }
+</code><code id="L4335"><span class="ln">4335</span> subpaths.end<span class="s"> = </span>sp;
+</code><code id="L4336"><span class="ln">4336</span> point<span class="s"> = </span>istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>], <span class="d">1</span>);
+</code><code id="L4337"><span class="ln">4337</span> point.alpha && (point<span class="s"> = </span>{x: point.x, y: point.y, alpha: point.alpha});
+</code><code id="L4338"><span class="ln">4338</span> <b>return</b> point;
+</code><code id="L4339"><span class="ln">4339</span> };
+</code><code id="L4340"><span class="ln">4340</span> };
+</code><code id="L4341"><span class="ln">4341</span> <b>var</b> getTotalLength<span class="s"> = </span>getLengthFactory(<span class="d">1</span>),
+</code><code id="L4342"><span class="ln">4342</span> getPointAtLength<span class="s"> = </span>getLengthFactory(),
+</code><code id="L4343"><span class="ln">4343</span> getSubpathsAtLength<span class="s"> = </span>getLengthFactory(<span class="d">0</span>, <span class="d">1</span>);
+</code><code id="L4344"><span class="ln">4344</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4345"><span class="ln">4345</span><span class="c"> <span class="s"> * </span>Raphael.getTotalLength
+</span></code><code id="L4346"><span class="ln">4346</span><span class="c"> [ method ]
+</span></code><code id="L4347"><span class="ln">4347</span><span class="c"> **
+</span></code><code id="L4348"><span class="ln">4348</span><span class="c"> <span class="s"> * </span>Returns length of the given path <b>in</b> pixels.
+</span></code><code id="L4349"><span class="ln">4349</span><span class="c"> **
+</span></code><code id="L4350"><span class="ln">4350</span><span class="c"> > Parameters
+</span></code><code id="L4351"><span class="ln">4351</span><span class="c"> **
+</span></code><code id="L4352"><span class="ln">4352</span><span class="c"> <span class="s"> - </span>path (string) SVG path string.
+</span></code><code id="L4353"><span class="ln">4353</span><span class="c"> **
+</span></code><code id="L4354"><span class="ln">4354</span><span class="c"> <span class="s"> = </span>(number) length.
+</span></code><code id="L4355"><span class="ln">4355</span><span class="c"> \*/</span>
+</code><code id="L4356"><span class="ln">4356</span> R.getTotalLength<span class="s"> = </span>getTotalLength;
+</code><code id="L4357"><span class="ln">4357</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4358"><span class="ln">4358</span><span class="c"> <span class="s"> * </span>Raphael.getPointAtLength
+</span></code><code id="L4359"><span class="ln">4359</span><span class="c"> [ method ]
+</span></code><code id="L4360"><span class="ln">4360</span><span class="c"> **
+</span></code><code id="L4361"><span class="ln">4361</span><span class="c"> <span class="s"> * </span>Return coordinates of the point located at the given length on the given path.
+</span></code><code id="L4362"><span class="ln">4362</span><span class="c"> **
+</span></code><code id="L4363"><span class="ln">4363</span><span class="c"> > Parameters
+</span></code><code id="L4364"><span class="ln">4364</span><span class="c"> **
+</span></code><code id="L4365"><span class="ln">4365</span><span class="c"> <span class="s"> - </span>path (string) SVG path string
+</span></code><code id="L4366"><span class="ln">4366</span><span class="c"> <span class="s"> - </span>length (number)
+</span></code><code id="L4367"><span class="ln">4367</span><span class="c"> **
+</span></code><code id="L4368"><span class="ln">4368</span><span class="c"> <span class="s"> = </span>(object) representation of the point:
+</span></code><code id="L4369"><span class="ln">4369</span><span class="c"> | {
+</span></code><code id="L4370"><span class="ln">4370</span><span class="c"> | x: <span class="c">//x coordinate,</span>
+</span></code><code id="L4371"><span class="ln">4371</span><span class="c"> | y: <span class="c">//y coordinate,</span>
+</span></code><code id="L4372"><span class="ln">4372</span><span class="c"> | alpha: <span class="c">//angle of derivative</span>
+</span></code><code id="L4373"><span class="ln">4373</span><span class="c"> | }
+</span></code><code id="L4374"><span class="ln">4374</span><span class="c"> \*/</span>
+</code><code id="L4375"><span class="ln">4375</span> R.getPointAtLength<span class="s"> = </span>getPointAtLength;
+</code><code id="L4376"><span class="ln">4376</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4377"><span class="ln">4377</span><span class="c"> <span class="s"> * </span>Raphael.getSubpath
+</span></code><code id="L4378"><span class="ln">4378</span><span class="c"> [ method ]
+</span></code><code id="L4379"><span class="ln">4379</span><span class="c"> **
+</span></code><code id="L4380"><span class="ln">4380</span><span class="c"> <span class="s"> * </span>Return subpath of a given path from given length to given length.
+</span></code><code id="L4381"><span class="ln">4381</span><span class="c"> **
+</span></code><code id="L4382"><span class="ln">4382</span><span class="c"> > Parameters
+</span></code><code id="L4383"><span class="ln">4383</span><span class="c"> **
+</span></code><code id="L4384"><span class="ln">4384</span><span class="c"> <span class="s"> - </span>path (string) SVG path string
+</span></code><code id="L4385"><span class="ln">4385</span><span class="c"> <span class="s"> - </span>from (number) position of the start of the segment
+</span></code><code id="L4386"><span class="ln">4386</span><span class="c"> <span class="s"> - </span>to (number) position of the end of the segment
+</span></code><code id="L4387"><span class="ln">4387</span><span class="c"> **
+</span></code><code id="L4388"><span class="ln">4388</span><span class="c"> <span class="s"> = </span>(string) pathstring <b>for</b> the segment
+</span></code><code id="L4389"><span class="ln">4389</span><span class="c"> \*/</span>
+</code><code id="L4390"><span class="ln">4390</span> R.getSubpath<span class="s"> = </span><b>function</b> (path, from, to) {
+</code><code id="L4391"><span class="ln">4391</span> <b>if</b> (abs(<b>this</b>.getTotalLength(path)<span class="s"> - </span>to) < <span class="d">1e-6</span>) {
+</code><code id="L4392"><span class="ln">4392</span> <b>return</b> getSubpathsAtLength(path, from).end;
+</code><code id="L4393"><span class="ln">4393</span> }
+</code><code id="L4394"><span class="ln">4394</span> <b>var</b> a<span class="s"> = </span>getSubpathsAtLength(path, to, <span class="d">1</span>);
+</code><code id="L4395"><span class="ln">4395</span> <b>return</b> from ? getSubpathsAtLength(a, from).end : a;
+</code><code id="L4396"><span class="ln">4396</span> };
+</code><code id="L4397"><span class="ln">4397</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4398"><span class="ln">4398</span><span class="c"> <span class="s"> * </span>Element.getTotalLength
+</span></code><code id="L4399"><span class="ln">4399</span><span class="c"> [ method ]
+</span></code><code id="L4400"><span class="ln">4400</span><span class="c"> **
+</span></code><code id="L4401"><span class="ln">4401</span><span class="c"> <span class="s"> * </span>Returns length of the path <b>in</b> pixels. Only works <b>for</b> element of “path” type.
+</span></code><code id="L4402"><span class="ln">4402</span><span class="c"> <span class="s"> = </span>(number) length.
+</span></code><code id="L4403"><span class="ln">4403</span><span class="c"> \*/</span>
+</code><code id="L4404"><span class="ln">4404</span> elproto.getTotalLength<span class="s"> = </span><b>function</b> () {
+</code><code id="L4405"><span class="ln">4405</span> <b>if</b> (<b>this</b>.type != <i>"path"</i>) {<b>return</b>;}
+</code><code id="L4406"><span class="ln">4406</span> <b>if</b> (<b>this</b>.node.getTotalLength) {
+</code><code id="L4407"><span class="ln">4407</span> <b>return</b> <b>this</b>.node.getTotalLength();
+</code><code id="L4408"><span class="ln">4408</span> }
+</code><code id="L4409"><span class="ln">4409</span> <b>return</b> getTotalLength(<b>this</b>.attrs.path);
+</code><code id="L4410"><span class="ln">4410</span> };
+</code><code id="L4411"><span class="ln">4411</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4412"><span class="ln">4412</span><span class="c"> <span class="s"> * </span>Element.getPointAtLength
+</span></code><code id="L4413"><span class="ln">4413</span><span class="c"> [ method ]
+</span></code><code id="L4414"><span class="ln">4414</span><span class="c"> **
+</span></code><code id="L4415"><span class="ln">4415</span><span class="c"> <span class="s"> * </span>Return coordinates of the point located at the given length on the given path. Only works <b>for</b> element of “path” type.
+</span></code><code id="L4416"><span class="ln">4416</span><span class="c"> **
+</span></code><code id="L4417"><span class="ln">4417</span><span class="c"> > Parameters
+</span></code><code id="L4418"><span class="ln">4418</span><span class="c"> **
+</span></code><code id="L4419"><span class="ln">4419</span><span class="c"> <span class="s"> - </span>length (number)
+</span></code><code id="L4420"><span class="ln">4420</span><span class="c"> **
+</span></code><code id="L4421"><span class="ln">4421</span><span class="c"> <span class="s"> = </span>(object) representation of the point:
+</span></code><code id="L4422"><span class="ln">4422</span><span class="c"> | {
+</span></code><code id="L4423"><span class="ln">4423</span><span class="c"> | x: <span class="c">//x coordinate,</span>
+</span></code><code id="L4424"><span class="ln">4424</span><span class="c"> | y: <span class="c">//y coordinate,</span>
+</span></code><code id="L4425"><span class="ln">4425</span><span class="c"> | alpha: <span class="c">//angle of derivative</span>
+</span></code><code id="L4426"><span class="ln">4426</span><span class="c"> | }
+</span></code><code id="L4427"><span class="ln">4427</span><span class="c"> \*/</span>
+</code><code id="L4428"><span class="ln">4428</span> elproto.getPointAtLength<span class="s"> = </span><b>function</b> (length) {
+</code><code id="L4429"><span class="ln">4429</span> <b>if</b> (<b>this</b>.type != <i>"path"</i>) {<b>return</b>;}
+</code><code id="L4430"><span class="ln">4430</span> <b>return</b> getPointAtLength(<b>this</b>.attrs.path, length);
+</code><code id="L4431"><span class="ln">4431</span> };
+</code><code id="L4432"><span class="ln">4432</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4433"><span class="ln">4433</span><span class="c"> <span class="s"> * </span>Element.getSubpath
+</span></code><code id="L4434"><span class="ln">4434</span><span class="c"> [ method ]
+</span></code><code id="L4435"><span class="ln">4435</span><span class="c"> **
+</span></code><code id="L4436"><span class="ln">4436</span><span class="c"> <span class="s"> * </span>Return subpath of a given element from given length to given length. Only works <b>for</b> element of “path” type.
+</span></code><code id="L4437"><span class="ln">4437</span><span class="c"> **
+</span></code><code id="L4438"><span class="ln">4438</span><span class="c"> > Parameters
+</span></code><code id="L4439"><span class="ln">4439</span><span class="c"> **
+</span></code><code id="L4440"><span class="ln">4440</span><span class="c"> <span class="s"> - </span>from (number) position of the start of the segment
+</span></code><code id="L4441"><span class="ln">4441</span><span class="c"> <span class="s"> - </span>to (number) position of the end of the segment
+</span></code><code id="L4442"><span class="ln">4442</span><span class="c"> **
+</span></code><code id="L4443"><span class="ln">4443</span><span class="c"> <span class="s"> = </span>(string) pathstring <b>for</b> the segment
+</span></code><code id="L4444"><span class="ln">4444</span><span class="c"> \*/</span>
+</code><code id="L4445"><span class="ln">4445</span> elproto.getSubpath<span class="s"> = </span><b>function</b> (from, to) {
+</code><code id="L4446"><span class="ln">4446</span> <b>if</b> (<b>this</b>.type != <i>"path"</i>) {<b>return</b>;}
+</code><code id="L4447"><span class="ln">4447</span> <b>return</b> R.getSubpath(<b>this</b>.attrs.path, from, to);
+</code><code id="L4448"><span class="ln">4448</span> };
+</code><code id="L4449"><span class="ln">4449</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4450"><span class="ln">4450</span><span class="c"> <span class="s"> * </span>Raphael.easing_formulas
+</span></code><code id="L4451"><span class="ln">4451</span><span class="c"> [ property ]
+</span></code><code id="L4452"><span class="ln">4452</span><span class="c"> **
+</span></code><code id="L4453"><span class="ln">4453</span><span class="c"> <span class="s"> * </span>Object that contains easing formulas <b>for</b> animation. You could extend it <b>with</b> your owns. By <b>default</b> it has following list of easing:
+</span></code><code id="L4454"><span class="ln">4454</span><span class="c"> # <ul>
+</span></code><code id="L4455"><span class="ln">4455</span><span class="c"> # <li>“linear”</li>
+</span></code><code id="L4456"><span class="ln">4456</span><span class="c"> # <li>“<” or “easeIn” or “ease-<b>in</b>”</li>
+</span></code><code id="L4457"><span class="ln">4457</span><span class="c"> # <li>“>” or “easeOut” or “ease-out”</li>
+</span></code><code id="L4458"><span class="ln">4458</span><span class="c"> # <li>“<>” or “easeInOut” or “ease-<b>in</b>-out”</li>
+</span></code><code id="L4459"><span class="ln">4459</span><span class="c"> # <li>“backIn” or “back-<b>in</b>”</li>
+</span></code><code id="L4460"><span class="ln">4460</span><span class="c"> # <li>“backOut” or “back-out”</li>
+</span></code><code id="L4461"><span class="ln">4461</span><span class="c"> # <li>“elastic”</li>
+</span></code><code id="L4462"><span class="ln">4462</span><span class="c"> # <li>“bounce”</li>
+</span></code><code id="L4463"><span class="ln">4463</span><span class="c"> # </ul>
+</span></code><code id="L4464"><span class="ln">4464</span><span class="c"> # <p>See also <a href=<i>"http:<span class="c">//raphaeljs.com/easing.html"</i>>Easing demo</a>.</p></span>
+</span></code><code id="L4465"><span class="ln">4465</span><span class="c"> \*/</span>
+</code><code id="L4466"><span class="ln">4466</span> <b>var</b> ef<span class="s"> = </span>R.easing_formulas<span class="s"> = </span>{
+</code><code id="L4467"><span class="ln">4467</span> linear: <b>function</b> (n) {
+</code><code id="L4468"><span class="ln">4468</span> <b>return</b> n;
+</code><code id="L4469"><span class="ln">4469</span> },
+</code><code id="L4470"><span class="ln">4470</span> <i>"<"</i>: <b>function</b> (n) {
+</code><code id="L4471"><span class="ln">4471</span> <b>return</b> pow(n, <span class="d">1.7</span>);
+</code><code id="L4472"><span class="ln">4472</span> },
+</code><code id="L4473"><span class="ln">4473</span> <i>">"</i>: <b>function</b> (n) {
+</code><code id="L4474"><span class="ln">4474</span> <b>return</b> pow(n, <span class="d">.48</span>);
+</code><code id="L4475"><span class="ln">4475</span> },
+</code><code id="L4476"><span class="ln">4476</span> <i>"<>"</i>: <b>function</b> (n) {
+</code><code id="L4477"><span class="ln">4477</span> <b>var</b> q<span class="s"> = </span><span class="d">.48</span><span class="s"> - </span>n<span class="s"> / </span><span class="d">1.04</span>,
+</code><code id="L4478"><span class="ln">4478</span> Q<span class="s"> = </span>math.sqrt(<span class="d">.1734</span><span class="s"> + </span>q<span class="s"> * </span>q),
+</code><code id="L4479"><span class="ln">4479</span> x<span class="s"> = </span>Q<span class="s"> - </span>q,
+</code><code id="L4480"><span class="ln">4480</span> X<span class="s"> = </span>pow(abs(x), <span class="d">1</span><span class="s"> / </span><span class="d">3</span>)<span class="s"> * </span>(x < <span class="d">0</span> ? -<span class="d">1</span> : <span class="d">1</span>),
+</code><code id="L4481"><span class="ln">4481</span> y<span class="s"> = </span>-Q<span class="s"> - </span>q,
+</code><code id="L4482"><span class="ln">4482</span> Y<span class="s"> = </span>pow(abs(y), <span class="d">1</span><span class="s"> / </span><span class="d">3</span>)<span class="s"> * </span>(y < <span class="d">0</span> ? -<span class="d">1</span> : <span class="d">1</span>),
+</code><code id="L4483"><span class="ln">4483</span> t<span class="s"> = </span>X<span class="s"> + </span>Y<span class="s"> + </span><span class="d">.5</span>;
+</code><code id="L4484"><span class="ln">4484</span> <b>return</b> (<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>t;
+</code><code id="L4485"><span class="ln">4485</span> },
+</code><code id="L4486"><span class="ln">4486</span> backIn: <b>function</b> (n) {
+</code><code id="L4487"><span class="ln">4487</span> <b>var</b> s<span class="s"> = </span><span class="d">1.70158</span>;
+</code><code id="L4488"><span class="ln">4488</span> <b>return</b> n<span class="s"> * </span>n<span class="s"> * </span>((s<span class="s"> + </span><span class="d">1</span>)<span class="s"> * </span>n<span class="s"> - </span>s);
+</code><code id="L4489"><span class="ln">4489</span> },
+</code><code id="L4490"><span class="ln">4490</span> backOut: <b>function</b> (n) {
+</code><code id="L4491"><span class="ln">4491</span> n<span class="s"> = </span>n<span class="s"> - </span><span class="d">1</span>;
+</code><code id="L4492"><span class="ln">4492</span> <b>var</b> s<span class="s"> = </span><span class="d">1.70158</span>;
+</code><code id="L4493"><span class="ln">4493</span> <b>return</b> n<span class="s"> * </span>n<span class="s"> * </span>((s<span class="s"> + </span><span class="d">1</span>)<span class="s"> * </span>n<span class="s"> + </span>s)<span class="s"> + </span><span class="d">1</span>;
+</code><code id="L4494"><span class="ln">4494</span> },
+</code><code id="L4495"><span class="ln">4495</span> elastic: <b>function</b> (n) {
+</code><code id="L4496"><span class="ln">4496</span> <b>if</b> (n<span class="s"> == </span>!!n) {
+</code><code id="L4497"><span class="ln">4497</span> <b>return</b> n;
+</code><code id="L4498"><span class="ln">4498</span> }
+</code><code id="L4499"><span class="ln">4499</span> <b>return</b> pow(<span class="d">2</span>, -<span class="d">10</span><span class="s"> * </span>n)<span class="s"> * </span>math.sin((n<span class="s"> - </span><span class="d">.075</span>)<span class="s"> * </span>(<span class="d">2</span><span class="s"> * </span>PI)<span class="s"> / </span><span class="d">.3</span>)<span class="s"> + </span><span class="d">1</span>;
+</code><code id="L4500"><span class="ln">4500</span> },
+</code><code id="L4501"><span class="ln">4501</span> bounce: <b>function</b> (n) {
+</code><code id="L4502"><span class="ln">4502</span> <b>var</b> s<span class="s"> = </span><span class="d">7.5625</span>,
+</code><code id="L4503"><span class="ln">4503</span> p<span class="s"> = </span><span class="d">2.75</span>,
+</code><code id="L4504"><span class="ln">4504</span> l;
+</code><code id="L4505"><span class="ln">4505</span> <b>if</b> (n < (<span class="d">1</span><span class="s"> / </span>p)) {
+</code><code id="L4506"><span class="ln">4506</span> l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n;
+</code><code id="L4507"><span class="ln">4507</span> } <b>else</b> {
+</code><code id="L4508"><span class="ln">4508</span> <b>if</b> (n < (<span class="d">2</span><span class="s"> / </span>p)) {
+</code><code id="L4509"><span class="ln">4509</span> n -= (<span class="d">1.5</span><span class="s"> / </span>p);
+</code><code id="L4510"><span class="ln">4510</span> l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n<span class="s"> + </span><span class="d">.75</span>;
+</code><code id="L4511"><span class="ln">4511</span> } <b>else</b> {
+</code><code id="L4512"><span class="ln">4512</span> <b>if</b> (n < (<span class="d">2.5</span><span class="s"> / </span>p)) {
+</code><code id="L4513"><span class="ln">4513</span> n -= (<span class="d">2.25</span><span class="s"> / </span>p);
+</code><code id="L4514"><span class="ln">4514</span> l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n<span class="s"> + </span><span class="d">.9375</span>;
+</code><code id="L4515"><span class="ln">4515</span> } <b>else</b> {
+</code><code id="L4516"><span class="ln">4516</span> n -= (<span class="d">2.625</span><span class="s"> / </span>p);
+</code><code id="L4517"><span class="ln">4517</span> l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n<span class="s"> + </span><span class="d">.984375</span>;
+</code><code id="L4518"><span class="ln">4518</span> }
+</code><code id="L4519"><span class="ln">4519</span> }
+</code><code id="L4520"><span class="ln">4520</span> }
+</code><code id="L4521"><span class="ln">4521</span> <b>return</b> l;
+</code><code id="L4522"><span class="ln">4522</span> }
+</code><code id="L4523"><span class="ln">4523</span> };
+</code><code id="L4524"><span class="ln">4524</span> ef.easeIn<span class="s"> = </span>ef[<i>"ease-<b>in</b>"</i>]<span class="s"> = </span>ef[<i>"<"</i>];
+</code><code id="L4525"><span class="ln">4525</span> ef.easeOut<span class="s"> = </span>ef[<i>"ease-out"</i>]<span class="s"> = </span>ef[<i>">"</i>];
+</code><code id="L4526"><span class="ln">4526</span> ef.easeInOut<span class="s"> = </span>ef[<i>"ease-<b>in</b>-out"</i>]<span class="s"> = </span>ef[<i>"<>"</i>];
+</code><code id="L4527"><span class="ln">4527</span> ef[<i>"back-<b>in</b>"</i>]<span class="s"> = </span>ef.backIn;
+</code><code id="L4528"><span class="ln">4528</span> ef[<i>"back-out"</i>]<span class="s"> = </span>ef.backOut;
+</code><code id="L4529"><span class="ln">4529</span>
+</code><code id="L4530"><span class="ln">4530</span> <b>var</b> animationElements<span class="s"> = </span>[],
+</code><code id="L4531"><span class="ln">4531</span> requestAnimFrame<span class="s"> = </span>window.requestAnimationFrame ||
+</code><code id="L4532"><span class="ln">4532</span> window.webkitRequestAnimationFrame ||
+</code><code id="L4533"><span class="ln">4533</span> window.mozRequestAnimationFrame ||
+</code><code id="L4534"><span class="ln">4534</span> window.oRequestAnimationFrame ||
+</code><code id="L4535"><span class="ln">4535</span> window.msRequestAnimationFrame ||
+</code><code id="L4536"><span class="ln">4536</span> <b>function</b> (callback) {
+</code><code id="L4537"><span class="ln">4537</span> setTimeout(callback, <span class="d">16</span>);
+</code><code id="L4538"><span class="ln">4538</span> },
+</code><code id="L4539"><span class="ln">4539</span> animation<span class="s"> = </span><b>function</b> () {
+</code><code id="L4540"><span class="ln">4540</span> <b>var</b> Now<span class="s"> = </span>+<b>new</b> Date,
+</code><code id="L4541"><span class="ln">4541</span> l<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4542"><span class="ln">4542</span> <b>for</b> (; l < animationElements.length; l++) {
+</code><code id="L4543"><span class="ln">4543</span> <b>var</b> e<span class="s"> = </span>animationElements[l];
+</code><code id="L4544"><span class="ln">4544</span> <b>if</b> (e.el.removed<span class="s"> || </span>e.paused) {
+</code><code id="L4545"><span class="ln">4545</span> <b>continue</b>;
+</code><code id="L4546"><span class="ln">4546</span> }
+</code><code id="L4547"><span class="ln">4547</span> <b>var</b> time<span class="s"> = </span>Now<span class="s"> - </span>e.start,
+</code><code id="L4548"><span class="ln">4548</span> ms<span class="s"> = </span>e.ms,
+</code><code id="L4549"><span class="ln">4549</span> easing<span class="s"> = </span>e.easing,
+</code><code id="L4550"><span class="ln">4550</span> from<span class="s"> = </span>e.from,
+</code><code id="L4551"><span class="ln">4551</span> diff<span class="s"> = </span>e.diff,
+</code><code id="L4552"><span class="ln">4552</span> to<span class="s"> = </span>e.to,
+</code><code id="L4553"><span class="ln">4553</span> t<span class="s"> = </span>e.t,
+</code><code id="L4554"><span class="ln">4554</span> that<span class="s"> = </span>e.el,
+</code><code id="L4555"><span class="ln">4555</span> set<span class="s"> = </span>{},
+</code><code id="L4556"><span class="ln">4556</span> now;
+</code><code id="L4557"><span class="ln">4557</span> <b>if</b> (e.initstatus) {
+</code><code id="L4558"><span class="ln">4558</span> time<span class="s"> = </span>(e.initstatus<span class="s"> * </span>e.anim.top<span class="s"> - </span>e.prev)<span class="s"> / </span>(e.percent<span class="s"> - </span>e.prev)<span class="s"> * </span>ms;
+</code><code id="L4559"><span class="ln">4559</span> e.status<span class="s"> = </span>e.initstatus;
+</code><code id="L4560"><span class="ln">4560</span> <b>delete</b> e.initstatus;
+</code><code id="L4561"><span class="ln">4561</span> e.stop && animationElements.splice(l--, <span class="d">1</span>);
+</code><code id="L4562"><span class="ln">4562</span> } <b>else</b> {
+</code><code id="L4563"><span class="ln">4563</span> e.status<span class="s"> = </span>(e.prev<span class="s"> + </span>(e.percent<span class="s"> - </span>e.prev)<span class="s"> * </span>(time<span class="s"> / </span>ms))<span class="s"> / </span>e.anim.top;
+</code><code id="L4564"><span class="ln">4564</span> }
+</code><code id="L4565"><span class="ln">4565</span> <b>if</b> (time < <span class="d">0</span>) {
+</code><code id="L4566"><span class="ln">4566</span> <b>continue</b>;
+</code><code id="L4567"><span class="ln">4567</span> }
+</code><code id="L4568"><span class="ln">4568</span> <b>if</b> (time < ms) {
+</code><code id="L4569"><span class="ln">4569</span> <b>var</b> pos<span class="s"> = </span>easing(time<span class="s"> / </span>ms);
+</code><code id="L4570"><span class="ln">4570</span> <b>for</b> (<b>var</b> attr <b>in</b> from) <b>if</b> (from[has](attr)) {
+</code><code id="L4571"><span class="ln">4571</span> <b>switch</b> (availableAnimAttrs[attr]) {
+</code><code id="L4572"><span class="ln">4572</span> <b>case</b> nu:
+</code><code id="L4573"><span class="ln">4573</span> now<span class="s"> = </span>+from[attr]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr];
+</code><code id="L4574"><span class="ln">4574</span> <b>break</b>;
+</code><code id="L4575"><span class="ln">4575</span> <b>case</b> <i>"colour"</i>:
+</code><code id="L4576"><span class="ln">4576</span> now<span class="s"> = </span><i>"rgb("</i><span class="s"> + </span>[
+</code><code id="L4577"><span class="ln">4577</span> upto255(round(from[attr].r<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr].r)),
+</code><code id="L4578"><span class="ln">4578</span> upto255(round(from[attr].g<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr].g)),
+</code><code id="L4579"><span class="ln">4579</span> upto255(round(from[attr].b<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr].b))
+</code><code id="L4580"><span class="ln">4580</span> ].join(<i>","</i>)<span class="s"> + </span><i>")"</i>;
+</code><code id="L4581"><span class="ln">4581</span> <b>break</b>;
+</code><code id="L4582"><span class="ln">4582</span> <b>case</b> <i>"path"</i>:
+</code><code id="L4583"><span class="ln">4583</span> now<span class="s"> = </span>[];
+</code><code id="L4584"><span class="ln">4584</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i < ii; i++) {
+</code><code id="L4585"><span class="ln">4585</span> now[i]<span class="s"> = </span>[from[attr][i][<span class="d">0</span>]];
+</code><code id="L4586"><span class="ln">4586</span> <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j < jj; j++) {
+</code><code id="L4587"><span class="ln">4587</span> now[i][j]<span class="s"> = </span>+from[attr][i][j]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i][j];
+</code><code id="L4588"><span class="ln">4588</span> }
+</code><code id="L4589"><span class="ln">4589</span> now[i]<span class="s"> = </span>now[i].join(S);
+</code><code id="L4590"><span class="ln">4590</span> }
+</code><code id="L4591"><span class="ln">4591</span> now<span class="s"> = </span>now.join(S);
+</code><code id="L4592"><span class="ln">4592</span> <b>break</b>;
+</code><code id="L4593"><span class="ln">4593</span> <b>case</b> <i>"transform"</i>:
+</code><code id="L4594"><span class="ln">4594</span> <b>if</b> (diff[attr].real) {
+</code><code id="L4595"><span class="ln">4595</span> now<span class="s"> = </span>[];
+</code><code id="L4596"><span class="ln">4596</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i < ii; i++) {
+</code><code id="L4597"><span class="ln">4597</span> now[i]<span class="s"> = </span>[from[attr][i][<span class="d">0</span>]];
+</code><code id="L4598"><span class="ln">4598</span> <b>for</b> (j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j < jj; j++) {
+</code><code id="L4599"><span class="ln">4599</span> now[i][j]<span class="s"> = </span>from[attr][i][j]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i][j];
+</code><code id="L4600"><span class="ln">4600</span> }
+</code><code id="L4601"><span class="ln">4601</span> }
+</code><code id="L4602"><span class="ln">4602</span> } <b>else</b> {
+</code><code id="L4603"><span class="ln">4603</span> <b>var</b> get<span class="s"> = </span><b>function</b> (i) {
+</code><code id="L4604"><span class="ln">4604</span> <b>return</b> +from[attr][i]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i];
+</code><code id="L4605"><span class="ln">4605</span> };
+</code><code id="L4606"><span class="ln">4606</span> <span class="c">// now<span class="s"> = </span>[[<i>"r"</i>, get(<span class="d">2</span>), <span class="d">0</span>, <span class="d">0</span>], [<i>"t"</i>, get(<span class="d">3</span>), get(<span class="d">4</span>)], [<i>"s"</i>, get(<span class="d">0</span>), get(<span class="d">1</span>), <span class="d">0</span>, <span class="d">0</span>]];</span>
+</code><code id="L4607"><span class="ln">4607</span> now<span class="s"> = </span>[[<i>"m"</i>, get(<span class="d">0</span>), get(<span class="d">1</span>), get(<span class="d">2</span>), get(<span class="d">3</span>), get(<span class="d">4</span>), get(<span class="d">5</span>)]];
+</code><code id="L4608"><span class="ln">4608</span> }
+</code><code id="L4609"><span class="ln">4609</span> <b>break</b>;
+</code><code id="L4610"><span class="ln">4610</span> <b>case</b> <i>"csv"</i>:
+</code><code id="L4611"><span class="ln">4611</span> <b>if</b> (attr<span class="s"> == </span><i>"clip-rect"</i>) {
+</code><code id="L4612"><span class="ln">4612</span> now<span class="s"> = </span>[];
+</code><code id="L4613"><span class="ln">4613</span> i<span class="s"> = </span><span class="d">4</span>;
+</code><code id="L4614"><span class="ln">4614</span> <b>while</b> (i--) {
+</code><code id="L4615"><span class="ln">4615</span> now[i]<span class="s"> = </span>+from[attr][i]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i];
+</code><code id="L4616"><span class="ln">4616</span> }
+</code><code id="L4617"><span class="ln">4617</span> }
+</code><code id="L4618"><span class="ln">4618</span> <b>break</b>;
+</code><code id="L4619"><span class="ln">4619</span> <b>default</b>:
+</code><code id="L4620"><span class="ln">4620</span> <b>var</b> from2<span class="s"> = </span>[].concat(from[attr]);
+</code><code id="L4621"><span class="ln">4621</span> now<span class="s"> = </span>[];
+</code><code id="L4622"><span class="ln">4622</span> i<span class="s"> = </span>that.paper.customAttributes[attr].length;
+</code><code id="L4623"><span class="ln">4623</span> <b>while</b> (i--) {
+</code><code id="L4624"><span class="ln">4624</span> now[i]<span class="s"> = </span>+from2[i]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i];
+</code><code id="L4625"><span class="ln">4625</span> }
+</code><code id="L4626"><span class="ln">4626</span> <b>break</b>;
+</code><code id="L4627"><span class="ln">4627</span> }
+</code><code id="L4628"><span class="ln">4628</span> set[attr]<span class="s"> = </span>now;
+</code><code id="L4629"><span class="ln">4629</span> }
+</code><code id="L4630"><span class="ln">4630</span> that.attr(set);
+</code><code id="L4631"><span class="ln">4631</span> (<b>function</b> (id, that, anim) {
+</code><code id="L4632"><span class="ln">4632</span> setTimeout(<b>function</b> () {
+</code><code id="L4633"><span class="ln">4633</span> eve(<i>"anim.frame."</i><span class="s"> + </span>id, that, anim);
+</code><code id="L4634"><span class="ln">4634</span> });
+</code><code id="L4635"><span class="ln">4635</span> })(that.id, that, e.anim);
+</code><code id="L4636"><span class="ln">4636</span> } <b>else</b> {
+</code><code id="L4637"><span class="ln">4637</span> (<b>function</b>(f, el, a) {
+</code><code id="L4638"><span class="ln">4638</span> setTimeout(<b>function</b>() {
+</code><code id="L4639"><span class="ln">4639</span> eve(<i>"anim.finish."</i><span class="s"> + </span>el.id, el, a);
+</code><code id="L4640"><span class="ln">4640</span> R.is(f, <i>"<b>function</b>"</i>) && f.call(el);
+</code><code id="L4641"><span class="ln">4641</span> });
+</code><code id="L4642"><span class="ln">4642</span> })(e.callback, that, e.anim);
+</code><code id="L4643"><span class="ln">4643</span> <b>if</b> (--e.repeat) {
+</code><code id="L4644"><span class="ln">4644</span> that.attr(e.origin);
+</code><code id="L4645"><span class="ln">4645</span> e.start<span class="s"> = </span>Now;
+</code><code id="L4646"><span class="ln">4646</span> } <b>else</b> {
+</code><code id="L4647"><span class="ln">4647</span> that.attr(to);
+</code><code id="L4648"><span class="ln">4648</span> animationElements.splice(l--, <span class="d">1</span>);
+</code><code id="L4649"><span class="ln">4649</span> }
+</code><code id="L4650"><span class="ln">4650</span> <b>if</b> (e.next && !e.stop) {
+</code><code id="L4651"><span class="ln">4651</span> runAnimation(e.anim, e.el, e.next, <b>null</b>, e.totalOrigin);
+</code><code id="L4652"><span class="ln">4652</span> }
+</code><code id="L4653"><span class="ln">4653</span> }
+</code><code id="L4654"><span class="ln">4654</span> }
+</code><code id="L4655"><span class="ln">4655</span> R.svg && that && that.paper && that.paper.safari();
+</code><code id="L4656"><span class="ln">4656</span> animationElements.length && requestAnimFrame(animation);
+</code><code id="L4657"><span class="ln">4657</span> },
+</code><code id="L4658"><span class="ln">4658</span> upto255<span class="s"> = </span><b>function</b> (color) {
+</code><code id="L4659"><span class="ln">4659</span> <b>return</b> mmax(mmin(color, <span class="d">255</span>), <span class="d">0</span>);
+</code><code id="L4660"><span class="ln">4660</span> };
+</code><code id="L4661"><span class="ln">4661</span> elproto.animateWith<span class="s"> = </span><b>function</b> (element, params, ms, easing, callback) {
+</code><code id="L4662"><span class="ln">4662</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>animationElements.length; i < ii; i++) {
+</code><code id="L4663"><span class="ln">4663</span> <b>if</b> (animationElements[i].el.id<span class="s"> == </span>element.id) {
+</code><code id="L4664"><span class="ln">4664</span> params.start<span class="s"> = </span>animationElements[i].timestamp;
+</code><code id="L4665"><span class="ln">4665</span> <b>break</b>;
+</code><code id="L4666"><span class="ln">4666</span> }
+</code><code id="L4667"><span class="ln">4667</span> }
+</code><code id="L4668"><span class="ln">4668</span> <b>return</b> <b>this</b>.animate(params, ms, easing, callback);
+</code><code id="L4669"><span class="ln">4669</span> };
+</code><code id="L4670"><span class="ln">4670</span> <b>function</b> CubicBezierAtTime(t, p1x, p1y, p2x, p2y, duration) {
+</code><code id="L4671"><span class="ln">4671</span> <b>var</b> cx<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>p1x,
+</code><code id="L4672"><span class="ln">4672</span> bx<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>(p2x<span class="s"> - </span>p1x)<span class="s"> - </span>cx,
+</code><code id="L4673"><span class="ln">4673</span> ax<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>cx<span class="s"> - </span>bx,
+</code><code id="L4674"><span class="ln">4674</span> cy<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>p1y,
+</code><code id="L4675"><span class="ln">4675</span> by<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>(p2y<span class="s"> - </span>p1y)<span class="s"> - </span>cy,
+</code><code id="L4676"><span class="ln">4676</span> ay<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>cy<span class="s"> - </span>by;
+</code><code id="L4677"><span class="ln">4677</span> <b>function</b> sampleCurveX(t) {
+</code><code id="L4678"><span class="ln">4678</span> <b>return</b> ((ax<span class="s"> * </span>t<span class="s"> + </span>bx)<span class="s"> * </span>t<span class="s"> + </span>cx)<span class="s"> * </span>t;
+</code><code id="L4679"><span class="ln">4679</span> }
+</code><code id="L4680"><span class="ln">4680</span> <b>function</b> solve(x, epsilon) {
+</code><code id="L4681"><span class="ln">4681</span> <b>var</b> t<span class="s"> = </span>solveCurveX(x, epsilon);
+</code><code id="L4682"><span class="ln">4682</span> <b>return</b> ((ay<span class="s"> * </span>t<span class="s"> + </span>by)<span class="s"> * </span>t<span class="s"> + </span>cy)<span class="s"> * </span>t;
+</code><code id="L4683"><span class="ln">4683</span> }
+</code><code id="L4684"><span class="ln">4684</span> <b>function</b> solveCurveX(x, epsilon) {
+</code><code id="L4685"><span class="ln">4685</span> <b>var</b> t0, t1, t2, x2, d2, i;
+</code><code id="L4686"><span class="ln">4686</span> <b>for</b>(t2<span class="s"> = </span>x, i<span class="s"> = </span><span class="d">0</span>; i < <span class="d">8</span>; i++) {
+</code><code id="L4687"><span class="ln">4687</span> x2<span class="s"> = </span>sampleCurveX(t2)<span class="s"> - </span>x;
+</code><code id="L4688"><span class="ln">4688</span> <b>if</b> (abs(x2) < epsilon) {
+</code><code id="L4689"><span class="ln">4689</span> <b>return</b> t2;
+</code><code id="L4690"><span class="ln">4690</span> }
+</code><code id="L4691"><span class="ln">4691</span> d2<span class="s"> = </span>(<span class="d">3</span><span class="s"> * </span>ax<span class="s"> * </span>t2<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>bx)<span class="s"> * </span>t2<span class="s"> + </span>cx;
+</code><code id="L4692"><span class="ln">4692</span> <b>if</b> (abs(d2) < <span class="d">1e-6</span>) {
+</code><code id="L4693"><span class="ln">4693</span> <b>break</b>;
+</code><code id="L4694"><span class="ln">4694</span> }
+</code><code id="L4695"><span class="ln">4695</span> t2<span class="s"> = </span>t2<span class="s"> - </span>x2<span class="s"> / </span>d2;
+</code><code id="L4696"><span class="ln">4696</span> }
+</code><code id="L4697"><span class="ln">4697</span> t0<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4698"><span class="ln">4698</span> t1<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L4699"><span class="ln">4699</span> t2<span class="s"> = </span>x;
+</code><code id="L4700"><span class="ln">4700</span> <b>if</b> (t2 < t0) {
+</code><code id="L4701"><span class="ln">4701</span> <b>return</b> t0;
+</code><code id="L4702"><span class="ln">4702</span> }
+</code><code id="L4703"><span class="ln">4703</span> <b>if</b> (t2 > t1) {
+</code><code id="L4704"><span class="ln">4704</span> <b>return</b> t1;
+</code><code id="L4705"><span class="ln">4705</span> }
+</code><code id="L4706"><span class="ln">4706</span> <b>while</b> (t0 < t1) {
+</code><code id="L4707"><span class="ln">4707</span> x2<span class="s"> = </span>sampleCurveX(t2);
+</code><code id="L4708"><span class="ln">4708</span> <b>if</b> (abs(x2<span class="s"> - </span>x) < epsilon) {
+</code><code id="L4709"><span class="ln">4709</span> <b>return</b> t2;
+</code><code id="L4710"><span class="ln">4710</span> }
+</code><code id="L4711"><span class="ln">4711</span> <b>if</b> (x > x2) {
+</code><code id="L4712"><span class="ln">4712</span> t0<span class="s"> = </span>t2;
+</code><code id="L4713"><span class="ln">4713</span> } <b>else</b> {
+</code><code id="L4714"><span class="ln">4714</span> t1<span class="s"> = </span>t2;
+</code><code id="L4715"><span class="ln">4715</span> }
+</code><code id="L4716"><span class="ln">4716</span> t2<span class="s"> = </span>(t1<span class="s"> - </span>t0)<span class="s"> / </span><span class="d">2</span><span class="s"> + </span>t0;
+</code><code id="L4717"><span class="ln">4717</span> }
+</code><code id="L4718"><span class="ln">4718</span> <b>return</b> t2;
+</code><code id="L4719"><span class="ln">4719</span> }
+</code><code id="L4720"><span class="ln">4720</span> <b>return</b> solve(t, <span class="d">1</span><span class="s"> / </span>(<span class="d">200</span><span class="s"> * </span>duration));
+</code><code id="L4721"><span class="ln">4721</span> }
+</code><code id="L4722"><span class="ln">4722</span> elproto.onAnimation<span class="s"> = </span><b>function</b> (f) {
+</code><code id="L4723"><span class="ln">4723</span> f ? eve.on(<i>"anim.frame."</i><span class="s"> + </span><b>this</b>.id, f) : eve.unbind(<i>"anim.frame."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L4724"><span class="ln">4724</span> <b>return</b> <b>this</b>;
+</code><code id="L4725"><span class="ln">4725</span> };
+</code><code id="L4726"><span class="ln">4726</span> <b>function</b> Animation(anim, ms) {
+</code><code id="L4727"><span class="ln">4727</span> <b>var</b> percents<span class="s"> = </span>[];
+</code><code id="L4728"><span class="ln">4728</span> <b>this</b>.anim<span class="s"> = </span>anim;
+</code><code id="L4729"><span class="ln">4729</span> <b>this</b>.ms<span class="s"> = </span>ms;
+</code><code id="L4730"><span class="ln">4730</span> <b>this</b>.times<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L4731"><span class="ln">4731</span> <b>if</b> (<b>this</b>.anim) {
+</code><code id="L4732"><span class="ln">4732</span> <b>for</b> (<b>var</b> attr <b>in</b> <b>this</b>.anim) <b>if</b> (<b>this</b>.anim[has](attr)) {
+</code><code id="L4733"><span class="ln">4733</span> percents.push(+attr);
+</code><code id="L4734"><span class="ln">4734</span> }
+</code><code id="L4735"><span class="ln">4735</span> percents.sort(sortByNumber);
+</code><code id="L4736"><span class="ln">4736</span> }
+</code><code id="L4737"><span class="ln">4737</span> <b>this</b>.top<span class="s"> = </span>percents[percents.length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L4738"><span class="ln">4738</span> <b>this</b>.percents<span class="s"> = </span>percents;
+</code><code id="L4739"><span class="ln">4739</span> }
+</code><code id="L4740"><span class="ln">4740</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4741"><span class="ln">4741</span><span class="c"> <span class="s"> * </span>Animation.delay
+</span></code><code id="L4742"><span class="ln">4742</span><span class="c"> [ method ]
+</span></code><code id="L4743"><span class="ln">4743</span><span class="c"> **
+</span></code><code id="L4744"><span class="ln">4744</span><span class="c"> <span class="s"> * </span>Creates copy of existing animation object <b>with</b> given delay.
+</span></code><code id="L4745"><span class="ln">4745</span><span class="c"> **
+</span></code><code id="L4746"><span class="ln">4746</span><span class="c"> > Parameters
+</span></code><code id="L4747"><span class="ln">4747</span><span class="c"> **
+</span></code><code id="L4748"><span class="ln">4748</span><span class="c"> <span class="s"> - </span>delay (number) number of ms to pass between animation start and actual animation
+</span></code><code id="L4749"><span class="ln">4749</span><span class="c"> **
+</span></code><code id="L4750"><span class="ln">4750</span><span class="c"> <span class="s"> = </span>(object) <b>new</b> altered Animation object
+</span></code><code id="L4751"><span class="ln">4751</span><span class="c"> \*/</span>
+</code><code id="L4752"><span class="ln">4752</span> Animation.prototype.delay<span class="s"> = </span><b>function</b> (delay) {
+</code><code id="L4753"><span class="ln">4753</span> <b>var</b> a<span class="s"> = </span><b>new</b> Animation(<b>this</b>.anim, <b>this</b>.ms);
+</code><code id="L4754"><span class="ln">4754</span> a.times<span class="s"> = </span><b>this</b>.times;
+</code><code id="L4755"><span class="ln">4755</span> a.del<span class="s"> = </span>+delay<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L4756"><span class="ln">4756</span> <b>return</b> a;
+</code><code id="L4757"><span class="ln">4757</span> };
+</code><code id="L4758"><span class="ln">4758</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4759"><span class="ln">4759</span><span class="c"> <span class="s"> * </span>Animation.repeat
+</span></code><code id="L4760"><span class="ln">4760</span><span class="c"> [ method ]
+</span></code><code id="L4761"><span class="ln">4761</span><span class="c"> **
+</span></code><code id="L4762"><span class="ln">4762</span><span class="c"> <span class="s"> * </span>Creates copy of existing animation object <b>with</b> given repetition.
+</span></code><code id="L4763"><span class="ln">4763</span><span class="c"> **
+</span></code><code id="L4764"><span class="ln">4764</span><span class="c"> > Parameters
+</span></code><code id="L4765"><span class="ln">4765</span><span class="c"> **
+</span></code><code id="L4766"><span class="ln">4766</span><span class="c"> <span class="s"> - </span>repeat (number) number iterations of animation. For infinite animation pass `Infinity`
+</span></code><code id="L4767"><span class="ln">4767</span><span class="c"> **
+</span></code><code id="L4768"><span class="ln">4768</span><span class="c"> <span class="s"> = </span>(object) <b>new</b> altered Animation object
+</span></code><code id="L4769"><span class="ln">4769</span><span class="c"> \*/</span>
+</code><code id="L4770"><span class="ln">4770</span> Animation.prototype.repeat<span class="s"> = </span><b>function</b> (times) {
+</code><code id="L4771"><span class="ln">4771</span> <b>var</b> a<span class="s"> = </span><b>new</b> Animation(<b>this</b>.anim, <b>this</b>.ms);
+</code><code id="L4772"><span class="ln">4772</span> a.del<span class="s"> = </span><b>this</b>.del;
+</code><code id="L4773"><span class="ln">4773</span> a.times<span class="s"> = </span>math.floor(mmax(times, <span class="d">0</span>))<span class="s"> || </span><span class="d">1</span>;
+</code><code id="L4774"><span class="ln">4774</span> <b>return</b> a;
+</code><code id="L4775"><span class="ln">4775</span> };
+</code><code id="L4776"><span class="ln">4776</span> <b>function</b> runAnimation(anim, element, percent, status, totalOrigin) {
+</code><code id="L4777"><span class="ln">4777</span> percent<span class="s"> = </span>toFloat(percent);
+</code><code id="L4778"><span class="ln">4778</span> <b>var</b> params,
+</code><code id="L4779"><span class="ln">4779</span> isInAnim,
+</code><code id="L4780"><span class="ln">4780</span> isInAnimSet,
+</code><code id="L4781"><span class="ln">4781</span> percents<span class="s"> = </span>[],
+</code><code id="L4782"><span class="ln">4782</span> next,
+</code><code id="L4783"><span class="ln">4783</span> prev,
+</code><code id="L4784"><span class="ln">4784</span> timestamp,
+</code><code id="L4785"><span class="ln">4785</span> ms<span class="s"> = </span>anim.ms,
+</code><code id="L4786"><span class="ln">4786</span> from<span class="s"> = </span>{},
+</code><code id="L4787"><span class="ln">4787</span> to<span class="s"> = </span>{},
+</code><code id="L4788"><span class="ln">4788</span> diff<span class="s"> = </span>{};
+</code><code id="L4789"><span class="ln">4789</span> <b>if</b> (status) {
+</code><code id="L4790"><span class="ln">4790</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>animationElements.length; i < ii; i++) {
+</code><code id="L4791"><span class="ln">4791</span> <b>var</b> e<span class="s"> = </span>animationElements[i];
+</code><code id="L4792"><span class="ln">4792</span> <b>if</b> (e.el.id<span class="s"> == </span>element.id && e.anim<span class="s"> == </span>anim) {
+</code><code id="L4793"><span class="ln">4793</span> <b>if</b> (e.percent != percent) {
+</code><code id="L4794"><span class="ln">4794</span> animationElements.splice(i, <span class="d">1</span>);
+</code><code id="L4795"><span class="ln">4795</span> isInAnimSet<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L4796"><span class="ln">4796</span> } <b>else</b> {
+</code><code id="L4797"><span class="ln">4797</span> isInAnim<span class="s"> = </span>e;
+</code><code id="L4798"><span class="ln">4798</span> }
+</code><code id="L4799"><span class="ln">4799</span> element.attr(e.totalOrigin);
+</code><code id="L4800"><span class="ln">4800</span> <b>break</b>;
+</code><code id="L4801"><span class="ln">4801</span> }
+</code><code id="L4802"><span class="ln">4802</span> }
+</code><code id="L4803"><span class="ln">4803</span> } <b>else</b> {
+</code><code id="L4804"><span class="ln">4804</span> status<span class="s"> = </span><span class="d">0</span><span class="s"> / </span><span class="d">0</span>;
+</code><code id="L4805"><span class="ln">4805</span> }
+</code><code id="L4806"><span class="ln">4806</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>anim.percents.length; i < ii; i++) {
+</code><code id="L4807"><span class="ln">4807</span> <b>if</b> (anim.percents[i]<span class="s"> == </span>percent<span class="s"> || </span>anim.percents[i] > status<span class="s"> * </span>anim.top) {
+</code><code id="L4808"><span class="ln">4808</span> percent<span class="s"> = </span>anim.percents[i];
+</code><code id="L4809"><span class="ln">4809</span> prev<span class="s"> = </span>anim.percents[i<span class="s"> - </span><span class="d">1</span>]<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L4810"><span class="ln">4810</span> ms<span class="s"> = </span>ms<span class="s"> / </span>anim.top<span class="s"> * </span>(percent<span class="s"> - </span>prev);
+</code><code id="L4811"><span class="ln">4811</span> next<span class="s"> = </span>anim.percents[i<span class="s"> + </span><span class="d">1</span>];
+</code><code id="L4812"><span class="ln">4812</span> params<span class="s"> = </span>anim.anim[percent];
+</code><code id="L4813"><span class="ln">4813</span> <b>break</b>;
+</code><code id="L4814"><span class="ln">4814</span> } <b>else</b> <b>if</b> (status) {
+</code><code id="L4815"><span class="ln">4815</span> element.attr(anim.anim[anim.percents[i]]);
+</code><code id="L4816"><span class="ln">4816</span> }
+</code><code id="L4817"><span class="ln">4817</span> }
+</code><code id="L4818"><span class="ln">4818</span> <b>if</b> (!params) {
+</code><code id="L4819"><span class="ln">4819</span> <b>return</b>;
+</code><code id="L4820"><span class="ln">4820</span> }
+</code><code id="L4821"><span class="ln">4821</span> <b>if</b> (!isInAnim) {
+</code><code id="L4822"><span class="ln">4822</span> <b>for</b> (attr <b>in</b> params) <b>if</b> (params[has](attr)) {
+</code><code id="L4823"><span class="ln">4823</span> <b>if</b> (availableAnimAttrs[has](attr)<span class="s"> || </span>element.paper.customAttributes[has](attr)) {
+</code><code id="L4824"><span class="ln">4824</span> from[attr]<span class="s"> = </span>element.attr(attr);
+</code><code id="L4825"><span class="ln">4825</span> (from[attr]<span class="s"> == </span><b>null</b>) && (from[attr]<span class="s"> = </span>availableAttrs[attr]);
+</code><code id="L4826"><span class="ln">4826</span> to[attr]<span class="s"> = </span>params[attr];
+</code><code id="L4827"><span class="ln">4827</span> <b>switch</b> (availableAnimAttrs[attr]) {
+</code><code id="L4828"><span class="ln">4828</span> <b>case</b> nu:
+</code><code id="L4829"><span class="ln">4829</span> diff[attr]<span class="s"> = </span>(to[attr]<span class="s"> - </span>from[attr])<span class="s"> / </span>ms;
+</code><code id="L4830"><span class="ln">4830</span> <b>break</b>;
+</code><code id="L4831"><span class="ln">4831</span> <b>case</b> <i>"colour"</i>:
+</code><code id="L4832"><span class="ln">4832</span> from[attr]<span class="s"> = </span>R.getRGB(from[attr]);
+</code><code id="L4833"><span class="ln">4833</span> <b>var</b> toColour<span class="s"> = </span>R.getRGB(to[attr]);
+</code><code id="L4834"><span class="ln">4834</span> diff[attr]<span class="s"> = </span>{
+</code><code id="L4835"><span class="ln">4835</span> r: (toColour.r<span class="s"> - </span>from[attr].r)<span class="s"> / </span>ms,
+</code><code id="L4836"><span class="ln">4836</span> g: (toColour.g<span class="s"> - </span>from[attr].g)<span class="s"> / </span>ms,
+</code><code id="L4837"><span class="ln">4837</span> b: (toColour.b<span class="s"> - </span>from[attr].b)<span class="s"> / </span>ms
+</code><code id="L4838"><span class="ln">4838</span> };
+</code><code id="L4839"><span class="ln">4839</span> <b>break</b>;
+</code><code id="L4840"><span class="ln">4840</span> <b>case</b> <i>"path"</i>:
+</code><code id="L4841"><span class="ln">4841</span> <b>var</b> pathes<span class="s"> = </span>path2curve(from[attr], to[attr]),
+</code><code id="L4842"><span class="ln">4842</span> toPath<span class="s"> = </span>pathes[<span class="d">1</span>];
+</code><code id="L4843"><span class="ln">4843</span> from[attr]<span class="s"> = </span>pathes[<span class="d">0</span>];
+</code><code id="L4844"><span class="ln">4844</span> diff[attr]<span class="s"> = </span>[];
+</code><code id="L4845"><span class="ln">4845</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i < ii; i++) {
+</code><code id="L4846"><span class="ln">4846</span> diff[attr][i]<span class="s"> = </span>[<span class="d">0</span>];
+</code><code id="L4847"><span class="ln">4847</span> <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j < jj; j++) {
+</code><code id="L4848"><span class="ln">4848</span> diff[attr][i][j]<span class="s"> = </span>(toPath[i][j]<span class="s"> - </span>from[attr][i][j])<span class="s"> / </span>ms;
+</code><code id="L4849"><span class="ln">4849</span> }
+</code><code id="L4850"><span class="ln">4850</span> }
+</code><code id="L4851"><span class="ln">4851</span> <b>break</b>;
+</code><code id="L4852"><span class="ln">4852</span> <b>case</b> <i>"transform"</i>:
+</code><code id="L4853"><span class="ln">4853</span> <b>var</b> _<span class="s"> = </span>element._,
+</code><code id="L4854"><span class="ln">4854</span> eq<span class="s"> = </span>equaliseTransform(_[attr], to[attr]);
+</code><code id="L4855"><span class="ln">4855</span> <b>if</b> (eq) {
+</code><code id="L4856"><span class="ln">4856</span> from[attr]<span class="s"> = </span>eq.from;
+</code><code id="L4857"><span class="ln">4857</span> to[attr]<span class="s"> = </span>eq.to;
+</code><code id="L4858"><span class="ln">4858</span> diff[attr]<span class="s"> = </span>[];
+</code><code id="L4859"><span class="ln">4859</span> diff[attr].real<span class="s"> = </span><b>true</b>;
+</code><code id="L4860"><span class="ln">4860</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i < ii; i++) {
+</code><code id="L4861"><span class="ln">4861</span> diff[attr][i]<span class="s"> = </span>[from[attr][i][<span class="d">0</span>]];
+</code><code id="L4862"><span class="ln">4862</span> <b>for</b> (j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j < jj; j++) {
+</code><code id="L4863"><span class="ln">4863</span> diff[attr][i][j]<span class="s"> = </span>(to[attr][i][j]<span class="s"> - </span>from[attr][i][j])<span class="s"> / </span>ms;
+</code><code id="L4864"><span class="ln">4864</span> }
+</code><code id="L4865"><span class="ln">4865</span> }
+</code><code id="L4866"><span class="ln">4866</span> } <b>else</b> {
+</code><code id="L4867"><span class="ln">4867</span> <b>var</b> m<span class="s"> = </span>(element.matrix<span class="s"> || </span><b>new</b> Matrix).m,
+</code><code id="L4868"><span class="ln">4868</span> to2<span class="s"> = </span>{_:{transform: _.transform}, getBBox: <b>function</b> () { <b>return</b> element.getBBox(); }};
+</code><code id="L4869"><span class="ln">4869</span> from[attr]<span class="s"> = </span>[
+</code><code id="L4870"><span class="ln">4870</span> m[<span class="d">0</span>][<span class="d">0</span>],
+</code><code id="L4871"><span class="ln">4871</span> m[<span class="d">1</span>][<span class="d">0</span>],
+</code><code id="L4872"><span class="ln">4872</span> m[<span class="d">0</span>][<span class="d">1</span>],
+</code><code id="L4873"><span class="ln">4873</span> m[<span class="d">1</span>][<span class="d">1</span>],
+</code><code id="L4874"><span class="ln">4874</span> m[<span class="d">0</span>][<span class="d">2</span>],
+</code><code id="L4875"><span class="ln">4875</span> m[<span class="d">1</span>][<span class="d">2</span>]
+</code><code id="L4876"><span class="ln">4876</span> ];
+</code><code id="L4877"><span class="ln">4877</span> extractTransform(to2, to[attr]);
+</code><code id="L4878"><span class="ln">4878</span> to[attr]<span class="s"> = </span>to2._.transform;
+</code><code id="L4879"><span class="ln">4879</span> diff[attr]<span class="s"> = </span>[
+</code><code id="L4880"><span class="ln">4880</span> (to2.matrix.m[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> - </span>m[<span class="d">0</span>][<span class="d">0</span>])<span class="s"> / </span>ms,
+</code><code id="L4881"><span class="ln">4881</span> (to2.matrix.m[<span class="d">1</span>][<span class="d">0</span>]<span class="s"> - </span>m[<span class="d">1</span>][<span class="d">0</span>])<span class="s"> / </span>ms,
+</code><code id="L4882"><span class="ln">4882</span> (to2.matrix.m[<span class="d">0</span>][<span class="d">1</span>]<span class="s"> - </span>m[<span class="d">0</span>][<span class="d">1</span>])<span class="s"> / </span>ms,
+</code><code id="L4883"><span class="ln">4883</span> (to2.matrix.m[<span class="d">1</span>][<span class="d">1</span>]<span class="s"> - </span>m[<span class="d">1</span>][<span class="d">1</span>])<span class="s"> / </span>ms,
+</code><code id="L4884"><span class="ln">4884</span> (to2.matrix.m[<span class="d">0</span>][<span class="d">2</span>]<span class="s"> - </span>m[<span class="d">0</span>][<span class="d">2</span>])<span class="s"> / </span>ms,
+</code><code id="L4885"><span class="ln">4885</span> (to2.matrix.m[<span class="d">1</span>][<span class="d">2</span>]<span class="s"> - </span>m[<span class="d">1</span>][<span class="d">2</span>])<span class="s"> / </span>ms
+</code><code id="L4886"><span class="ln">4886</span> ];
+</code><code id="L4887"><span class="ln">4887</span> <span class="c">// from[attr]<span class="s"> = </span>[_.sx, _.sy, _.deg, _.dx, _.dy];</span>
+</code><code id="L4888"><span class="ln">4888</span> <span class="c">// <b>var</b> to2<span class="s"> = </span>{_:{}, getBBox: <b>function</b> () { <b>return</b> element.getBBox(); }};</span>
+</code><code id="L4889"><span class="ln">4889</span> <span class="c">// extractTransform(to2, to[attr]);</span>
+</code><code id="L4890"><span class="ln">4890</span> <span class="c">// diff[attr]<span class="s"> = </span>[</span>
+</code><code id="L4891"><span class="ln">4891</span> <span class="c">// (to2._.sx<span class="s"> - </span>_.sx)<span class="s"> / </span>ms,</span>
+</code><code id="L4892"><span class="ln">4892</span> <span class="c">// (to2._.sy<span class="s"> - </span>_.sy)<span class="s"> / </span>ms,</span>
+</code><code id="L4893"><span class="ln">4893</span> <span class="c">// (to2._.deg<span class="s"> - </span>_.deg)<span class="s"> / </span>ms,</span>
+</code><code id="L4894"><span class="ln">4894</span> <span class="c">// (to2._.dx<span class="s"> - </span>_.dx)<span class="s"> / </span>ms,</span>
+</code><code id="L4895"><span class="ln">4895</span> <span class="c">// (to2._.dy<span class="s"> - </span>_.dy)<span class="s"> / </span>ms</span>
+</code><code id="L4896"><span class="ln">4896</span> <span class="c">// ];</span>
+</code><code id="L4897"><span class="ln">4897</span> }
+</code><code id="L4898"><span class="ln">4898</span> <b>break</b>;
+</code><code id="L4899"><span class="ln">4899</span> <b>case</b> <i>"csv"</i>:
+</code><code id="L4900"><span class="ln">4900</span> <b>var</b> values<span class="s"> = </span>Str(params[attr]).split(separator),
+</code><code id="L4901"><span class="ln">4901</span> from2<span class="s"> = </span>Str(from[attr]).split(separator);
+</code><code id="L4902"><span class="ln">4902</span> <b>if</b> (attr<span class="s"> == </span><i>"clip-rect"</i>) {
+</code><code id="L4903"><span class="ln">4903</span> from[attr]<span class="s"> = </span>from2;
+</code><code id="L4904"><span class="ln">4904</span> diff[attr]<span class="s"> = </span>[];
+</code><code id="L4905"><span class="ln">4905</span> i<span class="s"> = </span>from2.length;
+</code><code id="L4906"><span class="ln">4906</span> <b>while</b> (i--) {
+</code><code id="L4907"><span class="ln">4907</span> diff[attr][i]<span class="s"> = </span>(values[i]<span class="s"> - </span>from[attr][i])<span class="s"> / </span>ms;
+</code><code id="L4908"><span class="ln">4908</span> }
+</code><code id="L4909"><span class="ln">4909</span> }
+</code><code id="L4910"><span class="ln">4910</span> to[attr]<span class="s"> = </span>values;
+</code><code id="L4911"><span class="ln">4911</span> <b>break</b>;
+</code><code id="L4912"><span class="ln">4912</span> <b>default</b>:
+</code><code id="L4913"><span class="ln">4913</span> values<span class="s"> = </span>[].concat(params[attr]);
+</code><code id="L4914"><span class="ln">4914</span> from2<span class="s"> = </span>[].concat(from[attr]);
+</code><code id="L4915"><span class="ln">4915</span> diff[attr]<span class="s"> = </span>[];
+</code><code id="L4916"><span class="ln">4916</span> i<span class="s"> = </span>element.paper.customAttributes[attr].length;
+</code><code id="L4917"><span class="ln">4917</span> <b>while</b> (i--) {
+</code><code id="L4918"><span class="ln">4918</span> diff[attr][i]<span class="s"> = </span>((values[i]<span class="s"> || </span><span class="d">0</span>)<span class="s"> - </span>(from2[i]<span class="s"> || </span><span class="d">0</span>))<span class="s"> / </span>ms;
+</code><code id="L4919"><span class="ln">4919</span> }
+</code><code id="L4920"><span class="ln">4920</span> <b>break</b>;
+</code><code id="L4921"><span class="ln">4921</span> }
+</code><code id="L4922"><span class="ln">4922</span> }
+</code><code id="L4923"><span class="ln">4923</span> }
+</code><code id="L4924"><span class="ln">4924</span> <b>var</b> easing<span class="s"> = </span>params.easing,
+</code><code id="L4925"><span class="ln">4925</span> easyeasy<span class="s"> = </span>R.easing_formulas[easing];
+</code><code id="L4926"><span class="ln">4926</span> <b>if</b> (!easyeasy) {
+</code><code id="L4927"><span class="ln">4927</span> easyeasy<span class="s"> = </span>Str(easing).match(bezierrg);
+</code><code id="L4928"><span class="ln">4928</span> <b>if</b> (easyeasy && easyeasy.length<span class="s"> == </span><span class="d">5</span>) {
+</code><code id="L4929"><span class="ln">4929</span> <b>var</b> curve<span class="s"> = </span>easyeasy;
+</code><code id="L4930"><span class="ln">4930</span> easyeasy<span class="s"> = </span><b>function</b> (t) {
+</code><code id="L4931"><span class="ln">4931</span> <b>return</b> CubicBezierAtTime(t, +curve[<span class="d">1</span>], +curve[<span class="d">2</span>], +curve[<span class="d">3</span>], +curve[<span class="d">4</span>], ms);
+</code><code id="L4932"><span class="ln">4932</span> };
+</code><code id="L4933"><span class="ln">4933</span> } <b>else</b> {
+</code><code id="L4934"><span class="ln">4934</span> easyeasy<span class="s"> = </span>pipe;
+</code><code id="L4935"><span class="ln">4935</span> }
+</code><code id="L4936"><span class="ln">4936</span> }
+</code><code id="L4937"><span class="ln">4937</span> timestamp<span class="s"> = </span>params.start<span class="s"> || </span>anim.start<span class="s"> || </span>+<b>new</b> Date;
+</code><code id="L4938"><span class="ln">4938</span> e<span class="s"> = </span>{
+</code><code id="L4939"><span class="ln">4939</span> anim: anim,
+</code><code id="L4940"><span class="ln">4940</span> percent: percent,
+</code><code id="L4941"><span class="ln">4941</span> timestamp: timestamp,
+</code><code id="L4942"><span class="ln">4942</span> start: timestamp<span class="s"> + </span>(anim.del<span class="s"> || </span><span class="d">0</span>),
+</code><code id="L4943"><span class="ln">4943</span> status: <span class="d">0</span>,
+</code><code id="L4944"><span class="ln">4944</span> initstatus: status<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L4945"><span class="ln">4945</span> stop: <b>false</b>,
+</code><code id="L4946"><span class="ln">4946</span> ms: ms,
+</code><code id="L4947"><span class="ln">4947</span> easing: easyeasy,
+</code><code id="L4948"><span class="ln">4948</span> from: from,
+</code><code id="L4949"><span class="ln">4949</span> diff: diff,
+</code><code id="L4950"><span class="ln">4950</span> to: to,
+</code><code id="L4951"><span class="ln">4951</span> el: element,
+</code><code id="L4952"><span class="ln">4952</span> callback: params.callback,
+</code><code id="L4953"><span class="ln">4953</span> prev: prev,
+</code><code id="L4954"><span class="ln">4954</span> next: next,
+</code><code id="L4955"><span class="ln">4955</span> repeat: anim.times,
+</code><code id="L4956"><span class="ln">4956</span> origin: element.attr(),
+</code><code id="L4957"><span class="ln">4957</span> totalOrigin: totalOrigin
+</code><code id="L4958"><span class="ln">4958</span> };
+</code><code id="L4959"><span class="ln">4959</span> animationElements.push(e);
+</code><code id="L4960"><span class="ln">4960</span> <b>if</b> (status && !isInAnim) {
+</code><code id="L4961"><span class="ln">4961</span> e.stop<span class="s"> = </span><b>true</b>;
+</code><code id="L4962"><span class="ln">4962</span> e.start<span class="s"> = </span><b>new</b> Date<span class="s"> - </span>ms<span class="s"> * </span>status;
+</code><code id="L4963"><span class="ln">4963</span> <b>if</b> (animationElements.length<span class="s"> == </span><span class="d">1</span>) {
+</code><code id="L4964"><span class="ln">4964</span> <b>return</b> animation();
+</code><code id="L4965"><span class="ln">4965</span> }
+</code><code id="L4966"><span class="ln">4966</span> }
+</code><code id="L4967"><span class="ln">4967</span> animationElements.length<span class="s"> == </span><span class="d">1</span> && requestAnimFrame(animation);
+</code><code id="L4968"><span class="ln">4968</span> } <b>else</b> {
+</code><code id="L4969"><span class="ln">4969</span> isInAnim.initstatus<span class="s"> = </span>status;
+</code><code id="L4970"><span class="ln">4970</span> isInAnim.start<span class="s"> = </span><b>new</b> Date<span class="s"> - </span>isInAnim.ms<span class="s"> * </span>status;
+</code><code id="L4971"><span class="ln">4971</span> }
+</code><code id="L4972"><span class="ln">4972</span> eve(<i>"anim.start."</i><span class="s"> + </span>element.id, element, anim);
+</code><code id="L4973"><span class="ln">4973</span> }
+</code><code id="L4974"><span class="ln">4974</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L4975"><span class="ln">4975</span><span class="c"> <span class="s"> * </span>Raphael.animation
+</span></code><code id="L4976"><span class="ln">4976</span><span class="c"> [ method ]
+</span></code><code id="L4977"><span class="ln">4977</span><span class="c"> **
+</span></code><code id="L4978"><span class="ln">4978</span><span class="c"> <span class="s"> * </span>Creates animation object. That later could be used <b>for</b> @Element.animate or @Element.animateWith methods.
+</span></code><code id="L4979"><span class="ln">4979</span><span class="c"> <span class="s"> * </span>See also @Animation.delay and @Animation.repeat methods.
+</span></code><code id="L4980"><span class="ln">4980</span><span class="c"> **
+</span></code><code id="L4981"><span class="ln">4981</span><span class="c"> > Parameters
+</span></code><code id="L4982"><span class="ln">4982</span><span class="c"> **
+</span></code><code id="L4983"><span class="ln">4983</span><span class="c"> <span class="s"> - </span>params (object) <b>final</b> attributes <b>for</b> the element, see also @Element.attr
+</span></code><code id="L4984"><span class="ln">4984</span><span class="c"> <span class="s"> - </span>ms (number) number of milliseconds <b>for</b> animation to run
+</span></code><code id="L4985"><span class="ln">4985</span><span class="c"> <span class="s"> - </span>easing (string) #optional easing type. Accept one of @Raphael.easing_formulas or CSS format: `cubic-bezier(XX, XX, XX, XX)`
+</span></code><code id="L4986"><span class="ln">4986</span><span class="c"> <span class="s"> - </span>callback (<b>function</b>) #optional callback <b>function</b>. Will be called at the end of animation.
+</span></code><code id="L4987"><span class="ln">4987</span><span class="c"> **
+</span></code><code id="L4988"><span class="ln">4988</span><span class="c"> <span class="s"> = </span>(object) @Animation
+</span></code><code id="L4989"><span class="ln">4989</span><span class="c"> \*/</span>
+</code><code id="L4990"><span class="ln">4990</span> R.animation<span class="s"> = </span><b>function</b> (params, ms, easing, callback) {
+</code><code id="L4991"><span class="ln">4991</span> <b>if</b> (R.is(easing, <i>"<b>function</b>"</i>)<span class="s"> || </span>!easing) {
+</code><code id="L4992"><span class="ln">4992</span> callback<span class="s"> = </span>callback<span class="s"> || </span>easing<span class="s"> || </span><b>null</b>;
+</code><code id="L4993"><span class="ln">4993</span> easing<span class="s"> = </span><b>null</b>;
+</code><code id="L4994"><span class="ln">4994</span> }
+</code><code id="L4995"><span class="ln">4995</span> params<span class="s"> = </span>Object(params);
+</code><code id="L4996"><span class="ln">4996</span> ms<span class="s"> = </span>+ms<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L4997"><span class="ln">4997</span> <b>var</b> p<span class="s"> = </span>{},
+</code><code id="L4998"><span class="ln">4998</span> json,
+</code><code id="L4999"><span class="ln">4999</span> attr;
+</code><code id="L5000"><span class="ln">5000</span> <b>for</b> (attr <b>in</b> params) <b>if</b> (params[has](attr) && toFloat(attr) != attr) {
+</code><code id="L5001"><span class="ln">5001</span> json<span class="s"> = </span><b>true</b>;
+</code><code id="L5002"><span class="ln">5002</span> p[attr]<span class="s"> = </span>params[attr];
+</code><code id="L5003"><span class="ln">5003</span> }
+</code><code id="L5004"><span class="ln">5004</span> <b>if</b> (!json) {
+</code><code id="L5005"><span class="ln">5005</span> <b>return</b> <b>new</b> Animation(params, ms);
+</code><code id="L5006"><span class="ln">5006</span> } <b>else</b> {
+</code><code id="L5007"><span class="ln">5007</span> easing && (p.easing<span class="s"> = </span>easing);
+</code><code id="L5008"><span class="ln">5008</span> callback && (p.callback<span class="s"> = </span>callback);
+</code><code id="L5009"><span class="ln">5009</span> <b>return</b> <b>new</b> Animation({<span class="d">100</span>: p}, ms);
+</code><code id="L5010"><span class="ln">5010</span> }
+</code><code id="L5011"><span class="ln">5011</span> };
+</code><code id="L5012"><span class="ln">5012</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L5013"><span class="ln">5013</span><span class="c"> <span class="s"> * </span>Element.animate
+</span></code><code id="L5014"><span class="ln">5014</span><span class="c"> [ method ]
+</span></code><code id="L5015"><span class="ln">5015</span><span class="c"> **
+</span></code><code id="L5016"><span class="ln">5016</span><span class="c"> <span class="s"> * </span>Creates and starts animation <b>for</b> given element.
+</span></code><code id="L5017"><span class="ln">5017</span><span class="c"> **
+</span></code><code id="L5018"><span class="ln">5018</span><span class="c"> > Parameters
+</span></code><code id="L5019"><span class="ln">5019</span><span class="c"> **
+</span></code><code id="L5020"><span class="ln">5020</span><span class="c"> <span class="s"> - </span>params (object) <b>final</b> attributes <b>for</b> the element, see also @Element.attr
+</span></code><code id="L5021"><span class="ln">5021</span><span class="c"> <span class="s"> - </span>ms (number) number of milliseconds <b>for</b> animation to run
+</span></code><code id="L5022"><span class="ln">5022</span><span class="c"> <span class="s"> - </span>easing (string) #optional easing type. Accept on of @Raphael.easing_formulas or CSS format: `cubic-bezier(XX, XX, XX, XX)`
+</span></code><code id="L5023"><span class="ln">5023</span><span class="c"> <span class="s"> - </span>callback (<b>function</b>) #optional callback <b>function</b>. Will be called at the end of animation.
+</span></code><code id="L5024"><span class="ln">5024</span><span class="c"> <span class="s"> * </span>or
+</span></code><code id="L5025"><span class="ln">5025</span><span class="c"> <span class="s"> - </span>animation (object) animation object, see @Raphael.animation
+</span></code><code id="L5026"><span class="ln">5026</span><span class="c"> **
+</span></code><code id="L5027"><span class="ln">5027</span><span class="c"> <span class="s"> = </span>(object) original element
+</span></code><code id="L5028"><span class="ln">5028</span><span class="c"> \*/</span>
+</code><code id="L5029"><span class="ln">5029</span> elproto.animate<span class="s"> = </span><b>function</b> (params, ms, easing, callback) {
+</code><code id="L5030"><span class="ln">5030</span> <b>var</b> element<span class="s"> = </span><b>this</b>;
+</code><code id="L5031"><span class="ln">5031</span> <b>if</b> (element.removed) {
+</code><code id="L5032"><span class="ln">5032</span> callback && callback.call(element);
+</code><code id="L5033"><span class="ln">5033</span> <b>return</b> element;
+</code><code id="L5034"><span class="ln">5034</span> }
+</code><code id="L5035"><span class="ln">5035</span> <b>var</b> anim<span class="s"> = </span>params <b>instanceof</b> Animation ? params : R.animation(params, ms, easing, callback);
+</code><code id="L5036"><span class="ln">5036</span> runAnimation(anim, element, anim.percents[<span class="d">0</span>], <b>null</b>, element.attr());
+</code><code id="L5037"><span class="ln">5037</span> <b>return</b> element;
+</code><code id="L5038"><span class="ln">5038</span> };
+</code><code id="L5039"><span class="ln">5039</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L5040"><span class="ln">5040</span><span class="c"> <span class="s"> * </span>Element.setTime
+</span></code><code id="L5041"><span class="ln">5041</span><span class="c"> [ method ]
+</span></code><code id="L5042"><span class="ln">5042</span><span class="c"> **
+</span></code><code id="L5043"><span class="ln">5043</span><span class="c"> <span class="s"> * </span>Sets the status of animation of the element <b>in</b> milliseconds. Similar to @Element.status method.
+</span></code><code id="L5044"><span class="ln">5044</span><span class="c"> **
+</span></code><code id="L5045"><span class="ln">5045</span><span class="c"> > Parameters
+</span></code><code id="L5046"><span class="ln">5046</span><span class="c"> **
+</span></code><code id="L5047"><span class="ln">5047</span><span class="c"> <span class="s"> - </span>anim (object) animation object
+</span></code><code id="L5048"><span class="ln">5048</span><span class="c"> <span class="s"> - </span>value (number) number of milliseconds from the beginning of the animation
+</span></code><code id="L5049"><span class="ln">5049</span><span class="c"> **
+</span></code><code id="L5050"><span class="ln">5050</span><span class="c"> <span class="s"> = </span>(object) original element <b>if</b> `value` is specified
+</span></code><code id="L5051"><span class="ln">5051</span><span class="c"> \*/</span>
+</code><code id="L5052"><span class="ln">5052</span> elproto.setTime<span class="s"> = </span><b>function</b> (anim, value) {
+</code><code id="L5053"><span class="ln">5053</span> <b>if</b> (anim && value != <b>null</b>) {
+</code><code id="L5054"><span class="ln">5054</span> <b>this</b>.status(anim, mmin(value, anim.ms)<span class="s"> / </span>anim.ms);
+</code><code id="L5055"><span class="ln">5055</span> }
+</code><code id="L5056"><span class="ln">5056</span> <b>return</b> <b>this</b>;
+</code><code id="L5057"><span class="ln">5057</span> };
+</code><code id="L5058"><span class="ln">5058</span><span class="c"> <span class="c">/*\</span>
+</span></code><code id="L5059"><span class="ln">5059</span><span class="c"> <span class="s"> * </span>Element.status
+</span></code><code id="L5060"><span class="ln">5060</span><span class="c"> [ method ]
+</span></code><code id="L5061"><span class="ln">5061</span><span class="c"> **
+</span></code><code id="L5062"><span class="ln">5062</span><span class="c"> <span class="s"> * </span>Gets or sets the status of animation of the element.
+</span></code><code id="L5063"><span class="ln">5063</span><span class="c"> **
+</span></code><code id="L5064"><span class="ln">5064</span><span class="c"> > Parameters
+</span></code><code id="L5065"><span class="ln">5065</span><span class="c"> **
+</span></code><code id="L5066"><span class="ln">5066</span><span class="c"> <span class="s"> - </span>anim (object) #optional animation object
+</span></code><code id="L5067"><span class="ln">5067</span><span class="c"> <span class="s"> - </span>value (number) #optional <span class="d">0</span> – <span class="d">1</span>. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.
+</span></code><code id="L5068"><span class="ln">5068</span><span class="c"> **
+</span></code><code id="L5069"><span class="ln">5069</span><span class="c"> <span class="s"> = </span>(number) status
+</span></code><code id="L5070"><span class="ln">5070</span><span class="c"> <span class="s"> * </span>or
+</span></code><code id="L5071"><span class="ln">5071</span><span class="c"> <span class="s"> = </span>(array) status <b>if</b> `anim` is not specified <b>in</b> format:
+</span></code><code id="L5072"><span class="ln">5072</span><span class="c"> | [{
+</span></code><code id="L5073"><span class="ln">5073</span><span class="c"> | anim: <span class="c">// animation object,</span>
+</span></code><code id="L5074"><span class="ln">5074</span><span class="c"> | status: <span class="c">// status</span>
+</span></code><code id="L5075"><span class="ln">5075</span><span class="c"> | }, {
+</span></code><code id="L5076"><span class="ln">5076</span><span class="c"> | anim: <span class="c">// animation object,</span>
+</span></code><code id="L5077"><span class="ln">5077</span><span class="c"> | status: <span class="c">// status</span>
+</span></code><code id="L5078"><span class="ln">5078</span><span class="c"> | }, ...]
+</span></code><code id="L5079"><span class="ln">5079</span><span class="c"> <span class="s"> * </span>or
+</span></code><code id="L5080"><span class="ln">5080</span><span class="c"> <span class="s"> = </span>(object) original element <b>if</b> `value` is specified
+</span></code><code id="L5081"><span class="ln">5081</span><span class="c"> \*/</span>
+</code><code id="L5082"><span class="ln">5082</span> elproto.status<span class="s"> = </span><b>function</b> (anim, value) {
+</code><code id="L5083"><span class="ln">5083</span> <b>var</b> out<span class="s"> = </span>[],
+</code><code id="L5084"><span class="ln">5084</span> i<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L5085"><span class="ln">5085</span> len,
+</code><code id="L5086"><span class="ln">5086</span> e;
+</code><code id="L5087"><span class="ln">5087</span> <b>if</b> (value != <b>null</b>) {
+</code><code id="L5088"><span class="ln">5088</span> runAnimation(anim, <b>this</b>, -<span class="d">1</span>, mmin(value, <span class="d">1</span>));
+</code><code id="L5089"><span class="ln">5089</span> <b>return</b> <b>this</b>;
+</code><code id="L5090"><span class="ln">5090</span> } <b>else</b> {
+</code><code id="L5091"><span class="ln">5091</span> len<span class="s"> = </span>animationElements.length;
+</code><code id="L5092"><span class="ln">5092</span> <b>for</b> (; i < len; i++) {
+</code><code id="L5093"><span class="ln">5093</span> e<span class="s"> = </span>animationElements[i];
+</code><code id="L5094"><span class="ln">5094</span> <b>if</b> (e.el.id<span class="s"> == </span><b>this</b>.id && (!anim<span class="s"> || </span>e.anim<span class="s"> == </span>anim)) {
+</code><code id="L5095"><span class="ln">5095</span> <b>if</b> (anim) {
+</code><code id="L5096"><span class="ln">5096</span> <b>return</b> e.status;
+</code><code id="L5097"><span class="ln">5097</span> }
+</code><code id="L5098"><span class="ln">5098</span> out.push({anim: e.anim, status: e.status});
+</code><code id="L5099"><span class="ln">5099</span> }
+</code><code id="L5100"><span class="ln">5100</span> }
+</code><code id="L5101"><span class="ln">5101</span> <b>if</b> (anim) {
+</code><code id="L5102"><span class="ln">5102</span> <b>return</b> <span class="d">0</span>;
+</code><code id="L5103"><span class="ln">5103</span> }
+</code><code id="L5104"><span class="ln">5104</span> <b>return</b> out;
+</code><code id="L5105"><span class="ln">5105</span> }
+</code><code id="L5106"><span class="ln">5106</span> };
+</code><code id="L5107"><span class="ln">5107</span> elproto.pause<span class="s"> = </span><b>function</b> (anim) {
+</code><code id="L5108"><span class="ln">5108</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i < animationElements.length; i++) <b>if</b> (animationElements[i].el.id<span class="s"> == </span><b>this</b>.id && (!anim<span class="s"> || </span>animationElements[i].anim<span class="s"> == </span>anim)) {
+</code><code id="L5109"><span class="ln">5109</span> <b>if</b> (eve(<i>"anim.pause."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, animationElements[i].anim) !== <b>false</b>) {
+</code><code id="L5110"><span class="ln">5110</span> animationElements[i].paused<span class="s"> = </span><b>true</b>;
+</code><code id="L5111"><span class="ln">5111</span> }
+</code><code id="L5112"><span class="ln">5112</span> }
+</code><code id="L5113"><span class="ln">5113</span> <b>return</b> <b>this</b>;
+</code><code id="L5114"><span class="ln">5114</span> };
+</code><code id="L5115"><span class="ln">5115</span> elproto.resume<span class="s"> = </span><b>function</b> (anim) {
+</code><code id="L5116"><span class="ln">5116</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i < animationElements.length; i++) <b>if</b> (animationElements[i].el.id<span class="s"> == </span><b>this</b>.id && (!anim<span class="s"> || </span>animationElements[i].anim<span class="s"> == </span>anim)) {
+</code><code id="L5117"><span class="ln">5117</span> <b>var</b> e<span class="s"> = </span>animationElements[i];
+</code><code id="L5118"><span class="ln">5118</span> <b>if</b> (eve(<i>"anim.resume."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, e.anim) !== <b>false</b>) {
+</code><code id="L5119"><span class="ln">5119</span> <b>delete</b> e.paused;
+</code><code id="L5120"><span class="ln">5120</span> <b>this</b>.status(e.anim, e.status);
+</code><code id="L5121"><span class="ln">5121</span> }
+</code><code id="L5122"><span class="ln">5122</span> }
+</code><code id="L5123"><span class="ln">5123</span> <b>return</b> <b>this</b>;
+</code><code id="L5124"><span class="ln">5124</span> };
+</code><code id="L5125"><span class="ln">5125</span> elproto.stop<span class="s"> = </span><b>function</b> (anim) {
+</code><code id="L5126"><span class="ln">5126</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i < animationElements.length; i++) <b>if</b> (animationElements[i].el.id<span class="s"> == </span><b>this</b>.id && (!anim<span class="s"> || </span>animationElements[i].anim<span class="s"> == </span>anim)) {
+</code><code id="L5127"><span class="ln">5127</span> <b>if</b> (eve(<i>"anim.stop."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, animationElements[i].anim) !== <b>false</b>) {
+</code><code id="L5128"><span class="ln">5128</span> animationElements.splice(i--, <span class="d">1</span>);
+</code><code id="L5129"><span class="ln">5129</span> }
+</code><code id="L5130"><span class="ln">5130</span> }
+</code><code id="L5131"><span class="ln">5131</span> <b>return</b> <b>this</b>;
+</code><code id="L5132"><span class="ln">5132</span> };
+</code><code id="L5133"><span class="ln">5133</span> elproto.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L5134"><span class="ln">5134</span> <b>return</b> <i>"Rapha\xebl\u2019s object"</i>;
+</code><code id="L5135"><span class="ln">5135</span> };
+</code><code id="L5136"><span class="ln">5136</span>
+</code><code id="L5137"><span class="ln">5137</span> <span class="c">// Set</span>
+</code><code id="L5138"><span class="ln">5138</span> <b>var</b> Set<span class="s"> = </span><b>function</b> (items) {
+</code><code id="L5139"><span class="ln">5139</span> <b>this</b>.items<span class="s"> = </span>[];
+</code><code id="L5140"><span class="ln">5140</span> <b>this</b>.length<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L5141"><span class="ln">5141</span> <b>this</b>.type<span class="s"> = </span><i>"set"</i>;
+</code><code id="L5142"><span class="ln">5142</span> <b>if</b> (items) {
+</code><code id="L5143"><span class="ln">5143</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>items.length; i < ii; i++) {
+</code><code id="L5144"><span class="ln">5144</span> <b>if</b> (items[i] && (items[i].constructor<span class="s"> == </span>Element<span class="s"> || </span>items[i].constructor<span class="s"> == </span>Set)) {
+</code><code id="L5145"><span class="ln">5145</span> <b>this</b>[<b>this</b>.items.length]<span class="s"> = </span><b>this</b>.items[<b>this</b>.items.length]<span class="s"> = </span>items[i];
+</code><code id="L5146"><span class="ln">5146</span> <b>this</b>.length++;
+</code><code id="L5147"><span class="ln">5147</span> }
+</code><code id="L5148"><span class="ln">5148</span> }
+</code><code id="L5149"><span class="ln">5149</span> }
+</code><code id="L5150"><span class="ln">5150</span> },
+</code><code id="L5151"><span class="ln">5151</span> setproto<span class="s"> = </span>Set.prototype;
+</code><code id="L5152"><span class="ln">5152</span> setproto.push<span class="s"> = </span><b>function</b> () {
+</code><code id="L5153"><span class="ln">5153</span> <b>var</b> item,
+</code><code id="L5154"><span class="ln">5154</span> len;
+</code><code id="L5155"><span class="ln">5155</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>arguments.length; i < ii; i++) {
+</code><code id="L5156"><span class="ln">5156</span> item<span class="s"> = </span>arguments[i];
+</code><code id="L5157"><span class="ln">5157</span> <b>if</b> (item && (item.constructor<span class="s"> == </span>Element<span class="s"> || </span>item.constructor<span class="s"> == </span>Set)) {
+</code><code id="L5158"><span class="ln">5158</span> len<span class="s"> = </span><b>this</b>.items.length;
+</code><code id="L5159"><span class="ln">5159</span> <b>this</b>[len]<span class="s"> = </span><b>this</b>.items[len]<span class="s"> = </span>item;
+</code><code id="L5160"><span class="ln">5160</span> <b>this</b>.length++;
+</code><code id="L5161"><span class="ln">5161</span> }
+</code><code id="L5162"><span class="ln">5162</span> }
+</code><code id="L5163"><span class="ln">5163</span> <b>return</b> <b>this</b>;
+</code><code id="L5164"><span class="ln">5164</span> };
+</code><code id="L5165"><span class="ln">5165</span> setproto.pop<span class="s"> = </span><b>function</b> () {
+</code><code id="L5166"><span class="ln">5166</span> <b>this</b>.length && <b>delete</b> <b>this</b>[<b>this</b>.length--];
+</code><code id="L5167"><span class="ln">5167</span> <b>return</b> <b>this</b>.items.pop();
+</code><code id="L5168"><span class="ln">5168</span> };
+</code><code id="L5169"><span class="ln">5169</span> <b>for</b> (<b>var</b> method <b>in</b> elproto) <b>if</b> (elproto[has](method)) {
+</code><code id="L5170"><span class="ln">5170</span> setproto[method]<span class="s"> = </span>(<b>function</b> (methodname) {
+</code><code id="L5171"><span class="ln">5171</span> <b>return</b> <b>function</b> () {
+</code><code id="L5172"><span class="ln">5172</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span><b>this</b>.items.length; i < ii; i++) {
+</code><code id="L5173"><span class="ln">5173</span> <b>this</b>.items[i][methodname][apply](<b>this</b>.items[i], arguments);
+</code><code id="L5174"><span class="ln">5174</span> }
+</code><code id="L5175"><span class="ln">5175</span> <b>return</b> <b>this</b>;
+</code><code id="L5176"><span class="ln">5176</span> };
+</code><code id="L5177"><span class="ln">5177</span> })(method);
+</code><code id="L5178"><span class="ln">5178</span> }
+</code><code id="L5179"><span class="ln">5179</span> setproto.attr<span class="s"> = </span><b>function</b> (name, value) {
+</code><code id="L5180"><span class="ln">5180</span> <b>if</b> (name && R.is(name, array) && R.is(name[<span class="d">0</span>], <i>"object"</i>)) {
+</code><code id="L5181"><span class="ln">5181</span> <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>name.length; j < jj; j++) {
+</code><code id="L5182"><span class="ln">5182</span> <b>this</b>.items[j].attr(name[j]);
+</code><code id="L5183"><span class="ln">5183</span> }
+</code><code id="L5184"><span class="ln">5184</span> } <b>else</b> {
+</code><code id="L5185"><span class="ln">5185</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span><b>this</b>.items.length; i < ii; i++) {
+</code><code id="L5186"><span class="ln">5186</span> <b>this</b>.items[i].attr(name, value);
+</code><code id="L5187"><span class="ln">5187</span> }
+</code><code id="L5188"><span class="ln">5188</span> }
+</code><code id="L5189"><span class="ln">5189</span> <b>return</b> <b>this</b>;
+</code><code id="L5190"><span class="ln">5190</span> };
+</code><code id="L5191"><span class="ln">5191</span> setproto.animate<span class="s"> = </span><b>function</b> (params, ms, easing, callback) {
+</code><code id="L5192"><span class="ln">5192</span> (R.is(easing, <i>"<b>function</b>"</i>)<span class="s"> || </span>!easing) && (callback<span class="s"> = </span>easing<span class="s"> || </span><b>null</b>);
+</code><code id="L5193"><span class="ln">5193</span> <b>var</b> len<span class="s"> = </span><b>this</b>.items.length,
+</code><code id="L5194"><span class="ln">5194</span> i<span class="s"> = </span>len,
+</code><code id="L5195"><span class="ln">5195</span> item,
+</code><code id="L5196"><span class="ln">5196</span> set<span class="s"> = </span><b>this</b>,
+</code><code id="L5197"><span class="ln">5197</span> collector;
+</code><code id="L5198"><span class="ln">5198</span> callback && (collector<span class="s"> = </span><b>function</b> () {
+</code><code id="L5199"><span class="ln">5199</span> !--len && callback.call(set);
+</code><code id="L5200"><span class="ln">5200</span> });
+</code><code id="L5201"><span class="ln">5201</span> easing<span class="s"> = </span>R.is(easing, string) ? easing : collector;
+</code><code id="L5202"><span class="ln">5202</span> <b>var</b> anim<span class="s"> = </span>params <b>instanceof</b> Animation ? params : R.animation(params, ms, easing, collector);
+</code><code id="L5203"><span class="ln">5203</span> item<span class="s"> = </span><b>this</b>.items[--i].animate(anim);
+</code><code id="L5204"><span class="ln">5204</span> <b>while</b> (i--) {
+</code><code id="L5205"><span class="ln">5205</span> <b>this</b>.items[i] && !<b>this</b>.items[i].removed && <b>this</b>.items[i].animateWith(item, anim);
+</code><code id="L5206"><span class="ln">5206</span> }
+</code><code id="L5207"><span class="ln">5207</span> <b>return</b> <b>this</b>;
+</code><code id="L5208"><span class="ln">5208</span> };
+</code><code id="L5209"><span class="ln">5209</span> setproto.insertAfter<span class="s"> = </span><b>function</b> (el) {
+</code><code id="L5210"><span class="ln">5210</span> <b>var</b> i<span class="s"> = </span><b>this</b>.items.length;
+</code><code id="L5211"><span class="ln">5211</span> <b>while</b> (i--) {
+</code><code id="L5212"><span class="ln">5212</span> <b>this</b>.items[i].insertAfter(el);
+</code><code id="L5213"><span class="ln">5213</span> }
+</code><code id="L5214"><span class="ln">5214</span> <b>return</b> <b>this</b>;
+</code><code id="L5215"><span class="ln">5215</span> };
+</code><code id="L5216"><span class="ln">5216</span> setproto.getBBox<span class="s"> = </span><b>function</b> () {
+</code><code id="L5217"><span class="ln">5217</span> <b>var</b> x<span class="s"> = </span>[],
+</code><code id="L5218"><span class="ln">5218</span> y<span class="s"> = </span>[],
+</code><code id="L5219"><span class="ln">5219</span> w<span class="s"> = </span>[],
+</code><code id="L5220"><span class="ln">5220</span> h<span class="s"> = </span>[];
+</code><code id="L5221"><span class="ln">5221</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><b>this</b>.items.length; i--;) <b>if</b> (!<b>this</b>.items[i].removed) {
+</code><code id="L5222"><span class="ln">5222</span> <b>var</b> box<span class="s"> = </span><b>this</b>.items[i].getBBox();
+</code><code id="L5223"><span class="ln">5223</span> x.push(box.x);
+</code><code id="L5224"><span class="ln">5224</span> y.push(box.y);
+</code><code id="L5225"><span class="ln">5225</span> w.push(box.x<span class="s"> + </span>box.width);
+</code><code id="L5226"><span class="ln">5226</span> h.push(box.y<span class="s"> + </span>box.height);
+</code><code id="L5227"><span class="ln">5227</span> }
+</code><code id="L5228"><span class="ln">5228</span> x<span class="s"> = </span>mmin[apply](<span class="d">0</span>, x);
+</code><code id="L5229"><span class="ln">5229</span> y<span class="s"> = </span>mmin[apply](<span class="d">0</span>, y);
+</code><code id="L5230"><span class="ln">5230</span> <b>return</b> {
+</code><code id="L5231"><span class="ln">5231</span> x: x,
+</code><code id="L5232"><span class="ln">5232</span> y: y,
+</code><code id="L5233"><span class="ln">5233</span> width: mmax[apply](<span class="d">0</span>, w)<span class="s"> - </span>x,
+</code><code id="L5234"><span class="ln">5234</span> height: mmax[apply](<span class="d">0</span>, h)<span class="s"> - </span>y
+</code><code id="L5235"><span class="ln">5235</span> };
+</code><code id="L5236"><span class="ln">5236</span> };
+</code><code id="L5237"><span class="ln">5237</span> setproto.clone<span class="s"> = </span><b>function</b> (s) {
+</code><code id="L5238"><span class="ln">5238</span> s<span class="s"> = </span><b>new</b> Set;
+</code><code id="L5239"><span class="ln">5239</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span><b>this</b>.items.length; i < ii; i++) {
+</code><code id="L5240"><span class="ln">5240</span> s.push(<b>this</b>.items[i].clone());
+</code><code id="L5241"><span class="ln">5241</span> }
+</code><code id="L5242"><span class="ln">5242</span> <b>return</b> s;
+</code><code id="L5243"><span class="ln">5243</span> };
+</code><code id="L5244"><span class="ln">5244</span> setproto.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L5245"><span class="ln">5245</span> <b>return</b> <i>"Rapha\xebl\u2018s set"</i>;
+</code><code id="L5246"><span class="ln">5246</span> };
+</code><code id="L5247"><span class="ln">5247</span>
+</code><code id="L5248"><span class="ln">5248</span> R.registerFont<span class="s"> = </span><b>function</b> (font) {
+</code><code id="L5249"><span class="ln">5249</span> <b>if</b> (!font.face) {
+</code><code id="L5250"><span class="ln">5250</span> <b>return</b> font;
+</code><code id="L5251"><span class="ln">5251</span> }
+</code><code id="L5252"><span class="ln">5252</span> <b>this</b>.fonts<span class="s"> = </span><b>this</b>.fonts<span class="s"> || </span>{};
+</code><code id="L5253"><span class="ln">5253</span> <b>var</b> fontcopy<span class="s"> = </span>{
+</code><code id="L5254"><span class="ln">5254</span> w: font.w,
+</code><code id="L5255"><span class="ln">5255</span> face: {},
+</code><code id="L5256"><span class="ln">5256</span> glyphs: {}
+</code><code id="L5257"><span class="ln">5257</span> },
+</code><code id="L5258"><span class="ln">5258</span> family<span class="s"> = </span>font.face[<i>"font-family"</i>];
+</code><code id="L5259"><span class="ln">5259</span> <b>for</b> (<b>var</b> prop <b>in</b> font.face) <b>if</b> (font.face[has](prop)) {
+</code><code id="L5260"><span class="ln">5260</span> fontcopy.face[prop]<span class="s"> = </span>font.face[prop];
+</code><code id="L5261"><span class="ln">5261</span> }
+</code><code id="L5262"><span class="ln">5262</span> <b>if</b> (<b>this</b>.fonts[family]) {
+</code><code id="L5263"><span class="ln">5263</span> <b>this</b>.fonts[family].push(fontcopy);
+</code><code id="L5264"><span class="ln">5264</span> } <b>else</b> {
+</code><code id="L5265"><span class="ln">5265</span> <b>this</b>.fonts[family]<span class="s"> = </span>[fontcopy];
+</code><code id="L5266"><span class="ln">5266</span> }
+</code><code id="L5267"><span class="ln">5267</span> <b>if</b> (!font.svg) {
+</code><code id="L5268"><span class="ln">5268</span> fontcopy.face[<i>"units-per-em"</i>]<span class="s"> = </span>toInt(font.face[<i>"units-per-em"</i>], <span class="d">10</span>);
+</code><code id="L5269"><span class="ln">5269</span> <b>for</b> (<b>var</b> glyph <b>in</b> font.glyphs) <b>if</b> (font.glyphs[has](glyph)) {
+</code><code id="L5270"><span class="ln">5270</span> <b>var</b> path<span class="s"> = </span>font.glyphs[glyph];
+</code><code id="L5271"><span class="ln">5271</span> fontcopy.glyphs[glyph]<span class="s"> = </span>{
+</code><code id="L5272"><span class="ln">5272</span> w: path.w,
+</code><code id="L5273"><span class="ln">5273</span> k: {},
+</code><code id="L5274"><span class="ln">5274</span> d: path.d && <i>"M"</i><span class="s"> + </span>path.d.replace(/[mlcxtrv]/g, <b>function</b> (command) {
+</code><code id="L5275"><span class="ln">5275</span> <b>return</b> {l: <i>"L"</i>, c: <i>"C"</i>, x: <i>"z"</i>, t: <i>"m"</i>, r: <i>"l"</i>, v: <i>"c"</i>}[command]<span class="s"> || </span><i>"M"</i>;
+</code><code id="L5276"><span class="ln">5276</span> })<span class="s"> + </span><i>"z"</i>
+</code><code id="L5277"><span class="ln">5277</span> };
+</code><code id="L5278"><span class="ln">5278</span> <b>if</b> (path.k) {
+</code><code id="L5279"><span class="ln">5279</span> <b>for</b> (<b>var</b> k <b>in</b> path.k) <b>if</b> (path[has](k)) {
+</code><code id="L5280"><span class="ln">5280</span> fontcopy.glyphs[glyph].k[k]<span class="s"> = </span>path.k[k];
+</code><code id="L5281"><span class="ln">5281</span> }
+</code><code id="L5282"><span class="ln">5282</span> }
+</code><code id="L5283"><span class="ln">5283</span> }
+</code><code id="L5284"><span class="ln">5284</span> }
+</code><code id="L5285"><span class="ln">5285</span> <b>return</b> font;
+</code><code id="L5286"><span class="ln">5286</span> };
+</code><code id="L5287"><span class="ln">5287</span> paperproto.getFont<span class="s"> = </span><b>function</b> (family, weight, style, stretch) {
+</code><code id="L5288"><span class="ln">5288</span> stretch<span class="s"> = </span>stretch<span class="s"> || </span><i>"normal"</i>;
+</code><code id="L5289"><span class="ln">5289</span> style<span class="s"> = </span>style<span class="s"> || </span><i>"normal"</i>;
+</code><code id="L5290"><span class="ln">5290</span> weight<span class="s"> = </span>+weight<span class="s"> || </span>{normal: <span class="d">400</span>, bold: <span class="d">700</span>, lighter: <span class="d">300</span>, bolder: <span class="d">800</span>}[weight]<span class="s"> || </span><span class="d">400</span>;
+</code><code id="L5291"><span class="ln">5291</span> <b>if</b> (!R.fonts) {
+</code><code id="L5292"><span class="ln">5292</span> <b>return</b>;
+</code><code id="L5293"><span class="ln">5293</span> }
+</code><code id="L5294"><span class="ln">5294</span> <b>var</b> font<span class="s"> = </span>R.fonts[family];
+</code><code id="L5295"><span class="ln">5295</span> <b>if</b> (!font) {
+</code><code id="L5296"><span class="ln">5296</span> <b>var</b> name<span class="s"> = </span><b>new</b> RegExp(<i>"(^|\\s)"</i><span class="s"> + </span>family.replace(/[^\w\d\s+!~.:_-]/g, E)<span class="s"> + </span><i>"(\\s|$)"</i>, <i>"i"</i>);
+</code><code id="L5297"><span class="ln">5297</span> <b>for</b> (<b>var</b> fontName <b>in</b> R.fonts) <b>if</b> (R.fonts[has](fontName)) {
+</code><code id="L5298"><span class="ln">5298</span> <b>if</b> (name.test(fontName)) {
+</code><code id="L5299"><span class="ln">5299</span> font<span class="s"> = </span>R.fonts[fontName];
+</code><code id="L5300"><span class="ln">5300</span> <b>break</b>;
+</code><code id="L5301"><span class="ln">5301</span> }
+</code><code id="L5302"><span class="ln">5302</span> }
+</code><code id="L5303"><span class="ln">5303</span> }
+</code><code id="L5304"><span class="ln">5304</span> <b>var</b> thefont;
+</code><code id="L5305"><span class="ln">5305</span> <b>if</b> (font) {
+</code><code id="L5306"><span class="ln">5306</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>font.length; i < ii; i++) {
+</code><code id="L5307"><span class="ln">5307</span> thefont<span class="s"> = </span>font[i];
+</code><code id="L5308"><span class="ln">5308</span> <b>if</b> (thefont.face[<i>"font-weight"</i>]<span class="s"> == </span>weight && (thefont.face[<i>"font-style"</i>]<span class="s"> == </span>style<span class="s"> || </span>!thefont.face[<i>"font-style"</i>]) && thefont.face[<i>"font-stretch"</i>]<span class="s"> == </span>stretch) {
+</code><code id="L5309"><span class="ln">5309</span> <b>break</b>;
+</code><code id="L5310"><span class="ln">5310</span> }
+</code><code id="L5311"><span class="ln">5311</span> }
+</code><code id="L5312"><span class="ln">5312</span> }
+</code><code id="L5313"><span class="ln">5313</span> <b>return</b> thefont;
+</code><code id="L5314"><span class="ln">5314</span> };
+</code><code id="L5315"><span class="ln">5315</span> paperproto.print<span class="s"> = </span><b>function</b> (x, y, string, font, size, origin, letter_spacing) {
+</code><code id="L5316"><span class="ln">5316</span> origin<span class="s"> = </span>origin<span class="s"> || </span><i>"middle"</i>; <span class="c">// baseline|middle</span>
+</code><code id="L5317"><span class="ln">5317</span> letter_spacing<span class="s"> = </span>mmax(mmin(letter_spacing<span class="s"> || </span><span class="d">0</span>, <span class="d">1</span>), -<span class="d">1</span>);
+</code><code id="L5318"><span class="ln">5318</span> <b>var</b> out<span class="s"> = </span><b>this</b>.set(),
+</code><code id="L5319"><span class="ln">5319</span> letters<span class="s"> = </span>Str(string).split(E),
+</code><code id="L5320"><span class="ln">5320</span> shift<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L5321"><span class="ln">5321</span> path<span class="s"> = </span>E,
+</code><code id="L5322"><span class="ln">5322</span> scale;
+</code><code id="L5323"><span class="ln">5323</span> R.is(font, string) && (font<span class="s"> = </span><b>this</b>.getFont(font));
+</code><code id="L5324"><span class="ln">5324</span> <b>if</b> (font) {
+</code><code id="L5325"><span class="ln">5325</span> scale<span class="s"> = </span>(size<span class="s"> || </span><span class="d">16</span>)<span class="s"> / </span>font.face[<i>"units-per-em"</i>];
+</code><code id="L5326"><span class="ln">5326</span> <b>var</b> bb<span class="s"> = </span>font.face.bbox.split(separator),
+</code><code id="L5327"><span class="ln">5327</span> top<span class="s"> = </span>+bb[<span class="d">0</span>],
+</code><code id="L5328"><span class="ln">5328</span> height<span class="s"> = </span>+bb[<span class="d">1</span>]<span class="s"> + </span>(origin<span class="s"> == </span><i>"baseline"</i> ? bb[<span class="d">3</span>]<span class="s"> - </span>bb[<span class="d">1</span>]<span class="s"> + </span>(+font.face.descent) : (bb[<span class="d">3</span>]<span class="s"> - </span>bb[<span class="d">1</span>])<span class="s"> / </span><span class="d">2</span>);
+</code><code id="L5329"><span class="ln">5329</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>letters.length; i < ii; i++) {
+</code><code id="L5330"><span class="ln">5330</span> <b>var</b> prev<span class="s"> = </span>i && font.glyphs[letters[i<span class="s"> - </span><span class="d">1</span>]]<span class="s"> || </span>{},
+</code><code id="L5331"><span class="ln">5331</span> curr<span class="s"> = </span>font.glyphs[letters[i]];
+</code><code id="L5332"><span class="ln">5332</span> shift += i ? (prev.w<span class="s"> || </span>font.w)<span class="s"> + </span>(prev.k && prev.k[letters[i]]<span class="s"> || </span><span class="d">0</span>)<span class="s"> + </span>(font.w<span class="s"> * </span>letter_spacing) : <span class="d">0</span>;
+</code><code id="L5333"><span class="ln">5333</span> curr && curr.d && out.push(<b>this</b>.path(curr.d).attr({fill: <i>"#<span class="d">000</span>"</i>, stroke: <i>"none"</i>, transform: [[<i>"t"</i>, shift, <span class="d">0</span>]]}));
+</code><code id="L5334"><span class="ln">5334</span> }
+</code><code id="L5335"><span class="ln">5335</span> out.scale(scale, scale, top, height).translate(x<span class="s"> - </span>top, y<span class="s"> - </span>height);
+</code><code id="L5336"><span class="ln">5336</span> }
+</code><code id="L5337"><span class="ln">5337</span> <b>return</b> out;
+</code><code id="L5338"><span class="ln">5338</span> };
+</code><code id="L5339"><span class="ln">5339</span>
+</code><code id="L5340"><span class="ln">5340</span> R.format<span class="s"> = </span><b>function</b> (token, params) {
+</code><code id="L5341"><span class="ln">5341</span> <b>var</b> args<span class="s"> = </span>R.is(params, array) ? [<span class="d">0</span>][concat](params) : arguments;
+</code><code id="L5342"><span class="ln">5342</span> token && R.is(token, string) && args.length<span class="s"> - </span><span class="d">1</span> && (token<span class="s"> = </span>token.replace(formatrg, <b>function</b> (str, i) {
+</code><code id="L5343"><span class="ln">5343</span> <b>return</b> args[++i]<span class="s"> == </span><b>null</b> ? E : args[i];
+</code><code id="L5344"><span class="ln">5344</span> }));
+</code><code id="L5345"><span class="ln">5345</span> <b>return</b> token<span class="s"> || </span>E;
+</code><code id="L5346"><span class="ln">5346</span> };
+</code><code id="L5347"><span class="ln">5347</span> R.ninja<span class="s"> = </span><b>function</b> () {
+</code><code id="L5348"><span class="ln">5348</span> oldRaphael.was ? (g.win.Raphael<span class="s"> = </span>oldRaphael.is) : <b>delete</b> Raphael;
+</code><code id="L5349"><span class="ln">5349</span> <b>return</b> R;
+</code><code id="L5350"><span class="ln">5350</span> };
+</code><code id="L5351"><span class="ln">5351</span> R.el<span class="s"> = </span>elproto;
+</code><code id="L5352"><span class="ln">5352</span> R.st<span class="s"> = </span>setproto;
+</code><code id="L5353"><span class="ln">5353</span> <span class="c">// Firefox <<span class="d">3.6</span> fix: http://webreflection.blogspot.com/<span class="d">2009</span>/<span class="d">11</span>/<span class="d">195</span>-chars-to-help-lazy-loading.html</span>
+</code><code id="L5354"><span class="ln">5354</span> (<b>function</b> (doc, loaded, f) {
+</code><code id="L5355"><span class="ln">5355</span> <b>if</b> (doc.readyState<span class="s"> == </span><b>null</b> && doc.addEventListener){
+</code><code id="L5356"><span class="ln">5356</span> doc.addEventListener(loaded, f<span class="s"> = </span><b>function</b> () {
+</code><code id="L5357"><span class="ln">5357</span> doc.removeEventListener(loaded, f, <b>false</b>);
+</code><code id="L5358"><span class="ln">5358</span> doc.readyState<span class="s"> = </span><i>"complete"</i>;
+</code><code id="L5359"><span class="ln">5359</span> }, <b>false</b>);
+</code><code id="L5360"><span class="ln">5360</span> doc.readyState<span class="s"> = </span><i>"loading"</i>;
+</code><code id="L5361"><span class="ln">5361</span> }
+</code><code id="L5362"><span class="ln">5362</span> <b>function</b> isLoaded() {
+</code><code id="L5363"><span class="ln">5363</span> (/<b>in</b>/).test(doc.readyState) ? setTimeout(isLoaded, <span class="d">9</span>) : eve(<i>"DOMload"</i>);
+</code><code id="L5364"><span class="ln">5364</span> }
+</code><code id="L5365"><span class="ln">5365</span> isLoaded();
+</code><code id="L5366"><span class="ln">5366</span> })(document, <i>"DOMContentLoaded"</i>);
+</code><code id="L5367"><span class="ln">5367</span>
+</code><code id="L5368"><span class="ln">5368</span> oldRaphael.was ? (g.win.Raphael<span class="s"> = </span>R) : (Raphael<span class="s"> = </span>R);
+</code><code id="L5369"><span class="ln">5369</span>
+</code><code id="L5370"><span class="ln">5370</span><span class="c"> /*
+</span></code><code id="L5371"><span class="ln">5371</span><span class="c"> <span class="s"> * </span>Eve <span class="d">0.2</span><span class="d">.1</span><span class="s"> - </span>JavaScript Events Library
+</span></code><code id="L5372"><span class="ln">5372</span><span class="c"> *
+</span></code><code id="L5373"><span class="ln">5373</span><span class="c"> <span class="s"> * </span>Copyright (c) <span class="d">2010</span> Dmitry Baranovskiy (http:<span class="c">//dmitry.baranovskiy.com/)</span>
+</span></code><code id="L5374"><span class="ln">5374</span><span class="c"> <span class="s"> * </span>Licensed under the MIT (http:<span class="c">//www.opensource.org/licenses/mit-license.php) license.</span>
+</span></code><code id="L5375"><span class="ln">5375</span><span class="c"> */</span>
+</code><code id="L5376"><span class="ln">5376</span>
+</code><code id="L5377"><span class="ln">5377</span> <b>var</b> eve<span class="s"> = </span>R.eve<span class="s"> = </span>(<b>function</b> () {
+</code><code id="L5378"><span class="ln">5378</span> <b>var</b> version<span class="s"> = </span><i>"<span class="d">0.2</span><span class="d">.1</span>"</i>,
+</code><code id="L5379"><span class="ln">5379</span> has<span class="s"> = </span><i>"hasOwnProperty"</i>,
+</code><code id="L5380"><span class="ln">5380</span> separator<span class="s"> = </span>/[\.\/]/,
+</code><code id="L5381"><span class="ln">5381</span> wildcard<span class="s"> = </span><i>"*"</i>,
+</code><code id="L5382"><span class="ln">5382</span> events<span class="s"> = </span>{n: {}},
+</code><code id="L5383"><span class="ln">5383</span> eve<span class="s"> = </span><b>function</b> (name, scope) {
+</code><code id="L5384"><span class="ln">5384</span> <b>var</b> e<span class="s"> = </span>events,
+</code><code id="L5385"><span class="ln">5385</span> args<span class="s"> = </span>Array.prototype.slice.call(arguments, <span class="d">2</span>),
+</code><code id="L5386"><span class="ln">5386</span> listeners<span class="s"> = </span>eve.listeners(name),
+</code><code id="L5387"><span class="ln">5387</span> errors<span class="s"> = </span>[];
+</code><code id="L5388"><span class="ln">5388</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>listeners.length; i < ii; i++) {
+</code><code id="L5389"><span class="ln">5389</span> <b>try</b> {
+</code><code id="L5390"><span class="ln">5390</span> listeners[i].apply(scope, args);
+</code><code id="L5391"><span class="ln">5391</span> } <b>catch</b> (ex) {
+</code><code id="L5392"><span class="ln">5392</span> errors.push({error: ex && ex.message<span class="s"> || </span>ex, func: listeners[i]});
+</code><code id="L5393"><span class="ln">5393</span> }
+</code><code id="L5394"><span class="ln">5394</span> }
+</code><code id="L5395"><span class="ln">5395</span> <b>if</b> (errors.length) {
+</code><code id="L5396"><span class="ln">5396</span> <b>return</b> errors;
+</code><code id="L5397"><span class="ln">5397</span> }
+</code><code id="L5398"><span class="ln">5398</span> };
+</code><code id="L5399"><span class="ln">5399</span> eve.listeners<span class="s"> = </span><b>function</b> (name) {
+</code><code id="L5400"><span class="ln">5400</span> <b>var</b> names<span class="s"> = </span>name.split(separator),
+</code><code id="L5401"><span class="ln">5401</span> e<span class="s"> = </span>events,
+</code><code id="L5402"><span class="ln">5402</span> item,
+</code><code id="L5403"><span class="ln">5403</span> items,
+</code><code id="L5404"><span class="ln">5404</span> k,
+</code><code id="L5405"><span class="ln">5405</span> i,
+</code><code id="L5406"><span class="ln">5406</span> ii,
+</code><code id="L5407"><span class="ln">5407</span> j,
+</code><code id="L5408"><span class="ln">5408</span> jj,
+</code><code id="L5409"><span class="ln">5409</span> nes,
+</code><code id="L5410"><span class="ln">5410</span> es<span class="s"> = </span>[e],
+</code><code id="L5411"><span class="ln">5411</span> out<span class="s"> = </span>[];
+</code><code id="L5412"><span class="ln">5412</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>names.length; i < ii; i++) {
+</code><code id="L5413"><span class="ln">5413</span> nes<span class="s"> = </span>[];
+</code><code id="L5414"><span class="ln">5414</span> <b>for</b> (j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>es.length; j < jj; j++) {
+</code><code id="L5415"><span class="ln">5415</span> e<span class="s"> = </span>es[j].n;
+</code><code id="L5416"><span class="ln">5416</span> items<span class="s"> = </span>[e[names[i]], e[wildcard]];
+</code><code id="L5417"><span class="ln">5417</span> k<span class="s"> = </span><span class="d">2</span>;
+</code><code id="L5418"><span class="ln">5418</span> <b>while</b> (k--) {
+</code><code id="L5419"><span class="ln">5419</span> item<span class="s"> = </span>items[k];
+</code><code id="L5420"><span class="ln">5420</span> <b>if</b> (item) {
+</code><code id="L5421"><span class="ln">5421</span> nes.push(item);
+</code><code id="L5422"><span class="ln">5422</span> out<span class="s"> = </span>out.concat(item.f<span class="s"> || </span>[]);
+</code><code id="L5423"><span class="ln">5423</span> }
+</code><code id="L5424"><span class="ln">5424</span> }
+</code><code id="L5425"><span class="ln">5425</span> }
+</code><code id="L5426"><span class="ln">5426</span> es<span class="s"> = </span>nes;
+</code><code id="L5427"><span class="ln">5427</span> }
+</code><code id="L5428"><span class="ln">5428</span> <b>return</b> out;
+</code><code id="L5429"><span class="ln">5429</span> };
+</code><code id="L5430"><span class="ln">5430</span> eve.on<span class="s"> = </span><b>function</b> (name, f) {
+</code><code id="L5431"><span class="ln">5431</span> <b>var</b> names<span class="s"> = </span>name.split(separator),
+</code><code id="L5432"><span class="ln">5432</span> e<span class="s"> = </span>events;
+</code><code id="L5433"><span class="ln">5433</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>names.length; i < ii; i++) {
+</code><code id="L5434"><span class="ln">5434</span> e<span class="s"> = </span>e.n;
+</code><code id="L5435"><span class="ln">5435</span> !e[names[i]] && (e[names[i]]<span class="s"> = </span>{n: {}});
+</code><code id="L5436"><span class="ln">5436</span> e<span class="s"> = </span>e[names[i]];
+</code><code id="L5437"><span class="ln">5437</span> }
+</code><code id="L5438"><span class="ln">5438</span> e.f<span class="s"> = </span>e.f<span class="s"> || </span>[];
+</code><code id="L5439"><span class="ln">5439</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>e.f.length; i < ii; i++) <b>if</b> (e.f[i]<span class="s"> == </span>f) {
+</code><code id="L5440"><span class="ln">5440</span> <b>return</b> <b>false</b>;
+</code><code id="L5441"><span class="ln">5441</span> }
+</code><code id="L5442"><span class="ln">5442</span> e.f.push(f);
+</code><code id="L5443"><span class="ln">5443</span> };
+</code><code id="L5444"><span class="ln">5444</span> eve.unbind<span class="s"> = </span><b>function</b> (name, f) {
+</code><code id="L5445"><span class="ln">5445</span> <b>var</b> names<span class="s"> = </span>name.split(separator),
+</code><code id="L5446"><span class="ln">5446</span> e,
+</code><code id="L5447"><span class="ln">5447</span> key,
+</code><code id="L5448"><span class="ln">5448</span> splice,
+</code><code id="L5449"><span class="ln">5449</span> cur<span class="s"> = </span>[events];
+</code><code id="L5450"><span class="ln">5450</span> <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>names.length; i < ii; i++) {
+</code><code id="L5451"><span class="ln">5451</span> <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>; j < cur.length; j += splice.length<span class="s"> - </span><span class="d">2</span>) {
+</code><code id="L5452"><span class="ln">5452</span> splice<span class="s"> = </span>[j, <span class="d">1</span>];
+</code><code id="L5453"><span class="ln">5453</span> e<span class="s"> = </span>cur[j].n;
+</code><code id="L5454"><span class="ln">5454</span> <b>if</b> (names[i] != wildcard) {
+</code><code id="L5455"><span class="ln">5455</span> <b>if</b> (e[names[i]]) {
+</code><code id="L5456"><span class="ln">5456</span> splice.push(e[names[i]]);
+</code><code id="L5457"><span class="ln">5457</span> }
+</code><code id="L5458"><span class="ln">5458</span> } <b>else</b> {
+</code><code id="L5459"><span class="ln">5459</span> <b>for</b> (key <b>in</b> e) <b>if</b> (e[has](key)) {
+</code><code id="L5460"><span class="ln">5460</span> splice.push(e[key]);
+</code><code id="L5461"><span class="ln">5461</span> }
+</code><code id="L5462"><span class="ln">5462</span> }
+</code><code id="L5463"><span class="ln">5463</span> cur.splice.apply(cur, splice);
+</code><code id="L5464"><span class="ln">5464</span> }
+</code><code id="L5465"><span class="ln">5465</span> }
+</code><code id="L5466"><span class="ln">5466</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>cur.length; i < ii; i++) {
+</code><code id="L5467"><span class="ln">5467</span> e<span class="s"> = </span>cur[i];
+</code><code id="L5468"><span class="ln">5468</span> <b>while</b> (e.n) {
+</code><code id="L5469"><span class="ln">5469</span> <b>if</b> (f) {
+</code><code id="L5470"><span class="ln">5470</span> <b>if</b> (e.f) {
+</code><code id="L5471"><span class="ln">5471</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>e.f.length; i < ii; i++) <b>if</b> (e.f[i]<span class="s"> == </span>f) {
+</code><code id="L5472"><span class="ln">5472</span> e.f.splice(i, <span class="d">1</span>);
+</code><code id="L5473"><span class="ln">5473</span> <b>break</b>;
+</code><code id="L5474"><span class="ln">5474</span> }
+</code><code id="L5475"><span class="ln">5475</span> !e.f.length && <b>delete</b> e.f;
+</code><code id="L5476"><span class="ln">5476</span> }
+</code><code id="L5477"><span class="ln">5477</span> <b>for</b> (key <b>in</b> e.n) <b>if</b> (e.n[has](key) && e.n[key].f) {
+</code><code id="L5478"><span class="ln">5478</span> <b>var</b> funcs<span class="s"> = </span>e.n[key].f;
+</code><code id="L5479"><span class="ln">5479</span> <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>funcs.length; i < ii; i++) <b>if</b> (funcs[i]<span class="s"> == </span>f) {
+</code><code id="L5480"><span class="ln">5480</span> funcs.splice(i, <span class="d">1</span>);
+</code><code id="L5481"><span class="ln">5481</span> <b>break</b>;
+</code><code id="L5482"><span class="ln">5482</span> }
+</code><code id="L5483"><span class="ln">5483</span> !funcs.length && <b>delete</b> e.n[key].f;
+</code><code id="L5484"><span class="ln">5484</span> }
+</code><code id="L5485"><span class="ln">5485</span> } <b>else</b> {
+</code><code id="L5486"><span class="ln">5486</span> <b>delete</b> e.f;
+</code><code id="L5487"><span class="ln">5487</span> <b>for</b> (key <b>in</b> e.n) <b>if</b> (e.n[has](key) && e.n[key].f) {
+</code><code id="L5488"><span class="ln">5488</span> <b>delete</b> e.n[key].f;
+</code><code id="L5489"><span class="ln">5489</span> }
+</code><code id="L5490"><span class="ln">5490</span> }
+</code><code id="L5491"><span class="ln">5491</span> e<span class="s"> = </span>e.n;
+</code><code id="L5492"><span class="ln">5492</span> }
+</code><code id="L5493"><span class="ln">5493</span> }
+</code><code id="L5494"><span class="ln">5494</span> <b>return</b> <b>true</b>;
+</code><code id="L5495"><span class="ln">5495</span> };
+</code><code id="L5496"><span class="ln">5496</span> eve.version<span class="s"> = </span>version;
+</code><code id="L5497"><span class="ln">5497</span> eve.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L5498"><span class="ln">5498</span> <b>return</b> <i>"You are running Eve "</i><span class="s"> + </span>version;
+</code><code id="L5499"><span class="ln">5499</span> };
+</code><code id="L5500"><span class="ln">5500</span> <b>return</b> eve;
+</code><code id="L5501"><span class="ln">5501</span> })();
+</code><code id="L5502"><span class="ln">5502</span>})();
+</code></body></html>
\ No newline at end of file
<!DOCTYPE html>
-<html lang="en">
- <head>
- <title>Raphaël Reference</title>
- <meta http-equiv="content-language" content="en">
- <meta charset="utf-8">
- <meta name="author" content="Dmitry Baranovskiy">
- <meta name="description" content="Vector Graphics JavaScript Library">
- <meta name="keywords" content="JavaScript Library, Raphael, SVG, VML">
- <meta name="viewport" content="width=450; user-scalable=no">
- <link rel="apple-touch-icon-precomposed" href="/Raphael.png"/>
- <link rel="shortcut icon" href="/favicon16.png" type="image/x-icon">
- <link rel="stylesheet" href="site.css" type="text/css">
- <link rel="shortcut icon" href="/favicon16.png" type="image/x-icon">
- </head>
- <body class="raphael" id="reference">
- <div id="header">
- <h1><span> </span>Raphaël—JavaScript Library</h1>
- </div>
- <div id="content">
- <div id="top"> </div>
- <div id="column-1">
- <h2>Main Function</h2>
- <h3 id="RAPHAEL">
- Raphael
- </h3>
- <p>
- Creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>container <em>HTMLElement</em> or <em>string</em></li>
- <li>width <em>number</em></li>
- <li>height <em>number</em></li>
- </ol>
- <p>or</p>
- <ol>
- <li>x <em>number</em></li>
- <li>y <em>number</em></li>
- <li>width <em>number</em></li>
- <li>height <em>number</em></li>
- </ol>
- <p>or</p>
- <ol>
- <li>all <em>array</em> (first 3 or 4 elements in the array are equal to [containerID, width, height] or [x, y, width, height]. The rest are element descriptions in format {type: type, <attributes>})</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>// Each of the following examples create a canvas that is 320px wide by 200px high
-// Canvas is created at the viewport’s 10,50 coordinate
-var paper = Raphael(10, 50, 320, 200);
-// Canvas is created at the top left corner of the #notepad element
-// (or its top right corner in dir="rtl" elements)
-var paper = Raphael(document.getElementById("notepad"), 320, 200);
-// Same as above
-var paper = Raphael("notepad", 320, 200);
-// Image dump
-var set = Raphael(["notepad", 320, 200, {
- type: "rect",
- x: 10,
- y: 10,
- width: 25,
- height: 25,
- stroke: "#f00"
+<!-- Generated with Dr.js -->
+<html lang="en"><head><meta charset="utf-8"><title>Raphaël Reference</title><link rel="stylesheet" href="dr.css"></head><body id="dr-js"><div class="dr-doc"><ol class="dr-toc"><li class="dr-lvl0"><a href="#Animation" class="undefined"><span>Animation</span></a></li><li class="dr-lvl1"><a href="#Animation.delay" class="dr-method"><span>Animation.delay()</span></a></li><li class="dr-lvl1"><a href="#Animation.repeat" class="dr-method"><span>Animation.repeat()</span></a></li><li class="dr-lvl0"><a href="#Element" class="undefined"><span>Element</span></a></li><li class="dr-lvl1"><a href="#Element.animate" class="dr-method"><span>Element.animate()</span></a></li><li class="dr-lvl1"><a href="#Element.clone" class="dr-method"><span>Element.clone()</span></a></li><li class="dr-lvl1"><a href="#Element.getBBox" class="dr-method"><span>Element.getBBox()</span></a></li><li class="dr-lvl1"><a href="#Element.getPointAtLength" class="dr-method"><span>Element.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Element.getSubpath" class="dr-method"><span>Element.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Element.glow" class="dr-method"><span>Element.glow()</span></a></li><li class="dr-lvl1"><a href="#Element.rotate" class="dr-method"><span>Element.rotate()</span></a></li><li class="dr-lvl1"><a href="#Element.scale" class="dr-method"><span>Element.scale()</span></a></li><li class="dr-lvl1"><a href="#Element.setTime" class="dr-method"><span>Element.setTime()</span></a></li><li class="dr-lvl1"><a href="#Element.status" class="dr-method"><span>Element.status()</span></a></li><li class="dr-lvl1"><a href="#Element.transform" class="dr-method"><span>Element.transform()</span></a></li><li class="dr-lvl1"><a href="#Element.translate" class="dr-method"><span>Element.translate()</span></a></li><li class="dr-lvl0"><a href="#Paper" class="undefined"><span>Paper</span></a></li><li class="dr-lvl1"><a href="#Paper.bottom" class="dr-property"><span>Paper.bottom</span></a></li><li class="dr-lvl1"><a href="#Paper.circle" class="dr-method"><span>Paper.circle()</span></a></li><li class="dr-lvl1"><a href="#Paper.ellipse" class="dr-method"><span>Paper.ellipse()</span></a></li><li class="dr-lvl1"><a href="#Paper.forEach" class="dr-method"><span>Paper.forEach()</span></a></li><li class="dr-lvl1"><a href="#Paper.getById" class="dr-method"><span>Paper.getById()</span></a></li><li class="dr-lvl1"><a href="#Paper.getElementByPoint" class="dr-method"><span>Paper.getElementByPoint()</span></a></li><li class="dr-lvl1"><a href="#Paper.image" class="dr-method"><span>Paper.image()</span></a></li><li class="dr-lvl1"><a href="#Paper.path" class="dr-method"><span>Paper.path()</span></a></li><li class="dr-lvl1"><a href="#Paper.raphael" class="dr-property"><span>Paper.raphael</span></a></li><li class="dr-lvl1"><a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a></li><li class="dr-lvl1"><a href="#Paper.set" class="dr-method"><span>Paper.set()</span></a></li><li class="dr-lvl1"><a href="#Paper.setSize" class="dr-method"><span>Paper.setSize()</span></a></li><li class="dr-lvl1"><a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a></li><li class="dr-lvl1"><a href="#Paper.top" class="dr-property"><span>Paper.top</span></a></li><li class="dr-lvl0"><a href="#Raphael" class="dr-method"><span>Raphael()</span></a></li><li class="dr-lvl1"><a href="#Raphael.angle" class="dr-method"><span>Raphael.angle()</span></a></li><li class="dr-lvl1"><a href="#Raphael.animation" class="dr-method"><span>Raphael.animation()</span></a></li><li class="dr-lvl1"><a href="#Raphael.deg" class="dr-method"><span>Raphael.deg()</span></a></li><li class="dr-lvl1"><a href="#Raphael.easing_formulas" class="dr-property"><span>Raphael.easing_formulas</span></a></li><li class="dr-lvl1"><a href="#Raphael.findDotsAtSegment" class="dr-method"><span>Raphael.findDotsAtSegment()</span></a></li><li class="dr-lvl1"><a href="#Raphael.fn" class="dr-property"><span>Raphael.fn</span></a></li><li class="dr-lvl1"><a href="#Raphael.getColor" class="dr-method"><span>Raphael.getColor()</span></a></li><li class="dr-lvl2"><a href="#Raphael.getColor.reset" class="dr-method"><span>Raphael.getColor.reset()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getPointAtLength" class="dr-method"><span>Raphael.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getRGB" class="dr-method"><span>Raphael.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getSubpath" class="dr-method"><span>Raphael.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getTotalLength" class="dr-method"><span>Raphael.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb" class="dr-method"><span>Raphael.hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb2rgb" class="dr-method"><span>Raphael.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl" class="dr-method"><span>Raphael.hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl2rgb" class="dr-method"><span>Raphael.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.is" class="dr-method"><span>Raphael.is()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parsePathString" class="dr-method"><span>Raphael.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parseTransformString" class="dr-method"><span>Raphael.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.path2curve" class="dr-method"><span>Raphael.path2curve()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathToRelative" class="dr-method"><span>Raphael.pathToRelative()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rad" class="dr-method"><span>Raphael.rad()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb" class="dr-method"><span>Raphael.rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsb" class="dr-method"><span>Raphael.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsl" class="dr-method"><span>Raphael.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.setWindow" class="dr-method"><span>Raphael.setWindow()</span></a></li><li class="dr-lvl1"><a href="#Raphael.snapTo" class="dr-method"><span>Raphael.snapTo()</span></a></li><li class="dr-lvl1"><a href="#Raphael.svg" class="dr-property"><span>Raphael.svg</span></a></li><li class="dr-lvl1"><a href="#Raphael.type" class="dr-property"><span>Raphael.type</span></a></li><li class="dr-lvl1"><a href="#Raphael.vml" class="dr-property"><span>Raphael.vml</span></a></li></ol><h1>Raphaël Reference</h1><p class="dr-source">Check out the source: <a href="raphael-src.html">raphael.js</a></p><h2 id="Animation" class="undefined">Animation<a href="#Animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
+<h3 id="Animation.delay" class="dr-method">Animation.delay(delay)<a href="#Animation.delay" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4752">➭</a></h3>
+<div class="dr-method"><p>Creates copy of existing animation object with given delay.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">delay</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">number of ms to pass between animation start and actual animation</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
+</div><h3 id="Animation.repeat" class="dr-method">Animation.repeat(repeat)<a href="#Animation.repeat" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4770">➭</a></h3>
+<div class="dr-method"><p>Creates copy of existing animation object with given repetition.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">repeat</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">number iterations of animation. For infinite animation pass <code>Infinity</code></dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
+</div><h2 id="Element" class="undefined">Element<a href="#Element" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
+<h3 id="Element.animate" class="dr-method">Element.animate(…)<a href="#Element.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5029">➭</a></h3>
+<div class="dr-method"><p>Creates and starts animation for given element.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">params</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
+<dt class="dr-param">ms</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">number of milliseconds for animation to run</dd>
+<dt class="dr-param optional">easing</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
+<dt class="dr-param optional">callback</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">callback function. Will be called at the end of animation.</dd>
+</dl>
+<p>or</p>
+<dl class="dr-parameters"><dt class="dr-param">animation</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object, see <a href="#Raphael.animation" class="dr-link">Raphael.animation</a></dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
+</div><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4225">➭</a></h3>
+<div class="dr-method"><p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">clone of a given element</span></p>
+</div><h3 id="Element.getBBox" class="dr-method">Element.getBBox(isWithoutTransform)<a href="#Element.getBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4193">➭</a></h3>
+<div class="dr-method"><p>Return bounding box for a given element</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">isWithoutTransform</dt>
+<dd class="dr-type"><em class="dr-type-boolean">boolean</em></dd>
+<dd class="dr-description">flag, <code>true</code> if you want to have bounding box before transformations. Default is <code>false</code>.</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Bounding box object:</span></p>
+<pre class="javascript code"><code>{
+ x: <span class="c">//top left corner x,</span>
+ y: <span class="c">//top left corner y,</span>
+ width: <span class="c">//width,</span>
+ height: <span class="c">//height</span>
+}
+</code></pre>
+</div><h3 id="Element.getPointAtLength" class="dr-method">Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4428">➭</a></h3>
+<div class="dr-method"><p>Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">length</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description"> </dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
+<pre class="javascript code"><code>{
+ x: <span class="c">//x coordinate,</span>
+ y: <span class="c">//y coordinate,</span>
+ alpha: <span class="c">//angle of derivative</span>
+}
+</code></pre>
+</div><h3 id="Element.getSubpath" class="dr-method">Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4445">➭</a></h3>
+<div class="dr-method"><p>Return subpath of a given element from given length to given length. Only works for element of “path” type.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">from</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">position of the start of the segment</dd>
+<dt class="dr-param">to</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">position of the end of the segment</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
+</div><h3 id="Element.getTotalLength" class="dr-method">Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4404">➭</a></h3>
+<div class="dr-method"><p>Returns length of the path in pixels. Only works for element of “path” type.</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
+</div><h3 id="Element.glow" class="dr-method">Element.glow()<a href="#Element.glow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4244">➭</a></h3>
+<div class="dr-method"><p>Return set of elements that create glow-like effect around given element. See <a href="#Paper.set." class="dr-link">Paper.set.</a></p>
+<p>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">set of elements that represents glow</span></p>
+</div><h3 id="Element.rotate" class="dr-method">Element.rotate(deg, [cx], [cy])<a href="#Element.rotate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2369">➭</a></h3>
+<div class="dr-method"><p>Adds rotation by given angle around given point to the list oftransformations of the element.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">deg</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">angle in degrees</dd>
+<dt class="dr-param optional">cx</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coordinate of the centre of rotation</dd>
+<dt class="dr-param optional">cy</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coordinate of the centre of rotation</dd>
+</dl>
+<p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used as a point of rotation.</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.scale" class="dr-method">Element.scale(sx, sy, [cx], [cy])<a href="#Element.scale" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2402">➭</a></h3>
+<div class="dr-method"><p>Adds scale by given amount relative to given point to the list oftransformations of the element.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">sx</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">horisontal scale amount</dd>
+<dt class="dr-param">sy</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">vertical scale amount</dd>
+<dt class="dr-param optional">cx</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coordinate of the centre of scale</dd>
+<dt class="dr-param optional">cy</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coordinate of the centre of scale</dd>
+</dl>
+<p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used instead.</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.setTime" class="dr-method">Element.setTime(anim, value)<a href="#Element.setTime" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5052">➭</a></h3>
+<div class="dr-method"><p>Sets the status of animation of the element in milliseconds. Similar to <a href="#Element.status" class="dr-link">Element.status</a> method.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">anim</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object</dd>
+<dt class="dr-param">value</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">number of milliseconds from the beginning of the animation</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
+</div><h3 id="Element.status" class="dr-method">Element.status([anim], [value])<a href="#Element.status" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5082">➭</a></h3>
+<div class="dr-method"><p>Gets or sets the status of animation of the element.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object</dd>
+<dt class="dr-param optional">value</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">0 – 1. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">status</span></p>
+<p>or</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">status if <code>anim</code> is not specified in format:</span></p>
+<pre class="javascript code"><code>[{
+ anim: <span class="c">// animation object,</span>
+ status: <span class="c">// status</span>
}, {
- type: "text",
- x: 30,
- y: 40,
- text: "Dump"
-}]);</code></pre>
- <h3 id="circle">
- circle
- </h3>
- <div class="sample" id="circle-sample"></div>
- <p>
- Draws a circle.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>x <em>number</em> X coordinate of the centre</li>
- <li>y <em>number</em> Y coordinate of the centre</li>
- <li>r <em>number</em> radius</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(50, 50, 40);</code></pre>
- <h3 id="rect">
- rect
- </h3>
- <div class="sample" id="rect-sample"></div>
- <p>
- Draws a rectangle.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>x <em>number</em> X coordinate of top left corner</li>
- <li>y <em>number</em> Y coordinate of top left corner</li>
- <li>width <em>number</em></li>
- <li>height <em>number</em></li>
- <li>r <em>number</em> [optional] radius for rounded corners, default is 0</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>// regular rectangle</code>
-<code>var c = paper.rect(10, 10, 50, 50);</code>
-<code>// rectangle with rounded corners</code>
-<code>var c = paper.rect(40, 40, 50, 50, 10);</code></pre>
- <h3 id="ellipse">
- ellipse
- </h3>
- <div class="sample" id="ellipse-sample"></div>
- <p>
- Draws an ellipse.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>x <em>number</em> X coordinate of the centre</li>
- <li>y <em>number</em> X coordinate of the centre</li>
- <li>rx <em>number</em> Horisontal radius</li>
- <li>ry <em>number</em> Vertical radius</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.ellipse(50, 50, 40, 20);</code></pre>
- <h3 id="image">
- image
- </h3>
- <div class="sample" id="image-sample"></div>
- <p>
- Embeds an image into the SVG/VML canvas.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>src <em>string</em> URI of the source image</li>
- <li>x <em>number</em> X coordinate position</li>
- <li>y <em>number</em> Y coordinate position</li>
- <li>width <em>number</em> Width of the image</li>
- <li>height <em>number</em> Height of the image</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 80, 80);</code></pre>
- <h3 id="set">
- set
- </h3>
- <div class="sample" id="set-sample"></div>
- <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),
- paper.circle(30, 10, 5)
-);</code>
-<code>st.attr({fill: "red"});</code></pre>
- <h3 id="text">
- text
- </h3>
- <div class="sample" id="text-sample"></div>
- <p>
- Draws a text string. If you need line breaks, put “\n” in the string.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>x <em>number</em> X coordinate position.</li>
- <li>y <em>number</em> Y coordinate position.</li>
- <li>text <em>string</em> The text string to draw.</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");</code></pre>
- <h3 id="path">
- path
- </h3>
- <div class="sample" id="path-sample"></div>
- <p>
- Creates a path element by given path data string.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>pathString <em>string</em> [optional] Path data in <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a>.</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.path("M10 10L90 90");
-// draw a diagonal line:
-// move to 10,10, line to 90,90</code></pre>
- <h3 id="clear">
- clear
- </h3>
- <p>
- Clears the canvas, i.e. removes all the elements.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.path("M10 10L90 90");
-paper.clear();</code></pre>
- <h2 id="Element">
- Element’s generic methods
- </h2>
- <p>
- Each object created on the canvas shares these same generic methods:
- </p>
- <h3 id="node">
- node
- </h3>
- <p>
- Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>// draw a circle at coordinate 10,10 with radius of 10
-var c = paper.circle(10, 10, 10);
-c.node.onclick = function () {
- c.attr("fill", "red");
-};</code></pre>
- <h3 id="paper">
- paper
- </h3>
- <p>
- Internal reference to “paper” where object drawn. Mainly for use in plugins and element extensions.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>Raphael.el.cross = function () {
- this.attr({fill: "red"});
- this.paper.path("M10,10L50,50M50,10L10,50")
- .attr({stroke: "red"});
-}</code></pre>
- <h3 id="remove">
- remove
- </h3>
- <p>
- Removes element from the DOM. You can’t use it after this method call.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-c.remove();</code></pre>
- <h3 id="hide">
- hide
- </h3>
- <p>
- Makes element invisible.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-c.hide();</code></pre>
- <h3 id="show">
- show
- </h3>
- <p>
- Makes element visible.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-c.show();</code></pre>
- <h3 id="rotate">
- rotate
- </h3>
- <p>
- Rotates the element by the given degree from its center point.
- </p>
- <h4>Parameters</h4>
- <ol>
- <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
-c.rotate(45, true); // rotation is absolute</code></pre>
- <h3 id="translate">
- translate
- </h3>
- <p>
- Moves the element around the canvas by the given distances.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>dx <em>number</em> Pixels of translation by X axis</li>
- <li>dy <em>number</em> Pixels of translation by Y axis</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-// moves the circle 10 px to the right and down
-c.translate(10, 10);</code></pre>
- <h3 id="scale">
- scale
- </h3>
- <p>
- Resizes the element by the given multiplier.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>Xtimes <em>number</em> Amount to scale horizontally</li>
- <li>Ytimes <em>number</em> Amount to scale vertically</li>
- <li>centerX <em>number</em> [optional] X of the center of scaling, default is the center of the element</li>
- <li>centerY <em>number</em> [optional] Y of the center of scaling, default is the center of the element</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-// makes the circle 1.5 times larger
-c.scale(1.5, 1.5);
-// makes the circle half as wide, and 75% as high
-c.scale(.5, .75);</code></pre>
- <h3 id="attr">
- attr
- </h3>
- <p>
- Sets the attributes of elements directly.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>attributeName <em>string</em></li>
- <li>value <em>string</em></li>
- </ol>
- <p>or</p>
- <ol>
- <li>params <em>object</em></li>
- </ol>
- <p>or</p>
- <ol>
- <li>attributeName <em>string</em> in this case method returns current value for given attribute name</li>
- </ol>
- <p>or</p>
- <ol>
- <li>attributeNames <em>array</em> in this case method returns array of current values for given attribute names</li>
- </ol>
- <p>or</p>
- <p>no parameters, in this case object containing all attributes will be returned</p>
- <h4>Possible parameters</h4>
- <p>Please refer to the <a href="http://www.w3.org/TR/SVG/" title="The W3C Recommendation for the SVG language describes these properties in detail.">SVG specification</a> for an explanation of these parameters.</p>
- <ul>
- <li id="attr-clip-rect">clip-rect <em>string</em> comma or space separated values: x, y, width and height</li>
- <li id="attr-cursor">cursor <em>string</em> CSS type of the cursor</li>
- <li id="attr-cx">cx <em>number</em></li>
- <li id="attr-cy">cy <em>number</em></li>
- <li id="attr-fill">
- fill <em>colour</em> or <em>gradient</em>
- <ul>
- <li>linear gradient: “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “<samp>90-#fff-#000</samp>” – 90° gradient from white to black or “<samp>0-#fff-#f00:20-#000</samp>” – 0° gradient from white via red (at 20%) to black</li>
- <li>radial gradient: “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “<samp>r#fff-#000</samp>” – gradient from white to black or “<samp>r(0.25, 0.75)#fff-#000</samp>” – gradient from white to black with focus point at 0.25, 0.75</li>
- <li>Focus point coordinates are in 0..1 range</li>
- <li>Radial gradients can only be applied to circles and ellipses</li>
- </ul>
- </li>
- <li id="attr-fill-opacity">fill-opacity <em>number</em></li>
- <li id="attr-font">font <em>string</em></li>
- <li id="attr-font-family">font-family <em>string</em></li>
- <li id="attr-font-size">font-size <em>number</em></li>
- <li id="attr-font-weight">font-weight <em>string</em></li>
- <li id="attr-height">height <em>number</em></li>
- <li id="attr-href">href <em>string</em> URL, if specified element behaves as hyperlink</li>
- <li id="attr-opacity">opacity <em>number</em></li>
- <li id="attr-path">path <em>pathString</em> <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path’s data attribute’s format are described in the SVG specification.">SVG path string format</a></li>
- <li id="attr-r">r <em>number</em></li>
- <li id="attr-rotation">rotation <em>number</em></li>
- <li id="attr-rx">rx <em>number</em></li>
- <li id="attr-ry">ry <em>number</em></li>
- <li id="attr-scale">scale <em>string</em> comma or space separated values: xtimes, ytimes, cx, cy. See: <a href="#scale">scale</a></li>
- <li id="attr-src">src <em>string</em> (URL)</li>
- <li id="attr-stroke">stroke <em>colour</em></li>
- <li id="attr-stroke-dasharray">stroke-dasharray <em>string</em> [“”, “<samp>-</samp>”, “<samp>.</samp>”, “<samp>-.</samp>”, “<samp>-..</samp>”, “<samp>. </samp>”, “<samp>- </samp>”, “<samp>--</samp>”, “<samp>- .</samp>”, “<samp>--.</samp>”, “<samp>--..</samp>”]</li>
- <li id="attr-stroke-linecap">stroke-linecap <em>string</em> [“<samp>butt</samp>”, “<samp>square</samp>”, “<samp>round</samp>”]</li>
- <li id="attr-stroke-linejoin">stroke-linejoin <em>string</em> [“<samp>bevel</samp>”, “<samp>round</samp>”, “<samp>miter</samp>”]</li>
- <li id="attr-stroke-miterlimit">stroke-miterlimit <em>number</em></li>
- <li id="attr-stroke-opacity">stroke-opacity <em>number</em></li>
- <li id="attr-stroke-width">stroke-width <em>number</em></li>
- <li id="attr-target">target <em>string</em> used with <a href="#attr-href">href</a></li>
- <li id="attr-text-anchor">text-anchor <em>string</em> [“<samp>start</samp>”, “<samp>middle</samp>”, “<samp>end</samp>”], default is “middle”</li>
- <li id="attr-title">title <em>string</em> will create tooltip with a given text</li>
- <li id="attr-translation">translation <em>string</em> comma or space separated values: x and y</li>
- <li id="attr-width">width <em>number</em></li>
- <li id="attr-x">x <em>number</em></li>
- <li id="attr-y">y <em>number</em></li>
- </ul>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-// using strings
-c.attr("fill", "black");
-// using params object
-c.attr({fill: "#000", stroke: "#f00", opacity: 0.5});
-c.attr({
- fill: "90-#fff-#000",
- "stroke-dasharray": "-..",
- "clip-rect": "10, 10, 100, 100"
-});</code></pre>
- <h3 id="animate">
- animate
- </h3>
- <p>
- Changes an attribute from its current value to its specified value in the given amount of milliseconds.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>newAttrs <em>object</em> A parameters object of the animation results. (Not all attributes can be animated.)</li>
- <li>ms <em>number</em> The duration of the animation, given in milliseconds.</li>
- <li>callback <em>function</em> [optional]</li>
- </ol>
- <p>or</p>
- <ol>
- <li>newAttrs <em>object</em> A parameters object of the animation results. (Not all attributes can be animated.)</li>
- <li>ms <em>number</em> The duration of the animation, given in milliseconds.</li>
- <li>easing <em>string</em> [“<samp>></samp>”, “<samp><</samp>”, “<samp><></samp>”, “<samp>backIn</samp>”, “<samp>backOut</samp>”, “<samp>bounce</samp>”, “<samp>elastic</samp>”, “<samp>cubic-bezier(p1, p2, p3, p4)</samp>”] or <em>function</em> [optional], see <a href="http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag" title="CSS Transitions Module Level 3">explanation re cubic-bezier syntax</a></li>
- <li>callback <em>function</em> [optional]</li>
- </ol>
- <p>or</p>
- <ol>
- <li>keyFrames <em>object</em> Key-value map, where key represents keyframe timing: [“from”, “20%”, “to”, “35%”, etc] and value is the same as <code>newAttrs</code> from above, except it could also have <samp>easing</samp> and <samp>callback</samp> properties</li>
- <li>ms <em>number</em> The duration of the animation, given in milliseconds.</li>
- </ol>
- <p>Look at the <a href="bounce.html">example of keyframes usage</a></p>
- <h4>Attributes that can be animated</h4>
- <p>The <code>newAttrs</code> parameter accepts an object whose properties are the attributes to animate. However, not all attributes listed in the <code>attr</code> method reference can be animated. The following is a list of those properties that can be animated:</p>
- <ul>
- <li>clip-rect <em>string</em></li>
- <li>cx <em>number</em></li>
- <li>cy <em>number</em></li>
- <li>fill <em>colour</em></li>
- <li>fill-opacity <em>number</em></li>
- <li>font-size <em>number</em></li>
- <li>height <em>number</em></li>
- <li>opacity <em>number</em></li>
- <li>path <em>pathString</em></li>
- <li>r <em>number</em></li>
- <li>rotation <em>string</em></li>
- <li>rx <em>number</em></li>
- <li>ry <em>number</em></li>
- <li>scale <em>string</em></li>
- <li>stroke <em>colour</em></li>
- <li>stroke-opacity <em>number</em></li>
- <li>stroke-width <em>number</em></li>
- <li>translation <em>string</em></li>
- <li>width <em>number</em></li>
- <li>x <em>number</em></li>
- <li>y <em>number</em></li>
- </ul>
- <h4>Easing</h4>
- <p>
- For easing use built in functions or add your own by adding new functions to <code>Raphael.easing_formulas</code> object. Look at the <a href="easing.html">example of easing usage</a>.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-c.animate({cx: 20, r: 20}, 2000);
-c.animate({cx: 20, r: 20}, 2000, "bounce");
-c.animate({
- "20%": {cx: 20, r: 20, easing: ">"},
- "50%": {cx: 70, r: 120, callback: function () {…}},
- "100%": {cx: 10, r: 10}
-}, 2000);</code></pre>
- <h3 id="animateWith">
- animateWith
- </h3>
- <p>
- The same as <a href="#animate"><code>animate</code></a> method, but synchronise animation with another element.
- </p>
- <h4>Parameters</h4>
- <p>The same as for <a href="#animate"><code>animate</code></a> method, but first argument is an element.</p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10),
- r = paper.rect(10, 10, 10, 10);
-c.animate({cx: 20, r: 20}, 2000);
-r.animateWith(c, {x: 20}, 2000);</code></pre>
- <h3 id="animateAlong">
- animateAlong
- </h3>
- <div class="sample" id="along-sample"></div>
- <p>
- Animates element along the given path. As an option it could rotate element along the path.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>path <em>object</em> or <em>string</em> path element or path string along which the element will be animated</li>
- <li>ms <em>number</em> The duration of the animation, given in milliseconds.</li>
- <li>rotate <em>boolean</em> [optional] if true, element will be rotated along the path</li>
- <li>callback <em>function</em> [optional]</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z").attr({stroke: "#ddd"}),
- e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}),
- b = r.rect(0, 0, 620, 400).attr({stroke: "none", fill: "#000", opacity: 0}).click(function () {
- e.attr({rx: 5, ry: 3}).animateAlong(p, 4000, true, function () {
- e.attr({rx: 4, ry: 4});
- });
- });</code></pre>
- <h3 id="animateAlongBack">
- animateAlongBack
- </h3>
- <p>
- Similar to <a href="animateAlong"><code>animateAlong</code></a>. Animates element along the given path, starting from the end of it.
- </p>
- <h3 id="onAnimation">
- onAnimation
- </h3>
- <div class="sample" id="onanim-sample"></div>
- <p>
- Sets or resets the function that will be called on each stage of the animation.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>f <em>function</em> function that will be called on each stage of animation</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var p = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z"),
- p2 = r.path(),
- e = r.ellipse(10, 50, 4, 4).attr({stroke: "none", fill: "#f00"}).onAnimation(function () {
- p2.attr({path: "M50,10L" + e.attr("cx") + "," + e.attr("cy")});
- }),
- b = r.rect(0, 0, 620, 400).attr({stroke: "none", fill: "#000", opacity: 0}).click(function () {
- e.attr({rx: 5, ry: 3}).animateAlong(p, 4000, true, function () {
- e.attr({rx: 4, ry: 4});
- });
- });</code></pre>
- <h3 id="getBBox">
- getBBox
- </h3>
- <p>
- Returns the dimensions of an element.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
-<code>var width = c.getBBox().width;</code></pre>
- <h3 id="toFront">
- toFront
- </h3>
- <p>
- Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
-<code>c.toFront();</code></pre>
- <h3 id="toBack">
- toBack
- </h3>
- <p>
- Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
-<code>c.toBack();</code></pre>
- <h3 id="insertBefore">
- insertBefore
- </h3>
- <p>
- Inserts current object before the given one.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var r = paper.rect(10, 10, 10, 10);</code>
-<code>var c = paper.circle(10, 10, 10);</code>
-<code>c.insertBefore(r);</code></pre>
- <h3 id="insertAfter">
- insertAfter
- </h3>
- <p>
- Inserts current object after the given one.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var r = paper.rect(10, 10, 10, 10);
-var c = paper.circle(10, 10, 10);
-r.insertAfter(c);</code></pre>
- <h3 id="clone">
- clone
- </h3>
- <p>
- Returns a clone of the current element.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var r = paper.rect(10, 10, 10, 10);
-var c = r.clone();</code></pre>
- <h2>Graphic Primitives</h2>
- <p>
- Methods of “paper” object, created with <code>Raphael</code> function call.
- </p>
- <h3 id="raphael">
- raphael
- </h3>
- <p>
- Internal reference to <code>Raphael</code> object. In case it is not available.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>Raphael.el.red = function () {
- var hsb = this.paper.raphael.rgb2hsb(this.attr("fill"));
- hsb.h = 1;
- this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex});
-}</code></pre>
- <h3 id="getTotalLength">
- getTotalLength
- </h3>
- <p>
- Path specific method. Returns length of the path in pixels.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z");
- alert(p.getTotalLength());</code></pre>
- <h3 id="getPointAtLength">
- getPointAtLength
- </h3>
- <div class="sample" id="point-sample"></div>
- <p>
- Path specific method. Returns point description at given length.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>length <em>number</em> length in pixels from the beginining of the path to the point</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var p = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z");
- var point = p.getPointAtLength(30);
- r.circle(point.x, point.y, 3);</code></pre>
- <p>Returned object format:</p>
- <ul>
- <li>x – x coordinate of the point</li>
- <li>y – y coordinate of the point</li>
- <li>alpha – angle of the path at the point</li>
- </ul>
- <h3 id="getSubpath">
- getSubpath
- </h3>
- <div class="sample" id="subpath-sample"></div>
- <p>
- Path specific method. Returns the subpath string of a given path.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>from <em>number</em> length in pixels from the beginning of the path to the beginning of the subpath</li>
- <li>to <em>number</em> length in pixels from the beginning of the path to the end of the subpath</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var p = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z");
- var path = p.getSubpath(10, 60);
- r.path(path).attr({stroke: "#f00"});</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="getRGB">
- getRGB
- </h3>
- <p>
- Parses passes string and returns an colour object. Especially useful for plug-in developers.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>color <em>string</em> Colour in form acceptable by library</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var stroke = Raphael.getRGB(circle.attr("stroke")).hex;</code></pre>
- <h3 id="angle">
- angle
- </h3>
- <p>
- Gives you an angle of the line formed by two points or angle between two lines formed by three points.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>x1 <em>number</em> X of the first point</li>
- <li>y1 <em>number</em> Y of the first point</li>
- <li>x2 <em>number</em> X of the second point</li>
- <li>y2 <em>number</em> Y of the second point</li>
- <li>x3 <em>number</em> X of the third point [optional]</li>
- <li>y3 <em>number</em> Y of the third point [optional]</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var angle = Raphael.angle(10, 10, 50, 50);</code></pre>
- <h3 id="rad">
- rad
- </h3>
- <p>
- Converts angle to radians.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>deg <em>number</em> value of an angle in degrees</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var Sin = Math.sin(Raphael.rad(45));</code></pre>
- <h3 id="deg">
- deg
- </h3>
- <p>
- Converts angle to degree.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>rad <em>number</em> value of an angle in radians</li>
- </ol>
- <h3 id="snapTo">
- snapTo
- </h3>
- <p>
- Returns a number adjusted to one of various values, if it’s close enough.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>values <em>number or array</em> If values is a number, the value will be snapped to any multiple. If an array, the value will be snapped to the first element that’s within tolerance.</li>
- <li>value <em>number</em> The value to adjust</li>
- <li>tolerance <em>number</em> The value must be within tolerance of one of the snap values, or it will be returned unchanged [optional, default 10]</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>// adjust -10..10 to 0, 40..60 to 50, 90-110 to 100, etc
-x = Raphael.snapTo(50, x);
-// adjust 5..35 to 20, 45..75 to 60, otherwise no change
-x = Raphael.snapTo([20, 60], x, 15);</code></pre>
- <h3 id="getColor">
- getColor
- </h3>
- <p>
- Returns a colour object for the next colour in spectrum
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>value <em>number</em> brightness [optional]</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = paper.path("M10,10L100,100").attr({stroke: Raphael.getColor()});</code></pre>
- <h3 id="getColor-reset">
- getColor.reset
- </h3>
- <p>
- Resets getColor function, so it will start from the beginning
- </p>
- <h3 id="registerFont">
- registerFont
- </h3>
- <p>
- Adds given font to the registered set of fonts for Raphaël. Should be used as an internal call from within Cufón’s font file. <a href="http://wiki.github.com/sorccu/cufon/about">More about Cufón and how to convert your font form TTF, OTF, etc to JavaScript file</a>. Returns original parameter, so it could be used with chaining.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>font <em>object</em> the font to register</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>Cufon.registerFont(Raphael.registerFont({…}))</code></pre>
- <h3 id="getFont">
- getFont
- </h3>
- <p>
- Finds font object in the registered fonts by given parameters. You could specify only one word from the font name, like “Myriad” for “Myriad Pro”.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>family <em>string</em> font family name or any word from it</li>
- <li>weight <em>string</em> weight of the font [optional]</li>
- <li>style <em>string</em> style of the font [optional]</li>
- <li>stretch <em>string</em> stretch of the font [optional]</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);</code></pre>
- <h3 id="print">
- print
- </h3>
- <div class="sample" id="print-sample"></div>
- <p>
- Creates set of shapes to represent given font at given position with given size. Result of the method is set object (see <a href="#set">set</a>) which contains each letter as separate path object.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>x <em>number</em> x position of the text</li>
- <li>y <em>number</em> y position of the text</li>
- <li>text <em>string</em> text to print</li>
- <li>font <em>object</em> font object (see <a href="#getFont">getFont</a>)</li>
- <li>font_size <em>number</em> size of the font</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var txt = r.print(10, 50, "print", r.getFont("Museo"), 30).attr({fill: "#fff"});
-// following line will paint first letter in red
-txt[0].attr({fill: "#f00"});</code></pre>
- <h3 id="plugins-canvas">
- Adding your own methods to canvas
- </h3>
- <p>
- You can add your own method to the canvas. For example if you want to draw pie chart, you can create your own pie chart function and ship it as a Raphaël plugin. To do this you need to extend Raphael.fn object. Please note that you can create your own namespaces inside fn object. Methods will be run in context of canvas anyway. You should alter fn object before Raphaël instance was created, otherwise it will take no effect.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
- return this.path( ... );
+ anim: <span class="c">// animation object,</span>
+ status: <span class="c">// status</span>
+}, ...]
+</code></pre>
+<p>or</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
+</div><h3 id="Element.transform" class="dr-method">Element.transform([tstr])<a href="#Element.transform" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2468">➭</a></h3>
+<div class="dr-method"><p>Adds transformation to the element which is separate to other attributes,i.e. translation doesn’t change <code>x</code> or <code>y</code> of the rectange. The formatof transformation string is similar to the path string syntax:</p>
+<pre class="javascript code"><code><i>"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</i>
+</code></pre>
+<p>Each letter is a command. There are four commands: <code>t</code> is for translate, <code>r</code> is for rotate, <code>s</code> is forscale and <code>m</code> is for matrix.</p>
+<p>So, example line could be read like “translate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100rotate 45° around centre and scale 1.5 times relative to centre”. As you see rotate and scale commands has origincoordinates as a optional parameters.Matrix accepts six parameters.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param optional">tstr</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">transformation string</dd>
+</dl>
+<p>If tstr isn’t specified</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">current transformation string</span></p>
+<p>else</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.translate" class="dr-method">Element.translate(dx, dy)<a href="#Element.translate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2433">➭</a></h3>
+<div class="dr-method"><p>Adds translation by given amount to the list of transformations of the element.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">dx</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">horisontal shift</dd>
+<dt class="dr-param">dy</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">vertical shift</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h2 id="Paper" class="undefined">Paper<a href="#Paper" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
+<h3 id="Paper.bottom" class="dr-property">Paper.bottom<a href="#Paper.bottom" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4065">➭</a></h3>
+<div class="dr-property"><p>Points to the bottom element on the paper</p>
+</div><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3905">➭</a></h3>
+<div class="dr-method"><p>Draws a circle.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coordinate of the centre</dd>
+<dt class="dr-param">y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coordinate of the centre</dd>
+<dt class="dr-param">r</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">radius</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “circle”</span></p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>);
+</code></pre>
+</div><h3 id="Paper.ellipse" class="dr-method">Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3949">➭</a></h3>
+<div class="dr-method"><p>Draws an ellipse.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coordinate of the centre</dd>
+<dt class="dr-param">y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coordinate of the centre</dd>
+<dt class="dr-param">rx</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">horisontal radius</dd>
+<dt class="dr-param">ry</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">vertical radius</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “ellipse”</span></p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.ellipse(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>, <span class="d">20</span>);
+</code></pre>
+</div><h3 id="Paper.forEach" class="dr-method">Paper.forEach(callback, thisArg)<a href="#Paper.forEach" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4160">➭</a></h3>
+<div class="dr-method"><p>Executes given function for each element on the paper</p>
+<p>If function returns <code>false</code> it will stop loop running.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">callback</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">function to run</dd>
+<dt class="dr-param">thisArg</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context object for the callback</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Paper object</span></p>
+</div><h3 id="Paper.getById" class="dr-method">Paper.getById(id)<a href="#Paper.getById" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4136">➭</a></h3>
+<div class="dr-method"><p>Returns you element by it’s internal ID.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">id</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">id</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
+</div><h3 id="Paper.getElementByPoint" class="dr-method">Paper.getElementByPoint(x, y)<a href="#Paper.getElementByPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4100">➭</a></h3>
+<div class="dr-method"><p>Returns you topmost element under given point.</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coordinate from the top left corner of the window</dd>
+<dt class="dr-param">y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coordinate from the top left corner of the window</dd>
+</dl>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>paper.getElementByPoint(mouseX, mouseY).attr({stroke: <i>"#f00"</i>});
+</code></pre>
+</div><h3 id="Paper.image" class="dr-method">Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3991">➭</a></h3>
+<div class="dr-method"><p>Embeds an image into the surface.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">src</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">URI of the source image</dd>
+<dt class="dr-param">x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coordinate position</dd>
+<dt class="dr-param">y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coordinate position</dd>
+<dt class="dr-param">width</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">width of the image</dd>
+<dt class="dr-param">height</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">height of the image</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “image”</span></p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.image(<i>"apple.png"</i>, <span class="d">10</span>, <span class="d">10</span>, <span class="d">80</span>, <span class="d">80</span>);
+</code></pre>
+</div><h3 id="Paper.path" class="dr-method">Paper.path(pathString)<a href="#Paper.path" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3969">➭</a></h3>
+<div class="dr-method"><p>Creates a path element by given path data string.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">path data in SVG path string format.</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “ellipse”</span></p>
+Details of a path's data attribute's format are described in the <a href="http://www.w3.org/TR/SVG/paths.html#PathData">SVG specification</a>.
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.path(<i>"M10 10L90 <span class="d">90</span>"</i>);
+<span class="c">// draw a diagonal line:</span>
+<span class="c">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
+</code></pre>
+</div><h3 id="Paper.raphael" class="dr-property">Paper.raphael<a href="#Paper.raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4072">➭</a></h3>
+<div class="dr-property"><p>Points to the <a href="#Raphael" class="dr-link">Raphael</a> object/function</p>
+</div><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, r)<a href="#Paper.rect" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3929">➭</a></h3>
+<div class="dr-method"><p></p>
+<p>Draws a rectangle.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coordinate of the top left corner</dd>
+<dt class="dr-param">y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coordinate of the top left corner</dd>
+<dt class="dr-param">width</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">width</dd>
+<dt class="dr-param">height</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">height</dd>
+<dt class="dr-param">r</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description"><a href="#optional" class="dr-link">optional</a> radius for rounded corners, default is 0</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “rect”</span></p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><span class="c">// regular rectangle</span>
+<b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">10</span>, <span class="d">50</span>, <span class="d">50</span>);
+<span class="c">// rectangle <b>with</b> rounded corners</span>
+<b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">40</span>, <span class="d">40</span>, <span class="d">50</span>, <span class="d">50</span>, <span class="d">10</span>);
+</code></pre>
+</div><h3 id="Paper.set" class="dr-method">Paper.set()<a href="#Paper.set" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4029">➭</a></h3>
+<div class="dr-method"><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>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">array-like object that represents set of elements</span></p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><b>var</b> st<span class="s"> = </span>paper.set();
+st.push(
+ paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
+ paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
+);
+st.attr({fill: <i>"red"</i>});
+</code></pre>
+</div><h3 id="Paper.setSize" class="dr-method">Paper.setSize(width, height)<a href="#Paper.setSize" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4051">➭</a></h3>
+<div class="dr-method"><p>If you need to change dimensions of the canvas call this method</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">width</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new width of the canvas</dd>
+<dt class="dr-param">height</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new height of the canvas</dd>
+</dl>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><b>var</b> st<span class="s"> = </span>paper.set();
+st.push(
+ paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
+ paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
+);
+st.attr({fill: <i>"red"</i>});
+</code></pre>
+</div><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4010">➭</a></h3>
+<div class="dr-method"><p>Draws a text string. If you need line breaks, put “\n” in the string.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coordinate position</dd>
+<dt class="dr-param">y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coordinate position</dd>
+<dt class="dr-param">text</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">The text string to draw</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type “text”</span></p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><b>var</b> t<span class="s"> = </span>paper.text(<span class="d">50</span>, <span class="d">50</span>, <i>"Raphaël\nkicks\nbutt!"</i>);
+</code></pre>
+</div><h3 id="Paper.top" class="dr-property">Paper.top<a href="#Paper.top" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4059">➭</a></h3>
+<div class="dr-property"><p>Points to the topmost element on the paper</p>
+</div><h2 id="Raphael" class="dr-method">Raphael(…)<a href="#Raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L55">➭</a></h2>
+<div class="dr-method"><p>Creates a canvas object on which to draw.You must do this first, as all future calls to drawing methodsfrom this instance will be bound to this canvas.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">container</dt>
+<dd class="dr-type"><em class="dr-type-HTMLElement">HTMLElement</em> <em class="dr-type-string">string</em></dd>
+<dd class="dr-description">DOM element or it’s id which is going to be a parent for drawing surface</dd>
+<dt class="dr-param">width</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description"> </dd>
+<dt class="dr-param">height</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description"> </dd>
+</dl>
+<p>or</p>
+<dl class="dr-parameters"><dt class="dr-param">x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description"> </dd>
+<dt class="dr-param">y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description"> </dd>
+<dt class="dr-param">width</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description"> </dd>
+<dt class="dr-param">height</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description"> </dd>
+</dl>
+<p>or</p>
+<dl class="dr-parameters"><dt class="dr-param">all</dt>
+<dd class="dr-type"><em class="dr-type-array">array</em></dd>
+<dd class="dr-description">(first 3 or 4 elements in the array are equal to [containerID, width, height] or [x, y, width, height]. The rest are element descriptions in format {type: type, <attributes>})</dd>
+</dl>
+<p>or</p>
+<dl class="dr-parameters"><dt class="dr-param">onReadyCallback</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">function that is going to be called on DOM ready event. You can also subscribe to this event via Eve’s “DOMLoad” event. In this case method returns <code>undefined</code>.</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Paper" class="dr-link">Paper</a></span></p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><span class="c">// Each of the following examples create a canvas that is 320px wide by 200px high</span>
+<span class="c">// Canvas is created at the viewport’s <span class="d">10</span>,<span class="d">50</span> coordinate</span>
+<b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">50</span>, <span class="d">320</span>, <span class="d">200</span>);
+<span class="c">// Canvas is created at the top left corner of the #notepad element</span>
+<span class="c">// (or its top right corner <b>in</b> dir=<i>"rtl"</i> elements)</span>
+<b>var</b> paper<span class="s"> = </span>Raphael(document.getElementById(<i>"notepad"</i>), <span class="d">320</span>, <span class="d">200</span>);
+<span class="c">// Same as above</span>
+<b>var</b> paper<span class="s"> = </span>Raphael(<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>);
+<span class="c">// Image dump</span>
+<b>var</b> set<span class="s"> = </span>Raphael([<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>, {
+ type: <i>"rect"</i>,
+ x: <span class="d">10</span>,
+ y: <span class="d">10</span>,
+ width: <span class="d">25</span>,
+ height: <span class="d">25</span>,
+ stroke: <i>"#f00"</i>
+}, {
+ type: <i>"text"</i>,
+ x: <span class="d">30</span>,
+ y: <span class="d">40</span>,
+ text: <i>"Dump"</i>
+}]);
+</code></pre>
+</div><h3 id="Raphael.angle" class="dr-method">Raphael.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Raphael.angle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L298">➭</a></h3>
+<div class="dr-method"><p>Returns angle between two or three points</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">x1</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coord of first point</dd>
+<dt class="dr-param">y1</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coord of first point</dd>
+<dt class="dr-param">x2</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coord of second point</dd>
+<dt class="dr-param">y2</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coord of second point</dd>
+<dt class="dr-param optional">x3</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x coord of third point</dd>
+<dt class="dr-param optional">y3</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y coord of third point</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
+</div><h3 id="Raphael.animation" class="dr-method">Raphael.animation(params, ms, [easing], [callback])<a href="#Raphael.animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4990">➭</a></h3>
+<div class="dr-method"><p>Creates animation object. That later could be used for <a href="#Element.animate" class="dr-link">Element.animate</a> or <a href="#Element.animateWith" class="dr-link">Element.animateWith</a> methods.See also <a href="#Animation.delay" class="dr-link">Animation.delay</a> and <a href="#Animation.repeat" class="dr-link">Animation.repeat</a> methods.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">params</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
+<dt class="dr-param">ms</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">number of milliseconds for animation to run</dd>
+<dt class="dr-param optional">easing</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">easing type. Accept one of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
+<dt class="dr-param optional">callback</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">callback function. Will be called at the end of animation.</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Animation" class="dr-link">Animation</a></span></p>
+</div><h3 id="Raphael.deg" class="dr-method">Raphael.deg(deg)<a href="#Raphael.deg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L331">➭</a></h3>
+<div class="dr-method"><p>Transform angle to degrees</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">deg</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">angle in radians</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
+</div><h3 id="Raphael.easing_formulas" class="dr-property">Raphael.easing_formulas<a href="#Raphael.easing_formulas" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4466">➭</a></h3>
+<div class="dr-property"><p>Object that contains easing formulas for animation. You could extend it with your owns. By default it has following list of easing:</p>
+<ul>
+ <li>“linear”</li>
+ <li>“<” or “easeIn” or “ease-in”</li>
+ <li>“>” or “easeOut” or “ease-out”</li>
+ <li>“<>” or “easeInOut” or “ease-in-out”</li>
+ <li>“backIn” or “back-in”</li>
+ <li>“backOut” or “back-out”</li>
+ <li>“elastic”</li>
+ <li>“bounce”</li>
+</ul>
+<p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p>
+</div><h3 id="Raphael.findDotsAtSegment" class="dr-method">Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Raphael.findDotsAtSegment" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L940">➭</a></h3>
+<div class="dr-method"><p>Utility methodFind dot coordinates on the given cubic bezier curve at the given t.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">p1x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x of the first point of the curve</dd>
+<dt class="dr-param">p1y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y of the first point of the curve</dd>
+<dt class="dr-param">c1x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x of the first anchor of the curve</dd>
+<dt class="dr-param">c1y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y of the first anchor of the curve</dd>
+<dt class="dr-param">c2x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x of the second anchor of the curve</dd>
+<dt class="dr-param">c2y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y of the second anchor of the curve</dd>
+<dt class="dr-param">p2x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">x of the second point of the curve</dd>
+<dt class="dr-param">p2y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">y of the second point of the curve</dd>
+<dt class="dr-param">t</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">position on the curve (0..1)</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">point information in format:</span></p>
+<pre class="javascript code"><code>{
+ x: <span class="c">// x coordinate of the point,</span>
+ y: <span class="c">// y coordinate of the point,</span>
+ m: {
+ x: <span class="c">// x coordinate of the left anchor,</span>
+ y: <span class="c">// y coordinate of the left anchor</span>
+ },
+ n: {
+ x: <span class="c">// x coordinate of the right anchor,</span>
+ y: <span class="c">// y coordinate of the right anchor</span>
+ },
+ start: {
+ x: <span class="c">// x coordinate of the start of the curve,</span>
+ y: <span class="c">// y coordinate of the start of the curve</span>
+ },
+ end: {
+ x: <span class="c">// x coordinate of the end of the curve,</span>
+ y: <span class="c">// y coordinate of the end of the curve</span>
+ },
+ alpha: <span class="c">// angle of the curve derivative at the point.</span>
+}
+</code></pre>
+</div><h3 id="Raphael.fn" class="dr-property">Raphael.fn<a href="#Raphael.fn" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L262">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to the canvas. For example if you want to draw pie chart,you can create your own pie chart function and ship it as a Raphaël plugin. To do thisyou need to extend <code>Raphael.fn</code> object. Please note that you can create your own namespacesinside <code>fn</code> object. Methods will be run in context of canvas anyway. You should alter <code>fn</code>object before Raphaël instance was created, otherwise it will take no effect.</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>Raphael.fn.arrow<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, size) {
+ <b>return</b> <b>this</b>.path( ... );
};
-// or create namespace
-Raphael.fn.mystuff = {
- arrow: function () {…},
- star: function () {…},
- // etc…
+<span class="c">// or create namespace</span>
+Raphael.fn.mystuff<span class="s"> = </span>{
+ arrow: <b>function</b> () {…},
+ star: <b>function</b> () {…},
+ <span class="c">// etc…</span>
};
-var paper = Raphael(10, 10, 630, 480);
-// then use it
-paper.arrow(10, 10, 30, 30, 5).attr({fill: "#f00"});
+<b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">10</span>, <span class="d">630</span>, <span class="d">480</span>);
+<span class="c">// then use it</span>
+paper.arrow(<span class="d">10</span>, <span class="d">10</span>, <span class="d">30</span>, <span class="d">30</span>, <span class="d">5</span>).attr({fill: <i>"#f00"</i>});
paper.mystuff.arrow();
paper.mystuff.star();
</code></pre>
- <h3 id="plugins-elements">
- Adding your own methods to elements
- </h3>
- <p>
- You can add your own method to elements. This is usefull when you want to hack default functionality or want to wrap some common transformation or attributes in one method. In difference to canvas mathods, you can redefine element method at any time.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>Raphael.el.red = function () {
- this.attr({fill: "#f00"});
-};
-// then use it
-paper.circle(100, 100, 20).red();
+</div><h3 id="Raphael.getColor" class="dr-method">Raphael.getColor([value])<a href="#Raphael.getColor" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L803">➭</a></h3>
+<div class="dr-method"><p>On each call returns next colour in the spectrum. To reset it back to red call <a href="#Raphael.getColor.reset" class="dr-link">Raphael.getColor.reset</a></p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param optional">value</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">brightness, default is <code>0.75</code></dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
+</div><h4 id="Raphael.getColor.reset" class="dr-method">Raphael.getColor.reset()<a href="#Raphael.getColor.reset" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L820">➭</a></h4>
+<div class="dr-method"><p>Resets spectrum position for <a href="#Raphael.getColor" class="dr-link">Raphael.getColor</a> back to red.</p>
+</div><h3 id="Raphael.getPointAtLength" class="dr-method">Raphael.getPointAtLength(path, length)<a href="#Raphael.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4375">➭</a></h3>
+<div class="dr-method"><p>Return coordinates of the point located at the given length on the given path.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">path</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">SVG path string</dd>
+<dt class="dr-param">length</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description"> </dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
+<pre class="javascript code"><code>{
+ x: <span class="c">//x coordinate,</span>
+ y: <span class="c">//y coordinate,</span>
+ alpha: <span class="c">//angle of derivative</span>
+}
</code></pre>
- <h3 id="custom-attributes">
- Custom Attributes
- </h3>
- <p>
- If you have a set of attributes that you would like to represent as a function of some number you can do it easily with custom attributes:
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>paper.customAttributes.hue = function (num) {
- num = num % 1;
- return {fill: "hsb(" + num + ", .75, 1)"};
-};
-// Custom attribute “hue” will change fill
-// to be given hue with fixed saturation and brightness.
-// Now you can use it like this:
-var c = paper.circle(10, 10, 10).attr({hue: .45});
-// or even like this:
-c.animate({hue: 1}, 1e3);
-
-// You could also create custom attribute
-// with multiple parameters:
-paper.customAttributes.hsb = function (h, s, b) {
- return {fill: "hsb(" + [h, s, b].join(",") + ")"};
-};
-c.attr({hsb: ".5 .8 1"});
-c.animate({hsb: "1 0 .5"}, 1e3);
+</div><h3 id="Raphael.getRGB" class="dr-method">Raphael.getRGB(colour)<a href="#Raphael.getRGB" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L681">➭</a></h3>
+<div class="dr-method"><p>Parses colour string as RGB object</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">colour</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">colour string in one of formats:</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
+<pre class="javascript code"><code>{
+ r: <span class="c">// red,</span>
+ g: <span class="c">// green,</span>
+ b: <span class="c">// blue</span>
+ hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••,</span>
+ error: <span class="c">// <b>true</b> <b>if</b> string can’t be parsed</span>
+}
</code></pre>
- <h3 id="colour">
- Supported colour formats
- </h3>
- <p>
- You could specify colour in this formats:
- </p>
- <ul>
- <li>Colour name (“<samp>red</samp>”, “<samp>green</samp>”, “<samp>cornflowerblue</samp>”, etc)</li>
- <li>#••• — shortened HTML colour: (“<samp>#000</samp>”, “<samp>#fc0</samp>”, etc)</li>
- <li>#•••••• — full length HTML colour: (“<samp>#000000</samp>”, “<samp>#bd2300</samp>”)</li>
- <li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<samp>rgb(200, 100, 0)</samp>”)</li>
- <li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<samp>rgb(100%, 175%, 0%)</samp>”)</li>
- <li>rgba(•••, •••, •••, •••) — red, green and blue channels’ values: (“<samp>rgba(200, 100, 0, .5)</samp>”)</li>
- <li>rgba(•••%, •••%, •••%, •••%) — same as above, but in %: (“<samp>rgba(100%, 175%, 0%, 50%)</samp>”)</li>
- <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<samp>hsb(0.5, 0.25, 1)</samp>”)</li>
- <li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
- <li>hsba(•••, •••, •••, •••) — same as above, but with opacity</li>
- <li>hsl(•••, •••, •••) — almost the same as hsb, see <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" title="HSL and HSV - Wikipedia, the free encyclopedia">Wikipedia page</a></li>
- <li>hsl(•••%, •••%, •••%) — same as above, but in %</li>
- <li>hsla(•••, •••, •••) — same as above, but with opacity</li>
- <li>Optionally for hsb and hsl you could specify hue as a degree: “<samp>hsl(240deg, 1, .5)</samp>” or, if you want to go fancy, “<samp>hsl(240°, 1, .5)</samp>”</li>
- </ul>
- <h4>Usage</h4>
- <pre class="javascript code"><code>paper.circle(100, 100, 20).attr({
- fill: "hsb(0.6, 1, 0.75)",
- stroke: "red"
-});</code></pre>
- <h3 id="safari">
- safari
- </h3>
- <p>
- There is an inconvenient rendering bug is Safari (WebKit): sometimes the rendering should be forced. This method should help with dealing with this bug.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>paper.safari();</code></pre>
- <h3 id="ninja-mode">
- “Ninja Mode”
- </h3>
- <p>
- If you want to leave no trace of Raphaël (Well, Raphaël creates only one global variable <code>Raphael</code>, but anyway.) You can use <code>ninja</code> method. Beware, that in this case plugins could stop working, because they are depending on global variable existance.
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>(function (local_raphael) {
- var paper = local_raphael(10, 10, 320, 200);
- …
-})(Raphael.ninja());
+</div><h3 id="Raphael.getSubpath" class="dr-method">Raphael.getSubpath(path, from, to)<a href="#Raphael.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4390">➭</a></h3>
+<div class="dr-method"><p>Return subpath of a given path from given length to given length.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">path</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">SVG path string</dd>
+<dt class="dr-param">from</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">position of the start of the segment</dd>
+<dt class="dr-param">to</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">position of the end of the segment</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
+</div><h3 id="Raphael.getTotalLength" class="dr-method">Raphael.getTotalLength(path)<a href="#Raphael.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4356">➭</a></h3>
+<div class="dr-method"><p>Returns length of the given path in pixels.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">path</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">SVG path string.</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
+</div><h3 id="Raphael.hsb" class="dr-method">Raphael.hsb(h, s, b)<a href="#Raphael.hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L763">➭</a></h3>
+<div class="dr-method"><p>Converts HSB values to hex representation of the colour.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">h</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">hue</dd>
+<dt class="dr-param">s</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">saturation</dd>
+<dt class="dr-param">b</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">value or brightness</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
+</div><h3 id="Raphael.hsb2rgb" class="dr-method">Raphael.hsb2rgb(h, s, v)<a href="#Raphael.hsb2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L488">➭</a></h3>
+<div class="dr-method"><p>Converts HSB values to RGB object.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">h</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">hue</dd>
+<dt class="dr-param">s</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">saturation</dd>
+<dt class="dr-param">v</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">value or brightness</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
+<pre class="javascript code"><code>{
+ r: <span class="c">// red,</span>
+ g: <span class="c">// green,</span>
+ b: <span class="c">// blue</span>
+ hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
+}
</code></pre>
- <h3 id="events">
- Events
- </h3>
- <p>
- You can attach events to elements by using element.node and your favourite library (<samp>$(circle.node).click(…)</samp>) or you can use built-in methods:
- </p>
- <h4>Usage</h4>
- <pre class="javascript code"><code>element.click(function (event) {
- this.attr({fill: "red"});
-});
-element.dblclick(function (event) {
- this.attr({fill: "red"});
-});
-element.mousedown(function (event) {
- this.attr({fill: "red"});
-});
-element.mousemove(function (event) {
- this.attr({fill: "red"});
-});
-element.mouseout(function (event) {
- this.attr({fill: "red"});
-});
-element.mouseover(function (event) {
- this.attr({fill: "red"});
-});
-element.mouseup(function (event) {
- this.attr({fill: "red"});
-});
-element.hover(function (event) {
- this.attr({fill: "red"});
-}, function (event) {
- this.attr({fill: "black"});
-}, overScope, outScope);</code></pre>
- <p>
- Second parameter is optional scope. By default handlers are run in the scope of the element. To unbind events use the same method names with “un” prefix, i.e. <samp>element.unclick(f);</samp>
- </p>
- <h3 id="drag-n-drop">
- Drag ’n’ Drop
- </h3>
- <p>
- To make element “draggable” you need to call method <code>drag</code> on element.
- </p>
- <h4>Parameters</h4>
- <ol>
- <li>onmove <em>function</em> event handler for moving</li>
- <li>onstart <em>function</em> event handler for start</li>
- <li>onend <em>function</em> event handler for end of the drag</li>
- </ol>
- <h4>Usage</h4>
- <pre class="javascript code"><code>var c = R.circle(100, 100, 50).attr({
- fill: "hsb(.8, 1, 1)",
- stroke: "none",
- opacity: .5
-});
-var start = function () {
- // storing original coordinates
- this.ox = this.attr("cx");
- this.oy = this.attr("cy");
- this.attr({opacity: 1});
-},
-move = function (dx, dy) {
- // move will be called with dx and dy
- this.attr({cx: this.ox + dx, cy: this.oy + dy});
-},
-up = function () {
- // restoring state
- this.attr({opacity: .5});
-};
-c.drag(move, start, up);</code></pre>
- <p>
- To unbind drag use the <samp>undrag</samp> method.
- </p>
- </div>
- <div id="column-2">
- <h2>
- <a href="index.html">Home</a>
- </h2>
- <h2>
- Contents
- </h2>
- <ul id="contents">
- <li>
- <a href="#Raphael"><code>Raphael</code></a>
- </li>
- <li>
- <a href="#circle"><code>circle</code></a>
- </li>
- <li>
- <a href="#rect"><code>rect</code></a>
- </li>
- <li>
- <a href="#ellipse"><code>ellipse</code></a>
- </li>
- <li>
- <a href="#image"><code>image</code></a>
- </li>
- <li>
- <a href="#set"><code>set</code></a>
- </li>
- <li>
- <a href="#text"><code>text</code></a>
- </li>
- <li>
- <a href="#path"><code>path</code></a>
- </li>
- <li>
- <a href="#clear"><code>clear</code></a>
- </li>
- <li>
- <a href="#node"><code>node</code></a>
- </li>
- <li>
- <a href="#paper"><code>paper</code></a>
- </li>
- <li>
- <a href="#remove"><code>remove</code></a>
- </li>
- <li>
- <a href="#hide"><code>hide</code></a>
- </li>
- <li>
- <a href="#show"><code>show</code></a>
- </li>
- <li>
- <a href="#rotate"><code>rotate</code></a>
- </li>
- <li>
- <a href="#translate"><code>translate</code></a>
- </li>
- <li>
- <a href="#scale"><code>scale</code></a>
- </li>
- <li>
- <a href="#attr"><code>attr</code></a>
- </li>
- <li>
- <a href="#animate"><code>animate</code></a>
- </li>
- <li>
- <a href="#animateWith"><code>animateWith</code></a>
- </li>
- <li>
- <a href="#animateAlong"><code>animateAlong</code></a>
- </li>
- <li>
- <a href="#animateAlongBack"><code>animateAlongBack</code></a>
- </li>
- <li>
- <a href="#getBBox"><code>getBBox</code></a>
- </li>
- <li>
- <a href="#toFront"><code>toFront</code></a>
- </li>
- <li>
- <a href="#toBack"><code>toBack</code></a>
- </li>
- <li>
- <a href="#insertBefore"><code>insertBefore</code></a>
- </li>
- <li>
- <a href="#insertAfter"><code>insertAfter</code></a>
- </li>
- <li>
- <a href="#clone"><code>clone</code></a>
- </li>
- <li>
- <a href="#raphael"><code>raphael</code></a>
- </li>
- <li>
- <a href="#getTotalLength"><code>getTotalLength</code></a>
- </li>
- <li>
- <a href="#getPointAtLength"><code>getPointAtLength</code></a>
- </li>
- <li>
- <a href="#getSubpath"><code>getSubpath</code></a>
- </li>
- <li>
- <a href="#setSize"><code>setSize</code></a>
- </li>
- <li>
- <a href="#setWindow"><code>setWindow</code></a>
- </li>
- <li>
- <a href="#getRGB"><code>getRGB</code></a>
- </li>
- <li>
- <a href="#angle"><code>angle</code></a>
- </li>
- <li>
- <a href="#rad"><code>rad</code></a>
- </li>
- <li>
- <a href="#deg"><code>deg</code></a>
- </li>
- <li>
- <a href="#snapTo"><code>snapTo</code></a>
- </li>
- <li>
- <a href="#getColor"><code>getColor</code></a>
- </li>
- <li>
- <a href="#getColor-reset"><code>getColor.reset</code></a>
- </li>
- <li>
- <a href="#registerFont"><code>registerFont</code></a>
- </li>
- <li>
- <a href="#getFont"><code>getFont</code></a>
- </li>
- <li>
- <a href="#print"><code>print</code></a>
- </li>
- <li>
- <a href="#plugins-canvas">Adding your own methods to canvas</a>
- </li>
- <li>
- <a href="#plugins-elements">Adding your own methods to elements</a>
- </li>
- <li>
- <a href="#custom-attributes">Custom Attributes</a>
- </li>
- <li>
- <a href="#colour">Supported colour formats</a>
- </li>
- <li>
- <a href="#safari">safari</a>
- </li>
- <li>
- <a href="#ninja-mode">“Ninja Mode”</a>
- </li>
- <li>
- <a href="#events">Events</a>
- </li>
- </ul>
- </div>
- <div id="footer">
- <h3 id="copyright">
- <a href="http://www.opensource.org/licenses/mit-license.php" title="MIT License" rel="license">Some Rights Reserved</a> by <a href="http://dmitry.baranovskiy.com/">Dmitry Baranovskiy</a>
- </h3>
- <h3 id="font">
- Logo by <a href="http://wasabicube.com/">Wasabicube</a>
- </h3>
- </div>
- </div>
- <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
- <script src="syntax.js" type="text/javascript" charset="utf-8"></script>
- <script src="museo.js" type="text/javascript" charset="utf-8"></script>
- <script src="site.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
- document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
- </script>
- <script type="text/javascript">
- var pageTracker = _gat._getTracker("UA-616618-3");
- pageTracker._trackPageview();
- </script>
- </body>
-</html>
+</div><h3 id="Raphael.hsl" class="dr-method">Raphael.hsl(h, s, l)<a href="#Raphael.hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L777">➭</a></h3>
+<div class="dr-method"><p>Converts HSL values to hex representation of the colour.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">h</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">hue</dd>
+<dt class="dr-param">s</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">saturation</dd>
+<dt class="dr-param">l</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">luminosity</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
+</div><h3 id="Raphael.hsl2rgb" class="dr-method">Raphael.hsl2rgb(h, s, l)<a href="#Raphael.hsl2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L525">➭</a></h3>
+<div class="dr-method"><p>Converts HSL values to RGB object.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">h</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">hue</dd>
+<dt class="dr-param">s</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">saturation</dd>
+<dt class="dr-param">l</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">luminosity</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
+<pre class="javascript code"><code>{
+ r: <span class="c">// red,</span>
+ g: <span class="c">// green,</span>
+ b: <span class="c">// blue</span>
+ hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
+}
+</code></pre>
+</div><h3 id="Raphael.is" class="dr-method">Raphael.is(o, type)<a href="#Raphael.is" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L273">➭</a></h3>
+<div class="dr-method"><p>Handfull replacement for <code>typeof</code> operator.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">o</dt>
+<dd class="dr-type"><em class="dr-type-…">…</em></dd>
+<dd class="dr-description">any object or primitive</dd>
+<dt class="dr-param">type</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">name of the type, i.e. “string”, “function”, “number”, etc.</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">is given value is of given type</span></p>
+</div><h3 id="Raphael.parsePathString" class="dr-method">Raphael.parsePathString(pathString)<a href="#Raphael.parsePathString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L835">➭</a></h3>
+<div class="dr-method"><p>Utility methodParses given path string into an array of arrays of path segments.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
+<dd class="dr-description">path string or array of segments (in the last case it will be returned stright away)</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
+</div><h3 id="Raphael.parseTransformString" class="dr-method">Raphael.parseTransformString(TString)<a href="#Raphael.parseTransformString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L878">➭</a></h3>
+<div class="dr-method"><p>Utility methodParses given path string into an array of transformations.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">TString</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
+<dd class="dr-description">transform string or array of transformations (in the last case it will be returned stright away)</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of transformations.</span></p>
+</div><h3 id="Raphael.path2curve" class="dr-method">Raphael.path2curve(pathString)<a href="#Raphael.path2curve" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1659">➭</a></h3>
+<div class="dr-method"><p>Utility methodConverts path to path where all segments are cubic bezier curves.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
+<dd class="dr-description">path string or array of segments</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
+</div><h3 id="Raphael.pathToRelative" class="dr-method">Raphael.pathToRelative(pathString)<a href="#Raphael.pathToRelative" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1647">➭</a></h3>
+<div class="dr-method"><p>Utility methodConverts path to relative form</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></dd>
+<dd class="dr-description">path string or array of segments</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
+</div><h3 id="Raphael.rad" class="dr-method">Raphael.rad(deg)<a href="#Raphael.rad" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L319">➭</a></h3>
+<div class="dr-method"><p>Transform angle to radians</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">deg</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">angle in degrees</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in radians.</span></p>
+</div><h3 id="Raphael.rgb" class="dr-method">Raphael.rgb(r, g, b)<a href="#Raphael.rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L791">➭</a></h3>
+<div class="dr-method"><p>Converts RGB values to hex representation of the colour.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">r</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">red</dd>
+<dt class="dr-param">g</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">green</dd>
+<dt class="dr-param">b</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">blue</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
+</div><h3 id="Raphael.rgb2hsb" class="dr-method">Raphael.rgb2hsb(r, g, b)<a href="#Raphael.rgb2hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L565">➭</a></h3>
+<div class="dr-method"><p>Converts RGB values to HSB object.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">r</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">red</dd>
+<dt class="dr-param">g</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">green</dd>
+<dt class="dr-param">b</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">blue</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSB object in format:</span></p>
+<pre class="javascript code"><code>{
+ h: <span class="c">// hue,</span>
+ s: <span class="c">// saturation,</span>
+ b: <span class="c">// brightness</span>
+}
+</code></pre>
+</div><h3 id="Raphael.rgb2hsl" class="dr-method">Raphael.rgb2hsl(r, g, b)<a href="#Raphael.rgb2hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L598">➭</a></h3>
+<div class="dr-method"><p>Converts RGB values to HSL object.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">r</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">red</dd>
+<dt class="dr-param">g</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">green</dd>
+<dt class="dr-param">b</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">blue</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSL object in format:</span></p>
+<pre class="javascript code"><code>{
+ h: <span class="c">// hue,</span>
+ s: <span class="c">// saturation,</span>
+ l: <span class="c">// luminosity</span>
+}
+</code></pre>
+</div><h3 id="Raphael.setWindow" class="dr-method">Raphael.setWindow(newwin)<a href="#Raphael.setWindow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L383">➭</a></h3>
+<div class="dr-method"><p>Used when you need to draw in <code><iframe></code>. Switched window to the iframe one.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">newwin</dt>
+<dd class="dr-type"><em class="dr-type-window">window</em></dd>
+<dd class="dr-description">new window object</dd>
+</dl>
+</div><h3 id="Raphael.snapTo" class="dr-method">Raphael.snapTo(values, value, [tolerance])<a href="#Raphael.snapTo" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L345">➭</a></h3>
+<div class="dr-method"><p>Snaps given value to given grid.</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">values</dt>
+<dd class="dr-type"><em class="dr-type-array">array</em> <em class="dr-type-number">number</em></dd>
+<dd class="dr-description">given array of values or step of the grid</dd>
+<dt class="dr-param">value</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">value to adjust</dd>
+<dt class="dr-param optional">tolerance</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">tolerance for snapping. Default is <code>10</code>.</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">adjusted value.</span></p>
+</div><h3 id="Raphael.svg" class="dr-property">Raphael.svg<a href="#Raphael.svg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L226">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports SVG.</p>
+</div><h3 id="Raphael.type" class="dr-property">Raphael.type<a href="#Raphael.type" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L208">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-string">string</em><p>Can be “SVG”, “VML” or empty, depending on browser support.</p>
+</div><h3 id="Raphael.vml" class="dr-property">Raphael.vml<a href="#Raphael.vml" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L232">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports VML.</p>
+</div></div></body></html>
\ No newline at end of file
projects / raphael / commitdiff