fabric-rails 1.0.12 → 1.0.12.1

data/vendor/assets/javascripts/fabric/object_origin.mixin.js

@@ -0,0 +1,207 @@
+(function() {
+
+  var degreesToRadians = fabric.util.degreesToRadians;
+
+  fabric.util.object.extend(fabric.Object.prototype, /** @scope fabric.Object.prototype */ {
+
+    /**
+     * Translates the coordinates from origin to center coordinates (based on the object's dimensions)
+     * @method translateToCenterPoint
+     * @param {fabric.Point} point The point which corresponds to the originX and originY params
+     * @param {string} enum('left', 'center', 'right') Horizontal origin
+     * @param {string} enum('top', 'center', 'bottom') Vertical origin
+     * @return {fabric.Point}
+     */
+    translateToCenterPoint: function(point, originX, originY) {
+      var cx = point.x, cy = point.y;
+
+      if ( originX === "left" ) {
+        cx = point.x + this.getWidth() / 2;
+      }
+      else if ( originX === "right" ) {
+        cx = point.x - this.getWidth() / 2;
+      }
+
+      if ( originY === "top" ) {
+        cy = point.y + this.getHeight() / 2;
+      }
+      else if ( originY === "bottom" ) {
+        cy = point.y - this.getHeight() / 2;
+      }
+
+      // Apply the reverse rotation to the point (it's already scaled properly)
+      return fabric.util.rotatePoint(new fabric.Point(cx, cy), point, degreesToRadians(this.angle));
+    },
+
+    /**
+     * Translates the coordinates from center to origin coordinates (based on the object's dimensions)
+     * @method translateToOriginPoint
+     * @param {fabric.Point} point The point which corresponds to center of the object
+     * @param {string} enum('left', 'center', 'right') Horizontal origin
+     * @param {string} enum('top', 'center', 'bottom') Vertical origin
+     * @return {fabric.Point}
+     */
+    translateToOriginPoint: function(center, originX, originY) {
+      var x = center.x, y = center.y;
+
+      // Get the point coordinates
+      if ( originX === "left" ) {
+        x = center.x - this.getWidth() / 2;
+      }
+      else if ( originX === "right" ) {
+        x = center.x + this.getWidth() / 2;
+      }
+      if ( originY === "top" ) {
+        y = center.y - this.getHeight() / 2;
+      }
+      else if ( originY === "bottom" ) {
+        y = center.y + this.getHeight() / 2;
+      }
+
+      // Apply the rotation to the point (it's already scaled properly)
+      return fabric.util.rotatePoint(new fabric.Point(x, y), center, degreesToRadians(this.angle));
+    },
+
+    /**
+     * Returns the real center coordinates of the object
+     * @method getCenterPoint
+     * @return {fabric.Point}
+     */
+    getCenterPoint: function() {
+      return this.translateToCenterPoint(
+        new fabric.Point(this.left, this.top), this.originX, this.originY);
+    },
+
+    /**
+     * Returns the coordinates of the object based on center coordinates
+     * @method getOriginPoint
+     * @param {fabric.Point} point The point which corresponds to the originX and originY params
+     * @return {fabric.Point}
+     */
+    // getOriginPoint: function(center) {
+    //   return this.translateToOriginPoint(center, this.originX, this.originY);
+    // },
+
+    /**
+     * Returns the coordinates of the object as if it has a different origin
+     * @method getPointByOrigin
+     * @param {string} enum('left', 'center', 'right') Horizontal origin
+     * @param {string} enum('top', 'center', 'bottom') Vertical origin
+     * @return {fabric.Point}
+     */
+    // getPointByOrigin: function(originX, originY) {
+    //   var center = this.getCenterPoint();
+
+    //   return this.translateToOriginPoint(center, originX, originY);
+    // },
+
+    /**
+     * Returns the point in local coordinates
+     * @method toLocalPoint
+     * @param {fabric.Point} The point relative to the global coordinate system
+     * @return {fabric.Point}
+     */
+    toLocalPoint: function(point, originX, originY) {
+      var center = this.getCenterPoint();
+
+      var x, y;
+      if (originX !== undefined && originY !== undefined) {
+        if ( originX === "left" ) {
+          x = center.x - this.getWidth() / 2;
+        }
+        else if ( originX === "right" ) {
+          x = center.x + this.getWidth() / 2;
+        }
+        else {
+          x = center.x;
+        }
+
+        if ( originY === "top" ) {
+          y = center.y - this.getHeight() / 2;
+        }
+        else if ( originY === "bottom" ) {
+          y = center.y + this.getHeight() / 2;
+        }
+        else {
+          y = center.y;
+        }
+      }
+      else {
+        x = this.left;
+        y = this.top;
+      }
+
+      return fabric.util.rotatePoint(new fabric.Point(point.x, point.y), center, -degreesToRadians(this.angle)).subtractEquals(new fabric.Point(x, y));
+    },
+
+    /**
+     * Returns the point in global coordinates
+     * @method toGlobalPoint
+     * @param {fabric.Point} The point relative to the local coordinate system
+     * @return {fabric.Point}
+     */
+    // toGlobalPoint: function(point) {
+    //   return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top));
+    // },
+
+    /**
+     * Sets the position of the object taking into consideration the object's origin
+     * @method setPositionByOrigin
+     * @param {fabric.Point} point The new position of the object
+     * @param {string} enum('left', 'center', 'right') Horizontal origin
+     * @param {string} enum('top', 'center', 'bottom') Vertical origin
+     * @return {void}
+     */
+    setPositionByOrigin: function(pos, originX, originY) {
+      var center = this.translateToCenterPoint(pos, originX, originY);
+      var position = this.translateToOriginPoint(center, this.originX, this.originY);
+
+      this.set('left', position.x);
+      this.set('top', position.y);
+    },
+
+    /**
+     * @method adjustPosition
+     * @param {String} to One of left, center, right
+     */
+    adjustPosition: function(to) {
+
+      var angle = degreesToRadians(this.angle);
+
+      var hypotHalf = this.getWidth() / 2;
+      var xHalf = Math.cos(angle) * hypotHalf;
+      var yHalf = Math.sin(angle) * hypotHalf;
+
+      var hypotFull = this.getWidth();
+      var xFull = Math.cos(angle) * hypotFull;
+      var yFull = Math.sin(angle) * hypotFull;
+
+      if (this.originX === 'center' && to === 'left' ||
+          this.originX === 'right' && to === 'center') {
+        // move half left
+        this.left -= xHalf;
+        this.top -= yHalf;
+      }
+      else if (this.originX === 'left' && to === 'center' ||
+               this.originX === 'center' && to === 'right') {
+        // move half right
+        this.left += xHalf;
+        this.top += yHalf;
+      }
+      else if (this.originX === 'left' && to === 'right') {
+        // move full right
+        this.left += xFull;
+        this.top += yFull;
+      }
+      else if (this.originX === 'right' && to === 'left') {
+        // move full left
+        this.left -= xFull;
+        this.top -= yFull;
+      }
+
+      this.setCoords();
+      this.originX = to;
+    }
+  });
+
+})();

