1 files changed, 62 insertions, 5 deletions

diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index a0ca0c4f..d17735b2 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -23,6 +23,16 @@ exports.BindingView = Montage.create(Component, {
         value:[]
     },
 
+    _bindingViewCanvas: {
+        value:null
+    },
+    _canvas: {
+        value:null
+    },
+    _context : {
+        value: null
+    },
+
     //Public Objects
     hudRepeater: { value: null },
 
@@ -53,13 +63,25 @@ exports.BindingView = Montage.create(Component, {
             this._nonVisualComponents = val;
         }
     },
+    bindingViewCanvas: {
+        get: function() {
+            return this._bindingViewCanvas;
+        },
+        set: function(val) {
+            this._bindingViewCanvas = val;
+        }
+    },
 
     //Methods
 
+
+
     //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);
         }
     },
 
@@ -70,8 +92,12 @@ exports.BindingView = Montage.create(Component, {
                     {
                         "title": "Input1",
                         "properties": [
-                            {"title":"Value"},
-                            {"title": "Width"}
+                            {"title":"Value",
+                                "bindings": [
+                                    {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"}
+                                ]
+                            },
+                            {"title": "Width", "bindings": []}
                         ],
                         "x": 20,
                         "y": 20
@@ -79,16 +105,47 @@ exports.BindingView = Montage.create(Component, {
                     {
                         "title": "Checkbox1",
                         "properties": [
-                            {"title":"Group"},
-                            {"title": "Value"}
+                            {"title":"Group" , "bindings": []},
+                            {"title":"Value",
+                                "bindings": [
+                                    {"direction": "->", "boundObject":"Input1", "boundProperty": "Value"}
+                                ]
+                            }
                         ],
                         "x": 120,
                         "y": 120
                     }
                 ];
+                this.drawBlueLine(100,100,200,200)
+
             } else {
                 this.bindables = [];
             }
+
+        }
+    },
+
+    drawBlueLine: {
+        value: function(fromX,fromY,toX,toY) {
+            this._context.lineWidth = 4; // Set Line Thickness
+            this._context.strokeStyle = "#00F"
+
+            this._context.beginPath(); // Start Drawing Line
+            this._context.moveTo(fromX, fromY);
+            this._context.lineTo(toX, toY);
+            this._context.stroke();
+        }
+    },
+
+    handleMousedown: {
+        value: function(event) {
+
+        }
+    },
+
+    handleScroll: {
+        value: function() {
+            this.needsDraw = true;
         }
     },