Binding View Canvas Initial Development

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

2 files changed, 33 insertions, 2 deletions

diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index 39704e25..0f01e9ff 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -15,7 +15,8 @@
                 "prototype": "js/stage/binding-view.reel",
                 "properties": {
                     "element": {"#": "bindingView"},
-                    "hudRepeater": {"@": "hudRepeater"}
+                    "hudRepeater": {"@": "hudRepeater"},
+                    "bindingViewCanvas": {"#": "bindingViewCanvas"}
                 }
             },
             "hudRepeater": {
@@ -76,6 +77,7 @@
 
             </div>
         </div>
+        <canvas data-montage-id="bindingViewCanvas" class="bindingViewCanvas"></canvas>
     </section>
 
 </body>
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index a0ca0c4f..90e6a5e3 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -23,6 +23,10 @@ exports.BindingView = Montage.create(Component, {
         value:[]
     },
 
+    _bindingViewCanvas: {
+        value:null
+    },
+
     //Public Objects
     hudRepeater: { value: null },
 
@@ -53,9 +57,19 @@ 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() {
@@ -70,7 +84,10 @@ exports.BindingView = Montage.create(Component, {
                     {
                         "title": "Input1",
                         "properties": [
-                            {"title":"Value"},
+                            {"title":"Value",
+                                "bindings": [
+                                    {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"}
+                                ]},
                             {"title": "Width"}
                         ],
                         "x": 20,
@@ -92,6 +109,18 @@ exports.BindingView = Montage.create(Component, {
         }
     },
 
+    drawBlueLine: {
+        value: function(fromX,fromY,toX,toY) {
+
+        }
+    },
+
+    handleMousedown: {
+        value: function(event) {
+            debugger;
+        }
+    },
+
     didDraw: {
         value: function() {