2 files changed, 127 insertions, 23 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index 71296405..1831f4e7 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -102,11 +102,11 @@ exports.Layout = Montage.create(Component, {
                 // Make an array copy of the line node list which is not an array like object
                 this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true);
                 // Index of the current container
-                containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer);
+                containerIndex = this.domTree.indexOf(this.currentDocument.model.domContainer);
 
                 if(containerIndex < 0) {
                     // Stage is the container.
-                    this.domTree = Array.prototype.slice.call(this.application.ninja.currentSelectedContainer.childNodes, 0);
+                    this.domTree = Array.prototype.slice.call(this.currentDocument.model.domContainer.childNodes, 0);
                 } else {
                     // Child nodes of the container
                     this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0);
@@ -204,7 +204,7 @@ exports.Layout = Montage.create(Component, {
                 bounds3D[j] = tmpPt;
             }
 
-            if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) {
+            if(item.uuid === this.currentDocument.model.domContainer.uuid) {
                 this.ctx.save();
                 this.ctx.strokeStyle = "#C61F00";
 
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 30ee1e40..da109d45 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -277,9 +277,6 @@ exports.Stage = Montage.create(Component, {
 
             this.eventManager.addEventListener( "appMouseUp", this, false);
 
-
-            this.eventManager.addEventListener( "openDocument", this, false);
-            this.eventManager.addEventListener( "switchDocument", this, false);
             this.eventManager.addEventListener( "enableStageMove", this, false);
             this.eventManager.addEventListener( "disableStageMove", this, false);
 
@@ -287,19 +284,9 @@ exports.Stage = Montage.create(Component, {
             this.eventManager.addEventListener( "elementChanging", this, false);
             this.eventManager.addEventListener( "elementChange", this, false);
 
-        }
-    },
-
-    // Event details will contain the active document prior to opening a new one
-    handleOpenDocument: {
-        value: function(evt) {
-            this.initWithDocument();
-        }
-    },
+            this.addPropertyChangeListener("currentDocument.model.domContainer", this, true);
+//            this.addPropertyChangeListener("currentDocument.model.domContainer", this);
 
-    handleSwitchDocument: {
-        value: function(evt) {
-            this.initWithDocument(true);
         }
     },
 
@@ -378,6 +365,17 @@ exports.Stage = Montage.create(Component, {
                     this.updatedStage = true;
                 }
             }
+            /*
+            else if(notification.currentPropertyPath === "currentDocument.model.domContainer") {
+                if()
+            }
+            */
+        }
+    },
+
+    handleWillChange: {
+        value: function(notification) {
+//            console.log("stage -> container is about to change");
         }
     },
 
@@ -644,10 +642,10 @@ exports.Stage = Montage.create(Component, {
             if(selectable) {
 
                 if(this.currentDocument.inExclusion(element) !== -1) {
-                    return this.application.ninja.currentSelectedContainer;
+                    return this.currentDocument.model.domContainer;
                 }
 
-                var activeContainerId = this.application.ninja.currentSelectedContainer.uuid;
+                var activeContainerId = this.currentDocument.model.domContainer.uuid;
                 if(element.parentNode.uuid === activeContainerId) {
                     return element;
                 } else {
@@ -691,10 +689,16 @@ exports.Stage = Montage.create(Component, {
 
     draw: {
         value: function() {
+            if(!this.currentDocument) return;
+
             this.clearCanvas();
 
             drawUtils.updatePlanes();
 
+            if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) {
+                this.drawDomContainer(this.currentDocument.model.domContainer);
+            }
+
             //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change
             if(this.application.ninja.selectedElements.length) {
                 // drawUtils.drawSelectionBounds handles the single selection case as well,
@@ -727,9 +731,6 @@ exports.Stage = Montage.create(Component, {
 
     },
 
-
-
-
     /**
      * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection
      *                               Uses the _canvasDrawingPrefs for line thickness and color
@@ -831,6 +832,109 @@ exports.Stage = Montage.create(Component, {
         }
     },
 
+
+    drawDomContainer: {
+        value: function(elt) {
+
+
+            this.stageDeps.viewUtils.setViewportObj( elt );
+            var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt );
+
+            // convert the local bounds to the world
+
+
+
+            var zoomFactor = 1;
+            if (this._viewport && this._viewport.style && this._viewport.style.zoom) {
+                zoomFactor = Number(this._viewport.style.zoom);
+            }
+
+            var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt );
+            for (var j=0;  j<4;  j++) {
+                var localPt = bounds3D[j];
+                var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat);
+
+                if(zoomFactor !== 1) {
+                    tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor);
+
+                    tmpPt[0] += this._scrollLeft*(zoomFactor - 1);
+                    tmpPt[1] += this._scrollTop*(zoomFactor - 1);
+                }
+                bounds3D[j] = tmpPt;
+            }
+
+            // Draw 3 outlines
+//            for(var i = 0; i < 3)
+
+            this.context.save();
+            // draw it
+            this.context.strokeStyle = "#ff0000";
+            this.context.lineWidth = 1;
+
+
+            this.context.beginPath();
+
+            this.context.moveTo( bounds3D[3][0] + 0.5 ,  bounds3D[3][1] - 0.5 );
+
+            // This more granular approach lets us specify different gaps for the selection around the element
+            this.context.lineTo( bounds3D[0][0] - 0.5 ,  bounds3D[0][1] - 0.5 );
+            this.context.lineTo( bounds3D[1][0] - 0.5 ,  bounds3D[1][1] + 0.5 );
+            this.context.lineTo( bounds3D[2][0] + 0.5  ,  bounds3D[2][1] + 0.5 );
+            this.context.lineTo( bounds3D[3][0] + 0.5  ,  bounds3D[3][1] + 0.5 );
+
+            this.context.closePath();
+            this.context.stroke();
+
+            this.context.restore();
+
+/*
+
+            this.context.save();
+            // draw it
+            this.context.strokeStyle = "rgba(0,11,61,0.8)";
+            this.context.lineWidth = 1;
+
+
+            this.context.beginPath();
+
+            this.context.moveTo( bounds3D[3][0] + 1.5 ,  bounds3D[3][1] - 1.5 );
+
+            // This more granular approach lets us specify different gaps for the selection around the element
+            this.context.lineTo( bounds3D[0][0] - 1.5 ,  bounds3D[0][1] - 1.5 );
+            this.context.lineTo( bounds3D[1][0] - 1.5 ,  bounds3D[1][1] + 1.5 );
+            this.context.lineTo( bounds3D[2][0] + 1.5  ,  bounds3D[2][1] + 1.5 );
+            this.context.lineTo( bounds3D[3][0] + 1.5  ,  bounds3D[3][1] + 1.5 );
+
+            this.context.closePath();
+            this.context.stroke();
+
+            this.context.restore();
+
+
+            this.context.save();
+            // draw it
+            this.context.strokeStyle = "rgba(255,0,0,0.3)";
+            this.context.lineWidth = 1;
+
+
+            this.context.beginPath();
+
+            this.context.moveTo( bounds3D[3][0] + 2.5 ,  bounds3D[3][1] - 2.5 );
+
+            // This more granular approach lets us specify different gaps for the selection around the element
+            this.context.lineTo( bounds3D[0][0] - 2.5 ,  bounds3D[0][1] - 2.5 );
+            this.context.lineTo( bounds3D[1][0] - 2.5 ,  bounds3D[1][1] + 2.5