Binding Hud: Calling Option Selection to view

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

3 files changed, 58 insertions, 22 deletions

diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
index e177963f..f7e926cb 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
@@ -38,7 +38,7 @@
     position:relative;
     border-bottom:1px solid #505050;
     line-height:16px;
-    padding:1px 9px;
+    padding:1px 9px 1px 15px;
 }
 .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble {
     background: #5e9eff;
@@ -51,14 +51,14 @@
 
 .bindingHud .hudOption .connectorBubble {
     position: absolute;
-    right: -10px;
-    top: 1px;
-    background: rgba(0, 0, 0, 0.3);
+    right: 3px;
+    top: 3px;
     border-radius: 50%;
-    width: 16px;
-    height: 16px;
+    width: 12px;
+    height: 12px;
     border-left: 0px;
-    display: none;
+    display: block;
+    box-shadow: inset 0px 0px 6px #5e9eff;
     /*border-bottom-right-radius: 50%;
     border-top-right-radius: 50%;*/
 
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
index 38d2a2ec..b8410f9b 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
@@ -65,7 +65,7 @@
     <section data-montage-id="bindingHud" class="bindingHud">
         <div data-montage-id="title" class="bindingTitle"></div>
         <div data-montage-id="hudRepetition" class="hudRepetition">
-            <div data-montage-id="hudOption" class="hudOption"></div>
+            <div data-montage-id="hudOption"></div>
         </div>
     </section>
 
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 58a4cf06..ac9751e8 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -50,12 +50,6 @@ exports.BindingView = Montage.create(Component, {
         }
     },
 
-    handleMousedown: {
-        value: function(e) {
-            validateOverHud(e.clientX, e.clientY);
-        }
-    },
-
     validateOverHud: {
         value: function() {
 
@@ -183,6 +177,7 @@ exports.BindingView = Montage.create(Component, {
             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);
+            this.element.addEventListener("mousedown", this, false);
         }
     },
 
@@ -193,7 +188,7 @@ exports.BindingView = Montage.create(Component, {
                 this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight;
                 this.clearCanvas();
                 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);
+                    this.drawLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3);
                 }
             } else {
                 this.bindables = [];
@@ -209,10 +204,12 @@ exports.BindingView = Montage.create(Component, {
         }
     },
 
-    drawBlueLine: {
-        value: function(fromX,fromY,toX,toY) {
-            this._context.lineWidth = 4; // Set Line Thickness
-            //this._context.strokeStyle = "#5e9eff";
+    drawLine: {
+        value: function(fromX,fromY,toX,toY, color) {
+            this._context.lineWidth = 1; // Set Line Thickness
+            if (color === null) {
+                this._context.strokeStyle = "#CCCCCC";
+            }
 
             this._context.beginPath(); // Start Drawing Line
             this._context.moveTo(fromX, fromY);
@@ -223,20 +220,59 @@ exports.BindingView = Montage.create(Component, {
 
     clearCanvas: {
         value: function() {
-            debugger;
             this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight);
         }
     },
 
+    ///////////////////////////////////////////////////////
+    // Events & Functions to draw user selected options //
+    /////////////////////////////////////////////////////
+
+    // When a user selects a valid option this value will be switched to true and canvas
+    // will draw a line following the mouse and the start position
+    _isDrawingConnection: {
+        value: false
+    },
+
+    // When isDrawingConnection is set true this is the beginning position for the draw line
+    _connectionPositionStart: {
+        value: {x: 0, y:0}
+    },
+
+    // When isDrawingConnection is set true this is the end point for the draw line
+    _currentMousePosition: {
+        value: {x: 0, y:0}
+    },
+
     handleMousemove: {
-        value: function() {
+        value: function(e) {
+            if(this._isDrawingConnection) {
+                this._currentMousePosition.x = e.clientX;
+                this._currentMousePosition.y = e.clientY;
+                this.needsDraw = true;
+            }
+
+        }
+    },
 
+    handleMouseup: {
+        value: function() {
+            this.element.removeEventListener("mousemove", this);
+            this.element.removeEventListener("mouseup", this);
+            this._isDrawingConnection = false;
+            this.needsDraw = true;
         }
     },
 
     handleMousedown: {
         value: function(event) {
-
+            // We are looking for a mouse down on an option to start the connection visual
+            if(event._event.target.classList.contains("hudOption")) {
+                //NOTE: Test Code Please Clean Up
+                this._isDrawingConnection = true;
+                this.element.addEventListener("mousemove", this);
+                this.element.addEventListener("mouseup", this);
+            }
         }
     },