5 files changed, 33 insertions, 38 deletions

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index ab390fc6..f35972b6 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -71,8 +71,7 @@ exports.Breadcrumb = Montage.create(Component, {
             // This is always the top container which is now hardcoded to body
             this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": "Body"});
 
-            // This is for the timeline -- Disable it since the timeline should not know about this object
-            // NJevent('layerBinding',{selected:false ,element:this.container})
+
 
         }
     },
diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index c713b6e5..154fb7f8 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -90,15 +90,11 @@ exports.SelectionController = Montage.create(Component, {
         }
     },
 
-     handleSwitchDocument: {
+    handleSwitchDocument: {
         value: function() {
             if(this.application.ninja.documentController.activeDocument.currentView === "design"){
                 this._selectedItems = this.application.ninja.selectedElements.slice(0);
-                if(this._selectedItems.length === 0 ){
-                    this._isDocument = true;
-                }else{
-                    this._isDocument = false;
-                }
+                this._isDocument = this._selectedItems.length === 0;
                 NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument} );
             }
         }
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index df24f556..049145ce 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -351,20 +351,18 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) {
                 return false;
         };
 
-        this.generateUniqueNodeID = function()
-        {
+        this.generateUniqueNodeID = function() {
                 var str = "" + this._nodeCounter;
                 this._nodeCounter++;
                 return str;
-        }
+        };
 
     
     // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state
     // in the case of a procedurally built scene an init state is not needed for loading data
         if (this._useWebGL) {
                 rdgeStarted = true;
-                var id = this._canvas.getAttribute( "data-RDGE-id" ); 
-                this._canvas.rdgeid = id;
+                this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" );
                 g_Engine.registerCanvas(this._canvas, this);
                 RDGEStart( this._canvas );
                 this._canvas.task.stop()
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index 3215e928..a396ea28 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -66,6 +66,7 @@ exports.Splitter = Montage.create(Component, {
             var storedData = this.application.localStorage.getItem(this.element.getAttribute("data-montage-id"));
             if(storedData && this.element.getAttribute("data-montage-id") !== null) {
                 this._collapsed = storedData.value;
+
             } else {
                 this._collapsed = false;
             }
@@ -77,13 +78,11 @@ exports.Splitter = Montage.create(Component, {
     draw: {
         value: function() {
             if(this.collapsed) {
-                
                 if(this.panel.element) this.panel.element.classList.add("collapsed");
                 else this.panel.classList.add("collapsed");
                 this.element.classList.add("collapsed");
                 if(this._resizeBar != null) this.resizeBar.classList.add("collapsed");
-            }
-            else {
+            } else {
                 if(this.panel.element) this.panel.element.classList.remove("collapsed");
                 else this.panel.classList.remove("collapsed");
                 this.element.classList.remove("collapsed");
@@ -92,6 +91,12 @@ exports.Splitter = Montage.create(Component, {
         }
     },
 
+    didDraw: {
+        value: function() {
+            this.application.ninja.stage.resizeCanvases = true;
+        }
+    },
+
     handleClick : {
         value: function() {
             if (!this.disabled) {
diff --git a/js/stage/layout.js b/js/stage/layout.js
index 8a53a08b..6be2df1d 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -64,31 +64,17 @@ exports.Layout = Montage.create(Component, {
 
     handleOpenDocument: {
         value: function() {
-            // Initial elements to draw is the entire node list
-            if(this.application.ninja.documentController.activeDocument.currentView === "design"){//only for designer view
-                this.elementsToDraw = this.application.ninja.documentController.activeDocument._liveNodeList;
+            // Initial elements to draw are the childrens of the root element
+            if(this.application.ninja.documentController.activeDocument.currentView === "design") {
+                this.elementsToDraw = this.application.ninja.documentController.activeDocument.documentRoot.childNodes;
             }
+
             // Draw the elements and the 3d info
             this.draw();
             this.draw3DInfo(false);
         }
     },
 
-    // No need to keep track of the added elements. We now have a live node list of the dom
-    handleElementAdded: {
-        value: function(event) {
-            // this.domTree.push(event.detail);
-            // this.draw();
-            // this.draw3DInfo(false);
-        }
-    },
-
-    handleElementDeleted: {
-        value: function(event) {
-            //this.domTree.splice(this.domTree.indexOf(event.detail), 1);
-        }
-    },
-
     // Redraw stage only once after all deletion is completed
     handleDeleteSelection: {
         value: function(event) {
@@ -99,14 +85,25 @@ exports.Layout = Montage.create(Component, {
 
     handleSelectionChange: {
         value: function(event) {
+            var containerIndex;
 
             if(this.application.ninja.documentController.activeDocument === null){
                 return;
             }
 
-            // Make an array copy of the line node list which is not an array like object
-            if(this.application.ninja.documentController.activeDocument.currentView === "design"){//only for designer view
+            if(this.application.ninja.documentController.activeDocument.currentView === "design"){
+                // Make an array copy of the line node list which is not an array like object
                 this.domTree = Array.prototype.slice.call(this.application.ninja.documentController.activeDocument._liveNodeList, 0);
+                // Index of the current container
+                containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer);
+
+                if(containerIndex < 0) {
+                    // Stage is the container.
+                    this.domTree = Array.prototype.slice.call(this.application.ninja.currentSelectedContainer.childNodes, 0);
+                } else {
+                    // Child nodes of the container
+                    this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0);
+                }
             }
             // Clear the elements to draw
             this.elementsToDraw.length = 0;
@@ -119,10 +116,10 @@ exports.Layout = Montage.create(Component, {
                     return (tmp.indexOf(value) === -1);
                 });
             } else {
-                this.elementsToDraw = this.domTree;
+                this.elementsToDraw = Array.prototype.slice.call(this.domTree, 0);
             }
 
-            this.draw(); // Not a reel yet :)
+            this.draw(); // Not a reel yet
             this.draw3DInfo(false);
 
             // Clear the domTree copy