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.css | 2 +- .../binding-hud.reel/binding-hud.html | 21 ++++++ .../binding-hud.reel/binding-hud.js | 74 ++++++++++++++++++++-- js/stage/binding-view.reel/binding-view.css | 3 +- js/stage/binding-view.reel/binding-view.html | 11 ---- js/stage/binding-view.reel/binding-view.js | 15 ++++- 6 files changed, 107 insertions(+), 19 deletions(-) (limited to 'js/stage') diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css index aa204be7..e177963f 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css @@ -40,7 +40,7 @@ line-height:16px; padding:1px 9px; } -.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble { +.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble { background: #5e9eff; display:block; } diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html index afa4cd47..38d2a2ec 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html @@ -35,6 +35,27 @@ "bindings": { "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} } + }, + "resizer1": { + "prototype": "js/panels/resize-composer", + "properties": { + "element": {"#": "title"}, + "component": {"@": "owner"} + }, + "listeners": [ + { + "type": "resizeStart", + "listener": {"@": "owner"} + }, + { + "type": "resizeMove", + "listener": {"@": "owner"} + }, + { + "type": "resizeEnd", + "listener": {"@": "owner"} + } + ] } } 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); } } diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css index ff4f2510..7f5de0b8 100755 --- a/js/stage/binding-view.reel/binding-view.css +++ b/js/stage/binding-view.reel/binding-view.css @@ -7,8 +7,7 @@ .bindingView { position: absolute; width:100%; - height:100%; - z-index: 6; + z-index: 12; } .hudRepeater { diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 90ef2286..4eea3cc4 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -37,17 +37,6 @@ "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 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