16 files changed, 634 insertions, 176 deletions

diff --git a/js/controllers/elements/canvas-controller.js b/js/controllers/elements/canvas-controller.js
index 7af7e824..b8894c18 100755
--- a/js/controllers/elements/canvas-controller.js
+++ b/js/controllers/elements/canvas-controller.js
@@ -33,5 +33,13 @@ exports.CanvasController = Montage.create(ElementController, {
                     ElementController.setProperty(el, p, value);
             }
         }
+    },
+
+    setProperties: {
+        value: function(element, properties) {
+            for(var property in properties) {
+                this.setProperty(element, property, properties[property]);
+            }
+        }
     }
 });
\ No newline at end of file
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index cd7fa16d..e9dde5fc 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -396,8 +396,8 @@ exports.ShapesController = Montage.create(CanvasController, {
             if(isFill)
             {
                 // Properties Panel asks for fill color even for shapes that only have strokes
-                // Check that shape object has a getFillColor method before getting fills
-                if(el.elementModel.shapeModel.GLGeomObj.getFillColor)
+                // Check that shape object supports fills
+                if(el.elementModel.shapeModel.GLGeomObj.canFill)
                 {
                     return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getFillColor());
                 }
@@ -494,28 +494,36 @@ exports.ShapesController = Montage.create(CanvasController, {
                 webGl;
             if(isFill)
             {
-                if(mode)
+                // skip shape types that don't have fill color
+                if(el.elementModel.shapeModel.GLGeomObj.canFill)
                 {
-                    switch (mode) {
-                        case 'nocolor':
-                            el.elementModel.shapeModel.GLGeomObj.setFillColor(null);
-                            break;
-                        case 'gradient':
-                            if(el.elementModel.shapeModel.useWebGl)
-                            {
-                                this._setGradientMaterial(el, color.color.gradientMode, isFill);
-                            }
-                            el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops});
-                            break;
-                        default:
-                            if(el.elementModel.shapeModel.useWebGl)
-                            {
-                                this._setFlatMaterial(el, isFill);
-                            }
-                            webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
-                            el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
+                    if(mode)
+                    {
+                        switch (mode) {
+                            case 'nocolor':
+                                el.elementModel.shapeModel.GLGeomObj.setFillColor(null);
+                                break;
+                            case 'gradient':
+                                if(el.elementModel.shapeModel.useWebGl)
+                                {
+                                    this._setGradientMaterial(el, color.color.gradientMode, isFill);
+                                }
+                                el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops});
+                                break;
+                            default:
+                                if(el.elementModel.shapeModel.useWebGl)
+                                {
+                                    this._setFlatMaterial(el, isFill);
+                                }
+                                webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
+                                el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
+                        }
                     }
                 }
+                else
+                {
+                    return;
+                }
             }
             else
             {
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index a5428ea3..7bd77c3a 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -111,6 +111,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
             this.eventManager.addEventListener("elementAdded", this, false);
             this.eventManager.addEventListener("elementsRemoved", this, false);
             this.eventManager.addEventListener("elementChange", this, false);
+            this.eventManager.addEventListener("elementChanging", this, false);
             this.eventManager.addEventListener("closeDocument", this, false);
             this.eventManager.addEventListener("elementReplaced", this, false);
                 }
@@ -227,20 +228,26 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
     // TODO - Check why handleElementChange is being fired before handleAddElement
     handleElementChange: {
         value: function(event) {
-            if(!event.detail || !event.detail.data)
-            {
+            this._elementChangeHelper(event);
+        }
+    },
+
+    handleElementChanging: {
+        value: function(event) {
+            this._elementChangeHelper(event);
+        }
+    },
+
+    _elementChangeHelper: {
+        value: function(event) {
+            if(!event.detail || !event.detail.data) {
                 return;
             }
             var els = event.detail.data.els;
-            if(els && this._shouldUpdatePlanes(event.detail.data.prop))
-            {
-                var len = els.length,
-                    i = 0,
-                    item;
-
-                for(i=0; i < len; i++) {
-                    if(els[i].elementModel.props3D.elementPlane)
-                    {
+            if(els && this._shouldUpdatePlanes(event.detail.data.prop)) {
+                var len = els.length;
+                for(var i=0; i < len; i++) {
+                    if(els[i].elementModel.props3D.elementPlane) {
                         els[i].elementModel.props3D.elementPlane.init();
                     }
                 }
@@ -796,20 +803,21 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                                 context.stroke();
 
                                 this._selectionCtr = MathUtils.getCenterFromBounds(3, bounds3D);
-                                console.log("selection center, single elt case - ", this._selectionCtr);
+//                              console.log("selection center, single elt case - ", this._selectionCtr);
                                 
                                 this.viewUtils.popViewportObj();
                         }
                         else
                         {
                                 // get the plane from the first element to compare against the other elements
+                                var dot;
                                 var flat = true;
-                                var plane = this.viewUtils.getElementPlane( eltArray[0] );
+                                var plane = this.viewUtils.getUnprojectedElementPlane( eltArray[0] );
                                 for (i=1;  i<len;  i++)
                                 {
                                         elt = eltArray[i];
-                                        var plane2 = this.viewUtils.getElementPlane( elt );
-                                        var dot = MathUtils.dot3(plane,plane2);
+                                        var plane2 = this.viewUtils.getUnprojectedElementPlane( elt );
+                                        dot = Math.abs( MathUtils.dot3(plane,plane2) );
                                         if (MathUtils.fpCmp(dot, 1) != 0)
                                         {
                                                 flat = false;
@@ -825,6 +833,19 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                                         }
                                 }
 
+                                // if all of the planes are aligned, check if they are aligned with the view direction
+                                if (flat)
+                                {
+                                        var stage = this.application.ninja.currentDocument.documentRoot;
+                                        var stageMat = this.viewUtils.getMatrixFromElement(stage);
+                                        var viewDir = [ stageMat[8], stageMat[9], stageMat[10] ];
+                                        viewDir = vecUtils.vecNormalize( 3, viewDir );
+                                        dot = Math.abs( MathUtils.dot3(plane,viewDir) );
+                                        if (MathUtils.fpCmp(dot, 1) != 0)
+                                                flat = false;
+                                }
+//                              console.log( "drawSelectionBounds, flat: " + flat );
+
                                 // if all the elements share the same plane, draw the 2D rectangle
                                 if (flat)
                                 {