data/vendor/assets/javascripts/fabric/object_straightening.mixin.js

@@ -0,0 +1,94 @@
+fabric.util.object.extend(fabric.Object.prototype, /** @scope fabric.Object.prototype */ {
+
+  /**
+   * @private
+   * @method _getAngleValueForStraighten
+   * @return {Number} angle value
+   */
+  _getAngleValueForStraighten: function() {
+    var angle = this.getAngle() % 360;
+    if (angle > 0) {
+      return Math.round((angle-1)/90) * 90;
+    }
+    return Math.round(angle/90) * 90;
+  },
+
+  /**
+   * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer)
+   * @method straighten
+   * @return {fabric.Object} thisArg
+   * @chainable
+   */
+  straighten: function() {
+    this.setAngle(this._getAngleValueForStraighten());
+    return this;
+  },
+
+  /**
+   * Same as {@link fabric.Object.prototype.straghten} but with animation
+   * @method fxStraighten
+   * @param {Object} callbacks
+   *                  - onComplete: invoked on completion
+   *                  - onChange: invoked on every step of animation
+   *
+   * @return {fabric.Object} thisArg
+   * @chainable
+   */
+  fxStraighten: function(callbacks) {
+    callbacks = callbacks || { };
+
+    var empty = function() { },
+        onComplete = callbacks.onComplete || empty,
+        onChange = callbacks.onChange || empty,
+        _this = this;
+
+    fabric.util.animate({
+      startValue: this.get('angle'),
+      endValue: this._getAngleValueForStraighten(),
+      duration: this.FX_DURATION,
+      onChange: function(value) {
+        _this.setAngle(value);
+        onChange();
+      },
+      onComplete: function() {
+        _this.setCoords();
+        onComplete();
+      },
+      onStart: function() {
+        _this.setActive(false);
+      }
+    });
+
+    return this;
+  }
+});
+
+fabric.util.object.extend(fabric.StaticCanvas.prototype, {
+
+  /**
+   * Straightens object, then rerenders canvas
+   * @method straightenObject
+   * @param {fabric.Object} object Object to straighten
+   * @return {fabric.Canvas} thisArg
+   * @chainable
+   */
+  straightenObject: function (object) {
+    object.straighten();
+    this.renderAll();
+    return this;
+  },
+
+  /**
+   * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated
+   * @method fxStraightenObject
+   * @param {fabric.Object} object Object to straighten
+   * @return {fabric.Canvas} thisArg
+   * @chainable
+   */
+  fxStraightenObject: function (object) {
+    object.fxStraighten({
+      onChange: this.renderAll.bind(this)
+    });
+    return this;
+  }
+});

