1 files changed, 109 insertions, 27 deletions

diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index a0ca0c4f..8ffc45c1 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -13,7 +13,7 @@ var Montage = require("montage/core/core").Montage,
 
 exports.BindingView = Montage.create(Component, {
     //private Properties
-    _selectedElement: {
+    _selectedComponent: {
         value: null
     },
     _bindables: {
@@ -23,17 +23,37 @@ exports.BindingView = Montage.create(Component, {
         value:[]
     },
 
+    _bindingViewCanvas: {
+        value:null
+    },
+    _canvas: {
+        value:null
+    },
+    _context : {
+        value: null
+    },
+
     //Public Objects
     hudRepeater: { value: null },
 
 
     //Public Properties
-    selectedElement: {
+    selectedComponent: {
         get: function() {
-            return this._selectedElement;
+            return this._selectedComponent;
         },
         set: function(val) {
-            this._selectedElement = val;
+            this._selectedComponent = val;
+            this.application.ninja.objectsController.currentObject = this.selectedComponent;
+            var arrBindings = this.application.ninja.objectsController.currentObjectBindings;
+            arrBindings.forEach(function(obj) {
+                 
+            }.bind(this));
+            // Get Bindings that exist;
+
+
+            //Get Properties of Elements in bindings;
+
             this.needsDraw = true;
         }
     },
@@ -53,42 +73,104 @@ exports.BindingView = Montage.create(Component, {
             this._nonVisualComponents = val;
         }
     },
+    bindingViewCanvas: {
+        get: function() {
+            return this._bindingViewCanvas;
+        },
+        set: function(val) {
+            this._bindingViewCanvas = val;
+        }
+    },
 
     //Methods
+    canvas: {
+        get: function() {
+            return this._canvas;
+        },
+        set: function(val) {
+            this._canvas = val;
+        }
+    },
 
     //Montage Draw Cycle
     prepareForDraw: {
         value: function() {
-
+            //this._canvas = this.application.ninja.stage.drawingCanvas;
+            this._context = this._canvas.getContext('2d');
+            this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
         }
     },
 
     draw: {
         value: function() {
-            if(this.selectedElement !== null) {
-                this.bindables = [
-                    {
-                        "title": "Input1",
-                        "properties": [
-                            {"title":"Value"},
-                            {"title": "Width"}
-                        ],
-                        "x": 20,
-                        "y": 20
-                    },
-                    {
-                        "title": "Checkbox1",
-                        "properties": [
-                            {"title":"Group"},
-                            {"title": "Value"}
-                        ],
-                        "x": 120,
-                        "y": 120
-                    }
-                ];
+            if(this.selectedComponent !== null) {
+//                this.bindables = [
+//                    {
+//                        "title": "Input1",
+//                        "properties": [
+//                            {"title":"Value",
+//                                "bindings": [
+//                                    {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"}
+//                                ]
+//                            },
+//                            {"title": "Width", "bindings": []}
+//                        ],
+//                        "x": 20,
+//                        "y": 20
+//                    },
+//                    {
+//                        "title": "Checkbox1",
+//                        "properties": [
+//                            {"title":"Group" , "bindings": []},
+//                            {"title":"Value",
+//                                "bindings": [
+//                                    {"direction": "->", "boundObject":"Input1", "boundProperty": "Value"}
+//                                ]
+//                            }
+//                        ],
+//                        "x": 120,
+//                        "y": 120
+//                    }
+//                ];
+                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);
+
             } else {
-                this.bindables = [];
+                //this.bindables = [];
             }
+
+        }
+    },
+
+    drawBlueLine: {
+        value: function(fromX,fromY,toX,toY) {
+            this._context.lineWidth = 4; // Set Line Thickness
+            this._context.strokeStyle = "#5e9eff"
+
+            this._context.beginPath(); // Start Drawing Line
+            this._context.moveTo(fromX, fromY);
+            this._context.lineTo(toX, toY);
+            this._context.stroke();
+        }
+    },
+
+    clearCanvas: {
+        value: function() {
+            this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight);
+        }
+    },
+
+    handleMousedown: {
+        value: function(event) {
+
+        }
+    },
+
+    handleScroll: {
+        value: function() {
+            this.needsDraw = true;
         }
     },