From 5bf62b3dacfff71d906286716dc0d73e2cb05bb8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 15 Jun 2012 15:03:13 -0700 Subject: Binding Hud: Calling Option Selection to view Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.css | 14 ++--- .../binding-hud.reel/binding-hud.html | 2 +- js/stage/binding-view.reel/binding-view.js | 64 +++++++++++++++++----- 3 files changed, 58 insertions(+), 22 deletions(-) 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 e177963f..f7e926cb 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,7 +38,7 @@ position:relative; border-bottom:1px solid #505050; line-height:16px; - padding:1px 9px; + padding:1px 9px 1px 15px; } .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble { background: #5e9eff; @@ -51,14 +51,14 @@ .bindingHud .hudOption .connectorBubble { position: absolute; - right: -10px; - top: 1px; - background: rgba(0, 0, 0, 0.3); + right: 3px; + top: 3px; border-radius: 50%; - width: 16px; - height: 16px; + width: 12px; + height: 12px; border-left: 0px; - display: none; + display: block; + box-shadow: inset 0px 0px 6px #5e9eff; /*border-bottom-right-radius: 50%; border-top-right-radius: 50%;*/ diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html index 38d2a2ec..b8410f9b 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html @@ -65,7 +65,7 @@
-
+
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 58a4cf06..ac9751e8 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -50,12 +50,6 @@ exports.BindingView = Montage.create(Component, { } }, - handleMousedown: { - value: function(e) { - validateOverHud(e.clientX, e.clientY); - } - }, - validateOverHud: { value: function() { @@ -183,6 +177,7 @@ exports.BindingView = Montage.create(Component, { this._canvas = this.application.ninja.stage.drawingCanvas; this._context = this.application.ninja.stage.drawingCanvas.getContext('2d'); this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); + this.element.addEventListener("mousedown", this, false); } }, @@ -193,7 +188,7 @@ exports.BindingView = Montage.create(Component, { this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; this.clearCanvas(); for(var i= 0; i < this.hudRepeater.childComponents.length; i++) { - this.drawBlueLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft, this.hudRepeater.childComponents[i].element.offsetTop); + this.drawLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3); } } else { this.bindables = []; @@ -209,10 +204,12 @@ exports.BindingView = Montage.create(Component, { } }, - drawBlueLine: { - value: function(fromX,fromY,toX,toY) { - this._context.lineWidth = 4; // Set Line Thickness - //this._context.strokeStyle = "#5e9eff"; + drawLine: { + value: function(fromX,fromY,toX,toY, color) { + this._context.lineWidth = 1; // Set Line Thickness + if (color === null) { + this._context.strokeStyle = "#CCCCCC"; + } this._context.beginPath(); // Start Drawing Line this._context.moveTo(fromX, fromY); @@ -223,20 +220,59 @@ exports.BindingView = Montage.create(Component, { clearCanvas: { value: function() { - debugger; this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight); } }, + /////////////////////////////////////////////////////// + // Events & Functions to draw user selected options // + ///////////////////////////////////////////////////// + + // When a user selects a valid option this value will be switched to true and canvas + // will draw a line following the mouse and the start position + _isDrawingConnection: { + value: false + }, + + // When isDrawingConnection is set true this is the beginning position for the draw line + _connectionPositionStart: { + value: {x: 0, y:0} + }, + + // When isDrawingConnection is set true this is the end point for the draw line + _currentMousePosition: { + value: {x: 0, y:0} + }, + handleMousemove: { - value: function() { + value: function(e) { + if(this._isDrawingConnection) { + this._currentMousePosition.x = e.clientX; + this._currentMousePosition.y = e.clientY; + this.needsDraw = true; + } + + } + }, + handleMouseup: { + value: function() { + this.element.removeEventListener("mousemove", this); + this.element.removeEventListener("mouseup", this); + this._isDrawingConnection = false; + this.needsDraw = true; } }, handleMousedown: { value: function(event) { - + // We are looking for a mouse down on an option to start the connection visual + if(event._event.target.classList.contains("hudOption")) { + //NOTE: Test Code Please Clean Up + this._isDrawingConnection = true; + this.element.addEventListener("mousemove", this); + this.element.addEventListener("mouseup", this); + } } }, -- cgit v1.2.3