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
  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 });