From b398d7bb450098fe5f1ed296e0b1a19876760ce0 Mon Sep 17 00:00:00 2001 From: wout Date: Wed, 19 Dec 2012 16:45:31 +0100 Subject: [PATCH] Made absolute transformations default --- README.md | 13 ++++++++++--- dist/svg.js | 11 ++++------- dist/svg.min.js | 2 +- src/element.js | 4 ++-- src/sugar.js | 7 ++----- 5 files changed, 19 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 9b2a528..304347e 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ With the transform attribute elements can be scaled, rotated, translated, skewed ```javascript rect.transform('rotate(45, 100, 100)'); ``` -Every transformation will remembered so multiple rotate operations will be stacked together making them relative to previous operations. To ensure absolute operations a boolean value can be passed as a second argument: +These operations are always absolute. If every transformation needs remembered, so multiple rotate operations will be stacked together making them relative to previous operations, a boolean value can be passed as a second argument: ```javascript rect.transform('rotate(45, 100, 100)', true); ``` @@ -151,9 +151,9 @@ But you also define a rotation point: ```javascript rect.rotate({ deg: 45, x: 100, y: 100 }); ``` -To make the operation absolute: +To make the operation relative: ```javascript -rect.rotate({ deg: 45, x: 100, y: 100, absolute: true }); +rect.rotate({ deg: 45, x: 100, y: 100, relative: true }); ``` _This functionality requires the sugar.js module which is included in the default distribution._ @@ -258,6 +258,13 @@ SVG.extend(SVG.Doc, { ``` +## To-do +- Animation module (element animation, path tweens and easing) +- Draggable module (make elements and groups draggable) +- Shapes module (add preset shapes like star, n-gon) + + + ## Compatibility ### Desktop diff --git a/dist/svg.js b/dist/svg.js index e1ae95d..52a3384 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -197,12 +197,12 @@ }, // transformations - transform: function(t, a) { + transform: function(t, r) { var n = [], s = this.attr('transform') || '', l = s.match(/([a-z]+\([^\)]+\))/g) || []; - if (a === true) { + if (r !== true) { var v = t.match(/^([A-Za-z\-]+)/)[1], r = new RegExp('^' + v); @@ -531,9 +531,6 @@ if (s[a[i]] != null) this.attr('stroke-' + a[i], s[a[i]]); - //-D if (this.attrs['fill-opacity'] == null) - //-D this.fill({ opacity: 0 }); - return this; } @@ -549,7 +546,7 @@ if (o.x == null) o.x = b.cx; if (o.y == null) o.y = b.cy; - return this.transform('rotate(' + (o.deg || 0) + ' ' + o.x + ' ' + o.y + ')', o.absolute); + return this.transform('rotate(' + (o.deg || 0) + ' ' + o.x + ' ' + o.y + ')', o.relative); } }); @@ -559,7 +556,7 @@ // move using translate move: function(x, y) { - return this.transform('translate(' + x + ' ' + y + ')', true); + return this.transform('translate(' + x + ' ' + y + ')'); } }); diff --git a/dist/svg.min.js b/dist/svg.min.js index 190681d..7bffff3 100644 --- a/dist/svg.min.js +++ b/dist/svg.min.js @@ -1,2 +1,2 @@ /* svg.js 0.1a - svg container element group arrange clip doc defs shape rect circle ellipse path image sugar - svgjs.com/license */ -(function(){this.SVG={ns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",create:function(e){return document.createElementNS(this.ns,e)},extend:function(e,t){for(var n in t)e.prototype[n]=t[n]}},this.svg=function(e){return new SVG.Doc(e)},SVG.Container={add:function(e,t){return this.has(e)||(t=t==null?this.children().length:t,this.children().splice(t,0,e),this.node.insertBefore(e.node,this.node.childNodes[t]),e.parent=this),this},has:function(e){return this.children().indexOf(e)>=0},children:function(){return this._children||(this._children=[])},remove:function(e){return this.removeAt(this.children().indexOf(e))},removeAt:function(e){if(0<=e&&e1&&t.remove(this).add(this,e-1),this},front:function(){return this.mother().remove(this).add(this),this},back:function(){var e,t=this.mother();return t.levelDefs(),e=this.siblings().indexOf(this),e>1&&t.remove(this).add(this,0),this}});var e=0;SVG.Clip=function(){this.constructor.call(this,SVG.create("clipPath")),this.id="_"+e++,this.attr("id",this.id)},SVG.Clip.prototype=new SVG.Element,SVG.extend(SVG.Clip,SVG.Container),SVG.extend(SVG.Element,{clip:function(e){var t=this.mother().defs().clipPath();return e(t),this.clipTo(t)},clipTo:function(e){return this.attr("clip-path","url(#"+e.id+")")}}),SVG.Doc=function(t){this.constructor.call(this,SVG.create("svg")),this.attr("xmlns",SVG.ns),this.attr("version","1.1"),this.attr("xlink",SVG.xlink,SVG.ns),this.defs(),typeof t=="string"&&(t=document.getElementById(t)),t.appendChild(this.node)},SVG.Doc.prototype=new SVG.Element,SVG.extend(SVG.Doc,SVG.Container),SVG.Defs=function(){this.constructor.call(this,SVG.create("defs"))},SVG.Defs.prototype=new SVG.Element,SVG.extend(SVG.Defs,SVG.Container),SVG.extend(SVG.Defs,{clipPath:function(){var e=new SVG.Clip;return this.add(e),e}}),SVG.Shape=function(t){this.constructor.call(this,t)},SVG.Shape.prototype=new SVG.Element,SVG.Rect=function(){this.constructor.call(this,SVG.create("rect"))},SVG.Rect.prototype=new SVG.Shape,SVG.Circle=function(){this.constructor.call(this,SVG.create("circle"))},SVG.Circle.prototype=new SVG.Shape,SVG.extend(SVG.Circle,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center(),this},size:function(e){return this.attr("r",e/2),this.center(),this},center:function(e,t){var n=this.attrs.r||0;this.attr("cx",e||(this.attrs.x||0)+n),this.attr("cy",t||(this.attrs.y||0)+n)}}),SVG.Ellipse=function(){this.constructor.call(this,SVG.create("ellipse"))},SVG.Ellipse.prototype=new SVG.Shape,SVG.extend(SVG.Ellipse,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center(),this},size:function(e,t){return this.attr("rx",e/2),this.attr("ry",t/2),this.center(),this},center:function(e,t){this.attr("cx",e||(this.attrs.x||0)+(this.attrs.rx||0)),this.attr("cy",t||(this.attrs.y||0)+(this.attrs.ry||0))}}),SVG.Path=function(){this.constructor.call(this,SVG.create("path"))},SVG.Path.prototype=new SVG.Shape,SVG.extend(SVG.Path,{data:function(e){return this.attr("d",e),this}}),SVG.Image=function(){this.constructor.call(this,SVG.create("image"))},SVG.Image.prototype=new SVG.Element,SVG.extend(SVG.Image,SVG.Container),SVG.extend(SVG.Image,{load:function(e){return this.attr("href",e,SVG.xlink),this}}),SVG.extend(SVG.Shape,{fill:function(e){return e.color!=null&&this.attr("fill",e.color),e.opacity!=null&&this.attr("fill-opacity",e.opacity),this},stroke:function(e){e.color&&this.attr("stroke",e.color);var t="width opacity linecap linejoin miterlimit dasharray dashoffset".split(" ");for(var n=t.length-1;n>=0;n--)e[t[n]]!=null&&this.attr("stroke-"+t[n],e[t[n]]);return this}}),SVG.extend(SVG.Element,{rotate:function(e){var t=this.bbox();return e.x==null&&(e.x=t.cx),e.y==null&&(e.y=t.cy),this.transform("rotate("+(e.deg||0)+" "+e.x+" "+e.y+")",e.absolute)}}),SVG.extend(SVG.G,{move:function(e,t){return this.transform("translate("+e+" "+t+")",!0)}})}).call(this); \ No newline at end of file +(function(){this.SVG={ns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",create:function(e){return document.createElementNS(this.ns,e)},extend:function(e,t){for(var n in t)e.prototype[n]=t[n]}},this.svg=function(e){return new SVG.Doc(e)},SVG.Container={add:function(e,t){return this.has(e)||(t=t==null?this.children().length:t,this.children().splice(t,0,e),this.node.insertBefore(e.node,this.node.childNodes[t]),e.parent=this),this},has:function(e){return this.children().indexOf(e)>=0},children:function(){return this._children||(this._children=[])},remove:function(e){return this.removeAt(this.children().indexOf(e))},removeAt:function(e){if(0<=e&&e1&&t.remove(this).add(this,e-1),this},front:function(){return this.mother().remove(this).add(this),this},back:function(){var e,t=this.mother();return t.levelDefs(),e=this.siblings().indexOf(this),e>1&&t.remove(this).add(this,0),this}});var e=0;SVG.Clip=function(){this.constructor.call(this,SVG.create("clipPath")),this.id="_"+e++,this.attr("id",this.id)},SVG.Clip.prototype=new SVG.Element,SVG.extend(SVG.Clip,SVG.Container),SVG.extend(SVG.Element,{clip:function(e){var t=this.mother().defs().clipPath();return e(t),this.clipTo(t)},clipTo:function(e){return this.attr("clip-path","url(#"+e.id+")")}}),SVG.Doc=function(t){this.constructor.call(this,SVG.create("svg")),this.attr("xmlns",SVG.ns),this.attr("version","1.1"),this.attr("xlink",SVG.xlink,SVG.ns),this.defs(),typeof t=="string"&&(t=document.getElementById(t)),t.appendChild(this.node)},SVG.Doc.prototype=new SVG.Element,SVG.extend(SVG.Doc,SVG.Container),SVG.Defs=function(){this.constructor.call(this,SVG.create("defs"))},SVG.Defs.prototype=new SVG.Element,SVG.extend(SVG.Defs,SVG.Container),SVG.extend(SVG.Defs,{clipPath:function(){var e=new SVG.Clip;return this.add(e),e}}),SVG.Shape=function(t){this.constructor.call(this,t)},SVG.Shape.prototype=new SVG.Element,SVG.Rect=function(){this.constructor.call(this,SVG.create("rect"))},SVG.Rect.prototype=new SVG.Shape,SVG.Circle=function(){this.constructor.call(this,SVG.create("circle"))},SVG.Circle.prototype=new SVG.Shape,SVG.extend(SVG.Circle,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center(),this},size:function(e){return this.attr("r",e/2),this.center(),this},center:function(e,t){var n=this.attrs.r||0;this.attr("cx",e||(this.attrs.x||0)+n),this.attr("cy",t||(this.attrs.y||0)+n)}}),SVG.Ellipse=function(){this.constructor.call(this,SVG.create("ellipse"))},SVG.Ellipse.prototype=new SVG.Shape,SVG.extend(SVG.Ellipse,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center(),this},size:function(e,t){return this.attr("rx",e/2),this.attr("ry",t/2),this.center(),this},center:function(e,t){this.attr("cx",e||(this.attrs.x||0)+(this.attrs.rx||0)),this.attr("cy",t||(this.attrs.y||0)+(this.attrs.ry||0))}}),SVG.Path=function(){this.constructor.call(this,SVG.create("path"))},SVG.Path.prototype=new SVG.Shape,SVG.extend(SVG.Path,{data:function(e){return this.attr("d",e),this}}),SVG.Image=function(){this.constructor.call(this,SVG.create("image"))},SVG.Image.prototype=new SVG.Element,SVG.extend(SVG.Image,SVG.Container),SVG.extend(SVG.Image,{load:function(e){return this.attr("href",e,SVG.xlink),this}}),SVG.extend(SVG.Shape,{fill:function(e){return e.color!=null&&this.attr("fill",e.color),e.opacity!=null&&this.attr("fill-opacity",e.opacity),this},stroke:function(e){e.color&&this.attr("stroke",e.color);var t="width opacity linecap linejoin miterlimit dasharray dashoffset".split(" ");for(var n=t.length-1;n>=0;n--)e[t[n]]!=null&&this.attr("stroke-"+t[n],e[t[n]]);return this}}),SVG.extend(SVG.Element,{rotate:function(e){var t=this.bbox();return e.x==null&&(e.x=t.cx),e.y==null&&(e.y=t.cy),this.transform("rotate("+(e.deg||0)+" "+e.x+" "+e.y+")",e.relative)}}),SVG.extend(SVG.G,{move:function(e,t){return this.transform("translate("+e+" "+t+")")}})}).call(this); \ No newline at end of file diff --git a/src/element.js b/src/element.js index 35464ad..87ae198 100644 --- a/src/element.js +++ b/src/element.js @@ -53,12 +53,12 @@ SVG.extend(SVG.Element, { }, // transformations - transform: function(t, a) { + transform: function(t, r) { var n = [], s = this.attr('transform') || '', l = s.match(/([a-z]+\([^\)]+\))/g) || []; - if (a === true) { + if (r !== true) { var v = t.match(/^([A-Za-z\-]+)/)[1], r = new RegExp('^' + v); diff --git a/src/sugar.js b/src/sugar.js index dda1aa3..18f422e 100644 --- a/src/sugar.js +++ b/src/sugar.js @@ -24,9 +24,6 @@ SVG.extend(SVG.Shape, { if (s[a[i]] != null) this.attr('stroke-' + a[i], s[a[i]]); - //-D if (this.attrs['fill-opacity'] == null) - //-D this.fill({ opacity: 0 }); - return this; } @@ -42,7 +39,7 @@ SVG.extend(SVG.Element, { if (o.x == null) o.x = b.cx; if (o.y == null) o.y = b.cy; - return this.transform('rotate(' + (o.deg || 0) + ' ' + o.x + ' ' + o.y + ')', o.absolute); + return this.transform('rotate(' + (o.deg || 0) + ' ' + o.x + ' ' + o.y + ')', o.relative); } }); @@ -52,7 +49,7 @@ SVG.extend(SVG.G, { // move using translate move: function(x, y) { - return this.transform('translate(' + x + ' ' + y + ')', true); + return this.transform('translate(' + x + ' ' + y + ')'); } }); -- 2.39.5