2 files changed, 64 insertions, 85 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index 625c09ad..1a491210 100644
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -58,7 +58,7 @@ exports.Layout = Montage.create(Component, {
 
             this.eventManager.addEventListener("selectionChange", this, false);
 
-            this.eventManager.addEventListener("deleteSelection", this, true);
+            this.eventManager.addEventListener("deleteSelection", this, false);
 
 //            this.addEventListener("change@stage.appModel.layoutView", this.handleLayoutView, false);
 
@@ -74,26 +74,23 @@ exports.Layout = Montage.create(Component, {
     handleElementAdded: {
         value: function(event) {
             this.domTree.push(event.detail);
+
+            this.draw();
+            this.draw3DInfo(false);
         }
     },
 
     handleElementDeleted: {
         value: function(event) {
             this.domTree.splice(this.domTree.indexOf(event.detail), 1);
-
-            this.draw();
         }
     },
 
-    captureDeleteSelection: {
+    // Redraw stage only once after all deletion is completed
+    handleDeleteSelection: {
         value: function(event) {
-            //this.redrawDocument();
-
-            var len = event.detail.length;
-            for(var i = 0; i < len ; i++) {
-                this.domTree.splice(this.domTree.indexOf(event.detail[i]),1);
-            }
-
+            this.draw();
+            this.draw3DInfo(false);
         }
     },
 
@@ -112,6 +109,7 @@ exports.Layout = Montage.create(Component, {
             }
 
             this.draw(); // Not a reel yet :)
+            this.draw3DInfo(false);
 
 
         }
@@ -128,9 +126,16 @@ exports.Layout = Montage.create(Component, {
     },
 
     draw3DInfo: {
-        value: function() {
-            drawUtils.updatePlanes();
-            if(this.stage.appModel.show3dGrid) drawUtils.drawWorkingPlane();
+        value: function(updatePlanes) {
+            if(updatePlanes)
+            {
+                drawUtils.updatePlanes();
+            }
+            if(this.stage.appModel.show3dGrid)
+            {
+                this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView();
+                drawUtils.drawWorkingPlane();
+            }
             drawUtils.draw3DCompass();
         }
     },
@@ -282,8 +287,9 @@ exports.Layout = Montage.create(Component, {
         }
     },
 
-    // Alternate dashed line method.
-    ___dashedLine: {
+    // Dashed line function found at http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas/
+    // Portions used with permission of Gavin Kistner (phrogz)
+    _dashedLine: {
         value: function(x, y, x2, y2, dashArray) {
             this.ctx.lineCap = "square";
             this.ctx.beginPath();
@@ -303,7 +309,7 @@ exports.Layout = Montage.create(Component, {
                 var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
                 if(xSlope){
                     if(dx < 0) step = -step;
-                    x += step
+                    x += step;
                     y += slope * step;
                 }else{
                     if(dy < 0) step = -step;
@@ -321,52 +327,6 @@ exports.Layout = Montage.create(Component, {
         }
     },
 
-    _dashedLine: {
-        value: function (fromX, fromY, toX, toY, pattern){
-            this.ctx.beginPath();
-            // Our growth rate for our line can be one of the following:
-            //   (+,+), (+,-), (-,+), (-,-)
-            // Because of this, our algorithm needs to understand if the x-coord and
-            // y-coord should be getting smaller or larger and properly cap the values
-            // based on (x,y).
-            var lt = function (a, b) { return a <= b; };
-            var gt = function (a, b) { return a >= b; };
-            var capmin = function (a, b) { return Math.min(a, b); };
-            var capmax = function (a, b) { return Math.max(a, b); };
-
-            var checkX = { thereYet: gt, cap: capmin };
-            var checkY = { thereYet: gt, cap: capmin };
-
-            if (fromY - toY > 0) {
-                checkY.thereYet = lt;
-                checkY.cap = capmax;
-            }
-            if (fromX - toX > 0) {
-                checkX.thereYet = lt;
-                checkX.cap = capmax;
-              }
-
-            this.ctx.moveTo(fromX, fromY);
-            var offsetX = fromX;
-            var offsetY = fromY;
-            var idx = 0, dash = true;
-            while (!(checkX.thereYet(offsetX, toX) && checkY.thereYet(offsetY, toY))) {
-                var ang = Math.atan2(toY - fromY, toX - fromX);
-                var len = pattern[idx];
-
-                offsetX = checkX.cap(toX, offsetX + (Math.cos(ang) * len));
-                offsetY = checkY.cap(toY, offsetY + (Math.sin(ang) * len));
-
-                if (dash) this.ctx.lineTo(offsetX, offsetY);
-                else this.ctx.moveTo(offsetX, offsetY);
-
-                idx = (idx + 1) % pattern.length;
-                dash = !dash;
-            }
-            this.ctx.stroke();
-        }
-    },
-
     _elementName: {
         value: function(item) {
             return this.application.ninja.elementMediator.getNJProperty(item, "selection");
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 96bfccdd..6d9a7355 100644
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -176,7 +176,7 @@ exports.Stage = Montage.create(Component, {
             }
             else if(this.updatedStage) {
                 this.layout.draw();
-                this.layout.draw3DInfo();
+                this.layout.draw3DInfo(true);
             }
         }
     },
@@ -794,14 +794,9 @@ exports.Stage = Montage.create(Component, {
                 var userContent = this.application.ninja.currentDocument.documentRoot;
                 if (userContent)
                 {
-                    var w = userContent.offsetWidth,
-                        h = userContent.offsetHeight;
-                    if(userContent.width)
-                        w = userContent.width;
-                    if(userContent.height)
-                        h = userContent.height;
-                    var localPt = [ w/2,  h/2, 0];
-                    var globalPt = this.stageDeps.viewUtils.localToGlobal( localPt, userContent );
+                    var w = this._canvas.width,
+                        h = this._canvas.height;
+                                        var globalPt = [w/2, h/2, 0];
 
                     this.stageDeps.viewUtils.setStageZoom( globalPt,  value/100 );
 
@@ -818,42 +813,66 @@ exports.Stage = Montage.create(Component, {
         }
     },
 
+        getPlaneForView:
+        {
+                value: function( side )
+                {
+                        var plane = [0,0,1,0];
+            switch(side)
+                        {
+                case "top":
+                                        plane = [0,1,0,0];
+                                        plane[3] = this.application.ninja.currentDocument.documentRoot.offsetHeight / 2.0;
+                   break;
+
+                case "side":
+                                        plane = [1,0,0,0];
+                                        plane[3] = this.application.ninja.currentDocument.documentRoot.offsetWidth / 2.0;
+                   break;
+
+                case "front":
+                    plane = [0,0,1,0];
+                    break;
+
+                                default:
+                                        console.log( "unrecognized view in snapManager.getPlaneForView: " + side );
+                                        break;
+            }
+
+                        return plane;
+                }
+        },
+
     setStageView: {
         value: function(side) {
             var mat,
-                workingPlane = null,
-                currentDoc = this.application.ninja.currentDocument.documentRoot;
+                currentDoc = this.application.ninja.currentDocument.documentRoot,
+                isDrawingGrid = this.application.ninja.appModel.show3dGrid;
             // Stage 3d Props.
             currentDoc.elementModel.props3D.ResetTranslationValues();
             currentDoc.elementModel.props3D.ResetRotationValues();
 
 
-            switch(side) {
+