27 files changed, 857 insertions, 701 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 89a389a4..b0db1b6a 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -1292,33 +1292,68 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
     ///// Get Matrix From Element
     ///// Returns the matrix from an element's -webkit-transform
-    //// TODO - This routine should eventually check for other transform styles, i.e., rotateX, translateZ, etc.
 
     getMatrixFromElement : {
         value: function(element, isStage) {
             isStage = false;
             var xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage),
-                mat;
+                mat,
+                index1,
+                index2,
+                substr,
+                numArray,
+                nNums,
+                i;
 
             if (xformStr) {
-                var index1 = xformStr.indexOf( "matrix3d(");
+                // Check for 3d matrix
+                index1 = xformStr.indexOf( "matrix3d(");
+                // If style does not contain 'matrix3d', try computed matrix/matrix3d from rotateY, translateZ, etc.
+                if((index1 === -1) && element.ownerDocument.defaultView) {
+                    xformStr = element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("-webkit-transform");
+                    index1 = xformStr.indexOf( "matrix3d(");
+                }
                 if (index1 >= 0) {
                     index1 += 9;    // do not include 'matrix3d('
-                    var index2 = xformStr.indexOf( ")", index1 );
+                    index2 = xformStr.indexOf( ")", index1 );
                     if (index2 >= 0) {
-                        var substr = xformStr.substr( index1, (index2-index1));
+                        substr = xformStr.substr( index1, (index2-index1));
                         if (substr && (substr.length > 0)) {
-                            var numArray = substr.split(',');
-                            var nNums = numArray.length;
+                            numArray = substr.split(',');
+                            nNums = numArray.length;
                             if (nNums == 16) {
                                 // gl-matrix wants row order
                                 mat = numArray;
-                                for (var i=0;  i<16;  i++) {
+                                for (i=0;  i<16;  i++) {
                                     mat[i] = Number( mat[i] );
                                 }
                             }
                         }
                     }
+                } else {
+                    // Check for 2d matrix
+                    index1 = xformStr.indexOf( "matrix(");
+                    if (index1 >= 0) {
+                        index1 += 7;    // do not include 'matrix('
+                        index2 = xformStr.indexOf( ")", index1 );
+                        if (index2 >= 0) {
+                            substr = xformStr.substr( index1, (index2-index1));
+                            if (substr && (substr.length > 0)) {
+                                numArray = substr.split(',');
+                                nNums = numArray.length;
+                                if (nNums === 6) {
+                                    // gl-matrix wants row order
+                                    mat = Matrix.I(4);
+                                    mat[0] = Number(numArray[0]);
+                                    mat[1] = Number(numArray[1]);
+                                    mat[4] = Number(numArray[2]);
+                                    mat[5] = Number(numArray[3]);
+                                    mat[12] = Number(numArray[4]);
+                                    mat[13] = Number(numArray[5]);
+                                }
+                            }
+                        }
+                    }
                 }
             }
             return mat;
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;