diff options
Diffstat (limited to 'js/stage/binding-view.reel')
5 files changed, 57 insertions, 18 deletions
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 6db86a78..18eb11c9 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 | |||
@@ -60,7 +60,6 @@ exports.BindingHudOption = Montage.create(Component, { | |||
60 | draw: { | 60 | draw: { |
61 | value:function() { | 61 | value:function() { |
62 | if(this.bound) { | 62 | if(this.bound) { |
63 | console.log(this.title); | ||
64 | this.element.classList.add("bound"); | 63 | this.element.classList.add("bound"); |
65 | } else { | 64 | } else { |
66 | this.element.classList.remove("bound"); | 65 | this.element.classList.remove("bound"); |
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 c53c82e2..1c75b03a 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 | |||
@@ -38,15 +38,16 @@ | |||
38 | position:relative; | 38 | position:relative; |
39 | border-bottom:1px solid #505050; | 39 | border-bottom:1px solid #505050; |
40 | line-height:16px; | 40 | line-height:16px; |
41 | padding:1px 9px 1px 15px; | 41 | padding:1px 20px 1px 10px; |
42 | } | 42 | } |
43 | .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble:hover { | 43 | |
44 | .bindingHud .hudOption .connectorBubble:hover { | ||
44 | box-shadow: inset 0px 0px 6px #5e9eff; | 45 | box-shadow: inset 0px 0px 6px #5e9eff; |
45 | display:block; | 46 | cursor: pointer; |
46 | } | 47 | } |
47 | 48 | ||
48 | .hudOption.bound, .bindingHud .hudOption.bound { | 49 | .hudOption.bound, .bindingHud .hudOption.bound { |
49 | background: #5e9eff; | 50 | background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); |
50 | } | 51 | } |
51 | 52 | ||
52 | .bindingHud .hudOption:last-child { | 53 | .bindingHud .hudOption:last-child { |
@@ -62,7 +63,7 @@ | |||
62 | height: 12px; | 63 | height: 12px; |
63 | border-left: 0px; | 64 | border-left: 0px; |
64 | display: block; | 65 | display: block; |
65 | box-shadow: inset 0px 0px 6px #5e9eff; | 66 | box-shadow: inset 0px 0px 6px #AAA; |
66 | /*border-bottom-right-radius: 50%; | 67 | /*border-bottom-right-radius: 50%; |
67 | border-top-right-radius: 50%;*/ | 68 | border-top-right-radius: 50%;*/ |
68 | 69 | ||
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 4260a66c..799c5866 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 | |||
@@ -32,7 +32,6 @@ exports.BindingHud = Montage.create(Component, { | |||
32 | this.y = this._bindingArgs.component.element.offsetTop; | 32 | this.y = this._bindingArgs.component.element.offsetTop; |
33 | this.properties = this._bindingArgs.properties; | 33 | this.properties = this._bindingArgs.properties; |
34 | this.needsDraw = true; | 34 | this.needsDraw = true; |
35 | console.log("Binding Args Set", val); | ||
36 | } else { | 35 | } else { |
37 | this.properties = []; | 36 | this.properties = []; |
38 | } | 37 | } |
diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css index fbd1b2b6..b6673da1 100755 --- a/js/stage/binding-view.reel/binding-view.css +++ b/js/stage/binding-view.reel/binding-view.css | |||
@@ -9,6 +9,10 @@ | |||
9 | z-index: 2; | 9 | z-index: 2; |
10 | } | 10 | } |
11 | 11 | ||
12 | .bindingView.mousedOverHud { | ||
13 | z-index: 12; | ||
14 | } | ||
15 | |||
12 | .hudRepeater { | 16 | .hudRepeater { |
13 | position: absolute; | 17 | position: absolute; |
14 | width:100%; | 18 | width:100%; |
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 682c0827..0a663a4e 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -36,7 +36,6 @@ exports.BindingView = Montage.create(Component, { | |||
36 | }, | 36 | }, |
37 | set: function(val) { | 37 | set: function(val) { |
38 | this._translateX = val; | 38 | this._translateX = val; |
39 | console.log("x", this._translateX); | ||
40 | } | 39 | } |
41 | }, | 40 | }, |
42 | 41 | ||
@@ -46,7 +45,6 @@ exports.BindingView = Montage.create(Component, { | |||
46 | }, | 45 | }, |
47 | set: function(val) { | 46 | set: function(val) { |
48 | this._translateY = val; | 47 | this._translateY = val; |
49 | console.log("y", this._translateY); | ||
50 | } | 48 | } |
51 | }, | 49 | }, |
52 | 50 | ||
@@ -104,6 +102,10 @@ exports.BindingView = Montage.create(Component, { | |||
104 | value: null | 102 | value: null |
105 | }, | 103 | }, |
106 | 104 | ||
105 | startConnector: { | ||
106 | value: null | ||
107 | }, | ||
108 | |||
107 | //Public Objects | 109 | //Public Objects |
108 | hudRepeater: { value: null }, | 110 | hudRepeater: { value: null }, |
109 | 111 | ||
@@ -129,7 +131,6 @@ exports.BindingView = Montage.create(Component, { | |||
129 | this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) { | 131 | this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) { |
130 | this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj}) | 132 | this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj}) |
131 | }.bind(this)); | 133 | }.bind(this)); |
132 | console.log("components:",this.componentsList); | ||
133 | //Go through the loop and find every interacted object by bindings | 134 | //Go through the loop and find every interacted object by bindings |
134 | arrBindings.forEach(function(obj) { | 135 | arrBindings.forEach(function(obj) { |
135 | if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") { | 136 | if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") { |
@@ -145,7 +146,6 @@ exports.BindingView = Montage.create(Component, { | |||
145 | for(var key in this.componentsList){ | 146 | for(var key in this.componentsList){ |
146 | this.bindables.push(this.componentsList[key]); | 147 | this.bindables.push(this.componentsList[key]); |
147 | } | 148 | } |
148 | console.log(this.bindables); | ||
149 | // Get Bindings that exist; | 149 | // Get Bindings that exist; |
150 | 150 | ||
151 | 151 | ||
@@ -231,6 +231,12 @@ exports.BindingView = Montage.create(Component, { | |||
231 | this.clearCanvas(); | 231 | this.clearCanvas(); |
232 | } | 232 | } |
233 | 233 | ||
234 | if(this.mouseOverHud && !this._isDrawingConnection) { | ||
235 | if(!this.element.classList.contains("mousedOverHud")) { this.element.classList.add("mousedOverHud"); } | ||
236 | } else { | ||
237 | if(this.element.classList.contains("mousedOverHud")) { this.element.classList.remove("mousedOverHud"); } | ||
238 | } | ||
239 | |||
234 | } | 240 | } |
235 | }, | 241 | }, |
236 | 242 | ||
@@ -279,6 +285,27 @@ exports.BindingView = Montage.create(Component, { | |||
279 | value: {x: 0, y:0} | 285 | value: {x: 0, y:0} |
280 | }, | 286 | }, |
281 | 287 | ||
288 | objectsTray: { | ||
289 | value:null | ||
290 | }, | ||
291 | |||
292 | |||
293 | // When mouse pointer is on a hud this value will be set to true | ||
294 | _mouseOverHud: { value: false }, | ||
295 | mouseOverHud: { | ||
296 | get: function() { | ||
297 | return this._mouseOverHud; | ||
298 | }, | ||
299 | set: function(val) { | ||
300 | if(this._mouseOverHud !== val) { | ||
301 | this._mouseOverHud = val; | ||
302 | this.needsDraw = true; | ||
303 | } | ||
304 | } | ||
305 | }, | ||
306 | |||
307 | |||
308 | |||
282 | handleMousemove: { | 309 | handleMousemove: { |
283 | value: function(e) { | 310 | value: function(e) { |
284 | var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); | 311 | var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); |
@@ -287,15 +314,18 @@ exports.BindingView = Montage.create(Component, { | |||
287 | if(obj.x < mousePoint.x && (obj.x + obj.element.offsetWidth) > mousePoint.x) { | 314 | if(obj.x < mousePoint.x && (obj.x + obj.element.offsetWidth) > mousePoint.x) { |
288 | if(obj.y < mousePoint.y && (obj.y + obj.element.offsetHeight) > mousePoint.y) { | 315 | if(obj.y < mousePoint.y && (obj.y + obj.element.offsetHeight) > mousePoint.y) { |
289 | overHud = true; | 316 | overHud = true; |
290 | console.log(overHud); | ||
291 | } | 317 | } |
292 | } | 318 | } |
293 | }.bind(this)); | 319 | }.bind(this)); |
294 | if(overHud) { | 320 | if(typeof (this.objectsTray.element) !== "undefined") { |
295 | this.element.style.zIndex = "12"; | 321 | if (this.objectsTray.element.offsetLeft < mousePoint.x && (this.objectsTray.element.offsetLeft + this.objectsTray.element.offsetWidth) > mousePoint.x ) { |
296 | } else { | 322 | //console.log(this.objectsTray.element.offsetTop, (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) ); |
297 | this.element.style.zIndex = "2"; | 323 | if(this.objectsTray.element.parentElement.offsetTop < mousePoint.y && (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) > mousePoint.y) { |
324 | overHud = true; | ||
325 | } | ||
326 | } | ||
298 | } | 327 | } |
328 | this.mouseOverHud = overHud; | ||
299 | 329 | ||
300 | if(this._isDrawingConnection) { | 330 | if(this._isDrawingConnection) { |
301 | this._currentMousePosition = mousePoint; |