21 files changed, 387 insertions, 174 deletions

diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
index 6a458cc7..d8c212e8 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.css
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -18,14 +18,15 @@
     width: 100%;
 }
 .treeRoot .branch .branch-label {
-    border-bottom: 1px solid #505050;
-    cursor: pointer;
-    padding: 3px 0 4px;
     background-repeat: no-repeat;
     background-position: 3px 2px;
-    box-shadow: 0 0 0 0 rgba(0,0,0,0);
-    font-weight: bold;
+    border-bottom: 1px solid #505050;
     box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+    color: #FFF;
+    cursor: pointer;
+    font-weight: bold;
+    padding: 3px 0 4px;
+    text-shadow: 1px 1px 0 #000;
 }
 
 /* First Level */
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
index b2f427b5..085b11e0 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -19,6 +19,8 @@
 /* Second level */
 .branch .branch .leaf-label {
     background-position: 25px center;
+    box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+    color: #FFF;
     padding-left: 45px;
 }
 /* Third level */
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
index d70b016c..4f9e6a72 100644
--- a/js/components/treeview/treeview.reel/treeview.html
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -26,7 +26,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name" : "Branch"
             },
             "defaultLeaf" : {
-                "module" : "js/components/treeview/presets-leaf.reel",
+                "module" : "js/components/treeview/leaf.reel",
                 "name" : "Leaf"
             },
             "scrollview": {
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index e764de4e..b9c033aa 100644
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -63,11 +63,11 @@ exports.ShapesController = Montage.create(CanvasController, {
                     canvas.height = el.height;
                     this.application.ninja.elementMediator.replaceElement(el, canvas);
                     NJevent("elementDeleted", el);
-                    this.application.ninja.selectionController.selectElement(canvas);
                     el = canvas;
                     this.toggleWebGlMode(el, value);
-                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
-                    break;
+                    el.elementModel.shapeModel.GLWorld.render();
+                    this.application.ninja.selectionController.selectElement(el);
+                    return;
                 case "strokeMaterial":
                     var sm = Object.create(MaterialsLibrary.getMaterial(value));
                     if(sm)
@@ -338,13 +338,26 @@ exports.ShapesController = Montage.create(CanvasController, {
             {
                 return;
             }
-            var world,
+            var sm,
+                fm,
+                world,
                 worldData = el.elementModel.shapeModel.GLWorld.export();
             if(worldData)
             {
                 world = new GLWorld(el, true);
                 el.elementModel.shapeModel.GLWorld = world;
+                el.elementModel.shapeModel.GLGeomObj.setWorld(world);
                 el.elementModel.shapeModel.useWebGl = true;
+                sm = Object.create(MaterialsLibrary.getMaterial("FlatMaterial"));
+                fm = Object.create(MaterialsLibrary.getMaterial("FlatMaterial"));
+                if(sm && fm)
+                {
+                    el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
+                    el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
+                    el.elementModel.shapeModel.strokeMaterial = sm;
+                    el.elementModel.shapeModel.fillMaterial = fm;
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                }
                 world.import(worldData);
             }
 
@@ -365,6 +378,10 @@ exports.ShapesController = Montage.create(CanvasController, {
                 world = new GLWorld(el, false);
                 el.elementModel.shapeModel.GLWorld = world;
                 el.elementModel.shapeModel.useWebGl = false;
+                el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(null);
+                el.elementModel.shapeModel.GLGeomObj.setFillMaterial(null);
+                el.elementModel.shapeModel.strokeMaterial = null;
+                el.elementModel.shapeModel.fillMaterial = null;
                 world.import(worldData);
             }
 
diff --git a/js/helper-classes/3D/math-utils.js b/js/helper-classes/3D/math-utils.js
index 3d24f76e..37044763 100644
--- a/js/helper-classes/3D/math-utils.js
+++ b/js/helper-classes/3D/math-utils.js
@@ -8,7 +8,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 // Class Utils
 //      Math Utility functions
 ///////////////////////////////////////////////////////////////////////
-var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
+var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils,
+        ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils,
+        Rectangle = require("js/helper-classes/3D/rectangle").Rectangle;
 
 var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, {
     ///////////////////////////////////////////////////////////////////////
@@ -536,6 +538,99 @@ var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, {
         }
     },
 
+        rectsOverlap:
+        {
+                value: function( pt, width, height,  elt )
+                {
+                        // only consider rectangles with non-zero area
+                        if ((width == 0) || (height == 0))  return false;
+
+                        // get the mins/maxs of the onput rectangle
+                        var xMin, xMax, yMin, yMax;
+                        if (width > 0)  {  xMin = pt[0];   xMax = pt[0] + width;  }
+                        else  {  xMax = pt[0];  xMin = pt[0] + width;  }
+                        if (height > 0)  {  yMin = pt[1];   yMax = pt[1] + height;  }
+                        else  {  yMax = pt[1];  yMin = pt[1] + height;  }
+
+                        // get the bounds of the element in global screen space
+                        var bounds = ViewUtils.getElementViewBounds3D( elt );
+                        var bounds3D = [];
+                        for (var i=0;  i<4;  i++)
+                                bounds3D[i] = ViewUtils.localToGlobal( bounds[i],  elt );
+
+                        // get the min/maxs for the element
+                        var xMinElt = bounds3D[0][0],  xMaxElt = bounds3D[0][0],
+                                yMinElt = bounds3D[0][1],  yMaxElt = bounds3D[0][1];
+                        for (var i=1;  i<4;  i++)
+                        {
+                                if (bounds3D[i][0] < xMinElt)  xMinElt = bounds3D[i][0];
+                                else if  (bounds3D[i][0] > xMaxElt)  xMaxElt = bounds3D[i][0];
+                                if (bounds3D[i][1] < yMinElt)  yMinElt = bounds3D[i][1];
+                                else if  (bounds3D[i][1] > yMaxElt)  yMaxElt = bounds3D[i][1];
+                        }
+
+                        // test 1.  Overall bounding box test
+                        if ((xMaxElt < xMin) || (xMinElt > xMax) || (yMaxElt < yMin) || (yMinElt > yMax))
+                                return false;
+                        
+                        // test 2.  See if any of the corners of the element are contained in the rectangle
+                        var rect = Object.create(Rectangle, {});
+                        rect.set( pt[0], pt[1], width, height );
+                        for (var i=0;  i<4;  i++)