From: Alan Knowles Date: Tue, 6 Jul 2021 05:56:48 +0000 (+0800) Subject: Add svg library X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=3ba9a848b16764d5fabd5e1daf75ee961e8691cf Add svg library --- diff --git a/Roo/svg/Canvas.js b/Roo/svg/Canvas.js index 6b200f7f0a..996a0c6658 100644 --- a/Roo/svg/Canvas.js +++ b/Roo/svg/Canvas.js @@ -19,7 +19,7 @@ Roo.svg.Canvas = function(cfg) this.addEvents({ 'click' : true, 'dblclick' : true, - 'context' : true, + 'context' : true }); } @@ -65,7 +65,7 @@ Roo.extend(Roo.svg.Canvas, Roo.bootstrap.Component, { //e.type var cel = e.getTarget('.roo-svg-observable', false, true); if (!cel || typeof(cel.listeners[e.type]) == 'undefined') { - this.fireEvent(e.type) + this.fireEvent(e.type); return; } cel.listeners[e.type].fire(e, cel); diff --git a/Roo/svg/Element.js b/Roo/svg/Element.js index 42fc00be4c..456d530ebf 100644 --- a/Roo/svg/Element.js +++ b/Roo/svg/Element.js @@ -109,7 +109,7 @@ Roo.extend(Roo.svg.Element, Roo.Component, { this.initEvents(); - }, + } diff --git a/buildSDK/bundle_build.sh b/buildSDK/bundle_build.sh index 44ec2ff4c0..7cb059b21e 100644 --- a/buildSDK/bundle_build.sh +++ b/buildSDK/bundle_build.sh @@ -19,6 +19,8 @@ roojspacker -t roojs-calendar.js -T roojs-calendar-debug.js -i buildSDK/dependan roojspacker -t roojs-mailer.js -T roojs-mailer-debug.js -i buildSDK/dependancy_mailer.txt #build docbook library roojspacker -t roojs-doc.js -T roojs-doc-debug.js -i buildSDK/dependancy_doc.txt +#build svg library +roojspacker -t roojs-svg.js -T roojs-svg-debug.js -i buildSDK/dependancy_svg.txt diff --git a/roojs-svg-debug.js b/roojs-svg-debug.js new file mode 100644 index 0000000000..0c4adc7478 --- /dev/null +++ b/roojs-svg-debug.js @@ -0,0 +1,219 @@ +/** + * + * The SVG element.. - with a 'g' subelement, that can handle moving / panning etc.. + * + * + * The SVG element is the only element that handles events + * if you click on it, it will look for roo-svg-observable in the event handler and pass on events to children. + * + * + * + * + */ + +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); + // others... + + this.el.on('click', this.relayEvent, this); + this.el.on('dblclick', this.relayEvent, this); + this.el.on('context', this.relayEvent, this); // ??? any others + this.g = this.el.select('g', true).first(); + + + }, + + relayEvent: function(e) + { + //e.type + 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() + { + // should it fit Horizontal - as per this? + // or fit full ? // in which case pan/zoom done by drag? + + if (!this.el.dom.parentNode) { // check if this Element still exists + 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; // close as possible with scroll bar + this.el.attr({ + width : x, + height : x * ratio //p.getComputedHeight() - p.getFrameWidth('tb') + }); + if (gs.height) { + this.el.attr("viewBox", gs.x + " " + gs.y + " " + gs.width + " " + gs.height); + } + + }).defer(300, this); + + } + + + +});/** + * + * The SVG element.. - with a 'g' subelement, that can handle moving / panning etc.. + * + * + * The SVG element is the only element that handles events + * if you click on it, it will look for roo-svg-observable in the event handler and pass on events to children. + * + * + * + */ + +Roo.namespace('Roo.svg'); + +Roo.svg.Element = function(cfg) +{ + Roo.svg.Element.superclass.constructor.call(this, cfg); + this.addEvents({ + 'click' : true, + 'dblclick' : true, + 'context' : true + }); + +} + +Roo.extend(Roo.svg.Element, Roo.Component, { + + tag : 'g', + + cls : '', + + getAutoCreate : function(){ + + + return { + ns: "svg", + xmlns: "http://www.w3.org/2000/svg", + tag: this.tag, + cls : this.cls + ' roo-svg-observable' + }; + }, + + initEvents: function() + { + Roo.svg.Canvas.superclass.initEvents.call(this); + // others... + this.el.relayEvent('click', this); + this.el.relayEvent('dblclick', this); + this.el.relayEvent('context', this); + + }, + + // private + onRender : function(ct, position) + { + // Roo.log("Call onRender: " + this.xtype); + + Roo.bootstrap.Component.superclass.onRender.call(this, ct, position); + + if(this.el){ + if (this.el.attr('xtype')) { + this.el.attr('xtypex', this.el.attr('xtype')); + this.el.dom.removeAttribute('xtype'); + + this.initEvents(); + } + + return; + } + + + + var cfg = Roo.apply({}, this.getAutoCreate()); + + cfg.id = this.id || Roo.id(); + + // fill in the extra attributes + if (this.xattr && typeof(this.xattr) =='object') { + for (var i in this.xattr) { + cfg[i] = this.xattr[i]; + } + } + + if(this.dataId){ + cfg.dataId = this.dataId; + } + + if (this.cls) { + cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls; + } + + if (this.style) { // fixme needs to support more complex style data. + cfg.style = this.style; + } + + if(this.name){ + cfg.name = this.name; + } + + this.el = ct.createChild(cfg, position); + + if (this.tooltip) { + this.tooltipEl().attr('tooltip', this.tooltip); + } + + if(this.tabIndex !== undefined){ + this.el.dom.setAttribute('tabIndex', this.tabIndex); + } + + this.initEvents(); + + } + + + +}); \ No newline at end of file diff --git a/roojs-svg.js b/roojs-svg.js new file mode 100644 index 0000000000..3c7862d074 --- /dev/null +++ b/roojs-svg.js @@ -0,0 +1,11 @@ +// Roo/svg/Canvas.js +Roo.namespace('Roo.svg');Roo.svg.Canvas=function(A){Roo.svg.Canvas.superclass.constructor.call(this,A);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 A=e.getTarget('.roo-svg-observable',false,true); +if(!A||typeof(A.listeners[e.type])=='undefined'){this.fireEvent(e.type);return;}A.listeners[e.type].fire(e,A);},fitToParent:function(){if(!this.el.dom.parentNode){return;}(function(){var p=Roo.get(this.el.dom.parentNode);var gs=this.g.dom.getBBox();var A=gs.height/gs.width; +A=isNaN(A)||A<0.2?1:A;var x=p.getComputedWidth()-p.getFrameWidth('lr')-20;this.el.attr({width:x,height:x*A});if(gs.height){this.el.attr("viewBox",gs.x+" "+gs.y+" "+gs.width+" "+gs.height);}}).defer(300,this);}}); +// Roo/svg/Element.js +Roo.namespace('Roo.svg');Roo.svg.Element=function(A){Roo.svg.Element.superclass.constructor.call(this,A);this.addEvents({'click':true,'dblclick':true,'context':true});};Roo.extend(Roo.svg.Element,Roo.Component,{tag:'g',cls:'',getAutoCreate:function(){return {ns:"svg",xmlns:"http://www.w3.org/2000/svg",tag:this.tag,cls:this.cls+' roo-svg-observable'} +;},initEvents:function(){Roo.svg.Canvas.superclass.initEvents.call(this);this.el.relayEvent('click',this);this.el.relayEvent('dblclick',this);this.el.relayEvent('context',this);},onRender:function(ct,A){Roo.bootstrap.Component.superclass.onRender.call(this,ct,A); +if(this.el){if(this.el.attr('xtype')){this.el.attr('xtypex',this.el.attr('xtype'));this.el.dom.removeAttribute('xtype');this.initEvents();}return;}var B=Roo.apply({},this.getAutoCreate());B.id=this.id||Roo.id();if(this.xattr&&typeof(this.xattr)=='object'){for(var i in this.xattr){B[i]=this.xattr[i]; +}}if(this.dataId){B.dataId=this.dataId;}if(this.cls){B.cls=(typeof(B.cls)=='undefined')?this.cls:B.cls+' '+this.cls;}if(this.style){B.style=this.style;}if(this.name){B.name=this.name;}this.el=ct.createChild(B,A);if(this.tooltip){this.tooltipEl().attr('tooltip',this.tooltip); +}if(this.tabIndex!==undefined){this.el.dom.setAttribute('tabIndex',this.tabIndex);}this.initEvents();}});