Binding HUD - Show hud for "off stage" objects in tray

4 files changed, 49 insertions, 7 deletions

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 4b40d4da..cc94e844 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
@@ -52,17 +52,35 @@ exports.BindingHud = Montage.create(Component, {
             return this._userComponent;
         },
         set: function(val) {
-            if (typeof(val) !== "undefined") {
-                this._userComponent = val;
+            if(!val) { return; }
+
+            var controller = this.application.ninja.objectsController,
+                bindingView = this.parentComponent.parentComponent,
+                isOffStage, icon, iconOffsets;
+
+            this._userComponent = val;
+            this.properties = controller.getPropertiesFromObject(val, true);
+
+            controller.getObjectBindings(this.userComponent).forEach(function(obj) {
+                this.boundProperties.push(obj.sourceObjectPropertyPath);
+            }, this);
+
+            isOffStage = controller.isOffStageObject(val);
+
+            if(isOffStage) {
+                icon = bindingView.getOffStageIcon(val);
+                iconOffsets = this.getElementOffsetToParent(icon.element, bindingView.element);
+                this.title = icon.name;
+                this.x = iconOffsets.x;
+                this.y = iconOffsets.y - 80;
+            } else {
                 this.title = val.identifier;
                 this.x = val.element.offsetLeft;
                 this.y = val.element.offsetTop;
-                this.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true);
-                this.application.ninja.objectsController.getObjectBindings(this.userComponent).forEach(function(obj) {
-                    this.boundProperties.push(obj.sourceObjectPropertyPath);
-                }.bind(this));
-                this.needsDraw = true;
             }
+
+            this.needsDraw = true;
+
         }
     },
 
@@ -111,6 +129,18 @@ exports.BindingHud = Montage.create(Component, {
         }
     },
 
+    getElementOffsetToParent : {
+        value: function(element, parent) {
+            var nodeToPage = webkitConvertPointFromNodeToPage(element, new WebKitPoint(0, 0)),
+                parentToPage = webkitConvertPointFromNodeToPage(parent, new WebKitPoint(0, 0));
+
+            return {
+                x : nodeToPage.x - parentToPage.x,
+                y : nodeToPage.y - parentToPage.y
+            }
+        }
+    },
+
     _x: {
         value: 20
     },
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 9bd99176..e2bbb60b 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -255,6 +255,14 @@ exports.BindingView = Montage.create(Component, {
         value:null
     },
 
+    getOffStageIcon : {
+        value: function(object) {
+            var index = this.objectsTray.offStageObjectsController.organizedObjects.indexOf(object);
+
+            return this.objectsTray.iconsRepetition.childComponents[index];
+        }
+    },
+
 
     // When mouse pointer is on a hud this value will be set to true
     _mouseOverHud: { value: false },
diff --git a/js/stage/objects-tray.reel/objects-tray.html b/js/stage/objects-tray.reel/objects-tray.html
index 5a0db85e..901f3e58 100644
--- a/js/stage/objects-tray.reel/objects-tray.html
+++ b/js/stage/objects-tray.reel/objects-tray.html
@@ -15,6 +15,7 @@
                 "prototype": "js/stage/objects-tray.reel",
                 "properties": {
                     "element": {"#": "objects-tray"},
+                    "iconsRepetition": {"@": "repetition" },
                     "offStageObjectsController": {"@": "arrayController"}
                 }
             },
diff --git a/js/stage/objects-tray.reel/objects-tray.js b/js/stage/objects-tray.reel/objects-tray.js
index 360d6037..75ece4c3 100644
--- a/js/stage/objects-tray.reel/objects-tray.js
+++ b/js/stage/objects-tray.reel/objects-tray.js
@@ -16,6 +16,9 @@ exports.ObjectsTray = Montage.create(Component, {
     _empty : { value: null },
     _workspaceMode : { value: null },
 
+    iconsRepetition : {
+        value: null
+    },
     offStageObjectsController : {
         value: null
     },