Merge master

.jshintrc

@@ -2,6 +2,7 @@
   "globals": {
     "fabric":             true,
     "Cufon":              true,
+    "Event":              true,
     "G_vmlCanvasManager": true,
     "ActiveXObject":      true
   },

build.js

@@ -88,6 +88,8 @@ var filesToInclude = [
   ifSpecifiedDependencyInclude('text', 'cufon', 'lib/cufon.js'),
   ifSpecifiedDependencyInclude('serialization', 'json', 'lib/json2.js'),
 
+  ifSpecifiedInclude('gestures', 'lib/event.js'),
+
   'src/log.js',
   'src/observable.js',
 
@@ -121,6 +123,7 @@ var filesToInclude = [
   'src/canvas.animation.js',
 
   ifSpecifiedInclude('serialization', 'src/canvas.serialization.js'),
+  ifSpecifiedInclude('gestures', 'src/canvas.gestures.js'),
 
   'src/object.class.js',
   'src/line.class.js',

dist/all.js

@@ -1,4 +1,4 @@
-/* build: `node build.js modules=ALL` */
+/* build: `node build.js modules=ALL exclude=gestures` */
 /*! Fabric.js Copyright 2008-2012, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
 var fabric = fabric || { version: "1.0.0" };
@@ -5849,6 +5849,9 @@ fabric.util.string = {
      */
     clear: function () {
       this._objects.length = 0;
+      if (this.discardActiveGroup) {
+        this.discardActiveGroup();
+      }
       this.clearContext(this.contextContainer);
       if (this.contextTop) {
         this.clearContext(this.contextTop);
@@ -7256,6 +7259,12 @@ fabric.CircleBrush = fabric.util.createClass( /** @scope fabric.CircleBrush.prot
       if (fabric.isTouchSupported) {
         addListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);
         addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
+
+        if (typeof Event !== 'undefined' && 'add' in Event) {
+          Event.add(this.upperCanvasEl, 'gesture', function(e, s) {
+            _this.__onTransformGesture(e, s);
+          });
+        }
       }
       else {
         addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
@@ -13951,7 +13960,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
       replacement.height = imgEl.height;
 
       if (isLikelyNode) {
-        var base64str = canvasEl.toDataURL('image/png').replace(/data:image\/png;base64,/, '');
+        // cut off data:image/png;base64, part in the beginning
+        var base64str = canvasEl.toDataURL('image/png').substring(22);
         replacement.src = new Buffer(base64str, 'base64');
         _this._element = replacement;
 

src/canvas.class.js

@@ -228,6 +228,12 @@
       if (fabric.isTouchSupported) {
         addListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);
         addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
+
+        if (typeof Event !== 'undefined' && 'add' in Event) {
+          Event.add(this.upperCanvasEl, 'gesture', function(e, s) {
+            _this.__onTransformGesture(e, s);
+          });
+        }
       }
       else {
         addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);

src/canvas.gestures.js

@@ -0,0 +1,79 @@
+(function() {
+
+  var degreesToRadians = fabric.util.degreesToRadians,
+      radiansToDegrees = fabric.util.radiansToDegrees;
+
+  fabric.util.object.extend(fabric.Canvas.prototype, {
+
+    /**
+     * Method that defines actions when an Event.js gesture is detected on an object. Currently only supports
+     * 2 finger gestures.
+     *
+     * @method __onTransformGesture
+     * @param e Event object by Event.js
+     * @param self Event proxy object by Event.js
+     */
+    __onTransformGesture: function(e, self) {
+
+      if (this.isDrawingMode || e.touches.length !== 2 || 'gesture' !== self.gesture) {
+        return;
+      }
+
+      var target = this.findTarget(e);
+      if ('undefined' !== typeof target) {
+        this.onBeforeScaleRotate(target);
+        this._rotateObjectByAngle(self.rotation);
+        this._scaleObjectBy(self.scale);
+      }
+
+      this.fire('touch:gesture', {target: target, e: e, self: self});
+    },
+
+    /**
+     * Scales an object by a factor
+     * @param s {Number} The scale factor to apply to the current scale level
+     * @param by {String} Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
+     *                    When not provided, an object is scaled by both dimensions equally
+     */
+    _scaleObjectBy: function(s, by) {
+      var t = this._currentTransform,
+        target = t.target;
+
+      var lockScalingX = target.get('lockScalingX'),
+        lockScalingY = target.get('lockScalingY');
+
+      if (lockScalingX && lockScalingY)
+        return;
+
+      target._scaling = true;
+
+      if (!by) {
+        if (!lockScalingX) {
+          target.set('scaleX', t.scaleX * s);
+        }
+        if (!lockScalingY) {
+          target.set('scaleY', t.scaleY * s);
+        }
+      }
+      else if (by === 'x' && !target.get('lockUniScaling')) {
+        lockScalingX || target.set('scaleX', t.scaleX * s);
+      }
+      else if (by === 'y' && !target.get('lockUniScaling')) {
+        lockScalingY || target.set('scaleY', t.scaleY * s);
+      }
+    },
+
+    /**
+     * Rotates object by an angle
+     * @param curAngle {Number} the angle of rotation in degrees
+     */
+    _rotateObjectByAngle: function(curAngle) {
+      var t = this._currentTransform;
+
+      if (t.target.get('lockRotation'))
+        return;
+
+      t.target.angle = radiansToDegrees(degreesToRadians(curAngle) + t.theta);
+    }
+  });
+})();

src/image.class.js

@@ -213,7 +213,8 @@
       replacement.height = imgEl.height;
 
       if (isLikelyNode) {
-        var base64str = canvasEl.toDataURL('image/png').replace(/data:image\/png;base64,/, '');
+        // cut off data:image/png;base64, part in the beginning
+        var base64str = canvasEl.toDataURL('image/png').substring(22);
         replacement.src = new Buffer(base64str, 'base64');
         _this._element = replacement;
 

src/static_canvas.class.js

@@ -503,6 +503,9 @@
      */
     clear: function () {
       this._objects.length = 0;
+      if (this.discardActiveGroup) {
+        this.discardActiveGroup();
+      }
       this.clearContext(this.contextContainer);
       if (this.contextTop) {
         this.clearContext(this.contextTop);