1 files changed, 105 insertions, 19 deletions

diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index ac9751e8..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,32 @@ exports.BindingView = Montage.create(Component, {
         },
         set: function(val) {
             this._translateY = val;
-            console.log("y", this._translateY);
+        }
+    },
+
+    _width :{  value: 0 },
+    width: {
+        get:function() {
+            return this._width;
+        },
+        set: function(val) {
+            if(this._width !== val) {
+                this._width = val;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _height :{  value: 0 },
+    height: {
+        get:function() {
+            return this._height;
+        },
+        set: function(val) {
+            if(this._height !== val) {
+                this._height = val;
+                this.needsDraw = true;
+            }
         }
     },
 
@@ -78,6 +102,10 @@ exports.BindingView = Montage.create(Component, {
         value: null
     },
 
+    startConnector: {
+        value: null
+    },
+
     //Public Objects
     hudRepeater: { value: null },
 
@@ -103,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") {
@@ -119,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;
 
 
@@ -178,23 +204,39 @@ exports.BindingView = Montage.create(Component, {
             this._context = this.application.ninja.stage.drawingCanvas.getContext('2d');
             this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
             this.element.addEventListener("mousedown", this, false);
+            this.element.addEventListener("mousemove", this, false);
         }
     },
 
     draw: {
         value: function() {
+
+            this.element.style.width = this.width + "px";
+            this.element.style.height = this.height + "px";
             if(this.selectedComponent !== null) {
                 this.canvas.width  = this.application.ninja.stage.drawingCanvas.offsetWidth;
                 this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight;
                 this.clearCanvas();
                 for(var i= 0; i < this.hudRepeater.childComponents.length; i++) {
                     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);
+
                 }
+
+                if(this._isDrawingConnection) {
+                    this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4);
+                }
+
             } else {
                 this.bindables = [];
                 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"); }
+            }
+
         }
     },
 
@@ -205,12 +247,11 @@ exports.BindingView = Montage.create(Component, {
     },
 
     drawLine: {
-        value: function(fromX,fromY,toX,toY, color) {
-            this._context.lineWidth = 1; // Set Line Thickness
-            if (color === null) {
-                this._context.strokeStyle = "#CCCCCC";
-            }
-
+        value: function(fromX,fromY,toX,toY, color, width) {
+            if(width === null) width = 1;
+            if (color === null) color = "#CCC";
+            this._context.lineWidth = width; // Set Line Thickness
+            this._context.strokeStyle = color; // Set Color
             this._context.beginPath(); // Start Drawing Line
             this._context.moveTo(fromX, fromY);
             this._context.lineTo(toX, toY);
@@ -244,11 +285,50 @@ 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));
+            var overHud = false;
+            this.hudRepeater.childComponents.forEach(function(obj) {
+                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;
+                    }
+                }
+            }.bind(this));
+            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;
+
             if(this._isDrawingConnection) {
-                this._currentMousePosition.x = e.clientX;
-                this._currentMousePosition.y = e.clientY;
+                this._currentMousePosition = mousePoint;
                 this.needsDraw = true;
             }
 
@@ -256,22 +336,28 @@ exports.BindingView = Montage.create(Component, {
     },
 
     handleMouseup: {
-        value: function() {
-            this.element.removeEventListener("mousemove", this);
-            this.element.removeEventListener("mouseup", this);
+        value: function(e) {
+            window.removeEventListener("mouseup", this);
+//            var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY);
+//            var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint);