3 files changed, 99 insertions, 39 deletions

diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js
index 567f481c..6c141108 100644
--- a/js/document/templates/montage-html/main.reel/main.js
+++ b/js/document/templates/montage-html/main.reel/main.js
@@ -17,7 +17,25 @@ exports.Main = Montage.create(Component, {
      */
     templateDidLoad: {
         value: function(){
-            window.addComponent = this.addComponentToUserDocument;
+            var self = this;
+            window.addComponent = function(element, data, callback) {
+                var component;
+
+                component = require.async(data.path)
+                    .then(function(component) {
+                        var componentRequire = component[data.name];
+                        var componentInstance = componentRequire.create();
+
+                        componentInstance.element = element;
+                        //componentInstance.deserializedFromTemplate();
+                        componentInstance.needsDraw = true;
+                        componentInstance.ownerComponent = self;
+
+                        callback(componentInstance, element);
+                    })
+                    .end();
+
+            };
 //            window.addBinding = this.addBindingToUserDocument;
 
             // Dispatch event when this template has loaded.
@@ -27,28 +45,5 @@ exports.Main = Montage.create(Component, {
             document.body.dispatchEvent( newEvent );
 
         }
-    },
-
-    // Adding components to the user document by using a async require.
-    addComponentToUserDocument:{
-        value:function(element, data, callback){
-
-            var component;
-
-            component = require.async(data.path)
-                .then(function(component) {
-                    var componentRequire = component[data.name];
-                    var componentInstance = componentRequire.create();
-
-                    componentInstance.element = element;
-                    //componentInstance.deserializedFromTemplate();
-                    componentInstance.needsDraw = true;
-
-                    callback(componentInstance, element);
-                })
-                .end();
-
-        }
     }
-
 });
\ No newline at end of file
diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js
index 1caacd00..a755e9e2 100755
--- a/js/helper-classes/3D/snap-manager.js
+++ b/js/helper-classes/3D/snap-manager.js
@@ -471,7 +471,8 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                 value: function( plane ) {
                         this._elementCache = new Array;
 
-                        var stage = this.getStage();
+//                      var stage = this.getStage();
+                        var stage = this.application.ninja.currentSelectedContainer || this.getStage();
                         this.hLoadElementCache( stage,  plane, 0 );
             this._isCacheInvalid = false;
 
@@ -570,6 +571,11 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
 
         hLoadElementCache : {
                 value: function( elt, plane, depth ) {
+            if(depth > 1)
+            {
+                return;
+            }
+
                         if (depth > 0)
                         {
                                 // check if the element is on the specified plane
@@ -590,8 +596,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                     elt.elementModel.isIn2DSnapCache = false;
                         }
 
-            // TODO - Don't traverse components' children
-//            if(elt.elementModel && elt.elementModel.isComponent)
+            // TODO - Don't traverse svg and components' children
             if(elt.nodeName.toLowerCase() === "svg" || (elt.elementModel && (elt.elementModel.isComponent || (elt.elementModel.selection === "SVG"))))
             {
                 return;
@@ -964,7 +969,8 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
         snapToElements : {
                 value: function( screenPt,  hitRecs ) {
                         // start at the stage.
-                        var stage = this.getStage();
+//                      var stage = this.getStage();
+            var stage = this.application.ninja.currentSelectedContainer || this.getStage();
 
                         // the root should be the 'view' canvas, so the first matrix is the camera
                         viewUtils.setViewportObj( stage );
@@ -980,6 +986,10 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
         {
                 value: function( elt, hitRecs, depth, globalScrPt )
                 {
+            if(depth > 1)
+            {
+                return;
+            }
                         // hit test the current object
                         var hit;
                         if (depth > 0)  // don't snap to the root
@@ -1001,8 +1011,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                                 }
                         }
 
-            // TODO - Don't traverse components' children
-//            if(elt.elementModel && elt.elementModel.isComponent)
+            // TODO - Don't traverse svg and components' children
             if(elt.nodeName.toLowerCase() === "svg" || (elt.elementModel && (elt.elementModel.isComponent || (elt.elementModel.selection === "SVG"))))
             {
                 return;
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index b4eec771..87c68a52 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -23,6 +23,36 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             "text": "styles",
             "children": [
                 {
+                    "text": "Widgets",
+                    "children": [
+                        {
+                            "text": "Feed Reader",
+                            "dataFile" : "node_modules/components-data/feed-reader.json",
+                            "component": "feedreader"
+                        },
+                        {
+                            "text": "Map",
+                            "dataFile" : "node_modules/components-data/map.json",
+                            "component": "map"
+                        },
+                        {
+                            "text": "Picasa Carousel",
+                            "dataFile" : "node_modules/components-data/picasa-carousel.json",
+                            "component": "picasa-carousel"
+                        },
+                        {
+                            "text": "Search Bar",
+                            "dataFile" : "node_modules/components-data/searchfield.json",
+                            "component": "searchfield"
+                        },
+                        {
+                            "text": "Youtube Channel",
+                            "dataFile" : "node_modules/components-data/youtube-channel.json",
+                            "component": "youtube-channel"
+                        }
+                    ]
+                },
+                {
                     "text": "Montage Components",
                     "children": [
                         {
@@ -50,7 +80,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                             "dataFile" : "node_modules/components-data/number-input.json",
                             "component": "numberInput"
                         },
-                        {
+                       {
                             "text": "Select Input",
                             "dataFile" : "node_modules/components-data/select.json",
                             "component": "select"
@@ -129,15 +159,19 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     _loadComponents: {
         value: function() {
 
-            this.componentsToLoad = this.components.children[0].children.length;
+            for(var cat in this.components.children) {
+
+                this.componentsToLoad += this.components.children[cat].children.length;
+
+                for(var i = 0, component; component = this.components.children[cat].children[i]; i++) {
+                    var req = new XMLHttpRequest();
+                    //req.identifier = "searchRequest";
+                    req.open("GET", component.dataFile);
+                    req.addEventListener("load", this, false);
+                    req.addEventListener("error", this, false);