1 files changed, 220 insertions, 62 deletions

diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js
index caa9e8d6..6d8ff175 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
             {
@@ -122,6 +148,8 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
             if(this._escape) {
                 this._escape = false;
                 this._isSelecting = false;
+                this._canSnap = true;
+                this._use3DMode = false;
                 return;
             }
 
@@ -153,6 +181,8 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
                 }
 
                 this.endDraw(event);
+                this._canSnap = true;
+                this._use3DMode = false;
                 return;
             }
 
@@ -180,6 +210,8 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
             }
 
             this.endDraw(event);
+            this._canSnap = true;
+            this._use3DMode = false;
         }
     },
 
@@ -211,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");
                             });
 
@@ -220,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");
                             });
 
@@ -229,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");
                             });
 
@@ -238,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");
                             });
 
@@ -269,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++)
@@ -285,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.getProperty(elt, "top")) + curMat[13] - previousMat[13];
+                        var _w = parseInt(ElementsMediator.getProperty(elt, "width"));
+                        var _h = parseInt(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, []);
+                    }
+                    else
+                    {
+                        var previousMat = this._undoArray[i].mat.slice(0);
+                        var prevW = this._undoArray[i]._w;
+                        var prevH = this._undoArray[i]._h;
+                        var _w = parseInt(ElementsMediator.getProperty(elt, "width"));
+                        var _h = parseInt(ElementsMediator.getProperty(elt, "height"));
+                        previousWidth.push(prevW + "px");
+                        previousHeight.push(prevH + "px");
+                        newWidth.push(_w + "px");
+                        newHeight.push(_h + "px");
+
+                        var previousStyleStr = {dist:this._undoArray[i].dist,
+                                                mat:MathUtils.scientificToDecimal(previousMat, 5)};
+                        var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt),
+                                            mat:MathUtils.scientificToDecimal(curMat, 5)};
+                        previousStyles.push(previousStyleStr);
+                        newStyles.push(newStyleStr);