git.roojs.org Git - roojs1/blob - docs/src/Roo_svg_Canvas.js.html

   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">/**
   2  *
   3  * The SVG element.. - with a 'g' subelement, that can handle moving / panning etc..
   4  *
   5  *
   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.
   8  *
   9  *
  10  *
  11  *
  12  */
  13
  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">);
  15
  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">)
  17 {
  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">});
  24
  25 }
  26
  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">,  {
  28
  29
  30
  31     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  32
  33
  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">&quot;svg&quot;</span><span class="jsdoc-syntax">,
  36             </span><span class="jsdoc-var">xmlns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;http://www.w3.org/2000/svg&quot;</span><span class="jsdoc-syntax">,
  37             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;svg&quot;</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">: [
  41                 {
  42                     </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;svg&quot;</span><span class="jsdoc-syntax">,
  43                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;g&quot;</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">}
  46             ]
  47         };
  48     },
  49
  50     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  51     {
  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...
  54
  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">();
  59
  60
  61     },
  62
  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">)
  64     {
  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">;
  70         }
  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">);
  72
  73     },
  74
  75
  76     </span><span class="jsdoc-var">fitToParent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  77     {
  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?
  80
  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">;
  83         }
  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">&lt; 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">&quot;viewBox&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">gs.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">gs.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">gs.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">gs.height</span><span class="jsdoc-syntax">);
  96             }
  97
  98         })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(300, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  99
 100     }
 101
 102
 103
 104 });</span></code></body></html>