3 * The SVG element.. - with a 'g' subelement, that can handle moving / panning etc..
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.
14 Roo.namespace('Roo.svg');
16 Roo.svg.Canvas = function(cfg)
18 Roo.svg.Canvas.superclass.constructor.call(this, cfg);
27 Roo.extend(Roo.svg.Canvas, Roo.bootstrap.Component, {
31 getAutoCreate : function(){
36 xmlns: "http://www.w3.org/2000/svg",
50 initEvents: function()
52 Roo.svg.Canvas.superclass.initEvents.call(this);
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();
63 relayEvent: function(e)
66 var cel = e.getTarget('.roo-svg-observable', false, true);
67 if (!cel || typeof(cel.listeners[e.type]) == 'undefined') {
68 this.fireEvent(e.type);
71 cel.listeners[e.type].fire(e, cel);
76 fitToParent : function()
78 // should it fit Horizontal - as per this?
79 // or fit full ? // in which case pan/zoom done by drag?
81 if (!this.el.dom.parentNode) { // check if this Element still exists
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
92 height : x * ratio //p.getComputedHeight() - p.getFrameWidth('tb')
95 this.el.attr("viewBox", gs.x + " " + gs.y + " " + gs.width + " " + gs.height);
106 * The SVG element.. - with a 'g' subelement, that can handle moving / panning etc..
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.
116 Roo.namespace('Roo.svg');
118 Roo.svg.Element = function(cfg)
120 Roo.svg.Element.superclass.constructor.call(this, cfg);
129 Roo.extend(Roo.svg.Element, Roo.Component, {
135 getAutoCreate : function(){
140 xmlns: "http://www.w3.org/2000/svg",
142 cls : this.cls + ' roo-svg-observable'
146 initEvents: function()
148 Roo.svg.Canvas.superclass.initEvents.call(this);
150 this.el.relayEvent('click', this);
151 this.el.relayEvent('dblclick', this);
152 this.el.relayEvent('context', this);
157 onRender : function(ct, position)
159 // Roo.log("Call onRender: " + this.xtype);
161 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
164 if (this.el.attr('xtype')) {
165 this.el.attr('xtypex', this.el.attr('xtype'));
166 this.el.dom.removeAttribute('xtype');
176 var cfg = Roo.apply({}, this.getAutoCreate());
178 cfg.id = this.id || Roo.id();
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];
188 cfg.dataId = this.dataId;
192 cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
195 if (this.style) { // fixme needs to support more complex style data.
196 cfg.style = this.style;
200 cfg.name = this.name;
203 this.el = ct.createChild(cfg, position);
206 this.tooltipEl().attr('tooltip', this.tooltip);
209 if(this.tabIndex !== undefined){
210 this.el.dom.setAttribute('tabIndex', this.tabIndex);