From d48f086ad64badf07b5f82bf6e0216074eac7a25 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 16 May 2012 18:25:03 -0700 Subject: Initial Binding Hud Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100755 js/stage/binding-view.reel/binding-view.js (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js new file mode 100755 index 00000000..4daa85b3 --- /dev/null +++ b/js/stage/binding-view.reel/binding-view.js @@ -0,0 +1,26 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +/** +@requires montage/core/core +@requires montage/ui/component +*/ +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.bindingView = Montage.create(Component, { + _bindables: { + value: [] + }, + bindables: { + get: function() { + return this._bindables; + }, + set: function(val) { + this._bindables = val; + } + } +}); \ No newline at end of file -- cgit v1.2.3 From 95bef3bbd77c6c3bd01b5222986f2dd35a7218b4 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Sat, 19 May 2012 14:48:35 -0700 Subject: Changes to binding view Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 4daa85b3..d3d988c1 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -22,5 +22,15 @@ exports.bindingView = Montage.create(Component, { set: function(val) { this._bindables = val; } + }, + + + nonVisualComponents: { + get: function() { + return this._bindables; + }, + set: function(val) { + this._bindables = val; + } } }); \ No newline at end of file -- cgit v1.2.3 From 3ed95247e9ea4b0a7833401ed6809647b7c4acbf Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 23 May 2012 14:26:46 -0700 Subject: Binding Visual Tool Initial setup Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 33 +++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index d3d988c1..df3bc3ee 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -11,10 +11,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; -exports.bindingView = Montage.create(Component, { +exports.BindingView = Montage.create(Component, { + //private Properties + _selectedElement: { + value: null + }, _bindables: { value: [] }, + _nonVisualComponents: { + value:null + }, + + //Public Objects + hudRepeater: { value: null }, + + + //Public Properties + selectedElement: { + get: function() { + return this._selectedElement; + }, + set: function(val) { + this._selectedElement = val; + } + }, bindables: { get: function() { return this._bindables; @@ -23,14 +44,16 @@ exports.bindingView = Montage.create(Component, { this._bindables = val; } }, - - nonVisualComponents: { get: function() { - return this._bindables; + return this._nonVisualComponents; }, set: function(val) { - this._bindables = val; + this._nonVisualComponents = val; } } + + //Methods + + }); \ No newline at end of file -- cgit v1.2.3 From e8c4e98c24092a360eb2f637983fd104fbb67f66 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 25 May 2012 11:22:05 -0700 Subject: Setup up Binding View Draw Cycle Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index df3bc3ee..97593c66 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -34,6 +34,7 @@ exports.BindingView = Montage.create(Component, { }, set: function(val) { this._selectedElement = val; + this.needsDraw = true; } }, bindables: { @@ -51,9 +52,31 @@ exports.BindingView = Montage.create(Component, { set: function(val) { this._nonVisualComponents = val; } - } + }, //Methods + //Montage Draw Cycle + prepareForDraw: { + value: function() { + + } + }, + + draw: { + value: function() { + if(this.selectedElement !== null) { + this.bindables = [ + {"objectName": "Input1", "objectTitle": ""}, + ] + } + } + }, + + didDraw: { + value: function() { + + } + } }); \ No newline at end of file -- cgit v1.2.3 From a581fb3c544ee2faeafbb75f7a3f5719f53cf323 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 30 May 2012 15:30:38 -0700 Subject: Visual Bindings Initial generate from Array. Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 97593c66..a0ca0c4f 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -20,7 +20,7 @@ exports.BindingView = Montage.create(Component, { value: [] }, _nonVisualComponents: { - value:null + value:[] }, //Public Objects @@ -67,8 +67,27 @@ exports.BindingView = Montage.create(Component, { value: function() { if(this.selectedElement !== null) { this.bindables = [ - {"objectName": "Input1", "objectTitle": ""}, - ] + { + "title": "Input1", + "properties": [ + {"title":"Value"}, + {"title": "Width"} + ], + "x": 20, + "y": 20 + }, + { + "title": "Checkbox1", + "properties": [ + {"title":"Group"}, + {"title": "Value"} + ], + "x": 120, + "y": 120 + } + ]; + } else { + this.bindables = []; } } }, -- cgit v1.2.3 From 9e187e40d9982654081e52be656e00b3ca4d36b5 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 1 Jun 2012 13:13:10 -0700 Subject: Binding View Canvas Initial Development Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 31 +++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index a0ca0c4f..90e6a5e3 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -23,6 +23,10 @@ exports.BindingView = Montage.create(Component, { value:[] }, + _bindingViewCanvas: { + value:null + }, + //Public Objects hudRepeater: { value: null }, @@ -53,9 +57,19 @@ exports.BindingView = Montage.create(Component, { this._nonVisualComponents = val; } }, + bindingViewCanvas: { + get: function() { + return this._bindingViewCanvas; + }, + set: function(val) { + this._bindingViewCanvas = val; + } + }, //Methods + + //Montage Draw Cycle prepareForDraw: { value: function() { @@ -70,7 +84,10 @@ exports.BindingView = Montage.create(Component, { { "title": "Input1", "properties": [ - {"title":"Value"}, + {"title":"Value", + "bindings": [ + {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"} + ]}, {"title": "Width"} ], "x": 20, @@ -92,6 +109,18 @@ exports.BindingView = Montage.create(Component, { } }, + drawBlueLine: { + value: function(fromX,fromY,toX,toY) { + + } + }, + + handleMousedown: { + value: function(event) { + debugger; + } + }, + didDraw: { value: function() { -- cgit v1.2.3 From 7655e32da5bcdf7b205afc1908c9b7bcc661b0d4 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Sat, 2 Jun 2012 20:54:30 -0700 Subject: binding canvas Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 40 +++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 6 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 90e6a5e3..d17735b2 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -26,6 +26,12 @@ exports.BindingView = Montage.create(Component, { _bindingViewCanvas: { value:null }, + _canvas: { + value:null + }, + _context : { + value: null + }, //Public Objects hudRepeater: { value: null }, @@ -73,7 +79,9 @@ exports.BindingView = Montage.create(Component, { //Montage Draw Cycle prepareForDraw: { value: function() { - + this._canvas = this.application.ninja.stage.drawingCanvas; + this._context = this._canvas.getContext('2d'); + this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); } }, @@ -87,8 +95,9 @@ exports.BindingView = Montage.create(Component, { {"title":"Value", "bindings": [ {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"} - ]}, - {"title": "Width"} + ] + }, + {"title": "Width", "bindings": []} ], "x": 20, "y": 20 @@ -96,28 +105,47 @@ exports.BindingView = Montage.create(Component, { { "title": "Checkbox1", "properties": [ - {"title":"Group"}, - {"title": "Value"} + {"title":"Group" , "bindings": []}, + {"title":"Value", + "bindings": [ + {"direction": "->", "boundObject":"Input1", "boundProperty": "Value"} + ] + } ], "x": 120, "y": 120 } ]; + this.drawBlueLine(100,100,200,200) + } else { this.bindables = []; } + } }, drawBlueLine: { value: function(fromX,fromY,toX,toY) { + this._context.lineWidth = 4; // Set Line Thickness + this._context.strokeStyle = "#00F" + this._context.beginPath(); // Start Drawing Line + this._context.moveTo(fromX, fromY); + this._context.lineTo(toX, toY); + this._context.stroke(); } }, handleMousedown: { value: function(event) { - debugger; + + } + }, + + handleScroll: { + value: function() { + this.needsDraw = true; } }, -- cgit v1.2.3 From cd089f6692934a68bda7c303928a7c78dd13ac07 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 5 Jun 2012 12:55:34 -0700 Subject: Changes for binding View Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 103 ++++++++++++++++++----------- 1 file changed, 64 insertions(+), 39 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index d17735b2..8ffc45c1 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -13,7 +13,7 @@ var Montage = require("montage/core/core").Montage, exports.BindingView = Montage.create(Component, { //private Properties - _selectedElement: { + _selectedComponent: { value: null }, _bindables: { @@ -38,12 +38,22 @@ exports.BindingView = Montage.create(Component, { //Public Properties - selectedElement: { + selectedComponent: { get: function() { - return this._selectedElement; + return this._selectedComponent; }, set: function(val) { - this._selectedElement = val; + this._selectedComponent = val; + this.application.ninja.objectsController.currentObject = this.selectedComponent; + var arrBindings = this.application.ninja.objectsController.currentObjectBindings; + arrBindings.forEach(function(obj) { + + }.bind(this)); + // Get Bindings that exist; + + + //Get Properties of Elements in bindings; + this.needsDraw = true; } }, @@ -73,13 +83,19 @@ exports.BindingView = Montage.create(Component, { }, //Methods - - + canvas: { + get: function() { + return this._canvas; + }, + set: function(val) { + this._canvas = val; + } + }, //Montage Draw Cycle prepareForDraw: { value: function() { - this._canvas = this.application.ninja.stage.drawingCanvas; + //this._canvas = this.application.ninja.stage.drawingCanvas; this._context = this._canvas.getContext('2d'); this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); } @@ -87,39 +103,42 @@ exports.BindingView = Montage.create(Component, { draw: { value: function() { - if(this.selectedElement !== 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.drawBlueLine(100,100,200,200) + 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 = []; } } @@ -128,7 +147,7 @@ exports.BindingView = Montage.create(Component, { drawBlueLine: { value: function(fromX,fromY,toX,toY) { this._context.lineWidth = 4; // Set Line Thickness - this._context.strokeStyle = "#00F" + this._context.strokeStyle = "#5e9eff" this._context.beginPath(); // Start Drawing Line this._context.moveTo(fromX, fromY); @@ -137,6 +156,12 @@ exports.BindingView = Montage.create(Component, { } }, + clearCanvas: { + value: function() { + this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight); + } + }, + handleMousedown: { value: function(event) { -- cgit v1.2.3 From 557473639c1854d2e545f542d5f8656a040d575c Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 6 Jun 2012 14:42:12 -0700 Subject: Object Controller Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 8ffc45c1..d76aab81 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -46,6 +46,7 @@ exports.BindingView = Montage.create(Component, { this._selectedComponent = val; this.application.ninja.objectsController.currentObject = this.selectedComponent; var arrBindings = this.application.ninja.objectsController.currentObjectBindings; + debugger; arrBindings.forEach(function(obj) { }.bind(this)); -- cgit v1.2.3 From 85847ff047850808ba2bcfb43a6aa83913376b5b Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 7 Jun 2012 10:22:03 -0700 Subject: Changes to Binding View Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index d76aab81..1457e2fc 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -16,9 +16,17 @@ exports.BindingView = Montage.create(Component, { _selectedComponent: { value: null }, + + //Bindables Format: [ + + //] + + _bindables: { value: [] }, + + _nonVisualComponents: { value:[] }, @@ -46,10 +54,12 @@ exports.BindingView = Montage.create(Component, { this._selectedComponent = val; this.application.ninja.objectsController.currentObject = this.selectedComponent; var arrBindings = this.application.ninja.objectsController.currentObjectBindings; + debugger; arrBindings.forEach(function(obj) { }.bind(this)); + this.bindables.push(this._selectedComponent); // Get Bindings that exist; -- cgit v1.2.3 From 6a27268ebf1cd5fa7bf8313eb5712fd5f6985758 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 8 Jun 2012 11:29:13 -0700 Subject: Render Hud Multiple Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 34 ++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 6 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 1457e2fc..01a71202 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -17,16 +17,22 @@ exports.BindingView = Montage.create(Component, { value: null }, - //Bindables Format: [ - - //] + componentsList: { + value: {} + }, + + /* + + Bindables Format: [ + + ] + */ _bindables: { value: [] }, - _nonVisualComponents: { value:[] }, @@ -54,12 +60,28 @@ exports.BindingView = Montage.create(Component, { 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; + } }.bind(this)); - this.bindables.push(this._selectedComponent); + for(var key in this.componentsList){ + this.bindables.push(this.componentsList[key]); + } + console.log(this.bindables); // Get Bindings that exist; -- cgit v1.2.3 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 --- js/stage/binding-view.reel/binding-view.js | 135 ++++++++++++++++------------- 1 file changed, 74 insertions(+), 61 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') 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) { -- cgit v1.2.3 From cfa2d42f6ca65eb3ce1bea92db5f4af87dd68bb5 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 13 Jun 2012 11:36:01 -0700 Subject: Binding-View: Translate huds Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 900d2b24..b0df6df1 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -13,6 +13,10 @@ var Montage = require("montage/core/core").Montage, exports.BindingView = Montage.create(Component, { //private Properties + + hudRepeater: { + value: null + }, _selectedComponent: { value: null }, @@ -98,7 +102,10 @@ exports.BindingView = Montage.create(Component, { //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)}; + 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)); console.log("components:",this.componentsList); //Go through the loop and find every interacted object by bindings arrBindings.forEach(function(obj) { @@ -184,6 +191,12 @@ exports.BindingView = Montage.create(Component, { } }, + didDraw: { + value: function() { + + } + }, + drawBlueLine: { value: function(fromX,fromY,toX,toY) { this._context.lineWidth = 4; // Set Line Thickness -- cgit v1.2.3 From 60e9ea67e0f6d0cf167b6d5068e2e01db5f67966 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 14 Jun 2012 15:00:18 -0700 Subject: Binding-Huds draw to component Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index b0df6df1..58a4cf06 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -94,6 +94,9 @@ exports.BindingView = Montage.create(Component, { return this._selectedComponent; }, set: function(val) { + if(this._selectedComponent !== val) { + this.bindables = []; + this.clearCanvas(); this._selectedComponent = val; if(this._selectedComponent !== null) { this.application.ninja.objectsController.currentObject = this.selectedComponent; @@ -128,9 +131,17 @@ exports.BindingView = Montage.create(Component, { //Get Properties of Elements in bindings; } - this.needsDraw = true; + this.needsDraw = true; + } } }, + + handleResizeMove: { + value: function(e) { + console.log(e); + } + }, + bindables: { get: function() { return this._bindables; @@ -169,8 +180,8 @@ exports.BindingView = Montage.create(Component, { //Montage Draw Cycle prepareForDraw: { value: function() { - //this._canvas = this.application.ninja.stage.drawingCanvas; - this._context = this._canvas.getContext('2d'); + 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); } }, @@ -181,8 +192,9 @@ exports.BindingView = Montage.create(Component, { 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); - + 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); + } } else { this.bindables = []; this.clearCanvas(); @@ -200,7 +212,7 @@ exports.BindingView = Montage.create(Component, { drawBlueLine: { value: function(fromX,fromY,toX,toY) { this._context.lineWidth = 4; // Set Line Thickness - this._context.strokeStyle = "#5e9eff" + //this._context.strokeStyle = "#5e9eff"; this._context.beginPath(); // Start Drawing Line this._context.moveTo(fromX, fromY); @@ -211,6 +223,7 @@ exports.BindingView = Montage.create(Component, { clearCanvas: { value: function() { + debugger; this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight); } }, -- cgit v1.2.3 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 --- js/stage/binding-view.reel/binding-view.js | 64 +++++++++++++++++++++++------- 1 file changed, 50 insertions(+), 14 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') 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 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.js | 78 ++++++++++++++++++++++++------ 1 file changed, 64 insertions(+), 14 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') 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); } } }, -- cgit v1.2.3 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 --- js/stage/binding-view.reel/binding-view.js | 58 ++++++++++++++++++++++++------ 1 file changed, 47 insertions(+), 11 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') 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 From fe3a9e7990024293b39fac815a7e340a3b21859a Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 18 Jun 2012 23:09:09 -0700 Subject: Latest Changes Visual Binding Starting Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 0a663a4e..d2f653fa 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -342,7 +342,7 @@ exports.BindingView = Montage.create(Component, { // var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); this.element.style.zIndex = "12"; var nodeEl = document.elementFromPoint(e.pageX, e.pageY); - console.log(nodeEl); + alert(nodeEl.parentElement.controller.title); this.element.style.zIndex = null; this._isDrawingConnection = false; this.needsDraw = true; -- cgit v1.2.3 From 244e608645778746d1a3b5aa0d4c0868f7c5c272 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 19 Jun 2012 00:42:34 -0700 Subject: Binding-View: Visual Bind Item Working Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 67 +++++++++++++++++++++++++++--- 1 file changed, 62 insertions(+), 5 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index d2f653fa..4fa82789 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -84,6 +84,46 @@ exports.BindingView = Montage.create(Component, { value: {} }, + _connectionElementStart: { value: null }, + connectionElementStart: { + get: function() { + return this._connectionElementStart; + }, + set: function(val) { + this._connectionElementStart = val; + } + }, + + _connectionElementEnd: { value: null }, + connectionElementEnd: { + get: function() { + return this._connectionElementEnd; + }, + set: function(val) { + this._connectionElementEnd = val; + } + }, + + _connectionPropertyStart: { value: null }, + connectionPropertyStart: { + get: function() { + return this._connectionPropertyStart; + }, + set: function(val) { + this._connectionPropertyStart = val; + } + }, + + _connectionPropertyEnd: { value: null }, + connectionPropertyEnd: { + get: function() { + return this._connectionPropertyEnd; + }, + set: function(val) { + this._connectionPropertyEnd = val; + } + }, + _bindables: { value: [] }, @@ -223,6 +263,9 @@ exports.BindingView = Montage.create(Component, { } if(this._isDrawingConnection) { + if (this.hudRepeater.childComponents.length > 1) { + //this.object + } this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4); } @@ -335,15 +378,27 @@ exports.BindingView = Montage.create(Component, { } }, + handleMouseup: { 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); - alert(nodeEl.parentElement.controller.title); this.element.style.zIndex = null; + if(nodeEl.classList.contains("connectorBubble")) { +// var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); +// var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); + debugger; + this.connectionElementEnd = nodeEl.parentElement.controller.parentComponent.parentComponent.userComponent; + this.connectionPropertyEnd = nodeEl.parentElement.controller.title; + console.log(this.connectionElementStart, this.connectionPropertyStart, this.connectionElementEnd, this.connectionPropertyEnd); + this.application.ninja.objectsController.addBinding({ + sourceObject: this.connectionElementStart, + sourceObjectPropertyPath: this.connectionPropertyStart, + boundObject: this.connectionElementEnd, + boundObjectPropertyPath: this.connectionPropertyEnd + }); + } this._isDrawingConnection = false; this.needsDraw = true; } @@ -353,10 +408,12 @@ exports.BindingView = Montage.create(Component, { value: function(e) { // We are looking for a mouse down on an option to start the connection visual if(e._event.target.classList.contains("connectorBubble")) { - //NOTE: Test Code Please Clean Up - //alert(event._event.target.controller.title); + //console.log(e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent); + this.connectionElementStart = e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent; + this.connectionPropertyStart = e._event.target.parentElement.controller.title; this._isDrawingConnection = true; this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); + window.addEventListener("mouseup", this); } } -- cgit v1.2.3 From 1007cbf983ad0f2460a4122a492a96023fdb4439 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 19 Jun 2012 01:05:51 -0700 Subject: Bug: Text Tool Breaking canvas space. Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 4fa82789..8c201ba1 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -388,10 +388,10 @@ exports.BindingView = Montage.create(Component, { if(nodeEl.classList.contains("connectorBubble")) { // var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); // var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); - debugger; + //debugger; this.connectionElementEnd = nodeEl.parentElement.controller.parentComponent.parentComponent.userComponent; this.connectionPropertyEnd = nodeEl.parentElement.controller.title; - console.log(this.connectionElementStart, this.connectionPropertyStart, this.connectionElementEnd, this.connectionPropertyEnd); + //console.log(this.connectionElementStart, this.connectionPropertyStart, this.connectionElementEnd, this.connectionPropertyEnd); this.application.ninja.objectsController.addBinding({ sourceObject: this.connectionElementStart, sourceObjectPropertyPath: this.connectionPropertyStart, -- cgit v1.2.3 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/stage/binding-view.reel/binding-view.js | 189 +++++++++++------------------ 1 file changed, 72 insertions(+), 117 deletions(-) (limited to 'js/stage/binding-view.reel/binding-view.js') 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; - }