From e1f83a2c603bf9ddb74889f7ba5b697bb474edaa Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 28 Jun 2012 11:00:18 -0700
Subject: Binding HUD - Updated CSS for hud and promoted/bound properties.
---
.../binding-hud-option.reel/binding-hud-option.js | 30 ++++++++++++++++++++--
.../binding-hud.reel/binding-hud.css | 16 +++++++++---
.../binding-hud.reel/binding-hud.html | 3 ++-
.../binding-hud.reel/binding-hud.js | 16 +++++++++---
4 files changed, 55 insertions(+), 10 deletions(-)
(limited to 'js/stage')
diff --git a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
index fb0fd57e..a7fbb297 100755
--- a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
+++ b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
@@ -26,8 +26,28 @@ exports.BindingHudOption = Montage.create(Component, {
}
},
- bound: {
- value: false
+ _promoted : { value: null },
+ promoted : {
+ get : function() { return this._promoted; },
+ set : function(value) {
+ if(value === this._promoted) { return; }
+
+ this._promoted = value;
+
+ this.needsDraw = true;
+ }
+ },
+
+ _bound : { value: null },
+ bound : {
+ get : function() { return this._bound; },
+ set : function(value) {
+ if(value === this._bound) { return; }
+
+ this._bound = value;
+
+ this.needsDraw = true;
+ }
},
prepareForDraw: {
@@ -47,6 +67,12 @@ exports.BindingHudOption = Montage.create(Component, {
} else {
this.element.classList.remove("bound");
}
+
+ if(this.promoted || this.bound) {
+ this.element.classList.add("promoted");
+ } else {
+ this.element.classList.remove("promoted");
+ }
// if(this.bindings.length > 0) {
// this.element.classList.add("bound");
// } else {
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 5818eca8..1536c706 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
@@ -11,7 +11,7 @@
font-size: 11px;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61);
border-radius: 6px;
- padding: 3px 8px;
+ padding: 3px;
text-shadow: 1px 1px 0px #000;
}
@@ -29,6 +29,8 @@
/*background: rgba(0, 0, 0, 0.3);*/
line-height:16px;
/*box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;*/
+ padding-top: 4px;
+ margin: 0 5px;
min-width: 80px;
}
@@ -38,7 +40,10 @@
line-height:16px;
padding:1px 25px 1px 8px;
}
-
+.bindingHud .hudOption.promoted {
+ color: #FFF;
+ font-weight: bold;
+}
.bindingHud .hudOption .connectorBubble:hover {
background-color: #1B52A7;
box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747;
@@ -94,8 +99,13 @@
}
.splitter.scrollArea:hover:not(.disabled) {
background-color: #303030;
+ border-bottom: 1px solid #252525;
+ box-shadow: 0 1px 0 0 #3F3F3F;
+}
+.splitter.scrollAreaBottom:hover:not(.disabled) {
+ border-bottom: 1px solid #3F3F3F;
+ box-shadow: 0 1px 0 0 #252525;
}
-
.hudRepetition {
overflow: hidden;
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 7bb888d5..f7e1a1d2 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
@@ -36,7 +36,8 @@
"element": {"#" : "hudOption"}
},
"bindings": {
- "title": {"<-": "@repeater.objectAtCurrentIteration"}
+ "title": {"<-": "@repeater.objectAtCurrentIteration.property"},
+ "promoted": {"<-": "@repeater.objectAtCurrentIteration.promoted"}
}
},
"resizer1": {
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 0f1b99c9..a62fe78d 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
@@ -89,9 +89,17 @@ exports.BindingHud = Montage.create(Component, {
getPropertyList : {
value: function(component) {
- var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true);
-
- var objectName, promotedProperties;
+ var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true),
+ promotedProperties = [],
+ objectName;
+
+ ///// Mapper - property to property object
+ function propertyMapper(property) {
+ return {
+ property: property,
+ promoted: promotedProperties.indexOf(property) !== -1
+ }
+ }
if(this.userComponent._montage_metadata) {
objectName = this.userComponent._montage_metadata.objectName;
@@ -114,7 +122,7 @@ exports.BindingHud = Montage.create(Component, {
}
}
- return props;
+ return props.map(propertyMapper);
}
},
--
cgit v1.2.3
From 9add37d85a9d90541daae8ad5316388c4d9a9da4 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Thu, 28 Jun 2012 13:21:11 -0700
Subject: Binding View - Bug fix After save corrupts doom and breaks binding
view
Signed-off-by: Armen Kesablyan <armen@motorola.com>
---
.../binding-hud.reel/binding-hud.js | 70 ++++++++++------------
js/stage/binding-view.reel/binding-view.html | 2 +-
js/stage/binding-view.reel/binding-view.js | 26 ++++----
3 files changed, 46 insertions(+), 52 deletions(-)
(limited to 'js/stage')
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 6b802cb0..58cf197f 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
@@ -10,6 +10,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
*/
var Montage = require("montage/core/core").Montage,
Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
exports.BindingHud = Montage.create(Component, {
scrollUp: {
@@ -49,10 +50,10 @@ exports.BindingHud = Montage.create(Component, {
value: null,
serializable: true
},
- _userComponent: { value: null },
- userComponent: {
+ _userElement: { value: null },
+ userElement: {
get: function() {
- return this._userComponent;
+ return this._userElement;
},
set: function(val) {
if(!val) { return; }
@@ -61,14 +62,14 @@ exports.BindingHud = Montage.create(Component, {
bindingView = this.parentComponent.parentComponent,
isOffStage, icon, iconOffsets;
- this._userComponent = val;
- this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true);
+ this._userElement = val;
+ this.properties = this.getPropertyList(val.controller); //controller.getPropertiesFromObject(val, true);
- controller.getObjectBindings(this.userComponent).forEach(function(obj) {
+ controller.getObjectBindings(this._userElement.controller).forEach(function(obj) {
this.boundProperties.push(obj.sourceObjectPropertyPath);
}, this);
- isOffStage = controller.isOffStageObject(val);
+ isOffStage = controller.isOffStageObject(val.controller);
if(isOffStage) {
icon = bindingView.getOffStageIcon(val);
@@ -76,9 +77,14 @@ exports.BindingHud = Montage.create(Component, {
this.title = icon.name;
this.x = iconOffsets.x;
this.y = iconOffsets.y - 80;
+ } else {
+ this.title = this._userElement.controller.identifier;
+ this.x = this._userElement.offsetLeft;
+ this.y = this._userElement.offsetTop;
+// this.x = parseInt(ElementsMediator.getProperty(val, "left"));
+// this.y = parseInt(ElementsMediator.getProperty(val, "top"));
}
this.needsDraw = true;
-
}
},
@@ -88,8 +94,8 @@ exports.BindingHud = Montage.create(Component, {
var objectName, promotedProperties;
- if(this.userComponent._montage_metadata) {
- objectName = this.userComponent._montage_metadata.objectName;
+ if(this.userElement.controller._montage_metadata) {
+ objectName = this.userElement.controller._montage_metadata.objectName;
if(this.panelData && this.panelData[objectName + 'Pi']) {
@@ -231,12 +237,6 @@ exports.BindingHud = Montage.create(Component, {
this.scrollUp.style.display = "block";
this.scrollDown.style.display = "block";
}
- var isOffStage = this.application.ninja.objectsController.isOffStageObject(this.userComponent);
- if(!isOffStage) {
- this.title = this.userComponent.identifier;
- this.x = this.userComponent.element.offsetLeft;
- this.y = this.userComponent.element.offsetTop;
- }
}
},
@@ -295,22 +295,17 @@ exports.BindingHud = Montage.create(Component, {
handleMouseover: {
value: function(e) {
+
if(this.scrollSpace < this.properties.length) {
if (this.scrollInterval === null) {
if (e._event.target.classList.contains("scrollAreaBottom")) {
- self = e._event.target.parentElement.controller;
- //e._event.target.parentElement.controller.currentScrollDirection = "down";
- this.scrollInterval = setInterval(function() {
- self.optionsRepeater.element.scrollTop += 3;
- }, 20);
+ this.currentScrollDirection = "down";
} else {
- this.scrollInterval = setInterval(function() {
- self.optionsRepeater.element.scrollTop -= 3;
- }, 20);
+ this.currentScrollDirection = "up";
}
}
}
- //this.needsDraw = true;
+ this.needsDraw = true;
}
},
@@ -324,25 +319,24 @@ exports.BindingHud = Montage.create(Component, {
}
},
- willDraw: {
+ draw: {
value: function() {
- }
- },
+ if(this.currentScrollDirection !== null) {
+ this.scrollInterval = setInterval(function() {
+ if(this.currentScrollDirection === "down") {
+ this.optionsRepeater.element.scrollTop += 3;
+ } else {
+ this.optionsRepeater.element.scrollTop -= 3;
+ }
+ }.bind(this), 20);
+ } else {
+ clearInterval(this.scrollInterval);
+ }
- draw: {
- value: function() {
this.titleElement.innerHTML = this.title;
this.element.style.top = (this.y + this._resizedY) + "px";
this.element.style.left = (this.x + this._resizedX) + "px";
-
-// if(this.currentScrollDirection !== null) {
-// if(this.currentScrollDirection === "up") {
-// this.optionsRepeater.element.scrollTop -= 18;
-// } else {
-// this.optionsRepeater.element.scrollTop += 18;
-// }
-// }
}
},
didDraw: {
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index b6c5ff40..c8da1e7e 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -41,7 +41,7 @@
"panelData": {"@": "panelData"}
},
"bindings": {
- "userComponent": {"<-": "@hudRepeater.objectAtCurrentIteration"}
+ "userElement": {"<-": "@hudRepeater.objectAtCurrentIteration"}
},
"listeners": [
{
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 94c84d02..ee44758c 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -97,20 +97,20 @@ exports.BindingView = Montage.create(Component, {
}
},
- _selectedComponent: { value: null },
- selectedComponent: {
+ _selectedElement: { value: null },
+ selectedElement: {
get: function() {
- return this._selectedComponent;
+ return this._selectedElement;
},
set: function(val) {
this.boundComponents = [];
- if(this._selectedComponent !== val) {
+ if(this._selectedElement !== 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._selectedElement = val;
+ if(this._selectedElement !== null) {
+ this.application.ninja.objectsController.currentObject = this._selectedElement.controller;
+ if (this._selectedElement !== null) {
+ this.boundComponents.push(this._selectedElement);
}
}
this.needsDraw = true;
@@ -219,12 +219,12 @@ exports.BindingView = Montage.create(Component, {
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") {
+ if(this._selectedElement !== null && typeof(this._selectedElement) !== "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);
+ this.drawLine(this.hudRepeater.objects[i].offsetLeft,this.hudRepeater.objects[i].offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +1, this.hudRepeater.childComponents[i].element.offsetTop +1, "#CCC", 2);
}
if(this._isDrawingConnection) {
if (this.hudRepeater.childComponents.length > 1) {
@@ -341,7 +341,7 @@ exports.BindingView = Montage.create(Component, {
if(this._isDrawingConnection && !overHud) {
//NOTE : Continue This content. mouse over select
var obj = this.application.ninja.stage.getElement(event, true);
- if (obj && obj.controller !== this.selectedComponent)
+ if (obj && obj !== this.selectedElement)
{
if (!obj.controller || obj === null)
{
@@ -363,7 +363,7 @@ exports.BindingView = Montage.create(Component, {
}
this._targetedElement = obj;
this._targetedElement.classList.add("active-element-outline");
- this.boundComponents.push(this._targetedElement.controller);
+ this.boundComponents.push(this._targetedElement);
}
}
}
--
cgit v1.2.3