From b4ab3e558f26549c63fa0d0a542e208d2be62d56 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 18 Jun 2012 20:10:34 -0700 Subject: Binding - Drop Locate connector Signed-off-by: Armen Kesablyan --- .../binding-hud-option.reel/binding-hud-option.js | 1 - .../binding-hud.reel/binding-hud.css | 11 ++-- .../binding-hud.reel/binding-hud.js | 1 - js/stage/binding-view.reel/binding-view.css | 4 ++ js/stage/binding-view.reel/binding-view.js | 58 ++++++++++++++++++---- 5 files changed, 57 insertions(+), 18 deletions(-) (limited to 'js') 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, { draw: { value:function() { if(this.bound) { - console.log(this.title); this.element.classList.add("bound"); } else { 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 @@ position:relative; border-bottom:1px solid #505050; line-height:16px; - padding:1px 9px 1px 15px; + padding:1px 20px 1px 10px; } -.connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble:hover { + +.bindingHud .hudOption .connectorBubble:hover { box-shadow: inset 0px 0px 6px #5e9eff; - display:block; + cursor: pointer; } .hudOption.bound, .bindingHud .hudOption.bound { - background: #5e9eff; + background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); } .bindingHud .hudOption:last-child { @@ -62,7 +63,7 @@ height: 12px; border-left: 0px; display: block; - box-shadow: inset 0px 0px 6px #5e9eff; + box-shadow: inset 0px 0px 6px #AAA; /*border-bottom-right-radius: 50%; border-top-right-radius: 50%;*/ 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, { this.y = this._bindingArgs.component.element.offsetTop; this.properties = this._bindingArgs.properties; this.needsDraw = true; - console.log("Binding Args Set", val); } else { this.properties = []; } 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 @@ z-index: 2; } +.bindingView.mousedOverHud { + z-index: 12; +} + .hudRepeater { position: absolute; 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, { }, set: function(val) { this._translateX = val; - console.log("x", this._translateX); } }, @@ -46,7 +45,6 @@ exports.BindingView = Montage.create(Component, { }, set: function(val) { this._translateY = val; - console.log("y", this._translateY); } }, @@ -104,6 +102,10 @@ exports.BindingView = Montage.create(Component, { value: null }, + startConnector: { + value: null + }, + //Public Objects hudRepeater: { value: null }, @@ -129,7 +131,6 @@ exports.BindingView = Montage.create(Component, { this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) { this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj}) }.bind(this)); - console.log("components:",this.componentsList); //Go through the loop and find every interacted object by bindings arrBindings.forEach(function(obj) { if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") { @@ -145,7 +146,6 @@ exports.BindingView = Montage.create(Component, { for(var key in this.componentsList){ this.bindables.push(this.componentsList[key]); } - console.log(this.bindables); // Get Bindings that exist; @@ -231,6 +231,12 @@ exports.BindingView = Montage.create(Component, { this.clearCanvas(); } + if(this.mouseOverHud && !this._isDrawingConnection) { + if(!this.element.classList.contains("mousedOverHud")) { this.element.classList.add("mousedOverHud"); } + } else { + if(this.element.classList.contains("mousedOverHud")) { this.element.classList.remove("mousedOverHud"); } + } + } }, @@ -279,6 +285,27 @@ exports.BindingView = Montage.create(Component, { value: {x: 0, y:0} }, + objectsTray: { + value:null + }, + + + // When mouse pointer is on a hud this value will be set to true + _mouseOverHud: { value: false }, + mouseOverHud: { + get: function() { + return this._mouseOverHud; + }, + set: function(val) { + if(this._mouseOverHud !== val) { + this._mouseOverHud = val; + this.needsDraw = true; + } + } + }, + + + handleMousemove: { value: function(e) { var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); @@ -287,15 +314,18 @@ exports.BindingView = Montage.create(Component, { if(obj.x < mousePoint.x && (obj.x + obj.element.offsetWidth) > mousePoint.x) { if(obj.y < mousePoint.y && (obj.y + obj.element.offsetHeight) > mousePoint.y) { overHud = true; - console.log(overHud); } } }.bind(this)); - if(overHud) { - this.element.style.zIndex = "12"; - } else { - this.element.style.zIndex = "2"; + if(typeof (this.objectsTray.element) !== "undefined") { + if (this.objectsTray.element.offsetLeft < mousePoint.x && (this.objectsTray.element.offsetLeft + this.objectsTray.element.offsetWidth) > mousePoint.x ) { + //console.log(this.objectsTray.element.offsetTop, (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) ); + if(this.objectsTray.element.parentElement.offsetTop < mousePoint.y && (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) > mousePoint.y) { + overHud = true; + } + } } + this.mouseOverHud = overHud; if(this._isDrawingConnection) { this._currentMousePosition = mousePoint; @@ -306,8 +336,14 @@ exports.BindingView = Montage.create(Component, { }, handleMouseup: { - value: function() { + 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); + console.log(nodeEl); + this.element.style.zIndex = null; this._isDrawingConnection = false; this.needsDraw = true; } @@ -316,7 +352,7 @@ exports.BindingView = Montage.create(Component, { handleMousedown: { value: function(e) { // We are looking for a mouse down on an option to start the connection visual - if(e._event.target.classList.contains("hudOption")) { + if(e._event.target.classList.contains("connectorBubble")) { //NOTE: Test Code Please Clean Up //alert(event._event.target.controller.title); this._isDrawingConnection = true; -- cgit v1.2.3