data/vendor/assets/javascripts/fabric/observable.mixin.js

@@ -0,0 +1,91 @@
+/**
+ * @namespace
+ */
+fabric.Observable = {
+
+  /**
+   * Observes specified event
+   * @method observe
+   * @depracated Since 0.8.34. Use `on` instead.
+   * @param {String} eventName
+   * @param {Function} handler
+   */
+  observe: function(eventName, handler) {
+    if (!this.__eventListeners) {
+      this.__eventListeners = { };
+    }
+    // one object with key/value pairs was passed
+    if (arguments.length === 1) {
+      for (var prop in eventName) {
+        this.on(prop, eventName[prop]);
+      }
+    }
+    else {
+      if (!this.__eventListeners[eventName]) {
+        this.__eventListeners[eventName] = [ ];
+      }
+      this.__eventListeners[eventName].push(handler);
+    }
+  },
+
+  /**
+   * Stops event observing for a particular event handler
+   * @method stopObserving
+   * @depracated Since 0.8.34. Use `off` instead.
+   * @param {String} eventName
+   * @param {Function} handler
+   */
+  stopObserving: function(eventName, handler) {
+    if (!this.__eventListeners) {
+      this.__eventListeners = { };
+    }
+    if (this.__eventListeners[eventName]) {
+      if (handler) {
+        fabric.util.removeFromArray(this.__eventListeners[eventName], handler);
+      }
+      else {
+        this.__eventListeners[eventName].length = 0;
+      }
+    }
+  },
+
+  /**
+   * Fires event with an optional options object
+   * @deprecated since 1.0.7
+   * @method fire
+   * @param {String} eventName
+   * @param {Object} [options]
+   */
+  fire: function(eventName, options) {
+    if (!this.__eventListeners) {
+      this.__eventListeners = { };
+    }
+    var listenersForEvent = this.__eventListeners[eventName];
+    if (!listenersForEvent) return;
+    for (var i = 0, len = listenersForEvent.length; i < len; i++) {
+      // avoiding try/catch for perf. reasons
+      listenersForEvent[i](options || { });
+    }
+  }
+};
+
+/**
+ * Alias for observe
+ * @method observe
+ * @type function
+ */
+fabric.Observable.on = fabric.Observable.observe;
+
+/**
+ * Alias for stopObserving
+ * @method off
+ * @type function
+ */
+fabric.Observable.off = fabric.Observable.stopObserving;
+
+/**
+ * Alias for fire
+ * @method trigger
+ * @type function
+ */
+fabric.Observable.trigger = fabric.Observable.fire;

data/vendor/assets/javascripts/fabric/parser.js

