aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorArmen Kesablyan2012-06-19 00:42:34 -0700
committerArmen Kesablyan2012-06-19 00:42:34 -0700
commit244e608645778746d1a3b5aa0d4c0868f7c5c272 (patch)
treebf58dff3b293365ebce987cc0b5d7c8539f49513
parentfe3a9e7990024293b39fac815a7e340a3b21859a (diff)
downloadninja-244e608645778746d1a3b5aa0d4c0868f7c5c272.tar.gz
Binding-View: Visual Bind Item Working
Signed-off-by: Armen Kesablyan <armen@motorola.com>
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js12
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js67
2 files changed, 74 insertions, 5 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 799c5866..a8c3ae68 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
@@ -20,6 +20,17 @@ exports.BindingHud = Montage.create(Component, {
20 value: null 20 value: null
21 }, 21 },
22 22
23 _userComponent: { value: null },
24 userComponent: {
25 get: function() {
26 return this._userComponent;
27 },
28 set: function(val) {
29 this._userComponent = val;
30 }
31 },
32
33
23 bindingArgs: { 34 bindingArgs: {
24 get: function() { 35 get: function() {
25 return this._bindingArgs; 36 return this._bindingArgs;
@@ -27,6 +38,7 @@ exports.BindingHud = Montage.create(Component, {
27 set: function(val) { 38 set: function(val) {
28 if (typeof(val) !== "undefined") { 39 if (typeof(val) !== "undefined") {
29 this._bindingArgs = val; 40 this._bindingArgs = val;
41 this.userComponent = this.bindingArgs.component;
30 this.title = this.bindingArgs.component.identifier; 42 this.title = this.bindingArgs.component.identifier;
31 this.x = this._bindingArgs.component.element.offsetLeft; 43 this.x = this._bindingArgs.component.element.offsetLeft;
32 this.y = this._bindingArgs.component.element.offsetTop; 44 this.y = this._bindingArgs.component.element.offsetTop;
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index d2f653fa..4fa82789 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -84,6 +84,46 @@ exports.BindingView = Montage.create(Component, {
84 value: {} 84 value: {}
85 }, 85 },
86 86
87 _connectionElementStart: { value: null },
88 connectionElementStart: {
89 get: function() {
90 return this._connectionElementStart;
91 },
92 set: function(val) {
93 this._connectionElementStart = val;
94 }
95 },
96
97 _connectionElementEnd: { value: null },
98 connectionElementEnd: {
99 get: function() {
100 return this._connectionElementEnd;
101 },
102 set: function(val) {
103 this._connectionElementEnd = val;
104 }
105 },
106
107 _connectionPropertyStart: { value: null },
108 connectionPropertyStart: {
109 get: function() {
110 return this._connectionPropertyStart;
111 },
112 set: function(val) {
113 this._connectionPropertyStart = val;
114 }
115 },
116
117 _connectionPropertyEnd: { value: null },
118 connectionPropertyEnd: {
119 get: function() {
120 return this._connectionPropertyEnd;
121 },
122 set: function(val) {
123 this._connectionPropertyEnd = val;
124 }
125 },
126
87 _bindables: { 127 _bindables: {
88 value: [] 128 value: []
89 }, 129 },
@@ -223,6 +263,9 @@ exports.BindingView = Montage.create(Component, {
223 } 263 }
224 264
225 if(this._isDrawingConnection) { 265 if(this._isDrawingConnection) {
266 if (this.hudRepeater.childComponents.length > 1) {
267 //this.object
268 }
226 this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4); 269 this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4);
227 } 270 }
228 271
@@ -335,15 +378,27 @@ exports.BindingView = Montage.create(Component, {
335 } 378 }
336 }, 379 },
337 380
381
338 handleMouseup: { 382 handleMouseup: {
339 value: function(e) { 383 value: function(e) {
340 window.removeEventListener("mouseup", this); 384 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"; 385 this.element.style.zIndex = "12";
344 var nodeEl = document.elementFromPoint(e.pageX, e.pageY); 386 var nodeEl = document.elementFromPoint(e.pageX, e.pageY);
345 alert(nodeEl.parentElement.controller.title);
346 this.element.style.zIndex = null; 387 this.element.style.zIndex = null;
388 if(nodeEl.classList.contains("connectorBubble")) {
389// var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY);
390// var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint);
391 debugger;
392 this.connectionElementEnd = nodeEl.parentElement.controller.parentComponent.parentComponent.userComponent;
393 this.connectionPropertyEnd = nodeEl.parentElement.controller.title;
394 console.log(this.connectionElementStart, this.connectionPropertyStart, this.connectionElementEnd, this.connectionPropertyEnd);
395 this.application.ninja.objectsController.addBinding({
396 sourceObject: this.connectionElementStart,
397 sourceObjectPropertyPath: this.connectionPropertyStart,
398 boundObject: this.connectionElementEnd,
399 boundObjectPropertyPath: this.connectionPropertyEnd
400 });
401 }
347 this._isDrawingConnection = false; 402 this._isDrawingConnection = false;
348 this.needsDraw = true; 403 this.needsDraw = true;
349 } 404 }
@@ -353,10 +408,12 @@ exports.BindingView = Montage.create(Component, {
353 value: function(e) { 408 value: function(e) {
354 // We are looking for a mouse down on an option to start the connection visual 409 // We are looking for a mouse down on an option to start the connection visual
355 if(e._event.target.classList.contains("connectorBubble")) { 410 if(e._event.target.classList.contains("connectorBubble")) {
356 //NOTE: Test Code Please Clean Up 411 //console.log(e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent);
357 //alert(event._event.target.controller.title); 412 this.connectionElementStart = e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent;
413 this.connectionPropertyStart = e._event.target.parentElement.controller.title;
358 this._isDrawingConnection = true; 414 this._isDrawingConnection = true;
359 this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); 415 this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY));
416
360 window.addEventListener("mouseup", this); 417 window.addEventListener("mouseup", this);
361 } 418 }
362 } 419 }