Roo.namespace('Roo.svg');
Roo.svg.Canvas = function(cfg)
{
Roo.svg.Canvas.superclass.constructor.call(this, cfg);
this.addEvents({
'click' : true,
'dblclick' : true,
'context' : true
});
}
Roo.extend(Roo.svg.Canvas, Roo.bootstrap.Component, {
getAutoCreate : function(){
return {
ns: "svg",
xmlns: "http://www.w3.org/2000/svg",
tag: "svg",
width: 100,
height: 100,
cn : [
{
ns: "svg",
tag: "g",
focusable : 'true'
}
]
};
},
initEvents: function()
{
Roo.svg.Canvas.superclass.initEvents.call(this);
this.el.on('click', this.relayEvent, this);
this.el.on('dblclick', this.relayEvent, this);
this.el.on('context', this.relayEvent, this); this.g = this.el.select('g', true).first();
},
relayEvent: function(e)
{
var cel = e.getTarget('.roo-svg-observable', false, true);
if (!cel || typeof(cel.listeners[e.type]) == 'undefined') {
this.fireEvent(e.type);
return;
}
cel.listeners[e.type].fire(e, cel);
},
fitToParent : function()
{
if (!this.el.dom.parentNode) { return;
}
(function() {
var p = Roo.get(this.el.dom.parentNode);
var gs = this.g.dom.getBBox();
var ratio = gs.height / gs.width;
ratio = isNaN(ratio) || ratio < 0.2 ? 1 : ratio;
var x = p.getComputedWidth() - p.getFrameWidth('lr') - 20; this.el.attr({
width : x,
height : x * ratio });
if (gs.height) {
this.el.attr("viewBox", gs.x + " " + gs.y + " " + gs.width + " " + gs.height);
}
}).defer(300, this);
}
});