@@ -0,0 +1,750 @@
+(function(global) {
+
+  "use strict";
+
+  /**
+   * @name fabric
+   * @namespace
+   */
+
+  var fabric = global.fabric || (global.fabric = { }),
+      extend = fabric.util.object.extend,
+      capitalize = fabric.util.string.capitalize,
+      clone = fabric.util.object.clone;
+
+  var attributesMap = {
+    'cx':               'left',
+    'x':                'left',
+    'cy':               'top',
+    'y':                'top',
+    'r':                'radius',
+    'fill-opacity':     'opacity',
+    'fill-rule':        'fillRule',
+    'stroke-width':     'strokeWidth',
+    'transform':        'transformMatrix',
+    'text-decoration':  'textDecoration',
+    'font-size':        'fontSize',
+    'font-weight':      'fontWeight',
+    'font-style':       'fontStyle',
+    'font-family':      'fontFamily'
+  };
+
+  function normalizeAttr(attr) {
+    // transform attribute names
+    if (attr in attributesMap) {
+      return attributesMap[attr];
+    }
+    return attr;
+  }
+
+  /**
+   * Returns an object of attributes' name/value, given element and an array of attribute names;
+   * Parses parent "g" nodes recursively upwards.
+   * @static
+   * @memberOf fabric
+   * @method parseAttributes
+   * @param {DOMElement} element Element to parse
+   * @param {Array} attributes Array of attributes to parse
+   * @return {Object} object containing parsed attributes' names/values
+   */
+  function parseAttributes(element, attributes) {
+
+    if (!element) {
+      return;
+    }
+
+    var value,
+        parsed,
+        parentAttributes = { };
+
+    // if there's a parent container (`g` node), parse its attributes recursively upwards
+    if (element.parentNode && /^g$/i.test(element.parentNode.nodeName)) {
+      parentAttributes = fabric.parseAttributes(element.parentNode, attributes);
+    }
+
+    var ownAttributes = attributes.reduce(function(memo, attr) {
+      value = element.getAttribute(attr);
+      parsed = parseFloat(value);
+      if (value) {
+        // "normalize" attribute values
+        if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
+          value = '';
+        }
+        if (attr === 'fill-rule') {
+          value = (value === 'evenodd') ? 'destination-over' : value;
+        }
+        if (attr === 'transform') {
+          value = fabric.parseTransformAttribute(value);
+        }
+        attr = normalizeAttr(attr);
+        memo[attr] = isNaN(parsed) ? value : parsed;
+      }
+      return memo;
+    }, { });
+
+    // add values parsed from style, which take precedence over attributes
+    // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes)
+
+    ownAttributes = extend(ownAttributes, extend(getGlobalStylesForElement(element), fabric.parseStyleAttribute(element)));
+    return extend(parentAttributes, ownAttributes);
+  }
+
+  /**
+   * Parses "transform" attribute, returning an array of values
+   * @static
+   * @function
+   * @memberOf fabric
+   * @method parseTransformAttribute
+   * @param attributeValue {String} string containing attribute value
+   * @return {Array} array of 6 elements representing transformation matrix
+   */
+  fabric.parseTransformAttribute = (function() {
+    function rotateMatrix(matrix, args) {
+      var angle = args[0];
+
+      matrix[0] = Math.cos(angle);
+      matrix[1] = Math.sin(angle);
+      matrix[2] = -Math.sin(angle);
+      matrix[3] = Math.cos(angle);
+    }
+
+    function scaleMatrix(matrix, args) {
+      var multiplierX = args[0],
+          multiplierY = (args.length === 2) ? args[1] : args[0];
+
+      matrix[0] = multiplierX;
+      matrix[3] = multiplierY;
+    }
+
+    function skewXMatrix(matrix, args) {
+      matrix[2] = args[0];
+    }
+
+    function skewYMatrix(matrix, args) {
+      matrix[1] = args[0];
+    }
+
+    function translateMatrix(matrix, args) {
+      matrix[4] = args[0];
+      if (args.length === 2) {
+        matrix[5] = args[1];
+      }
+    }
+
+    // identity matrix
+    var iMatrix = [
+          1, // a
+          0, // b
+          0, // c
+          1, // d
+          0, // e
+          0  // f
+        ],
+
+        // == begin transform regexp
+        number = '(?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)',
+        comma_wsp = '(?:\\s+,?\\s*|,\\s*)',
+
+        skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))',
+        skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))',
+        rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + comma_wsp + '(' + number + ')' + comma_wsp + '(' + number + '))?\\s*\\))',
+        scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + comma_wsp + '(' + number + '))?\\s*\\))',
+        translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + comma_wsp + '(' + number + '))?\\s*\\))',
+
+        matrix = '(?:(matrix)\\s*\\(\\s*' +
+                  '(' + number + ')' + comma_wsp +
+                  '(' + number + ')' + comma_wsp +
+                  '(' + number + ')' + comma_wsp +
+                  '(' + number + ')' + comma_wsp +
+                  '(' + number + ')' + comma_wsp +
+                  '(' + number + ')' +
+                  '\\s*\\))',
+
+        transform = '(?:' +
+                    matrix + '|' +
+                    translate + '|' +
+                    scale + '|' +
+                    rotate + '|' +
+                    skewX + '|' +
+                    skewY +
+                    ')',
+
+        transforms = '(?:' + transform + '(?:' + comma_wsp + transform + ')*' + ')',
+
+        transform_list = '^\\s*(?:' + transforms + '?)\\s*$',
+
+        // http://www.w3.org/TR/SVG/coords.html#TransformAttribute
+        reTransformList = new RegExp(transform_list),
+        // == end transform regexp
+
+        reTransform = new RegExp(transform);
+
+    return function(attributeValue) {
+
+      // start with identity matrix
+      var matrix = iMatrix.concat();
+
+      // return if no argument was given or
+      // an argument does not match transform attribute regexp
+      if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) {
+        return matrix;
+      }
+
+      attributeValue.replace(reTransform, function(match) {
+
+        var m = new RegExp(transform).exec(match).filter(function (match) {
+              return (match !== '' && match != null);
+            }),
+            operation = m[1],
+            args = m.slice(2).map(parseFloat);
+
+        switch(operation) {
+          case 'translate':
+            translateMatrix(matrix, args);
+            break;
+          case 'rotate':
+            rotateMatrix(matrix, args);
+            break;
+          case 'scale':
+            scaleMatrix(matrix, args);
+            break;
+          case 'skewX':
+            skewXMatrix(matrix, args);
+            break;
+          case 'skewY':
+            skewYMatrix(matrix, args);
+            break;
+          case 'matrix':
+            matrix = args;
+            break;
+        }
+      });
+      return matrix;
+    };
+  })();
+
+  /**
+   * Parses "points" attribute, returning an array of values
+   * @static
+   * @memberOf fabric
+   * @method parsePointsAttribute
+   * @param points {String} points attribute string
+   * @return {Array} array of points
+   */
+  function parsePointsAttribute(points) {
+
+    // points attribute is required and must not be empty
+    if (!points) return null;
+
+    points = points.trim();
+    var asPairs = points.indexOf(',') > -1;
+
+    points = points.split(/\s+/);
+    var parsedPoints = [ ], i, len;
+
+    // points could look like "10,20 30,40" or "10 20 30 40"
+    if (asPairs) {
+      i = 0;
+      len = points.length;
+      for (; i < len; i++) {
+        var pair = points[i].split(',');
+        parsedPoints.push({ x: parseFloat(pair[0]), y: parseFloat(pair[1]) });
+      }
+    }
+    else {
+      i = 0;
+      len = points.length;
+      for (; i < len; i+=2) {
+        parsedPoints.push({ x: parseFloat(points[i]), y: parseFloat(points[i+1]) });
+      }
+    }
+
+    // odd number of points is an error
+    if (parsedPoints.length % 2 !== 0) {
+      // return null;
+    }
+
+    return parsedPoints;
+  }
+
+  /**
+   * Parses "style" attribute, retuning an object with values
+   * @static
+   * @memberOf fabric
+   * @method parseStyleAttribute
+   * @param {SVGElement} element Element to parse
+   * @return {Object} Objects with values parsed from style attribute of an element
+   */
+  function parseStyleAttribute(element) {
+    var oStyle = { },
+        style = element.getAttribute('style');
+
+    if (!style) return oStyle;
+
+    if (typeof style === 'string') {
+      style = style.replace(/;$/, '').split(';').forEach(function (current) {
+
+        var attr = current.split(':');
+        var value = attr[1].trim();
+
+        // TODO: need to normalize em, %, pt, etc. to px (!)
+        var parsed = parseFloat(value);
+
+        oStyle[normalizeAttr(attr[0].trim().toLowerCase())] = isNaN(parsed) ? value : parsed;
+      });
+    }
+    else {
+      for (var prop in style) {
+        if (typeof style[prop] === 'undefined') continue;
+
+        var parsed = parseFloat(style[prop]);
+        oStyle[normalizeAttr(prop.toLowerCase())] = isNaN(parsed) ? style[prop] : parsed;
+      }
+    }
+
+    return oStyle;
+  }
+
+  function resolveGradients(instances) {
+    for (var i = instances.length; i--; ) {
+      var instanceFillValue = instances[i].get('fill');
+
+      if (/^url\(/.test(instanceFillValue)) {
+
+        var gradientId = instanceFillValue.slice(5, instanceFillValue.length - 1);
+
+        if (fabric.gradientDefs[gradientId]) {
+          instances[i].set('fill',
+            fabric.Gradient.fromElement(fabric.gradientDefs[gradientId], instances[i]));
+        }
+      }
+    }
+  }
+
+  /**
+   * Transforms an array of svg elements to corresponding fabric.* instances
+   * @static
+   * @memberOf fabric
+   * @method parseElements
+   * @param {Array} elements Array of elements to parse
+   * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements)
+   * @param {Object} [options] Options object
+   * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+   */
+  function parseElements(elements, callback, options, reviver) {
+    var instances = new Array(elements.length), i = elements.length;
+
+    function checkIfDone() {
+      if (--i === 0) {
+        instances = instances.filter(function(el) {
+          return el != null;
+        });
+        resolveGradients(instances);
+        callback(instances);
+      }
+    }
+
+    for (var index = 0, el, len = elements.length; index < len; index++) {
+      el = elements[index];
+      var klass = fabric[capitalize(el.tagName)];
+      if (klass && klass.fromElement) {
+        try {
+          if (klass.async) {
+            klass.fromElement(el, (function(index, el) {
+              return function(obj) {
+                reviver && reviver(el, obj);
+                instances.splice(index, 0, obj);
+                checkIfDone();
+              };
+            })(index), options);
+          }
+          else {
+            var obj = klass.fromElement(el, options);
+            reviver && reviver(el, obj);
+            instances.splice(index, 0, obj);
+            checkIfDone();
+          }
+        }
+        catch(err) {
+          fabric.log(err);
+        }
+      }
+      else {
+        checkIfDone();
+      }
+    }
+  }
+
+  /**
+   * Returns CSS rules for a given SVG document
+   * @static
+   * @function
+   * @memberOf fabric
+   * @method getCSSRules
+   * @param {SVGDocument} doc SVG document to parse
+   * @return {Object} CSS rules of this document
+   */
+  function getCSSRules(doc) {
+    var styles = doc.getElementsByTagName('style'),
+        allRules = { },
+        rules;
+
+    // very crude parsing of style contents
+    for (var i = 0, len = styles.length; i < len; i++) {
+      var styleContents = styles[0].textContent;
+
+      // remove comments
+      styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, '');
+
+      rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g);
+      rules = rules.map(function(rule) { return rule.trim(); });
+
+      rules.forEach(function(rule) {
+        var match = rule.match(/([\s\S]*?)\s*\{([^}]*)\}/);
+        rule = match[1];
+        var declaration = match[2].trim(),
+            propertyValuePairs = declaration.replace(/;$/, '').split(/\s*;\s*/);
+
+        if (!allRules[rule]) {
+          allRules[rule] = { };
+        }
+
+        for (var i = 0, len = propertyValuePairs.length; i < len; i++) {
+          var pair = propertyValuePairs[i].split(/\s*:\s*/),
+              property = pair[0],
+              value = pair[1];
+
+          allRules[rule][property] = value;
+        }
+      });
+    }
+
+    return allRules;
+  }
+
+  /**
+   * @private
+   */
+  function getGlobalStylesForElement(element) {
+    var nodeName = element.nodeName,
+        className = element.getAttribute('class'),
+        id = element.getAttribute('id'),
+        styles = { };
+
+    for (var rule in fabric.cssRules) {
+      var ruleMatchesElement = (className && new RegExp('^\\.' + className).test(rule)) ||
+                               (id && new RegExp('^#' + id).test(rule)) ||
+                               (new RegExp('^' + nodeName).test(rule));
+
+      if (ruleMatchesElement) {
+        for (var property in fabric.cssRules[rule]) {
+          styles[property] = fabric.cssRules[rule][property];
+        }
+      }
+    }
+
+    return styles;
+  }
+
+  /**
+   * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
+   * @static
+   * @function
+   * @memberOf fabric
+   * @method parseSVGDocument
+   * @param {SVGDocument} doc SVG document to parse
+   * @param {Function} callback Callback to call when parsing is finished; It's being passed an array of elements (parsed from a document).
+   * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+   */
+  fabric.parseSVGDocument = (function() {
+
+    var reAllowedSVGTagNames = /^(path|circle|polygon|polyline|ellipse|rect|line|image|text)$/;
+
+    // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
+    // \d doesn't quite cut it (as we need to match an actual float number)
+
+    // matches, e.g.: +14.56e-12, etc.
+    var reNum = '(?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)';
+
+    var reViewBoxAttrValue = new RegExp(
+      '^' +
+      '\\s*(' + reNum + '+)\\s*,?' +
+      '\\s*(' + reNum + '+)\\s*,?' +
+      '\\s*(' + reNum + '+)\\s*,?' +
+      '\\s*(' + reNum + '+)\\s*' +
+      '$'
+    );
+
+    function hasAncestorWithNodeName(element, nodeName) {
+      while (element && (element = element.parentNode)) {
+        if (nodeName.test(element.nodeName)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    return function(doc, callback, reviver) {
+      if (!doc) return;
+
+      var startTime = new Date(),
+          descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
+
+      if (descendants.length === 0) {
+        // we're likely in node, where "o3-xml" library fails to gEBTN("*")
+        // https://github.com/ajaxorg/node-o3-xml/issues/21
+        descendants = doc.selectNodes("//*[name(.)!='svg']");
+        var arr = [ ];
+        for (var i = 0, len = descendants.length; i < len; i++) {
+          arr[i] = descendants[i];
+        }
+        descendants = arr;
+      }
+
+      var elements = descendants.filter(function(el) {
+        return reAllowedSVGTagNames.test(el.tagName) &&
+              !hasAncestorWithNodeName(el, /^(?:pattern|defs)$/); // http://www.w3.org/TR/SVG/struct.html#DefsElement
+      });
+
+      if (!elements || (elements && !elements.length)) return;
+
+      var viewBoxAttr = doc.getAttribute('viewBox'),
+          widthAttr = doc.getAttribute('width'),
+          heightAttr = doc.getAttribute('height'),
+          width = null,
+          height = null,
+          minX,
+          minY;
+
+      if (viewBoxAttr && (viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))) {
+        minX = parseInt(viewBoxAttr[1], 10);
+        minY = parseInt(viewBoxAttr[2], 10);
+        width = parseInt(viewBoxAttr[3], 10);
+        height = parseInt(viewBoxAttr[4], 10);
+      }
+
+      // values of width/height attributes overwrite those extracted from viewbox attribute
+      width = widthAttr ? parseFloat(widthAttr) : width;
+      height = heightAttr ? parseFloat(heightAttr) : height;
+
+      var options = {
+        width: width,
+        height: height
+      };
+
+      fabric.gradientDefs = fabric.getGradientDefs(doc);
+      fabric.cssRules = getCSSRules(doc);
+
+      // Precedence of rules:   style > class > attribute
+
+      fabric.parseElements(elements, function(instances) {
+        fabric.documentParsingTime = new Date() - startTime;
+        if (callback) {
+          callback(instances, options);
+        }
+      }, clone(options), reviver);
+    };
+  })();
+
+  /**
+    * Used for caching SVG documents (loaded via `fabric.Canvas#loadSVGFromURL`)
+    * @property
+    * @namespace
+    */
+   var svgCache = {
+
+     /**
+      * @method has
+      * @param {String} name
+      * @param {Function} callback
+      */
+     has: function (name, callback) {
+       callback(false);
+     },
+
+     /**
+      * @method get
+      * @param {String} url
+      * @param {Function} callback
+      */
+     get: function () {
+       /* NOOP */
+     },
+
+     /**
+      * @method set
+      * @param {String} url
+      * @param {Object} object
+      */
+     set: function () {
+       /* NOOP */
+     }
+   };
+
+   /**
+    * Takes url corresponding to an SVG document, and parses it into a set of fabric objects
+    * @method loadSVGFromURL
+    * @memberof fabric
+    * @param {String} url
+    * @param {Function} callback
+    * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+    */
+   function loadSVGFromURL(url, callback, reviver) {
+
+     url = url.replace(/^\n\s*/, '').trim();
+
+     svgCache.has(url, function (hasUrl) {
+       if (hasUrl) {
+         svgCache.get(url, function (value) {
+           var enlivedRecord = _enlivenCachedObject(value);
+           callback(enlivedRecord.objects, enlivedRecord.options);
+         });
+       }
+       else {
+         new fabric.util.request(url, {
+           method: 'get',
+           onComplete: onComplete
+         });
+       }
+     });
+
+     function onComplete(r) {
+
+       var xml = r.responseXML;
+       if (!xml.documentElement && fabric.window.ActiveXObject && r.responseText) {
+         xml = new ActiveXObject('Microsoft.XMLDOM');
+         xml.async = 'false';
+         //IE chokes on DOCTYPE
+         xml.loadXML(r.responseText.replace(/<!DOCTYPE[\s\S]*?(\[[\s\S]*\])*?>/i,''));
+       }
+       if (!xml.documentElement) return;
+
+       fabric.parseSVGDocument(xml.documentElement, function (results, options) {
+         svgCache.set(url, {
+           objects: fabric.util.array.invoke(results, 'toObject'),
+           options: options
+         });
+         callback(results, options);
+       }, reviver);
+     }
+   }
+
+  /**
+  * @method _enlivenCachedObject
+  */
+  function _enlivenCachedObject(cachedObject) {
+
+   var objects = cachedObject.objects,
+       options = cachedObject.options;
+
+   objects = objects.map(function (o) {
+     return fabric[capitalize(o.type)].fromObject(o);
+   });
+
+   return ({ objects: objects, options: options });
+  }
+
+  /**
+    * Takes string corresponding to an SVG document, and parses it into a set of fabric objects
+    * @method loadSVGFromString
+    * @memberof fabric
+    * @param {String} string
+    * @param {Function} callback
+    * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+    */
+  function loadSVGFromString(string, callback, reviver) {
+    string = string.trim();
+    var doc;
+    if (typeof DOMParser !== 'undefined') {
+      var parser = new DOMParser();
+      if (parser && parser.parseFromString) {
+        doc = parser.parseFromString(string, 'text/xml');
+      }
+    }
+    else if (fabric.window.ActiveXObject) {
+      doc = new ActiveXObject('Microsoft.XMLDOM');
+      doc.async = 'false';
+      //IE chokes on DOCTYPE
+      doc.loadXML(string.replace(/<!DOCTYPE[\s\S]*?(\[[\s\S]*\])*?>/i,''));
+    }
+
+    fabric.parseSVGDocument(doc.documentElement, function (results, options) {
+      callback(results, options);
+    }, reviver);
+  }
+
+  /**
+   * Creates markup containing SVG font faces
+   * @method createSVGFontFacesMarkup
+   * @param {Array} objects Array of fabric objects
+   * @return {String}
+   */
+  function createSVGFontFacesMarkup(objects) {
+    var markup = '';
+
+    for (var i = 0, len = objects.length; i < len; i++) {
+      if (objects[i].type !== 'text' || !objects[i].path) continue;
+
+      markup += [
+        '@font-face {',
+          'font-family: ', objects[i].fontFamily, '; ',
+          'src: url(\'', objects[i].path, '\')',
+        '}'
+      ].join('');
+    }
+
+    if (markup) {
+      markup = [
+        '<style type="text/css">',
+          '<![CDATA[',
+            markup,
+          ']]>',
+        '</style>'
+      ].join('');
+    }
+
+    return markup;
+  }
+
+  /**
+   * Creates markup containing SVG referenced elements like patterns, gradients etc.
+   * @method createSVGRefElementsMarkup
+   * @param {fabric.Canvas} canvas instance of fabric.Canvas
+   * @return {String}
+   */
+  function createSVGRefElementsMarkup(canvas) {
+    var markup = '';
+
+    if (canvas.backgroundColor && canvas.backgroundColor.source) {
+      markup = [
+        '<pattern x="0" y="0" id="backgroundColorPattern" ',
+          'width="', canvas.backgroundColor.source.width,
+          '" height="', canvas.backgroundColor.source.height,
+          '" patternUnits="userSpaceOnUse">',
+        '<image x="0" y="0" ',
+        'width="', canvas.backgroundColor.source.width,
+        '" height="', canvas.backgroundColor.source.height,
+        '" xlink:href="', canvas.backgroundColor.source.src,
+        '"></image></pattern>'
+      ].join('');
+    }
+
+    return markup;
+  }
+
+  extend(fabric, {
+
+    parseAttributes:            parseAttributes,
+    parseElements:              parseElements,
+    parseStyleAttribute:        parseStyleAttribute,
+    parsePointsAttribute:       parsePointsAttribute,
+    getCSSRules:                getCSSRules,
+
+    loadSVGFromURL:             loadSVGFromURL,
+    loadSVGFromString:          loadSVGFromString,
+
+    createSVGFontFacesMarkup:   createSVGFontFacesMarkup,
+    createSVGRefElementsMarkup: createSVGRefElementsMarkup
+  });
+
+})(typeof exports !== 'undefined' ? exports : this);