diff options
author | Armen Kesablyan | 2012-06-18 20:10:34 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-06-18 20:10:34 -0700 |
commit | b4ab3e558f26549c63fa0d0a542e208d2be62d56 (patch) | |
tree | a1a65f6a21884c9342940c33e1d733ce95d4e0d2 /js/stage/binding-view.reel/binding-view.js | |
parent | f5e70ca6204f78c395458d39f14ddaf45308edf7 (diff) | |
download | ninja-b4ab3e558f26549c63fa0d0a542e208d2be62d56.tar.gz |
Binding - Drop Locate connector
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js/stage/binding-view.reel/binding-view.js')
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 58 |
1 files changed, 47 insertions, 11 deletions
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; | 331 | this._currentMousePosition = mousePoint; |
@@ -306,8 +336,14 @@ exports.BindingView = Montage.create(Component, { | |||
306 | }, | 336 | }, |
307 | 337 | ||
308 | handleMouseup: { | 338 | handleMouseup: { |
309 | value: function() { | 339 | value: function(e) { |
310 | window.removeEventListener("mouseup", this); | 340 | window.removeEventListener("mouseup", this); |
341 | // var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); | ||
342 | // var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); | ||
343 | this.element.style.zIndex = "12"; | ||
344 | var nodeEl = document.elementFromPoint(e.pageX, e.pageY); | ||
345 | console.log(nodeEl); | ||
346 | this.element.style.zIndex = null; | ||
311 | this._isDrawingConnection = false; | 347 | this._isDrawingConnection = false; |
312 | this.needsDraw = true; | 348 | this.needsDraw = true; |
313 | } | 349 | } |
@@ -316,7 +352,7 @@ exports.BindingView = Montage.create(Component, { | |||
316 | handleMousedown: { | 352 | handleMousedown: { |
317 | value: function(e) { | 353 | value: function(e) { |
318 | // We are looking for a mouse down on an option to start the connection visual | 354 | // We are looking for a mouse down on an option to start the connection visual |
319 | if(e._event.target.classList.contains("hudOption")) { | 355 | if(e._event.target.classList.contains("connectorBubble")) { |
320 | //NOTE: Test Code Please Clean Up | 356 | //NOTE: Test Code Please Clean Up |
321 | //alert(event._event.target.controller.title); | 357 | //alert(event._event.target.controller.title); |
322 | this._isDrawingConnection = true; | 358 | this._isDrawingConnection = true; |