5 files changed, 455 insertions, 332 deletions

diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 869de213..b59bbf39 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -42,7 +42,6 @@ var StageLine = require("js/helper-classes/3D/StageLine").StageLine;
 
 
 var DrawUtils = exports.DrawUtils = Montage.create(Component, {
-
     ///////////////////////////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
@@ -97,7 +96,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
     _selectionCtr : {value: null, writable: true },
 
     // Properties that require element planes to be updated
-    _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height"], writable: false },
+    _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height", "border", "border-width", "border-style", "-webkit-transform"], writable: false },
     _recalculateScrollOffsets : { value: false },
 
     ///////////////////////////////////////////////////////////////////////
@@ -106,33 +105,33 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
     setDrawingSurfaceElement : { value: function( s ) {  this._drawingSurfaceElt = s;  if (s)  this._drawingContext = s.getContext("2d");     }},
     getDrawingSurfaceElement : { value: function()          {  return this._drawingSurfaceElt;      }},
 
-    getDrawingContext : { value: function()         {  return this._drawingContext;         }},
+    getDrawingContext : { value: function()            {  return this._drawingContext;            }},
 
     setSourceSpaceElement : { value: function(ss)          {  this._sourceSpaceElt = ss;           }},
     getSourceSpaceElement : { value: function()            {  return this._sourceSpaceElt;         }},
 
     getWorkingPlane : { value: function()            {  return this._workingPlane;           }},
-    setWorkingPlane : { value: function (wp)            { this._workingPlane = wp;              }},
+    setWorkingPlane : { value: function (wp)            { this._workingPlane = wp;                }},
 
-    getGridHorizontalSpacing : { value: function()  {  return this._gridHorizontalSpacing;      }},
+    getGridHorizontalSpacing : { value: function()    {  return this._gridHorizontalSpacing;        }},
     getGridVerticalSpacing : { value: function()    {  return this._gridVerticalSpacing;        }},
     getGridHorizontalLineCount : { value: function()    {  return this._gridHorizontalLineCount;    }},
-    getGridVerticalLineCount : { value: function()  {  return this._gridVerticalLineCount;  }},
-    getGridOrigin : { value: function() {  return this._gridOrigin.slice(0);            }},
+    getGridVerticalLineCount : { value: function()    {  return this._gridVerticalLineCount;    }},
+    getGridOrigin : { value: function()    {  return this._gridOrigin.slice(0);            }},
 
-    isDrawingGrid : { value: function()         {  return this.drawXY || this.drawYZ || this.drawXZ;    }},
-    isDrawingElementNormal : { value: function()            {  return this.drawElementN }},
+    isDrawingGrid : { value: function()            {  return this.drawXY || this.drawYZ || this.drawXZ;    }},
+    isDrawingElementNormal : { value: function()            {  return this.drawElementN    }},
 
-    getLineColor : { value: function()          {  return this._lineColor;                  }},
-    setLineColor : { value: function( color )       {  this._lineColor = color;                 }},
+    getLineColor : { value: function()            {  return this._lineColor;                    }},
+    setLineColor : { value: function( color )        {  this._lineColor = color;                    }},
 
-    getLineWidth : { value: function()          {  return this._drawingContext.lineWidth;   }},
-    setLineWidth : { value: function( w )           {  this._drawingContext.lineWidth = w;      }},
+    getLineWidth : { value: function()            {  return this._drawingContext.lineWidth;    }},
+    setLineWidth : { value: function( w )            {  this._drawingContext.lineWidth = w;        }},
 
 
     initialize: {
         value: function() {
-            this._gridOrigin = [0,0];   // 2D plane space point
+            this._gridOrigin = [0,0];    // 2D plane space point
 
             this.eventManager.addEventListener("elementAdded", this, false);
             this.eventManager.addEventListener("elementsRemoved", this, false);
@@ -212,7 +211,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 this.addElement(elements);
             }
 
-            this.drawWorkingPlane();
+            // Redraw stage only once after all addition is completed
+            var stage = this.application.ninja.stage;
+            stage.drawLayout = true;
+            stage.updatePlanes = true;
+            stage.draw3DInfo = true;
+            stage.needsDrawSelection = true;
         }
     },
 
@@ -229,7 +233,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 this.removeElement(elements);
             }
 
