Merge pull request #264 from mencio/document-bindings-fix

Document bindings fix - Changing the documents architecture to use bindings instead of events

1 files changed, 104 insertions, 71 deletions

diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index c7afb95c..d8f7313b 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -97,6 +97,12 @@ exports.Stage = Montage.create(Component, {
     _layoutCanvas: { value: null },
     layoutCanvas: { get: function() { return this._layoutCanvas; } },
 
+    _gridCanvas: { value: null },
+    gridCanvas: { get: function() { return this._gridCanvas; } },
+
+    _gridContext: { value: null },
+    gridContext: { get: function() { return this._gridContext; } },
+
     _drawingCanvas: { value: null },
     drawingCanvas: { get: function() { return this._drawingCanvas; } },
 
@@ -155,27 +161,49 @@ exports.Stage = Montage.create(Component, {
         set: function(value) { this._userContentBorder = value; }
     },
 
-    _activeDocument : {
-        value : null,
-        enumerable : false
+    _currentDocument: {
+        value : null
     },
 
-    activeDocument : {
+    currentDocument : {
         get : function() {
-            return this._activeDocument;
+            return this._currentDocument;
         },
-        set : function(document) {
-            ///// If the document is null set default stylesheets to null
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
+
+            if(!this._currentDocument && value.currentView === "design") {
+                this.showRulers();
+                this.hideCanvas(false);
+            }
 
-            if(!document) {
-                return false;
+            if(this.currentDocument && (this.currentDocument.currentView === "design")) {
+                this.currentDocument.model.scrollLeft = this._scrollLeft;
+                this.currentDocument.model.scrollTop = this._scrollTop;
             }
 
-            ///// setting document via binding
-            this._activeDocument = document;
+            this._currentDocument = value;
 
-        },
-        enumerable : false
+            if(!value) {
+                this.hideRulers();
+                this.hideCanvas(true);
+                drawUtils._eltArray.length = 0;
+                drawUtils._planesArray.length = 0;
+            } else if(this._currentDocument.currentView === "design") {
+                this.restoreAllPanels();
+                this.hideCanvas(false);
+                this.showRulers();
+
+                this.clearAllCanvas();
+                this.initWithDocument();
+            } else {
+                this.collapseAllPanels();
+                this.hideCanvas(true);
+                this.hideRulers();
+            }
+        }
     },
 
     _userPaddingLeft: { value: 0 },
@@ -186,8 +214,8 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._userPaddingLeft = value;
             this._documentOffsetLeft = -value;
-            this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
-            this.userContentLeft = this._documentOffsetLeft;
+            this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
+            this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
             this.updatedStage = true;
         }
     },
@@ -197,8 +225,8 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._userPaddingTop = value;
             this._documentOffsetTop = -value;
-            this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
-            this.userContentTop = this._documentOffsetTop;
+            this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
+            this.userContentTop = this._documentOffsetTop - this._scrollTop;
             this.updatedStage = true;
         }
     },
@@ -207,11 +235,14 @@ exports.Stage = Montage.create(Component, {
         value: function() {
             if(this.resizeCanvases) {
                 // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px
-                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;// - 26 - 26;
+                this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ;
+                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26;
 
                 // Hack for now until a full component
                 this.layout.draw();
+                if(this.currentDocument) {
+                    this.layout.draw3DInfo(true);
+                }
             } else if(this.updatedStage) {
                 this.layout.draw();
                 this.layout.draw3DInfo(true);
@@ -231,6 +262,7 @@ exports.Stage = Montage.create(Component, {
 
             this._context = this._canvas.getContext("2d");
             this._drawingContext= this._drawingCanvas.getContext("2d");
+            this._gridContext= this._gridCanvas.getContext("2d");
 
             // Setup event listeners
             this._drawingCanvas.addEventListener("mousedown", this, false);
@@ -270,14 +302,18 @@ exports.Stage = Montage.create(Component, {
     },
 
     initWithDocument: {
-        value: function(didSwitch) {
-            var designView = this.application.ninja.currentDocument.model.views.design;
+        value: function() {
+            var model = this.currentDocument.model,
+                designView = this.currentDocument.model.views.design,
+                didSwitch = false;
 
-            this.hideCanvas(false);
+            if(model.scrollLeft != null) {
+                didSwitch = true;
+            }
 
             // 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._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ;
+            this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;
 
             designView.iframe.contentWindow.addEventListener("scroll", this, false);
 
@@ -295,8 +331,7 @@ exports.Stage = Montage.create(Component, {
             this._scrollLeft = 0;
             this._scrollTop = 0;
 
-            this.stageDeps.handleOpenDocument();
-            this.layout.handleOpenDocument();
+            this.initialize3DOnOpenDocument();
 
             if(designView._template) {
                 var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2);
@@ -310,8 +345,8 @@ exports.Stage = Montage.create(Component, {
             }
 
             if(didSwitch) {
-                this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = this.application.ninja.currentDocument.model.scrollLeft;
-                this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = this.application.ninja.currentDocument.model.scrollTop;
+                this.currentDocument.model.views.design.document.body.scrollLeft = this.currentDocument.model.scrollLeft;
+                this.currentDocument.model.views.design.document.body.scrollTop = this.currentDocument.model.scrollTop;
                 this.handleScroll();
             } else {
                 this.centerStage();
@@ -425,9 +460,9 @@ exports.Stage = Montage.create(Component, {
     handleMousewheel: {
         value: function(event) {
             if(event._event.wheelDelta > 0) {
-                this.application.ninja.currentDocument.model.views.design.document.body.scrollTop -= 20;
+                this.currentDocument.model.views.design.document.body.scrollTop -= 20;
             } else {
-                this.application.ninja.currentDocument.model.views.design.document.body.scrollTop += 20;
+                this.currentDocument.model.views.design.document.body.scrollTop += 20;
             }
         }
     },
@@ -495,8 +530,8 @@ exports.Stage = Montage.create(Component, {
     handleScroll: {
         value: function() {
 
-            this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft;
-            this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop;
+            this._scrollLeft = this.currentDocument.model.views.design.document.body.scrollLeft;
+            this._scrollTop = this.currentDocument.model.views.design.document.body.scrollTop;
 
             this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
             this.userContentTop = this._documentOffsetTop - this._scrollTop;
@@ -519,11 +554,12 @@ exports.Stage = Montage.create(Component, {
                 this._canvas.style.visibility = "hidden";
                 this._layoutCanvas.style.visibility = "hidden";
                 this._drawingCanvas.style.visibility = "hidden";
+                this._gridCanvas.style.visibility = "hidden";
             } else {