From f5e70ca6204f78c395458d39f14ddaf45308edf7 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 18 Jun 2012 13:22:08 -0700 Subject: Binding View - validate over huds Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.css | 4 +- js/stage/binding-view.reel/binding-view.html | 3 +- js/stage/binding-view.reel/binding-view.js | 78 +++++++++++++++++++++++----- js/stage/stage.reel/stage.html | 2 +- js/stage/stage.reel/stage.js | 12 +++-- js/tools/bindingTool.js | 10 ++-- 6 files changed, 82 insertions(+), 27 deletions(-) (limited to 'js') diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css index a08def8a..fbd1b2b6 100755 --- a/js/stage/binding-view.reel/binding-view.css +++ b/js/stage/binding-view.reel/binding-view.css @@ -5,10 +5,8 @@ */ .bindingView { - height: 100%; position: absolute; - width:100%; - z-index: 12; + z-index: 2; } .hudRepeater { diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 9a127618..5532d61a 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -15,7 +15,8 @@ "prototype": "js/stage/binding-view.reel", "properties": { "element": {"#": "bindingView"}, - "hudRepeater": {"@": "hudRepeater"} + "hudRepeater": {"@": "hudRepeater"}, + "objectsTray": {"@": "objectsTray"} } }, "hudRepeater": { diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index ac9751e8..682c0827 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -50,6 +50,32 @@ exports.BindingView = Montage.create(Component, { } }, + _width :{ value: 0 }, + width: { + get:function() { + return this._width; + }, + set: function(val) { + if(this._width !== val) { + this._width = val; + this.needsDraw = true; + } + } + }, + + _height :{ value: 0 }, + height: { + get:function() { + return this._height; + }, + set: function(val) { + if(this._height !== val) { + this._height = val; + this.needsDraw = true; + } + } + }, + validateOverHud: { value: function() { @@ -178,18 +204,28 @@ exports.BindingView = Montage.create(Component, { this._context = this.application.ninja.stage.drawingCanvas.getContext('2d'); this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); this.element.addEventListener("mousedown", this, false); + this.element.addEventListener("mousemove", this, false); } }, draw: { value: function() { + + this.element.style.width = this.width + "px"; + this.element.style.height = this.height + "px"; if(this.selectedComponent !== null) { this.canvas.width = this.application.ninja.stage.drawingCanvas.offsetWidth; this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; this.clearCanvas(); for(var i= 0; i < this.hudRepeater.childComponents.length; i++) { 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); + + } + + if(this._isDrawingConnection) { + this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4); } + } else { this.bindables = []; this.clearCanvas(); @@ -205,12 +241,11 @@ exports.BindingView = Montage.create(Component, { }, drawLine: { - value: function(fromX,fromY,toX,toY, color) { - this._context.lineWidth = 1; // Set Line Thickness - if (color === null) { - this._context.strokeStyle = "#CCCCCC"; - } - + value: function(fromX,fromY,toX,toY, color, width) { + if(width === null) width = 1; + if (color === null) color = "#CCC"; + this._context.lineWidth = width; // Set Line Thickness + this._context.strokeStyle = color; // Set Color this._context.beginPath(); // Start Drawing Line this._context.moveTo(fromX, fromY); this._context.lineTo(toX, toY); @@ -246,9 +281,24 @@ exports.BindingView = Montage.create(Component, { handleMousemove: { value: function(e) { + var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); + var overHud = false; + this.hudRepeater.childComponents.forEach(function(obj) { + 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(this._isDrawingConnection) { - this._currentMousePosition.x = e.clientX; - this._currentMousePosition.y = e.clientY; + this._currentMousePosition = mousePoint; this.needsDraw = true; } @@ -257,21 +307,21 @@ exports.BindingView = Montage.create(Component, { handleMouseup: { value: function() { - this.element.removeEventListener("mousemove", this); - this.element.removeEventListener("mouseup", this); + window.removeEventListener("mouseup", this); this._isDrawingConnection = false; this.needsDraw = true; } }, handleMousedown: { - value: function(event) { + value: function(e) { // We are looking for a mouse down on an option to start the connection visual - if(event._event.target.classList.contains("hudOption")) { + if(e._event.target.classList.contains("hudOption")) { //NOTE: Test Code Please Clean Up + //alert(event._event.target.controller.title); this._isDrawingConnection = true; - this.element.addEventListener("mousemove", this); - this.element.addEventListener("mouseup", this); + this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); + window.addEventListener("mouseup", this); } } }, diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 397af0b6..215f8f2e 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -84,7 +84,7 @@ -
+
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 30ee1e40..63339c57 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -21,6 +21,9 @@ exports.Stage = Montage.create(Component, { _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, + bindingView: { + value: null + }, _iframeContainer: { value: null }, @@ -237,9 +240,8 @@ exports.Stage = Montage.create(Component, { value: function() { if(this.resizeCanvases) { // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px - this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; - this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; - + this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11; + this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26; // Hack for now until a full component this.layout.draw(); if(this.currentDocument && (this.currentDocument.currentView === "design")) { @@ -314,8 +316,8 @@ exports.Stage = Montage.create(Component, { } // Recalculate the canvas sizes because of splitter resizing - this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; - this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11; + this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11 ; + this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.bindingView.height = this.element.offsetHeight - 11; designView.iframe.contentWindow.addEventListener("scroll", this, false); diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js index 6444d2a7..93af11c2 100644 --- a/js/tools/bindingTool.js +++ b/js/tools/bindingTool.js @@ -22,6 +22,7 @@ exports.BindingTool = Montage.create(ModifierToolBase, { }, set: function(val) { this._selectedComponent = val; + this.application.ninja.stage.bindingView.selectedComponent = val; } }, @@ -32,19 +33,23 @@ exports.BindingTool = Montage.create(ModifierToolBase, { { NJevent("enableStageMove"); this.application.ninja.workspaceMode = "binding"; + if (this.application.ninja.selectedElements.length !== 0 ) { + this.selectedComponent = this.application.ninja.selectedElements[0].controller; + } } else { NJevent("disableStageMove"); this.application.ninja.workspaceMode = "default"; + this.selectedComponent = null; } + } }, HandleLeftButtonDown: { value: function(event) { NJevent("enableStageMove"); - this.application.ninja.stage.bindingView.validateOverHud(); } }, @@ -53,8 +58,8 @@ exports.BindingTool = Montage.create(ModifierToolBase, { /* In the mouse over event we need to validate if the mouse over is over a hud. If it on top of a hud bring that single hud to the top to associate with. - */ + this.application.ninja.stage.bindingView.handleMousemove(event); //this.doDraw(event); } }, @@ -79,7 +84,6 @@ exports.BindingTool = Montage.create(ModifierToolBase, { } else { this.selectedComponent = null; } - this.application.ninja.stage.bindingView.selectedComponent = this.selectedComponent; this._isDrawing = false; } //this.endDraw(event); -- cgit v1.2.3