From 20ea3997661b068fc6628ffa573e1b2d47e3a800 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 19 Jun 2012 22:51:04 -0700 Subject: Binding View - Mouse Over Element Pop up Hud Signed-off-by: Armen Kesablyan --- js/controllers/objects-controller.js | 2 +- .../binding-hud-option.reel/binding-hud-option.js | 21 --- .../binding-hud.reel/binding-hud.html | 2 +- .../binding-hud.reel/binding-hud.js | 39 ++--- js/stage/binding-view.reel/binding-view.html | 4 +- js/stage/binding-view.reel/binding-view.js | 189 ++++++++------------- js/tools/bindingTool.js | 34 ++-- 7 files changed, 106 insertions(+), 185 deletions(-) diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index 877f7f9f..b75d2126 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js @@ -219,7 +219,7 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { if(value) { this.currentObjectBindings = this.getObjectBindings(value); - console.log("Property list", this.getPropertyList(value, true)); + //console.log("Property list", this.getPropertyList(value, true)); } else { this.currentObjectBindings = []; } 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 18eb11c9..59e070e8 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 @@ -30,27 +30,6 @@ exports.BindingHudOption = Montage.create(Component, { value: false }, - _hudOptions: { - value: [] - }, - - hudOptions: { - get: function() { - return this._hudOptions; - }, - set: function(val) { - if (typeof(val) !== "undefined") { - this._hudOptions = val; - this.title = val.title; - this.bound = val.bound; - } else { - this._hudOptions = null; - } - this.needsDraw = true; - - } - }, - prepareForDraw: { value: function() { // Set Up Listener for click and propagate up to Binding View 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 b8410f9b..82686c7f 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 @@ -33,7 +33,7 @@ "element": {"#" : "hudOption"} }, "bindings": { - "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} + "title": {"<-": "@repeater.objectAtCurrentIteration"} } }, "resizer1": { 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 a8c3ae68..b03c5a06 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 @@ -25,35 +25,19 @@ exports.BindingHud = Montage.create(Component, { get: function() { return this._userComponent; }, - set: function(val) { - this._userComponent = val; - } - }, - - - bindingArgs: { - get: function() { - return this._bindingArgs; - }, 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; - this.properties = this._bindingArgs.properties; + this._userComponent = val; + this.title = val.identifier; + this.x = val.element.offsetLeft; + this.y = val.element.offsetTop; + this.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true); this.needsDraw = true; - } else { - this.properties = []; } } }, - properties: { - value: [ - ] - }, + properties: { value: [] }, _isResizing: { value: null @@ -149,19 +133,20 @@ exports.BindingHud = Montage.create(Component, { // } // this.properties.push({"title":obj, "bound": objBound}); // }.bind(this)); + this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent)); } }, draw: { value: function() { this.titleElement.innerHTML = this.title; - -// if(this.isResizing) { -// this.timelineSplitter.collapsed = this.height - this._resizedHeight < 46; -// this.panelSplitter.collapsed = this.width - this._resizedWidth < 30; -// } this.element.style.top = (this.y + this._resizedY) + "px"; this.element.style.left = (this.x + this._resizedX) + "px"; } + }, + didDraw: { + value: function() { + + } } }); \ No newline at end of file diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 01bc3ff7..9eb338d8 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -25,7 +25,7 @@ "element": {"#": "hudRepeater"} }, "bindings": { - "objects": {"<-": "@owner.bindables"} + "objects": {"<-": "@owner.boundComponents"} } }, "objectsTray" : { @@ -40,7 +40,7 @@ "element": {"#" : "hud"} }, "bindings": { - "bindingArgs": {"<-": "@hudRepeater.objectAtCurrentIteration"} + "userComponent": {"<-": "@hudRepeater.objectAtCurrentIteration"} }, "listeners": [ { diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 8c201ba1..aa690ee6 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -13,42 +13,15 @@ var Montage = require("montage/core/core").Montage, exports.BindingView = Montage.create(Component, { //private Properties + _canvas: { value:null }, + _context : { value: null }, + _targetedElement: {value: null}, + componentsList: { value: {} }, - hudRepeater: { - value: null - }, - _selectedComponent: { - value: null - }, - - //Move variables - _translateX : { - value: 0 - }, - - _translateY: { - value: 0 - }, - - translateX : { - get: function() { - return this._translateX; - }, - set: function(val) { - this._translateX = val; - } - }, - - translateY: { - get: function() { - return this._translateY; - }, - set: function(val) { - this._translateY = val; - } - }, + hudRepeater: { value: null }, - _width :{ value: 0 }, + //Public Properties + _width :{ value: 0 }, width: { get:function() { return this._width; @@ -74,16 +47,6 @@ exports.BindingView = Montage.create(Component, { } }, - validateOverHud: { - value: function() { - - } - }, - - componentsList: { - value: {} - }, - _connectionElementStart: { value: null }, connectionElementStart: { get: function() { @@ -124,92 +87,53 @@ exports.BindingView = Montage.create(Component, { } }, - _bindables: { - value: [] - }, - - _nonVisualComponents: { - value:[] - }, - - _bindingViewCanvas: { - value:null - }, - _canvas: { - value:null - }, - _context : { - value: null - }, - - startConnector: { - value: null + _boundComponents: { value: [] }, + boundComponents: { + get: function() { + return this._boundComponents; + }, + set: function(val) { + this._boundComponents = val; + } }, - //Public Objects - hudRepeater: { value: null }, - - - //Public Properties + _selectedComponent: { value: null }, selectedComponent: { get: function() { return this._selectedComponent; }, set: function(val) { + this.boundComponents = []; if(this._selectedComponent !== val) { - this.bindables = []; this.clearCanvas(); this._selectedComponent = val; if(this._selectedComponent !== null) { this.application.ninja.objectsController.currentObject = this.selectedComponent; - var arrBindings = this.application.ninja.objectsController.currentObjectBindings; - var arrProperties = this.application.ninja.objectsController.getPropertyList(this.selectedComponent, true); - - //Add the first component which is the selected one to have a hud - - this.componentsList[this.selectedComponent.identifier] = {"component": this.selectedComponent, properties:[] }; - this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) { - this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj}) - }.bind(this)); - //Go through the loop and find every interacted object by bindings - arrBindings.forEach(function(obj) { - if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") { - var componentListItem = {} - componentListItem.component = obj.boundObject; - componentListItem.properties = []; - this.application.ninja.objectsController.getPropertiesFromObject(obj.boundObject, true).forEach(function(obj) { - componentListItem.properties.push({"title":obj}) - }.bind(this)); - this.componentsList[obj.boundObject.identifier] = componentListItem; - } - }.bind(this)); - for(var key in this.componentsList){ - this.bindables.push(this.componentsList[key]); - } - // Get Bindings that exist; - - - //Get Properties of Elements in bindings; + this.boundComponents.push(this.selectedComponent); } this.needsDraw = true; } } }, - handleResizeMove: { - value: function(e) { - console.log(e); + handleShowBinding: { + value: function(bindingMeta) { + if(bindingMeta === null) return; + for(var j=0; j< bindingMeta.length; j++) { + var bindingExists = false; + for(var i =0; i < this.boundComponents; i++) { + if(this.boundComponents[i] === bindingMeta[j].boundObject) { + bindingExists = true; + } + } + if(!bindingExists) { + //this.boundComponents.push(bindingMeta[j].boundObject); + } + } } }, - bindables: { - get: function() { - return this._bindables; - }, - set: function(val) { - this._bindables = val; - } - }, + _nonVisualComponents: { value:[] }, nonVisualComponents: { get: function() { return this._nonVisualComponents; @@ -218,6 +142,7 @@ exports.BindingView = Montage.create(Component, { this._nonVisualComponents = val; } }, + bindingViewCanvas: { get: function() { return this._bindingViewCanvas; @@ -258,17 +183,14 @@ 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.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); - + this.drawLine(this.hudRepeater.objects[i].element.offsetLeft,this.hudRepeater.objects[i].element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3); } - if(this._isDrawingConnection) { if (this.hudRepeater.childComponents.length > 1) { - //this.object + // Make things disappear } - this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4); + this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#5e9eff", 4); } - } else { this.bindables = []; this.clearCanvas(); @@ -369,12 +291,40 @@ exports.BindingView = Montage.create(Component, { } } this.mouseOverHud = overHud; - + if(this._isDrawingConnection && !overHud) { + //NOTE : Continue This content. mouse over select + var obj = this.application.ninja.stage.getElement(event, true); + if (obj) + { + if (!obj.controller || obj === null) + { + if(this._targetedElement) + { + this._targetedElement.classList.remove("active-element-outline"); + this.boundComponents.pop(); + this._targetedElement = null; + } + } + else + { + if (obj !== this._targetedElement) + { + if(this._targetedElement) + { + this._targetedElement.classList.remove("active-element-outline"); + this.boundComponents.pop(); + } + this._targetedElement = obj; + this._targetedElement.classList.add("active-element-outline"); + this.boundComponents.push(this._targetedElement.controller); + } + } + } + } if(this._isDrawingConnection) { this._currentMousePosition = mousePoint; this.needsDraw = true; } - } }, @@ -399,6 +349,11 @@ exports.BindingView = Montage.create(Component, { boundObjectPropertyPath: this.connectionPropertyEnd }); } + if(this._targetedElement !==null) { + this.boundComponents.pop(); + this._targetedElement.classList.remove("active-element-outline"); + this._targetedElement = null; + } this._isDrawingConnection = false; this.needsDraw = true; } diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js index 93af11c2..b284fc47 100644 --- a/js/tools/bindingTool.js +++ b/js/tools/bindingTool.js @@ -59,6 +59,7 @@ 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); } @@ -66,25 +67,26 @@ exports.BindingTool = Montage.create(ModifierToolBase, { HandleLeftButtonUp: { value: function(event) { + if(!this.application.ninja.stage.bindingView._isDrawingConnection) { + if(this._escape) { + this._escape = false; + return; + } - if(this._escape) { - this._escape = false; - return; - } - - if(this._hasDraw) { - this._hasDraw = false; - //this.endDraw(event); - } else { - this.doSelection(event); - if (this.application.ninja.selectedElements.length !== 0 ) { - if(this.application.ninja.selectedElements[0].controller) { - this.selectedComponent = this.application.ninja.selectedElements[0].controller; - } + if(this._hasDraw) { + this._hasDraw = false; + //this.endDraw(event); } else { - this.selectedComponent = null; + this.doSelection(event); + if (this.application.ninja.selectedElements.length !== 0 ) { + if(this.application.ninja.selectedElements[0].controller) { + this.selectedComponent = this.application.ninja.selectedElements[0].controller; + } + } else { + this.selectedComponent = null; + } + this._isDrawing = false; } - this._isDrawing = false; } //this.endDraw(event); //NJevent("disableStageMove"); -- cgit v1.2.3