3 files changed, 90 insertions, 17 deletions

diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css
index 13537ba1..2c2e30d3 100755
--- a/js/stage/stage.reel/stage.css
+++ b/js/stage/stage.reel/stage.css
@@ -12,6 +12,16 @@
     overflow: hidden;
 }
 
+.montage-editor-container {
+    z-index: 8;
+    display: none;
+    position: absolute;
+}
+
+.stageAndScenesContainer .montage-editor {
+    -webkit-user-select:text;
+}
+
 .codeViewContainer {
   position: absolute;
   top: 0px;
@@ -55,4 +65,5 @@ div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;backgroun
 .cm-s-monokai .activeline {background: #8da6ce; !important}
 .cm-s-rubyblue .activeline {background: #3E7087; !important}
 .cm-s-lesser-dark .activeline {background: #8da6ce; !important}
-.cm-s-xq-dark .activeline {background: #8da6ce; !important}
\ No newline at end of file
+.cm-s-xq-dark .activeline {background: #8da6ce; !important}
+
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 2ed596f3..215f8f2e 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -40,7 +40,13 @@
             "focusManager": {
                 "object": "js/components/focus-manager.reel"
             },
-            
+
+            "bindingView": {
+                "prototype": "js/stage/binding-view.reel",
+                "properties" : {
+                    "element": {"#": "bindingView" }
+                }
+            },
             "owner": {
                 "prototype": "js/stage/stage.reel",
                 "properties": {
@@ -53,7 +59,8 @@
                     "stageDeps": {"@": "stageDeps"},
                     "layout":   {"@": "layout"},
                     "textTool": {"@": "textTool"},
-                    "focusManager": {"@": "focusManager"}
+                    "focusManager": {"@": "focusManager"},
+                    "bindingView": {"@": "bindingView"}
                 },
                 "bindings": {
                     "currentDocumentStageView": {
@@ -77,6 +84,7 @@
         <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
         <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
         <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
+        <section data-montage-id="bindingView"></section>
     </section>
 
 </body>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index f4de3070..8cbe3210 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -19,6 +19,7 @@ exports.Stage = Montage.create(Component, {
     // 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 },
+    switchedFromCodeDoc: { value : false },
 
     // TO REVIEW
     zoomFactor: {value : 1 },
@@ -26,6 +27,9 @@ exports.Stage = Montage.create(Component, {
     _canvasSelectionPrefs:  { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
     _canvasDrawingPrefs:    { value: { "thickness" : 1.0, "color" : "#000" } },
     drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },
+    bindingView: {
+        value: null
+    },
 
     _iframeContainer: {
         value: null,
@@ -249,9 +253,15 @@ exports.Stage = Montage.create(Component, {
                 this.currentDocument.model.documentOffsetTop = this._documentOffsetTop;
                 this.currentDocument.model.userContentLeft = this._userContentLeft;
                 this.currentDocument.model.userContentTop = this._userContentTop;
+                this.currentDocument.model.templateLeft = this.templateLeft;
+                this.currentDocument.model.templateTop = this.templateTop;
+                this.currentDocument.model.minLeftElement = this.minLeftElement;
+                this.currentDocument.model.minTopElement = this.minTopElement;
 
                 //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);
+            } else if(this.currentDocument && (this.currentDocument.currentView === "code")) {
+                this.switchedFromCodeDoc = true;   // Switching from code document affects stage's size and scrollbar
             }
 
             this._currentDocument = value;
@@ -262,7 +272,8 @@ exports.Stage = Montage.create(Component, {
                 drawUtils._eltArray.length = 0;
                 drawUtils._planesArray.length = 0;
             } else if(this._currentDocument.currentView === "design") {
-                this.restoreAllPanels();
+                this.restoreAllPanels(this.switchedFromCodeDoc);
+                this.switchedFromCodeDoc = false;
                 this.hideCanvas(false);
                 this.showRulers();
 
@@ -279,6 +290,13 @@ exports.Stage = Montage.create(Component, {
     _userPaddingLeft: { value: 0 },
     _userPaddingTop: { value: 0 },
 
+    templateLeft: { value: 0 },
+    templateTop: { value: 0 },
+
+    // keep track of the elements that determine the minimum left and top scrollable amount
+    minLeftElement: { value: null },
+    minTopElement: { value: null },
+
     userPaddingLeft: {
         get: function() { return this._userPaddingLeft; },
         set: function(value) {
@@ -305,9 +323,8 @@ 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._gridCanvas.width = this.element.offsetWidth - 11 ;
-                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26;
-
+                this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11;
+                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height =  this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26;
                 // Hack for now until a full component
                 this.layout.draw();
                 if(this.currentDocument && (this.currentDocument.currentView === "design")) {
@@ -343,8 +360,6 @@ exports.Stage = Montage.create(Component, {
             // Hide the canvas
             this.hideCanvas(true);
 
-            this.eventManager.addEventListener( "appMouseUp", this, false);
-
             this.eventManager.addEventListener( "enableStageMove", this, false);
             this.eventManager.addEventListener( "disableStageMove", this, false);
 
@@ -374,6 +389,10 @@ exports.Stage = Montage.create(Component, {
                 this._userContentTop = this.currentDocument.model.userContentTop;
                 this._scrollLeft = this.currentDocument.model.scrollLeft;
                 this._scrollTop = this.currentDocument.model.scrollTop;
+                this.templateLeft = this.currentDocument.model.templateLeft;
+                this.templateTop = this.currentDocument.model.templateTop;
+                this.minLeftElement = this.currentDocument.model.minLeftElement;
+                this.minTopElement = this.currentDocument.model.minTopElement;
             } else {
                 this._userPaddingLeft = 0;
                 this._userPaddingTop = 0;
@@ -383,11 +402,15 @@ exports.Stage = Montage.create(Component, {
                 this._userContentTop = 0;
                 this._scrollLeft = 0;
                 this._scrollTop = 0;
+                this.templateLeft = 0;
+                this.templateTop = 0;
+                this.minLeftElement = null;
+                this.minTopElement = null;
             }
 
             // Recalculate the canvas sizes because of splitter resizing
-            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;
+            this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11 ;
+            this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.bindingView.height = this.element.offsetHeight - 11;
 
             designView.iframe.contentWindow.addEventListener("scroll", this, false);
 
@@ -400,9 +423,11 @@ exports.Stage = Montage.create(Component, {
                 var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2);
                 if(initialLeft > this.documentOffsetLeft) {
                     this.userPaddingLeft = -initialLeft;
+                    this.templateLeft = -initialLeft;
                 }
                 if(initialTop > this.documentOffsetTop) {
                     this.userPaddingTop = -initialTop;
+                    this.templateTop = -initialTop;
                 }
             }
 
@@ -454,6 +479,7 @@ exports.Stage = Montage.create(Component, {
 
     enableMouseInOut: {
         value: function() {
+            document.addEventListener("mouseup", this, true);