8 files changed, 202 insertions, 54 deletions

diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 83450d0f..260ee8a0 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -11,6 +11,8 @@ exports.ComponentController = Montage.create(ElementController, {
 
     getProperty: {
         value: function(el, prop) {
+            var component = el.controller || this.application.ninja.currentDocument.getComponentFromElement(el);
+
             switch(prop) {
                 case "id":
                 case "class":
@@ -19,18 +21,20 @@ exports.ComponentController = Montage.create(ElementController, {
                 case "width":
                 case "height":
                     if(el.nodeName === "IMG" && (prop === "width" || prop === "height")) {
-                        return this.application.ninja.currentDocument.getComponentFromElement(el)[prop];
+                        return component[prop];
                     } else {
                         return ElementController.getProperty(el, prop, true);
                     }
                 default:
-                    return this.application.ninja.currentDocument.getComponentFromElement(el)[prop];
+                    return component[prop];
             }
         }
     },
 
     setProperty: {
         value: function(el, p, value) {
+            var component = el.controller || this.application.ninja.currentDocument.getComponentFromElement(el);
+
             switch(p) {
                 case "id":
                 case "class":
@@ -39,15 +43,14 @@ exports.ComponentController = Montage.create(ElementController, {
                 case "width":
                 case "height":
                     if(el.nodeName === "IMG" && (p === "width" || p === "height")) {
-                        this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value;
+                        component[p] = value;
                     } else {
                         ElementController.setProperty(el, p, value);
                     }
                     break;
                 default:
                     if(p === "min" || p === "max") value = parseFloat(value);
-
-                    this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value;
+                    component[p] = value;
                     break;
 
             }
diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index 154fb7f8..fa82d4cc 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -6,7 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 
 var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
+    Component = require("montage/ui/component").Component,
+    NJUtils     = require("js/lib/NJUtils").NJUtils;
 
 exports.SelectionController = Montage.create(Component, {
 
@@ -154,6 +155,28 @@ exports.SelectionController = Montage.create(Component, {
                 this._isDocument = true;
             }
 
+            if(item && item.controller && !item.elementModel.isComponent) {
+                var componentInfo = Montage.getInfoForObject(item.controller);
+                var componentName = componentInfo.objectName.toLowerCase();
+                switch(componentName) {
+                    case "feedreader":
+                        NJUtils.makeElementModel(item, "Feed Reader", "component", false);
+                        item.elementModel.pi = "FeedReaderPi";
+                        item.elementModel.isComponent = true;
+                        break;
+                    case "map":
+                        NJUtils.makeElementModel(item, "Map", "component", false);
+                        item.elementModel.pi = "MapPi";
+                        item.elementModel.isComponent = true;
+                        break;
+                    case "youtubechannel":
+                        NJUtils.makeElementModel(item, "Youtube Channel", "component", false);
+                        item.elementModel.pi = "YoutubeChannelPi";
+                        item.elementModel.isComponent = true;
+                        break;
+                }
+            }
+
             NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument} );
 
         }
diff --git a/js/document/html-document.js b/js/document/html-document.js
index d4db6e2f..be1f89e2 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -905,7 +905,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                 }
                         }
                 }
-                        return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+                        return {mode: 'html', document: this._userDocument, mjs: this._userComponents, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
                 } else if (this.currentView === "code"){
                         //TODO: Would this get call when we are in code of HTML?
                 } else {
@@ -928,7 +928,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                 }
                         }
                 }
-                        return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+                        return {mode: 'html', document: this._userDocument, mjs: this._userComponents, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
                 } else if (this.currentView === "code"){
                         //TODO: Would this get call when we are in code of HTML?
                 } else {
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 ) {