git.roojs.org Git - roojs1/blob - roojs-svg-debug.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
  30
  31     getAutoCreate : function(){
  32
  33
  34         return {
  35             ns: "svg",
  36             xmlns: "http://www.w3.org/2000/svg",
  37             tag: "svg",
  38             width: 100,
  39             height: 100,
  40             cn : [
  41                 {
  42                     ns: "svg",
  43                     tag: "g",
  44                     focusable : 'true'
  45                 }
  46             ]
  47         };
  48     },
  49
  50     initEvents: function()
  51     {
  52         Roo.svg.Canvas.superclass.initEvents.call(this);
  53         // others...
  54
  55         this.el.on('click', this.relayEvent, this);
  56         this.el.on('dblclick', this.relayEvent, this);
  57         this.el.on('context', this.relayEvent, this); // ??? any others
  58         this.g = this.el.select('g', true).first();
  59
  60
  61     },
  62
  63     relayEvent: function(e)
  64     {
  65         //e.type
  66         var cel = e.getTarget('.roo-svg-observable', false, true);
  67         if (!cel || typeof(cel.listeners[e.type]) == 'undefined') {
  68             this.fireEvent(e.type);
  69             return;
  70         }
  71         cel.listeners[e.type].fire(e, cel);
  72
  73     },
  74
  75
  76     fitToParent : function()
  77     {
  78         // should it fit Horizontal - as per this?
  79         // or fit full ? // in which case pan/zoom done by drag?
  80
  81         if (!this.el.dom.parentNode) { // check if this Element still exists
  82             return;
  83         }
  84         (function() {
  85             var p = Roo.get(this.el.dom.parentNode);
  86             var gs = this.g.dom.getBBox();
  87             var ratio = gs.height / gs.width;
  88             ratio = isNaN(ratio) || ratio < 0.2 ? 1 : ratio;
  89             var x = p.getComputedWidth()  - p.getFrameWidth('lr') - 20; // close as possible with scroll bar
  90             this.el.attr({
  91                 width : x,
  92                 height : x * ratio //p.getComputedHeight() - p.getFrameWidth('tb')
  93             });
  94             if (gs.height) {
  95                 this.el.attr("viewBox", gs.x + " " + gs.y + " " + gs.width + " " + gs.height);
  96             }
  97
  98         }).defer(300, this);
  99
 100     }
 101
 102
 103
 104 });/**
 105  *
 106  * The SVG element.. - with a 'g' subelement, that can handle moving / panning etc..
 107  *
 108  *
 109  * The SVG element is the only element that handles events
 110  *   if you click on it, it will look for  roo-svg-observable in the event handler and pass on events to children.
 111  *
 112  *
 113  *
 114  */
 115
 116 Roo.namespace('Roo.svg');
 117
 118 Roo.svg.Element = function(cfg)
 119 {
 120     Roo.svg.Element.superclass.constructor.call(this, cfg);
 121     this.addEvents({
 122         'click' : true,
 123         'dblclick' : true,
 124         'context' : true
 125     });
 126
 127 }
 128
 129 Roo.extend(Roo.svg.Element, Roo.Component,  {
 130
 131     tag : 'g',
 132
 133     cls : '',
 134
 135     getAutoCreate : function(){
 136
 137
 138         return {
 139             ns: "svg",
 140             xmlns: "http://www.w3.org/2000/svg",
 141             tag: this.tag,
 142             cls : this.cls + ' roo-svg-observable'
 143         };
 144     },
 145
 146     initEvents: function()
 147     {
 148         Roo.svg.Canvas.superclass.initEvents.call(this);
 149         // others...
 150         this.el.relayEvent('click', this);
 151         this.el.relayEvent('dblclick', this);
 152         this.el.relayEvent('context', this);
 153
 154     },
 155
 156      // private
 157     onRender : function(ct, position)
 158     {
 159        // Roo.log("Call onRender: " + this.xtype);
 160
 161         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
 162
 163         if(this.el){
 164             if (this.el.attr('xtype')) {
 165                 this.el.attr('xtypex', this.el.attr('xtype'));
 166                 this.el.dom.removeAttribute('xtype');
 167
 168                 this.initEvents();
 169             }
 170
 171             return;
 172         }
 173
 174
 175
 176         var cfg = Roo.apply({},  this.getAutoCreate());
 177
 178         cfg.id = this.id || Roo.id();
 179
 180         // fill in the extra attributes
 181         if (this.xattr && typeof(this.xattr) =='object') {
 182             for (var i in this.xattr) {
 183                 cfg[i] = this.xattr[i];
 184             }
 185         }
 186
 187         if(this.dataId){
 188             cfg.dataId = this.dataId;
 189         }
 190
 191         if (this.cls) {
 192             cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
 193         }
 194
 195         if (this.style) { // fixme needs to support more complex style data.
 196             cfg.style = this.style;
 197         }
 198
 199         if(this.name){
 200             cfg.name = this.name;
 201         }
 202
 203         this.el = ct.createChild(cfg, position);
 204
 205         if (this.tooltip) {
 206             this.tooltipEl().attr('tooltip', this.tooltip);
 207         }
 208
 209         if(this.tabIndex !== undefined){
 210             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 211         }
 212
 213         this.initEvents();
 214
 215     }
 216
 217
 218
 219 });