-            this.drawWorkingPlane();
+            // Redraw stage only once after all deletion is completed
+            var stage = this.application.ninja.stage;
+            stage.drawLayout = true;
+            stage.updatePlanes = true;
+            stage.draw3DInfo = true;
+            stage.needsDrawSelection = true;
         }
     },
 
@@ -310,9 +319,20 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                     plane,
                     changed = false,
                     elt,
+                    eltModel,
                     adjustStagePadding = !isChanging || (event.detail.data.prop !== "matrix");
                 for(var i=0; i < len; i++) {
                     elt = els[i];
+                    eltModel = elt.elementModel;
+                    eltModel.setProperty("offsetCache", false);
+
+                    if(eltModel.selection !== "body") {
+                        if(isChanging) {
+                            eltModel.props3D.matrix3d = null;
+                        } else {
+                            eltModel.props3D.init(elt, false);
+                        }
+                    }
                     plane = elt.elementModel.props3D.elementPlane;
                     if(plane) {
                         plane.init();
@@ -353,8 +373,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 }
 
                 if(!changed) {
-                    this.drawWorkingPlane();
-                    this.draw3DCompass();
+                    // If we didn't already set userPaddingTop or userPaddingLeft, force stage to redraw
+                    //this.snapManager._isCacheInvalid = true;
+//                    stage.draw3DInfo = true;
+                    stage.needsDraw = true;
                 }
 
                 // TODO - Remove this once all stage drawing is consolidated into a single draw cycle
@@ -680,81 +702,82 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
         {
             this.application.ninja.stage.clearGridCanvas();
             this.drawStageOutline();
-            if (!this.isDrawingGrid()) return;
-
-            var saveContext = this.getDrawingSurfaceElement();
-            this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);
+            if (this.isDrawingGrid()) {
+                var saveContext = this.getDrawingSurfaceElement();
+                this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas);
 
-            // 3 coordinate axes for the plane
-            var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]];
+                // 3 coordinate axes for the plane
+                var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]];
 
-            // get a point that lies on the plane
-            var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane);
+                // get a point that lies on the plane
+                var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane);
 
-            // define the grid parameters
-            var width = this.snapManager.getStageWidth(),
-                height = this.snapManager.getStageHeight(),
-                nLines = 10;
+                // define the grid parameters
+                var width = this.snapManager.getStageWidth(),
+                    height = this.snapManager.getStageHeight(),
+                    nLines = 10;
 
-            // get a matrix from working plane space to the world
-            var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane);
-            var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] );
-            //mat = tMat.multiply(mat);
-            glmat4.multiply( tMat, mat, mat);
+                // get a matrix from working plane space to the world
+                var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane);
+                var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] );
+                //mat = tMat.multiply(mat);
+                glmat4.multiply( tMat, mat, mat);
 
-            // the positioning of the grid may depend on the view direction.
-            var stage = this.snapManager.getStage();
-            var viewMat = this.viewUtils.getMatrixFromElement(stage);
-            var viewDir = [viewMat[8], viewMat[9], viewMat[10]];
+                // the positioning of the grid may depend on the view direction.
+                var stage = this.snapManager.getStage();
+                var viewMat = this.viewUtils.getMatrixFromElement(stage);
+                var viewDir = [viewMat[8], viewMat[9], viewMat[10]];
 
-            var dx, dy, delta, pt0, pt1;
-            dx = this._gridVerticalSpacing;
-            dy = this._gridHorizontalSpacing;
-            nLines = Math.floor(width / dx) + 1;
-            if (MathUtils.fpCmp(dx*nLines,width) == 0)  nLines--;
+                var dx, dy, delta, pt0, pt1;
+                dx = this._gridVerticalSpacing;
+                dy = this._gridHorizontalSpacing;
+                nLines = Math.floor(width / dx) + 1;
+                if (MathUtils.fpCmp(dx*nLines,width) == 0)  nLines--;
 
-            var saveColor = this._lineColor;
-            var saveLineWidth = this._drawingContext.lineWidth;
+                var saveColor = this._lineColor;
+                var saveLineWidth = this._drawingContext.lineWidth;