Binding-Huds draw to component

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

4 files changed, 35 insertions, 9 deletions

diff --git a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
index 3eda272c..6db86a78 100755
--- a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
+++ b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
@@ -51,6 +51,12 @@ exports.BindingHudOption = Montage.create(Component, {
         }
     },
 
+    prepareForDraw: {
+        value: function() {
+            // Set Up Listener for click and propagate up to Binding View
+        }
+    },
+
     draw: {
         value:function() {
             if(this.bound) {
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
index 5053d3bb..4260a66c 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
@@ -62,6 +62,7 @@ exports.BindingHud = Montage.create(Component, {
             this.x = parseInt(this.x);
             this.y = parseInt(this.y);
             this.needsDraw = true;
+            this.parentComponent.parentComponent.needsDraw = true;
         }
     },
 
@@ -70,6 +71,7 @@ exports.BindingHud = Montage.create(Component, {
             this._resizedY = e._event.dY;
             this._resizedX = e._event.dX;
             this.needsDraw = true;
+            this.parentComponent.parentComponent.needsDraw = true;
         }
     },
 
@@ -81,6 +83,7 @@ exports.BindingHud = Montage.create(Component, {
             this._resizedY = 0;
             this.isResizing = false;
             this.needsDraw = true;
+            this.parentComponent.parentComponent.needsDraw = true;
         }
     },
 
@@ -98,7 +101,6 @@ exports.BindingHud = Montage.create(Component, {
         },
         set: function(val) {
             this._x = val;
-            console.log(this._x);
             this.needsDraw = true;
         }
     },
@@ -149,7 +151,6 @@ exports.BindingHud = Montage.create(Component, {
 //                }
             this.element.style.top = (this.y + this._resizedY) + "px";
             this.element.style.left = (this.x + this._resizedX) + "px";
-            console.log("hud",this);
         }
     }
 });
\ No newline at end of file
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index 8abddbee..c7520132 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -35,7 +35,13 @@
                 },
                 "bindings": {
                     "bindingArgs": {"<-": "@hudRepeater.objectAtCurrentIteration"}
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "nonVisualRepeater": {
                 "prototype": "montage/ui/repetition.reel",
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index b0df6df1..58a4cf06 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -94,6 +94,9 @@ exports.BindingView = Montage.create(Component, {
             return this._selectedComponent;
         },
         set: function(val) {
+            if(this._selectedComponent !== val) {
+                this.bindables = [];
+                this.clearCanvas();
             this._selectedComponent = val;
             if(this._selectedComponent !== null) {
                 this.application.ninja.objectsController.currentObject = this.selectedComponent;
@@ -128,9 +131,17 @@ exports.BindingView = Montage.create(Component, {
 
                 //Get Properties of Elements in bindings;
             }
-            this.needsDraw = true;
+                this.needsDraw = true;
+            }
         }
     },
+
+    handleResizeMove: {
+        value: function(e) {
+            console.log(e);
+        }
+    },
+
     bindables: {
         get: function() {
             return this._bindables;
@@ -169,8 +180,8 @@ exports.BindingView = Montage.create(Component, {
     //Montage Draw Cycle
     prepareForDraw: {
         value: function() {
-            //this._canvas = this.application.ninja.stage.drawingCanvas;
-            this._context = this._canvas.getContext('2d');
+            this._canvas = this.application.ninja.stage.drawingCanvas;
+            this._context = this.application.ninja.stage.drawingCanvas.getContext('2d');
             this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
         }
     },
@@ -181,8 +192,9 @@ exports.BindingView = Montage.create(Component, {
                 this.canvas.width  = this.application.ninja.stage.drawingCanvas.offsetWidth;
                 this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight;
                 this.clearCanvas();
-                this.drawBlueLine(110,53,210,173);
-
+                for(var i= 0; i < this.hudRepeater.childComponents.length; i++) {
+                    this.drawBlueLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft, this.hudRepeater.childComponents[i].element.offsetTop);
+                }
             } else {
                 this.bindables = [];
                 this.clearCanvas();
@@ -200,7 +212,7 @@ exports.BindingView = Montage.create(Component, {
     drawBlueLine: {
         value: function(fromX,fromY,toX,toY) {
             this._context.lineWidth = 4; // Set Line Thickness
-            this._context.strokeStyle = "#5e9eff"
+            //this._context.strokeStyle = "#5e9eff";
 
             this._context.beginPath(); // Start Drawing Line
             this._context.moveTo(fromX, fromY);
@@ -211,6 +223,7 @@ exports.BindingView = Montage.create(Component, {
 
     clearCanvas: {
         value: function() {
+            debugger;
             this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight);
         }
     },