6 files changed, 86 insertions, 42 deletions

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 33a41a8e..4a8d5d41 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -88,7 +88,7 @@ exports.HtmlDocument = Montage.create(Component, {
                         //Adding observer to know when template is ready
                         this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this));
                                 this._observer.observe(this.model.views.design.document.head, {childList: true});
-                }.bind(this), template);
+                }.bind(this), template, {viewCallback: this.handleViewReady, context: this});
             } else {
                 //TODO: Identify default view (probably code)
             }
@@ -101,10 +101,14 @@ exports.HtmlDocument = Montage.create(Component, {
                 //Removing observer, only needed on initial load
                 this._observer.disconnect();
                 this._observer = null;
-                //Making callback after view is loaded
-            this.loaded.callback.call(this.loaded.context, this);
         }
     },
+    handleViewReady: {
+        value: function() {
+            //Making callback after view is loaded
+            this.loaded.callback.call(this.loaded.context, this);
+        }
+    },
     ////////////////////////////////////////////////////////////////////
         //
         closeDocument: {
diff --git a/js/document/helpers/webgl-helper.js b/js/document/helpers/webgl-helper.js
index 84ddc547..6d9ced14 100755
--- a/js/document/helpers/webgl-helper.js
+++ b/js/document/helpers/webgl-helper.js
@@ -40,7 +40,7 @@ exports.webGlDocumentHelper = Montage.create(Component, {
                         if (elt) {
                                 var matLib = MaterialsModel.exportMaterials();
                                 this._glData = [matLib];
-                                this.collectGLData(elt, this._glData );
+                                this.collectGLData(this.iframe.contentWindow.document, this._glData );
                         } else {
                                 this._glData = null
                         }
@@ -97,10 +97,6 @@ exports.webGlDocumentHelper = Montage.create(Component, {
                                                 //
                                                 if (canvas) {
                                                         //
-                                                        if (!canvas.elementModel) {
-                                                                NJUtils.makeElementModel(canvas, "Canvas", "shape", true);
-                                                        }
-                                                        //
                                                         if (canvas.elementModel) {
                                                                 if (canvas.elementModel.shapeModel.GLWorld) {
                                                                         canvas.elementModel.shapeModel.GLWorld.clearTree();
@@ -194,6 +190,13 @@ exports.webGlDocumentHelper = Montage.create(Component, {
         //
         collectGLData: {
                 value: function( elt,  dataArray ) {
+            Array.prototype.slice.call(elt.querySelectorAll('[data-RDGE-id]'),0).forEach(function(glCanvas) {
+                dataArray.push(glCanvas.elementModel.shapeModel.GLWorld.exportJSON());
+            });
+
+            // Removing the old loop that went through all the elements.
+            // TODO: Remove the following code once QE has tested it.
+/*
                         //
                         var i, data, nKids, child;
                         //
@@ -209,6 +212,7 @@ exports.webGlDocumentHelper = Montage.create(Component, {
                                         this.collectGLData( child, dataArray );
                                 }
                         }
+                        */
                 }
         }
         ////////////////////////////////////////////////////////////////////
diff --git a/js/document/models/html.js b/js/document/models/html.js
index 9aa0d27e..a367f95f 100755
--- a/js/document/models/html.js
+++ b/js/document/models/html.js
@@ -64,31 +64,8 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
     },
     ////////////////////////////////////////////////////////////////////
         //
-    userComponents: {
-        value: {}
-    },
-    ////////////////////////////////////////////////////////////////////
-        //
     documentRoot: {
         value: null
-    },
-        ////////////////////////////////////////////////////////////////////
-        //Add a reference to a component instance to the userComponents hash using the element UUID
-    setComponentInstance: {
-        value: function(instance, el) {
-            this.userComponents[el.uuid] = instance;
-        }
-    },
-    ////////////////////////////////////////////////////////////////////
-        //Returns the component instance obj from the element
-    getComponentFromElement: {
-        value: function(el) {
-            if(el) {
-                if(el.uuid) return this.userComponents[el.uuid];
-            } else {
-                return null;
-            }
-        }
     }
         ////////////////////////////////////////////////////////////////////
         ////////////////////////////////////////////////////////////////////
diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
index f1ee3d98..08a998e5 100755
--- a/js/document/templates/banner/index.html
+++ b/js/document/templates/banner/index.html
@@ -74,9 +74,27 @@
         </style>
         
         <script type="text/javascript" data-ninja-template="true">
-                function getElement(x,y) {
-                return document.elementFromPoint(x,y);
-                }
+
+            function getElement(x,y) {
+                return document.elementFromPoint(x,y);
+            }
+
+            var njmodelGet = function njmodelGet() {
+                return (this.hasOwnProperty("_model") ? this._model: document.modelGenerator.call(this));
+            };
+
+            Object.defineProperty(Object.prototype, "_model", {
+                enumerable: false,
+                value: null,
+                writable: true
+            });
+
+            Object.defineProperty(Object.prototype, "elementModel", {
+                configurable: true,
+                get: njmodelGet,
+                set: function() {
+                }
+            });
         </script>
         
         <!-- TODO: Determine if loading Montage is always needed or if it could be done author-time or on file open -->
diff --git a/js/document/templates/html/index.html b/js/document/templates/html/index.html
index 70187900..c74a7251 100755
--- a/js/document/templates/html/index.html
+++ b/js/document/templates/html/index.html
@@ -57,13 +57,32 @@
 
             .nj-element-highlight {
                  outline: 4px solid #ff0000;
-             }
+            }
         </style>
         
         <script type="text/javascript" data-ninja-template="true">
-                function getElement(x,y) {
-                return document.elementFromPoint(x,y);
-                }
+
+            function getElement(x,y) {
+                return document.elementFromPoint(x,y);
+            }
+
+            var njmodelGet = function njmodelGet() {
+                return (this.hasOwnProperty("_model") ? this._model: document.modelGenerator.call(this));
+            };
+
+            Object.defineProperty(Object.prototype, "_model", {
+                enumerable: false,
+                value: null,
+                writable: true
+            });
+
+            Object.defineProperty(Object.prototype, "elementModel", {
+                configurable: true,
+                get: njmodelGet,
+                set: function() {
+                }
+            });
+
         </script>
     
         <script type="text/javascript" data-package="../app" src="../../../../node_modules/montage/montage.js" data-ninja-template="true"></script>
diff --git a/js/document/views/design.js b/js/document/views/design.js
index f7fbf3c5..0e42dcc2 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -7,7 +7,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 ////////////////////////////////////////////////////////////////////////
 //
 var Montage =                   require("montage/core/core").Montage,
-        BaseDocumentView =      require("js/document/views/base").BaseDocumentView;
+        BaseDocumentView =      require("js/document/views/base").BaseDocumentView,
+    ElementModel =      require("js/models/element-model");
 ////////////////////////////////////////////////////////////////////////
 //      
 exports.DesignDocumentView = Montage.create(BaseDocumentView, {
@@ -22,6 +23,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {