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-option.reel/binding-hud-option.js | 35 +++++-- .../binding-hud.reel/binding-hud.css | 23 ++--- .../binding-hud.reel/binding-hud.html | 15 +-- .../binding-hud.reel/binding-hud.js | 53 ++++++++++- js/stage/binding-view.reel/binding-view.css | 11 ++- js/stage/binding-view.reel/binding-view.html | 9 +- js/stage/binding-view.reel/binding-view.js | 103 +++++++++++++-------- 7 files changed, 169 insertions(+), 80 deletions(-) (limited to 'js/stage') 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 07cbff11..78189415 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 @@ -12,30 +12,53 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.BindingHudOption = Montage.create(Component, { + _title: { + value: null + }, + title: { - value: "value" + get: function() { + return this._title; + }, + set: function(val) { + this._title = val; + this.needsDraw = true; + } }, - _bindings: { + + bound: { + value: false + }, + + _hudOptions: { value: [] }, - bindings: { + hudOptions: { get: function() { - return this._bindings; + return this._hudOptions; }, set: function(val) { - this._bindings = val; + this._hudOptions = val; + this.title = val.title; + this.bound = val.bound; this.needsDraw = true; } }, draw: { value:function() { - if(this.bindings.length > 0) { + if(this.bound) { + console.log(this.title); this.element.classList.add("bound"); } else { this.element.classList.remove("bound"); } +// if(this.bindings.length > 0) { +// this.element.classList.add("bound"); +// } else { +// this.element.classList.remove("bound"); +// } } } }); \ No newline at end of file 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 34f14a5a..aa204be7 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 @@ -6,7 +6,7 @@ .bindingHud { position: absolute; - background: #282828; + background: rgba(0, 0, 0, 0.8); padding: 0px; color: #FFF; font-size: 11px; @@ -15,6 +15,7 @@ padding: 3px; padding-top:0px; border:1px solid #000; + text-shadow: 1px 1px 0px #000; } .bindingHud .bindingTitle { @@ -27,9 +28,8 @@ } .bindingHud .hudRepetition { - background: #555; + background: rgba(0, 0, 0, 0.3); line-height:16px; - border:1px solid #000; box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; min-width: 80px; } @@ -41,7 +41,8 @@ padding:1px 9px; } .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble { - background-color:#44F; + background: #5e9eff; + display:block; } .bindingHud .hudOption:last-child { @@ -50,14 +51,14 @@ .bindingHud .hudOption .connectorBubble { position: absolute; - right: -11px; - top: 2px; - background: #555; - border: 1px solid black; - border-radius: 0px; - width: 12px; - height: 12px; + right: -10px; + top: 1px; + background: rgba(0, 0, 0, 0.3); + border-radius: 50%; + width: 16px; + height: 16px; border-left: 0px; + display: none; /*border-bottom-right-radius: 50%; border-top-right-radius: 50%;*/ 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 5e37cfc9..afa4cd47 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 @@ -14,7 +14,8 @@ "owner": { "prototype": "js/stage/binding-view.reel/binding-hud.reel", "properties": { - "element": {"#": "bindingHud"} + "element": {"#": "bindingHud"}, + "titleElement": {"#": "title"} } }, "repeater": { @@ -32,17 +33,7 @@ "element": {"#" : "hudOption"} }, "bindings": { - "title": {"<-": "@repeater.objectAtCurrentIteration.title"}, - "bindings": {"<-": "@repeater.objectAtCurrentIteration.bindings"} - } - }, - "Title": { - "prototype": "montage/ui/dynamic-text.reel", - "properties": { - "element": {"#": "title"} - }, - "bindings": { - "value": {"<-": "@owner.title"} + "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} } } } 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 diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css index 41514d7b..ff4f2510 100755 --- a/js/stage/binding-view.reel/binding-view.css +++ b/js/stage/binding-view.reel/binding-view.css @@ -8,12 +8,19 @@ position: absolute; width:100%; height:100%; - z-index: 1; + z-index: 6; +} + +.hudRepeater { + position: absolute; + width:100%; + height:100%; + z-index: 2; } .bindingViewCanvas { width:100%; height:100%; position:absolute; - z-index: 2; + z-index: 1; } \ No newline at end of file diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 0f01e9ff..4eea3cc4 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -16,7 +16,7 @@ "properties": { "element": {"#": "bindingView"}, "hudRepeater": {"@": "hudRepeater"}, - "bindingViewCanvas": {"#": "bindingViewCanvas"} + "canvas": {"#": "bindingViewCanvas"} } }, "hudRepeater": { @@ -34,10 +34,7 @@ "element": {"#" : "hud"} }, "bindings": { - "title": {"<-": "@hudRepeater.objectAtCurrentIteration.title"}, - "properties": {"<-": "@hudRepeater.objectAtCurrentIteration.properties"}, - "x": {"<-": "@hudRepeater.objectAtCurrentIteration.x"}, - "y": {"<-": "@hudRepeater.objectAtCurrentIteration.y"} + "bindingArgs": {"<-": "@hudRepeater.objectAtCurrentIteration"} } }, "nonVisualRepeater": { @@ -67,7 +64,7 @@
-
+
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