Merge pull request #92 from mqg734/WebGLFixes

Selection Tool Fixes for elements flying off into space when they overlap

6 files changed, 262 insertions, 82 deletions

diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 0a7c0534..32572af1 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -206,10 +206,13 @@ exports.LineTool = Montage.create(ShapeTool, {
             // for default stroke and fill/no materials
             var strokeMaterial = null;
 
-            var strokeM = this.options.strokeMaterial;
-            if(strokeM)
+            if(this.options.use3D)
             {
-                strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM));
+                var strokeM = this.options.strokeMaterial;
+                if(strokeM)
+                {
+                    strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM));
+                }
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index 14655312..911059a7 100755
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -43,19 +43,21 @@ exports.OvalTool = Montage.create(ShapeTool, {
             var strokeMaterial = null;
             var fillMaterial = null;
 
-            var strokeM = this.options.strokeMaterial;
-            if(strokeM)
+            if(this.options.use3D)
             {
-                strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM));
-            }
+                var strokeM = this.options.strokeMaterial;
+                if(strokeM)
+                {
+                    strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM));
+                }
 
-            var fillM = this.options.fillMaterial;
-            if(fillM)
-            {
-                fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM));
+                var fillM = this.options.fillMaterial;
+                if(fillM)
+                {
+                    fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM));
+                }
             }
 
-
             var world = this.getGLWorld(canvas, this.options.use3D);
 
             var xOffset = ((left - canvas.offsetLeft + w/2) - canvas.width/2);
diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js
index 31ac7faa..5e148de3 100755
--- a/js/tools/RectTool.js
+++ b/js/tools/RectTool.js
@@ -62,16 +62,19 @@ exports.RectTool = Montage.create(ShapeTool, {
             var strokeMaterial = null;
             var fillMaterial = null;
 
-            var strokeM = this.options.strokeMaterial;
-            if(strokeM)
+            if(this.options.use3D)
             {
-                strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM));
-            }
+                var strokeM = this.options.strokeMaterial;
+                if(strokeM)
+                {
+                    strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM));
+                }
 
-            var fillM = this.options.fillMaterial;
-            if(fillM)
-            {
-                fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM));
+                var fillM = this.options.fillMaterial;
+                if(fillM)
+                {
+                    fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM));
+                }
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
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(