3 files changed, 239 insertions, 48 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index 71296405..28484b71 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -17,7 +17,16 @@ var Montage = require("montage/core/core").Montage,
 
 exports.Layout = Montage.create(Component, {
 
-    canvas: { value: null },
+    canvas: {
+        value: null,
+        serializable: true
+    },
+
+    stage: {
+        value: null,
+        serializable: true
+    },
+
     ctx: { value: null },
 
     drawFillColor: { value: 'rgba(255,255,255,1)' },
@@ -102,11 +111,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 +213,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-deps.js b/js/stage/stage-deps.js
index 762c2529..462f7ca5 100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -15,6 +15,11 @@ var Montage = 			require("montage/core/core").Montage,
 
 exports.StageDeps = Montage.create(Component, {
 
+    stage: {
+        value: null,
+        serializable: true
+    },
+
     viewUtils: {
         value: viewUtils
     },
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 30ee1e40..fce73882 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -11,6 +11,11 @@ var Montage = 	require("montage/core/core").Montage,
 
 exports.Stage = Montage.create(Component, {
 
+    appModel: {
+        value: null,
+        serializable: true
+    },
+
     // TODO - Need to figure out how to remove this dependency
     // Needed by some tools that depend on selectionDrawn event to set up some logic
     drawNow: { value : false },
@@ -22,7 +27,10 @@ exports.Stage = Montage.create(Component, {
     _canvasDrawingPrefs:    { value: { "thickness" : 1.0, "color" : "#000" } },
     drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },
 
-    _iframeContainer: { value: null },
+    _iframeContainer: {
+        value: null,
+        serializable: true
+    },
 
     _scrollFlag: {value: true, writable: true},
     outFlag: { value: false, writable: true },
@@ -88,29 +96,82 @@ exports.Stage = Montage.create(Component, {
     },
 
     /** MAIN CANVASES **/
-    _canvas: { value: null },   // selection bounds, 3d normals and the overall 3d selection box use this canvas
-    canvas: { get: function() { return this._canvas; } },
+    // selection bounds, 3d normals and the overall 3d selection box use this canvas
+    _canvas: {
+        value: null,
+        serializable: true
+    },
+
+    canvas: {
+        get: function() {
+            return this._canvas;
+        }
+    },
 
     _context: { value: null },
     context: { get: function() { return this._context; } },
 
-    _layoutCanvas: { value: null },
-    layoutCanvas: { get: function() { return this._layoutCanvas; } },
+    _layoutCanvas: {
+        value: null,
+        serializable: true
+    },
 
-    _gridCanvas: { value: null },
-    gridCanvas: { get: function() { return this._gridCanvas; } },
+    layoutCanvas: {
+        get: function() {
+            return this._layoutCanvas;
+        }
+    },
+
+    _gridCanvas: {
+        value: null,
+        serializable: true
+    },
+
+    gridCanvas: {
+        get: function() {
+            return this._gridCanvas;
+        }
+    },
 
     _gridContext: { value: null },
     gridContext: { get: function() { return this._gridContext; } },
 
-    _drawingCanvas: { value: null },
-    drawingCanvas: { get: function() { return this._drawingCanvas; } },
+    _drawingCanvas: {
+        value: null,
+        serializable: true
+    },
+
+    drawingCanvas: {
+        get: function() {
+            return this._drawingCanvas;
+        }
+    },
 
     _drawingContext: { value: null },
     drawingContext: { get: function() { return this._drawingContext; } },
 
     _clickPoint: { value: { x: { value: null }, y: { value: null } } },
 
+    stageDeps: {
+        value: null,
+        serializable: true
+    },
+
+    layout: {
+        value: null,
+        serializable: true
+    },
+
+    textTool: {
+        value: null,
+        serializable: true
+    },
+
+    focusManager: {
+        value: null,
+        serializable: true
+    },
+
     // We will set this to false while moving objects to improve performance
     showSelectionBounds: { value: true },
 
@@ -182,6 +243,13 @@ exports.Stage = Montage.create(Component, {
             if(this.currentDocument && (this.currentDocument.currentView === "design")) {
                 this.currentDocument.model.scrollLeft = this._scrollLeft;
                 this.currentDocument.model.scrollTop = this._scrollTop;
+                this.currentDocument.model.userPaddingLeft = this._userPaddingLeft;
+                this.currentDocument.model.userPaddingTop = this._userPaddingTop;
+                this.currentDocument.model.documentOffsetLeft = this._documentOffsetLeft;
+                this.currentDocument.model.documentOffsetTop = this._documentOffsetTop;
+                this.currentDocument.model.userContentLeft = this._userContentLeft;
+                this.currentDocument.model.userContentTop = this._userContentTop;
+
                 //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);
             }
@@ -277,9 +345,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 +352,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);