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 --- .../binding-view.reel/binding-hud.reel/binding-hud.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100755 js/stage/binding-view.reel/binding-hud.reel/binding-hud.js (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 new file mode 100755 index 00000000..cbb4c1d7 --- /dev/null +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js @@ -0,0 +1,16 @@ +/* +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.bindingHud = Montage.create(Component, { + +}); \ 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-hud.reel/binding-hud.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 cbb4c1d7..a63f2775 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 @@ -11,6 +11,11 @@ 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.bindingHud = Montage.create(Component, { - +exports.BindingHud = Montage.create(Component, { + properties: { + value: [ + {"title": "myProperty1"}, + {"title":"myproperty2"} + ] + } }); \ 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 --- .../binding-view.reel/binding-hud.reel/binding-hud.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 a63f2775..029a1a39 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 @@ -12,10 +12,28 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.BindingHud = Montage.create(Component, { + title: { + value: "default" + }, properties: { value: [ {"title": "myProperty1"}, {"title":"myproperty2"} ] + }, + + x: { + value: 20 + }, + + y: { + value: 100 + }, + + draw: { + value: function() { + this.element.style.top = this.y + "px"; + this.element.style.left = this.x + "px"; + } } }); \ No newline at end of file -- 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 --- .../binding-hud.reel/binding-hud.js | 53 ++++++++++++++++++++-- 1 file changed, 49 insertions(+), 4 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 029a1a39..14347a32 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 @@ -12,13 +12,30 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.BindingHud = Montage.create(Component, { - title: { - value: "default" + _bindingArgs: { + value: null + }, + + titleElement: { + value: null + }, + + bindingArgs: { + get: function() { + return this._bindingArgs; + }, + set: function(val) { + this._bindingArgs = val; + this.title = this.bindingArgs.sourceObject.identifier; + this.x = this._bindingArgs.sourceObject.element.offsetLeft; + this.y = this._bindingArgs.sourceObject.element.offsetTop; + this.needsDraw = true; + console.log("Binding Args Set", val); + } }, + properties: { value: [ - {"title": "myProperty1"}, - {"title":"myproperty2"} ] }, @@ -30,10 +47,38 @@ exports.BindingHud = Montage.create(Component, { value: 100 }, + _title: { + value: "default" + }, + + title: { + get: function() { + return this._title; + }, + set: function(val) { + this._title = val; + } + }, + + prepareForDraw: { + value: function() { + var arrProperties = this.application.ninja.objectsController.getEnumerableProperties(this._bindingArgs.sourceObject, true); + arrProperties.forEach(function(obj) { + var objBound = false; + if(this._bindingArgs._boundObjectPropertyPath === obj) { + objBound = true; + } + this.properties.push({"title":obj, "bound": objBound}); + }.bind(this)); + } + }, + draw: { value: function() { + this.titleElement.innerHTML = this.title; this.element.style.top = this.y + "px"; this.element.style.left = this.x + "px"; + console.log("hud",this); } } }); \ No newline at end of file -- 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 --- .../binding-hud.reel/binding-hud.js | 23 +++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 14347a32..88229683 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 @@ -26,9 +26,10 @@ exports.BindingHud = Montage.create(Component, { }, set: function(val) { this._bindingArgs = val; - this.title = this.bindingArgs.sourceObject.identifier; - this.x = this._bindingArgs.sourceObject.element.offsetLeft; - this.y = this._bindingArgs.sourceObject.element.offsetTop; + 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); } @@ -62,14 +63,14 @@ exports.BindingHud = Montage.create(Component, { prepareForDraw: { value: function() { - var arrProperties = this.application.ninja.objectsController.getEnumerableProperties(this._bindingArgs.sourceObject, true); - arrProperties.forEach(function(obj) { - var objBound = false; - if(this._bindingArgs._boundObjectPropertyPath === obj) { - objBound = true; - } - this.properties.push({"title":obj, "bound": objBound}); - }.bind(this)); +// var arrProperties = this.application.ninja.objectsController.getEnumerableProperties(this._bindingArgs.sourceObject, true); +// arrProperties.forEach(function(obj) { +// var objBound = false; +// if(this._bindingArgs._boundObjectPropertyPath === obj) { +// objBound = true; +// } +// this.properties.push({"title":obj, "bound": objBound}); +// }.bind(this)); } }, -- 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 --- .../binding-view.reel/binding-hud.reel/binding-hud.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 = []; + } } }, -- 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 --- .../binding-hud.reel/binding-hud.js | 74 ++++++++++++++++++++-- 1 file changed, 70 insertions(+), 4 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 acd072f9..5053d3bb 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 @@ -44,14 +44,75 @@ exports.BindingHud = Montage.create(Component, { ] }, - x: { + _isResizing: { + value: null + }, + + _resizedX : { + value: 0 + }, + + _resizedY: { + value: 0 + }, + + handleResizeStart: { + value:function(e) { + this.isResizing = true; + this.x = parseInt(this.x); + this.y = parseInt(this.y); + this.needsDraw = true; + } + }, + + handleResizeMove: { + value:function(e) { + this._resizedY = e._event.dY; + this._resizedX = e._event.dX; + this.needsDraw = true; + } + }, + + handleResizeEnd: { + value: function(e) { + this.x += this._resizedX; + this.y += this._resizedY; + this._resizedX = 0; + this._resizedY = 0; + this.isResizing = false; + this.needsDraw = true; + } + }, + + _x: { value: 20 }, - y: { + _y: { value: 100 }, + x: { + get: function() { + return this._x; + }, + set: function(val) { + this._x = val; + console.log(this._x); + this.needsDraw = true; + } + }, + + y: { + get: function() { + return this._y; + }, + set: function(val) { + this._y = val; + this.needsDraw = true; + } + }, + _title: { value: "default" }, @@ -81,8 +142,13 @@ exports.BindingHud = Montage.create(Component, { draw: { value: function() { this.titleElement.innerHTML = this.title; - this.element.style.top = this.y + "px"; - this.element.style.left = this.x + "px"; + +// 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"; console.log("hud",this); } } -- 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-hud.reel/binding-hud.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 5053d3bb..4260a66c 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 @@ -62,6 +62,7 @@ exports.BindingHud = Montage.create(Component, { this.x = parseInt(this.x); this.y = parseInt(this.y); this.needsDraw = true; + this.parentComponent.parentComponent.needsDraw = true; } }, @@ -70,6 +71,7 @@ exports.BindingHud = Montage.create(Component, { this._resizedY = e._event.dY; this._resizedX = e._event.dX; this.needsDraw = true; + this.parentComponent.parentComponent.needsDraw = true; } }, @@ -81,6 +83,7 @@ exports.BindingHud = Montage.create(Component, { this._resizedY = 0; this.isResizing = false; this.needsDraw = true; + this.parentComponent.parentComponent.needsDraw = true; } }, @@ -98,7 +101,6 @@ exports.BindingHud = Montage.create(Component, { }, set: function(val) { this._x = val; - console.log(this._x); this.needsDraw = true; } }, @@ -149,7 +151,6 @@ exports.BindingHud = Montage.create(Component, { // } this.element.style.top = (this.y + this._resizedY) + "px"; this.element.style.left = (this.x + this._resizedX) + "px"; - console.log("hud",this); } } }); \ No newline at end of file -- 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-hud.reel/binding-hud.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 4260a66c..799c5866 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 @@ -32,7 +32,6 @@ exports.BindingHud = Montage.create(Component, { this.y = this._bindingArgs.component.element.offsetTop; this.properties = this._bindingArgs.properties; this.needsDraw = true; - console.log("Binding Args Set", val); } else { this.properties = []; } -- 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-hud.reel/binding-hud.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 799c5866..a8c3ae68 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 @@ -20,6 +20,17 @@ exports.BindingHud = Montage.create(Component, { value: null }, + _userComponent: { value: null }, + userComponent: { + get: function() { + return this._userComponent; + }, + set: function(val) { + this._userComponent = val; + } + }, + + bindingArgs: { get: function() { return this._bindingArgs; @@ -27,6 +38,7 @@ exports.BindingHud = Montage.create(Component, { 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; -- 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 --- .../binding-hud.reel/binding-hud.js | 39 +++++++--------------- 1 file changed, 12 insertions(+), 27 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 -- cgit v1.2.3 From e506b93b285a1666999afe7cf65317cb6552db03 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 19 Jun 2012 23:36:35 -0700 Subject: Showing Bound Items in hud Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 b03c5a06..fddce11c 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 @@ -20,6 +20,10 @@ exports.BindingHud = Montage.create(Component, { value: null }, + boundProperties: { + value: [] + }, + _userComponent: { value: null }, userComponent: { get: function() { @@ -32,6 +36,9 @@ exports.BindingHud = Montage.create(Component, { this.x = val.element.offsetLeft; this.y = val.element.offsetTop; this.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true); + this.application.ninja.objectsController.getObjectBindings(this.userComponent).forEach(function(obj) { + this.boundProperties.push(obj.sourceObjectPropertyPath); + }.bind(this)); this.needsDraw = true; } } @@ -133,7 +140,7 @@ 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)); + //this.parentComponent.parentComponent.handleShowBinding(this.application.ninja.objectsController.getObjectBindings(this.userComponent)); } }, -- cgit v1.2.3 From 7cd6ad42bbe799a66124344a463b5a571a2e892a Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 20 Jun 2012 10:57:56 -0700 Subject: Binding View - Hover Scroll Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.js | 114 ++++++++++++++++++++- 1 file changed, 113 insertions(+), 1 deletion(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 fddce11c..4b40d4da 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 @@ -12,6 +12,24 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.BindingHud = Montage.create(Component, { + scrollUp: { + value: null + }, + scrollable: { + value: false + }, + scrollInterval: { + value: null + }, + scrollDown: { + value: null + }, + scrollSpace: { + value: 3 + }, + currentScrollDirection: { + value: null + }, _bindingArgs: { value: null }, @@ -24,6 +42,10 @@ exports.BindingHud = Montage.create(Component, { value: [] }, + optionsRepeater: { + value: null + }, + _userComponent: { value: null }, userComponent: { get: function() { @@ -141,6 +163,86 @@ 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)); + if(this.scrollSpace < this.properties.length) { + this.scrollUp.addEventListener("mouseover", this); + this.scrollDown.addEventListener("mouseover", this); + this.scrollUp.addEventListener("mouseout", this); + this.scrollDown.addEventListener("mouseout", this); + this.scrollUp.style.display = "block"; + this.scrollDown.style.display = "block"; + } + } + }, + + isOverScroller: { + value: function(mousePoint) { + if(this.scrollSpace < this.properties.length) { + if (this.scrollInterval === null) { + var newX = mousePoint.x - this.x; + var newY = mousePoint.y - this.y; + var scrollUpStartX = 5; + var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth; + var scrollUpStartY = this.titleElement.offsetHeight; + var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight; + + var scrollDownStartX = 5; + var scrollDownEndX = scrollUpStartX + this.titleElement.offsetWidth; + var scrollDownStartY = scrollUpEndY + this.optionsRepeater.element.offsetHeight; + //scrollDownEndy to small find out y; + var scrollDownEndY = scrollUpEndY + this.scrollDown.offsetHeight; + console.log(scrollDownStartX,scrollDownEndX, scrollDownStartY, scrollDownEndY, newX, newY ); + if(scrollDownStartX < newX && (scrollDownEndX) > newX) { + if(scrollDownStartY < newY && (scrollDownEndY) > newY) { + debugger; + } + } + } + } + } + }, + + handleScroll: { + value: function(direction) { + if(direction === "down") { + this.scrollInterval = setInterval(function() { + self.optionsRepeater.element.scrollTop += 18; + }, 200); + } else { + this.scrollInterval = setInterval(function() { + self.optionsRepeater.element.scrollTop -= 18; + }, 200); + } + } + }, + + handleMouseover: { + value: function(e) { + if(this.scrollSpace < this.properties.length) { + if (this.scrollInterval === null) { + if (e._event.target.classList.contains("scrollAreaBottom")) { + self = e._event.target.parentElement.controller; + //e._event.target.parentElement.controller.currentScrollDirection = "down"; + this.scrollInterval = setInterval(function() { + self.optionsRepeater.element.scrollTop += 3; + }, 50); + } else { + this.scrollInterval = setInterval(function() { + self.optionsRepeater.element.scrollTop -= 3; + }, 50); + } + } + } + this.needsDraw = true; + } + }, + + + + handleMouseout: { + value: function() { + clearInterval(this.scrollInterval); + this.scrollInterval = null; + this.currentScrollDirection = null; } }, @@ -149,11 +251,21 @@ exports.BindingHud = Montage.create(Component, { this.titleElement.innerHTML = this.title; this.element.style.top = (this.y + this._resizedY) + "px"; this.element.style.left = (this.x + this._resizedX) + "px"; + +// if(this.currentScrollDirection !== null) { +// if(this.currentScrollDirection === "up") { +// this.optionsRepeater.element.scrollTop -= 18; +// } else { +// this.optionsRepeater.element.scrollTop += 18; +// } +// } } }, didDraw: { value: function() { - +// if (this.currentScrollDirection !== null) { +// this.needsDraw=true; +// } } } }); \ No newline at end of file -- cgit v1.2.3 From 8ac2ce1566995c91fe4721df2b121ed6437b9e1c Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 20 Jun 2012 12:40:49 -0700 Subject: Binding HUD - Show hud for "off stage" objects in tray --- .../binding-hud.reel/binding-hud.js | 44 ++++++++++++++++++---- 1 file changed, 37 insertions(+), 7 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 4b40d4da..cc94e844 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 @@ -52,17 +52,35 @@ exports.BindingHud = Montage.create(Component, { return this._userComponent; }, set: function(val) { - if (typeof(val) !== "undefined") { - this._userComponent = val; + if(!val) { return; } + + var controller = this.application.ninja.objectsController, + bindingView = this.parentComponent.parentComponent, + isOffStage, icon, iconOffsets; + + this._userComponent = val; + this.properties = controller.getPropertiesFromObject(val, true); + + controller.getObjectBindings(this.userComponent).forEach(function(obj) { + this.boundProperties.push(obj.sourceObjectPropertyPath); + }, this); + + isOffStage = controller.isOffStageObject(val); + + if(isOffStage) { + icon = bindingView.getOffStageIcon(val); + iconOffsets = this.getElementOffsetToParent(icon.element, bindingView.element); + this.title = icon.name; + this.x = iconOffsets.x; + this.y = iconOffsets.y - 80; + } else { this.title = val.identifier; this.x = val.element.offsetLeft; this.y = val.element.offsetTop; - this.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true); - this.application.ninja.objectsController.getObjectBindings(this.userComponent).forEach(function(obj) { - this.boundProperties.push(obj.sourceObjectPropertyPath); - }.bind(this)); - this.needsDraw = true; } + + this.needsDraw = true; + } }, @@ -111,6 +129,18 @@ exports.BindingHud = Montage.create(Component, { } }, + getElementOffsetToParent : { + value: function(element, parent) { + var nodeToPage = webkitConvertPointFromNodeToPage(element, new WebKitPoint(0, 0)), + parentToPage = webkitConvertPointFromNodeToPage(parent, new WebKitPoint(0, 0)); + + return { + x : nodeToPage.x - parentToPage.x, + y : nodeToPage.y - parentToPage.y + } + } + }, + _x: { value: 20 }, -- cgit v1.2.3 From 5c770b772179cc2c3a0455f67025978b44e4b547 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 20 Jun 2012 13:06:11 -0700 Subject: binding-hud Scroll Up Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.js | 68 +++++++++++++--------- 1 file changed, 40 insertions(+), 28 deletions(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 4b40d4da..0893e8d8 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 @@ -175,42 +175,54 @@ exports.BindingHud = Montage.create(Component, { }, isOverScroller: { - value: function(mousePoint) { + value: function(e) { if(this.scrollSpace < this.properties.length) { - if (this.scrollInterval === null) { - var newX = mousePoint.x - this.x; - var newY = mousePoint.y - this.y; - var scrollUpStartX = 5; - var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth; - var scrollUpStartY = this.titleElement.offsetHeight; - var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight; - - var scrollDownStartX = 5; - var scrollDownEndX = scrollUpStartX + this.titleElement.offsetWidth; - var scrollDownStartY = scrollUpEndY + this.optionsRepeater.element.offsetHeight; - //scrollDownEndy to small find out y; - var scrollDownEndY = scrollUpEndY + this.scrollDown.offsetHeight; - console.log(scrollDownStartX,scrollDownEndX, scrollDownStartY, scrollDownEndY, newX, newY ); - if(scrollDownStartX < newX && (scrollDownEndX) > newX) { - if(scrollDownStartY < newY && (scrollDownEndY) > newY) { - debugger; - } + var isOverScroller = false; + var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); + + var scrollUpStartX = 5; + var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth; + var scrollUpStartY = this.titleElement.offsetHeight; + var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight; + if(scrollUpStartX < mousePoint.x && (scrollUpEndX) > mousePoint.x) { + if(scrollUpStartY < mousePoint.y && (scrollUpEndY) > mousePoint.y) { + this.handleScroll("up"); + isOverScroller = true; } } + + var scrollDownStartX = 5; + var scrollDownEndX = scrollDownStartX + this.titleElement.offsetWidth; + var scrollDownStartY = scrollUpEndY + this.optionsRepeater.element.offsetHeight; + var scrollDownEndY = scrollDownStartY + this.scrollDown.offsetHeight; + + if(scrollDownStartX < mousePoint.x && (scrollDownEndX) > mousePoint.x) { + if(scrollDownStartY < mousePoint.y && (scrollDownEndY) > mousePoint.y) { + this.handleScroll("down"); + isOverScroller = true; + } + } + + if(!isOverScroller) { + clearInterval(this.scrollInterval); + this.scrollInterval = null; + } } } }, handleScroll: { value: function(direction) { - if(direction === "down") { - this.scrollInterval = setInterval(function() { - self.optionsRepeater.element.scrollTop += 18; - }, 200); - } else { - this.scrollInterval = setInterval(function() { - self.optionsRepeater.element.scrollTop -= 18; - }, 200); + if (this.scrollInterval === null) { + if(direction === "down") { + this.scrollInterval = setInterval(function() { + this.optionsRepeater.element.scrollTop += 3; + }.bind(this), 50); + } else { + this.scrollInterval = setInterval(function() { + this.optionsRepeater.element.scrollTop -= 3; + }.bind(this), 50); + } } } }, @@ -232,7 +244,7 @@ exports.BindingHud = Montage.create(Component, { } } } - this.needsDraw = true; + //this.needsDraw = true; } }, -- cgit v1.2.3 From f7c14e54c52bce8875cde81db621dde6f4ff1e34 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 20 Jun 2012 14:59:49 -0700 Subject: Binding-View : Polish state Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 dd88bef7..52bc7236 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 @@ -212,7 +212,7 @@ exports.BindingHud = Montage.create(Component, { var scrollUpStartX = 5; var scrollUpEndX = scrollUpStartX + this.titleElement.offsetWidth; - var scrollUpStartY = this.titleElement.offsetHeight; + var scrollUpStartY = this.titleElement.offsetHeight + 5; var scrollUpEndY = scrollUpStartY + this.scrollUp.offsetHeight; if(scrollUpStartX < mousePoint.x && (scrollUpEndX) > mousePoint.x) { if(scrollUpStartY < mousePoint.y && (scrollUpEndY) > mousePoint.y) { -- cgit v1.2.3 From 9ba766f77c56619cd977fce59cf1a000cbb9ecc8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 21 Jun 2012 14:09:29 -0700 Subject: Binding View: Hud Scroll Limit Is now 8 Signed-off-by: Armen Kesablyan --- js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/stage/binding-view.reel/binding-hud.reel/binding-hud.js') 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 52bc7236..9918b06d 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,7 +25,7 @@ exports.BindingHud = Montage.create(Component, { value: null }, scrollSpace: { - value: 3 + value: 8 }, currentScrollDirection: { value: null @@ -198,6 +198,7 @@ exports.BindingHud = Montage.create(Component, { this.scrollDown.addEventListener("mouseover", this); this.scrollUp.addEventListener("mouseout", this); this.scrollDown.addEventListener("mouseout", this); + this.optionsRepeater.element.style.maxHeight = (this.scrollSpace * 18) + "px" this.scrollUp.style.display = "block"; this.scrollDown.style.display = "block"; } -- cgit v1.2.3