5 files changed, 94 insertions, 44 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index 8a53a08b..a096848e 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -53,44 +53,26 @@ exports.Layout = Montage.create(Component, {
             this.ctx.lineWidth = this.ctxLineWidth;
             this.ctx.fillStyle = this.drawFillColor;
 
-//            this.eventManager.addEventListener("elementAdded", this, false);
-            this.eventManager.addEventListener("elementDeleted", this, false);
-
             this.eventManager.addEventListener("selectionChange", this, false);
-
-            this.eventManager.addEventListener("deleteSelection", this, false);
+            this.eventManager.addEventListener("elementsRemoved", this, false);
         }
     },
 
     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: {
+    handleElementsRemoved: {
         value: function(event) {
             this.draw();
             this.draw3DInfo(false);
@@ -99,30 +81,39 @@ 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;
 
             // Draw the non selected elements
             if(!event.detail.isDocument) {
-                var tmp = event.detail.elements.map(function(element){ return element._element});
-
                 this.elementsToDraw = this.domTree.filter(function(value) {
-                    return (tmp.indexOf(value) === -1);
+                    return (event.detail.elements.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
@@ -165,7 +156,7 @@ exports.Layout = Montage.create(Component, {
     drawTagOutline: {
         value: function (item) {
 
-            if(!item) return;
+            if(!item || (item.nodeType !== 1)) return;
 
             // TODO Bind the layoutview mode to the current document
             // var mode  = this.application.ninja.currentDocument.layoutMode;
@@ -348,7 +339,11 @@ exports.Layout = Montage.create(Component, {
 
     _elementName: {
         value: function(item) {
-            return this.application.ninja.elementMediator.getNJProperty(item, "selection");
+            if(item.elementModel && item.elementModel.hasOwnProperty("selection")) {
+                return item.elementModel['selection'];
+            } else {
+                return "";
+            }
         }
     }
 
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index ad67cada..1f471431 100755
--- a/js/stage/stage-view.reel/stage-view.js
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -200,14 +200,18 @@ exports.StageView = Montage.create(Component, {
     },
     showRulers:{
         value:function(){
-            this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')";
-            this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')";
+            this.application.ninja.rulerTop.style.display = "block";
+            this.application.ninja.rulerLeft.style.display = "block";
+//            this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')";
+//            this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')";
         }
     },
     hideRulers:{
         value:function(){
-            this.application.ninja.rulerTop.style.background = "rgb(128,128,128)";
-            this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)";
+            this.application.ninja.rulerTop.style.display = "none";
+            this.application.ninja.rulerLeft.style.display = "none";
+//            this.application.ninja.rulerTop.style.background = "rgb(128,128,128)";
+//            this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)";
         }
     },
 
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 812e3d55..f796303c 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -50,6 +50,10 @@
                     "element" : {"#": "textToolObject"}
                 }
             },
+
+            "focusManager": {
+                "object": "js/components/focus-manager.reel"
+            },
             
             "owner": {
                 "module": "js/stage/stage.reel",
@@ -63,7 +67,8 @@
                     "stageDeps": {"@": "StageDeps1"},
                     "layout":   {"@": "layout1"},
                                         "stageView": {"@": "stageView"},
-                    "textTool": {"@": "textTool"}
+                    "textTool": {"@": "textTool"},
+                    "focusManager": {"@": "focusManager"}
                 },
                 "bindings": {
                     "currentDocumentStageView": {
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 4c1d046b..ec8c0e55 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -170,8 +170,7 @@ exports.Stage = Montage.create(Component, {
 
                 // Hack for now until a full component
                 this.layout.draw();
-            }
-            else if(this.updatedStage) {
+            } else if(this.updatedStage) {
                 this.layout.draw();
                 this.layout.draw3DInfo(true);
             }
@@ -235,6 +234,10 @@ exports.Stage = Montage.create(Component, {
 
             this.hideCanvas(false);
 
+            // Recalculate the canvas sizes because of splitter resizing
+            this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ;
+            this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
+
             this._documentRoot = this.application.ninja.currentDocument.documentRoot;
             this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
 
@@ -319,6 +322,10 @@ exports.Stage = Montage.create(Component, {