Binding - Drop Locate connector

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

5 files changed, 57 insertions, 18 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 6db86a78..18eb11c9 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
@@ -60,7 +60,6 @@ exports.BindingHudOption = Montage.create(Component, {
     draw: {
         value:function() {
             if(this.bound) {
-                console.log(this.title);
                 this.element.classList.add("bound");
             } else {
                 this.element.classList.remove("bound");
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 c53c82e2..1c75b03a 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,15 +38,16 @@
     position:relative;
     border-bottom:1px solid #505050;
     line-height:16px;
-    padding:1px 9px 1px 15px;
+    padding:1px 20px 1px 10px;
 }
-.connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble:hover {
+
+.bindingHud .hudOption .connectorBubble:hover {
     box-shadow: inset 0px 0px 6px #5e9eff;
-    display:block;
+    cursor: pointer;
 }
 
 .hudOption.bound, .bindingHud .hudOption.bound {
-    background: #5e9eff;
+    background:  -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
 }
 
 .bindingHud .hudOption:last-child {
@@ -62,7 +63,7 @@
     height: 12px;
     border-left: 0px;
     display: block;
-    box-shadow: inset 0px 0px 6px #5e9eff;
+    box-shadow: inset 0px 0px 6px #AAA;
     /*border-bottom-right-radius: 50%;
     border-top-right-radius: 50%;*/
 
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 4260a66c..799c5866 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
@@ -32,7 +32,6 @@ exports.BindingHud = Montage.create(Component, {
                 this.y = this._bindingArgs.component.element.offsetTop;
                 this.properties = this._bindingArgs.properties;
                 this.needsDraw = true;
-                console.log("Binding Args Set", val);
             } else {
                 this.properties = [];
             }
diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css
index fbd1b2b6..b6673da1 100755
--- a/js/stage/binding-view.reel/binding-view.css
+++ b/js/stage/binding-view.reel/binding-view.css
@@ -9,6 +9,10 @@
     z-index: 2;
 }
 
+.bindingView.mousedOverHud {
+    z-index: 12;
+}
+
 .hudRepeater {
     position: absolute;
     width:100%;
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 682c0827..0a663a4e 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -36,7 +36,6 @@ exports.BindingView = Montage.create(Component, {
         },
         set: function(val) {
             this._translateX = val;
-            console.log("x", this._translateX);
         }
     },
 
@@ -46,7 +45,6 @@ exports.BindingView = Montage.create(Component, {
         },
         set: function(val) {
             this._translateY = val;
-            console.log("y", this._translateY);
         }
     },
 
@@ -104,6 +102,10 @@ exports.BindingView = Montage.create(Component, {
         value: null
     },
 
+    startConnector: {
+        value: null
+    },
+
     //Public Objects
     hudRepeater: { value: null },
 
@@ -129,7 +131,6 @@ exports.BindingView = Montage.create(Component, {
                 this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) {
                     this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj})
                 }.bind(this));
-                console.log("components:",this.componentsList);
                 //Go through the loop and find every interacted object by bindings
                 arrBindings.forEach(function(obj) {
                     if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") {
@@ -145,7 +146,6 @@ exports.BindingView = Montage.create(Component, {
                 for(var key in this.componentsList){
                     this.bindables.push(this.componentsList[key]);
                 }
-                console.log(this.bindables);
                 // Get Bindings that exist;
 
 
@@ -231,6 +231,12 @@ exports.BindingView = Montage.create(Component, {
                 this.clearCanvas();
             }
 
+            if(this.mouseOverHud && !this._isDrawingConnection) {
+                if(!this.element.classList.contains("mousedOverHud")) { this.element.classList.add("mousedOverHud"); }
+            } else {
+                if(this.element.classList.contains("mousedOverHud")) { this.element.classList.remove("mousedOverHud"); }
+            }
+
         }
     },
 
@@ -279,6 +285,27 @@ exports.BindingView = Montage.create(Component, {
         value: {x: 0, y:0}
     },
 
+    objectsTray: {
+        value:null
+    },
+
+
+    // When mouse pointer is on a hud this value will be set to true
+    _mouseOverHud: { value: false },
+    mouseOverHud: {
+        get: function() {
+            return this._mouseOverHud;
+        },
+        set: function(val) {
+            if(this._mouseOverHud !== val) {
+                this._mouseOverHud = val;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+
+
     handleMousemove: {
         value: function(e) {
             var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY));
@@ -287,15 +314,18 @@ exports.BindingView = Montage.create(Component, {
                 if(obj.x < mousePoint.x && (obj.x + obj.element.offsetWidth) > mousePoint.x) {
                     if(obj.y < mousePoint.y && (obj.y + obj.element.offsetHeight) > mousePoint.y) {
                         overHud = true;
-                        console.log(overHud);
                     }
                 }
             }.bind(this));
-            if(overHud) {
-                this.element.style.zIndex = "12";
-            } else {
-                this.element.style.zIndex = "2";
+            if(typeof (this.objectsTray.element) !== "undefined") {
+                if (this.objectsTray.element.offsetLeft < mousePoint.x && (this.objectsTray.element.offsetLeft + this.objectsTray.element.offsetWidth) > mousePoint.x ) {
+                    //console.log(this.objectsTray.element.offsetTop, (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) );
+                    if(this.objectsTray.element.parentElement.offsetTop < mousePoint.y && (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) > mousePoint.y) {
+                        overHud = true;
+                    }
+                }
             }
+            this.mouseOverHud = overHud;