Fixes for shift selecting/unselecting groups

Shift selecting/deselecting no longer causes the group to have its
transform re-applied.

You can no longer drag a shift added object separately from the group.
This also fixes the issue of the object jumping on addition to a group.

Objects in a group are now rendered to the upper-canvas in the order
they are in on the lower canvas.

dist/all.js

@@ -5422,6 +5422,14 @@ fabric.util.string = {
 
       // delegate rendering to group selection (if one exists)
       if (activeGroup) {
+        //Store objects in group preserving order, then replace
+        var sortedObjects = [];
+        this.forEachObject(function (object) {
+            if (activeGroup.contains(object)) {
+                sortedObjects.push(object);
+            }
+        });
+        activeGroup._set('objects', sortedObjects);
         this._draw(this.contextTop, activeGroup);
       }
 
@@ -6382,11 +6390,10 @@ fabric.util.string = {
           this.onBeforeScaleRotate(target);
         }
 
-        this._setupCurrentTransform(e, target);
-
         var shouldHandleGroupLogic = e.shiftKey && (activeGroup || this.getActiveObject()) && this.selection;
         if (shouldHandleGroupLogic) {
           this._handleGroupLogic(e, target);
+          target = this.getActiveGroup();
         }
         else {
           if (target !== this.getActiveGroup()) {
@@ -6394,6 +6401,8 @@ fabric.util.string = {
           }
           this.setActiveObject(target, e);
         }
+
+        this._setupCurrentTransform(e, target);
       }
       // we must renderAll so that active image is placed on the top canvas
       this.renderAll();
@@ -6700,6 +6709,7 @@ fabric.util.string = {
       if (activeGroup) {
         if (activeGroup.contains(target)) {
           activeGroup.removeWithUpdate(target);
+          this._resetObjectTransform(activeGroup);
           target.setActive(false);
           if (activeGroup.size() === 1) {
             // remove group alltogether if after removal it only contains 1 object
@@ -6708,6 +6718,7 @@ fabric.util.string = {
         }
         else {
           activeGroup.addWithUpdate(target);
+          this._resetObjectTransform(activeGroup);
         }
         this.fire('selection:created', { target: activeGroup, e: e });
         activeGroup.setActive(true);
@@ -6887,6 +6898,16 @@ fabric.util.string = {
       this.upperCanvasEl.style.cursor = value;
     },
 
+    /**
+    * @private
+    * @method _resetObjectTransform: 
+    */
+    _resetObjectTransform: function (target) {
+        target.scaleX = 1;
+        target.scaleY = 1;
+        target.setAngle(0);
+    },
+
     /**
      * Sets the cursor depending on where the canvas is being hovered.
      * Note: very buggy in Opera
@@ -11771,9 +11792,10 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
 
       var groupScaleFactor = Math.max(this.scaleX, this.scaleY);
 
-      for (var i = 0, len = this.objects.length; i < len; i++) {
+      //The array is now sorted in order of highest first, so start from end.
+      for (var i = this.objects.length; i > 0; i--) {
 
-        var object = this.objects[i];
+        var object = this.objects[i-1];
         var originalScaleFactor = object.borderScaleFactor;
 
         object.borderScaleFactor = groupScaleFactor;

src/canvas.class.js

@@ -344,11 +344,10 @@
           this.onBeforeScaleRotate(target);
         }
 
-        this._setupCurrentTransform(e, target);
-
         var shouldHandleGroupLogic = e.shiftKey && (activeGroup || this.getActiveObject()) && this.selection;
         if (shouldHandleGroupLogic) {
           this._handleGroupLogic(e, target);
+          target = this.getActiveGroup();
         }
         else {
           if (target !== this.getActiveGroup()) {
@@ -356,6 +355,8 @@
           }
           this.setActiveObject(target, e);
         }
+
+        this._setupCurrentTransform(e, target);
       }
       // we must renderAll so that active image is placed on the top canvas
       this.renderAll();
@@ -662,6 +663,7 @@
       if (activeGroup) {
         if (activeGroup.contains(target)) {
           activeGroup.removeWithUpdate(target);
+          this._resetObjectTransform(activeGroup);
           target.setActive(false);
           if (activeGroup.size() === 1) {
             // remove group alltogether if after removal it only contains 1 object
@@ -670,6 +672,7 @@
         }
         else {
           activeGroup.addWithUpdate(target);
+          this._resetObjectTransform(activeGroup);
         }
         this.fire('selection:created', { target: activeGroup, e: e });
         activeGroup.setActive(true);
@@ -849,6 +852,16 @@
       this.upperCanvasEl.style.cursor = value;
     },
 
+    /**
+    * @private
+    * @method _resetObjectTransform: 
+    */
+    _resetObjectTransform: function (target) {
+        target.scaleX = 1;
+        target.scaleY = 1;
+        target.setAngle(0);
+    },
+
     /**
      * Sets the cursor depending on where the canvas is being hovered.
      * Note: very buggy in Opera

src/group.class.js

@@ -210,9 +210,10 @@
 
       var groupScaleFactor = Math.max(this.scaleX, this.scaleY);
 
-      for (var i = 0, len = this.objects.length; i < len; i++) {
+      //The array is now sorted in order of highest first, so start from end.
+      for (var i = this.objects.length; i > 0; i--) {
 
-        var object = this.objects[i];
+        var object = this.objects[i-1];
         var originalScaleFactor = object.borderScaleFactor;
 
         object.borderScaleFactor = groupScaleFactor;

src/static_canvas.class.js

@@ -524,6 +524,14 @@
 
       // delegate rendering to group selection (if one exists)
       if (activeGroup) {
+        //Store objects in group preserving order, then replace
+        var sortedObjects = [];
+        this.forEachObject(function (object) {
+            if (activeGroup.contains(object)) {
+                sortedObjects.push(object);
+            }
+        });
+        activeGroup._set('objects', sortedObjects);
         this._draw(this.contextTop, activeGroup);
       }