fabric-rails 1.0.12.1 → 1.2.1

data/vendor/assets/javascripts/fabric/shapes/text.cufon.js

@@ -0,0 +1,79 @@
+/**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+fabric.util.object.extend(fabric.Text.prototype, {
+  _renderViaCufon: function(ctx) {
+
+    var o = Cufon.textOptions || (Cufon.textOptions = { });
+
+    // export options to be used by cufon.js
+    o.left = this.left;
+    o.top = this.top;
+    o.context = ctx;
+    o.color = this.fill;
+
+    var el = this._initDummyElementForCufon();
+
+    // set "cursor" to top/left corner
+    this.transform(ctx);
+
+    // draw text
+    Cufon.replaceElement(el, {
+      engine: 'canvas',
+      separate: 'none',
+      fontFamily: this.fontFamily,
+      fontWeight: this.fontWeight,
+      textDecoration: this.textDecoration,
+      textShadow: this.textShadow,
+      textAlign: this.textAlign,
+      fontStyle: this.fontStyle,
+      lineHeight: this.lineHeight,
+      stroke: this.stroke,
+      strokeWidth: this.strokeWidth,
+      backgroundColor: this.backgroundColor,
+      textBackgroundColor: this.textBackgroundColor
+    });
+
+    // update width, height
+    this.width = o.width;
+    this.height = o.height;
+
+    this._totalLineHeight = o.totalLineHeight;
+    this._fontAscent = o.fontAscent;
+    this._boundaries = o.boundaries;
+    this._shadowOffsets = o.shadowOffsets;
+    this._shadows = o.shadows || [ ];
+
+    el = null;
+
+    // need to set coords _after_ the width/height was retreived from Cufon
+    this.setCoords();
+  },
+
+  /**
+   * @private
+   */
+  _initDummyElementForCufon: function() {
+    var el = fabric.document.createElement('pre'),
+        container = fabric.document.createElement('div');
+
+    // Cufon doesn't play nice with textDecoration=underline if element doesn't have a parent
+    container.appendChild(el);
+
+    if (typeof G_vmlCanvasManager === 'undefined') {
+      el.innerHTML = this.text;
+    }
+    else {
+      // IE 7 & 8 drop newlines and white space on text nodes
+      // see: http://web.student.tuwien.ac.at/~e0226430/innerHtmlQuirk.html
+      // see: http://www.w3schools.com/dom/dom_mozilla_vs_ie.asp
+      el.innerText =  this.text.replace(/\r?\n/gi, '\r');
+    }
+
+    el.style.fontSize = this.fontSize + 'px';
+    el.style.letterSpacing = 'normal';
+
+    return el;
+  }
+});

data/vendor/assets/javascripts/fabric/{triangle.class.js → shapes/triangle.class.js}

@@ -11,21 +11,21 @@
 
   /**
    * Triangle class
-   * @class Triangle
+   * @class fabric.Triangle
    * @extends fabric.Object
+   * @return {fabric.Triangle} thisArg
    */
-  fabric.Triangle = fabric.util.createClass(fabric.Object, /** @scope fabric.Triangle.prototype */ {
+  fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ {
 
     /**
      * Type of an object
-     * @property
      * @type String
+     * @default
      */
     type: 'triangle',
 
     /**
      * Constructor
-     * @method initialize
      * @param {Object} [options] Options object
      * @return {Object} thisArg
      */
@@ -40,7 +40,6 @@
 
     /**
      * @private
-     * @method _render
      * @param ctx {CanvasRenderingContext2D} Context to render on
      */
     _render: function(ctx) {
@@ -53,31 +52,33 @@
       ctx.lineTo(widthBy2, heightBy2);
       ctx.closePath();
 
-      if (this.fill) {
-        ctx.fill();
-      }
-      if (this.stroke) {
-        ctx.stroke();
-      }
+      this._renderFill(ctx);
+      this._renderStroke(ctx);
     },
 
     /**
-     * Returns complexity of an instance
-     * @method complexity
-     * @return {Number} complexity of this instance
+     * @private
+     * @param ctx {CanvasRenderingContext2D} Context to render on
      */
-    complexity: function() {
-      return 1;
+    _renderDashedStroke: function(ctx) {
+      var widthBy2 = this.width / 2,
+          heightBy2 = this.height / 2;
+
+      ctx.beginPath();
+      fabric.util.drawDashedLine(ctx, -widthBy2, heightBy2, 0, -heightBy2, this.strokeDashArray);
+      fabric.util.drawDashedLine(ctx, 0, -heightBy2, widthBy2, heightBy2, this.strokeDashArray);
+      fabric.util.drawDashedLine(ctx, widthBy2, heightBy2, -widthBy2, heightBy2, this.strokeDashArray);
+      ctx.closePath();
     },
 
+    /* _TO_SVG_START_ */
     /**
      * Returns SVG representation of an instance
-     * @method toSVG
      * @return {String} svg representation of an instance
      */
     toSVG: function() {
-
-      var widthBy2 = this.width / 2,
+      var markup = [],
+          widthBy2 = this.width / 2,
           heightBy2 = this.height / 2;
 
       var points = [
@@ -86,18 +87,37 @@
         widthBy2 + " " + heightBy2
       ].join(",");
 
-      return '<polygon ' +
-              'points="' + points + '" ' +
-              'style="' + this.getSvgStyles() + '" ' +
-              'transform="' + this.getSvgTransform() + '" ' +
-              '/>';
+      if (this.fill && this.fill.toLive) {
+        markup.push(this.fill.toSVG(this, true));
+      }
+      if (this.stroke && this.stroke.toLive) {
+        markup.push(this.stroke.toSVG(this, true));
+      }
+
+      markup.push(
+        '<polygon ',
+          'points="', points,
+          '" style="', this.getSvgStyles(),
+          '" transform="', this.getSvgTransform(),
+        '"/>'
+      );
+
+      return markup.join('');
+    },
+    /* _TO_SVG_END_ */
+
+    /**
+     * Returns complexity of an instance
+     * @return {Number} complexity of this instance
+     */
+    complexity: function() {
+      return 1;
     }
   });
 
   /**
    * Returns fabric.Triangle instance from an object representation
    * @static
-   * @method Canvas.Trangle.fromObject
    * @param object {Object} object to create an instance from
    * @return {Object} instance of Canvas.Triangle
    */
@@ -105,4 +125,4 @@
     return new fabric.Triangle(object);
   };
 
-})(typeof exports !== 'undefined' ? exports : this);
+})(typeof exports !== 'undefined' ? exports : this);

