git.roojs.org Git - roojs1/blob - Roo/svg/Canvas.js

   1 /**
   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 Roo.namespace('Roo.svg');
  15
  16 Roo.svg.Canvas = function(cfg)
  17 {
  18     Roo.svg.Canvas.superclass.constructor.call(this, cfg);
  19     this.addEvents({
  20         'click' : true,
  21         'dblclick' : true,
  22         'context' : true,
  23     });
  24
  25 }
  26
  27 Roo.extend(Roo.svg.Canvas, Roo.bootstrap.Component,  {
  28
  29     width: 100,
  30     height : 100, // changeable...
  31
  32
  33     getAutoCreate : function(){
  34
  35
  36         return {
  37             ns: "svg",
  38             xmlns: "http://www.w3.org/2000/svg",
  39             tag: "svg",
  40             width: this.width,
  41             height: this.height,
  42             cn : [
  43                 {
  44                     ns: "svg",
  45                     tag: "g",
  46                     focusable : 'true'
  47                 }
  48             ]
  49         };
  50     },
  51
  52     initEvents: function()
  53     {
  54         Roo.svg.Canvas.superclass.initEvents.call(this);
  55         // others...
  56
  57         this.el.on('click', this.relayEvent, this);
  58         this.el.on('dblclick', this.relayEvent, this);
  59         this.el.on('context', this.relayEvent, this); // ??? any others
  60         this.g = this.el.select('g', true).first();
  61
  62
  63     },
  64
  65     relayEvent: function(e)
  66     {
  67         //e.type
  68         var cel = e.getTarget().findParent('roo-svg-observable', false, true);
  69         if (typeof(cel.listeners[e.type]) == 'undefined') {
  70             this.fireEvent(e.type)
  71             return;
  72         }
  73         cel.listeners[e.type].fire(e, cel);
  74
  75     },
  76
  77
  78     fitToParent : function()
  79     {
  80         // should it fit Horizontal - as per this?
  81         // or fit full ? // in which case pan/zoom done by drag?
  82
  83         if (!this.el.dom.parentNode) { // check if this Element still exists
  84             return;
  85         }
  86         var p = Roo.get(this.el.dom.parentNode);
  87         var gs = this.g.dom.getBBox();
  88
  89         var x = p.getComputedWidth()  - p.getFrameWidth('lr');
  90         this.el.attr({
  91             width : x,
  92             height : (gs.height / gs.width) //p.getComputedHeight() - p.getFrameWidth('tb')
  93         });
  94
  95
  96     }
  97
  98
  99
 100 });