Binding-View: Translate huds

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

6 files changed, 107 insertions, 19 deletions

diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
index aa204be7..e177963f 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
@@ -40,7 +40,7 @@
     line-height:16px;
     padding:1px 9px;
 }
-.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble {
+.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble {
     background: #5e9eff;
     display:block;
 }
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
index afa4cd47..38d2a2ec 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
@@ -35,6 +35,27 @@
                 "bindings": {
                     "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"}
                 }
+            },
+            "resizer1": {
+                "prototype": "js/panels/resize-composer",
+                "properties": {
+                    "element": {"#": "title"},
+                    "component": {"@": "owner"}
+                },
+                "listeners": [
+                    {
+                        "type": "resizeStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             }
         }
     </script>
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
index acd072f9..5053d3bb 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
@@ -44,14 +44,75 @@ exports.BindingHud = Montage.create(Component, {
         ]
     },
 
-    x: {
+    _isResizing: {
+        value: null
+    },
+
+    _resizedX : {
+        value: 0
+    },
+
+    _resizedY: {
+        value: 0
+    },
+
+    handleResizeStart: {
+        value:function(e) {
+            this.isResizing = true;
+            this.x = parseInt(this.x);
+            this.y = parseInt(this.y);
+            this.needsDraw = true;
+        }
+    },
+
+    handleResizeMove: {
+        value:function(e) {
+            this._resizedY = e._event.dY;
+            this._resizedX = e._event.dX;
+            this.needsDraw = true;
+        }
+    },
+
+    handleResizeEnd: {
+        value: function(e) {
+            this.x += this._resizedX;
+            this.y += this._resizedY;
+            this._resizedX = 0;
+            this._resizedY = 0;
+            this.isResizing = false;
+            this.needsDraw = true;
+        }
+    },
+
+    _x: {
         value: 20
     },
 
-    y: {
+    _y: {
         value: 100
     },
 
+    x: {
+        get: function() {
+            return this._x;
+        },
+        set: function(val) {
+            this._x = val;
+            console.log(this._x);
+            this.needsDraw = true;
+        }
+    },
+
+    y: {
+        get: function() {
+            return this._y;
+        },
+        set: function(val) {
+            this._y = val;
+            this.needsDraw = true;
+        }
+    },
+
     _title: {
         value: "default"
     },
@@ -81,8 +142,13 @@ exports.BindingHud = Montage.create(Component, {
     draw: {
         value: function() {
             this.titleElement.innerHTML = this.title;
-            this.element.style.top = this.y + "px";
-            this.element.style.left = this.x + "px";
+
+//            if(this.isResizing) {
+//                    this.timelineSplitter.collapsed = this.height - this._resizedHeight < 46;
+//                    this.panelSplitter.collapsed = this.width - this._resizedWidth < 30;
+//                }
+            this.element.style.top = (this.y + this._resizedY) + "px";
+            this.element.style.left = (this.x + this._resizedX) + "px";
             console.log("hud",this);
         }
     }
diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css
index ff4f2510..7f5de0b8 100755
--- a/js/stage/binding-view.reel/binding-view.css
+++ b/js/stage/binding-view.reel/binding-view.css
@@ -7,8 +7,7 @@
 .bindingView {
     position: absolute;
     width:100%;
-    height:100%;
-    z-index: 6;
+    z-index: 12;
 }
 
 .hudRepeater {
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index 90ef2286..4eea3cc4 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -37,17 +37,6 @@
                     "bindingArgs": {"<-": "@hudRepeater.objectAtCurrentIteration"}
                 }
             },
-            "translateComposer": {
-                "prototype": "montage/ui/composer/translate-composer",
-                "properties": {
-                    "component": {"@": "owner"}
-                },
-                "bindings": {
-                    "element": {"<-": "@owner._element"},
-                    "translateX": {"->": "@owner.translateX"},
-                    "translateY": {"->": "@owner.translateY"}
-                }
-            },
             "nonVisualRepeater": {
                 "prototype": "montage/ui/repetition.reel",
                 "properties": {
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 900d2b24..b0df6df1 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -13,6 +13,10 @@ var Montage = require("montage/core/core").Montage,
 
 exports.BindingView = Montage.create(Component, {
     //private Properties
+
+    hudRepeater: {
+        value: null
+    },
     _selectedComponent: {
         value: null
     },
@@ -98,7 +102,10 @@ exports.BindingView = Montage.create(Component, {
 
                 //Add the first component which is the selected one to have a hud
 
-                this.componentsList[this.selectedComponent.identifier] = {"component":  this.selectedComponent, "properties": this.application.ninja.objectsController.getPropertyList(this.selectedComponent, true)};
+                this.componentsList[this.selectedComponent.identifier] = {"component":  this.selectedComponent, properties:[] };
+                this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) {
+                    this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj})
+                }.bind(this));