1 <html><head><title>Roo/svg/Canvas.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/**
3 * The SVG element.. - with a 'g' subelement, that can handle moving / panning etc..
6 * The SVG element is the only element that handles events
7 * if you click on it, it will look for roo-svg-observable in the event handler and pass on events to children.
14 </span><span class="jsdoc-var">Roo.namespace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'Roo.svg'</span><span class="jsdoc-syntax">);
16 </span><span class="jsdoc-var">Roo.svg.Canvas </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">)
18 </span><span class="jsdoc-var">Roo.svg.Canvas.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
19 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
20 </span><span class="jsdoc-string">'click' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
21 </span><span class="jsdoc-string">'dblclick' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
22 </span><span class="jsdoc-string">'context' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
23 </span><span class="jsdoc-syntax">});
27 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.svg.Canvas</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">, {
31 </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
34 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
35 </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"svg"</span><span class="jsdoc-syntax">,
36 </span><span class="jsdoc-var">xmlns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"http://www.w3.org/2000/svg"</span><span class="jsdoc-syntax">,
37 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"svg"</span><span class="jsdoc-syntax">,
38 </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 100,
39 </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: 100,
40 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
42 </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"svg"</span><span class="jsdoc-syntax">,
43 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"g"</span><span class="jsdoc-syntax">,
44 </span><span class="jsdoc-var">focusable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'true'
45 </span><span class="jsdoc-syntax">}
50 </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
52 </span><span class="jsdoc-var">Roo.svg.Canvas.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
53 </span><span class="jsdoc-comment">// others...
55 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relayEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
56 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'dblclick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relayEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
57 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'context'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relayEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// ??? any others
58 </span><span class="jsdoc-var">this.g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'g'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
63 </span><span class="jsdoc-var">relayEvent</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
65 </span><span class="jsdoc-comment">//e.type
66 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-svg-observable'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
67 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cel </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cel.listeners</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e.type</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
68 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.type</span><span class="jsdoc-syntax">);
69 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
71 </span><span class="jsdoc-var">cel.listeners</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e.type</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.fire</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cel</span><span class="jsdoc-syntax">);
76 </span><span class="jsdoc-var">fitToParent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
78 </span><span class="jsdoc-comment">// should it fit Horizontal - as per this?
79 // or fit full ? // in which case pan/zoom done by drag?
81 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el.dom.parentNode</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// check if this Element still exists
82 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
84 (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
85 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.parentNode</span><span class="jsdoc-syntax">);
86 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">gs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.g.dom.getBBox</span><span class="jsdoc-syntax">();
87 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ratio </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">gs.height </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">gs.width</span><span class="jsdoc-syntax">;
88 </span><span class="jsdoc-var">ratio </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ratio</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">ratio </span><span class="jsdoc-syntax">< 0.2 ? 1 : </span><span class="jsdoc-var">ratio</span><span class="jsdoc-syntax">;
89 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p.getComputedWidth</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">p.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">) - 20; </span><span class="jsdoc-comment">// close as possible with scroll bar
90 </span><span class="jsdoc-var">this.el.attr</span><span class="jsdoc-syntax">({
91 </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
92 </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">ratio </span><span class="jsdoc-comment">//p.getComputedHeight() - p.getFrameWidth('tb')
93 </span><span class="jsdoc-syntax">});
94 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">gs.height</span><span class="jsdoc-syntax">) {
95 </span><span class="jsdoc-var">this.el.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"viewBox"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">gs.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">" " </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">gs.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">" " </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">gs.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">" " </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">gs.height</span><span class="jsdoc-syntax">);
98 })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(300, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
104 });</span></code></body></html>