data/vendor/assets/javascripts/fabric/static_canvas.class.js

@@ -19,8 +19,12 @@
    * Static canvas class
    * @class fabric.StaticCanvas
    * @constructor
+   *
    * @param {HTMLElement | String} el <canvas> element to initialize instance on
    * @param {Object} [options] Options object
+   *
+   * @extends fabric.Collection
+   * @extends fabric.Observable
    */
   fabric.StaticCanvas = function (el, options) {
     options || (options = { });
@@ -30,71 +34,64 @@
   };
 
   extend(fabric.StaticCanvas.prototype, fabric.Observable);
+  extend(fabric.StaticCanvas.prototype, fabric.Collection);
+  extend(fabric.StaticCanvas.prototype, fabric.DataURLExporter);
 
-  extend(fabric.StaticCanvas.prototype, /** @scope fabric.StaticCanvas.prototype */ {
+  extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
 
     /**
      * Background color of canvas instance
-     * @property
      * @type String
      */
     backgroundColor: '',
 
     /**
      * Background image of canvas instance
-     * Should be set via `setBackgroundImage`
-     * @property
+     * Should be set via {@link fabric.StaticCanvas#setBackgroundImage}
      * @type String
      */
     backgroundImage: '',
 
     /**
      * Opacity of the background image of the canvas instance
-     * @property
      * @type Float
      */
-    backgroundImageOpacity: 1.0,
+    backgroundImageOpacity: 1,
 
     /**
      * Indicates whether the background image should be stretched to fit the
      * dimensions of the canvas instance.
-     * @property
      * @type Boolean
      */
     backgroundImageStretch: true,
 
     /**
      * Overlay image of canvas instance
-     * Should be set via `setOverlayImage`
-     * @property
+     * Should be set via {@link fabric.StaticCanvas#setOverlayImage}
      * @type String
      */
     overlayImage: '',
 
     /**
      * Left offset of overlay image (if present)
-     * @property
      * @type Number
      */
     overlayImageLeft: 0,
 
     /**
      * Top offset of overlay image (if present)
-     * @property
      * @type Number
      */
     overlayImageTop: 0,
 
     /**
      * Indicates whether toObject/toDatalessObject should include default values
-     * @property
      * @type Boolean
      */
     includeDefaultValues: true,
 
     /**
      * Indicates whether objects' state should be saved
-     * @property
      * @type Boolean
      */
     stateful: true,
@@ -103,29 +100,25 @@
      * Indicates whether {@link fabric.Canvas.prototype.add} should also re-render canvas.
      * Disabling this option could give a great performance boost when adding a lot of objects to canvas at once
      * (followed by a manual rendering after addition)
-     * @property
      * @type Boolean
      */
     renderOnAddition: true,
 
     /**
      * Function that determines clipping of entire canvas area
-     * Being passed context as first argument. See clipping canvas area in https://github.com/kangax/fabric.js/wiki/FAQ
-     * @property
+     * Being passed context as first argument. See clipping canvas area in {@link https://github.com/kangax/fabric.js/wiki/FAQ}
      * @type Function
      */
     clipTo: null,
 
     /**
      * Indicates whether object controls (borders/controls) are rendered above overlay image
-     * @property
      * @type Boolean
      */
     controlsAboveOverlay: false,
 
     /**
      * Callback; invoked right before object is about to be scaled/rotated
-     * @method onBeforeScaleRotate
      * @param {fabric.Object} target Object that's about to be scaled/rotated
      */
     onBeforeScaleRotate: function () {
@@ -133,7 +126,6 @@
     },
 
      /**
-      * @method _initStatic
       * @private
       */
     _initStatic: function(el, options) {
@@ -157,7 +149,6 @@
     /**
      * Calculates canvas element offset relative to the document
      * This method is also attached as "resize" event handler of window
-     * @method calcOffset
      * @return {fabric.Canvas} instance
      * @chainable
      */
@@ -168,7 +159,6 @@
 
     /**
      * Sets overlay image for this canvas
-     * @method setOverlayImage
      * @param {String} url url of an image to set overlay to
      * @param {Function} callback callback to invoke when image is loaded and set as an overlay
      * @param {Object} [options] optional options to set for the overlay image
@@ -192,7 +182,6 @@
 
     /**
      * Sets background image for this canvas
-     * @method setBackgroundImage
      * @param {String} url url of an image to set background to
      * @param {Function} callback callback to invoke when image is loaded and set as background
      * @param {Object} [options] optional options to set for the background image
@@ -216,7 +205,6 @@
 
     /**
      * Sets background color for this canvas
-     * @method setBackgroundColor
      * @param {String|fabric.Pattern} Color of pattern to set background color to
      * @param {Function} callback callback to invoke when background color is set
      * @return {fabric.Canvas} thisArg
@@ -243,7 +231,6 @@
 
     /**
      * @private
-     * @method _createCanvasElement
      */
     _createCanvasElement: function() {
       var element = fabric.document.createElement('canvas');
@@ -258,7 +245,7 @@
     },
 
     /**
-     * @method _initCanvasElement
+     * @private
      * @param {HTMLElement} element
      */
     _initCanvasElement: function(element) {
@@ -270,7 +257,7 @@
     },
 
     /**
-     * @method _initOptions
+     * @private
      * @param {Object} [options]
      */
     _initOptions: function (options) {
@@ -289,7 +276,7 @@
 
     /**
      * Creates a bottom canvas
-     * @method _createLowerCanvas
+     * @private
      */
     _createLowerCanvas: function (canvasEl) {
       this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement();
@@ -306,7 +293,6 @@
 
     /**
      * Returns canvas width (in px)
-     * @method getWidth
      * @return {Number}
      */
     getWidth: function () {
@@ -315,7 +301,6 @@
 
     /**
      * Returns canvas height (in px)
-     * @method getHeight
      * @return {Number}
      */
     getHeight: function () {
@@ -324,7 +309,6 @@
 
     /**
      * Sets width of this canvas instance
-     * @method setWidth
      * @param {Number} width value to set width to
      * @return {fabric.Canvas} instance
      * @chainable true
@@ -335,7 +319,6 @@
 
     /**
      * Sets height of this canvas instance
-     * @method setHeight
      * @param {Number} height value to set height to
      * @return {fabric.Canvas} instance
      * @chainable true
@@ -346,7 +329,6 @@
 
     /**
      * Sets dimensions (width, height) of this canvas instance
-     * @method setDimensions
      * @param {Object} dimensions
      * @return {fabric.Canvas} thisArg
      * @chainable
@@ -361,7 +343,6 @@
     /**
      * Helper for setting width/height
      * @private
-     * @method _setDimensions
      * @param {String} prop property (width|height)
      * @param {Number} value value to set property to
      * @return {fabric.Canvas} instance
@@ -394,7 +375,6 @@
 
     /**
      * Returns <canvas> element corresponding to this instance
-     * @method getElement
      * @return {HTMLCanvasElement}
      */
     getElement: function () {
@@ -403,7 +383,6 @@
 
     /**
      * Returns currently selected object, if any
-     * @method getActiveObject
      * @return {fabric.Object}
      */
     getActiveObject: function() {
@@ -412,7 +391,6 @@
 
     /**
      * Returns currently selected group of object, if any
-     * @method getActiveGroup
      * @return {fabric.Group}
      */
     getActiveGroup: function() {
@@ -440,28 +418,10 @@
       }
     },
 
-    /**
-     * Adds objects to canvas, then renders canvas (if `renderOnAddition` is not `false`).
-     * Objects should be instances of (or inherit from) fabric.Object
-     * @method add
-     * @param [...] Zero or more fabric instances
-     * @return {fabric.Canvas} thisArg
-     * @chainable
-     */
-    add: function () {
-      this._objects.push.apply(this._objects, arguments);
-      for (var i = arguments.length; i--; ) {
-        this._initObject(arguments[i]);
-      }
-      this.renderOnAddition && this.renderAll();
-      return this;
-    },
-
     /**
      * @private
-     * @method _initObject
      */
-    _initObject: function(obj) {
+    _onObjectAdded: function(obj) {
       this.stateful && obj.setupState();
       obj.setCoords();
       obj.canvas = this;
@@ -470,30 +430,15 @@
     },
 
     /**
-     * Inserts an object to canvas at specified index and renders canvas.
-     * An object should be an instance of (or inherit from) fabric.Object
-     * @method insertAt
-     * @param object {Object} Object to insert
-     * @param index {Number} index to insert object at
-     * @param nonSplicing {Boolean} when `true`, no splicing (shifting) of objects occurs
-     * @return {fabric.Canvas} thisArg
-     * @chainable
+     * @private
      */
-    insertAt: function (object, index, nonSplicing) {
-      if (nonSplicing) {
-        this._objects[index] = object;
-      }
-      else {
-        this._objects.splice(index, 0, object);
-      }
-      this._initObject(object);
-      this.renderOnAddition && this.renderAll();
-      return this;
+    _onObjectRemoved: function(obj) {
+      this.fire('object:removed', { target: obj });
+      obj.fire('removed');
     },
 
     /**
      * Returns an array of objects this instance has
-     * @method getObjects
      * @return {Array}
      */
     getObjects: function () {
@@ -502,7 +447,6 @@
 
     /**
      * Clears specified context of canvas element
-     * @method clearContext
      * @param context {Object} ctx context to clear
      * @return {fabric.Canvas} thisArg
      * @chainable
@@ -514,7 +458,6 @@
 
     /**
      * Returns context of canvas where objects are drawn
-     * @method getContext
      * @return {CanvasRenderingContext2D}
      */
     getContext: function () {
@@ -523,7 +466,6 @@
 
     /**
      * Clears all contexts (background, main, top) of an instance
-     * @method clear
      * @return {fabric.Canvas} thisArg
      * @chainable
      */
@@ -532,6 +474,9 @@
       if (this.discardActiveGroup) {
         this.discardActiveGroup();
       }
+      if (this.discardActiveObject) {
+        this.discardActiveObject();
+      }
       this.clearContext(this.contextContainer);
       if (this.contextTop) {
         this.clearContext(this.contextTop);
@@ -543,7 +488,6 @@
 
     /**
      * Renders both the top canvas and the secondary container canvas.
-     * @method renderAll
      * @param allOnTop {Boolean} optional Whether we want to force all images to be rendered on the top canvas
      * @return {fabric.Canvas} instance
      * @chainable
@@ -552,7 +496,7 @@
 
       var canvasToDrawOn = this[(allOnTop === true && this.interactive) ? 'contextTop' : 'contextContainer'];
 
-      if (this.contextTop && this.selection) {
+      if (this.contextTop && this.selection && !this._groupSelector) {
         this.clearContext(this.contextTop);
       }
 
@@ -563,7 +507,7 @@
       this.fire('before:render');
 
       if (this.clipTo) {
-        this._clipCanvas(canvasToDrawOn);
+        fabric.util.clipContext(this, canvasToDrawOn);
       }
 
       if (this.backgroundColor) {
@@ -571,7 +515,11 @@
           ? this.backgroundColor.toLive(canvasToDrawOn)
           : this.backgroundColor;
 
-        canvasToDrawOn.fillRect(0, 0, this.width, this.height);
+        canvasToDrawOn.fillRect(
+          this.backgroundColor.offsetX || 0,
+          this.backgroundColor.offsetY || 0,
+          this.width,
+          this.height);
       }
 
       if (typeof this.backgroundImage === 'object') {
@@ -607,7 +555,7 @@
         canvasToDrawOn.drawImage(this.overlayImage, this.overlayImageLeft, this.overlayImageTop);
       }
 
-      if (this.controlsAboveOverlay) {
+      if (this.controlsAboveOverlay && this.interactive) {
         this.drawControls(canvasToDrawOn);
       }
 
@@ -618,18 +566,6 @@
 
     /**
      * @private
-     * @method _clipCanvas
-     */
-    _clipCanvas: function(canvasToDrawOn) {
-      canvasToDrawOn.save();
-      canvasToDrawOn.beginPath();
-      this.clipTo(canvasToDrawOn);
-      canvasToDrawOn.clip();
-    },
-
-    /**
-     * @private
-     * @method _drawBackroundImage
      */
     _drawBackroundImage: function(canvasToDrawOn) {
       canvasToDrawOn.save();
@@ -647,7 +583,6 @@
     /**
      * Method to render only the top canvas.
      * Also used to render the group selection box.
-     * @method renderTop
      * @return {fabric.Canvas} thisArg
      * @chainable
      */
@@ -676,143 +611,9 @@
       return this;
     },
 
-    /**
-     * Draws objects' controls (borders/controls)
-     * @method drawControls
-     * @param {Object} ctx context to render controls on
-     */
-    drawControls: function(ctx) {
-      var activeGroup = this.getActiveGroup();
-      if (activeGroup) {
-        ctx.save();
-        fabric.Group.prototype.transform.call(activeGroup, ctx);
-        activeGroup.drawBorders(ctx).drawControls(ctx);
-        ctx.restore();
-      }
-      else {
-        for (var i = 0, len = this._objects.length; i < len; ++i) {
-          if (!this._objects[i] || !this._objects[i].active) continue;
-
-          ctx.save();
-          fabric.Object.prototype.transform.call(this._objects[i], ctx);
-          this._objects[i].drawBorders(ctx).drawControls(ctx);
-          ctx.restore();
-
-          this.lastRenderedObjectWithControlsAboveOverlay = this._objects[i];
-        }
-      }
-    },
-
-    /**
-     * Exports canvas element to a dataurl image.
-     * @method toDataURL
-     * @param {String} format the format of the output image. Either "jpeg" or "png".
-     * @param {Number} quality quality level (0..1)
-     * @return {String}
-     */
-    toDataURL: function (format, quality) {
-      var canvasEl = this.upperCanvasEl || this.lowerCanvasEl;
-
-      this.renderAll(true);
-      var data = (fabric.StaticCanvas.supports('toDataURLWithQuality'))
-                   ? canvasEl.toDataURL('image/' + format, quality)
-                   : canvasEl.toDataURL('image/' + format);
-
-      this.contextTop && this.clearContext(this.contextTop);
-      this.renderAll();
-      return data;
-    },
-
-    /**
-     * Exports canvas element to a dataurl image (allowing to change image size via multiplier).
-     * @method toDataURLWithMultiplier
-     * @param {String} format (png|jpeg)
-     * @param {Number} multiplier
-     * @param {Number} quality (0..1)
-     * @return {String}
-     */
-    toDataURLWithMultiplier: function (format, multiplier, quality) {
-
-      var origWidth = this.getWidth(),
-          origHeight = this.getHeight(),
-          scaledWidth = origWidth * multiplier,
-          scaledHeight = origHeight * multiplier,
-          activeObject = this.getActiveObject(),
-          activeGroup = this.getActiveGroup(),
-
-          ctx = this.contextTop || this.contextContainer;
-
-      this.setWidth(scaledWidth).setHeight(scaledHeight);
-      ctx.scale(multiplier, multiplier);
-
-      if (activeGroup) {
-        // not removing group due to complications with restoring it with correct state afterwords
-        this._tempRemoveBordersControlsFromGroup(activeGroup);
-      }
-      else if (activeObject && this.deactivateAll) {
-        this.deactivateAll();
-      }
-
-      // restoring width, height for `renderAll` to draw
-      // background properly (while context is scaled)
-      this.width = origWidth;
-      this.height = origHeight;
-
-      this.renderAll(true);
-
-      var dataURL = this.toDataURL(format, quality);
-
-      ctx.scale(1 / multiplier,  1 / multiplier);
-      this.setWidth(origWidth).setHeight(origHeight);
-
-      if (activeGroup) {
-        this._restoreBordersControlsOnGroup(activeGroup);
-      }
-      else if (activeObject && this.setActiveObject) {
-        this.setActiveObject(activeObject);
-      }
-
-      this.contextTop && this.clearContext(this.contextTop);
-      this.renderAll();
-
-      return dataURL;
-    },
-
-    /**
-     * @private
-     * @method _tempRemoveBordersControlsFromGroup
-     */
-    _tempRemoveBordersControlsFromGroup: function(group) {
-      group.origHasControls = group.hasControls;
-      group.origBorderColor = group.borderColor;
-
-      group.hasControls = true;
-      group.borderColor = 'rgba(0,0,0,0)';
-
-      group.forEachObject(function(o) {
-        o.origBorderColor = o.borderColor;
-        o.borderColor = 'rgba(0,0,0,0)';
-      });
-    },
-
-    /**
-     * @private
-     * @method _restoreBordersControlsOnGroup
-     */
-    _restoreBordersControlsOnGroup: function(group) {
-      group.hideControls = group.origHideControls;
-      group.borderColor = group.origBorderColor;
-
-      group.forEachObject(function(o) {
-        o.borderColor = o.origBorderColor;
-        delete o.origBorderColor;
-      });
-    },
-
     /**
      * Returns coordinates of a center of canvas.
      * Returned value is an object with top and left properties
-     * @method getCenter
      * @return {Object} object with "top" and "left" number values
      */
     getCenter: function () {
@@ -824,7 +625,6 @@
 
     /**
      * Centers object horizontally.
-     * @method centerObjectH
      * @param {fabric.Object} object Object to center
      * @return {fabric.Canvas} thisArg
      */
@@ -836,7 +636,6 @@
 
     /**
      * Centers object vertically.
-     * @method centerObjectH
      * @param {fabric.Object} object Object to center
      * @return {fabric.Canvas} thisArg
      * @chainable
@@ -849,7 +648,6 @@
 
     /**
      * Centers object vertically and horizontally.
-     * @method centerObject
      * @param {fabric.Object} object Object to center
      * @return {fabric.Canvas} thisArg
      * @chainable
@@ -860,7 +658,6 @@
 
     /**
      * Returs dataless JSON representation of canvas
-     * @method toDatalessJSON
      * @param {Array} propertiesToInclude
      * @return {String} json string
      */
@@ -870,7 +667,6 @@
 
     /**
      * Returns object representation of canvas
-     * @method toObject
      * @param {Array} propertiesToInclude
      * @return {Object} object representation of an instance
      */
@@ -880,7 +676,6 @@
 
     /**
      * Returns dataless object representation of canvas
-     * @method toDatalessObject
      * @param {Array} propertiesToInclude
      * @return {Object} object representation of an instance
      */
@@ -890,11 +685,15 @@
 
     /**
      * @private
-     * @method _toObjectMethod
      */
     _toObjectMethod: function (methodName, propertiesToInclude) {
+
+      var activeGroup = this.getActiveGroup();
+      if (activeGroup) {
+        this.discardActiveGroup();
+      }
       var data = {
-        objects: this._objects.map(function (instance) {
+        objects: this.getObjects().map(function (instance) {
           // TODO (kangax): figure out how to clean this up
           var originalValue;
           if (!this.includeDefaultValues) {
@@ -922,15 +721,19 @@
         data.overlayImageTop = this.overlayImageTop;
       }
       fabric.util.populateWithProperties(this, data, propertiesToInclude);
+      if (activeGroup) {
+        this.setActiveGroup(new fabric.Group(activeGroup.getObjects()));
+        activeGroup.forEachObject(function(o) { o.set('active', true) });
+      }
       return data;
     },
 
+    /* _TO_SVG_START_ */
     /**
      * Returns SVG representation of canvas
      * @function
-     * @method toSVG
-     * @param {Object} [options] Options for SVG output ("suppressPreamble: true"
-     * will start the svg output directly at "<svg...")
+     * @param {Object} [options] Options for SVG output (suppressPreamble: true/false (if true xml tag is not included),
+     * viewBox: {x, y, width, height} to define the svg output viewBox)
      * @return {String}
      */
     toSVG: function(options) {
@@ -949,9 +752,10 @@
             'xmlns="http://www.w3.org/2000/svg" ',
             'xmlns:xlink="http://www.w3.org/1999/xlink" ',
             'version="1.1" ',
-            'width="', this.width, '" ',
-            'height="', this.height, '" ',
-            (this.backgroundColor && !this.backgroundColor.source) ? 'style="background-color: ' + this.backgroundColor +'" ' : null,
+            'width="', (options.viewBox ? options.viewBox.width : this.width), '" ',
+            'height="', (options.viewBox ? options.viewBox.height : this.height), '" ',
+            (this.backgroundColor && !this.backgroundColor.source ? 'style="background-color: ' + this.backgroundColor +'" ' : null),
+            (options.viewBox ? 'viewBox="' + options.viewBox.x + ' ' + options.viewBox.y + ' ' + options.viewBox.width + ' ' + options.viewBox.height + '" ' : null),
             'xml:space="preserve">',
           '<desc>Created with Fabric.js ', fabric.version, '</desc>',
           '<defs>', fabric.createSVGFontFacesMarkup(this.getObjects()), fabric.createSVGRefElementsMarkup(this), '</defs>'
@@ -990,26 +794,25 @@
         );
       }
 
+      var activeGroup = this.getActiveGroup();
+      if (activeGroup) {
+        this.discardActiveGroup();
+      }
       for (var i = 0, objects = this.getObjects(), len = objects.length; i < len; i++) {
         markup.push(objects[i].toSVG());
       }
+      if (activeGroup) {
+        this.setActiveGroup(new fabric.Group(activeGroup.getObjects()));
+        activeGroup.forEachObject(function(o) { o.set('active', true) });
+      }
       markup.push('</svg>');
 
       return markup.join('');
     },
-
-    /**
-     * Returns true if canvas contains no objects
-     * @method isEmpty
-     * @return {Boolean} true if canvas is empty
-     */
-    isEmpty: function () {
-      return this._objects.length === 0;
-    },
+    /* _TO_SVG_END_ */
 
     /**
      * Removes an object from canvas and returns it
-     * @method remove
      * @param object {Object} Object to remove
      * @return {Object} removed object
      */
@@ -1021,22 +824,11 @@
         this.fire('selection:cleared');
       }
 
-      var objects = this._objects;
-      var index = objects.indexOf(object);
-
-      // removing any object should fire "objct:removed" events
-      if (index !== -1) {
-        objects.splice(index,1);
-        this.fire('object:removed', { target: object });
-      }
-
-      this.renderAll();
-      return object;
+      return fabric.Collection.remove.call(this, object);
     },
 
     /**
      * Moves an object to the bottom of the stack of drawn objects
-     * @method sendToBack
      * @param object {fabric.Object} Object to send to back
      * @return {fabric.Canvas} thisArg
      * @chainable
@@ -1044,12 +836,11 @@
     sendToBack: function (object) {
       removeFromArray(this._objects, object);
       this._objects.unshift(object);
-      return this.renderAll();
+      return this.renderAll && this.renderAll();
     },
 
     /**
      * Moves an object to the top of the stack of drawn objects
-     * @method bringToFront
      * @param object {fabric.Object} Object to send
      * @return {fabric.Canvas} thisArg
      * @chainable
@@ -1057,147 +848,132 @@
     bringToFront: function (object) {
       removeFromArray(this._objects, object);
       this._objects.push(object);
-      return this.renderAll();
+      return this.renderAll && this.renderAll();
     },
 
     /**
-     * Moves an object one level down in stack of drawn objects
-     * @method sendBackwards
+     * Moves an object down in stack of drawn objects
      * @param object {fabric.Object} Object to send
+     * @param intersecting {Boolean} If `true`, send object behind next lower intersecting object
      * @return {fabric.Canvas} thisArg
      * @chainable
      */
-    sendBackwards: function (object) {
-      var idx = this._objects.indexOf(object),
-          nextIntersectingIdx = idx;
+    sendBackwards: function (object, intersecting) {
+      var idx = this._objects.indexOf(object);
 
       // if object is not on the bottom of stack
       if (idx !== 0) {
+        var newIdx;
 
-        // traverse down the stack looking for the nearest intersecting object
-        for (var i=idx-1; i>=0; --i) {
+        if (intersecting) {
+          newIdx = idx;
+          
+          // traverse down the stack looking for the nearest intersecting object
+          for (var i=idx-1; i>=0; --i) {
 
-          var isIntersecting = object.intersectsWithObject(this._objects[i]) ||
-                               object.isContainedWithinObject(this._objects[i]) ||
-                               this._objects[i].isContainedWithinObject(object);
+            var isIntersecting = object.intersectsWithObject(this._objects[i]) ||
+                                 object.isContainedWithinObject(this._objects[i]) ||
+                                 this._objects[i].isContainedWithinObject(object);
 
-          if (isIntersecting) {
-            nextIntersectingIdx = i;
-            break;
+            if (isIntersecting) {
+              newIdx = i;
+              break;
+            }
           }
         }
+        else {
+          newIdx = idx-1;
+        }
+
         removeFromArray(this._objects, object);
-        this._objects.splice(nextIntersectingIdx, 0, object);
+        this._objects.splice(newIdx, 0, object);
+        this.renderAll && this.renderAll();
       }
-      return this.renderAll();
+      return this;
     },
 
     /**
-     * Moves an object one level up in stack of drawn objects
-     * @method bringForward
+     * Moves an object up in stack of drawn objects
      * @param object {fabric.Object} Object to send
+     * @param intersecting {Boolean} If `true`, send object in front of next upper intersecting object
      * @return {fabric.Canvas} thisArg
      * @chainable
      */
-    bringForward: function (object) {
-      var objects = this.getObjects(),
-          idx = objects.indexOf(object),
-          nextIntersectingIdx = idx;
-
+    bringForward: function (object, intersecting) {
+      var idx = this._objects.indexOf(object);
 
       // if object is not on top of stack (last item in an array)
-      if (idx !== objects.length-1) {
+      if (idx !== this._objects.length-1) {
+        var newIdx;
+
+        if (intersecting) {
+          newIdx = idx;
 
-        // traverse up the stack looking for the nearest intersecting object
-        for (var i = idx + 1, l = this._objects.length; i < l; ++i) {
+          // traverse up the stack looking for the nearest intersecting object
+          for (var i = idx + 1; i < this._objects.length; ++i) {
 
-          var isIntersecting = object.intersectsWithObject(objects[i]) ||
-                               object.isContainedWithinObject(this._objects[i]) ||
-                               this._objects[i].isContainedWithinObject(object);
+            var isIntersecting = object.intersectsWithObject(this._objects[i]) ||
+                                 object.isContainedWithinObject(this._objects[i]) ||
+                                 this._objects[i].isContainedWithinObject(object);
 
-          if (isIntersecting) {
-            nextIntersectingIdx = i;
-            break;
+            if (isIntersecting) {
+              newIdx = i;
+              break;
+            }
           }
         }
-        removeFromArray(objects, object);
-        objects.splice(nextIntersectingIdx, 0, object);
+        else {
+          newIdx = idx+1;
+        }
+        
+        removeFromArray(this._objects, object);
+        this._objects.splice(newIdx, 0, object);
+        this.renderAll && this.renderAll();
       }
-      this.renderAll();
-    },
-
-    /**
-     * Returns object at specified index
-     * @method item
-     * @param {Number} index
-     * @return {fabric.Object}
-     */
-    item: function (index) {
-      return this.getObjects()[index];
-    },
-
-    /**
-     * Returns number representation of an instance complexity
-     * @method complexity
-     * @return {Number} complexity
-     */
-    complexity: function () {
-      return this.getObjects().reduce(function (memo, current) {
-        memo += current.complexity ? current.complexity() : 0;
-        return memo;
-      }, 0);
+      return this;
     },
 
     /**
-     * Iterates over all objects, invoking callback for each one of them
-     * @method forEachObject
+     * Moves an object to specified level in stack of drawn objects
+     * @param object {fabric.Object} Object to send
+     * @param {Number} index Position to move to
      * @return {fabric.Canvas} thisArg
+     * @chainable
      */
-    forEachObject: function(callback, context) {
-      var objects = this.getObjects(),
-          i = objects.length;
-      while (i--) {
-        callback.call(context, objects[i], i, objects);
-      }
-      return this;
+    moveTo: function (object, index) {
+      removeFromArray(this._objects, object);
+      this._objects.splice(index, 0, object);
+      return this.renderAll && this.renderAll();
     },
 
     /**
      * Clears a canvas element and removes all event handlers.
-     * @method dispose
      * @return {fabric.Canvas} thisArg
      * @chainable
      */
     dispose: function () {
       this.clear();
-      if (this.interactive) {
+
+      if (!this.interactive) return this;
+
+      if (fabric.isTouchSupported) {
+        removeListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);
+        removeListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
+        if (typeof Event !== 'undefined' && 'remove' in Event) {
+          Event.remove(this.upperCanvasEl, 'gesture', this._onGesture);
+        }
+      }
+      else {
         removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
         removeListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
         removeListener(fabric.window, 'resize', this._onResize);
       }
       return this;
-    },
-
-    /**
-     * @private
-     * @method _resizeImageToFit
-     * @param {HTMLImageElement} imgEl
-     */
-    _resizeImageToFit: function (imgEl) {
-
-      var imageWidth = imgEl.width || imgEl.offsetWidth,
-          widthScaleFactor = this.getWidth() / imageWidth;
-
-      // scale image down so that it has original dimensions when printed in large resolution
-      if (imageWidth) {
-        imgEl.width = imageWidth * widthScaleFactor;
-      }
     }
   });
 
   /**
    * Returns a string representation of an instance
-   * @method toString
    * @return {String} string representation of an instance
    */
   fabric.StaticCanvas.prototype.toString = function () { // Assign explicitly since `extend` doesn't take care of DontEnum bug yet
@@ -1205,11 +981,10 @@
            '{ objects: ' + this.getObjects().length + ' }>';
   };
 
-  extend(fabric.StaticCanvas, /** @scope fabric.StaticCanvas */ {
+  extend(fabric.StaticCanvas, /** @lends fabric.StaticCanvas */ {
 
     /**
      * @static
-     * @property EMPTY_JSON
      * @type String
      */
     EMPTY_JSON: '{"objects": [], "background": "white"}',
@@ -1217,7 +992,6 @@
     /**
      * Takes &lt;canvas> element and transforms its data in such way that it becomes grayscale
      * @static
-     * @method toGrayscale
      * @param {HTMLCanvasElement} canvasEl
      */
     toGrayscale: function (canvasEl) {
@@ -1247,9 +1021,8 @@
      * Provides a way to check support of some of the canvas methods
      * (either those of HTMLCanvasElement itself, or rendering context)
      *
-     * @method supports
      * @param methodName {String} Method to check support for;
-     *                            Could be one of "getImageData", "toDataURL" or "toDataURLWithQuality"
+     *                            Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash"
      * @return {Boolean | null} `true` if method is supported (or at least exists),
      *                          `null` if canvas element or context can not be initialized
      */
@@ -1270,6 +1043,9 @@
         case 'getImageData':
           return typeof ctx.getImageData !== 'undefined';
 
+        case 'setLineDash':
+          return typeof ctx.setLineDash !== 'undefined';
+
         case 'toDataURL':
           return typeof el.toDataURL !== 'undefined';
 
@@ -1290,7 +1066,7 @@
   /**
    * Returs JSON representation of canvas
    * @function
-   * @method toJSON
+   * @param {Array} propertiesToInclude
    * @return {String} json string
    */
   fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject;