Binding View - validate over huds

Signed-off-by: Armen Kesablyan <armen@motorola.com>

2 files changed, 8 insertions, 6 deletions

diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 397af0b6..215f8f2e 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -84,7 +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" class="bindingView"></section>
+        <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 30ee1e40..63339c57 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -21,6 +21,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 },
 
@@ -237,9 +240,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")) {
@@ -314,8 +316,8 @@ exports.Stage = Montage.create(Component, {
             }
 
             // 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);