Merge pull request #254 from mqg734/Dom-Architecture

Updates to stage code for handling multiple document workflow.

3 files changed, 58 insertions, 89 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index 9c5e2167..71959f86 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -64,10 +64,6 @@ exports.Layout = Montage.create(Component, {
             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);
         }
     },
 
@@ -89,7 +85,7 @@ exports.Layout = Montage.create(Component, {
 
             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);
+                this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true);
                 // Index of the current container
                 containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer);
 
diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js
index 0d53696b..896d4a5b 100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -26,38 +26,10 @@ exports.StageDeps = Montage.create(Component, {
         value: drawUtils
     },
 
-    _userContentLeft: {
-        value: null
-    },
-
-    userContentLeft: {
-        get: function() { return this._userContentLeft; },
-        set: function(value) {
-            if(value != null) {
-                viewUtils.setUserContentLeft(value);
-            }
-        }
-    },
-
-    _userContentTop: {
-        value: null
-    },
-
-    userContentTop: {
-        get: function() { return this._userContentTop; },
-        set: function(value) {
-            if(value != null) {
-                viewUtils.setUserContentTop(value);
-            }
-        }
-    },
-
     deserializedFromTemplate: {
         value: function() {
 
             this.eventManager.addEventListener("appLoaded", this, false);
-            this.eventManager.addEventListener("openDocument", this, false);
-            this.eventManager.addEventListener("switchDocument", this, false);
 
             // Initialize Deps
             // HACK
@@ -76,19 +48,6 @@ exports.StageDeps = Montage.create(Component, {
 
     handleAppLoaded: {
         value: function() {
-
-            Object.defineBinding(this, "userContentLeft", {
-                boundObject: this.stage,
-                boundObjectPropertyPath: "_userContentLeft",
-                oneway: true
-            });
-
-            Object.defineBinding(this, "userContentTop", {
-                boundObject: this.stage,
-                boundObjectPropertyPath: "_userContentTop",
-                oneway: true
-            });
-
             // Setup the snap manager pointer to the app model
             snapManager.appModel = this.application.ninja.appModel;
             // bind the snap properties to the snap manager
@@ -105,7 +64,7 @@ exports.StageDeps = Montage.create(Component, {
 
             workingPlane = [0,0,1,0];
 
-            snapManager.reload2DCache();
+            snapManager._isCacheInvalid = true;
             snapManager.setupDragPlaneFromPlane (workingPlane);
 
             drawUtils.initializeFromDocument();
@@ -116,9 +75,8 @@ exports.StageDeps = Montage.create(Component, {
         value: function(){
             workingPlane = [0,0,1,0];
 
+            snapManager._isCacheInvalid = true;
             snapManager.setupDragPlaneFromPlane (workingPlane);
-            snapManager.reload2DCache();
-
 
             drawUtils.initializeFromDocument();
         }
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 69cfa7ba..6d421e4b 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -117,9 +117,6 @@ exports.Stage = Montage.create(Component, {
     _userContentTop:        { value: 0 },
     _userContentBorder:     { value: 0 },
 
-    _maxHorizontalScroll:   { value: 0 },
-    _maxVerticalScroll:     { value: 0 },
-
     viewport: {
         get: function () { return this._viewport; },
         set: function(value) { this._viewport = value; }
@@ -235,14 +232,6 @@ exports.Stage = Montage.create(Component, {
             this._context = this._canvas.getContext("2d");
             this._drawingContext= this._drawingCanvas.getContext("2d");
 
-            this._scrollLeft = this._iframeContainer.scrollLeft;
-            this._scrollTop = this._iframeContainer.scrollTop;
-            this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
-            this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
-
-            // TODO: Fix the mouse wheel scroll
-            // this._canvas.addEventListener("mousewheel", this, false);
-
             // Setup event listeners
             this._drawingCanvas.addEventListener("mousedown", this, false);
             this._drawingCanvas.addEventListener("mouseup", this, false);
@@ -256,6 +245,7 @@ exports.Stage = Montage.create(Component, {
 
 
             this.eventManager.addEventListener( "openDocument", this, false);
+            this.eventManager.addEventListener( "switchDocument", this, false);
             this.eventManager.addEventListener( "enableStageMove", this, false);
             this.eventManager.addEventListener( "disableStageMove", this, false);
 
@@ -269,30 +259,66 @@ exports.Stage = Montage.create(Component, {
     // Event details will contain the active document prior to opening a new one
     handleOpenDocument: {
         value: function(evt) {
+            this.initWithDocument();
+        }
+    },
+
+    handleSwitchDocument: {
+        value: function(evt) {
+            this.initWithDocument(true);
+        }
+    },
+
+    initWithDocument: {
+        value: function(didSwitch) {
+            var designView = this.application.ninja.currentDocument.model.views.design;
+
             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;
 
+            designView.iframe.contentWindow.addEventListener("scroll", this, false);
+
+            this.addPropertyChangeListener("appModel.show3dGrid", this, false);
+
+            this._userPaddingLeft = 0;
+            this._userPaddingTop = 0;
+
+            this._documentOffsetLeft = 0;
+            this._documentOffsetTop  = 0;
 
-            this.userContentBorder = 0;
+            this._userContentLeft = 0;
+            this._userContentTop = 0;
 
             this._scrollLeft = 0;
             this._scrollTop = 0;
-            this._userContentLeft = this._documentOffsetLeft;
-            this._userContentTop = this._documentOffsetTop;
 
-            this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11;
-            this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11;
-            this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false);
+            this.stageDeps.handleOpenDocument();
+            this.layout.handleOpenDocument();
 
-            // TODO - We will need to modify this once we support switching between multiple documents
-            this.application.ninja.toolsData.selectedToolInstance._configure(true);
+            if(designView._template) {
+                var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2);
+                var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2);
+                if(initialLeft > this.documentOffsetLeft) {
+                    this.userPaddingLeft = -initialLeft;
+                }
+                if(initialTop > this.documentOffsetTop) {
+                    this.userPaddingTop = -initialTop;
+                }
+            }
 
-            this.addPropertyChangeListener("appModel.show3dGrid", this, false);
+            if(didSwitch) {</