1 files changed, 401 insertions, 0 deletions

diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
new file mode 100755
index 00000000..73d25824
--- /dev/null
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -0,0 +1,401 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+/**
+@requires montage/core/core
+@requires montage/ui/component
+*/
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+exports.BindingView = Montage.create(Component, {
+    //private Properties
+    _canvas: { value:null },
+    _context : { value: null },
+    _targetedElement: {value: null},
+    componentsList: { value: {} },
+
+    hudRepeater: { value: null },
+
+    //Public Properties
+    _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;
+            }
+        }
+    },
+
+    _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;
+        }
+    },
+
+    _boundComponents: { value: [] },
+    boundComponents: {
+        get: function() {
+            return this._boundComponents;
+        },
+        set: function(val) {
+            this._boundComponents = val;
+        }
+    },
+
+    _selectedComponent: { value: null },
+    selectedComponent: {
+        get: function() {
+            return this._selectedComponent;
+        },
+        set: function(val) {
+            this.boundComponents = [];
+            if(this._selectedComponent !== val) {
+                this.clearCanvas();
+            this._selectedComponent = val;
+            if(this._selectedComponent !== null) {
+                this.application.ninja.objectsController.currentObject = this.selectedComponent;
+                this.boundComponents.push(this.selectedComponent);
+            }
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    handleShowBinding: {
+        value: function(bindingMeta) {
+            if(bindingMeta === null) return;
+            for(var j=0; j< bindingMeta.length; j++) {
+                var bindingExists = false;
+                for(var i =0; i < this.boundComponents; i++) {
+                    if(this.boundComponents[i] === bindingMeta[j].boundObject) {
+                        bindingExists = true;
+                    }
+                }
+                if(!bindingExists) {
+                    //this.boundComponents.push(bindingMeta[j].boundObject);
+                }
+            }
+        }
+    },
+
+    _nonVisualComponents: { value:[] },
+    nonVisualComponents: {
+        get: function() {
+            return this._nonVisualComponents;
+        },
+        set: function(val) {
+            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.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].element.offsetLeft,this.hudRepeater.objects[i].element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3, "#CCC", 2);
+                }
+                if(this._isDrawingConnection) {
+                    if (this.hudRepeater.childComponents.length > 1) {
+                        // Make things disappear
+                    }
+                    this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#5e9eff", 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"); }
+            }
+
+        }
+    },
+
+    didDraw: {
+        value: function() {
+
+        }
+    },
+
+    drawLine: {
+        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.lineCap = "round";
+            this._context.strokeStyle = color; // Set Color
+            this._context.beginPath(); // Start Drawing Line
+            this._context.moveTo(fromX, fromY);
+            this._context.lineTo(toX, toY);
+            this._context.stroke();
+        }
+    },
+
+    clearCanvas: {
+        value: function() {