git.roojs.org Git - roojs1/blob - Roo/svg/Element.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 Roo.namespace('Roo.svg');
  14
  15 Roo.svg.Element = function(cfg)
  16 {
  17     Roo.svg.Element.superclass.constructor.call(this, cfg);
  18     this.addEvents({
  19         'click' : true,
  20         'dblclick' : true,
  21         'context' : true
  22     });
  23
  24 }
  25
  26 Roo.extend(Roo.svg.Element, Roo.Component,  {
  27
  28     tag : 'g',
  29
  30     cls : '',
  31
  32     getAutoCreate : function(){
  33
  34
  35         return {
  36             ns: "svg",
  37             xmlns: "http://www.w3.org/2000/svg",
  38             tag: this.tag,
  39             cls : this.cls + ' roo-svg-observable'
  40         };
  41     },
  42
  43     initEvents: function()
  44     {
  45         Roo.svg.Canvas.superclass.initEvents.call(this);
  46         // others...
  47         this.el.relayEvent('click', this);
  48         this.el.relayEvent('dblclick', this);
  49         this.el.relayEvent('context', this);
  50
  51     },
  52
  53      // private
  54     onRender : function(ct, position)
  55     {
  56        // Roo.log("Call onRender: " + this.xtype);
  57
  58         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
  59
  60         if(this.el){
  61             if (this.el.attr('xtype')) {
  62                 this.el.attr('xtypex', this.el.attr('xtype'));
  63                 this.el.dom.removeAttribute('xtype');
  64
  65                 this.initEvents();
  66             }
  67
  68             return;
  69         }
  70
  71
  72
  73         var cfg = Roo.apply({},  this.getAutoCreate());
  74
  75         cfg.id = this.id || Roo.id();
  76
  77         // fill in the extra attributes
  78         if (this.xattr && typeof(this.xattr) =='object') {
  79             for (var i in this.xattr) {
  80                 cfg[i] = this.xattr[i];
  81             }
  82         }
  83
  84         if(this.dataId){
  85             cfg.dataId = this.dataId;
  86         }
  87
  88         if (this.cls) {
  89             cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
  90         }
  91
  92         if (this.style) { // fixme needs to support more complex style data.
  93             cfg.style = this.style;
  94         }
  95
  96         if(this.name){
  97             cfg.name = this.name;
  98         }
  99
 100         this.el = ct.createChild(cfg, position);
 101
 102         if (this.tooltip) {
 103             this.tooltipEl().attr('tooltip', this.tooltip);
 104         }
 105
 106         if(this.tabIndex !== undefined){
 107             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 108         }
 109
 110         this.initEvents();
 111
 112     },
 113
 114
 115
 116 });