From 244e608645778746d1a3b5aa0d4c0868f7c5c272 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 19 Jun 2012 00:42:34 -0700 Subject: Binding-View: Visual Bind Item Working Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.js | 12 ++++ js/stage/binding-view.reel/binding-view.js | 67 ++++++++++++++++++++-- 2 files changed, 74 insertions(+), 5 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 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, { value: null }, + _userComponent: { value: null }, + userComponent: { + get: function() { + return this._userComponent; + }, + set: function(val) { + this._userComponent = val; + } + }, + + bindingArgs: { get: function() { return this._bindingArgs; @@ -27,6 +38,7 @@ exports.BindingHud = Montage.create(Component, { set: function(val) { if (typeof(val) !== "undefined") { this._bindingArgs = val; + this.userComponent = this.bindingArgs.component; this.title = this.bindingArgs.component.identifier; this.x = this._bindingArgs.component.element.offsetLeft; 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, { value: {} }, + _connectionElementStart: { value: null }, + connectionElementStart: { + get: function() { + return this._connectionElementStart; + }, + set: function(val) { + this._connectionElementStart = val; + } + }, + + _connectionElementEnd: { value: null }, + connectionElementEnd: { + get: function() { + return this._connectionElementEnd; + }, + set: function(val) { + this._connectionElementEnd = val; + } + }, + + _connectionPropertyStart: { value: null }, + connectionPropertyStart: { + get: function() { + return this._connectionPropertyStart; + }, + set: function(val) { + this._connectionPropertyStart = val; + } + }, + + _connectionPropertyEnd: { value: null }, + connectionPropertyEnd: { + get: function() { + return this._connectionPropertyEnd; + }, + set: function(val) { + this._connectionPropertyEnd = val; + } + }, + _bindables: { value: [] }, @@ -223,6 +263,9 @@ exports.BindingView = Montage.create(Component, { } if(this._isDrawingConnection) { + if (this.hudRepeater.childComponents.length > 1) { + //this.object + } this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4); } @@ -335,15 +378,27 @@ exports.BindingView = Montage.create(Component, { } }, + handleMouseup: { value: function(e) { window.removeEventListener("mouseup", this); -// var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); -// var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); this.element.style.zIndex = "12"; var nodeEl = document.elementFromPoint(e.pageX, e.pageY); - alert(nodeEl.parentElement.controller.title); this.element.style.zIndex = null; + if(nodeEl.classList.contains("connectorBubble")) { +// var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); +// var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); + debugger; + this.connectionElementEnd = nodeEl.parentElement.controller.parentComponent.parentComponent.userComponent; + this.connectionPropertyEnd = nodeEl.parentElement.controller.title; + console.log(this.connectionElementStart, this.connectionPropertyStart, this.connectionElementEnd, this.connectionPropertyEnd); + this.application.ninja.objectsController.addBinding({ + sourceObject: this.connectionElementStart, + sourceObjectPropertyPath: this.connectionPropertyStart, + boundObject: this.connectionElementEnd, + boundObjectPropertyPath: this.connectionPropertyEnd + }); + } this._isDrawingConnection = false; this.needsDraw = true; } @@ -353,10 +408,12 @@ exports.BindingView = Montage.create(Component, { value: function(e) { // We are looking for a mouse down on an option to start the connection visual if(e._event.target.classList.contains("connectorBubble")) { - //NOTE: Test Code Please Clean Up - //alert(event._event.target.controller.title); + //console.log(e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent); + this.connectionElementStart = e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent; + this.connectionPropertyStart = e._event.target.parentElement.controller.title; this._isDrawingConnection = true; this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); + window.addEventListener("mouseup", this); } } -- cgit v1.2.3