6 files changed, 316 insertions, 54 deletions

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 799c5866..a8c3ae68 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
@@ -20,6 +20,17 @@ exports.BindingHud = Montage.create(Component, {
         value: null
     },
 
+    _userComponent: { value: null  },
+    userComponent: {
+        get: function() {
+            return this._userComponent;
+        },
+        set: function(val) {
+            this._userComponent = val;
+        }
+    },
+
+
     bindingArgs: {
         get: function() {
             return this._bindingArgs;
@@ -27,6 +38,7 @@ exports.BindingHud = Montage.create(Component, {
         set: function(val) {
             if (typeof(val) !== "undefined") {
                 this._bindingArgs = val;
+                this.userComponent = this.bindingArgs.component;
                 this.title = this.bindingArgs.component.identifier;
                 this.x = this._bindingArgs.component.element.offsetLeft;
                 this.y = this._bindingArgs.component.element.offsetTop;
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index c1e0fcbb..8c201ba1 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -84,6 +84,46 @@ exports.BindingView = Montage.create(Component, {
         value: {}
     },
 
+    _connectionElementStart: { value: null },
+    connectionElementStart: {
+        get: function() {
+            return this._connectionElementStart;
+        },
+        set: function(val) {
+            this._connectionElementStart = val;
+        }
+    },
+
+    _connectionElementEnd: { value: null },
+    connectionElementEnd: {
+        get: function() {
+            return this._connectionElementEnd;
+        },
+        set: function(val) {
+            this._connectionElementEnd = val;
+        }
+    },
+
+    _connectionPropertyStart: { value: null },
+    connectionPropertyStart: {
+        get: function() {
+            return this._connectionPropertyStart;
+        },
+        set: function(val) {
+            this._connectionPropertyStart = val;
+        }
+    },
+
+    _connectionPropertyEnd: { value: null },
+    connectionPropertyEnd: {
+        get: function() {
+            return this._connectionPropertyEnd;
+        },
+        set: function(val) {
+            this._connectionPropertyEnd = val;
+        }
+    },
+
     _bindables: {
         value: []
     },
@@ -223,6 +263,9 @@ exports.BindingView = Montage.create(Component, {
                 }
 
                 if(this._isDrawingConnection) {
+                    if (this.hudRepeater.childComponents.length > 1) {
+                        //this.object
+                    }
                     this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4);
                 }
 
@@ -335,16 +378,27 @@ exports.BindingView = Montage.create(Component, {
         }
     },
 
+
     handleMouseup: {
         value: function(e) {
             window.removeEventListener("mouseup", this);
-//            var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY);
-//            var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint);
             this.element.style.zIndex = "12";
             var nodeEl = document.elementFromPoint(e.pageX, e.pageY);
-            //alert(nodeEl.parentElement.controller.title);
-            debugger;
             this.element.style.zIndex = null;
+            if(nodeEl.classList.contains("connectorBubble")) {
+//            var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY);
+//            var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint);
+                //debugger;
+            this.connectionElementEnd = nodeEl.parentElement.controller.parentComponent.parentComponent.userComponent;
+            this.connectionPropertyEnd = nodeEl.parentElement.controller.title;
+            //console.log(this.connectionElementStart, this.connectionPropertyStart, this.connectionElementEnd, this.connectionPropertyEnd);
+                this.application.ninja.objectsController.addBinding({
+                    sourceObject: this.connectionElementStart,
+                    sourceObjectPropertyPath: this.connectionPropertyStart,
+                    boundObject: this.connectionElementEnd,
+                    boundObjectPropertyPath: this.connectionPropertyEnd
+                });
+            }
             this._isDrawingConnection = false;
             this.needsDraw = true;
         }
@@ -354,10 +408,12 @@ exports.BindingView = Montage.create(Component, {
         value: function(e) {
             // We are looking for a mouse down on an option to start the connection visual
             if(e._event.target.classList.contains("connectorBubble")) {
-                //NOTE: Test Code Please Clean Up
-                //alert(event._event.target.controller.title);
+                //console.log(e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent);
+                this.connectionElementStart = e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent;
+                this.connectionPropertyStart = e._event.target.parentElement.controller.title;
                 this._isDrawingConnection = true;
                 this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY));
+
                 window.addEventListener("mouseup", this);
             }
         }
diff --git a/js/stage/layout.js b/js/stage/layout.js
index 71296405..28484b71 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -17,7 +17,16 @@ var Montage = require("montage/core/core").Montage,
 
 exports.Layout = Montage.create(Component, {
 
-    canvas: { value: null },
+    canvas: {
+        value: null,
+        serializable: true
+    },
+
+    stage: {
+        value: null,
+        serializable: true
+    },
+
     ctx: { value: null },
 
     drawFillColor: { value: 'rgba(255,255,255,1)' },
@@ -102,11 +111,11 @@ exports.Layout = Montage.create(Component, {
                 // Make an array copy of the line node list which is not an array like object
                 this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true);
                 // Index of the current container
-                containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer);
+                containerIndex = this.domTree.indexOf(this.currentDocument.model.domContainer);
 
                 if(containerIndex < 0) {
                     // Stage is the container.
-                    this.domTree = Array.prototype.slice.call(this.application.ninja.currentSelectedContainer.childNodes, 0);
+                    this.domTree = Array.prototype.slice.call(this.currentDocument.model.domContainer.childNodes, 0);
                 } else {
                     // Child nodes of the container
                     this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0);
@@ -204,7 +213,7 @@ exports.Layout = Montage.create(Component, {
                 bounds3D[j] = tmpPt;
             }
 
-            if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) {
+            if(item.uuid === this.currentDocument.model.domContainer.uuid) {
                 this.ctx.save();
                 this.ctx.strokeStyle = "#C61F00";
 
diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js
index 762c2529..462f7ca5 100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -15,6 +15,11 @@ var Montage = 			require("montage/core/core").Montage,
 
 exports.StageDeps = Montage.create(Component, {
 
+    stage: {
+        value: null,
+        serializable: true
+    },
+
     viewUtils: {
         value: viewUtils