1 files changed, 440 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..1fc4d583
--- /dev/null
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -0,0 +1,440 @@
+/* <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;
+                if (this.selectedComponent !== null) {
+                    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);
+
+            Object.defineBinding(this, 'currentDocument', {
+                boundObject : this.application.ninja,
+                boundObjectPropertyPath : "documentList.selectedObjects.0",
+                oneway: true
+            });
+
+        }
+    },
+
+    _currentDocument : { value: null },
+    currentDocument : {
+        get : function() { return this._currentDocument; },
+        set : function(value) {
+            if(value === this._currentDocument) { return; }
+
+
+            this._currentDocument = value;
+            if(value) {
+                this.hide = (value.currentView === 'code');
+            }
+
+            this.needsDraw = true;
+        }
+    },
+
+    _hide : { value: null },
+    hide : {
+        get : function() { return this._hide; },
+        set : function(value) {
+            if(value === this._hide) { return; }
+
+            this._hide = value;
+
+            this.needsDraw = true;
+        }
+    },
+
+    draw: {
+        value: function() {
+
+            if(this.hide) {
+                this.element.style.setProperty('display', 'none');
+            } else {
+                this.element.style.removeProperty('display');
+                this.element.style.width = this.width + "px";
+                this.element.style.height = this.height + "px";
+                if(this.selectedComponent !== null && typeof(this.selectedComponent) !== "undefined") {
+                    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
+                        }