2 files changed, 249 insertions, 61 deletions

diff --git a/js/helper-classes/3D/math-utils.js b/js/helper-classes/3D/math-utils.js
index 37044763..de63f880 100755
--- a/js/helper-classes/3D/math-utils.js
+++ b/js/helper-classes/3D/math-utils.js
@@ -538,6 +538,39 @@ var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, {
         }
     },
 
+    isIdentityMatrix: {
+        value: function( mat )
+        {
+            if(!mat)
+            {
+                return false;
+            }
+            else
+            {
+                if(mat[0] !== 1) return false;
+                if(mat[1] !== 0) return false;
+                if(mat[2] !== 0) return false;
+                if(mat[3] !== 0) return false;
+
+                if(mat[4] !== 0) return false;
+                if(mat[5] !== 1) return false;
+                if(mat[6] !== 0) return false;
+                if(mat[7] !== 0) return false;
+
+                if(mat[8] !== 0) return false;
+                if(mat[9] !== 0) return false;
+                if(mat[10] !== 1) return false;
+                if(mat[11] !== 0) return false;
+
+                if(mat[12] !== 0) return false;
+                if(mat[13] !== 0) return false;
+                if(mat[14] !== 0) return false;
+                if(mat[15] !== 1) return false;
+            }
+            return true;
+        }
+    },
+
         rectsOverlap:
         {
                 value: function( pt, width, height,  elt )
diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js
index 3df9a532..1a6bee55 100755
--- a/js/tools/SelectionTool.js
+++ b/js/tools/SelectionTool.js
@@ -19,6 +19,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
     _canOperateOnStage: { value: true},
     _isSelecting: {value: false, writable:true},
     _shiftMove: { value: 10},
+    _use3DMode: { value: false },
 
     _showTransformHandles: { value: false, enumerable: true },
 
@@ -29,6 +30,27 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
         }
     },
 
+    _areElementsOnSamePlane : {
+        value: function () {
+            if(this._targets && this._targets.length)
+            {
+                // TODO - drawUtils's elementPlanes check in drawSelectionBounds doesn't seem to work,
+                // so temporary workaround to simply check if all elements have identity matrix
+                // TODO - Eventually, this should instead check if all the selected items are on the view plane
+                var len = this._targets.length;
+                for(var i = 0; i < len; i++)
+                {
+                    var mat = this._targets[i].mat;
+                    if(!MathUtils.isIdentityMatrix(mat))
+                    {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+    },
+
     startDraw: {
         value: function(event) {
             if(!this.application.ninja.selectedElements.length)
@@ -44,9 +66,13 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
             this.isDrawing = true;
             this.application.ninja.stage.showSelectionBounds = false;
 
+            this._use3DMode = false;
+
             if(this._canSnap)
             {
                 this.initializeSnapping(event);
+                this._use3DMode = !this._areElementsOnSamePlane();
+//                console.log("use3DMode = " + this._use3DMode);
             }
             else
             {
@@ -123,6 +149,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
                 this._escape = false;
                 this._isSelecting = false;
                 this._canSnap = true;
+                this._use3DMode = false;
                 return;
             }
 
@@ -155,6 +182,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
 
                 this.endDraw(event);
                 this._canSnap = true;
+                this._use3DMode = false;
                 return;
             }
 
@@ -183,6 +211,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
 
             this.endDraw(event);
             this._canSnap = true;
+            this._use3DMode = false;
         }
     },
 
@@ -214,7 +243,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
                         case Keyboard.LEFT:
                             var newLeft = [];
                             var leftArr = this.application.ninja.selectedElements.map(function(item) {
-                                newLeft.push( (parseFloat(ElementsMediator.getProperty(item._element, "left")) - inc) + "px"  );
+                                newLeft.push( (parseInt(ElementsMediator.getProperty(item._element, "left")) - inc) + "px"  );
                                 return ElementsMediator.getProperty(item._element, "left");
                             });
 
@@ -223,7 +252,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
                         case Keyboard.UP:
                             var newTop = [];
                             var topArr = this.application.ninja.selectedElements.map(function(item) {
-                                newTop.push( (parseFloat(ElementsMediator.getProperty(item._element, "top")) - inc) + "px"  );
+                                newTop.push( (parseInt(ElementsMediator.getProperty(item._element, "top")) - inc) + "px"  );
                                 return ElementsMediator.getProperty(item._element, "top");
                             });
 
@@ -232,7 +261,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
                         case Keyboard.RIGHT:
                             var newLeft = [];
                             var leftArr = this.application.ninja.selectedElements.map(function(item) {
-                                newLeft.push( (parseFloat(ElementsMediator.getProperty(item._element, "left")) + inc) + "px"  );
+                                newLeft.push( (parseInt(ElementsMediator.getProperty(item._element, "left")) + inc) + "px"  );
                                 return ElementsMediator.getProperty(item._element, "left");
                             });
 
@@ -241,7 +270,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
                         case Keyboard.DOWN:
                             var newTop = [];
                             var topArr = this.application.ninja.selectedElements.map(function(item) {
-                                newTop.push( (parseFloat(ElementsMediator.getProperty(item._element, "top")) + inc) + "px"  );
+                                newTop.push( (parseInt(ElementsMediator.getProperty(item._element, "top")) + inc) + "px"  );
                                 return ElementsMediator.getProperty(item._element, "top");
                             });
 
@@ -272,10 +301,12 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
                 newTop = [],
                 newWidth = [],
                 newHeight = [],
+                newStyles = [],
                 previousLeft = [],
                 previousTop = [],
                 previousWidth = [],
-                previousHeight = [];
+                previousHeight = [],
+                previousStyles = [];
             var len = this.application.ninja.selectedElements.length;
             this._targets = [];
             for(var i = 0; i < len; i++)
@@ -288,52 +319,97 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
                 this._targets.push({elt:elt, mat:curMat, matInv:curMatInv});
                 if(addToUndoStack)
                 {
-                    var previousMat = this._undoArray[i].mat.slice(0);
-                    var prevX = this._undoArray[i]._x;
-                    var prevY = this._undoArray[i]._y;
-                    var prevW = this._undoArray[i]._w;
-                    var prevH = this._undoArray[i]._h;
-                    var _x = parseFloat(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12];
-                    var _y = parseFloat(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13];
-                    var _w = parseFloat(ElementsMediator.getProperty(elt, "width"));
-                    var _h = parseFloat(ElementsMediator.getProperty(elt, "height"));
-
-                    previousLeft.push(prevX + "px");
-                    previousTop.push(prevY + "px");
-                    previousWidth.push(prevW + "px");
-                    previousHeight.push(prevH + "px");
-                    newLeft.push(_x + "px");
-                    newTop.push(_y + "px");
-                    newWidth.push(_w + "px");
-                    newHeight.push(_h + "px");
-
-                    viewUtils.setMatrixForElement(elt, previousMat);
 
-                    this._targets[i].mat = previousMat;
-                    this._targets[i].matInv = glmat4.inverse(previousMat, []);
+                    if(!this._use3DMode)
+                    {
+                        var previousMat = this._undoArray[i].mat.slice(0);
+                        var prevX = this._undoArray[i]._x;
+                        var prevY = this._undoArray[i]._y;
+                        var prevW = this._undoArray[i]._w;
+                        var prevH = this._undoArray[i]._h;
+                        var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12];
+                        var _y = parseInt(ElementsMediator.