diff options
Diffstat (limited to 'dist/svg.js')
| -rw-r--r-- | dist/svg.js | 350 |
1 files changed, 168 insertions, 182 deletions
diff --git a/dist/svg.js b/dist/svg.js index 67da181..3fd2f5a 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -1,4 +1,4 @@ -/* svg.js v0.3-2-g610e40c - svg container element fx event group arrange defs mask pattern gradient doc shape wrap rect ellipse poly path image text nested sugar - svgjs.com/license */ +/* svg.js v0.3-3-g4a75886 - svg element container fx event group arrange defs mask pattern gradient doc shape wrap rect ellipse poly path image text nested sugar - svgjs.com/license */ (function() { this.svg = function(element) { @@ -20,148 +20,8 @@ }, // Method for extending objects extend: function(object, module) { - /* extend all container modules */ - if (object == SVG.Container) - ('Clip Defs Doc Gradient Group Mask Nested Pattern').split(' ').forEach(function(m) { - if (SVG[m]) - SVG.extend(SVG[m], module); - }); - /* extend given module */ - else - for (var key in module) - object.prototype[key] = module[key]; - } - - }; - - SVG.Container = { - // Add given element at a position - add: function(element, index) { - if (!this.has(element)) { - index = index == null ? this.children().length : index; - this.children().splice(index, 0, element); - this.node.insertBefore(element.node, this.node.childNodes[index] || null); - element.parent = this; - } - - return this; - }, - // Basically does the same as `add()` but returns the added element - put: function(element, index) { - this.add(element, index); - return element; - }, - // Checks if the given element is a child - has: function(element) { - return this.children().indexOf(element) >= 0; - }, - // Returns all child elements - children: function() { - return this._children || (this._children = []); - }, - // Iterates over all children and invokes a given block - each: function(block) { - var index, - children = this.children(); - - for (index = 0, length = children.length; index < length; index++) - if (children[index] instanceof SVG.Shape) - block.apply(children[index], [index, children]); - - return this; - }, - // Remove a given child element - remove: function(element) { - return this.removeAt(this.children().indexOf(element)); - }, - // Remove a child element at a given position - removeAt: function(index) { - if (0 <= index && index < this.children().length) { - var element = this.children()[index]; - this.children().splice(index, 1); - this.node.removeChild(element.node); - element.parent = null; - } - - return this; - }, - // Returns defs element - defs: function() { - return this._defs || (this._defs = this.put(new SVG.Defs(), 0)); - }, - // Re-level defs to first positon in element stack - level: function() { - return this.remove(this.defs()).put(this.defs(), 0); - }, - // Create a group element - group: function() { - return this.put(new SVG.G()); - }, - // Create a rect element - rect: function(width, height) { - return this.put(new SVG.Rect().size(width, height)); - }, - // Create circle element, based on ellipse - circle: function(diameter) { - return this.ellipse(diameter); - }, - // Create an ellipse - ellipse: function(width, height) { - return this.put(new SVG.Ellipse().size(width, height)); - }, - // Create a wrapped polyline element - polyline: function(points) { - return this.put(new SVG.Wrap(new SVG.Polyline())).plot(points); - }, - // Create a wrapped polygon element - polygon: function(points) { - return this.put(new SVG.Wrap(new SVG.Polygon())).plot(points); - }, - // Create a wrapped path element - path: function(data) { - return this.put(new SVG.Wrap(new SVG.Path())).plot(data); - }, - // Create image element, load image and set its size - image: function(source, width, height) { - width = width != null ? width : 100; - return this.put(new SVG.Image().load(source).size(width, height != null ? height : width)); - }, - // Create text element - text: function(text) { - return this.put(new SVG.Text().text(text)); - }, - // Create nested svg document - nested: function() { - return this.put(new SVG.Nested()); - }, - // Create gradient element in defs - gradient: function(type, block) { - return this.defs().gradient(type, block); - }, - // Create pattern element in defs - pattern: function(width, height, block) { - return this.defs().pattern(width, height, block); - }, - // Create masking element - mask: function() { - return this.defs().put(new SVG.Mask()); - }, - // Get first child, skipping the defs node - first: function() { - return this.children()[0] instanceof SVG.Defs ? this.children()[1] : this.children()[0]; - }, - // Get the last child - last: function() { - return this.children()[this.children().length - 1]; - }, - // Remove all elements in this container - clear: function() { - this._children = []; - - while (this.node.hasChildNodes()) - this.node.removeChild(this.node.lastChild); - - return this; + for (var key in module) + object.prototype[key] = module[key]; } }; @@ -450,6 +310,146 @@ }); + SVG.Container = function Container(element) { + this.constructor.call(this, element); + }; + + // Inherit from SVG.Element + SVG.Container.prototype = new SVG.Element(); + + // + SVG.extend(SVG.Container, { + // Add given element at a position + add: function(element, index) { + if (!this.has(element)) { + index = index == null ? this.children().length : index; + this.children().splice(index, 0, element); + this.node.insertBefore(element.node, this.node.childNodes[index] || null); + element.parent = this; + } + + return this; + }, + // Basically does the same as `add()` but returns the added element + put: function(element, index) { + this.add(element, index); + return element; + }, + // Checks if the given element is a child + has: function(element) { + return this.children().indexOf(element) >= 0; + }, + // Returns all child elements + children: function() { + return this._children || (this._children = []); + }, + // Iterates over all children and invokes a given block + each: function(block) { + var index, + children = this.children(); + + for (index = 0, length = children.length; index < length; index++) + if (children[index] instanceof SVG.Shape) + block.apply(children[index], [index, children]); + + return this; + }, + // Remove a given child element + remove: function(element) { + return this.removeAt(this.children().indexOf(element)); + }, + // Remove a child element at a given position + removeAt: function(index) { + if (0 <= index && index < this.children().length) { + var element = this.children()[index]; + this.children().splice(index, 1); + this.node.removeChild(element.node); + element.parent = null; + } + + return this; + }, + // Returns defs element + defs: function() { + return this._defs || (this._defs = this.put(new SVG.Defs(), 0)); + }, + // Re-level defs to first positon in element stack + level: function() { + return this.remove(this.defs()).put(this.defs(), 0); + }, + // Create a group element + group: function() { + return this.put(new SVG.G()); + }, + // Create a rect element + rect: function(width, height) { + return this.put(new SVG.Rect().size(width, height)); + }, + // Create circle element, based on ellipse + circle: function(diameter) { + return this.ellipse(diameter); + }, + // Create an ellipse + ellipse: function(width, height) { + return this.put(new SVG.Ellipse().size(width, height)); + }, + // Create a wrapped polyline element + polyline: function(points) { + return this.put(new SVG.Wrap(new SVG.Polyline())).plot(points); + }, + // Create a wrapped polygon element + polygon: function(points) { + return this.put(new SVG.Wrap(new SVG.Polygon())).plot(points); + }, + // Create a wrapped path element + path: function(data) { + return this.put(new SVG.Wrap(new SVG.Path())).plot(data); + }, + // Create image element, load image and set its size + image: function(source, width, height) { + width = width != null ? width : 100; + return this.put(new SVG.Image().load(source).size(width, height != null ? height : width)); + }, + // Create text element + text: function(text) { + return this.put(new SVG.Text().text(text)); + }, + // Create nested svg document + nested: function() { + return this.put(new SVG.Nested()); + }, + // Create gradient element in defs + gradient: function(type, block) { + return this.defs().gradient(type, block); + }, + // Create pattern element in defs + pattern: function(width, height, block) { + return this.defs().pattern(width, height, block); + }, + // Create masking element + mask: function() { + return this.defs().put(new SVG.Mask()); + }, + // Get first child, skipping the defs node + first: function() { + return this.children()[0] instanceof SVG.Defs ? this.children()[1] : this.children()[0]; + }, + // Get the last child + last: function() { + return this.children()[this.children().length - 1]; + }, + // Remove all elements in this container + clear: function() { + this._children = []; + + while (this.node.hasChildNodes()) + this.node.removeChild(this.node.lastChild); + + return this; + } + + }); + SVG.FX = function FX(element) { /* store target element */ this.target = element; @@ -755,11 +755,8 @@ this.constructor.call(this, SVG.create('g')); }; - // Inherit from SVG.Element - SVG.G.prototype = new SVG.Element(); - - // Include the container object - SVG.extend(SVG.G, SVG.Container); + // Inherit from SVG.Container + SVG.G.prototype = new SVG.Container(); SVG.extend(SVG.G, { @@ -823,11 +820,8 @@ this.constructor.call(this, SVG.create('defs')); }; - // Inherits from SVG.Element - SVG.Defs.prototype = new SVG.Element(); - - // Include the container object - SVG.extend(SVG.Defs, SVG.Container); + // Inherits from SVG.Container + SVG.Defs.prototype = new SVG.Container(); SVG.Mask = function Mask() { this.constructor.call(this, SVG.create('mask')); @@ -836,11 +830,8 @@ this.attr('id', (this.id = 'svgjs_element_' + (SVG.did++))); }; - // Inherit from SVG.Element - SVG.Mask.prototype = new SVG.Element(); - - // Include the container object - SVG.extend(SVG.Mask, SVG.Container); + // Inherit from SVG.Container + SVG.Mask.prototype = new SVG.Container(); SVG.extend(SVG.Element, { @@ -858,11 +849,8 @@ this.attr('id', (this.id = 'svgjs_element_' + (SVG.did++))); }; - // Inherit from SVG.Element - SVG.Pattern.prototype = new SVG.Element(); - - // Include the container object - SVG.extend(SVG.Pattern, SVG.Container); + // Inherit from SVG.Container + SVG.Pattern.prototype = new SVG.Container(); // SVG.extend(SVG.Pattern, { @@ -904,11 +892,8 @@ this.type = type; }; - // Inherit from SVG.Element - SVG.Gradient.prototype = new SVG.Element(); - - // Include the container object - SVG.extend(SVG.Gradient, SVG.Container); + // Inherit from SVG.Container + SVG.Gradient.prototype = new SVG.Container(); // SVG.extend(SVG.Gradient, { @@ -1021,11 +1006,8 @@ this.stage(); }; - // Inherits from SVG.Element - SVG.Doc.prototype = new SVG.Element(); - - // Include the container object - SVG.extend(SVG.Doc, SVG.Container); + // Inherits from SVG.Container + SVG.Doc.prototype = new SVG.Container(); // Hack for safari preventing text to be rendered in one line. // Basically it sets the position of the svg node to absolute @@ -1357,11 +1339,8 @@ this.attr('overflow', 'visible'); }; - // Inherit from SVG.Element - SVG.Nested.prototype = new SVG.Element(); - - // Include the container object - SVG.extend(SVG.Nested, SVG.Container); + // Inherit from SVG.Container + SVG.Nested.prototype = new SVG.Container(); SVG._stroke = ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset']; SVG._fill = ['color', 'opacity', 'rule']; @@ -1418,10 +1397,17 @@ }, // Opacity opacity: function(value) { - if (['rect', 'ellipse', 'polygon', 'path', 'polyline', 'line', 'text'].indexOf(this.type) > -1) - this.attr({ 'fill-opacity': value, 'stroke-opacity': value }); - else - this.attr('opacity', value); + if (['rect', 'ellipse', 'polygon', 'path', 'polyline', 'line', 'text'].indexOf(this.type) > -1) { + if (value == null) + return this.attr('fill-opacity'); + else + this.attr({ 'fill-opacity': value, 'stroke-opacity': value }); + } else { + if (value == null) + return this.attr('opacity'); + else + this.attr('opacity', value); + } return this; } |