Fix for jumping issue when moving items that have any 3d on them.

We can't translate 3d moves into 2d space due to perspective, so we must update the matrix3d values instead of the top-left values if items have 3d.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

1 files changed, 216 insertions, 61 deletions

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.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)};