From cd8f5e98dd1ba97d81a7f1f2362f9ce481577957 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 11 Jun 2012 10:44:59 -0700 Subject: Binding-View : Deselect Works Now, Rendering multiple Huds Available Signed-off-by: Armen Kesablyan --- .../binding-hud-option.reel/binding-hud-option.js | 11 +- .../binding-hud.reel/binding-hud.js | 18 +-- js/stage/binding-view.reel/binding-view.html | 11 ++ js/stage/binding-view.reel/binding-view.js | 135 +++++++++++---------- js/tools/bindingTool.js | 7 +- 5 files changed, 110 insertions(+), 72 deletions(-) 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 78189415..3eda272c 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 @@ -39,10 +39,15 @@ exports.BindingHudOption = Montage.create(Component, { return this._hudOptions; }, set: function(val) { - this._hudOptions = val; - this.title = val.title; - this.bound = val.bound; + if (typeof(val) !== "undefined") { + this._hudOptions = val; + this.title = val.title; + this.bound = val.bound; + } else { + this._hudOptions = null; + } this.needsDraw = true; + } }, 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 88229683..acd072f9 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,13 +25,17 @@ exports.BindingHud = Montage.create(Component, { return this._bindingArgs; }, set: function(val) { - this._bindingArgs = val; - 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.needsDraw = true; - console.log("Binding Args Set", val); + if (typeof(val) !== "undefined") { + this._bindingArgs = val; + 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.needsDraw = true; + console.log("Binding Args Set", val); + } else { + this.properties = []; + } } }, diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 4eea3cc4..90ef2286 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -37,6 +37,17 @@ "bindingArgs": {"<-": "@hudRepeater.objectAtCurrentIteration"} } }, + "translateComposer": { + "prototype": "montage/ui/composer/translate-composer", + "properties": { + "component": {"@": "owner"} + }, + "bindings": { + "element": {"<-": "@owner._element"}, + "translateX": {"->": "@owner.translateX"}, + "translateY": {"->": "@owner.translateY"} + } + }, "nonVisualRepeater": { "prototype": "montage/ui/repetition.reel", "properties": { diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 01a71202..900d2b24 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -17,17 +17,50 @@ exports.BindingView = Montage.create(Component, { value: null }, - componentsList: { - value: {} + //Move variables + _translateX : { + value: 0 }, - /* + _translateY: { + value: 0 + }, + + translateX : { + get: function() { + return this._translateX; + }, + set: function(val) { + this._translateX = val; + console.log("x", this._translateX); + } + }, + + translateY: { + get: function() { + return this._translateY; + }, + set: function(val) { + this._translateY = val; + console.log("y", this._translateY); + } + }, + + handleMousedown: { + value: function(e) { + validateOverHud(e.clientX, e.clientY); + } + }, - Bindables Format: [ + validateOverHud: { + value: function() { - ] - */ + } + }, + componentsList: { + value: {} + }, _bindables: { value: [] @@ -58,35 +91,36 @@ exports.BindingView = Montage.create(Component, { }, set: function(val) { this._selectedComponent = val; - 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 - debugger; - this.componentsList[this.selectedComponent.identifier] = {"component": this.selectedComponent, "properties": this.application.ninja.objectsController.getPropertyList(this.selectedComponent, true)}; - 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") { - 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; + 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.getPropertyList(this.selectedComponent, true)}; + 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") { + 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]); } - }.bind(this)); - for(var key in this.componentsList){ - this.bindables.push(this.componentsList[key]); - } - console.log(this.bindables); - // Get Bindings that exist; + console.log(this.bindables); + // Get Bindings that exist; - //Get Properties of Elements in bindings; - + //Get Properties of Elements in bindings; + } this.needsDraw = true; } }, @@ -137,41 +171,14 @@ exports.BindingView = Montage.create(Component, { draw: { value: function() { if(this.selectedComponent !== null) { -// this.bindables = [ -// { -// "title": "Input1", -// "properties": [ -// {"title":"Value", -// "bindings": [ -// {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"} -// ] -// }, -// {"title": "Width", "bindings": []} -// ], -// "x": 20, -// "y": 20 -// }, -// { -// "title": "Checkbox1", -// "properties": [ -// {"title":"Group" , "bindings": []}, -// {"title":"Value", -// "bindings": [ -// {"direction": "->", "boundObject":"Input1", "boundProperty": "Value"} -// ] -// } -// ], -// "x": 120, -// "y": 120 -// } -// ]; this.canvas.width = this.application.ninja.stage.drawingCanvas.offsetWidth; this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; this.clearCanvas(); this.drawBlueLine(110,53,210,173); } else { - //this.bindables = []; + this.bindables = []; + this.clearCanvas(); } } @@ -195,6 +202,12 @@ exports.BindingView = Montage.create(Component, { } }, + handleMousemove: { + value: function() { + + } + }, + handleMousedown: { value: function(event) { diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js index 2d459a61..6444d2a7 100644 --- a/js/tools/bindingTool.js +++ b/js/tools/bindingTool.js @@ -44,12 +44,17 @@ exports.BindingTool = Montage.create(ModifierToolBase, { HandleLeftButtonDown: { value: function(event) { NJevent("enableStageMove"); - this.application.ninja.stage.bindingView.handleMousedown(event); + this.application.ninja.stage.bindingView.validateOverHud(); } }, HandleMouseMove: { value: function(event) { + /* + 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.doDraw(event); } }, -- cgit v1.2.3