diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/arrange.js | 53 | ||||
| -rw-r--r-- | src/circle.js | 12 | ||||
| -rw-r--r-- | src/clip.js | 18 | ||||
| -rw-r--r-- | src/container.js | 50 | ||||
| -rw-r--r-- | src/doc.js | 2 | ||||
| -rw-r--r-- | src/element.js | 30 | ||||
| -rw-r--r-- | src/ellipse.js | 9 |
7 files changed, 109 insertions, 65 deletions
diff --git a/src/arrange.js b/src/arrange.js new file mode 100644 index 0000000..d7fcb5f --- /dev/null +++ b/src/arrange.js @@ -0,0 +1,53 @@ + +// add backward / forward functionality to elements +SVG.extend(SVG.Element, { + + // get all siblings, including me + siblings: function() { + return this.mother().children(); + }, + + // send given element one step forwards + forward: function() { + var i = this.siblings().indexOf(this); + this.mother().remove(this).add(this, i + 1); + + return this; + }, + + // send given element one step backwards + backward: function() { + var i, p = this.mother(); + + p.levelDefs(); + + i = this.siblings().indexOf(this); + + if (i > 1) + p.remove(this).add(this, i - 1); + + return this; + }, + + // send given element all the way to the front + front: function() { + this.mother().remove(this).add(this); + + return this; + }, + + // send given element all the way to the back + back: function() { + var i, p = this.mother(); + + p.levelDefs(); + + i = this.siblings().indexOf(this); + + if (i > 1) + p.remove(this).add(this, 0); + + return this; + } + +});
\ No newline at end of file diff --git a/src/circle.js b/src/circle.js index 9576568..1fe95e5 100644 --- a/src/circle.js +++ b/src/circle.js @@ -18,20 +18,20 @@ SVG.extend(SVG.Circle, { return this; }, - // custom size function - size: function(w, h) { + // custom size function (no height value here!) + size: function(w) { this.attr('r', w / 2); this.center(); return this; }, - // private: center - center: function(cx, cy) { + // position element by its center + center: function(x, y) { var r = this.attrs.r || 0; - this.attr('cx', cx || ((this.attrs.x || 0) + r)); - this.attr('cy', cy || ((this.attrs.y || 0) + r)); + this.attr('cx', x || ((this.attrs.x || 0) + r)); + this.attr('cy', y || ((this.attrs.y || 0) + r)); } });
\ No newline at end of file diff --git a/src/clip.js b/src/clip.js index 189b62c..2266adb 100644 --- a/src/clip.js +++ b/src/clip.js @@ -13,3 +13,21 @@ SVG.Clip.prototype = new SVG.Element(); // include the container object SVG.extend(SVG.Clip, SVG.Container); + +// add clipping functionality to element +SVG.extend(SVG.Element, { + + // clip element using another element + clip: function(block) { + var p = this.mother().defs().clipPath(); + block(p); + + return this.clipTo(p); + }, + + // distribute clipping path to svg element + clipTo: function(p) { + return this.attr('clip-path', 'url(#' + p.id + ')'); + } + +}); diff --git a/src/container.js b/src/container.js index 9d8b5af..46e8200 100644 --- a/src/container.js +++ b/src/container.js @@ -1,53 +1,23 @@ SVG.Container = { - add: function(e) { - return this.addAt(e); - }, - - addAt: function(e, i) { - if (!this.contains(e)) { + add: function(e, i) { + if (!this.has(e)) { i = i == null ? this.children().length : i; this.children().splice(i, 0, e); - this.node.insertBefore(e.node, this.node.childNodes[i + 1]); + this.node.insertBefore(e.node, this.node.childNodes[i]); e.parent = this; } return this; }, - contains: function(e) { + has: function(e) { return Array.prototype.indexOf.call(this.children(), e) >= 0; }, children: function() { - return this._children || []; - }, - - sendBack: function(e) { - var i = this.children().indexOf(e); - if (i !== -1) - return this.remove(e).addAt(e, i - 1); - }, - - bringForward: function(e) { - var i = this.children().indexOf(e); - if (i !== -1) - return this.remove(e).addAt(e, i + 1); - }, - - bringToFront: function(e) { - if (this.contains(e)) - this.remove(e).add(e); - - return this; - }, - - sendToBottom: function(e) { - if (this.contains(e)) - this.remove(e).addAt(e, 0); - - return this; + return this._children || (this._children = []); }, remove: function(e) { @@ -68,12 +38,20 @@ SVG.Container = { defs: function() { if (this._defs == null) { this._defs = new SVG.Defs(); - this.add(this._defs); + this.add(this._defs, 0); } return this._defs; }, + levelDefs: function() { + var d = this.defs(); + + this.remove(d).add(d, 0); + + return this; + }, + group: function() { var e = new SVG.G(); this.add(e); @@ -6,6 +6,8 @@ SVG.Doc = function Doc(e) { this.attr('version', '1.1'); this.attr('xlink', SVG.xlink, SVG.ns); + this.defs(); + if (typeof e == 'string') e = document.getElementById(e); diff --git a/src/element.js b/src/element.js index 39bca21..396d67e 100644 --- a/src/element.js +++ b/src/element.js @@ -9,16 +9,20 @@ SVG.extend(SVG.Element, { // move element to given x and y values move: function(x, y) { - this.attr('x', x); - this.attr('y', y); + this.attr({ + x: x, + y: y + }); return this; }, // set element size to given width and height size: function(w, h) { - this.attr('width', w); - this.attr('height', h); + this.attr({ + width: w, + height: h + }); return this; }, @@ -27,14 +31,14 @@ SVG.extend(SVG.Element, { remove: function() { return this.parent != null ? this.parent.remove(this) : void 0; }, - + // get parent document parentDoc: function() { return this._parent(SVG.Doc); }, // get parent svg wrapper - parentSVG: function() { + mother: function() { return this.parentDoc(); }, @@ -71,6 +75,7 @@ SVG.extend(SVG.Element, { for (var i = 0, s = l.length; i < s; i++) if (!r.test(l[i])) n.push(l[i]); + } else n = l; @@ -91,19 +96,6 @@ SVG.extend(SVG.Element, { return b; }, - // clip element using another element - clip: function(block) { - var p = this.parentSVG().defs().clipPath(); - block(p); - - return this.clipTo(p); - }, - - // distribute clipping path to svg element - clipTo: function(p) { - return this.attr('clip-path', 'url(#' + p.id + ')'); - }, - // private: find svg parent _parent: function(pt) { var e = this; diff --git a/src/ellipse.js b/src/ellipse.js index f1638ee..adc1fd6 100644 --- a/src/ellipse.js +++ b/src/ellipse.js @@ -26,10 +26,11 @@ SVG.extend(SVG.Ellipse, { return this; }, - - center: function(cx, cy) { - this.attr('cx', cx || ((this.attrs.x || 0) + (this.attrs.rx || 0))); - this.attr('cy', cy || ((this.attrs.y || 0) + (this.attrs.ry || 0))); + + // position element by its center + center: function(x, y) { + this.attr('cx', x || ((this.attrs.x || 0) + (this.attrs.rx || 0))); + this.attr('cy', y || ((this.attrs.y || 0) + (this.attrs.ry || 0))); } }); |