1 files changed, 127 insertions, 22 deletions

diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index d8f7313b..da109d45 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -182,6 +182,8 @@ exports.Stage = Montage.create(Component, {
             if(this.currentDocument && (this.currentDocument.currentView === "design")) {
                 this.currentDocument.model.scrollLeft = this._scrollLeft;
                 this.currentDocument.model.scrollTop = this._scrollTop;
+                //call configure false with the old document on the selected tool to tear down down any temp. stuff
+                this.application.ninja.toolsData.selectedToolInstance._configure(false);
             }
 
             this._currentDocument = value;
@@ -240,7 +242,7 @@ exports.Stage = Montage.create(Component, {
 
                 // Hack for now until a full component
                 this.layout.draw();
-                if(this.currentDocument) {
+                if(this.currentDocument && (this.currentDocument.currentView === "design")) {
                     this.layout.draw3DInfo(true);
                 }
             } else if(this.updatedStage) {
@@ -275,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);
 
@@ -285,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);
         }
     },
 
@@ -351,7 +340,6 @@ exports.Stage = Montage.create(Component, {
             } else {
                 this.centerStage();
             }
-
             // TODO - We will need to modify this once we support switching between multiple documents
             this.application.ninja.toolsData.selectedToolInstance._configure(true);
         }
@@ -377,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");
         }
     },
 
@@ -643,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 {
@@ -690,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,
@@ -726,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
@@ -830,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